cfc/cfc-frontend/components/ConfigurableGuide.vue

<template>
  <view class="cg-overlay" v-if="show">
    <view class="cg-card">
      <!-- 顶部主题色条 -->
      <view class="cg-topbar" :style="{ background: themeColor }"></view>

      <!-- 步骤内容 -->
      <view class="cg-content">
        <!-- 单步弹窗：无 steps 时直接用 title/description/icon -->
        <block v-if="!isMulti">
          <text v-if="iconType === 0 && icon" class="cg-icon">{{ icon }}</text>
          <image v-if="iconType === 1 && icon" class="cg-img" :src="icon" mode="aspectFit" />
          <text class="cg-title">{{ title }}</text>
          <text class="cg-desc">{{ description }}</text>
        </block>

        <!-- 多步向导：steps 数组渲染 -->
        <block v-else>
          <text v-if="currentStepObj.iconType === 0 && currentStepObj.icon" class="cg-icon">{{ currentStepObj.icon }}</text>
          <image v-if="currentStepObj.iconType === 1 && currentStepObj.icon" class="cg-img" :src="currentStepObj.icon" mode="aspectFit" />
          <text class="cg-title" :class="{ 'cg-title--intro': currentStepObj.isIntro }">{{ currentStepObj.title }}</text>
          <text class="cg-desc">{{ currentStepObj.desc }}</text>
        </block>
      </view>

      <!-- 步进器（仅多步） -->
      <view class="cg-dots" v-if="isMulti">
        <view v-for="(s, i) in steps" :key="i" class="cg-dot" :class="{ 'cg-dot--active': i === currentStep }"></view>
      </view>

      <!-- 按钮 -->
      <view class="cg-action">
        <view class="cg-btn" :style="{ background: themeColor }" @click="handleClick">
          <text>{{ btnLabel }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { BrandColors } from '../utils/brand-colors.js'
export default {
  name: 'ConfigurableGuide',
  props: {
    popup: { type: Object, default: null },
    show: { type: Boolean, default: false }
  },
  data() {
    return {
      currentStep: 0
    }
  },
  computed: {
    isMulti() {
      return this.popup && this.popup.steps && this.popup.steps.length > 0
    },
    title() { return this.popup && this.popup.title ? this.popup.title : '' },
    description() { return this.popup && this.popup.description ? this.popup.description : '' },
    icon() { return this.popup && this.popup.icon ? this.popup.icon : '' },
    iconType() { return this.popup && this.popup.iconType !== undefined ? this.popup.iconType : 0 },
    themeColor() { return this.popup && this.popup.themeColor ? this.popup.themeColor : BrandColors.primary },
    steps() { return this.isMulti ? this.popup.steps : [] },
    currentStepObj() {
      if (!this.isMulti) return {}
      return this.steps[this.currentStep] || {}
    },
    btnLabel() {
      if (!this.isMulti) {
        return this.popup && this.popup.btnText ? this.popup.btnText : '知道了'
      }
      var isLast = this.currentStep >= this.steps.length - 1
      if (isLast) {
        return this.popup && this.popup.btnText ? this.popup.btnText : '开始体验'
      }
      return this.currentStepObj.btnText || '下一步'
    }
  },
  watch: {
    show(val) {
      if (val) this.currentStep = 0
    }
  },
  methods: {
    handleClick() {
      if (this.isMulti && this.currentStep < this.steps.length - 1) {
        this.currentStep++
        return
      }
      // 最后一步 / 单步：跳转 + 消费
      var action = ''
      if (this.isMulti) {
        action = this.currentStepObj.btnAction || this.popup.btnAction || ''
      } else {
        action = this.popup.btnAction || ''
      }
      this.$emit('done', { popup: this.popup, btnAction: action, buttonClicked: true })
    },
    handleClose() {
      this.$emit('done', { popup: this.popup, btnAction: '', buttonClicked: false })
    }
  }
}
</script>

<style scoped lang="scss">
.cg-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;
}
.cg-card {
  width: 640rpx;
  min-height: 560rpx;
  background: $app-surface;
  border-radius: 32rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}
.cg-topbar { width: 100%; height: 12rpx; flex-shrink: 0; }
.cg-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 72rpx 56rpx 40rpx;
}
.cg-icon { font-size: 80rpx; margin-bottom: 32rpx; display: block; }
.cg-img { width: 160rpx; height: 160rpx; margin-bottom: 32rpx; }
.cg-title {
  font-size: calc(36rpx * var(--font-scale, 1));
  font-weight: 700;
  color: $uni-text-color;
  text-align: center;
  margin-bottom: 20rpx;
  display: block;
  line-height: 1.3;
}
.cg-title--intro { font-size: calc(32rpx * var(--font-scale, 1)); font-weight: 800; }
.cg-desc {
  font-size: calc(28rpx * var(--font-scale, 1));
  color: $uni-text-color-secondary;
  text-align: center;
  line-height: 1.6;
  display: block;
  padding: 0 16rpx;
}
.cg-dots { display: flex; align-items: center; justify-content: center; padding: 0 56rpx 32rpx; }
.cg-dot { width: 14rpx; height: 14rpx; border-radius: 50%; background: $uni-border-color; margin: 0 8rpx; }
.cg-dot--active { background: $brand-primary; transform: scale(1.3); }
.cg-action { width: 100%; padding: 0 56rpx 48rpx; box-sizing: border-box; }
.cg-btn {
  width: 100%;
  height: 88rpx;
  border-radius: 999rpx;
  color: $app-surface;
  font-size: 32rpx;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>