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

<template>
  <view class="case-page">
    <view class="section-card">
      <text class="section-title">案例授权</text>
      <text class="card-desc">教学案例将展示您的姓名与执业信息，请确认是否同意授权展示</text>

      <view v-if="loading" class="empty-tip">加载中…</view>
      <view v-else-if="list.length === 0" class="empty-tip">暂无需要授权的案例</view>
      <view v-else>
        <view class="case-item" v-for="item in list" :key="item.id">
          <text class="case-title">{{ item.title }}</text>
          <text class="case-summary">{{ item.summary }}</text>
          <view class="case-foot">
            <text class="case-status" :class="item.status">{{ statusLabel(item.status) }}</text>
            <view class="case-actions" v-if="item.status === 'pending'">
              <text class="action-btn reject" @click="decide(item, false)">拒绝</text>
              <text class="action-btn agree" @click="decide(item, true)">同意授权</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getMyCases, decideCase } from '@/utils/api.js'

export default {
  data() {
    return {
      list: [],
      loading: false,
      deciding: false
    }
  },
  onShow() {
    this.loadMine()
  },
  methods: {
    loadMine() {
      var self = this
      self.loading = true
      getMyCases().then(function(resp) {
        self.list = resp.data || []
      }).catch(function() {
        uni.showToast({ title: '加载案例失败', icon: 'none' })
      }).finally(function() {
        self.loading = false
      })
    },
    statusLabel(status) {
      var map = { pending: '待授权', authorized: '已授权', rejected: '已拒绝', published: '已发布' }
      return map[status] || status || '未知'
    },
    decide(item, agree) {
      var self = this
      if (self.deciding) return
      var text = agree ? '同意授权教学使用该案例？' : '拒绝授权该案例？'
      uni.showModal({
        title: '案例授权',
        content: text,
        success: function(res) {
          if (!res.confirm) return
          self.deciding = true
          decideCase({ caseId: item.id, agree: agree }).then(function() {
            uni.showToast({ title: agree ? '已授权' : '已拒绝', icon: 'success' })
            self.loadMine()
          }).catch(function(err) {
            uni.showToast({ title: (err && err.message) || '操作失败', icon: 'none' })
          }).finally(function() {
            self.deciding = false
          })
        }
      })
    }
  }
}
</script>

<style scoped>
.case-page { min-height: 100vh; background: #F5F5F5; padding: 32rpx; }
.section-card { background: #FFF; border-radius: 16rpx; padding: 32rpx; }
.section-title { display: block; font-size: 32rpx; font-weight: 700; color: #1E293B; margin-bottom: 8rpx; border-left: 8rpx solid #F97316; padding-left: 16rpx; }
.card-desc { display: block; font-size: 26rpx; color: #64748B; margin-bottom: 24rpx; }
.empty-tip { font-size: 26rpx; color: #94A3B8; padding: 32rpx 0; text-align: center; }
.case-item { padding: 24rpx 0; border-bottom: 1rpx solid #F1F5F9; }
.case-item:last-child { border-bottom: none; }
.case-title { display: block; font-size: 28rpx; color: #1E293B; font-weight: 600; margin-bottom: 8rpx; }
.case-summary { display: block; font-size: 26rpx; color: #64748B; margin-bottom: 16rpx; }
.case-foot { display: flex; align-items: center; justify-content: space-between; }
.case-status { font-size: 24rpx; font-weight: 600; }
.case-status.pending { color: #F97316; }
.case-status.authorized { color: #3B82F6; }
.case-status.rejected { color: #EF4444; }
.case-status.published { color: #22C55E; }
.case-actions { display: flex; align-items: center; }
.action-btn { font-size: 26rpx; padding: 8rpx 28rpx; border-radius: 28rpx; margin-left: 16rpx; }
.action-btn.reject { color: #EF4444; border: 2rpx solid #FECACA; }
.action-btn.agree { background: #F97316; color: #FFF; border: 2rpx solid #F97316; }
.action-btn:active { opacity: 0.8; }
</style>