|
|
@@ -285,130 +285,84 @@
|
|
|
<view v-else class="discover-container">
|
|
|
<!-- 品牌 Hero 区 -->
|
|
|
<view class="hero-section">
|
|
|
- <image class="hero-logo" src="/static/logo.png" mode="aspectFit" />
|
|
|
- <text class="hero-name">浠艾福</text>
|
|
|
- <text class="hero-identity">您的专属家庭主动健康管理师</text>
|
|
|
- <text class="hero-slogan">家里每个人的状态,你真的看见了?</text>
|
|
|
- <text class="hero-powered">亿图腾科技出品</text>
|
|
|
-
|
|
|
+ <view class="brand-bar">
|
|
|
+ <image class="brand-logo" src="/static/logo.png" mode="aspectFit" />
|
|
|
+ <view class="brand-texts">
|
|
|
+ <text class="brand-name">浠艾福</text>
|
|
|
+ <text class="brand-tagline">全家人的主动健康陪跑</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
<view class="hero-dims">
|
|
|
- <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 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 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 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 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>
|
|
|
|
|
|
- <text class="hero-sub-slogan">家庭成员的习惯、长者的身体、自己的精力——不用等到出问题才着急。先看见,先了解,不等问题发生。</text>
|
|
|
+ <text class="hero-slogan">家里每个人的状态,你真的看见了吗?</text>
|
|
|
|
|
|
<button class="hero-cta-btn" @click="handleLogin">免费体验 · 登录 / 注册</button>
|
|
|
+ <text class="hero-powered">亿图腾科技出品</text>
|
|
|
</view>
|
|
|
|
|
|
<!-- ② 平台作用·价值主张 -->
|
|
|
<view class="value-prop-section">
|
|
|
- <text class="value-prop-title">为什么选择浠艾福?</text>
|
|
|
+ <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>
|
|
|
+ <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">基于测评数据,AI+专家定制专属行动计划</text>
|
|
|
+ <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>
|
|
|
+ <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>
|
|
|
+ <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 class="how-it-works how-cta" @click="handleLogin">
|
|
|
+ <text class="how-it-works-title how-flicker">✨ 三步开启全家健康之旅</text>
|
|
|
+ <text class="how-it-works-hint">登录 / 注册后,按引导依次完成,全家健康即刻开始 ›</text>
|
|
|
</view>
|
|
|
|
|
|
<!-- 五行沙盘预览 -->
|
|
|
<wuxing-sandbox mode="preview" badgeText="登录查看完整报告" @point-click="handleLogin" />
|
|
|
|
|
|
- <!-- 热门活动(无条件展示) -->
|
|
|
- <view class="section">
|
|
|
- <view class="section-header">
|
|
|
- <text class="section-title">🔥 热门活动</text>
|
|
|
- <text class="section-more" @click="goActivities">查看更多 ›</text>
|
|
|
- </view>
|
|
|
- <view v-if="dimensionActivities.length === 0" class="empty-state" style="padding: 40rpx 0;">
|
|
|
- <text class="empty-text">暂无活动</text>
|
|
|
- </view>
|
|
|
- <view class="activity-list" v-else>
|
|
|
- <view class="activity-card" v-for="act in dimensionActivities" :key="act.id" @click="goActivityDetail(act)">
|
|
|
- <image class="activity-cover" :src="getImageUrl(act.coverImage) || '/static/default-activity.png'" mode="aspectFill" />
|
|
|
- <view class="activity-info">
|
|
|
- <text class="activity-name line-clamp-1">{{ act.title }}</text>
|
|
|
- <view class="activity-meta">
|
|
|
- <text class="activity-time">{{ act.startTime }}</text>
|
|
|
- </view>
|
|
|
- <view class="activity-bottom">
|
|
|
- <text class="activity-status" :class="'status-' + (act.status || 'upcoming')">{{ act.status === 'ongoing' ? '进行中' : act.status === 'ended' ? '已结束' : '即将开始' }}</text>
|
|
|
- <text class="activity-fee" v-if="act.price && act.price > 0">¥{{ (act.price / 100).toFixed(0) }}</text>
|
|
|
- <text class="activity-fee fee-free" v-else>免费</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 推荐阅读(无条件展示) -->
|
|
|
+ <!-- 推荐阅读(无条件展示,置顶) -->
|
|
|
<view class="section">
|
|
|
<view class="section-header">
|
|
|
<text class="section-title">📖 推荐阅读</text>
|
|
|
- <text class="section-more" @click="goArticles">更多 ›</text>
|
|
|
+ <text class="section-more" :class="!showArticles ? 'blink' : ''" @click="showArticles = !showArticles">{{ showArticles ? '收起 ‹' : '查看更多 ›' }}</text>
|
|
|
</view>
|
|
|
- <view class="article-list">
|
|
|
+ <view v-if="showArticles" class="article-list">
|
|
|
<view v-if="articlesLoading" class="loading-state" style="padding: 40rpx 0;">
|
|
|
<text class="loading-text">加载中...</text>
|
|
|
</view>
|
|
|
<!-- 无数据时显示占位卡片 -->
|
|
|
<template v-else-if="indexArticles.length === 0">
|
|
|
<view class="article-card" v-for="(item, i) in [1,2,3]" :key="i">
|
|
|
- <view class="article-category" :style="{ background: gradientColors[(i-1) % gradientColors.length] }">
|
|
|
- <text class="article-category-text">推荐文章</text>
|
|
|
- </view>
|
|
|
<text class="article-title">暂无推荐文章</text>
|
|
|
<text class="article-summary">精彩内容即将上线,敬请期待</text>
|
|
|
<view class="article-meta">
|
|
|
@@ -416,16 +370,12 @@
|
|
|
<text class="meta-icon">📖</text>
|
|
|
<text class="meta-text">0</text>
|
|
|
</view>
|
|
|
- <text class="article-date">--</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
- <!-- 有数据时显示文章卡片 -->
|
|
|
+ <!-- 有数据时显示文章卡片(仅前 3 篇) -->
|
|
|
<template v-else>
|
|
|
- <view class="article-card" v-for="article in indexArticles" :key="article.id" @click="goArticleDetail(article.id)">
|
|
|
- <view class="article-category" :style="{ background: article.categoryColor }">
|
|
|
- <text class="article-category-text">{{ article.category }}</text>
|
|
|
- </view>
|
|
|
+ <view class="article-card" v-for="article in indexArticles.slice(0, 3)" :key="article.id" @click="goArticleDetail(article.id)">
|
|
|
<text class="article-title">{{ article.title }}</text>
|
|
|
<text class="article-summary">{{ article.summary }}</text>
|
|
|
<view class="article-meta">
|
|
|
@@ -433,24 +383,74 @@
|
|
|
<text class="meta-icon">📖</text>
|
|
|
<text class="meta-text">{{ article.views }}</text>
|
|
|
</view>
|
|
|
- <text class="article-date">{{ article.date }}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
+ <text v-if="indexArticles.length > 3" class="section-more blink" style="display: block; text-align: right; margin-top: 12rpx;" @click="goArticles">查看全部 ›</text>
|
|
|
</template>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
- <!-- 底部登录按钮 -->
|
|
|
- <view class="login-footer">
|
|
|
- <button class="login-btn" @click="handleLogin">登录 / 注册</button>
|
|
|
+ <!-- 热门商品(默认收起,点击查看更多后展开,与热门活动同款交互) -->
|
|
|
+ <view class="section">
|
|
|
+ <view class="section-header">
|
|
|
+ <text class="section-title">🛒 热门商品</text>
|
|
|
+ <text class="section-more" :class="!showProducts ? 'blink' : ''" @click="showProducts = !showProducts">{{ showProducts ? '收起 ‹' : '查看更多 ›' }}</text>
|
|
|
+ </view>
|
|
|
+ <view v-if="showProducts">
|
|
|
+ <view v-if="hotProducts.length === 0" class="empty-state" style="padding: 40rpx 0;">
|
|
|
+ <text class="empty-text">暂无商品</text>
|
|
|
+ </view>
|
|
|
+ <view class="product-list" v-else>
|
|
|
+ <view class="product-card" v-for="prod in hotProducts" :key="prod.id" @click="goHotProduct(prod)">
|
|
|
+ <image class="product-cover" :src="getImageUrl(prod.coverImage) || '/static/default-product.png'" mode="aspectFill" />
|
|
|
+ <view class="product-info">
|
|
|
+ <text class="product-name line-clamp-1">{{ prod.name }}</text>
|
|
|
+ <text class="product-desc line-clamp-1">{{ prod.desc }}</text>
|
|
|
+ <view class="product-bottom">
|
|
|
+ <text class="product-fee" v-if="prod.price">¥{{ prod.price }}</text>
|
|
|
+ <text class="product-fee" v-else>立即查看 ›</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 热门活动(默认收起,点击查看更多后展开,置底) -->
|
|
|
+ <view class="section">
|
|
|
+ <view class="section-header">
|
|
|
+ <text class="section-title">🔥 热门活动</text>
|
|
|
+ <text class="section-more" :class="!showActivities ? 'blink' : ''" @click="showActivities = !showActivities">{{ showActivities ? '收起 ‹' : '查看更多 ›' }}</text>
|
|
|
+ </view>
|
|
|
+ <view v-if="showActivities">
|
|
|
+ <view v-if="dimensionActivities.length === 0" class="empty-state" style="padding: 40rpx 0;">
|
|
|
+ <text class="empty-text">暂无活动</text>
|
|
|
+ </view>
|
|
|
+ <view class="activity-list" v-else>
|
|
|
+ <view class="activity-card" v-for="act in dimensionActivities" :key="act.id" @click="goActivityDetail(act)">
|
|
|
+ <image class="activity-cover" :src="getImageUrl(act.coverImage) || '/static/default-activity.png'" mode="aspectFill" />
|
|
|
+ <view class="activity-info">
|
|
|
+ <text class="activity-name line-clamp-1">{{ act.title }}</text>
|
|
|
+ <view class="activity-meta">
|
|
|
+ <text class="activity-time">{{ act.startTime }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="activity-bottom">
|
|
|
+ <text class="activity-status" :class="'status-' + (act.status || 'upcoming')">{{ act.status === 'ongoing' ? '进行中' : act.status === 'ended' ? '已结束' : '即将开始' }}</text>
|
|
|
+ <text class="activity-fee" v-if="act.price && act.price > 0">¥{{ (act.price / 100).toFixed(0) }}</text>
|
|
|
+ <text class="activity-fee fee-free" v-else>免费</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
|
|
|
<!-- 底部占位 -->
|
|
|
<view style="height: 120rpx;"></view>
|
|
|
|
|
|
- <!-- GEO 自然语言摘要区:搜一搜摘要位 + AI 抓取位(服务微信内/外 AI) -->
|
|
|
+ <!-- 底部品牌 slogan:原 GEO 摘要按运营要求精简为 20 字内的黄色 tagline -->
|
|
|
<view class="geo-seo-block" style="padding:8rpx 32rpx 20rpx;">
|
|
|
- <text style="display:block;font-size:26rpx;line-height:42rpx;color:#7A7E83;">浠艾福是一款免费的面向家庭的成长助手,帮助家长通过任务管理、习惯打卡、五维成长测评(身、心、智、行、富)和心愿激励,陪伴孩子养成良好习惯、记录家庭成长。所有功能免费,数据仅存本机。</text>
|
|
|
+ <text style="display:block;font-size:26rpx;line-height:42rpx;font-weight:700;text-align:center;letter-spacing:1rpx;color:#FFC107;text-shadow:0 1rpx 3rpx rgba(0,0,0,0.18);">浠艾福:测一测、管一管,全家健康看得见。</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
@@ -471,13 +471,42 @@ import OnboardingProgressBar from '../../components/OnboardingProgressBar.vue'
|
|
|
import { BrandColors } from '../../utils/brand-colors.js'
|
|
|
import OnboardingGuide from '../../components/OnboardingGuide.vue'
|
|
|
import ConfigurableGuide from '../../components/ConfigurableGuide.vue'
|
|
|
-import { acceptParentInvite, getActivityList, getFeaturedArticles, getEnergySandbox, getEnergyOverview, getFamilyMemberList, getChallengeList, getGuideConfig, getGuidePopupList, consumeGuidePopup, switchToFamilyMember, getMyMembership, updateChallengeProgress, respondChallenge, getTodayTasks, completeTask as completeTaskApi, getTodayParentTasks, completeParentTask as completeParentTaskApi, getTaskHistory, getNotices, getNotificationList, readNotification, getSurveyStatus, getSelfCheckStatus, getReferralCode, extractReferralCode, getAppLibrary, reportAppEnter, getEnergyLogs, getPointsLogs, getCfList, getCfSummary } from '../../utils/api.js'
|
|
|
+import { acceptParentInvite, getActivityList, getFeaturedArticles, productList, getEnergySandbox, getEnergyOverview, getFamilyMemberList, getChallengeList, getGuideConfig, getGuidePopupList, consumeGuidePopup, switchToFamilyMember, getMyMembership, updateChallengeProgress, respondChallenge, getTodayTasks, completeTask as completeTaskApi, getTodayParentTasks, completeParentTask as completeParentTaskApi, getTaskHistory, getNotices, getNotificationList, readNotification, getSurveyStatus, getSelfCheckStatus, getReferralCode, extractReferralCode, getAppLibrary, reportAppEnter, getEnergyLogs, getPointsLogs, getCfList, getCfSummary } from '../../utils/api.js'
|
|
|
import { findAppByKey, getShortcutableApps } from '../../utils/app-library.js'
|
|
|
import nav from '../../utils/nav.js'
|
|
|
import config from '@/config.js'
|
|
|
import { parseDate } from '../../utils/format.js'
|
|
|
import fontScaleMixin from '@/mixins/font-scale.js'
|
|
|
|
|
|
+// 发现页(未登录态)推荐阅读 —— 运营指定固定精选 3 篇,顺序不可变。
|
|
|
+// id 为占位 slug,正式上线请替换为 CMS 中的真实文章 id(goArticleDetail 按 id 跳转详情)。
|
|
|
+var DISCOVER_ARTICLES = [
|
|
|
+ {
|
|
|
+ id: 'article-leaky-gut',
|
|
|
+ title: '肠漏:被忽视的慢性病根源',
|
|
|
+ summary: '肠道通透性增加如何牵连免疫、代谢与神经,为何它是众多慢性问题的共同土壤。',
|
|
|
+ views: '0',
|
|
|
+ date: '',
|
|
|
+ coverImage: ''
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 'article-why-microbiome-test',
|
|
|
+ title: '为什么要做菌群检测',
|
|
|
+ summary: '一次菌群检测能看见什么,如何把抽象的微生态变成可执行的家庭健康行动。',
|
|
|
+ views: '0',
|
|
|
+ date: '',
|
|
|
+ coverImage: ''
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 'article-adhd-microbiome',
|
|
|
+ title: '多动症儿童菌群特征确认',
|
|
|
+ summary: '研究显示注意缺陷多动儿童的肠道菌群结构存在差异,早筛查、早干预更从容。',
|
|
|
+ views: '0',
|
|
|
+ date: '',
|
|
|
+ coverImage: ''
|
|
|
+ }
|
|
|
+]
|
|
|
+
|
|
|
export default {
|
|
|
mixins: [fontScaleMixin],
|
|
|
components: {
|
|
|
@@ -523,8 +552,16 @@ components: {
|
|
|
_guidePopupAttempted: false,
|
|
|
|
|
|
dimensionActivities: [],
|
|
|
- indexArticles: [],
|
|
|
+ indexArticles: DISCOVER_ARTICLES,
|
|
|
articlesLoading: false,
|
|
|
+ showActivities: false,
|
|
|
+ hotProducts: [
|
|
|
+ { id: 1, name: '肠道菌群测评', coverImage: '', desc: '科学看见肠道微生态,量化全家健康底牌', price: null },
|
|
|
+ { id: 3, name: '电解还原水机', coverImage: '', desc: '日常饮水升级,守护全家长期健康', price: null },
|
|
|
+ { id: 2, name: 'DAN 测评', coverImage: '', desc: '多维能力评估,精准定位成长方向', price: null }
|
|
|
+ ],
|
|
|
+ showProducts: true,
|
|
|
+ showArticles: true,
|
|
|
gradientColors: [
|
|
|
`linear-gradient(135deg, ${BrandColors.action}, ${BrandColors.successLight3})`,
|
|
|
`linear-gradient(135deg, ${BrandColors.info}, ${BrandColors.infoLight})`,
|
|
|
@@ -1768,6 +1805,10 @@ title: '添加家庭成员',
|
|
|
goMoreProducts: function() {
|
|
|
uni.navigateTo({ url: '/pages/shop/index/index' })
|
|
|
},
|
|
|
+ goHotProduct: function(prod) {
|
|
|
+ // 热门商品为首页精选,点击统一进入商城列表(商品详情 id 以商城内实际数据为准)
|
|
|
+ uni.navigateTo({ url: '/pages/shop/index/index' })
|
|
|
+ },
|
|
|
goArticleDetail: function(article) {
|
|
|
var id = article.id || article
|
|
|
uni.navigateTo({ url: '/pages/article-center/article-detail?id=' + id })
|
|
|
@@ -1872,6 +1913,7 @@ title: '添加家庭成员',
|
|
|
this.currentRole = ''
|
|
|
this.loadDimensionActivities()
|
|
|
this.loadFeaturedArticles()
|
|
|
+ this.loadDiscoverProducts()
|
|
|
return
|
|
|
}
|
|
|
this.syncRoleAndTabBar()
|
|
|
@@ -2061,38 +2103,56 @@ title: '添加家庭成员',
|
|
|
self._checkSplashReady()
|
|
|
})
|
|
|
},
|
|
|
+ // 热门商品:从后台取 3 个,后台按 sort_order 升序、createdAt 倒序返回。
|
|
|
+ // 接口异常或无数据时保留兜底项,避免区块空白。
|
|
|
+ loadDiscoverProducts: function() {
|
|
|
+ var self = this
|
|
|
+ productList({ page: 1, size: 3 }).then(function(res) {
|
|
|
+ if (res && res.code === 200 && res.data) {
|
|
|
+ var records = res.data.records || []
|
|
|
+ if (records.length) {
|
|
|
+ self.hotProducts = records.slice(0, 3).map(function(item) {
|
|
|
+ return {
|
|
|
+ id: item.id,
|
|
|
+ name: item.name || '',
|
|
|
+ coverImage: item.coverImage || item.image || '',
|
|
|
+ desc: item.description || item.summary || '',
|
|
|
+ price: (item.price != null && Number(item.price) > 0) ? (Number(item.price) / 100) : null
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }).catch(function() {})
|
|
|
+ },
|
|
|
loadFeaturedArticles: function() {
|
|
|
var self = this
|
|
|
this.articlesLoading = true
|
|
|
- getFeaturedArticles({ size: 5 }).then(function(res) {
|
|
|
+ // 推荐阅读:从后台取 3 条,后台按 sort_order 升序、publishedAt 倒序返回。
|
|
|
+ // 仅当接口异常或无数据时,才回退到运营精选集,保证区块不空白。
|
|
|
+ getFeaturedArticles({ size: 3 }).then(function(res) {
|
|
|
self.articlesLoading = false
|
|
|
- if (res && res.code === 200) {
|
|
|
- var gradientColors = [
|
|
|
- `linear-gradient(135deg, ${BrandColors.action}, ${BrandColors.successLight3})`,
|
|
|
- `linear-gradient(135deg, ${BrandColors.info}, ${BrandColors.infoLight})`,
|
|
|
- `linear-gradient(135deg, ${BrandColors.wealth}, ${BrandColors.warning})`,
|
|
|
- `linear-gradient(135deg, ${BrandColors.primary}, ${BrandColors.primaryLight})`,
|
|
|
- `linear-gradient(135deg, ${BrandColors.wisdom}, ${BrandColors.wisdomLight})`
|
|
|
- ]
|
|
|
- // res.data is the response wrapper, articles are in res.data.data
|
|
|
- var rawList = res.data && (Array.isArray(res.data) ? res.data : (res.data.data || res.data.records || []))
|
|
|
- var list = Array.isArray(rawList) ? rawList : []
|
|
|
- self.indexArticles = list.map(function(item, index) {
|
|
|
+ var list = []
|
|
|
+ if (res && res.code === 200 && res.data) {
|
|
|
+ list = Array.isArray(res.data) ? res.data : (res.data.records || [])
|
|
|
+ }
|
|
|
+ if (list && list.length) {
|
|
|
+ self.indexArticles = list.slice(0, 3).map(function(item) {
|
|
|
return {
|
|
|
id: item.id,
|
|
|
- category: item.categoryName || item.category || '热门文章',
|
|
|
- categoryColor: gradientColors[index % gradientColors.length],
|
|
|
title: item.title || '',
|
|
|
summary: item.summary || '',
|
|
|
views: item.viewCount ? String(item.viewCount) : '0',
|
|
|
- date: item.publishedAt ? item.publishedAt.slice(0, 10) : '',
|
|
|
- coverImage: item.coverImage
|
|
|
+ date: item.publishedAt ? String(item.publishedAt).slice(0, 10) : '',
|
|
|
+ coverImage: item.coverImage || ''
|
|
|
}
|
|
|
})
|
|
|
+ } else {
|
|
|
+ self.indexArticles = DISCOVER_ARTICLES.slice()
|
|
|
}
|
|
|
self._checkSplashReady()
|
|
|
}).catch(function() {
|
|
|
self.articlesLoading = false
|
|
|
+ self.indexArticles = DISCOVER_ARTICLES.slice()
|
|
|
self._checkSplashReady()
|
|
|
})
|
|
|
},
|
|
|
@@ -2250,38 +2310,54 @@ $c-warm-tint: #FFF3E7;
|
|
|
border: 1rpx solid rgba($brand-primary, 0.12);
|
|
|
}
|
|
|
|
|
|
-.hero-logo {
|
|
|
- width: 100rpx;
|
|
|
- height: 100rpx;
|
|
|
- border-radius: 24rpx;
|
|
|
+.brand-bar {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 20rpx;
|
|
|
+ padding: 4rpx 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+.brand-logo {
|
|
|
+ width: 80rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ border-radius: 20rpx;
|
|
|
background: $app-surface;
|
|
|
- box-shadow: 0 8rpx 24rpx rgba($brand-primary, 0.18);
|
|
|
+ box-shadow: 0 6rpx 16rpx rgba($brand-primary, 0.18);
|
|
|
+ flex-shrink: 0;
|
|
|
}
|
|
|
-
|
|
|
-.hero-name {
|
|
|
- display: block;
|
|
|
- font-size: calc(48rpx * var(--font-scale, 1));
|
|
|
+.brand-texts {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ min-width: 0;
|
|
|
+ padding-left: 20rpx;
|
|
|
+ border-left: 2rpx solid rgba($brand-primary, 0.28);
|
|
|
+}
|
|
|
+.brand-name {
|
|
|
+ font-size: calc(38rpx * var(--font-scale, 1));
|
|
|
font-weight: bold;
|
|
|
color: $c-brand-ink;
|
|
|
- margin-top: 16rpx;
|
|
|
- letter-spacing: 6rpx;
|
|
|
+ letter-spacing: 3rpx;
|
|
|
+ line-height: 1.2;
|
|
|
}
|
|
|
-
|
|
|
-.hero-identity {
|
|
|
+.brand-tagline {
|
|
|
display: block;
|
|
|
- font-size: calc(28rpx * var(--font-scale, 1));
|
|
|
- font-weight: 600;
|
|
|
+ font-size: calc(22rpx * var(--font-scale, 1));
|
|
|
+ font-weight: 500;
|
|
|
color: $brand-primary-deep;
|
|
|
- margin-top: 12rpx;
|
|
|
- letter-spacing: 2rpx;
|
|
|
+ margin-top: 6rpx;
|
|
|
+ letter-spacing: 1rpx;
|
|
|
+ line-height: 1.2;
|
|
|
+ white-space: nowrap;
|
|
|
}
|
|
|
|
|
|
.hero-slogan {
|
|
|
display: block;
|
|
|
font-size: calc(26rpx * var(--font-scale, 1));
|
|
|
color: $c-brand-ink-2;
|
|
|
- margin-top: 8rpx;
|
|
|
+ margin-top: 24rpx;
|
|
|
font-weight: 500;
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
|
|
|
.hero-powered {
|
|
|
@@ -2294,23 +2370,25 @@ $c-warm-tint: #FFF3E7;
|
|
|
.hero-dims {
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
- gap: 16rpx;
|
|
|
- margin-top: 28rpx;
|
|
|
- flex-wrap: wrap;
|
|
|
+ gap: 10rpx;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ flex-wrap: nowrap;
|
|
|
}
|
|
|
|
|
|
.hero-dim {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
- gap: 6rpx;
|
|
|
- padding: 12rpx 16rpx;
|
|
|
+ gap: 4rpx;
|
|
|
+ padding: 8rpx 0;
|
|
|
background: rgba($app-surface, 0.7);
|
|
|
- border-radius: 16rpx;
|
|
|
+ border-radius: 14rpx;
|
|
|
+ flex: 1;
|
|
|
+ max-width: 116rpx;
|
|
|
}
|
|
|
|
|
|
.hero-dim-emoji {
|
|
|
- font-size: calc(32rpx * var(--font-scale, 1));
|
|
|
+ font-size: calc(30rpx * var(--font-scale, 1));
|
|
|
}
|
|
|
|
|
|
.hero-dim-label {
|
|
|
@@ -2321,14 +2399,6 @@ $c-warm-tint: #FFF3E7;
|
|
|
}
|
|
|
|
|
|
/* ===== 未登录态 Hero 副标语 / CTA ===== */
|
|
|
-.hero-sub-slogan {
|
|
|
- display: block;
|
|
|
- font-size: calc(22rpx * var(--font-scale, 1));
|
|
|
- color: $brand-primary-dark;
|
|
|
- margin-top: 18rpx;
|
|
|
- font-weight: 500;
|
|
|
-}
|
|
|
-
|
|
|
.hero-cta-btn {
|
|
|
margin: 28rpx auto 0;
|
|
|
display: block;
|
|
|
@@ -2343,10 +2413,25 @@ $c-warm-tint: #FFF3E7;
|
|
|
text-align: center;
|
|
|
border: none;
|
|
|
box-shadow: 0 8rpx 20rpx rgba($brand-primary, 0.3);
|
|
|
+ animation: heroPulse 1.6s ease-in-out infinite;
|
|
|
}
|
|
|
.hero-cta-btn::after {
|
|
|
border: none;
|
|
|
}
|
|
|
+/* 免费体验按钮:呼吸式闪动,吸引点击 */
|
|
|
+@keyframes heroPulse {
|
|
|
+ 0%, 100% {
|
|
|
+ transform: scale(1);
|
|
|
+ box-shadow: 0 8rpx 20rpx rgba($brand-primary, 0.3);
|
|
|
+ }
|
|
|
+ 50% {
|
|
|
+ transform: scale(1.045);
|
|
|
+ box-shadow: 0 8rpx 34rpx rgba($brand-primary, 0.6);
|
|
|
+ }
|
|
|
+}
|
|
|
+.hero-cta-btn:active {
|
|
|
+ transform: scale(0.97);
|
|
|
+}
|
|
|
|
|
|
/* ===== 价值主张(为什么选择浠艾福) ===== */
|
|
|
.value-prop-section {
|
|
|
@@ -2401,7 +2486,7 @@ $c-warm-tint: #FFF3E7;
|
|
|
line-height: 1.5;
|
|
|
}
|
|
|
|
|
|
-/* ===== 三步上手 ===== */
|
|
|
+/* ===== 三步上手(闪烁引导,点击登录/注册) ===== */
|
|
|
.how-it-works {
|
|
|
margin: 32rpx $uni-space-lg 0;
|
|
|
padding: 32rpx 24rpx;
|
|
|
@@ -2409,57 +2494,35 @@ $c-warm-tint: #FFF3E7;
|
|
|
border-radius: 24rpx;
|
|
|
box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.04);
|
|
|
}
|
|
|
+.how-cta {
|
|
|
+ text-align: center;
|
|
|
+ cursor: pointer;
|
|
|
+ background: linear-gradient(135deg, $facade-brand-tint, rgba($brand-primary, 0.12));
|
|
|
+ border: 1rpx solid rgba($brand-primary, 0.18);
|
|
|
+}
|
|
|
+.how-cta:active {
|
|
|
+ transform: scale(0.985);
|
|
|
+}
|
|
|
.how-it-works-title {
|
|
|
display: block;
|
|
|
font-size: calc(32rpx * var(--font-scale, 1));
|
|
|
font-weight: bold;
|
|
|
color: $facade-text-strong;
|
|
|
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;
|
|
|
+.how-flicker {
|
|
|
+ color: $brand-primary-deep;
|
|
|
+ animation: flickerText 1.4s ease-in-out infinite;
|
|
|
}
|
|
|
-.step-num {
|
|
|
- width: 48rpx;
|
|
|
- height: 48rpx;
|
|
|
- line-height: 48rpx;
|
|
|
- border-radius: 50%;
|
|
|
- background: linear-gradient(135deg, $brand-primary, $brand-primary-light);
|
|
|
- color: $app-surface;
|
|
|
- font-size: calc(26rpx * var(--font-scale, 1));
|
|
|
- font-weight: bold;
|
|
|
- text-align: center;
|
|
|
- box-shadow: 0 4rpx 12rpx rgba($brand-primary, 0.3);
|
|
|
+@keyframes flickerText {
|
|
|
+ 0%, 100% { opacity: 1; }
|
|
|
+ 50% { opacity: 0.5; }
|
|
|
}
|
|
|
-.step-name {
|
|
|
- font-size: calc(24rpx * var(--font-scale, 1));
|
|
|
- color: $facade-text-strong;
|
|
|
- font-weight: 500;
|
|
|
- margin-top: 12rpx;
|
|
|
- text-align: center;
|
|
|
-}
|
|
|
-.step-sub {
|
|
|
- font-size: calc(20rpx * var(--font-scale, 1));
|
|
|
+.how-it-works-hint {
|
|
|
+ display: block;
|
|
|
+ font-size: calc(22rpx * var(--font-scale, 1));
|
|
|
color: $facade-text-muted;
|
|
|
- margin-top: 4rpx;
|
|
|
- text-align: center;
|
|
|
-}
|
|
|
-.step-arrow {
|
|
|
- font-size: calc(28rpx * var(--font-scale, 1));
|
|
|
- color: $brand-primary;
|
|
|
- line-height: 1;
|
|
|
- align-self: center;
|
|
|
- padding: 0 6rpx;
|
|
|
+ margin-top: 12rpx;
|
|
|
}
|
|
|
|
|
|
/* ===== 品牌定位语(保留旧样式,不再使用) ===== */
|
|
|
@@ -2547,35 +2610,6 @@ $c-warm-tint: #FFF3E7;
|
|
|
/* ===== 五维全景幸福矩阵 ===== */
|
|
|
|
|
|
/* ===== 底部登录 ===== */
|
|
|
-.login-footer {
|
|
|
- margin: 40rpx $uni-space-lg;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
-}
|
|
|
-.login-btn {
|
|
|
- width: 100%;
|
|
|
- height: 88rpx;
|
|
|
- line-height: 88rpx;
|
|
|
- background: linear-gradient(135deg, $brand-primary, $brand-primary-light);
|
|
|
- color: $app-surface;
|
|
|
- font-size: calc(32rpx * var(--font-scale, 1));
|
|
|
- font-weight: bold;
|
|
|
- border-radius: 24rpx;
|
|
|
- text-align: center;
|
|
|
- border: none;
|
|
|
- box-shadow: 0 8rpx 24rpx rgba($brand-primary, 0.3);
|
|
|
-}
|
|
|
-.login-btn::after {
|
|
|
- border: none;
|
|
|
-}
|
|
|
-.login-footer-text {
|
|
|
- font-size: calc(22rpx * var(--font-scale, 1));
|
|
|
- color: $brand-primary;
|
|
|
- margin-top: 16rpx;
|
|
|
- font-weight: 500;
|
|
|
-}
|
|
|
-
|
|
|
/* ===== 加载占位 ===== */
|
|
|
.loading-container {
|
|
|
display: flex;
|
|
|
@@ -2617,6 +2651,10 @@ $c-warm-tint: #FFF3E7;
|
|
|
font-size: calc(24rpx * var(--font-scale, 1));
|
|
|
color: $brand-primary;
|
|
|
}
|
|
|
+/* 查看更多闪烁(不强制改色,仅做透明度闪动) */
|
|
|
+.blink {
|
|
|
+ animation: flickerText 1.4s ease-in-out infinite;
|
|
|
+}
|
|
|
/* 区块标题右侧计数徽标(家庭任务数) */
|
|
|
.section-header-extra {
|
|
|
display: flex;
|
|
|
@@ -2693,6 +2731,57 @@ $c-warm-tint: #FFF3E7;
|
|
|
font-size: calc(22rpx * var(--font-scale, 1));
|
|
|
color: $facade-text-muted;
|
|
|
}
|
|
|
+
|
|
|
+/* ===== 热门商品列表 ===== */
|
|
|
+.product-list {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 16rpx;
|
|
|
+}
|
|
|
+.product-card {
|
|
|
+ background: $app-surface;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
|
|
|
+}
|
|
|
+.product-card:active {
|
|
|
+ opacity: 0.8;
|
|
|
+}
|
|
|
+.product-cover {
|
|
|
+ width: 200rpx;
|
|
|
+ height: 160rpx;
|
|
|
+ flex-shrink: 0;
|
|
|
+ background: $facade-fill;
|
|
|
+}
|
|
|
+.product-info {
|
|
|
+ flex: 1;
|
|
|
+ padding: 16rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+.product-name {
|
|
|
+ font-size: calc(28rpx * var(--font-scale, 1));
|
|
|
+ font-weight: bold;
|
|
|
+ color: $facade-text-strong;
|
|
|
+ margin-bottom: 6rpx;
|
|
|
+}
|
|
|
+.product-desc {
|
|
|
+ font-size: calc(22rpx * var(--font-scale, 1));
|
|
|
+ color: $facade-text-muted;
|
|
|
+ margin-bottom: 8rpx;
|
|
|
+}
|
|
|
+.product-bottom {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.product-fee {
|
|
|
+ font-size: calc(22rpx * var(--font-scale, 1));
|
|
|
+ color: $brand-primary;
|
|
|
+ font-weight: 600;
|
|
|
+}
|
|
|
.activity-bottom {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
@@ -2737,16 +2826,6 @@ $c-warm-tint: #FFF3E7;
|
|
|
.article-card:active {
|
|
|
opacity: 0.8;
|
|
|
}
|
|
|
-.article-category {
|
|
|
- display: inline-block;
|
|
|
- padding: 4rpx 14rpx;
|
|
|
- border-radius: 8rpx;
|
|
|
- margin-bottom: 10rpx;
|
|
|
-}
|
|
|
-.article-category-text {
|
|
|
- font-size: calc(20rpx * var(--font-scale, 1));
|
|
|
- color: $app-surface;
|
|
|
-}
|
|
|
.article-title {
|
|
|
display: block;
|
|
|
font-size: calc(28rpx * var(--font-scale, 1));
|
|
|
@@ -2784,10 +2863,6 @@ $c-warm-tint: #FFF3E7;
|
|
|
font-size: calc(22rpx * var(--font-scale, 1));
|
|
|
color: $facade-text-muted;
|
|
|
}
|
|
|
-.article-date {
|
|
|
- font-size: calc(22rpx * var(--font-scale, 1));
|
|
|
- color: $facade-text-ghost-light;
|
|
|
-}
|
|
|
|
|
|
/* ===== Splash Loading Overlay(冷启动蒙板,来自 merge splash.vue) ===== */
|
|
|
.splash-overlay {
|