51 changed files with 322 additions and 18962 deletions
@ -1,263 +0,0 @@ |
|||
<template> |
|||
<view class="main_box"> |
|||
<view class="main_section"> |
|||
<!--教务待办事项--> |
|||
<view class="section_3"> |
|||
<view class="title_box"> |
|||
<view class="top_box"> |
|||
<text>教务待办</text> |
|||
<view></view> |
|||
</view> |
|||
<view class="line"></view> |
|||
</view> |
|||
<view class="ul" v-if="infoData.todo_list && infoData.todo_list.length > 0"> |
|||
<view class="li" v-for="(v,k) in infoData.todo_list" :key="k" @click="openViewTodoDetail(v)"> |
|||
<view class="top_box"> |
|||
<view class="title">任务：{{ v.title }}</view> |
|||
<view class="title">创建时间：{{ v.create_time }}</view> |
|||
<view class="title">截止时间：{{ v.deadline }}</view> |
|||
</view> |
|||
<view class="botton_box"> |
|||
<view class="box"> |
|||
<view>优先级：{{ v.priority_text }}</view> |
|||
<view> |
|||
查看 |
|||
<fui-icon size="35" color="#fff" name="arrowright"></fui-icon> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view |
|||
v-if="v.status == 'pending'" |
|||
class="tag" |
|||
style="background:#007ACC;">待处理 |
|||
</view> |
|||
<view |
|||
v-if="v.status == 'processing'" |
|||
class="tag" |
|||
style="background:#fad24e;">处理中 |
|||
</view> |
|||
<view |
|||
v-if="v.status == 'completed'" |
|||
class="tag" |
|||
style="background:#29d3b4;">已完成 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view v-else class="empty_box"> |
|||
<image src="/static/images/empty.png" mode="aspectFit"></image> |
|||
<text>暂无待办事项</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<!--统计数据--> |
|||
<view class="section_3"> |
|||
<view class="title_box"> |
|||
<view class="top_box"> |
|||
<text>数据统计</text> |
|||
<view></view> |
|||
</view> |
|||
<view class="line"></view> |
|||
</view> |
|||
<view class="stats_grid"> |
|||
<view class="stat_item" @click="openViewStats('students')"> |
|||
<view class="stat_number">{{ infoData.student_count || 0 }}</view> |
|||
<view class="stat_label">学员总数</view> |
|||
</view> |
|||
<view class="stat_item" @click="openViewStats('courses')"> |
|||
<view class="stat_number">{{ infoData.course_count || 0 }}</view> |
|||
<view class="stat_label">课程总数</view> |
|||
</view> |
|||
<view class="stat_item" @click="openViewStats('teachers')"> |
|||
<view class="stat_number">{{ infoData.teacher_count || 0 }}</view> |
|||
<view class="stat_label">教师总数</view> |
|||
</view> |
|||
<view class="stat_item" @click="openViewStats('classes')"> |
|||
<view class="stat_number">{{ infoData.class_count || 0 }}</view> |
|||
<view class="stat_label">班级总数</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import apiRoute from '@/api/apiRoute.js'; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
infoData: { |
|||
todo_list: [], |
|||
student_count: 0, |
|||
course_count: 0, |
|||
teacher_count: 0, |
|||
class_count: 0 |
|||
} |
|||
} |
|||
}, |
|||
onShow() { |
|||
this.init() |
|||
}, |
|||
methods: { |
|||
async init() { |
|||
try { |
|||
// 获取教务首页数据 |
|||
const res = await apiRoute.getAcademicHomeData(); |
|||
if (res && res.code === 1) { |
|||
this.infoData = res.data; |
|||
} |
|||
} catch (error) { |
|||
console.error('获取教务数据失败:', error); |
|||
} |
|||
}, |
|||
|
|||
// 打开待办事项详情 |
|||
openViewTodoDetail(item) { |
|||
this.$navigateTo({ |
|||
url: `/pages/academic/todo/detail?id=${item.id}` |
|||
}); |
|||
}, |
|||
|
|||
// 打开统计页面 |
|||
openViewStats(type) { |
|||
this.$navigateTo({ |
|||
url: `/pages/academic/stats/index?type=${type}` |
|||
}); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.main_box { |
|||
width: 100%; |
|||
background-color: #f5f5f5; |
|||
min-height: 100vh; |
|||
padding-bottom: 140rpx; |
|||
} |
|||
|
|||
.main_section { |
|||
padding: 30rpx; |
|||
} |
|||
|
|||
.section_3 { |
|||
margin-bottom: 30rpx; |
|||
} |
|||
|
|||
.title_box { |
|||
.top_box { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
margin-bottom: 20rpx; |
|||
|
|||
text { |
|||
font-size: 36rpx; |
|||
font-weight: bold; |
|||
color: #007ACC; |
|||
} |
|||
} |
|||
|
|||
.line { |
|||
height: 4rpx; |
|||
background: linear-gradient(to right, #007ACC, #4DA6FF); |
|||
border-radius: 2rpx; |
|||
} |
|||
} |
|||
|
|||
.ul { |
|||
margin-top: 30rpx; |
|||
} |
|||
|
|||
.li { |
|||
background: #fff; |
|||
border-radius: 20rpx; |
|||
padding: 30rpx; |
|||
margin-bottom: 20rpx; |
|||
box-shadow: 0 4rpx 20rpx rgba(0, 122, 204, 0.1); |
|||
position: relative; |
|||
|
|||
.top_box { |
|||
.title { |
|||
font-size: 28rpx; |
|||
color: #333; |
|||
margin-bottom: 15rpx; |
|||
line-height: 1.4; |
|||
} |
|||
} |
|||
|
|||
.botton_box { |
|||
margin-top: 20rpx; |
|||
|
|||
.box { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
background: #007ACC; |
|||
color: #fff; |
|||
padding: 20rpx 30rpx; |
|||
border-radius: 15rpx; |
|||
font-size: 26rpx; |
|||
margin-bottom: 10rpx; |
|||
} |
|||
} |
|||
|
|||
.tag { |
|||
position: absolute; |
|||
top: 30rpx; |
|||
right: 30rpx; |
|||
padding: 10rpx 20rpx; |
|||
border-radius: 20rpx; |
|||
color: #fff; |
|||
font-size: 22rpx; |
|||
} |
|||
} |
|||
|
|||
.empty_box { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding: 100rpx 0; |
|||
|
|||
image { |
|||
width: 200rpx; |
|||
height: 200rpx; |
|||
margin-bottom: 30rpx; |
|||
opacity: 0.5; |
|||
} |
|||
|
|||
text { |
|||
color: #999; |
|||
font-size: 28rpx; |
|||
} |
|||
} |
|||
|
|||
.stats_grid { |
|||
display: grid; |
|||
grid-template-columns: 1fr 1fr; |
|||
gap: 20rpx; |
|||
margin-top: 30rpx; |
|||
} |
|||
|
|||
.stat_item { |
|||
background: #fff; |
|||
border-radius: 20rpx; |
|||
padding: 40rpx 30rpx; |
|||
text-align: center; |
|||
box-shadow: 0 4rpx 20rpx rgba(0, 122, 204, 0.1); |
|||
|
|||
.stat_number { |
|||
font-size: 48rpx; |
|||
font-weight: bold; |
|||
color: #007ACC; |
|||
margin-bottom: 10rpx; |
|||
} |
|||
|
|||
.stat_label { |
|||
font-size: 26rpx; |
|||
color: #666; |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,638 +0,0 @@ |
|||
<!--班级-详情--> |
|||
<template> |
|||
<view class="main_box"> |
|||
<!--自定义导航栏--> |
|||
<!-- <view class="navbar_section">--> |
|||
<!-- <view class="title">班级详情</view>--> |
|||
<!-- </view>--> |
|||
|
|||
<view class="main_section"> |
|||
<view class="section_1"> |
|||
<view class="left"> |
|||
<image class="pic" :src="classInfo.head_coach_head_img"></image> |
|||
<view class="name">{{classInfo.head_coach_name}}</view> |
|||
</view> |
|||
<view class="right"> |
|||
<view class="item"> |
|||
班级：{{classInfo.class_name}} |
|||
</view> |
|||
|
|||
<view class="item"> |
|||
校区：{{classInfo.campus_name}} |
|||
</view> |
|||
|
|||
<!-- <view class="item"> |
|||
<!-- 课程：篮球少儿课 |
|||
<!-- </view>--> |
|||
|
|||
<view class="item"> |
|||
人数：{{classInfo.classPersonnelRel.length}}人 |
|||
</view> |
|||
<!-- |
|||
<view class="item"> |
|||
|
|||
时间：{{classInfo.start_date}} - {{classInfo.end_date}} |
|||
</view> --> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- <view class="section_2">--> |
|||
<!-- <view class="title_box">--> |
|||
<!-- <view>最近课程</view>--> |
|||
<!-- </view>--> |
|||
<!-- <view class="tag_list">--> |
|||
<!-- <view class="item" @click="openViewCourseInfo({id:1})">--> |
|||
<!-- <view class="title">--> |
|||
<!-- 篮球少儿课--> |
|||
<!-- </view>--> |
|||
<!-- <view>--> |
|||
<!-- 2020.05.30 15:30 - 17:30--> |
|||
<!-- </view>--> |
|||
<!-- </view>--> |
|||
<!-- <view class="item" @click="openViewCourseInfo({id:2})">--> |
|||
<!-- <view class="title">--> |
|||
<!-- 篮球少儿课--> |
|||
<!-- </view>--> |
|||
<!-- <view>--> |
|||
<!-- 2020.05.30 15:30 - 17:30--> |
|||
<!-- </view>--> |
|||
<!-- </view>--> |
|||
<!-- </view>--> |
|||
<!-- </view>--> |
|||
|
|||
<view class="section_3"> |
|||
<view class="btn_box"> |
|||
<view :class="['btn', tabType=='1'?'select':'']" @click="tabChange(1)"> |
|||
班级成员 |
|||
</view> |
|||
<view :class="['btn', tabType=='2'?'select':'']" @click="tabChange(2)"> |
|||
课程计划 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 班级成员列表--> |
|||
<view class="section_4" v-if="tabType=='1'"> |
|||
<view class="ul"> |
|||
<view class="li" v-for="(v,k) in classInfo.classPersonnelRel" :key="k" |
|||
@click="openViewStudentInfo(v)"> |
|||
<view class="left"> |
|||
<view class="box_1"> |
|||
<image class="pic" :src="$util.img(v.student.customerResources.member.headimg)"></image> |
|||
<view class="tag_box" v-if="v.expire"> |
|||
即将到期 |
|||
</view> |
|||
</view> |
|||
<view class="box_2"> |
|||
<view class="name">{{ v.student.name }}</view> |
|||
<view class="date">课程截止时间：{{ $util.formatToDateTime(v.end_date, 'Y-m-d') }}</view> |
|||
</view> |
|||
</view> |
|||
<view class="right"> |
|||
<view class="item"> |
|||
<view>{{ v.studentCoursesInfo.use_gift_hours + v.studentCoursesInfo.use_gift_hours }} |
|||
</view> |
|||
<view>已上课时</view> |
|||
</view> |
|||
<view class="item"> |
|||
<view> |
|||
{{ (v.studentCoursesInfo.total_hours + v.studentCoursesInfo.gift_hours) - (v.studentCoursesInfo.use_gift_hours + v.studentCoursesInfo.use_gift_hours) }} |
|||
</view> |
|||
<view>剩余课时</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!--课程计划--> |
|||
<scroll-view v-if="tabType=='2'" class="section_5" scroll-y="true" :lower-threshold="lowerThreshold" |
|||
@scrolltolower="loadMoreData" style="height: 65vh;"> |
|||
<view class="ul"> |
|||
<view class="li" v-for="(v,k) in courseList" :key="k" @click="openViewCourseInfo(v)"> |
|||
<view class="top_box"> |
|||
<view class="title"> |
|||
课程：{{v.course.course_name}} |
|||
</view> |
|||
<view class="title"> |
|||
时间：{{v.course_date}} |
|||
</view> |
|||
<view class="title"> |
|||
地点：{{v.campus_name}} |
|||
</view> |
|||
</view> |
|||
<view class="bottom_box"> |
|||
<view class="item"> |
|||
<view class="left">应到学员（{{v.student.length}}）</view> |
|||
<view class="right"> |
|||
查看 |
|||
<fui-icon size="35" color="#fff" name="arrowright"></fui-icon> |
|||
</view> |
|||
</view> |
|||
<view class="item"> |
|||
<view class="left">已签到学生（{{v.student_courses.length}}/{{v.student.length}}）</view> |
|||
<view class="right"> |
|||
查看 |
|||
<fui-icon size="35" color="#fff" name="arrowright"></fui-icon> |
|||
</view> |
|||
</view> |
|||
<!-- <view class="item">--> |
|||
<!-- <view class="left">作业完成率（80%）</view>--> |
|||
<!-- <view class="right">--> |
|||
<!-- 查看--> |
|||
<!-- <fui-icon size="35" color="#fff" name="arrowright"></fui-icon>--> |
|||
<!-- </view>--> |
|||
<!-- </view>--> |
|||
</view> |
|||
|
|||
<view class="tag" v-if="isCourseFuture(v.student_courses[0].start_date)" |
|||
style="background-color:#20CAAF;"> |
|||
未开始 |
|||
</view> |
|||
<view class="tag" v-if="isNowBetween(v.student_courses[0].start_date, v.student_courses[0].end_date)" |
|||
style="background-color:#fad24e;"> |
|||
上课中 |
|||
</view> |
|||
<view class="tag" v-if="!isCourseFuture(v.student_courses[0].end_date)" style="background-color:#e2e2e2;"> |
|||
已结束 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</scroll-view> |
|||
</view> |
|||
|
|||
<!-- 底部导航--> |
|||
<!-- <AQTabber/>--> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import memberApi from '@/api/member.js'; |
|||
import AQTabber from "@/components/AQ/AQTabber.vue" |
|||
import apiRoute from '@/api/apiRoute.js'; |
|||
|
|||
export default { |
|||
components: { |
|||
AQTabber, |
|||
}, |
|||
data() { |
|||
return { |
|||
class_id: '', //班级id |
|||
classInfo: {}, //班级数据 |
|||
classMemberList: {}, //班级成员 |
|||
|
|||
tabType: '1', //1=班级成员,2=课程计划 |
|||
|
|||
|
|||
loading: false, //加载状态 |
|||
lowerThreshold: 100, //距离底部多远触发 |
|||
isReachedBottom: false, //防止重复加载|true=不可加载|false=可加载 |
|||
|
|||
//筛选条件 |
|||
filteredData: { |
|||
page: 1, //当前页码 |
|||
limit: 10, //每页返回数据条数 |
|||
total: 10, //数据总条数 |
|||
class_id: '', //班级id |
|||
}, |
|||
courseList: [], //课程计划数据 |
|||
} |
|||
}, |
|||
onLoad(options) { |
|||
this.class_id = options.class_id //课程id |
|||
}, |
|||
onShow() { |
|||
this.init() |
|||
}, |
|||
//下拉刷新 |
|||
async onPullDownRefresh() { |
|||
//重置为第一页 |
|||
await this.loadData() |
|||
await this.getCourseList() |
|||
}, |
|||
methods: { |
|||
|
|||
async init() { |
|||
// member/course_list//课程列表 |
|||
// member/class_info//班级详情+成员详情 |
|||
this.getClassInfo() //获取班级详情 |
|||
await this.getCourseList() //获取课程列表 |
|||
|
|||
}, |
|||
|
|||
isNowBetween(start_date, end_date) { |
|||
const now = new Date(); |
|||
const start = new Date(start_date); |
|||
const end = new Date(end_date); |
|||
|
|||
return now >= start && now <= end; |
|||
}, |
|||
|
|||
isCourseFuture(courseDate) { |
|||
const courseTime = new Date(courseDate).getTime(); |
|||
const nowTime = new Date().getTime(); |
|||
return courseTime > nowTime; |
|||
}, |
|||
|
|||
//教练端-获取班级详情 |
|||
async getClassInfo() { |
|||
let res = await apiRoute.jlClassInfo({ |
|||
class_id: this.class_id |
|||
}) //班级详情 |
|||
if (res.code != 1) { |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
console.log('获取班级列表', res.data) |
|||
this.classInfo = res.data |
|||
this.classMemberList = res.data.students_list |
|||
}, |
|||
|
|||
|
|||
//加载更过(下一页) |
|||
loadMoreData() { |
|||
//判断是否加载 |
|||
if (!this.isReachedBottom) { |
|||
this.isReachedBottom = true; //设置为不可请求状态 |
|||
this.getCourseList(); |
|||
} |
|||
}, |
|||
//重置为第一页 |
|||
async loadData() { |
|||
this.isReachedBottom = false; // 重置状态，以便下次触发加载更多 |
|||
|
|||
this.filteredData.page = 1 //当前页码 |
|||
this.filteredData.limit = 10 //每页返回数据条数 |
|||
this.filteredData.total = 10 //数据总条数 |
|||
}, |
|||
//教练端-获取课程列表 |
|||
async getCourseList() { |
|||
|
|||
let data = { |
|||
...this.filteredData |
|||
} |
|||
data.class_id = this.class_id |
|||
|
|||
console.log(12123, this.courseList) |
|||
|
|||
if (data.page == 1) { |
|||
this.courseList = [] |
|||
} |
|||
|
|||
//判断是否还有数据 |
|||
if ((this.filteredData.page - 1) * this.filteredData.limit >= this.filteredData.total) { |
|||
this.loading = false |
|||
uni.showToast({ |
|||
title: '暂无更多', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
|
|||
let res = await apiRoute.classCourseList(data) |
|||
this.loading = false |
|||
this.isReachedBottom = false; |
|||
if (res.code != 1) { |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
|
|||
|
|||
this.courseList = this.courseList.concat(res.data.data) // 使用 concat 方法 将新数据追加到数组中 |
|||
|
|||
this.filteredData.total = res.data.total |
|||
console.log('获取课程列表', this.courseList) |
|||
this.filteredData.page++ |
|||
|
|||
}, |
|||
|
|||
|
|||
|
|||
//切换tab |
|||
tabChange(tabType) { |
|||
this.tabType = tabType |
|||
}, |
|||
|
|||
//打开课程详情 |
|||
openViewCourseInfo(item) { |
|||
let id = item.id |
|||
this.$navigateTo({ |
|||
url: `/pages/coach/course/info_list?id=${id}` |
|||
}) |
|||
}, |
|||
//打开学员详情页 |
|||
openViewStudentInfo(item) { |
|||
let students_id = item.student.id |
|||
this.$navigateTo({ |
|||
url: `/pages/coach/student/info?students_id=${students_id}` |
|||
}) |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.main_box { |
|||
background: #292929; |
|||
} |
|||
|
|||
//自定义导航栏 |
|||
.navbar_section { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
background: #292929; |
|||
|
|||
.title { |
|||
padding: 40rpx 0rpx; |
|||
|
|||
/* 小程序端样式 */ |
|||
// #ifdef MP-WEIXIN |
|||
padding: 80rpx 0rpx; |
|||
// #endif |
|||
|
|||
|
|||
font-size: 30rpx; |
|||
color: #fff; |
|||
} |
|||
} |
|||
|
|||
.main_section { |
|||
min-height: 100vh; |
|||
background: #292929 100%; |
|||
padding: 0 24rpx; |
|||
padding-top: 40rpx; |
|||
padding-bottom: 150rpx; |
|||
font-size: 24rpx; |
|||
color: #FFFFFF; |
|||
|
|||
.section_1 { |
|||
background: #333333; |
|||
border-radius: 16rpx; |
|||
padding: 34rpx 64rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 38rpx; |
|||
|
|||
.left { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
gap: 12rpx; |
|||
|
|||
.pic { |
|||
width: 92rpx; |
|||
height: 92rpx; |
|||
border-radius: 50%; |
|||
} |
|||
} |
|||
|
|||
.right { |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 12rpx; |
|||
|
|||
.item {} |
|||
} |
|||
} |
|||
|
|||
.section_2 { |
|||
margin-top: 42rpx; |
|||
|
|||
.title_box { |
|||
font-size: 32rpx; |
|||
} |
|||
|
|||
.tag_list { |
|||
margin-top: 26rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 26rpx; |
|||
|
|||
.item { |
|||
padding-left: 20rpx; |
|||
width: 330rpx; |
|||
height: 162rpx; |
|||
border: 1px solid #00e5bb; |
|||
border-radius: 10rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
gap: 10rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
//按钮切换 |
|||
.section_3 { |
|||
margin-top: 54rpx; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
|
|||
.btn_box { |
|||
width: 698rpx; |
|||
border-radius: 8rpx; |
|||
background-color: rgba(22, 132, 252, 1); |
|||
border: 1rpx solid rgba(22, 132, 252, 1); |
|||
|
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
overflow: hidden; |
|||
|
|||
.btn { |
|||
width: 100%; |
|||
height: 76rpx; |
|||
line-height: 76rpx; |
|||
text-align: center; |
|||
color: #fff; |
|||
font-size: 26rpx; |
|||
} |
|||
|
|||
.select { |
|||
color: #1684fc; |
|||
background-color: #fff; |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
//班级成员列表 |
|||
.section_4 { |
|||
margin-top: 40rpx; |
|||
|
|||
.ul { |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 10rpx; |
|||
|
|||
.li { |
|||
padding: 20rpx 0; |
|||
padding-bottom: 40rpx; |
|||
border-bottom: 2px solid #D7D7D7; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
|
|||
.left { |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 30rpx; |
|||
|
|||
.box_1 { |
|||
padding-left: 20rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
position: relative; |
|||
|
|||
.pic { |
|||
width: 84rpx; |
|||
height: 84rpx; |
|||
border-radius: 50%; |
|||
} |
|||
|
|||
.tag_box { |
|||
position: absolute; |
|||
bottom: -30rpx; |
|||
width: 120rpx; |
|||
height: 38rpx; |
|||
background-color: #F59A23; |
|||
border-radius: 4rpx; |
|||
line-height: 35rpx; |
|||
text-align: center; |
|||
font-size: 20rpx; |
|||
} |
|||
} |
|||
|
|||
.box_2 { |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 20rpx; |
|||
|
|||
.name { |
|||
font-size: 28rpx; |
|||
} |
|||
|
|||
.date { |
|||
font-size: 24rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.right { |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 14rpx; |
|||
|
|||
.item { |
|||
border: 1px solid #00E5BB; |
|||
border-radius: 10rpx; |
|||
width: 102rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
|
|||
view { |
|||
text-align: center; |
|||
height: 50rpx; |
|||
line-height: 50rpx; |
|||
} |
|||
|
|||
view:nth-child(1) { |
|||
font-size: 32rpx; |
|||
background-color: #fff; |
|||
color: #00e5bb; |
|||
} |
|||
|
|||
view:nth-child(2) { |
|||
font-size: 20rpx; |
|||
background-color: #00e5bb; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
//课程计划 |
|||
.section_5 { |
|||
margin-top: 36rpx; |
|||
|
|||
.ul { |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 30rpx; |
|||
|
|||
.li { |
|||
position: relative; |
|||
border-radius: 10rpx; |
|||
background-color: rgba(63, 63, 67, 1); |
|||
border: 2rpx solid rgba(0, 229, 187, 1); |
|||
padding: 20rpx 14rpx; |
|||
|
|||
display: flex; |
|||
flex-direction: column; |
|||
|
|||
.top_box { |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 10rpx; |
|||
|
|||
.title { |
|||
color: rgba(255, 255, 255, 1); |
|||
font-size: 24rpx; |
|||
} |
|||
} |
|||
|
|||
.bottom_box { |
|||
padding-top: 10rpx; |
|||
margin-top: 20rpx; |
|||
border-top: 1px dashed #F2F2F2; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 10rpx; |
|||
|
|||
.item { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
|
|||
color: rgba(215, 215, 215, 1); |
|||
font-size: 24rpx; |
|||
} |
|||
} |
|||
|
|||
.tag { |
|||
position: absolute; |
|||
right: 0rpx; |
|||
top: 0rpx; |
|||
width: 110rpx; |
|||
height: 60rpx; |
|||
line-height: 58rpx; |
|||
border-radius: 0rpx 8rpx 0rpx 24rpx; |
|||
background-color: rgba(32, 202, 175, 1); |
|||
color: rgba(255, 255, 255, 1); |
|||
font-size: 24rpx; |
|||
text-align: center; |
|||
border: 0rpx solid rgba(121, 121, 121, 1); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
} |
|||
</style> |
|||
@ -1,299 +0,0 @@ |
|||
<!--班级-列表--> |
|||
<template> |
|||
<view class="main_box"> |
|||
<!--自定义导航栏--> |
|||
<view class="navbar_section"> |
|||
<view class="title">班级</view> |
|||
</view> |
|||
|
|||
<view class="main_section"> |
|||
<view class="section_1"> |
|||
<fui-input class="input_item" borderTop clearable="true" placeholder="搜索" v-model="filteredData.name" @confirm="search" @input="search"></fui-input> |
|||
</view> |
|||
|
|||
<view class="section_2"> |
|||
<scroll-view |
|||
class="ul" |
|||
scroll-y="true" |
|||
:lower-threshold="lowerThreshold" |
|||
@scrolltolower="loadMoreData" |
|||
style="height: 65vh;" |
|||
> |
|||
<view |
|||
class="li" |
|||
v-for="(v,k) in tableList" |
|||
:key="k" |
|||
@click="openViewClassInfo(v)" |
|||
> |
|||
<view class="left"> |
|||
<image class="pic" :src="v.head_coach_head_img"></image> |
|||
</view> |
|||
<view class="right"> |
|||
<view class="box_1"> |
|||
<view class="name"> |
|||
{{v.class_name}} |
|||
</view> |
|||
<view class="btn_box"> |
|||
<view v-if="v.end_count">{{v.end_count}}人即将到期</view> |
|||
</view> |
|||
</view> |
|||
<view class="box_2"> |
|||
<view class="user_list" v-for="(v2,k2) in v.classPersonnelRel" :key="k2"> |
|||
<image |
|||
:src="$util.img(v2.student.customerResources.member.headimg)"></image> |
|||
</view> |
|||
<view class="num">{{v.students_count}}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</scroll-view> |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
<!-- 底部导航--> |
|||
<AQTabber/> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import memberApi from '@/api/member.js'; |
|||
import AQTabber from "@/components/AQ/AQTabber.vue" |
|||
import apiRoute from '@/api/apiRoute.js'; |
|||
|
|||
export default { |
|||
components: { |
|||
AQTabber, |
|||
}, |
|||
data() { |
|||
return { |
|||
loading:false,//加载状态 |
|||
lowerThreshold: 100,//距离底部多远触发 |
|||
isReachedBottom: false,//防止重复加载|true=不可加载|false=可加载 |
|||
|
|||
//筛选条件 |
|||
filteredData:{ |
|||
page:1,//当前页码 |
|||
limit:10,//每页返回数据条数 |
|||
total:10,//数据总条数 |
|||
name: '',//班级名称 |
|||
}, |
|||
tableList:[],//聊天数据列表 |
|||
} |
|||
}, |
|||
onLoad(options) {}, |
|||
onShow(){ |
|||
this.init()//初始化 |
|||
}, |
|||
methods: { |
|||
//初始化 |
|||
async init(){ |
|||
this.getList() |
|||
}, |
|||
|
|||
//加载更多(下一页) |
|||
loadMoreData() { |
|||
//判断是否加载 |
|||
if (!this.isReachedBottom) { |
|||
this.isReachedBottom = true;//设置为不可请求状态 |
|||
this.getList(); |
|||
} |
|||
}, |
|||
//重置为第一页 |
|||
async resetFilteredData() { |
|||
this.isReachedBottom = false; // 重置状态，以便下次触发加载更多 |
|||
|
|||
this.filteredData.page = 1//当前页码 |
|||
this.filteredData.limit = 10//每页返回数据条数 |
|||
this.filteredData.total = 10//数据总条数 |
|||
}, |
|||
//获取列表 |
|||
async getList(){ |
|||
this.loading = true |
|||
|
|||
let data = {...this.filteredData} |
|||
|
|||
console.log(111,(this.filteredData.page * this.filteredData.limit) ,(this.filteredData.total)) |
|||
|
|||
//判断是否还有数据 |
|||
if ((this.filteredData.page - 1) * this.filteredData.limit >= this.filteredData.total) { |
|||
this.loading = false |
|||
uni.showToast({ |
|||
title: '暂无更多', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
|
|||
if(data.page == 1){ |
|||
this.tableList = [] |
|||
} |
|||
|
|||
let res = await apiRoute.jlClassList(data) |
|||
this.loading = false |
|||
this.isReachedBottom = false; |
|||
if (res.code != 1){ |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
|
|||
this.tableList = this.tableList.concat(res.data.data); // 使用 concat 方法 将新数据追加到数组中 |
|||
|
|||
console.log('列表',this.tableList) |
|||
this.filteredData.total = res.data.total |
|||
this.filteredData.page++ |
|||
}, |
|||
|
|||
async search(e){ |
|||
await this.resetFilteredData() |
|||
this.filteredData.name = e |
|||
await this.getList() |
|||
}, |
|||
|
|||
//打开班级详情页 |
|||
openViewClassInfo(item){ |
|||
let class_id = item.id |
|||
this.$navigateTo({ |
|||
url: `/pages/coach/class/info?class_id=${class_id}` |
|||
}) |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
|
|||
.main_box{ |
|||
background: #292929 ; |
|||
} |
|||
|
|||
//自定义导航栏 |
|||
.navbar_section{ |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
background: #292929; |
|||
.title{ |
|||
padding: 40rpx 0rpx; |
|||
|
|||
/* 小程序端样式 */ |
|||
// #ifdef MP-WEIXIN |
|||
padding: 80rpx 0rpx; |
|||
// #endif |
|||
|
|||
|
|||
font-size: 30rpx; |
|||
color: #fff; |
|||
} |
|||
} |
|||
|
|||
.main_section{ |
|||
// min-height: 100vh; |
|||
background: #292929 100%; |
|||
padding: 0 24rpx; |
|||
padding-top: 40rpx; |
|||
padding-bottom: 150rpx; |
|||
font-size: 24rpx; |
|||
color: #FFFFFF; |
|||
|
|||
.section_1 { |
|||
border-radius: 10rpx; |
|||
background-color: #525252; |
|||
::v-deep .fui-input__wrap{ |
|||
border-radius: 10rpx !important; |
|||
background-color: #525252 !important; |
|||
} |
|||
::v-deep .fui-input__background{ |
|||
background-color: #525252 !important; |
|||
} |
|||
.input_item { |
|||
height: 60rpx; |
|||
::v-deep .uni-input-wrapper{ |
|||
.uni-input-placeholder { |
|||
font-size: 28rpx !important; |
|||
|
|||
} |
|||
|
|||
} |
|||
} |
|||
::v-deep .uni-input-input { |
|||
color: #fff; |
|||
} |
|||
} |
|||
|
|||
.section_2{ |
|||
margin-top: 34rpx; |
|||
.ul{ |
|||
display: flex; |
|||
flex-direction: column; |
|||
//gap: 24rpx; |
|||
.li{ |
|||
margin-bottom: 24rpx; |
|||
background: #404045; |
|||
padding: 50rpx 36rpx 46rpx; |
|||
border-radius: 16rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 32rpx; |
|||
.left{ |
|||
.pic{ |
|||
border-radius: 50%; |
|||
width: 92rpx; |
|||
height: 92rpx; |
|||
} |
|||
} |
|||
.right{ |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 28rpx; |
|||
.box_1{ |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 36rpx; |
|||
.name{ |
|||
font-size: 28rpx; |
|||
} |
|||
.btn_box{ |
|||
view{ |
|||
border: 1px solid #FAD04D; |
|||
border-radius: 10rpx; |
|||
width: 182rpx; |
|||
height: 48rpx; |
|||
line-height: 42rpx; |
|||
text-align: center; |
|||
font-size: 26rpx; |
|||
color: #FAD04D; |
|||
} |
|||
} |
|||
} |
|||
.box_2{ |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 44rpx; |
|||
.user_list{ |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 14rpx; |
|||
image{ |
|||
border-radius: 50%; |
|||
width: 48rpx; |
|||
height: 48rpx; |
|||
} |
|||
} |
|||
.num{} |
|||
} |
|||
|
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
|
|||
} |
|||
|
|||
|
|||
</style> |
|||
@ -1,234 +0,0 @@ |
|||
<!--课程-详情--> |
|||
<template> |
|||
<view class="main_box"> |
|||
<view class="main_section"> |
|||
<view class="section_1"> |
|||
<view class="title_box">青少儿篮球课</view> |
|||
<view class="ul"> |
|||
<view class="li"> |
|||
<view class="title">课程名称</view> |
|||
<view class="content">青少年篮球课</view> |
|||
</view> |
|||
|
|||
<view class="li"> |
|||
<view class="title">班级</view> |
|||
<view class="content">班级名称</view> |
|||
</view> |
|||
|
|||
<view class="li"> |
|||
<view class="title">上课时间</view> |
|||
<view class="content">2020.03.25 15:30-17:00</view> |
|||
</view> |
|||
|
|||
<view class="li"> |
|||
<view class="title">上课地址</view> |
|||
<view class="content">xxxx体育馆302室</view> |
|||
</view> |
|||
|
|||
<view class="li"> |
|||
<view class="title">课程名称</view> |
|||
<view class="content">青少年篮球课</view> |
|||
</view> |
|||
|
|||
<view class="li"> |
|||
<view class="title">教练</view> |
|||
<view class="content">包子皮</view> |
|||
</view> |
|||
|
|||
<view class="li"> |
|||
<view class="title">教练号码</view> |
|||
<view class="content">18888888888</view> |
|||
</view> |
|||
|
|||
<view class="li"> |
|||
<view class="title">扣除课时</view> |
|||
<view class="content">2个课时</view> |
|||
</view> |
|||
|
|||
<view class="state_box"> |
|||
<view>已上</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
// import user from '@/api/user.js'; |
|||
import AQTabber from "@/components/AQ/AQTabber.vue" |
|||
|
|||
|
|||
export default { |
|||
components: { |
|||
AQTabber, |
|||
}, |
|||
data() { |
|||
return { |
|||
formData:{}, |
|||
|
|||
//课程下拉菜单相关 |
|||
show_course:false,//是否显示下拉菜单 |
|||
//课程下拉菜单 |
|||
course_name:'课程',//选中的下拉菜单名称 |
|||
options_course: [ |
|||
{ |
|||
text: '请选择课程', |
|||
value: '', |
|||
checked: true |
|||
}, { |
|||
text: '羽毛球课程1', |
|||
value: '1' |
|||
}, { |
|||
text: '篮球课程2', |
|||
value: '2' |
|||
} |
|||
], |
|||
|
|||
//课室下拉菜单相关 |
|||
show_classroom:false,//是否显示下拉菜单 |
|||
//课程下拉菜单 |
|||
classroom_name:'课室',//选中的下拉菜单名称 |
|||
options_classroom: [ |
|||
{ |
|||
text: '请选择课室', |
|||
value: '', |
|||
checked: true |
|||
}, { |
|||
text: '羽毛球201', |
|||
value: '1' |
|||
}, { |
|||
text: '篮球室101', |
|||
value: '2' |
|||
} |
|||
], |
|||
} |
|||
}, |
|||
onLoad() { |
|||
}, |
|||
methods: { |
|||
//选中课程下拉菜单点击事件 |
|||
clickCourse(e){ |
|||
console.log(e) |
|||
this.course_name = e.text |
|||
this.show_course = true |
|||
}, |
|||
//显示下拉菜单 |
|||
filterTapCourse() { |
|||
//显示下拉框 |
|||
this.$refs.ref_course.show() |
|||
this.show_course = true; |
|||
}, |
|||
|
|||
|
|||
|
|||
//选中课室 |
|||
clickClassroom(e){ |
|||
console.log(e) |
|||
this.classroom_name = e.text |
|||
this.show_classroom = true |
|||
}, |
|||
//显示课室下拉菜单 |
|||
filterTapClassroom() { |
|||
//显示下拉框 |
|||
this.$refs.ref_classroom.show() |
|||
this.show_classroom = true; |
|||
}, |
|||
|
|||
//打开课时详情页 |
|||
openViewCourseInfo(item){ |
|||
this.$navigateTo({ |
|||
url: '/pages/coach/course/info' |
|||
}) |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
|
|||
.main_box{ |
|||
background: #292929 ; |
|||
} |
|||
|
|||
//自定义导航栏 |
|||
.navbar_section{ |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
background: #292929; |
|||
.title{ |
|||
padding: 40rpx 0rpx; |
|||
|
|||
/* 小程序端样式 */ |
|||
// #ifdef MP-WEIXIN |
|||
padding: 80rpx 0rpx; |
|||
// #endif |
|||
|
|||
|
|||
font-size: 30rpx; |
|||
color: #fff; |
|||
} |
|||
} |
|||
|
|||
.main_section{ |
|||
min-height: 100vh; |
|||
background: #292929 100%; |
|||
padding: 30rpx 24rpx; |
|||
padding-top: 40rpx; |
|||
padding-bottom: 150rpx; |
|||
font-size: 24rpx; |
|||
color: #FFFFFF; |
|||
|
|||
.section_1{ |
|||
border-radius: 22rpx; |
|||
padding: 20rpx 40rpx; |
|||
background: #333333 100%; |
|||
width: 100%; |
|||
.title_box{ |
|||
padding: 10rpx; |
|||
padding-left: 30rpx; |
|||
font-size: 32rpx; |
|||
} |
|||
.ul{ |
|||
padding: 40rpx 10rpx; |
|||
padding-bottom: 350rpx; |
|||
margin-top: 10rpx; |
|||
border-top: 1px solid #555555; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 40rpx; |
|||
|
|||
position: relative; |
|||
|
|||
.li{ |
|||
display: flex; |
|||
gap: 72rpx; |
|||
.title{ |
|||
width: 120rpx; |
|||
text-align: right; |
|||
} |
|||
.content{} |
|||
} |
|||
.state_box{ |
|||
position: absolute; |
|||
bottom: 50rpx; |
|||
right: 10rpx; |
|||
view{ |
|||
width: 154rpx; |
|||
height: 154rpx; |
|||
border-radius: 50%; |
|||
background-color: rgba(41,211,180,0.17); |
|||
color: rgba(41,211,180,1); |
|||
font-size: 26rpx; |
|||
text-align: center; |
|||
line-height: 150rpx; |
|||
transform: rotate(-35deg); /* 旋转 */ |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
</style> |
|||
@ -1,793 +0,0 @@ |
|||
<!--课程-详情列表--> |
|||
<template> |
|||
<view class="main_box"> |
|||
<view class="main_section"> |
|||
<view class="section_1"> |
|||
<view class="title">日期：{{courseInfo.course_date}}</view> |
|||
<view class="title">时间：{{courseInfo.time_slot}}</view> |
|||
<view class="title">地点：{{courseInfo.venue.venue_name}}</view> |
|||
<view class="title">课程：{{courseInfo.course.course_name}}</view> |
|||
<view class="title">教练：{{courseInfo.coach.name}}</view> |
|||
<view class="title">人数：{{courseInfo.venue.capacity}}</view> |
|||
<view class="isbtn" @click="addStudent"> |
|||
添加学员 |
|||
</view> |
|||
<view v-if="courseInfo.student_courses[0] && isNowBetween(courseInfo.student_courses[0].start_date, courseInfo.student_courses[0].end_date)" class="tag" style="background-color: #FAD24E;">上课中 |
|||
</view> |
|||
<view v-if="courseInfo.student_courses[0] && !isCourseFuture(courseInfo.student_courses[0].end_date)" class="tag" style="background-color: #e2e2e2;">已结束 |
|||
</view> |
|||
<view v-if="courseInfo.student_courses[0] && isCourseFuture(courseInfo.student_courses[0].start_date)" class="tag" style="background-color: #1cd188;">未开始 |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="section_2"> |
|||
<view :class="['table', tableType==1 ? 'select':'']" @click="switchTag(1)">学员情况</view> |
|||
<view :class="['table', tableType==2 ? 'select':'']" @click="switchTag(2)">作业情况</view> |
|||
</view> |
|||
|
|||
<!--签到情况--> |
|||
<view class="section_3" v-if="tableType == 1"> |
|||
|
|||
<view class="tip_title" v-if="courseInfo.student_courses.length == 0">暂无数据</view> |
|||
|
|||
<view class="item" v-for="(v,k) in courseInfo.student_courses" :key="k"> |
|||
<view class="left" @click="openViewCourseInfo(v)"> |
|||
<image class="pic" model="aspectFit" :src="$util.img(v.avatar)"></image> |
|||
<view class="box"> |
|||
<view class="title">{{v.name}}</view> |
|||
<view class="title">来源：{{v.source}}</view> |
|||
<view class="title">一访情况：{{v['school_six_speed'].first_visit_time}}</view> |
|||
<view class="title">一访时间：{{v['school_six_speed'].first_visit_status}}</view> |
|||
|
|||
<view class="title">课程截止时间：{{v.end_date}}</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="right" v-if="courseInfo.status == 'pending'"> |
|||
<view class="tag leave-tag" @click="written(v.student_id)" v-if="!isWithinTimeSlot(courseInfo.time_slot) && v.status !== 'signed'">请假</view> |
|||
<view class="tag signin-tag" @click="signIn(v.student_id)" v-if="isWithinTimeSlot(courseInfo.time_slot) && v.status !== 'signed'">签到</view> |
|||
<view class="tag signed-tag" v-if="v.status === 'signed'">已签到</view> |
|||
</view> |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
<!--作业情况--> |
|||
<view class="section_4" v-if="tableType == 2"> |
|||
<view class="item_box"> |
|||
<!-- 待批改--> |
|||
<fui-collapse-item @change="changeCollapse(1)" open="true" isBorder="false" contentBg="#434544"> |
|||
<view class="title_box"> |
|||
<text>待批改（{{courseInfo.groupedByStatus1.length}}）</text> |
|||
</view> |
|||
<template v-slot:content> |
|||
<view class="ul"> |
|||
<view v-for="(v,k) in courseInfo.groupedByStatus1" :key="k" class="li" |
|||
@click="openViewWorkDetails(v)"> |
|||
<view class="left"> |
|||
<image class="pic" model="aspectFit" |
|||
:src="$util.img(v.student.customerResources.member.headimg)"></image> |
|||
<view class="box"> |
|||
<view class="title">{{v.student.name}}</view> |
|||
<view class="title"> |
|||
<view>提交时间</view> |
|||
<view>{{v.created_at}}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<!-- <view class="right"> |
|||
<view class="btn">查看并批改</view> |
|||
</view> --> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
</fui-collapse-item> |
|||
</view> |
|||
|
|||
<!-- 未提交--> |
|||
<view class="item_box"> |
|||
<fui-collapse-item @change="changeCollapse(2)" isBorder="false" contentBg="#434544"> |
|||
<view class="title_box"> |
|||
<text>未提交（{{courseInfo.groupedByStatus2.length}}）</text> |
|||
</view> |
|||
<template v-slot:content> |
|||
<view class="ul"> |
|||
<view class="li" v-for="(v,k) in courseInfo.groupedByStatus2" :key="k" |
|||
@click="openViewWorkDetails(v)"> |
|||
<view class="left"> |
|||
<image class="pic" model="aspectFit" |
|||
:src="$util.img(v.student.customerResources.member.headimg)"></image> |
|||
<view class="box"> |
|||
<view class="title">{{v.student.name}}</view> |
|||
<view class="title"> |
|||
<view>提交时间</view> |
|||
<!-- <view>{{v.created_at}}</view> --> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<!-- <view class="right"> |
|||
<view class="btn">查看并批改</view> |
|||
</view> --> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
</fui-collapse-item> |
|||
</view> |
|||
|
|||
<!-- 已提交--> |
|||
<view class="item_box"> |
|||
<fui-collapse-item @change="changeCollapse(3)" isBorder="false" contentBg="#434544"> |
|||
<view class="title_box"> |
|||
<text>已提交（{{courseInfo.groupedByStatus3.length}}）</text> |
|||
</view> |
|||
<template v-slot:content> |
|||
<view class="ul"> |
|||
<view class="li" v-for="(v,k) in courseInfo.groupedByStatus3" :key="k" |
|||
@click="openViewWorkDetails(v)"> |
|||
<view class="left"> |
|||
<image class="pic" model="aspectFit" |
|||
:src="$util.img(v.student.customerResources.member.headimg)"></image> |
|||
<view class="box"> |
|||
<view class="title">{{v.student.name}}</view> |
|||
<view class="title"> |
|||
<view>提交时间</view> |
|||
<view>{{v.created_at}}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<!-- <view class="right"> |
|||
<view class="btn">查看并批改</view> |
|||
</view> --> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
</fui-collapse-item> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<fui-modal :show="show" title="选择学员" @click="handleModalClick" :buttons="[]" @cancel="cancel"> |
|||
<view class="student-list"> |
|||
<view class="student-item" v-for="(item, index) in StudentList" :key="index" @click="change(item)"> |
|||
<view class="student-info"> |
|||
<view class="student-name">{{item.text}}</view> |
|||
<view class="student-details"> |
|||
<text>年龄: {{item.age || '未知'}}</text> |
|||
<text>来源: {{item.source || '未知'}}</text> |
|||
<text>渠道: {{item.source_channel || '未知'}}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="empty-list" v-if="StudentList.length === 0"> |
|||
<text>暂无可添加的学员</text> |
|||
</view> |
|||
</view> |
|||
</fui-modal> |
|||
<fui-picker :options="StudentList" :linkage="false" :show="false" :layer="1" @change="change" |
|||
@cancel="cancel"></fui-picker> |
|||
<fui-actionsheet :show="written_show" :tips="written_tips" :isCancel="isCancel" |
|||
:itemList="itemList" @cancel="written_cancel" @click="written_click"></fui-actionsheet> |
|||
|
|||
<uni-popup ref="popup" type="center"> |
|||
<view class="popup-content">{{ tipContent }}</view> |
|||
</uni-popup> |
|||
<AQTabber /> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import memberApi from '@/api/member.js'; |
|||
import AQTabber from "@/components/AQ/AQTabber.vue" |
|||
import apiRoute from '@/api/apiRoute.js'; |
|||
|
|||
export default { |
|||
components: { |
|||
AQTabber, |
|||
}, |
|||
data() { |
|||
return { |
|||
course_id: '', //课程id |
|||
courseInfo: { |
|||
sign_list: [], //签到列表 |
|||
assignments: { |
|||
dpg_list: [], // 待批改作业列表 |
|||
wtj_list: [], // 未提交作业列表 |
|||
ypg_list: [] // 已批改作业列表 |
|||
}, |
|||
}, //课时详情 |
|||
|
|||
tableType: 1, //1=签到情况，2=作业情况 |
|||
show: false, |
|||
StudentList: [], |
|||
written_show: false, |
|||
written_tips: '确认请假', |
|||
isCancel: false, |
|||
itemList: ['确认', '取消'], |
|||
qingjia_student_id: 0 |
|||
} |
|||
}, |
|||
onLoad(options) { |
|||
this.course_id = options.id |
|||
}, |
|||
onShow() { |
|||
this.init() |
|||
}, |
|||
methods: { |
|||
//初始化 |
|||
async init() { |
|||
this.getCourseInfo() |
|||
}, |
|||
|
|||
isNowBetween(start_date, end_date) { |
|||
const now = new Date(); |
|||
const start = new Date(start_date); |
|||
const end = new Date(end_date); |
|||
|
|||
return now >= start && now <= end; |
|||
}, |
|||
|
|||
isCourseFuture(courseDate) { |
|||
const courseTime = new Date(courseDate).getTime(); |
|||
const nowTime = new Date().getTime(); |
|||
return courseTime > nowTime; |
|||
}, |
|||
|
|||
//教练端-课程详情 |
|||
async getCourseInfo() { |
|||
let res = await apiRoute.courseInfo({ |
|||
id: this.course_id |
|||
}) |
|||
if (res.code != 1) { |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
console.log('课程详情', res.data) |
|||
this.courseInfo = res.data |
|||
|
|||
|
|||
// 使用模拟数据 |
|||
// this.courseInfo = { |
|||
// id: this.course_id || '1', |
|||
// course_date: '2025-07-25', |
|||
// time_slot: '14:00-15:30', |
|||
// status: 'pending', |
|||
// venue: { |
|||
// venue_name: '总部校区 305教室', |
|||
// capacity: 20 |
|||
// }, |
|||
// course: { |
|||
// course_name: '少儿英语基础班' |
|||
// }, |
|||
// coach: { |
|||
// name: '王教练' |
|||
// }, |
|||
// student_courses: [ |
|||
// { |
|||
// student_id: '1001', |
|||
// name: '张三', |
|||
// avatar: '', |
|||
// start_date: '2025-07-25', |
|||
// end_date: '2025-10-25', |
|||
// status: 'pending' |
|||
// }, |
|||
// { |
|||
// student_id: '1002', |
|||
// name: '李四', |
|||
// avatar: '', |
|||
// start_date: '2025-07-25', |
|||
// end_date: '2025-10-25', |
|||
// status: 'pending' |
|||
// } |
|||
// ], |
|||
// groupedByStatus1: [], // 待批改 |
|||
// groupedByStatus2: [], // 未提交 |
|||
// groupedByStatus3: [] // 已提交 |
|||
// }; |
|||
|
|||
// console.log('课程详情(模拟数据)', this.courseInfo); |
|||
}, |
|||
|
|||
//切换标签 |
|||
switchTag(type) { |
|||
this.tableType = type |
|||
}, |
|||
|
|||
//打开课时详情页 |
|||
openViewCourseInfo(item) { |
|||
// this.$navigateTo({ |
|||
// url: '/pages/coach/course/info' |
|||
// }) |
|||
uni.navigateTo({ |
|||
url: `/pages/market/clue/clue_info?resource_sharing_id=25` |
|||
}); |
|||
}, |
|||
|
|||
// 作业情况 |
|||
changeCollapse(type) {}, |
|||
|
|||
//跳转页面-作业详情 |
|||
openViewWorkDetails(item) { |
|||
let id = item.id |
|||
this.$navigateTo({ |
|||
url: `/pages/coach/student/work_details?id=${id}` |
|||
}) |
|||
}, |
|||
|
|||
//获取添加学员列表 |
|||
async addStudent() { |
|||
let res = await apiRoute.addStudentList({ |
|||
id: this.course_id |
|||
}) |
|||
if (res.code != 1) { |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
this.StudentList = res.data |
|||
if (this.StudentList.length == 0) { |
|||
uni.showToast({ |
|||
title: '暂无可填加的学员', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} else { |
|||
// 显示学员选择弹窗 |
|||
this.show = true |
|||
} |
|||
}, |
|||
// 处理模态框点击事件 |
|||
handleModalClick(e) { |
|||
// 如果需要响应按钮事件可在这里处理 |
|||
console.log('模态框点击事件', e) |
|||
}, |
|||
async change(student) { |
|||
this.show = false |
|||
// 获取学生的student_id和resource_id |
|||
let studentId = student.value |
|||
let resourceId = student.resource_id |
|||
|
|||
let res = await apiRoute.addStudent({ |
|||
student_id: studentId, |
|||
schedule_id: this.course_id, |
|||
time_slot: this.courseInfo.time_slot, |
|||
course_date: this.courseInfo.course_date, |
|||
resource_id: resourceId // 添加resource_id参数 |
|||
}) |
|||
if (res.code != 1) { |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
|
|||
uni.showToast({ |
|||
title: '添加学员成功', |
|||
icon: 'success' |
|||
}) |
|||
|
|||
// 刷新页面数据 |
|||
this.init() |
|||
}, |
|||
cancel() { |
|||
this.show = false |
|||
}, |
|||
//请假 |
|||
written(student_id) { |
|||
this.qingjia_student_id = student_id |
|||
this.written_show = true |
|||
}, |
|||
written_cancel() { |
|||
this.written_show = false |
|||
}, |
|||
async written_click(e) { |
|||
if(e.text == '取消'){ |
|||
this.written_show = false |
|||
} else { |
|||
let res = await apiRoute.delStudentCourse({ |
|||
student_id: this.qingjia_student_id, |
|||
course_id: this.course_id, |
|||
}) |
|||
if (res.data) { |
|||
uni.showToast({ |
|||
title: '请假成功', |
|||
icon: 'none' |
|||
}) |
|||
this.init() |
|||
} else { |
|||
// uni.showToast({ |
|||
// title: '学员不存在', |
|||
// icon: 'none' |
|||
// }) |
|||
} |
|||
this.written_show = false |
|||
} |
|||
|
|||
}, |
|||
isWithinTimeSlot(time_slot) { |
|||
const [startStr, endStr] = time_slot.split('-'); |
|||
const [startHours, startMinutes] = startStr.split(':').map(Number); |
|||
const [endHours, endMinutes] = endStr.split(':').map(Number); |
|||
|
|||
const now = new Date(); |
|||
const startTime = new Date(now.getFullYear(), now.getMonth(), now.getDate(), startHours, startMinutes); |
|||
const endTime = new Date(now.getFullYear(), now.getMonth(), now.getDate(), endHours, endMinutes); |
|||
|
|||
return now >= startTime && now < endTime; |
|||
}, |
|||
signIn(student_id) { |
|||
uni.showToast({ |
|||
title: '签到成功', |
|||
icon: 'success' |
|||
}); |
|||
|
|||
// 在实际应用中，这里应该调用签到API |
|||
// 例如： |
|||
// apiRoute.studentSignIn({ |
|||
// student_id: student_id, |
|||
// course_id: this.course_id, |
|||
// }).then(res => { |
|||
// if (res.code == 1) { |
|||
// uni.showToast({ |
|||
// title: '签到成功', |
|||
// icon: 'success' |
|||
// }); |
|||
// this.init(); |
|||
// } else { |
|||
// uni.showToast({ |
|||
// title: res.msg, |
|||
// icon: 'none' |
|||
// }); |
|||
// } |
|||
// }); |
|||
|
|||
// 更新当前学生的状态（模拟） |
|||
const studentIndex = this.courseInfo.student_courses.findIndex(s => s.student_id === student_id); |
|||
if (studentIndex !== -1) { |
|||
this.courseInfo.student_courses[studentIndex].status = 'signed'; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.main_box { |
|||
background: #292929; |
|||
} |
|||
|
|||
//自定义导航栏 |
|||
.navbar_section { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
background: #292929; |
|||
|
|||
.title { |
|||
padding: 40rpx 0rpx; |
|||
|
|||
/* 小程序端样式 */ |
|||
// #ifdef MP-WEIXIN |
|||
padding: 80rpx 0rpx; |
|||
// #endif |
|||
|
|||
font-size: 30rpx; |
|||
color: #fff; |
|||
} |
|||
} |
|||
|
|||
/* 学员选择列表样式 */ |
|||
.student-list { |
|||
max-height: 600rpx; |
|||
overflow-y: auto; |
|||
} |
|||
|
|||
.student-item { |
|||
padding: 20rpx 30rpx; |
|||
border-bottom: 1px solid #eee; |
|||
background-color: #f8f8f8; |
|||
margin-bottom: 10rpx; |
|||
border-radius: 8rpx; |
|||
} |
|||
|
|||
.student-item:active { |
|||
background-color: #e0e0e0; |
|||
} |
|||
|
|||
.student-info { |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.student-name { |
|||
font-size: 32rpx; |
|||
font-weight: bold; |
|||
color: #333; |
|||
margin-bottom: 10rpx; |
|||
} |
|||
|
|||
.student-details { |
|||
display: flex; |
|||
flex-direction: column; |
|||
font-size: 24rpx; |
|||
color: #666; |
|||
} |
|||
|
|||
.student-details text { |
|||
margin-bottom: 6rpx; |
|||
} |
|||
|
|||
.empty-list { |
|||
padding: 40rpx; |
|||
text-align: center; |
|||
color: #999; |
|||
font-size: 28rpx; |
|||
} |
|||
|
|||
.main_section { |
|||
min-height: 100vh; |
|||
background: #292929 100%; |
|||
padding: 30rpx 24rpx; |
|||
padding-top: 40rpx; |
|||
padding-bottom: 150rpx; |
|||
font-size: 24rpx; |
|||
color: #FFFFFF; |
|||
|
|||
.section_1 { |
|||
position: relative; |
|||
padding: 18rpx 34rpx 50rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 15rpx; |
|||
color: #fff; |
|||
font-size: 24rpx; |
|||
background-color: #434544; |
|||
border-radius: 22rpx; |
|||
|
|||
.tag { |
|||
position: absolute; |
|||
top: 0; |
|||
right: 0; |
|||
|
|||
width: 110rpx; |
|||
height: 60rpx; |
|||
line-height: 55rpx; |
|||
border-radius: 0rpx 24rpx 0rpx 24rpx; |
|||
color: #fff; |
|||
font-size: 24rpx; |
|||
text-align: center; |
|||
} |
|||
} |
|||
|
|||
.section_2 { |
|||
margin-top: 44rpx; |
|||
color: #fff; |
|||
font-size: 30rpx; |
|||
|
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
|
|||
.table { |
|||
width: 50%; |
|||
height: 64rpx; |
|||
background-color: #1684FCFF; |
|||
|
|||
line-height: 62rpx; |
|||
text-align: center; |
|||
} |
|||
|
|||
.table:nth-child(1) { |
|||
border-top-left-radius: 8rpx; |
|||
border-bottom-left-radius: 8rpx; |
|||
} |
|||
|
|||
.table:nth-child(2) { |
|||
border-top-right-radius: 8rpx; |
|||
border-bottom-right-radius: 8rpx; |
|||
} |
|||
|
|||
.select { |
|||
background-color: #fff; |
|||
color: #1684FCFF; |
|||
} |
|||
} |
|||
|
|||
.section_3 { |
|||
margin-top: 44rpx; |
|||
min-height: 20vh; |
|||
padding: 30rpx 0; |
|||
border-radius: 22rpx; |
|||
background-color: #434544; |
|||
display: flex; |
|||
flex-direction: column; |
|||
|
|||
//提示 |
|||
.tip_title { |
|||
text-align: center; |
|||
font-size: 30rpx; |
|||
color: #FFFFFF; |
|||
} |
|||
|
|||
.item { |
|||
border-top: 1px solid #D7D7D7; |
|||
padding: 20rpx 33rpx 20rpx 14rpx; |
|||
|
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
|
|||
.left { |
|||
width: 80%; |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 26rpx; |
|||
|
|||
.pic { |
|||
width: 92rpx; |
|||
height: 92rpx; |
|||
border-radius: 50%; |
|||
background-color: #797979FF; |
|||
} |
|||
|
|||
.box { |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 10rpx; |
|||
|
|||
.title { |
|||
color: #fff; |
|||
font-size: 24rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.right { |
|||
.tag { |
|||
width: 93rpx; |
|||
height: 93rpx; |
|||
border-radius: 50%; |
|||
line-height: 90rpx; |
|||
font-size: 26rpx; |
|||
text-align: center; |
|||
border: 0rpx; |
|||
//旋转45° |
|||
transform: rotate(-30deg); |
|||
} |
|||
|
|||
.leave-tag { |
|||
background-color: rgba(254, 250, 131, 0.62); |
|||
color: rgba(255, 255, 255, 1); |
|||
} |
|||
|
|||
.signin-tag { |
|||
background-color: #1cd188; |
|||
color: #FFFFFF; |
|||
} |
|||
|
|||
.signed-tag { |
|||
background-color: #a4adb3; |
|||
color: #FFFFFF; |
|||
transform: none; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.item:nth-child(1) { |
|||
border-top: 0px; |
|||
} |
|||
} |
|||
|
|||
.section_4 { |
|||
margin-top: 44rpx; |
|||
padding: 30rpx 0; |
|||
border-radius: 22rpx; |
|||
background-color: #434544; |
|||
display: flex; |
|||
flex-direction: column; |
|||
|
|||
.item_box { |
|||
margin-bottom: 30rpx; |
|||
padding-left: 24rpx; |
|||
padding-right: 32rpx; |
|||
|
|||
|
|||
font-size: 28rpx; |
|||
color: #fff; |
|||
background-color: #434544; |
|||
|
|||
::v-deep .fui-collapse-item__title { |
|||
background-color: #434544 !important; |
|||
} |
|||
|
|||
::v-deep .fui-collapse__border-color { |
|||
border-top: none !important; |
|||
/* 取消上边框 */ |
|||
background: #434544 !important; |
|||
} |
|||
|
|||
.title_box {} |
|||
|
|||
.ul { |
|||
background-color: #434544; |
|||
|
|||
.li { |
|||
background-color: #434544; |
|||
border-top: 1px solid #D7D7D7; |
|||
padding: 20rpx 33rpx 20rpx 14rpx; |
|||
|
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
|
|||
.left { |
|||
width: 80%; |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 26rpx; |
|||
|
|||
.pic { |
|||
width: 92rpx; |
|||
height: 92rpx; |
|||
border-radius: 50%; |
|||
background-color: #797979FF; |
|||
} |
|||
|
|||
.box { |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 10rpx; |
|||
|
|||
.title { |
|||
color: #fff; |
|||
font-size: 24rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.right { |
|||
.btn { |
|||
background-color: #a4adb3; |
|||
color: #fff; |
|||
|
|||
width: 160rpx; |
|||
height: 60rpx; |
|||
line-height: 60rpx; |
|||
border-radius: 8rpx; |
|||
background-color: rgba(164, 173, 179, 1); |
|||
color: rgba(255, 255, 255, 1); |
|||
font-size: 24rpx; |
|||
text-align: center; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.li:nth-child(1) { |
|||
border-top: none !important; |
|||
/* 取消上边框 */ |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.isbtn { |
|||
border: 1px solid #FAD04D; |
|||
border-radius: 10rpx; |
|||
background: #434544; |
|||
color: #FAD04D; |
|||
width: 110rpx; |
|||
height: 60rpx; |
|||
line-height: 55rpx; |
|||
text-align: center; |
|||
font-size: 24rpx; |
|||
position: absolute; |
|||
bottom: 20rpx; |
|||
right: 15rpx; |
|||
} |
|||
</style> |
|||
@ -1,648 +0,0 @@ |
|||
<!--课程-列表--> |
|||
<template> |
|||
<view class="main_box"> |
|||
<view class="main_section"> |
|||
<view class="section_1"> |
|||
<view class="ul"> |
|||
<view class="li" v-for="(v,k) in dates" :key="k" @click="selectDate(v.date)"> |
|||
<text>{{v.weekday}}</text> |
|||
<text :class="[filteredData.schedule_date == v.date ? 'today':'']">{{today == v.date ? '今':v.dayOfMonth}}</text> |
|||
</view> |
|||
</view> |
|||
<view class="btn" @click="show_calendar=true"> |
|||
查看更多 <fui-icon name="arrowdown" color="#A4ADB3" size="45"></fui-icon> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- <view class="section_2">--> |
|||
<!-- <view class="item_box">--> |
|||
<!-- <fui-dropdown-menu :size="28" selectedColor="#465CFF" :options="options_course" @click="clickCourse" @close="show_course=false" ref="ref_course">--> |
|||
<!-- <view class="fui-filter__item" @tap="filterTapCourse">--> |
|||
<!-- <text>{{course_name}}</text>--> |
|||
<!-- <view class="fui-filter__icon" :class="{'fui-icon__ani':show_course}">--> |
|||
<!-- <fui-icon name="turningdown" :size="32" color="#FFF"></fui-icon>--> |
|||
<!-- </view>--> |
|||
<!-- </view>--> |
|||
<!-- </fui-dropdown-menu>--> |
|||
<!-- </view>--> |
|||
<!-- <view class="item_box">--> |
|||
<!-- <fui-dropdown-menu :size="28" selectedColor="#465CFF" :options="options_classroom" @click="clickClassroom" @close="show_classroom=false" ref="ref_classroom">--> |
|||
<!-- <view class="fui-filter__item" @tap="filterTapClassroom">--> |
|||
<!-- <text>{{classroom_name}}</text>--> |
|||
<!-- <view class="fui-filter__icon" :class="{'fui-icon__ani':show_classroom}">--> |
|||
<!-- <fui-icon name="turningdown" :size="32" color="#FFF"></fui-icon>--> |
|||
<!-- </view>--> |
|||
<!-- </view>--> |
|||
<!-- </fui-dropdown-menu>--> |
|||
<!-- </view>--> |
|||
|
|||
<!-- </view>--> |
|||
|
|||
|
|||
|
|||
<scroll-view class="section_3" scroll-y="true" :lower-threshold="lowerThreshold" |
|||
@scrolltolower="loadMoreData" style="height: 100vh;"> |
|||
<view class="ul"> |
|||
<view class="li" v-for="(v,k) in tableList" :key="k" @click="openViewCourseInfoList(v)"> |
|||
<view class="top_box"> |
|||
<view class="center_box"> |
|||
<view>时间：{{v.course_date}}</view> |
|||
<view>课室：{{v.venue.venue_name}}</view> |
|||
<view>课程：{{v.course.course_name}}</view> |
|||
<view>人数：{{v.venue.capacity}}</view> |
|||
</view> |
|||
<view class="right_box"> |
|||
<!-- v.status|1=未开始,2=进行中,3=已结束--> |
|||
<!-- <view class="tag" |
|||
:style="{background: v.status == 'pending' ? '#1cd188' : v.status == 'ongoing' ? '#fad24e' : '#ff4d4f'}"> |
|||
{{ v.status === 'pending' ? '未开始' : v.status === 'ongoing' ? '上课中' : '已结束' }} |
|||
</view> --> |
|||
<!-- <view class="tag" style="background:#1cd188;">待上课</view>--> |
|||
</view> |
|||
</view> |
|||
<!-- <view class="bottom_box" v-if="v.status !== 'pending'"> --> |
|||
<view class="bottom_box"> |
|||
<view class="hint"> |
|||
已签到学生 ({{v.student.length }}/{{v.venue.capacity}}) |
|||
</view> |
|||
<view class="list_box"> |
|||
<view class="list"> |
|||
<view class="itme" v-for="(item,index) in v.student || 0" :key="index"> |
|||
<image :src="$util.img(item.avatar)"></image> |
|||
</view> |
|||
</view> |
|||
<view class="btn"> |
|||
详情 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<!-- <view class="isbtn" v-if="v.status === 'pending'"> |
|||
详情 |
|||
</view> --> |
|||
</view> |
|||
</view> |
|||
</scroll-view> |
|||
</view> |
|||
|
|||
<!-- 日历选择--> |
|||
<fui-bottom-popup :show="show_calendar" @close="show_calendar=false"> |
|||
<view class="fui-custom__wrap"> |
|||
<uni-calendar :insert="true" :lunar="false" :selected="calendarSelected" :startDate="startDate" |
|||
:endDate="endDate" @change="changeCalendar" /> |
|||
</view> |
|||
</fui-bottom-popup> |
|||
|
|||
|
|||
<!-- 底部导航--> |
|||
<AQTabber /> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
// import user from '@/api/user.js'; |
|||
import memberApi from '@/api/member.js'; |
|||
import commonApi from '@/api/common.js'; |
|||
import AQTabber from "@/components/AQ/AQTabber.vue" |
|||
import apiRoute from '@/api/apiRoute.js'; |
|||
|
|||
export default { |
|||
components: { |
|||
AQTabber, |
|||
}, |
|||
data() { |
|||
return { |
|||
loading: false, //加载状态 |
|||
lowerThreshold: 100, //距离底部多远触发 |
|||
isReachedBottom: false, //防止重复加载|true=不可加载|false=可加载 |
|||
|
|||
//筛选条件 |
|||
filteredData: { |
|||
page: 1, //当前页码 |
|||
limit: 10, //每页返回数据条数 |
|||
total: 10, //数据总条数 |
|||
schedule_date: '', //日期 |
|||
venue_id: '', //场地id |
|||
}, |
|||
tableList: [], //表格数据 |
|||
venuesInfo: {}, //场地信息 |
|||
|
|||
formData: {}, |
|||
|
|||
//课程下拉菜单相关 |
|||
show_course: false, //是否显示下拉菜单 |
|||
//课程下拉菜单 |
|||
course_name: '课程', //选中的下拉菜单名称 |
|||
options_course: [{ |
|||
text: '请选择课程', |
|||
value: '', |
|||
checked: true |
|||
}, { |
|||
text: '羽毛球课程1', |
|||
value: '1' |
|||
}, { |
|||
text: '篮球课程2', |
|||
value: '2' |
|||
}], |
|||
|
|||
//课室下拉菜单相关 |
|||
show_classroom: false, //是否显示下拉菜单 |
|||
//课程下拉菜单 |
|||
classroom_name: '课室', //选中的下拉菜单名称 |
|||
options_classroom: [{ |
|||
text: '请选择课室', |
|||
value: '', |
|||
checked: true |
|||
}, { |
|||
text: '羽毛球201', |
|||
value: '1' |
|||
}, { |
|||
text: '篮球室101', |
|||
value: '2' |
|||
}], |
|||
|
|||
//今日日期 |
|||
today: '', |
|||
dateList: [], //日期列表 |
|||
|
|||
//日历选择相关 |
|||
show_calendar: false, //是否展示日期 |
|||
startDate: '', //开始日期 |
|||
endDate: '', //结束日期 |
|||
calendarSelected: [], //日历打点 |
|||
dates: {} |
|||
} |
|||
}, |
|||
|
|||
onLoad() {}, |
|||
onShow() { |
|||
this.init() //初始化 |
|||
}, |
|||
//下拉刷新 |
|||
async onPullDownRefresh() { |
|||
//重置为第一页 |
|||
this.getThisDate() |
|||
let schedule_date = this.filteredData.schedule_date |
|||
await this.loadData() |
|||
this.filteredData.schedule_date = schedule_date |
|||
await this.getList() |
|||
}, |
|||
methods: { |
|||
//初始化 |
|||
async init() { |
|||
|
|||
await this.getThisDate() |
|||
await this.getHeadDate() |
|||
await this.getList() |
|||
// this.getDateRange() |
|||
// this.setCalendarSelected() |
|||
}, |
|||
|
|||
//选中课程下拉菜单点击事件 |
|||
clickCourse(e) { |
|||
console.log(e) |
|||
this.course_name = e.text |
|||
this.show_course = true |
|||
}, |
|||
//显示下拉菜单 |
|||
filterTapCourse() { |
|||
//显示下拉框 |
|||
this.$refs.ref_course.show() |
|||
this.show_course = true; |
|||
}, |
|||
|
|||
|
|||
|
|||
//选中课室 |
|||
clickClassroom(e) { |
|||
console.log(e) |
|||
this.classroom_name = e.text |
|||
this.show_classroom = true |
|||
}, |
|||
//显示课室下拉菜单 |
|||
filterTapClassroom() { |
|||
//显示下拉框 |
|||
this.$refs.ref_classroom.show() |
|||
this.show_classroom = true; |
|||
}, |
|||
|
|||
//打开课时详情页 |
|||
openViewCourseInfoList(item) { |
|||
let id = item.id |
|||
this.$navigateTo({ |
|||
url: `/pages/coach/course/info_list?id=${id}` |
|||
}) |
|||
}, |
|||
|
|||
|
|||
|
|||
getDatesAroundToday(offsetDays = 0) { |
|||
const date = new Date(); |
|||
date.setDate(date.getDate() + offsetDays); |
|||
const year = date.getFullYear(); |
|||
const month = String(date.getMonth() + 1).padStart(2, '0'); |
|||
const day = String(date.getDate()).padStart(2, '0'); |
|||
const weekDay = ['日', '一', '二', '三', '四', '五', '六'][date.getDay()]; |
|||
return { |
|||
date: `${year}-${month}-${day}`, |
|||
weekday: `星期${weekDay}`, |
|||
dayOfMonth: day // 👈 新增字段：几号 |
|||
}; |
|||
}, |
|||
|
|||
//获取课程头日期 |
|||
async getHeadDate() { |
|||
// let res = await commonApi.getDate() |
|||
// if (res.code != 1) { |
|||
// //提示 |
|||
// uni.showToast({ |
|||
// title: res.msg, |
|||
// icon: 'none', |
|||
// }) |
|||
// return |
|||
// } |
|||
|
|||
// this.dateList = [] |
|||
// res.data.forEach((v, k) => { |
|||
// let today = v.date.split("-")[2]; // "09" |
|||
// this.dateList.push({ |
|||
// date: v.date, |
|||
// status: v.status, //1是正常 2请假 |
|||
// week: v.week, |
|||
// today: today, |
|||
// }) |
|||
// }) |
|||
|
|||
this.dates = {}; |
|||
for (let i = -3; i <= 3; i++) { |
|||
const key = i === 0 ? '今天' : `${Math.abs(i)}天${i < 0 ? '前' : '后'}`; |
|||
this.dates[key] = this.getDatesAroundToday(i); |
|||
} |
|||
}, |
|||
|
|||
//获取当前日期 |
|||
async getThisDate() { |
|||
let date = new Date(); |
|||
let year = date.getFullYear(); |
|||
let month = String(date.getMonth() + 1).padStart(2, '0'); // 月份前补零 |
|||
let day = String(date.getDate()).padStart(2, '0'); // 日期前补零 |
|||
let hour = date.getHours(); |
|||
let minute = date.getMinutes(); |
|||
let second = date.getSeconds(); |
|||
|
|||
let res = `${year}-${month}-${day}`; // 格式化日期 |
|||
this.today = res; |
|||
this.filteredData.schedule_date = res; |
|||
}, |
|||
|
|||
//选择日期 |
|||
async selectDate(date) { |
|||
this.loadData() |
|||
this.filteredData.schedule_date = date |
|||
this.getList() |
|||
}, |
|||
|
|||
//加载更过(下一页) |
|||
loadMoreData() { |
|||
//判断是否加载 |
|||
if (!this.isReachedBottom) { |
|||
this.isReachedBottom = true; //设置为不可请求状态 |
|||
this.getList(); |
|||
} |
|||
}, |
|||
//重置为第一页 |
|||
async loadData() { |
|||
this.isReachedBottom = false; // 重置状态，以便下次触发加载更多 |
|||
this.filteredData.page = 1 //当前页码 |
|||
this.filteredData.limit = 10 //每页返回数据条数 |
|||
this.filteredData.total = 10 //数据总条数 |
|||
this.filteredData.schedule_date = '' |
|||
}, |
|||
//获取列表 |
|||
async getList() { |
|||
this.loading = true |
|||
|
|||
let data = { |
|||
...this.filteredData |
|||
} |
|||
|
|||
//判断是否还有数据 |
|||
if (this.filteredData.page * this.filteredData.limit > this.filteredData.total || this.filteredData.limit > this.filteredData.total) { |
|||
this.loading = false |
|||
uni.showToast({ |
|||
title: '暂无更多', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
|
|||
let res = await apiRoute.courseList(data) |
|||
this.loading = false |
|||
this.isReachedBottom = false; |
|||
if (res.code != 1) { |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
|
|||
this.tableList = res.data.data |
|||
//场地信息 |
|||
this.venuesInfo = res.data.venues_info |
|||
|
|||
this.filteredData.total = res.data.total |
|||
|
|||
this.filteredData.page++ |
|||
}, |
|||
|
|||
//日历选择相关 |
|||
// 获取日期范围 |
|||
getDateRange() { |
|||
const today = new Date(); // 获取今天的日期 |
|||
const startDate = new Date(today); // 复制今天的日期 |
|||
const endDate = new Date(today); // 复制今天的日期 |
|||
|
|||
// 计算 startDate：往前推 1 个月 |
|||
startDate.setMonth(today.getMonth() - 1); |
|||
|
|||
// 计算 endDate：往后推 1 个月 |
|||
endDate.setMonth(today.getMonth() + 2); |
|||
|
|||
// 将日期格式化为 YYYY-MM-DD |
|||
const formatDate = (date) => { |
|||
const year = date.getFullYear(); |
|||
const month = String(date.getMonth() + 1).padStart(2, '0'); |
|||
const day = String(date.getDate()).padStart(2, '0'); |
|||
return `${year}-${month}-${day}`; |
|||
}; |
|||
|
|||
// 更新 data 中的 startDate 和 endDate |
|||
this.startDate = formatDate(startDate); |
|||
this.endDate = formatDate(endDate); |
|||
console.log([this.startDate, this.endDate]) |
|||
}, |
|||
//设置日期打点 |
|||
async setCalendarSelected() { |
|||
//获取当前月份 |
|||
let month = new Date().getMonth() + 1; |
|||
|
|||
let res = await commonApi.getMonthDate({ |
|||
month: month |
|||
}) |
|||
if (res.code != 1) { |
|||
//提示 |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: 'none', |
|||
duration: 2000 |
|||
}) |
|||
return |
|||
} |
|||
this.calendarSelected = [] |
|||
res.data.forEach((v, k) => { |
|||
this.calendarSelected.push({ |
|||
date: v.date, |
|||
}) |
|||
}) |
|||
|
|||
// this.calendarSelected = [ |
|||
// { |
|||
// date: '2025-04-07', |
|||
// }, |
|||
// { |
|||
// date: '2025-04-08', |
|||
// }, |
|||
// { |
|||
// date: '2025-04-09', |
|||
// } |
|||
// ] |
|||
}, |
|||
//日历选择 |
|||
changeCalendar(e) { |
|||
console.log('日历', e) |
|||
this.show_calendar = false |
|||
this.loadData() |
|||
this.filteredData.schedule_date = e.fulldate |
|||
this.getList() |
|||
}, |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.main_box { |
|||
background: #292929; |
|||
} |
|||
|
|||
//自定义导航栏 |
|||
.navbar_section { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
background: #292929; |
|||
|
|||
.title { |
|||
padding: 40rpx 0rpx; |
|||
|
|||
/* 小程序端样式 */ |
|||
// #ifdef MP-WEIXIN |
|||
padding: 80rpx 0rpx; |
|||
// #endif |
|||
|
|||
font-size: 30rpx; |
|||
color: #fff; |
|||
} |
|||
} |
|||
|
|||
.main_section { |
|||
min-height: 100vh; |
|||
background: #292929 100%; |
|||
padding-top: 40rpx; |
|||
padding-bottom: 150rpx; |
|||
font-size: 24rpx; |
|||
color: #FFFFFF; |
|||
|
|||
.section_1 { |
|||
background: #333333 100%; |
|||
width: 100%; |
|||
padding: 30rpx 28rpx; |
|||
padding-bottom: 15rpx; |
|||
|
|||
.ul { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
|
|||
.li { |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
align-items: center; |
|||
gap: 10rpx; |
|||
|
|||
text { |
|||
font-size: 24rpx; |
|||
color: #FFFFFF; |
|||
text-align: center; |
|||
} |
|||
|
|||
text:nth-child(2) { |
|||
width: 44rpx; |
|||
height: 44rpx; |
|||
} |
|||
|
|||
text:nth-child(3) { |
|||
width: 8rpx; |
|||
height: 8rpx; |
|||
} |
|||
|
|||
.today { |
|||
border-radius: 50%; |
|||
background: #29D3B4; |
|||
text-align: center; |
|||
line-height: 42rpx; |
|||
} |
|||
|
|||
.select_plan { |
|||
background: #F59A23; |
|||
border-radius: 50%; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.btn { |
|||
margin-top: 20rpx; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
color: #A4ADB3; |
|||
} |
|||
} |
|||
|
|||
.section_2 { |
|||
margin-top: 30rpx; |
|||
padding: 0 20rpx; |
|||
color: #fff; |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 20rpx; |
|||
|
|||
.item_box { |
|||
width: 45%; |
|||
|
|||
.fui-filter__item { |
|||
display: flex; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.section_3 { |
|||
margin-top: 36rpx; |
|||
color: #fff; |
|||
font-size: 24rpx; |
|||
|
|||
.ul { |
|||
padding: 0 26rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 30rpx; |
|||
|
|||
.li { |
|||
position: relative; |
|||
border-radius: 22rpx; |
|||
background: #434544 100%; |
|||
padding: 14rpx 0; |
|||
padding-bottom: 30rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
|
|||
.top_box { |
|||
padding: 20rpx 30rpx; |
|||
|
|||
.center_box { |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 10rpx; |
|||
|
|||
view {} |
|||
} |
|||
|
|||
.right_box { |
|||
.tag { |
|||
position: absolute; |
|||
top: 0rpx; |
|||
right: 0rpx; |
|||
padding: 10rpx; |
|||
width: 102rpx; |
|||
text-align: center; |
|||
font-size: 24rpx; |
|||
border-bottom-left-radius: 20rpx; |
|||
border-top-right-radius: 20rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.bottom_box { |
|||
border-top: 1px dashed #F2F2F2; |
|||
padding: 26rpx 16rpx 0 26rpx; |
|||
|
|||
.hint { |
|||
color: #D7D7D7; |
|||
} |
|||
|
|||
.list_box { |
|||
margin-top: 22rpx; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
|
|||
.list { |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 14rpx; |
|||
|
|||
.itme { |
|||
image { |
|||
width: 48rpx; |
|||
height: 48rpx; |
|||
border-radius: 50%; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.btn { |
|||
border: 1px solid #FAD04D; |
|||
border-radius: 10rpx; |
|||
background: #434544; |
|||
color: #FAD04D; |
|||
width: 110rpx; |
|||
height: 60rpx; |
|||
line-height: 55rpx; |
|||
text-align: center; |
|||
font-size: 24rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
.isbtn { |
|||
border: 1px solid #FAD04D; |
|||
border-radius: 10rpx; |
|||
background: #434544; |
|||
color: #FAD04D; |
|||
width: 110rpx; |
|||
height: 60rpx; |
|||
line-height: 55rpx; |
|||
text-align: center; |
|||
font-size: 24rpx; |
|||
position: absolute; |
|||
bottom: 20rpx; |
|||
right: 15rpx; |
|||
} |
|||
</style> |
|||
@ -1,407 +0,0 @@ |
|||
<!--发布作业--> |
|||
<template> |
|||
<view class="main_section"> |
|||
<fui-form class="formData" ref="form"> |
|||
<view class="radio_input"> |
|||
<fui-form-item label="发布类型" asterisk> |
|||
<fui-radio-group name="radio" v-model="formData.type" @change="changeType"> |
|||
<view class="fui-list__item"> |
|||
<fui-label> |
|||
<view class="fui-align__center"> |
|||
<fui-radio value="1" checked></fui-radio> |
|||
<text class="fui-text">班级作业</text> |
|||
</view> |
|||
</fui-label> |
|||
<fui-label :margin="['0','0','0','40rpx']"> |
|||
<view class="fui-align__center"> |
|||
<fui-radio value="2"></fui-radio> |
|||
<text class="fui-text">学员作业</text> |
|||
</view> |
|||
</fui-label> |
|||
</view> |
|||
</fui-radio-group> |
|||
</fui-form-item> |
|||
|
|||
</view> |
|||
|
|||
<view class="radio_input"> |
|||
<fui-form-item label="作业类型" asterisk> |
|||
<fui-radio-group name="radio" v-model="formData.content_type" @change="changeContentType"> |
|||
<view class="fui-list__item"> |
|||
<fui-label> |
|||
<view class="fui-align__center"> |
|||
<fui-radio value="1" checked></fui-radio> |
|||
<text class="fui-text">图片作业</text> |
|||
</view> |
|||
</fui-label> |
|||
<fui-label :margin="['0','0','0','40rpx']"> |
|||
<view class="fui-align__center"> |
|||
<fui-radio value="2"></fui-radio> |
|||
<text class="fui-text">视频作业</text> |
|||
</view> |
|||
</fui-label> |
|||
</view> |
|||
</fui-radio-group> |
|||
</fui-form-item> |
|||
|
|||
</view> |
|||
|
|||
<view v-if="formData.type == 1"> |
|||
<fui-input required label="班级" borderTop placeholder="请选择班级" v-model="formData.classes_id_name" |
|||
@click="show_class=true"></fui-input> |
|||
<fui-picker layer="1" :linkage="true" :options="options_class_arr" :show="show_class" @change="changeClass" |
|||
@cancel="show_class=false"></fui-picker> |
|||
</view> |
|||
|
|||
<view v-if="formData.type != 1"> |
|||
<fui-input required label="学员" borderTop placeholder="请选择学员" v-model="formData.students_ids_name" |
|||
@click="show_student=true"></fui-input> |
|||
<!--下拉多选--> |
|||
<fui-select |
|||
:show="show_student" |
|||
:options="options_student_arr" |
|||
title="请选择学员" |
|||
multiple |
|||
isReverse |
|||
checkboxColor="#FFC529" |
|||
btnBackground="#FFC529" |
|||
btnColor="#1A1D26" |
|||
closeColor="#6D758A" |
|||
@confirm="changeStudent" |
|||
@close="show_student=false"> |
|||
</fui-select> |
|||
|
|||
</view> |
|||
|
|||
<view> |
|||
<fui-input required label="课程" borderTop placeholder="请选择课程" v-model="formData.course_id_name" |
|||
@click="show_course=true"></fui-input> |
|||
<fui-picker |
|||
layer="1" |
|||
:linkage="true" |
|||
:options="options_course_arr" :show="show_course" @change="changeCourse" |
|||
@cancel="show_course=false"></fui-picker> |
|||
</view> |
|||
|
|||
<view> |
|||
<fui-textarea required flexStart label="作业" placeholder="请输入内容" v-model="formData.description"></fui-textarea> |
|||
</view> |
|||
|
|||
<view class="submet_btn" @click="submetForm">提交</view> |
|||
|
|||
</fui-form> |
|||
|
|||
<!--吸顶消息提示--> |
|||
<fui-message ref="msg" :background="`#ff2b2b`"></fui-message> |
|||
<!-- 底部导航--> |
|||
<AQTabber/> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import memberApi from '@/api/member.js'; |
|||
import AQTabber from "@/components/AQ/AQTabber.vue" |
|||
import apiRoute from '@/api/apiRoute.js'; |
|||
//校验规则 |
|||
const rules = [ |
|||
// { |
|||
// name: "classes_id_name", |
|||
// rule: ["required"], |
|||
// msg: ["请选择班级"] |
|||
// }, |
|||
{ |
|||
name: "course_id_name", |
|||
rule: ["required"], |
|||
msg: ["请选择课程"] |
|||
}, |
|||
{ |
|||
name: "description", |
|||
rule: ["required"], |
|||
msg: ["请输入作业内容"] |
|||
}, |
|||
]; |
|||
export default { |
|||
components: { |
|||
AQTabber, |
|||
}, |
|||
data() { |
|||
return { |
|||
show_class:false, |
|||
show_course:false, |
|||
show_student:false, |
|||
|
|||
|
|||
//班级可选值列表 |
|||
options_class_arr:[ |
|||
// { value: 1, text: '班级1' }, |
|||
], |
|||
//课程可选值列表 |
|||
options_course_arr:[ |
|||
// { value: 1, text: '课程1' }, |
|||
], |
|||
//学员可选值列表 |
|||
options_student_arr:[ |
|||
// { |
|||
// text: '标签3', |
|||
// value: '3', |
|||
// checked: false,//是否选中 |
|||
// } |
|||
], |
|||
|
|||
|
|||
//表单数据 |
|||
formData: { |
|||
type: '1',//作业类型(单选)|1班级,2学员 |
|||
course_id: '',//课程id(下拉) |
|||
course_id_name: '',//课程id(中文名字) |
|||
|
|||
content_type: '1',//作业类型(单选)|1图片,2视频 |
|||
description: '',//文字作业内容 |
|||
|
|||
class_id: '',//班级id(下拉) |
|||
classes_id_name: '',//班级id(中文名字) |
|||
|
|||
student_id: '',//学员id 逗号拼接 |
|||
students_ids_name:'',//学员id数组(中文名字) |
|||
} |
|||
} |
|||
}, |
|||
onLoad() { |
|||
|
|||
}, |
|||
onShow() { |
|||
this.init() |
|||
}, |
|||
methods: { |
|||
//初始化 |
|||
async init() { |
|||
// 获取班级-学员二级联动(用来获取班级列表) |
|||
this.getClassesList() |
|||
// 全部课程名称列表 |
|||
this.getCoursesList() |
|||
// 学员列表 |
|||
this.getStudentList() |
|||
}, |
|||
|
|||
//获取班级列表 |
|||
async getClassesList(){ |
|||
let res = await apiRoute.jlGetClassesList({}) |
|||
if(res.code != 1){ |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
this.options_class_arr = [] |
|||
res.data.forEach((v,k)=>{ |
|||
this.options_class_arr.push({ |
|||
text: v.class_name, |
|||
value: v.id, |
|||
}) |
|||
}) |
|||
}, |
|||
//获取课程列表 |
|||
async getCoursesList(){ |
|||
let res = await apiRoute.jlGetCoursesList({}) |
|||
if(res.code != 1){ |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
|
|||
this.options_course_arr = [] |
|||
res.data.forEach((v,k)=>{ |
|||
this.options_course_arr.push({ |
|||
text: v.course_name, |
|||
value: v.id, |
|||
}) |
|||
}) |
|||
}, |
|||
|
|||
//获取学员列表 |
|||
async getStudentList() { |
|||
let res = await apiRoute.jlGetStudentList({}) |
|||
if (res.code != 1) { |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
|
|||
this.options_student_arr = [] |
|||
res.data.forEach((v, k) => { |
|||
this.options_student_arr.push({ |
|||
text: v.name, |
|||
value: v.id, |
|||
checked: false,//是否选中 |
|||
}) |
|||
}) |
|||
}, |
|||
|
|||
|
|||
//监听选择器-班级 |
|||
changeClass(e) { |
|||
console.log('选择器-班级', e); |
|||
this.formData.class_id = e.value; // 更新 class_id |
|||
this.formData.classes_id_name = e.text; // 更新 class_name |
|||
this.show_class = false; // 关闭选择器 |
|||
}, |
|||
//监听选择器-课程 |
|||
changeCourse(e) { |
|||
console.log('选择器-课程', e); |
|||
this.formData.course_id = e.value; // 更新 course_id |
|||
this.formData.course_id_name = e.text; // 更新 course_name |
|||
this.show_course = false; // 关闭选择器 |
|||
}, |
|||
//监听选择器-学员 |
|||
changeStudent(e) { |
|||
console.log('选择器-学员', e); |
|||
let id_arr = [] |
|||
let name_arr = [] |
|||
e.options.forEach((v,k)=>{ |
|||
id_arr.push(v.value) |
|||
name_arr.push(v.text) |
|||
}) |
|||
//数组转字符 |
|||
this.formData.student_id = id_arr.join(',') |
|||
this.formData.students_ids_name = name_arr.join(',') |
|||
this.show_student = false; // 关闭选择器 |
|||
}, |
|||
|
|||
//监听选择器-发布类型 |
|||
changeType(e) { |
|||
console.log('选择器-作业类型', e); |
|||
this.formData.type = e.detail.value; // 更新 type |
|||
|
|||
//1=班级作业 |
|||
if(e.detail.value == 1){ |
|||
//清空学员选择信息 |
|||
this.formData.student_id = '' |
|||
this.formData.students_ids_name = '' |
|||
}else{ |
|||
// 2=学生作业 |
|||
this.formData.class_id = '' |
|||
this.formData.classes_id_name = '' |
|||
} |
|||
}, |
|||
|
|||
//监听选择器-作业类型 |
|||
changeContentType(e) { |
|||
console.log('选择器-作业类型', e); |
|||
this.formData.content_type = e.detail.value; // 更新 type |
|||
}, |
|||
|
|||
//表单验证 |
|||
async validatorForm(data) { |
|||
let res = await this.$refs.form.validator(data, rules) |
|||
return res |
|||
}, |
|||
|
|||
//吸顶消息意识 |
|||
showMsg(msg) { |
|||
let options = {} |
|||
//text值可不传 |
|||
options.text = msg |
|||
this.$refs.tips.show(options) |
|||
}, |
|||
|
|||
//发布作业 |
|||
async submetForm(){ |
|||
let data = {...this.formData} |
|||
console.log('提交',data) |
|||
let vf = await this.validatorForm(data)//表单验证 |
|||
|
|||
|
|||
if(data.type == 1){ |
|||
//班级作业 |
|||
if(!data.class_id){ |
|||
this.showMsg('请选择班级') |
|||
return |
|||
} |
|||
}else{ |
|||
//学生作业 |
|||
if(!data.student_id){ |
|||
this.showMsg('请选择学员') |
|||
return |
|||
} |
|||
} |
|||
|
|||
|
|||
if(!vf.isPassed){ |
|||
console.log('验证',vf) |
|||
return |
|||
} |
|||
|
|||
//发布作业 |
|||
let res = await apiRoute.jlPublishJob(data) |
|||
if (res.code != 1){ |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: 'success' |
|||
}) |
|||
//延迟1s |
|||
setTimeout(() => { |
|||
//关闭当前页跳转新页面 |
|||
uni.redirectTo({ |
|||
url: '/pages/coach/home/index' |
|||
}) |
|||
}, 1000) |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
|
|||
.main_section{ |
|||
min-height: 100vh; |
|||
background: #292929 100%; |
|||
padding: 0 24rpx; |
|||
padding-top: 40rpx; |
|||
padding-bottom: 150rpx; |
|||
font-size: 28rpx; |
|||
.formData{ |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 40rpx; |
|||
.radio_input{ |
|||
.fui-form__item-wrap{ |
|||
border-radius: 8rpx !important; |
|||
} |
|||
.fui-list__item{ |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
} |
|||
.submet_btn{ |
|||
margin: 0 auto; |
|||
margin-top: 40rpx; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
background-color: #29d3b4; |
|||
border-radius: 8rpx; |
|||
|
|||
width: 648rpx; |
|||
height: 88rpx; |
|||
color: rgba(255,255,255,1); |
|||
font-size: 32rpx; |
|||
} |
|||
} |
|||
|
|||
|
|||
|
|||
} |
|||
|
|||
|
|||
</style> |
|||
@ -1,836 +0,0 @@ |
|||
<!--作业列表--> |
|||
<template> |
|||
<view class="main_section"> |
|||
|
|||
<scroll-view class="section_3" scroll-y="true" :lower-threshold="lowerThreshold" @scrolltolower="loadMoreData" |
|||
style="height: 80vh;"> |
|||
<view class="ul"> |
|||
<view class="li" v-for="(v,k) in tableList" :key="k" @click="openViewWorkDetails(v)"> |
|||
<!-- <view class="left_box"> |
|||
<view class="date_box"> |
|||
<text>{{v.wc_count}}</text> |
|||
<text>/</text> |
|||
<text>{{v.student_count}}</text> |
|||
</view> |
|||
<view class="ratio"> |
|||
完成率：{{v.rate}}% |
|||
</view> |
|||
</view> --> |
|||
<view class="center_box"> |
|||
<view>班级：{{v.class_name}}</view> |
|||
<view>时间：{{v.create_time}}</view> |
|||
<view>课程：{{v.course_name}} |
|||
</view> |
|||
</view> |
|||
<view class="right_box"> |
|||
<view class="tag" v-if="v.status == 1" style="background:#1cd188;">未提交</view> |
|||
<view class="tag" v-if="v.status == 2" style="background:#1cd188;">已提交</view> |
|||
<view class="tag" v-if="v.status == 3" style="background:#1cd188;">待批改</view> |
|||
<view class="tag" v-if="v.status == 4" style="background:#1cd188;">已批改</view> |
|||
|
|||
</view> |
|||
</view> |
|||
</view> |
|||
</scroll-view> |
|||
|
|||
<!-- 底部发布作业按钮 --> |
|||
<view class="publish-btn" @click="openPublishPopup"> |
|||
<text class="btn-text">发布作业</text> |
|||
</view> |
|||
|
|||
<!-- 底部导航--> |
|||
<AQTabber /> |
|||
|
|||
<!-- 发布作业弹窗 --> |
|||
<uni-popup ref="publishPopup" type="center"> |
|||
<view class="popup-content"> |
|||
<view class="popup-title">发布作业</view> |
|||
<!-- |
|||
<view class="form-item"> |
|||
<text class="form-label">类型</text> |
|||
<input class="form-input" type="number" v-model="formData.type" placeholder="请输入类型" /> |
|||
</view> |
|||
--> |
|||
<view class="form-item"> |
|||
<text class="form-label">班级</text> |
|||
<!-- <input class="form-input" type="number" v-model="formData.class_id" placeholder="请输入班级ID" /> --> |
|||
|
|||
<picker mode="selector" :range="class_id_options" range-key="name" @change="handleClassChange" |
|||
class="form-picker"> |
|||
<view v-if="selectedClassName" class="picker-text">{{ selectedClassName }}</view> |
|||
<view v-else class="picker-placeholder">请选择班级</view> |
|||
</picker> |
|||
</view> |
|||
|
|||
|
|||
<view class="form-item"> |
|||
<text class="form-label">课程</text> |
|||
<!-- <input class="form-input" type="number" v-model="formData.course_id" placeholder="请输入课程" /> --> |
|||
|
|||
<picker mode="selector" :range="course_list" range-key="name" @change="handleCourseChange" |
|||
class="form-picker"> |
|||
<view v-if="selectedCourseName" class="picker-text">{{ selectedCourseName }}</view> |
|||
<view v-else class="picker-placeholder">请选择课程</view> |
|||
</picker> |
|||
|
|||
</view> |
|||
|
|||
<view class="form-item"> |
|||
<text class="form-label">学生</text> |
|||
<!-- <input class="form-input" type="number" v-model="formData.student_id" placeholder="请输入学生ID" /> --> |
|||
<picker mode="selector" :range="student_list" range-key="name" @change="handleStudentChange" |
|||
class="form-picker"> |
|||
<view v-if="selectedStudentName" class="picker-text">{{ selectedStudentName }}</view> |
|||
<view v-else class="picker-placeholder">请选择学生</view> |
|||
</picker> |
|||
</view> |
|||
|
|||
<view class="form-item"> |
|||
<text class="form-label">作业描述</text> |
|||
<textarea class="form-textarea" v-model="formData.description" placeholder="请输入作业描述" /> |
|||
</view> |
|||
|
|||
<!-- <view class="form-item"> |
|||
<text class="form-label">内容类型</text> |
|||
<picker class="form-picker" :value="contentTypeIndex" :range="contentTypes" |
|||
@change="contentTypeChange"> |
|||
<view class="picker-text">{{contentTypes[contentTypeIndex]}}</view> |
|||
</picker> |
|||
</view> --> |
|||
|
|||
<!-- 根据内容类型显示不同的上传控件 --> |
|||
<!-- 图片类型 --> |
|||
<!-- <view class="form-item" v-if="formData.content_type === '1'"> |
|||
<text class="form-label">上传图片</text> |
|||
<view class="upload-container"> |
|||
<view class="image-preview" v-if="uploadedFiles.image"> |
|||
<image class="preview-image" :src="uploadedFiles.image" mode="aspectFill"></image> |
|||
<view class="delete-btn" @click="deleteFile('image')"> |
|||
<text class="delete-icon">×</text> |
|||
</view> |
|||
</view> |
|||
<view class="upload-btn" v-if="!uploadedFiles.image" @click="chooseFile('image')"> |
|||
<text class="upload-icon">+</text> |
|||
<text class="upload-text">上传图片</text> |
|||
</view> |
|||
</view> |
|||
</view> --> |
|||
|
|||
<!-- 视频类型 --> |
|||
<!-- <view class="form-item" v-if="formData.content_type === '2'"> |
|||
<text class="form-label">上传视频</text> |
|||
<view class="upload-container"> |
|||
<view class="video-preview" v-if="uploadedFiles.video"> |
|||
<video class="preview-video" :src="uploadedFiles.video" controls></video> |
|||
<view class="delete-btn" @click="deleteFile('video')"> |
|||
<text class="delete-icon">×</text> |
|||
</view> |
|||
</view> |
|||
<view class="upload-btn" v-if="!uploadedFiles.video" @click="chooseFile('video')"> |
|||
<text class="upload-icon">+</text> |
|||
<text class="upload-text">上传视频</text> |
|||
</view> |
|||
</view> |
|||
</view> --> |
|||
|
|||
<!-- 文本类型 --> |
|||
<!-- <view class="form-item" v-if="formData.content_type === '3'"> |
|||
<text class="form-label">内容文本</text> |
|||
<textarea class="form-textarea" v-model="formData.content_text" placeholder="请输入内容文本" /> |
|||
</view> --> |
|||
|
|||
<view class="form-buttons"> |
|||
<button class="btn-cancel" @click="closePublishPopup">取消</button> |
|||
<button class="btn-submit" @click="submitForm">提交</button> |
|||
</view> |
|||
</view> |
|||
</uni-popup> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import memberApi from '@/api/member.js'; |
|||
import AQTabber from "@/components/AQ/AQTabber.vue" |
|||
import apiRoute from '@/api/apiRoute.js'; |
|||
|
|||
export default { |
|||
components: { |
|||
AQTabber, |
|||
}, |
|||
data() { |
|||
return { |
|||
loading: false, //加载状态 |
|||
lowerThreshold: 100, //距离底部多远触发 |
|||
isReachedBottom: false, //防止重复加载|true=不可加载|false=可加载 |
|||
|
|||
//筛选条件 |
|||
filteredData: { |
|||
page: 1, //当前页码 |
|||
limit: 10, //每页返回数据条数 |
|||
total: 10, //数据总条数 |
|||
}, |
|||
tableList: [], //数据列表 |
|||
|
|||
// 发布作业表单数据 |
|||
formData: { |
|||
class_id: '', |
|||
course_id: '', |
|||
student_id: '', |
|||
description: '', |
|||
}, |
|||
class_id_options: [ |
|||
|
|||
], |
|||
selectedClassName:'', |
|||
course_list:[], |
|||
selectedCourseName:'', |
|||
student_list:[], |
|||
selectedStudentName:'', |
|||
// 内容类型选择器 |
|||
contentTypes: ['图片', '视频', '文本'], |
|||
contentTypeIndex: 0, |
|||
|
|||
// 上传的文件 |
|||
uploadedFiles: { |
|||
image: '', |
|||
video: '' |
|||
}, |
|||
|
|||
// 模拟数据 |
|||
mockData: [] |
|||
} |
|||
}, |
|||
onLoad() { |
|||
|
|||
}, |
|||
onShow() { |
|||
this.init() |
|||
// this.getData() |
|||
}, |
|||
methods: { |
|||
handleClassChange(e) { |
|||
const index = e.detail.value; |
|||
const selectedClass = this.class_id_options[index]; |
|||
this.formData.class_id = selectedClass.id; |
|||
this.selectedClassName = selectedClass.name; |
|||
}, |
|||
|
|||
handleCourseChange(e) { |
|||
const index = e.detail.value; |
|||
const selectedCourse = this.course_list[index]; |
|||
this.formData.course_id = selectedCourse.id; |
|||
this.selectedCourseName = selectedCourse.name; |
|||
}, |
|||
handleStudentChange(e) { |
|||
const index = e.detail.value; |
|||
const selectedStudent = this.student_list[index]; |
|||
this.formData.student_id = selectedStudent.id; |
|||
this.selectedStudentName = selectedStudent.name; |
|||
}, |
|||
async getClassList() { |
|||
let params = { |
|||
status: 1, //班级状态(1开启 2关闭) |
|||
} |
|||
|
|||
let res = await apiRoute.common_getClassAll(params) |
|||
if (res.code != 1) { |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
console.log('班级列表', res.data) |
|||
let arr = [] |
|||
res.data.forEach((v, k) => { |
|||
arr.push({ |
|||
name: `${v.campus_name}-${v.class_name}`, |
|||
id: v.id, |
|||
}) |
|||
}) |
|||
this.class_id_options = arr |
|||
this.getCourseList() |
|||
}, |
|||
async getCourseList() { |
|||
|
|||
let res = await apiRoute.common_getCourseAll({}) |
|||
if (res.code != 1) { |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
let arr = [] |
|||
res.data.forEach((v, k) => { |
|||
arr.push({ |
|||
name: `${v.course_name}`, |
|||
id: v.id, |
|||
}) |
|||
}) |
|||
this.course_list = arr |
|||
this.getStudentList() |
|||
}, |
|||
async getStudentList() { |
|||
|
|||
let res = await apiRoute.jlGetStudentList({}) |
|||
if (res.code != 1) { |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
let arr = [] |
|||
res.data.forEach((v, k) => { |
|||
arr.push({ |
|||
name: `${v.name}`, |
|||
id: v.id, |
|||
}) |
|||
}) |
|||
this.student_list = arr |
|||
}, |
|||
|
|||
async init() { |
|||
this.getList() |
|||
}, |
|||
async getData() { |
|||
this.getClassList() |
|||
}, |
|||
|
|||
//加载更多(下一页) |
|||
loadMoreData() { |
|||
//判断是否加载 |
|||
if (!this.isReachedBottom) { |
|||
this.isReachedBottom = true; //设置为不可请求状态 |
|||
this.getList(); |
|||
} |
|||
}, |
|||
//重置为第一页 |
|||
async resetFilteredData() { |
|||
this.isReachedBottom = false; // 重置状态，以便下次触发加载更多 |
|||
|
|||
this.filteredData.page = 1 //当前页码 |
|||
this.filteredData.limit = 10 //每页返回数据条数 |
|||
this.filteredData.total = 10 //数据总条数 |
|||
}, |
|||
//获取列表 |
|||
async getList() { |
|||
this.loading = true |
|||
|
|||
let data = { |
|||
...this.filteredData |
|||
} |
|||
|
|||
//判断是否还有数据 |
|||
if ((this.filteredData.page - 1) * this.filteredData.limit >= this.filteredData.total) { |
|||
this.loading = false |
|||
uni.showToast({ |
|||
title: '暂无更多', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
|
|||
if (data.page == 1) { |
|||
this.tableList = [] |
|||
} |
|||
|
|||
let res = await memberApi.jsGetAssignmentsList(data) |
|||
this.loading = false |
|||
this.isReachedBottom = false; |
|||
if (res.code != 1) { |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
|
|||
this.tableList = this.tableList.concat(res.data.data); // 使用 concat 方法 将新数据追加到数组中 |
|||
|
|||
console.log('列表', this.tableList) |
|||
this.filteredData.total = res.data.total |
|||
this.filteredData.page++ |
|||
|
|||
this.getData() |
|||
}, |
|||
|
|||
//跳转页面-作业详情 |
|||
openViewWorkDetails(item) { |
|||
let id = item.id |
|||
this.$navigateTo({ |
|||
url: `/pages/coach/student/work_details?id=${id}` |
|||
}) |
|||
}, |
|||
|
|||
// 打开发布作业弹窗 |
|||
openPublishPopup() { |
|||
this.$refs.publishPopup.open() |
|||
}, |
|||
|
|||
// 关闭发布作业弹窗 |
|||
closePublishPopup() { |
|||
this.$refs.publishPopup.close() |
|||
}, |
|||
|
|||
// 内容类型选择器变化 |
|||
contentTypeChange(e) { |
|||
this.contentTypeIndex = e.detail.value |
|||
this.formData.content_type = String(parseInt(e.detail.value) + 1) |
|||
}, |
|||
|
|||
// 选择文件（图片或视频） |
|||
chooseFile(type) { |
|||
if (type === 'image') { |
|||
// 选择图片 |
|||
uni.chooseImage({ |
|||
count: 1, |
|||
sizeType: ['compressed'], |
|||
sourceType: ['album', 'camera'], |
|||
success: (res) => { |
|||
// 模拟上传 |
|||
uni.showLoading({ |
|||
title: '上传中...' |
|||
}) |
|||
|
|||
setTimeout(() => { |
|||
uni.hideLoading() |
|||
this.uploadedFiles.image = res.tempFilePaths[0] |
|||
|
|||
// 模拟上传成功 |
|||
uni.showToast({ |
|||
title: '图片上传成功', |
|||
icon: 'success' |
|||
}) |
|||
|
|||
// 设置内容文本为图片路径 |
|||
this.formData.content_text = res.tempFilePaths[0] |
|||
}, 1000) |
|||
} |
|||
}) |
|||
} else if (type === 'video') { |
|||
// 选择视频 |
|||
uni.chooseVideo({ |
|||
count: 1, |
|||
sourceType: ['album', 'camera'], |
|||
maxDuration: 60, |
|||
camera: 'back', |
|||
success: (res) => { |
|||
// 模拟上传 |
|||
uni.showLoading({ |
|||
title: '上传中...' |
|||
}) |
|||
|
|||
setTimeout(() => { |
|||
uni.hideLoading() |
|||
this.uploadedFiles.video = res.tempFilePath |
|||
|
|||
// 模拟上传成功 |
|||
uni.showToast({ |
|||
title: '视频上传成功', |
|||
icon: 'success' |
|||
}) |
|||
|
|||
// 设置内容文本为视频路径 |
|||
this.formData.content_text = res.tempFilePath |
|||
}, 1500) |
|||
} |
|||
}) |
|||
} |
|||
}, |
|||
|
|||
// 删除已上传的文件 |
|||
deleteFile(type) { |
|||
if (type === 'image') { |
|||
this.uploadedFiles.image = '' |
|||
this.formData.content_text = '' |
|||
} else if (type === 'video') { |
|||
this.uploadedFiles.video = '' |
|||
this.formData.content_text = '' |
|||
} |
|||
}, |
|||
|
|||
// 预览文件 |
|||
previewFile(type) { |
|||
if (type === 'image' && this.uploadedFiles.image) { |
|||
uni.previewImage({ |
|||
urls: [this.uploadedFiles.image] |
|||
}) |
|||
} |
|||
// 视频不需要额外预览，因为已经有视频播放器 |
|||
}, |
|||
|
|||
// 提交表单 |
|||
async submitForm() { |
|||
// 检查必填项 |
|||
if (!this.formData.class_id) { |
|||
uni.showToast({ |
|||
title: '请输入班级ID', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
|
|||
if (!this.formData.course_id) { |
|||
uni.showToast({ |
|||
title: '请输入课程ID', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
|
|||
if (!this.formData.description) { |
|||
uni.showToast({ |
|||
title: '请输入作业描述', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
|
|||
// 检查内容 |
|||
// if (this.formData.content_type === '1' && !this.uploadedFiles.image) { |
|||
// uni.showToast({ |
|||
// title: '请上传图片', |
|||
// icon: 'none' |
|||
// }) |
|||
// return |
|||
// } |
|||
|
|||
// if (this.formData.content_type === '2' && !this.uploadedFiles.video) { |
|||
// uni.showToast({ |
|||
// title: '请上传视频', |
|||
// icon: 'none' |
|||
// }) |
|||
// return |
|||
// } |
|||
|
|||
// if (this.formData.content_type === '3' && !this.formData.content_text) { |
|||
// uni.showToast({ |
|||
// title: '请输入内容文本', |
|||
// icon: 'none' |
|||
// }) |
|||
// return |
|||
// } |
|||
|
|||
|
|||
|
|||
let res = await apiRoute.jlPublishJob(this.formData) |
|||
if (res.code != 1) { |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
|
|||
|
|||
uni.showToast({ |
|||
title: '发布成功', |
|||
icon: 'success' |
|||
}) |
|||
|
|||
// 关闭弹窗 |
|||
this.closePublishPopup() |
|||
|
|||
// 重置表单 |
|||
this.formData = { |
|||
class_id: '', |
|||
course_id: '', |
|||
student_id: '', |
|||
description: '', |
|||
} |
|||
|
|||
this.init() |
|||
// this.contentTypeIndex = 0 |
|||
// this.uploadedFiles = { |
|||
// image: '', |
|||
// video: '' |
|||
// } |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.main_section { |
|||
min-height: 100vh; |
|||
background: #292929 100%; |
|||
padding: 0 24rpx; |
|||
padding-top: 40rpx; |
|||
padding-bottom: 150rpx; |
|||
font-size: 28rpx; |
|||
|
|||
.section_3 { |
|||
margin-top: 36rpx; |
|||
color: #fff; |
|||
font-size: 24rpx; |
|||
|
|||
.title_box { |
|||
display: flex; |
|||
flex-direction: column; |
|||
|
|||
.top_box { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
|
|||
text { |
|||
font-size: 30rpx; |
|||
} |
|||
} |
|||
|
|||
.line { |
|||
width: 90rpx; |
|||
height: 2px; |
|||
background: #29D3B4; |
|||
} |
|||
} |
|||
|
|||
.ul { |
|||
margin-top: 30rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 20rpx; |
|||
|
|||
.li { |
|||
position: relative; |
|||
border-radius: 22rpx; |
|||
background: #434544 100%; |
|||
padding: 14rpx 0; |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
.left_box { |
|||
margin-left: 28rpx; |
|||
width: 146rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 10rpx; |
|||
|
|||
.date_box { |
|||
display: flex; |
|||
font-size: 48rpx; |
|||
|
|||
text:nth-child(1) { |
|||
color: #29D3B4; |
|||
} |
|||
} |
|||
|
|||
.ratio { |
|||
color: #AAAAAA; |
|||
} |
|||
} |
|||
|
|||
.center_box { |
|||
margin-left: 52rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 10rpx; |
|||
} |
|||
|
|||
.right_box { |
|||
.tag { |
|||
position: absolute; |
|||
top: 0rpx; |
|||
right: 0rpx; |
|||
padding: 10rpx; |
|||
width: 102rpx; |
|||
text-align: center; |
|||
font-size: 24rpx; |
|||
border-bottom-left-radius: 20rpx; |
|||
border-top-right-radius: 20rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 发布作业按钮样式 |
|||
.publish-btn { |
|||
position: fixed; |
|||
bottom: 220rpx; |
|||
right: 40rpx; |
|||
width: 120rpx; |
|||
height: 120rpx; |
|||
background: #29D3B4; |
|||
border-radius: 50%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
box-shadow: 0 4rpx 20rpx rgba(41, 211, 180, 0.4); |
|||
z-index: 99; |
|||
|
|||
.btn-text { |
|||
color: #fff; |
|||
font-size: 26rpx; |
|||
text-align: center; |
|||
} |
|||
} |
|||
|
|||
// 弹窗内容样式 |
|||
.popup-content { |
|||
width: 650rpx; |
|||
background: #333; |
|||
border-radius: 20rpx; |
|||
padding: 30rpx; |
|||
max-height: 80vh; |
|||
overflow-y: auto; |
|||
|
|||
.popup-title { |
|||
font-size: 36rpx; |
|||
color: #fff; |
|||
text-align: center; |
|||
margin-bottom: 30rpx; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.form-item { |
|||
margin-bottom: 20rpx; |
|||
|
|||
.form-label { |
|||
display: block; |
|||
color: #fff; |
|||
font-size: 28rpx; |
|||
margin-bottom: 10rpx; |
|||
} |
|||
|
|||
.form-input, |
|||
.form-textarea, |
|||
.form-picker { |
|||
width: 100%; |
|||
background: #444; |
|||
border-radius: 10rpx; |
|||
padding: 16rpx; |
|||
color: #fff; |
|||
font-size: 28rpx; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.form-textarea { |
|||
height: 150rpx; |
|||
} |
|||
|
|||
.picker-text { |
|||
height: 60rpx; |
|||
line-height: 60rpx; |
|||
} |
|||
|
|||
// 上传控件样式 |
|||
.upload-container { |
|||
margin-top: 10rpx; |
|||
} |
|||
|
|||
.upload-btn { |
|||
width: 200rpx; |
|||
height: 200rpx; |
|||
background: #444; |
|||
border-radius: 10rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
border: 1px dashed #666; |
|||
|
|||
.upload-icon { |
|||
font-size: 60rpx; |
|||
color: #29D3B4; |
|||
line-height: 60rpx; |
|||
} |
|||
|
|||
.upload-text { |
|||
font-size: 24rpx; |
|||
color: #aaa; |
|||
margin-top: 10rpx; |
|||
} |
|||
} |
|||
|
|||
// 图片预览 |
|||
.image-preview { |
|||
position: relative; |
|||
width: 200rpx; |
|||
height: 200rpx; |
|||
border-radius: 10rpx; |
|||
overflow: hidden; |
|||
|
|||
.preview-image { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
|
|||
.delete-btn { |
|||
position: absolute; |
|||
top: 0; |
|||
right: 0; |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
background: rgba(0, 0, 0, 0.6); |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
|
|||
.delete-icon { |
|||
color: #fff; |
|||
font-size: 28rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 视频预览 |
|||
.video-preview { |
|||
position: relative; |
|||
width: 100%; |
|||
height: 300rpx; |
|||
border-radius: 10rpx; |
|||
overflow: hidden; |
|||
|
|||
.preview-video { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
|
|||
.delete-btn { |
|||
position: absolute; |
|||
top: 0; |
|||
right: 0; |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
background: rgba(0, 0, 0, 0.6); |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
|
|||
.delete-icon { |
|||
color: #fff; |
|||
font-size: 28rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.form-buttons { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
margin-top: 40rpx; |
|||
|
|||
button { |
|||
width: 45%; |
|||
height: 80rpx; |
|||
line-height: 80rpx; |
|||
border-radius: 40rpx; |
|||
font-size: 30rpx; |
|||
} |
|||
|
|||
.btn-cancel { |
|||
background: #555; |
|||
color: #fff; |
|||
} |
|||
|
|||
.btn-submit { |
|||
background: #29D3B4; |
|||
color: #fff; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,276 +0,0 @@ |
|||
<!--到课统计-详情--> |
|||
<template> |
|||
<view class="main_box"> |
|||
|
|||
<view class="main_section"> |
|||
|
|||
<scroll-view |
|||
class="section_3" |
|||
scroll-y="true" |
|||
:lower-threshold="lowerThreshold" |
|||
@scrolltolower="loadMoreData" |
|||
style="height: 90vh;" |
|||
> |
|||
<view class="ul"> |
|||
<view class="li" |
|||
v-for="(v,k) in courseList" |
|||
:key="k" |
|||
@click="openViewCourseInfo(v)" |
|||
> |
|||
<view class="left_box"> |
|||
<view class="date_box"> |
|||
<text>{{v.has_sign_count}}</text> |
|||
<text>/</text> |
|||
<text>{{v.students_count}}</text> |
|||
</view> |
|||
<view class="ratio"> |
|||
到课率：{{v.attendance_rate}}% |
|||
</view> |
|||
</view> |
|||
<view class="center_box"> |
|||
<view>班级：{{v.classes_name}}</view> |
|||
<view>时间：{{v.date_time}} {{v.time_slot ? v.time_slot.replace(",", " - ") : ""}}</view> |
|||
<view>课室：{{v.address}} |
|||
</view> |
|||
<view>课程：{{v.courses_name}} |
|||
</view> |
|||
</view> |
|||
<view class="right_box"> |
|||
<view v-if="!(['1','2'].includes(String(v.status)))" class="tag" style="background:#20CAAF;">未开始</view> |
|||
|
|||
<view v-if="v.status == 1" class="tag" style="background:#fad24e;">上课中</view> |
|||
<view v-if="v.status == 2" class="tag" style="background:#e2e2e2;">已结束</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</scroll-view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import memberApi from '@/api/member.js'; |
|||
import AQTabber from "@/components/AQ/AQTabber.vue" |
|||
|
|||
|
|||
export default { |
|||
components: { |
|||
AQTabber, |
|||
}, |
|||
data() { |
|||
return { |
|||
loading: false,//加载状态 |
|||
lowerThreshold: 100,//距离底部多远触发 |
|||
isReachedBottom: false,//防止重复加载|true=不可加载|false=可加载 |
|||
|
|||
//筛选条件 |
|||
filteredData: { |
|||
page: 1,//当前页码 |
|||
limit: 10,//每页返回数据条数 |
|||
total: 10,//数据总条数 |
|||
class_id: '',//班级id |
|||
}, |
|||
courseList:[],//课程列表 |
|||
} |
|||
}, |
|||
onLoad() { |
|||
}, |
|||
onShow(){ |
|||
this.init() |
|||
}, |
|||
methods: { |
|||
//初始化 |
|||
async init(){ |
|||
this.getCourseList() |
|||
}, |
|||
|
|||
//课程列表 .courseList |
|||
//加载更过(下一页) |
|||
loadMoreData() { |
|||
//判断是否加载 |
|||
if (!this.isReachedBottom) { |
|||
this.isReachedBottom = true;//设置为不可请求状态 |
|||
this.getCourseList(); |
|||
} |
|||
}, |
|||
//重置为第一页 |
|||
async loadData() { |
|||
this.isReachedBottom = false; // 重置状态，以便下次触发加载更多 |
|||
|
|||
this.filteredData.page = 1//当前页码 |
|||
this.filteredData.limit = 10//每页返回数据条数 |
|||
this.filteredData.total = 10//数据总条数 |
|||
}, |
|||
//教练端-获取课程列表 |
|||
async getCourseList(){ |
|||
|
|||
let data = {...this.filteredData} |
|||
data.class_id = this.class_id |
|||
|
|||
console.log(12123,this.courseList) |
|||
|
|||
if(data.page == 1){ |
|||
this.courseList = [] |
|||
} |
|||
|
|||
//判断是否还有数据 |
|||
if ((this.filteredData.page - 1) * this.filteredData.limit >= this.filteredData.total) { |
|||
this.loading = false |
|||
uni.showToast({ |
|||
title: '暂无更多', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
|
|||
let res = await memberApi.courseList(data) |
|||
this.loading = false |
|||
this.isReachedBottom = false; |
|||
if (res.code != 1) { |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
|
|||
let arr = [] |
|||
res.data.list.data.forEach((v,k)=>{ |
|||
let item = v |
|||
item.attendance_rate = (v.students_count && !isNaN(v.students_count) && v.students_count > 0) ? |
|||
parseFloat(((v.has_sign_count / v.students_count) * 100).toFixed(1)) : 0; |
|||
arr.push(item) |
|||
}) |
|||
|
|||
|
|||
|
|||
this.courseList = this.courseList.concat(res.data.list.data)// 使用 concat 方法 将新数据追加到数组中 |
|||
|
|||
this.filteredData.total = res.data.list.total |
|||
console.log('获取课程列表',this.courseList) |
|||
this.filteredData.page++ |
|||
|
|||
}, |
|||
|
|||
|
|||
//打开课程详情 |
|||
openViewCourseInfo(item){ |
|||
let id= item.id |
|||
this.$navigateTo({ |
|||
url: `/pages/coach/course/info_list?id=${id}` |
|||
}) |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
|
|||
.main_box{ |
|||
background: #292929 ; |
|||
} |
|||
|
|||
//自定义导航栏 |
|||
.navbar_section{ |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
background: #29d3b4; |
|||
.title{ |
|||
padding: 40rpx 0rpx; |
|||
|
|||
/* 小程序端样式 */ |
|||
// #ifdef MP-WEIXIN |
|||
padding: 80rpx 0rpx; |
|||
// #endif |
|||
|
|||
font-size: 30rpx; |
|||
color: #315d55; |
|||
} |
|||
} |
|||
|
|||
.main_section{ |
|||
min-height: 100vh; |
|||
background: #292929 100%; |
|||
padding: 0 24rpx; |
|||
padding-top: 32rpx; |
|||
padding-bottom: 150rpx; |
|||
font-size: 28rpx; |
|||
.section_3{ |
|||
color: #fff; |
|||
font-size: 24rpx; |
|||
.title_box{ |
|||
display: flex; |
|||
flex-direction: column; |
|||
.top_box{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
text{ |
|||
font-size: 30rpx; |
|||
} |
|||
} |
|||
.line{ |
|||
width: 90rpx; |
|||
height: 2px; |
|||
background: #29D3B4; |
|||
} |
|||
} |
|||
.ul{ |
|||
margin-top: 30rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 20rpx; |
|||
.li{ |
|||
position: relative; |
|||
border-radius: 22rpx; |
|||
background: #434544 100%; |
|||
padding: 14rpx 0; |
|||
display: flex; |
|||
align-items: center; |
|||
.left_box{ |
|||
margin-left: 28rpx; |
|||
width: 175rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 10rpx; |
|||
.date_box{ |
|||
display: flex; |
|||
font-size: 48rpx; |
|||
text:nth-child(1){ |
|||
color: #29D3B4; |
|||
} |
|||
} |
|||
.ratio{ |
|||
color: #AAAAAA; |
|||
} |
|||
} |
|||
.center_box{ |
|||
margin-left: 22rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 10rpx; |
|||
} |
|||
.right_box{ |
|||
.tag{ |
|||
position:absolute; |
|||
top: 0rpx; |
|||
right: 0rpx; |
|||
padding: 10rpx; |
|||
width: 102rpx; |
|||
text-align: center; |
|||
font-size: 24rpx; |
|||
border-bottom-left-radius: 20rpx; |
|||
border-top-right-radius: 20rpx; |
|||
} |
|||
|
|||
} |
|||
} |
|||
|
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
|
|||
</style> |
|||
@ -1,431 +0,0 @@ |
|||
<!--我的-首页--> |
|||
<template> |
|||
<view class="main_box"> |
|||
<view style="background:#29D3B4;"> |
|||
<!--用户信息--> |
|||
<view class="user_section"> |
|||
<view class="box"> |
|||
<view class="left" @click="openViewMyInfo()"> |
|||
<image class="pic" :src="$util.img(memberInfo.head_img)"></image> |
|||
<view class="name">{{memberInfo.name}}</view> |
|||
</view> |
|||
<view class="right"> |
|||
<view class="btn"></view> |
|||
<!-- <view class="btn">切换身份</view>--> |
|||
<!-- <view class="btn" @click="openViewArrivalStatistics()">到课率统计</view> --> |
|||
<!-- <view class="btn">到课率统计</view> --> |
|||
<view class="btn"></view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!--统计信息--> |
|||
<view class="count_section"> |
|||
<view class="main"> |
|||
<view class="course_box"> |
|||
<view class="top"> |
|||
<view class="item"> |
|||
<view class="num">{{statisticsInfo.courseNum}}</view> |
|||
<view class="intro">总授课数/节</view> |
|||
</view> |
|||
<view class="item"> |
|||
<view class="num">{{statisticsInfo.classNum}}</view> |
|||
<view class="intro">总授班级/个</view> |
|||
</view> |
|||
<view class="item"> |
|||
<view class="num">{{statisticsInfo.studentNum}}</view> |
|||
<view class="intro">总负责学员/名 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="bg_box bg_top"></view> |
|||
<view class="bg_box bg_bottom"></view> |
|||
</view> |
|||
</view> |
|||
|
|||
|
|||
|
|||
<view class="main_section"> |
|||
<view class="section_box"> |
|||
<view class="item" @click="openViewDueSoon()"> |
|||
<view>即将到期</view> |
|||
<view></view> |
|||
</view> |
|||
|
|||
<view class="item" @click="openViewSchoolingStatisticsReal()"> |
|||
<view>授课统计</view> |
|||
<view></view> |
|||
</view> |
|||
|
|||
<!-- <view class="item"> --> |
|||
<view class="item" @click="openViewMyAttendance()"> |
|||
<view>我的考勤</view> |
|||
<view></view> |
|||
</view> |
|||
|
|||
<!-- <view class="item"> --> |
|||
<view class="item" @click="openViewSchoolingStatistics()"> |
|||
<view>我的消息</view> |
|||
<view></view> |
|||
</view> |
|||
|
|||
<view class="item" @click="teachingResearchManagement()"> |
|||
<view>教研管理</view> |
|||
<view></view> |
|||
</view> |
|||
|
|||
<view class="item" @click="openServiceDetail()"> |
|||
<view>服务详情</view> |
|||
<view></view> |
|||
</view> |
|||
|
|||
<view class="item" @click="goCourseSchedule()"> |
|||
<view>课程安排</view> |
|||
<view></view> |
|||
</view> |
|||
|
|||
<view class="item" @click="my_contract()"> |
|||
<view>我的合同</view> |
|||
<view></view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="section_box"> |
|||
<!-- <view class="item" @click="openViewFeedback()"> |
|||
<view>意见反馈</view> |
|||
<view></view> |
|||
</view> --> |
|||
|
|||
<view class="item" @click="openViewSetUp()"> |
|||
<view>设置</view> |
|||
<view></view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 底部导航--> |
|||
<AQTabber /> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
// import memberApi from '@/api/member.js'; |
|||
import AQTabber from "@/components/AQ/AQTabber.vue" |
|||
import apiRoute from '@/api/apiRoute.js'; |
|||
|
|||
export default { |
|||
components: { |
|||
AQTabber, |
|||
}, |
|||
data() { |
|||
return { |
|||
memberInfo: {}, |
|||
statisticsInfo: [] |
|||
} |
|||
}, |
|||
onLoad() { |
|||
|
|||
}, |
|||
onShow() { |
|||
|
|||
this.init(); |
|||
}, |
|||
methods: { |
|||
async init() { |
|||
this.getStatistics() |
|||
}, |
|||
my_contract(){ |
|||
this.$navigateTo({ |
|||
url: '/pages/common/contract/my_contract' |
|||
}) |
|||
}, |
|||
//教练详情(个人信息详情) |
|||
async getMemberInfo() { |
|||
let res = await apiRoute.getPersonnelInfo({}) |
|||
if (res.code != 1) { |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
this.memberInfo = res.data |
|||
}, |
|||
|
|||
//获取统计个数 |
|||
async getStatistics() { |
|||
let res = await apiRoute.getStatisticsInfo({}) |
|||
if (res.code != 1) { |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
this.statisticsInfo = res.data |
|||
|
|||
this.getMemberInfo() |
|||
}, |
|||
|
|||
//打开到课率统计 |
|||
openViewArrivalStatistics() { |
|||
this.$navigateTo({ |
|||
url: '/pages/coach/my/arrival_statistics' |
|||
}) |
|||
}, |
|||
|
|||
//打开即将到期 |
|||
openViewDueSoon() { |
|||
this.$navigateTo({ |
|||
url: '/pages/coach/my/due_soon' |
|||
}) |
|||
}, |
|||
|
|||
//我的消息 |
|||
openViewSchoolingStatistics() { |
|||
this.$navigateTo({ |
|||
url: '/pages/common/my_message' |
|||
}) |
|||
}, |
|||
|
|||
//打开教研管理 |
|||
teachingResearchManagement() { |
|||
this.$navigateTo({ |
|||
url: '/pages/coach/my/teaching_management' |
|||
}) |
|||
}, |
|||
|
|||
//打开意见反馈 |
|||
openViewFeedback() { |
|||
this.$navigateTo({ |
|||
url: '/pages/common/feedback' |
|||
}) |
|||
}, |
|||
|
|||
//打开个人资料 |
|||
openViewMyInfo() { |
|||
this.$navigateTo({ |
|||
url: '/pages/coach/my/info' |
|||
}) |
|||
}, |
|||
|
|||
//打开设置 |
|||
openViewSetUp() { |
|||
this.$navigateTo({ |
|||
url: '/pages/coach/my/set_up' |
|||
}) |
|||
}, |
|||
|
|||
//跳转页面-我的考勤 |
|||
openViewMyAttendance() { |
|||
this.$navigateTo({ |
|||
url: `/pages/common/my_attendance` |
|||
}) |
|||
}, |
|||
|
|||
//打开服务详情 |
|||
openServiceDetail() { |
|||
this.$navigateTo({ |
|||
url: '/pages/coach/my/service_list' |
|||
}) |
|||
}, |
|||
|
|||
//打开授课统计（真实的授课统计页面） |
|||
openViewSchoolingStatisticsReal() { |
|||
this.$navigateTo({ |
|||
url: '/pages/coach/my/schooling_statistics' |
|||
}) |
|||
}, |
|||
|
|||
goCourseSchedule(){ |
|||
this.$navigateTo({ |
|||
url: '/pages/coach/schedule/schedule_table' |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.main_box { |
|||
background: #292929; |
|||
min-height: 28vh; |
|||
} |
|||
|
|||
//自定义导航栏 |
|||
.navbar_section { |
|||
border: 1px solid #29D3B4; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
background: #29D3B4; |
|||
|
|||
.title { |
|||
padding: 40rpx 0rpx; |
|||
|
|||
/* 小程序端样式 */ |
|||
// #ifdef MP-WEIXIN |
|||
padding: 80rpx 0rpx; |
|||
// #endif |
|||
|
|||
font-size: 30rpx; |
|||
color: #fff; |
|||
} |
|||
} |
|||
|
|||
//用户信息 |
|||
.user_section { |
|||
background-color: #29D3B4; |
|||
padding-top: 58rpx; |
|||
padding-bottom: 42rpx; |
|||
color: #fff; |
|||
font-size: 28rpx; |
|||
|
|||
.box { |
|||
padding-left: 19rpx; |
|||
padding-right: 29rpx; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
gap: 15rpx; |
|||
|
|||
.left { |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 20rpx; |
|||
|
|||
.pic { |
|||
width: 144rpx; |
|||
height: 144rpx; |
|||
border-radius: 50%; |
|||
} |
|||
|
|||
.name { |
|||
font-size: 28rpx; |
|||
} |
|||
} |
|||
|
|||
.right { |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 20rpx; |
|||
|
|||
.btn { |
|||
min-height: 28rpx; |
|||
font-size: 28rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
//统计信息 |
|||
.count_section { |
|||
position: relative; |
|||
|
|||
.main { |
|||
position: relative; |
|||
z-index: 2; |
|||
padding: 0rpx 24rpx; |
|||
display: flex; |
|||
justify-content: center; |
|||
|
|||
.course_box { |
|||
padding: 42rpx 28rpx; |
|||
width: 692rpx; |
|||
border-radius: 20rpx; |
|||
background-color: #fff; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 32rpx; |
|||
|
|||
.top { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
|
|||
.item { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
gap: 12rpx; |
|||
|
|||
.num { |
|||
color: #29D3B4; |
|||
font-size: 56rpx; |
|||
} |
|||
|
|||
.intro { |
|||
color: #AAAAAA; |
|||
font-size: 24rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.bottom { |
|||
font-size: 24rpx; |
|||
color: #333333; |
|||
|
|||
text { |
|||
color: #29D3B4; |
|||
} |
|||
} |
|||
|
|||
} |
|||
} |
|||
|
|||
.bg_box { |
|||
z-index: 1; |
|||
width: 100%; |
|||
height: 150rpx; |
|||
} |
|||
|
|||
.bg_top { |
|||
position: absolute; |
|||
top: 0; |
|||
background-color: #29D3B4; |
|||
} |
|||
|
|||
.bg_bottom { |
|||
top: 50%; |
|||
position: absolute; |
|||
background-color: #292929; |
|||
} |
|||
} |
|||
|
|||
.main_section { |
|||
background: #292929 100%; |
|||
padding: 0 24rpx; |
|||
padding-top: 40rpx; |
|||
padding-bottom: 150rpx; |
|||
font-size: 24rpx; |
|||
color: #333333; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 22rpx; |
|||
|
|||
.section_box { |
|||
background: #fff; |
|||
border-radius: 16rpx; |
|||
padding: 6rpx 24rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
|
|||
.item { |
|||
padding: 24rpx 78rpx; |
|||
border-top: 1px solid #F2F2F2; |
|||
font-size: 28rpx; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
} |
|||
|
|||
.item:nth-child(1) { |
|||
border-top: 0; |
|||
} |
|||
|
|||
|
|||
} |
|||
|
|||
} |
|||
</style> |
|||
@ -1,497 +0,0 @@ |
|||
<!--我的考勤-详情--> |
|||
<template> |
|||
<view class="main_box"> |
|||
<fui-segmented-control |
|||
:values="optionTable" |
|||
type="text" |
|||
activeColor="#29d3b4" |
|||
color="#fff" |
|||
@click="segmented"> |
|||
</fui-segmented-control> |
|||
|
|||
<view class="main_section"> |
|||
<!--考勤--> |
|||
<scroll-view |
|||
class="section_1" |
|||
v-if="filteredData.type == '1'" |
|||
scroll-y="true" |
|||
:lower-threshold="lowerThreshold" |
|||
@scrolltolower="loadMoreData" |
|||
style="height: 100vh;" |
|||
> |
|||
<view class="ul"> |
|||
<view class="li"> |
|||
<view class="left"> |
|||
<image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png" model="aspectFill"></image> |
|||
</view> |
|||
<view class="right"> |
|||
<view class="content">篮球课</view> |
|||
<view class="content">考勤正常</view> |
|||
<view class="content">2025-01-01 00:00:00 - 2025-01-01 00:00:00</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="li"> |
|||
<view class="left"> |
|||
<image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png" model="aspectFill"></image> |
|||
</view> |
|||
<view class="right"> |
|||
<view class="content">篮球课</view> |
|||
<view class="content">考勤正常</view> |
|||
<view class="content">2025-01-01 00:00:00 - 2025-01-01 00:00:00</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="li"> |
|||
<view class="left"> |
|||
<image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png" model="aspectFill"></image> |
|||
</view> |
|||
<view class="right"> |
|||
<view class="content">篮球课</view> |
|||
<view class="content">考勤正常</view> |
|||
<view class="content">2025-01-01 00:00:00 - 2025-01-01 00:00:00</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="title_box">普通考勤</view> |
|||
<view class="subhead_box">请假</view> |
|||
<view class="subhead_box">2025-01-01 00:00:00 - 2505-01-01 00:00:00</view> |
|||
|
|||
<view class="ul"> |
|||
<view class="li"> |
|||
<view class="left"> |
|||
<image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png" model="aspectFill"></image> |
|||
</view> |
|||
<view class="right"> |
|||
<view class="content">普通考勤</view> |
|||
<view class="content">迟到</view> |
|||
<view class="content">2025-01-01 00:00:00 - 2025-01-01 00:00:00</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="li"> |
|||
<view class="left"> |
|||
<image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png" model="aspectFill"></image> |
|||
</view> |
|||
<view class="right"> |
|||
<view class="content">普通考勤</view> |
|||
<view class="content">早退</view> |
|||
<view class="content">2025-01-01 00:00:00 - 2025-01-01 00:00:00</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="li"> |
|||
<view class="left"> |
|||
<image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png" model="aspectFill"></image> |
|||
</view> |
|||
<view class="right"> |
|||
<view class="content">普通记录</view> |
|||
<view class="content">本周考勤情况：周一到周五均按时打卡，未请假，综合表现良好。 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
</scroll-view> |
|||
|
|||
<!--请假--> |
|||
<scroll-view |
|||
class="section_1" |
|||
v-if="filteredData.type == '2'" |
|||
scroll-y="true" |
|||
:lower-threshold="lowerThreshold" |
|||
@scrolltolower="loadMoreData" |
|||
style="height: 100vh;" |
|||
> |
|||
<view class="ul"> |
|||
<view class="li"> |
|||
<view class="left"> |
|||
<image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png" model="aspectFill"></image> |
|||
</view> |
|||
<view class="right"> |
|||
<view class="content">篮球课</view> |
|||
<view class="content">考勤正常</view> |
|||
<view class="content">2025-01-01 00:00:00 - 2025-01-01 00:00:00</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="li"> |
|||
<view class="left"> |
|||
<image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png" model="aspectFill"></image> |
|||
</view> |
|||
<view class="right"> |
|||
<view class="content">篮球课</view> |
|||
<view class="content">考勤正常</view> |
|||
<view class="content">2025-01-01 00:00:00 - 2025-01-01 00:00:00</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="li"> |
|||
<view class="left"> |
|||
<image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png" model="aspectFill"></image> |
|||
</view> |
|||
<view class="right"> |
|||
<view class="content">篮球课</view> |
|||
<view class="content">考勤正常</view> |
|||
<view class="content">2025-01-01 00:00:00 - 2025-01-01 00:00:00</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="title_box">普通考勤</view> |
|||
<view class="subhead_box">请假</view> |
|||
<view class="subhead_box">2025-01-01 00:00:00 - 2505-01-01 00:00:00</view> |
|||
|
|||
<view class="ul"> |
|||
<view class="li"> |
|||
<view class="left"> |
|||
<image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png" model="aspectFill"></image> |
|||
</view> |
|||
<view class="right"> |
|||
<view class="content">普通考勤</view> |
|||
<view class="content">迟到</view> |
|||
<view class="content">2025-01-01 00:00:00 - 2025-01-01 00:00:00</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="li"> |
|||
<view class="left"> |
|||
<image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png" model="aspectFill"></image> |
|||
</view> |
|||
<view class="right"> |
|||
<view class="content">普通考勤</view> |
|||
<view class="content">早退</view> |
|||
<view class="content">2025-01-01 00:00:00 - 2025-01-01 00:00:00</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="li"> |
|||
<view class="left"> |
|||
<image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png" model="aspectFill"></image> |
|||
</view> |
|||
<view class="right"> |
|||
<view class="content">普通记录</view> |
|||
<view class="content">本周考勤情况：周一到周五均按时打卡，未请假，综合表现良好。 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
</scroll-view> |
|||
|
|||
<!--异常--> |
|||
<scroll-view |
|||
class="section_1" |
|||
v-if="filteredData.type == '3'" |
|||
scroll-y="true" |
|||
:lower-threshold="lowerThreshold" |
|||
@scrolltolower="loadMoreData" |
|||
style="height: 100vh;" |
|||
> |
|||
<view class="ul"> |
|||
<view class="li"> |
|||
<view class="left"> |
|||
<image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png" model="aspectFill"></image> |
|||
</view> |
|||
<view class="right"> |
|||
<view class="content">篮球课</view> |
|||
<view class="content">考勤正常</view> |
|||
<view class="content">2025-01-01 00:00:00 - 2025-01-01 00:00:00</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="li"> |
|||
<view class="left"> |
|||
<image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png" model="aspectFill"></image> |
|||
</view> |
|||
<view class="right"> |
|||
<view class="content">篮球课</view> |
|||
<view class="content">考勤正常</view> |
|||
<view class="content">2025-01-01 00:00:00 - 2025-01-01 00:00:00</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="li"> |
|||
<view class="left"> |
|||
<image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png" model="aspectFill"></image> |
|||
</view> |
|||
<view class="right"> |
|||
<view class="content">篮球课</view> |
|||
<view class="content">考勤正常</view> |
|||
<view class="content">2025-01-01 00:00:00 - 2025-01-01 00:00:00</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="title_box">普通考勤</view> |
|||
<view class="subhead_box">请假</view> |
|||
<view class="subhead_box">2025-01-01 00:00:00 - 2505-01-01 00:00:00</view> |
|||
|
|||
<view class="ul"> |
|||
<view class="li"> |
|||
<view class="left"> |
|||
<image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png" model="aspectFill"></image> |
|||
</view> |
|||
<view class="right"> |
|||
<view class="content">普通考勤</view> |
|||
<view class="content">迟到</view> |
|||
<view class="content">2025-01-01 00:00:00 - 2025-01-01 00:00:00</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="li"> |
|||
<view class="left"> |
|||
<image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png" model="aspectFill"></image> |
|||
</view> |
|||
<view class="right"> |
|||
<view class="content">普通考勤</view> |
|||
<view class="content">早退</view> |
|||
<view class="content">2025-01-01 00:00:00 - 2025-01-01 00:00:00</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="li"> |
|||
<view class="left"> |
|||
<image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png" model="aspectFill"></image> |
|||
</view> |
|||
<view class="right"> |
|||
<view class="content">普通记录</view> |
|||
<view class="content">本周考勤情况：周一到周五均按时打卡，未请假，综合表现良好。 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
</scroll-view> |
|||
|
|||
<view class="section_btn"> |
|||
<view class="btn">请假</view> |
|||
</view> |
|||
|
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import marketApi from '@/api/market.js'; |
|||
import AQTabber from "@/components/AQ/AQTabber.vue" |
|||
|
|||
|
|||
export default { |
|||
components: { |
|||
AQTabber, |
|||
}, |
|||
data() { |
|||
return { |
|||
//tab切换 |
|||
optionTable: [ |
|||
{ |
|||
id: 1, |
|||
name: '考勤' |
|||
}, |
|||
{ |
|||
id: 2, |
|||
name: '请假' |
|||
}, |
|||
{ |
|||
id: 3, |
|||
name: '异常' |
|||
} |
|||
], |
|||
|
|||
loading:false,//加载状态 |
|||
lowerThreshold: 100,//距离底部多远触发 |
|||
isReachedBottom: false,//防止重复加载|true=不可加载|false=可加载 |
|||
|
|||
//筛选条件 |
|||
filteredData:{ |
|||
page:1,//当前页码 |
|||
limit:10,//每页返回数据条数 |
|||
total:10,//数据总条数 |
|||
type: '1',//1=考勤,2=请假,3=异常 |
|||
}, |
|||
tableList:[],//表格数据 |
|||
} |
|||
}, |
|||
onLoad(options) {}, |
|||
onShow(){ |
|||
this.init()//初始化 |
|||
}, |
|||
methods: { |
|||
//初始化 |
|||
async init(){ |
|||
await this.getList(); |
|||
}, |
|||
|
|||
//切换tag列表 |
|||
async segmented(e) { |
|||
//重置为第一页 |
|||
await this.resetFilteredData() |
|||
this.filteredData.type = e.id//1=考勤,2=请假,3=异常 |
|||
await this.getList() |
|||
}, |
|||
|
|||
//加载更多(下一页) |
|||
loadMoreData() { |
|||
//判断是否加载 |
|||
if (!this.isReachedBottom) { |
|||
this.isReachedBottom = true;//设置为不可请求状态 |
|||
this.getList(); |
|||
} |
|||
}, |
|||
//重置为第一页 |
|||
async resetFilteredData() { |
|||
this.isReachedBottom = false; // 重置状态，以便下次触发加载更多 |
|||
|
|||
this.filteredData.page = 1//当前页码 |
|||
this.filteredData.limit = 10//每页返回数据条数 |
|||
this.filteredData.total = 10//数据总条数 |
|||
}, |
|||
//获取列表 |
|||
async getList(){ |
|||
this.loading = true |
|||
|
|||
let data = {...this.filteredData} |
|||
|
|||
//判断是否还有数据 |
|||
if ((this.filteredData.page - 1) * this.filteredData.limit >= this.filteredData.total) { |
|||
this.loading = false |
|||
uni.showToast({ |
|||
title: '暂无更多', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
|
|||
if(data.page == 1){ |
|||
this.tableList = [] |
|||
} |
|||
|
|||
let res = await marketApi.myClient(data) |
|||
this.loading = false |
|||
this.isReachedBottom = false; |
|||
if (res.code != 1){ |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
|
|||
this.tableList = this.tableList.concat(res.data.list.data); // 使用 concat 方法 将新数据追加到数组中 |
|||
|
|||
console.log('列表',this.tableList) |
|||
this.filteredData.total = res.data.list.total |
|||
this.filteredData.page++ |
|||
|
|||
this.countArr = { |
|||
type_0:res.data.count[0], |
|||
type_1:res.data.count[1], |
|||
type_2:res.data.count[2], |
|||
type_3:res.data.count[3], |
|||
max_count:res.data.gh.max_count, |
|||
lq_count:res.data.gh.lq_count, |
|||
} |
|||
|
|||
}, |
|||
|
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
|
|||
.main_box{ |
|||
background: #292929 ; |
|||
} |
|||
|
|||
//自定义导航栏 |
|||
.navbar_section{ |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
background: #29d3b4; |
|||
.title{ |
|||
padding: 40rpx 0rpx; |
|||
|
|||
/* 小程序端样式 */ |
|||
// #ifdef MP-WEIXIN |
|||
padding: 80rpx 0rpx; |
|||
// #endif |
|||
|
|||
font-size: 30rpx; |
|||
color: #315d55; |
|||
} |
|||
} |
|||
|
|||
.main_section{ |
|||
min-height: 100vh; |
|||
background: #292929 100%; |
|||
padding: 0 24rpx; |
|||
padding-top: 32rpx; |
|||
padding-bottom: 150rpx; |
|||
font-size: 28rpx; |
|||
.section_1{ |
|||
color: #fff; |
|||
font-size: 28rpx; |
|||
.ul{ |
|||
margin-top: 23rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 24rpx; |
|||
.li{ |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 43rpx; |
|||
.left{ |
|||
image{ |
|||
width: 174rpx; |
|||
height: 174rpx; |
|||
border-radius: 24rpx; |
|||
background-color: #333333; |
|||
} |
|||
} |
|||
.right{ |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 18rpx; |
|||
.content{ |
|||
font-size: 24rpx; |
|||
} |
|||
.content:nth-child(1){ |
|||
font-size: 28rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.title_box{ |
|||
margin-top: 46rpx; |
|||
font-size: 28rpx; |
|||
} |
|||
.subhead_box{ |
|||
margin-top: 22rpx; |
|||
font-size: 24rpx; |
|||
} |
|||
} |
|||
|
|||
.section_btn{ |
|||
display: flex; |
|||
justify-content: center; |
|||
.btn{ |
|||
width: 722rpx; |
|||
height: 64rpx; |
|||
line-height: 64rpx; |
|||
border-radius: 8rpx; |
|||
background-color: rgba(32,202,175,1); |
|||
color: rgba(255,255,255,1); |
|||
font-size: 28rpx; |
|||
text-align: center; |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
|
|||
</style> |
|||
@ -1,870 +0,0 @@ |
|||
<!--服务详情页面--> |
|||
<template> |
|||
<view class="container"> |
|||
<view class="main-content"> |
|||
<!-- 加载状态 --> |
|||
<view v-if="loading" class="loading-container"> |
|||
<uni-load-more status="loading" content-text="加载中..."></uni-load-more> |
|||
</view> |
|||
|
|||
<!-- 服务记录列表 --> |
|||
<view v-else class="service-cards"> |
|||
<view class="service-card" v-for="(service, index) in serviceList" :key="index" @click="viewServiceDetail(service)"> |
|||
<!-- 服务预览图 --> |
|||
<view class="service-preview" v-if="service.preview_image_url"> |
|||
<image :src="getImageUrl(service.preview_image_url)" class="preview-image" mode="aspectFill"></image> |
|||
</view> |
|||
|
|||
<view class="card-content"> |
|||
<!-- 服务名称和状态 --> |
|||
<view class="card-header"> |
|||
<view class="service-name">{{ service.service_name }}</view> |
|||
<view class="service-status" :class="service.status === 1 ? 'status-active' : (service.status === 0 ? 'status-pending' : 'status-inactive')"> |
|||
{{ service.status === 1 ? '已完成' : (service.status === 0 ? '待处理' : '未知状态') }} |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 服务信息 --> |
|||
<view class="service-info"> |
|||
<view class="info-item" v-if="service.service_type"> |
|||
<text class="label">服务类型：</text> |
|||
<text class="value">{{ service.service_type }}</text> |
|||
</view> |
|||
<view class="info-item" v-if="service.description"> |
|||
<text class="label">服务描述：</text> |
|||
<text class="value">{{ service.description }}</text> |
|||
</view> |
|||
<view class="info-item" v-if="service.service_remark || service.status !== 1"> |
|||
<text class="label">服务结果：</text> |
|||
<view class="value-content" v-if="service.service_remark"> |
|||
<rich-text :nodes="formatRichText(service.service_remark)"></rich-text> |
|||
</view> |
|||
<text class="value placeholder" v-else-if="service.status !== 1">点击编辑服务结果</text> |
|||
</view> |
|||
<view class="info-item" v-if="service.feedback"> |
|||
<text class="label">家长反馈：</text> |
|||
<text class="value">{{ service.feedback }}</text> |
|||
</view> |
|||
<view class="info-item" v-if="service.score"> |
|||
<text class="label">家长评分：</text> |
|||
<text class="value score">{{ service.score }}分</text> |
|||
</view> |
|||
<view class="info-item"> |
|||
<text class="label">创建时间：</text> |
|||
<text class="value">{{ formatDate(service.created_at) }}</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 操作按钮 --> |
|||
<view class="card-actions" v-if="service.status !== 1"> |
|||
<button class="edit-btn" @click.stop="editServiceRemark(service)"> |
|||
<text class="iconfont icon-edit"></text> |
|||
编辑服务结果 |
|||
</button> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 箭头图标 --> |
|||
<view class="card-arrow"> |
|||
<text class="iconfont icon-arrow-right"></text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 空状态 --> |
|||
<view class="empty-state" v-if="!loading && serviceList.length === 0"> |
|||
<view class="empty-icon">📝</view> |
|||
<view class="empty-text">暂无服务记录</view> |
|||
</view> |
|||
|
|||
<!-- 底部加载更多 --> |
|||
<view v-if="hasMore && !loading && serviceList.length > 0" class="load-more"> |
|||
<uni-load-more :status="loadMoreStatus" @clickLoadMore="loadMore"></uni-load-more> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 编辑服务结果弹窗 --> |
|||
<view v-if="showEditModal" class="edit-modal" @click="closeEditModal"> |
|||
<view class="modal-content" @click.stop> |
|||
<view class="modal-header"> |
|||
<text class="modal-title">编辑服务结果</text> |
|||
<view class="modal-close" @click="closeEditModal"> |
|||
<text class="iconfont icon-close"></text> |
|||
</view> |
|||
</view> |
|||
<view class="modal-body"> |
|||
<view class="form-item"> |
|||
<text class="form-label">服务结果：</text> |
|||
|
|||
<!-- 富文本工具栏 --> |
|||
<view class="editor-toolbar"> |
|||
<view class="toolbar-group"> |
|||
<view class="tool-btn" :class="{ active: bold }" @click="toggleBold"> |
|||
<text class="tool-text">B</text> |
|||
</view> |
|||
<view class="tool-btn" :class="{ active: italic }" @click="toggleItalic"> |
|||
<text class="tool-text">I</text> |
|||
</view> |
|||
<view class="tool-btn" @click="insertBulletList"> |
|||
<text class="tool-text">•</text> |
|||
</view> |
|||
<view class="tool-btn" @click="insertNumberList"> |
|||
<text class="tool-text">1.</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 文本输入区域 --> |
|||
<textarea |
|||
class="form-textarea" |
|||
v-model="editForm.service_remark" |
|||
placeholder="请输入服务结果内容，支持简单的格式化文本" |
|||
maxlength="1000" |
|||
:show-confirm-bar="false" |
|||
@focus="onTextareaFocus" |
|||
@blur="onTextareaBlur"> |
|||
</textarea> |
|||
|
|||
<!-- 字数统计 --> |
|||
<view class="char-count">{{ editForm.service_remark.length }}/1000</view> |
|||
|
|||
<!-- 提示信息 --> |
|||
<view class="editor-tips"> |
|||
<text class="tip-text">支持基础格式：粗体、斜体、列表等</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="modal-footer"> |
|||
<button class="modal-btn cancel" @click="closeEditModal">取消</button> |
|||
<button class="modal-btn confirm" @click="saveServiceRemark" :disabled="saving"> |
|||
{{ saving ? '保存中...' : '保存' }} |
|||
</button> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import apiRoute from '@/common/axios.js'; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
loading: true, |
|||
serviceList: [], |
|||
currentPage: 1, |
|||
pageSize: 10, |
|||
hasMore: true, |
|||
loadMoreStatus: 'more', |
|||
showEditModal: false, |
|||
saving: false, |
|||
editForm: { |
|||
id: 0, |
|||
service_remark: '' |
|||
}, |
|||
// 富文本编辑状态 |
|||
bold: false, |
|||
italic: false, |
|||
textareaFocused: false |
|||
} |
|||
}, |
|||
onLoad() { |
|||
this.init(); |
|||
}, |
|||
onPullDownRefresh() { |
|||
this.refreshServiceList(); |
|||
}, |
|||
onReachBottom() { |
|||
if (this.hasMore && !this.loading) { |
|||
this.loadMore(); |
|||
} |
|||
}, |
|||
methods: { |
|||
async init() { |
|||
this.getServiceList(); |
|||
}, |
|||
|
|||
// 获取服务记录列表 |
|||
async getServiceList(refresh = false) { |
|||
if (refresh) { |
|||
this.currentPage = 1; |
|||
this.hasMore = true; |
|||
this.serviceList = []; |
|||
} |
|||
|
|||
this.loading = true; |
|||
this.loadMoreStatus = 'loading'; |
|||
|
|||
try { |
|||
const response = await apiRoute.get('/personnel/myServiceLogs', { |
|||
page: this.currentPage, |
|||
limit: this.pageSize, |
|||
demo: 1 // 添加演示数据标识 |
|||
}); |
|||
|
|||
if (response.code === 1) { |
|||
const newServices = response.data.data || []; |
|||
|
|||
if (refresh) { |
|||
this.serviceList = newServices; |
|||
} else { |
|||
this.serviceList = [...this.serviceList, ...newServices]; |
|||
} |
|||
|
|||
// 检查是否还有更多数据 |
|||
this.hasMore = newServices.length === this.pageSize; |
|||
this.loadMoreStatus = this.hasMore ? 'more' : 'noMore'; |
|||
} else { |
|||
uni.showToast({ |
|||
title: response.data.msg || '加载失败', |
|||
icon: 'none' |
|||
}); |
|||
} |
|||
} catch (error) { |
|||
console.error('获取服务记录失败:', error); |
|||
uni.showToast({ |
|||
title: '网络错误，请稍后重试', |
|||
icon: 'none' |
|||
}); |
|||
} finally { |
|||
this.loading = false; |
|||
if (refresh) { |
|||
uni.stopPullDownRefresh(); |
|||
} |
|||
} |
|||
}, |
|||
|
|||
// 刷新服务列表 |
|||
refreshServiceList() { |
|||
this.getServiceList(true); |
|||
}, |
|||
|
|||
// 加载更多 |
|||
loadMore() { |
|||
if (this.hasMore && !this.loading) { |
|||
this.currentPage++; |
|||
this.getServiceList(); |
|||
} |
|||
}, |
|||
|
|||
// 查看服务详情 |
|||
async viewServiceDetail(service) { |
|||
try { |
|||
const response = await apiRoute.get('/personnel/serviceLogDetail', { |
|||
id: service.id |
|||
}); |
|||
|
|||
if (response.code === 1) { |
|||
const detail = response.data; |
|||
this.showServiceDetailModal(detail); |
|||
} else { |
|||
uni.showToast({ |
|||
title: response.data.msg || '获取详情失败', |
|||
icon: 'none' |
|||
}); |
|||
} |
|||
} catch (error) { |
|||
console.error('获取服务详情失败:', error); |
|||
uni.showToast({ |
|||
title: '网络错误，请稍后重试', |
|||
icon: 'none' |
|||
}); |
|||
} |
|||
}, |
|||
|
|||
// 显示服务详情弹窗 |
|||
showServiceDetailModal(detail) { |
|||
let content = `服务名称：${detail.service_name || '-'}\n`; |
|||
content += `服务类型：${detail.service_type || '-'}\n`; |
|||
content += `状态：${detail.status === 1 ? '已完成' : (detail.status === 0 ? '待处理' : '未知状态')}\n`; |
|||
if (detail.description) { |
|||
content += `描述：${detail.description}\n`; |
|||
} |
|||
if (detail.service_remark) { |
|||
content += `服务结果：${detail.service_remark}\n`; |
|||
} |
|||
if (detail.feedback) { |
|||
content += `家长反馈：${detail.feedback}\n`; |
|||
} |
|||
if (detail.score) { |
|||
content += `家长评分：${detail.score}分`; |
|||
} |
|||
|
|||
uni.showModal({ |
|||
title: '服务详情', |
|||
content: content, |
|||
showCancel: false |
|||
}); |
|||
}, |
|||
|
|||
|
|||
// 获取图片URL |
|||
getImageUrl(url) { |
|||
if (!url) return ''; |
|||
if (url.startsWith('http')) { |
|||
return url; |
|||
} |
|||
return this.$baseUrl + '/' + url; |
|||
}, |
|||
|
|||
// 格式化日期 |
|||
formatDate(dateString) { |
|||
if (!dateString) return '-'; |
|||
const date = new Date(dateString); |
|||
const year = date.getFullYear(); |
|||
const month = String(date.getMonth() + 1).padStart(2, '0'); |
|||
const day = String(date.getDate()).padStart(2, '0'); |
|||
return `${year}-${month}-${day}`; |
|||
}, |
|||
|
|||
// 去除HTML标签 |
|||
stripHtml(html) { |
|||
if (!html) return ''; |
|||
return html.replace(/<[^>]*>/g, '').trim(); |
|||
}, |
|||
|
|||
// 格式化富文本内容 |
|||
formatRichText(text) { |
|||
if (!text) return ''; |
|||
|
|||
// 简单的markdown转换 |
|||
let formatted = text |
|||
// 粗体 |
|||
.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>') |
|||
// 斜体 |
|||
.replace(/\*(.*?)\*/g, '<em>$1</em>') |
|||
// 无序列表 |
|||
.replace(/^\u2022\s(.+)$/gm, '<li>$1</li>') |
|||
// 有序列表 |
|||
.replace(/^\d+\.\s(.+)$/gm, '<li>$1</li>') |
|||
// 换行 |
|||
.replace(/\n/g, '<br/>'); |
|||
|
|||
// 如果有列表项，包装在ul标签中 |
|||
if (formatted.includes('<li>')) { |
|||
formatted = formatted.replace(/(<li>.*?<\/li>)/g, '<ul>$1</ul>'); |
|||
} |
|||
|
|||
return formatted; |
|||
}, |
|||
|
|||
// 编辑服务结果 |
|||
editServiceRemark(service) { |
|||
// 检查是否可以编辑 |
|||
if (service.status === 1) { |
|||
uni.showToast({ |
|||
title: '服务已完成，无法修改', |
|||
icon: 'none' |
|||
}); |
|||
return; |
|||
} |
|||
|
|||
this.editForm.id = service.id; |
|||
this.editForm.service_remark = this.stripHtml(service.service_remark || ''); |
|||
this.showEditModal = true; |
|||
}, |
|||
|
|||
// 关闭编辑弹窗 |
|||
closeEditModal() { |
|||
this.showEditModal = false; |
|||
this.editForm = { |
|||
id: 0, |
|||
service_remark: '' |
|||
}; |
|||
}, |
|||
|
|||
// 保存服务结果 |
|||
async saveServiceRemark() { |
|||
if (!this.editForm.service_remark.trim()) { |
|||
uni.showToast({ |
|||
title: '请输入服务结果内容', |
|||
icon: 'none' |
|||
}); |
|||
return; |
|||
} |
|||
|
|||
this.saving = true; |
|||
|
|||
try { |
|||
const response = await apiRoute.post('/personnel/updateServiceRemark', { |
|||
id: this.editForm.id, |
|||
service_remark: this.editForm.service_remark |
|||
}); |
|||
|
|||
if (response.data.code === 1) { |
|||
uni.showToast({ |
|||
title: '保存成功', |
|||
icon: 'success' |
|||
}); |
|||
|
|||
// 更新列表中的数据 |
|||
const index = this.serviceList.findIndex(item => item.id === this.editForm.id); |
|||
if (index !== -1) { |
|||
this.serviceList[index].service_remark = this.editForm.service_remark; |
|||
} |
|||
|
|||
this.closeEditModal(); |
|||
} else { |
|||
uni.showToast({ |
|||
title: response.data.msg || '保存失败', |
|||
icon: 'none' |
|||
}); |
|||
} |
|||
} catch (error) { |
|||
console.error('保存服务结果失败:', error); |
|||
uni.showToast({ |
|||
title: '网络错误，请稍后重试', |
|||
icon: 'none' |
|||
}); |
|||
} finally { |
|||
this.saving = false; |
|||
} |
|||
}, |
|||
|
|||
// 富文本编辑功能 |
|||
onTextareaFocus() { |
|||
this.textareaFocused = true; |
|||
}, |
|||
|
|||
onTextareaBlur() { |
|||
this.textareaFocused = false; |
|||
}, |
|||
|
|||
toggleBold() { |
|||
this.bold = !this.bold; |
|||
this.insertFormatText('**', '**'); |
|||
}, |
|||
|
|||
toggleItalic() { |
|||
this.italic = !this.italic; |
|||
this.insertFormatText('*', '*'); |
|||
}, |
|||
|
|||
insertBulletList() { |
|||
this.insertFormatText('\n• ', ''); |
|||
}, |
|||
|
|||
insertNumberList() { |
|||
this.insertFormatText('\n1. ', ''); |
|||
}, |
|||
|
|||
insertFormatText(before, after) { |
|||
const textarea = this.editForm.service_remark; |
|||
const newText = textarea + before + '请输入内容' + after; |
|||
this.editForm.service_remark = newText; |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.container { |
|||
background: #1a1a1a; |
|||
min-height: 100vh; |
|||
} |
|||
|
|||
.main-content { |
|||
padding: 20rpx; |
|||
} |
|||
|
|||
.service-cards { |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 20rpx; |
|||
} |
|||
|
|||
.service-card { |
|||
background: #2a2a2a; |
|||
border-radius: 16rpx; |
|||
overflow: hidden; |
|||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.3); |
|||
border: 1rpx solid #444; |
|||
position: relative; |
|||
display: flex; |
|||
align-items: center; |
|||
padding: 24rpx; |
|||
} |
|||
|
|||
.service-preview { |
|||
width: 120rpx; |
|||
height: 120rpx; |
|||
border-radius: 12rpx; |
|||
overflow: hidden; |
|||
margin-right: 24rpx; |
|||
flex-shrink: 0; |
|||
|
|||
.preview-image { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
} |
|||
|
|||
.card-content { |
|||
flex: 1; |
|||
} |
|||
|
|||
.card-header { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
margin-bottom: 16rpx; |
|||
|
|||
.service-name { |
|||
font-size: 32rpx; |
|||
font-weight: 600; |
|||
color: #fff; |
|||
flex: 1; |
|||
margin-right: 16rpx; |
|||
} |
|||
|
|||
.service-status { |
|||
padding: 8rpx 16rpx; |
|||
border-radius: 20rpx; |
|||
font-size: 24rpx; |
|||
font-weight: 500; |
|||
|
|||
&.status-active { |
|||
background: rgba(41, 211, 180, 0.2); |
|||
color: #29d3b4; |
|||
border: 1rpx solid #29d3b4; |
|||
} |
|||
|
|||
&.status-pending { |
|||
background: rgba(255, 193, 7, 0.2); |
|||
color: #ffc107; |
|||
border: 1rpx solid #ffc107; |
|||
} |
|||
|
|||
&.status-inactive { |
|||
background: rgba(220, 53, 69, 0.2); |
|||
color: #dc3545; |
|||
border: 1rpx solid #dc3545; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.service-info { |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 12rpx; |
|||
} |
|||
|
|||
.info-item { |
|||
display: flex; |
|||
align-items: flex-start; |
|||
|
|||
.label { |
|||
color: #999; |
|||
font-size: 26rpx; |
|||
min-width: 140rpx; |
|||
flex-shrink: 0; |
|||
} |
|||
|
|||
.value { |
|||
color: #ccc; |
|||
font-size: 26rpx; |
|||
flex: 1; |
|||
word-break: break-all; |
|||
|
|||
&.score { |
|||
color: #29d3b4; |
|||
font-weight: 600; |
|||
} |
|||
|
|||
&.placeholder { |
|||
color: #666; |
|||
font-style: italic; |
|||
} |
|||
} |
|||
|
|||
.value-content { |
|||
flex: 1; |
|||
color: #ccc; |
|||
font-size: 26rpx; |
|||
line-height: 1.6; |
|||
|
|||
/* 富文本样式 */ |
|||
:deep(strong) { |
|||
font-weight: 600; |
|||
color: #fff; |
|||
} |
|||
|
|||
:deep(em) { |
|||
font-style: italic; |
|||
color: #29d3b4; |
|||
} |
|||
|
|||
:deep(ul) { |
|||
margin: 8rpx 0; |
|||
padding-left: 24rpx; |
|||
} |
|||
|
|||
:deep(li) { |
|||
margin: 4rpx 0; |
|||
list-style: disc; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.card-arrow { |
|||
margin-left: 16rpx; |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
flex-shrink: 0; |
|||
|
|||
.iconfont { |
|||
font-size: 24rpx; |
|||
color: #666; |
|||
} |
|||
} |
|||
|
|||
.card-actions { |
|||
margin-top: 20rpx; |
|||
padding-top: 20rpx; |
|||
border-top: 1rpx solid #444; |
|||
|
|||
.edit-btn { |
|||
background: #29d3b4; |
|||
color: #fff; |
|||
border: none; |
|||
border-radius: 8rpx; |
|||
padding: 12rpx 24rpx; |
|||
font-size: 26rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
gap: 8rpx; |
|||
|
|||
&:active { |
|||
background: #22b39a; |
|||
} |
|||
|
|||
.iconfont { |
|||
font-size: 24rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.empty-state { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding: 120rpx 40rpx; |
|||
|
|||
.empty-icon { |
|||
font-size: 120rpx; |
|||
margin-bottom: 24rpx; |
|||
opacity: 0.3; |
|||
} |
|||
|
|||
.empty-text { |
|||
color: #666; |
|||
font-size: 28rpx; |
|||
} |
|||
} |
|||
|
|||
.loading-container { |
|||
padding: 120rpx 40rpx; |
|||
text-align: center; |
|||
} |
|||
|
|||
.load-more { |
|||
padding: 40rpx 0; |
|||
} |
|||
|
|||
/* 动画效果 */ |
|||
.service-card { |
|||
animation: slideIn 0.3s ease-out; |
|||
} |
|||
|
|||
@keyframes slideIn { |
|||
from { |
|||
opacity: 0; |
|||
transform: translateY(20rpx); |
|||
} |
|||
to { |
|||
opacity: 1; |
|||
transform: translateY(0); |
|||
} |
|||
} |
|||
|
|||
/* 编辑弹窗样式 */ |
|||
.edit-modal { |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
background-color: rgba(0, 0, 0, 0.5); |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
z-index: 1000; |
|||
|
|||
.modal-content { |
|||
background-color: #2a2a2a; |
|||
border-radius: 20rpx; |
|||
width: 90%; |
|||
max-height: 80%; |
|||
overflow: hidden; |
|||
border: 1rpx solid #444; |
|||
|
|||
.modal-header { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
padding: 32rpx; |
|||
border-bottom: 1rpx solid #444; |
|||
|
|||
.modal-title { |
|||
font-size: 32rpx; |
|||
font-weight: 600; |
|||
color: #fff; |
|||
} |
|||
|
|||
.modal-close { |
|||
width: 48rpx; |
|||
height: 48rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
|
|||
.iconfont { |
|||
font-size: 32rpx; |
|||
color: #999; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.modal-body { |
|||
padding: 32rpx; |
|||
|
|||
.form-item { |
|||
.form-label { |
|||
font-size: 28rpx; |
|||
color: #ccc; |
|||
margin-bottom: 16rpx; |
|||
display: block; |
|||
} |
|||
|
|||
.editor-toolbar { |
|||
background-color: #1a1a1a; |
|||
border: 1rpx solid #444; |
|||
border-bottom: none; |
|||
border-radius: 12rpx 12rpx 0 0; |
|||
padding: 16rpx; |
|||
|
|||
.toolbar-group { |
|||
display: flex; |
|||
gap: 16rpx; |
|||
|
|||
.tool-btn { |
|||
width: 48rpx; |
|||
height: 48rpx; |
|||
background-color: #444; |
|||
border: 1rpx solid #666; |
|||
border-radius: 8rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
|
|||
&.active { |
|||
background-color: #29d3b4; |
|||
border-color: #29d3b4; |
|||
} |
|||
|
|||
.tool-text { |
|||
font-size: 24rpx; |
|||
color: #fff; |
|||
font-weight: 600; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.form-textarea { |
|||
width: 100%; |
|||
min-height: 300rpx; |
|||
background-color: #1a1a1a; |
|||
border: 1rpx solid #444; |
|||
border-radius: 0 0 12rpx 12rpx; |
|||
border-top: none; |
|||
padding: 20rpx; |
|||
font-size: 28rpx; |
|||
color: #fff; |
|||
line-height: 1.6; |
|||
box-sizing: border-box; |
|||
|
|||
&::placeholder { |
|||
color: #666; |
|||
} |
|||
} |
|||
|
|||
.char-count { |
|||
text-align: right; |
|||
margin-top: 8rpx; |
|||
font-size: 24rpx; |
|||
color: #666; |
|||
} |
|||
|
|||
.editor-tips { |
|||
margin-top: 12rpx; |
|||
|
|||
.tip-text { |
|||
font-size: 22rpx; |
|||
color: #666; |
|||
line-height: 1.4; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.modal-footer { |
|||
display: flex; |
|||
gap: 24rpx; |
|||
padding: 32rpx; |
|||
border-top: 1rpx solid #444; |
|||
|
|||
.modal-btn { |
|||
flex: 1; |
|||
height: 72rpx; |
|||
border-radius: 12rpx; |
|||
font-size: 28rpx; |
|||
font-weight: 600; |
|||
border: none; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
|
|||
&.cancel { |
|||
background-color: #444; |
|||
color: #ccc; |
|||
|
|||
&:active { |
|||
background-color: #555; |
|||
} |
|||
} |
|||
|
|||
&.confirm { |
|||
background-color: #29d3b4; |
|||
color: #fff; |
|||
|
|||
&:active:not(:disabled) { |
|||
background-color: #22b39a; |
|||
} |
|||
|
|||
&:disabled { |
|||
background-color: #666; |
|||
color: #999; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,565 +0,0 @@ |
|||
<!--服务列表页面--> |
|||
<template> |
|||
<view class="container dark-theme"> |
|||
<view class="header"> |
|||
<view class="search-bar"> |
|||
<view class="search-input"> |
|||
<input |
|||
placeholder="搜索服务..." |
|||
v-model="searchText" |
|||
@input="handleSearch" |
|||
/> |
|||
</view> |
|||
<view class="filter-btn" @click="showFilter"> |
|||
<text>筛选</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="service-list"> |
|||
<view class="service-item" |
|||
v-for="(service, index) in filteredServiceList" |
|||
:key="index" |
|||
@click="goToDetail(service)"> |
|||
<view class="service-header"> |
|||
<view class="service-title">{{ service.name }}</view> |
|||
<view class="service-badge" :class="[ |
|||
service.status === '正常' ? 'badge-success' : '', |
|||
service.status === '即将到期' ? 'badge-warning' : '', |
|||
service.status === '已过期' ? 'badge-danger' : '', |
|||
!['正常', '即将到期', '已过期'].includes(service.status) ? 'badge-default' : '' |
|||
]"> |
|||
{{ service.status }} |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="service-content"> |
|||
<view class="service-meta"> |
|||
<view class="meta-item"> |
|||
<text class="meta-label">类型：</text> |
|||
<text class="meta-value">{{ service.type }}</text> |
|||
</view> |
|||
<view class="meta-item"> |
|||
<text class="meta-label">时长：</text> |
|||
<text class="meta-value">{{ service.duration }}</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="service-desc">{{ service.description }}</view> |
|||
|
|||
<view class="service-footer"> |
|||
<view class="service-time"> |
|||
{{ service.startTime }} - {{ service.endTime }} |
|||
</view> |
|||
<view class="service-action"> |
|||
<text class="action-text">查看详情</text> |
|||
<text class="action-arrow">></text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="empty-state" v-if="filteredServiceList.length === 0"> |
|||
<image class="empty-icon" src="/static/icon-img/empty.png"></image> |
|||
<view class="empty-text">{{ searchText ? '未找到相关服务' : '暂无服务记录' }}</view> |
|||
</view> |
|||
|
|||
<!-- 筛选弹窗 --> |
|||
<fui-bottom-popup v-model="showFilterPopup" :zIndex="9999"> |
|||
<view class="filter-popup"> |
|||
<view class="popup-header"> |
|||
<view class="popup-title">筛选条件</view> |
|||
<view class="popup-close" @click="showFilterPopup = false">✕</view> |
|||
</view> |
|||
|
|||
<view class="filter-content"> |
|||
<view class="filter-group"> |
|||
<view class="filter-title">服务状态</view> |
|||
<view class="filter-options"> |
|||
<view |
|||
class="filter-option" |
|||
:class="{ active: selectedStatus === '' }" |
|||
@click="selectedStatus = ''" |
|||
> |
|||
全部 |
|||
</view> |
|||
<view |
|||
class="filter-option" |
|||
:class="{ active: selectedStatus === '正常' }" |
|||
@click="selectedStatus = '正常'" |
|||
> |
|||
正常 |
|||
</view> |
|||
<view |
|||
class="filter-option" |
|||
:class="{ active: selectedStatus === '即将到期' }" |
|||
@click="selectedStatus = '即将到期'" |
|||
> |
|||
即将到期 |
|||
</view> |
|||
<view |
|||
class="filter-option" |
|||
:class="{ active: selectedStatus === '已过期' }" |
|||
@click="selectedStatus = '已过期'" |
|||
> |
|||
已过期 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="popup-actions"> |
|||
<view class="btn btn-reset" @click="resetFilter">重置</view> |
|||
<view class="btn btn-confirm" @click="applyFilter">确定</view> |
|||
</view> |
|||
</view> |
|||
</fui-bottom-popup> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import apiRoute from '@/api/apiRoute.js'; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
serviceList: [], |
|||
filteredServiceList: [], |
|||
searchText: '', |
|||
showFilterPopup: false, |
|||
selectedStatus: '' |
|||
} |
|||
}, |
|||
onLoad() { |
|||
this.init(); |
|||
}, |
|||
methods: { |
|||
async init() { |
|||
this.getServiceList(); |
|||
}, |
|||
|
|||
// 获取服务列表 |
|||
async getServiceList() { |
|||
try { |
|||
// 模拟数据，实际应该调用API |
|||
this.serviceList = [ |
|||
{ |
|||
id: 1, |
|||
name: '专业体能训练服务', |
|||
type: '体能训练', |
|||
status: '正常', |
|||
duration: '3个月', |
|||
startTime: '2024-01-01', |
|||
endTime: '2024-03-31', |
|||
description: '专业的体能训练指导，包含有氧运动、力量训练等综合项目' |
|||
}, |
|||
{ |
|||
id: 2, |
|||
name: '基础动作指导服务', |
|||
type: '技术指导', |
|||
status: '即将到期', |
|||
duration: '1个月', |
|||
startTime: '2024-06-01', |
|||
endTime: '2024-06-30', |
|||
description: '针对基础动作的专业指导和纠正' |
|||
}, |
|||
{ |
|||
id: 3, |
|||
name: '营养咨询服务', |
|||
type: '营养指导', |
|||
status: '正常', |
|||
duration: '6个月', |
|||
startTime: '2024-01-15', |
|||
endTime: '2024-07-15', |
|||
description: '专业营养师提供个性化营养方案和饮食建议' |
|||
}, |
|||
{ |
|||
id: 4, |
|||
name: '康复训练服务', |
|||
type: '康复指导', |
|||
status: '已过期', |
|||
duration: '2个月', |
|||
startTime: '2023-10-01', |
|||
endTime: '2023-11-30', |
|||
description: '运动损伤康复和预防性训练指导' |
|||
} |
|||
]; |
|||
|
|||
this.filteredServiceList = [...this.serviceList]; |
|||
|
|||
// 实际API调用示例： |
|||
// let res = await apiRoute.getServiceList({}); |
|||
// if (res.code === 1) { |
|||
// this.serviceList = res.data; |
|||
// this.filteredServiceList = [...this.serviceList]; |
|||
// } |
|||
} catch (error) { |
|||
console.error('获取服务列表失败:', error); |
|||
uni.showToast({ |
|||
title: '获取数据失败', |
|||
icon: 'none' |
|||
}); |
|||
} |
|||
}, |
|||
|
|||
// 搜索处理 |
|||
handleSearch() { |
|||
this.filterServices(); |
|||
}, |
|||
|
|||
// 筛选服务 |
|||
filterServices() { |
|||
let filtered = [...this.serviceList]; |
|||
|
|||
// 按搜索文本筛选 |
|||
if (this.searchText) { |
|||
filtered = filtered.filter(service => |
|||
service.name.includes(this.searchText) || |
|||
service.type.includes(this.searchText) || |
|||
service.description.includes(this.searchText) |
|||
); |
|||
} |
|||
|
|||
// 按状态筛选 |
|||
if (this.selectedStatus) { |
|||
filtered = filtered.filter(service => service.status === this.selectedStatus); |
|||
} |
|||
|
|||
this.filteredServiceList = filtered; |
|||
}, |
|||
|
|||
// 显示筛选 |
|||
showFilter() { |
|||
this.showFilterPopup = true; |
|||
}, |
|||
|
|||
// 重置筛选 |
|||
resetFilter() { |
|||
this.selectedStatus = ''; |
|||
this.filterServices(); |
|||
}, |
|||
|
|||
// 应用筛选 |
|||
applyFilter() { |
|||
this.filterServices(); |
|||
this.showFilterPopup = false; |
|||
}, |
|||
|
|||
|
|||
// 跳转到详情页 |
|||
goToDetail(service) { |
|||
this.$navigateTo({ |
|||
url: `/pages/coach/my/service_detail?id=${service.id}` |
|||
}); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
// 通用样式 |
|||
.container { |
|||
min-height: 100vh; |
|||
} |
|||
|
|||
// 暗黑主题样式 |
|||
.dark-theme { |
|||
background-color: #121212; |
|||
color: #ffffff; |
|||
|
|||
.header { |
|||
background-color: #181818; |
|||
padding: 20rpx; |
|||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3); |
|||
} |
|||
|
|||
.search-input { |
|||
background-color: #1e1e1e; |
|||
border-radius: 25rpx; |
|||
padding: 15rpx 30rpx; |
|||
|
|||
input { |
|||
width: 100%; |
|||
font-size: 28rpx; |
|||
color: #ffffff; |
|||
} |
|||
} |
|||
|
|||
.filter-btn { |
|||
background-color: #00d18c; |
|||
color: #121212; |
|||
padding: 15rpx 30rpx; |
|||
border-radius: 25rpx; |
|||
font-size: 28rpx; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.service-item { |
|||
background-color: #1e1e1e; |
|||
border-radius: 16rpx; |
|||
padding: 30rpx; |
|||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.3); |
|||
margin-bottom: 20rpx; |
|||
} |
|||
|
|||
.service-title { |
|||
font-size: 32rpx; |
|||
font-weight: bold; |
|||
color: #ffffff; |
|||
flex: 1; |
|||
margin-right: 20rpx; |
|||
} |
|||
|
|||
.service-badge { |
|||
padding: 8rpx 16rpx; |
|||
border-radius: 20rpx; |
|||
font-size: 24rpx; |
|||
|
|||
&.badge-success { |
|||
background-color: rgba(82, 196, 26, 0.2); |
|||
color: #52c41a; |
|||
border: 1px solid #52c41a; |
|||
} |
|||
|
|||
&.badge-warning { |
|||
background-color: rgba(250, 140, 22, 0.2); |
|||
color: #fa8c16; |
|||
border: 1px solid #fa8c16; |
|||
} |
|||
|
|||
&.badge-danger { |
|||
background-color: rgba(255, 77, 79, 0.2); |
|||
color: #ff4d4f; |
|||
border: 1px solid #ff4d4f; |
|||
} |
|||
|
|||
&.badge-default { |
|||
background-color: rgba(102, 102, 102, 0.2); |
|||
color: #999; |
|||
border: 1px solid #666; |
|||
} |
|||
} |
|||
|
|||
.meta-item { |
|||
.meta-label { |
|||
color: #b0b0b0; |
|||
font-size: 26rpx; |
|||
} |
|||
|
|||
.meta-value { |
|||
color: #ffffff; |
|||
font-size: 26rpx; |
|||
} |
|||
} |
|||
|
|||
.service-desc { |
|||
color: #b0b0b0; |
|||
font-size: 26rpx; |
|||
line-height: 1.5; |
|||
} |
|||
|
|||
.service-footer { |
|||
padding-top: 15rpx; |
|||
border-top: 1px solid #333333; |
|||
} |
|||
|
|||
.service-time { |
|||
color: #999999; |
|||
font-size: 24rpx; |
|||
} |
|||
|
|||
.service-action { |
|||
color: #00d18c; |
|||
font-size: 26rpx; |
|||
} |
|||
|
|||
.empty-state { |
|||
.empty-icon { |
|||
opacity: 0.2; |
|||
} |
|||
|
|||
.empty-text { |
|||
color: #b0b0b0; |
|||
} |
|||
} |
|||
|
|||
// 筛选弹窗样式 |
|||
.filter-popup { |
|||
background-color: #1e1e1e; |
|||
border-radius: 20rpx 20rpx 0 0; |
|||
} |
|||
|
|||
.popup-header { |
|||
border-bottom: 1px solid #333333; |
|||
} |
|||
|
|||
.popup-title { |
|||
color: #ffffff; |
|||
} |
|||
|
|||
.popup-close { |
|||
color: #b0b0b0; |
|||
} |
|||
|
|||
.filter-title { |
|||
color: #ffffff; |
|||
} |
|||
|
|||
.filter-option { |
|||
background-color: #282828; |
|||
color: #b0b0b0; |
|||
|
|||
&.active { |
|||
background-color: #00d18c; |
|||
color: #121212; |
|||
} |
|||
} |
|||
|
|||
.popup-actions { |
|||
border-top: 1px solid #333333; |
|||
} |
|||
|
|||
.btn { |
|||
&.btn-reset { |
|||
background-color: #333333; |
|||
color: #ffffff; |
|||
} |
|||
|
|||
&.btn-confirm { |
|||
background-color: #00d18c; |
|||
color: #121212; |
|||
font-weight: bold; |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 通用布局样式（不受主题影响的部分） |
|||
.search-bar { |
|||
display: flex; |
|||
gap: 20rpx; |
|||
align-items: center; |
|||
} |
|||
|
|||
.search-input { |
|||
flex: 1; |
|||
} |
|||
|
|||
.service-list { |
|||
padding: 20rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.service-header { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
margin-bottom: 20rpx; |
|||
} |
|||
|
|||
.service-content { |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 15rpx; |
|||
} |
|||
|
|||
.service-meta { |
|||
display: flex; |
|||
gap: 30rpx; |
|||
} |
|||
|
|||
.meta-item { |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.service-footer { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
} |
|||
|
|||
.service-action { |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
.action-arrow { |
|||
margin-left: 10rpx; |
|||
} |
|||
} |
|||
|
|||
.empty-state { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding: 100rpx 0; |
|||
|
|||
.empty-icon { |
|||
width: 120rpx; |
|||
height: 120rpx; |
|||
margin-bottom: 30rpx; |
|||
} |
|||
|
|||
.empty-text { |
|||
font-size: 28rpx; |
|||
} |
|||
} |
|||
|
|||
.popup-header { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding: 30rpx; |
|||
} |
|||
|
|||
.popup-title { |
|||
font-size: 32rpx; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.popup-close { |
|||
font-size: 36rpx; |
|||
} |
|||
|
|||
.filter-content { |
|||
padding: 30rpx; |
|||
} |
|||
|
|||
.filter-group { |
|||
margin-bottom: 40rpx; |
|||
} |
|||
|
|||
.filter-title { |
|||
font-size: 28rpx; |
|||
font-weight: bold; |
|||
margin-bottom: 20rpx; |
|||
} |
|||
|
|||
.filter-options { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
gap: 20rpx; |
|||
} |
|||
|
|||
.filter-option { |
|||
padding: 15rpx 30rpx; |
|||
border-radius: 25rpx; |
|||
font-size: 26rpx; |
|||
} |
|||
|
|||
.popup-actions { |
|||
display: flex; |
|||
gap: 20rpx; |
|||
padding: 30rpx; |
|||
} |
|||
|
|||
.btn { |
|||
flex: 1; |
|||
padding: 20rpx; |
|||
border-radius: 12rpx; |
|||
text-align: center; |
|||
font-size: 28rpx; |
|||
} |
|||
</style> |
|||
@ -1,168 +0,0 @@ |
|||
<template> |
|||
<view style="height: 100vh;background-color: #fff;"> |
|||
<view class="title_style"> |
|||
{{arrayInfo.title}} |
|||
</view> |
|||
<view class="date_style"> |
|||
{{arrayInfo.update_time}} |
|||
</view> |
|||
|
|||
<view class="url_style" v-if="arrayInfo.type == 1 && arrayInfo.url"> |
|||
<video style="margin: auto;" :src="arrayInfo.url" :enable-progress-gesture="true" |
|||
:show-fullscreen-btn="true" :show-play-btn="true" @error="onVideoError" @play="onPlay" |
|||
@pause="onPause" /> |
|||
</view> |
|||
|
|||
<view class="url_image_style" v-if="arrayInfo.type == 3 && arrayInfo.url"> |
|||
<image :src="arrayInfo.url" mode="aspectFill" @click="clickPreviewImage(arrayInfo.url)" |
|||
style="width: 80%;margin: auto;"> |
|||
</image> |
|||
</view> |
|||
|
|||
<view class="url_file_style" v-if="arrayInfo.type == 2 && arrayInfo.url"> |
|||
<a style="cursor: pointer;color: blue;" @click="previewFile(arrayInfo.url)">素材文件</a> |
|||
</view> |
|||
|
|||
<!-- <view class="con_style" v-html="arrayInfo.content"></view> --> |
|||
<jyf-parser class="con_style" :html="arrayInfo.content" :tag-style="tagStyle"></jyf-parser> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import apiRoute from '@/api/apiRoute.js'; |
|||
import jyfParser from '@/components/jyf-parser/jyf-parser.vue'; |
|||
|
|||
export default { |
|||
components: { |
|||
jyfParser |
|||
}, |
|||
data() { |
|||
return { |
|||
articleId: undefined, |
|||
arrayInfo: [], |
|||
tagStyle: { |
|||
// 设置富文本样式 |
|||
p: 'margin:0;padding:0;color:#333333;', |
|||
span: 'color:#333333;', |
|||
h1: 'color:#333333;', |
|||
h2: 'color:#333333;', |
|||
h3: 'color:#333333;', |
|||
h4: 'color:#333333;', |
|||
h5: 'color:#333333;', |
|||
h6: 'color:#333333;', |
|||
li: 'color:#333333;', |
|||
div: 'color:#333333;' |
|||
} |
|||
} |
|||
}, |
|||
onLoad(options) { |
|||
this.articleId = options.id; |
|||
console.log(this.articleId, 888) |
|||
this.init() |
|||
}, |
|||
methods: { |
|||
init() { |
|||
apiRoute.teachingResearchInfo(this.articleId).then(res => { |
|||
if (res.code == 1) { |
|||
this.arrayInfo = res.data |
|||
} |
|||
}) |
|||
}, |
|||
clickPreviewImage(url) { |
|||
uni.previewImage({ |
|||
urls: [url], // 支持多张图预览 |
|||
current: url, // 当前显示的图片链接 |
|||
success: () => { |
|||
console.log('预览成功'); |
|||
}, |
|||
fail: (err) => { |
|||
console.error('预览失败', err); |
|||
} |
|||
}); |
|||
}, |
|||
async previewFile(url) { |
|||
|
|||
console.log(url) |
|||
|
|||
try { |
|||
// 1. 下载文件到本地 |
|||
const { |
|||
tempFilePath |
|||
} = await this.downloadFile(this.$util.img('public/'+url)); |
|||
console.log(tempFilePath) |
|||
// 2. 打开文件 |
|||
await uni.openDocument({ |
|||
filePath: this.$util.img(tempFilePath), |
|||
showMenu: true, |
|||
success: () => { |
|||
console.log('打开文档成功'); |
|||
} |
|||
}); |
|||
} catch (err) { |
|||
uni.showToast({ |
|||
title: '预览失败', |
|||
icon: 'none' |
|||
}); |
|||
console.error('预览失败:', err); |
|||
} |
|||
}, |
|||
|
|||
downloadFile(url) { |
|||
return new Promise((resolve, reject) => { |
|||
uni.downloadFile({ |
|||
url, |
|||
success: (res) => { |
|||
if (res.statusCode === 200) { |
|||
resolve(res); |
|||
} else { |
|||
reject(new Error('下载失败')); |
|||
} |
|||
}, |
|||
fail: (err) => { |
|||
reject(err); |
|||
} |
|||
}); |
|||
}); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.title_style { |
|||
width: 100%; |
|||
text-align: center; |
|||
font-size: 40rpx; |
|||
font-weight: bold; |
|||
padding-top: 10px; |
|||
} |
|||
|
|||
.date_style { |
|||
width: 100%; |
|||
text-align: right; |
|||
font-size: 20rpx; |
|||
color: #ccc; |
|||
padding-right: 16rpx; |
|||
margin-top: 10px; |
|||
} |
|||
|
|||
.con_style { |
|||
font-size: 30rpx; |
|||
padding: 18rpx; |
|||
margin-top: 20px; |
|||
} |
|||
|
|||
.url_style { |
|||
margin-top: 20px; |
|||
text-align: center; |
|||
} |
|||
|
|||
.url_image_style { |
|||
padding: 20rpx; |
|||
text-align: center; |
|||
} |
|||
|
|||
.url_file_style{ |
|||
padding: 20rpx; |
|||
} |
|||
</style> |
|||
@ -1,481 +0,0 @@ |
|||
<template> |
|||
<view class="schedule-detail-container"> |
|||
<!-- 页面加载状态 --> |
|||
<view class="loading-container" v-if="loading"> |
|||
<fui-loading></fui-loading> |
|||
<text class="loading-text">加载中...</text> |
|||
</view> |
|||
|
|||
<!-- 错误状态显示 --> |
|||
<view class="error-container" v-else-if="error"> |
|||
<text class="error-text">{{ errorMessage }}</text> |
|||
<view class="retry-btn" @click="fetchScheduleDetail"> |
|||
<text>重试</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="schedule-content" v-else> |
|||
<!-- 课程基本信息 --> |
|||
<view class="schedule-header"> |
|||
<view class="course-title"> |
|||
<text>{{ scheduleDetail.title || '暂无课程名称' }}</text> |
|||
<text class="status-tag" :class="statusClass">{{ statusText }}</text> |
|||
</view> |
|||
<view class="course-time">{{ scheduleDetail.course_date || '' }} {{ scheduleDetail.time_slot || '' }}</view> |
|||
</view> |
|||
|
|||
<!-- 课程详细信息 --> |
|||
<view class="info-card"> |
|||
<view class="info-item"> |
|||
<text class="info-label">授课教师:</text> |
|||
<text class="info-value">{{ scheduleDetail.coach?.name || '未设置' }}</text> |
|||
</view> |
|||
<view class="info-item"> |
|||
<text class="info-label">教室:</text> |
|||
<text class="info-value">{{ scheduleDetail.venue?.venue_name || '未设置' }}</text> |
|||
</view> |
|||
<view class="info-item"> |
|||
<text class="info-label">当前人数:</text> |
|||
<text class="info-value">{{ studentCount }}/{{ scheduleDetail.venue?.capacity || 0 }}</text> |
|||
</view> |
|||
<view class="info-item"> |
|||
<text class="info-label">课程内容:</text> |
|||
<text class="info-value">{{ scheduleDetail.content || '未设置上课内容' }}</text> |
|||
</view> |
|||
<view class="info-item" v-if="scheduleDetail.remark"> |
|||
<text class="info-label">备注:</text> |
|||
<text class="info-value">{{ scheduleDetail.remark }}</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 学员列表 --> |
|||
<view class="student-list-section"> |
|||
<view class="section-title"> |
|||
<text>学员列表</text> |
|||
</view> |
|||
<view class="student-list" v-if="scheduleDetail.student_courses && scheduleDetail.student_courses.length > 0"> |
|||
<view class="student-item" v-for="(student, index) in scheduleDetail.student_courses" :key="index"> |
|||
<view class="student-avatar"> |
|||
<image :src="$util.img(student.avatar)" mode="aspectFill"></image> |
|||
</view> |
|||
<view class="student-info"> |
|||
<text class="student-name">{{ student.name }}</text> |
|||
<text class="student-status" :class="{'signed': student.status === 'signed'}"> |
|||
{{ student.status === 'signed' ? '已签到' : '未签到' }} |
|||
</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="empty-list" v-else> |
|||
<text>暂无学员参与此课程</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 底部按钮区域 --> |
|||
<view class="footer-actions"> |
|||
<view class="action-btn adjust-btn" @click="handleAdjustClass"> |
|||
<text>调课</text> |
|||
</view> |
|||
<view class="action-btn sign-btn" @click="handleSignIn"> |
|||
<text>点名</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 引入课程详情组件 --> |
|||
<schedule-detail |
|||
:visible="showDetailPopup" |
|||
:scheduleId="scheduleId" |
|||
@update:visible="showDetailPopup = $event" |
|||
@sign-in="onSignIn" |
|||
@adjust-class="onAdjustClass" |
|||
></schedule-detail> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import apiRoute from '@/api/apiRoute.js' |
|||
import ScheduleDetail from '@/components/schedule/ScheduleDetail.vue' |
|||
|
|||
export default { |
|||
components: { |
|||
ScheduleDetail |
|||
}, |
|||
data() { |
|||
return { |
|||
scheduleId: '', // 课程安排ID |
|||
loading: false, |
|||
error: false, |
|||
errorMessage: '加载失败，请重试', |
|||
scheduleDetail: {}, |
|||
studentCount: 0, |
|||
showDetailPopup: false |
|||
} |
|||
}, |
|||
computed: { |
|||
// 课程状态文本和样式 |
|||
statusText() { |
|||
if (!this.scheduleDetail.student_courses || !this.scheduleDetail.student_courses[0]) { |
|||
return '未开始'; |
|||
} |
|||
|
|||
const now = new Date(); |
|||
const startDate = this.scheduleDetail.student_courses[0].start_date ? |
|||
new Date(this.scheduleDetail.student_courses[0].start_date) : null; |
|||
const endDate = this.scheduleDetail.student_courses[0].end_date ? |
|||
new Date(this.scheduleDetail.student_courses[0].end_date) : null; |
|||
|
|||
if (startDate && endDate) { |
|||
if (now >= startDate && now <= endDate) { |
|||
return '上课中'; |
|||
} else if (now > endDate) { |
|||
return '已结束'; |
|||
} else if (now < startDate) { |
|||
return '未开始'; |
|||
} |
|||
} |
|||
|
|||
return '未开始'; |
|||
}, |
|||
statusClass() { |
|||
switch (this.statusText) { |
|||
case '上课中': |
|||
return 'status-in-progress'; |
|||
case '已结束': |
|||
return 'status-ended'; |
|||
case '未开始': |
|||
default: |
|||
return 'status-not-started'; |
|||
} |
|||
} |
|||
}, |
|||
onLoad(options) { |
|||
if (options.id) { |
|||
this.scheduleId = options.id; |
|||
this.fetchScheduleDetail(); |
|||
} else { |
|||
this.error = true; |
|||
this.errorMessage = '未找到课程安排ID'; |
|||
} |
|||
}, |
|||
methods: { |
|||
// 获取课程详情 |
|||
async fetchScheduleDetail() { |
|||
if (!this.scheduleId) { |
|||
this.error = true; |
|||
this.errorMessage = '课程ID不能为空'; |
|||
return; |
|||
} |
|||
|
|||
this.loading = true; |
|||
this.error = false; |
|||
|
|||
try { |
|||
// 使用新接口获取课程安排详情 |
|||
const res = await apiRoute.getCourseScheduleInfo({ |
|||
id: this.scheduleId |
|||
}); |
|||
|
|||
if (res.code === 1 && res.data) { |
|||
this.scheduleDetail = res.data; |
|||
// 计算学生数量 |
|||
this.studentCount = this.scheduleDetail.student_courses ? |
|||
this.scheduleDetail.student_courses.length : 0; |
|||
} else { |
|||
// 如果新接口不可用，尝试使用旧接口 |
|||
const fallbackRes = await apiRoute.courseInfo({ |
|||
id: this.scheduleId |
|||
}); |
|||
|
|||
if (fallbackRes.code === 1 && fallbackRes.data) { |
|||
this.scheduleDetail = fallbackRes.data; |
|||
this.studentCount = this.scheduleDetail.student_courses ? |
|||
this.scheduleDetail.student_courses.length : 0; |
|||
} else { |
|||
throw new Error(res.msg || fallbackRes.msg || '获取课程详情失败'); |
|||
} |
|||
} |
|||
} catch (error) { |
|||
console.error('获取课程详情失败:', error); |
|||
this.error = true; |
|||
this.errorMessage = error.message || '获取课程详情失败，请重试'; |
|||
} finally { |
|||
this.loading = false; |
|||
} |
|||
}, |
|||
|
|||
// 点名功能 |
|||
handleSignIn() { |
|||
// 如果课程已结束，显示提示 |
|||
if (this.statusText === '已结束') { |
|||
uni.showToast({ |
|||
title: '课程已结束，无法点名', |
|||
icon: 'none' |
|||
}); |
|||
return; |
|||
} |
|||
|
|||
// 如果没有学生，显示提示 |
|||
if (!this.scheduleDetail.student_courses || this.scheduleDetail.student_courses.length === 0) { |
|||
uni.showToast({ |
|||
title: '暂无学员，无法点名', |
|||
icon: 'none' |
|||
}); |
|||
return; |
|||
} |
|||
|
|||
// 显示点名界面或跳转至点名页面 |
|||
uni.navigateTo({ |
|||
url: `/pages/coach/schedule/sign_in?id=${this.scheduleId}` |
|||
}); |
|||
}, |
|||
|
|||
// 调课功能 |
|||
handleAdjustClass() { |
|||
// 如果课程已结束，显示提示 |
|||
if (this.statusText === '已结束') { |
|||
uni.showToast({ |
|||
title: '课程已结束，无法调课', |
|||
icon: 'none' |
|||
}); |
|||
return; |
|||
} |
|||
|
|||
// 跳转至调课页面 |
|||
uni.navigateTo({ |
|||
url: `/pages/coach/schedule/adjust_course?id=${this.scheduleId}` |
|||
}); |
|||
}, |
|||
|
|||
// 从弹窗组件中点名处理 |
|||
onSignIn(data) { |
|||
console.log('处理点名:', data); |
|||
uni.navigateTo({ |
|||
url: `/pages/coach/schedule/sign_in?id=${data.scheduleId}` |
|||
}); |
|||
}, |
|||
|
|||
// 从弹窗组件中调课处理 |
|||
onAdjustClass(data) { |
|||
console.log('处理调课:', data); |
|||
uni.navigateTo({ |
|||
url: `/pages/coach/schedule/adjust_course?id=${data.scheduleId}` |
|||
}); |
|||
}, |
|||
|
|||
// 显示弹窗 |
|||
showPopup() { |
|||
this.showDetailPopup = true; |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.schedule-detail-container { |
|||
background-color: #292929; |
|||
min-height: 100vh; |
|||
padding-bottom: 140rpx; // 为底部按钮留出空间 |
|||
} |
|||
|
|||
.loading-container, .error-container { |
|||
height: 100vh; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.loading-text, .error-text { |
|||
margin-top: 30rpx; |
|||
font-size: 28rpx; |
|||
color: #ccc; |
|||
} |
|||
|
|||
.retry-btn { |
|||
margin-top: 30rpx; |
|||
padding: 12rpx 30rpx; |
|||
background-color: #29d3b4; |
|||
border-radius: 8rpx; |
|||
color: #fff; |
|||
font-size: 24rpx; |
|||
} |
|||
|
|||
.schedule-content { |
|||
padding: 30rpx; |
|||
} |
|||
|
|||
.schedule-header { |
|||
margin-bottom: 30rpx; |
|||
} |
|||
|
|||
.course-title { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
font-size: 36rpx; |
|||
font-weight: bold; |
|||
color: #fff; |
|||
margin-bottom: 16rpx; |
|||
} |
|||
|
|||
.status-tag { |
|||
font-size: 24rpx; |
|||
padding: 4rpx 16rpx; |
|||
border-radius: 30rpx; |
|||
} |
|||
|
|||
.status-in-progress { |
|||
background-color: #FAD24E; |
|||
color: #333; |
|||
} |
|||
|
|||
.status-ended { |
|||
background-color: #e2e2e2; |
|||
color: #333; |
|||
} |
|||
|
|||
.status-not-started { |
|||
background-color: #1cd188; |
|||
color: #fff; |
|||
} |
|||
|
|||
.course-time { |
|||
font-size: 28rpx; |
|||
color: #FAD24E; |
|||
margin-bottom: 30rpx; |
|||
} |
|||
|
|||
.info-card { |
|||
background-color: #434544; |
|||
border-radius: 16rpx; |
|||
padding: 24rpx; |
|||
margin-bottom: 30rpx; |
|||
} |
|||
|
|||
.info-item { |
|||
display: flex; |
|||
margin-bottom: 20rpx; |
|||
} |
|||
|
|||
.info-label { |
|||
width: 160rpx; |
|||
font-size: 26rpx; |
|||
color: #ccc; |
|||
} |
|||
|
|||
.info-value { |
|||
flex: 1; |
|||
font-size: 26rpx; |
|||
color: #fff; |
|||
} |
|||
|
|||
.student-list-section { |
|||
background-color: #434544; |
|||
border-radius: 16rpx; |
|||
padding: 24rpx; |
|||
} |
|||
|
|||
.section-title { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding-bottom: 16rpx; |
|||
border-bottom: 1px solid #555; |
|||
margin-bottom: 20rpx; |
|||
} |
|||
|
|||
.section-title text { |
|||
font-size: 28rpx; |
|||
color: #fff; |
|||
} |
|||
|
|||
.student-list { |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 20rpx; |
|||
} |
|||
|
|||
.student-item { |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.student-avatar { |
|||
width: 80rpx; |
|||
height: 80rpx; |
|||
border-radius: 50%; |
|||
overflow: hidden; |
|||
background-color: #555; |
|||
margin-right: 20rpx; |
|||
} |
|||
|
|||
.student-avatar image { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
|
|||
.student-info { |
|||
flex: 1; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
} |
|||
|
|||
.student-name { |
|||
font-size: 28rpx; |
|||
color: #fff; |
|||
} |
|||
|
|||
.student-status { |
|||
font-size: 24rpx; |
|||
color: #ff6b6b; |
|||
background: rgba(255, 107, 107, 0.1); |
|||
padding: 4rpx 12rpx; |
|||
border-radius: 20rpx; |
|||
} |
|||
|
|||
.student-status.signed { |
|||
color: #1cd188; |
|||
background: rgba(28, 209, 136, 0.1); |
|||
} |
|||
|
|||
.empty-list { |
|||
padding: 40rpx 0; |
|||
text-align: center; |
|||
color: #999; |
|||
font-size: 28rpx; |
|||
} |
|||
|
|||
.footer-actions { |
|||
position: fixed; |
|||
bottom: 0; |
|||
left: 0; |
|||
right: 0; |
|||
display: flex; |
|||
padding: 30rpx; |
|||
gap: 20rpx; |
|||
background-color: #292929; |
|||
border-top: 1px solid #434544; |
|||
} |
|||
|
|||
.action-btn { |
|||
flex: 1; |
|||
height: 80rpx; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
border-radius: 8rpx; |
|||
font-size: 28rpx; |
|||
} |
|||
|
|||
.adjust-btn { |
|||
background-color: #555; |
|||
color: #fff; |
|||
} |
|||
|
|||
.sign-btn { |
|||
background-color: #29d3b4; |
|||
color: #fff; |
|||
} |
|||
</style> |
|||
@ -1,599 +0,0 @@ |
|||
<!--学员-详情--> |
|||
<template> |
|||
<view class="main_box"> |
|||
<!--学员信息--> |
|||
<view class="user_section"> |
|||
<view class="box"> |
|||
<view class="left"> |
|||
<image class="pic" :src="studentsInfo.customerResources.member.headimg"></image> |
|||
</view> |
|||
<view class="right"> |
|||
<view class="item"> |
|||
<view class="name">{{ studentsInfo.name }}</view> |
|||
<view class="age"> |
|||
{{ studentsInfo.customerResources.age }}岁 |
|||
</view> |
|||
</view> |
|||
<view class="item"> |
|||
<view class="title">电话：{{ studentsInfo.customerResources.phone_number }}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="main_section"> |
|||
<view class="section_box"> |
|||
<view class="tag_box"> |
|||
<view :class="['item', tabType=='1' ? 'select':'']" @click="tabChange(1)">出勤记录</view> |
|||
<view :class="['item', tabType=='2' ? 'select':'']" @click="tabChange(2)">体侧报告</view> |
|||
</view> |
|||
|
|||
<!--作业列表--> |
|||
<view v-if="tabType=='1'" class="section_1"> |
|||
<view class="ul"> |
|||
<view class="li" |
|||
v-for="(v,k) in assignmentsList" |
|||
:key="k" |
|||
@click="opebViewWorkDetails(v)"> |
|||
<view class="left"> |
|||
<view class="title">{{ v.courses_name }}</view> |
|||
<view class="date">上课时间：{{ v.submit_time }}</view> |
|||
</view> |
|||
<view class="right"> |
|||
<view v-if="v.status==1" class="btn" style="background-color: #e2e2e2;">作业未提交</view> |
|||
<view v-else-if="v.status==2" class="btn" style="background-color: #a4adb3;">待批改</view> |
|||
<view v-else-if="v.status==3" class="btn" style="background-color: #29d3b4;">作业已完成</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
|
|||
<!--评测报告--> |
|||
<view v-if="tabType=='2'" class="section_2"> |
|||
<scroll-view |
|||
class="ul" |
|||
scroll-y="true" |
|||
:lower-threshold="lowerThreshold" |
|||
@scrolltolower="loadMoreData" |
|||
style="height: 65vh;" |
|||
> |
|||
<view |
|||
class="li" |
|||
v-for="(v,k) in surveyList" |
|||
:key="k" @click="openViewPhysicalExamination(v)" |
|||
> |
|||
<view class="top"> |
|||
<view class="title">综合评分:{{ v.calculateChildHealthScore }}</view> |
|||
<!-- <view class="hint">打败了99%学员</view>--> |
|||
</view> |
|||
<view class="bottom">测试时间：{{ $util.formatToDateTime(v.created_at, 'Y-m-d') }}</view> |
|||
</view> |
|||
</scroll-view> |
|||
</view> |
|||
|
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
<!-- 底部导航--> |
|||
<!-- <AQTabber/>--> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import memberApi from '@/api/member.js' |
|||
import AQTabber from '@/components/AQ/AQTabber.vue' |
|||
import apiRoute from '@/api/apiRoute.js' |
|||
|
|||
export default { |
|||
components: { |
|||
AQTabber, |
|||
}, |
|||
data() { |
|||
return { |
|||
tabType: '1',//1=班级成员,2=作业任务 |
|||
Atype: 1,//1=作业完成,2=作业未提交 |
|||
|
|||
students_id: '',//学生id |
|||
studentsInfo: {},// 学生详情 |
|||
assignmentsList: [],// 作业列表 |
|||
|
|||
loading: false,//加载状态 |
|||
lowerThreshold: 100,//距离底部多远触发 |
|||
isReachedBottom: false,//防止重复加载|true=不可加载|false=可加载 |
|||
|
|||
//筛选条件 |
|||
filteredData: { |
|||
page: 1,//当前页码 |
|||
limit: 10,//每页返回数据条数 |
|||
total: 10,//数据总条数 |
|||
user_id: '',//学员id |
|||
}, |
|||
surveyList: [],//体测报告列表 |
|||
} |
|||
}, |
|||
onLoad(options) { |
|||
this.students_id = options.students_id//学生id |
|||
}, |
|||
onShow() { |
|||
this.init()//初始化 |
|||
}, |
|||
methods: { |
|||
//初始化 |
|||
async init() { |
|||
//获取学生详情 |
|||
await this.getStudentsInfo() |
|||
await this.getSurveyList() |
|||
}, |
|||
formatAgeMonth(input) { |
|||
let str = String(input) |
|||
// 分割小数点前后部分 |
|||
let [yearPart, monthPart] = str.split('.') |
|||
// 如果没有小数部分，默认为 0 |
|||
if (!monthPart) { |
|||
monthPart = '00' |
|||
} |
|||
// 如果是 00，则显示为 0 |
|||
monthPart = monthPart === '00' ? '0' : monthPart |
|||
return `${yearPart}岁${monthPart}月` |
|||
}, |
|||
//获取学生详情 |
|||
async getStudentsInfo() { |
|||
let data = { |
|||
students_id: this.students_id, |
|||
} |
|||
let res = await apiRoute.jlStudentsInfo(data) |
|||
if (res.code != 1) { |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: 'none', |
|||
}) |
|||
return |
|||
} |
|||
|
|||
this.studentsInfo = res.data//学生信息 |
|||
|
|||
this.assignmentsList = res.data.physical_test//作业列表 |
|||
this.filteredData.user_id = res.data.user_id |
|||
|
|||
}, |
|||
// 检查 expire_time 是否大于等于当前时间 5 天 |
|||
checkExpireTime(expireTime = '') { |
|||
if (!expireTime) { |
|||
return false |
|||
} |
|||
|
|||
const expireDate = new Date(expireTime) |
|||
const currentDate = new Date() |
|||
|
|||
// 计算天数差 |
|||
const timeDifference = expireDate - currentDate |
|||
const daysDifference = timeDifference / (1000 * 60 * 60 * 24) |
|||
|
|||
if (daysDifference >= 5) { |
|||
return true |
|||
} else { |
|||
return false |
|||
} |
|||
}, |
|||
|
|||
|
|||
//加载更多(下一页) |
|||
loadMoreData() { |
|||
//判断是否加载 |
|||
if (!this.isReachedBottom) { |
|||
this.isReachedBottom = true//设置为不可请求状态 |
|||
this.getSurveyList() |
|||
} |
|||
}, |
|||
//重置为第一页 |
|||
async resetFilteredData() { |
|||
this.isReachedBottom = false // 重置状态，以便下次触发加载更多 |
|||
|
|||
this.filteredData.page = 1//当前页码 |
|||
this.filteredData.limit = 10//每页返回数据条数 |
|||
this.filteredData.total = 10//数据总条数 |
|||
}, |
|||
//获取学生评测报告列表 |
|||
async getSurveyList() { |
|||
this.loading = true |
|||
|
|||
let data = { ...this.filteredData } |
|||
|
|||
//判断是否还有数据 |
|||
if ((this.filteredData.page - 1) * this.filteredData.limit >= this.filteredData.total) { |
|||
this.loading = false |
|||
uni.showToast({ |
|||
title: '暂无更多', |
|||
icon: 'none', |
|||
}) |
|||
return |
|||
} |
|||
|
|||
if (data.page == 1) { |
|||
this.surveyList = [] |
|||
} |
|||
|
|||
//学员-体测列表 |
|||
let res = await apiRoute.physicalTest(data) |
|||
this.loading = false |
|||
this.isReachedBottom = false |
|||
if (res.code != 1) { |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: 'none', |
|||
}) |
|||
return |
|||
} |
|||
|
|||
console.log(res, 111) |
|||
|
|||
this.surveyList = this.surveyList.concat(res.data.physical_test.data) // 使用 concat 方法 将新数据追加到数组中 |
|||
|
|||
console.log('列表', this.surveyList) |
|||
this.filteredData.total = res.data.total |
|||
this.filteredData.page++ |
|||
}, |
|||
|
|||
|
|||
//切换tab |
|||
tabChange(tabType) { |
|||
this.tabType = tabType |
|||
}, |
|||
|
|||
//打开课程详情 |
|||
openViewCourseInfo(item) { |
|||
this.$navigateTo({ |
|||
url: '/pages/coach/course/info', |
|||
}) |
|||
}, |
|||
//打开学员详情页 |
|||
openViewStudentInfo(item) { |
|||
this.$navigateTo({ |
|||
url: '/pages/coach/student/info', |
|||
}) |
|||
}, |
|||
|
|||
//打开体测报告 |
|||
openViewPhysicalExamination(item) { |
|||
let survey_id = item.id |
|||
this.$navigateTo({ |
|||
url: `/pages/coach/student/physical_examination?survey_id=${survey_id}`, |
|||
}) |
|||
}, |
|||
|
|||
//打开作业任务 |
|||
opebViewWorkDetails(item) { |
|||
this.$navigateTo({ |
|||
url: '/pages/coach/student/work_details', |
|||
}) |
|||
}, |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
|
|||
.main_box { |
|||
background: #292929; |
|||
min-height: 100vh; |
|||
} |
|||
|
|||
//自定义导航栏 |
|||
.navbar_section { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
background: #292929; |
|||
|
|||
.title { |
|||
padding: 40rpx 0rpx; |
|||
|
|||
/* 小程序端样式 */ |
|||
// #ifdef MP-WEIXIN |
|||
padding: 80rpx 0rpx; |
|||
// #endif |
|||
|
|||
font-size: 30rpx; |
|||
color: #fff; |
|||
} |
|||
} |
|||
|
|||
//学员信息 |
|||
.user_section { |
|||
background-color: #29D3B4; |
|||
padding-top: 58rpx; |
|||
padding-bottom: 42rpx; |
|||
|
|||
.box { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
gap: 15rpx; |
|||
|
|||
.left { |
|||
position: relative; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
width: 120rpx; |
|||
|
|||
.pic { |
|||
width: 92rpx; |
|||
height: 92rpx; |
|||
border-radius: 50%; |
|||
} |
|||
|
|||
.btn_box { |
|||
position: absolute; |
|||
bottom: -18rpx; |
|||
|
|||
.btn { |
|||
width: 120rpx; |
|||
height: 38rpx; |
|||
line-height: 40rpx; |
|||
border-radius: 4rpx; |
|||
background-color: rgba(245, 154, 35, 1); |
|||
color: rgba(255, 255, 255, 1); |
|||
font-size: 20rpx; |
|||
text-align: center; |
|||
border: 0rpx solid rgba(121, 121, 121, 1); |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
.right { |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 18rpx; |
|||
|
|||
.item { |
|||
color: #fff; |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
.name { |
|||
font-size: 28rpx; |
|||
} |
|||
|
|||
.age { |
|||
margin-left: 20rpx; |
|||
width: 128rpx; |
|||
height: 42rpx; |
|||
line-height: 42rpx; |
|||
border-radius: 34rpx; |
|||
background-color: rgba(255, 255, 255, 1); |
|||
color: rgba(51, 51, 51, 1); |
|||
font-size: 28rpx; |
|||
text-align: center; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
//课程信息 |
|||
.course_section { |
|||
position: relative; |
|||
|
|||
.main { |
|||
position: relative; |
|||
z-index: 2; |
|||
padding: 0 24rpx; |
|||
display: flex; |
|||
justify-content: center; |
|||
|
|||
.course_box { |
|||
padding: 42rpx 28rpx; |
|||
width: 692rpx; |
|||
border-radius: 20rpx; |
|||
background-color: #fff; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 20rpx; |
|||
position: relative; |
|||
|
|||
.item { |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 22rpx; |
|||
|
|||
.title { |
|||
font-size: 28rpx; |
|||
color: #333333; |
|||
} |
|||
|
|||
.pic { |
|||
width: 58rpx; |
|||
height: 58rpx; |
|||
border-radius: 50%; |
|||
} |
|||
|
|||
.name { |
|||
color: #333333; |
|||
font-size: 24rpx; |
|||
} |
|||
|
|||
.content { |
|||
color: #AAAAAA; |
|||
font-size: 24rpx; |
|||
} |
|||
} |
|||
|
|||
.tag { |
|||
position: absolute; |
|||
right: 0; |
|||
top: 0; |
|||
width: 110rpx; |
|||
height: 60rpx; |
|||
line-height: 60rpx; |
|||
border-radius: 0rpx 24rpx 0rpx 24rpx; |
|||
background-color: rgba(236, 128, 141, 1); |
|||
color: rgba(255, 255, 255, 1); |
|||
font-size: 24rpx; |
|||
text-align: center; |
|||
} |
|||
|
|||
.btn { |
|||
position: absolute; |
|||
right: 30rpx; |
|||
bottom: 50rpx; |
|||
width: 130rpx; |
|||
height: 48rpx; |
|||
line-height: 48rpx; |
|||
border-radius: 10rpx; |
|||
background-color: rgba(41, 211, 180, 0); |
|||
color: rgba(50, 219, 224, 1); |
|||
font-size: 24rpx; |
|||
text-align: center; |
|||
font-family: -regular; |
|||
border: 2rpx solid rgba(50, 219, 224, 1); |
|||
} |
|||
} |
|||
} |
|||
|
|||
.bg_box { |
|||
z-index: 1; |
|||
width: 100%; |
|||
height: 150rpx; |
|||
} |
|||
|
|||
.bg_top { |
|||
position: absolute; |
|||
top: 0; |
|||
background-color: #29D3B4; |
|||
} |
|||
|
|||
.bg_bottom { |
|||
top: 50%; |
|||
position: absolute; |
|||
background-color: #292929; |
|||
} |
|||
} |
|||
|
|||
.main_section { |
|||
background: #292929 100%; |
|||
padding: 0 24rpx; |
|||
padding-top: 40rpx; |
|||
padding-bottom: 150rpx; |
|||
font-size: 24rpx; |
|||
color: #333333; |
|||
|
|||
.section_box { |
|||
background: #fff; |
|||
border-radius: 16rpx; |
|||
padding: 34rpx 24rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
gap: 38rpx; |
|||
|
|||
.tag_box { |
|||
width: 100%; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
gap: 112rpx; |
|||
|
|||
.item { |
|||
width: 112rpx; |
|||
font-size: 28rpx; |
|||
} |
|||
|
|||
.select { |
|||
color: #29D3B4; |
|||
} |
|||
} |
|||
|
|||
//出勤记录 |
|||
.section_1 { |
|||
width: 100%; |
|||
|
|||
.ul { |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 12rpx; |
|||
|
|||
.li { |
|||
padding: 30rpx 20rpx; |
|||
border: 1px solid #29D3B4; |
|||
border-radius: 18rpx; |
|||
background-color: rgba(41, 211, 180, 0.16); |
|||
font-size: 26rpx; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
|
|||
.left { |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 15rpx; |
|||
} |
|||
|
|||
.right { |
|||
.btn { |
|||
width: 110rpx; |
|||
height: 44rpx; |
|||
line-height: 44rpx; |
|||
border-radius: 8rpx; |
|||
background-color: rgba(41, 211, 180, 1); |
|||
color: rgba(255, 255, 255, 1); |
|||
font-size: 20rpx; |
|||
text-align: center; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
//体测报告 |
|||
.section_2 { |
|||
width: 100%; |
|||
|
|||
.ul { |
|||
display: flex; |
|||
flex-direction: column; |
|||
|
|||
.li { |
|||
margin-bottom: 12rpx; |
|||
padding: 30rpx 20rpx; |
|||
border: 1px solid #29D3B4; |
|||
border-radius: 18rpx; |
|||
background-color: rgba(41, 211, 180, 0.16); |
|||
font-size: 26rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 20rpx; |
|||
|
|||
.top { |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 40rpx; |
|||
|
|||
.title { |
|||
font-size: 34rpx; |
|||
} |
|||
|
|||
.hint { |
|||
color: #F59A23; |
|||
font-size: 24rpx; |
|||
} |
|||
} |
|||
|
|||
.bottom { |
|||
} |
|||
|
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
} |
|||
|
|||
} |
|||
|
|||
|
|||
</style> |
|||
@ -1,499 +0,0 @@ |
|||
<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() { |
|||
this.$navigateToPage(`/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> |
|||
@ -1,130 +0,0 @@ |
|||
<!--作业详情--> |
|||
<template> |
|||
<view class="dark-theme"> |
|||
<!-- 作业展示--> |
|||
<view class="top-style" v-if="infoData.content_text"> |
|||
<video v-if="infoData.content_type == 2" class="pic" style="width: 100%;border-radius: 15rpx;" :src="$util.img(infoData.content_text)"></video> |
|||
<image v-if="infoData.content_type == 1" style="width: 100%;border-radius: 15rpx;" :src="$util.img(infoData.content_text)" mode="aspectFit"></image> |
|||
|
|||
<view v-if="infoData.content_type == 3" class="multi-line-ellipsis" v-html="infoData.content_text"></view> |
|||
</view> |
|||
|
|||
<!-- 简练信息+作业描述--> |
|||
<view class="below-style"> |
|||
<view class="head-img"> |
|||
<!--教练头像--> |
|||
<fui-avatar width="80" :src="$util.img(infoData.coach_pic)"></fui-avatar> |
|||
<view class="head-text">{{infoData.coach_name}}</view> |
|||
</view> |
|||
<view class="multi-line-ellipsis" v-html="infoData.description"></view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
import memberApi from '@/api/member.js'; |
|||
|
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
//筛选条件 |
|||
filteredData: { |
|||
id: '',//作业id |
|||
}, |
|||
|
|||
infoData: {}, |
|||
} |
|||
}, |
|||
onLoad(options) { |
|||
this.filteredData.id = options.id || '1' // 默认ID为1 |
|||
// 使用模拟数据 |
|||
// this.mockData() |
|||
}, |
|||
onShow(){ |
|||
this.init() // 初始化数据 - 已注释 |
|||
}, |
|||
methods: { |
|||
//初始化 |
|||
async init(){ |
|||
this.getAssignmentsInfo() // 已注释 |
|||
}, |
|||
|
|||
// 模拟数据 |
|||
mockData() { |
|||
this.infoData = { |
|||
student_file: '/static/icon-img/empty.png', |
|||
student_file_type: 1, // 1-图片，2-视频 |
|||
coach_pic: '/static/icon-img/default_avatar.png', |
|||
coach_name: '张教练', |
|||
content_text: '<p>这是一份作业的详细说明，包含了作业的要求和注意事项。</p><p>1. 请按照要求完成动作练习</p><p>2. 注意动作的标准性和连贯性</p><p>3. 完成后请上传视频或图片记录</p>' |
|||
} |
|||
}, |
|||
|
|||
//获取作业详情 - 已注释 |
|||
|
|||
async getAssignmentsInfo() { |
|||
let params = {...this.filteredData} |
|||
let res = await memberApi.assignmentsInfo(params) |
|||
if (res.code != 1) { |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
|
|||
this.infoData = res.data |
|||
}, |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.dark-theme { |
|||
background-color: #121212; |
|||
color: #ffffff; |
|||
min-height: 100vh; |
|||
padding-top: 0; |
|||
} |
|||
|
|||
.top-style{ |
|||
width: 92%; |
|||
height: 500rpx; |
|||
margin: auto; |
|||
margin-top: 0; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
background-color: #1e1e1e; |
|||
border-radius: 15rpx; |
|||
} |
|||
.top-style-img{ |
|||
width: 120rpx; |
|||
height: 120rpx; |
|||
} |
|||
.below-style{ |
|||
width: 92%; |
|||
margin: auto; |
|||
background-color: #1e1e1e; |
|||
border-radius: 15rpx; |
|||
margin-top: 20rpx; |
|||
padding: 20rpx 0; |
|||
} |
|||
.head-img { |
|||
display: flex; |
|||
align-items: center; |
|||
padding: 10rpx 20rpx; |
|||
} |
|||
.head-text { |
|||
color: #ffffff; |
|||
font-size: 35rpx; |
|||
padding-left: 20rpx; |
|||
} |
|||
.multi-line-ellipsis { |
|||
color: #e0e0e0; |
|||
font-size: 29rpx; |
|||
padding: 20rpx 30rpx; |
|||
line-height: 1.6; |
|||
} |
|||
</style> |
|||
@ -1,765 +0,0 @@ |
|||
<!--订单列表-列表--> |
|||
<template> |
|||
<view class="main_box"> |
|||
|
|||
<view class="main_section"> |
|||
<scroll-view |
|||
class="section_1" |
|||
scroll-y="true" |
|||
:lower-threshold="lowerThreshold" |
|||
@scrolltolower="loadMoreData" |
|||
style="height: 83vh;" |
|||
> |
|||
<view |
|||
class="item" |
|||
v-for="(v,k) in tableList" |
|||
:key="k" |
|||
> |
|||
<view class="top"> |
|||
<view class="title">订单状态：{{v.order_status == 'pending' ? '待支付':'已支付' }}</view> |
|||
<!-- <view class="btn" @click="downloadFile($util.img(v.file_data))">下载合同 <fui-icon name="arrowright" color="#A4ADB3" size="35"></fui-icon></view>--> |
|||
</view> |
|||
<view class="bottom"> |
|||
<view class="box"> |
|||
<view class="title">客户姓名：</view> |
|||
<view class="content">{{ v.resource_id_name || ''}}</view> |
|||
</view> |
|||
|
|||
<view class="box"> |
|||
<view class="title">付款类型：</view> |
|||
<view class="content"> |
|||
{{ v.payment_type === 'cash' ? '现金支付' : v.payment_type === 'scan_code' ? '扫码支付' : '订阅支付' }} |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="box"> |
|||
<view class="title">订单金额：</view> |
|||
<view class="content">￥{{ v.order_amount || ''}}</view> |
|||
</view> |
|||
|
|||
<view class="box"> |
|||
<view class="title">课程：</view> |
|||
<view class="content">{{ v.course_id_name || ''}}</view> |
|||
</view> |
|||
|
|||
<view class="box"> |
|||
<view class="title">班级：</view> |
|||
<view class="content">{{ v.class_id_name }}</view> |
|||
</view> |
|||
|
|||
<view class="box"> |
|||
<view class="title">人员：</view> |
|||
<view class="content">{{ v.staff_id_name || ''}}</view> |
|||
</view> |
|||
|
|||
<view class="box"> |
|||
<view class="title">支付时间：</view> |
|||
<view class="content">{{ v.payment_time || '' }}</view> |
|||
</view> |
|||
|
|||
</view> |
|||
</view> |
|||
|
|||
</scroll-view> |
|||
<!-- <view class="btn_section">--> |
|||
<!-- <view class="btn" style="background-color:#29d3b4;" @click="openOrderShow()">创建订单</view>--> |
|||
<!-- </view>--> |
|||
</view> |
|||
|
|||
<!--创建订单弹出层--> |
|||
<fui-modal class="order_modal" :buttons="[]" width="600" :show="order_show"> |
|||
<text class="fui-title">创建订单</text> |
|||
<text class="fui-descr"></text> |
|||
<fui-form class="form-section" ref="form" top="0" :model="formData" :show="false"> |
|||
<view class="input-style"> |
|||
<!--客户名称--> |
|||
<fui-form-item |
|||
label="客户名称" |
|||
labelSize='26' |
|||
prop="" |
|||
background='#fff' |
|||
labelColor='#000' |
|||
:bottomBorder='true' |
|||
> |
|||
<view class="input-title" style="margin-right:14rpx;"> |
|||
<fui-input |
|||
:disabled="true" |
|||
:borderBottom="false" |
|||
:padding="[0]" |
|||
placeholder="请输入客户名称" |
|||
v-model="formData.resource_id_name" |
|||
backgroundColor="#fff" |
|||
size="26" |
|||
color="#000" |
|||
></fui-input> |
|||
</view> |
|||
</fui-form-item> |
|||
|
|||
<!--付款类型--> |
|||
<fui-form-item |
|||
label="选择付款类型" |
|||
asterisk |
|||
asteriskPosition="right" |
|||
labelSize='26' |
|||
prop="" |
|||
background='#fff' |
|||
labelColor='#000' |
|||
:bottomBorder='true' |
|||
> |
|||
<view class="input-title" style="margin-right:14rpx;"> |
|||
<view |
|||
class="input-title" |
|||
style="margin-right:14rpx;" |
|||
@click="openPaymentType()"> |
|||
{{ (formData.payment_type) ? formData.payment_type_name : '点击选择' }} |
|||
</view> |
|||
</view> |
|||
<fui-picker |
|||
:linkage='true' |
|||
:options="payment_type_options" |
|||
:layer="1" |
|||
:show="payment_type_show" |
|||
@change="changePaymentType" |
|||
@cancel="cancelPaymentType"> |
|||
</fui-picker> |
|||
</fui-form-item> |
|||
|
|||
<!--课程--> |
|||
<fui-form-item |
|||
label="选择课程" |
|||
asterisk |
|||
asteriskPosition="right" |
|||
labelSize='26' |
|||
prop="" |
|||
background='#fff' |
|||
labelColor='#000' |
|||
:bottomBorder='true' |
|||
> |
|||
<view class="input-title" style="margin-right:14rpx;"> |
|||
<view |
|||
class="input-title" |
|||
style="margin-right:14rpx;" |
|||
@click="openCourseId()"> |
|||
{{ (formData.course_id) ? formData.course_id_name : '点击选择' }} |
|||
</view> |
|||
</view> |
|||
<fui-picker |
|||
:linkage='true' |
|||
:options="course_id_options" |
|||
:layer="1" |
|||
:show="course_id_show" |
|||
@change="changeCourseId" |
|||
@cancel="cancelCourseId"> |
|||
</fui-picker> |
|||
</fui-form-item> |
|||
|
|||
<!--班级--> |
|||
<fui-form-item |
|||
label="选择班级" |
|||
asterisk |
|||
asteriskPosition="right" |
|||
labelSize='26' |
|||
prop="" |
|||
background='#fff' |
|||
labelColor='#000' |
|||
:bottomBorder='true' |
|||
> |
|||
<view class="input-title" style="margin-right:14rpx;"> |
|||
<view |
|||
class="input-title" |
|||
style="margin-right:14rpx;" |
|||
@click="openClassId()"> |
|||
{{ (formData.class_id) ? formData.class_id_name : '点击选择' }} |
|||
</view> |
|||
</view> |
|||
<fui-picker |
|||
:linkage='true' |
|||
:options="class_id_options" |
|||
:layer="1" |
|||
:show="class_id_show" |
|||
@change="changeClassId" |
|||
@cancel="cancelClassId"> |
|||
</fui-picker> |
|||
</fui-form-item> |
|||
|
|||
<!--订单金额--> |
|||
<fui-form-item |
|||
label="订单金额" |
|||
labelSize='26' |
|||
prop="" |
|||
background='#fff' |
|||
labelColor='#000' |
|||
:bottomBorder='true' |
|||
> |
|||
<view class="input-title" style="margin-right:14rpx;"> |
|||
<fui-input |
|||
:disabled="true" |
|||
:borderBottom="false" |
|||
:padding="[0]" |
|||
placeholder="订单金额" |
|||
v-model="formData.money" |
|||
backgroundColor="#fff" |
|||
size="26" |
|||
color="#000" |
|||
></fui-input> |
|||
</view> |
|||
</fui-form-item> |
|||
</view> |
|||
<view class="button_box"> |
|||
<fui-button background="#fff" color="#414141" borderColor="#465CFF" btnSize="small" @click="closeOrderShow">取消</fui-button> |
|||
<fui-button background="#fff" color="#465CFF" borderColor="#465CFF" btnSize="small" @click="clickOrder({index:1})">确定</fui-button> |
|||
|
|||
</view> |
|||
</fui-form> |
|||
<view class="fui-icon__close" @tap="closeOrderShow"> |
|||
<fui-icon name="close" color="#B2B2B2" :size="48"></fui-icon> |
|||
</view> |
|||
</fui-modal> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import apiRoute from '@/api/apiRoute.js'; |
|||
|
|||
export default { |
|||
components: { |
|||
}, |
|||
data() { |
|||
return { |
|||
loading:false,//加载状态 |
|||
lowerThreshold: 100,//距离底部多远触发 |
|||
isReachedBottom: false,//防止重复加载|true=不可加载|false=可加载 |
|||
|
|||
//筛选条件 |
|||
filteredData:{ |
|||
page:1,//当前页码 |
|||
limit:10,//每页返回数据条数 |
|||
total:10,//数据总条数 |
|||
resource_id:'',//客户资源表id |
|||
}, |
|||
tableList:[],//聊天数据列表 |
|||
|
|||
//订单表单 |
|||
formData:{ |
|||
payment_type:'',//付款类型必填验证 |
|||
payment_type_name:'',//付款类型必填验证 |
|||
|
|||
course_id:'',//课程ID必填验证 |
|||
course_id_name:'',//课程ID必填验证 |
|||
|
|||
class_id:'',//班级ID必填验证 |
|||
class_id_name:'',//班级ID必填验证 |
|||
|
|||
staff_id:'',//员工ID必填验证 |
|||
staff_id_name:'',//员工ID必填验证 |
|||
|
|||
resource_id:'',//客户资源表ID必填验证 |
|||
resource_id_name:'',//客户资源表ID必填验证 |
|||
|
|||
money:'',//金额|这个不入库就展示先 |
|||
}, |
|||
|
|||
order_show:false,//创建订单弹出层是否显示|true=显示,false=隐藏 |
|||
|
|||
//付款类型-下拉选择器相关 |
|||
payment_type_options:[ |
|||
// { |
|||
// text:'张三', |
|||
// value:'1' |
|||
// }, |
|||
],//可选值列表 |
|||
payment_type_show:false,//下拉选择器是否展示 |
|||
|
|||
//课程-下拉选择器相关 |
|||
course_id_options:[ |
|||
// { |
|||
// text:'张三', |
|||
// value:'1', |
|||
// price:'1'//课程价格 |
|||
// }, |
|||
],//可选值列表 |
|||
course_id_show:false,//下拉选择器是否展示 |
|||
|
|||
//班级-下拉选择器相关 |
|||
class_id_options:[ |
|||
// { |
|||
// text:'张三', |
|||
// value:'1' |
|||
// }, |
|||
],//可选值列表 |
|||
class_id_show:false,//下拉选择器是否展示 |
|||
} |
|||
}, |
|||
onLoad(options) { |
|||
this.filteredData.resource_id = options.resource_id//客户资源表id |
|||
|
|||
this.formData.resource_id = options.resource_id//客户资源表id |
|||
this.formData.resource_id_name = options.resource_name//客户资源表id姓名 |
|||
|
|||
|
|||
this.formData.staff_id = options.staff_id//员工资源表id姓名 |
|||
this.formData.staff_id_name = options.staff_id_name//员工资源表id姓名 |
|||
}, |
|||
onShow(){ |
|||
this.init() |
|||
}, |
|||
//下拉刷新 |
|||
async onPullDownRefresh() { |
|||
//重置为第一页 |
|||
await this.resetFilteredData() |
|||
await this.getList() |
|||
}, |
|||
methods: { |
|||
//初始化 |
|||
async init(){ |
|||
//获取付款类型 |
|||
await this.getPaymentTypeList() |
|||
//获取课程列表 |
|||
await this.getCourseList() |
|||
//获取班级列表 |
|||
await this.getClassList() |
|||
|
|||
//获取列表 |
|||
await this.getList(); |
|||
}, |
|||
|
|||
//加载更多(下一页) |
|||
loadMoreData() { |
|||
//判断是否加载 |
|||
if (!this.isReachedBottom) { |
|||
this.isReachedBottom = true;//设置为不可请求状态 |
|||
this.getList(); |
|||
} |
|||
}, |
|||
//重置为第一页 |
|||
async resetFilteredData() { |
|||
this.isReachedBottom = false; // 重置状态，以便下次触发加载更多 |
|||
|
|||
this.filteredData.page = 1//当前页码 |
|||
this.filteredData.limit = 10//每页返回数据条数 |
|||
this.filteredData.total = 10//数据总条数 |
|||
}, |
|||
|
|||
//获取合同列表 |
|||
async getList(){ |
|||
this.loading = true |
|||
|
|||
let params = {...this.filteredData} |
|||
|
|||
//判断是否还有数据 |
|||
if ((this.filteredData.page - 1) * this.filteredData.limit >= this.filteredData.total) { |
|||
this.loading = false |
|||
uni.showToast({ |
|||
title: '暂无更多', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
|
|||
if(params.page == 1){ |
|||
this.tableList = [] |
|||
} |
|||
|
|||
let res = await apiRoute.xy_orderTableList(params)//获取订单列表 |
|||
this.loading = false |
|||
this.isReachedBottom = false; |
|||
if (res.code != 1){ |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
|
|||
this.tableList = this.tableList.concat(res.data.data); // 使用 concat 方法 将新数据追加到数组中 |
|||
// this.tableList.unshift(...res.data.data); // 将新数据插入到数组头部 |
|||
|
|||
console.log('列表',this.tableList) |
|||
this.filteredData.total = res.data.total |
|||
this.filteredData.page++ |
|||
}, |
|||
|
|||
//获取付款类型 |
|||
async getPaymentTypeList(){ |
|||
let res = await apiRoute.common_Dictionary({key:'payment_type'}) |
|||
if(res.code != 1){ |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
|
|||
let dictionary = res.data.dictionary |
|||
let arr = [] |
|||
dictionary.forEach((v,k)=>{ |
|||
arr.push({ |
|||
text: v.name, |
|||
value: v.value, |
|||
}) |
|||
}) |
|||
this.payment_type_options = arr |
|||
console.log('付款类型',this.payment_type_options) |
|||
}, |
|||
//获取课程列表 |
|||
async getCourseList(){ |
|||
let params = {} |
|||
|
|||
let res = await apiRoute.common_getCourseAll(params) |
|||
if(res.code != 1){ |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
|
|||
|
|||
let arr = [] |
|||
res.data.forEach((v,k)=>{ |
|||
arr.push({ |
|||
text: `${v.course_name}`, |
|||
value: v.id, |
|||
price: v.price, |
|||
}) |
|||
}) |
|||
this.course_id_options = arr |
|||
console.log('课程列表',this.course_id_options) |
|||
|
|||
}, |
|||
//获取班级列表 |
|||
async getClassList(){ |
|||
let params = { |
|||
status:1,//班级状态(1开启 2关闭) |
|||
} |
|||
|
|||
let res = await apiRoute.common_getClassAll(params) |
|||
if(res.code != 1){ |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
console.log('班级列表',res.data) |
|||
let arr = [] |
|||
res.data.forEach((v,k)=>{ |
|||
arr.push({ |
|||
text: `${v.campus_name}-${v.class_name}`, |
|||
value: v.id, |
|||
}) |
|||
}) |
|||
this.class_id_options = arr |
|||
}, |
|||
|
|||
|
|||
|
|||
|
|||
//创建订单相关 |
|||
//显示创建订单弹窗 |
|||
openOrderShow(){ |
|||
//重置的数据 |
|||
this.formData.payment_type = ''//付款类型必填验证 |
|||
this.formData.payment_type_name = ''//付款类型必填验证 |
|||
|
|||
this.formData.course_id = ''//课程ID必填验证 |
|||
this.formData.course_id_name = ''//课程ID必填验证 |
|||
|
|||
this.formData.class_id = ''//班级ID必填验证 |
|||
this.formData.class_id_name = ''//班级ID必填验证 |
|||
|
|||
this.formData.money = ''//金额|这个不入库就展示先 |
|||
|
|||
this.order_show = true//展示弹层 |
|||
}, |
|||
//关闭打卡弹窗 |
|||
closeOrderShow(){ |
|||
this.order_show = false |
|||
}, |
|||
//监听-打卡签到回调 |
|||
async clickOrder(e){ |
|||
if(e.index == 0){ |
|||
//取消按钮 |
|||
this.closeOrderShow() |
|||
}else{ |
|||
console.log('提交',this.formData) |
|||
await this.submitFormData() |
|||
} |
|||
}, |
|||
//提交表单 |
|||
async submitFormData() { |
|||
let param = {...this.formData} |
|||
//表单验证 |
|||
//... |
|||
if(!param.class_id){ |
|||
uni.showToast({ |
|||
title: '请选择班级', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
if(!param.course_id){ |
|||
uni.showToast({ |
|||
title: '请选择课程', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
if(!param.payment_type){ |
|||
uni.showToast({ |
|||
title: '请选择付款类型', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
|
|||
console.log('提交xxx',param) |
|||
this.closeOrderShow() |
|||
|
|||
let res = await apiRoute.xy_orderTableAdd(param) |
|||
if (res.code != 1) { |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
|
|||
uni.showToast({ |
|||
title: '操作成功', |
|||
icon: 'success' |
|||
}) |
|||
|
|||
//延迟1s执行 |
|||
setTimeout(() => { |
|||
this.resetFilteredData()//重置表单 |
|||
this.getList();//刷新列表 |
|||
}, 1500) |
|||
}, |
|||
|
|||
|
|||
//下拉选择器相关-付款类型 |
|||
//监听-付款类型 |
|||
changePaymentType(e){ |
|||
this.formData.payment_type = e.value |
|||
this.formData.payment_type_name = e.text |
|||
this.cancelPaymentType() |
|||
}, |
|||
//打开选择器-付款类型 |
|||
openPaymentType(){ |
|||
this.payment_type_show = true |
|||
}, |
|||
//关闭选择器-付款类型 |
|||
cancelPaymentType(){ |
|||
this.payment_type_show = false |
|||
}, |
|||
|
|||
//下拉选择器相关-课程 |
|||
//监听-课程 |
|||
changeCourseId(e){ |
|||
console.log('课程',e) |
|||
this.formData.course_id = e.value |
|||
this.formData.course_id_name = e.text |
|||
|
|||
this.formData.money = this.course_id_options.find(v=>v.value == e.value).price |
|||
|
|||
// console.log('课程formData',this.formData) |
|||
this.cancelCourseId() |
|||
}, |
|||
//打开选择器-课程 |
|||
openCourseId(){ |
|||
this.course_id_show = true |
|||
}, |
|||
//关闭选择器-课程 |
|||
cancelCourseId(){ |
|||
this.course_id_show = false |
|||
}, |
|||
|
|||
//下拉选择器相关-班级 |
|||
//监听-班级 |
|||
changeClassId(e){ |
|||
this.formData.class_id = e.value |
|||
this.formData.class_id_name = e.text |
|||
this.cancelClassId() |
|||
}, |
|||
//打开选择器-班级 |
|||
openClassId(){ |
|||
this.class_id_show = true |
|||
}, |
|||
//关闭选择器-班级 |
|||
cancelClassId(){ |
|||
this.class_id_show = false |
|||
}, |
|||
|
|||
//下载文件 |
|||
async downloadFile(fileUrl) { |
|||
if (!fileUrl) { |
|||
this.$util.showToast({ |
|||
title: '暂无电子发票' |
|||
}); |
|||
return false; |
|||
} |
|||
|
|||
uni.downloadFile({ |
|||
url: fileUrl, |
|||
success: function (res) { |
|||
console.log('下载成功'); |
|||
// uni.openDocument({ |
|||
// filePath: res.tempFilePath, |
|||
// fileType: 'pdf', |
|||
// success: function (res) { |
|||
// console.log('打开文档成功'); |
|||
// } |
|||
// }); |
|||
} |
|||
}); |
|||
|
|||
} |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.main_box { |
|||
background: #292929; |
|||
} |
|||
|
|||
//自定义导航栏 |
|||
.navbar_section { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
background: #29d3b4; |
|||
|
|||
.title { |
|||
padding: 20rpx 0; |
|||
font-size: 30rpx; |
|||
color: #315d55; |
|||
} |
|||
} |
|||
|
|||
.main_section { |
|||
min-height: 100vh; |
|||
background: #292929 100%; |
|||
padding: 0 0rpx; |
|||
padding-top: 32rpx; |
|||
padding-bottom: 150rpx; |
|||
font-size: 28rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 20rpx; |
|||
|
|||
.section { |
|||
background-color: #434544; |
|||
padding: 40rpx 40rpx; |
|||
} |
|||
|
|||
.section_1{ |
|||
padding: 0 24rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
|
|||
.item{ |
|||
margin-bottom: 38rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
padding: 32rpx 24rpx; |
|||
border-radius: 14rpx; |
|||
background-color: #434544; |
|||
color: #fff; |
|||
.top{ |
|||
font-size: 28rpx; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
.title{ |
|||
font-size: 30rpx; |
|||
} |
|||
.btn{ |
|||
display: flex; |
|||
align-items: center; |
|||
color: #29D3B4; |
|||
} |
|||
} |
|||
.bottom{ |
|||
font-size: 26rpx; |
|||
margin-top: 25rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 15rpx; |
|||
.box{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
.title{ |
|||
width: 180rpx; |
|||
} |
|||
.content{ |
|||
width: 100%; |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
} |
|||
|
|||
.btn_section{ |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
.btn{ |
|||
border-radius: 10rpx; |
|||
padding: 15rpx 0; |
|||
width: 70%; |
|||
color: #fff; |
|||
font-size: 30rpx; |
|||
text-align: center; |
|||
} |
|||
} |
|||
|
|||
|
|||
|
|||
} |
|||
|
|||
.describe { |
|||
color: #999999; |
|||
padding-left: 30rpx; |
|||
} |
|||
|
|||
|
|||
//创建订单弹出层 |
|||
.order_modal{ |
|||
.fui-title { |
|||
font-size: 32rpx; |
|||
padding-top: 24rpx; |
|||
} |
|||
|
|||
.fui-descr { |
|||
font-size: 24rpx; |
|||
color: #B2B2B2; |
|||
padding-top: 12rpx; |
|||
padding-bottom: 48rpx; |
|||
} |
|||
|
|||
.fui-icon__close { |
|||
position: absolute; |
|||
right: 24rpx; |
|||
top: 20rpx; |
|||
} |
|||
|
|||
.form-section{ |
|||
|
|||
.input-style { |
|||
text-align: right !important; |
|||
.input-title{} |
|||
} |
|||
.button_box{ |
|||
margin-top: 30rpx; |
|||
padding: 20rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
gap: 20rpx; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,542 +0,0 @@ |
|||
<template> |
|||
<view class="container"> |
|||
<view class="header"> |
|||
<text class="title">字典获取优化演示</text> |
|||
<text class="subtitle">对比原方式和批量获取的性能差异</text> |
|||
</view> |
|||
|
|||
<!-- 性能对比 --> |
|||
<view class="performance-section"> |
|||
<view class="section-title">性能对比</view> |
|||
|
|||
<!-- 原有方式 --> |
|||
<view class="test-item"> |
|||
<view class="test-header"> |
|||
<text class="test-name">原方式（单个获取）</text> |
|||
<button |
|||
class="test-btn old-style" |
|||
@click="testOldMethod" |
|||
:disabled="oldTesting"> |
|||
{{ oldTesting ? '测试中...' : '开始测试' }} |
|||
</button> |
|||
</view> |
|||
<view class="test-result" v-if="oldResult"> |
|||
<text class="result-text">耗时: {{ oldResult.time }}ms</text> |
|||
<text class="result-text">请求次数: {{ oldResult.requests }}次</text> |
|||
<text class="result-text">获取数据: {{ oldResult.count }}个字典</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 新方式 --> |
|||
<view class="test-item"> |
|||
<view class="test-header"> |
|||
<text class="test-name">新方式（批量获取）</text> |
|||
<button |
|||
class="test-btn new-style" |
|||
@click="testNewMethod" |
|||
:disabled="newTesting"> |
|||
{{ newTesting ? '测试中...' : '开始测试' }} |
|||
</button> |
|||
</view> |
|||
<view class="test-result" v-if="newResult"> |
|||
<text class="result-text">耗时: {{ newResult.time }}ms</text> |
|||
<text class="result-text">请求次数: {{ newResult.requests }}次</text> |
|||
<text class="result-text">获取数据: {{ newResult.count }}个字典</text> |
|||
<text class="improvement"> |
|||
性能提升: {{ newResult.improvement }} |
|||
</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 缓存演示 --> |
|||
<view class="cache-section"> |
|||
<view class="section-title">缓存机制演示</view> |
|||
|
|||
<view class="cache-controls"> |
|||
<button class="cache-btn" @click="testCache">测试缓存效果</button> |
|||
<button class="cache-btn clear" @click="clearCache">清除缓存</button> |
|||
</view> |
|||
|
|||
<view class="cache-result" v-if="cacheResult"> |
|||
<text class="cache-text">第一次获取: {{ cacheResult.firstTime }}ms</text> |
|||
<text class="cache-text">缓存获取: {{ cacheResult.cacheTime }}ms</text> |
|||
<text class="cache-text">性能提升: {{ cacheResult.improvement }}</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 字典数据展示 --> |
|||
<view class="data-section"> |
|||
<view class="section-title">字典数据展示</view> |
|||
|
|||
<view class="dict-tabs"> |
|||
<view |
|||
class="tab-item" |
|||
:class="{ active: activeTab === key }" |
|||
v-for="(data, key) in dictData" |
|||
:key="key" |
|||
@click="activeTab = key"> |
|||
{{ getDictDisplayName(key) }} |
|||
</view> |
|||
</view> |
|||
|
|||
<scroll-view class="dict-content" scroll-y> |
|||
<view class="dict-items" v-if="dictData[activeTab]"> |
|||
<view |
|||
class="dict-item" |
|||
v-for="(item, index) in dictData[activeTab]" |
|||
:key="index"> |
|||
<text class="item-name">{{ item.name || item.text || '-' }}</text> |
|||
<text class="item-value">{{ item.value || '-' }}</text> |
|||
</view> |
|||
</view> |
|||
<view class="empty-state" v-else> |
|||
<text>暂无数据</text> |
|||
</view> |
|||
</scroll-view> |
|||
</view> |
|||
|
|||
<!-- 使用说明 --> |
|||
<view class="usage-section"> |
|||
<view class="section-title">使用说明</view> |
|||
<view class="usage-content"> |
|||
<text class="usage-text">1. 使用 dictUtil.getBatchDict() 批量获取字典</text> |
|||
<text class="usage-text">2. 支持自动缓存，30分钟有效期</text> |
|||
<text class="usage-text">3. 支持业务场景批量获取</text> |
|||
<text class="usage-text">4. 向后兼容原有 util.getDict() 方法</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import dictUtil from '@/common/dictUtil.js' |
|||
import util from '@/common/util.js' |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
// 测试状态 |
|||
oldTesting: false, |
|||
newTesting: false, |
|||
|
|||
// 测试结果 |
|||
oldResult: null, |
|||
newResult: null, |
|||
cacheResult: null, |
|||
|
|||
// 字典数据 |
|||
dictData: {}, |
|||
activeTab: '', |
|||
|
|||
// 测试用的字典keys |
|||
testKeys: [ |
|||
'SourceChannel', |
|||
'source', |
|||
'customer_purchasing_power', |
|||
'preliminarycustomerintention', |
|||
'cognitive_concept', |
|||
'kh_status', |
|||
'decision_maker', |
|||
'distance' |
|||
] |
|||
} |
|||
}, |
|||
onLoad() { |
|||
// 初始化时获取一次字典数据用于展示 |
|||
this.loadInitialData() |
|||
}, |
|||
methods: { |
|||
// 加载初始数据 |
|||
async loadInitialData() { |
|||
try { |
|||
const data = await dictUtil.getBatchDict(this.testKeys) |
|||
this.dictData = data |
|||
this.activeTab = Object.keys(data)[0] || '' |
|||
} catch (error) { |
|||
console.error('加载初始数据失败:', error) |
|||
} |
|||
}, |
|||
|
|||
// 测试原有方式（单个获取） |
|||
async testOldMethod() { |
|||
this.oldTesting = true |
|||
this.oldResult = null |
|||
|
|||
try { |
|||
const startTime = Date.now() |
|||
let successCount = 0 |
|||
|
|||
// 模拟原有的单个获取方式 |
|||
for (const key of this.testKeys) { |
|||
try { |
|||
await this.getOldDict(key) |
|||
successCount++ |
|||
} catch (error) { |
|||
console.warn(`获取字典 ${key} 失败:`, error) |
|||
} |
|||
} |
|||
|
|||
const endTime = Date.now() |
|||
const totalTime = endTime - startTime |
|||
|
|||
this.oldResult = { |
|||
time: totalTime, |
|||
requests: this.testKeys.length, |
|||
count: successCount |
|||
} |
|||
|
|||
uni.showToast({ |
|||
title: `原方式完成，耗时 ${totalTime}ms`, |
|||
icon: 'none' |
|||
}) |
|||
|
|||
} catch (error) { |
|||
console.error('测试原方式失败:', error) |
|||
uni.showToast({ |
|||
title: '测试失败', |
|||
icon: 'none' |
|||
}) |
|||
} finally { |
|||
this.oldTesting = false |
|||
} |
|||
}, |
|||
|
|||
// 测试新方式（批量获取） |
|||
async testNewMethod() { |
|||
this.newTesting = true |
|||
this.newResult = null |
|||
|
|||
try { |
|||
const startTime = Date.now() |
|||
|
|||
// 使用新的批量获取方式 |
|||
const data = await dictUtil.getBatchDict(this.testKeys, false) // 不使用缓存进行公平测试 |
|||
|
|||
const endTime = Date.now() |
|||
const totalTime = endTime - startTime |
|||
const successCount = Object.keys(data).length |
|||
|
|||
this.newResult = { |
|||
time: totalTime, |
|||
requests: 1, // 批量获取只需要1次请求 |
|||
count: successCount |
|||
} |
|||
|
|||
// 计算性能提升 |
|||
if (this.oldResult) { |
|||
const improvement = Math.round(((this.oldResult.time - totalTime) / this.oldResult.time) * 100) |
|||
this.newResult.improvement = `${improvement}%` |
|||
} |
|||
|
|||
// 更新展示数据 |
|||
this.dictData = data |
|||
|
|||
uni.showToast({ |
|||
title: `新方式完成，耗时 ${totalTime}ms`, |
|||
icon: 'none' |
|||
}) |
|||
|
|||
} catch (error) { |
|||
console.error('测试新方式失败:', error) |
|||
uni.showToast({ |
|||
title: '测试失败', |
|||
icon: 'none' |
|||
}) |
|||
} finally { |
|||
this.newTesting = false |
|||
} |
|||
}, |
|||
|
|||
// 模拟原有的单个字典获取 |
|||
async getOldDict(key) { |
|||
return new Promise((resolve, reject) => { |
|||
// 模拟单个接口请求的延迟 |
|||
setTimeout(async () => { |
|||
try { |
|||
// 这里可以调用原有的获取方法，或者模拟 |
|||
const result = await dictUtil.getDict(key, false) |
|||
resolve(result) |
|||
} catch (error) { |
|||
reject(error) |
|||
} |
|||
}, Math.random() * 200 + 100) // 模拟 100-300ms 的网络延迟 |
|||
}) |
|||
}, |
|||
|
|||
// 测试缓存效果 |
|||
async testCache() { |
|||
try { |
|||
// 清除缓存确保公平测试 |
|||
dictUtil.clearCache() |
|||
|
|||
// 第一次获取（无缓存） |
|||
const startTime1 = Date.now() |
|||
await dictUtil.getBatchDict(this.testKeys.slice(0, 3), true) |
|||
const firstTime = Date.now() - startTime1 |
|||
|
|||
// 第二次获取（有缓存） |
|||
const startTime2 = Date.now() |
|||
await dictUtil.getBatchDict(this.testKeys.slice(0, 3), true) |
|||
const cacheTime = Date.now() - startTime2 |
|||
|
|||
const improvement = Math.round(((firstTime - cacheTime) / firstTime) * 100) |
|||
|
|||
this.cacheResult = { |
|||
firstTime, |
|||
cacheTime, |
|||
improvement: `${improvement}%` |
|||
} |
|||
|
|||
uni.showToast({ |
|||
title: '缓存测试完成', |
|||
icon: 'success' |
|||
}) |
|||
|
|||
} catch (error) { |
|||
console.error('缓存测试失败:', error) |
|||
uni.showToast({ |
|||
title: '缓存测试失败', |
|||
icon: 'none' |
|||
}) |
|||
} |
|||
}, |
|||
|
|||
// 清除缓存 |
|||
clearCache() { |
|||
dictUtil.clearCache() |
|||
this.cacheResult = null |
|||
uni.showToast({ |
|||
title: '缓存已清除', |
|||
icon: 'success' |
|||
}) |
|||
}, |
|||
|
|||
// 获取字典显示名称 |
|||
getDictDisplayName(key) { |
|||
const nameMap = { |
|||
'SourceChannel': '来源渠道', |
|||
'source': '来源', |
|||
'customer_purchasing_power': '购买力', |
|||
'preliminarycustomerintention': '意向度', |
|||
'cognitive_concept': '认知理念', |
|||
'kh_status': '客户状态', |
|||
'decision_maker': '决策人', |
|||
'distance': '距离' |
|||
} |
|||
return nameMap[key] || key |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.container { |
|||
padding: 20rpx; |
|||
background: #f5f5f5; |
|||
min-height: 100vh; |
|||
} |
|||
|
|||
.header { |
|||
background: #fff; |
|||
padding: 30rpx; |
|||
border-radius: 12rpx; |
|||
margin-bottom: 20rpx; |
|||
text-align: center; |
|||
|
|||
.title { |
|||
font-size: 36rpx; |
|||
font-weight: 600; |
|||
color: #333; |
|||
display: block; |
|||
margin-bottom: 10rpx; |
|||
} |
|||
|
|||
.subtitle { |
|||
font-size: 26rpx; |
|||
color: #666; |
|||
display: block; |
|||
} |
|||
} |
|||
|
|||
.performance-section, .cache-section, .data-section, .usage-section { |
|||
background: #fff; |
|||
border-radius: 12rpx; |
|||
padding: 30rpx; |
|||
margin-bottom: 20rpx; |
|||
} |
|||
|
|||
.section-title { |
|||
font-size: 32rpx; |
|||
font-weight: 600; |
|||
color: #333; |
|||
margin-bottom: 20rpx; |
|||
border-left: 4rpx solid #29d3b4; |
|||
padding-left: 16rpx; |
|||
} |
|||
|
|||
.test-item { |
|||
margin-bottom: 30rpx; |
|||
padding: 20rpx; |
|||
background: #f8f9fa; |
|||
border-radius: 8rpx; |
|||
|
|||
&:last-child { |
|||
margin-bottom: 0; |
|||
} |
|||
} |
|||
|
|||
.test-header { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
margin-bottom: 15rpx; |
|||
|
|||
.test-name { |
|||
font-size: 28rpx; |
|||
font-weight: 500; |
|||
color: #333; |
|||
} |
|||
|
|||
.test-btn { |
|||
padding: 12rpx 24rpx; |
|||
border-radius: 6rpx; |
|||
border: none; |
|||
font-size: 24rpx; |
|||
color: #fff; |
|||
|
|||
&.old-style { |
|||
background: #ff6b6b; |
|||
} |
|||
|
|||
&.new-style { |
|||
background: #29d3b4; |
|||
} |
|||
|
|||
&:disabled { |
|||
opacity: 0.6; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.test-result { |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 8rpx; |
|||
|
|||
.result-text { |
|||
font-size: 24rpx; |
|||
color: #666; |
|||
} |
|||
|
|||
.improvement { |
|||
font-size: 26rpx; |
|||
color: #29d3b4; |
|||
font-weight: 600; |
|||
} |
|||
} |
|||
|
|||
.cache-controls { |
|||
display: flex; |
|||
gap: 20rpx; |
|||
margin-bottom: 20rpx; |
|||
|
|||
.cache-btn { |
|||
flex: 1; |
|||
padding: 16rpx; |
|||
border-radius: 8rpx; |
|||
border: none; |
|||
font-size: 26rpx; |
|||
color: #fff; |
|||
background: #29d3b4; |
|||
|
|||
&.clear { |
|||
background: #ff6b6b; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.cache-result { |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 8rpx; |
|||
|
|||
.cache-text { |
|||
font-size: 24rpx; |
|||
color: #666; |
|||
} |
|||
} |
|||
|
|||
.dict-tabs { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
gap: 10rpx; |
|||
margin-bottom: 20rpx; |
|||
|
|||
.tab-item { |
|||
padding: 12rpx 20rpx; |
|||
background: #f0f0f0; |
|||
border-radius: 20rpx; |
|||
font-size: 24rpx; |
|||
color: #666; |
|||
|
|||
&.active { |
|||
background: #29d3b4; |
|||
color: #fff; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.dict-content { |
|||
height: 400rpx; |
|||
border: 1rpx solid #eee; |
|||
border-radius: 8rpx; |
|||
} |
|||
|
|||
.dict-items { |
|||
padding: 20rpx; |
|||
} |
|||
|
|||
.dict-item { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding: 16rpx 0; |
|||
border-bottom: 1rpx solid #f0f0f0; |
|||
|
|||
&:last-child { |
|||
border-bottom: none; |
|||
} |
|||
|
|||
.item-name { |
|||
font-size: 26rpx; |
|||
color: #333; |
|||
flex: 1; |
|||
} |
|||
|
|||
.item-value { |
|||
font-size: 24rpx; |
|||
color: #666; |
|||
margin-left: 20rpx; |
|||
} |
|||
} |
|||
|
|||
.empty-state { |
|||
padding: 60rpx; |
|||
text-align: center; |
|||
color: #999; |
|||
font-size: 26rpx; |
|||
} |
|||
|
|||
.usage-content { |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 12rpx; |
|||
|
|||
.usage-text { |
|||
font-size: 26rpx; |
|||
color: #666; |
|||
line-height: 1.6; |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,352 +0,0 @@ |
|||
<template> |
|||
<view class="mock-demo"> |
|||
<view class="header"> |
|||
<text class="title">Mock数据演示</text> |
|||
<view class="env-info"> |
|||
<text class="env-label">当前环境: {{ envInfo.env }}</text> |
|||
<text class="mock-status" :class="{ active: envInfo.mockEnabled }"> |
|||
Mock状态: {{ envInfo.mockEnabled ? '已开启' : '已关闭' }} |
|||
</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="content"> |
|||
<!-- 用户信息展示 --> |
|||
<view class="section"> |
|||
<view class="section-title">用户信息</view> |
|||
<view class="user-card" v-if="userInfo"> |
|||
<image class="avatar" :src="userInfo.avatar" mode="aspectFill"></image> |
|||
<view class="user-details"> |
|||
<text class="username">{{ userInfo.username }}</text> |
|||
<text class="phone">{{ userInfo.phone }}</text> |
|||
<text class="email">{{ userInfo.email }}</text> |
|||
</view> |
|||
</view> |
|||
<view class="loading" v-else> |
|||
<text>加载中...</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 课程表展示 --> |
|||
<view class="section"> |
|||
<view class="section-title">今日课程</view> |
|||
<view class="schedule-list"> |
|||
<view class="schedule-item" v-for="item in scheduleList" :key="item.id"> |
|||
<view class="time">{{ item.start_time }} - {{ item.end_time }}</view> |
|||
<view class="course-info"> |
|||
<text class="course-name">{{ item.course_name }}</text> |
|||
<text class="teacher">{{ item.teacher_name }}</text> |
|||
<text class="classroom">{{ item.classroom }}</text> |
|||
</view> |
|||
<view class="status" :class="item.status"> |
|||
{{ getStatusText(item.status) }} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 操作按钮 --> |
|||
<view class="actions"> |
|||
<button class="btn primary" @click="refreshData">刷新数据</button> |
|||
<button class="btn secondary" @click="toggleMock"> |
|||
{{ envInfo.mockEnabled ? '关闭Mock' : '开启Mock' }} |
|||
</button> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import { Api_url, isMockEnabled, isDebug, env } from '@/common/config.js' |
|||
import http from '@/common/axios.js' |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
userInfo: null, |
|||
scheduleList: [], |
|||
envInfo: { |
|||
env: env, |
|||
mockEnabled: isMockEnabled, |
|||
debug: isDebug |
|||
} |
|||
} |
|||
}, |
|||
|
|||
onLoad() { |
|||
this.loadData() |
|||
}, |
|||
|
|||
methods: { |
|||
async loadData() { |
|||
try { |
|||
// 加载用户信息 |
|||
await this.loadUserInfo() |
|||
// 加载课程表 |
|||
await this.loadSchedule() |
|||
} catch (error) { |
|||
console.error('数据加载失败:', error) |
|||
uni.showToast({ |
|||
title: '数据加载失败', |
|||
icon: 'none' |
|||
}) |
|||
} |
|||
}, |
|||
|
|||
async loadUserInfo() { |
|||
try { |
|||
const response = await http.get('/user/info') |
|||
this.userInfo = response.data |
|||
} catch (error) { |
|||
console.error('用户信息加载失败:', error) |
|||
} |
|||
}, |
|||
|
|||
async loadSchedule() { |
|||
try { |
|||
const response = await http.get('/student/schedule') |
|||
this.scheduleList = response.data || [] |
|||
} catch (error) { |
|||
console.error('课程表加载失败:', error) |
|||
} |
|||
}, |
|||
|
|||
async refreshData() { |
|||
uni.showLoading({ |
|||
title: '刷新中...' |
|||
}) |
|||
|
|||
try { |
|||
await this.loadData() |
|||
uni.showToast({ |
|||
title: '刷新成功', |
|||
icon: 'success' |
|||
}) |
|||
} catch (error) { |
|||
uni.showToast({ |
|||
title: '刷新失败', |
|||
icon: 'none' |
|||
}) |
|||
} finally { |
|||
uni.hideLoading() |
|||
} |
|||
}, |
|||
|
|||
toggleMock() { |
|||
// 这里只是演示，实际需要重新配置环境变量 |
|||
uni.showModal({ |
|||
title: '提示', |
|||
content: 'Mock开关需要在环境变量中配置，请修改.env文件中的VUE_APP_MOCK_ENABLED参数', |
|||
showCancel: false |
|||
}) |
|||
}, |
|||
|
|||
getStatusText(status) { |
|||
const statusMap = { |
|||
scheduled: '已安排', |
|||
completed: '已完成', |
|||
cancelled: '已取消' |
|||
} |
|||
return statusMap[status] || status |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.mock-demo { |
|||
padding: 20rpx; |
|||
background-color: #f8f9fa; |
|||
min-height: 100vh; |
|||
} |
|||
|
|||
.header { |
|||
background: white; |
|||
padding: 30rpx; |
|||
border-radius: 20rpx; |
|||
margin-bottom: 30rpx; |
|||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1); |
|||
} |
|||
|
|||
.title { |
|||
font-size: 36rpx; |
|||
font-weight: bold; |
|||
color: #333; |
|||
display: block; |
|||
margin-bottom: 20rpx; |
|||
} |
|||
|
|||
.env-info { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
} |
|||
|
|||
.env-label { |
|||
font-size: 28rpx; |
|||
color: #666; |
|||
} |
|||
|
|||
.mock-status { |
|||
font-size: 28rpx; |
|||
color: #999; |
|||
padding: 10rpx 20rpx; |
|||
border-radius: 10rpx; |
|||
background: #f5f5f5; |
|||
} |
|||
|
|||
.mock-status.active { |
|||
color: #52c41a; |
|||
background: #f6ffed; |
|||
} |
|||
|
|||
.content { |
|||
flex: 1; |
|||
} |
|||
|
|||
.section { |
|||
background: white; |
|||
padding: 30rpx; |
|||
border-radius: 20rpx; |
|||
margin-bottom: 30rpx; |
|||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1); |
|||
} |
|||
|
|||
.section-title { |
|||
font-size: 32rpx; |
|||
font-weight: bold; |
|||
color: #333; |
|||
margin-bottom: 30rpx; |
|||
} |
|||
|
|||
.user-card { |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.avatar { |
|||
width: 120rpx; |
|||
height: 120rpx; |
|||
border-radius: 60rpx; |
|||
margin-right: 30rpx; |
|||
} |
|||
|
|||
.user-details { |
|||
flex: 1; |
|||
} |
|||
|
|||
.username { |
|||
font-size: 32rpx; |
|||
font-weight: bold; |
|||
color: #333; |
|||
display: block; |
|||
margin-bottom: 10rpx; |
|||
} |
|||
|
|||
.phone, .email { |
|||
font-size: 28rpx; |
|||
color: #666; |
|||
display: block; |
|||
margin-bottom: 5rpx; |
|||
} |
|||
|
|||
.schedule-list { |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.schedule-item { |
|||
display: flex; |
|||
align-items: center; |
|||
padding: 20rpx 0; |
|||
border-bottom: 1rpx solid #f0f0f0; |
|||
} |
|||
|
|||
.schedule-item:last-child { |
|||
border-bottom: none; |
|||
} |
|||
|
|||
.time { |
|||
width: 200rpx; |
|||
font-size: 28rpx; |
|||
color: #666; |
|||
} |
|||
|
|||
.course-info { |
|||
flex: 1; |
|||
margin-left: 20rpx; |
|||
} |
|||
|
|||
.course-name { |
|||
font-size: 30rpx; |
|||
font-weight: bold; |
|||
color: #333; |
|||
display: block; |
|||
margin-bottom: 10rpx; |
|||
} |
|||
|
|||
.teacher, .classroom { |
|||
font-size: 26rpx; |
|||
color: #666; |
|||
display: block; |
|||
margin-bottom: 5rpx; |
|||
} |
|||
|
|||
.status { |
|||
padding: 10rpx 20rpx; |
|||
border-radius: 10rpx; |
|||
font-size: 24rpx; |
|||
text-align: center; |
|||
min-width: 120rpx; |
|||
} |
|||
|
|||
.status.scheduled { |
|||
background: #e6f7ff; |
|||
color: #1890ff; |
|||
} |
|||
|
|||
.status.completed { |
|||
background: #f6ffed; |
|||
color: #52c41a; |
|||
} |
|||
|
|||
.status.cancelled { |
|||
background: #fff2e8; |
|||
color: #fa8c16; |
|||
} |
|||
|
|||
.loading { |
|||
text-align: center; |
|||
padding: 60rpx; |
|||
color: #666; |
|||
} |
|||
|
|||
.actions { |
|||
display: flex; |
|||
gap: 20rpx; |
|||
padding: 30rpx; |
|||
} |
|||
|
|||
.btn { |
|||
flex: 1; |
|||
padding: 24rpx; |
|||
border-radius: 12rpx; |
|||
font-size: 32rpx; |
|||
border: none; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.btn.primary { |
|||
background: #1890ff; |
|||
color: white; |
|||
} |
|||
|
|||
.btn.secondary { |
|||
background: #f5f5f5; |
|||
color: #666; |
|||
} |
|||
|
|||
.btn:active { |
|||
opacity: 0.8; |
|||
} |
|||
</style> |
|||
@ -1,633 +0,0 @@ |
|||
<template> |
|||
<div class="course-schedule"> |
|||
<!-- Header --> |
|||
<div class="header"> |
|||
<div class="back-btn" @click="goBack"> |
|||
<ChevronLeftIcon class="w-6 h-6" /> |
|||
</div> |
|||
<h1 class="title">课程安排详情</h1> |
|||
</div> |
|||
|
|||
<!-- Course Info --> |
|||
<div class="course-info"> |
|||
<h2 class="course-title">课程安排详情</h2> |
|||
<p class="course-time">日期：2025-07-24 08:30-09:30</p> |
|||
</div> |
|||
|
|||
<!-- Formal Students Section --> |
|||
<div class="section"> |
|||
<h3 class="section-title">正式学员</h3> |
|||
<div class="cards-grid"> |
|||
<!-- Student Card with Data --> |
|||
<div class="student-card filled"> |
|||
<div class="renewal-badge">待续费</div> |
|||
<div class="avatar">未</div> |
|||
<div class="student-info"> |
|||
<div class="student-name">张小明同学的名字很长需要省略</div> |
|||
<div class="student-age">年龄：8岁</div> |
|||
<div class="course-status">课程状态：正式课</div> |
|||
<div class="course-arrangement">课程安排：固定课</div> |
|||
<div class="remaining-hours">剩余课时：12节</div> |
|||
<div class="expiry-date">到期时间：2025-12-31</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- Empty Slots --> |
|||
<div |
|||
v-for="n in 6" |
|||
:key="n" |
|||
class="student-card empty" |
|||
@click="openStudentModal('formal', n)" |
|||
> |
|||
<div class="add-icon"> |
|||
<PlusIcon class="w-8 h-8" /> |
|||
</div> |
|||
<div class="add-text"> |
|||
<div class="slot-title">空位</div> |
|||
<div class="slot-subtitle">点击添加学员</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- Waiting List Section --> |
|||
<div class="section"> |
|||
<h3 class="section-title">等待位</h3> |
|||
<div class="cards-grid"> |
|||
<div |
|||
v-for="n in 2" |
|||
:key="n" |
|||
class="student-card waiting" |
|||
@click="openStudentModal('waiting', n)" |
|||
> |
|||
<div class="add-icon waiting-icon"> |
|||
<PlusIcon class="w-8 h-8" /> |
|||
</div> |
|||
<div class="add-text"> |
|||
<div class="slot-title">等待位</div> |
|||
<div class="slot-subtitle">点击添加学员</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- Bottom Popup Modal --> |
|||
<div v-if="showModal" class="modal-overlay" @click="closeModal"> |
|||
<div class="modal-content" @click.stop> |
|||
<div class="modal-header"> |
|||
<h3>添加学员</h3> |
|||
</div> |
|||
|
|||
<div class="modal-body"> |
|||
<!-- Customer Selection --> |
|||
<div class="form-section"> |
|||
<label class="form-label">客户选择</label> |
|||
<div class="search-tabs"> |
|||
<button |
|||
:class="['tab-btn', { active: searchType === 'phone' }]" |
|||
@click="searchType = 'phone'" |
|||
> |
|||
手机号检索 |
|||
</button> |
|||
<button |
|||
:class="['tab-btn', { active: searchType === 'name' }]" |
|||
@click="searchType = 'name'" |
|||
> |
|||
姓名检索 |
|||
</button> |
|||
</div> |
|||
|
|||
<input |
|||
v-model="searchQuery" |
|||
:placeholder="searchType === 'phone' ? '请输入手机号' : '请输入姓名'" |
|||
class="search-input" |
|||
@input="searchStudents" |
|||
/> |
|||
|
|||
<!-- Search Results --> |
|||
<div v-if="searchResults.length > 0" class="search-results"> |
|||
<div |
|||
v-for="student in searchResults" |
|||
:key="student.id" |
|||
:class="['student-item', { selected: selectedStudent?.id === student.id }]" |
|||
@click="selectStudent(student)" |
|||
> |
|||
<div class="student-avatar">{{ student.name.charAt(0) }}</div> |
|||
<div class="student-details"> |
|||
<div class="student-name">{{ student.name }}</div> |
|||
<div class="student-phone">{{ student.phone }}</div> |
|||
</div> |
|||
<div v-if="selectedStudent?.id === student.id" class="check-icon"> |
|||
<CheckIcon class="w-5 h-5" /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- Course Arrangement --> |
|||
<div class="form-section"> |
|||
<label class="form-label">课程安排</label> |
|||
<div class="radio-group"> |
|||
<label class="radio-item"> |
|||
<input |
|||
type="radio" |
|||
value="temporary" |
|||
v-model="courseArrangement" |
|||
/> |
|||
<span class="radio-text">临时课</span> |
|||
</label> |
|||
<label class="radio-item"> |
|||
<input |
|||
type="radio" |
|||
value="fixed" |
|||
v-model="courseArrangement" |
|||
/> |
|||
<span class="radio-text">固定课</span> |
|||
</label> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- Remarks --> |
|||
<div class="form-section"> |
|||
<label class="form-label">备注</label> |
|||
<textarea |
|||
v-model="remarks" |
|||
placeholder="请输入备注信息" |
|||
class="remarks-textarea" |
|||
rows="3" |
|||
></textarea> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- Modal Footer --> |
|||
<div class="modal-footer"> |
|||
<button class="btn btn-cancel" @click="closeModal">取消</button> |
|||
<button class="btn btn-confirm" @click="confirmSelection">确定</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { ChevronLeftIcon, PlusIcon, CheckIcon } from 'lucide-vue-next' |
|||
|
|||
export default { |
|||
name: 'CourseSchedule', |
|||
components: { |
|||
ChevronLeftIcon, |
|||
PlusIcon, |
|||
CheckIcon |
|||
}, |
|||
data() { |
|||
return { |
|||
showModal: false, |
|||
searchType: 'phone', |
|||
searchQuery: '', |
|||
courseArrangement: 'temporary', |
|||
remarks: '', |
|||
selectedStudent: null, |
|||
currentSlot: null, |
|||
searchResults: [], |
|||
// Mock student data |
|||
allStudents: [ |
|||
{ id: 1, name: '张小明', phone: '13800138001', age: 8 }, |
|||
{ id: 2, name: '李小红', phone: '13800138002', age: 9 }, |
|||
{ id: 3, name: '王小华', phone: '13800138003', age: 7 }, |
|||
{ id: 4, name: '赵小强', phone: '13800138004', age: 10 } |
|||
] |
|||
} |
|||
}, |
|||
methods: { |
|||
goBack() { |
|||
this.$router.go(-1) |
|||
}, |
|||
openStudentModal(type, index) { |
|||
this.showModal = true |
|||
this.currentSlot = { type, index } |
|||
this.resetForm() |
|||
}, |
|||
closeModal() { |
|||
this.showModal = false |
|||
this.resetForm() |
|||
}, |
|||
resetForm() { |
|||
this.searchQuery = '' |
|||
this.searchResults = [] |
|||
this.selectedStudent = null |
|||
this.courseArrangement = 'temporary' |
|||
this.remarks = '' |
|||
}, |
|||
searchStudents() { |
|||
if (!this.searchQuery.trim()) { |
|||
this.searchResults = [] |
|||
return |
|||
} |
|||
|
|||
this.searchResults = this.allStudents.filter(student => { |
|||
if (this.searchType === 'phone') { |
|||
return student.phone.includes(this.searchQuery) |
|||
} else { |
|||
return student.name.includes(this.searchQuery) |
|||
} |
|||
}) |
|||
}, |
|||
selectStudent(student) { |
|||
this.selectedStudent = student |
|||
}, |
|||
confirmSelection() { |
|||
if (!this.selectedStudent) { |
|||
alert('请选择学员') |
|||
return |
|||
} |
|||
|
|||
// Here you would typically save the selection |
|||
console.log('Selected:', { |
|||
student: this.selectedStudent, |
|||
slot: this.currentSlot, |
|||
arrangement: this.courseArrangement, |
|||
remarks: this.remarks |
|||
}) |
|||
|
|||
this.closeModal() |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.course-schedule { |
|||
min-height: 100vh; |
|||
background: #1a1a1a; |
|||
color: white; |
|||
padding: 0; |
|||
} |
|||
|
|||
.header { |
|||
display: flex; |
|||
align-items: center; |
|||
padding: 16px 20px; |
|||
background: #2a2a2a; |
|||
} |
|||
|
|||
.back-btn { |
|||
margin-right: 16px; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.title { |
|||
font-size: 18px; |
|||
font-weight: 600; |
|||
margin: 0; |
|||
} |
|||
|
|||
.course-info { |
|||
padding: 24px 20px; |
|||
} |
|||
|
|||
.course-title { |
|||
font-size: 24px; |
|||
font-weight: 600; |
|||
margin: 0 0 12px 0; |
|||
} |
|||
|
|||
.course-time { |
|||
color: #4ade80; |
|||
font-size: 16px; |
|||
margin: 0; |
|||
} |
|||
|
|||
.section { |
|||
margin: 24px 20px; |
|||
} |
|||
|
|||
.section-title { |
|||
font-size: 18px; |
|||
font-weight: 600; |
|||
color: #fbbf24; |
|||
margin: 0 0 16px 0; |
|||
} |
|||
|
|||
.cards-grid { |
|||
display: grid; |
|||
grid-template-columns: 1fr 1fr; |
|||
gap: 12px; |
|||
} |
|||
|
|||
.student-card { |
|||
background: #2a2a2a; |
|||
border-radius: 12px; |
|||
padding: 16px; |
|||
min-height: 160px; |
|||
position: relative; |
|||
cursor: pointer; |
|||
transition: all 0.3s ease; |
|||
} |
|||
|
|||
.student-card.empty { |
|||
border: 2px dashed #fbbf24; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
text-align: center; |
|||
} |
|||
|
|||
.student-card.waiting { |
|||
border: 2px dashed #8b5cf6; |
|||
} |
|||
|
|||
.student-card.filled { |
|||
border: 1px solid #374151; |
|||
} |
|||
|
|||
.student-card:hover { |
|||
transform: translateY(-2px); |
|||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); |
|||
} |
|||
|
|||
.renewal-badge { |
|||
position: absolute; |
|||
top: 8px; |
|||
right: 8px; |
|||
background: #ef4444; |
|||
color: white; |
|||
font-size: 10px; |
|||
padding: 2px 6px; |
|||
border-radius: 8px; |
|||
} |
|||
|
|||
.avatar { |
|||
width: 32px; |
|||
height: 32px; |
|||
border-radius: 50%; |
|||
background: #4ade80; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
font-weight: 600; |
|||
margin-bottom: 8px; |
|||
} |
|||
|
|||
.student-info { |
|||
font-size: 12px; |
|||
line-height: 1.4; |
|||
} |
|||
|
|||
.student-name { |
|||
font-weight: 600; |
|||
margin-bottom: 4px; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
white-space: nowrap; |
|||
} |
|||
|
|||
.student-age, |
|||
.course-status, |
|||
.course-arrangement, |
|||
.remaining-hours, |
|||
.expiry-date { |
|||
color: #9ca3af; |
|||
margin-bottom: 2px; |
|||
} |
|||
|
|||
.add-icon { |
|||
color: #fbbf24; |
|||
margin-bottom: 8px; |
|||
} |
|||
|
|||
.waiting-icon { |
|||
color: #8b5cf6; |
|||
} |
|||
|
|||
.add-text { |
|||
text-align: center; |
|||
} |
|||
|
|||
.slot-title { |
|||
font-size: 16px; |
|||
font-weight: 600; |
|||
margin-bottom: 4px; |
|||
} |
|||
|
|||
.slot-subtitle { |
|||
font-size: 12px; |
|||
color: #9ca3af; |
|||
} |
|||
|
|||
/* Modal Styles */ |
|||
.modal-overlay { |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
background: rgba(0, 0, 0, 0.5); |
|||
display: flex; |
|||
align-items: flex-end; |
|||
z-index: 1000; |
|||
} |
|||
|
|||
.modal-content { |
|||
background: white; |
|||
border-radius: 16px 16px 0 0; |
|||
width: 100%; |
|||
max-height: 80vh; |
|||
overflow-y: auto; |
|||
animation: slideUp 0.3s ease-out; |
|||
} |
|||
|
|||
@keyframes slideUp { |
|||
from { |
|||
transform: translateY(100%); |
|||
} |
|||
to { |
|||
transform: translateY(0); |
|||
} |
|||
} |
|||
|
|||
.modal-header { |
|||
padding: 20px; |
|||
border-bottom: 1px solid #e5e7eb; |
|||
text-align: center; |
|||
} |
|||
|
|||
.modal-header h3 { |
|||
margin: 0; |
|||
font-size: 18px; |
|||
font-weight: 600; |
|||
color: #1f2937; |
|||
} |
|||
|
|||
.modal-body { |
|||
padding: 20px; |
|||
color: #1f2937; |
|||
} |
|||
|
|||
.form-section { |
|||
margin-bottom: 24px; |
|||
} |
|||
|
|||
.form-label { |
|||
display: block; |
|||
font-weight: 600; |
|||
margin-bottom: 8px; |
|||
color: #374151; |
|||
} |
|||
|
|||
.search-tabs { |
|||
display: flex; |
|||
margin-bottom: 12px; |
|||
background: #f3f4f6; |
|||
border-radius: 8px; |
|||
padding: 4px; |
|||
} |
|||
|
|||
.tab-btn { |
|||
flex: 1; |
|||
padding: 8px 16px; |
|||
border: none; |
|||
background: transparent; |
|||
border-radius: 6px; |
|||
font-size: 14px; |
|||
cursor: pointer; |
|||
transition: all 0.2s; |
|||
} |
|||
|
|||
.tab-btn.active { |
|||
background: white; |
|||
color: #1f2937; |
|||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); |
|||
} |
|||
|
|||
.search-input { |
|||
width: 100%; |
|||
padding: 12px; |
|||
border: 1px solid #d1d5db; |
|||
border-radius: 8px; |
|||
font-size: 16px; |
|||
} |
|||
|
|||
.search-results { |
|||
max-height: 200px; |
|||
overflow-y: auto; |
|||
border: 1px solid #e5e7eb; |
|||
border-radius: 8px; |
|||
margin-top: 8px; |
|||
} |
|||
|
|||
.student-item { |
|||
display: flex; |
|||
align-items: center; |
|||
padding: 12px; |
|||
border-bottom: 1px solid #f3f4f6; |
|||
cursor: pointer; |
|||
transition: background 0.2s; |
|||
} |
|||
|
|||
.student-item:hover { |
|||
background: #f9fafb; |
|||
} |
|||
|
|||
.student-item.selected { |
|||
background: #eff6ff; |
|||
border-color: #3b82f6; |
|||
} |
|||
|
|||
.student-avatar { |
|||
width: 40px; |
|||
height: 40px; |
|||
border-radius: 50%; |
|||
background: #3b82f6; |
|||
color: white; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
font-weight: 600; |
|||
margin-right: 12px; |
|||
} |
|||
|
|||
.student-details { |
|||
flex: 1; |
|||
} |
|||
|
|||
.student-details .student-name { |
|||
font-weight: 600; |
|||
margin-bottom: 4px; |
|||
} |
|||
|
|||
.student-details .student-phone { |
|||
color: #6b7280; |
|||
font-size: 14px; |
|||
} |
|||
|
|||
.check-icon { |
|||
color: #3b82f6; |
|||
} |
|||
|
|||
.radio-group { |
|||
display: flex; |
|||
gap: 16px; |
|||
} |
|||
|
|||
.radio-item { |
|||
display: flex; |
|||
align-items: center; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.radio-item input[type="radio"] { |
|||
margin-right: 8px; |
|||
} |
|||
|
|||
.radio-text { |
|||
font-size: 14px; |
|||
} |
|||
|
|||
.remarks-textarea { |
|||
width: 100%; |
|||
padding: 12px; |
|||
border: 1px solid #d1d5db; |
|||
border-radius: 8px; |
|||
font-size: 14px; |
|||
resize: vertical; |
|||
font-family: inherit; |
|||
} |
|||
|
|||
.modal-footer { |
|||
padding: 20px; |
|||
border-top: 1px solid #e5e7eb; |
|||
display: flex; |
|||
gap: 12px; |
|||
} |
|||
|
|||
.btn { |
|||
flex: 1; |
|||
padding: 12px 24px; |
|||
border-radius: 8px; |
|||
font-size: 16px; |
|||
font-weight: 600; |
|||
cursor: pointer; |
|||
transition: all 0.2s; |
|||
} |
|||
|
|||
.btn-cancel { |
|||
background: #f3f4f6; |
|||
color: #374151; |
|||
border: 1px solid #d1d5db; |
|||
} |
|||
|
|||
.btn-cancel:hover { |
|||
background: #e5e7eb; |
|||
} |
|||
|
|||
.btn-confirm { |
|||
background: #3b82f6; |
|||
color: white; |
|||
border: 1px solid #3b82f6; |
|||
} |
|||
|
|||
.btn-confirm:hover { |
|||
background: #2563eb; |
|||
} |
|||
</style> |
|||
@ -1,549 +0,0 @@ |
|||
<!--重构后的客户详情页面 - 使用组件化方式--> |
|||
<template> |
|||
<view class="assemble"> |
|||
<view class="main_box"> |
|||
<view style="height: 20rpx;background: #29D3B4;"></view> |
|||
|
|||
<!-- 头部信息区域 --> |
|||
<view class="count_section"> |
|||
<view class="main"> |
|||
<view class="course_box"> |
|||
<view class="course_box_top"> |
|||
<view class="course_box_top_top"> |
|||
<image class="pic" :src="$util.img('/uniapp_src/static/images/index/myk.png')"></image> |
|||
<view class="name">{{ $util.safeGet(clientInfo, 'customerResource.name', '未知客户') }}</view> |
|||
</view> |
|||
<view class="course_box_top_below"> |
|||
<view class="course_box_top_below-right"> |
|||
<!-- 操作按钮 --> |
|||
<view class="action-buttons"> |
|||
<view class="btn-item" @click="handleMakeCall"> |
|||
<image class="btn-icon" :src="$util.img('/uniapp_src/static/images/index/phone.png')"></image> |
|||
</view> |
|||
<view class="btn-item" @click="handleSendMessage" v-if="$util.safeGet(clientInfo, 'customerResource.member_id')"> |
|||
<image class="btn-icon" :src="$util.img('/uniapp_src/static/images/index/message.png')"></image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 标签切换组件 --> |
|||
<TabSwitcher |
|||
:tabs="tabs" |
|||
:active-tab-id="switch_tags_type" |
|||
@tab-change="handleTabChange" |
|||
/> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="bg_box bg_top"></view> |
|||
<view class="bg_box bg_bottom"></view> |
|||
</view> |
|||
|
|||
<!-- 基本资料 --> |
|||
<view class="content-section" v-if="switch_tags_type == 1"> |
|||
<view class="integrated-info-section"> |
|||
<view class="basic-message"> |
|||
<view>客户和学生信息</view> |
|||
<view class="add-student-btn" @click="openAddStudentDialog"> |
|||
<view class="add-icon">+</view> |
|||
<view class="add-text">添加学生</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 使用客户信息卡片组件 --> |
|||
<ClientInfoCard |
|||
:client-info="clientInfo" |
|||
@call="handleMakeCall" |
|||
/> |
|||
|
|||
<!-- 学生信息列表 --> |
|||
<view class="student-list" v-if="studentList.length > 0"> |
|||
<StudentInfoCard |
|||
v-for="student in studentList" |
|||
:key="student.id" |
|||
:student="student" |
|||
:actions="studentActions" |
|||
@toggle-actions="toggleStudentActions" |
|||
@action="handleStudentAction" |
|||
/> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 课程信息 --> |
|||
<view class="content-section" v-else-if="switch_tags_type == 2"> |
|||
<view class="course-info-section"> |
|||
<text>课程信息内容...</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 通话记录 --> |
|||
<view class="content-section" v-else-if="switch_tags_type == 3"> |
|||
<view class="call-records-section"> |
|||
<CallRecordCard |
|||
v-for="record in listCallUp" |
|||
:key="record.id" |
|||
:record="record" |
|||
/> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 体测记录 --> |
|||
<view class="content-section" v-else-if="switch_tags_type == 4"> |
|||
<view class="fitness-records-section"> |
|||
<FitnessRecordCard |
|||
v-for="record in fitnessRecords" |
|||
:key="record.id" |
|||
:record="record" |
|||
@file-click="handleFitnessFileClick" |
|||
/> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 学习计划 --> |
|||
<view class="content-section" v-else-if="switch_tags_type == 5"> |
|||
<view class="study-plan-section"> |
|||
<text>学习计划内容...</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import apiRoute from '@/api/apiRoute.js' |
|||
import marketApi from '@/api/marketApi.js' |
|||
// 导入组件 |
|||
import ClientInfoCard from '@/components/client-info-card/client-info-card.vue' |
|||
import StudentInfoCard from '@/components/student-info-card/student-info-card.vue' |
|||
import TabSwitcher from '@/components/tab-switcher/tab-switcher.vue' |
|||
import FitnessRecordCard from '@/components/fitness-record-card/fitness-record-card.vue' |
|||
import CallRecordCard from '@/components/call-record-card/call-record-card.vue' |
|||
|
|||
export default { |
|||
name: 'ClueInfoRefactored', |
|||
components: { |
|||
ClientInfoCard, |
|||
StudentInfoCard, |
|||
TabSwitcher, |
|||
FitnessRecordCard, |
|||
CallRecordCard |
|||
}, |
|||
|
|||
data() { |
|||
return { |
|||
resource_sharing_id: '', |
|||
switch_tags_type: 1, // 默认显示基本资料 |
|||
|
|||
// 标签配置 |
|||
tabs: [ |
|||
{ id: 1, name: '基本资料' }, |
|||
{ id: 2, name: '课程信息' }, |
|||
{ id: 3, name: '通话记录' }, |
|||
{ id: 4, name: '体测记录' }, |
|||
{ id: 5, name: '学习计划' } |
|||
], |
|||
|
|||
// 学生操作按钮配置 |
|||
studentActions: [ |
|||
{ key: 'edit', text: '编辑学生' }, |
|||
{ key: 'order', text: '查看订单' }, |
|||
{ key: 'course', text: '课程安排' }, |
|||
{ key: 'fitness', text: '体测记录' } |
|||
], |
|||
|
|||
// 数据 |
|||
clientInfo: {}, |
|||
userInfo: {}, |
|||
studentList: [], |
|||
listCallUp: [], |
|||
fitnessRecords: [], |
|||
followList: [], |
|||
courseInfo: [], |
|||
coachList: [], |
|||
educationList: [], |
|||
assistantList: [] |
|||
} |
|||
}, |
|||
|
|||
onLoad(option) { |
|||
console.log('页面加载参数:', option) |
|||
this.resource_sharing_id = option.resource_sharing_id || '' |
|||
this.init() |
|||
}, |
|||
|
|||
methods: { |
|||
async init() { |
|||
console.log('开始初始化数据...') |
|||
try { |
|||
await this.getInfo() |
|||
await Promise.all([ |
|||
this.getUserInfo(), |
|||
this.getListCallUp(), |
|||
this.getStudentList(), |
|||
this.getFitnessRecords() |
|||
]) |
|||
console.log('数据初始化完成') |
|||
} catch (error) { |
|||
console.error('初始化失败:', error) |
|||
} |
|||
}, |
|||
|
|||
// 获取客户详情 |
|||
async getInfo() { |
|||
if (!this.resource_sharing_id) { |
|||
uni.showToast({ title: '缺少必要参数', icon: 'none' }) |
|||
return false |
|||
} |
|||
|
|||
try { |
|||
const res = await apiRoute.xs_resourceSharingInfo({ |
|||
resource_sharing_id: this.resource_sharing_id |
|||
}) |
|||
|
|||
if (res.code === 1) { |
|||
this.clientInfo = res.data |
|||
return true |
|||
} else { |
|||
uni.showToast({ title: res.msg, icon: 'none' }) |
|||
return false |
|||
} |
|||
} catch (error) { |
|||
console.error('获取客户详情失败:', error) |
|||
return false |
|||
} |
|||
}, |
|||
|
|||
// 获取员工信息 |
|||
async getUserInfo() { |
|||
try { |
|||
const res = await apiRoute.getPersonnelInfo({}) |
|||
if (res.code === 1) { |
|||
this.userInfo = res.data |
|||
return true |
|||
} |
|||
return false |
|||
} catch (error) { |
|||
console.error('获取员工信息失败:', error) |
|||
return false |
|||
} |
|||
}, |
|||
|
|||
// 获取通话记录 |
|||
async getListCallUp() { |
|||
if (!this.clientInfo.resource_id) return false |
|||
|
|||
try { |
|||
const res = await apiRoute.listCallUp({ |
|||
resource_id: this.clientInfo.resource_id |
|||
}) |
|||
|
|||
if (res.code === 1) { |
|||
this.listCallUp = res.data || [] |
|||
return true |
|||
} |
|||
return false |
|||
} catch (error) { |
|||
console.error('获取通话记录失败:', error) |
|||
return false |
|||
} |
|||
}, |
|||
|
|||
// 获取学生列表 |
|||
async getStudentList() { |
|||
try { |
|||
if (!this.clientInfo.resource_id) { |
|||
// 使用Mock数据 |
|||
this.studentList = this.getMockStudentList() |
|||
return true |
|||
} |
|||
|
|||
const res = await apiRoute.xs_getStudentList({ |
|||
parent_resource_id: this.clientInfo.resource_id |
|||
}) |
|||
|
|||
if (res.code === 1) { |
|||
this.studentList = res.data || [] |
|||
} else { |
|||
this.studentList = this.getMockStudentList() |
|||
} |
|||
return true |
|||
} catch (error) { |
|||
console.error('获取学生列表失败:', error) |
|||
this.studentList = this.getMockStudentList() |
|||
return true |
|||
} |
|||
}, |
|||
|
|||
// 获取体测记录 |
|||
async getFitnessRecords() { |
|||
try { |
|||
// 使用Mock数据 |
|||
this.fitnessRecords = this.getMockFitnessRecords() |
|||
return true |
|||
} catch (error) { |
|||
console.error('获取体测记录失败:', error) |
|||
return false |
|||
} |
|||
}, |
|||
|
|||
// Mock数据方法 |
|||
getMockStudentList() { |
|||
return [ |
|||
{ |
|||
id: 1, |
|||
name: '张小明', |
|||
gender: 1, |
|||
age: 9.05, |
|||
birthday: '2015-05-10', |
|||
emergency_contact: '张妈妈', |
|||
contact_phone: '13800138001', |
|||
member_label: '新学员', |
|||
note: '活泼好动，喜欢运动', |
|||
actionsExpanded: false |
|||
} |
|||
] |
|||
}, |
|||
|
|||
getMockFitnessRecords() { |
|||
return [ |
|||
{ |
|||
id: 1, |
|||
test_date: '2024-01-15', |
|||
height: '165', |
|||
weight: '55', |
|||
pdf_files: [ |
|||
{ |
|||
id: 1, |
|||
name: '体测报告_2024-01-15.pdf', |
|||
size: 1024000, |
|||
url: '/static/mock/fitness_report_1.pdf' |
|||
} |
|||
] |
|||
} |
|||
] |
|||
}, |
|||
|
|||
// 事件处理方法 |
|||
handleTabChange({ tabId }) { |
|||
this.switch_tags_type = tabId |
|||
}, |
|||
|
|||
handleMakeCall() { |
|||
const phoneNumber = this.$util.safeGet(this.clientInfo, 'customerResource.phone_number', '') |
|||
this.$util.makePhoneCall(phoneNumber) |
|||
}, |
|||
|
|||
handleSendMessage() { |
|||
uni.showToast({ |
|||
title: '发送消息功能待实现', |
|||
icon: 'none' |
|||
}) |
|||
}, |
|||
|
|||
toggleStudentActions(student) { |
|||
const index = this.studentList.findIndex(s => s.id === student.id) |
|||
if (index !== -1) { |
|||
this.$set(this.studentList[index], 'actionsExpanded', !student.actionsExpanded) |
|||
} |
|||
}, |
|||
|
|||
handleStudentAction({ action, student }) { |
|||
console.log('学生操作:', action, student) |
|||
|
|||
switch (action.key) { |
|||
case 'edit': |
|||
this.editStudent(student) |
|||
break |
|||
case 'order': |
|||
this.viewStudentOrders(student) |
|||
break |
|||
case 'course': |
|||
this.viewStudentCourse(student) |
|||
break |
|||
case 'fitness': |
|||
this.viewStudentFitness(student) |
|||
break |
|||
} |
|||
}, |
|||
|
|||
handleFitnessFileClick({ file, record }) { |
|||
console.log('点击体测文件:', file, record) |
|||
// 实现文件查看逻辑 |
|||
}, |
|||
|
|||
openAddStudentDialog() { |
|||
console.log('打开添加学生对话框') |
|||
// 实现添加学生逻辑 |
|||
}, |
|||
|
|||
// 学生操作相关方法 |
|||
editStudent(student) { |
|||
this.$util.navigateToPage('/pages/student/edit', { |
|||
student_id: student.id |
|||
}) |
|||
}, |
|||
|
|||
viewStudentOrders(student) { |
|||
this.$util.navigateToPage('/pages/market/clue/order_list', { |
|||
resource_id: this.clientInfo.resource_id, |
|||
student_id: student.id, |
|||
student_name: student.name |
|||
}) |
|||
}, |
|||
|
|||
viewStudentCourse(student) { |
|||
this.$util.navigateToPage('/pages/market/clue/course_arrange', { |
|||
resource_id: this.clientInfo.resource_id, |
|||
student_id: student.id, |
|||
student_name: student.name |
|||
}) |
|||
}, |
|||
|
|||
viewStudentFitness(student) { |
|||
this.$util.navigateToPage('/pages/fitness/records', { |
|||
student_id: student.id |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.assemble { |
|||
width: 100%; |
|||
height: 100vh; |
|||
overflow: auto; |
|||
background-color: #292929; |
|||
} |
|||
|
|||
.main_box { |
|||
background: #292929; |
|||
min-height: 20vh; |
|||
} |
|||
|
|||
.action-buttons { |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
.btn-item { |
|||
width: 60rpx; |
|||
height: 60rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
margin-left: 20rpx; |
|||
|
|||
.btn-icon { |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.count_section { |
|||
width: 100%; |
|||
position: relative; |
|||
|
|||
.main { |
|||
width: 100%; |
|||
position: absolute; |
|||
z-index: 2; |
|||
padding: 0rpx 24rpx; |
|||
display: flex; |
|||
justify-content: center; |
|||
|
|||
.course_box { |
|||
padding: 26rpx 22rpx 0 22rpx; |
|||
width: 95%; |
|||
height: 250rpx; |
|||
border-radius: 20rpx; |
|||
background-color: #fff; |
|||
} |
|||
} |
|||
|
|||
.bg_top { |
|||
height: 180rpx; |
|||
background-color: #29D3B4; |
|||
} |
|||
|
|||
.bg_bottom { |
|||
height: 80rpx; |
|||
background-color: #292929; |
|||
} |
|||
} |
|||
|
|||
.course_box_top { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
|
|||
.course_box_top_top { |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
.pic { |
|||
width: 60rpx; |
|||
height: 60rpx; |
|||
margin-right: 20rpx; |
|||
} |
|||
|
|||
.name { |
|||
font-size: 32rpx; |
|||
font-weight: bold; |
|||
color: #333; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.content-section { |
|||
background-color: #292929; |
|||
min-height: 60vh; |
|||
padding: 20rpx; |
|||
} |
|||
|
|||
.integrated-info-section { |
|||
.basic-message { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding: 30rpx 20rpx; |
|||
color: white; |
|||
font-size: 28rpx; |
|||
font-weight: bold; |
|||
|
|||
.add-student-btn { |
|||
display: flex; |
|||
align-items: center; |
|||
background-color: #29d3b4; |
|||
padding: 15rpx 25rpx; |
|||
border-radius: 25rpx; |
|||
|
|||
.add-icon { |
|||
color: white; |
|||
font-size: 24rpx; |
|||
margin-right: 10rpx; |
|||
} |
|||
|
|||
.add-text { |
|||
color: white; |
|||
font-size: 22rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.student-list, |
|||
.call-records-section, |
|||
.fitness-records-section { |
|||
padding: 20rpx 0; |
|||
} |
|||
|
|||
.course-info-section, |
|||
.study-plan-section { |
|||
padding: 40rpx 20rpx; |
|||
color: white; |
|||
text-align: center; |
|||
} |
|||
</style> |
|||
@ -1,425 +0,0 @@ |
|||
<template> |
|||
<view class="assemble"> |
|||
<view class="title">跟进任务</view> |
|||
<view class="form-style"> |
|||
<fui-form class="input-style" ref="form" top="0" :model="formData" :show="false"> |
|||
<!--基础表单--> |
|||
<!--下拉--> |
|||
<fui-form-item |
|||
asterisk |
|||
label="跟进类型" |
|||
asteriskPosition="right" |
|||
labelSize='26' |
|||
prop="" |
|||
background='#434544' |
|||
labelColor='#fff' |
|||
:bottomBorder='false' |
|||
> |
|||
<view class="input-title" style="margin-right:14rpx;"> |
|||
<view v-if="!formData.entry_type" class="input-title" style="margin-right:14rpx;" @click="selectCon(`entry_type`)">点击选择 |
|||
</view> |
|||
<view v-else class="input-title" style="margin-right:14rpx;" @click="selectCon(`entry_type`)"> |
|||
{{ str_entry_type }} |
|||
</view> |
|||
</view> |
|||
</fui-form-item> |
|||
|
|||
<!--下拉--> |
|||
<fui-form-item |
|||
asterisk |
|||
label="跟进人员" |
|||
asteriskPosition="right" |
|||
labelSize='26' |
|||
prop="" |
|||
background='#434544' |
|||
labelColor='#fff' |
|||
:bottomBorder='false' |
|||
> |
|||
<view class="input-title" style="margin-right:14rpx;"> |
|||
<view v-if="!formData.follow_staff_id" class="input-title" style="margin-right:14rpx;" @click="selectCon(`follow_staff_id`)">点击选择 |
|||
</view> |
|||
<view v-else class="input-title" style="margin-right:14rpx;" @click="selectCon(`follow_staff_id`)"> |
|||
{{ str_follow_staff_id }} |
|||
</view> |
|||
</view> |
|||
</fui-form-item> |
|||
|
|||
<!--下拉--> |
|||
<fui-form-item |
|||
asterisk |
|||
label="跟进时间" |
|||
asteriskPosition="right" |
|||
labelSize='26' |
|||
prop="" |
|||
background='#434544' |
|||
labelColor='#fff' |
|||
:bottomBorder='false' |
|||
> |
|||
<view class="input-title" style="margin-right:14rpx;"> |
|||
<view v-if="!formData.reminder_time" class="input-title" style="margin-right:14rpx;" @click="selectCon(`reminder_time`)">点击选择 |
|||
</view> |
|||
<view v-else class="input-title" style="margin-right:14rpx;" @click="selectCon(`reminder_time`)"> |
|||
{{ formData.reminder_time }} |
|||
</view> |
|||
</view> |
|||
</fui-form-item> |
|||
|
|||
<!--手写--> |
|||
<fui-form-item |
|||
label="备注" |
|||
asteriskPosition="right" |
|||
labelSize='26' |
|||
prop="" |
|||
background='#434544' |
|||
labelColor='#fff' |
|||
:bottomBorder='false' |
|||
> |
|||
<view class="input-title" style="margin-right:14rpx;"> |
|||
<fui-input :borderBottom="false" :padding="[0]" placeholder="点击填写" v-model="formData.follow_content" |
|||
backgroundColor="#434544" size="26" color="#fff"></fui-input> |
|||
</view> |
|||
</fui-form-item> |
|||
</fui-form> |
|||
</view> |
|||
<view class="fui-btn__box"> |
|||
<fui-button background="#434544" color="#24BA9F" borderColor="#24BA9F" @click="submit">保存</fui-button> |
|||
</view> |
|||
|
|||
<!-- 年月日-选择时间 --> |
|||
<fui-date-picker :show="show_date" type="5" @change="change_date" @cancel="cancel_date"></fui-date-picker> |
|||
|
|||
<!-- 下拉选择器 --> |
|||
<fui-picker :linkage='linkage' :options="options" :layer="1" :show="show" @change="changeOptions" |
|||
@cancel="cancel"></fui-picker> |
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import marketApi from '@/api/market.js'; |
|||
import memberApi from '@/api/member.js'; |
|||
|
|||
const rules = [{ |
|||
name: "mobile", |
|||
rule: ["required", "isMobile"], |
|||
msg: ["请输入手机号", "请输入正确的手机号"] |
|||
}]; |
|||
export default { |
|||
data() { |
|||
return { |
|||
rules, |
|||
|
|||
is_submit: true,//是否提交(防止重复提交)|true=可提交,false=不可提交 |
|||
|
|||
//表单数据 |
|||
formData:{ |
|||
//##### 基础表单 ##### |
|||
entry_type:'',//跟进类型(1=市场人员录入的,2=销售人员录入) |
|||
follow_staff_id:'',//跟进人员 |
|||
reminder_time:'',//跟进时间 |
|||
follow_content:'',//备注 |
|||
}, |
|||
|
|||
//下拉选择器组件 |
|||
options_type: undefined,//选择器标识 |
|||
show: false,//是否显示下拉选择器 |
|||
linkage: true,//是否联动选择 |
|||
options: [ |
|||
// { |
|||
// 'value': 1, |
|||
// 'text': '类型1' |
|||
// } |
|||
],//下拉选择器可选值列表 |
|||
|
|||
//时间选择器相关 |
|||
show_date: false,//是否显示时间选择器|true=是,false=否 |
|||
|
|||
//跟进类型-相关 |
|||
//字典-跟进类型 |
|||
options_entry_type:[ |
|||
{ |
|||
value: 1, |
|||
text: '市场人员' |
|||
}, |
|||
{ |
|||
value: 2, |
|||
text: '销售人员' |
|||
}, |
|||
], |
|||
//文本展示-跟进类型 |
|||
str_entry_type:'', |
|||
|
|||
//跟进人员-相关 |
|||
//字典-跟进人员 |
|||
options_follow_staff_id_sc:[],//(市场-跟进人员) |
|||
options_follow_staff_id_xs:[],//(销售-跟进人员) |
|||
//文本展示-跟进人员 |
|||
str_follow_staff_id:'', |
|||
|
|||
|
|||
} |
|||
}, |
|||
onShow() { |
|||
this.init() |
|||
}, |
|||
methods: { |
|||
|
|||
//初始化 |
|||
async init() { |
|||
this.getUserInfo() |
|||
//获取字典-跟进人员(市场) |
|||
this.getDic_staff_id('5') |
|||
//获取字典-跟进人员(销售) |
|||
this.getDic_staff_id('6') |
|||
}, |
|||
|
|||
//获取当前登陆用户信息 |
|||
async getUserInfo(){ |
|||
let res = await marketApi.member({}) |
|||
if (res.code != 1) { |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
console.log(111,res.data) |
|||
this.formData.staff_id = res.data.staff_id//基础表单->跟进人员 |
|||
this.str_staff_id = res.data.name//基础表单->跟进人员名字 |
|||
}, |
|||
|
|||
//获取字典-跟进人员(全部) |
|||
//获取人员列表 role_id|5=市场,6=销售 |
|||
async getDic_staff_id(role_id){ |
|||
let res = await memberApi.staffList({ |
|||
type: 2, |
|||
role_id:role_id |
|||
}) |
|||
if (res.code != 1) { |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
|
|||
let arr = [] |
|||
res.data.forEach((v,k)=>{ |
|||
arr.push({ |
|||
text: v.name, |
|||
value: v.id, |
|||
}) |
|||
}) |
|||
|
|||
if(role_id == 5){ |
|||
this.options_follow_staff_id_sc = arr |
|||
console.log('市场',arr) |
|||
}else if(role_id == 6){ |
|||
this.options_follow_staff_id_xs = arr |
|||
console.log('销售',arr) |
|||
}else{ |
|||
//全部 |
|||
this.options_staff_id = arr |
|||
console.log('全部',arr) |
|||
} |
|||
}, |
|||
|
|||
//表单验证 |
|||
async validatorForm(data) { |
|||
//跟进类型 |
|||
if(!data.entry_type){ |
|||
uni.showToast({ |
|||
title: '跟进类型必填', |
|||
icon: 'none' |
|||
}) |
|||
return false |
|||
} |
|||
//跟进人员 |
|||
if(!data.follow_staff_id){ |
|||
uni.showToast({ |
|||
title: '跟进人员必填', |
|||
icon: 'none' |
|||
}) |
|||
return false |
|||
} |
|||
//跟进时间 |
|||
if(!data.reminder_time){ |
|||
uni.showToast({ |
|||
title: '跟进时间必填', |
|||
icon: 'none' |
|||
}) |
|||
return false |
|||
} |
|||
return true |
|||
}, |
|||
//提交 |
|||
async submit() { |
|||
console.log('提交',this.formData) |
|||
let data = {...this.formData} |
|||
//表单验证 |
|||
let validatorForm = await this.validatorForm(data) |
|||
console.log('验证结果',validatorForm) |
|||
if(!validatorForm){ |
|||
return |
|||
} |
|||
|
|||
//防止重复提交 |
|||
if (!this.is_submit) { |
|||
return |
|||
} |
|||
this.is_submit = false |
|||
|
|||
let res = await marketApi.createTask(data)//转移跟进任务 |
|||
|
|||
this.is_submit = true |
|||
|
|||
if(res.code != 1){ |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: 'success' |
|||
}) |
|||
//延迟1s执行 |
|||
setTimeout(() => { |
|||
//跳转页面-线索列表 |
|||
//关闭当前页跳转新页面 |
|||
uni.redirectTo({ |
|||
url: `/pages/market/clue/index` |
|||
}) |
|||
}, 1000) |
|||
}, |
|||
//选择弹窗 |
|||
selectCon(type) { |
|||
this.options_type = type |
|||
switch (type) { |
|||
//跟进类型 |
|||
case 'entry_type': |
|||
this.options = this.options_entry_type |
|||
this.show = true |
|||
this.linkage = true |
|||
//清空跟进任务->跟进人员 |
|||
this.formData.follow_staff_id = '' |
|||
break; |
|||
//跟进任务->跟进人员 |
|||
case 'follow_staff_id': |
|||
if(!this.formData.entry_type){ |
|||
uni.showToast({ |
|||
title: '请先选择跟进类型', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
|
|||
if(this.formData.entry_type == 1){ |
|||
//市场人员列表 |
|||
this.options = this.options_follow_staff_id_sc |
|||
}else{ |
|||
//销售人员列表 |
|||
this.options = this.options_follow_staff_id_xs |
|||
} |
|||
|
|||
this.show = true |
|||
this.linkage = true |
|||
break; |
|||
//跟进时间 |
|||
case 'reminder_time': |
|||
this.show_date = true |
|||
break; |
|||
} |
|||
}, |
|||
//监听-下拉选择框 |
|||
changeOptions(e) { |
|||
console.log('选择器选中',e) |
|||
this.show = false |
|||
let type = this.options_type |
|||
switch (type) { |
|||
//跟进类型 |
|||
case 'entry_type': |
|||
this.str_entry_type = e.text//选中的text值 |
|||
this.formData.entry_type = e.value//选中value值 |
|||
break; |
|||
//跟进人员 |
|||
case 'follow_staff_id': |
|||
this.str_follow_staff_id = e.text//选中的text值 |
|||
this.formData.follow_staff_id = e.value//选中value值 |
|||
break; |
|||
} |
|||
}, |
|||
|
|||
//关闭选择框 |
|||
cancel() { |
|||
this.show = false |
|||
}, |
|||
|
|||
//监听-时间选择器 |
|||
change_date(e) { |
|||
|
|||
this.show_date = false |
|||
//跟进时间 |
|||
let type = this.options_type |
|||
console.log('时间选择器',type,e) |
|||
let val = (e.result ?? '') |
|||
if(val){ |
|||
val = val + ':00' |
|||
} |
|||
|
|||
switch (type) { |
|||
//跟进任务->跟进时间 |
|||
case 'reminder_time': |
|||
this.formData.reminder_time = val |
|||
break; |
|||
} |
|||
}, |
|||
//关闭时间选择器 |
|||
cancel_date() { |
|||
this.show_date = false |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.assemble { |
|||
width: 100%; |
|||
height: 100vh; |
|||
background: #292929; |
|||
} |
|||
|
|||
.title { |
|||
font-size: 26rpx; |
|||
color: #fff; |
|||
padding: 26rpx 0 26rpx 32rpx; |
|||
} |
|||
|
|||
.input-title { |
|||
font-size: 26rpx; |
|||
color: #fff; |
|||
} |
|||
|
|||
.form-style { |
|||
width: 100%; |
|||
background: #434544; |
|||
} |
|||
|
|||
.form-style-vid { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
padding: 12rpx 0; |
|||
} |
|||
|
|||
.input-style { |
|||
text-align: right !important; |
|||
} |
|||
|
|||
.fui-btn__box { |
|||
margin: 20rpx auto; |
|||
width: 92%; |
|||
|
|||
} |
|||
</style> |
|||
File diff suppressed because it is too large
File diff suppressed because it is too large
@ -1,514 +0,0 @@ |
|||
<template> |
|||
<view class="course-detail-container"> |
|||
<!-- 课程基本信息 --> |
|||
<view class="course-info-card"> |
|||
<view class="course-header"> |
|||
<text class="course-title">{{ courseInfo.course_name || '课程详情' }}</text> |
|||
<view :class="['course-status',getStatusClass(courseInfo.status)]"> |
|||
{{ getStatusText(courseInfo.status) }} |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="course-stats"> |
|||
<view class="stat-item"> |
|||
<text class="stat-label">总课时</text> |
|||
<text class="stat-value">{{ courseInfo.total_hours || 0 }}</text> |
|||
</view> |
|||
<view class="stat-item"> |
|||
<text class="stat-label">赠送课时</text> |
|||
<text class="stat-value">{{ courseInfo.gift_hours || 0 }}</text> |
|||
</view> |
|||
<view class="stat-item"> |
|||
<text class="stat-label">已用课时</text> |
|||
<text class="stat-value">{{ (courseInfo.use_total_hours || 0) + (courseInfo.use_gift_hours || 0) }}</text> |
|||
</view> |
|||
<view class="stat-item"> |
|||
<text class="stat-label">剩余课时</text> |
|||
<text class="stat-value remaining">{{ getRemainingHours() }}</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="course-dates"> |
|||
<text class="date-item">开始日期：{{ courseInfo.start_date || '--' }}</text> |
|||
<text class="date-item">结束日期：{{ courseInfo.end_date || '--' }}</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 课程安排列表 --> |
|||
<view class="section-title"> |
|||
<text class="title-text">课程安排</text> |
|||
<text class="title-count">({{ scheduleList.length }})</text> |
|||
</view> |
|||
|
|||
<view class="schedule-list"> |
|||
<view |
|||
v-for="(item, index) in scheduleList" |
|||
:key="item.id" |
|||
class="schedule-item" |
|||
@tap="showScheduleDetail(item)" |
|||
> |
|||
<view class="schedule-date"> |
|||
<text class="date-text">{{ formatDate(item.course_date) }}</text> |
|||
<text class="time-text">{{ item.time_slot }}</text> |
|||
</view> |
|||
|
|||
<view class="schedule-info"> |
|||
<view class="schedule-type"> |
|||
<text :class="['type-tag',getScheduleTypeClass(item.schedule_type)]"> |
|||
{{ getScheduleTypeText(item.schedule_type) }} |
|||
</text> |
|||
<text :class="['type-tag',getCourseTypeClass(item.course_type)]"> |
|||
{{ getCourseTypeText(item.course_type) }} |
|||
</text> |
|||
</view> |
|||
|
|||
<view class="schedule-status"> |
|||
<text :class="['status-tag',getScheduleStatusClass(item.status)]"> |
|||
{{ getScheduleStatusText(item.status) }} |
|||
</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="schedule-arrow"> |
|||
<text class="arrow-icon">></text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 课程使用记录 --> |
|||
<view class="section-title"> |
|||
<text class="title-text">使用记录</text> |
|||
<text class="title-count">({{ usageList.length }})</text> |
|||
</view> |
|||
|
|||
<view class="usage-list"> |
|||
<view |
|||
v-for="(item, index) in usageList" |
|||
:key="item.id" |
|||
class="usage-item" |
|||
> |
|||
<view class="usage-date"> |
|||
<text class="date-text">{{ formatDate(item.usage_date) }}</text> |
|||
<text class="time-text">{{ item.time_slot || '--' }}</text> |
|||
</view> |
|||
|
|||
<view class="usage-info"> |
|||
<text class="usage-hours">消耗课时：{{ item.hours_used || 0 }}</text> |
|||
<text class="usage-type">{{ item.usage_type || '正常上课' }}</text> |
|||
</view> |
|||
|
|||
<view class="usage-status"> |
|||
<text class="status-text confirmed">已确认</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 无数据提示 --> |
|||
<view v-if="scheduleList.length === 0 && usageList.length === 0" class="no-data"> |
|||
<text class="no-data-text">暂无课程安排和使用记录</text> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
courseId: '', |
|||
courseInfo: {}, |
|||
scheduleList: [], |
|||
usageList: [] |
|||
} |
|||
}, |
|||
|
|||
onLoad(options) { |
|||
this.courseId = options.courseId || '' |
|||
if (this.courseId) { |
|||
this.loadCourseDetail() |
|||
} |
|||
}, |
|||
|
|||
methods: { |
|||
// 加载课程详情 |
|||
async loadCourseDetail() { |
|||
try { |
|||
uni.showLoading({ title: '加载中...' }) |
|||
|
|||
const res = await this.$http.get('/xy/course/detail', { |
|||
course_id: this.courseId |
|||
}) |
|||
|
|||
if (res.data.code === 1) { |
|||
this.courseInfo = res.data.data.course_info || {} |
|||
this.scheduleList = res.data.data.schedule_list || [] |
|||
this.usageList = res.data.data.usage_list || [] |
|||
} else { |
|||
uni.showToast({ |
|||
title: res.data.msg || '加载失败', |
|||
icon: 'none' |
|||
}) |
|||
} |
|||
} catch (error) { |
|||
console.error('加载课程详情失败:', error) |
|||
uni.showToast({ |
|||
title: '加载失败', |
|||
icon: 'none' |
|||
}) |
|||
} finally { |
|||
uni.hideLoading() |
|||
} |
|||
}, |
|||
|
|||
// 计算剩余课时 |
|||
getRemainingHours() { |
|||
const total = (this.courseInfo.total_hours || 0) + (this.courseInfo.gift_hours || 0) |
|||
const used = (this.courseInfo.use_total_hours || 0) + (this.courseInfo.use_gift_hours || 0) |
|||
return Math.max(0, total - used) |
|||
}, |
|||
|
|||
// 获取课程状态文本 |
|||
getStatusText(status) { |
|||
const statusMap = { |
|||
1: '有效', |
|||
2: '过期', |
|||
3: '等待期', |
|||
4: '延期' |
|||
} |
|||
return statusMap[status] || '未知' |
|||
}, |
|||
|
|||
// 获取课程状态样式 |
|||
getStatusClass(status) { |
|||
const classMap = { |
|||
1: 'status-active', |
|||
2: 'status-expired', |
|||
3: 'status-waiting', |
|||
4: 'status-delayed' |
|||
} |
|||
return classMap[status] || 'status-unknown' |
|||
}, |
|||
|
|||
// 获取课程安排类型文本 |
|||
getScheduleTypeText(type) { |
|||
const typeMap = { |
|||
1: '临时课', |
|||
2: '固定课' |
|||
} |
|||
return typeMap[type] || '未知' |
|||
}, |
|||
|
|||
// 获取课程安排类型样式 |
|||
getScheduleTypeClass(type) { |
|||
const classMap = { |
|||
1: 'type-temp', |
|||
2: 'type-fixed' |
|||
} |
|||
return classMap[type] || 'type-unknown' |
|||
}, |
|||
|
|||
// 获取课程类型文本 |
|||
getCourseTypeText(type) { |
|||
const typeMap = { |
|||
1: '加课', |
|||
2: '补课', |
|||
3: '等待位' |
|||
} |
|||
return typeMap[type] || '正常课' |
|||
}, |
|||
|
|||
// 获取课程类型样式 |
|||
getCourseTypeClass(type) { |
|||
const classMap = { |
|||
1: 'course-add', |
|||
2: 'course-makeup', |
|||
3: 'course-waiting' |
|||
} |
|||
return classMap[type] || 'course-normal' |
|||
}, |
|||
|
|||
// 获取课程安排状态文本 |
|||
getScheduleStatusText(status) { |
|||
const statusMap = { |
|||
0: '待上课', |
|||
1: '已上课', |
|||
2: '请假' |
|||
} |
|||
return statusMap[status] || '未知' |
|||
}, |
|||
|
|||
// 获取课程安排状态样式 |
|||
getScheduleStatusClass(status) { |
|||
const classMap = { |
|||
0: 'schedule-pending', |
|||
1: 'schedule-completed', |
|||
2: 'schedule-leave' |
|||
} |
|||
return classMap[status] || 'schedule-unknown' |
|||
}, |
|||
|
|||
// 格式化日期 |
|||
formatDate(dateStr) { |
|||
if (!dateStr) return '--' |
|||
const date = new Date(dateStr) |
|||
const month = (date.getMonth() + 1).toString().padStart(2, '0') |
|||
const day = date.getDate().toString().padStart(2, '0') |
|||
return `${month}-${day}` |
|||
}, |
|||
|
|||
// 显示课程安排详情 |
|||
showScheduleDetail(item) { |
|||
// 可以跳转到课程安排详情页面 |
|||
console.log('查看课程安排详情:', item) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.course-detail-container { |
|||
padding: 20rpx; |
|||
background-color: #f5f5f5; |
|||
min-height: 100vh; |
|||
} |
|||
|
|||
.course-info-card { |
|||
background: white; |
|||
border-radius: 16rpx; |
|||
padding: 24rpx; |
|||
margin-bottom: 20rpx; |
|||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1); |
|||
} |
|||
|
|||
.course-header { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
margin-bottom: 20rpx; |
|||
} |
|||
|
|||
.course-title { |
|||
font-size: 32rpx; |
|||
font-weight: 600; |
|||
color: #333; |
|||
} |
|||
|
|||
.course-status { |
|||
padding: 8rpx 16rpx; |
|||
border-radius: 20rpx; |
|||
font-size: 24rpx; |
|||
font-weight: 500; |
|||
|
|||
&.status-active { |
|||
background: #e8f5e8; |
|||
color: #52c41a; |
|||
} |
|||
|
|||
&.status-expired { |
|||
background: #fff2f0; |
|||
color: #ff4d4f; |
|||
} |
|||
|
|||
&.status-waiting { |
|||
background: #f6ffed; |
|||
color: #faad14; |
|||
} |
|||
|
|||
&.status-delayed { |
|||
background: #f0f5ff; |
|||
color: #1890ff; |
|||
} |
|||
} |
|||
|
|||
.course-stats { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
margin-bottom: 20rpx; |
|||
} |
|||
|
|||
.stat-item { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
flex: 1; |
|||
} |
|||
|
|||
.stat-label { |
|||
font-size: 24rpx; |
|||
color: #666; |
|||
margin-bottom: 8rpx; |
|||
} |
|||
|
|||
.stat-value { |
|||
font-size: 28rpx; |
|||
font-weight: 600; |
|||
color: #333; |
|||
|
|||
&.remaining { |
|||
color: #1890ff; |
|||
} |
|||
} |
|||
|
|||
.course-dates { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
padding-top: 20rpx; |
|||
border-top: 1rpx solid #f0f0f0; |
|||
} |
|||
|
|||
.date-item { |
|||
font-size: 24rpx; |
|||
color: #666; |
|||
} |
|||
|
|||
.section-title { |
|||
display: flex; |
|||
align-items: center; |
|||
margin: 30rpx 0 16rpx; |
|||
} |
|||
|
|||
.title-text { |
|||
font-size: 28rpx; |
|||
font-weight: 600; |
|||
color: #333; |
|||
} |
|||
|
|||
.title-count { |
|||
font-size: 24rpx; |
|||
color: #666; |
|||
margin-left: 8rpx; |
|||
} |
|||
|
|||
.schedule-list, .usage-list { |
|||
background: white; |
|||
border-radius: 16rpx; |
|||
overflow: hidden; |
|||
margin-bottom: 20rpx; |
|||
} |
|||
|
|||
.schedule-item, .usage-item { |
|||
display: flex; |
|||
align-items: center; |
|||
padding: 24rpx; |
|||
border-bottom: 1rpx solid #f0f0f0; |
|||
|
|||
&:last-child { |
|||
border-bottom: none; |
|||
} |
|||
} |
|||
|
|||
.schedule-date, .usage-date { |
|||
display: flex; |
|||
flex-direction: column; |
|||
width: 140rpx; |
|||
margin-right: 20rpx; |
|||
} |
|||
|
|||
.date-text { |
|||
font-size: 28rpx; |
|||
font-weight: 600; |
|||
color: #333; |
|||
margin-bottom: 4rpx; |
|||
} |
|||
|
|||
.time-text { |
|||
font-size: 24rpx; |
|||
color: #666; |
|||
} |
|||
|
|||
.schedule-info, .usage-info { |
|||
flex: 1; |
|||
} |
|||
|
|||
.schedule-type { |
|||
display: flex; |
|||
gap: 8rpx; |
|||
margin-bottom: 8rpx; |
|||
} |
|||
|
|||
.type-tag, .course-type-tag { |
|||
padding: 4rpx 8rpx; |
|||
border-radius: 8rpx; |
|||
font-size: 20rpx; |
|||
|
|||
&.type-temp { |
|||
background: #fff7e6; |
|||
color: #fa8c16; |
|||
} |
|||
|
|||
&.type-fixed { |
|||
background: #f6ffed; |
|||
color: #52c41a; |
|||
} |
|||
|
|||
&.course-add { |
|||
background: #e6f7ff; |
|||
color: #1890ff; |
|||
} |
|||
|
|||
&.course-makeup { |
|||
background: #f9f0ff; |
|||
color: #722ed1; |
|||
} |
|||
|
|||
&.course-waiting { |
|||
background: #fff2f0; |
|||
color: #ff4d4f; |
|||
} |
|||
} |
|||
|
|||
.schedule-status, .usage-status { |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.status-text { |
|||
font-size: 24rpx; |
|||
font-weight: 500; |
|||
|
|||
&.schedule-pending { |
|||
color: #faad14; |
|||
} |
|||
|
|||
&.schedule-completed { |
|||
color: #52c41a; |
|||
} |
|||
|
|||
&.schedule-leave { |
|||
color: #ff4d4f; |
|||
} |
|||
|
|||
&.confirmed { |
|||
color: #52c41a; |
|||
} |
|||
} |
|||
|
|||
.schedule-arrow { |
|||
margin-left: 16rpx; |
|||
} |
|||
|
|||
.arrow-icon { |
|||
font-size: 24rpx; |
|||
color: #ccc; |
|||
} |
|||
|
|||
.usage-hours { |
|||
font-size: 26rpx; |
|||
color: #333; |
|||
margin-bottom: 4rpx; |
|||
} |
|||
|
|||
.usage-type { |
|||
font-size: 24rpx; |
|||
color: #666; |
|||
} |
|||
|
|||
.no-data { |
|||
text-align: center; |
|||
padding: 100rpx 0; |
|||
} |
|||
|
|||
.no-data-text { |
|||
font-size: 24rpx; |
|||
color: #999; |
|||
} |
|||
</style> |
|||
@ -1,836 +0,0 @@ |
|||
<!--数据-首页--> |
|||
<template> |
|||
<view class="main_box"> |
|||
<!--自定义导航栏--> |
|||
<view class="navbar_section"> |
|||
<view class="title">数据</view> |
|||
</view> |
|||
|
|||
<!-- 市场人员展示--> |
|||
<view v-if="infoData.role_type == 'market_type'"> |
|||
<view class="count_section"> |
|||
<view class="title_box">业绩统计</view> |
|||
<view class="box_1"> |
|||
<view class="left"> |
|||
<view class="charts-box"> |
|||
<qiun-data-charts |
|||
type="ring" |
|||
:opts="opts" |
|||
:chartData="chartData" |
|||
/> |
|||
</view> |
|||
</view> |
|||
<view class="right"> |
|||
<view class="title">本周已分配</view> |
|||
<view class="content"> |
|||
<text class="strong">{{infoData.num_1}}人</text> |
|||
</view> |
|||
<view class="title">本周未分配</view> |
|||
<view class="content"> |
|||
<text class="strong">{{infoData.num_2}}人</text> |
|||
<!-- <text>较上月</text>--> |
|||
</view> |
|||
|
|||
<view class="legeng"> |
|||
<view class="item"> |
|||
<view class="piece" style="background-color: #45c59f;"></view> |
|||
<view class="lable">已分配</view> |
|||
|
|||
<view class="item"> |
|||
<view class="piece" style="background-color:#02a7f0;"></view> |
|||
<view class="lable">未分配</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="title_box" v-show="box_2_show">新客签到</view> |
|||
<view class="box_2" v-show="box_2_show"> |
|||
<view class="progress-container"> |
|||
<view :style="{ width: progress + '%' }" class="progress-bar"> |
|||
</view> |
|||
<view class="dian" :style="{ left: (progress - 2) + '%' }"></view> |
|||
</view> |
|||
<view class="progress-text"> |
|||
<text>0</text> |
|||
<text>50人</text> |
|||
<text>100人</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="main_section"> |
|||
<view class="tag_section"> |
|||
<view :class="['left',tagType=='1'?'select':'']" @click="changeTag('1')">统计分析</view> |
|||
<view :class="['right',tagType=='2'?'select':'']" @click="changeTag('2')">统计排名</view> |
|||
</view> |
|||
|
|||
<!-- 销售分析--> |
|||
<view class="section_box_1" v-if="tagType=='1'"> |
|||
<view class="left"> |
|||
<qiun-data-charts |
|||
type="funnel" |
|||
:opts="opts_2" |
|||
:chartData="chartData_2" |
|||
/> |
|||
</view> |
|||
<view class="right"> |
|||
<view class="item"> |
|||
<view class="title" style="color: #12E7E8;"> |
|||
已分配<text>({{infoData.num_1_rate}}%)</text> |
|||
</view> |
|||
<view class="title" style="color: #12E7E8;"> |
|||
{{infoData.num_1}}<text>人</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="item"> |
|||
<view class="title" style="color: #4DA3FF;"> |
|||
未分配<text>({{infoData.num_2_rate}}%)</text> |
|||
</view> |
|||
<view class="title" style="color: #4DA3FF;"> |
|||
{{infoData.num_2}}<text>人</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="item"> |
|||
<view class="title" style="color: #FFCB31;"> |
|||
本周拉新<text>({{infoData.num_3_rate}}%)</text> |
|||
</view> |
|||
<view class="title" style="color: #FFCB31;"> |
|||
{{infoData.total_1}}<text>人</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 销售排名--> |
|||
<view class="section_box_2" v-else> |
|||
<view class="itme" v-for="(v,k) in infoData.staff_list" :key="k"> |
|||
<view class="title">{{k+1}} {{v.name}}</view> |
|||
<view class="money">{{v.goal}}人</view> |
|||
<view class="plan"> |
|||
<fui-progress :percent="getPercent(v.wx_yj,v.goal)" height="15" radius="100" background="#e4e4e4" activeColor="#4bced0"></fui-progress> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 销售人员展示--> |
|||
<view v-else> |
|||
<view class="count_section"> |
|||
<view class="title_box">业绩统计</view> |
|||
<view class="box_1"> |
|||
<view class="left"> |
|||
<view class="charts-box"> |
|||
<qiun-data-charts |
|||
type="ring" |
|||
:opts="opts" |
|||
:chartData="chartData" |
|||
/> |
|||
</view> |
|||
</view> |
|||
<view class="right"> |
|||
<view class="title">已成交</view> |
|||
<view class="content"> |
|||
<text class="strong">{{infoData.num_1}}人</text> |
|||
</view> |
|||
<view class="title">未成交</view> |
|||
<view class="content"> |
|||
<text class="strong">{{infoData.num_2}}人</text> |
|||
<!-- <text>较上月</text>--> |
|||
</view> |
|||
|
|||
<view class="legeng"> |
|||
<view class="item"> |
|||
<view class="piece" style="background-color: #45c59f;"></view> |
|||
<view class="lable">已成交</view> |
|||
|
|||
<view class="item"> |
|||
<view class="piece" style="background-color:#02a7f0;"></view> |
|||
<view class="lable">未成交</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="main_section"> |
|||
<view class="tag_section"> |
|||
<view :class="['left',tagType=='1'?'select':'']" @click="changeTag('1')">统计分析</view> |
|||
<view :class="['right',tagType=='2'?'select':'']" @click="changeTag('2')">统计排名</view> |
|||
</view> |
|||
|
|||
<!-- 销售分析--> |
|||
<view class="section_box_1" v-if="tagType=='1'"> |
|||
<view class="left"> |
|||
<qiun-data-charts |
|||
type="funnel" |
|||
:opts="opts_2" |
|||
:chartData="chartData_2" |
|||
/> |
|||
</view> |
|||
<view class="right"> |
|||
<view class="item"> |
|||
<view class="title" style="color: #12E7E8;"> |
|||
已成交<text>({{infoData.num_1_rate}}%)</text> |
|||
</view> |
|||
<view class="title" style="color: #12E7E8;"> |
|||
{{infoData.num_1}}<text>人</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="item"> |
|||
<view class="title" style="color: #4DA3FF;"> |
|||
未成交<text>({{infoData.num_2_rate}}%)</text> |
|||
</view> |
|||
<view class="title" style="color: #4DA3FF;"> |
|||
{{infoData.num_2}}<text>人</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="item"> |
|||
<view class="title" style="color: #FFCB31;"> |
|||
本周分配<text>({{infoData.num_3_rate}}%)</text> |
|||
</view> |
|||
<view class="title" style="color: #FFCB31;"> |
|||
{{infoData.total_1}}<text>人</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 销售排名--> |
|||
<view class="section_box_2" v-else> |
|||
<view class="itme" v-for="(v,k) in infoData.staff_list" :key="k"> |
|||
<view class="title">{{k+1}} {{v.name}}</view> |
|||
<view class="money">{{v.goal}}人</view> |
|||
<view class="plan"> |
|||
<fui-progress :percent="getPercent(v.wx_yj,v.goal)" height="15" radius="100" background="#e4e4e4" activeColor="#4bced0"></fui-progress> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
|
|||
<!-- 底部导航--> |
|||
<AQTabber/> |
|||
</view> |
|||
</template> |
|||
|
|||
|
|||
|
|||
<script> |
|||
import apiRoute from '@/api/apiRoute.js'; |
|||
// import marketApi from '@/api/market.js'; |
|||
import AQTabber from "@/components/AQ/AQTabber.vue" |
|||
|
|||
|
|||
export default { |
|||
components: { |
|||
AQTabber, |
|||
}, |
|||
data() { |
|||
return { |
|||
|
|||
infoData:{ |
|||
staff_list:[],//销售排行 |
|||
},//详情数据 |
|||
|
|||
//统计图相关 |
|||
chartData: {}, |
|||
opts: { |
|||
rotate: false, // 是否旋转图表 |
|||
rotateLock: false, // 是否锁定旋转 |
|||
color: [ |
|||
"#e9e9e9", // 颜色1：未完成 |
|||
"#02a7f0", // 颜色2：续费 |
|||
"#45c59f", // 颜色3：新签 |
|||
], |
|||
padding: [0, 0, 0, 0], // 图表内边距 [上, 右, 下, 左] |
|||
dataLabel: true, // 是否显示数据标签 |
|||
enableScroll: false, // 是否启用滚动 |
|||
legend: { |
|||
show: false, // 是否显示图例 |
|||
// position: "right", // 图例位置 |
|||
// lineHeight: 25 // 图例行高 |
|||
}, |
|||
title: { |
|||
name: "本周分析", // 主标题文本 |
|||
fontSize: 16, // 主标题字体大小 |
|||
color: "#666666" // 主标题颜色 |
|||
}, |
|||
subtitle: { |
|||
name: "0%", // 副标题文本 |
|||
fontSize: 18, // 副标题字体大小 |
|||
color: "#7cb5ec" // 副标题颜色 |
|||
}, |
|||
extra: { |
|||
ring: { |
|||
ringWidth: 17, // 环形图宽度 |
|||
activeOpacity: 0.5, // 激活状态透明度 |
|||
activeRadius: 5, // 启用Tooltip点击时，突出部分的宽度（最大值不得超过labelWidth） |
|||
offsetAngle: 0, // 起始角度偏移 |
|||
labelWidth: 1, // 标签宽度 |
|||
border: true, // 是否显示边框 |
|||
customRadius:68,//自定义半径（一般不需要传值，饼图会自动计算半径，自定义半径可能会导致显示图表显示不全） |
|||
borderWidth: 2, // 分割线的宽度 |
|||
borderColor: "#fff" // 边框颜色 |
|||
} |
|||
} |
|||
}, |
|||
|
|||
//新客签到进度条统计 |
|||
progress: 50, // 初始进度为50% |
|||
box_2_show: false,//新客签到进度条统计|true=显示,false=隐藏 |
|||
|
|||
tagType:'1',//1=销售分析,2=销售排名 |
|||
|
|||
//销售分析统计图 |
|||
chartData_2: {}, |
|||
opts_2: { |
|||
// 颜色数组，用于图表的系列颜色 |
|||
// color: ["#12E7E8","#4DA3FF","#FFCB31"], |
|||
// 内边距，顺序为上、右、下、左 |
|||
padding: [0,0,0,0], |
|||
// 是否启用滚动，false 表示不启用 |
|||
enableScroll: false, |
|||
legend:{ |
|||
show:true// 是否显示图例标识 |
|||
}, |
|||
// 额外配置项 |
|||
extra: { |
|||
// 漏斗图配置 |
|||
funnel: { |
|||
// 激活状态下的透明度 |
|||
activeOpacity: 0.3, |
|||
// 激活状态下的宽度 |
|||
activeWidth: 10, |
|||
// 是否显示边框 |
|||
border: true, |
|||
// 边框宽度 |
|||
borderWidth: 2, |
|||
// 边框颜色 |
|||
borderColor: "#FFFFFF", |
|||
// 填充透明度 |
|||
fillOpacity: 1, |
|||
// 标签对齐方式，left 表示左对齐 |
|||
labelAlign: "right", |
|||
// 漏斗图类型，pyramid 表示金字塔型 |
|||
type: "pyramid" |
|||
} |
|||
} |
|||
}, |
|||
|
|||
userInfo: {},//当前登录的用户信息 |
|||
} |
|||
}, |
|||
onLoad() {}, |
|||
onShow() { |
|||
this.init() |
|||
}, |
|||
methods: { |
|||
|
|||
async init(){ |
|||
await this.getUserInfo() |
|||
await this.getPerformance() |
|||
}, |
|||
|
|||
//获取用户信息 |
|||
async getUserInfo(){ |
|||
let res = await apiRoute.getPersonnelInfo({}) |
|||
if (res.code != 1) { |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
|
|||
this.userInfo = res.data |
|||
}, |
|||
|
|||
//获取统计信息 |
|||
async getPerformance(){ |
|||
let role_key_arr = this.userInfo.role_key_arr.join(',') |
|||
let params = { |
|||
personnel_id:this.userInfo.id,//员工表id |
|||
role_key_arr: role_key_arr, // 角色key 转换数组为字符串，若为空则赋予空字符串 |
|||
} |
|||
let res= await apiRoute.xs_statisticsMarketData(params) |
|||
if (res.code != 1) { |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: 'none' |
|||
}); |
|||
return |
|||
} |
|||
// console.log('xx',res) |
|||
this.infoData = res.data |
|||
|
|||
if(this.infoData.role_type == 'market_type'){ |
|||
//市场人员 |
|||
//环形统计图相关 |
|||
let chartData_1 = { |
|||
series: [ |
|||
{ |
|||
data: [ |
|||
{ |
|||
"name": "已分配", |
|||
"value": this.infoData.num_1_rate, |
|||
"labelShow": false |
|||
}, |
|||
{ |
|||
"name": "未分配", |
|||
"value": this.infoData.num_2_rate, |
|||
"labelShow": false |
|||
}, |
|||
{ |
|||
"name": "总人数", |
|||
"value": this.infoData.num_3_rate, |
|||
"labelShow": false |
|||
}, |
|||
] |
|||
} |
|||
] |
|||
}; |
|||
this.chartData = JSON.parse(JSON.stringify(chartData_1)); |
|||
this.opts.subtitle = { |
|||
name: `${this.infoData.num_4_rate}%`, // 副标题文本 |
|||
fontSize: 18, // 副标题字体大小 |
|||
color: "#7cb5ec" // 副标题颜色 |
|||
} |
|||
|
|||
//销售分析统计图相关 |
|||
let chartDataB = { |
|||
series: [ |
|||
{ |
|||
data: [ |
|||
{ |
|||
"name": "本周拉新", // 数据项的名称，表示当前数据的分类为“跟进中” |
|||
"centerText": this.infoData.total_1, // 中心显示的文本内容，这里为空字符串，表示不显示中心文本 |
|||
"value": this.infoData.num_3_rate, // 数据项的值，表示“跟进中”的数量为50 |
|||
// "labelText":'跟进中' |
|||
"labelShow":false, |
|||
"color": "#FFCB31", // 自定义颜色 |
|||
}, |
|||
{ |
|||
"name": "未分配", |
|||
"centerText": this.infoData.num_2, |
|||
"value": this.infoData.num_2_rate, |
|||
// "labelText":"试听" |
|||
"labelShow":false, |
|||
"color": "#4DA3FF", // 自定义颜色 |
|||
}, |
|||
{ |
|||
"name": "已分配", |
|||
"centerText": this.infoData.num_1, |
|||
"value": this.infoData.num_1_rate, |
|||
// "labelText":"已成交" |
|||
"labelShow":false, |
|||
"color": "#12E7E8", // 自定义颜色 |
|||
} |
|||
] |
|||
} |
|||
] |
|||
}; |
|||
this.chartData_2 = JSON.parse(JSON.stringify(chartDataB)); |
|||
}else{ |
|||
//环形统计图相关 |
|||
let chartData_1 = { |
|||
series: [ |
|||
{ |
|||
data: [ |
|||
{ |
|||
"name": "已成交", |
|||
"value": this.infoData.num_1_rate, |
|||
"labelShow": false |
|||
}, |
|||
{ |
|||
"name": "未成交", |
|||
"value": this.infoData.num_2_rate, |
|||
"labelShow": false |
|||
}, |
|||
{ |
|||
"name": "总人数", |
|||
"value": this.infoData.num_3_rate, |
|||
"labelShow": false |
|||
}, |
|||
] |
|||
} |
|||
] |
|||
}; |
|||
this.chartData = JSON.parse(JSON.stringify(chartData_1)); |
|||
this.opts.subtitle = { |
|||
name: `${this.infoData.num_4_rate}%`, // 副标题文本 |
|||
fontSize: 18, // 副标题字体大小 |
|||
color: "#7cb5ec" // 副标题颜色 |
|||
} |
|||
|
|||
//销售分析统计图相关 |
|||
let chartDataB = { |
|||
series: [ |
|||
{ |
|||
data: [ |
|||
{ |
|||
"name": "本周成交", // 数据项的名称，表示当前数据的分类为“跟进中” |
|||
"centerText": this.infoData.total_1, // 中心显示的文本内容，这里为空字符串，表示不显示中心文本 |
|||
"value": this.infoData.num_3_rate, // 数据项的值，表示“跟进中”的数量为50 |
|||
// "labelText":'跟进中' |
|||
"labelShow":false, |
|||
"color": "#FFCB31", // 自定义颜色 |
|||
}, |
|||
{ |
|||
"name": "未成交", |
|||
"centerText": this.infoData.num_2, |
|||
"value": this.infoData.num_2_rate, |
|||
// "labelText":"试听" |
|||
"labelShow":false, |
|||
"color": "#4DA3FF", // 自定义颜色 |
|||
}, |
|||
{ |
|||
"name": "已成交", |
|||
"centerText": this.infoData.num_1, |
|||
"value": this.infoData.num_1_rate, |
|||
// "labelText":"已成交" |
|||
"labelShow":false, |
|||
"color": "#12E7E8", // 自定义颜色 |
|||
} |
|||
] |
|||
} |
|||
] |
|||
}; |
|||
this.chartData_2 = JSON.parse(JSON.stringify(chartDataB)); |
|||
} |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
}, |
|||
|
|||
//计算百分比取整数 |
|||
getPercent(num1,total){ |
|||
// 计算百分比并取整数 |
|||
if(!total){ |
|||
return 0 |
|||
} |
|||
|
|||
let num_percent = (num1 / total) * 100; |
|||
if(num_percent <= 0){ |
|||
num_percent = 0 |
|||
}else{ |
|||
num_percent = Math.ceil((num1 / total) * 100); |
|||
} |
|||
// console.log('qqq',[num_percent,num1,total]) |
|||
return num_percent |
|||
}, |
|||
|
|||
|
|||
|
|||
//切换tag |
|||
changeTag(type){ |
|||
this.tagType = type |
|||
}, |
|||
|
|||
//打开到课率统计 |
|||
openViewArrivalStatistics(){ |
|||
this.$navigateTo({ |
|||
url: '/pages/market/my/arrival_statistics' |
|||
}) |
|||
}, |
|||
|
|||
//打开即将到期 |
|||
openViewDueSoon(){ |
|||
this.$navigateTo({ |
|||
url: '/pages/market/my/due_soon' |
|||
}) |
|||
}, |
|||
|
|||
//打开授课统计 |
|||
openViewSchoolingStatistics(){ |
|||
this.$navigateTo({ |
|||
url: '/pages/market/my/schooling_statistics' |
|||
}) |
|||
}, |
|||
|
|||
//打开意见反馈 |
|||
openViewFeedback(){ |
|||
this.$navigateTo({ |
|||
url: '/pages/common/feedback' |
|||
}) |
|||
}, |
|||
|
|||
//打开个人资料 |
|||
openViewMyInfo(){ |
|||
this.$navigateTo({ |
|||
url: '/pages/market/my/info' |
|||
}) |
|||
}, |
|||
|
|||
//打开企业信息 |
|||
openViewFirmInfo(){ |
|||
this.$navigateTo({ |
|||
url: '/pages/market/my/firm_info' |
|||
}) |
|||
}, |
|||
|
|||
|
|||
//打开设置 |
|||
openViewSetUp(){ |
|||
this.$navigateTo({ |
|||
url: '/pages/market/my/set_up' |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
|
|||
|
|||
.main_box{ |
|||
background: #292929; |
|||
min-height: 100%; |
|||
} |
|||
|
|||
//自定义导航栏 |
|||
.navbar_section{ |
|||
border: 1px solid #292929; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
background: #292929; |
|||
position: relative; |
|||
.title{ |
|||
padding: 40rpx 0rpx; |
|||
|
|||
/* 小程序端样式 */ |
|||
// #ifdef MP-WEIXIN |
|||
padding: 80rpx 0rpx; |
|||
// #endif |
|||
|
|||
font-size: 30rpx; |
|||
color: #fff; |
|||
} |
|||
|
|||
.statistics-btn { |
|||
position: absolute; |
|||
right: 20rpx; |
|||
background-color: #29D3B4; |
|||
padding: 10rpx 20rpx; |
|||
border-radius: 30rpx; |
|||
font-size: 24rpx; |
|||
color: #fff; |
|||
} |
|||
} |
|||
|
|||
|
|||
//统计信息 |
|||
.count_section{ |
|||
padding: 20rpx 46rpx; |
|||
padding-bottom: 60rpx; |
|||
background-color: #434544; |
|||
color: #fff; |
|||
.title_box{ |
|||
font-size: 26rpx; |
|||
} |
|||
.box_1{ |
|||
margin-top: 25rpx; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
gap: 30rpx; |
|||
.left{ |
|||
width: 280rpx; /* 设置宽度为 280rpx */ |
|||
height: 280rpx; /* 设置高度为 280rpx */ |
|||
.charts-box { |
|||
width: 280rpx; /* 设置宽度为 280rpx */ |
|||
height: 280rpx; /* 设置高度为 280rpx */ |
|||
} |
|||
} |
|||
.right{ |
|||
font-size: 24rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 20rpx; |
|||
.title{} |
|||
.content{ |
|||
display: flex; |
|||
gap: 40rpx; |
|||
.strong{ |
|||
font-size: 30rpx; |
|||
} |
|||
.text{ |
|||
font-size: 24rpx; |
|||
} |
|||
} |
|||
.legeng{ |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 50rpx; |
|||
.item{ |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 20rpx; |
|||
.piece{ |
|||
|
|||
width: 20rpx; |
|||
height: 20rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
} |
|||
// 其他样式省略 |
|||
.box_2 { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
margin-top: 20rpx; |
|||
|
|||
.progress-container { |
|||
position: relative; |
|||
width: 80%; |
|||
height: 4rpx; |
|||
background-color: #ccc; |
|||
border-radius: 2rpx; |
|||
//overflow: hidden; |
|||
margin-bottom: 10rpx; |
|||
|
|||
.progress-bar { |
|||
height: 100%; |
|||
background-color: #45c59f; |
|||
border-radius: 2rpx; |
|||
} |
|||
.dian{ |
|||
position: absolute; |
|||
top: -9rpx; |
|||
left: 0rpx; |
|||
width: 18rpx; |
|||
height: 18rpx; |
|||
border-radius: 50%; |
|||
background-color: #fff; |
|||
|
|||
} |
|||
} |
|||
|
|||
.progress-text { |
|||
margin-left: 5%; |
|||
width: 85%; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
text { |
|||
font-size: 26rpx; |
|||
color: #fff; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.main_section{ |
|||
background: #292929 100%; |
|||
padding: 0 24rpx; |
|||
padding-top: 40rpx; |
|||
padding-bottom: 150rpx; |
|||
font-size: 24rpx; |
|||
color: #333333; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 22rpx; |
|||
|
|||
.tag_section{ |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
view{ |
|||
border: 1px solid #969696; |
|||
width: 258rpx; |
|||
height: 72rpx; |
|||
line-height: 72rpx; |
|||
background-color: #292929; |
|||
text-align: center; |
|||
font-size: 26rpx; |
|||
color: #fff; |
|||
} |
|||
.left{ |
|||
border-radius: 22rpx 0rpx 0rpx 22rpx; |
|||
} |
|||
.right{ |
|||
border-radius: 0rpx 22rpx 22rpx 0rpx; |
|||
} |
|||
.select{ |
|||
background-color: #fff; |
|||
color: #29D3B4; |
|||
} |
|||
} |
|||
|
|||
.section_box_1{ |
|||
margin-top: 38rpx; |
|||
padding: 66rpx 14rpx; |
|||
border-radius: 12rpx; |
|||
background-color: #434544FF; |
|||
color: #d9dada; |
|||
font-size: 26rpx; |
|||
text-align: center; |
|||
height: 600rpx; |
|||
|
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
.left{ |
|||
width: 70%; |
|||
} |
|||
.right{ |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 20rpx; |
|||
.item{ |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 10rpx; |
|||
.title{ |
|||
font-size: 26rpx; |
|||
text-align: left; |
|||
text{ |
|||
margin-left: 5rpx; |
|||
color: #d9dada; |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
} |
|||
|
|||
.section_box_2{ |
|||
color: #fff; |
|||
margin-top: 38rpx; |
|||
padding: 20rpx 42rpx; |
|||
background-color: #434544; |
|||
border-radius: 12rpx; |
|||
font-size: 26rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 20rpx; |
|||
.itme{ |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 15rpx; |
|||
.money{ |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
|
|||
} |
|||
|
|||
|
|||
</style> |
|||
@ -1,390 +0,0 @@ |
|||
<template> |
|||
<view class="assemble"> |
|||
<view style="height: 20rpx;"></view> |
|||
<!-- 市场人员展示--> |
|||
<view class="div-style"> |
|||
<view style="height: 38vh;"> |
|||
<view style="display: flex;align-items: center;padding: 20rpx 0 0 20rpx;"> |
|||
<view> |
|||
<image :src="$util.img('/uniapp_src/static/images/index/danlan.png')" class="drop-image"> |
|||
</image> |
|||
</view> |
|||
<view class="title">本月业绩</view> |
|||
</view> |
|||
<view class="coach-message"> |
|||
<view class="left1"> |
|||
<view style="padding: 20rpx 0;"> |
|||
<view style="display: flex;align-items: center;"> |
|||
<view style="padding: 12rpx;"> |
|||
<image :src="$util.img('/uniapp_src/static/images/index/huang.png')" |
|||
class="drop-image-x"></image> |
|||
</view> |
|||
<view class="title-x">资源总数</view> |
|||
</view> |
|||
<view class="title-x1">{{infoData.month.new_total}}人</view> |
|||
</view> |
|||
|
|||
<view> |
|||
<view style="display: flex;align-items: center;"> |
|||
<view style="padding: 12rpx;"> |
|||
<image :src="$util.img('/uniapp_src/static/images/index/lvs.png')" |
|||
class="drop-image-x"></image> |
|||
</view> |
|||
<view class="title-x">已分配</view> |
|||
</view> |
|||
<view class="title-x1">{{infoData.month.new_total}}人</view> |
|||
</view> |
|||
|
|||
<view> |
|||
<view style="display: flex;align-items: center;"> |
|||
<view style="padding: 12rpx;"> |
|||
<image :src="$util.img('/uniapp_src/static/images/index/shenlan.png')" |
|||
class="drop-image-x"></image> |
|||
</view> |
|||
<view class="title-x">昨日新增</view> |
|||
</view> |
|||
<view class="title-x1">{{infoData.month.yesterday_new}}人</view> |
|||
</view> |
|||
|
|||
<view> |
|||
<view style="display: flex;align-items: center;"> |
|||
<view style="padding: 12rpx;"> |
|||
<image :src="$util.img('/uniapp_src/static/images/index/lan.png')" |
|||
class="drop-image-x"></image> |
|||
</view> |
|||
<view class="title-x">今日新增</view> |
|||
</view> |
|||
<view class="title-x1">{{infoData.month.today_new}}人</view> |
|||
</view> |
|||
</view> |
|||
<!-- 统计图--> |
|||
<view class="right1"> |
|||
<view style="text-align: center;">{{infoData.date_range}}</view> |
|||
<view class="statistics_box"> |
|||
|
|||
<view class="item"> |
|||
<view class="box"> |
|||
<view class="progress-bar" |
|||
:style="{ height: `${infoData.month.yesterday_new_rate}%`, background: '#f59a23' }"> |
|||
</view> |
|||
<view class="ratio" |
|||
:style="{ color: infoData.month.yesterday_new_rate <= 0 ? '#333333' : '#000' }"> |
|||
{{ infoData.month.yesterday_new_rate }}% |
|||
</view> |
|||
</view> |
|||
<view class="title">昨日</view> |
|||
</view> |
|||
|
|||
<view class="item"> |
|||
<view class="box"> |
|||
<view class="progress-bar" |
|||
:style="{ height: `${infoData.month.assigned_sales_rate}%`, background: '#039f64' }"> |
|||
</view> |
|||
<view class="ratio" |
|||
:style="{ color: infoData.month.assigned_sales_rate <= 0 ? '#333333' : '#000' }"> |
|||
{{ infoData.month.assigned_sales_rate }}% |
|||
</view> |
|||
</view> |
|||
<view class="title">分配</view> |
|||
</view> |
|||
|
|||
<view class="item"> |
|||
<view class="box"> |
|||
<view class="progress-bar" |
|||
:style="{ height: `${infoData.month.today_new_rate}%`, background: '#4066f2' }"> |
|||
</view> |
|||
<view class="ratio" |
|||
:style="{ color: infoData.month.today_new_rate <= 0 ? '#333333' : '#000' }"> |
|||
{{ infoData.month.today_new_rate }}% |
|||
</view> |
|||
</view> |
|||
<view class="title">今日</view> |
|||
</view> |
|||
|
|||
</view> |
|||
</view> |
|||
|
|||
</view> |
|||
</view> |
|||
|
|||
<view style="width: 90%;background: #EFF3F8;height: 4rpx;margin: auto;"></view> |
|||
|
|||
<view style="height: 38vh;"> |
|||
<view style="display: flex;align-items: center;padding: 20rpx 0 0 20rpx;"> |
|||
<view> |
|||
<image :src="$util.img('/uniapp_src/static/images/index/danlv.png')" class="drop-image"></image> |
|||
</view> |
|||
<view class="title">个人业绩</view> |
|||
</view> |
|||
|
|||
<view class="coach-message"> |
|||
<view class="this_month"> |
|||
<view style="padding: 20rpx 0;display: flex;justify-content: space-between;"> |
|||
<view style="width: 48%;"> |
|||
<view style="display: flex;align-items: center;"> |
|||
<view style="padding: 12rpx;"> |
|||
<image :src="$util.img('/uniapp_src/static/images/index/danlv.png')" |
|||
class="drop-image-x"></image> |
|||
</view> |
|||
<view class="title-x">今日新增资源</view> |
|||
</view> |
|||
<view class="title-x1">{{infoData.last_month.xzzy}}人</view> |
|||
</view> |
|||
|
|||
<view style="width: 48%;"> |
|||
<view style="display: flex;align-items: center;"> |
|||
<view style="padding: 12rpx;"> |
|||
<image :src="$util.img('/uniapp_src/static/images/index/danlv.png')" |
|||
class="drop-image-x"></image> |
|||
</view> |
|||
<view class="title-x">今日业绩收入</view> |
|||
</view> |
|||
<view class="title-x1">{{infoData.last_month.yjsr}}元</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view style="padding: 20rpx 0;display: flex;justify-content: space-between;"> |
|||
<view style="width: 48%;"> |
|||
<view style="display: flex;align-items: center;"> |
|||
<view style="padding: 12rpx;"> |
|||
<image :src="$util.img('/uniapp_src/static/images/index/danlv.png')" |
|||
class="drop-image-x"></image> |
|||
</view> |
|||
<view class="title-x">历史关单数量</view> |
|||
</view> |
|||
<view class="title-x1">{{infoData.last_month.gdsl}}人</view> |
|||
</view> |
|||
|
|||
<view style="width: 48%;"> |
|||
<view style="display: flex;align-items: center;"> |
|||
<view style="padding: 12rpx;"> |
|||
<image :src="$util.img('/uniapp_src/static/images/index/danlv.png')" |
|||
class="drop-image-x"></image> |
|||
</view> |
|||
<view class="title-x">其他奖励</view> |
|||
</view> |
|||
<view class="title-x1">{{infoData.last_month.qtjl}}元</view> |
|||
</view> |
|||
|
|||
|
|||
</view> |
|||
<view style="padding: 20rpx 0;display: flex;justify-content: space-between;"> |
|||
<view style="width: 48%;"> |
|||
<view style="display: flex;align-items: center;"> |
|||
<view style="padding: 12rpx;"> |
|||
<image :src="$util.img('/uniapp_src/static/images/index/danlv.png')" |
|||
class="drop-image-x"></image> |
|||
</view> |
|||
<view class="title-x">本月提成</view> |
|||
</view> |
|||
<view class="title-x1">{{infoData.last_month.bytc}}元</view> |
|||
</view> |
|||
|
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<AQTabber /> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import apiRoute from '@/api/apiRoute.js'; |
|||
|
|||
import AQTabber from "@/components/AQ/AQTabber.vue" |
|||
|
|||
export default { |
|||
components: { |
|||
AQTabber, |
|||
}, |
|||
data() { |
|||
return { |
|||
infoData: {}, //详情 |
|||
|
|||
userInfo: {}, //当前登录的用户信息 |
|||
} |
|||
}, |
|||
onShow() { |
|||
this.init() |
|||
}, |
|||
methods: { |
|||
async init() { |
|||
await this.getUserInfo() |
|||
await this.getXsIndex() |
|||
}, |
|||
|
|||
//获取用户信息 |
|||
async getUserInfo() { |
|||
let res = await apiRoute.getPersonnelInfo({}) |
|||
if (res.code != 1) { |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
|
|||
this.userInfo = res.data |
|||
}, |
|||
|
|||
//获取销售首页详情 |
|||
async getXsIndex() { |
|||
let role_key_arr = this.userInfo.role_key_arr.join(',') |
|||
let params = { |
|||
personnel_id: this.userInfo.id, //员工表id |
|||
role_key_arr: role_key_arr, // 角色key 转换数组为字符串，若为空则赋予空字符串 |
|||
} |
|||
let res = await apiRoute.xs_statisticsMarketHome(params) |
|||
if (res.code != 1) { |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
this.infoData = res.data |
|||
console.log('统计', this.infoData) |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
//自定义导航栏 |
|||
.navbar_section { |
|||
border: 1px solid #fff; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
background: #fff; |
|||
|
|||
.title { |
|||
padding: 40rpx 0rpx; |
|||
|
|||
/* 小程序端样式 */ |
|||
// #ifdef MP-WEIXIN |
|||
padding: 80rpx 0rpx; |
|||
// #endif |
|||
|
|||
font-size: 30rpx; |
|||
color: #858585; |
|||
} |
|||
} |
|||
|
|||
.assemble { |
|||
width: 100%; |
|||
height: 100vh; |
|||
background: #292929; |
|||
} |
|||
|
|||
.div-style { |
|||
width: 92%; |
|||
height: 85vh; |
|||
background: #fff; |
|||
border-radius: 16rpx; |
|||
margin: auto; |
|||
} |
|||
|
|||
.coach-message { |
|||
width: 92%; |
|||
margin: 10rpx auto; |
|||
display: flex; |
|||
align-items: center; |
|||
padding-top: 20rpx; |
|||
} |
|||
|
|||
.drop-image { |
|||
width: 50rpx; |
|||
height: 50rpx; |
|||
} |
|||
|
|||
.title { |
|||
font-size: 30rpx; |
|||
color: #7F7F7F; |
|||
padding-left: 20rpx; |
|||
} |
|||
|
|||
.left1 { |
|||
width: 48%; |
|||
height: 95%; |
|||
margin: auto; |
|||
} |
|||
|
|||
.right1 { |
|||
width: 48%; |
|||
height: 95%; |
|||
margin: auto; |
|||
|
|||
.statistics_box { |
|||
margin: auto; |
|||
margin-top: 10rpx; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
|
|||
.item { |
|||
width: 90rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
|
|||
.box { |
|||
width: 100%; |
|||
height: 328rpx; |
|||
border: 1px solid #ddd; |
|||
border-radius: 6rpx; |
|||
background: #f5f5f5; |
|||
position: relative; |
|||
|
|||
.progress-bar { |
|||
width: 100%; |
|||
height: 0; |
|||
transition: height 0.3s ease; |
|||
position: absolute; |
|||
bottom: 0; |
|||
} |
|||
|
|||
.ratio { |
|||
width: 100%; |
|||
position: absolute; |
|||
bottom: -0rpx; |
|||
font-size: 26rpx; |
|||
text-align: center; |
|||
} |
|||
} |
|||
|
|||
.title { |
|||
margin-top: 5rpx; |
|||
padding: 0; |
|||
font-size: 26rpx; |
|||
color: #999999; |
|||
; |
|||
text-align: center; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.this_month { |
|||
width: 100%; |
|||
height: 95%; |
|||
margin: auto; |
|||
} |
|||
|
|||
.drop-image-x { |
|||
width: 20rpx; |
|||
height: 20rpx; |
|||
} |
|||
|
|||
.title-x { |
|||
font-size: 28rpx; |
|||
color: #7F7F7F; |
|||
padding-left: 20rpx; |
|||
} |
|||
|
|||
.title-x1 { |
|||
font-size: 28rpx; |
|||
color: #333333; |
|||
padding-left: 60rpx; |
|||
} |
|||
</style> |
|||
@ -1,207 +0,0 @@ |
|||
<!--企业信息--> |
|||
<template> |
|||
<view class="assemble"> |
|||
<view style="height: 30rpx;"></view> |
|||
|
|||
<scroll-view |
|||
class="ul" |
|||
scroll-y="true" |
|||
:lower-threshold="lowerThreshold" |
|||
@scrolltolower="loadMoreData_1" |
|||
style="height: 80vh;" |
|||
> |
|||
<view class="li" v-for="(v,k) in tableList" :key="k"> |
|||
<!--企业图--> |
|||
<view class="section_1"> |
|||
<image class="pic" v-if="v.campus_preview_image" :src="v.campus_preview_image" mode="aspectFit"></image> |
|||
</view> |
|||
|
|||
<view class="title_section">基本信息</view> |
|||
<view class="section_2"> |
|||
<view class="item"> |
|||
<view class="title">企业名称</view> |
|||
<view class="content">{{v.campus_name}}</view> |
|||
</view> |
|||
|
|||
<view class="item"> |
|||
<view class="title">企业地址</view> |
|||
<view class="content">{{v.campus_address}}</view> |
|||
</view> |
|||
</view> |
|||
|
|||
|
|||
<view class="title_section">企业地图</view> |
|||
<view class="section_3"> |
|||
<view class="map_box"> |
|||
<map |
|||
:id="`shopMap_${k}`" |
|||
:latitude="v.campus_coordinates_arr.lat" |
|||
:longitude="v.campus_coordinates_arr.lng" |
|||
:markers="getMarkers(k,v)" |
|||
:scale="15" |
|||
:show-location="false" |
|||
style="width: 90%; height: 400rpx;" |
|||
></map> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="title_section">企业介绍</view> |
|||
<view class="section_4"> |
|||
<view class="html" v-html="v. |
|||
campus_introduction"></view> |
|||
</view> |
|||
</view> |
|||
</scroll-view> |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import apiRoute from '@/api/apiRoute.js'; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
dataInfo:{},//企业信息 |
|||
|
|||
loading:false,//加载状态 |
|||
lowerThreshold: 100,//距离底部多远触发 |
|||
isReachedBottom: false,//防止重复加载|true=不可加载|false=可加载 |
|||
//筛选条件 |
|||
filteredData:{ |
|||
personnel_id:'', |
|||
}, |
|||
//数据列表 |
|||
tableList:[], |
|||
|
|||
//地图相关 |
|||
//地图控件 |
|||
mapControls:{ |
|||
position:{ |
|||
|
|||
}, |
|||
} |
|||
} |
|||
}, |
|||
onShow(){ |
|||
this.init() |
|||
}, |
|||
methods: { |
|||
//初始化 |
|||
async init(){ |
|||
await this.getUserInfo() |
|||
await this.getPersonnelCampus() |
|||
}, |
|||
|
|||
//获取用户信息 |
|||
async getUserInfo(){ |
|||
let res = await apiRoute.getPersonnelInfo({}) |
|||
if (res.code != 1) { |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
this.filteredData.personnel_id = res.data.id//员工id |
|||
|
|||
}, |
|||
|
|||
//获取校区信息 |
|||
async getPersonnelCampus(){ |
|||
let params = {...this.filteredData} |
|||
let res = await apiRoute.common_getPersonnelCampus(params) |
|||
if(res.code != 1){ |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
|
|||
this.tableList = res.data |
|||
console.log(123,this.tableList) |
|||
}, |
|||
|
|||
// 获取标记点 |
|||
getMarkers(id,item) { |
|||
return [{ |
|||
id: id, |
|||
latitude: item.campus_coordinates_arr.lat, |
|||
longitude: item.campus_coordinates_arr.lng, |
|||
name: item.campus_address, |
|||
iconPath: '/static/icon-img/ding_wei.png' |
|||
}]; |
|||
}, |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.assemble{ |
|||
width: 100%; |
|||
min-height: 100vh; |
|||
background: #333333; |
|||
color: #fff; |
|||
} |
|||
|
|||
.ul{ |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 40rpx; |
|||
.li{ |
|||
border-top: 1px solid #434544; |
|||
.section_1{ |
|||
.pic{ |
|||
width: 100%; |
|||
height: 300rpx; |
|||
} |
|||
} |
|||
.title_section{ |
|||
padding: 20rpx 40rpx; |
|||
color: #fff; |
|||
font-size: 24rpx; |
|||
} |
|||
.section_2{ |
|||
background-color: #434544; |
|||
display: flex; |
|||
flex-direction: column; |
|||
.item{ |
|||
padding: 40rpx; |
|||
padding-left: 40rpx; |
|||
display: flex; |
|||
gap: 30rpx; |
|||
} |
|||
} |
|||
.section_3{ |
|||
padding: 20rpx 22rpx; |
|||
.html{ |
|||
color: #fff; |
|||
} |
|||
.map_box{ |
|||
color: #fff; |
|||
display: flex; |
|||
justify-content: center; |
|||
} |
|||
} |
|||
.section_4{ |
|||
padding: 20rpx 22rpx; |
|||
padding-bottom: 250rpx; |
|||
.html{ |
|||
color: #fff; |
|||
} |
|||
} |
|||
} |
|||
.li:nth-child(1){ |
|||
border: 0px solid #434544; |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,177 +0,0 @@ |
|||
<!--合同详情页面--> |
|||
<template> |
|||
<view class="main_box"> |
|||
<!-- 合同基本信息 --> |
|||
<view class="contract_info_card" v-if="contractInfo"> |
|||
<view class="contract_header"> |
|||
<view class="contract_title">{{ contractInfo.title }}</view> |
|||
<view class="contract_status" :class="contractInfo.status"> |
|||
{{ contractInfo.status_text }} |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="contract_details"> |
|||
<view class="detail_item"> |
|||
<view class="detail_label">合同金额</view> |
|||
<view class="detail_value amount">¥{{ contractInfo.amount }}</view> |
|||
</view> |
|||
<view class="detail_item"> |
|||
<view class="detail_label">签订日期</view> |
|||
<view class="detail_value">{{ contractInfo.sign_date }}</view> |
|||
</view> |
|||
<view class="detail_item"> |
|||
<view class="detail_label">有效期</view> |
|||
<view class="detail_value">{{ contractInfo.valid_date }}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 空状态 --> |
|||
<view class="empty_state" v-if="!loading && !contractInfo"> |
|||
<image src="/static/icon-img/empty.png" class="empty_icon"></image> |
|||
<view class="empty_text">暂无合同信息</view> |
|||
</view> |
|||
|
|||
<!-- 加载状态 --> |
|||
<view class="loading_state" v-if="loading"> |
|||
<view class="loading_text">加载中...</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
contractInfo: null, |
|||
loading: false, |
|||
contractId: null, |
|||
childId: null |
|||
} |
|||
}, |
|||
onLoad(options) { |
|||
this.contractId = options.contractId |
|||
this.childId = options.childId |
|||
this.loadContractInfo() |
|||
}, |
|||
methods: { |
|||
async loadContractInfo() { |
|||
// 模拟合同详情数据 |
|||
this.contractInfo = { |
|||
title: '少儿篮球培训合同', |
|||
status: 'active', |
|||
status_text: '有效', |
|||
amount: '2880.00', |
|||
sign_date: '2024-01-01', |
|||
valid_date: '2024-01-01 至 2024-12-31' |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.main_box { |
|||
background: #f8f9fa; |
|||
min-height: 100vh; |
|||
padding: 20rpx; |
|||
} |
|||
|
|||
.contract_info_card { |
|||
background: #fff; |
|||
border-radius: 16rpx; |
|||
padding: 32rpx; |
|||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); |
|||
|
|||
.contract_header { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
margin-bottom: 32rpx; |
|||
padding-bottom: 24rpx; |
|||
border-bottom: 1px solid #f0f0f0; |
|||
|
|||
.contract_title { |
|||
font-size: 36rpx; |
|||
font-weight: 600; |
|||
color: #333; |
|||
} |
|||
|
|||
.contract_status { |
|||
font-size: 24rpx; |
|||
padding: 8rpx 16rpx; |
|||
border-radius: 12rpx; |
|||
|
|||
&.active { |
|||
background: rgba(40, 167, 69, 0.1); |
|||
color: #28a745; |
|||
} |
|||
|
|||
&.expired { |
|||
background: rgba(220, 53, 69, 0.1); |
|||
color: #dc3545; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.contract_details { |
|||
.detail_item { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding: 20rpx 0; |
|||
border-bottom: 1px solid #f8f9fa; |
|||
|
|||
.detail_label { |
|||
font-size: 28rpx; |
|||
color: #666; |
|||
min-width: 160rpx; |
|||
} |
|||
|
|||
.detail_value { |
|||
font-size: 28rpx; |
|||
color: #333; |
|||
flex: 1; |
|||
text-align: right; |
|||
|
|||
&.amount { |
|||
color: #e67e22; |
|||
font-weight: 600; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.empty_state { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding: 120rpx 0; |
|||
|
|||
.empty_icon { |
|||
width: 160rpx; |
|||
height: 160rpx; |
|||
margin-bottom: 32rpx; |
|||
opacity: 0.3; |
|||
} |
|||
|
|||
.empty_text { |
|||
font-size: 28rpx; |
|||
color: #999; |
|||
} |
|||
} |
|||
|
|||
.loading_state { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
padding: 60rpx 0; |
|||
|
|||
.loading_text { |
|||
font-size: 28rpx; |
|||
color: #666; |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,187 +0,0 @@ |
|||
<!--课程详情页面--> |
|||
<template> |
|||
<view class="main_box"> |
|||
<!-- 课程基本信息 --> |
|||
<view class="course_info_card" v-if="courseInfo"> |
|||
<view class="course_header"> |
|||
<view class="course_name">{{ courseInfo.course_name }}</view> |
|||
<view class="course_status" :class="courseInfo.status"> |
|||
{{ courseInfo.status === 'active' ? '进行中' : '已结束' }} |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="course_details"> |
|||
<view class="detail_item"> |
|||
<view class="detail_label">授课教师</view> |
|||
<view class="detail_value">{{ courseInfo.teacher_name }}</view> |
|||
</view> |
|||
<view class="detail_item"> |
|||
<view class="detail_label">上课校区</view> |
|||
<view class="detail_value">{{ courseInfo.campus_name }}</view> |
|||
</view> |
|||
<view class="detail_item"> |
|||
<view class="detail_label">上课时间</view> |
|||
<view class="detail_value">{{ courseInfo.schedule_time }}</view> |
|||
</view> |
|||
<view class="detail_item"> |
|||
<view class="detail_label">课程进度</view> |
|||
<view class="detail_value">{{ courseInfo.progress }}</view> |
|||
</view> |
|||
<view class="detail_item" v-if="courseInfo.next_class"> |
|||
<view class="detail_label">下节课时间</view> |
|||
<view class="detail_value next_class">{{ courseInfo.next_class }}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 空状态 --> |
|||
<view class="empty_state" v-if="!loading && !courseInfo"> |
|||
<image src="/static/icon-img/empty.png" class="empty_icon"></image> |
|||
<view class="empty_text">暂无课程信息</view> |
|||
</view> |
|||
|
|||
<!-- 加载状态 --> |
|||
<view class="loading_state" v-if="loading"> |
|||
<view class="loading_text">加载中...</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
courseInfo: null, |
|||
loading: false, |
|||
courseId: null, |
|||
childId: null |
|||
} |
|||
}, |
|||
onLoad(options) { |
|||
this.courseId = options.courseId |
|||
this.childId = options.childId |
|||
this.loadCourseInfo() |
|||
}, |
|||
methods: { |
|||
async loadCourseInfo() { |
|||
// 这里可以添加具体的课程详情获取逻辑 |
|||
// 暂时使用模拟数据 |
|||
this.courseInfo = { |
|||
course_name: '少儿篮球训练', |
|||
teacher_name: '王教练', |
|||
campus_name: '总部校区', |
|||
schedule_time: '周六 09:00-10:30', |
|||
progress: '8/12节', |
|||
status: 'active', |
|||
next_class: '2024-01-20 09:00' |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.main_box { |
|||
background: #f8f9fa; |
|||
min-height: 100vh; |
|||
padding: 20rpx; |
|||
} |
|||
|
|||
.course_info_card { |
|||
background: #fff; |
|||
border-radius: 16rpx; |
|||
padding: 32rpx; |
|||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); |
|||
|
|||
.course_header { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
margin-bottom: 32rpx; |
|||
padding-bottom: 24rpx; |
|||
border-bottom: 1px solid #f0f0f0; |
|||
|
|||
.course_name { |
|||
font-size: 36rpx; |
|||
font-weight: 600; |
|||
color: #333; |
|||
} |
|||
|
|||
.course_status { |
|||
font-size: 24rpx; |
|||
padding: 8rpx 16rpx; |
|||
border-radius: 12rpx; |
|||
|
|||
&.active { |
|||
background: rgba(41, 211, 180, 0.1); |
|||
color: #29d3b4; |
|||
} |
|||
|
|||
&.inactive { |
|||
background: #f0f0f0; |
|||
color: #999; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.course_details { |
|||
.detail_item { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding: 20rpx 0; |
|||
border-bottom: 1px solid #f8f9fa; |
|||
|
|||
.detail_label { |
|||
font-size: 28rpx; |
|||
color: #666; |
|||
min-width: 160rpx; |
|||
} |
|||
|
|||
.detail_value { |
|||
font-size: 28rpx; |
|||
color: #333; |
|||
flex: 1; |
|||
text-align: right; |
|||
|
|||
&.next_class { |
|||
color: #29d3b4; |
|||
font-weight: 600; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.empty_state { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding: 120rpx 0; |
|||
|
|||
.empty_icon { |
|||
width: 160rpx; |
|||
height: 160rpx; |
|||
margin-bottom: 32rpx; |
|||
opacity: 0.3; |
|||
} |
|||
|
|||
.empty_text { |
|||
font-size: 28rpx; |
|||
color: #999; |
|||
} |
|||
} |
|||
|
|||
.loading_state { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
padding: 60rpx 0; |
|||
|
|||
.loading_text { |
|||
font-size: 28rpx; |
|||
color: #666; |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,181 +0,0 @@ |
|||
<!--教学资料详情页面--> |
|||
<template> |
|||
<view class="main_box"> |
|||
<!-- 资料基本信息 --> |
|||
<view class="material_info_card" v-if="materialInfo"> |
|||
<view class="material_header"> |
|||
<view class="material_title">{{ materialInfo.title }}</view> |
|||
<view class="material_type">{{ materialInfo.type }}</view> |
|||
</view> |
|||
|
|||
<view class="material_details"> |
|||
<view class="detail_item"> |
|||
<view class="detail_label">发布时间</view> |
|||
<view class="detail_value">{{ materialInfo.created_at }}</view> |
|||
</view> |
|||
<view class="detail_item"> |
|||
<view class="detail_label">资料类型</view> |
|||
<view class="detail_value">{{ materialInfo.type }}</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="material_content"> |
|||
<view class="content_title">资料内容</view> |
|||
<view class="content_text">{{ materialInfo.content }}</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 空状态 --> |
|||
<view class="empty_state" v-if="!loading && !materialInfo"> |
|||
<image src="/static/icon-img/empty.png" class="empty_icon"></image> |
|||
<view class="empty_text">暂无资料信息</view> |
|||
</view> |
|||
|
|||
<!-- 加载状态 --> |
|||
<view class="loading_state" v-if="loading"> |
|||
<view class="loading_text">加载中...</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
materialInfo: null, |
|||
loading: false, |
|||
materialId: null, |
|||
childId: null |
|||
} |
|||
}, |
|||
onLoad(options) { |
|||
this.materialId = options.materialId |
|||
this.childId = options.childId |
|||
this.loadMaterialInfo() |
|||
}, |
|||
methods: { |
|||
async loadMaterialInfo() { |
|||
// 模拟教学资料详情数据 |
|||
this.materialInfo = { |
|||
title: '篮球基础训练视频', |
|||
type: '视频资料', |
|||
created_at: '2024-01-15 14:30:00', |
|||
content: '这是一套专门为少儿设计的篮球基础训练视频，包含运球、投篮、传球等基本技能的教学内容。' |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.main_box { |
|||
background: #f8f9fa; |
|||
min-height: 100vh; |
|||
padding: 20rpx; |
|||
} |
|||
|
|||
.material_info_card { |
|||
background: #fff; |
|||
border-radius: 16rpx; |
|||
padding: 32rpx; |
|||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); |
|||
|
|||
.material_header { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
margin-bottom: 32rpx; |
|||
padding-bottom: 24rpx; |
|||
border-bottom: 1px solid #f0f0f0; |
|||
|
|||
.material_title { |
|||
font-size: 36rpx; |
|||
font-weight: 600; |
|||
color: #333; |
|||
} |
|||
|
|||
.material_type { |
|||
font-size: 24rpx; |
|||
padding: 8rpx 16rpx; |
|||
border-radius: 12rpx; |
|||
background: rgba(41, 211, 180, 0.1); |
|||
color: #29d3b4; |
|||
} |
|||
} |
|||
|
|||
.material_details { |
|||
margin-bottom: 32rpx; |
|||
|
|||
.detail_item { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding: 20rpx 0; |
|||
border-bottom: 1px solid #f8f9fa; |
|||
|
|||
.detail_label { |
|||
font-size: 28rpx; |
|||
color: #666; |
|||
min-width: 160rpx; |
|||
} |
|||
|
|||
.detail_value { |
|||
font-size: 28rpx; |
|||
color: #333; |
|||
flex: 1; |
|||
text-align: right; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.material_content { |
|||
.content_title { |
|||
font-size: 28rpx; |
|||
font-weight: 600; |
|||
color: #333; |
|||
margin-bottom: 16rpx; |
|||
} |
|||
|
|||
.content_text { |
|||
font-size: 26rpx; |
|||
color: #666; |
|||
line-height: 1.6; |
|||
padding: 16rpx; |
|||
background: #f8f9fa; |
|||
border-radius: 8rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.empty_state { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding: 120rpx 0; |
|||
|
|||
.empty_icon { |
|||
width: 160rpx; |
|||
height: 160rpx; |
|||
margin-bottom: 32rpx; |
|||
opacity: 0.3; |
|||
} |
|||
|
|||
.empty_text { |
|||
font-size: 28rpx; |
|||
color: #999; |
|||
} |
|||
} |
|||
|
|||
.loading_state { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
padding: 60rpx 0; |
|||
|
|||
.loading_text { |
|||
font-size: 28rpx; |
|||
color: #666; |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,174 +0,0 @@ |
|||
<!--消息详情页面--> |
|||
<template> |
|||
<view class="main_box"> |
|||
<!-- 消息基本信息 --> |
|||
<view class="message_info_card" v-if="messageInfo"> |
|||
<view class="message_header"> |
|||
<view class="message_title">{{ messageInfo.title }}</view> |
|||
<view class="message_time">{{ messageInfo.created_at }}</view> |
|||
</view> |
|||
|
|||
<view class="message_details"> |
|||
<view class="detail_item"> |
|||
<view class="detail_label">发送者</view> |
|||
<view class="detail_value">{{ messageInfo.sender }}</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="message_content"> |
|||
<view class="content_title">消息内容</view> |
|||
<view class="content_text">{{ messageInfo.content }}</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 空状态 --> |
|||
<view class="empty_state" v-if="!loading && !messageInfo"> |
|||
<image src="/static/icon-img/empty.png" class="empty_icon"></image> |
|||
<view class="empty_text">暂无消息信息</view> |
|||
</view> |
|||
|
|||
<!-- 加载状态 --> |
|||
<view class="loading_state" v-if="loading"> |
|||
<view class="loading_text">加载中...</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
messageInfo: null, |
|||
loading: false, |
|||
messageId: null, |
|||
childId: null |
|||
} |
|||
}, |
|||
onLoad(options) { |
|||
this.messageId = options.messageId |
|||
this.childId = options.childId |
|||
this.loadMessageInfo() |
|||
}, |
|||
methods: { |
|||
async loadMessageInfo() { |
|||
// 模拟消息详情数据 |
|||
this.messageInfo = { |
|||
title: '课程提醒', |
|||
sender: '王教练', |
|||
created_at: '2024-01-15 09:30:00', |
|||
content: '提醒您的孩子明天有篮球课，请准时参加。上课时间：10:00-11:30，地点：篮球馆A。' |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.main_box { |
|||
background: #f8f9fa; |
|||
min-height: 100vh; |
|||
padding: 20rpx; |
|||
} |
|||
|
|||
.message_info_card { |
|||
background: #fff; |
|||
border-radius: 16rpx; |
|||
padding: 32rpx; |
|||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); |
|||
|
|||
.message_header { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
margin-bottom: 32rpx; |
|||
padding-bottom: 24rpx; |
|||
border-bottom: 1px solid #f0f0f0; |
|||
|
|||
.message_title { |
|||
font-size: 36rpx; |
|||
font-weight: 600; |
|||
color: #333; |
|||
} |
|||
|
|||
.message_time { |
|||
font-size: 24rpx; |
|||
color: #999; |
|||
} |
|||
} |
|||
|
|||
.message_details { |
|||
margin-bottom: 32rpx; |
|||
|
|||
.detail_item { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding: 20rpx 0; |
|||
border-bottom: 1px solid #f8f9fa; |
|||
|
|||
.detail_label { |
|||
font-size: 28rpx; |
|||
color: #666; |
|||
min-width: 160rpx; |
|||
} |
|||
|
|||
.detail_value { |
|||
font-size: 28rpx; |
|||
color: #333; |
|||
flex: 1; |
|||
text-align: right; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.message_content { |
|||
.content_title { |
|||
font-size: 28rpx; |
|||
font-weight: 600; |
|||
color: #333; |
|||
margin-bottom: 16rpx; |
|||
} |
|||
|
|||
.content_text { |
|||
font-size: 26rpx; |
|||
color: #666; |
|||
line-height: 1.6; |
|||
padding: 16rpx; |
|||
background: #f8f9fa; |
|||
border-radius: 8rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.empty_state { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding: 120rpx 0; |
|||
|
|||
.empty_icon { |
|||
width: 160rpx; |
|||
height: 160rpx; |
|||
margin-bottom: 32rpx; |
|||
opacity: 0.3; |
|||
} |
|||
|
|||
.empty_text { |
|||
font-size: 28rpx; |
|||
color: #999; |
|||
} |
|||
} |
|||
|
|||
.loading_state { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
padding: 60rpx 0; |
|||
|
|||
.loading_text { |
|||
font-size: 28rpx; |
|||
color: #666; |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,182 +0,0 @@ |
|||
<!--订单详情页面--> |
|||
<template> |
|||
<view class="main_box"> |
|||
<!-- 订单基本信息 --> |
|||
<view class="order_info_card" v-if="orderInfo"> |
|||
<view class="order_header"> |
|||
<view class="order_no">订单号：{{ orderInfo.order_no }}</view> |
|||
<view class="order_status" :class="orderInfo.status"> |
|||
{{ orderInfo.status_text }} |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="order_details"> |
|||
<view class="detail_item"> |
|||
<view class="detail_label">课程名称</view> |
|||
<view class="detail_value">{{ orderInfo.course_name }}</view> |
|||
</view> |
|||
<view class="detail_item"> |
|||
<view class="detail_label">订单金额</view> |
|||
<view class="detail_value amount">¥{{ orderInfo.amount }}</view> |
|||
</view> |
|||
<view class="detail_item"> |
|||
<view class="detail_label">下单时间</view> |
|||
<view class="detail_value">{{ orderInfo.created_at }}</view> |
|||
</view> |
|||
<view class="detail_item" v-if="orderInfo.pay_time"> |
|||
<view class="detail_label">支付时间</view> |
|||
<view class="detail_value">{{ orderInfo.pay_time }}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 空状态 --> |
|||
<view class="empty_state" v-if="!loading && !orderInfo"> |
|||
<image src="/static/icon-img/empty.png" class="empty_icon"></image> |
|||
<view class="empty_text">暂无订单信息</view> |
|||
</view> |
|||
|
|||
<!-- 加载状态 --> |
|||
<view class="loading_state" v-if="loading"> |
|||
<view class="loading_text">加载中...</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
orderInfo: null, |
|||
loading: false, |
|||
orderId: null, |
|||
childId: null |
|||
} |
|||
}, |
|||
onLoad(options) { |
|||
this.orderId = options.orderId |
|||
this.childId = options.childId |
|||
this.loadOrderInfo() |
|||
}, |
|||
methods: { |
|||
async loadOrderInfo() { |
|||
// 模拟订单详情数据 |
|||
this.orderInfo = { |
|||
order_no: 'ORD202401001', |
|||
course_name: '少儿篮球课程包', |
|||
amount: '2880.00', |
|||
status: 'paid', |
|||
status_text: '已支付', |
|||
created_at: '2024-01-01 10:00:00', |
|||
pay_time: '2024-01-01 10:05:00' |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.main_box { |
|||
background: #f8f9fa; |
|||
min-height: 100vh; |
|||
padding: 20rpx; |
|||
} |
|||
|
|||
.order_info_card { |
|||
background: #fff; |
|||
border-radius: 16rpx; |
|||
padding: 32rpx; |
|||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); |
|||
|
|||
.order_header { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
margin-bottom: 32rpx; |
|||
padding-bottom: 24rpx; |
|||
border-bottom: 1px solid #f0f0f0; |
|||
|
|||
.order_no { |
|||
font-size: 32rpx; |
|||
font-weight: 600; |
|||
color: #333; |
|||
} |
|||
|
|||
.order_status { |
|||
font-size: 24rpx; |
|||
padding: 8rpx 16rpx; |
|||
border-radius: 12rpx; |
|||
|
|||
&.paid { |
|||
background: rgba(40, 167, 69, 0.1); |
|||
color: #28a745; |
|||
} |
|||
|
|||
&.unpaid { |
|||
background: rgba(220, 53, 69, 0.1); |
|||
color: #dc3545; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.order_details { |
|||
.detail_item { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding: 20rpx 0; |
|||
border-bottom: 1px solid #f8f9fa; |
|||
|
|||
.detail_label { |
|||
font-size: 28rpx; |
|||
color: #666; |
|||
min-width: 160rpx; |
|||
} |
|||
|
|||
.detail_value { |
|||
font-size: 28rpx; |
|||
color: #333; |
|||
flex: 1; |
|||
text-align: right; |
|||
|
|||
&.amount { |
|||
color: #e67e22; |
|||
font-weight: 600; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.empty_state { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding: 120rpx 0; |
|||
|
|||
.empty_icon { |
|||
width: 160rpx; |
|||
height: 160rpx; |
|||
margin-bottom: 32rpx; |
|||
opacity: 0.3; |
|||
} |
|||
|
|||
.empty_text { |
|||
font-size: 28rpx; |
|||
color: #999; |
|||
} |
|||
} |
|||
|
|||
.loading_state { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
padding: 60rpx 0; |
|||
|
|||
.loading_text { |
|||
font-size: 28rpx; |
|||
color: #666; |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,159 +0,0 @@ |
|||
<!--服务详情页面--> |
|||
<template> |
|||
<view class="main_box"> |
|||
<!-- 服务基本信息 --> |
|||
<view class="service_info_card" v-if="serviceInfo"> |
|||
<view class="service_header"> |
|||
<view class="service_title">{{ serviceInfo.title }}</view> |
|||
<view class="service_status" :class="serviceInfo.status"> |
|||
{{ serviceInfo.status_text }} |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="service_details"> |
|||
<view class="detail_item"> |
|||
<view class="detail_label">服务时间</view> |
|||
<view class="detail_value">{{ serviceInfo.service_time }}</view> |
|||
</view> |
|||
<view class="detail_item"> |
|||
<view class="detail_label">服务内容</view> |
|||
<view class="detail_value">{{ serviceInfo.content }}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 空状态 --> |
|||
<view class="empty_state" v-if="!loading && !serviceInfo"> |
|||
<image src="/static/icon-img/empty.png" class="empty_icon"></image> |
|||
<view class="empty_text">暂无服务信息</view> |
|||
</view> |
|||
|
|||
<!-- 加载状态 --> |
|||
<view class="loading_state" v-if="loading"> |
|||
<view class="loading_text">加载中...</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
serviceInfo: null, |
|||
loading: false, |
|||
serviceId: null, |
|||
childId: null |
|||
} |
|||
}, |
|||
onLoad(options) { |
|||
this.serviceId = options.serviceId |
|||
this.childId = options.childId |
|||
this.loadServiceInfo() |
|||
}, |
|||
methods: { |
|||
async loadServiceInfo() { |
|||
// 模拟服务详情数据 |
|||
this.serviceInfo = { |
|||
title: '课程跟踪服务', |
|||
status: 'completed', |
|||
status_text: '已完成', |
|||
service_time: '2024-01-15 10:00:00', |
|||
content: '针对学员的课程进度进行跟踪辅导，提供个性化建议。' |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.main_box { |
|||
background: #f8f9fa; |
|||
min-height: 100vh; |
|||
padding: 20rpx; |
|||
} |
|||
|
|||
.service_info_card { |
|||
background: #fff; |
|||
border-radius: 16rpx; |
|||
padding: 32rpx; |
|||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); |
|||
|
|||
.service_header { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
margin-bottom: 32rpx; |
|||
padding-bottom: 24rpx; |
|||
border-bottom: 1px solid #f0f0f0; |
|||
|
|||
.service_title { |
|||
font-size: 36rpx; |
|||
font-weight: 600; |
|||
color: #333; |
|||
} |
|||
|
|||
.service_status { |
|||
font-size: 24rpx; |
|||
padding: 8rpx 16rpx; |
|||
border-radius: 12rpx; |
|||
background: rgba(41, 211, 180, 0.1); |
|||
color: #29d3b4; |
|||
} |
|||
} |
|||
|
|||
.service_details { |
|||
.detail_item { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding: 20rpx 0; |
|||
border-bottom: 1px solid #f8f9fa; |
|||
|
|||
.detail_label { |
|||
font-size: 28rpx; |
|||
color: #666; |
|||
min-width: 160rpx; |
|||
} |
|||
|
|||
.detail_value { |
|||
font-size: 28rpx; |
|||
color: #333; |
|||
flex: 1; |
|||
text-align: right; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.empty_state { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding: 120rpx 0; |
|||
|
|||
.empty_icon { |
|||
width: 160rpx; |
|||
height: 160rpx; |
|||
margin-bottom: 32rpx; |
|||
opacity: 0.3; |
|||
} |
|||
|
|||
.empty_text { |
|||
font-size: 28rpx; |
|||
color: #999; |
|||
} |
|||
} |
|||
|
|||
.loading_state { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
padding: 60rpx 0; |
|||
|
|||
.loading_text { |
|||
font-size: 28rpx; |
|||
color: #666; |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,272 +0,0 @@ |
|||
<template> |
|||
<view class="main_box"> |
|||
<view class="after-class-title"> |
|||
<view class="after-class-title-left">课后作业</view> |
|||
</view> |
|||
|
|||
<scroll-view |
|||
class="table_list" |
|||
scroll-y="true" |
|||
:lower-threshold="lowerThreshold" |
|||
@scrolltolower="loadMoreData" |
|||
style="height: 100vh;" |
|||
> |
|||
|
|||
<view class="con-list" v-for="(v,k) in tableList" :key="k" @click="openViewWorkDetails(v)"> |
|||
<view class="con-list-img" v-if="v.content_text"> |
|||
<video v-if="v.content_type == 2" class="pic" style="width: 100%;border-radius: 15rpx;" :src="$util.img(v.content_text)"></video> |
|||
<image v-else-if="v.content_type == 1" style="width: 100%;border-radius: 15rpx;" :src="$util.img(v.content_text)" mode="aspectFit"></image> |
|||
<view class="text" v-else>{{v.content_text}}</view> |
|||
</view> |
|||
|
|||
<view class="date_box"> |
|||
<view class="describe" style="margin-top: 20rpx;"> |
|||
时间：{{v.created_at}} |
|||
</view> |
|||
<!--是否已经完成作业--> |
|||
<view class="mark" v-if="v.status == 3"> |
|||
<image class="check_mark" :src="$util.img('/uniapp_src/static/images/index/check_mark.png')"></image> |
|||
</view> |
|||
</view> |
|||
|
|||
|
|||
<!--作业描述--> |
|||
<view class="con" style="margin-bottom: 20rpx; color:#fff;" v-html="v.description"></view> |
|||
|
|||
<view class="assignment"> |
|||
<view>{{v.type == 1 ? '班级作业' : '个人作业'}}</view> |
|||
</view> |
|||
</view> |
|||
|
|||
</scroll-view> |
|||
|
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import apiRoute from '@/api/apiRoute.js'; |
|||
import memberApi from '@/api/member.js'; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
loading:false,//加载状态 |
|||
lowerThreshold: 100,//距离底部多远触发 |
|||
isReachedBottom: false,//防止重复加载|true=不可加载|false=可加载 |
|||
|
|||
//筛选条件 |
|||
filteredData:{ |
|||
page:1,//当前页码 |
|||
limit:10,//每页返回数据条数 |
|||
total:10,//数据总条数 |
|||
resources_id: '',//学生资源id |
|||
status: '',//状态 1待批改 2未提交 3已提交 |
|||
}, |
|||
|
|||
tableList:[],//表格数据 |
|||
|
|||
member_info:{},//学生信息 |
|||
|
|||
} |
|||
}, |
|||
onShow(){ |
|||
this.init()//初始化 |
|||
}, |
|||
//下拉刷新 |
|||
async onPullDownRefresh() { |
|||
//重置为第一页 |
|||
await this.resetFilteredData() |
|||
await this.getList() |
|||
}, |
|||
methods: { |
|||
//初始化 |
|||
async init(){ |
|||
await this.memberInit() |
|||
await this.getList(); |
|||
}, |
|||
|
|||
//获取学员信息 |
|||
async memberInit() { |
|||
let res = await apiRoute.xy_memberInfo({}) |
|||
if(res.code != 1){ |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
this.member_info = res.data |
|||
this.filteredData.resources_id = this.member_info.id,//学生资源id |
|||
console.log('xxxx',this.member_info) |
|||
}, |
|||
|
|||
//加载更多(下一页) |
|||
loadMoreData() { |
|||
//判断是否加载 |
|||
if (!this.isReachedBottom) { |
|||
this.isReachedBottom = true;//设置为不可请求状态 |
|||
this.getList(); |
|||
} |
|||
}, |
|||
//重置为第一页 |
|||
async resetFilteredData() { |
|||
this.isReachedBottom = false; // 重置状态，以便下次触发加载更多 |
|||
|
|||
this.filteredData.page = 1//当前页码 |
|||
this.filteredData.limit = 10//每页返回数据条数 |
|||
this.filteredData.total = 10//数据总条数 |
|||
}, |
|||
|
|||
//获取作业列表 |
|||
async getList(){ |
|||
this.loading = true |
|||
|
|||
let data = {...this.filteredData} |
|||
|
|||
//判断是否还有数据 |
|||
if ((this.filteredData.page - 1) * this.filteredData.limit >= this.filteredData.total) { |
|||
this.loading = false |
|||
uni.showToast({ |
|||
title: '暂无更多', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
|
|||
if(data.page == 1){ |
|||
this.tableList = [] |
|||
} |
|||
|
|||
let res = await apiRoute.xy_assignment(data) |
|||
this.loading = false |
|||
this.isReachedBottom = false; |
|||
if (res.code != 1){ |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
|
|||
this.tableList = this.tableList.concat(res.data.data); // 使用 concat 方法 将新数据追加到数组中 |
|||
|
|||
console.log('列表',this.tableList) |
|||
this.filteredData.total = res.data.total |
|||
this.filteredData.page++ |
|||
}, |
|||
|
|||
//跳转页面-打开作业详情 |
|||
openViewWorkDetails(item) { |
|||
let id = item.id |
|||
this.$navigateTo({ |
|||
url: `/pages/student/index/work_details?id=${id}` |
|||
}) |
|||
}, |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.main_box{ |
|||
width: 100%; |
|||
height: 100vh; |
|||
background: #292929; |
|||
overflow: auto; |
|||
|
|||
.table_list{ |
|||
padding-bottom: 150rpx; |
|||
} |
|||
} |
|||
.after-class-title { |
|||
width: 92%; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
margin: auto; |
|||
padding-top: 30rpx; |
|||
} |
|||
.after-class-title-left { |
|||
color: #fff; |
|||
font-size: 35rpx; |
|||
border-bottom: 4rpx #29d3b4 solid; |
|||
} |
|||
.con-list{ |
|||
width: 100%; |
|||
padding: 30rpx; |
|||
margin-top: 20rpx; |
|||
border-bottom: 2rpx #fff solid; |
|||
.date_box{ |
|||
padding-top: 30rpx; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
.describe{ |
|||
width: 75%; |
|||
color: #fff; |
|||
} |
|||
} |
|||
} |
|||
.con-list-img{ |
|||
width: 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
|
|||
video{ |
|||
width: 100%; |
|||
height: 280rpx; |
|||
} |
|||
image{ |
|||
width: 100%; |
|||
height: 280rpx; |
|||
} |
|||
.text{ |
|||
width: 100%; |
|||
font-size: 28rpx; |
|||
color:#fff; |
|||
white-space: pre-wrap; |
|||
word-wrap: break-word; |
|||
} |
|||
|
|||
} |
|||
.pic{ |
|||
width: 85%; |
|||
height: 100%; |
|||
} |
|||
.con{ |
|||
width: 75%; |
|||
color: #fff; |
|||
padding-top: 30rpx; |
|||
} |
|||
.mark{ |
|||
width: 70rpx; |
|||
height: 70rpx; |
|||
border-radius: 100%; |
|||
background: #29d3b4; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
.check_mark{ |
|||
width: 80%; |
|||
height: 80%; |
|||
} |
|||
.assignment{ |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
align-items: center; |
|||
view{ |
|||
padding: 6rpx 12rpx; |
|||
color: #6b9d53; |
|||
border: 2rpx #6b9d53 solid; |
|||
border-radius: 10rpx; |
|||
width: 150rpx; |
|||
text-align: center; |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,114 +0,0 @@ |
|||
<!--作业详情--> |
|||
<template> |
|||
<view class="main_box"> |
|||
<!-- 作业展示--> |
|||
<view class="top-style" v-if="infoData.content_text"> |
|||
<video v-if="infoData.content_type == 2" class="pic" style="width: 100%;border-radius: 15rpx;" :src="$util.img(infoData.content_text)"></video> |
|||
<image v-else-if="infoData.content_type == 1" style="width: 100%;border-radius: 15rpx;" :src="$util.img(infoData.content_text)" mode="aspectFit"></image> |
|||
</view> |
|||
|
|||
<!-- 简练信息+作业描述--> |
|||
<view class="below-style"> |
|||
<view class="head-img"> |
|||
<!--学生头像--> |
|||
<fui-avatar width="80" :src="infoData.student.customerResources.member.headimg ? infoData.student.customerResources.member.headimg : $util.img('/uniapp_src/static/images/common/yong_hu.png')"></fui-avatar> |
|||
<view class="head-text">{{infoData .student.name}}</view> |
|||
</view> |
|||
<view class="multi-line-ellipsis"> |
|||
状态：{{ infoData.status == 1 ? '待批改' : infoData.status == 2 ? '未提交' : infoData.status == 3 ? '已提交' :''}} </view> |
|||
<view class="multi-line-ellipsis" v-html="infoData.description"></view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
import apiRoute from '@/api/apiRoute.js'; |
|||
|
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
//筛选条件 |
|||
filteredData: { |
|||
id: '',//作业id |
|||
}, |
|||
|
|||
infoData:{}, |
|||
} |
|||
}, |
|||
onLoad(options) { |
|||
this.filteredData.id = options.id//作业id |
|||
}, |
|||
onShow(){ |
|||
this.init()//初始化数据 |
|||
}, |
|||
methods: { |
|||
//初始化 |
|||
async init(){ |
|||
this.getAssignmentsInfo() |
|||
}, |
|||
|
|||
//获取作业详情 |
|||
async getAssignmentsInfo() { |
|||
let params = {...this.filteredData} |
|||
let res = await apiRoute.xy_assignmentsInfo(params) |
|||
if (res.code != 1) { |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
|
|||
this.infoData = res.data |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.main_box{ |
|||
width: 100%; |
|||
height: 100%; |
|||
background: #292929; |
|||
padding-top: 45rpx; |
|||
} |
|||
.top-style{ |
|||
width: 92%; |
|||
height: 700rpx; |
|||
margin: auto; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
.top-style-img{ |
|||
width: 120rpx; |
|||
height: 120rpx; |
|||
} |
|||
.below-style{ |
|||
width: 92%; |
|||
margin: auto; |
|||
.head-img { |
|||
display: flex; |
|||
align-items: center; |
|||
padding: 10rpx 20rpx; |
|||
} |
|||
.head-text { |
|||
color: #fff; |
|||
font-size: 35rpx; |
|||
padding-left: 20rpx; |
|||
} |
|||
} |
|||
|
|||
|
|||
.multi-line-ellipsis { |
|||
margin-top: 20rpx; |
|||
color: #fff; |
|||
font-size: 29rpx; |
|||
padding: 5rpx 10rpx; |
|||
// display: -webkit-box; |
|||
// -webkit-box-orient: vertical; |
|||
// -webkit-line-clamp: 2; |
|||
// overflow: hidden; |
|||
// text-overflow: ellipsis; |
|||
} |
|||
</style> |
|||
@ -1,379 +0,0 @@ |
|||
<!--我的-首页--> |
|||
<template> |
|||
<view class="main_box"> |
|||
<view class="navbar_section"> |
|||
<view class="title">我的</view> |
|||
</view> |
|||
<view style="background:#29D3B4;"> |
|||
<!--用户信息--> |
|||
<view class="user_section"> |
|||
<view class="box"> |
|||
<view class="left" @click="personal_data"> |
|||
<image class="pic" :src="member_info.memberHasOne ? member_info.memberHasOne.headimg : $util.img('/uniapp_src/static/images/common/yong_hu.png')"></image> |
|||
<view class="name">{{member_info.name}}</view> |
|||
</view> |
|||
<view class="right" @click="setup"> |
|||
<image :src="$util.img('/uniapp_src/static/images/index/setup.png')" style="width: 50rpx;height: 50rpx;"></image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!--统计信息--> |
|||
<view class="count_section"> |
|||
<view class="main"> |
|||
<view class="course_box"> |
|||
<view class="top"> |
|||
<view class="item"> |
|||
<view class="num">{{member_info.classes_count}}</view> |
|||
<view class="intro">我的课程</view> |
|||
</view> |
|||
<view class="item"> |
|||
<view class="num">{{member_info.sign_count}}</view> |
|||
<view class="intro">已上课时</view> |
|||
</view> |
|||
<view class="item"> |
|||
<view class="num">{{member_info.stay_sign_count}}</view> |
|||
<view class="intro">待上课时 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="bottom"></view> |
|||
<view class="bg_box bg_top"></view> |
|||
<view class="bg_box bg_bottom"></view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="main_section"> |
|||
<view class="section_box"> |
|||
<view class="item" style="border-radius: 16rpx 16rpx 0 0;" @click="lesson_consumption"> |
|||
<view>课时消耗</view> |
|||
<image :src="$util.img('/uniapp_src/static/images/index/right_arrow.png')" class="arrow-icon"></image> |
|||
</view> |
|||
|
|||
<view class="item" @click="openViewOrder()"> |
|||
<view>我的订单</view> |
|||
<image :src="$util.img('/uniapp_src/static/images/index/right_arrow.png')" class="arrow-icon"></image> |
|||
</view> |
|||
|
|||
<view class="item" @click="navigateToTimetable()"> |
|||
<view>我的课表</view> |
|||
<image :src="$util.img('/uniapp_src/static/images/index/right_arrow.png')" class="arrow-icon"></image> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="section_box"> |
|||
<view class="item" @click="openViewMyCoach()"> |
|||
<view>我的教练</view> |
|||
<image :src="$util.img('/uniapp_src/static/images/index/right_arrow.png')" class="arrow-icon"></image> |
|||
</view> |
|||
|
|||
<view class="item" @click="navigateToHomework()"> |
|||
<view>作业管理</view> |
|||
<image :src="$util.img('/uniapp_src/static/images/index/right_arrow.png')" class="arrow-icon"></image> |
|||
</view> |
|||
|
|||
<view class="item" @click="feedback"> |
|||
<view>意见反馈</view> |
|||
<image :src="$util.img('/uniapp_src/static/images/index/right_arrow.png')" class="arrow-icon"></image> |
|||
</view> |
|||
|
|||
<view class="item" @click="openViewMyMessage({user_id:1})"> |
|||
<view>我的消息</view> |
|||
<image :src="$util.img('/uniapp_src/static/images/index/right_arrow.png')" class="arrow-icon"></image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 底部导航--> |
|||
<AQTabber /> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import AQTabber from "@/components/AQ/AQTabber.vue" |
|||
import apiRoute from '@/api/apiRoute.js'; |
|||
import member from '@/api/member.js'; |
|||
export default { |
|||
components: { |
|||
AQTabber, |
|||
}, |
|||
data() { |
|||
return { |
|||
member_info: [], |
|||
} |
|||
}, |
|||
onLoad() { |
|||
this.member_init(); |
|||
}, |
|||
methods: { |
|||
//获取学员信息 |
|||
async member_init() { |
|||
let res = await apiRoute.xy_memberInfo({}) |
|||
if(res.code != 1){ |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
this.member_info = res.data |
|||
}, |
|||
//打开设置 |
|||
setup(item) { |
|||
this.$navigateTo({ |
|||
url: '/pages/student/my/set_up' |
|||
}) |
|||
}, |
|||
//意见反馈 |
|||
feedback() { |
|||
this.$navigateTo({ |
|||
url: '/pages/common/feedback' |
|||
}) |
|||
}, |
|||
//课时消耗 |
|||
lesson_consumption() { |
|||
this.$navigateTo({ |
|||
url: '/pages/student/my/lesson_consumption' |
|||
}) |
|||
}, |
|||
//我的成员 |
|||
my_members() { |
|||
this.$navigateTo({ |
|||
url: '/pages/student/my/my_members' |
|||
}) |
|||
}, |
|||
//人人资料 |
|||
personal_data() { |
|||
this.$navigateTo({ |
|||
url: '/pages/student/my/personal_data' |
|||
}) |
|||
}, |
|||
|
|||
//跳转页面-订单列表 |
|||
openViewOrder() { |
|||
let resource_id = this.member_info.id//客户资源id |
|||
let resource_name = this.member_info.name || ''//客户资源id姓名 |
|||
|
|||
// let staff_id = this.userInfo.id//员工id |
|||
// let staff_id_name = this.userInfo.name || ''//员工姓名 |
|||
|
|||
let staff_id = ''//员工id |
|||
let staff_id_name = ''//员工姓名 |
|||
|
|||
this.$navigateTo({ |
|||
url: `/pages/common/contract_list?resource_id=${resource_id}&resource_name=${resource_name}&staff_id=${staff_id}&staff_id_name=${staff_id_name}` |
|||
}) |
|||
}, |
|||
|
|||
//跳转页面-我的消息 |
|||
openViewMyMessage(item) { |
|||
this.$navigateTo({ |
|||
url: `/pages/common/my_message` |
|||
}) |
|||
}, |
|||
|
|||
//跳转页面-我的教练 |
|||
openViewMyCoach(){ |
|||
this.$navigateTo({ |
|||
url: `/pages/student/my/my_coach` |
|||
}) |
|||
}, |
|||
|
|||
//跳转页面-课表 |
|||
navigateToTimetable(){ |
|||
this.$navigateTo({ |
|||
url: `/pages/student/timetable/index` |
|||
}) |
|||
}, |
|||
|
|||
//跳转页面-作业管理 |
|||
navigateToHomework(){ |
|||
this.$navigateTo({ |
|||
url: `/pages/student/index/job_list` |
|||
}) |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.main_box { |
|||
background: #292929; |
|||
height: 100%; |
|||
} |
|||
|
|||
//自定义导航栏 |
|||
.navbar_section { |
|||
border: 1px solid #29D3B4; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
background: #29D3B4; |
|||
|
|||
.title { |
|||
padding: 40rpx 20rpx; |
|||
|
|||
/* 小程序端样式 */ |
|||
// #ifdef MP-WEIXIN |
|||
padding: 80rpx 0 20rpx; |
|||
// #endif |
|||
|
|||
|
|||
font-size: 30rpx; |
|||
color: #fff; |
|||
} |
|||
} |
|||
|
|||
//用户信息 |
|||
.user_section { |
|||
background-color: #29D3B4; |
|||
padding-top: 58rpx; |
|||
padding-bottom: 42rpx; |
|||
color: #fff; |
|||
font-size: 28rpx; |
|||
|
|||
.box { |
|||
padding-left: 19rpx; |
|||
padding-right: 29rpx; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
gap: 15rpx; |
|||
|
|||
.left { |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 20rpx; |
|||
|
|||
.pic { |
|||
width: 144rpx; |
|||
height: 144rpx; |
|||
border-radius: 50%; |
|||
} |
|||
|
|||
.name { |
|||
font-size: 28rpx; |
|||
} |
|||
} |
|||
|
|||
.right { |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 20rpx; |
|||
|
|||
.btn { |
|||
min-height: 28rpx; |
|||
font-size: 28rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
//统计信息 |
|||
.count_section { |
|||
position: relative; |
|||
|
|||
.main { |
|||
position: relative; |
|||
z-index: 2; |
|||
padding: 0rpx 24rpx; |
|||
display: flex; |
|||
justify-content: center; |
|||
|
|||
.course_box { |
|||
padding: 42rpx 28rpx; |
|||
width: 692rpx; |
|||
border-radius: 20rpx; |
|||
background-color: #fff; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 32rpx; |
|||
|
|||
.top { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
|
|||
.item { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
gap: 12rpx; |
|||
|
|||
.num { |
|||
color: #29D3B4; |
|||
font-size: 56rpx; |
|||
} |
|||
|
|||
.intro { |
|||
color: #AAAAAA; |
|||
font-size: 24rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.bg_box { |
|||
z-index: 1; |
|||
width: 100%; |
|||
height: 150rpx; |
|||
} |
|||
|
|||
.bg_top { |
|||
position: absolute; |
|||
top: 0; |
|||
background-color: #29D3B4; |
|||
} |
|||
|
|||
.bg_bottom { |
|||
top: 50%; |
|||
position: absolute; |
|||
background-color: #292929; |
|||
} |
|||
} |
|||
|
|||
.main_section { |
|||
margin-top: 20rpx; |
|||
background: #292929 100%; |
|||
padding: 0 24rpx; |
|||
padding-top: 40rpx; |
|||
padding-bottom: 150rpx; |
|||
font-size: 24rpx; |
|||
color: #333333; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 22rpx; |
|||
|
|||
.section_box { |
|||
margin-bottom: 10rpx; |
|||
background: #fff; |
|||
border-radius: 16rpx; |
|||
padding: 6rpx 24rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
|
|||
.item { |
|||
padding: 35rpx 78rpx; |
|||
border-top: 1px solid #F2F2F2; |
|||
font-size: 28rpx; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
} |
|||
|
|||
.item:nth-child(1) { |
|||
border-top: 0; |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 箭头图标样式 |
|||
.arrow-icon { |
|||
width: 24rpx; |
|||
height: 24rpx; |
|||
opacity: 0.6; |
|||
|
|||
} |
|||
</style> |
|||
@ -1,607 +0,0 @@ |
|||
<!--课程-列表--> |
|||
<template> |
|||
<view class="main_box"> |
|||
<!--自定义导航栏--> |
|||
<view class="navbar_section"> |
|||
<view class="title">课表</view> |
|||
</view> |
|||
|
|||
<view class="main_section"> |
|||
<view class="section_1"> |
|||
<view class="ul"> |
|||
<view class="li" v-for="(v,k) in dateList" :key="k" @click="selectDate(v.date)"> |
|||
<text>{{v.week}}</text> |
|||
|
|||
<text :class="[filteredData.course_date == v.date ? 'today':'']">{{today == v.date ? '今':v.today}}</text> |
|||
|
|||
<text :class="[v.is_sign == 1 ? 'select_plan':'']"></text> |
|||
</view> |
|||
</view> |
|||
<view class="btn" @click="show_calendar=true"> |
|||
查看更多 <fui-icon name="arrowdown" color="#A4ADB3" size="45"></fui-icon> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="section_2"> |
|||
<view class="item_box"> |
|||
<text v-if="(venuesInfo.id || '')">{{venuesInfo.venue_name}}</text> |
|||
</view> |
|||
<view class="item_box" style="text-align: right;color: #F59A23;" @click="more"> |
|||
更多场馆 |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
<scroll-view |
|||
class="section_3" |
|||
scroll-y="true" |
|||
:lower-threshold="lowerThreshold" |
|||
@scrolltolower="loadMoreData" |
|||
style="height: 100vh;" |
|||
> |
|||
<view class="ul"> |
|||
<view v-for="(v,k) in tableList" :key="k" class="li" @click="openViewCourseInfo(v)"> |
|||
<view class="top_box"> |
|||
<view class="center_box"> |
|||
<view>教练：{{v.courseScheduleHasOne.coach.name}}</view> |
|||
<view>课程：{{v.courseScheduleHasOne.course.course_name}}</view> |
|||
<view>时间：{{v.course_date}}</view> |
|||
<view>课室：{{v.courseScheduleHasOne.campus_name}} {{v.courseScheduleHasOne.venue.venue_name}}</view> |
|||
</view> |
|||
<view class="right_box"> |
|||
<!-- v.status|1=未开始,2=进行中,3=已结束--> |
|||
<view class="tag" |
|||
v-if="v.status != null" |
|||
:style="{background: v.status == 1 ? '#1cd188' : v.status == 2 ? '#fad24e' : '#ff4d4f'}"> |
|||
{{ v.status == 0 ? '待上课' : v.status == 1 ? '已上课' : '请假' }} |
|||
</view> |
|||
<!-- <view class="tag" style="background:#1cd188;">待上课</view>--> |
|||
</view> |
|||
</view> |
|||
<view class="bottom_box"> |
|||
<view class="hint"> |
|||
<!-- 已签到学生 ({{v.sign_list.length }}/{{v.max_students.split(',').length }})--> |
|||
</view> |
|||
<view class="list_box"> |
|||
<!-- <view class="list">--> |
|||
<!-- <view class="itme" v-for="(item,index) in v.sign_list || 0" :key="index">--> |
|||
<!-- <image :src="$util.img(item.header)"></image>--> |
|||
<!-- </view>--> |
|||
<!-- </view>--> |
|||
<view class="btn"> |
|||
详情 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</scroll-view> |
|||
<!-- 加载状态--> |
|||
<!-- <fui-loading :isFixed="true" srcCol="/static/icon-img/loading_white.png" text="正在加载..." v-if="loading"></fui-loading>--> |
|||
|
|||
</view> |
|||
|
|||
<!-- 日历选择--> |
|||
<fui-bottom-popup :show="show_calendar" @close="show_calendar=false"> |
|||
<view class="fui-custom__wrap"> |
|||
<uni-calendar |
|||
:insert="true" |
|||
:lunar="false" |
|||
:selected="calendarSelected" |
|||
:startDate="startDate" |
|||
:endDate="endDate" |
|||
@change="changeCalendar" |
|||
/> |
|||
</view> |
|||
</fui-bottom-popup> |
|||
|
|||
<!-- 底部导航--> |
|||
<AQTabber/> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import apiRoute from '@/api/apiRoute.js'; |
|||
import memberApi from '@/api/member.js'; |
|||
import commonApi from '@/api/common.js'; |
|||
import AQTabber from "@/components/AQ/AQTabber.vue" |
|||
|
|||
|
|||
export default { |
|||
components: { |
|||
AQTabber, |
|||
}, |
|||
data() { |
|||
return { |
|||
loading: false,//加载状态 |
|||
lowerThreshold: 100,//距离底部多远触发 |
|||
isReachedBottom: false,//防止重复加载|true=不可加载|false=可加载 |
|||
|
|||
memberInfo:{},//当前登录的学生详情 |
|||
|
|||
//筛选条件 |
|||
filteredData: { |
|||
page: 1,//当前页码 |
|||
limit: 10,//每页返回数据条数 |
|||
total: 10,//数据总条数 |
|||
resources_id:'',//客户资源表id |
|||
course_date: '',//上课日期 |
|||
venue_id: '',//场地id |
|||
}, |
|||
tableList: [],//表格数据 |
|||
|
|||
venuesInfo: {id:''},//场地信息 |
|||
|
|||
//今日日期 |
|||
today: '', |
|||
dateList: [],//日期列表 |
|||
|
|||
//日历选择相关 |
|||
show_calendar:false,//是否展示日期 |
|||
startDate:'',//开始日期 |
|||
endDate:'',//结束日期 |
|||
calendarSelected: [ |
|||
// { |
|||
// date: '2025-04-07',//需要上课的日期 |
|||
// }, |
|||
// { |
|||
// date: '2025-04-09',//需要上课的日期 |
|||
// }, |
|||
],//日历打点(有课的日期) |
|||
|
|||
|
|||
} |
|||
}, |
|||
onLoad(options) { |
|||
if (options.venue_id) { |
|||
this.filteredData.venue_id = options.venue_id |
|||
} |
|||
}, |
|||
onShow() { |
|||
this.init()//初始化 |
|||
}, |
|||
//下拉刷新 |
|||
async onPullDownRefresh() { |
|||
//重置为第一页 |
|||
let course_date = this.filteredData.course_date |
|||
await this.loadData() |
|||
this.filteredData.course_date = course_date |
|||
await this.getList() |
|||
}, |
|||
|
|||
methods: { |
|||
//初始化 |
|||
async init() { |
|||
await this.getMemberInfo()//获取当前登录的学生信息 |
|||
await this.getThisDate()//获取当前日期 |
|||
await this.getList()//获取列表 |
|||
await this.getHeadDate()//获取课程头日期 |
|||
|
|||
this.getDateRange()//获取日期范围 |
|||
this.setCalendarSelected()//设置日期打点 |
|||
|
|||
}, |
|||
|
|||
|
|||
//获取当前登录的学生信息 |
|||
async getMemberInfo() { |
|||
let res = await apiRoute.xy_memberInfo({}) |
|||
if(res.code != 1){ |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
this.memberInfo = res.data |
|||
this.filteredData.resources_id = res.data.id |
|||
}, |
|||
|
|||
//获取课程头日期 |
|||
async getHeadDate() { |
|||
// 计算开始日期：从今天往前推2天 |
|||
let startDate = new Date(); |
|||
startDate.setDate(startDate.getDate() - 2); |
|||
let start_date = startDate.toISOString().split('T')[0]; |
|||
|
|||
// 计算结束日期：从今天往后推4天 |
|||
let endDate = new Date(); |
|||
endDate.setDate(endDate.getDate() + 4); |
|||
let end_date = endDate.toISOString().split('T')[0]; |
|||
|
|||
let params = { |
|||
resources_id: this.memberInfo.id, // 客户资源ID |
|||
start_date: start_date, // 开始日期(Y-m-d) |
|||
end_date: end_date, // 结束日期(Y-m-d) |
|||
} |
|||
let res = await apiRoute.xy_personCourseScheduleGetCalendar(params) |
|||
if (res.code != 1) { |
|||
//提示 |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: 'none', |
|||
}) |
|||
return |
|||
} |
|||
|
|||
this.dateList = [] |
|||
res.data.forEach((v, k) => { |
|||
this.dateList.push({ |
|||
date: v.date, |
|||
status: v.status,//1是正常 2请假 |
|||
week: v.week, |
|||
today: v.today, |
|||
is_sign: v.is_sign, |
|||
}) |
|||
}) |
|||
|
|||
|
|||
console.log('xxx', res) |
|||
|
|||
}, |
|||
|
|||
//获取当前日期 |
|||
async getThisDate() { |
|||
let date = new Date(); |
|||
let year = date.getFullYear(); |
|||
let month = String(date.getMonth() + 1).padStart(2, '0'); // 月份前补零 |
|||
let day = String(date.getDate()).padStart(2, '0'); // 日期前补零 |
|||
let hour = date.getHours(); |
|||
let minute = date.getMinutes(); |
|||
let second = date.getSeconds(); |
|||
|
|||
let res = `${year}-${month}-${day}`; // 格式化日期 |
|||
this.today = res; |
|||
this.filteredData.course_date = res; |
|||
}, |
|||
|
|||
//加载更过(下一页) |
|||
async loadMoreData() { |
|||
//判断是否加载 |
|||
if (!this.isReachedBottom) { |
|||
this.isReachedBottom = true;//设置为不可请求状态 |
|||
await this.getList(); |
|||
} |
|||
}, |
|||
//重置为第一页 |
|||
async loadData() { |
|||
this.isReachedBottom = false; // 重置状态，以便下次触发加载更多 |
|||
|
|||
this.filteredData.page = 1//当前页码 |
|||
this.filteredData.limit = 10//每页返回数据条数 |
|||
this.filteredData.total = 10//数据总条数 |
|||
}, |
|||
//获取列表 |
|||
async getList() { |
|||
this.loading = true |
|||
|
|||
let data = {...this.filteredData} |
|||
if(this.filteredData.page == 1){ |
|||
this.tableList = [] |
|||
} |
|||
|
|||
//判断是否还有数据 |
|||
if ((this.filteredData.page - 1) * this.filteredData.limit >= this.filteredData.total) { |
|||
this.loading = false |
|||
uni.showToast({ |
|||
title: '暂无更多', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
|
|||
let res = await apiRoute.xy_personCourseSchedule(data) |
|||
this.loading = false |
|||
this.isReachedBottom = false; |
|||
if (res.code != 1) { |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
|
|||
this.tableList = this.tableList.concat(res.data.data); // 使用 concat 方法 将新数据追加到数组中 |
|||
|
|||
//场地信息 |
|||
this.venuesInfo = res.data.venues_info |
|||
|
|||
this.filteredData.total = res.data.total |
|||
this.filteredData.page++ |
|||
}, |
|||
|
|||
//选择日期 |
|||
async selectDate(date) { |
|||
this.loadData() |
|||
this.filteredData.course_date = date |
|||
this.getList() |
|||
}, |
|||
|
|||
//日历选择相关 |
|||
// 获取日期范围 |
|||
getDateRange() { |
|||
const today = new Date(); // 获取今天的日期 |
|||
const startDate = new Date(today); // 复制今天的日期 |
|||
const endDate = new Date(today); // 复制今天的日期 |
|||
|
|||
// 计算 startDate：往前推 1 个月 |
|||
startDate.setMonth(today.getMonth() - 1); |
|||
|
|||
// 计算 endDate：往后推 1 个月 |
|||
endDate.setMonth(today.getMonth() + 2); |
|||
|
|||
// 将日期格式化为 YYYY-MM-DD |
|||
const formatDate = (date) => { |
|||
const year = date.getFullYear(); |
|||
const month = String(date.getMonth() + 1).padStart(2, '0'); |
|||
const day = String(date.getDate()).padStart(2, '0'); |
|||
return `${year}-${month}-${day}`; |
|||
}; |
|||
|
|||
// 更新 data 中的 startDate 和 endDate |
|||
this.startDate = formatDate(startDate); |
|||
this.endDate = formatDate(endDate); |
|||
console.log([this.startDate,this.endDate]) |
|||
}, |
|||
//设置日期打点 |
|||
async setCalendarSelected(){ |
|||
//获取当前月份 |
|||
const today = new Date(); // 获取当前日期 |
|||
const year = today.getFullYear(); // 获取年份 |
|||
const month = today.getMonth(); // 获取月份（0-11） |
|||
|
|||
// 计算本月第一天 |
|||
const firstDay = new Date(year, month, 1); |
|||
// 计算本月最后一天（下个月的第一天减去1天） |
|||
const lastDay = new Date(year, month + 1, 0); |
|||
|
|||
// 格式化日期为 YYYY-MM-DD |
|||
const formatDate = (date) => { |
|||
const y = date.getFullYear(); |
|||
const m = String(date.getMonth() + 1).padStart(2, '0'); // 月份补零 |
|||
const d = String(date.getDate()).padStart(2, '0'); // 日期补零 |
|||
return `${y}-${m}-${d}`; |
|||
}; |
|||
|
|||
let start_date = formatDate(firstDay); // 本月第一天 |
|||
let end_date = formatDate(lastDay); // 本月最后一天 |
|||
|
|||
let params = { |
|||
resources_id: this.memberInfo.id, // 客户资源ID |
|||
start_date: start_date, // 开始日期(Y-m-d) |
|||
end_date: end_date, // 结束日期(Y-m-d) |
|||
} |
|||
let res = await apiRoute.xy_personCourseScheduleGetCalendar(params) |
|||
|
|||
this.calendarSelected = [] |
|||
res.data.forEach((v,k)=>{ |
|||
if(v.is_sign == 1){ |
|||
this.calendarSelected.push({ |
|||
date: v.date, |
|||
}) |
|||
} |
|||
}) |
|||
|
|||
|
|||
// this.calendarSelected = [ |
|||
// { |
|||
// date: '2025-04-07', |
|||
// }, |
|||
// { |
|||
// date: '2025-04-08', |
|||
// }, |
|||
// { |
|||
// date: '2025-04-09', |
|||
// } |
|||
// ] |
|||
}, |
|||
//日历选择 |
|||
changeCalendar(e){ |
|||
console.log('日历',e) |
|||
this.show_calendar = false |
|||
console.log('日历',e) |
|||
this.show_calendar = false |
|||
this.loadData() |
|||
this.filteredData.course_date = e.fulldate |
|||
this.getList() |
|||
}, |
|||
|
|||
|
|||
//打开课表详情页 |
|||
openViewCourseInfo(item) { |
|||
let person_course_schedule_id = item.id |
|||
this.$navigateTo({ |
|||
url: `/pages/student/timetable/info?person_course_schedule_id=${person_course_schedule_id}` |
|||
}) |
|||
}, |
|||
//体育馆列表 |
|||
more() { |
|||
let course_date = this.filteredData.course_date |
|||
let venue_id = this.venuesInfo.id || ''//当前场馆id |
|||
this.$navigateTo({ |
|||
url: `/pages/student/timetable/list?course_date=${course_date}&venue_id=${venue_id}` |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
|
|||
.main_box{ |
|||
background: #292929 ; |
|||
} |
|||
|
|||
//自定义导航栏 |
|||
.navbar_section{ |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
background: #292929; |
|||
.title{ |
|||
padding: 40rpx 0rpx; |
|||
|
|||
/* 小程序端样式 */ |
|||
// #ifdef MP-WEIXIN |
|||
padding: 80rpx 0rpx; |
|||
// #endif |
|||
|
|||
font-size: 30rpx; |
|||
color: #fff; |
|||
} |
|||
} |
|||
|
|||
.main_section{ |
|||
min-height: 100vh; |
|||
background: #292929 100%; |
|||
padding-top: 40rpx; |
|||
padding-bottom: 150rpx; |
|||
font-size: 24rpx; |
|||
color: #FFFFFF; |
|||
|
|||
.section_1{ |
|||
background: #333333 100%; |
|||
width: 100%; |
|||
padding: 30rpx 28rpx; |
|||
.ul{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
.li{ |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
align-items: center; |
|||
gap: 10rpx; |
|||
text{ |
|||
font-size: 24rpx; |
|||
color: #FFFFFF; |
|||
text-align: center; |
|||
} |
|||
text:nth-child(2){ |
|||
width: 44rpx; |
|||
height: 44rpx; |
|||
} |
|||
text:nth-child(3){ |
|||
width: 8rpx; |
|||
height: 8rpx; |
|||
} |
|||
.today{ |
|||
border-radius: 50%; |
|||
background: #29D3B4; |
|||
text-align: center; |
|||
line-height: 42rpx; |
|||
} |
|||
.select_plan{ |
|||
background: #F59A23; |
|||
border-radius: 50%; |
|||
} |
|||
} |
|||
} |
|||
.btn{ |
|||
margin-top: 20rpx; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
color: #A4ADB3; |
|||
} |
|||
} |
|||
|
|||
.section_2{ |
|||
margin-top: 30rpx; |
|||
padding: 0 20rpx ; |
|||
color: #fff; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
.item_box { |
|||
width: 45%; |
|||
.fui-filter__item { |
|||
display: flex; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.section_3{ |
|||
margin-top: 36rpx; |
|||
color: #fff; |
|||
font-size: 24rpx; |
|||
.ul{ |
|||
padding: 0 26rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 30rpx; |
|||
.li{ |
|||
position: relative; |
|||
border-radius: 22rpx; |
|||
background: #434544 100%; |
|||
padding: 14rpx 0; |
|||
display: flex; |
|||
flex-direction: column; |
|||
.top_box{ |
|||
padding: 20rpx 30rpx; |
|||
.center_box{ |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 10rpx; |
|||
view{} |
|||
} |
|||
.right_box{ |
|||
.tag{ |
|||
position:absolute; |
|||
top: 0rpx; |
|||
right: 0rpx; |
|||
padding: 10rpx; |
|||
width: 102rpx; |
|||
text-align: center; |
|||
font-size: 24rpx; |
|||
border-bottom-left-radius: 20rpx; |
|||
border-top-right-radius: 20rpx; |
|||
} |
|||
} |
|||
} |
|||
.bottom_box{ |
|||
border-top: 1px dashed #F2F2F2; |
|||
padding: 26rpx 16rpx 0 26rpx; |
|||
.hint{ |
|||
color:#D7D7D7; |
|||
} |
|||
.list_box{ |
|||
margin-top: 22rpx; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
.list{ |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 14rpx; |
|||
.itme{ |
|||
image{ |
|||
width: 48rpx; |
|||
height: 48rpx; |
|||
border-radius: 50%; |
|||
} |
|||
} |
|||
} |
|||
.btn{ |
|||
border: 1px solid #FAD04D; |
|||
border-radius: 10rpx; |
|||
background: #434544; |
|||
color: #FAD04D; |
|||
width: 110rpx; |
|||
height: 60rpx; |
|||
line-height: 55rpx; |
|||
text-align: center; |
|||
font-size: 24rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
|
|||
</style> |
|||
@ -1,254 +0,0 @@ |
|||
<!--课程-详情--> |
|||
<template> |
|||
<view class="main_box"> |
|||
<scroll-view scroll-y="true" :lower-threshold="lowerThreshold" |
|||
@scrolltolower="loadMoreData" style="height: 100vh;"> |
|||
|
|||
<view class="data_hint" v-if="!this.tableList.length">暂无更多数据</view> |
|||
|
|||
<view class="main_section" v-for="(v,k) in tableList" :key="k" @click="opebViewTimetable(v)"> |
|||
<view class="title">{{v.campus.campus_name}} </view> |
|||
<view class="con">{{v.campus.campus_address}} {{v.venue_name}}</view> |
|||
<!-- <view class="con" v-if="v.distance === null ">无法获取定位</view>--> |
|||
<!-- <view class="con" v-else-if="v.distance">距您{{v.distance}}km</view>--> |
|||
<view class="current-venue" v-if="venue_id == v.id"> |
|||
当前场馆 |
|||
</view> |
|||
</view> |
|||
</scroll-view> |
|||
<!-- 加载状态--> |
|||
<!-- <fui-loading :isFixed="true" srcCol="/static/icon-img/loading_white.png" text="正在加载..." v-if="loading"></fui-loading>--> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import apiRoute from '@/api/apiRoute.js'; |
|||
import memberApi from '@/api/member.js'; |
|||
import AQTabber from "@/components/AQ/AQTabber.vue" |
|||
|
|||
|
|||
export default { |
|||
components: { |
|||
AQTabber, |
|||
}, |
|||
data() { |
|||
return { |
|||
loading:false,//加载状态 |
|||
lowerThreshold: 100,//距离底部多远触发 |
|||
isReachedBottom: false,//防止重复加载|true=不可加载|false=可加载 |
|||
|
|||
memberInfo:{id:''},//客户资源信息 |
|||
|
|||
//筛选条件 |
|||
filteredData:{ |
|||
// page:1,//当前页码 |
|||
// limit:10,//每页返回数据条数 |
|||
// total:10,//数据总条数 |
|||
course_date:'',//日期 |
|||
resources_id:'',//客户资源ID |
|||
}, |
|||
|
|||
tableList:[],//表格数据 |
|||
|
|||
longitude:'',//当前用户经度 |
|||
latitude:'',//当前用户纬度 |
|||
venue_id:'',//当前场馆id |
|||
} |
|||
}, |
|||
onLoad(options) { |
|||
this.filteredData.course_date = options.course_date//上课日期 |
|||
//场馆id |
|||
this.venue_id = options.venue_id || ''//场地ID |
|||
}, |
|||
onShow() { |
|||
this.init()//初始化 |
|||
}, |
|||
methods: { |
|||
//初始化 |
|||
async init() { |
|||
// await this.getUserLocation(); |
|||
|
|||
await this.getMemberInfo(); |
|||
await this.getList(); |
|||
}, |
|||
|
|||
//获取当前登录的学生信息 |
|||
async getMemberInfo() { |
|||
let res = await apiRoute.xy_memberInfo({}) |
|||
if(res.code != 1){ |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
this.memberInfo = res.data |
|||
this.filteredData.resources_id = res.data.id |
|||
}, |
|||
|
|||
|
|||
// 获取用户当前位置（支持多端） |
|||
async getUserLocation() { |
|||
try { |
|||
const location = await this.getLocation(); |
|||
this.longitude = location.longitude; |
|||
this.latitude = location.latitude; |
|||
} catch (error) { |
|||
console.log(error); |
|||
uni.showToast({ |
|||
title: '获取位置失败', |
|||
icon: 'none' |
|||
}); |
|||
// throw error; // 重新抛出错误，以便在 init 方法中捕获 |
|||
} |
|||
}, |
|||
|
|||
// 封装 uni.getLocation 为一个返回 Promise 的函数 |
|||
getLocation() { |
|||
return new Promise((resolve, reject) => { |
|||
uni.getLocation({ |
|||
type: 'wgs84', |
|||
success: (res) => { |
|||
console.log('当前位置的经度：' + res.longitude); |
|||
console.log('当前位置的纬度：' + res.latitude); |
|||
resolve(res); |
|||
}, |
|||
fail: (err) => { |
|||
console.log(err); |
|||
reject(err); |
|||
} |
|||
}); |
|||
}); |
|||
}, |
|||
|
|||
//计算距离 |
|||
getDistance(lat1, lng1, lat2, lng2) { |
|||
const R = 6371; // 地球半径，单位为公里 |
|||
const dLat = this.deg2rad(lat2 - lat1); |
|||
const dLon = this.deg2rad(lng2 - lng1); |
|||
const a = |
|||
Math.sin(dLat / 2) * Math.sin(dLat / 2) + |
|||
Math.cos(this.deg2rad(lat1)) * Math.cos(this.deg2rad(lat2)) * |
|||
Math.sin(dLon / 2) * Math.sin(dLon / 2); |
|||
const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)); |
|||
const distance = R * c; // 距离，单位为公里 |
|||
|
|||
return distance.toFixed(2); // 保留两位小数 |
|||
}, |
|||
// 将角度转换为弧度 |
|||
deg2rad(deg) { |
|||
return deg * (Math.PI / 180); |
|||
}, |
|||
|
|||
|
|||
//加载更多(下一页) |
|||
loadMoreData() { |
|||
return //本页面无需下一页 |
|||
//判断是否加载 |
|||
if (!this.isReachedBottom) { |
|||
this.isReachedBottom = true;//设置为不可请求状态 |
|||
this.getList(); |
|||
} |
|||
}, |
|||
//重置为第一页 |
|||
loadData() { |
|||
setTimeout(() => { |
|||
this.isReachedBottom = false; // 重置状态，以便下次触发加载更多 |
|||
}, 1000); |
|||
}, |
|||
|
|||
//获取场地列表 |
|||
async getList(){ |
|||
this.loading = true |
|||
|
|||
let data = {...this.filteredData} |
|||
|
|||
//判断是否还有数据 |
|||
// if(this.filteredData.page * this.filteredData.limit > this.total){ |
|||
// this.loading = false |
|||
// uni.showToast({ |
|||
// title: '暂无更多', |
|||
// icon: 'none' |
|||
// }) |
|||
// return |
|||
// } |
|||
|
|||
let res = await apiRoute.xy_personCourseScheduleGetVenueListAll(data) |
|||
this.loading = false |
|||
this.isReachedBottom = false; |
|||
if (res.code != 1){ |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
|
|||
this.tableList = res.data |
|||
|
|||
|
|||
this.tableList.forEach((v,k)=>{ |
|||
if(this.longitude && this.latitude && (v.longitude || '') && (v.latitude || '')){ |
|||
//计算距离 |
|||
v.distance = this.getDistance(this.latitude, this.longitude, v.latitude, v.longitude) |
|||
}else{ |
|||
v.distance = null |
|||
} |
|||
}) |
|||
|
|||
console.log('列表',this.tableList) |
|||
}, |
|||
|
|||
//跳转页面-课程列表 |
|||
opebViewTimetable(item) { |
|||
let venue_id = item.id |
|||
this.$navigateTo({ |
|||
url: `/pages/student/timetable/index?venue_id=${venue_id}` |
|||
}) |
|||
}, |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.main_box { |
|||
width: 100%; |
|||
height: 100vh; |
|||
overflow: auto; |
|||
background: #292929; |
|||
} |
|||
.data_hint{ |
|||
margin-top: 100rpx; |
|||
font-size: 30rpx; |
|||
text-align: center; |
|||
color: #fff; |
|||
} |
|||
.main_section{ |
|||
width: 92%; |
|||
border-radius: 15rpx; |
|||
background-color: #404045; |
|||
margin: 20rpx auto; |
|||
padding: 40rpx 0 40rpx 80rpx; |
|||
color: #fff; |
|||
position: relative; |
|||
} |
|||
.title{ |
|||
font-size: 32rpx; |
|||
} |
|||
.con{ |
|||
color: #D7D7D7; |
|||
font-size: 26rpx; |
|||
margin-top: 20rpx; |
|||
} |
|||
.current-venue{ |
|||
border-radius: 8rpx; |
|||
border: 2rpx #F59A23 solid; |
|||
width: 120rpx; |
|||
text-align: center; |
|||
color: #F59A23; |
|||
position: absolute; |
|||
top: 10%; |
|||
right: 3%; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue