Quellcode durchsuchen

feat(discover): 创建发现页作为登录前首页,未登录重定向

User vor 3 Monaten
Ursprung
Commit
35c9492c22

+ 260 - 21
zxyj-frontend/pages/discover/index.vue

@@ -1,49 +1,288 @@
 <template>
-  <view class="container">
-    <view class="placeholder">
-      <text class="icon">🔍</text>
-      <text class="title">发现</text>
-      <text class="desc">活动与课程即将上线,敬请期待</text>
+  <view class="discover-container">
+    <!-- 品牌头部 -->
+    <view class="brand-header">
+      <image class="brand-logo" src="/static/logo.png" mode="aspectFit" />
+      <text class="brand-title">汐艾福</text>
+      <text class="brand-slogan">遵循五行节律,陪伴孩子自然成长</text>
+    </view>
+
+    <!-- 五行沙盘预览 -->
+    <wuxing-sandbox mode="preview" badgeText="登录查看完整报告" @point-click="handleLogin" />
+
+    <!-- 活动/商品推荐 -->
+    <view class="recommend-section">
+      <view class="section-header">
+        <text class="section-title">🔥 热门推荐</text>
+        <text class="section-more" @click="handleLogin">查看更多 ›</text>
+      </view>
+      <scroll-view class="recommend-scroll" scroll-x enable-flex show-scrollbar="false">
+        <view class="recommend-card" @click="handleLogin">
+          <view class="card-banner">测评</view>
+          <view class="card-body">
+            <text class="card-title">DAN少儿核心素养评估</text>
+            <text class="card-desc">科学评估五大维度成长水平</text>
+            <view class="card-meta">
+              <text class="card-price">¥299起</text>
+              <text class="card-tag">限时优惠</text>
+            </view>
+          </view>
+        </view>
+        <view class="recommend-card" @click="handleLogin">
+          <view class="card-banner" style="background: #52c41a;">课程</view>
+          <view class="card-body">
+            <text class="card-title">专注力训练营</text>
+            <text class="card-desc">21天提升孩子专注力</text>
+            <view class="card-meta">
+              <text class="card-price">¥199</text>
+              <text class="card-tag">火热报名</text>
+            </view>
+          </view>
+        </view>
+        <view class="recommend-card" @click="handleLogin">
+          <view class="card-banner" style="background: #722ed1;">活动</view>
+          <view class="card-body">
+            <text class="card-title">亲子户外探索营</text>
+            <text class="card-desc">周末一起探索自然</text>
+            <view class="card-meta">
+              <text class="card-price">¥99起</text>
+              <text class="card-tag">本周末</text>
+            </view>
+          </view>
+        </view>
+      </scroll-view>
+    </view>
+
+    <!-- 为何选择汐艾福 -->
+    <view class="why-section">
+      <view class="section-header">
+        <text class="section-title">💡 为什么选择汐艾福</text>
+      </view>
+      <view class="feature-grid">
+        <view class="feature-item">
+          <text class="feature-icon">🎯</text>
+          <text class="feature-title">科学评估</text>
+          <text class="feature-desc">DAN少儿核心素养评估体系</text>
+        </view>
+        <view class="feature-item">
+          <text class="feature-icon">🏆</text>
+          <text class="feature-title">积分激励</text>
+          <text class="feature-desc">完成任务得积分,兑换心愿</text>
+        </view>
+        <view class="feature-item">
+          <text class="feature-icon">👨‍👩‍👧‍👦</text>
+          <text class="feature-title">家庭参与</text>
+          <text class="feature-desc">全家一起见证成长每一步</text>
+        </view>
+        <view class="feature-item">
+          <text class="feature-icon">🌟</text>
+          <text class="feature-title">专业规划</text>
+          <text class="feature-desc">成长规划师一对一指导</text>
+        </view>
+      </view>
+    </view>
+
+    <!-- 底部登录按钮 -->
+    <view class="login-footer">
+      <button class="login-btn" @click="handleLogin">登录 / 注册</button>
+      <text class="login-footer-text">登录即表示同意《用户协议》和《隐私政策》</text>
     </view>
   </view>
 </template>
 
 <script>
