cfc/cfc-frontend/pages/ai/components/UpgradeGuideModal.vue

<template>
  <view class="upgrade-guide-mask" v-if="visible" @click="handleMaskClick" :style="{ '--font-scale': fontScale }">
    <view class="upgrade-guide-content" :class="{ 'hard-modal': type === 'hard' }" @click.stop>
      <view class="upgrade-guide-icon">{{ icon }}</view>
      <view class="upgrade-guide-title">{{ title }}</view>
      <view class="upgrade-guide-desc">{{ desc }}</view>
      <view class="upgrade-guide-actions">
        <view v-if="type === 'soft'" class="btn-know" @click="handleKnow">知道了</view>
        <view v-if="type === 'soft'" class="btn-learn" @click="handleLearn">了解详情</view>
        <view v-if="type === 'hard'" class="btn-upgrade" @click="handleUpgrade">升级 FAMILY</view>
      </view>
    </view>
  </view>
</template>

<script>
import fontScaleMixin from '@/mixins/font-scale.js'
export default {
  mixins: [fontScaleMixin],
  name: 'UpgradeGuideModal',
  data() {
    return { visible: false }
  },
  props: {
    type: { type: String, default: 'soft' },
    quotaType: { type: String, default: '' },
    remaining: { type: Number, default: 0 },
    total: { type: Number, default: 0 }
  },
  computed: {
    icon() {
      return this.type === 'hard' ? '🔒' : 'ℹ️'
    },
    title() {
      if (this.quotaType === 'REPORT_READING') return '本月额度已用完'
      return '今日额度已用完'
    },
    desc() {
      if (this.type === 'hard') return '该功能为 FAMILY 会员专属权益，升级后即可使用'
      if (this.quotaType === 'AI_CHAT') return '您今日 AI 对话已用完（' + this.total + '/' + this.total + '），升级 FAMILY 享不限次畅聊'
      if (this.quotaType === 'FOOD_RECOGNIZE') return '今日饮食识别额度已用完（' + this.total + '/' + this.total + '），升级 FAMILY 享不限次识别'
      if (this.quotaType === 'REPORT_READING') return '本月报告解读额度已用完，升级 FAMILY 解锁不限次深度解读'
      return '额度已用完，升级 FAMILY 解锁更多权益'
    }
  },
  methods: {
    show() {
      this.visible = true
    },
    hide() {
      this.visible = false
    },
    handleKnow() {
      this.hide()
      this.$emit('know')
    },
    handleLearn() {
      this.hide()
      uni.navigateTo({ url: '/pages/membership/benefits' })
      this.$emit('learn')
    },
    handleUpgrade() {
      this.hide()
      uni.navigateTo({ url: '/pages/membership/upgrade' })
      this.$emit('upgrade')
    },
    handleMaskClick() {
      if (this.type === 'soft') {
        this.hide()
      }
    }
  }
}
</script>

<style scoped lang="scss">
.upgrade-guide-mask {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}
.upgrade-guide-content {
  width: 600rpx;
  background: $app-surface;
  border-radius: 24rpx;
  padding: 48rpx 36rpx 36rpx;
  text-align: center;
}
.upgrade-guide-icon {
  font-size: calc(72rpx * var(--font-scale, 1));
  margin-bottom: 24rpx;
}
.upgrade-guide-title {
  font-size: calc(32rpx * var(--font-scale, 1));
  font-weight: 600;
  color: $facade-text-strong;
  margin-bottom: 16rpx;
}
.upgrade-guide-desc {
  font-size: calc(26rpx * var(--font-scale, 1));
  color: $facade-text-body;
  line-height: 1.6;
  margin-bottom: 36rpx;
}
.upgrade-guide-actions {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}
.btn-know, .btn-learn, .btn-upgrade {
  height: 80rpx;
  line-height: 80rpx;
  border-radius: 24rpx;
  font-size: calc(28rpx * var(--font-scale, 1));
}
.btn-know {
  background: $facade-fill-2;
  color: $facade-text-body;
}
.btn-learn {
  background: transparent;
  color: $brand-primary;
  border: 2rpx solid $brand-primary;
}
.btn-upgrade {
  background: $brand-primary;
  color: $app-surface;
}
</style>