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

<template>
  <view class="material-page">
    <view class="section-card">
      <text class="section-title">课前资料包</text>
      <text class="card-desc">进班后可见本班次专属资料与通用资料</text>

      <view v-if="loading" class="empty-text">加载中…</view>
      <view v-else-if="list.length === 0" class="empty-text">暂无课前资料，请留意后续更新</view>

      <view class="material-list">
        <view class="material-item" v-for="(m, idx) in list" :key="idx">
          <text class="material-icon">📄</text>
          <view class="material-info">
            <text class="material-title">{{ m.title }}</text>
            <text class="material-badge" v-if="m.classId">班次专属</text>
            <text class="material-badge general" v-else>通用</text>
          </view>
          <text class="material-preview" @click="preview(m)">预览</text>
        </view>
      </view>
    </view>
  </view>
</template>

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

export default {
  data() {
    return {
      list: [],
      loading: true
    }
  },
  onShow() {
    if (!guardPage()) return
    this.loadMaterials()
  },
  methods: {
    loadMaterials() {
      var self = this
      self.loading = true
      getClassMaterials().then(function(resp) {
        self.list = resp.data || []
      }).catch(function(err) {
        uni.showToast({ title: (err && err.message) || '获取资料失败', icon: 'none' })
      }).finally(function() {
        self.loading = false
      })
    },
    // 预览占位：test-mode 未接入文件服务，提示跳转后台配置的附件地址
    preview(m) {
      if (m.fileUrl) {
        uni.showToast({ title: '预览功能待接入，请用文件地址访问', icon: 'none' })
      } else {
        uni.showToast({ title: '该资料暂无附件', icon: 'none' })
      }
    }
  }
}
</script>

<style scoped>
.material-page { min-height: 100vh; background: #F5F5F5; padding: 24rpx 32rpx; }
.section-card { background: #FFF; border-radius: 16rpx; padding: 32rpx; margin-bottom: 24rpx; }
.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: 28rpx; }
.material-list { margin-top: 8rpx; }
.material-item { display: flex; align-items: center; padding: 24rpx 0; border-bottom: 1rpx solid #F1F5F9; }
.material-icon { font-size: 40rpx; margin-right: 16rpx; }
.material-info { flex: 1; display: flex; flex-direction: column; }
.material-title { font-size: 28rpx; font-weight: 500; color: #1E293B; }
.material-badge { display: inline-block; align-self: flex-start; font-size: 20rpx; color: #F97316; background: #FFF7ED; padding: 2rpx 12rpx; border-radius: 6rpx; margin-top: 8rpx; }
.material-badge.general { color: #64748B; background: #F1F5F9; }
.material-preview { font-size: 26rpx; color: #F97316; margin-left: 16rpx; }
.empty-text { font-size: 26rpx; color: #94A3B8; text-align: center; padding: 40rpx 0; }
</style>