feat(index): 登录前首页重构 - 首屏呈现平台定位/价值主张/三步上手引导

cfc-frontend/pages/index-home/index.vue

@@ -250,52 +250,74 @@
         <view class="hero-dim"><text class="hero-dim-emoji">🌿</text><text class="hero-dim-label">行·和谐</text></view>
         <view class="hero-dim"><text class="hero-dim-emoji">🔥</text><text class="hero-dim-label">心·大爱</text></view>
       </view>
-    </view>
 
-    <!-- 五行沙盘预览 -->
-    <wuxing-sandbox mode="preview" badgeText="登录查看完整报告" @point-click="handleLogin" />
+      <text class="hero-sub-slogan">不等问题发生，先一步 识别风险 · 主动干预 · 持续评估</text>
 
-    <!-- 活动/商品推荐 -->
-    <view class="recommend-section">
-      <view class="section-header">
-        <text class="section-title">🔥 热门推荐</text>
-        <text class="section-more" @click="goShop">查看更多 ›</text>
-      </view>
-      <scroll-view scroll-x enable-flex show-scrollbar="false" class="type-filter-scroll">
-        <view
-          v-for="item in typeList"
-          :key="item.value"
-          :class="['filter-chip', currentType === item.value ? 'active' : '']"
-          @click="onTypeChange(item.value)"
-        >
-          {{ item.label }}
+      <button class="hero-cta-btn" @click="handleLogin">免费体验 · 登录 / 注册</button>
+    </view>
+
+    <!-- ② 平台作用·价值主张 -->
+    <view class="value-prop-section">
+      <text class="value-prop-title">为什么选择浠艾福？</text>
+      <view class="value-prop-grid">
+        <view class="value-prop-card">
+          <text class="value-prop-icon">🧪</text>
+          <view class="value-prop-texts">
+            <text class="value-prop-name">免费五维测评</text>
+            <text class="value-prop-desc">从身体到心智，20 分钟看清全家健康状况</text>
+          </view>
         </view>
-      </scroll-view>
-      <view v-if="loading" class="loading-state">
-        <text class="loading-text">加载中...</text>
-      </view>
-      <view v-else-if="products.length === 0" class="empty-state">
-        <text class="empty-text">暂无商品，去商城看看吧</text>
-      </view>
-      <view v-else class="product-grid">
-        <view
-          v-for="item in products"
-          :key="item.id"
-          class="product-card"
-          @click="goDetail(item.id)"
-        >
-          <image class="product-cover" :src="getImageUrl(item.coverImage) || '/static/default-product.png'" mode="aspectFill" />
-          <view class="product-info">
-            <text class="product-name">{{ item.name }}</text>
-            <view class="product-price-row">
-              <text class="product-price" v-if="item.price && item.price > 0">¥{{ (item.price / 100).toFixed(0) }}</text>
-              <text class="product-price-free" v-else>免费</text>
-            </view>
+        <view class="value-prop-card">
+          <text class="value-prop-icon">🎯</text>
+          <view class="value-prop-texts">
+            <text class="value-prop-name">个性化成长方案</text>
+            <text class="value-prop-desc">基于测评数据，AI+专家定制专属行动计划</text>
+          </view>
+        </view>
+        <view class="value-prop-card">
+          <text class="value-prop-icon">👨‍👩‍👧</text>
+          <view class="value-prop-texts">
+            <text class="value-prop-name">全家共管</text>
+            <text class="value-prop-desc">一个家庭一张网，夫妻协同、孩子参与，成长看得见</text>
+          </view>
+        </view>
+        <view class="value-prop-card">
+          <text class="value-prop-icon">📈</text>
+          <view class="value-prop-texts">
+            <text class="value-prop-name">任务与积分激励</text>
+            <text class="value-prop-desc">把健康管理变成每天的小行动，习惯自然养成</text>
           </view>
         </view>
       </view>
     </view>
 
+    <!-- ③ 三步上手 -->
+    <view class="how-it-works">
+      <text class="how-it-works-title">三步开启全家健康之旅</text>
+      <view class="step-row">
+        <view class="step-item">
+          <view class="step-num">1</view>
+          <text class="step-name">登录/注册</text>
+          <text class="step-sub">（30 秒）</text>
+        </view>
+        <view class="step-arrow">›</view>
+        <view class="step-item">
+          <view class="step-num">2</view>
+          <text class="step-name">完成五维测评</text>
+          <text class="step-sub">（全家各一份）</text>
+        </view>
+        <view class="step-arrow">›</view>
+        <view class="step-item">
+          <view class="step-num">3</view>
+          <text class="step-name">获得专属方案</text>
+          <text class="step-sub">（照着做，持续优化）</text>
+        </view>
+      </view>
+    </view>
+
+    <!-- 五行沙盘预览 -->
+    <wuxing-sandbox mode="preview" badgeText="登录查看完整报告" @point-click="handleLogin" />
+
     <!-- 热门活动（无条件展示） -->
     <view class="section">
       <view class="section-header">
