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

<template>
  <view class="upgrade-guide-mask" v-if="visible" @click="handleMaskClick">
    <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>
export default {
  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() {
      return this.type === 'hard' ? '升级后即可使用' : '本月额度已用完'
    },
    desc() {
      if (this.type === 'hard') return '该功能为 FAMILY 会员专属权益，升级后即可使用'
      if (this.quotaType === 'AI_CHAT') return '您本月 AI 对话已用完（' + 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>
.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: #fff;
  border-radius: 24rpx;
  padding: 48rpx 36rpx 36rpx;
  text-align: center;
}
.upgrade-guide-icon {
  font-size: 72rpx;
  margin-bottom: 24rpx;
}
.upgrade-guide-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 16rpx;
}
.upgrade-guide-desc {
  font-size: 26rpx;
  color: #666;
  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: 40rpx;
  font-size: 28rpx;
}
.btn-know {
  background: #f5f5f5;
  color: #666;
}
.btn-learn {
  background: transparent;
  color: #F97316;
  border: 2rpx solid #F97316;
}
.btn-upgrade {
  background: #F97316;
  color: #fff;
}
</style>