调整未报名和未缴费的学生在详情页面中的显示

src/pages/view/routine/jc/detail.vue

@@ -54,7 +54,7 @@
                   </view>
                   <view class="flex-row">
                     <view
-                      class="status-tag"
+                      class="status-tag readonly"
                       :class="getTeacherStatusClass(teacher.pcZt)"
                     >
                       {{ getTeacherStatusText(teacher.pcZt) }}
@@ -101,48 +101,82 @@
           </view>
         </view>
 
-        <!-- 学生列表 -->
+        <!-- 学生列表 - 分为两个部分 -->
         <view class="student-list">
-          <view class="student-grid">
+          <!-- 已缴费学生列表 -->
-            <view
+          <view v-if="yjfXs.length > 0" class="student-section">
-              v-for="student in dmDetail.xsList"
+            <view class="section-subtitle">已缴费学生 ({{ yjfXs.length }}人)</view>
-              :key="student.id"
+            <view class="student-grid">
-              class="student-item bg-white r-md p-12"
+              <view
-              :class="getStudentItemClass(student.jcZt)"
+                v-for="student in yjfXs"
-            >
+                :key="student.id"
-              <view class="flex-row items-center">
+                class="student-item bg-white r-md p-12"
-                <view class="avatar-container mr-8">
+              >
-                  <image
+                <view class="flex-row items-center">
-                    class="student-avatar"
+                  <view class="avatar-container mr-8">
-                    :src="student.tx || '/static/images/default-avatar.png'"
+                    <image
-                    mode="aspectFill"
+                      class="student-avatar"
-                  ></image>
+                      :src="student.tx || '/static/images/default-avatar.png'"
-                </view>
+                      mode="aspectFill"
-                <view class="flex-1 overflow-hidden">
+                    ></image>
-                  <view class="student-name mb-8">
-                    <text class="font-14 cor-333">{{ student.xsXm }}</text>
-                    <text v-if="student.jcZt === 'D' || student.jcZt === 'E'" class="status-indicator">
-                      {{ student.jcZt === 'D' ? '未缴费' : '未报名' }}
-                    </text>
                   </view>
-                  <view class="flex-row">
+                  <view class="flex-1 overflow-hidden">
-                    <view
+                    <view class="student-name mb-8">
-                      class="status-tag"
+                      <text class="font-14 cor-333">{{ student.xsXm }}</text>
-                      :class="getStatusClass(student.jcZt)"
+                    </view>
-                    >
+                    <view class="flex-row">
-                      {{ getStatusText(student.jcZt) }}
+                      <view
+                        class="status-tag readonly"
+                        :class="getStatusClass(student.jcZt)"
+                      >
+                        {{ getStatusText(student.jcZt) }}
+                      </view>
                     </view>
                   </view>
                 </view>
               </view>
             </view>
           </view>
-        </view>
-      </view>
 
-      <!-- 空状态 -->
+          <!-- 未缴费/未报名学生列表 -->
-      <view v-if="!dmDetail.xsList || dmDetail.xsList.length === 0" class="empty-tip">
+          <view v-if="wjfXs.length > 0" class="student-section">
-        暂无学生数据
+            <view class="section-subtitle">未缴费/未报名学生 ({{ wjfXs.length }}人)</view>
+            <view class="student-grid">
+              <view
+                v-for="student in wjfXs"
+                :key="student.id"
+                class="student-item bg-white r-md p-12"
+              >
+                <view class="flex-row items-center">
+                  <view class="avatar-container mr-8">
+                    <image
+                      class="student-avatar"
+                      :src="student.tx || '/static/images/default-avatar.png'"
+                      mode="aspectFill"
+                    ></image>
+                  </view>
+                  <view class="flex-1 overflow-hidden">
+                    <view class="student-name mb-8">
+                      <text class="font-14 cor-333">{{ student.xsXm }}</text>
+                    </view>
+                    <view class="flex-row">
+                      <view
+                        class="status-tag readonly"
+                        :class="getStatusClass(student.jcZt)"
+                      >
+                        {{ getStatusText(student.jcZt) }}
+                      </view>
+                    </view>
+                  </view>
+                </view>
+              </view>
+            </view>
+          </view>
+
+          <view v-if="dmDetail.xsList.length === 0" class="empty-tip">
+            暂无学生数据
+          </view>
+        </view>
       </view>
     </view>
 
@@ -156,7 +190,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, watch } from 'vue'
+import { ref, onMounted, watch, computed } from 'vue'
 import { getJcDmDetailApi } from '@/api/base/jcApi'
 import { useDataStore } from '@/store/modules/data'
 const { getData } = useDataStore()
@@ -166,6 +200,23 @@ const loading = ref(false)
 const dmDetail = ref<any>(null)
 const error = ref('')
 
+// 计算属性
+// 已缴费学生列表（状态为A、B、C的学生）
+const yjfXs = computed(() => {
+  if (!dmDetail.value?.xsList) return []
+  return dmDetail.value.xsList.filter((student: any) => 
+    ['A', 'B', 'C'].includes(student.jcZt)
+  )
+})
+
+// 未缴费/未报名学生列表（状态为D、E的学生）
+const wjfXs = computed(() => {
+  if (!dmDetail.value?.xsList) return []
+  return dmDetail.value.xsList.filter((student: any) => 
+    ['D', 'E'].includes(student.jcZt)
+  )
+})
+
 // 方法
 const loadDetail = async () => {
   if (!getData.id) return
@@ -240,17 +291,6 @@ const getStatusClass = (status: string) => {
   }
 }
 
-const getStudentItemClass = (status: string) => {
-  switch (status) {
-    case 'D':
-      return 'status-unpaid-item'
-    case 'E':
-      return 'status-unregistered-item'
-    default:
-      return ''
-  }
-}
-
 const getTeacherStatusText = (status: string) => {
   switch (status) {
     case 'A':
@@ -334,6 +374,19 @@ onMounted(() => {
   margin-bottom: 20rpx;
 }
 
+.section-subtitle {
+  font-size: 28rpx;
+  font-weight: bold;
+  color: #666;
+  margin: 20rpx 0 15rpx 0;
+  padding: 10rpx 0;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.student-section {
+  margin-bottom: 30rpx;
+}
+
 .info-grid {
   display: grid;
   grid-template-columns: 1fr;
@@ -395,6 +448,14 @@ onMounted(() => {
   &.absent {
     color: #ff4d4f;
   }
+  
+  &.unpaid {
+    color: #722ed1;
+  }
+  
+  &.unregistered {
+    color: #eb2f96;
+  }
 }
 
 .stat-label {
@@ -448,6 +509,11 @@ onMounted(() => {
   padding: 6rpx 16rpx;
   border-radius: 8rpx;
   display: inline-block;
+  
+  &.readonly {
+    opacity: 0.8;
+    cursor: not-allowed;
+  }
 }
 
 .status-normal {
@@ -480,11 +546,6 @@ onMounted(() => {
   background-color: #fff0f0;
 }
 
-.status-unregistered-item {
-  border-left: 8rpx solid #eb2f96;
-  background-color: #fff0f6;
-}
-
 .status-indicator {
   font-size: 20rpx;
   margin-left: 16rpx;
@@ -532,6 +593,10 @@ onMounted(() => {
   font-size: 28rpx;
 }
 
+.font-12 {
+  font-size: 24rpx;
+}
+
 .cor-333 {
   color: #333;
 }