@@ -392,7 +414,7 @@ import ArticleBookshelf from '../../components/ArticleBookshelf.vue'
 import FamilyChallengeCard from '../../components/FamilyChallengeCard.vue'
 import DailyTaskCard from '../../components/daily-task-card.vue'
 import ReportUploadCard from '../../components/report-upload-card.vue'
-import { acceptParentInvite, productList, getActivityList, getFeaturedArticles, getEnergySandbox, getEnergyOverview, getFamilyMemberList, getChallengeList, switchToFamilyMember, getMyMembership, updateChallengeProgress, respondChallenge, getTodayTasks, completeTask as completeTaskApi, getTodayParentTasks, completeParentTask as completeParentTaskApi, getTaskHistory, getNotices, getNotificationList, getSurveyStatus, getSelfCheckStatus, getReferralCode } from '../../utils/api.js'
+import { acceptParentInvite, getActivityList, getFeaturedArticles, getEnergySandbox, getEnergyOverview, getFamilyMemberList, getChallengeList, switchToFamilyMember, getMyMembership, updateChallengeProgress, respondChallenge, getTodayTasks, completeTask as completeTaskApi, getTodayParentTasks, completeParentTask as completeParentTaskApi, getTaskHistory, getNotices, getNotificationList, getSurveyStatus, getSelfCheckStatus, getReferralCode } from '../../utils/api.js'
 import nav from '../../utils/nav.js'
 import config from '@/config.js'
 import { parseDate } from '../../utils/format.js'
