cfc/cfc-frontend/components/gate-guide-bar.vue

<template>
<view class="gate-guide-bar" v-if="showGuide" @click="goGates">
  <text class="guide-icon">🔓</text>
  <text class="guide-text">解锁进度 {{ unlockedCount }}/{{ totalCount }} · {{ guideText }}</text>
  <text class="guide-arrow">→</text>
</view>
</template>

<script>
/**
 * 首页引导进度条
 * 数据源：从父组件传入 unlockStatus（/api/unlock/status 返回）
 * 主线全解锁后自动隐藏
 */
export default {
  props: {
    unlockStatus: {
      type: Object,
      default: function() { return null }
    }
  },
  computed: {
    gates: function() {
      var s = this.unlockStatus
      if (!s || !s.gates) return []
      return s.gates
    },
    mainGates: function() {
      return this.gates.filter(function(g) { return g.isRequired === 1 })
    },
    totalCount: function() {
      return this.mainGates.length
    },
    unlockedCount: function() {
      return this.mainGates.filter(function(g) { return g.status === 'UNLOCKED' }).length
    },
    showGuide: function() {
      if (!this.unlockStatus) return false
      if (this.totalCount === 0) return false
      // 全部解锁后隐藏
      return this.unlockedCount < this.totalCount
    },
    currentGate: function() {
      var gates = this.mainGates
      for (var i = 0; i < gates.length; i++) {
        var g = gates[i]
        if (g.status === 'CURRENT' || g.status === 'LOCKED') return g
      }
      return null
    },
    guideText: function() {
      if (this.currentGate) {
        return '完成「' + (this.currentGate.name || '') + '」→'
      }
      return '查看全部关卡 →'
    }
  },
  methods: {
    goGates: function() {
      uni.navigateTo({ url: '/pages/profile-extra/gates' })
    }
  }
}
</script>

<style scoped>
.gate-guide-bar {
  display: flex;
  align-items: center;
  padding: 16rpx 24rpx;
  margin: 16rpx 30rpx;
  background: linear-gradient(135deg, #1A2A4A, #1E3A5F);
  border-radius: 16rpx;
  cursor: pointer;
}
.guide-icon {
  font-size: 28rpx;
  margin-right: 12rpx;
}
.guide-text {
  flex: 1;
  font-size: 24rpx;
  color: #8FC5E8;
}
.guide-arrow {
  font-size: 28rpx;
  color: rgba(143,197,232,0.5);
  margin-left: 8rpx;
}
</style>