cfc/cfc-frontend/components/OnboardingGuide.vue

<template>
  <view class="onboarding-overlay" v-if="show">
    <view class="onboarding-card">
      <!-- 顶部品牌条 -->
      <view class="onboarding-topbar"></view>

      <!-- 步骤内容 -->
      <view class="onboarding-content" :key="currentStep" :class="{ 'onboarding-content--intro': steps[currentStep].isIntro }">
        <text class="onboarding-icon">{{ steps[currentStep].icon }}</text>
        <text class="onboarding-title" :class="{ 'onboarding-title--intro': steps[currentStep].isIntro }">{{ steps[currentStep].title }}</text>
        <text class="onboarding-desc">{{ steps[currentStep].desc }}</text>
      </view>

      <!-- 步进器 -->
      <view class="onboarding-dots">
        <view
          v-for="(s, i) in steps"
          :key="i"
          class="dot"
          :class="{ active: i === currentStep }">
        </view>
      </view>

      <!-- 按钮 -->
      <view class="onboarding-action">
        <view
          class="onboarding-btn"
          :class="{ 'onboarding-btn--last': currentStep === steps.length - 1 }"
          @click="handleNext">
          <text>{{ currentStep < steps.length - 1 ? '下一步' : '开始体验！' }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getGuideConfig, ackGuideConfig } from '../utils/api.js'

var PARENT_STEPS = [
  {
    icon: '🔍',
    title: '你真的了解家人的状态吗？',
    desc: '情绪低落没察觉、习惯变化没注意、能力短板没发现——什么问题等爆发了才看见。浠艾福帮你在问题发生前，看清每位家人的真实状态。',
    isIntro: true
  },
  {
    icon: '🌏',
    title: '五维能量，看见全家',
    desc: '身·心·智·行·富，一张全景图看清每位家人。谁的身体需要关注、谁的情绪需要疏导、谁的状态正在下滑——不用猜，看得见。'
  },
  {
    icon: '📋',
    title: '小行动，大改变',
    desc: '全家一起完成每日小任务，各自攒星星。每天一点点积累，好习惯自然养成。'
  },
  {
    icon: '🎁',
    title: '心愿墙，看得见努力',
    desc: '每位家人用自己的星星兑换心愿。努力有回报，全家人都能看到彼此的坚持。'
  }
]

var CHILD_STEPS = [
  {
    icon: '🔍',
    title: '你的每一点努力，全家都看得见',
    desc: '今天完成了几个任务？比昨天进步了多少？浠艾福帮你记录每一点成长，让进步被全家看见。',
    isIntro: true
  },
  {
    icon: '🌟',
    title: '赚星星',
    desc: '完成爸爸妈妈布置的任务，就能获得星星积分，越努力越多！'
  },
  {
    icon: '🎮',
    title: '玩中学',
    desc: '完成任务后可以玩小游戏、兑换心愿，学习和快乐两不误！'
  },
  {
    icon: '🏆',
    title: '升级挑战',
    desc: '从星星宝宝到宇宙小英雄，一步步升级，看看你能走多远！'
  }
]

export default {
  name: 'OnboardingGuide',
  props: {
    role: { type: String, default: 'parent' },
    show: { type: Boolean, default: false },
    position: { type: String, default: 'home' }
  },
  data() {
    return {
      currentStep: 0,
      _configSteps: null,
      _configVersion: '1.0',
      _configHash: ''
    }
  },
  created() {
    var self = this
    getGuideConfig({ position: this.position, role: this.role }).then(function(res) {
      var cfg = (res && res.data) ? res.data : null
      if (cfg) {
        if (cfg.parent || cfg.child) {
          self._configSteps = cfg
          self._configVersion = cfg.version || '1.0'
        }
        self._configHash = cfg.contentHash || ''
      }
    }).catch(function() {
      // 拉取配置失败，保持 null 走默认步骤
    })
  },
  computed: {
    steps() {
      if (this._configSteps) {
        return this.role === 'child' ? (this._configSteps.child || CHILD_STEPS) : (this._configSteps.parent || PARENT_STEPS)
      }
      if (this.role === 'child') return CHILD_STEPS
      return PARENT_STEPS
    }
  },
  watch: {
    show(val) {
      if (val) {
        this.currentStep = 0
      }
    }
  },
  methods: {
    handleNext() {
      if (this.currentStep < this.steps.length - 1) {
        this.currentStep++
      } else {
        var doneVersion = this._configVersion || '1.0'
        var payload = {
          position: this.position,
          role: this.role,
          version: doneVersion,
          contentHash: this._configHash || ''
        }
        // 本机兜底记录带 userId，避免同一设备多账号互相覆盖（服务端已读状态为准）
        uni.setStorageSync('_onboardingDone', JSON.stringify({
          version: doneVersion,
          doneAt: Date.now(),
          userId: uni.getStorageSync('userId') || ''
        }))
        ackGuideConfig(payload).catch(function() {
          // 上报失败不阻塞关闭：本机已记录，下次联网仍可被服务端纠正
        })
        this.$emit('close')
      }
    }
  }
}
</script>

<style scoped lang="scss">
/* ============================================================
   OnboardingGuide — 首次登录引导浮层
   设计体系：统一使用 uni.scss design tokens
   ============================================================ */

.onboarding-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9998;
  animation: fadeIn 0.25s ease;
}

.onboarding-card {
  width: 640rpx;
  min-height: 680rpx;
  background: var(--surface, $app-surface);
  border-radius: var(--radius-xl, 32rpx);
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  box-shadow: var(--shadow-lg, 0 8rpx 32rpx rgba(249,115,22,0.10));
  animation: scaleIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 顶部品牌装饰条 — 暖珊瑚色 */
.onboarding-topbar {
  width: 100%;
  height: 12rpx;
  background: var(--color-primary, $brand-primary);
  flex-shrink: 0;
}

/* ============================================================
   内容区 — flex 居中，带淡入动画
   ============================================================ */
.onboarding-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80rpx 56rpx 48rpx;
  animation: fadeIn 0.3s ease;
}

.onboarding-icon {
  font-size: calc(80rpx * var(--font-scale, 1));
  margin-bottom: 32rpx;
  display: block;
}

.onboarding-title {
  font-size: calc(36rpx * var(--font-scale, 1));
  font-weight: 700;
  color: var(--text, $uni-text-color);
  text-align: center;
  margin-bottom: 20rpx;
  display: block;
  line-height: 1.3;
}

.onboarding-desc {
  font-size: calc(28rpx * var(--font-scale, 1));
  color: var(--text-secondary, $uni-text-color-secondary);
  text-align: center;
  line-height: 1.6;
  display: block;
  padding: 0 16rpx;
}

/* ============================================================
   介绍步骤 — 开场身份定义页
   ============================================================ */
.onboarding-content--intro {
  padding: 64rpx 56rpx 48rpx;
}

.onboarding-title--intro {
  font-size: calc(32rpx * var(--font-scale, 1));
  font-weight: 700;
  color: var(--color-primary, $brand-primary);
  line-height: 1.4;
}

/* ============================================================
   步进器圆点
   ============================================================ */
.onboarding-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16rpx;
  padding: 0 56rpx 40rpx;
  flex-shrink: 0;
}

.dot {
  width: 14rpx;
  height: 14rpx;
  border-radius: 50%;
  background: var(--border, $uni-border-color);
  transition: background 0.3s ease, transform 0.3s ease;
}

.dot.active {
  background: var(--color-primary, $brand-primary);
  transform: scale(1.3);
}

/* ============================================================
   底部按钮
   ============================================================ */
.onboarding-action {
  width: 100%;
  padding: 0 56rpx 48rpx;
  flex-shrink: 0;
  box-sizing: border-box;
}

.onboarding-btn {
  width: 100%;
  height: 88rpx;
  border-radius: 999rpx;
  background: var(--color-primary, $brand-primary);
  color: $app-surface;
  font-size: calc(32rpx * var(--font-scale, 1));
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease, transform 0.15s ease;
  box-shadow: 0 4rpx 16rpx rgba(249,115,22,0.25);
}

.onboarding-btn:active {
  opacity: 0.85;
  transform: scale(0.97);
}

/* 最后一步：暖珊瑚色按钮 */
.onboarding-btn--last {
  background: var(--color-primary, $brand-primary);
  box-shadow: 0 4rpx 16rpx rgba(249, 115, 22, 0.30);
}
</style>