@@ -430,17 +452,6 @@ export default {
       selfCheckScore: null,
       selfCheckLoading: false,
 
-      typeList: [
-        { label: '全部', value: '' },
-        { label: '活动', value: 'activity' },
-        { label: '课程', value: 'course' },
-        { label: '实物', value: 'physical' },
-        { label: '数字', value: 'digital' },
-        { label: '服务', value: 'service' }
-      ],
-      currentType: '',
-      products: [],
-      loading: false,
       dimensionActivities: [],
       indexArticles: [],
       articlesLoading: false,
@@ -1113,7 +1124,6 @@ membershipDays: 0,
       options = options || {}
       if (!this.isLoggedIn()) {
         this.currentRole = ''
-        this.loadProducts()
         this.loadDimensionActivities()
         this.loadFeaturedArticles()
         return
@@ -1208,26 +1218,6 @@ membershipDays: 0,
       uni.setStorageSync('currentRole', this.currentRole)
     },
     // ===== 发现页 / 未登录态方法 =====
-    loadProducts: function() {
-      this.loading = true
-      var params = { page: 1, size: 10 }
-      if (this.currentType) {
-        params.productType = this.currentType
-      }
-      var self = this
-      productList(params).then(function(res) {
-        self.loading = false
-        if (res && res.code === 200) {
-          // res.data is the response wrapper, products are in res.data.data or res.data.records
-          var rawData = res.data && (Array.isArray(res.data) ? res.data : (res.data.data || res.data.records || []))
-          self.products = Array.isArray(rawData) ? rawData : []
-        }
-        self._checkSplashReady()
-      }).catch(function() {
-        self.loading = false
-        self._checkSplashReady()
-      })
-    },
     loadDimensionActivities: function() {
       var self = this
       getActivityList({ dimensionCode: '', page: 1, size: 3 }).then(function(res) {
@@ -1289,16 +1279,6 @@ membershipDays: 0,
       var id = article && article.id ? article.id : article
       uni.navigateTo({ url: '/pages/article-center/article-detail?id=' + id })
     },
-    onTypeChange(value) {
-      this.currentType = value
-      this.loadProducts()
-    },
-    goShop() {
-      uni.navigateTo({ url: '/pages/shop/index/index' })
-    },
-    goDetail(id) {
-      uni.navigateTo({ url: '/pages/discover-detail/product-detail/product-detail?id=' + id })
-    },
     handleLogin() {
       uni.navigateTo({ url: '/pages/login/login?redirect=' + encodeURIComponent('/pages/index-home/index') })
     },
@@ -1462,6 +1442,148 @@ membershipDays: 0,
   white-space: nowrap;
 }
 
+/* ===== 未登录态 Hero 副标语 / CTA ===== */
+.hero-sub-slogan {
+  display: block;
+  font-size: 22rpx;
+  color: #EA580C;
+  margin-top: 18rpx;
+  font-weight: 500;
+}
+
+.hero-cta-btn {
+  margin: 28rpx auto 0;
+  display: block;
+  width: 420rpx;
+  height: 80rpx;
+  line-height: 80rpx;
+  background: linear-gradient(135deg, #F97316, #FB923C);
+  color: #fff;
+  font-size: 28rpx;
+  font-weight: bold;
+  border-radius: 40rpx;
+  text-align: center;
+  border: none;
+  box-shadow: 0 8rpx 20rpx rgba(249,115,22,0.3);
+}
+.hero-cta-btn::after {
+  border: none;
+}
+
+/* ===== 价值主张（为什么选择浠艾福） ===== */
+.value-prop-section {
+  margin: 24rpx 30rpx 0;
+}
+.value-prop-title {
+  display: block;
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #333;
+  text-align: center;
+  margin-bottom: 20rpx;
+}
+.value-prop-grid {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+.value-prop-card {
+  width: 48.5%;
+  box-sizing: border-box;
+  background: #fff;
+  border-radius: 20rpx;
+  padding: 22rpx;
+  margin-bottom: 16rpx;
+  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+}
+.value-prop-icon {
+  font-size: 40rpx;
+  line-height: 1.3;
+  margin-right: 12rpx;
+  flex-shrink: 0;
+}
+.value-prop-texts {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+}
+.value-prop-name {
+  font-size: 28rpx;
+  font-weight: bold;
+  color: #333;
+}
+.value-prop-desc {
+  font-size: 22rpx;
+  color: #999;
+  margin-top: 8rpx;
+  line-height: 1.5;
+}
+
+/* ===== 三步上手 ===== */
+.how-it-works {
+  margin: 32rpx 30rpx 0;
+  padding: 32rpx 24rpx;
+  background: #fff;
+  border-radius: 24rpx;
+  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.04);
+}
+.how-it-works-title {
+  display: block;
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #333;
+  text-align: center;
+  margin-bottom: 28rpx;
+}
+.step-row {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+.step-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1;
+  min-width: 0;
+}
+.step-num {
+  width: 48rpx;
+  height: 48rpx;
+  line-height: 48rpx;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #F97316, #FB923C);
+  color: #fff;
+  font-size: 26rpx;
+  font-weight: bold;
+  text-align: center;
+  box-shadow: 0 4rpx 12rpx rgba(249,115,22,0.3);
+}
+.step-name {
+  font-size: 24rpx;
+  color: #333;
+  font-weight: 500;
+  margin-top: 12rpx;
+  text-align: center;
+}
+.step-sub {
+  font-size: 20rpx;
+  color: #999;
+  margin-top: 4rpx;
+  text-align: center;
+}
+.step-arrow {
+  font-size: 28rpx;
+  color: #F97316;
+  line-height: 1;
+  align-self: center;
+  padding: 0 6rpx;
+}
+
 /* ===== 品牌定位语（保留旧样式，不再使用） ===== */
 .brand-strap {
   margin: 16rpx 30rpx 0;
@@ -1531,27 +1653,7 @@ membershipDays: 0,
   font-weight: bold;
 }
 
-/* ===== 推荐 ===== */
-.recommend-section {
-  margin: 20rpx 30rpx;
-}
-.type-filter-scroll {
-  white-space: nowrap;
-  margin-bottom: 20rpx;
-}
-.filter-chip {
-  display: inline-block;
-  padding: 8rpx 24rpx;
-  font-size: 24rpx;
-  color: #666;
-  background: #f0f0f0;
-  border-radius: 30rpx;
-  margin-right: 16rpx;
-}
-.filter-chip.active {
-  background: #5B9BD5;
-  color: #fff;
-}
+/* ===== 活动/阅读共用状态样式 ===== */
 .loading-state,
 .empty-state {
   display: flex;
@@ -1563,54 +1665,6 @@ membershipDays: 0,
   font-size: 26rpx;
   color: #999;
 }
-.product-grid {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-}
-.product-card {
-  width: 48%;
-  background: #fff;
-  border-radius: 16rpx;
-  overflow: hidden;
-  margin-bottom: 20rpx;
-  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.06);
-}
-.product-cover {
-  width: 100%;
-  height: 200rpx;
-  background: #f0f0f0;
-}
-.product-info {
-  padding: 14rpx;
-}
-.product-name {
-  display: block;
-  font-size: 26rpx;
-  color: #333;
-  margin-bottom: 10rpx;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.product-price-row {
-  display: flex;
-  align-items: baseline;
-}
-.product-price {
-  font-size: 28rpx;
-  color: #5B9BD5;
-  font-weight: bold;
-  margin-right: 10rpx;
-}
-.product-price-login {
-  font-size: 24rpx;
-  color: #999;
-}
-.product-member {
-  font-size: 20rpx;
-  color: #999;
-}
 
 /* ===== 五维全景幸福矩阵 ===== */