+import WuxingSandbox from '../../components/wuxing-sandbox.vue'
+
 export default {
+  components: { WuxingSandbox },
   data() {
     return {}
   },
-  onLoad() {}
+  onShow() {
+    this.resetTabBar()
+  },
+  methods: {
+    resetTabBar() {
+      uni.setTabBarItem({ index: 1, text: '发现' })
+      uni.setTabBarItem({ index: 2, text: '商城' })
+    },
+    handleLogin() {
+      uni.navigateTo({ url: '/pages/login/login' })
+    }
+  }
 }
 </script>
 
-<style>
-.container {
+<style scoped>
+.discover-container {
+  min-height: 100vh;
+  background: #f5f7fa;
+  padding-bottom: 100rpx;
+}
+
+/* ===== 品牌头部 ===== */
+.brand-header {
   display: flex;
-  justify-content: center;
+  flex-direction: column;
   align-items: center;
-  min-height: 100vh;
-  background: #f8f8f8;
+  padding: 60rpx 30rpx 30rpx;
+  background: linear-gradient(180deg, #1a1a2e 0%, #16213e 60%, #f5f7fa 100%);
 }
-.placeholder {
+.brand-logo {
+  width: 120rpx;
+  height: 120rpx;
+  border-radius: 24rpx;
+  margin-bottom: 16rpx;
+}
+.brand-title {
+  font-size: 44rpx;
+  font-weight: bold;
+  color: #FFD700;
+  letter-spacing: 8rpx;
+}
+.brand-slogan {
+  font-size: 24rpx;
+  color: rgba(255, 215, 0, 0.7);
+  margin-top: 10rpx;
+}
+
+/* ===== 推荐 ===== */
+.recommend-section {
+  margin: 20rpx 30rpx;
+}
+.section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20rpx;
+}
+.section-title {
+  font-size: 30rpx;
+  font-weight: bold;
+  color: #333;
+}
+.section-more {
+  font-size: 24rpx;
+  color: #FF6B6B;
+}
+.recommend-scroll {
+  display: flex;
+  white-space: nowrap;
+  overflow-x: auto;
+  padding-bottom: 10rpx;
+}
+.recommend-card {
+  display: inline-flex;
+  flex-direction: column;
+  width: 260rpx;
+  background: #fff;
+  border-radius: 20rpx;
+  overflow: hidden;
+  margin-right: 20rpx;
+  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
+}
+.card-banner {
+  padding: 14rpx 20rpx;
+  background: #FF6B6B;
+  color: #fff;
+  font-size: 22rpx;
+  font-weight: bold;
+  text-align: center;
+}
+.card-body {
+  padding: 16rpx;
+  white-space: normal;
+}
+.card-title {
+  font-size: 24rpx;
+  font-weight: bold;
+  color: #333;
+  display: block;
+  margin-bottom: 6rpx;
+}
+.card-desc {
+  font-size: 20rpx;
+  color: #999;
+  display: block;
+  margin-bottom: 10rpx;
+}
+.card-meta {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.card-price {
+  font-size: 26rpx;
+  color: #FF6B6B;
+  font-weight: bold;
+}
+.card-tag {
+  font-size: 18rpx;
+  color: #FF6B6B;
+  background: rgba(255,107,107,0.1);
+  padding: 2rpx 10rpx;
+  border-radius: 10rpx;
+}
+
+/* ===== 为何选择 ===== */
+.why-section {
+  margin: 30rpx;
+}
+.feature-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20rpx;
+}
+.feature-item {
+  background: #fff;
+  border-radius: 20rpx;
+  padding: 24rpx;
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 100rpx 40rpx;
+  text-align: center;
+  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
 }
-.icon {
-  font-size: 120rpx;
-  margin-bottom: 30rpx;
+.feature-icon {
+  font-size: 48rpx;
+  margin-bottom: 10rpx;
 }
-.title {
-  font-size: 40rpx;
+.feature-title {
+  font-size: 24rpx;
   font-weight: bold;
   color: #333;
-  margin-bottom: 20rpx;
+  margin-bottom: 6rpx;
 }
-.desc {
-  font-size: 28rpx;
+.feature-desc {
+  font-size: 20rpx;
   color: #999;
+}
+
+/* ===== 底部登录 ===== */
+.login-footer {
+  margin: 40rpx 30rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.login-btn {
+  width: 100%;
+  height: 88rpx;
+  line-height: 88rpx;
+  background: linear-gradient(135deg, #FF6B6B, #FF8E53);
+  color: #fff;
+  font-size: 32rpx;
+  font-weight: bold;
+  border-radius: 44rpx;
   text-align: center;
+  border: none;
+}
+.login-btn::after {
+  border: none;
+}
+.login-footer-text {
+  font-size: 20rpx;
+  color: #bbb;
+  margin-top: 16rpx;
 }
 </style>

+ 14 - 0
zxyj-frontend/pages/index/index.vue

@@ -34,6 +34,10 @@ export default {
     }
   },
 onLoad(options) {
+      if (!this.isLoggedIn()) {
+        this.goDiscover()
+        return
+      }
       this.syncRoleAndTabBar()
       // 检查是否有邀请码参数
       if (options.inviteCode && options.type === 'parent_invite') {
@@ -51,9 +55,19 @@ onLoad(options) {
       }
     },
   onShow() {
+    if (!this.isLoggedIn()) {
+      this.goDiscover()
+      return
+    }
     this.syncRoleAndTabBar()
   },
   methods: {
+    isLoggedIn() {
+      return !!uni.getStorageSync('token')
+    },
+    goDiscover() {
+      uni.switchTab({ url: '/pages/discover/index' })
+    },
     normalizeCurrentRole() {
       const role = uni.getStorageSync('role') || 'parent'
       const currentRole = uni.getStorageSync('currentRole')

+ 69 - 2
zxyj-frontend/pages/profile/profile.vue

@@ -1,5 +1,15 @@
 <template>
   <view class="container">
+    <!-- ===== 未登录状态 ===== -->
+    <view v-if="!isLoggedIn" class="login-prompt">
+      <view class="prompt-icon">👤</view>
+      <text class="prompt-title">登录汐艾福</text>
+      <text class="prompt-desc">登录后可查看个人资料、积分记录等</text>
+      <button class="login-btn" @click="goLogin">登录 / 注册</button>
+    </view>
+
+    <!-- ===== 已登录状态 ===== -->
+    <template v-else>
     <!-- 退出切换按钮(仅家长切换到孩子状态时显示) -->
     <view class="exit-switch" v-if="isSwitchedChild" @click="exitSwitch">
       <text>🔄 退出切换</text>
@@ -84,6 +94,7 @@
         </view>
       </view>
     </view>
+    </template>
   </view>
 </template>
 
@@ -105,8 +116,13 @@ export default {
       shareData: null,
       isVendor: false
     }
-  },
-  onShareAppMessage() {
+  },
+  computed: {
+    isLoggedIn() {
+      return !!uni.getStorageSync('token')
+    }
+  },
+  onShareAppMessage() {
     if (this.shareData) {
       return {
         title: this.shareData.title,
@@ -116,6 +132,7 @@ export default {
     }
   },
   onShow() {
+    if (!uni.getStorageSync('token')) return
     const currentRole = uni.getStorageSync('currentRole') || uni.getStorageSync('role') || 'parent'
     if (currentRole === 'teacher') {
       uni.redirectTo({ url: '/pages/teacher/teacher-profile' })
@@ -132,6 +149,9 @@ export default {
     this.checkVendorStatus()
   },
   methods: {
+    goLogin() {
+      uni.navigateTo({ url: '/pages/login/login' })
+    },
     async loadChildren() {
       try {
         const res = await getChildren()
@@ -468,4 +488,51 @@ export default {
 .modal-btns button {
   flex: 1;
 }
+
+/* ===== 未登录提示 ===== */
+.login-prompt {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 80vh;
+  padding: 60rpx;
+}
+.prompt-icon {
+  font-size: 120rpx;
+  margin-bottom: 30rpx;
+  width: 160rpx;
+  height: 160rpx;
+  line-height: 160rpx;
+  text-align: center;
+  background: #f5f5f5;
+  border-radius: 50%;
+}
+.prompt-title {
+  font-size: 36rpx;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 16rpx;
+}
+.prompt-desc {
+  font-size: 26rpx;
+  color: #999;
+  text-align: center;
+  margin-bottom: 40rpx;
+}
+.login-prompt .login-btn {
+  width: 60%;
+  height: 80rpx;
+  line-height: 80rpx;
+  background: linear-gradient(135deg, #FF6B6B, #FF8E53);
+  color: #fff;
+  font-size: 30rpx;
+  font-weight: bold;
+  border-radius: 40rpx;
+  text-align: center;
+  border: none;
+}
+.login-prompt .login-btn::after {
+  border: none;
+}
 </style>