hebo/zhxy-jsd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
ywyonui 2025-08-12 00:05:04 +08:00
parent 1a066437dc
commit 24de489ba8
1 changed files with 116 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

119
src/pages/view/routine/jc/detail.vue
View File

@ -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,14 +101,16 @@
</view>
</view>
<!-- 学生列表 -->
<!-- 学生列表 - 分为两个部分 -->
<view class="student-list">
<!-- 已缴费学生列表 -->
<view v-if="yjfXs.length > 0" class="student-section">
<view class="section-subtitle">已缴费学生 ({{ yjfXs.length }}人)</view>
<view class="student-grid">
<view
v-for="student in dmDetail.xsList"
v-for="student in yjfXs"
:key="student.id"
class="student-item bg-white r-md p-12"
:class="getStudentItemClass(student.jcZt)"
>
<view class="flex-row items-center">
<view class="avatar-container mr-8">
@ -121,13 +123,10 @@
<view class="flex-1 overflow-hidden">
<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="status-tag"
class="status-tag readonly"
:class="getStatusClass(student.jcZt)"
>
{{ getStatusText(student.jcZt) }}
@ -138,13 +137,48 @@
</view>
</view>
</view>
<!-- 未缴费/未报名学生列表 -->
<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 || dmDetail.xsList.length === 0" class="empty-tip">
<view v-if="dmDetail.xsList.length === 0" class="empty-tip">
暂无学生数据
</view>
</view>
</view>
</view>
<!-- 错误状态 -->
<view v-else-if="error" class="error-state">
@ -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;
}