27 changed files with 3101 additions and 305 deletions
@ -0,0 +1,625 @@ |
|||||
|
<!--教练服务详情页--> |
||||
|
<template> |
||||
|
<view class="container"> |
||||
|
<!-- 如果没有指定ID，显示服务列表 --> |
||||
|
<view class="content" v-if="!id"> |
||||
|
<view class="service-list"> |
||||
|
<view class="section-title">我的服务列表</view> |
||||
|
<view class="empty-list" v-if="serviceList.length === 0"> |
||||
|
<text>暂无服务记录</text> |
||||
|
</view> |
||||
|
<view class="service-item" v-for="(item, index) in serviceList" :key="index" @click="viewServiceDetail(item.id)"> |
||||
|
<view class="service-header"> |
||||
|
<view class="user-info"> |
||||
|
<image class="user-avatar" src="/static/icon-img/avatar.png"></image> |
||||
|
<text class="user-name">{{item.service_id}} {{item.resource_id}}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="service-content"> |
||||
|
<view class="info-row"> |
||||
|
<text class="info-label">所属校区:</text> |
||||
|
<text class="info-value">{{item.campus || '总部校区'}}</text> |
||||
|
</view> |
||||
|
<view class="info-row"> |
||||
|
<text class="info-label">来源:</text> |
||||
|
<text class="info-value">{{item.source || '线上'}}</text> |
||||
|
</view> |
||||
|
<view class="info-row"> |
||||
|
<text class="info-label">来源渠道:</text> |
||||
|
<text class="info-value">{{item.channel || '地推'}}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="service-footer"> |
||||
|
<text class="contact-status">暂未联系</text> |
||||
|
<view class="effective-status" :class="{'status-yes': item.status === 1}"> |
||||
|
是否有效: {{item.status === 1 ? '有效' : '无效'}} |
||||
|
<view class="status-dot" :class="{'dot-yes': item.status === 1}"></view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 如果指定了ID，显示服务详情 --> |
||||
|
<view class="content detail-content" v-else-if="serviceInfo"> |
||||
|
<view class="service-detail-card"> |
||||
|
<view class="detail-header"> |
||||
|
<view class="user-info"> |
||||
|
<image class="user-avatar" src="/static/icon-img/avatar.png"></image> |
||||
|
<text class="user-name">{{serviceInfo.service_id}}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="detail-content"> |
||||
|
<view class="card-section"> |
||||
|
<view class="section-title">基本信息</view> |
||||
|
<view class="info-card"> |
||||
|
<view class="info-item"> |
||||
|
<text class="item-label">服务内容</text> |
||||
|
<text class="item-value">{{serviceInfo.id}}</text> |
||||
|
</view> |
||||
|
<view class="info-item"> |
||||
|
<text class="item-label">学员姓名</text> |
||||
|
<text class="item-value">{{serviceInfo.resource_id}}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="card-section"> |
||||
|
<view class="section-title">服务详情</view> |
||||
|
<view class="info-card"> |
||||
|
<view class="info-item"> |
||||
|
<text class="item-label">服务备注</text> |
||||
|
<text class="item-value">{{serviceInfo.service_remark || '暂无备注'}}</text> |
||||
|
</view> |
||||
|
<view class="info-item"> |
||||
|
<text class="item-label">服务状态</text> |
||||
|
<text class="item-value" :class="{'status-completed': serviceInfo.status === 1}"> |
||||
|
{{serviceInfo.status === 1 ? '已完成服务' : '待完成服务'}} |
||||
|
</text> |
||||
|
</view> |
||||
|
<view class="info-item"> |
||||
|
<text class="item-label">服务人员ID</text> |
||||
|
<text class="item-value">{{serviceInfo.staff_id}}</text> |
||||
|
</view> |
||||
|
<view class="info-item"> |
||||
|
<text class="item-label">评分</text> |
||||
|
<view class="score-box"> |
||||
|
<view class="star-box"> |
||||
|
<uni-icons v-for="i in 5" :key="i" :type="i <= serviceInfo.score ? 'star-filled' : 'star'" size="18" color="#FFB800"></uni-icons> |
||||
|
</view> |
||||
|
<text class="score-value">{{serviceInfo.score}}分</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="card-section"> |
||||
|
<view class="section-title">用户反馈</view> |
||||
|
<view class="info-card"> |
||||
|
<view class="feedback-content" v-if="serviceInfo.feedback"> |
||||
|
<text>{{serviceInfo.feedback}}</text> |
||||
|
</view> |
||||
|
<view class="empty-feedback" v-else> |
||||
|
<text>暂无用户反馈</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="card-section"> |
||||
|
<view class="section-title">时间信息</view> |
||||
|
<view class="info-card"> |
||||
|
<view class="info-item"> |
||||
|
<text class="item-label">创建时间</text> |
||||
|
<text class="item-value">{{formatTime(serviceInfo.created_at)}}</text> |
||||
|
</view> |
||||
|
<view class="info-item"> |
||||
|
<text class="item-label">反馈时间</text> |
||||
|
<text class="item-value">{{formatTime(serviceInfo.feedback_time)}}</text> |
||||
|
</view> |
||||
|
<view class="info-item"> |
||||
|
<text class="item-label">更新时间</text> |
||||
|
<text class="item-value">{{formatTime(serviceInfo.updated_at)}}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="detail-footer" v-if="serviceInfo.status !== 1"> |
||||
|
<button class="btn primary" @click="completeService">完成服务</button> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view v-else class="loading-box"> |
||||
|
<text>加载中...</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import apiRoute from '@/api/apiRoute.js'; |
||||
|
|
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
id: null, |
||||
|
serviceInfo: null, |
||||
|
serviceList: [] |
||||
|
} |
||||
|
}, |
||||
|
onLoad(options) { |
||||
|
if (options.id) { |
||||
|
this.id = options.id; |
||||
|
this.getServiceDetail(); |
||||
|
} else { |
||||
|
this.getServiceList(); |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
navigateBack() { |
||||
|
uni.navigateBack(); |
||||
|
}, |
||||
|
async getServiceList() { |
||||
|
try { |
||||
|
// 接口未开发，使用模拟数据 |
||||
|
// const res = await apiRoute.getServiceList(); |
||||
|
// if(res.code == 1) { |
||||
|
// this.serviceList = res.data || []; |
||||
|
// } else { |
||||
|
// uni.showToast({ |
||||
|
// title: res.msg || '获取服务列表失败', |
||||
|
// icon: 'none' |
||||
|
// }); |
||||
|
// } |
||||
|
|
||||
|
// 使用模拟数据 |
||||
|
setTimeout(() => { |
||||
|
this.serviceList = [ |
||||
|
{ |
||||
|
id: '1', |
||||
|
resource_id: '美团用户1', |
||||
|
course_id: '2001', |
||||
|
service_id: '18645873651', |
||||
|
service_remark: '针对学员英语口语发音进行专项辅导', |
||||
|
status: 1, |
||||
|
staff_id: '3001', |
||||
|
score: 4, |
||||
|
feedback: '老师很耐心，讲解很清楚，孩子进步很大', |
||||
|
created_at: '2023-10-15 14:30:00', |
||||
|
feedback_time: '2023-10-16 18:20:00', |
||||
|
updated_at: '2023-10-16 18:20:00', |
||||
|
campus: '总部校区', |
||||
|
source: '线上', |
||||
|
channel: '地推' |
||||
|
}, |
||||
|
{ |
||||
|
id: '2', |
||||
|
resource_id: '李柏辉', |
||||
|
course_id: '2002', |
||||
|
service_id: '13876337043', |
||||
|
service_remark: '解答家长关于课程安排的问题', |
||||
|
status: 0, |
||||
|
staff_id: '3001', |
||||
|
score: 0, |
||||
|
feedback: '', |
||||
|
created_at: '2023-10-18 09:15:00', |
||||
|
feedback_time: '', |
||||
|
updated_at: '2023-10-18 09:15:00', |
||||
|
campus: '西区校区', |
||||
|
source: '地推', |
||||
|
channel: '' |
||||
|
}, |
||||
|
{ |
||||
|
id: '3', |
||||
|
resource_id: '张小明', |
||||
|
course_id: '2003', |
||||
|
service_id: '13912345678', |
||||
|
service_remark: '为学员制定个性化学习计划', |
||||
|
status: 0, |
||||
|
staff_id: '3001', |
||||
|
score: 0, |
||||
|
feedback: '', |
||||
|
created_at: '2023-10-20 16:45:00', |
||||
|
feedback_time: '', |
||||
|
updated_at: '2023-10-20 16:45:00', |
||||
|
campus: '东区校区', |
||||
|
source: '线下', |
||||
|
channel: '朋友介绍' |
||||
|
} |
||||
|
]; |
||||
|
}, 500); |
||||
|
} catch(error) { |
||||
|
console.error('获取服务列表失败:', error); |
||||
|
uni.showToast({ |
||||
|
title: '获取服务列表失败', |
||||
|
icon: 'none' |
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
async getServiceDetail() { |
||||
|
try { |
||||
|
// 接口未开发，使用模拟数据 |
||||
|
// const res = await apiRoute.getServiceDetail({id: this.id}); |
||||
|
// if(res.code == 1) { |
||||
|
// this.serviceInfo = res.data || null; |
||||
|
// } else { |
||||
|
// uni.showToast({ |
||||
|
// title: res.msg || '获取服务详情失败', |
||||
|
// icon: 'none' |
||||
|
// }); |
||||
|
// } |
||||
|
|
||||
|
// 使用模拟数据 |
||||
|
setTimeout(() => { |
||||
|
// 模拟数据库 |
||||
|
const mockServices = { |
||||
|
'1': { |
||||
|
id: '1', |
||||
|
resource_id: '美团用户1', |
||||
|
course_id: '2001', |
||||
|
service_id: '18645873651', |
||||
|
service_remark: '针对学员英语口语发音进行专项辅导', |
||||
|
status: 1, |
||||
|
staff_id: '3001', |
||||
|
score: 4, |
||||
|
feedback: '老师很耐心，讲解很清楚，孩子进步很大', |
||||
|
created_at: '2023-10-15 14:30:00', |
||||
|
feedback_time: '2023-10-16 18:20:00', |
||||
|
updated_at: '2023-10-16 18:20:00', |
||||
|
campus: '总部校区', |
||||
|
source: '线上', |
||||
|
channel: '地推' |
||||
|
}, |
||||
|
'2': { |
||||
|
id: '2', |
||||
|
resource_id: '李柏辉', |
||||
|
course_id: '2002', |
||||
|
service_id: '13876337043', |
||||
|
service_remark: '解答家长关于课程安排的问题', |
||||
|
status: 0, |
||||
|
staff_id: '3001', |
||||
|
score: 0, |
||||
|
feedback: '', |
||||
|
created_at: '2023-10-18 09:15:00', |
||||
|
feedback_time: '', |
||||
|
updated_at: '2023-10-18 09:15:00', |
||||
|
campus: '西区校区', |
||||
|
source: '地推', |
||||
|
channel: '' |
||||
|
}, |
||||
|
'3': { |
||||
|
id: '3', |
||||
|
resource_id: '张小明', |
||||
|
course_id: '2003', |
||||
|
service_id: '13912345678', |
||||
|
service_remark: '为学员制定个性化学习计划', |
||||
|
status: 0, |
||||
|
staff_id: '3001', |
||||
|
score: 0, |
||||
|
feedback: '', |
||||
|
created_at: '2023-10-20 16:45:00', |
||||
|
feedback_time: '', |
||||
|
updated_at: '2023-10-20 16:45:00', |
||||
|
campus: '东区校区', |
||||
|
source: '线下', |
||||
|
channel: '朋友介绍' |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
// 根据ID获取对应服务详情 |
||||
|
this.serviceInfo = mockServices[this.id] || null; |
||||
|
|
||||
|
if (!this.serviceInfo) { |
||||
|
uni.showToast({ |
||||
|
title: '未找到服务详情', |
||||
|
icon: 'none' |
||||
|
}); |
||||
|
setTimeout(() => { |
||||
|
this.navigateBack(); |
||||
|
}, 1500); |
||||
|
} |
||||
|
}, 500); |
||||
|
} catch(error) { |
||||
|
console.error('获取服务详情失败:', error); |
||||
|
uni.showToast({ |
||||
|
title: '获取服务详情失败', |
||||
|
icon: 'none' |
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
formatTime(timeStr) { |
||||
|
if (!timeStr) return '暂无'; |
||||
|
return timeStr; |
||||
|
}, |
||||
|
viewServiceDetail(id) { |
||||
|
uni.navigateTo({ |
||||
|
url: `/pages/coach/my/service_detail?id=${id}` |
||||
|
}); |
||||
|
}, |
||||
|
async completeService() { |
||||
|
uni.showModal({ |
||||
|
title: '确认完成', |
||||
|
content: '确定要将此服务标记为已完成吗？', |
||||
|
success: async (res) => { |
||||
|
if (res.confirm) { |
||||
|
try { |
||||
|
// 接口未开发，使用模拟数据 |
||||
|
// const result = await apiRoute.completeService({id: this.id}); |
||||
|
// if(result.code == 1) { |
||||
|
// this.serviceInfo.status = 1; |
||||
|
// uni.showToast({ |
||||
|
// title: '服务已完成', |
||||
|
// icon: 'success' |
||||
|
// }); |
||||
|
// } else { |
||||
|
// uni.showToast({ |
||||
|
// title: result.msg || '操作失败', |
||||
|
// icon: 'none' |
||||
|
// }); |
||||
|
// } |
||||
|
|
||||
|
// 模拟API调用 |
||||
|
setTimeout(() => { |
||||
|
this.serviceInfo.status = 1; |
||||
|
uni.showToast({ |
||||
|
title: '服务已完成', |
||||
|
icon: 'success' |
||||
|
}); |
||||
|
}, 500); |
||||
|
} catch(error) { |
||||
|
console.error('完成服务失败:', error); |
||||
|
uni.showToast({ |
||||
|
title: '操作失败', |
||||
|
icon: 'none' |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.container { |
||||
|
min-height: 100vh; |
||||
|
height: 100vh; |
||||
|
background-color: #292929; |
||||
|
padding-bottom: 120rpx; |
||||
|
position: relative; |
||||
|
box-sizing: border-box; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
} |
||||
|
|
||||
|
.content { |
||||
|
padding: 20rpx; |
||||
|
flex: 1; |
||||
|
overflow-y: auto; |
||||
|
} |
||||
|
|
||||
|
.detail-content { |
||||
|
padding: 0; |
||||
|
} |
||||
|
|
||||
|
.section-title { |
||||
|
font-size: 30rpx; |
||||
|
font-weight: bold; |
||||
|
color: #FFFFFF; |
||||
|
margin-bottom: 20rpx; |
||||
|
padding-left: 10rpx; |
||||
|
} |
||||
|
|
||||
|
.service-list { |
||||
|
padding-bottom: 30rpx; |
||||
|
} |
||||
|
|
||||
|
.service-item { |
||||
|
background-color: #333; |
||||
|
border-radius: 12rpx; |
||||
|
padding: 20rpx; |
||||
|
margin-bottom: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.service-header { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
margin-bottom: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.user-info { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.user-avatar { |
||||
|
width: 60rpx; |
||||
|
height: 60rpx; |
||||
|
border-radius: 50%; |
||||
|
margin-right: 15rpx; |
||||
|
background-color: #29D3B4; |
||||
|
} |
||||
|
|
||||
|
.user-name { |
||||
|
color: #fff; |
||||
|
font-size: 30rpx; |
||||
|
} |
||||
|
|
||||
|
.service-content { |
||||
|
margin-bottom: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.info-row { |
||||
|
display: flex; |
||||
|
margin-bottom: 10rpx; |
||||
|
font-size: 28rpx; |
||||
|
color: #ccc; |
||||
|
} |
||||
|
|
||||
|
.info-label { |
||||
|
color: #999; |
||||
|
margin-right: 10rpx; |
||||
|
} |
||||
|
|
||||
|
.info-value { |
||||
|
color: #fff; |
||||
|
} |
||||
|
|
||||
|
.service-footer { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
border-top: 1px solid #444; |
||||
|
padding-top: 15rpx; |
||||
|
font-size: 26rpx; |
||||
|
} |
||||
|
|
||||
|
.contact-status { |
||||
|
color: #999; |
||||
|
} |
||||
|
|
||||
|
.effective-status { |
||||
|
color: #ff6b6b; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.status-yes { |
||||
|
color: #29D3B4; |
||||
|
} |
||||
|
|
||||
|
.status-dot { |
||||
|
width: 16rpx; |
||||
|
height: 16rpx; |
||||
|
border-radius: 50%; |
||||
|
background-color: #ff6b6b; |
||||
|
margin-left: 10rpx; |
||||
|
} |
||||
|
|
||||
|
.dot-yes { |
||||
|
background-color: #29D3B4; |
||||
|
} |
||||
|
|
||||
|
.service-detail-card { |
||||
|
background-color: #333; |
||||
|
margin: 20rpx; |
||||
|
border-radius: 12rpx; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
.detail-header { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
padding: 30rpx 20rpx; |
||||
|
border-bottom: 1px solid #444; |
||||
|
} |
||||
|
|
||||
|
.detail-content { |
||||
|
padding: 30rpx 20rpx; |
||||
|
} |
||||
|
|
||||
|
.card-section { |
||||
|
margin-bottom: 30rpx; |
||||
|
} |
||||
|
|
||||
|
.info-card { |
||||
|
background-color: #3a3a3a; |
||||
|
border-radius: 12rpx; |
||||
|
padding: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.info-item { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
padding: 20rpx 10rpx; |
||||
|
border-bottom: 1rpx solid #444; |
||||
|
} |
||||
|
|
||||
|
.info-item:last-child { |
||||
|
border-bottom: none; |
||||
|
} |
||||
|
|
||||
|
.item-label { |
||||
|
color: #999; |
||||
|
font-size: 28rpx; |
||||
|
} |
||||
|
|
||||
|
.item-value { |
||||
|
color: #fff; |
||||
|
font-size: 28rpx; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
|
.score-box { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.star-box { |
||||
|
display: flex; |
||||
|
margin-right: 10rpx; |
||||
|
} |
||||
|
|
||||
|
.score-value { |
||||
|
color: #FFB800; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
.feedback-content { |
||||
|
padding: 20rpx 10rpx; |
||||
|
font-size: 28rpx; |
||||
|
color: #fff; |
||||
|
line-height: 1.6; |
||||
|
} |
||||
|
|
||||
|
.empty-feedback { |
||||
|
padding: 40rpx 0; |
||||
|
text-align: center; |
||||
|
color: #999; |
||||
|
font-size: 28rpx; |
||||
|
} |
||||
|
|
||||
|
.detail-footer { |
||||
|
padding: 20rpx; |
||||
|
border-top: 1px solid #444; |
||||
|
} |
||||
|
|
||||
|
.btn { |
||||
|
height: 80rpx; |
||||
|
line-height: 80rpx; |
||||
|
border-radius: 40rpx; |
||||
|
font-size: 30rpx; |
||||
|
margin-bottom: 20rpx; |
||||
|
background-color: transparent; |
||||
|
} |
||||
|
|
||||
|
.primary { |
||||
|
background-color: #29D3B4; |
||||
|
color: #FFFFFF; |
||||
|
} |
||||
|
|
||||
|
.loading-box { |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
height: 300rpx; |
||||
|
color: #999; |
||||
|
} |
||||
|
|
||||
|
.empty-list { |
||||
|
padding: 60rpx 0; |
||||
|
text-align: center; |
||||
|
color: #999; |
||||
|
font-size: 28rpx; |
||||
|
background-color: #333; |
||||
|
border-radius: 12rpx; |
||||
|
} |
||||
|
|
||||
|
.status-completed { |
||||
|
color: #29D3B4; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,499 @@ |
|||||
|
<template> |
||||
|
<view class="container"> |
||||
|
<uni-nav-bar fixed status-bar left-icon="left" title="学员详情" @clickLeft="navigateBack"></uni-nav-bar> |
||||
|
<view class="content" v-if="studentInfo"> |
||||
|
<view class="student-header"> |
||||
|
<view class="avatar-box"> |
||||
|
<image :src="studentInfo.avatar || '/static/icon-img/avatar.png'" mode="aspectFill" class="avatar-img"></image> |
||||
|
</view> |
||||
|
<view class="name-box"> |
||||
|
<text class="name">{{studentInfo.name}}</text> |
||||
|
<text class="id">ID: {{studentInfo.id}}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="card-section"> |
||||
|
<view class="section-title">基本信息</view> |
||||
|
<view class="info-card"> |
||||
|
<view class="info-item"> |
||||
|
<text class="item-label">所属校区</text> |
||||
|
<text class="item-value">{{studentInfo.campus}}</text> |
||||
|
</view> |
||||
|
<view class="info-item"> |
||||
|
<text class="item-label">联系电话</text> |
||||
|
<text class="item-value">{{studentInfo.phone}}</text> |
||||
|
</view> |
||||
|
<view class="info-item"> |
||||
|
<text class="item-label">年龄</text> |
||||
|
<text class="item-value">{{studentInfo.age}}岁</text> |
||||
|
</view> |
||||
|
<view class="info-item"> |
||||
|
<text class="item-label">入学时间</text> |
||||
|
<text class="item-value">{{studentInfo.enrollmentDate}}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="card-section"> |
||||
|
<view class="section-title">课程信息</view> |
||||
|
<view class="info-card"> |
||||
|
<view class="info-item"> |
||||
|
<text class="item-label">剩余课程</text> |
||||
|
<text class="item-value highlight">{{studentInfo.remainingCourses}}节</text> |
||||
|
</view> |
||||
|
<view class="info-item"> |
||||
|
<text class="item-label">课程到期时间</text> |
||||
|
<text class="item-value highlight">{{studentInfo.expiryDate}}</text> |
||||
|
</view> |
||||
|
<view class="info-item"> |
||||
|
<text class="item-label">已消课程</text> |
||||
|
<text class="item-value">{{studentInfo.completedCourses}}节</text> |
||||
|
</view> |
||||
|
<view class="info-item"> |
||||
|
<text class="item-label">报名课程</text> |
||||
|
<text class="item-value">{{studentInfo.courseName}}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="card-section"> |
||||
|
<view class="section-title">最近上课记录</view> |
||||
|
<view class="info-card" v-if="studentInfo.recentClasses && studentInfo.recentClasses.length > 0"> |
||||
|
<view class="class-item" v-for="(item, index) in studentInfo.recentClasses" :key="index"> |
||||
|
<view class="class-date">{{item.date}}</view> |
||||
|
<view class="class-info"> |
||||
|
<text class="class-name">{{item.courseName}}</text> |
||||
|
<text class="class-time">{{item.timeSlot}}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="empty-class" v-else> |
||||
|
<text>暂无上课记录</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="btn-group"> |
||||
|
<button class="btn primary" @click="contactStudent">联系学员</button> |
||||
|
<button class="btn secondary" @click="viewSchedule">查看课表</button> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view v-else class="loading-box"> |
||||
|
<text>加载中...</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
id: null, |
||||
|
studentInfo: null |
||||
|
} |
||||
|
}, |
||||
|
onLoad(options) { |
||||
|
if (options.id) { |
||||
|
this.id = options.id; |
||||
|
this.getStudentDetail(); |
||||
|
} else { |
||||
|
uni.showToast({ |
||||
|
title: '参数错误', |
||||
|
icon: 'none' |
||||
|
}); |
||||
|
setTimeout(() => { |
||||
|
this.navigateBack(); |
||||
|
}, 1500); |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
navigateBack() { |
||||
|
uni.navigateBack(); |
||||
|
}, |
||||
|
getStudentDetail() { |
||||
|
// 模拟数据，实际开发中应该从API获取 |
||||
|
// try { |
||||
|
// const res = await memberApi.getStudentDetail({id: this.id}); |
||||
|
// if(res.code == 1) { |
||||
|
// this.studentInfo = res.data || null; |
||||
|
// } else { |
||||
|
// uni.showToast({ |
||||
|
// title: res.msg || '获取学员详情失败', |
||||
|
// icon: 'none' |
||||
|
// }); |
||||
|
// } |
||||
|
// } catch(error) { |
||||
|
// console.error('获取学员详情失败:', error); |
||||
|
// uni.showToast({ |
||||
|
// title: '获取学员详情失败', |
||||
|
// icon: 'none' |
||||
|
// }); |
||||
|
// } |
||||
|
|
||||
|
// 使用模拟数据 |
||||
|
setTimeout(() => { |
||||
|
// 定义一些模拟数据对象 |
||||
|
const studentData = { |
||||
|
'1': { |
||||
|
id: '1', |
||||
|
name: '张三', |
||||
|
avatar: '/static/icon-img/avatar.png', |
||||
|
campus: '总部校区', |
||||
|
phone: '13812341000', |
||||
|
age: 11, |
||||
|
enrollmentDate: '2023-01-11', |
||||
|
remainingCourses: 10, |
||||
|
expiryDate: '2023-12-31', |
||||
|
completedCourses: 20, |
||||
|
courseName: '少儿英语基础班', |
||||
|
recentClasses: [ |
||||
|
{ |
||||
|
date: '2023-09-15', |
||||
|
courseName: '少儿英语基础班', |
||||
|
timeSlot: '15:30-17:00' |
||||
|
}, |
||||
|
{ |
||||
|
date: '2023-09-08', |
||||
|
courseName: '少儿英语基础班', |
||||
|
timeSlot: '15:30-17:00' |
||||
|
}, |
||||
|
{ |
||||
|
date: '2023-09-01', |
||||
|
courseName: '少儿英语基础班', |
||||
|
timeSlot: '15:30-17:00' |
||||
|
} |
||||
|
] |
||||
|
}, |
||||
|
'2': { |
||||
|
id: '2', |
||||
|
name: '李四', |
||||
|
avatar: '/static/icon-img/avatar.png', |
||||
|
campus: '西区校区', |
||||
|
phone: '13812341001', |
||||
|
age: 12, |
||||
|
enrollmentDate: '2023-01-12', |
||||
|
remainingCourses: 5, |
||||
|
expiryDate: '2023-11-15', |
||||
|
completedCourses: 25, |
||||
|
courseName: '少儿英语进阶班', |
||||
|
recentClasses: [ |
||||
|
{ |
||||
|
date: '2023-09-14', |
||||
|
courseName: '少儿英语进阶班', |
||||
|
timeSlot: '14:00-15:30' |
||||
|
}, |
||||
|
{ |
||||
|
date: '2023-09-07', |
||||
|
courseName: '少儿英语进阶班', |
||||
|
timeSlot: '14:00-15:30' |
||||
|
} |
||||
|
] |
||||
|
}, |
||||
|
'3': { |
||||
|
id: '3', |
||||
|
name: '王五', |
||||
|
avatar: '/static/icon-img/avatar.png', |
||||
|
campus: '东区校区', |
||||
|
phone: '13812341002', |
||||
|
age: 13, |
||||
|
enrollmentDate: '2023-01-13', |
||||
|
remainingCourses: 15, |
||||
|
expiryDate: '2024-01-20', |
||||
|
completedCourses: 15, |
||||
|
courseName: '少儿英语口语班', |
||||
|
recentClasses: [ |
||||
|
{ |
||||
|
date: '2023-09-16', |
||||
|
courseName: '少儿英语口语班', |
||||
|
timeSlot: '10:00-11:30' |
||||
|
}, |
||||
|
{ |
||||
|
date: '2023-09-09', |
||||
|
courseName: '少儿英语口语班', |
||||
|
timeSlot: '10:00-11:30' |
||||
|
}, |
||||
|
{ |
||||
|
date: '2023-09-02', |
||||
|
courseName: '少儿英语口语班', |
||||
|
timeSlot: '10:00-11:30' |
||||
|
} |
||||
|
] |
||||
|
}, |
||||
|
'4': { |
||||
|
id: '4', |
||||
|
name: '赵六', |
||||
|
avatar: '/static/icon-img/avatar.png', |
||||
|
campus: '南区校区', |
||||
|
phone: '13812341003', |
||||
|
age: 10, |
||||
|
enrollmentDate: '2023-02-15', |
||||
|
remainingCourses: 8, |
||||
|
expiryDate: '2023-11-30', |
||||
|
completedCourses: 12, |
||||
|
courseName: '少儿英语基础班', |
||||
|
recentClasses: [ |
||||
|
{ |
||||
|
date: '2023-09-13', |
||||
|
courseName: '少儿英语基础班', |
||||
|
timeSlot: '16:00-17:30' |
||||
|
}, |
||||
|
{ |
||||
|
date: '2023-09-06', |
||||
|
courseName: '少儿英语基础班', |
||||
|
timeSlot: '16:00-17:30' |
||||
|
} |
||||
|
] |
||||
|
}, |
||||
|
'5': { |
||||
|
id: '5', |
||||
|
name: '刘七', |
||||
|
avatar: '/static/icon-img/avatar.png', |
||||
|
campus: '北区校区', |
||||
|
phone: '13812341004', |
||||
|
age: 14, |
||||
|
enrollmentDate: '2023-03-20', |
||||
|
remainingCourses: 20, |
||||
|
expiryDate: '2024-02-15', |
||||
|
completedCourses: 10, |
||||
|
courseName: '少儿英语进阶班', |
||||
|
recentClasses: [ |
||||
|
{ |
||||
|
date: '2023-09-12', |
||||
|
courseName: '少儿英语进阶班', |
||||
|
timeSlot: '17:00-18:30' |
||||
|
}, |
||||
|
{ |
||||
|
date: '2023-09-05', |
||||
|
courseName: '少儿英语进阶班', |
||||
|
timeSlot: '17:00-18:30' |
||||
|
} |
||||
|
] |
||||
|
}, |
||||
|
'6': { |
||||
|
id: '6', |
||||
|
name: '陈八', |
||||
|
avatar: '/static/icon-img/avatar.png', |
||||
|
campus: '总部校区', |
||||
|
phone: '13812341005', |
||||
|
age: 9, |
||||
|
enrollmentDate: '2023-04-05', |
||||
|
remainingCourses: 3, |
||||
|
expiryDate: '2023-10-30', |
||||
|
completedCourses: 27, |
||||
|
courseName: '少儿英语口语班', |
||||
|
recentClasses: [ |
||||
|
{ |
||||
|
date: '2023-09-11', |
||||
|
courseName: '少儿英语口语班', |
||||
|
timeSlot: '14:30-16:00' |
||||
|
}, |
||||
|
{ |
||||
|
date: '2023-09-04', |
||||
|
courseName: '少儿英语口语班', |
||||
|
timeSlot: '14:30-16:00' |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
// 根据ID获取对应的学员数据 |
||||
|
this.studentInfo = studentData[this.id] || { |
||||
|
id: this.id, |
||||
|
name: '未知学员', |
||||
|
avatar: '/static/icon-img/avatar.png', |
||||
|
campus: '未知校区', |
||||
|
phone: '暂无', |
||||
|
age: '暂无', |
||||
|
enrollmentDate: '暂无', |
||||
|
remainingCourses: 0, |
||||
|
expiryDate: '暂无', |
||||
|
completedCourses: 0, |
||||
|
courseName: '暂无', |
||||
|
recentClasses: [] |
||||
|
}; |
||||
|
}, 500); |
||||
|
}, |
||||
|
contactStudent() { |
||||
|
if (this.studentInfo && this.studentInfo.phone) { |
||||
|
uni.makePhoneCall({ |
||||
|
phoneNumber: this.studentInfo.phone.replace(/\*/g, '0') |
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
viewSchedule() { |
||||
|
uni.navigateTo({ |
||||
|
url: `/pages/coach/student/timetable?id=${this.id}` |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
.container { |
||||
|
min-height: 100vh; |
||||
|
background-color: #F5F5F5; |
||||
|
} |
||||
|
|
||||
|
.content { |
||||
|
padding: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.loading-box { |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
height: 80vh; |
||||
|
color: #999; |
||||
|
font-size: 28rpx; |
||||
|
} |
||||
|
|
||||
|
.student-header { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
background-color: #FFFFFF; |
||||
|
border-radius: 12rpx; |
||||
|
padding: 40rpx; |
||||
|
margin-bottom: 20rpx; |
||||
|
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05); |
||||
|
|
||||
|
.avatar-box { |
||||
|
width: 150rpx; |
||||
|
height: 150rpx; |
||||
|
border-radius: 75rpx; |
||||
|
overflow: hidden; |
||||
|
margin-right: 30rpx; |
||||
|
|
||||
|
.avatar-img { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.name-box { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
|
||||
|
.name { |
||||
|
font-size: 36rpx; |
||||
|
font-weight: bold; |
||||
|
color: #333; |
||||
|
margin-bottom: 10rpx; |
||||
|
} |
||||
|
|
||||
|
.id { |
||||
|
font-size: 24rpx; |
||||
|
color: #999; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.card-section { |
||||
|
margin-bottom: 20rpx; |
||||
|
|
||||
|
.section-title { |
||||
|
font-size: 30rpx; |
||||
|
font-weight: bold; |
||||
|
color: #333; |
||||
|
margin: 30rpx 10rpx 20rpx; |
||||
|
} |
||||
|
|
||||
|
.info-card { |
||||
|
background-color: #FFFFFF; |
||||
|
border-radius: 12rpx; |
||||
|
padding: 20rpx 30rpx; |
||||
|
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05); |
||||
|
} |
||||
|
|
||||
|
.info-item { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
padding: 20rpx 0; |
||||
|
border-bottom: 1px solid #F5F5F5; |
||||
|
|
||||
|
&:last-child { |
||||
|
border-bottom: none; |
||||
|
} |
||||
|
|
||||
|
.item-label { |
||||
|
color: #666; |
||||
|
font-size: 28rpx; |
||||
|
} |
||||
|
|
||||
|
.item-value { |
||||
|
color: #333; |
||||
|
font-size: 28rpx; |
||||
|
|
||||
|
&.highlight { |
||||
|
color: #FF6600; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.class-item { |
||||
|
display: flex; |
||||
|
padding: 20rpx 0; |
||||
|
border-bottom: 1px solid #F5F5F5; |
||||
|
|
||||
|
&:last-child { |
||||
|
border-bottom: none; |
||||
|
} |
||||
|
|
||||
|
.class-date { |
||||
|
width: 180rpx; |
||||
|
font-size: 28rpx; |
||||
|
color: #666; |
||||
|
} |
||||
|
|
||||
|
.class-info { |
||||
|
flex: 1; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
|
||||
|
.class-name { |
||||
|
font-size: 28rpx; |
||||
|
color: #333; |
||||
|
margin-bottom: 10rpx; |
||||
|
} |
||||
|
|
||||
|
.class-time { |
||||
|
font-size: 24rpx; |
||||
|
color: #999; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.empty-class { |
||||
|
padding: 40rpx 0; |
||||
|
text-align: center; |
||||
|
color: #999; |
||||
|
font-size: 28rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.btn-group { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
margin: 40rpx 0; |
||||
|
|
||||
|
.btn { |
||||
|
width: 48%; |
||||
|
height: 80rpx; |
||||
|
line-height: 80rpx; |
||||
|
border-radius: 40rpx; |
||||
|
font-size: 30rpx; |
||||
|
|
||||
|
&.primary { |
||||
|
background-color: #3B7CF9; |
||||
|
color: #FFFFFF; |
||||
|
} |
||||
|
|
||||
|
&.secondary { |
||||
|
background-color: #FFFFFF; |
||||
|
color: #3B7CF9; |
||||
|
border: 1px solid #3B7CF9; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,216 @@ |
|||||
|
<template> |
||||
|
<view class="container"> |
||||
|
<view class="content"> |
||||
|
<view v-if="studentList.length === 0" class="empty-box"> |
||||
|
<image src="/static/icon-img/empty.png" mode="aspectFit" class="empty-img"></image> |
||||
|
<text class="empty-text">暂无学员数据</text> |
||||
|
</view> |
||||
|
<view v-else class="student-list"> |
||||
|
<view v-for="(item, index) in studentList" :key="index" class="student-item" @click="goToDetail(item)"> |
||||
|
<view class="student-card"> |
||||
|
<view class="student-avatar"> |
||||
|
<image :src="item.avatar || '/static/icon-img/avatar.png'" mode="aspectFill" class="avatar-img"></image> |
||||
|
</view> |
||||
|
<view class="student-info"> |
||||
|
<view class="student-name">{{item.name}}</view> |
||||
|
<view class="info-row"> |
||||
|
<text class="info-label">所属校区：</text> |
||||
|
<text class="info-value">{{item.campus}}</text> |
||||
|
</view> |
||||
|
<view class="info-row"> |
||||
|
<text class="info-label">剩余课程：</text> |
||||
|
<text class="info-value">{{item.remainingCourses}}节</text> |
||||
|
</view> |
||||
|
<view class="info-row"> |
||||
|
<text class="info-label">到期时间：</text> |
||||
|
<text class="info-value">{{item.expiryDate}}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="arrow-right"> |
||||
|
<uni-icons type="right" size="16" color="#CCCCCC"></uni-icons> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<AQTabber /> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import AQTabber from "@/components/AQ/AQTabber.vue" |
||||
|
export default { |
||||
|
components: { |
||||
|
AQTabber, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
studentList: [] |
||||
|
} |
||||
|
}, |
||||
|
onLoad() { |
||||
|
this.getStudentList(); |
||||
|
}, |
||||
|
methods: { |
||||
|
navigateBack() { |
||||
|
uni.navigateBack(); |
||||
|
}, |
||||
|
getStudentList() { |
||||
|
// 模拟数据，实际开发中应该从API获取 |
||||
|
// const res = await memberApi.getStudentList({}); |
||||
|
// if(res.code == 1) { |
||||
|
// this.studentList = res.data || []; |
||||
|
// } else { |
||||
|
// uni.showToast({ |
||||
|
// title: res.msg || '获取学员列表失败', |
||||
|
// icon: 'none' |
||||
|
// }); |
||||
|
// } |
||||
|
|
||||
|
// 使用模拟数据 |
||||
|
this.studentList = [ |
||||
|
{ |
||||
|
id: 1, |
||||
|
name: '张三', |
||||
|
avatar: '/static/icon-img/avatar.png', |
||||
|
campus: '总部校区', |
||||
|
remainingCourses: 10, |
||||
|
expiryDate: '2023-12-31' |
||||
|
}, |
||||
|
{ |
||||
|
id: 2, |
||||
|
name: '李四', |
||||
|
avatar: '/static/icon-img/avatar.png', |
||||
|
campus: '西区校区', |
||||
|
remainingCourses: 5, |
||||
|
expiryDate: '2023-11-15' |
||||
|
}, |
||||
|
{ |
||||
|
id: 3, |
||||
|
name: '王五', |
||||
|
avatar: '/static/icon-img/avatar.png', |
||||
|
campus: '东区校区', |
||||
|
remainingCourses: 15, |
||||
|
expiryDate: '2024-01-20' |
||||
|
}, |
||||
|
{ |
||||
|
id: 4, |
||||
|
name: '赵六', |
||||
|
avatar: '/static/icon-img/avatar.png', |
||||
|
campus: '南区校区', |
||||
|
remainingCourses: 8, |
||||
|
expiryDate: '2023-11-30' |
||||
|
}, |
||||
|
{ |
||||
|
id: 5, |
||||
|
name: '刘七', |
||||
|
avatar: '/static/icon-img/avatar.png', |
||||
|
campus: '北区校区', |
||||
|
remainingCourses: 20, |
||||
|
expiryDate: '2024-02-15' |
||||
|
}, |
||||
|
{ |
||||
|
id: 6, |
||||
|
name: '陈八', |
||||
|
avatar: '/static/icon-img/avatar.png', |
||||
|
campus: '总部校区', |
||||
|
remainingCourses: 3, |
||||
|
expiryDate: '2023-10-30' |
||||
|
} |
||||
|
]; |
||||
|
}, |
||||
|
goToDetail(student) { |
||||
|
uni.navigateTo({ |
||||
|
url: `/pages/market/clue/clue_info?resource_sharing_id=25` |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
.container { |
||||
|
min-height: 100vh; |
||||
|
background-color: #F5F5F5; |
||||
|
} |
||||
|
|
||||
|
.content { |
||||
|
padding: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.empty-box { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
padding-top: 200rpx; |
||||
|
|
||||
|
.empty-img { |
||||
|
width: 200rpx; |
||||
|
height: 200rpx; |
||||
|
} |
||||
|
|
||||
|
.empty-text { |
||||
|
margin-top: 20rpx; |
||||
|
font-size: 28rpx; |
||||
|
color: #999; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.student-list { |
||||
|
.student-item { |
||||
|
margin-bottom: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.student-card { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
background-color: #FFFFFF; |
||||
|
border-radius: 12rpx; |
||||
|
padding: 30rpx; |
||||
|
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05); |
||||
|
} |
||||
|
|
||||
|
.student-avatar { |
||||
|
width: 120rpx; |
||||
|
height: 120rpx; |
||||
|
border-radius: 60rpx; |
||||
|
overflow: hidden; |
||||
|
margin-right: 30rpx; |
||||
|
|
||||
|
.avatar-img { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.student-info { |
||||
|
flex: 1; |
||||
|
} |
||||
|
|
||||
|
.student-name { |
||||
|
font-size: 32rpx; |
||||
|
font-weight: bold; |
||||
|
margin-bottom: 10rpx; |
||||
|
color: #333; |
||||
|
} |
||||
|
|
||||
|
.info-row { |
||||
|
display: flex; |
||||
|
font-size: 26rpx; |
||||
|
margin-top: 8rpx; |
||||
|
|
||||
|
.info-label { |
||||
|
color: #666; |
||||
|
} |
||||
|
|
||||
|
.info-value { |
||||
|
color: #333; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.arrow-right { |
||||
|
padding-left: 20rpx; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue