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

<template>
  <view class="class-page">
    <view v-if="classInfo" class="class-card">
      <text class="card-title">当前班次</text>
      <view class="info-row">
        <text class="info-label">班次名称</text>
        <text class="info-value">{{ classInfo.name }}</text>
      </view>
      <view class="info-row">
        <text class="info-label">班级码</text>
        <text class="info-value">{{ classInfo.code }}</text>
      </view>
      <view class="info-row" v-if="classInfo.time">
        <text class="info-label">时间</text>
        <text class="info-value">{{ classInfo.time }}</text>
      </view>
      <view class="info-row" v-if="classInfo.place">
        <text class="info-label">地点</text>
        <text class="info-value">{{ classInfo.place }}</text>
      </view>
      <button class="go-btn" @click="goHome">进入首页</button>
    </view>
    <view v-else class="join-card">
      <text class="card-title">进班</text>
      <text class="card-desc">请输入班级码加入您的训练班级</text>
      <input class="code-input" v-model="classCode" placeholder="请输入班级码" />
      <text class="form-error" v-if="errorMsg">{{ errorMsg }}</text>
      <button class="join-btn" @click="handleJoin" :loading="loading" :disabled="loading">进班</button>
    </view>
  </view>
</template>

<script>
import { joinClass, getClassInfo } from '@/utils/api.js'
import { guardPage } from '@/utils/guard.js'

export default {
  data() {
    return {
      classInfo: null,
      classCode: '',
      errorMsg: '',
      loading: false
    }
  },
  onShow() {
    if (!guardPage()) return
    this.loadClassInfo()
  },
  methods: {
    loadClassInfo() {
      var self = this
      getClassInfo().then(function(resp) {
        if (resp.data) {
          self.classInfo = resp.data
          self.$store.commit('setClassId', resp.data.id)
        }
      }).catch(function() {
        self.classInfo = null
      })
    },
    handleJoin() {
      if (!this.classCode.trim()) {
        this.errorMsg = '请输入班级码'
        return
      }
      this.errorMsg = ''
      if (this.loading) return
      this.loading = true
      var self = this
      joinClass(this.classCode).then(function(resp) {
        self.classInfo = resp.data
        self.$store.commit('setClassId', resp.data.classId)
        uni.showToast({ title: '进班成功', icon: 'success' })
      }).catch(function(err) {
        self.errorMsg = (err && err.message) || '进班失败'
      }).finally(function() {
        self.loading = false
      })
    },
    goHome() {
      uni.switchTab({ url: '/pages/index/index' })
    }
  }
}
</script>

<style scoped>
.class-page {
  min-height: 100vh;
  background: #F5F5F5;
  padding: 32rpx;
}
.class-card, .join-card {
  background: #FFFFFF;
  border-radius: 16rpx;
  padding: 40rpx 32rpx;
}
.card-title {
  display: block;
  font-size: 36rpx;
  font-weight: 700;
  color: #1E293B;
  margin-bottom: 32rpx;
}
.card-desc {
  display: block;
  font-size: 26rpx;
  color: #64748B;
  margin-bottom: 32rpx;
}
.info-row {
  display: flex;
  justify-content: space-between;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #F1F5F9;
}
.info-label {
  font-size: 28rpx;
  color: #64748B;
}
.info-value {
  font-size: 28rpx;
  color: #1E293B;
  font-weight: 500;
}
.code-input {
  width: 100%;
  height: 88rpx;
  border: 2rpx solid #E2E8F0;
  border-radius: 12rpx;
  padding: 0 24rpx;
  font-size: 32rpx;
  color: #1E293B;
  background: #F8FAFC;
  margin-bottom: 16rpx;
}
.form-error {
  display: block;
  font-size: 24rpx;
  color: #EF5350;
  margin-bottom: 16rpx;
}
.go-btn, .join-btn {
  width: 100%;
  height: 88rpx;
  line-height: 88rpx;
  background: #F97316;
  color: #FFFFFF;
  font-size: 30rpx;
  font-weight: 600;
  border-radius: 44rpx;
  border: none;
  margin-top: 32rpx;
}
.go-btn:active, .join-btn:active {
  opacity: 0.85;
}
</style>