cfc/cfc-frontend/components/gate-lock.vue

<template>
<view class="gate-lock">
  <view class="lock-card">
    <view class="lock-icon">🔒</view>
    <text class="gate-name">{{ gateData.name }}</text>
    <text class="gate-desc">{{ gateData.description }}</text>
    <view class="gate-reward" v-if="totalReward > 0">
      <text class="reward-text">通关奖励</text>
      <text class="reward-points" v-if="gateData.rewardPoints > 0">+{{ gateData.rewardPoints }} CF值</text>
      <text class="reward-energy" v-if="gateData.rewardEnergy > 0">+{{ gateData.rewardEnergy }}能量</text>
    </view>
    <button class="gate-btn" @click="goAction">{{ btnText }}</button>
  </view>
</view>
</template>

<script>
/**
 * 通关门禁锁定组件
 * props: gate - 当前锁定关卡对象 { gateType, name, description, icon, rewardPoints, rewardEnergy }
 * 根据 gateType 自动映射按钮文案和跳转目标
 */
export default {
  props: {
    gate: {
      type: Object,
      default: function() { return {} }
    }
  },
  computed: {
    gateData: function() {
      var g = this.gate || {}
      return {
        gateType: g.gateType || '',
        name: g.name || '未知关卡',
        description: g.description || '',
        rewardPoints: g.rewardPoints || 0,
        rewardEnergy: g.rewardEnergy || 0
      }
    },
    totalReward: function() {
      return (this.gateData.rewardPoints || 0) + (this.gateData.rewardEnergy || 0)
    },
    btnText: function() {
      var map = {
        SELF_CHECK: '完成五维基础能量检测，解锁能量沙盘',
        INVITE_FAMILY: '邀请家人加入，解锁全家沙盘',
        CREATE_FAMILY_MEMBER: '创建孩子账号，解锁微行动',
        PURCHASE: '去商城逛逛',
        MEMBERSHIP: '查看会员方案',
        REPORT_UPLOAD: '上传健康报告'
      }
      return map[this.gateData.gateType] || '前往解锁'
    }
  },
  methods: {
    goAction: function() {
      var type = this.gateData.gateType
      var url = ''
      switch (type) {
        case 'SELF_CHECK':
          url = '/pages/family/self-check'
          break
        case 'INVITE_FAMILY':
          url = '/pages/profile-extra/family-members'
          break
        case 'CREATE_FAMILY_MEMBER':
          url = '/pages/profile-extra/family-members'
          break
        case 'PURCHASE':
          url = '/pages/shop/index/index'
          break
        case 'MEMBERSHIP':
          url = '/pages/membership/index'
          break
        case 'REPORT_UPLOAD':
          url = '/pages/health/report-upload'
          break
      }
      if (url) {
        uni.navigateTo({ url: url })
      }
    }
  }
}
</script>

<style scoped>
.gate-lock {
  margin: 20rpx 30rpx;
}
.lock-card {
  background: linear-gradient(135deg, #1A2A4A, #1E3A5F);
  border-radius: 24rpx;
  padding: 40rpx 30rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.lock-icon {
  font-size: 64rpx;
  margin-bottom: 16rpx;
  opacity: 0.8;
}
.gate-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #8FC5E8;
  margin-bottom: 12rpx;
}
.gate-desc {
  font-size: 24rpx;
  color: rgba(143,197,232,0.7);
  margin-bottom: 20rpx;
  line-height: 1.5;
}
.gate-reward {
  display: flex;
  align-items: center;
  gap: 12rpx;
  margin-bottom: 24rpx;
}
.reward-text {
  font-size: 22rpx;
  color: rgba(143,197,232,0.5);
}
.reward-points, .reward-energy {
  font-size: 22rpx;
  padding: 4rpx 14rpx;
  border-radius: 16rpx;
}
.reward-points {
  color: #FFD700;
  background: rgba(255,215,0,0.12);
}
.reward-energy {
  color: #42A5F5;
  background: rgba(66,165,245,0.12);
}
.gate-btn {
  width: 70%;
  height: 80rpx;
  line-height: 80rpx;
  font-size: 28rpx;
  color: #fff;
  background: linear-gradient(135deg, #5B9BD5, #3A7CC2);
  border: none;
  border-radius: 40rpx;
  text-align: center;
}
.gate-btn:active {
  opacity: 0.8;
}
</style>