caremate/train-frontend/pages/mine/index.vue

<template>
  <view class="mine-page">
    <view class="profile-card">
      <view class="avatar">👤</view>
      <view class="profile-info">
        <text class="profile-name">{{ name || '未登录' }}</text>
        <text class="profile-role">角色：{{ roleLabel }}</text>
        <text class="profile-verify" :class="verifyClass">校验：{{ verifyLabel }}</text>
      </view>
    </view>

    <view class="section-card">
      <text class="section-title">🎓 完课证书</text>
      <view v-if="certLoading" class="empty-text">加载中...</view>
       <view v-else-if="cert.eligible && cert.certNo" class="cert-ok">
         <text class="cert-no">{{ cert.certNo }}</text>
         <text class="cert-tip">恭喜完成离场验收全部 6 项！</text>
         <button class="mini-btn" @click="copyCertNo">复制证书号</button>
 
         <view class="cert-verify-box">
           <view class="verify-input-group">
             <input class="verify-input" v-model="verifyInput" placeholder="请输入证书编号查验" />
             <button class="verify-btn" @click="doVerify" :disabled="verifying">
               {{ verifying ? '查验中' : '查验' }}
             </button>
           </view>
           <text v-if="verifyResult" class="verify-result" :class="verifyResult.valid ? 'res-valid' : 'res-invalid'">
             {{ verifyResult.valid ? '有效证书：' + verifyResult.certNo + '（持有人 ' + verifyResult.holderName + '）' : '未查询到该证书编号' }}
           </text>
         </view>
       </view>
       <view v-else-if="cert.items && cert.items.length">
         <text class="cert-progress">已完成 {{ certDoneCount }}/6 项</text>
         <view class="cert-items">
           <view class="cert-item" v-for="(it, idx) in cert.items" :key="idx">
             <text class="cert-icon">{{ it.ok ? '✅' : '⬜' }}</text>
             <text class="cert-label">{{ it.label }}</text>
           </view>
         </view>
       </view>
       <view v-else class="empty-text">暂无证书信息，完成 6 项离场验收后可领取</view>
    </view>

    <view class="section-card" @click="goBadgeWall">
      <text class="section-title">🎖 成长地图</text>
      <text class="section-sub">徽章墙 · 段位成长 · 荣誉可晒</text>
    </view>

    <view class="section-card">
      <text class="section-title">🎟️ 卡券核销</text>

      <view v-if="coupons.length === 0" class="empty-text">暂无卡券</view>
      <view class="coupon-list">
        <view class="coupon-item" v-for="(c, idx) in coupons" :key="idx">
          <view class="coupon-info">
            <text class="coupon-code">{{ c.code }}</text>
            <text class="coupon-status" :class="c.status">{{ couponStatusText(c) }}</text>
          </view>
          <text v-if="c.status === 'unused'" class="redeem-btn" @click="redeem(c)">核销</text>
        </view>
      </view>
    </view>

    <view class="menu-card">
      <view class="menu-item" @click="goTo('/pages/enroll/list')">
        <text class="menu-icon">🎫</text>
        <text class="menu-text">报名中心</text>
        <text class="menu-arrow">›</text>
      </view>
      <view class="menu-item" @click="goTo('/pages/group-order/index')">
        <text class="menu-icon">👨‍👩‍👧‍👦</text>
        <text class="menu-text">团报</text>
        <text class="menu-arrow">›</text>
      </view>
      <view class="menu-item" @click="goTo('/pages/case/index')">
        <text class="menu-icon">📋</text>
        <text class="menu-text">案例授权</text>
        <text class="menu-arrow">›</text>
      </view>
      <view class="menu-item" @click="goTo('/pages/verify/index')">
        <text class="menu-icon">🎓</text>
        <text class="menu-text">校友信息</text>
        <text class="menu-arrow">›</text>
      </view>
    </view>

    <view class="course-entry" @click="switchToTab('/pages/course/index')">
      <text class="course-entry-icon">📖</text>
      <view class="course-entry-text">
        <text class="course-entry-title">课程内容</text>
        <text class="course-entry-sub">课前资料 · 小组 · 行动计划 · 积分榜 等请前往</text>
      </view>
      <text class="course-entry-arrow">›</text>
    </view>

    <button v-if="isLoggedIn" class="logout-btn" @click="handleLogout">退出登录</button>
    <button v-else class="logout-btn login-entry" @click="goLogin">点击登录</button>
  </view>
</template>

<script>
import { getMyCert, getMyCoupons, redeemCoupon, verifyCert, getMyBadges } from '@/utils/api.js'

export default {
  data() {
    return {
      certLoading: true,
      cert: {},
      coupons: [],
      redeemingId: 0,
      verifyInput: '',
      verifyResult: null,
      verifying: false
    }
  },
  computed: {
    isLoggedIn() {
      return this.$store.getters.isLoggedIn
    },
    name() {
      var stored = uni.getStorageSync('userInfo')
      var realName = this.$store.state.name || stored && stored.name || ''
      if (realName) return realName
      // 未填写真实姓名前，用微信昵称展示
      return this.$store.state.nickname || stored && stored.nickname || '未登录'
    },
    roleLabel() {
      var r = this.$store.state.role || 'student'
      var map = { student: '学员', admin: '管理员' }
      return map[r] || r
    },
    verifyLabel() {
      var v = this.$store.state.alumniVerify
      var map = { accepted: '已通过', pending: '待审核', rejected: '未通过' }
      return map[v] || v || '未校验'
    },
    verifyClass() {
      var v = this.$store.state.alumniVerify
      return v === 'accepted' ? 'verify-pass' : (v === 'pending' ? 'verify-pending' : 'verify-fail')
    },
    certDoneCount() {
      var items = this.cert.items || []
      var done = 0
      for (var i = 0; i < items.length; i++) {
        if (items[i].ok) done++
      }
      return done
    }
  },
  onShow() {
    // 未登录不请求个人数据（卡券/证书接口需登录态，避免 401 误触发登录过期弹窗）
    if (!this.isLoggedIn) return
    this.loadCert()
    this.loadCoupons()
  },
  methods: {
    goLogin() {
      // 未登录入口：回首页并触发登录浮层
      uni.switchTab({ url: '/pages/index/index' })
      setTimeout(function() {
        uni.$emit('showLoginSheet', {})
      }, 400)
    },
    goTo(url) {
      uni.navigateTo({ url: url })
    },
    goBadgeWall() {
      uni.navigateTo({ url: '/pages/badge/index' })
    },
    switchToTab(url) {
      uni.switchTab({ url: url })
    },
    loadCert() {
      var self = this
      self.certLoading = true
      getMyCert().then(function(resp) {
        self.cert = resp.data || {}
      }).catch(function() {
        self.cert = {}
      }).finally(function() {
        self.certLoading = false
      })
    },
    loadCoupons() {
      var self = this
      getMyCoupons().then(function(resp) {
        self.coupons = resp.data || []
      }).catch(function() {})
    },
    copyCertNo() {
      var certNo = this.cert.certNo || ''
      uni.setClipboardData({
        data: certNo,
        success: function() {
          uni.showToast({ title: '已复制', icon: 'success' })
        }
      })
    },
    doVerify() {
      var self = this
      var certNo = self.verifyInput.trim()
      if (!certNo) {
        uni.showToast({ title: '请输入证书编号', icon: 'none' })
        return
      }
      self.verifying = true
      self.verifyResult = null
      verifyCert(certNo).then(function(resp) {
        self.verifyResult = resp.data || { valid: false }
      }).catch(function(err) {
        uni.showToast({ title: (err && err.message) || '查验失败', icon: 'none' })
      }).finally(function() {
        self.verifying = false
      })
    },
    couponStatusText(c) {
      var map = { unused: '未使用', used: '已使用', expired: '已过期' }
      return map[c.status] || c.status
    },
    redeem(c) {
      var self = this
      if (self.redeemingId === c.id) return
      uni.showModal({
        title: '核销卡券',
        content: '确定核销卡券 ' + (c.code || '') + ' 吗？',
        success: function(res) {
          if (!res.confirm) return
          self.redeemingId = c.id
          redeemCoupon({ id: c.id }).then(function() {
            uni.showToast({ title: '核销成功', icon: 'success' })
            self.loadCoupons()
          }).catch(function(err) {
            uni.showToast({ title: (err && err.message) || '核销失败', icon: 'none' })
          }).finally(function() {
            self.redeemingId = 0
          })
        }
      })
    },
    handleLogout() {
      var self = this
      uni.showModal({
        title: '确认退出',
        content: '确定要退出登录吗？',
        success: function(res) {
          if (res.confirm) {
            self.$store.commit('logout')
            // 登录页已下线，退出后回首页（首页展示点击登录入口）
            uni.reLaunch({ url: '/pages/index/index' })
          }
        }
      })
    }
  }
}
</script>

<style scoped>
.mine-page { min-height: 100vh; background: #F5F5F5; padding: 24rpx 32rpx; }
.profile-card { display: flex; align-items: center; background: linear-gradient(135deg, #F97316, #EA580C); border-radius: 16rpx; padding: 40rpx 32rpx; margin-bottom: 24rpx; }
.avatar { width: 100rpx; height: 100rpx; border-radius: 50rpx; background: rgba(255,255,255,0.25); display: flex; align-items: center; justify-content: center; font-size: 56rpx; margin-right: 24rpx; flex-shrink: 0; }
.profile-info { flex: 1; }
.profile-name { display: block; font-size: 36rpx; font-weight: 700; color: #FFF; margin-bottom: 8rpx; }
.profile-role { display: block; font-size: 26rpx; color: rgba(255,255,255,0.85); margin-bottom: 4rpx; }
.profile-verify { display: block; font-size: 24rpx; padding: 4rpx 16rpx; border-radius: 6rpx; margin-top: 8rpx; }
.verify-pass { background: rgba(34,197,94,0.2); color: #86EFAC; }
.verify-pending { background: rgba(255,183,77,0.2); color: #FFD54F; }
.verify-fail { background: rgba(239,83,80,0.2); color: #E57373; }
.section-card { background: #FFF; border-radius: 16rpx; padding: 28rpx 32rpx; margin-bottom: 24rpx; }
.section-title { display: block; font-size: 30rpx; font-weight: 700; color: #1E293B; margin-bottom: 16rpx; }
.section-sub { display: block; font-size: 24rpx; color: #94A3B8; margin-top: 8rpx; }
.empty-text { font-size: 26rpx; color: #94A3B8; text-align: center; padding: 24rpx 0; }
.cert-ok { display: flex; flex-direction: column; align-items: center; padding: 16rpx 0; }
.cert-no { font-size: 32rpx; font-weight: 700; color: #F97316; font-family: monospace; margin-bottom: 12rpx; }
.cert-tip { font-size: 26rpx; color: #22C55E; margin-bottom: 20rpx; }
.mini-btn { width: 240rpx; height: 64rpx; line-height: 64rpx; background: #F97316; color: #FFF; font-size: 26rpx; border-radius: 32rpx; border: none; padding: 0; text-align: center; }
.mini-btn:active { opacity: 0.85; }
.cert-verify-box { width: 100%; margin-top: 32rpx; padding-top: 32rpx; border-top: 1rpx solid #F1F5F9; display: flex; flex-direction: column; align-items: center; }
.verify-input-group { display: flex; width: 100%; max-width: 500rpx; align-items: center; margin-bottom: 16rpx; }
.verify-input { flex: 1; height: 64rpx; background: #F8FAFC; border: 2rpx solid #E2E8F0; border-radius: 8rpx; padding: 0 20rpx; font-size: 26rpx; color: #1E293B; }
.verify-btn { width: 120rpx; height: 64rpx; line-height: 64rpx; background: #F97316; color: #FFF; font-size: 26rpx; border-radius: 8rpx; border: none; padding: 0; margin-left: 16rpx; }
.verify-btn:disabled { background: #CBD5E1; }
.verify-result { font-size: 26rpx; text-align: center; padding: 12rpx 24rpx; border-radius: 8rpx; background: #F8FAFC; }
.res-valid { color: #22C55E; border: 1rpx solid #BBF7D0; }
.res-invalid { color: #94A3B8; border: 1rpx solid #E2E8F0; }
.cert-progress { display: block; font-size: 26rpx; color: #64748B; margin-bottom: 16rpx; }
.cert-items { }
.cert-item { display: flex; align-items: center; padding: 10rpx 0; }
.cert-icon { font-size: 28rpx; margin-right: 12rpx; }
.cert-label { font-size: 26rpx; color: #1E293B; }
.coupon-list { }
.coupon-item { display: flex; justify-content: space-between; align-items: center; padding: 20rpx 0; border-bottom: 1rpx solid #F1F5F9; }
.coupon-info { display: flex; align-items: center; flex-wrap: wrap; flex: 1; margin-right: 16rpx; }
.coupon-code { font-size: 24rpx; color: #64748B; font-family: monospace; margin-right: 16rpx; }
.coupon-status { font-size: 22rpx; padding: 4rpx 12rpx; border-radius: 6rpx; }
.coupon-status.unused { background: #F0FDF4; color: #22C55E; }
.coupon-status.used { background: #F1F5F9; color: #94A3B8; }
.coupon-status.expired { background: #FEF2F2; color: #EF4444; }
.redeem-btn { font-size: 26rpx; color: #F97316; font-weight: 600; padding: 8rpx 24rpx; border: 2rpx solid #FED7AA; border-radius: 28rpx; }
.redeem-btn:active { background: #FFF7ED; }
.menu-card { background: #FFF; border-radius: 16rpx; overflow: hidden; margin-bottom: 32rpx; }
.menu-item { display: flex; align-items: center; padding: 28rpx 32rpx; border-bottom: 1rpx solid #F1F5F9; }
.menu-item:active { background: #F8FAFC; }
.menu-icon { font-size: 36rpx; margin-right: 20rpx; }
.menu-text { flex: 1; font-size: 30rpx; color: #1E293B; }
.menu-arrow { font-size: 32rpx; color: #CBD5E1; }
.course-entry { display: flex; align-items: center; background: #FFF; border-radius: 16rpx; padding: 28rpx 32rpx; margin-bottom: 32rpx; }
.course-entry:active { background: #F8FAFC; }
.course-entry-icon { font-size: 44rpx; margin-right: 20rpx; }
.course-entry-text { flex: 1; display: flex; flex-direction: column; }
.course-entry-title { font-size: 30rpx; font-weight: 600; color: #1E293B; margin-bottom: 6rpx; }
.course-entry-sub { font-size: 24rpx; color: #64748B; }
.course-entry-arrow { font-size: 36rpx; color: #CBD5E1; }
.logout-btn { width: 100%; height: 88rpx; line-height: 88rpx; background: #FFF; color: #EF5350; font-size: 30rpx; font-weight: 500; border-radius: 16rpx; border: 2rpx solid #FEE2E2; }
.logout-btn:active { opacity: 0.85; }
</style>