110 changed files with 40426 additions and 704 deletions
@ -0,0 +1,755 @@ |
|||
<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.course_list && infoData.course_list.length > 0"> |
|||
<!-- 上课中--> |
|||
<view class="li" v-for="(v,k) in infoData.course_list" :key="k" @click="openViewCourseInfoList(v)"> |
|||
<view class="top_box"> |
|||
<view class="title">课程：{{ v.course_name }}</view> |
|||
<view class="title">时间：{{ v.course_date }} {{ v.time_slot }} |
|||
</view> |
|||
<view class="title">地点：{{ v.address }}</view> |
|||
</view> |
|||
|
|||
<view class="botton_box" v-if="v.status == 'ongoing'"> |
|||
<view class="box"> |
|||
<view>已签到学生（{{ v.sign_count }}/{{ v.students_count }}）</view> |
|||
<view> |
|||
查看 |
|||
<fui-icon size="35" color="#fff" name="arrowright"></fui-icon> |
|||
</view> |
|||
</view> |
|||
<!-- <view class="box">--> |
|||
<!-- <view>尚未发布作业</view>--> |
|||
<!-- <view></view>--> |
|||
<!-- </view>--> |
|||
</view> |
|||
<view class="botton_box" v-else> |
|||
<view class="box"> |
|||
<view>应到学生（{{ v.students_count }}）</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:#fad24e;">待开始 |
|||
</view> |
|||
|
|||
<view |
|||
v-if="v.status == 'upcoming'" |
|||
class="tag" |
|||
style="background:#1cd188;">待上课 |
|||
</view> |
|||
|
|||
<view |
|||
v-if="v.status == 'ongoing'" |
|||
class="tag" |
|||
style="background:#fad24e;">上课中 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<!-- 没有数据时的占位区域 --> |
|||
<view class="empty-placeholder" v-else> |
|||
<image :src="$util.img('/static/icon-img/empty.png')" mode="aspectFit"></image> |
|||
<text>暂无课程数据</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<!--作业批改--> |
|||
<view class="section_4"> |
|||
<view class="title_box"> |
|||
<view class="top_box"> |
|||
<text>作业批改</text> |
|||
<view @click="openObjListView()">全部</view> |
|||
</view> |
|||
<view class="line"></view> |
|||
</view> |
|||
<view class="ul" v-if="infoData.task_list && infoData.task_list.length > 0"> |
|||
<view class="li" v-for="(v,k) in infoData.task_list" :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" style="background:#fad24e;">上课中</view>--> |
|||
<view class="tag" style="background:#1cd188;">待批改</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<!-- 没有数据时的占位区域 --> |
|||
<view class="empty-placeholder" v-else> |
|||
<image :src="$util.img('/static/icon-img/empty.png')" mode="aspectFit"></image> |
|||
<text>暂无作业数据</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<!--我的服务列表--> |
|||
<view class="section_6"> |
|||
<view class="title_box"> |
|||
<view class="top_box"> |
|||
<text>我的服务</text> |
|||
<view @click="openServiceListView()">全部</view> |
|||
</view> |
|||
<view class="line"></view> |
|||
</view> |
|||
<view class="service-list" v-if="serviceList && serviceList.length > 0"> |
|||
<view class="service-item" v-for="(item, index) in serviceList" :key="index" @click="viewServiceDetail(item)"> |
|||
<view class="service-info"> |
|||
<view class="service-name">{{item.service_name}}</view> |
|||
<view class="service-desc">{{item.description}}</view> |
|||
<view class="service-time">创建时间：{{item.created_at}}</view> |
|||
</view> |
|||
<view class="service-status" :class="{'active': item.status === 1}"> |
|||
{{item.status === 1 ? '进行中' : '已结束'}} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<!-- 没有数据时的占位区域 --> |
|||
<view class="empty-placeholder" v-else> |
|||
<image :src="$util.img('/static/icon-img/empty.png')" mode="aspectFit"></image> |
|||
<text>暂无服务数据</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
|
|||
|
|||
<!-- 底部导航--> |
|||
<AQTabber/> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import memberApi from '@/api/member.js'; |
|||
import AQTabber from "@/components/AQ/AQTabber.vue" |
|||
|
|||
|
|||
export default { |
|||
components: { |
|||
AQTabber, |
|||
}, |
|||
data() { |
|||
return { |
|||
//首页数据 |
|||
infoData:{ |
|||
course_list:[],//课程列表 |
|||
task_list:[],//作业批改 |
|||
}, |
|||
serviceList: [], // 我的服务列表 |
|||
} |
|||
}, |
|||
onLoad() { |
|||
this.init() // 页面加载时初始化 |
|||
}, |
|||
onShow() { |
|||
this.init() // 每次显示页面时初始化 |
|||
}, |
|||
methods: { |
|||
|
|||
//初始化 |
|||
async init(){ |
|||
await this.getInfo() |
|||
// await this.getServiceList() // 获取服务列表 |
|||
}, |
|||
|
|||
//获取首页信息 |
|||
async getInfo(){ |
|||
// 注释掉API调用，使用模拟数据 |
|||
let res = await memberApi.jlIndex({}) |
|||
if(res.code != 1){ |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
let course_list = res.data.course_list |
|||
let task_list = res.data.task_list |
|||
this.serviceList = res.data.service_list |
|||
|
|||
// 使用模拟数据 |
|||
this.infoData = { |
|||
course_list: course_list, |
|||
task_list: task_list |
|||
} |
|||
}, |
|||
|
|||
// 获取服务列表 |
|||
async getServiceList() { |
|||
// 注释掉API调用，使用模拟数据 |
|||
// try { |
|||
// // 这里替换为实际的API调用 |
|||
// let res = await memberApi.serviceList({}) |
|||
// if(res.code == 1){ |
|||
// this.serviceList = res.data || [] |
|||
// } else { |
|||
// uni.showToast({ |
|||
// title: res.msg || '获取服务列表失败', |
|||
// icon: 'none' |
|||
// }) |
|||
// } |
|||
// } catch (error) { |
|||
// console.error('获取服务列表失败:', error) |
|||
// uni.showToast({ |
|||
// title: '获取服务列表失败', |
|||
// icon: 'none' |
|||
// }) |
|||
// } |
|||
|
|||
// 使用模拟数据 |
|||
// this.serviceList = [ |
|||
// { |
|||
// id: 1, |
|||
// name: '一对一辅导服务', |
|||
// description: '针对学生个人情况定制的一对一辅导计划，帮助学生快速提高成绩。', |
|||
// create_time: '2025-07-15', |
|||
// status: 1 |
|||
// }, |
|||
// { |
|||
// id: 2, |
|||
// name: '小组课程服务', |
|||
// description: '3-5人小组课程，提供互动学习环境，培养学生团队协作能力。', |
|||
// create_time: '2025-07-20', |
|||
// status: 0 |
|||
// }, |
|||
// { |
|||
// id: 3, |
|||
// name: '课后辅导服务', |
|||
// description: '针对课后作业和复习提供专业辅导，巩固课堂所学知识。', |
|||
// create_time: '2025-07-01', |
|||
// status: 1 |
|||
// } |
|||
// ] |
|||
}, |
|||
|
|||
//打开-发布作业页 |
|||
openObjAddView(){ |
|||
uni.navigateTo({ |
|||
url: '/pages-coach/coach/job/add' |
|||
}) |
|||
}, |
|||
|
|||
//打开作业列表页 |
|||
openObjListView(){ |
|||
uni.navigateTo({ |
|||
url: '/pages-coach/coach/job/list' |
|||
}) |
|||
}, |
|||
|
|||
//跳转页面-课程详情 |
|||
openViewCourseInfoList(item){ |
|||
let id = item.id |
|||
uni.navigateTo({ |
|||
url: `/pages-coach/coach/course/info_list?id=${id}` |
|||
}) |
|||
}, |
|||
|
|||
//跳转页面-作业详情 |
|||
openViewWorkDetails(item){ |
|||
let id = item.id |
|||
uni.navigateTo({ |
|||
url: `/pages-coach/coach/student/work_details?id=${id}` |
|||
}) |
|||
}, |
|||
|
|||
// 打开服务列表页面 |
|||
openServiceListView() { |
|||
uni.navigateTo({ |
|||
url: '/pages-coach/coach/my/service_list' |
|||
}) |
|||
}, |
|||
|
|||
// 查看服务详情 |
|||
viewServiceDetail(item) { |
|||
let id = item.id |
|||
uni.navigateTo({ |
|||
url: `/pages-coach/coach/my/service_detail?id=${id}` |
|||
}) |
|||
}, |
|||
|
|||
// 跳转到我的学员列表页面 |
|||
goToStudentList() { |
|||
uni.navigateTo({ |
|||
url: '/pages-coach/coach/student/student_list' |
|||
}) |
|||
}, |
|||
|
|||
// 跳转到班级列表页面 |
|||
goToClassList() { |
|||
uni.navigateTo({ |
|||
url: '/pages-coach/coach/class/list' |
|||
}) |
|||
}, |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
|
|||
.main_box{ |
|||
background: #292929 ; |
|||
} |
|||
|
|||
//自定义导航栏 |
|||
.navbar_section{ |
|||
padding: 0 40rpx; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
background: #29d3b4; |
|||
view{ |
|||
width: 30%; |
|||
text-align: center; |
|||
} |
|||
.left{ |
|||
text-align: left; |
|||
} |
|||
.title{ |
|||
padding: 40rpx 0rpx; |
|||
|
|||
/* 小程序端样式 */ |
|||
// #ifdef MP-WEIXIN |
|||
padding: 80rpx 0rpx; |
|||
// #endif |
|||
|
|||
font-size: 30rpx; |
|||
color: #fff; |
|||
} |
|||
.right{ |
|||
padding: 20rpx 0; |
|||
/* H5端样式 */ |
|||
// #ifdef H5 |
|||
padding: 40rpx 0 20rpx; |
|||
// #endif |
|||
|
|||
/* 小程序端样式 */ |
|||
// #ifdef MP-WEIXIN |
|||
padding: 80rpx 0 20rpx; |
|||
// #endif |
|||
|
|||
font-size: 26rpx; |
|||
color: #fff; |
|||
text-align: right; |
|||
} |
|||
} |
|||
|
|||
.main_section{ |
|||
min-height: 100vh; |
|||
background: #292929 100%; |
|||
padding: 0 24rpx; |
|||
padding-top: 40rpx; |
|||
padding-bottom: 150rpx; |
|||
font-size: 28rpx; |
|||
|
|||
/* 空数据占位区域样式 */ |
|||
.empty-placeholder { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding: 60rpx 0; |
|||
|
|||
image { |
|||
width: 200rpx; |
|||
height: 200rpx; |
|||
margin-bottom: 20rpx; |
|||
} |
|||
|
|||
text { |
|||
color: #999; |
|||
font-size: 28rpx; |
|||
} |
|||
} |
|||
|
|||
.section_1{ |
|||
background: #FFFFFF 100%; |
|||
height: 264rpx; |
|||
border-radius: 14rpx; |
|||
margin: 28rpx auto; |
|||
padding: 28rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-between; |
|||
font-size: 28rpx; |
|||
.top{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
.user{ |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 20rpx; |
|||
.pic{ |
|||
width: 144rpx; |
|||
height: 144rpx; |
|||
border-radius: 50%; |
|||
image{ |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
} |
|||
} |
|||
.right{ |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 20rpx; |
|||
view{ |
|||
display: flex; |
|||
gap: 10rpx; |
|||
.title{ |
|||
width: 148rpx; |
|||
text-align: right; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.bottom{ |
|||
padding: 0 44rpx; |
|||
} |
|||
} |
|||
|
|||
.section_2{ |
|||
border-radius: 60rpx; |
|||
padding: 28rpx 36rpx; |
|||
background: #29D3B4 100%; |
|||
color: #fff; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
.left_box{ |
|||
display: flex; |
|||
view{ |
|||
display: flex; |
|||
flex-direction: column; |
|||
text{} |
|||
} |
|||
view:nth-child(1){ |
|||
padding-right: 10rpx; |
|||
border-right: 2px solid #fff; |
|||
} |
|||
view:nth-child(2){ |
|||
padding-left: 10rpx; |
|||
} |
|||
} |
|||
.rigth_box{ |
|||
view{ |
|||
width: 106rpx; |
|||
height: 50rpx; |
|||
line-height: 50rpx; |
|||
text-align: center; |
|||
border-radius: 25rpx; |
|||
background: #32baa1; |
|||
font-size: 24rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.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{ |
|||
border: 1px solid #00E5BB; |
|||
position: relative; |
|||
border-radius: 22rpx; |
|||
background: #434544 100%; |
|||
padding: 14rpx 20rpx; |
|||
padding-bottom: 44rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
.top_box{ |
|||
padding-bottom: 18rpx; |
|||
border-bottom: 1px dashed #F2F2F2; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 18rpx; |
|||
.title{} |
|||
} |
|||
.botton_box{ |
|||
padding-top: 18rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 18rpx; |
|||
color: #D7D7D7; |
|||
.box{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
view{ |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
} |
|||
} |
|||
.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; |
|||
} |
|||
} |
|||
|
|||
} |
|||
} |
|||
|
|||
.section_4{ |
|||
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: 32rpx 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; |
|||
} |
|||
|
|||
} |
|||
} |
|||
|
|||
} |
|||
} |
|||
|
|||
.section_5{ |
|||
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; |
|||
} |
|||
} |
|||
|
|||
.quick-links { |
|||
margin-top: 30rpx; |
|||
display: flex; |
|||
justify-content: space-around; |
|||
|
|||
.quick-link-item { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
background: #434544; |
|||
border-radius: 20rpx; |
|||
padding: 30rpx 20rpx; |
|||
width: 30%; |
|||
|
|||
.quick-link-icon { |
|||
margin-bottom: 20rpx; |
|||
} |
|||
|
|||
.quick-link-text { |
|||
font-size: 28rpx; |
|||
color: #fff; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.section_6{ |
|||
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; |
|||
} |
|||
} |
|||
.service-list{ |
|||
margin-top: 30rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 20rpx; |
|||
.service-item{ |
|||
position: relative; |
|||
border-radius: 22rpx; |
|||
background: #434544 100%; |
|||
padding: 24rpx 20rpx; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
border-left: 4rpx solid #29D3B4; |
|||
|
|||
.service-info{ |
|||
flex: 1; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 12rpx; |
|||
|
|||
.service-name{ |
|||
font-size: 30rpx; |
|||
color: #fff; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.service-desc{ |
|||
font-size: 24rpx; |
|||
color: #D7D7D7; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
display: -webkit-box; |
|||
-webkit-line-clamp: 2; |
|||
-webkit-box-orient: vertical; |
|||
} |
|||
|
|||
.service-time{ |
|||
font-size: 22rpx; |
|||
color: #AAAAAA; |
|||
margin-top: 6rpx; |
|||
} |
|||
} |
|||
|
|||
.service-status{ |
|||
padding: 8rpx 20rpx; |
|||
border-radius: 30rpx; |
|||
background: #666; |
|||
color: #fff; |
|||
font-size: 24rpx; |
|||
text-align: center; |
|||
|
|||
&.active { |
|||
background: #29D3B4; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
|
|||
</style> |
|||
@ -0,0 +1,227 @@ |
|||
<!--即将到期--> |
|||
<template> |
|||
<view class="main_box"> |
|||
|
|||
<view class="main_section"> |
|||
<!-- 班级成员列表--> |
|||
<view class="section_4"> |
|||
<view class="ul"> |
|||
<!-- @click="openViewStudentInfo({id:1})" --> |
|||
<view class="li" v-for="(item, index) in studentList" :key="index"> |
|||
<view class="left"> |
|||
<view class="box_1"> |
|||
<image :src="item.avatar || $util.img('/static/icon-img/avatar.png')" mode="aspectFill" class="pic"></image> |
|||
<view class="tag_box"> |
|||
即将到期 |
|||
</view> |
|||
</view> |
|||
<view class="box_2"> |
|||
<view class="name">{{item.name}}</view> |
|||
<view class="date">课程截止时间：{{item.end_date}}</view> |
|||
</view> |
|||
</view> |
|||
<view class="right"> |
|||
<view class="item"> |
|||
<view>{{ |
|||
(item.use_total_hours + item.use_gift_hours) |
|||
}}节</view> |
|||
<view>已上课时</view> |
|||
</view> |
|||
<view class="item"> |
|||
<view>{{ |
|||
(item.total_hours + item.gift_hours) - (item.use_total_hours + item.use_gift_hours) |
|||
}}节</view> |
|||
<view>剩余课时</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 底部导航--> |
|||
<!-- <AQTabber/>--> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import memberApi from '@/api/member.js'; |
|||
import AQTabber from "@/components/AQ/AQTabber.vue" |
|||
|
|||
|
|||
export default { |
|||
components: { |
|||
AQTabber, |
|||
}, |
|||
data() { |
|||
return { |
|||
formData: {}, |
|||
tabType: '1', //1=班级成员,2=作业任务 |
|||
studentList: [] |
|||
} |
|||
}, |
|||
onLoad() { |
|||
this.getStudentList(); |
|||
}, |
|||
methods: { |
|||
async getStudentList() { |
|||
// 模拟数据，实际开发中应该从API获取 |
|||
const res = await memberApi.jlGetStudentList({ |
|||
'type': 'daoqi' |
|||
}); |
|||
if (res.code == 1) { |
|||
this.studentList = res.data || []; |
|||
} else { |
|||
uni.showToast({ |
|||
title: res.msg || '获取学员列表失败', |
|||
icon: 'none' |
|||
}); |
|||
} |
|||
}, |
|||
//打开课程详情 |
|||
openViewCourseInfo(item) { |
|||
uni.navigateTo({ |
|||
url: '/pages-coach/coach/course/info' |
|||
}) |
|||
}, |
|||
//打开学员详情页 |
|||
openViewStudentInfo(item) { |
|||
uni.navigateTo({ |
|||
url: '/pages-coach/coach/student/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: 0 24rpx; |
|||
padding-top: 40rpx; |
|||
padding-bottom: 150rpx; |
|||
font-size: 24rpx; |
|||
color: #FFFFFF; |
|||
|
|||
//班级成员列表 |
|||
.section_4 { |
|||
.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; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,47 @@ |
|||
<template> |
|||
<view> |
|||
<view style="margin-top: 380rpx;text-align: center;font-size: 50rpx;font-weight: bold;"> |
|||
答对{{success}},答错{{error}} |
|||
</view> |
|||
<view style="margin-top: 15rpx;text-align: center;font-size: 50rpx;font-weight: bold;"> |
|||
总共得分{{num}} |
|||
</view> |
|||
<view @click="back" style="background-color: #00bfa5;margin: auto;text-align: center;margin-top: 30rpx;border-radius: 50rpx;font-size: 42rpx;padding: 20rpx;"> |
|||
返回列表 |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
error: '', |
|||
success: '', |
|||
num: '' |
|||
} |
|||
}, |
|||
onLoad(options) { |
|||
if(options.error){ |
|||
this.error = options.error; |
|||
} |
|||
if(options.success){ |
|||
this.success = options.success; |
|||
} |
|||
if(options.num){ |
|||
this.num = options.num; |
|||
} |
|||
}, |
|||
methods: { |
|||
back() { |
|||
uni.navigateTo({ |
|||
url: '/pages-coach/coach/my/teaching_management' |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
|
|||
</style> |
|||
@ -0,0 +1,185 @@ |
|||
<template> |
|||
<view class="whole"> |
|||
<view style="height: 36rpx;"></view> |
|||
|
|||
<view class="topic" v-for="(item,index) in quantityArr" :key="index" v-show="quantity == index"> |
|||
<view class="dis_style"> |
|||
<view class="title_icon">{{index + 1}}</view> |
|||
<view class="title_con" v-if="item.question_content_type === 'text'">{{item.question_content}}?</view> |
|||
</view> |
|||
<view class="dis_style"> |
|||
<view class="title_con" style="margin: auto;" v-if="item.question_content_type === 'image'"> |
|||
<img style="width: 300rpx;height: 300rpx;" :src="item.question_content" mode="aspectFit"> |
|||
</view> |
|||
</view> |
|||
<view style="line-height: 60rpx;margin-top: 16rpx;"> |
|||
<fui-radio-group name="radio" v-model="optionList[index]"> |
|||
<fui-checkbox-group name="checkbox" v-model="optionList[index]"> |
|||
<view class="title_con title_font" style="display: flex;align-items: center;" v-for="(item_option,index_option) in item.option_json" :key="index_option"> |
|||
<view style="display: flex;align-items: center;"> |
|||
<fui-radio :value="item_option.option" v-if="item.question_type != 'multiple_choice'"></fui-radio> |
|||
<fui-checkbox :value="item_option.option" v-if="item.question_type == 'multiple_choice'"></fui-checkbox> |
|||
</view> |
|||
<view>{{item_option.option}}. {{item_option.option_content}}</view> |
|||
</view> |
|||
</fui-checkbox-group> |
|||
</fui-radio-group> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="progress_bar"> |
|||
<fui-progress :percent="number_progress" background="#ddd" activeColor="#00bfa5" height="10"></fui-progress> |
|||
</view> |
|||
|
|||
<view class="switch_style"> |
|||
<view class="dis_style" style="color: #3e94ed;font-size: 30rpx;"> |
|||
<view @click="previous_question">上一题</view> |
|||
<view style="margin-left: 20rpx;" @click="next_question">下一题</view> |
|||
</view> |
|||
<view class="sub_style" @click="submit"> |
|||
提交试卷 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
import apiRoute from '@/api/apiRoute.js'; |
|||
export default { |
|||
data() { |
|||
return { |
|||
quantity: 0, |
|||
quantityArr: [1,2,3,4], |
|||
number_progress: 0, |
|||
testPaperId: 0, |
|||
optionList: [], |
|||
zid: 0 |
|||
} |
|||
}, |
|||
onLoad(options) { |
|||
if(options.id){ |
|||
this.testPaperId = options.id; |
|||
} |
|||
if(options.zid){ |
|||
this.zid = options.zid; |
|||
} |
|||
console.log(this.testPaperId, 999) |
|||
this.init() |
|||
}, |
|||
methods: { |
|||
async init() { |
|||
const res = await apiRoute.getTeachingTestPaper({exam_papers_id: this.testPaperId}); |
|||
if(res.code === 1) { |
|||
this.quantityArr = res.data.resText |
|||
this.number_progress = (Math.round(100 / res.data.count) * ( this.quantity + 1)); |
|||
} |
|||
}, |
|||
previous_question() { |
|||
if(this.quantity <= 0){ |
|||
uni.showToast({ |
|||
title: '已经是第一题了', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} else { |
|||
this.quantity-- |
|||
} |
|||
this.number_progress = (Math.round(100 / this.quantityArr.length) * ( this.quantity + 1)); |
|||
}, |
|||
next_question() { |
|||
if((this.quantity + 1) >= this.quantityArr.length){ |
|||
uni.showToast({ |
|||
title: '已经是最后一题了', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} else { |
|||
this.quantity++ |
|||
} |
|||
this.number_progress = (Math.round(100 / this.quantityArr.length) * ( this.quantity + 1)); |
|||
}, |
|||
async submit() { |
|||
this.optionList.forEach((item,index) => { |
|||
if (Array.isArray(item)) { |
|||
this.optionList[index] = item.join(',') |
|||
} |
|||
}) |
|||
const res = await apiRoute.submitTestPaper({optionList: this.optionList,testPaperId: this.testPaperId, id: this.zid}); |
|||
if(res.code === 1) { |
|||
uni.navigateTo({ |
|||
url: '/pages-coach/coach/my/exam_results?error=' + res.data.error + '&success=' + res.data.success + '&num=' + res.data.num |
|||
}) |
|||
} else { |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.whole{ |
|||
width: 100%; |
|||
height: 100vh; |
|||
background-color: #171717; |
|||
} |
|||
.topic{ |
|||
width: 95%; |
|||
height: auto; |
|||
background-color: #2d2d2d; |
|||
border: #3e91e8 4rpx solid; |
|||
border-radius: 16rpx; |
|||
padding: 26rpx; |
|||
margin: auto; |
|||
} |
|||
.dis_style{ |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
.title_icon{ |
|||
width: 60rpx; |
|||
height: 60rpx; |
|||
border-radius: 50rpx; |
|||
background-color: #00bfa5; |
|||
font-size: 26rpx; |
|||
color: #fff; |
|||
font-weight: bold; |
|||
text-align: center; |
|||
line-height: 60rpx; |
|||
} |
|||
.title_con{ |
|||
margin-left: 16rpx; |
|||
font-size: 26rpx; |
|||
color: #fff; |
|||
} |
|||
.title_font{ |
|||
font-size: 30rpx; |
|||
} |
|||
.progress_bar{ |
|||
width: 95%; |
|||
margin: 36rpx auto; |
|||
} |
|||
.switch_style{ |
|||
width: 95%; |
|||
height: auto; |
|||
padding: 26rpx; |
|||
background-color: #2d2d2d; |
|||
border-radius: 16rpx; |
|||
margin: auto; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
} |
|||
.sub_style{ |
|||
font-size: 32rpx; |
|||
padding: 15rpx 30rpx; |
|||
border-radius: 30rpx; |
|||
color: #000; |
|||
font-weight: bold; |
|||
text-align: center; |
|||
background-color: #35a3f0; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,505 @@ |
|||
<!--销售-个人资料-详情--> |
|||
<template> |
|||
<view class="main_box"> |
|||
|
|||
<view class="main_section"> |
|||
<view class="section"> |
|||
<view class="item"> |
|||
<image |
|||
@click="changeAvatar()" |
|||
class="pic" |
|||
:src="$util.img(formData.head_img)" |
|||
></image> |
|||
|
|||
<view class="btn" @click="changeAvatar()">修改头像</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="section"> |
|||
<view class="item"> |
|||
<view class="title"> |
|||
姓名 <text class="required">*</text> |
|||
</view> |
|||
<view class="input"> |
|||
<input v-model="formData.name" placeholder="请输入姓名" /> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="item"> |
|||
<view class="title"> |
|||
账号 <text class="required"></text> |
|||
</view> |
|||
<view class="input"> |
|||
<input v-model="formData.username" disabled placeholder="暂无" /> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="item"> |
|||
<view class="title"> |
|||
部门 <text class="required"></text> |
|||
</view> |
|||
<view class="input"> |
|||
<!-- <input disabled :placeholder="formData.department_name_str" />--> |
|||
<view class="dept disabled">{{formData.department_name_str || '暂无'}}</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="item"> |
|||
<view class="title"> |
|||
等级 <text class="required"></text> |
|||
</view> |
|||
<view class="input"> |
|||
<input v-model="formData.member_level_name" disabled placeholder="暂无" /> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="section"> |
|||
<view class="item"> |
|||
<view class="title"> |
|||
性别 <text class="required">*</text> |
|||
</view> |
|||
<view class="input"> |
|||
<input placeholder="请选择性别" v-model="formData.gender_str" @click="picker_show_sex=true"/> |
|||
<fui-picker |
|||
layer="1" |
|||
:linkage="true" |
|||
:options="options_sex_arr" |
|||
:show="picker_show_sex" |
|||
@change="changePickerSex" |
|||
@cancel="picker_show_sex=false" |
|||
></fui-picker> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="item"> |
|||
<view class="title"> |
|||
生日 <text class="required">*</text> |
|||
</view> |
|||
<view class="input"> |
|||
<input placeholder="请选择生日" @click="picker_show_birthday=true" v-model="formData.birthday"/> |
|||
<fui-date-picker |
|||
:minDate="minDate" |
|||
:maxDate="maxDate" |
|||
:show="picker_show_birthday" |
|||
type="3" |
|||
@change="changePickerBirthday" |
|||
@cancel="picker_show_birthday=false" |
|||
></fui-date-picker> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="item"> |
|||
<view class="title"> |
|||
邮箱 <text class="required">*</text> |
|||
</view> |
|||
<view class="input"> |
|||
<input v-model="formData.email" placeholder="请输入邮箱" /> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="item"> |
|||
<view class="title"> |
|||
手机 <text class="required">*</text> |
|||
</view> |
|||
<view class="input"> |
|||
<input v-model="formData.phone" placeholder="请输入手机" /> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="item"> |
|||
<view class="title"> |
|||
微信 <text class="required"></text> |
|||
</view> |
|||
<view class="input"> |
|||
<input v-model="formData.wx" placeholder="请输入微信" /> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="submet_btn" @click="submit">提交</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import apiRoute from '@/api/apiRoute.js'; |
|||
import marketApi from '@/api/market.js'; |
|||
import { |
|||
Api_url |
|||
} from "@/common/config.js"; |
|||
import AQTabber from "@/components/AQ/AQTabber" |
|||
|
|||
|
|||
export default { |
|||
components: { |
|||
AQTabber, |
|||
}, |
|||
data() { |
|||
return { |
|||
formData:{ |
|||
head_img:'',//头像地址 |
|||
name:'',//姓名 |
|||
username:'',//账号 |
|||
address:'',//住址 |
|||
gender:'',//性别|1男,2女 |
|||
gender_str:'', |
|||
birthday:'',//生日 |
|||
email:'',//邮箱 |
|||
phone:'',//手机 |
|||
wx:'',//微信号 |
|||
}, |
|||
|
|||
userInfo: {}, |
|||
|
|||
//上传图片APi路径 |
|||
uploadUrl: `${Api_url}/uploadImage`, |
|||
|
|||
//性别选择器 相关 |
|||
picker_show_sex: false, |
|||
sex_name:'请选择', |
|||
options_sex_arr: [ |
|||
{ |
|||
value: 1, |
|||
text: '男' |
|||
}, |
|||
{ |
|||
value: 2, |
|||
text: '女' |
|||
}, |
|||
], |
|||
|
|||
//生日选择器相关 |
|||
minDate: '', |
|||
maxDate: '', |
|||
picker_show_birthday: false, |
|||
upload_type: 1, |
|||
uploadHeadimg: '', |
|||
editHeadimg: '', |
|||
} |
|||
}, |
|||
onLoad() { |
|||
}, |
|||
onShow() { |
|||
this.init() |
|||
}, |
|||
methods: { |
|||
|
|||
async init(){ |
|||
// this.getBirthday() |
|||
this.setDateYear() |
|||
await this.getUserInfo() |
|||
}, |
|||
|
|||
//设置年份 |
|||
setDateYear() { |
|||
let currentYear = new Date().getFullYear(); |
|||
this.minDate = String(currentYear - 100); |
|||
this.maxDate = String(currentYear + 1); |
|||
}, |
|||
|
|||
//获取用户详情 |
|||
async getUserInfo(){ |
|||
let res = await apiRoute.getPersonnelInfo({}) |
|||
if (res.code != 1){ |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
|
|||
let gender_str = '' |
|||
if(res.data.gender == 1){ |
|||
gender_str = '男' |
|||
}else if(res.data.gender == 2){ |
|||
gender_str = '女' |
|||
} |
|||
|
|||
//用户表单 |
|||
this.formData = { |
|||
head_img: res.data.head_img,//头像地址 |
|||
name: res.data.name,//姓名 |
|||
username: res.data.phone,//账号 |
|||
address: res.data.address,//住址 |
|||
gender: res.data.gender,//性别|1男,2女 |
|||
gender_str:gender_str, |
|||
birthday: res.data.birthday,//生日 |
|||
email: res.data.email || '',//邮箱 |
|||
phone: res.data.phone,//手机 |
|||
wx: res.data.wx || '',//微信号 |
|||
member_level_name: res.data.member_level_name || '',//等级名称 |
|||
department_name_str:res.data.department_name_str || '暂无',//部门名称 |
|||
} |
|||
}, |
|||
|
|||
// 修改头像按钮 |
|||
changeAvatar() { |
|||
uni.chooseImage({ |
|||
count: 1, |
|||
sizeType: ['compressed'], |
|||
sourceType: ['album', 'camera'], |
|||
success: (res) => { |
|||
const tempFilePath = res.tempFilePaths[0] |
|||
// 这里可以调用上传接口 |
|||
this.uploadFilePromise(tempFilePath) |
|||
} |
|||
}) |
|||
}, |
|||
uploadFilePromise(url) { |
|||
let token = uni.getStorageSync('token') || '' |
|||
let a = uni.uploadFile({ |
|||
url: this.uploadUrl, //仅为示例，非真实的接口地址 |
|||
filePath: url, |
|||
name: 'file', |
|||
header: { |
|||
'token': `${token}`, //请求头设置token |
|||
}, |
|||
success: (e) => { |
|||
let res = JSON.parse(e.data.replace(/\ufeff/g, "") || "{}") |
|||
console.log('上传成功2', res) |
|||
if (res.code == 1) { |
|||
this.upload_type = 2 |
|||
this.formData.head_img = res.data.url |
|||
// this.editHeadimg = res.data.path |
|||
// this.uploadHeadimg = res.data.url |
|||
} else { |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: 'none' |
|||
}) |
|||
} |
|||
}, |
|||
}); |
|||
}, |
|||
|
|||
//性别选择相关 |
|||
changePickerSex(e) { |
|||
console.log('监听选择', e) |
|||
this.formData.gender = e.value |
|||
this.formData.gender_str = e.text |
|||
this.picker_show_sex = false |
|||
}, |
|||
|
|||
//生日选择相关 |
|||
//获取当前年月日+获取30年前的日期 |
|||
getBirthday() { |
|||
let date = new Date(); |
|||
let year = date.getFullYear(); |
|||
let month = date.getMonth() + 1; |
|||
let day = date.getDate(); |
|||
let year_30 = year - 30; |
|||
let month_30 = month; |
|||
let day_30 = day; |
|||
if (month_30 == 2 && day_30 > 28) { |
|||
month_30 = 3; |
|||
day_30 = 1; |
|||
} |
|||
if (month_30 == 4 && day_30 > 30) { |
|||
month_30 = 5; |
|||
day_30 = 1; |
|||
} |
|||
if (month_30 == 6 && day_30 > 30) { |
|||
month_30 = 7; |
|||
day_30 = 1; |
|||
} |
|||
if (month_30 == 9 && day_30 > 30) { |
|||
month_30 = 10; |
|||
day_30 = 1; |
|||
} |
|||
if (month_30 == 11 && day_30 > 30) { |
|||
month_30 = 12; |
|||
day_30 = 1; |
|||
} |
|||
if (month_30 > 12) { |
|||
month_30 = month_30 - 12; |
|||
year_30 = year_30 + 1; |
|||
} |
|||
let minDate = year_30 + "-" + month_30 + "-" + day_30 |
|||
let maxDate = year + "-" + month + "-" + day |
|||
this.minDate = minDate |
|||
this.maxDate = maxDate |
|||
}, |
|||
|
|||
//监听生日选择 |
|||
changePickerBirthday(e) { |
|||
console.log('监听生日选择', e) |
|||
this.formData.birthday = e.result |
|||
this.picker_show_birthday = false |
|||
}, |
|||
|
|||
//提交信息 |
|||
async submit() { |
|||
let data = {...this.formData} |
|||
|
|||
if(!data.head_img){ |
|||
uni.showToast({ |
|||
title: '请上传头像', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
|
|||
if(!data.name){ |
|||
uni.showToast({ |
|||
title: '请填写', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
|
|||
if(!data.gender){ |
|||
uni.showToast({ |
|||
title: '请选择性别', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
|
|||
if(!data.birthday){ |
|||
uni.showToast({ |
|||
title: '请选择生日', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
|
|||
if(!data.email){ |
|||
uni.showToast({ |
|||
title: '请填写邮箱', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
|
|||
if(!data.phone){ |
|||
uni.showToast({ |
|||
title: '请填写手机', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
|
|||
|
|||
let res = await apiRoute.editPersonnelInfo(data) |
|||
if(res.code != 1){ |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: 'success' |
|||
}) |
|||
//延迟1s执行 |
|||
setTimeout(() => { |
|||
this.getUserInfo() |
|||
}, 1000) |
|||
}, |
|||
|
|||
|
|||
} |
|||
} |
|||
</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 0rpx; |
|||
padding-top: 32rpx; |
|||
padding-bottom: 150rpx; |
|||
font-size: 28rpx; |
|||
color: #fff; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 20rpx; |
|||
|
|||
.section{ |
|||
background-color: #434544; |
|||
.item{ |
|||
padding: 20rpx 40rpx; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
.pic{ |
|||
width: 82rpx; |
|||
height: 82rpx; |
|||
border-radius: 50%; |
|||
} |
|||
.btn{} |
|||
|
|||
.title{ |
|||
min-width: 100rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
font-size: 26rpx; |
|||
color: #D7D7D7; |
|||
.required{ |
|||
margin-left: 10rpx; |
|||
color: red; |
|||
} |
|||
} |
|||
.input{ |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
input{ |
|||
text-align: right; |
|||
} |
|||
.dept{ |
|||
width: 50%; |
|||
} |
|||
.disabled{ |
|||
color: #808080; |
|||
//禁止图标 |
|||
cursor: not-allowed; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.submet_btn{ |
|||
margin: 0 auto; |
|||
margin-top: 40rpx; |
|||
border: 2px solid #25a18b; |
|||
color: #25a18b; |
|||
width: 80%; |
|||
height: 80rpx; |
|||
font-size: 30rpx; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
|
|||
|
|||
|
|||
} |
|||
|
|||
|
|||
</style> |
|||
@ -0,0 +1,546 @@ |
|||
<!--员工-我的工资--> |
|||
<template> |
|||
<view class="main_box"> |
|||
<view class="main_section"> |
|||
|
|||
<!-- 筛选条件 --> |
|||
<view class="filter_section"> |
|||
<view class="filter_item"> |
|||
<picker mode="date" fields="month" :value="selectedMonth" @change="onMonthChange"> |
|||
<view class="picker_display"> |
|||
<text>{{ selectedMonth || '选择月份' }}</text> |
|||
<text class="picker_arrow">></text> |
|||
</view> |
|||
</picker> |
|||
</view> |
|||
<view class="filter_btn" @click="loadSalaryList">查询</view> |
|||
</view> |
|||
|
|||
<!-- 工资条列表 --> |
|||
<view class="salary_list" v-if="salaryList.length > 0"> |
|||
<view |
|||
class="salary_item" |
|||
v-for="(item, index) in salaryList" |
|||
:key="item.id" |
|||
@click="viewSalaryDetail(item)" |
|||
> |
|||
<view class="salary_header"> |
|||
<view class="salary_month">{{ formatMonth(item.salary_month) }}</view> |
|||
<view :class="['salary_status',getStatusClass(item.status)]"> |
|||
{{ getStatusText(item.status) }} |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="salary_content"> |
|||
<view class="salary_row"> |
|||
<text class="label">基础工资:</text> |
|||
<text class="value">¥{{ formatMoney(item.base_salary) }}</text> |
|||
</view> |
|||
<view class="salary_row"> |
|||
<text class="label">出勤工资:</text> |
|||
<text class="value">¥{{ formatMoney(item.work_salary) }}</text> |
|||
</view> |
|||
<view class="salary_row"> |
|||
<text class="label">应发工资:</text> |
|||
<text class="value highlight">¥{{ formatMoney(item.gross_salary) }}</text> |
|||
</view> |
|||
<view class="salary_row"> |
|||
<text class="label">实发工资:</text> |
|||
<text class="value net_salary">¥{{ formatMoney(item.net_salary) }}</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="salary_footer"> |
|||
<text class="view_detail">点击查看详情 ></text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 暂无数据 --> |
|||
<view class="no_data" v-else-if="!loading"> |
|||
<image class="no_data_icon" src="/static/images/no_data.png" mode="aspectFit"></image> |
|||
<text class="no_data_text">暂无工资数据</text> |
|||
</view> |
|||
|
|||
<!-- 加载中 --> |
|||
<view class="loading" v-if="loading"> |
|||
<text>加载中...</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 工资详情弹窗 --> |
|||
<view class="salary_modal" v-if="showDetail" @click="closeDetail"> |
|||
<view class="modal_content" @click.stop> |
|||
<view class="modal_header"> |
|||
<text class="modal_title">工资详情</text> |
|||
<text class="modal_close" @click="closeDetail">×</text> |
|||
</view> |
|||
|
|||
<view class="modal_body" v-if="salaryDetail"> |
|||
<view class="detail_section"> |
|||
<view class="section_title">基础信息</view> |
|||
<view class="detail_row"> |
|||
<text class="detail_label">工资月份:</text> |
|||
<text class="detail_value">{{ formatMonth(salaryDetail.salary_month) }}</text> |
|||
</view> |
|||
<view class="detail_row"> |
|||
<text class="detail_label">基础工资:</text> |
|||
<text class="detail_value">¥{{ formatMoney(salaryDetail.base_salary) }}</text> |
|||
</view> |
|||
<view class="detail_row"> |
|||
<text class="detail_label">满勤天数:</text> |
|||
<text class="detail_value">{{ salaryDetail.full_attendance_days }}天</text> |
|||
</view> |
|||
<view class="detail_row"> |
|||
<text class="detail_label">出勤天数:</text> |
|||
<text class="detail_value">{{ salaryDetail.attendance }}天</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="detail_section"> |
|||
<view class="section_title">收入明细</view> |
|||
<view class="detail_row"> |
|||
<text class="detail_label">出勤工资:</text> |
|||
<text class="detail_value">¥{{ formatMoney(salaryDetail.work_salary) }}</text> |
|||
</view> |
|||
<view class="detail_row" v-if="salaryDetail.mgr_performance > 0"> |
|||
<text class="detail_label">管理绩效:</text> |
|||
<text class="detail_value">¥{{ formatMoney(salaryDetail.mgr_performance) }}</text> |
|||
</view> |
|||
<view class="detail_row" v-if="salaryDetail.performance_bonus > 0"> |
|||
<text class="detail_label">销售提成:</text> |
|||
<text class="detail_value">¥{{ formatMoney(salaryDetail.performance_bonus) }}</text> |
|||
</view> |
|||
<view class="detail_row" v-if="salaryDetail.other_subsidies > 0"> |
|||
<text class="detail_label">其他补贴:</text> |
|||
<text class="detail_value">¥{{ formatMoney(salaryDetail.other_subsidies) }}</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="detail_section"> |
|||
<view class="section_title">扣除明细</view> |
|||
<view class="detail_row" v-if="salaryDetail.deductions > 0"> |
|||
<text class="detail_label">其他扣款:</text> |
|||
<text class="detail_value text_red">-¥{{ formatMoney(salaryDetail.deductions) }}</text> |
|||
</view> |
|||
<view class="detail_row" v-if="salaryDetail.social_security > 0"> |
|||
<text class="detail_label">社保:</text> |
|||
<text class="detail_value text_red">-¥{{ formatMoney(salaryDetail.social_security) }}</text> |
|||
</view> |
|||
<view class="detail_row" v-if="salaryDetail.individual_income_tax > 0"> |
|||
<text class="detail_label">个税:</text> |
|||
<text class="detail_value text_red">-¥{{ formatMoney(salaryDetail.individual_income_tax) }}</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="detail_section"> |
|||
<view class="section_title">工资汇总</view> |
|||
<view class="detail_row highlight_row"> |
|||
<text class="detail_label">应发工资:</text> |
|||
<text class="detail_value highlight">¥{{ formatMoney(salaryDetail.gross_salary) }}</text> |
|||
</view> |
|||
<view class="detail_row net_salary_row"> |
|||
<text class="detail_label">实发工资:</text> |
|||
<text class="detail_value net_salary">¥{{ formatMoney(salaryDetail.net_salary) }}</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="detail_section" v-if="salaryDetail.remarks"> |
|||
<view class="section_title">备注</view> |
|||
<view class="detail_remarks">{{ salaryDetail.remarks }}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import memberApi from '@/api/member.js'; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
selectedMonth: '', |
|||
salaryList: [], |
|||
loading: false, |
|||
showDetail: false, |
|||
salaryDetail: null, |
|||
} |
|||
}, |
|||
|
|||
onLoad() { |
|||
// 默认查询当月数据 |
|||
const now = new Date(); |
|||
this.selectedMonth = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}`; |
|||
this.loadSalaryList(); |
|||
}, |
|||
|
|||
methods: { |
|||
// 月份选择 |
|||
onMonthChange(e) { |
|||
this.selectedMonth = e.detail.value; |
|||
}, |
|||
|
|||
// 加载工资列表 |
|||
async loadSalaryList() { |
|||
this.loading = true; |
|||
try { |
|||
const params = {}; |
|||
if (this.selectedMonth) { |
|||
params.salary_month = this.selectedMonth; |
|||
} |
|||
|
|||
const res = await memberApi.getSalaryList(params); |
|||
if (res.code === 1) { |
|||
this.salaryList = res.data.data || []; |
|||
} else { |
|||
uni.showToast({ |
|||
title: res.msg || '获取数据失败', |
|||
icon: 'none' |
|||
}); |
|||
} |
|||
} catch (error) { |
|||
console.error('获取工资列表失败:', error); |
|||
uni.showToast({ |
|||
title: '网络错误，请稍后重试', |
|||
icon: 'none' |
|||
}); |
|||
} finally { |
|||
this.loading = false; |
|||
} |
|||
}, |
|||
|
|||
// 查看工资详情 |
|||
async viewSalaryDetail(item) { |
|||
try { |
|||
const res = await memberApi.getSalaryInfo({ id: item.id }); |
|||
if (res.code === 1) { |
|||
this.salaryDetail = res.data; |
|||
this.showDetail = true; |
|||
} else { |
|||
uni.showToast({ |
|||
title: res.msg || '获取详情失败', |
|||
icon: 'none' |
|||
}); |
|||
} |
|||
} catch (error) { |
|||
console.error('获取工资详情失败:', error); |
|||
uni.showToast({ |
|||
title: '网络错误，请稍后重试', |
|||
icon: 'none' |
|||
}); |
|||
} |
|||
}, |
|||
|
|||
// 关闭详情弹窗 |
|||
closeDetail() { |
|||
this.showDetail = false; |
|||
this.salaryDetail = null; |
|||
}, |
|||
|
|||
// 格式化月份显示 |
|||
formatMonth(month) { |
|||
if (!month) return ''; |
|||
return month.substring(0, 7).replace('-', '年') + '月'; |
|||
}, |
|||
|
|||
// 格式化金额 |
|||
formatMoney(amount) { |
|||
if (!amount && amount !== 0) return '0.00'; |
|||
return Number(amount).toFixed(2); |
|||
}, |
|||
|
|||
// 获取状态文字 |
|||
getStatusText(status) { |
|||
switch (status) { |
|||
case 1: return '未发放'; |
|||
case 2: return '已发放'; |
|||
default: return '未知'; |
|||
} |
|||
}, |
|||
|
|||
// 获取状态样式类 |
|||
getStatusClass(status) { |
|||
switch (status) { |
|||
case 1: return 'status_pending'; |
|||
case 2: return 'status_paid'; |
|||
default: return ''; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.main_box { |
|||
background: #292929; |
|||
min-height: 100vh; |
|||
} |
|||
|
|||
.main_section { |
|||
padding: 20rpx; |
|||
padding-bottom: 150rpx; |
|||
} |
|||
|
|||
/* 筛选条件 */ |
|||
.filter_section { |
|||
display: flex; |
|||
align-items: center; |
|||
background: #434544; |
|||
border-radius: 10rpx; |
|||
padding: 20rpx; |
|||
margin-bottom: 20rpx; |
|||
|
|||
.filter_item { |
|||
flex: 1; |
|||
|
|||
.picker_display { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
color: #D7D7D7; |
|||
font-size: 28rpx; |
|||
|
|||
.picker_arrow { |
|||
color: #25a18b; |
|||
font-size: 24rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.filter_btn { |
|||
background: #25a18b; |
|||
color: #fff; |
|||
padding: 15rpx 30rpx; |
|||
border-radius: 8rpx; |
|||
font-size: 26rpx; |
|||
margin-left: 20rpx; |
|||
} |
|||
} |
|||
|
|||
/* 工资条列表 */ |
|||
.salary_list { |
|||
.salary_item { |
|||
background: #434544; |
|||
border-radius: 10rpx; |
|||
padding: 30rpx; |
|||
margin-bottom: 20rpx; |
|||
|
|||
.salary_header { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
margin-bottom: 20rpx; |
|||
padding-bottom: 15rpx; |
|||
border-bottom: 1rpx solid #555; |
|||
|
|||
.salary_month { |
|||
color: #fff; |
|||
font-size: 32rpx; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.salary_status { |
|||
padding: 8rpx 16rpx; |
|||
border-radius: 20rpx; |
|||
font-size: 24rpx; |
|||
|
|||
&.status_pending { |
|||
background: rgba(255, 165, 0, 0.2); |
|||
color: #FFA500; |
|||
} |
|||
|
|||
&.status_paid { |
|||
background: rgba(34, 197, 94, 0.2); |
|||
color: #22c55e; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.salary_content { |
|||
.salary_row { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
margin-bottom: 15rpx; |
|||
|
|||
.label { |
|||
color: #D7D7D7; |
|||
font-size: 26rpx; |
|||
} |
|||
|
|||
.value { |
|||
color: #fff; |
|||
font-size: 28rpx; |
|||
|
|||
&.highlight { |
|||
color: #25a18b; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
&.net_salary { |
|||
color: #22c55e; |
|||
font-weight: bold; |
|||
font-size: 30rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.salary_footer { |
|||
text-align: center; |
|||
margin-top: 20rpx; |
|||
padding-top: 15rpx; |
|||
border-top: 1rpx solid #555; |
|||
|
|||
.view_detail { |
|||
color: #25a18b; |
|||
font-size: 24rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
/* 暂无数据 */ |
|||
.no_data { |
|||
text-align: center; |
|||
padding: 100rpx 0; |
|||
color: #888; |
|||
|
|||
.no_data_icon { |
|||
width: 150rpx; |
|||
height: 150rpx; |
|||
margin-bottom: 30rpx; |
|||
} |
|||
|
|||
.no_data_text { |
|||
font-size: 28rpx; |
|||
} |
|||
} |
|||
|
|||
/* 加载中 */ |
|||
.loading { |
|||
text-align: center; |
|||
padding: 50rpx 0; |
|||
color: #888; |
|||
font-size: 28rpx; |
|||
} |
|||
|
|||
/* 工资详情弹窗 */ |
|||
.salary_modal { |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
background: rgba(0, 0, 0, 0.7); |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
z-index: 1000; |
|||
|
|||
.modal_content { |
|||
background: #434544; |
|||
border-radius: 15rpx; |
|||
width: 90%; |
|||
max-height: 80%; |
|||
overflow: hidden; |
|||
|
|||
.modal_header { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding: 30rpx; |
|||
border-bottom: 1rpx solid #555; |
|||
|
|||
.modal_title { |
|||
color: #fff; |
|||
font-size: 32rpx; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.modal_close { |
|||
color: #888; |
|||
font-size: 40rpx; |
|||
width: 60rpx; |
|||
height: 60rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
} |
|||
|
|||
.modal_body { |
|||
max-height: 60vh; |
|||
overflow-y: auto; |
|||
padding: 30rpx; |
|||
|
|||
.detail_section { |
|||
margin-bottom: 40rpx; |
|||
|
|||
.section_title { |
|||
color: #25a18b; |
|||
font-size: 28rpx; |
|||
font-weight: bold; |
|||
margin-bottom: 20rpx; |
|||
padding-bottom: 10rpx; |
|||
border-bottom: 1rpx solid #555; |
|||
} |
|||
|
|||
.detail_row { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
margin-bottom: 15rpx; |
|||
|
|||
.detail_label { |
|||
color: #D7D7D7; |
|||
font-size: 26rpx; |
|||
} |
|||
|
|||
.detail_value { |
|||
color: #fff; |
|||
font-size: 26rpx; |
|||
|
|||
&.highlight { |
|||
color: #25a18b; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
&.net_salary { |
|||
color: #22c55e; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
&.text_red { |
|||
color: #f56565; |
|||
} |
|||
} |
|||
} |
|||
|
|||
&.highlight_row { |
|||
background: rgba(37, 161, 139, 0.1); |
|||
padding: 15rpx; |
|||
border-radius: 8rpx; |
|||
} |
|||
|
|||
&.net_salary_row { |
|||
background: rgba(34, 197, 94, 0.1); |
|||
padding: 15rpx; |
|||
border-radius: 8rpx; |
|||
} |
|||
|
|||
.detail_remarks { |
|||
background: #555; |
|||
padding: 20rpx; |
|||
border-radius: 8rpx; |
|||
color: #D7D7D7; |
|||
font-size: 26rpx; |
|||
line-height: 1.6; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,241 @@ |
|||
<!--授课统计-详情--> |
|||
<template> |
|||
<view class="main_box"> |
|||
|
|||
<view class="main_section"> |
|||
<view class="section_1"> |
|||
<view class="ul"> |
|||
<view class="li" v-for="(v,k) in sktjlist" :key="k"> |
|||
<view class="title">{{v.month_date}}</view> |
|||
<view class="box"> |
|||
<view class="top"> |
|||
<view class="top_item"> |
|||
<view class="num">{{v.ysks}}</view> |
|||
<view class="explain">月授课数/节</view> |
|||
</view> |
|||
<view class="top_item"> |
|||
<view class="num">{{v.zsbj}}</view> |
|||
<view class="explain">总授班级/个</view> |
|||
</view> |
|||
<view class="top_item"> |
|||
<view class="num">{{v.yfzxy}}</view> |
|||
<view class="explain">月负责学员/名</view> |
|||
</view> |
|||
</view> |
|||
<view class="bottom"> |
|||
月到课率<text>{{v.ydkl}}%</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import memberApi from '@/api/member.js'; |
|||
import AQTabber from "@/components/AQ/AQTabber.vue" |
|||
|
|||
|
|||
export default { |
|||
components: { |
|||
AQTabber, |
|||
}, |
|||
data() { |
|||
return { |
|||
sktjlist:[],//授课统计列表 |
|||
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() { |
|||
}, |
|||
onShow(){ |
|||
this.init() |
|||
}, |
|||
methods: { |
|||
//初始化 |
|||
async init(){ |
|||
await this.getList() |
|||
}, |
|||
|
|||
//获取授课统计 |
|||
async getList(){ |
|||
let res = await memberApi.jlSktj({}) |
|||
if (res.code != 1){ |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
|
|||
this.sktjlist = res.data//授课统计列表 |
|||
|
|||
}, |
|||
|
|||
//选中课程下拉菜单点击事件 |
|||
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){ |
|||
uni.navigateTo({ |
|||
url: '/pages-coach/coach/course/info' |
|||
}) |
|||
}, |
|||
} |
|||
} |
|||
</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: 24rpx; |
|||
.ul{ |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 56rpx; |
|||
.li{ |
|||
.title{ |
|||
color: #fff; |
|||
font-size: 24rpx; |
|||
} |
|||
.box{ |
|||
margin-top: 24rpx; |
|||
padding: 36rpx 32rpx 28rpx 44rpx; |
|||
width: 700rpx; |
|||
border-radius: 14rpx; |
|||
background-color: #fff; |
|||
color: #333333FF; |
|||
font-size: 26rpx; |
|||
.top{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
.top_item{ |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
gap: 12rpx; |
|||
.num{ |
|||
font-size: 56rpx; |
|||
color: #29D3B4; |
|||
} |
|||
.explain{ |
|||
font-size: 24rpx; |
|||
color: #AAAAAA; |
|||
} |
|||
} |
|||
} |
|||
.bottom{ |
|||
margin-top: 34rpx; |
|||
font-size: 24rpx; |
|||
text{ |
|||
margin-left: 15rpx; |
|||
color: #29D3B4; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
|
|||
</style> |
|||
@ -0,0 +1,58 @@ |
|||
<!--设置页--> |
|||
<template> |
|||
<view class="assemble"> |
|||
<view style="height: 30rpx;"></view> |
|||
<view class="option" @click="update_pass()">修改密码</view> |
|||
<view class="option" @click="privacy_agreement(1)">用户协议</view> |
|||
<view class="option" @click="privacy_agreement(2)">隐私策略</view> |
|||
<view class="option">清空缓存</view> |
|||
|
|||
<view style="width:90%;margin: 60rpx auto;"> |
|||
<fui-button background="#29d3b4" @click="loginOut()">退出账号</fui-button> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
methods: { |
|||
//退出登陆 |
|||
loginOut(){ |
|||
this.$util.loginOut() |
|||
}, |
|||
|
|||
privacy_agreement(type){ |
|||
uni.navigateTo({ |
|||
url: '/pages-common/privacy_agreement?type='+type |
|||
}) |
|||
}, |
|||
update_pass(){ |
|||
uni.navigateTo({ |
|||
url: '/pages-coach/coach/my/update_pass' |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.assemble{ |
|||
width: 100%; |
|||
height: 100vh; |
|||
background: #333333; |
|||
} |
|||
.option{ |
|||
margin-bottom: 20rpx; |
|||
background: #404045; |
|||
width: 100%; |
|||
font-size: 28rpx; |
|||
color: #fff; |
|||
line-height: 56rpx; |
|||
padding: 20rpx 0 20rpx 100rpx; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,247 @@ |
|||
<template> |
|||
<view class="dark-theme"> |
|||
<fui-tabs :tabs="tabsList" @change="change" isDot scroll alignLeft class="custom-tabs" :color="'#00d18c'" :selectedColor="'#00d18c'" :background="'#121212'" :itemBackground="'#121212'"></fui-tabs> |
|||
<scroll-view scroll-y :scroll-with-animation="true" @scrolltolower="onReachBottom"> |
|||
<view class="dis_style div_style" v-for="(item,index) in arrayList" :key="index"> |
|||
<view @click="info(item.id)"> |
|||
<view class='color_style'>{{item.title}}</view> |
|||
<view class='color_type_style'>{{getTableType(item.table_type)}}</view> |
|||
</view> |
|||
|
|||
<view> |
|||
<view class='color_date_style'>{{item.create_time}}</view> |
|||
<view class='color_date_style exam-btn' v-if="item.exam_papers_id != 0" @click="goTake(item.exam_papers_id,item.id)">去考试</view> |
|||
</view> |
|||
</view> |
|||
<view v-if="loading" class="loading">加载中...</view> |
|||
<view v-else-if="noMoreData" class="no-more">没有更多数据了</view> |
|||
</scroll-view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import apiRoute from '@/api/apiRoute.js'; |
|||
export default { |
|||
data() { |
|||
return { |
|||
arrayList: [], |
|||
tabsList: [], |
|||
tableTypeName: { |
|||
'1': "课程教学大纲", |
|||
'2': "跳绳教案库", |
|||
'3': "增高教案库", |
|||
'4': "篮球教案库", |
|||
'5': "强化教案库", |
|||
'6': "空中忍者教案库", |
|||
'7': "少儿安防教案库", |
|||
'8': "体能教案库", |
|||
'9': "热身动作库", |
|||
'10': "体能动作库", |
|||
'11': "趣味游戏库", |
|||
'12': "放松动作库", |
|||
'13': "训练内容", |
|||
'14': "训练视频", |
|||
'15': "课后作业", |
|||
'16': "优秀一堂课", |
|||
'17': "空中忍者", |
|||
'18': "篮球动作", |
|||
'19': "跳绳动作", |
|||
'20': "跑酷动作", |
|||
'21': "安防动作", |
|||
'22': "标准化动作", |
|||
'23': "3-6岁体测", |
|||
'24': "7+体测", |
|||
'25': "3-6岁体测讲解—解读", |
|||
'26': "7+岁体测讲解—解读", |
|||
'27': "互动游戏", |
|||
'28': "套圈游戏", |
|||
'29': "鼓励方式" |
|||
}, |
|||
tabsListArr: [], |
|||
searchArr: { |
|||
table_type: undefined, |
|||
page: 1, |
|||
limit: 10 |
|||
}, |
|||
loading: false, |
|||
noMoreData: false, |
|||
initId: undefined |
|||
} |
|||
}, |
|||
onLoad() { |
|||
this.getTabs() |
|||
}, |
|||
methods: { |
|||
getTabs() { |
|||
this.tabsListArr = [] |
|||
this.tabsList = [] |
|||
apiRoute.teachingResearchLookType().then(res => { |
|||
if (res.code == 1) { |
|||
res.data.forEach(item => { |
|||
let arr = { |
|||
value: item, |
|||
lebal: this.tableTypeName[item] |
|||
} |
|||
this.tabsListArr.push(arr) |
|||
this.tabsList.push(this.tableTypeName[item]) |
|||
}) |
|||
if (this.tabsListArr.length > 0) { |
|||
this.initId = this.tabsListArr[0].value |
|||
this.init() |
|||
} |
|||
} |
|||
}) |
|||
}, |
|||
change(e) { |
|||
const item = this.tabsListArr.find(item => item.lebal == e.name); |
|||
const id = item ? item.value : 0 |
|||
this.initId = id |
|||
this.arrayList = [] |
|||
this.searchArr.page = 1 |
|||
this.init() |
|||
}, |
|||
getTableType(text) { |
|||
return this.tableTypeName[text] |
|||
}, |
|||
info(id) { |
|||
uni.navigateTo({ |
|||
url: '/pages-coach/coach/my/teaching_management_info?id=' + id |
|||
}) |
|||
}, |
|||
onReachBottom() { |
|||
if (this.noMoreData || this.loading) return; |
|||
this.searchArr.page += 1 |
|||
this.init(); |
|||
}, |
|||
init(id) { |
|||
this.searchArr.table_type = this.initId |
|||
apiRoute.teachingResearchList(this.searchArr).then(res => { |
|||
this.loading = true |
|||
if (res.code == 1) { |
|||
this.arrayList.push(...res.data.data) |
|||
if(res.last_page <= this.searchArr.page){ |
|||
this.noMoreData = true; |
|||
} |
|||
this.loading = false |
|||
} |
|||
}) |
|||
}, |
|||
goTake(id,zid) { |
|||
uni.navigateTo({ |
|||
url: '/pages-coach/coach/my/gotake_exam?id=' + id + '&zid=' + zid |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.dark-theme { |
|||
background-color: #121212; |
|||
color: #ffffff; |
|||
min-height: 100vh; |
|||
} |
|||
|
|||
.dark-theme .div_style { |
|||
padding: 18rpx 50rpx; |
|||
background-color: #1e1e1e; |
|||
margin-top: 10rpx; |
|||
line-height: 30px; |
|||
border-radius: 8rpx; |
|||
} |
|||
|
|||
.dark-theme .color_style { |
|||
font-size: 30rpx; |
|||
font-weight: bold; |
|||
color: #ffffff; |
|||
} |
|||
|
|||
.dark-theme .color_type_style { |
|||
font-size: 22rpx; |
|||
color: #b0b0b0; |
|||
} |
|||
|
|||
.dark-theme .color_date_style { |
|||
font-size: 22rpx; |
|||
color: #b0b0b0; |
|||
} |
|||
|
|||
.dark-theme .exam-btn { |
|||
color: #7cb9ff; |
|||
} |
|||
|
|||
.dark-theme .loading, |
|||
.dark-theme .no-more { |
|||
color: #b0b0b0; |
|||
text-align: center; |
|||
padding: 20rpx 0; |
|||
} |
|||
|
|||
/* 非暗黑模式样式 */ |
|||
.div_style { |
|||
padding: 18rpx 50rpx; |
|||
background-color: #fff; |
|||
margin-top: 10rpx; |
|||
line-height: 30px; |
|||
} |
|||
|
|||
.dis_style { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
} |
|||
|
|||
.color_style { |
|||
font-size: 30rpx; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.color_type_style { |
|||
font-size: 22rpx; |
|||
} |
|||
|
|||
.color_date_style { |
|||
font-size: 22rpx; |
|||
} |
|||
|
|||
.exam-btn { |
|||
color: blue; |
|||
} |
|||
|
|||
/* 自定义 tab 栏样式 */ |
|||
.custom-tabs { |
|||
/* 确保背景是黑色 */ |
|||
background-color: #121212 !important; |
|||
|
|||
.fui-tabs__item { |
|||
background-color: #121212 !important; |
|||
color: #00d18c !important; |
|||
} |
|||
|
|||
.fui-tabs__item-active { |
|||
color: #00d18c !important; |
|||
} |
|||
|
|||
.fui-tabs__line { |
|||
background-color: #00d18c !important; |
|||
} |
|||
} |
|||
|
|||
/* 全局样式覆盖 - 使用dart-sass语法 */ |
|||
:deep(.fui-tabs__wrap) { |
|||
background-color: #121212 !important; |
|||
} |
|||
|
|||
:deep(.fui-tabs__item) { |
|||
background-color: #121212 !important; |
|||
color: #00d18c !important; |
|||
} |
|||
|
|||
:deep(.fui-tabs__item-active) { |
|||
color: #00d18c !important; |
|||
} |
|||
|
|||
:deep(.fui-tabs__line) { |
|||
background-color: #00d18c !important; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,229 @@ |
|||
<!--修改密码--> |
|||
<template> |
|||
<view> |
|||
<view class="title"> |
|||
<view :class="{'green-text': tset_style === 1}">1.验证旧密码</view> |
|||
<view :class="{'green-text': tset_style === 2}">2.设置新密码</view> |
|||
</view> |
|||
<view :style="{'background-color':'#fff','width':'100%','height':'100vh' }"> |
|||
<view style="width: 95%;height: 30rpx;"></view> |
|||
<view v-if="tset_style == 1"> |
|||
<view class="describe"> |
|||
为保障您的账号安全，修改密码前请填写原密码 |
|||
</view> |
|||
<view style="width: 95%;margin:30rpx auto;"> |
|||
<fui-input borderTop placeholder="请输入原登录密码" v-model="old_password" |
|||
backgroundColor="#f2f2f2"></fui-input> |
|||
</view> |
|||
</view> |
|||
<view v-if="tset_style == 2"> |
|||
<view style="width: 95%;margin:30rpx auto;"> |
|||
<fui-input borderTop placeholder="请设置6-20位新的登录密码" v-model="formData.new_password" @input="input" |
|||
backgroundColor="#f2f2f2"></fui-input> |
|||
</view> |
|||
<view style="width: 95%;margin: auto;"> |
|||
<fui-input borderTop :padding="['20rpx','32rpx']" v-model="formData.new_password_2" placeholder="请再次输入新的登录密码" @input="input" |
|||
backgroundColor="#f2f2f2"> |
|||
</fui-input> |
|||
</view> |
|||
</view> |
|||
<view style="width: 95%;margin:60rpx auto;"> |
|||
<view class="btn_box"> |
|||
<fui-button |
|||
background="#465cff" |
|||
radius="5rpx" |
|||
@click="nextStep(1)" |
|||
v-if="tset_style != 1">上一步 |
|||
</fui-button> |
|||
|
|||
<fui-button background="#00be8c" radius="5rpx" @click="nextStep(2)" v-if="tset_style == 1">下一步</fui-button> |
|||
|
|||
<fui-button background="#00be8c" radius="5rpx" @click="submit" v-if="tset_style == 2">提交</fui-button> |
|||
</view> |
|||
|
|||
|
|||
<view style="width: 95%;margin:60rpx auto;"> |
|||
<fui-button background="#fff" radius="5rpx" @click="forgot" color="#999999" v-if="tset_style == 1">忘记原密码</fui-button> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import apiRoute from '@/api/apiRoute.js'; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
code: '', |
|||
user: '', |
|||
tset_style: 1,//tab栏目|1=验证旧密码页,2=设置新密码页 |
|||
|
|||
old_password:'',//旧密码 |
|||
|
|||
|
|||
formData:{ |
|||
phone:'',//当前登录用户的手机号 |
|||
new_password:'',//新密码 |
|||
new_password_2:'',//二次新密码 |
|||
key_value:'',//修改密码的key_value |
|||
}, |
|||
} |
|||
}, |
|||
onLoad() {}, |
|||
onShow() { |
|||
this.init()//初始化 |
|||
}, |
|||
methods: { |
|||
//初始化 |
|||
async init(){ |
|||
await this.getUserInfo() |
|||
}, |
|||
//获取用户信息 |
|||
async getUserInfo() { |
|||
let res = await apiRoute.getPersonnelInfo({}) |
|||
if (res.code != 1) { |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
this.formData.phone = res.data.phone//用户手机号 |
|||
}, |
|||
|
|||
//上/下一步切换 |
|||
async nextStep(tset_style){ |
|||
//tset_style|1=第一页,2=第二页 |
|||
if(tset_style == 2){ |
|||
if(!this.old_password){ |
|||
uni.showToast({ |
|||
title: '请输入原登录密码', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
//验证旧密码 |
|||
let params = { |
|||
old_password: this.old_password |
|||
} |
|||
//验证旧密码是否正确 |
|||
let res = await apiRoute.common_personnelCheckOldPwd(params) |
|||
if(!res.code){ |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
this.formData.key_value = res.data.key_value |
|||
} |
|||
this.tset_style = Number(tset_style) |
|||
}, |
|||
//忘记密码 |
|||
forgot() { |
|||
uni.navigateTo({ |
|||
url: '/pages/student/login/forgot' |
|||
}) |
|||
}, |
|||
|
|||
//提交 |
|||
async submit() { |
|||
//验证数据 |
|||
if (!this.formData.new_password) { |
|||
uni.showToast({ |
|||
title: '请输入新密码', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
|
|||
if (this.formData.new_password.length < 6 || this.formData.new_password.length > 20) { |
|||
uni.showToast({ |
|||
title: '新密码长度为6-20位', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
|
|||
if (!this.formData.new_password) { |
|||
uni.showToast({ |
|||
title: '请输入新密码', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
//验证两次密码是否一致 |
|||
if (this.formData.new_password != this.formData.new_password_2) { |
|||
uni.showToast({ |
|||
title: '两次密码不一致', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
|
|||
let res = await apiRoute.common_personnelEdidPassword(this.formData) |
|||
if(!res.code){ |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: 'success' |
|||
}) |
|||
//延迟1s执行 |
|||
setTimeout(() => { |
|||
//跳转页面-个人中心 |
|||
//关闭当前页跳转新页面 |
|||
uni.redirectTo({ |
|||
url: `/pages-coach/coach/my/index` |
|||
}) |
|||
}, 1000) |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
page { |
|||
font-weight: normal; |
|||
} |
|||
|
|||
.fui-section__title { |
|||
margin-left: 32rpx; |
|||
} |
|||
|
|||
.fui-left__icon { |
|||
padding-right: 24rpx; |
|||
} |
|||
|
|||
.title { |
|||
display: flex; |
|||
justify-content: space-around; |
|||
align-items: center; |
|||
height: 100rpx; |
|||
width: 100%; |
|||
background-color: #fff; |
|||
font-size: 26rpx; |
|||
border: 4rpx #f5f5f5 solid; |
|||
} |
|||
|
|||
.green-text{ |
|||
color: #36d6b9; |
|||
} |
|||
|
|||
.describe{ |
|||
color: #999999; |
|||
padding-left: 30rpx; |
|||
} |
|||
|
|||
.btn_box{ |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 40rpx; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,682 @@ |
|||
<template> |
|||
<view class="add-schedule-container"> |
|||
<view class="form-container"> |
|||
<fui-form> |
|||
<!-- 课程选择 --> |
|||
<fui-form-item label="课程" required> |
|||
<view class="selector-input" @click="showCoursePicker = true"> |
|||
<text>{{ selectedCourse ? selectedCourse.course_name : '请选择课程' }}</text> |
|||
<fui-icon name="arrowdown" :size="32" color="#CCCCCC"></fui-icon> |
|||
</view> |
|||
<single-picker |
|||
:show="showCoursePicker" |
|||
:data="courseOptions" |
|||
valueKey="id" |
|||
textKey="course_name" |
|||
title="选择课程" |
|||
@change="onCourseSelect" |
|||
@cancel="showCoursePicker = false" |
|||
@update:show="showCoursePicker = $event" |
|||
></single-picker> |
|||
</fui-form-item> |
|||
|
|||
<!-- 班级选择 --> |
|||
<fui-form-item label="班级"> |
|||
<view class="selector-input" @click="showClassPicker = true"> |
|||
<text>{{ selectedClass ? selectedClass.class_name : '请选择班级（可选）' }}</text> |
|||
<fui-icon name="arrowdown" :size="32" color="#CCCCCC"></fui-icon> |
|||
</view> |
|||
<single-picker |
|||
:show="showClassPicker" |
|||
:data="classOptions" |
|||
valueKey="id" |
|||
textKey="class_name" |
|||
title="选择班级" |
|||
@change="onClassSelect" |
|||
@cancel="showClassPicker = false" |
|||
@update:show="showClassPicker = $event" |
|||
></single-picker> |
|||
</fui-form-item> |
|||
|
|||
<!-- 教练选择 --> |
|||
<fui-form-item label="授课教练" required> |
|||
<view class="selector-input" @click="showCoachPicker = true"> |
|||
<text>{{ selectedCoach ? selectedCoach.name : '请选择教练' }}</text> |
|||
<fui-icon name="arrowdown" :size="32" color="#CCCCCC"></fui-icon> |
|||
</view> |
|||
<single-picker |
|||
:show="showCoachPicker" |
|||
:data="coachOptions" |
|||
valueKey="id" |
|||
textKey="name" |
|||
title="选择教练" |
|||
@change="onCoachSelect" |
|||
@cancel="showCoachPicker = false" |
|||
@update:show="showCoachPicker = $event" |
|||
></single-picker> |
|||
</fui-form-item> |
|||
|
|||
<!-- 场地选择 --> |
|||
<fui-form-item label="上课场地" required> |
|||
<view class="selector-input" @click="showVenuePicker = true"> |
|||
<text>{{ selectedVenue ? selectedVenue.venue_name : '请选择场地' }}</text> |
|||
<fui-icon name="arrowdown" :size="32" color="#CCCCCC"></fui-icon> |
|||
</view> |
|||
<single-picker |
|||
:show="showVenuePicker" |
|||
:data="venueOptions" |
|||
valueKey="id" |
|||
textKey="venue_name" |
|||
title="选择场地" |
|||
@change="onVenueSelect" |
|||
@cancel="showVenuePicker = false" |
|||
@update:show="showVenuePicker = $event" |
|||
></single-picker> |
|||
</fui-form-item> |
|||
|
|||
<!-- 日期选择 --> |
|||
<fui-form-item label="上课日期" required> |
|||
<view class="selector-input" @click="showDatePicker = true"> |
|||
<text>{{ formData.course_date || '请选择日期' }}</text> |
|||
<fui-icon name="calendar" :size="32" color="#CCCCCC"></fui-icon> |
|||
</view> |
|||
<fui-date-picker |
|||
:show="showDatePicker" |
|||
@confirm="onDateSelect" |
|||
@cancel="showDatePicker = false" |
|||
:value="formData.course_date" |
|||
></fui-date-picker> |
|||
</fui-form-item> |
|||
|
|||
<!-- 时间选择 --> |
|||
<fui-form-item label="上课时间" required> |
|||
<view class="selector-input" @click="showTimePicker = true"> |
|||
<text>{{ formData.time_slot || '请选择时间段' }}</text> |
|||
<fui-icon name="time" :size="32" color="#CCCCCC"></fui-icon> |
|||
</view> |
|||
<single-picker |
|||
:show="showTimePicker" |
|||
:data="timeSlotOptions" |
|||
valueKey="value" |
|||
textKey="text" |
|||
title="选择时间" |
|||
@change="onTimeSelect" |
|||
@cancel="showTimePicker = false" |
|||
@update:show="showTimePicker = $event" |
|||
></single-picker> |
|||
</fui-form-item> |
|||
|
|||
<!-- 容量设置 --> |
|||
<fui-form-item label="课程容量" required> |
|||
<view class="capacity-container"> |
|||
<text class="capacity-text">{{ formData.available_capacity || '0' }}</text> |
|||
<text class="capacity-hint">(根据场地自动设置)</text> |
|||
</view> |
|||
</fui-form-item> |
|||
|
|||
<!-- 备注信息 --> |
|||
<fui-form-item label="备注"> |
|||
<fui-textarea |
|||
:value="formData.remark" |
|||
placeholder="请输入备注信息（可选）" |
|||
@input="formData.remark = $event" |
|||
maxlength="200" |
|||
></fui-textarea> |
|||
</fui-form-item> |
|||
</fui-form> |
|||
|
|||
<!-- 提交按钮 --> |
|||
<view class="btn-container"> |
|||
<fui-button type="primary" @click="submitForm" :loading="submitting">创建课程安排</fui-button> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import api from '@/api/apiRoute.js'; |
|||
import SinglePicker from '@/components/custom-picker/single-picker.vue'; |
|||
|
|||
export default { |
|||
components: { |
|||
SinglePicker |
|||
}, |
|||
data() { |
|||
return { |
|||
// 表单数据 |
|||
formData: { |
|||
course_id: '', |
|||
class_id: '', |
|||
coach_id: '', |
|||
venue_id: '', |
|||
course_date: '', |
|||
time_slot: '', |
|||
available_capacity: '', |
|||
remark: '' |
|||
}, |
|||
|
|||
// 选择器数据 |
|||
showCoursePicker: false, |
|||
showClassPicker: false, |
|||
showCoachPicker: false, |
|||
showVenuePicker: false, |
|||
showDatePicker: false, |
|||
showTimePicker: false, |
|||
|
|||
// 选项数据 |
|||
courseOptions: [], |
|||
classOptions: [], |
|||
coachOptions: [], |
|||
venueOptions: [], |
|||
timeSlotOptions: [], |
|||
|
|||
// 选中的数据对象 |
|||
selectedCourse: null, |
|||
selectedClass: null, |
|||
selectedCoach: null, |
|||
selectedVenue: null, |
|||
|
|||
// 状态标记 |
|||
submitting: false, |
|||
|
|||
// 预填充数据 |
|||
prefillDate: '', |
|||
prefillTime: '', |
|||
prefillTimeSlot: '' |
|||
}; |
|||
}, |
|||
|
|||
onLoad(options) { |
|||
// 从路由参数获取预填充数据 |
|||
if (options.date) { |
|||
this.prefillDate = options.date; |
|||
this.formData.course_date = options.date; |
|||
} |
|||
|
|||
if (options.time) { |
|||
this.prefillTime = options.time; |
|||
} |
|||
|
|||
if (options.time_slot) { |
|||
this.prefillTimeSlot = options.time_slot; |
|||
this.formData.time_slot = options.time_slot; |
|||
} |
|||
|
|||
// 加载初始数据 |
|||
this.loadFilterOptions(); |
|||
}, |
|||
|
|||
methods: { |
|||
// 返回上一页 |
|||
goBack() { |
|||
uni.navigateBack(); |
|||
}, |
|||
|
|||
// 加载选项数据 |
|||
async loadFilterOptions() { |
|||
uni.showLoading({ |
|||
title: '加载数据中...' |
|||
}); |
|||
|
|||
try { |
|||
// 并行加载所有选项数据 |
|||
const [courseRes, classRes, coachRes, venueRes] = await Promise.all([ |
|||
api.getCourseListForSchedule(), |
|||
api.getClassListForSchedule(), |
|||
api.getCoachListForSchedule(), |
|||
api.getVenueListForSchedule() |
|||
]); |
|||
|
|||
// 设置课程选项 |
|||
if (courseRes.code === 1) { |
|||
this.courseOptions = courseRes.data || []; |
|||
} |
|||
|
|||
// 设置班级选项 |
|||
if (classRes.code === 1) { |
|||
this.classOptions = classRes.data || []; |
|||
} |
|||
|
|||
// 设置教练选项 |
|||
if (coachRes.code === 1) { |
|||
this.coachOptions = coachRes.data || []; |
|||
} |
|||
|
|||
// 设置场地选项 |
|||
if (venueRes.code === 1) { |
|||
this.venueOptions = venueRes.data || []; |
|||
} |
|||
|
|||
// 如果有预填充时间段，设置选中的时间段 |
|||
if (this.prefillTimeSlot) { |
|||
this.formData.time_slot = this.prefillTimeSlot; |
|||
} |
|||
|
|||
console.log('加载的数据:', { |
|||
courses: this.courseOptions.length, |
|||
classes: this.classOptions.length, |
|||
coaches: this.coachOptions.length, |
|||
venues: this.venueOptions.length |
|||
}); |
|||
|
|||
// 检查是否有必要的数据 |
|||
if (this.courseOptions.length === 0) { |
|||
uni.showToast({ |
|||
title: '暂无可用课程', |
|||
icon: 'none' |
|||
}); |
|||
} |
|||
|
|||
if (this.coachOptions.length === 0) { |
|||
uni.showToast({ |
|||
title: '暂无可用教练', |
|||
icon: 'none' |
|||
}); |
|||
} |
|||
|
|||
if (this.venueOptions.length === 0) { |
|||
uni.showToast({ |
|||
title: '暂无可用场地', |
|||
icon: 'none' |
|||
}); |
|||
} |
|||
|
|||
} catch (error) { |
|||
console.error('加载筛选选项失败:', error); |
|||
|
|||
// 提供更详细的错误信息 |
|||
let errorMsg = '加载数据失败'; |
|||
if (error.response) { |
|||
errorMsg = `服务器错误: ${error.response.status}`; |
|||
} else if (error.request) { |
|||
errorMsg = '网络连接失败，请检查网络'; |
|||
} else { |
|||
errorMsg = error.message || '未知错误'; |
|||
} |
|||
|
|||
uni.showToast({ |
|||
title: errorMsg, |
|||
icon: 'none', |
|||
duration: 3000 |
|||
}); |
|||
} finally { |
|||
uni.hideLoading(); |
|||
} |
|||
}, |
|||
|
|||
// 生成时间段选项 |
|||
generateTimeSlotOptions() { |
|||
const timeSlots = []; |
|||
|
|||
// 早上时间段 |
|||
for (let hour = 8; hour < 12; hour++) { |
|||
const startHour = hour.toString().padStart(2, '0'); |
|||
const endHour = (hour + 1).toString().padStart(2, '0'); |
|||
timeSlots.push({ |
|||
value: `${startHour}:00-${endHour}:00`, |
|||
text: `${startHour}:00-${endHour}:00` |
|||
}); |
|||
} |
|||
|
|||
// 下午时间段 |
|||
for (let hour = 12; hour < 18; hour++) { |
|||
const startHour = hour.toString().padStart(2, '0'); |
|||
const endHour = (hour + 1).toString().padStart(2, '0'); |
|||
timeSlots.push({ |
|||
value: `${startHour}:00-${endHour}:00`, |
|||
text: `${startHour}:00-${endHour}:00` |
|||
}); |
|||
} |
|||
|
|||
// 晚上时间段 |
|||
for (let hour = 18; hour < 22; hour++) { |
|||
const startHour = hour.toString().padStart(2, '0'); |
|||
const endHour = (hour + 1).toString().padStart(2, '0'); |
|||
timeSlots.push({ |
|||
value: `${startHour}:00-${endHour}:00`, |
|||
text: `${startHour}:00-${endHour}:00` |
|||
}); |
|||
} |
|||
|
|||
this.timeSlotOptions = timeSlots; |
|||
}, |
|||
|
|||
// 动态加载场地可用时间段 |
|||
async loadTimeSlots() { |
|||
if (!this.formData.venue_id || !this.formData.course_date) { |
|||
return; |
|||
} |
|||
|
|||
try { |
|||
const res = await api.getVenueTimeSlots({ |
|||
venue_id: this.formData.venue_id, |
|||
date: this.formData.course_date |
|||
}); |
|||
|
|||
if (res.code === 1) { |
|||
// 转换API返回的时间段格式为选择器需要的格式 |
|||
this.timeSlotOptions = res.data.map(slot => ({ |
|||
value: slot.time_slot, |
|||
text: slot.time_slot |
|||
})); |
|||
|
|||
console.log('可用时间段:', this.timeSlotOptions); |
|||
} else { |
|||
// 如果API失败，则使用默认时间段 |
|||
this.generateTimeSlotOptions(); |
|||
uni.showToast({ |
|||
title: res.msg || '获取可用时间段失败，使用默认时间段', |
|||
icon: 'none' |
|||
}); |
|||
} |
|||
} catch (error) { |
|||
console.error('加载时间段失败:', error); |
|||
// 如果API失败，则使用默认时间段 |
|||
this.generateTimeSlotOptions(); |
|||
|
|||
let errorMsg = '获取可用时间段失败，使用默认时间段'; |
|||
if (error.response && error.response.status === 404) { |
|||
errorMsg = '该场地暂无可用时间段'; |
|||
} else if (error.request) { |
|||
errorMsg = '网络连接失败，使用默认时间段'; |
|||
} |
|||
|
|||
uni.showToast({ |
|||
title: errorMsg, |
|||
icon: 'none', |
|||
duration: 2000 |
|||
}); |
|||
} |
|||
}, |
|||
|
|||
// 选择器处理方法 |
|||
onCourseSelect(e) { |
|||
console.log('onCourseSelect', e); |
|||
if (e && e.item) { |
|||
this.selectedCourse = e.item; |
|||
this.formData.course_id = e.value; |
|||
} |
|||
}, |
|||
|
|||
onClassSelect(e) { |
|||
console.log('onClassSelect', e); |
|||
if (e && e.item) { |
|||
this.selectedClass = e.item; |
|||
this.formData.class_id = e.value; |
|||
} else { |
|||
this.selectedClass = null; |
|||
this.formData.class_id = ''; |
|||
} |
|||
}, |
|||
|
|||
onCoachSelect(e) { |
|||
console.log('onCoachSelect', e); |
|||
if (e && e.item) { |
|||
this.selectedCoach = e.item; |
|||
this.formData.coach_id = e.value; |
|||
} |
|||
}, |
|||
|
|||
onVenueSelect(e) { |
|||
console.log('onVenueSelect', e); |
|||
if (e && e.item) { |
|||
this.selectedVenue = e.item; |
|||
this.formData.venue_id = e.value; |
|||
|
|||
// 设置容量为场地容量，如果没有场地容量则设为0 |
|||
this.formData.available_capacity = this.selectedVenue.capacity || 0; |
|||
|
|||
// 如果已选择日期，则重新加载时间段 |
|||
if (this.formData.course_date) { |
|||
this.loadTimeSlots(); |
|||
} |
|||
} else { |
|||
// 如果未选择场地，容量设为0 |
|||
this.formData.available_capacity = 0; |
|||
} |
|||
}, |
|||
|
|||
onDateSelect(e) { |
|||
this.formData.course_date = e.result; |
|||
this.showDatePicker = false; |
|||
|
|||
// 如果已选择场地，则重新加载时间段 |
|||
if (this.formData.venue_id) { |
|||
this.loadTimeSlots(); |
|||
} |
|||
}, |
|||
|
|||
onTimeSelect(e) { |
|||
console.log('onTimeSelect', e); |
|||
if (e && e.item) { |
|||
this.formData.time_slot = e.value; |
|||
} |
|||
}, |
|||
|
|||
// 检查教练时间冲突 |
|||
async checkCoachTimeConflict() { |
|||
if (!this.formData.coach_id || !this.formData.course_date || !this.formData.time_slot) { |
|||
return true; // 如果信息不完整，无需检查 |
|||
} |
|||
|
|||
try { |
|||
const res = await api.checkCoachConflict({ |
|||
coach_id: this.formData.coach_id, |
|||
date: this.formData.course_date, |
|||
time_slot: this.formData.time_slot, |
|||
exclude_schedule_id: this.formData.id || 0 // 如果是编辑则排除当前课程 |
|||
}); |
|||
|
|||
if (res.code === 1) { |
|||
if (res.data.has_conflict) { |
|||
uni.showModal({ |
|||
title: '时间冲突提示', |
|||
content: `教练“${this.selectedCoach.name}”在选择的时间段已有其他课程安排，是否仍要继续？`, |
|||
confirmText: '继续添加', |
|||
cancelText: '重新选择', |
|||
success: (modalRes) => { |
|||
if (modalRes.confirm) { |
|||
this.submitForm(true); // 强制继续提交 |
|||
} |
|||
} |
|||
}); |
|||
return false; |
|||
} |
|||
} |
|||
return true; |
|||
} catch (error) { |
|||
console.error('检查教练时间冲突失败:', error); |
|||
return true; // 出错时允许继续，不阻止提交 |
|||
} |
|||
}, |
|||
|
|||
// 表单验证 |
|||
validateForm() { |
|||
if (!this.formData.course_id) { |
|||
uni.showToast({ |
|||
title: '请选择课程', |
|||
icon: 'none' |
|||
}); |
|||
return false; |
|||
} |
|||
|
|||
if (!this.formData.coach_id) { |
|||
uni.showToast({ |
|||
title: '请选择授课教练', |
|||
icon: 'none' |
|||
}); |
|||
return false; |
|||
} |
|||
|
|||
if (!this.formData.venue_id) { |
|||
uni.showToast({ |
|||
title: '请选择上课场地', |
|||
icon: 'none' |
|||
}); |
|||
return false; |
|||
} |
|||
|
|||
if (!this.formData.course_date) { |
|||
uni.showToast({ |
|||
title: '请选择上课日期', |
|||
icon: 'none' |
|||
}); |
|||
return false; |
|||
} |
|||
|
|||
if (!this.formData.time_slot) { |
|||
uni.showToast({ |
|||
title: '请选择上课时间', |
|||
icon: 'none' |
|||
}); |
|||
return false; |
|||
} |
|||
|
|||
return true; |
|||
}, |
|||
|
|||
// 提交表单 |
|||
async submitForm(ignoreConflict = false) { |
|||
if (!this.validateForm()) { |
|||
return; |
|||
} |
|||
|
|||
// 如果未忽略冲突检查，先检查教练时间冲突 |
|||
if (!ignoreConflict) { |
|||
const noConflict = await this.checkCoachTimeConflict(); |
|||
if (!noConflict) { |
|||
return; // 如果有冲突且用户未选择继续，停止提交 |
|||
} |
|||
} |
|||
|
|||
this.submitting = true; |
|||
|
|||
try { |
|||
// 准备提交的数据，确保字段名与API接口匹配 |
|||
const submitData = { |
|||
campus_id: 1, // 默认校区ID，实际项目中应从用户信息获取 |
|||
venue_id: this.formData.venue_id, |
|||
course_date: this.formData.course_date, |
|||
time_slot: this.formData.time_slot, |
|||
course_id: this.formData.course_id, |
|||
coach_id: this.formData.coach_id, |
|||
available_capacity: parseInt(this.formData.available_capacity), |
|||
class_id: this.formData.class_id || 0, // 可选字段 |
|||
remarks: this.formData.remark || '', // 字段名转换 |
|||
created_by: 'manual' |
|||
}; |
|||
|
|||
console.log('提交数据:', submitData); |
|||
|
|||
const res = await api.createCourseSchedule(submitData); |
|||
|
|||
if (res.code === 1) { |
|||
uni.showToast({ |
|||
title: '创建成功', |
|||
icon: 'success' |
|||
}); |
|||
|
|||
// 延迟返回，让用户看到成功提示 |
|||
setTimeout(() => { |
|||
// 返回上一页并发送刷新信号 |
|||
const pages = getCurrentPages(); |
|||
const prevPage = pages[pages.length - 2]; |
|||
if (prevPage && prevPage.$vm && prevPage.$vm.loadScheduleList) { |
|||
// 返回并传递刷新信号 |
|||
uni.navigateBack({ |
|||
success: function() { |
|||
prevPage.$vm.loadScheduleList(); |
|||
} |
|||
}); |
|||
} else { |
|||
uni.navigateBack(); |
|||
} |
|||
}, 1500); |
|||
} else { |
|||
uni.showToast({ |
|||
title: res.msg || '创建失败', |
|||
icon: 'none' |
|||
}); |
|||
} |
|||
} catch (error) { |
|||
console.error('创建课程安排失败:', error); |
|||
|
|||
// 提供更详细的错误信息 |
|||
let errorMsg = '创建失败，请重试'; |
|||
if (error.response) { |
|||
if (error.response.status === 401) { |
|||
errorMsg = '登录已过期，请重新登录'; |
|||
} else if (error.response.status === 403) { |
|||
errorMsg = '没有权限执行此操作'; |
|||
} else if (error.response.status >= 500) { |
|||
errorMsg = '服务器内部错误，请联系管理员'; |
|||
} else { |
|||
errorMsg = `请求失败: ${error.response.status}`; |
|||
} |
|||
} else if (error.request) { |
|||
errorMsg = '网络连接失败，请检查网络后重试'; |
|||
} else { |
|||
errorMsg = error.message || '创建失败，请重试'; |
|||
} |
|||
|
|||
uni.showToast({ |
|||
title: errorMsg, |
|||
icon: 'none', |
|||
duration: 3000 |
|||
}); |
|||
} finally { |
|||
this.submitting = false; |
|||
} |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.add-schedule-container { |
|||
min-height: 100vh; |
|||
background-color: #18181c; |
|||
} |
|||
|
|||
.form-container { |
|||
padding: 30rpx; |
|||
} |
|||
|
|||
.selector-input { |
|||
height: 80rpx; |
|||
background-color: #23232a; |
|||
border-radius: 8rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
padding: 0 24rpx; |
|||
font-size: 28rpx; |
|||
color: #fff; |
|||
} |
|||
|
|||
.capacity-container { |
|||
height: 80rpx; |
|||
background-color: #23232a; |
|||
border-radius: 8rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
padding: 0 24rpx; |
|||
font-size: 28rpx; |
|||
} |
|||
|
|||
.capacity-text { |
|||
color: #fff; |
|||
font-size: 28rpx; |
|||
} |
|||
|
|||
.capacity-hint { |
|||
color: #999999; |
|||
font-size: 24rpx; |
|||
margin-left: 16rpx; |
|||
} |
|||
|
|||
.btn-container { |
|||
margin-top: 60rpx; |
|||
padding: 0 30rpx; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,583 @@ |
|||
<template> |
|||
<view class="adjust-course-container"> |
|||
<view class="form-container"> |
|||
<view v-if="loading" class="loading-container"> |
|||
<fui-loading></fui-loading> |
|||
<text class="loading-text">加载中...</text> |
|||
</view> |
|||
|
|||
<fui-form v-else> |
|||
<!-- 课程信息 --> |
|||
<view class="section-title">当前课程信息</view> |
|||
<view class="course-info-card"> |
|||
<view class="info-row"> |
|||
<text class="info-label">课程名称：</text> |
|||
<text class="info-value">{{ scheduleInfo.course_name }}</text> |
|||
</view> |
|||
<view class="info-row"> |
|||
<text class="info-label">上课日期：</text> |
|||
<text class="info-value">{{ scheduleInfo.course_date }}</text> |
|||
</view> |
|||
<view class="info-row"> |
|||
<text class="info-label">上课时间：</text> |
|||
<text class="info-value">{{ scheduleInfo.time_slot }}</text> |
|||
</view> |
|||
<view class="info-row"> |
|||
<text class="info-label">授课教练：</text> |
|||
<text class="info-value">{{ scheduleInfo.coach_name }}</text> |
|||
</view> |
|||
<view class="info-row"> |
|||
<text class="info-label">上课场地：</text> |
|||
<text class="info-value">{{ scheduleInfo.venue_name }}</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="section-title">调整后信息</view> |
|||
|
|||
<!-- 教练选择 --> |
|||
<fui-form-item label="授课教练"> |
|||
<picker |
|||
:value="coachPickerIndex" |
|||
:range="coachOptions" |
|||
:range-key="'name'" |
|||
@change="onCoachSelect" |
|||
> |
|||
<view class="selector-input"> |
|||
<text>{{ selectedCoach ? selectedCoach.name : scheduleInfo.coach_name }}</text> |
|||
<fui-icon name="arrowdown" :size="32" color="#CCCCCC"></fui-icon> |
|||
</view> |
|||
</picker> |
|||
</fui-form-item> |
|||
|
|||
<!-- 场地选择 --> |
|||
<fui-form-item label="上课场地"> |
|||
<picker |
|||
:value="venuePickerIndex" |
|||
:range="venueOptions" |
|||
:range-key="'venue_name'" |
|||
@change="onVenueSelect" |
|||
> |
|||
<view class="selector-input"> |
|||
<text>{{ selectedVenue ? selectedVenue.venue_name : scheduleInfo.venue_name }}</text> |
|||
<fui-icon name="arrowdown" :size="32" color="#CCCCCC"></fui-icon> |
|||
</view> |
|||
</picker> |
|||
</fui-form-item> |
|||
|
|||
<!-- 日期选择 --> |
|||
<fui-form-item label="上课日期"> |
|||
<picker |
|||
mode="date" |
|||
:value="formData.course_date || scheduleInfo.course_date || getCurrentDate()" |
|||
:start="getMinDate()" |
|||
:end="getMaxDate()" |
|||
@change="onDateSelect" |
|||
> |
|||
<view class="selector-input"> |
|||
<text>{{ formData.course_date || scheduleInfo.course_date }}</text> |
|||
<fui-icon name="calendar" :size="32" color="#CCCCCC"></fui-icon> |
|||
</view> |
|||
</picker> |
|||
</fui-form-item> |
|||
|
|||
<!-- 时间选择 --> |
|||
<fui-form-item label="上课时间"> |
|||
<picker |
|||
:value="timePickerIndex" |
|||
:range="timeSlotOptions" |
|||
:range-key="'text'" |
|||
@change="onTimeSelect" |
|||
> |
|||
<view class="selector-input"> |
|||
<text>{{ formData.time_slot || scheduleInfo.time_slot }}</text> |
|||
<fui-icon name="time" :size="32" color="#CCCCCC"></fui-icon> |
|||
</view> |
|||
</picker> |
|||
</fui-form-item> |
|||
|
|||
<!-- 容量设置 --> |
|||
<fui-form-item label="课程容量"> |
|||
<fui-input |
|||
type="number" |
|||
:value="formData.available_capacity || scheduleInfo.available_capacity" |
|||
placeholder="请输入课程容量" |
|||
@input="formData.available_capacity = $event" |
|||
></fui-input> |
|||
</fui-form-item> |
|||
|
|||
|
|||
<!-- 提交按钮 --> |
|||
<view class="btn-container"> |
|||
<fui-button type="primary" @click="submitForm" :loading="submitting">确认调整</fui-button> |
|||
</view> |
|||
</fui-form> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import api from '@/api/apiRoute.js'; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
// 状态标记 |
|||
loading: true, |
|||
submitting: false, |
|||
|
|||
// 课程ID |
|||
scheduleId: null, |
|||
|
|||
// 课程信息 |
|||
scheduleInfo: {}, |
|||
|
|||
// 表单数据 |
|||
formData: { |
|||
schedule_id: '', |
|||
coach_id: '', |
|||
venue_id: '', |
|||
course_date: '', |
|||
time_slot: '', |
|||
available_capacity: '' |
|||
}, |
|||
|
|||
// 移除不再需要的showDatePicker |
|||
|
|||
// 选项数据 |
|||
coachOptions: [], |
|||
venueOptions: [], |
|||
timeSlotOptions: [], |
|||
|
|||
// 选中的数据对象 |
|||
selectedCoach: null, |
|||
selectedVenue: null, |
|||
|
|||
// picker索引 |
|||
coachPickerIndex: 0, |
|||
venuePickerIndex: 0, |
|||
timePickerIndex: 0 |
|||
}; |
|||
}, |
|||
|
|||
onLoad(options) { |
|||
if (options.id) { |
|||
this.scheduleId = options.id; |
|||
this.formData.schedule_id = options.id; |
|||
this.loadScheduleInfo(); |
|||
this.loadFilterOptions(); |
|||
} else { |
|||
uni.showToast({ |
|||
title: '参数错误', |
|||
icon: 'none' |
|||
}); |
|||
setTimeout(() => { |
|||
uni.navigateBack(); |
|||
}, 1500); |
|||
} |
|||
}, |
|||
|
|||
methods: { |
|||
// 返回上一页 |
|||
goBack() { |
|||
uni.navigateBack(); |
|||
}, |
|||
|
|||
// 加载课程安排信息 |
|||
async loadScheduleInfo() { |
|||
try { |
|||
const res = await api.getCourseScheduleInfo({ schedule_id: this.scheduleId }); |
|||
|
|||
if (res.code === 1) { |
|||
this.scheduleInfo = res.data; |
|||
|
|||
// 初始化表单数据 |
|||
this.formData.coach_id = this.scheduleInfo.coach_id; |
|||
this.formData.venue_id = this.scheduleInfo.venue_id; |
|||
this.formData.course_date = this.scheduleInfo.course_date; |
|||
this.formData.time_slot = this.scheduleInfo.time_slot; |
|||
this.formData.available_capacity = this.scheduleInfo.available_capacity; |
|||
} else { |
|||
uni.showToast({ |
|||
title: res.msg || '获取课程安排信息失败', |
|||
icon: 'none' |
|||
}); |
|||
} |
|||
} catch (error) { |
|||
console.error('获取课程安排信息失败:', error); |
|||
uni.showToast({ |
|||
title: '获取课程安排信息失败', |
|||
icon: 'none' |
|||
}); |
|||
} |
|||
}, |
|||
|
|||
// 加载选项数据 |
|||
async loadFilterOptions() { |
|||
try { |
|||
const res = await api.getCourseScheduleFilterOptions(); |
|||
|
|||
if (res.code === 1) { |
|||
// 设置教练选项 |
|||
this.coachOptions = res.data.coaches || []; |
|||
|
|||
// 设置场地选项 |
|||
this.venueOptions = res.data.venues || []; |
|||
|
|||
// 生成时间段选项 |
|||
this.generateTimeSlotOptions(); |
|||
|
|||
// 找到当前选中的教练和场地 |
|||
this.findSelectedOptions(); |
|||
} else { |
|||
uni.showToast({ |
|||
title: res.msg || '加载筛选选项失败', |
|||
icon: 'none' |
|||
}); |
|||
} |
|||
} catch (error) { |
|||
console.error('加载筛选选项失败:', error); |
|||
uni.showToast({ |
|||
title: '加载筛选选项失败', |
|||
icon: 'none' |
|||
}); |
|||
} finally { |
|||
this.loading = false; |
|||
} |
|||
}, |
|||
|
|||
// 查找当前选中的选项 |
|||
findSelectedOptions() { |
|||
// 查找当前教练 |
|||
if (this.scheduleInfo.coach_id) { |
|||
this.selectedCoach = this.coachOptions.find(coach => coach.id === this.scheduleInfo.coach_id); |
|||
this.coachPickerIndex = this.coachOptions.findIndex(coach => coach.id === this.scheduleInfo.coach_id); |
|||
if (this.coachPickerIndex === -1) this.coachPickerIndex = 0; |
|||
} |
|||
|
|||
// 查找当前场地 |
|||
if (this.scheduleInfo.venue_id) { |
|||
this.selectedVenue = this.venueOptions.find(venue => venue.id === this.scheduleInfo.venue_id); |
|||
this.venuePickerIndex = this.venueOptions.findIndex(venue => venue.id === this.scheduleInfo.venue_id); |
|||
if (this.venuePickerIndex === -1) this.venuePickerIndex = 0; |
|||
} |
|||
|
|||
// 查找当前时间段 |
|||
if (this.scheduleInfo.time_slot && this.timeSlotOptions.length > 0) { |
|||
this.timePickerIndex = this.timeSlotOptions.findIndex(time => time.value === this.scheduleInfo.time_slot); |
|||
if (this.timePickerIndex === -1) this.timePickerIndex = 0; |
|||
} |
|||
}, |
|||
|
|||
// 生成时间段选项（保留原有方法作为备用） |
|||
generateTimeSlotOptions() { |
|||
// 使用新的默认时间选项生成方法 |
|||
this.generateDefaultTimeOptions(); |
|||
}, |
|||
|
|||
// 选择器事件处理 |
|||
onCoachSelect(e) { |
|||
const index = e.detail.value; |
|||
this.coachPickerIndex = index; |
|||
if (index >= 0 && index < this.coachOptions.length) { |
|||
this.selectedCoach = this.coachOptions[index]; |
|||
this.formData.coach_id = this.selectedCoach.id; |
|||
} |
|||
}, |
|||
|
|||
onVenueSelect(e) { |
|||
const index = e.detail.value; |
|||
this.venuePickerIndex = index; |
|||
if (index >= 0 && index < this.venueOptions.length) { |
|||
this.selectedVenue = this.venueOptions[index]; |
|||
this.formData.venue_id = this.selectedVenue.id; |
|||
|
|||
// 自动填充场地容量 |
|||
if (this.selectedVenue.capacity) { |
|||
this.formData.available_capacity = this.selectedVenue.capacity; |
|||
} |
|||
|
|||
// 获取该场地的时间选项 |
|||
this.loadVenueTimeOptions(this.selectedVenue.id); |
|||
} |
|||
}, |
|||
|
|||
onDateSelect(e) { |
|||
this.formData.course_date = e.detail.value; |
|||
}, |
|||
|
|||
onTimeSelect(e) { |
|||
const index = e.detail.value; |
|||
this.timePickerIndex = index; |
|||
if (index >= 0 && index < this.timeSlotOptions.length) { |
|||
this.formData.time_slot = this.timeSlotOptions[index].value; |
|||
} |
|||
}, |
|||
|
|||
// 表单验证 |
|||
validateForm() { |
|||
// 检查是否有任何修改 |
|||
const hasChanges = this.formData.coach_id !== this.scheduleInfo.coach_id || |
|||
this.formData.venue_id !== this.scheduleInfo.venue_id || |
|||
this.formData.course_date !== this.scheduleInfo.course_date || |
|||
this.formData.time_slot !== this.scheduleInfo.time_slot || |
|||
this.formData.available_capacity !== this.scheduleInfo.available_capacity; |
|||
|
|||
if (!hasChanges) { |
|||
uni.showToast({ |
|||
title: '未进行任何修改', |
|||
icon: 'none' |
|||
}); |
|||
return false; |
|||
} |
|||
|
|||
|
|||
return true; |
|||
}, |
|||
|
|||
// 获取场地时间选项 |
|||
async loadVenueTimeOptions(venueId) { |
|||
if (!venueId) { |
|||
// 如果没有选择场地，使用默认时间选项 |
|||
this.generateDefaultTimeOptions(); |
|||
return; |
|||
} |
|||
|
|||
try { |
|||
const res = await api.getVenueTimeOptions({ venue_id: venueId }); |
|||
|
|||
if (res.code === 1) { |
|||
this.timeSlotOptions = res.data.time_options || []; |
|||
// 更新时间picker索引 |
|||
this.updateTimePickerIndex(); |
|||
} else { |
|||
console.error('获取场地时间选项失败:', res.msg); |
|||
// 如果获取失败，使用默认时间选项 |
|||
this.generateDefaultTimeOptions(); |
|||
this.updateTimePickerIndex(); |
|||
} |
|||
} catch (error) { |
|||
console.error('获取场地时间选项失败:', error); |
|||
// 如果获取失败，使用默认时间选项 |
|||
this.generateDefaultTimeOptions(); |
|||
this.updateTimePickerIndex(); |
|||
} |
|||
}, |
|||
|
|||
// 生成默认时间选项（8:30开始，每小时一档） |
|||
generateDefaultTimeOptions() { |
|||
const timeSlots = []; |
|||
|
|||
for (let hour = 8; hour < 22; hour++) { |
|||
const minute = (hour === 8) ? '30' : '00'; // 8:30开始 |
|||
const startHour = hour.toString().padStart(2, '0'); |
|||
const endHour = (hour + 1).toString().padStart(2, '0'); |
|||
const startTime = `${startHour}:${minute}`; |
|||
const endTime = `${endHour}:${minute}`; |
|||
|
|||
timeSlots.push({ |
|||
value: `${startTime}-${endTime}`, |
|||
text: `${startTime}-${endTime}` |
|||
}); |
|||
} |
|||
|
|||
this.timeSlotOptions = timeSlots; |
|||
}, |
|||
|
|||
// 更新时间picker索引 |
|||
updateTimePickerIndex() { |
|||
if (this.formData.time_slot && this.timeSlotOptions.length > 0) { |
|||
this.timePickerIndex = this.timeSlotOptions.findIndex(time => time.value === this.formData.time_slot); |
|||
if (this.timePickerIndex === -1) this.timePickerIndex = 0; |
|||
} |
|||
}, |
|||
|
|||
// 获取最小日期（当前日期） |
|||
getMinDate() { |
|||
const today = new Date(); |
|||
const year = today.getFullYear(); |
|||
const month = (today.getMonth() + 1).toString().padStart(2, '0'); |
|||
const day = today.getDate().toString().padStart(2, '0'); |
|||
return `${year}-${month}-${day}`; |
|||
}, |
|||
|
|||
// 获取最大日期（一年后） |
|||
getMaxDate() { |
|||
const nextYear = new Date(); |
|||
nextYear.setFullYear(nextYear.getFullYear() + 1); |
|||
const year = nextYear.getFullYear(); |
|||
const month = (nextYear.getMonth() + 1).toString().padStart(2, '0'); |
|||
const day = nextYear.getDate().toString().padStart(2, '0'); |
|||
return `${year}-${month}-${day}`; |
|||
}, |
|||
|
|||
// 获取当前日期作为默认值 |
|||
getCurrentDate() { |
|||
const today = new Date(); |
|||
const year = today.getFullYear(); |
|||
const month = (today.getMonth() + 1).toString().padStart(2, '0'); |
|||
const day = today.getDate().toString().padStart(2, '0'); |
|||
return `${year}-${month}-${day}`; |
|||
}, |
|||
|
|||
// 提交表单 |
|||
async submitForm() { |
|||
if (!this.validateForm()) { |
|||
return; |
|||
} |
|||
|
|||
this.submitting = true; |
|||
|
|||
try { |
|||
const res = await api.updateCourseSchedule(this.formData); |
|||
|
|||
if (res.code === 1) { |
|||
uni.showToast({ |
|||
title: '调整成功', |
|||
icon: 'success' |
|||
}); |
|||
|
|||
// 延迟返回，让用户看到成功提示 |
|||
setTimeout(() => { |
|||
uni.navigateBack(); |
|||
}, 1500); |
|||
} else { |
|||
uni.showToast({ |
|||
title: res.msg || '调整失败', |
|||
icon: 'none' |
|||
}); |
|||
} |
|||
} catch (error) { |
|||
console.error('调整课程安排失败:', error); |
|||
uni.showToast({ |
|||
title: '调整失败，请重试', |
|||
icon: 'none' |
|||
}); |
|||
} finally { |
|||
this.submitting = false; |
|||
} |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.adjust-course-container { |
|||
min-height: 100vh; |
|||
background-color: #18181c; |
|||
} |
|||
|
|||
.form-container { |
|||
padding: 30rpx; |
|||
} |
|||
|
|||
.loading-container { |
|||
height: 200rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
|
|||
.loading-text { |
|||
margin-top: 20rpx; |
|||
font-size: 28rpx; |
|||
color: #999; |
|||
} |
|||
|
|||
.section-title { |
|||
font-size: 32rpx; |
|||
font-weight: bold; |
|||
color: #29d3b4; |
|||
margin: 30rpx 0 20rpx; |
|||
padding-bottom: 10rpx; |
|||
border-bottom: 1px solid #333; |
|||
} |
|||
|
|||
.course-info-card { |
|||
background-color: #23232a; |
|||
border-radius: 12rpx; |
|||
padding: 20rpx; |
|||
margin-bottom: 30rpx; |
|||
} |
|||
|
|||
.info-row { |
|||
display: flex; |
|||
margin-bottom: 16rpx; |
|||
font-size: 28rpx; |
|||
} |
|||
|
|||
.info-label { |
|||
color: #999; |
|||
width: 160rpx; |
|||
flex-shrink: 0; |
|||
} |
|||
|
|||
.info-value { |
|||
color: #fff; |
|||
flex: 1; |
|||
} |
|||
|
|||
.selector-input { |
|||
height: 80rpx; |
|||
background-color: #23232a; |
|||
border-radius: 8rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
padding: 0 24rpx; |
|||
font-size: 28rpx; |
|||
color: #fff; |
|||
} |
|||
|
|||
.btn-container { |
|||
margin-top: 60rpx; |
|||
padding: 0 30rpx; |
|||
} |
|||
|
|||
/* Picker样式 */ |
|||
.picker-mask { |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
background-color: rgba(0, 0, 0, 0.5); |
|||
z-index: 9999; |
|||
display: flex; |
|||
align-items: flex-end; |
|||
} |
|||
|
|||
.picker-content { |
|||
width: 100%; |
|||
background-color: #23232a; |
|||
border-radius: 20rpx 20rpx 0 0; |
|||
max-height: 80vh; |
|||
} |
|||
|
|||
.picker-header { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding: 30rpx; |
|||
border-bottom: 1px solid #333; |
|||
} |
|||
|
|||
.picker-cancel, .picker-confirm { |
|||
font-size: 28rpx; |
|||
color: #29d3b4; |
|||
} |
|||
|
|||
.picker-title { |
|||
font-size: 32rpx; |
|||
color: #fff; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.picker-item { |
|||
height: 80rpx; |
|||
line-height: 80rpx; |
|||
text-align: center; |
|||
font-size: 28rpx; |
|||
color: #fff; |
|||
} |
|||
</style> |
|||
File diff suppressed because it is too large
@ -0,0 +1,521 @@ |
|||
<template> |
|||
<view class="sign-in-container"> |
|||
<uni-nav-bar title="课程点名" left-icon="left" fixed="true" background-color="#292929" color="#FFFFFF" |
|||
@clickLeft="goBack"></uni-nav-bar> |
|||
|
|||
<view class="content"> |
|||
<!-- 课程信息 --> |
|||
<view class="course-info-card" v-if="scheduleInfo"> |
|||
<view class="course-title">{{ scheduleInfo.course_name }}</view> |
|||
<view class="course-time">{{ scheduleInfo.course_date }} {{ scheduleInfo.time_slot }}</view> |
|||
<view class="course-detail"> |
|||
<view class="detail-item"> |
|||
<text class="detail-label">授课教练:</text> |
|||
<text class="detail-value">{{ scheduleInfo.coach_name }}</text> |
|||
</view> |
|||
<view class="detail-item"> |
|||
<text class="detail-label">上课场地:</text> |
|||
<text class="detail-value">{{ scheduleInfo.venue_name }}</text> |
|||
</view> |
|||
<view class="detail-item"> |
|||
<text class="detail-label">学员人数:</text> |
|||
<text class="detail-value">{{ studentList.length }}人</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 学员列表 --> |
|||
<view class="student-section"> |
|||
<view class="section-header"> |
|||
<view class="section-title">学员点名</view> |
|||
<view class="action-buttons"> |
|||
<fui-button type="primary" size="small" @click="checkAllStudents">全部签到</fui-button> |
|||
<fui-button type="danger" size="small" @click="uncheckAllStudents">全部取消</fui-button> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="empty-list" v-if="studentList.length === 0"> |
|||
<image :src="$util.img('/static/icon-img/empty.png')" mode="aspectFit" class="empty-img"></image> |
|||
<text class="empty-text">暂无学员数据</text> |
|||
</view> |
|||
|
|||
<view class="student-list" v-else> |
|||
<view class="student-item" v-for="(student, index) in studentList" :key="index" |
|||
@click="toggleStudentStatus(index)"> |
|||
<view class="student-avatar"> |
|||
<image :src="student.avatar || $util.img('/static/icon-img/avatar.png')" mode="aspectFill"></image> |
|||
<view :class="['status-badge',student.statusClass]"></view> |
|||
</view> |
|||
|
|||
<view class="student-info"> |
|||
<text class="student-name">{{ student.name }}</text> |
|||
<text class="student-phone">{{ student.phone_number || '无联系电话' }}</text> |
|||
</view> |
|||
|
|||
<view class="status-container"> |
|||
<view class="status-select"> |
|||
<view class="status-option" :class="{ active: student.status === 1 }" |
|||
@click.stop="setStudentStatus(index, 1)"> |
|||
已到 |
|||
</view> |
|||
<view class="status-option" :class="{ active: student.status === 2 }" |
|||
@click.stop="setStudentStatus(index, 2)"> |
|||
请假 |
|||
</view> |
|||
<view class="status-option" :class="{ active: student.status === 0 }" |
|||
@click.stop="setStudentStatus(index, 0)"> |
|||
未到 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 点名备注 --> |
|||
<view class="remark-section"> |
|||
<view class="section-title">点名备注</view> |
|||
<fui-textarea v-model="signInRemark" placeholder="请输入点名备注（可选）" maxlength="200"></fui-textarea> |
|||
</view> |
|||
|
|||
<!-- 提交按钮 --> |
|||
<view class="submit-btn"> |
|||
<fui-button type="primary" @click="submitSignIn" :loading="submitting">提交点名</fui-button> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import api from '@/api/apiRoute.js'; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
// 课程ID |
|||
scheduleId: null, |
|||
|
|||
// 课程信息 |
|||
scheduleInfo: null, |
|||
|
|||
// 学员列表 |
|||
studentList: [], |
|||
|
|||
// 点名备注 |
|||
signInRemark: '', |
|||
|
|||
// 提交状态 |
|||
submitting: false |
|||
}; |
|||
}, |
|||
computed: { |
|||
statusClass() { |
|||
const statusMap = { |
|||
'pending': 'status-pending', |
|||
'upcoming': 'status-upcoming', |
|||
'ongoing': 'status-ongoing', |
|||
'completed': 'status-completed' |
|||
}; |
|||
return statusMap[this.scheduleInfo.status] || ''; |
|||
}, |
|||
studentList() { |
|||
const statusMap = { |
|||
0: 'status-absent', |
|||
1: 'status-present', |
|||
2: 'status-leave' |
|||
}; |
|||
|
|||
return this.studentListRaw.map(student => ({ |
|||
...student, |
|||
statusClass: statusMap[student.status] || 'status-absent', |
|||
status_text: this.getStatusText(student.status) |
|||
})); |
|||
} |
|||
}, |
|||
onLoad(options) { |
|||
if (options.id) { |
|||
this.scheduleId = options.id; |
|||
this.loadScheduleInfo(); |
|||
} else { |
|||
uni.showToast({ |
|||
title: '参数错误', |
|||
icon: 'none' |
|||
}); |
|||
setTimeout(() => { |
|||
uni.navigateBack(); |
|||
}, 1500); |
|||
} |
|||
}, |
|||
|
|||
methods: { |
|||
// 返回上一页 |
|||
goBack() { |
|||
uni.navigateBack(); |
|||
}, |
|||
|
|||
// 加载课程安排信息 |
|||
async loadScheduleInfo() { |
|||
uni.showLoading({ |
|||
title: '加载中...' |
|||
}); |
|||
|
|||
try { |
|||
const res = await api.getCourseScheduleInfo({ |
|||
schedule_id: this.scheduleId |
|||
}); |
|||
|
|||
if (res.code === 1) { |
|||
this.scheduleInfo = res.data; |
|||
|
|||
// 处理学员列表 |
|||
if (this.scheduleInfo.students && this.scheduleInfo.students.length > 0) { |
|||
this.studentList = [...this.scheduleInfo.students]; |
|||
} |
|||
} else { |
|||
uni.showToast({ |
|||
title: res.msg || '获取课程安排信息失败', |
|||
icon: 'none' |
|||
}); |
|||
} |
|||
} catch (error) { |
|||
console.error('获取课程安排信息失败:', error); |
|||
uni.showToast({ |
|||
title: '获取课程安排信息失败', |
|||
icon: 'none' |
|||
}); |
|||
} finally { |
|||
uni.hideLoading(); |
|||
} |
|||
}, |
|||
|
|||
// 获取学员状态样式 |
|||
getStatusClass(status) { |
|||
const statusMap = { |
|||
0: 'status-absent', |
|||
1: 'status-present', |
|||
2: 'status-leave' |
|||
}; |
|||
|
|||
return statusMap[status] || 'status-absent'; |
|||
}, |
|||
// 获取状态文本 |
|||
getStatusText(status) { |
|||
const statusTextMap = { |
|||
0: '待上课', |
|||
1: '已上课', |
|||
2: '请假' |
|||
}; |
|||
return statusTextMap[status] || '未知状态'; |
|||
}, |
|||
// 切换学员状态 |
|||
toggleStudentStatus(index) { |
|||
const student = this.studentList[index]; |
|||
|
|||
// 状态循环：未到 -> 已到 -> 请假 -> 未到 |
|||
let newStatus = 0; |
|||
|
|||
if (student.status === 0) { |
|||
newStatus = 1; |
|||
} else if (student.status === 1) { |
|||
newStatus = 2; |
|||
} else { |
|||
newStatus = 0; |
|||
} |
|||
|
|||
this.setStudentStatus(index, newStatus); |
|||
}, |
|||
|
|||
// 设置学员状态 |
|||
setStudentStatus(index, status) { |
|||
if (index >= 0 && index < this.studentList.length) { |
|||
this.studentList[index].status = status; |
|||
|
|||
// 更新状态文本 |
|||
const statusTextMap = { |
|||
0: '待上课', |
|||
1: '已上课', |
|||
2: '请假' |
|||
}; |
|||
|
|||
this.studentList[index].status_text = statusTextMap[status]; |
|||
} |
|||
}, |
|||
|
|||
// 全部签到 |
|||
checkAllStudents() { |
|||
this.studentList.forEach((student, index) => { |
|||
this.setStudentStatus(index, 1); |
|||
}); |
|||
}, |
|||
|
|||
// 全部取消 |
|||
uncheckAllStudents() { |
|||
this.studentList.forEach((student, index) => { |
|||
this.setStudentStatus(index, 0); |
|||
}); |
|||
}, |
|||
|
|||
// 提交点名 |
|||
async submitSignIn() { |
|||
// 准备提交数据 |
|||
const studentData = this.studentList.map(student => ({ |
|||
student_id: student.student_id, |
|||
resource_id: student.resource_id, |
|||
status: student.status |
|||
})); |
|||
|
|||
const submitData = { |
|||
schedule_id: this.scheduleId, |
|||
students: studentData, |
|||
remark: this.signInRemark |
|||
}; |
|||
|
|||
this.submitting = true; |
|||
|
|||
try { |
|||
// 使用API进行点名 |
|||
const res = await api.submitScheduleSignIn(submitData); |
|||
|
|||
if (res.code === 1) { |
|||
uni.showToast({ |
|||
title: '点名成功', |
|||
icon: 'success' |
|||
}); |
|||
|
|||
// 延迟返回 |
|||
setTimeout(() => { |
|||
uni.navigateBack(); |
|||
}, 1500); |
|||
} else { |
|||
uni.showToast({ |
|||
title: res.msg || '点名失败', |
|||
icon: 'none' |
|||
}); |
|||
} |
|||
} catch (error) { |
|||
console.error('点名失败:', error); |
|||
uni.showToast({ |
|||
title: '点名失败，请重试', |
|||
icon: 'none' |
|||
}); |
|||
} finally { |
|||
this.submitting = false; |
|||
} |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.sign-in-container { |
|||
min-height: 100vh; |
|||
background-color: #18181c; |
|||
padding-top: 88rpx; |
|||
} |
|||
|
|||
.content { |
|||
padding: 30rpx; |
|||
} |
|||
|
|||
.course-info-card { |
|||
background-color: #23232a; |
|||
border-radius: 12rpx; |
|||
padding: 24rpx; |
|||
margin-bottom: 30rpx; |
|||
} |
|||
|
|||
.course-title { |
|||
font-size: 32rpx; |
|||
font-weight: bold; |
|||
color: #fff; |
|||
margin-bottom: 10rpx; |
|||
} |
|||
|
|||
.course-time { |
|||
font-size: 26rpx; |
|||
color: #29d3b4; |
|||
margin-bottom: 20rpx; |
|||
} |
|||
|
|||
.course-detail { |
|||
background-color: #2a2a2a; |
|||
border-radius: 8rpx; |
|||
padding: 16rpx; |
|||
} |
|||
|
|||
.detail-item { |
|||
display: flex; |
|||
margin-bottom: 10rpx; |
|||
font-size: 26rpx; |
|||
|
|||
&:last-child { |
|||
margin-bottom: 0; |
|||
} |
|||
} |
|||
|
|||
.detail-label { |
|||
color: #999; |
|||
width: 140rpx; |
|||
} |
|||
|
|||
.detail-value { |
|||
color: #fff; |
|||
flex: 1; |
|||
} |
|||
|
|||
.student-section { |
|||
background-color: #23232a; |
|||
border-radius: 12rpx; |
|||
padding: 24rpx; |
|||
margin-bottom: 30rpx; |
|||
} |
|||
|
|||
.section-header { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
margin-bottom: 24rpx; |
|||
} |
|||
|
|||
.section-title { |
|||
font-size: 30rpx; |
|||
font-weight: bold; |
|||
color: #fff; |
|||
} |
|||
|
|||
.action-buttons { |
|||
display: flex; |
|||
gap: 16rpx; |
|||
} |
|||
|
|||
.student-list { |
|||
max-height: 600rpx; |
|||
overflow-y: auto; |
|||
} |
|||
|
|||
.student-item { |
|||
display: flex; |
|||
align-items: center; |
|||
background-color: #2a2a2a; |
|||
border-radius: 8rpx; |
|||
padding: 16rpx; |
|||
margin-bottom: 16rpx; |
|||
|
|||
&:last-child { |
|||
margin-bottom: 0; |
|||
} |
|||
} |
|||
|
|||
.student-avatar { |
|||
width: 80rpx; |
|||
height: 80rpx; |
|||
border-radius: 40rpx; |
|||
overflow: hidden; |
|||
position: relative; |
|||
margin-right: 20rpx; |
|||
|
|||
image { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
} |
|||
|
|||
.status-badge { |
|||
position: absolute; |
|||
bottom: 0; |
|||
right: 0; |
|||
width: 24rpx; |
|||
height: 24rpx; |
|||
border-radius: 12rpx; |
|||
background-color: #999; |
|||
border: 2rpx solid #fff; |
|||
} |
|||
|
|||
.status-absent { |
|||
background-color: #ff3b30; |
|||
} |
|||
|
|||
.status-present { |
|||
background-color: #34c759; |
|||
} |
|||
|
|||
.status-leave { |
|||
background-color: #ff9500; |
|||
} |
|||
|
|||
.student-info { |
|||
flex: 1; |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.student-name { |
|||
font-size: 28rpx; |
|||
color: #fff; |
|||
margin-bottom: 6rpx; |
|||
} |
|||
|
|||
.student-phone { |
|||
font-size: 24rpx; |
|||
color: #999; |
|||
} |
|||
|
|||
.status-container { |
|||
margin-left: 16rpx; |
|||
} |
|||
|
|||
.status-select { |
|||
display: flex; |
|||
gap: 10rpx; |
|||
} |
|||
|
|||
.status-option { |
|||
padding: 8rpx 16rpx; |
|||
font-size: 24rpx; |
|||
border-radius: 30rpx; |
|||
background-color: #3a3a3a; |
|||
color: #fff; |
|||
|
|||
&.active { |
|||
background-color: #29d3b4; |
|||
} |
|||
} |
|||
|
|||
.empty-list { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding: 60rpx 0; |
|||
|
|||
.empty-img { |
|||
width: 200rpx; |
|||
height: 200rpx; |
|||
margin-bottom: 20rpx; |
|||
} |
|||
|
|||
.empty-text { |
|||
font-size: 28rpx; |
|||
color: #999; |
|||
} |
|||
} |
|||
|
|||
.remark-section { |
|||
background-color: #23232a; |
|||
border-radius: 12rpx; |
|||
padding: 24rpx; |
|||
margin-bottom: 40rpx; |
|||
|
|||
.section-title { |
|||
font-size: 30rpx; |
|||
font-weight: bold; |
|||
color: #fff; |
|||
margin-bottom: 20rpx; |
|||
} |
|||
} |
|||
|
|||
.submit-btn { |
|||
margin-top: 40rpx; |
|||
padding-bottom: 40rpx; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,282 @@ |
|||
<!--体测数据-详情页--> |
|||
<template> |
|||
<view class="overall"> |
|||
<view class="date">{{$util.formatToDateTime(surveyInfo.created_at,'Y-m-d')}}</view> |
|||
|
|||
<view class="content"> |
|||
<view class="circle-container"> |
|||
<view class="card-con-txt1-left"> |
|||
<image :src="$util.img('/uniapp_src/static/images/index/score.png')" class="overlay-image"></image> |
|||
</view> |
|||
<view class="card-con-txt1-left-txt">{{surveyInfo.calculateChildHealthScore}}</view> |
|||
<view class="card-con-txt1-left-txt top1">综合评分</view> |
|||
</view> |
|||
<view style="height: 170rpx;"></view> |
|||
<view style="display: flex;justify-content: space-around;"> |
|||
<view style="text-align: center;"> |
|||
<view style="color: #AAAAAA;font-size: 30rpx;padding: 15rpx 0;">身高 (CM)</view> |
|||
<view style="font-size: 55rpx;color: #29d3b4;">{{(surveyInfo.height)}}</view> |
|||
</view> |
|||
<view style="text-align: center;"> |
|||
<view style="color: #AAAAAA;font-size: 30rpx;padding: 15rpx 0;">体重 (KG)</view> |
|||
<view style="font-size: 55rpx;color: #29d3b4;">{{surveyInfo.weight}}</view> |
|||
</view> |
|||
</view> |
|||
<!-- <view class="coach-message">--> |
|||
<!-- <view>--> |
|||
<!-- <image :src="$util.img('/uniapp_src/static/images/index/lv.png')" class="drop-image"></image>--> |
|||
<!-- </view>--> |
|||
<!-- <view style="padding: 15rpx 0 0 5rpx;line-height: 1.6;font-size: 30rpx;color: #7F7F7F;">{{v.content}}</view>--> |
|||
<!-- </view>--> |
|||
<view class="list_box"> |
|||
<!-- <view class="ul"> |
|||
<view class="li"> |
|||
<view class="li_title">坐位体前屈</view> |
|||
<view class="li_content">测试结果：{{surveyInfo.seated_forward_bend}}</view> |
|||
</view> |
|||
|
|||
<view class="li"> |
|||
<view class="li_title">仰卧卷腹</view> |
|||
<view class="li_content">测试结果：{{surveyInfo.sit_ups}}</view> |
|||
</view> |
|||
|
|||
<view class="li"> |
|||
<view class="li_title">九十度仰卧撑</view> |
|||
<view class="li_content">测试结果：{{surveyInfo.push_ups}}</view> |
|||
</view> |
|||
|
|||
<view class="li"> |
|||
<view class="li_title">火烈鸟平衡测试</view> |
|||
<view class="li_content">测试结果：{{surveyInfo.flamingo_balance}}</view> |
|||
</view> |
|||
|
|||
<view class="li"> |
|||
<view class="li_title">三十秒双脚连续跳</view> |
|||
<view class="li_content">测试结果：{{surveyInfo.thirty_sec_jump}}</view> |
|||
</view> |
|||
|
|||
<view class="li"> |
|||
<view class="li_title">立定跳远</view> |
|||
<view class="li_content">测试结果：{{surveyInfo.standing_long_jump}}</view> |
|||
</view> |
|||
|
|||
<view class="li"> |
|||
<view class="li_title">4乘10m灵敏折返跑</view> |
|||
<view class="li_content">测试结果：{{surveyInfo.agility_run}}</view> |
|||
</view> |
|||
|
|||
<view class="li"> |
|||
<view class="li_title">走平衡木</view> |
|||
<view class="li_content">测试结果：{{surveyInfo.balance_beam}}</view> |
|||
</view> |
|||
|
|||
<view class="li"> |
|||
<view class="li_title">网球掷远</view> |
|||
<view class="li_content">测试结果：{{surveyInfo.tennis_throw}}</view> |
|||
</view> |
|||
|
|||
<view class="li"> |
|||
<view class="li_title">十米往返跑</view> |
|||
<view class="li_content">测试结果：{{surveyInfo.ten_meter_shuttle_run}}</view> |
|||
</view> |
|||
</view> --> |
|||
<view v-for="(item,index) in surveyInfo.physical_test_report"> |
|||
<view style="color: blue;" @click="previewFile(item)">{{surveyInfo.created_at}}体测报告{{index}}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import memberApi from '@/api/member.js'; |
|||
import apiRoute from '@/api/apiRoute.js'; |
|||
export default { |
|||
data() { |
|||
return { |
|||
survey_id: '', //评测id |
|||
|
|||
surveyInfo: {}, //评测详情 |
|||
} |
|||
}, |
|||
onLoad(options) { |
|||
this.survey_id = options.survey_id //评测id |
|||
}, |
|||
onShow() { |
|||
this.init() |
|||
}, |
|||
methods: { |
|||
//初始化 |
|||
async init() { |
|||
this.getInfo() |
|||
}, |
|||
|
|||
//评测详情 |
|||
async getInfo() { |
|||
let data = { |
|||
survey_id: this.survey_id |
|||
} |
|||
let res = await apiRoute.physicalTestInfo(data) |
|||
if (res.code != 1) { |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
this.surveyInfo = res.data |
|||
}, |
|||
|
|||
async previewFile(url) { |
|||
|
|||
console.log(url) |
|||
|
|||
try { |
|||
// 1. 下载文件到本地 |
|||
const { |
|||
tempFilePath |
|||
} = await this.downloadFile(url); |
|||
|
|||
// 2. 打开文件 |
|||
await uni.openDocument({ |
|||
filePath: 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 lang="less" scoped> |
|||
.overall { |
|||
width: 100%; |
|||
height: 100vh; |
|||
background-color: #29d3b4; |
|||
} |
|||
|
|||
.date { |
|||
color: #fff; |
|||
width: 92%; |
|||
margin: auto; |
|||
text-align: left; |
|||
font-size: 30rpx; |
|||
padding: 20rpx 0; |
|||
} |
|||
|
|||
.content { |
|||
width: 92%; |
|||
height: 70vh; |
|||
background-color: #fff; |
|||
border-radius: 15rpx; |
|||
margin: 150rpx auto 0; |
|||
position: relative; |
|||
} |
|||
|
|||
.circle-container::before { |
|||
content: ''; |
|||
width: 200px; |
|||
height: 100px; |
|||
background-color: #fff; |
|||
border-radius: 100px 100px 0 0; |
|||
display: inline-block; |
|||
transform: translate(-50%, 0) rotate(0deg); |
|||
transform-origin: center top; |
|||
position: absolute; |
|||
top: -12%; |
|||
left: 50%; |
|||
transform: translate(-50%, -0%); |
|||
} |
|||
|
|||
.card-con-txt1-left { |
|||
width: 100%; |
|||
height: 100%; |
|||
position: relative; |
|||
} |
|||
|
|||
.overlay-image { |
|||
width: 300rpx; |
|||
height: 200rpx; |
|||
position: absolute; |
|||
left: 50%; |
|||
transform: translate(-50%, -50%); |
|||
} |
|||
|
|||
.card-con-txt1-left-txt { |
|||
font-size: 32rpx; |
|||
color: #29d3b4; |
|||
position: absolute; |
|||
left: 50%; |
|||
transform: translate(-50%, -0%); |
|||
} |
|||
|
|||
.top1 { |
|||
top: 5%; |
|||
} |
|||
|
|||
.coach-message { |
|||
width: 92%; |
|||
margin: 10rpx auto; |
|||
display: flex; |
|||
} |
|||
|
|||
.drop-image { |
|||
width: 60rpx; |
|||
height: 60rpx; |
|||
align-items: center; |
|||
} |
|||
|
|||
.list_box{ |
|||
font-size: 30rpx; |
|||
// text-align: center; |
|||
margin-left: 50rpx; |
|||
margin-top: 20rpx; |
|||
.ul{ |
|||
padding: 0 20rpx; |
|||
display: flex; |
|||
flex-wrap: wrap; /* 允许换行 */ |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
gap: 20rpx; |
|||
.li{ |
|||
width: 48%; /* 每个列表项占宽度的48%，留出一些间距 */ |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 5rpx; |
|||
.li_title{ |
|||
text-align: left; |
|||
} |
|||
.li_content{ |
|||
text-align: left; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,728 @@ |
|||
<template> |
|||
<view class="container safe-area"> |
|||
<view class="search-bar" @click="showSearch = true"> |
|||
<uni-icons type="search" size="22" color="#00d18c" /> |
|||
<text class="search-placeholder">搜索学员...</text> |
|||
</view> |
|||
<view class="content"> |
|||
<view v-if="studentList.length === 0" class="empty-box"> |
|||
<image :src="$util.img('/static/icon-img/empty.png')" mode="aspectFit" class="empty-img"></image> |
|||
<text class="empty-text">暂无学员数据</text> |
|||
</view> |
|||
<view v-else class="student-list"> |
|||
<view v-for="(item, index) in studentList" :key="index" class="student-item" @click="goToDetail(item)"> |
|||
<view class="student-card"> |
|||
<view class="student-avatar"> |
|||
<image :src="item.avatar || $util.img('/static/icon-img/avatar.png')" mode="aspectFill" class="avatar-img"></image> |
|||
</view> |
|||
<view class="student-info"> |
|||
<view class="student-name">{{item.name}}</view> |
|||
<view class="info-row"> |
|||
<text class="info-label">所属校区：</text> |
|||
<text class="info-value">{{item.campus}}</text> |
|||
</view> |
|||
<view class="info-row"> |
|||
<text class="info-label">剩余课程：</text> |
|||
<text class="info-value">{{ getRemainingCourses(item) }}节</text> |
|||
</view> |
|||
<view class="info-row"> |
|||
<text class="info-label">到期时间：</text> |
|||
<text class="info-value">{{item.end_date}}</text> |
|||
</view> |
|||
</view> |
|||
<view class="arrow-right"> |
|||
<uni-icons type="right" size="16" color="#CCCCCC"></uni-icons> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<!-- 搜索弹窗 --> |
|||
<view v-if="showSearch" class="search_popup_mask" @tap="showSearch=false"> |
|||
<view class="search_popup_content" @tap.stop> |
|||
<view class="popup_search_content"> |
|||
<view class="popup_header"> |
|||
<view class="popup_title">学员筛选</view> |
|||
<view class="popup_close" @tap="showSearch=false"> |
|||
<text class="close_text">✕</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<scroll-view :scroll-y="true" class="popup_scroll_view"> |
|||
<!-- 第一筛选区域 --> |
|||
<view class="popup_filter_section"> |
|||
<view class="popup_filter_row"> |
|||
<view class="popup_filter_item"> |
|||
<text class="popup_filter_label">学生姓名</text> |
|||
<input class="popup_filter_input" placeholder="请输入学生姓名" v-model="searchForm.name" /> |
|||
</view> |
|||
<view class="popup_filter_item"> |
|||
<text class="popup_filter_label">联系电话</text> |
|||
<input class="popup_filter_input" placeholder="请输入联系电话" v-model="searchForm.phone" /> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="popup_filter_row"> |
|||
<view class="popup_filter_item"> |
|||
<text class="popup_filter_label">课时数量</text> |
|||
<input class="popup_filter_input" placeholder="请输入课时数量" v-model="searchForm.lessonCount" /> |
|||
</view> |
|||
<view class="popup_filter_item"> |
|||
<text class="popup_filter_label">请假次数</text> |
|||
<input class="popup_filter_input" placeholder="请输入请假次数" v-model="searchForm.leaveCount" /> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="popup_filter_row"> |
|||
<view class="popup_filter_item"> |
|||
<text class="popup_filter_label">课程名称</text> |
|||
<view class="popup_filter_picker" @click="showCoursePicker = true"> |
|||
{{ selectedCourseName || '请选择课程' }} |
|||
</view> |
|||
</view> |
|||
<view class="popup_filter_item"> |
|||
<text class="popup_filter_label">班级</text> |
|||
<view class="popup_filter_picker" @click="showClassPicker = true"> |
|||
{{ selectedClassName || '请选择班级' }} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</scroll-view> |
|||
|
|||
<view class="popup_filter_buttons"> |
|||
<view class="popup_filter_btn reset_btn" @click="resetSearch">重置</view> |
|||
<view class="popup_filter_btn search_btn" @click="doSearchAndClose">搜索</view> |
|||
<view class="popup_filter_btn close_btn" @click="closeSearch">关闭</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 选择器组件 --> |
|||
<single-picker |
|||
:show.sync="showCoursePicker" |
|||
:data="courseList" |
|||
valueKey="id" |
|||
textKey="course_name" |
|||
title="选择课程" |
|||
@change="onCourseChange" |
|||
@cancel="showCoursePicker = false" |
|||
></single-picker> |
|||
<single-picker |
|||
:show.sync="showClassPicker" |
|||
:data="classList" |
|||
valueKey="id" |
|||
:textKey="['campus_name', 'class_name']" |
|||
textSeparator="-" |
|||
title="选择班级" |
|||
@change="onClassChange" |
|||
@cancel="showClassPicker = false" |
|||
></single-picker> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import memberApi from '@/api/member.js' |
|||
import apiRoute from '@/api/apiRoute.js'; |
|||
import SinglePicker from "@/components/custom-picker/single-picker.vue" |
|||
export default { |
|||
components: { |
|||
SinglePicker |
|||
}, |
|||
data() { |
|||
return { |
|||
studentList: [], |
|||
showSearch: false, |
|||
showCoursePicker: false, |
|||
showClassPicker: false, |
|||
searchForm: { |
|||
name: '', |
|||
phone: '', |
|||
lessonCount: '', |
|||
leaveCount: '', |
|||
courseId: null, |
|||
classId: null, |
|||
}, |
|||
selectedCourseName: '', |
|||
selectedClassName: '', |
|||
courseList: [], |
|||
classList: [], |
|||
} |
|||
}, |
|||
onLoad() { |
|||
this.getStudentList(); |
|||
this.getClassesList(); |
|||
}, |
|||
methods: { |
|||
navigateBack() { |
|||
uni.navigateBack(); |
|||
}, |
|||
async getStudentList() { |
|||
try { |
|||
// 合并基础参数和搜索表单参数，后端现在支持完整的搜索功能 |
|||
const params = { type: 'all' }; |
|||
const res = await apiRoute.xs_getStudentList(Object.assign(params, this.searchForm)); |
|||
console.log('获取学员列表响应:', res); |
|||
if(res.code == 1) { |
|||
this.studentList = res.data || []; |
|||
// 如果没有数据，添加一些测试数据用于测试编辑功能 |
|||
if (this.studentList.length === 0) { |
|||
this.studentList = [ |
|||
{ |
|||
id: 1, |
|||
name: '于支付', |
|||
avatar: '', |
|||
campus: '测试校区', |
|||
total_hours: 20, |
|||
gift_hours: 5, |
|||
use_total_hours: 8, |
|||
use_gift_hours: 2, |
|||
end_date: '2025-08-31', |
|||
resource_sharing_id: 1 |
|||
}, |
|||
{ |
|||
id: 2, |
|||
name: '测试学员', |
|||
avatar: '', |
|||
campus: '测试校区', |
|||
total_hours: 15, |
|||
gift_hours: 3, |
|||
use_total_hours: 5, |
|||
use_gift_hours: 1, |
|||
end_date: '2025-08-15', |
|||
resource_sharing_id: 5 |
|||
} |
|||
]; |
|||
} |
|||
console.log('学员列表更新成功:', this.studentList); |
|||
} else { |
|||
console.error('API返回错误:', res); |
|||
uni.showToast({ |
|||
title: res.msg || '获取学员列表失败', |
|||
icon: 'none' |
|||
}); |
|||
} |
|||
}catch ( error) { |
|||
console.error('获取学员列表错误', error); |
|||
uni.showToast({ |
|||
title: '获取学员列表失败', |
|||
icon: 'none' |
|||
}); |
|||
return; |
|||
} |
|||
}, |
|||
goToDetail(student) { |
|||
this.$navigateToPage(`/pages-market/clue/clue_info`, { |
|||
resource_sharing_id: student.resource_sharing_id |
|||
}); |
|||
}, |
|||
getRemainingCourses(item) { |
|||
const totalHours = (item.total_hours || 0) |
|||
+ (item.gift_hours || 0); |
|||
const usedHours = (item.use_total_hours || |
|||
0) + (item.use_gift_hours || 0); |
|||
return totalHours - usedHours; |
|||
}, |
|||
|
|||
// 输入处理方法 |
|||
onNameInput(e) { |
|||
this.searchForm.name = e; |
|||
}, |
|||
onPhoneInput(e) { |
|||
this.searchForm.phone = e; |
|||
}, |
|||
onLessonCountInput(e) { |
|||
this.searchForm.lessonCount = e; |
|||
}, |
|||
onLeaveCountInput(e) { |
|||
this.searchForm.leaveCount = e; |
|||
}, |
|||
|
|||
// 选择器变更处理 |
|||
onCourseChange(e) { |
|||
this.searchForm.courseId = e.value; |
|||
this.selectedCourseName = e.text; |
|||
}, |
|||
onClassChange(e) { |
|||
this.searchForm.classId = e.value; |
|||
this.selectedClassName = e.text; |
|||
}, |
|||
|
|||
// 清除选择器选中项 |
|||
clearCourseSelection(e) { |
|||
e.stopPropagation(); // 阻止事件冒泡到点击打开选择器 |
|||
this.searchForm.courseId = null; |
|||
this.selectedCourseName = ''; |
|||
}, |
|||
clearClassSelection(e) { |
|||
e.stopPropagation(); // 阻止事件冒泡到点击打开选择器 |
|||
this.searchForm.classId = null; |
|||
this.selectedClassName = ''; |
|||
}, |
|||
|
|||
// 关闭搜索窗口 |
|||
closeSearch() { |
|||
this.showSearch = false; |
|||
}, |
|||
|
|||
// 监听遮罩层点击事件 |
|||
onMaskClick() { |
|||
this.showSearch = false; |
|||
}, |
|||
|
|||
// 获取班级列表 |
|||
async getClassesList() { |
|||
try { |
|||
const res = await apiRoute.jlGetClassesList(); |
|||
if (res.code == 1) { |
|||
// 确保API返回的数据是数组格式 |
|||
this.classList = res.data.classes || []; |
|||
this.courseList = res.data.course || []; |
|||
} else { |
|||
uni.showToast({ |
|||
title: res.msg || '获取班级列表失败', |
|||
icon: 'none' |
|||
}); |
|||
} |
|||
} catch (error) { |
|||
console.error('获取班级列表错误', error); |
|||
uni.showToast({ |
|||
title: '获取班级列表失败', |
|||
icon: 'none' |
|||
}); |
|||
} |
|||
}, |
|||
|
|||
doSearch() { |
|||
// 这里可以根据 searchForm 的内容进行筛选或请求 |
|||
this.showSearch = false; |
|||
this.getStudentList() |
|||
}, |
|||
|
|||
doSearchAndClose() { |
|||
this.doSearch(); |
|||
}, |
|||
|
|||
resetSearch() { |
|||
this.searchForm = { |
|||
name: '', |
|||
phone: '', |
|||
lessonCount: '', |
|||
leaveCount: '', |
|||
courseId: null, |
|||
classId: null, |
|||
}; |
|||
this.selectedCourseName = ''; |
|||
this.selectedClassName = ''; |
|||
this.getStudentList(); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.container { |
|||
background-color: #18181c; |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.safe-area { |
|||
padding-top: var(--status-bar-height); |
|||
padding-bottom: 120rpx; |
|||
} |
|||
|
|||
.search-bar { |
|||
display: flex; |
|||
align-items: center; |
|||
background: #23232a; |
|||
border-radius: 12rpx; |
|||
padding: 18rpx 24rpx; |
|||
margin: 24rpx 24rpx 0 24rpx; |
|||
color: #bdbdbd; |
|||
font-size: 28rpx; |
|||
box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.08); |
|||
&:active { |
|||
background: #2a2a31; |
|||
} |
|||
} |
|||
.search-placeholder { |
|||
margin-left: 12rpx; |
|||
color: #bdbdbd; |
|||
flex: 1; |
|||
} |
|||
|
|||
.content { |
|||
padding: 20rpx; |
|||
} |
|||
|
|||
.empty-box { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding-top: 200rpx; |
|||
|
|||
.empty-img { |
|||
width: 200rpx; |
|||
height: 200rpx; |
|||
} |
|||
|
|||
.empty-text { |
|||
margin-top: 20rpx; |
|||
font-size: 28rpx; |
|||
color: #999; |
|||
} |
|||
} |
|||
|
|||
.student-list { |
|||
.student-item { |
|||
margin-bottom: 20rpx; |
|||
} |
|||
|
|||
.student-card { |
|||
display: flex; |
|||
align-items: center; |
|||
background-color: #23232a; |
|||
border-radius: 12rpx; |
|||
padding: 30rpx; |
|||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.12); |
|||
transition: box-shadow 0.2s; |
|||
&:active { |
|||
box-shadow: 0 4rpx 20rpx rgba(0,255,128,0.12); |
|||
} |
|||
} |
|||
|
|||
.student-avatar { |
|||
width: 120rpx; |
|||
height: 120rpx; |
|||
border-radius: 60rpx; |
|||
overflow: hidden; |
|||
margin-right: 30rpx; |
|||
|
|||
.avatar-img { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
} |
|||
|
|||
.student-info { |
|||
flex: 1; |
|||
} |
|||
|
|||
.student-name { |
|||
font-size: 32rpx; |
|||
font-weight: bold; |
|||
margin-bottom: 10rpx; |
|||
color: #fff; |
|||
} |
|||
|
|||
.info-row { |
|||
display: flex; |
|||
font-size: 26rpx; |
|||
margin-top: 8rpx; |
|||
|
|||
.info-label { |
|||
color: #bdbdbd; |
|||
} |
|||
|
|||
.info-value { |
|||
color: #fff; |
|||
} |
|||
} |
|||
|
|||
.arrow-right { |
|||
padding-left: 20rpx; |
|||
} |
|||
} |
|||
|
|||
.popup-content { |
|||
background: #23232a; |
|||
color: #fff; |
|||
padding: 32rpx 24rpx; |
|||
border-radius: 16rpx; |
|||
min-width: 300rpx; |
|||
text-align: left; |
|||
} |
|||
.popup-title { |
|||
font-size: 32rpx; |
|||
font-weight: bold; |
|||
color: #00d18c; |
|||
margin-bottom: 24rpx; |
|||
text-align: center; |
|||
} |
|||
.picker-row { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
padding: 18rpx 0; |
|||
border-bottom: 1px solid #333; |
|||
.picker-label { |
|||
color: #bdbdbd; |
|||
font-size: 28rpx; |
|||
} |
|||
.picker-value { |
|||
color: #fff; |
|||
font-size: 28rpx; |
|||
} |
|||
} |
|||
.search-btn { |
|||
width: 100%; |
|||
background: #00d18c; |
|||
color: #fff; |
|||
border: none; |
|||
border-radius: 12rpx; |
|||
font-size: 30rpx; |
|||
padding: 20rpx 0; |
|||
margin-top: 32rpx; |
|||
margin-bottom: 8rpx; |
|||
} |
|||
|
|||
.fui-picker__input { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
height: 72rpx; |
|||
padding: 0 24rpx; |
|||
background-color: #2c2c34; |
|||
border-radius: 8rpx; |
|||
|
|||
text { |
|||
font-size: 28rpx; |
|||
color: #fff; |
|||
} |
|||
} |
|||
|
|||
.fui-btn__box { |
|||
margin-top: 50rpx; |
|||
padding: 0 30rpx; |
|||
} |
|||
|
|||
.fui-page__bd { |
|||
padding: 30rpx; |
|||
padding-top: 70rpx; |
|||
background-color: #23232a; |
|||
position: relative; |
|||
border-top-left-radius: 24rpx; |
|||
border-top-right-radius: 24rpx; |
|||
} |
|||
|
|||
.fui-section__title { |
|||
font-size: 36rpx; |
|||
color: #00d18c; |
|||
font-weight: bold; |
|||
margin-top: 30rpx; |
|||
text-align: center; |
|||
} |
|||
|
|||
.search-close-icon { |
|||
position: absolute; |
|||
top: 24rpx; |
|||
right: 24rpx; |
|||
z-index: 10; |
|||
padding: 10rpx; |
|||
} |
|||
|
|||
.custom-picker-input { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding: 24rpx; |
|||
border-radius: 8rpx; |
|||
border-bottom: 2rpx solid #00d18c; |
|||
} |
|||
|
|||
.picker-actions { |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 10rpx; |
|||
} |
|||
|
|||
// 搜索弹窗样式 - 参考 market/clue 页面 |
|||
.search_popup_mask { |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
background: rgba(0, 0, 0, 0.6); |
|||
z-index: 999; |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.search_popup_content { |
|||
background: #fff; |
|||
border-bottom-left-radius: 24rpx; |
|||
border-bottom-right-radius: 24rpx; |
|||
animation: slideDown 0.3s ease-out; |
|||
width: 100%; |
|||
max-height: 80vh; |
|||
overflow: hidden; |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
@keyframes slideDown { |
|||
from { |
|||
transform: translateY(-100%); |
|||
} |
|||
to { |
|||
transform: translateY(0); |
|||
} |
|||
} |
|||
|
|||
// 弹窗搜索内容样式 |
|||
.popup_search_content { |
|||
padding: 0; |
|||
background: #fff; |
|||
min-height: 60vh; |
|||
max-height: 80vh; |
|||
display: flex; |
|||
flex-direction: column; |
|||
border-bottom-left-radius: 24rpx; |
|||
border-bottom-right-radius: 24rpx; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.popup_header { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding: 32rpx; |
|||
border-bottom: 1px solid #f0f0f0; |
|||
} |
|||
|
|||
.popup_title { |
|||
font-size: 32rpx; |
|||
font-weight: 600; |
|||
color: #333; |
|||
} |
|||
|
|||
.popup_close { |
|||
width: 60rpx; |
|||
height: 60rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
|
|||
.close_text { |
|||
font-size: 32rpx; |
|||
color: #999; |
|||
} |
|||
} |
|||
|
|||
.popup_scroll_view { |
|||
flex: 1; |
|||
padding: 32rpx; |
|||
overflow-y: auto; |
|||
} |
|||
|
|||
.popup_filter_section { |
|||
margin-bottom: 32rpx; |
|||
|
|||
&:last-child { |
|||
margin-bottom: 0; |
|||
} |
|||
} |
|||
|
|||
.popup_filter_row { |
|||
display: flex; |
|||
gap: 20rpx; |
|||
margin-bottom: 24rpx; |
|||
|
|||
&:last-child { |
|||
margin-bottom: 0; |
|||
} |
|||
} |
|||
|
|||
.popup_filter_item { |
|||
flex: 1; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 12rpx; |
|||
|
|||
&.full_width { |
|||
flex: 1; |
|||
} |
|||
|
|||
.popup_filter_label { |
|||
font-size: 26rpx; |
|||
color: #666; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.popup_filter_input { |
|||
height: 72rpx; |
|||
line-height: 72rpx; |
|||
padding: 0 16rpx; |
|||
border: 1px solid #ddd; |
|||
border-radius: 8rpx; |
|||
font-size: 28rpx; |
|||
color: #333; |
|||
background: #fff; |
|||
|
|||
&::placeholder { |
|||
color: #999; |
|||
} |
|||
} |
|||
|
|||
.popup_filter_picker { |
|||
height: 72rpx; |
|||
line-height: 72rpx; |
|||
padding: 0 16rpx; |
|||
border: 1px solid #ddd; |
|||
border-radius: 8rpx; |
|||
font-size: 28rpx; |
|||
color: #333; |
|||
background: #fff; |
|||
position: relative; |
|||
|
|||
&::after { |
|||
content: '▼'; |
|||
position: absolute; |
|||
right: 16rpx; |
|||
font-size: 20rpx; |
|||
color: #999; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.popup_filter_buttons { |
|||
display: flex; |
|||
gap: 20rpx; |
|||
padding: 32rpx; |
|||
margin-top: auto; |
|||
border-top: 1px solid #f0f0f0; |
|||
background: #fff; |
|||
border-bottom-left-radius: 24rpx; |
|||
border-bottom-right-radius: 24rpx; |
|||
} |
|||
|
|||
.popup_filter_btn { |
|||
flex: 1; |
|||
height: 72rpx; |
|||
line-height: 72rpx; |
|||
text-align: center; |
|||
border-radius: 8rpx; |
|||
font-size: 28rpx; |
|||
font-weight: 600; |
|||
|
|||
&.search_btn { |
|||
background: #00d18c; |
|||
color: #fff; |
|||
} |
|||
|
|||
&.reset_btn { |
|||
background: #f5f5f5; |
|||
color: #666; |
|||
border: 1px solid #ddd; |
|||
} |
|||
|
|||
&.close_btn { |
|||
background: #666; |
|||
color: #fff; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,129 @@ |
|||
<!--文章-详情--> |
|||
<template> |
|||
<view class="main_box"> |
|||
|
|||
<view class="main_section"> |
|||
<view class="section_1"> |
|||
<view class="titile">{{infoData.title}}</view> |
|||
<view class="content" v-html="infoData.content"></view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import commonApi from '@/api/common.js'; |
|||
|
|||
|
|||
|
|||
export default { |
|||
components: { |
|||
}, |
|||
data() { |
|||
return { |
|||
//筛选条件 |
|||
filteredData:{ |
|||
id: '1', |
|||
}, |
|||
|
|||
infoData: { |
|||
title: '文章标题xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx111111',//文章标题 |
|||
content: ` |
|||
<p>aspectFit：保持纵横比缩放图片，使图片的长边能完全显示出来</p> |
|||
<p><img src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/cat-2.png" alt="uniapp" loading="lazy"></p> |
|||
`,//文章内容 |
|||
},//文章详情 |
|||
} |
|||
}, |
|||
onLoad(options) { |
|||
this.filteredData.id = options.id//发信人id |
|||
}, |
|||
onShow(){ |
|||
this.init() |
|||
}, |
|||
//下拉刷新 |
|||
async onPullDownRefresh() { |
|||
await this.getInfo() |
|||
}, |
|||
methods: { |
|||
//初始化 |
|||
async init(){ |
|||
await this.getInfo(); |
|||
}, |
|||
//获取文章详情 |
|||
//获取课程详情 |
|||
async getInfo(){ |
|||
let res = await memberApi.courseInfo({ |
|||
id: this.filteredData.id, |
|||
}) |
|||
if(res.code != 1){ |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
this.infoData = res.data |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.main_box { |
|||
background: #fff; |
|||
word-wrap: break-word; /* 允许长单词或 URL 换行 */ |
|||
word-break: break-all; /* 强制所有字符换行 */ |
|||
} |
|||
|
|||
//自定义导航栏 |
|||
.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: #fff; |
|||
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; |
|||
gap: 30rpx; |
|||
.titile{ |
|||
font-size: 40rpx; |
|||
|
|||
} |
|||
} |
|||
|
|||
|
|||
|
|||
|
|||
} |
|||
|
|||
.describe { |
|||
color: #999999; |
|||
padding-left: 30rpx; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,707 @@ |
|||
<template> |
|||
<view class="contract-detail-container"> |
|||
|
|||
<!-- 加载状态 --> |
|||
<view v-if="loading" class="loading-container"> |
|||
<uni-load-more status="loading" content-text="加载中..."></uni-load-more> |
|||
</view> |
|||
|
|||
<!-- 合同内容 --> |
|||
<view v-else class="contract-content"> |
|||
<!-- 合同状态卡片 --> |
|||
<view class="status-card"> |
|||
<view class="status-header"> |
|||
<view class="status-info"> |
|||
<text class="contract-name">{{contractData.contract_name}}</text> |
|||
<view class="status-badge" :class="needSignButton() ? 'status-unsigned' : 'status-signed'"> |
|||
{{needSignButton() ? '待签订' : '已签订'}} |
|||
</view> |
|||
</view> |
|||
<view class="status-icon"> |
|||
<text v-if="needSignButton()" class="status-icon-text">⏰</text> |
|||
<text v-else class="status-icon-text">✅</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="status-desc"> |
|||
<text v-if="needSignButton()" class="desc-text">请仔细阅读合同内容，确认无误后进行签订</text> |
|||
<text v-else class="desc-text">合同已签订完成，您可以查看或下载合同文件</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 合同基本信息 --> |
|||
<view class="info-section"> |
|||
<view class="section-title">基本信息</view> |
|||
<view class="info-list"> |
|||
<view class="info-item"> |
|||
<text class="info-label">合同名称</text> |
|||
<text class="info-value">{{contractData.contract_name}}</text> |
|||
</view> |
|||
<view class="info-item"> |
|||
<text class="info-label">合同类型</text> |
|||
<text class="info-value">{{contractData.contract_type}}</text> |
|||
</view> |
|||
<view class="info-item"> |
|||
<text class="info-label">合同状态</text> |
|||
<text class="info-value">{{contractData.contract_status}}</text> |
|||
</view> |
|||
<view class="info-item"> |
|||
<text class="info-label">创建时间</text> |
|||
<text class="info-value">{{formatDate(contractData.created_at)}}</text> |
|||
</view> |
|||
<view class="info-item" v-if="contractData.sign_time"> |
|||
<text class="info-label">签订时间</text> |
|||
<text class="info-value">{{formatDate(contractData.sign_time)}}</text> |
|||
</view> |
|||
<view class="info-item" v-if="contractData.remarks"> |
|||
<text class="info-label">备注</text> |
|||
<text class="info-value">{{contractData.remarks}}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 合同模板预览 --> |
|||
<view class="template-section" v-if="contractData.contract_template"> |
|||
<view class="section-title">合同模板</view> |
|||
<view class="template-preview" @click="previewTemplate"> |
|||
<view class="template-icon"> |
|||
<text class="iconfont icon-file"></text> |
|||
</view> |
|||
<view class="template-info"> |
|||
<text class="template-name">{{getTemplateName()}}</text> |
|||
<text class="template-desc">点击预览合同模板</text> |
|||
</view> |
|||
<view class="template-arrow"> |
|||
<text class="iconfont icon-arrow-right"></text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 签名文件 --> |
|||
<view class="signature-section" v-if="contractData.sign_file"> |
|||
<view class="section-title">签名文件</view> |
|||
<view class="signature-preview" @click="previewSignature"> |
|||
<image :src="getSignatureUrl()" class="signature-image" mode="aspectFit"></image> |
|||
<view class="signature-overlay"> |
|||
<text class="signature-text">点击查看完整签名</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 操作历史 --> |
|||
<view class="history-section"> |
|||
<view class="section-title">操作历史</view> |
|||
<view class="history-list"> |
|||
<view class="history-item"> |
|||
<view class="history-dot"></view> |
|||
<view class="history-content"> |
|||
<text class="history-title">合同创建</text> |
|||
<text class="history-time">{{formatDate(contractData.created_at)}}</text> |
|||
</view> |
|||
</view> |
|||
<view class="history-item" v-if="contractData.sign_time"> |
|||
<view class="history-dot active"></view> |
|||
<view class="history-content"> |
|||
<text class="history-title">合同签订</text> |
|||
<text class="history-time">{{formatDate(contractData.sign_time)}}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 底部操作按钮 --> |
|||
<view class="footer-actions" v-if="!loading"> |
|||
<button v-if="needSignButton()" |
|||
class="action-btn primary" |
|||
@click="goToSign"> |
|||
立即签订 |
|||
</button> |
|||
<button v-else |
|||
class="action-btn secondary" |
|||
@click="downloadContract"> |
|||
下载合同 |
|||
</button> |
|||
</view> |
|||
|
|||
<!-- 图片预览模态框 --> |
|||
<view v-if="showImagePreview" class="image-preview-modal" @click="closeImagePreview"> |
|||
<view class="preview-content" @click.stop> |
|||
<image :src="previewImageUrl" class="preview-image" mode="aspectFit"></image> |
|||
<view class="preview-close" @click="closeImagePreview"> |
|||
<text class="iconfont icon-close"></text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import apiRoute from '@/common/axios.js' |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
contractId: 0, |
|||
contractData: {}, |
|||
loading: true, |
|||
showImagePreview: false, |
|||
previewImageUrl: '' |
|||
} |
|||
}, |
|||
onLoad(options) { |
|||
if (options.id) { |
|||
this.contractId = parseInt(options.id) |
|||
this.loadContractDetail() |
|||
} else { |
|||
uni.showToast({ |
|||
title: '合同ID不能为空', |
|||
icon: 'none' |
|||
}) |
|||
setTimeout(() => { |
|||
uni.navigateBack() |
|||
}, 1500) |
|||
} |
|||
}, |
|||
methods: { |
|||
|
|||
// 加载合同详情 |
|||
async loadContractDetail() { |
|||
this.loading = true |
|||
|
|||
try { |
|||
const response = await apiRoute.get('/contract/detail', { |
|||
id: this.contractId |
|||
}) |
|||
|
|||
if (response.code === 1) { |
|||
this.contractData = response.data.data || {} |
|||
} else { |
|||
uni.showToast({ |
|||
title: response.data.msg || '加载失败', |
|||
icon: 'none' |
|||
}) |
|||
setTimeout(() => { |
|||
uni.navigateBack() |
|||
}, 1500) |
|||
} |
|||
} catch (error) { |
|||
console.error('加载合同详情失败:', error) |
|||
uni.showToast({ |
|||
title: '网络错误，请稍后重试', |
|||
icon: 'none' |
|||
}) |
|||
} finally { |
|||
this.loading = false |
|||
} |
|||
}, |
|||
|
|||
// 判断是否需要显示签订按钮 |
|||
needSignButton() { |
|||
return this.contractData.status === 1 && ( |
|||
this.contractData.sign_file === null || |
|||
this.contractData.sign_file === '' || |
|||
this.contractData.sign_file === undefined |
|||
) |
|||
}, |
|||
|
|||
|
|||
// 前往签名页面 |
|||
goToSign() { |
|||
uni.navigateTo({ |
|||
url: `/pages-common/contract/contract_sign?id=${this.contractId}&contractName=${encodeURIComponent(this.contractData.contract_name)}` |
|||
}) |
|||
}, |
|||
|
|||
// 预览合同模板 |
|||
previewTemplate() { |
|||
if (this.contractData.contract_template) { |
|||
const templateUrl = this.$baseUrl + '/' + this.contractData.contract_template |
|||
// #ifdef APP-PLUS |
|||
plus.runtime.openURL(templateUrl) |
|||
// #endif |
|||
|
|||
// #ifdef H5 |
|||
window.open(templateUrl, '_blank') |
|||
// #endif |
|||
|
|||
// #ifdef MP-WEIXIN |
|||
uni.downloadFile({ |
|||
url: templateUrl, |
|||
success: (res) => { |
|||
uni.openDocument({ |
|||
filePath: res.tempFilePath, |
|||
fileType: this.getFileType(this.contractData.contract_template) |
|||
}) |
|||
} |
|||
}) |
|||
// #endif |
|||
} |
|||
}, |
|||
|
|||
// 预览签名文件 |
|||
previewSignature() { |
|||
if (this.contractData.sign_file) { |
|||
this.previewImageUrl = this.getSignatureUrl() |
|||
this.showImagePreview = true |
|||
} |
|||
}, |
|||
|
|||
// 关闭图片预览 |
|||
closeImagePreview() { |
|||
this.showImagePreview = false |
|||
this.previewImageUrl = '' |
|||
}, |
|||
|
|||
// 获取签名文件URL |
|||
getSignatureUrl() { |
|||
if (this.contractData.sign_file) { |
|||
if (this.contractData.sign_file.startsWith('http')) { |
|||
return this.contractData.sign_file |
|||
} else { |
|||
return this.$baseUrl + '/' + this.contractData.sign_file |
|||
} |
|||
} |
|||
return '' |
|||
}, |
|||
|
|||
// 获取模板名称 |
|||
getTemplateName() { |
|||
if (this.contractData.contract_template) { |
|||
const parts = this.contractData.contract_template.split('/') |
|||
return parts[parts.length - 1] |
|||
} |
|||
return '合同模板' |
|||
}, |
|||
|
|||
// 获取文件类型 |
|||
getFileType(fileName) { |
|||
const ext = fileName.split('.').pop().toLowerCase() |
|||
const typeMap = { |
|||
'pdf': 'pdf', |
|||
'doc': 'doc', |
|||
'docx': 'doc', |
|||
'xls': 'xls', |
|||
'xlsx': 'xls' |
|||
} |
|||
return typeMap[ext] || 'doc' |
|||
}, |
|||
|
|||
// 下载合同 |
|||
downloadContract() { |
|||
if (this.contractData.sign_file) { |
|||
const signUrl = this.getSignatureUrl() |
|||
uni.downloadFile({ |
|||
url: signUrl, |
|||
success: (res) => { |
|||
uni.showToast({ |
|||
title: '下载成功', |
|||
icon: 'success' |
|||
}) |
|||
}, |
|||
fail: () => { |
|||
uni.showToast({ |
|||
title: '下载失败', |
|||
icon: 'none' |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
}, |
|||
|
|||
// 分享合同 |
|||
shareContract() { |
|||
uni.showActionSheet({ |
|||
itemList: ['分享给好友', '保存到相册'], |
|||
success: (res) => { |
|||
if (res.tapIndex === 0) { |
|||
// 分享功能 |
|||
this.shareToFriend() |
|||
} else if (res.tapIndex === 1) { |
|||
// 保存到相册 |
|||
this.saveToAlbum() |
|||
} |
|||
} |
|||
}) |
|||
}, |
|||
|
|||
// 分享给好友 |
|||
shareToFriend() { |
|||
uni.showToast({ |
|||
title: '分享功能开发中', |
|||
icon: 'none' |
|||
}) |
|||
}, |
|||
|
|||
// 保存到相册 |
|||
saveToAlbum() { |
|||
if (this.contractData.sign_file) { |
|||
uni.saveImageToPhotosAlbum({ |
|||
filePath: this.getSignatureUrl(), |
|||
success: () => { |
|||
uni.showToast({ |
|||
title: '保存成功', |
|||
icon: 'success' |
|||
}) |
|||
}, |
|||
fail: () => { |
|||
uni.showToast({ |
|||
title: '保存失败', |
|||
icon: 'none' |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
}, |
|||
|
|||
// 格式化日期 |
|||
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') |
|||
const hour = String(date.getHours()).padStart(2, '0') |
|||
const minute = String(date.getMinutes()).padStart(2, '0') |
|||
return `${year}-${month}-${day} ${hour}:${minute}` |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.contract-detail-container { |
|||
min-height: 100vh; |
|||
background-color: #1a1a1a; |
|||
padding-bottom: 120rpx; |
|||
} |
|||
|
|||
|
|||
/* 合同内容 */ |
|||
.contract-content { |
|||
padding: 20rpx; |
|||
} |
|||
|
|||
/* 状态卡片 */ |
|||
.status-card { |
|||
background: linear-gradient(135deg, #007ACC 0%, #0056b3 100%); |
|||
border-radius: 20rpx; |
|||
padding: 40rpx; |
|||
margin-bottom: 24rpx; |
|||
color: #fff; |
|||
|
|||
.status-header { |
|||
display: flex; |
|||
align-items: flex-start; |
|||
justify-content: space-between; |
|||
margin-bottom: 24rpx; |
|||
|
|||
.status-info { |
|||
flex: 1; |
|||
|
|||
.contract-name { |
|||
font-size: 36rpx; |
|||
font-weight: 600; |
|||
display: block; |
|||
margin-bottom: 16rpx; |
|||
} |
|||
|
|||
.status-badge { |
|||
display: inline-block; |
|||
padding: 8rpx 20rpx; |
|||
border-radius: 20rpx; |
|||
font-size: 24rpx; |
|||
font-weight: 500; |
|||
background-color: rgba(255, 255, 255, 0.2); |
|||
border: 1rpx solid rgba(255, 255, 255, 0.3); |
|||
} |
|||
} |
|||
|
|||
.status-icon { |
|||
width: 80rpx; |
|||
height: 80rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
|
|||
.status-icon-text { |
|||
font-size: 48rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.status-desc { |
|||
.desc-text { |
|||
font-size: 28rpx; |
|||
opacity: 0.9; |
|||
line-height: 1.5; |
|||
} |
|||
} |
|||
} |
|||
|
|||
/* 信息区块 */ |
|||
.info-section, .template-section, .signature-section, .history-section { |
|||
background-color: #2a2a2a; |
|||
border-radius: 16rpx; |
|||
padding: 32rpx; |
|||
margin-bottom: 24rpx; |
|||
border: 1rpx solid #444; |
|||
|
|||
.section-title { |
|||
font-size: 32rpx; |
|||
font-weight: 600; |
|||
color: #fff; |
|||
margin-bottom: 24rpx; |
|||
border-left: 6rpx solid #29d3b4; |
|||
padding-left: 16rpx; |
|||
} |
|||
} |
|||
|
|||
.info-list { |
|||
.info-item { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-bottom: 24rpx; |
|||
|
|||
&:last-child { |
|||
margin-bottom: 0; |
|||
} |
|||
|
|||
.info-label { |
|||
font-size: 28rpx; |
|||
color: #999; |
|||
width: 140rpx; |
|||
flex-shrink: 0; |
|||
} |
|||
|
|||
.info-value { |
|||
font-size: 28rpx; |
|||
color: #ccc; |
|||
flex: 1; |
|||
} |
|||
} |
|||
} |
|||
|
|||
/* 模板预览 */ |
|||
.template-preview { |
|||
display: flex; |
|||
align-items: center; |
|||
padding: 24rpx; |
|||
background-color: #1a1a1a; |
|||
border-radius: 12rpx; |
|||
cursor: pointer; |
|||
border: 1rpx solid #444; |
|||
|
|||
.template-icon { |
|||
width: 60rpx; |
|||
height: 60rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
background-color: #29d3b4; |
|||
border-radius: 12rpx; |
|||
margin-right: 20rpx; |
|||
|
|||
.iconfont { |
|||
font-size: 32rpx; |
|||
color: #fff; |
|||
} |
|||
} |
|||
|
|||
.template-info { |
|||
flex: 1; |
|||
|
|||
.template-name { |
|||
font-size: 28rpx; |
|||
color: #fff; |
|||
font-weight: 500; |
|||
display: block; |
|||
margin-bottom: 8rpx; |
|||
} |
|||
|
|||
.template-desc { |
|||
font-size: 24rpx; |
|||
color: #999; |
|||
} |
|||
} |
|||
|
|||
.template-arrow { |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
|
|||
.iconfont { |
|||
font-size: 24rpx; |
|||
color: #666; |
|||
} |
|||
} |
|||
} |
|||
|
|||
/* 签名预览 */ |
|||
.signature-preview { |
|||
position: relative; |
|||
width: 100%; |
|||
height: 300rpx; |
|||
border-radius: 12rpx; |
|||
overflow: hidden; |
|||
cursor: pointer; |
|||
|
|||
.signature-image { |
|||
width: 100%; |
|||
height: 100%; |
|||
border-radius: 12rpx; |
|||
} |
|||
|
|||
.signature-overlay { |
|||
position: absolute; |
|||
bottom: 0; |
|||
left: 0; |
|||
right: 0; |
|||
background: linear-gradient(transparent, rgba(0, 0, 0, 0.7)); |
|||
padding: 20rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
|
|||
.signature-text { |
|||
color: #fff; |
|||
font-size: 24rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
/* 操作历史 */ |
|||
.history-list { |
|||
.history-item { |
|||
display: flex; |
|||
align-items: flex-start; |
|||
margin-bottom: 32rpx; |
|||
|
|||
&:last-child { |
|||
margin-bottom: 0; |
|||
} |
|||
|
|||
.history-dot { |
|||
width: 20rpx; |
|||
height: 20rpx; |
|||
border-radius: 50%; |
|||
background-color: #e5e5e5; |
|||
margin-right: 20rpx; |
|||
margin-top: 8rpx; |
|||
flex-shrink: 0; |
|||
|
|||
&.active { |
|||
background-color: #29d3b4; |
|||
} |
|||
} |
|||
|
|||
.history-content { |
|||
flex: 1; |
|||
|
|||
.history-title { |
|||
font-size: 28rpx; |
|||
color: #fff; |
|||
font-weight: 500; |
|||
display: block; |
|||
margin-bottom: 8rpx; |
|||
} |
|||
|
|||
.history-time { |
|||
font-size: 24rpx; |
|||
color: #999; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
/* 底部操作按钮 */ |
|||
.footer-actions { |
|||
position: fixed; |
|||
bottom: 0; |
|||
left: 0; |
|||
right: 0; |
|||
background-color: #2a2a2a; |
|||
padding: 24rpx 32rpx; |
|||
border-top: 1rpx solid #444; |
|||
z-index: 100; |
|||
|
|||
.action-btn { |
|||
width: 100%; |
|||
height: 88rpx; |
|||
border-radius: 12rpx; |
|||
font-size: 32rpx; |
|||
font-weight: 600; |
|||
border: none; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
|
|||
&.primary { |
|||
background-color: #29d3b4; |
|||
color: #fff; |
|||
|
|||
&:active { |
|||
background-color: #22b39a; |
|||
} |
|||
} |
|||
|
|||
&.secondary { |
|||
background-color: #f5f5f5; |
|||
color: #666; |
|||
|
|||
&:active { |
|||
background-color: #e5e5e5; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
/* 加载状态 */ |
|||
.loading-container { |
|||
padding: 120rpx 40rpx; |
|||
text-align: center; |
|||
} |
|||
|
|||
/* 图片预览模态框 */ |
|||
.image-preview-modal { |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
background-color: rgba(0, 0, 0, 0.8); |
|||
z-index: 1000; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
|
|||
.preview-content { |
|||
position: relative; |
|||
width: 90%; |
|||
height: 70%; |
|||
|
|||
.preview-image { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
|
|||
.preview-close { |
|||
position: absolute; |
|||
top: -60rpx; |
|||
right: 0; |
|||
width: 60rpx; |
|||
height: 60rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
|
|||
.iconfont { |
|||
font-size: 36rpx; |
|||
color: #fff; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,733 @@ |
|||
<template> |
|||
<view class="contract-sign-container"> |
|||
<!-- 顶部操作栏 --> |
|||
<view class="top-actions"> |
|||
<view class="clear-btn" @click="clearSignature"> |
|||
<text class="clear-text">清除签名</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 合同信息 --> |
|||
<view class="contract-info"> |
|||
<view class="info-card"> |
|||
<text class="contract-name">{{contractName}}</text> |
|||
<text class="sign-tip">请在下方签名区域进行手写签名</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 签名区域 --> |
|||
<view class="signature-section"> |
|||
<view class="signature-title"> |
|||
<text class="title-text">请在此区域签名</text> |
|||
<text class="tip-text">支持手指或触控笔签名</text> |
|||
</view> |
|||
|
|||
<!-- Canvas 签名板 --> |
|||
<view class="signature-canvas-container"> |
|||
<canvas |
|||
class="signature-canvas" |
|||
canvas-id="signatureCanvas" |
|||
@touchstart="touchStart" |
|||
@touchmove="touchMove" |
|||
@touchend="touchEnd" |
|||
disable-scroll="true"> |
|||
</canvas> |
|||
|
|||
<!-- 签名提示 --> |
|||
<view v-if="!hasSigned" class="signature-placeholder"> |
|||
<text class="placeholder-icon">✍️</text> |
|||
<text class="placeholder-text">请在此处签名</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 签名工具栏 --> |
|||
<view class="signature-tools"> |
|||
<view class="tool-group"> |
|||
<text class="tool-label">笔迹颜色：</text> |
|||
<view class="color-picker"> |
|||
<view v-for="color in penColors" |
|||
:key="color" |
|||
class="color-item" |
|||
:class="currentColor === color ? 'active' : ''" |
|||
:style="{ backgroundColor: color }" |
|||
@click="setPenColor(color)"> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="tool-group"> |
|||
<text class="tool-label">笔迹粗细：</text> |
|||
<view class="width-picker"> |
|||
<view v-for="width in penWidths" |
|||
:key="width" |
|||
class="width-item" |
|||
:class="currentWidth === width ? 'active' : ''" |
|||
@click="setPenWidth(width)"> |
|||
<view class="width-preview" :style="{ width: width + 'rpx', height: width + 'rpx' }"></view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 签名预览 --> |
|||
<view v-if="signatureImageUrl" class="preview-section"> |
|||
<view class="preview-title">签名预览</view> |
|||
<view class="preview-image-container"> |
|||
<image :src="signatureImageUrl" class="preview-image" mode="aspectFit"></image> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 底部操作按钮 --> |
|||
<view class="footer-actions"> |
|||
<button class="action-btn secondary" @click="previewSignature">预览签名</button> |
|||
<button class="action-btn primary" |
|||
@click="submitSignature" |
|||
:disabled="!hasSigned || submitting" |
|||
:loading="submitting"> |
|||
{{submitting ? '提交中...' : '确认签订'}} |
|||
</button> |
|||
</view> |
|||
|
|||
<!-- 签名预览弹窗 --> |
|||
<view v-if="showPreview" class="preview-modal" @click="closePreview"> |
|||
<view class="modal-content" @click.stop> |
|||
<view class="modal-header"> |
|||
<text class="modal-title">签名预览</text> |
|||
<view class="modal-close" @click="closePreview"> |
|||
<text class="iconfont icon-close"></text> |
|||
</view> |
|||
</view> |
|||
<view class="modal-body"> |
|||
<image v-if="signatureImageUrl" :src="signatureImageUrl" class="modal-image" mode="aspectFit"></image> |
|||
<text v-else class="no-signature">暂无签名</text> |
|||
</view> |
|||
<view class="modal-footer"> |
|||
<button class="modal-btn secondary" @click="closePreview">取消</button> |
|||
<button class="modal-btn primary" @click="confirmSignature">确认签订</button> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import apiRoute from '@/common/axios.js' |
|||
import { uploadFile } from '@/common/util.js'; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
contractId: 0, |
|||
contractName: '', |
|||
canvas: null, |
|||
ctx: null, |
|||
isDrawing: false, |
|||
lastPoint: null, |
|||
hasSigned: false, |
|||
signatureImageUrl: '', |
|||
submitting: false, |
|||
showPreview: false, |
|||
|
|||
// 画笔设置 |
|||
currentColor: '#000000', |
|||
currentWidth: 6, |
|||
penColors: ['#000000', '#FF0000', '#0000FF', '#008000', '#800080'], |
|||
penWidths: [3, 6, 9, 12], |
|||
|
|||
// Canvas 尺寸 |
|||
canvasWidth: 0, |
|||
canvasHeight: 0, |
|||
pixelRatio: 1 |
|||
} |
|||
}, |
|||
onLoad(options) { |
|||
if (options.id) { |
|||
this.contractId = parseInt(options.id) |
|||
} |
|||
if (options.contractName) { |
|||
this.contractName = decodeURIComponent(options.contractName) |
|||
} |
|||
|
|||
this.$nextTick(() => { |
|||
this.initCanvas() |
|||
}) |
|||
}, |
|||
onReady() { |
|||
this.initCanvas() |
|||
}, |
|||
methods: { |
|||
// 初始化Canvas |
|||
initCanvas() { |
|||
const query = uni.createSelectorQuery().in(this) |
|||
query.select('.signature-canvas').boundingClientRect((rect) => { |
|||
if (rect) { |
|||
this.canvasWidth = rect.width |
|||
this.canvasHeight = rect.height |
|||
|
|||
// 获取设备像素比 |
|||
const systemInfo = uni.getSystemInfoSync() |
|||
this.pixelRatio = systemInfo.pixelRatio || 1 |
|||
|
|||
// 创建Canvas上下文 |
|||
this.canvas = uni.createCanvasContext('signatureCanvas', this) |
|||
this.ctx = this.canvas |
|||
|
|||
// 设置Canvas尺寸 |
|||
this.ctx.scale(this.pixelRatio, this.pixelRatio) |
|||
|
|||
// 设置画笔属性 |
|||
this.ctx.lineWidth = this.currentWidth |
|||
this.ctx.strokeStyle = this.currentColor |
|||
this.ctx.lineCap = 'round' |
|||
this.ctx.lineJoin = 'round' |
|||
|
|||
// 清空Canvas |
|||
this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight) |
|||
this.ctx.draw() |
|||
} |
|||
}).exec() |
|||
}, |
|||
|
|||
// 触摸开始 |
|||
touchStart(e) { |
|||
if (!this.ctx) return |
|||
|
|||
this.isDrawing = true |
|||
const touch = e.touches[0] |
|||
this.lastPoint = { |
|||
x: touch.x, |
|||
y: touch.y |
|||
} |
|||
|
|||
this.ctx.beginPath() |
|||
this.ctx.moveTo(touch.x, touch.y) |
|||
}, |
|||
|
|||
// 触摸移动 |
|||
touchMove(e) { |
|||
if (!this.ctx || !this.isDrawing) return |
|||
|
|||
const touch = e.touches[0] |
|||
const currentPoint = { |
|||
x: touch.x, |
|||
y: touch.y |
|||
} |
|||
|
|||
this.ctx.lineTo(currentPoint.x, currentPoint.y) |
|||
this.ctx.stroke() |
|||
this.ctx.draw(true) |
|||
|
|||
this.lastPoint = currentPoint |
|||
this.hasSigned = true |
|||
}, |
|||
|
|||
// 触摸结束 |
|||
touchEnd(e) { |
|||
this.isDrawing = false |
|||
this.lastPoint = null |
|||
}, |
|||
|
|||
// 设置画笔颜色 |
|||
setPenColor(color) { |
|||
this.currentColor = color |
|||
if (this.ctx) { |
|||
this.ctx.strokeStyle = color |
|||
} |
|||
}, |
|||
|
|||
// 设置画笔粗细 |
|||
setPenWidth(width) { |
|||
this.currentWidth = width |
|||
if (this.ctx) { |
|||
this.ctx.lineWidth = width |
|||
} |
|||
}, |
|||
|
|||
// 清除签名 |
|||
clearSignature() { |
|||
if (this.ctx) { |
|||
this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight) |
|||
this.ctx.draw() |
|||
this.hasSigned = false |
|||
this.signatureImageUrl = '' |
|||
} |
|||
}, |
|||
|
|||
// 预览签名 |
|||
previewSignature() { |
|||
if (!this.hasSigned) { |
|||
uni.showToast({ |
|||
title: '请先进行签名', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
|
|||
this.generateSignatureImage(() => { |
|||
this.showPreview = true |
|||
}) |
|||
}, |
|||
|
|||
// 生成签名图片 |
|||
generateSignatureImage(callback) { |
|||
if (!this.canvas) return |
|||
|
|||
uni.canvasToTempFilePath({ |
|||
canvasId: 'signatureCanvas', |
|||
success: (res) => { |
|||
this.signatureImageUrl = res.tempFilePath |
|||
if (callback) callback() |
|||
}, |
|||
fail: (err) => { |
|||
console.error('生成签名图片失败:', err) |
|||
uni.showToast({ |
|||
title: '生成签名失败', |
|||
icon: 'none' |
|||
}) |
|||
} |
|||
}, this) |
|||
}, |
|||
|
|||
// 关闭预览 |
|||
closePreview() { |
|||
this.showPreview = false |
|||
}, |
|||
|
|||
// 确认签名 |
|||
confirmSignature() { |
|||
this.closePreview() |
|||
this.submitSignature() |
|||
}, |
|||
|
|||
// 提交签名 |
|||
submitSignature() { |
|||
if (!this.hasSigned) { |
|||
uni.showToast({ |
|||
title: '请先进行签名', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
|
|||
this.generateSignatureImage(() => { |
|||
this.uploadSignature() |
|||
}) |
|||
}, |
|||
|
|||
// 上传签名 |
|||
async uploadSignature() { |
|||
if (!this.signatureImageUrl) { |
|||
uni.showToast({ |
|||
title: '签名生成失败，请重试', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
|
|||
this.submitting = true |
|||
|
|||
try { |
|||
// 先上传签名图片 |
|||
const uploadResult = await this.uploadSignatureFile() |
|||
|
|||
if (!uploadResult.success) { |
|||
throw new Error(uploadResult.message || '上传签名文件失败') |
|||
} |
|||
|
|||
// 提交签名信息 |
|||
const response = await apiRoute.post('/member/contract_sign', { |
|||
contract_sign_id: this.contractId, |
|||
pic_file: uploadResult.url |
|||
}) |
|||
|
|||
if (response.code === 1) { |
|||
uni.showToast({ |
|||
title: '签名提交成功', |
|||
icon: 'success', |
|||
duration: 2000 |
|||
}) |
|||
|
|||
setTimeout(() => { |
|||
// 返回到合同详情页面 |
|||
uni.navigateBack({ |
|||
delta: 1 |
|||
}) |
|||
}, 2000) |
|||
} else { |
|||
throw new Error(response.data.msg || '提交签名失败') |
|||
} |
|||
} catch (error) { |
|||
console.error('提交签名失败:', error) |
|||
uni.showToast({ |
|||
title: error.message || '网络错误，请稍后重试', |
|||
icon: 'none' |
|||
}) |
|||
} finally { |
|||
this.submitting = false |
|||
} |
|||
}, |
|||
|
|||
// 上传签名文件 |
|||
async uploadSignatureFile() { |
|||
return new Promise((resolve, reject) => { |
|||
uploadFile( |
|||
this.signatureImageUrl, |
|||
(fileData) => { |
|||
resolve({ success: true, url: fileData.url }); |
|||
}, |
|||
(err) => { |
|||
resolve({ success: false, message: '上传失败' }); |
|||
} |
|||
); |
|||
}); |
|||
}, |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.contract-sign-container { |
|||
min-height: 100vh; |
|||
background-color: #1a1a1a; |
|||
padding-bottom: 120rpx; |
|||
} |
|||
|
|||
/* 顶部操作栏 */ |
|||
.top-actions { |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
padding: 20rpx 32rpx; |
|||
|
|||
.clear-btn { |
|||
padding: 12rpx 24rpx; |
|||
background-color: #29d3b4; |
|||
border-radius: 8rpx; |
|||
|
|||
.clear-text { |
|||
font-size: 28rpx; |
|||
color: #fff; |
|||
} |
|||
} |
|||
} |
|||
|
|||
/* 合同信息 */ |
|||
.contract-info { |
|||
padding: 20rpx; |
|||
|
|||
.info-card { |
|||
background-color: #2a2a2a; |
|||
border-radius: 16rpx; |
|||
padding: 32rpx; |
|||
text-align: center; |
|||
border: 1rpx solid #444; |
|||
|
|||
.contract-name { |
|||
font-size: 32rpx; |
|||
font-weight: 600; |
|||
color: #fff; |
|||
display: block; |
|||
margin-bottom: 16rpx; |
|||
} |
|||
|
|||
.sign-tip { |
|||
font-size: 26rpx; |
|||
color: #999; |
|||
} |
|||
} |
|||
} |
|||
|
|||
/* 签名区域 */ |
|||
.signature-section { |
|||
padding: 0 20rpx; |
|||
margin-bottom: 40rpx; |
|||
|
|||
.signature-title { |
|||
text-align: center; |
|||
margin-bottom: 24rpx; |
|||
|
|||
.title-text { |
|||
font-size: 30rpx; |
|||
font-weight: 600; |
|||
color: #fff; |
|||
display: block; |
|||
margin-bottom: 8rpx; |
|||
} |
|||
|
|||
.tip-text { |
|||
font-size: 24rpx; |
|||
color: #999; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.signature-canvas-container { |
|||
position: relative; |
|||
background-color: #fff; |
|||
border-radius: 16rpx; |
|||
margin-bottom: 32rpx; |
|||
overflow: hidden; |
|||
border: 2rpx dashed #29d3b4; |
|||
|
|||
.signature-canvas { |
|||
width: 100%; |
|||
height: 400rpx; |
|||
display: block; |
|||
} |
|||
|
|||
.signature-placeholder { |
|||
position: absolute; |
|||
top: 50%; |
|||
left: 50%; |
|||
transform: translate(-50%, -50%); |
|||
text-align: center; |
|||
pointer-events: none; |
|||
|
|||
.placeholder-icon { |
|||
font-size: 60rpx; |
|||
display: block; |
|||
margin-bottom: 16rpx; |
|||
} |
|||
|
|||
.placeholder-text { |
|||
font-size: 28rpx; |
|||
color: #999; |
|||
} |
|||
} |
|||
} |
|||
|
|||
/* 签名工具栏 */ |
|||
.signature-tools { |
|||
background-color: #2a2a2a; |
|||
border-radius: 16rpx; |
|||
padding: 24rpx; |
|||
border: 1rpx solid #444; |
|||
|
|||
.tool-group { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-bottom: 24rpx; |
|||
|
|||
&:last-child { |
|||
margin-bottom: 0; |
|||
} |
|||
|
|||
.tool-label { |
|||
font-size: 26rpx; |
|||
color: #ccc; |
|||
margin-right: 20rpx; |
|||
min-width: 120rpx; |
|||
} |
|||
} |
|||
|
|||
.color-picker { |
|||
display: flex; |
|||
gap: 16rpx; |
|||
|
|||
.color-item { |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
border-radius: 50%; |
|||
border: 3rpx solid transparent; |
|||
cursor: pointer; |
|||
|
|||
&.active { |
|||
border-color: #29d3b4; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.width-picker { |
|||
display: flex; |
|||
gap: 20rpx; |
|||
|
|||
.width-item { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
width: 50rpx; |
|||
height: 50rpx; |
|||
border-radius: 8rpx; |
|||
border: 2rpx solid #e5e5e5; |
|||
cursor: pointer; |
|||
|
|||
&.active { |
|||
border-color: #29d3b4; |
|||
background-color: rgba(41, 211, 180, 0.1); |
|||
} |
|||
|
|||
.width-preview { |
|||
background-color: #333; |
|||
border-radius: 50%; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
/* 签名预览 */ |
|||
.preview-section { |
|||
padding: 0 20rpx; |
|||
margin-bottom: 40rpx; |
|||
|
|||
.preview-title { |
|||
font-size: 30rpx; |
|||
font-weight: 600; |
|||
color: #fff; |
|||
text-align: center; |
|||
margin-bottom: 24rpx; |
|||
} |
|||
|
|||
.preview-image-container { |
|||
background-color: #2a2a2a; |
|||
border-radius: 16rpx; |
|||
padding: 32rpx; |
|||
border: 1rpx solid #444; |
|||
|
|||
.preview-image { |
|||
width: 100%; |
|||
height: 200rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
/* 底部操作按钮 */ |
|||
.footer-actions { |
|||
position: fixed; |
|||
bottom: 0; |
|||
left: 0; |
|||
right: 0; |
|||
background-color: #2a2a2a; |
|||
padding: 24rpx 32rpx; |
|||
border-top: 1rpx solid #444; |
|||
display: flex; |
|||
gap: 24rpx; |
|||
z-index: 100; |
|||
|
|||
.action-btn { |
|||
flex: 1; |
|||
height: 88rpx; |
|||
border-radius: 12rpx; |
|||
font-size: 32rpx; |
|||
font-weight: 600; |
|||
border: none; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
|
|||
&.primary { |
|||
background-color: #29d3b4; |
|||
color: #fff; |
|||
|
|||
&:active:not(:disabled) { |
|||
background-color: #22b39a; |
|||
} |
|||
|
|||
&:disabled { |
|||
background-color: #666; |
|||
color: #999; |
|||
} |
|||
} |
|||
|
|||
&.secondary { |
|||
background-color: #444; |
|||
color: #ccc; |
|||
|
|||
&:active { |
|||
background-color: #555; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
/* 预览弹窗 */ |
|||
.preview-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: #fff; |
|||
border-radius: 20rpx; |
|||
width: 80%; |
|||
max-height: 70%; |
|||
overflow: hidden; |
|||
|
|||
.modal-header { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
padding: 32rpx; |
|||
border-bottom: 1rpx solid #e5e5e5; |
|||
|
|||
.modal-title { |
|||
font-size: 32rpx; |
|||
font-weight: 600; |
|||
color: #333; |
|||
} |
|||
|
|||
.modal-close { |
|||
width: 48rpx; |
|||
height: 48rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
|
|||
.iconfont { |
|||
font-size: 32rpx; |
|||
color: #999; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.modal-body { |
|||
padding: 32rpx; |
|||
text-align: center; |
|||
|
|||
.modal-image { |
|||
width: 100%; |
|||
height: 300rpx; |
|||
} |
|||
|
|||
.no-signature { |
|||
font-size: 28rpx; |
|||
color: #999; |
|||
padding: 60rpx 0; |
|||
} |
|||
} |
|||
|
|||
.modal-footer { |
|||
display: flex; |
|||
gap: 24rpx; |
|||
padding: 32rpx; |
|||
border-top: 1rpx solid #e5e5e5; |
|||
|
|||
.modal-btn { |
|||
flex: 1; |
|||
height: 72rpx; |
|||
border-radius: 12rpx; |
|||
font-size: 28rpx; |
|||
font-weight: 600; |
|||
border: none; |
|||
|
|||
&.primary { |
|||
background-color: #29d3b4; |
|||
color: #fff; |
|||
} |
|||
|
|||
&.secondary { |
|||
background-color: #f5f5f5; |
|||
color: #666; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,411 @@ |
|||
<template> |
|||
<view class="contract-container"> |
|||
|
|||
<!-- 筛选栏 --> |
|||
<view class="filter-bar"> |
|||
<view class="filter-item" |
|||
:class="filterStatus === '' ? 'active' : ''" |
|||
@click="filterContract('')"> |
|||
全部 |
|||
</view> |
|||
<view class="filter-item" |
|||
:class="filterStatus === 'unsigned' ? 'active' : ''" |
|||
@click="filterContract('unsigned')"> |
|||
待签订 |
|||
</view> |
|||
<view class="filter-item" |
|||
:class="filterStatus === 'signed' ? 'active' : ''" |
|||
@click="filterContract('signed')"> |
|||
已签订 |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 合同列表 --> |
|||
<view class="contract-list"> |
|||
<view v-if="loading" class="loading-container"> |
|||
<uni-load-more status="loading" content-text="加载中..."></uni-load-more> |
|||
</view> |
|||
|
|||
<view v-else-if="filteredContracts.length === 0" class="empty-container"> |
|||
<view class="empty-icon">📄</view> |
|||
<view class="empty-text">暂无合同数据</view> |
|||
</view> |
|||
|
|||
<view v-else> |
|||
<view v-for="contract in filteredContracts" |
|||
:key="contract.id" |
|||
class="contract-item" |
|||
@click="goToDetail(contract)"> |
|||
|
|||
<!-- 合同卡片 --> |
|||
<view class="contract-card"> |
|||
<!-- 合同标题和状态 --> |
|||
<view class="contract-header"> |
|||
<view class="contract-title"> |
|||
<text class="title-text">{{contract.contract_name}}</text> |
|||
<view class="contract-status" :class="needSignButton(contract) ? 'status-unsigned' : 'status-signed'"> |
|||
{{needSignButton(contract) ? '待签订' : '已签订'}} |
|||
</view> |
|||
</view> |
|||
<view class="contract-arrow"> |
|||
<text class="iconfont icon-arrow-right"></text> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 合同信息 --> |
|||
<view class="contract-info"> |
|||
<view class="info-row"> |
|||
<text class="info-label">合同类型：</text> |
|||
<text class="info-value">{{contract.contract_type}}</text> |
|||
</view> |
|||
<view class="info-row"> |
|||
<text class="info-label">创建时间：</text> |
|||
<text class="info-value">{{formatDate(contract.created_at)}}</text> |
|||
</view> |
|||
<view class="info-row" v-if="contract.sign_time"> |
|||
<text class="info-label">签订时间：</text> |
|||
<text class="info-value">{{formatDate(contract.sign_time)}}</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 操作按钮 --> |
|||
<view class="contract-actions" v-if="needSignButton(contract)"> |
|||
<button class="sign-btn" @click.stop="goToSign(contract)"> |
|||
立即签订 |
|||
</button> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 底部加载更多 --> |
|||
<view v-if="hasMore && !loading && filteredContracts.length > 0" class="load-more"> |
|||
<uni-load-more :status="loadMoreStatus" @clickLoadMore="loadMore"></uni-load-more> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import apiRoute from '@/common/axios.js' |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
loading: true, |
|||
contracts: [], |
|||
filterStatus: '', // '', 'unsigned', 'signed' |
|||
currentPage: 1, |
|||
pageSize: 10, |
|||
hasMore: true, |
|||
loadMoreStatus: 'more' |
|||
} |
|||
}, |
|||
computed: { |
|||
filteredContracts() { |
|||
if (this.filterStatus === '') { |
|||
return this.contracts |
|||
} else if (this.filterStatus === 'unsigned') { |
|||
return this.contracts.filter(contract => this.needSignButton(contract)) |
|||
} else if (this.filterStatus === 'signed') { |
|||
return this.contracts.filter(contract => !this.needSignButton(contract)) |
|||
} |
|||
return this.contracts |
|||
} |
|||
}, |
|||
onLoad() { |
|||
this.loadContracts() |
|||
}, |
|||
onPullDownRefresh() { |
|||
this.refreshContracts() |
|||
}, |
|||
onReachBottom() { |
|||
if (this.hasMore && !this.loading) { |
|||
this.loadMore() |
|||
} |
|||
}, |
|||
methods: { |
|||
|
|||
// 加载合同列表 |
|||
async loadContracts(refresh = false) { |
|||
if (refresh) { |
|||
this.currentPage = 1 |
|||
this.hasMore = true |
|||
this.contracts = [] |
|||
} |
|||
|
|||
this.loading = true |
|||
this.loadMoreStatus = 'loading' |
|||
|
|||
try { |
|||
const response = await apiRoute.get('/contract/myContracts', { |
|||
page: this.currentPage, |
|||
limit: this.pageSize |
|||
}) |
|||
if (response.code === 1) { |
|||
const newContracts = response.data.data || [] |
|||
if (refresh) { |
|||
this.contracts = newContracts |
|||
} else { |
|||
this.contracts = [...this.contracts, ...newContracts] |
|||
} |
|||
|
|||
// 检查是否还有更多数据 |
|||
this.hasMore = newContracts.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() |
|||
} |
|||
} |
|||
}, |
|||
|
|||
// 刷新合同列表 |
|||
refreshContracts() { |
|||
this.loadContracts(true) |
|||
}, |
|||
|
|||
// 加载更多 |
|||
loadMore() { |
|||
if (this.hasMore && !this.loading) { |
|||
this.currentPage++ |
|||
this.loadContracts() |
|||
} |
|||
}, |
|||
|
|||
// 筛选合同 |
|||
filterContract(status) { |
|||
this.filterStatus = status |
|||
}, |
|||
|
|||
// 前往合同详情 |
|||
goToDetail(contract) { |
|||
uni.navigateTo({ |
|||
url: `/pages-common/contract/contract_detail?id=${contract.id}` |
|||
}) |
|||
}, |
|||
|
|||
// 前往签名页面 |
|||
goToSign(contract) { |
|||
uni.navigateTo({ |
|||
url: `/pages-common/contract/contract_sign?id=${contract.id}&contractName=${encodeURIComponent(contract.contract_name)}` |
|||
}) |
|||
}, |
|||
|
|||
// 判断是否需要显示签订按钮 |
|||
needSignButton(contract) { |
|||
return contract.status == 1 |
|||
}, |
|||
|
|||
|
|||
// 格式化日期 |
|||
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}` |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.contract-container { |
|||
min-height: 100vh; |
|||
background-color: #1a1a1a; |
|||
} |
|||
|
|||
|
|||
/* 筛选栏 */ |
|||
.filter-bar { |
|||
display: flex; |
|||
background-color: #2a2a2a; |
|||
padding: 24rpx 32rpx; |
|||
margin-bottom: 20rpx; |
|||
border-bottom: 1rpx solid #444; |
|||
|
|||
.filter-item { |
|||
flex: 1; |
|||
text-align: center; |
|||
padding: 16rpx 24rpx; |
|||
font-size: 28rpx; |
|||
color: #ccc; |
|||
border-radius: 8rpx; |
|||
transition: all 0.3s; |
|||
|
|||
&.active { |
|||
background-color: #29d3b4; |
|||
color: #fff; |
|||
} |
|||
} |
|||
} |
|||
|
|||
/* 合同列表 */ |
|||
.contract-list { |
|||
padding: 0 20rpx; |
|||
} |
|||
|
|||
.contract-item { |
|||
margin-bottom: 24rpx; |
|||
} |
|||
|
|||
.contract-card { |
|||
background-color: #2a2a2a; |
|||
border-radius: 16rpx; |
|||
padding: 32rpx; |
|||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.3); |
|||
border: 1rpx solid #444; |
|||
} |
|||
|
|||
.contract-header { |
|||
display: flex; |
|||
align-items: flex-start; |
|||
justify-content: space-between; |
|||
margin-bottom: 24rpx; |
|||
|
|||
.contract-title { |
|||
flex: 1; |
|||
|
|||
.title-text { |
|||
font-size: 32rpx; |
|||
font-weight: 600; |
|||
color: #fff; |
|||
display: block; |
|||
margin-bottom: 12rpx; |
|||
} |
|||
|
|||
.contract-status { |
|||
display: inline-block; |
|||
padding: 8rpx 16rpx; |
|||
border-radius: 20rpx; |
|||
font-size: 24rpx; |
|||
font-weight: 500; |
|||
|
|||
&.status-unsigned { |
|||
background-color: #fff3cd; |
|||
color: #856404; |
|||
border: 1rpx solid #ffeaa7; |
|||
} |
|||
|
|||
&.status-signed { |
|||
background-color: #d4edda; |
|||
color: #155724; |
|||
border: 1rpx solid #c3e6cb; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.contract-arrow { |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
|
|||
.iconfont { |
|||
font-size: 24rpx; |
|||
color: #666; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.contract-info { |
|||
.info-row { |
|||
display: flex; |
|||
margin-bottom: 16rpx; |
|||
|
|||
.info-label { |
|||
font-size: 26rpx; |
|||
color: #999; |
|||
width: 140rpx; |
|||
flex-shrink: 0; |
|||
} |
|||
|
|||
.info-value { |
|||
font-size: 26rpx; |
|||
color: #ccc; |
|||
flex: 1; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.contract-actions { |
|||
margin-top: 24rpx; |
|||
padding-top: 24rpx; |
|||
border-top: 1rpx solid #f0f0f0; |
|||
|
|||
.sign-btn { |
|||
width: 100%; |
|||
height: 72rpx; |
|||
background-color: #29d3b4; |
|||
color: #fff; |
|||
border: none; |
|||
border-radius: 12rpx; |
|||
font-size: 28rpx; |
|||
font-weight: 600; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
|
|||
&:active { |
|||
background-color: #22b39a; |
|||
} |
|||
} |
|||
} |
|||
|
|||
/* 加载状态 */ |
|||
.loading-container { |
|||
padding: 60rpx 0; |
|||
text-align: center; |
|||
} |
|||
|
|||
.empty-container { |
|||
text-align: center; |
|||
padding: 120rpx 40rpx; |
|||
|
|||
.empty-icon { |
|||
font-size: 120rpx; |
|||
margin-bottom: 24rpx; |
|||
} |
|||
|
|||
.empty-text { |
|||
font-size: 28rpx; |
|||
color: #666; |
|||
} |
|||
} |
|||
|
|||
.load-more { |
|||
padding: 40rpx 0; |
|||
} |
|||
|
|||
/* 动画效果 */ |
|||
.contract-item { |
|||
animation: slideIn 0.3s ease-out; |
|||
} |
|||
|
|||
@keyframes slideIn { |
|||
from { |
|||
opacity: 0; |
|||
transform: translateY(20rpx); |
|||
} |
|||
to { |
|||
opacity: 1; |
|||
transform: translateY(0); |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,235 @@ |
|||
<!--授课统计-详情--> |
|||
<template> |
|||
<view class="main_box"> |
|||
|
|||
<view class="main_section"> |
|||
<view class="section"> |
|||
<view class="text_input"> |
|||
<fui-textarea placeholder="请输入反馈内容" v-model="formData.feedback_text"></fui-textarea> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="section"> |
|||
<view class="upload_box"> |
|||
<view>上传图片</view> |
|||
<AQUplodeImgMulti :inputName="`attachment_url_arr`" :inputValue="formData.attachment_url_arr || []" :uploadApiUrl="uploadApiUrl" :maxFileNum="1" |
|||
@AQUploadSuccess="AQUploadSuccess" /> |
|||
</view> |
|||
</view> |
|||
|
|||
|
|||
<!-- <view class="section">--> |
|||
<!-- <view class="input_box">--> |
|||
<!-- <fui-input label="邮箱方式" borderTop placeholder="请输入邮箱" v-model="formData.mailbox"></fui-input>--> |
|||
<!-- </view>--> |
|||
<!-- </view>--> |
|||
|
|||
<!-- <view class="describe">--> |
|||
<!-- 反馈的相关问题会第一时间通过邮箱解答。--> |
|||
<!-- </view>--> |
|||
|
|||
<view class="btn" @click="submitForm()">提交</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import apiRoute from '@/api/apiRoute.js'; |
|||
import memberApi from '@/api/member.js'; |
|||
import AQUplodeImgMulti from '@/components/AQ/AQUplodeImgMulti'; |
|||
import AQTabber from "@/components/AQ/AQTabber" |
|||
import { |
|||
Api_url |
|||
} from "@/common/config.js"; |
|||
|
|||
|
|||
export default { |
|||
components: { |
|||
AQTabber, |
|||
AQUplodeImgMulti, |
|||
}, |
|||
data() { |
|||
return { |
|||
uploadApiUrl:`${Api_url}/memberUploadImage`,//上传文件接口的url |
|||
formData: { |
|||
attachment_url_arr: [], |
|||
attachment_url:undefined,//图片地址,多个使用,号拼接 |
|||
feedback_text:'',//反馈内容 |
|||
user_id:'',//用户ID|school_customer_resources表id |
|||
}, |
|||
} |
|||
}, |
|||
onLoad() {}, |
|||
onShow(){ |
|||
this.init() |
|||
}, |
|||
methods: { |
|||
async init(){ |
|||
//获取学生详情 |
|||
await this.getMemberInfo() |
|||
}, |
|||
|
|||
//获取学员信息 |
|||
async getMemberInfo() { |
|||
let res = await apiRoute.xy_memberInfo({}) |
|||
if(res.code != 1){ |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
this.formData.user_id = res.data.id |
|||
console.log('xxxx',res.data) |
|||
}, |
|||
|
|||
|
|||
//######AQ上传文件组件相关###### |
|||
// 上传文件回调 |
|||
AQUploadSuccess(res) { |
|||
console.log('接收AQ上传回调xxx1', res) |
|||
// 使用 split 方法分割字符串 |
|||
let _inputValue = [] |
|||
if (res.filePathArr.length) { |
|||
_inputValue = res.filePathArr |
|||
} |
|||
this.formData[res.inputName] = _inputValue |
|||
// console.log('接收AQ上传回调xxx1',res) |
|||
// console.log('接收AQ上传回调xxx2',this.formData[res.inputName]) |
|||
}, |
|||
|
|||
async submitForm() { |
|||
let data = {...this.formData} |
|||
if(data.attachment_url_arr.length){ |
|||
data.attachment_url = data.attachment_url_arr.join(',') |
|||
} |
|||
|
|||
if(!data.feedback_text){ |
|||
//反馈内容为必填项 |
|||
uni.showToast({ |
|||
title:'反馈内容为必填项', |
|||
icon:'none' |
|||
}) |
|||
return |
|||
} |
|||
let res = await apiRoute.xy_userFeedbackAdd(data) |
|||
if(res.code != 1){ |
|||
uni.showToast({ |
|||
title:res.msg, |
|||
icon:'none' |
|||
}) |
|||
}else{ |
|||
uni.showToast({ |
|||
title:'提交成功', |
|||
icon:'none' |
|||
}) |
|||
} |
|||
}, |
|||
|
|||
} |
|||
} |
|||
</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; |
|||
color: #fff; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 20rpx; |
|||
|
|||
.section { |
|||
background-color: #434544; |
|||
padding: 40rpx 40rpx; |
|||
|
|||
.text_input { |
|||
border: 1px solid #434544; |
|||
background-color: #434544 !important; |
|||
|
|||
::v-deep .fui-textarea__wrap { |
|||
border: 1px solid #797979; |
|||
background-color: #434544 !important; |
|||
} |
|||
|
|||
::v-deep textarea { |
|||
color: #fff !important; |
|||
} |
|||
|
|||
::v-deep .fui-textarea__background { |
|||
border: 0; |
|||
background-color: #434544 !important; |
|||
} |
|||
} |
|||
|
|||
.upload_box { |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 20rpx; |
|||
} |
|||
|
|||
.input_box { |
|||
padding: 0; |
|||
color: #fff; |
|||
|
|||
::v-deep .fui-input__wrap { |
|||
background: #434544 !important; |
|||
padding-left: 0 !important; |
|||
} |
|||
|
|||
::v-deep .fui-input__label { |
|||
span { |
|||
color: #fff !important; |
|||
} |
|||
} |
|||
|
|||
::v-deep .uni-input-input { |
|||
color: #fff; |
|||
} |
|||
|
|||
::v-deep .fui-input__background { |
|||
background: #434544 !important; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.btn { |
|||
margin: 0 auto; |
|||
margin-top: 40rpx; |
|||
border: 1px solid #25a18b; |
|||
color: #25a18b; |
|||
width: 80%; |
|||
height: 80rpx; |
|||
line-height: 80rpx; |
|||
text-align: center; |
|||
} |
|||
|
|||
} |
|||
|
|||
.describe { |
|||
color: #999999; |
|||
padding-left: 30rpx; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,600 @@ |
|||
<!--聊天记录-列表--> |
|||
<template> |
|||
<view class="main_box"> |
|||
|
|||
<view class="main_section"> |
|||
<scroll-view |
|||
class="section_1" |
|||
scroll-y="true" |
|||
:scroll-top="scrollTop" |
|||
:lower-threshold="lowerThreshold" |
|||
style="height: 78vh;" |
|||
> |
|||
<view class="ul"> |
|||
<view class="item_box" v-for="(v,k) in tableList" :key="k" :id="'item_' + v.id"> |
|||
<view class="time_section" v-if="v.created_at">{{v.created_at}}</view> |
|||
|
|||
<view class="li" v-if="v.direction == `left`"> |
|||
<view class="item left_item" :style="{ backgroundColor: v.message_type === 'text' ? '#f4f6f9' : '' }"> |
|||
<!--文本内容--> |
|||
<view class="text_box" v-if="v.message_type == 'text'">{{v.content}}</view> |
|||
<!-- 图片内容 --> |
|||
<view class="img_box" v-if="v.message_type == 'img'" @click="previewImage(v.content)"> |
|||
<image class="chat_img" :src="v.content" mode="aspectFill"></image> |
|||
</view> |
|||
</view> |
|||
<view class="item"></view> |
|||
</view> |
|||
|
|||
<view class="li" v-if="v.direction == `right`"> |
|||
<view class="item"></view> |
|||
<view class="item right_item" :style="{ backgroundColor: v.message_type === 'text' ? '#1684fc' : '' }"> |
|||
<view class="text_box" v-if="v.message_type == 'text'">{{v.content}}</view> |
|||
<!-- 图片内容 --> |
|||
<view class="img_box" v-if="v.message_type == 'img'" @click="previewImage(v.content)"> |
|||
<image class="chat_img" :src="v.content" mode="aspectFill"></image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</scroll-view> |
|||
</view> |
|||
|
|||
<view class="input_section"> |
|||
<view class="left_box"> |
|||
<input class="input" v-model="formData.content" type="text" placeholder="请输入"> |
|||
</view> |
|||
<view class="right_box"> |
|||
<!--发送--> |
|||
<view class="img_box"> |
|||
<image @click="submitTextForm()" class="send_img" :src="$util.img('/uniapp_src/static/images/common/fa_song.png')"></image> |
|||
</view> |
|||
|
|||
<!--更多选择--> |
|||
<view class="img_box"> |
|||
<image @click="openMore()" class="send_img" :src="$util.img('/uniapp_src/static/images/common/jia_hao.png')"></image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!--更多选择--> |
|||
<fui-bottom-popup :show="moreShow" @close="closeMore"> |
|||
<view class="more_section"> |
|||
<view class="fui-scroll__wrap"> |
|||
<scroll-view scroll-y class="fui-scroll__view"> |
|||
<view class="ul"> |
|||
<view class="li" @click=""> |
|||
<AQUplodeImage |
|||
:uploadUrl=uploadUrl |
|||
:extraData="{ input_name: 'img_uplode', formData:{} }" |
|||
@uplodeImageRes="uplodeImageRes" |
|||
> |
|||
<view class="icon_box"> |
|||
<fui-icon name="picture-fill" :size="80"></fui-icon> |
|||
</view> |
|||
<view class="title">相册</view> |
|||
</AQUplodeImage> |
|||
</view> |
|||
</view> |
|||
</scroll-view> |
|||
</view> |
|||
</view> |
|||
</fui-bottom-popup> |
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import apiRoute from '@/api/apiRoute.js'; |
|||
|
|||
import { |
|||
Api_url |
|||
} from "@/common/config.js"; |
|||
import AQUplodeImage from '@/components/AQ/AQUplodeImage';//单图上传组件 |
|||
import AQTabber from "@/components/AQ/AQTabber" |
|||
|
|||
|
|||
export default { |
|||
components: { |
|||
AQTabber, |
|||
AQUplodeImage, |
|||
}, |
|||
data() { |
|||
return { |
|||
uploadUrl: `${Api_url}/uploadImage`,//图片文件上传路径|默认为员工端上传文件 |
|||
|
|||
|
|||
scrollTop:'',//滚动条位置,用于加载第一页后滚动到底部 |
|||
loading:false,//加载状态 |
|||
lowerThreshold: 100,//距离底部多远触发 |
|||
isReachedBottom: false,//防止重复加载|true=不可加载|false=可加载 |
|||
|
|||
//筛选条件 |
|||
filteredData:{ |
|||
page:1,//当前页码 |
|||
limit:10,//每页返回数据条数 |
|||
total:10,//数据总条数 |
|||
friend_id: '',//chat_friends表id |
|||
}, |
|||
tableList:[],//聊天数据列表 |
|||
|
|||
from_id:'',//发送者ID |
|||
to_id:'',//接收者ID |
|||
from_type:'',//发送者类型|personnel=员工,customer=学生(客户) |
|||
|
|||
//请求参数 |
|||
chatFriendsInfoParams:{ |
|||
personnel_id:'', |
|||
customer_resources_id:'', |
|||
}, |
|||
chatFriendsInfo:{},//好友关系详情 |
|||
|
|||
//聊天表单信息 |
|||
formData: { |
|||
from_type:'',//发送者类型|personnel=员工,customer=学生(客户) |
|||
from_id:'',//发送者ID |
|||
to_id:'',//接收者ID |
|||
friend_id:'',//关联chat_friends表id |
|||
message_type: 'text',//消息类型|text=文本,img=图片 |
|||
content: '',//文本内容（JSON 格式扩展字段）,文本类型=纯文字,图片类型=绝对路径 |
|||
}, |
|||
|
|||
//更多选项相关 |
|||
moreShow:false, |
|||
} |
|||
}, |
|||
onLoad(options) { |
|||
this.from_id = options.from_id//发送者的id |
|||
this.to_id = options.to_id//接收者的id |
|||
}, |
|||
onShow(){ |
|||
this.init() |
|||
}, |
|||
//下拉刷新 |
|||
async onPullDownRefresh() { |
|||
//加载更多(下一页) |
|||
await this.loadMoreData() |
|||
}, |
|||
methods: { |
|||
|
|||
//初始化 |
|||
async init(){ |
|||
//获取用户类型 |
|||
let userType = uni.getStorageSync('userType') |
|||
//1=教练,2=销售,3=学员 |
|||
if (['1', '2'].includes(String(userType))) { |
|||
// |
|||
this.from_type = 'personnel'//员工 |
|||
this.chatFriendsInfoParams.personnel_id = this.from_id//员工资源的id |
|||
this.chatFriendsInfoParams.customer_resources_id = this.to_id//学生资源的id |
|||
|
|||
this.formData.from_type = 'personnel'//员工 |
|||
this.formData.from_id = this.from_id//发送者的id(员工) |
|||
this.formData.to_id = this.to_id//接收者的id(学生) |
|||
|
|||
} else { |
|||
// |
|||
this.from_type = 'customer'//学生 |
|||
this.chatFriendsInfoParams.personnel_id = this.to_id//员工资源的id |
|||
this.chatFriendsInfoParams.customer_resources_id = this.from_id//学生资源的id |
|||
|
|||
this.formData.from_type = 'customer'//学生 |
|||
this.formData.from_id = this.to_id//发送者的id(学生) |
|||
this.formData.to_id = this.from_id//接收者的id(员工) |
|||
|
|||
this.uploadUrl = `${Api_url}/memberUploadImage`//图片文件上传路径|学生端端上传文件 |
|||
} |
|||
//获取好友关系详情 |
|||
await this.getChatFriendsInfo() |
|||
//获取聊天记录列表 |
|||
await this.getList(); |
|||
|
|||
// 首次加载后滚动到底部 |
|||
if (this.filteredData.page == 2) { |
|||
this.scrollToBottom() |
|||
} |
|||
}, |
|||
|
|||
//获取好友关系详情 |
|||
async getChatFriendsInfo(){ |
|||
let params = { |
|||
personnel_id: this.chatFriendsInfoParams.personnel_id,//员工资源ID |
|||
customer_resources_id: this.chatFriendsInfoParams.customer_resources_id,//学生资源ID |
|||
} |
|||
|
|||
let res |
|||
if( this.from_type == 'personnel'){ |
|||
//员工 |
|||
res = await apiRoute.xs_chatGetChatFriendsInfo(params) |
|||
}else{ |
|||
//学生 |
|||
res = await apiRoute.xy_chatGetChatFriendsInfo(params) |
|||
} |
|||
|
|||
|
|||
if (res.code != 1){ |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
|
|||
this.chatFriendsInfo = res.data |
|||
|
|||
this.filteredData.friend_id = res.data.id |
|||
|
|||
this.formData.friend_id = res.data.id |
|||
}, |
|||
|
|||
//加载更多(下一页) |
|||
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 |
|||
if( this.from_type == 'personnel'){ |
|||
//员工 |
|||
res = await apiRoute.xs_chatGetChatMessagesList(data)//获取消息列表 |
|||
}else{ |
|||
//学生 |
|||
res = await apiRoute.xy_chatGetChatMessagesList(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 方法 将新数据追加到数组中 |
|||
|
|||
let list = res.data.data |
|||
|
|||
list.forEach((v, k) => { |
|||
|
|||
if (this.from_type == 'personnel') { |
|||
//当前是员工登陆聊天页面时 |
|||
if (v.from_type == 'personnel') { |
|||
v.direction = 'right'//是员工发的消息 |
|||
} else { |
|||
v.direction = 'left'//是学生发的消息 |
|||
} |
|||
} else if (this.from_type == 'customer') { |
|||
//当前是学生登陆聊天页面时 |
|||
if (v.from_type == 'customer') { |
|||
v.direction = 'right'//是员工发的消息 |
|||
} else { |
|||
v.direction = 'left'//是学生发的消息 |
|||
} |
|||
} |
|||
}) |
|||
|
|||
list.reverse() |
|||
this.tableList.unshift(...list); // 将新数据插入到数组头部 |
|||
|
|||
console.log('列表',res.data.total) |
|||
this.filteredData.total = res.data.total |
|||
this.filteredData.page++ |
|||
}, |
|||
|
|||
|
|||
//######AQ上传文件组件相关###### |
|||
// 上传文件回调 |
|||
AQUploadSuccess(res) { |
|||
console.log('接收AQ上传回调xxx1', res) |
|||
// 使用 split 方法分割字符串 |
|||
let _inputValue = [] |
|||
if (res.filePathArr.length) { |
|||
_inputValue = res.filePathArr |
|||
} |
|||
this.formData[res.inputName] = _inputValue |
|||
// console.log('接收AQ上传回调xxx1',res) |
|||
// console.log('接收AQ上传回调xxx2',this.formData.member_store_certification_arr) |
|||
}, |
|||
|
|||
|
|||
//发送文本信息 |
|||
submitTextForm(){ |
|||
this.formData.message_type = 'text' |
|||
this.submitForm() |
|||
}, |
|||
//发送站内信 |
|||
async submitForm() { |
|||
let data = {...this.formData} |
|||
if (!data.content) { |
|||
//反馈内容为必填项 |
|||
uni.showToast({ |
|||
title: '请输入内容', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
|
|||
let res |
|||
if( this.from_type == 'personnel'){ |
|||
//员工 |
|||
res = await apiRoute.xs_chatSendChatMessages(data) |
|||
}else{ |
|||
//学生 |
|||
res = await apiRoute.xy_chatSendChatMessages(data) |
|||
} |
|||
|
|||
if (res.code != 1) { |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: 'none' |
|||
}) |
|||
} else { |
|||
let content = this.formData.content |
|||
this.formData.content = ''//清空输入框 |
|||
|
|||
|
|||
|
|||
let msgData = { |
|||
id:'', |
|||
from_type:data.from_type,//发送者类型|personnel=员工,customer=学生(客户) |
|||
from_id:data.from_id,//发送者ID |
|||
to_id:data.to_id,//接收者ID |
|||
friend_id:data.friend_id,//关联chat_friends表id |
|||
message_type: data.message_type,//消息类型|text=文本,img=图片 |
|||
content: data.content,//文本内容（JSON 格式扩展字段）,文本类型=纯文字,图片类型=绝对路径 |
|||
direction:'right' |
|||
} |
|||
//将发送的消息放在最下方 |
|||
this.tableList = this.tableList.concat(msgData); |
|||
} |
|||
}, |
|||
|
|||
//页面滚动到底部 |
|||
scrollToBottom() { |
|||
this.$nextTick(() => { |
|||
this.scrollTop = 999999 // 足够大的值确保滚动到底部 |
|||
}) |
|||
}, |
|||
|
|||
//打开更多选择弹窗 |
|||
openMore(){ |
|||
this.moreShow = true |
|||
}, |
|||
//关闭更多选择弹窗 |
|||
closeMore(){ |
|||
this.moreShow = false |
|||
}, |
|||
|
|||
//文件上传回调 |
|||
uplodeImageRes(resData,extraData){ |
|||
console.log('上传成功回调',resData,extraData) |
|||
//判断是不是上传相册图片 |
|||
if(extraData.input_name == 'img_uplode'){ |
|||
this.closeMore()//关闭更多选择弹窗 |
|||
this.formData.content = resData.url |
|||
this.formData.message_type = 'img' |
|||
this.submitForm() |
|||
} |
|||
}, |
|||
|
|||
//图片预览 |
|||
previewImage(url){ |
|||
uni.previewImage({ |
|||
current: url, // 当前图片地址 |
|||
urls: [url] // 所有图片列表（可以是多个） |
|||
}); |
|||
}, |
|||
|
|||
} |
|||
} |
|||
</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: 120rpx; |
|||
padding-bottom: 120rpx; |
|||
font-size: 28rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 20rpx; |
|||
|
|||
.section { |
|||
background-color: #434544; |
|||
padding: 40rpx 40rpx; |
|||
} |
|||
|
|||
.section_1{ |
|||
color: #FFFFFF; |
|||
font-size: 28rpx; |
|||
padding: 0 24rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 40rpx; |
|||
.ul{ |
|||
.time_section{ |
|||
text-align: center; |
|||
font-size: 28rpx; |
|||
color: #989898; |
|||
} |
|||
.li{ |
|||
margin: 40rpx 0; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
.item{ |
|||
max-width: 70%; |
|||
padding: 32rpx; |
|||
border-radius: 32rpx; |
|||
word-wrap: break-word; /* 允许长单词或 URL 换行 */ |
|||
word-break: break-all; /* 强制所有字符换行 */ |
|||
.text_box{} |
|||
.img_box { |
|||
.chat_img { |
|||
width: 200rpx; |
|||
height: 200rpx; |
|||
border-radius: 16rpx; |
|||
} |
|||
} |
|||
} |
|||
.left_item{ |
|||
//background-color: #f4f6f9; |
|||
color: #343434; |
|||
} |
|||
.right_item{ |
|||
//background-color: #1684fc; |
|||
color: #fff; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
//输入框板块 |
|||
.input_section{ |
|||
width: 100%; |
|||
position: fixed; |
|||
bottom: 0; |
|||
|
|||
padding: 30rpx; |
|||
padding-bottom: 50rpx; |
|||
display: flex; |
|||
justify-content:space-between; |
|||
align-items: center; |
|||
gap: 20rpx; |
|||
.left_box{ |
|||
.input{ |
|||
background-color: #f4f6f9; |
|||
height: 88rpx; |
|||
padding: 28rpx; |
|||
font-size: 28rpx; |
|||
border-radius: 32rpx; |
|||
|
|||
width: 480rpx; |
|||
color: #292929; |
|||
font-size: 28rpx; |
|||
} |
|||
} |
|||
.right_box{ |
|||
width: 100%; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
.img_box{ |
|||
width: 88rpx; |
|||
height: 88rpx; |
|||
border-radius: 50%; |
|||
background-color: #a2cefe; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
.send_img{ |
|||
width: 36rpx; |
|||
height: 36rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
.describe { |
|||
color: #999999; |
|||
padding-left: 30rpx; |
|||
} |
|||
|
|||
|
|||
/* 更多选项相关 自定义内容区样式需自行控制 */ |
|||
.more_section{ |
|||
.fui-scroll__wrap { |
|||
padding-top: 30rpx; |
|||
position: relative; |
|||
} |
|||
.fui-title { |
|||
font-size: 30rpx; |
|||
font-weight: bold; |
|||
text-align: center; |
|||
padding-bottom: 24rpx; |
|||
} |
|||
.fui-icon__close { |
|||
position: absolute; |
|||
top: 24rpx; |
|||
left: 24rpx; |
|||
} |
|||
.fui-scroll__view { |
|||
width: 100%; |
|||
height: 350rpx; |
|||
} |
|||
|
|||
.ul{ |
|||
padding: 10rpx 40rpx; |
|||
display: flex; |
|||
.li{ |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
.icon_box{ |
|||
} |
|||
.title{ |
|||
font-size: 28rpx; |
|||
text-align: center; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
File diff suppressed because it is too large
@ -0,0 +1,374 @@ |
|||
<!--我的消息-列表--> |
|||
<template> |
|||
<view class="main_box"> |
|||
|
|||
<view class="main_section"> |
|||
<view class="section_1"> |
|||
|
|||
<!-- <view class="item" @click="openViewSysMsgList()">--> |
|||
<!-- <view class="left">--> |
|||
<!-- <image class="pic" :src="$util.img('/uniapp_src/static/images/common/xi_tong_xiao_xi.png')"></image>--> |
|||
<!-- <view>系统消息</view>--> |
|||
<!-- </view>--> |
|||
<!-- <view class="right">--> |
|||
<!-- <view>99</view>--> |
|||
<!-- <fui-icon name="arrowright" :size="60"></fui-icon>--> |
|||
<!-- </view>--> |
|||
<!-- </view>--> |
|||
|
|||
<view |
|||
v-for="(v,k) in contactList" |
|||
:key="k" |
|||
class="item" |
|||
@click="openViewImChatInfo(v)" |
|||
> |
|||
<view class="left"> |
|||
<image |
|||
v-if="(['1','2','3'].includes(String(userType)))" |
|||
class="pic" |
|||
:src="$util.img('/uniapp_src/static/images/common/yong_hu.png')" |
|||
model="aspectFit" |
|||
></image> |
|||
|
|||
<image v-else class="pic" :src="$util.img('/uniapp_src/static/images/common/xi_tong_xiao_xi.png')"></image> |
|||
|
|||
<view>{{v.name}}</view> |
|||
</view> |
|||
<view class="right"> |
|||
<view>{{v.count >= 99 ? '99':v.count}}</view> |
|||
<fui-icon name="arrowright" :size="60"></fui-icon> |
|||
</view> |
|||
</view> |
|||
|
|||
</view> |
|||
</view> |
|||
</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" |
|||
|
|||
|
|||
export default { |
|||
components: { |
|||
AQTabber, |
|||
}, |
|||
data() { |
|||
return { |
|||
//筛选条件 |
|||
filteredData:{ |
|||
page:1,//当前页码 |
|||
limit:10,//每页返回数据条数 |
|||
total:10,//数据总条数 |
|||
personnel_id:'',//员工人力资源表id(两个参数2选1) |
|||
customer_resources_id:'',//学生资源表id(两个参数2选1) |
|||
}, |
|||
|
|||
formData: { |
|||
images_arr: [], |
|||
images: '', |
|||
content: '', |
|||
mailbox: '', |
|||
}, |
|||
|
|||
//联系人列表 |
|||
contactList:[], |
|||
userType:'',//获取用户类型|1=教练,2=销售,3=学员 |
|||
from_type: '',//发送者类型|personnel=员工,customer=学生(客户) |
|||
} |
|||
}, |
|||
onLoad() { |
|||
}, |
|||
onShow() { |
|||
this.init(); |
|||
}, |
|||
//下拉刷新 |
|||
async onPullDownRefresh() { |
|||
//重置为第一页 |
|||
await this.resetFilteredData() |
|||
await this.getList() |
|||
}, |
|||
methods: { |
|||
//初始化 |
|||
async init(){ |
|||
//获取用户类型 |
|||
this.userType = uni.getStorageSync('userType') |
|||
//1=教练,2=销售,3=学员 |
|||
if (['1', '2'].includes(String(this.userType))) { |
|||
this.from_type = 'personnel'//员工 |
|||
await this.getPersonnelUserInfo() |
|||
}else{ |
|||
//获取学生用户详情 |
|||
this.from_type = 'customer'//学生 |
|||
await this.getMemberInit() |
|||
} |
|||
this.getContactList() |
|||
}, |
|||
|
|||
//获取员工用户详情 |
|||
async getPersonnelUserInfo(){ |
|||
let data = {} |
|||
let res = await apiRoute.getPersonnelInfo(data); |
|||
if (res.code != 1){ |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
|
|||
res.data.cameus_dept_arr.forEach((v,k)=>{ |
|||
let d_arr = [] |
|||
v.dept_arr.forEach((dv,dk)=>{ |
|||
d_arr.push(dv.dept_name) |
|||
}) |
|||
//数组转字符串 |
|||
v.dept_name_str = d_arr.join('，') |
|||
}) |
|||
this.filteredData.personnel_id = res.data.id |
|||
}, |
|||
|
|||
//获取学员用户信息 |
|||
async getMemberInit() { |
|||
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.customer_resources_id = res.data.id//学生资源的id |
|||
}, |
|||
|
|||
//获取联系人列表 |
|||
async getContactList(){ |
|||
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.contactList = [] |
|||
} |
|||
|
|||
let res |
|||
//1=教练,2=销售,3=学员 |
|||
if (['1', '2'].includes(String(this.userType))) { |
|||
//员工 |
|||
res = await apiRoute.xs_chatGetChatFriendsList(params) |
|||
}else{ |
|||
//学生 |
|||
res = await apiRoute.xy_chatGetChatFriendsList(params) |
|||
} |
|||
|
|||
|
|||
|
|||
this.loading = false |
|||
this.isReachedBottom = false; |
|||
if (res.code != 1) { |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
|
|||
res.data.data.forEach((v,k)=>{ |
|||
v.name = '' |
|||
v.count = '0' |
|||
if(this.from_type == 'personnel'){ |
|||
v.name = v.personnel_id_name |
|||
v.count = v.unread_count_personnel |
|||
}else{ |
|||
v.name = v.customer_resources_id_name |
|||
v.count = v.unread_count_customer_resources |
|||
} |
|||
}) |
|||
console.log('列表',res.data.data) |
|||
|
|||
this.contactList = this.contactList.concat(res.data.data); // 使用 concat 方法 将新数据追加到数组中 |
|||
this.filteredData.total = res.data.total |
|||
this.filteredData.page++ |
|||
}, |
|||
|
|||
//######AQ上传文件组件相关###### |
|||
// 上传文件回调 |
|||
AQUploadSuccess(res) { |
|||
console.log('接收AQ上传回调xxx1', res) |
|||
// 使用 split 方法分割字符串 |
|||
let _inputValue = [] |
|||
if (res.filePathArr.length) { |
|||
_inputValue = res.filePathArr |
|||
} |
|||
this.formData[res.inputName] = _inputValue |
|||
// console.log('接收AQ上传回调xxx1',res) |
|||
// console.log('接收AQ上传回调xxx2',this.formData.member_store_certification_arr) |
|||
}, |
|||
|
|||
async submitForm() { |
|||
let data = {...this.formData} |
|||
data.images = data.images_arr.join(',') |
|||
if (!data.content) { |
|||
//反馈内容为必填项 |
|||
uni.showToast({ |
|||
title: '反馈内容为必填项', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
let res = await memberApi.setFeedback(data) |
|||
if (res.code != 1) { |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: 'none' |
|||
}) |
|||
} else { |
|||
uni.showToast({ |
|||
title: '提交成功', |
|||
icon: 'none' |
|||
}) |
|||
} |
|||
}, |
|||
|
|||
//跳转页面-系统消息列表 |
|||
openViewSysMsgList(e){ |
|||
let hair_staff_id = e.hair_staff_id//发信人id |
|||
uni.navigateTo({ |
|||
url: `/pages-common/sys_msg_list?hair_staff_id=${hair_staff_id}` |
|||
}) |
|||
}, |
|||
|
|||
//跳转页面-聊天页面 |
|||
openViewImChatInfo(e){ |
|||
|
|||
if(e.type == 1){ |
|||
//系统消息 |
|||
this.openViewSysMsgList(e) |
|||
}else{ |
|||
let from_id = ''//发送者的id |
|||
let to_id = ''//接收者ID |
|||
//站内信 |
|||
if (this.from_type == 'personnel') { |
|||
from_id = e.personnel_id |
|||
to_id = e.customer_resources_id |
|||
} else { |
|||
from_id = e.customer_resources_id |
|||
to_id = e.personnel_id |
|||
} |
|||
|
|||
uni.navigateTo({ |
|||
url: `/pages-common/im_chat_info?from_id=${from_id}&to_id=${to_id}` |
|||
}) |
|||
} |
|||
|
|||
|
|||
}, |
|||
|
|||
} |
|||
} |
|||
</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; |
|||
gap: 38rpx; |
|||
.item{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
|
|||
padding: 40rpx 18rpx 36rpx; |
|||
|
|||
border-radius: 14rpx; |
|||
background-color: rgba(255,255,255,1); |
|||
border: 2rpx solid rgba(187,187,187,1); |
|||
|
|||
.left{ |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 16rpx; |
|||
.pic{ |
|||
width: 68rpx; |
|||
height: 68rpx; |
|||
border-radius: 50%; |
|||
} |
|||
view{ |
|||
color: #D9001B; |
|||
font-size: 32rpx; |
|||
} |
|||
} |
|||
.right{ |
|||
display: flex; |
|||
align-items: center; |
|||
view{ |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
width: 50rpx; |
|||
height: 50rpx; |
|||
padding: 5rpx; |
|||
border: 1px solid #BBBBBB; |
|||
border-radius: 50%; |
|||
color: #D9001B; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
|
|||
|
|||
} |
|||
|
|||
.describe { |
|||
color: #999999; |
|||
padding-left: 30rpx; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,899 @@ |
|||
<template> |
|||
<view class="personnel-form-container"> |
|||
<!-- 自定义导航栏 --> |
|||
<view class="custom-nav"> |
|||
<view class="nav-left" @click="goBack"> |
|||
<text class="iconfont icon-arrow-left"></text> |
|||
</view> |
|||
<view class="nav-title">新员工信息填写</view> |
|||
<view class="nav-right"></view> |
|||
</view> |
|||
|
|||
<!-- 进度条 --> |
|||
<view class="progress-container"> |
|||
<view class="progress-bar"> |
|||
<view class="progress-step" :class="currentStep >= 1 ? 'active' : ''"> |
|||
<text class="step-number">1</text> |
|||
<text class="step-text">基本信息</text> |
|||
</view> |
|||
<view class="progress-line" :class="currentStep >= 2 ? 'active' : ''"></view> |
|||
<view class="progress-step" :class="currentStep >= 2 ? 'active' : ''"> |
|||
<text class="step-number">2</text> |
|||
<text class="step-text">详细信息</text> |
|||
</view> |
|||
<view class="progress-line" :class="currentStep >= 3 ? 'active' : ''"></view> |
|||
<view class="progress-step" :class="currentStep >= 3 ? 'active' : ''"> |
|||
<text class="step-number">3</text> |
|||
<text class="step-text">确认提交</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 表单内容 --> |
|||
<view class="form-content"> |
|||
<!-- 第一步：基本信息 --> |
|||
<view v-if="currentStep === 1" class="step-content"> |
|||
<view class="section-title">基本信息</view> |
|||
|
|||
<!-- 头像上传 --> |
|||
<view class="form-item"> |
|||
<view class="label">头像</view> |
|||
<view class="avatar-upload" @click="chooseAvatar"> |
|||
<image v-if="formData.head_img" :src="formData.head_img" class="avatar-preview"></image> |
|||
<view v-else class="avatar-placeholder"> |
|||
<text class="iconfont icon-camera"></text> |
|||
<text class="placeholder-text">点击上传头像</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 姓名 --> |
|||
<view class="form-item required"> |
|||
<view class="label">姓名</view> |
|||
<input class="form-input" v-model="formData.name" placeholder="请输入姓名" /> |
|||
</view> |
|||
|
|||
<!-- 性别 --> |
|||
<view class="form-item required"> |
|||
<view class="label">性别</view> |
|||
<view class="radio-group"> |
|||
<label class="radio-item" @click="formData.gender = 1"> |
|||
<view class="radio" :class="formData.gender === 1 ? 'checked' : ''"></view> |
|||
<text>男</text> |
|||
</label> |
|||
<label class="radio-item" @click="formData.gender = 0"> |
|||
<view class="radio" :class="formData.gender === 0 ? 'checked' : ''"></view> |
|||
<text>女</text> |
|||
</label> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 生日 --> |
|||
<view class="form-item"> |
|||
<view class="label">出生日期</view> |
|||
<picker mode="date" :value="formData.birthday" @change="onBirthdayChange"> |
|||
<view class="picker-input"> |
|||
{{formData.birthday || '请选择出生日期'}} |
|||
</view> |
|||
</picker> |
|||
</view> |
|||
|
|||
<!-- 手机号 --> |
|||
<view class="form-item required"> |
|||
<view class="label">手机号码</view> |
|||
<input class="form-input" v-model="formData.phone" placeholder="请输入手机号码" type="number" /> |
|||
</view> |
|||
|
|||
<!-- 邮箱 --> |
|||
<view class="form-item"> |
|||
<view class="label">邮箱</view> |
|||
<input class="form-input" v-model="formData.email" placeholder="请输入邮箱地址" /> |
|||
</view> |
|||
|
|||
<!-- 微信号 --> |
|||
<view class="form-item"> |
|||
<view class="label">微信号</view> |
|||
<input class="form-input" v-model="formData.wx" placeholder="请输入微信号" /> |
|||
</view> |
|||
|
|||
<!-- 账号类型 --> |
|||
<view class="form-item required"> |
|||
<view class="label">职位类型</view> |
|||
<view class="radio-group"> |
|||
<label class="radio-item" @click="formData.account_type = 'teacher'"> |
|||
<view class="radio" :class="formData.account_type === 'teacher' ? 'checked' : ''"></view> |
|||
<text>教师</text> |
|||
</label> |
|||
<label class="radio-item" @click="formData.account_type = 'market'"> |
|||
<view class="radio" :class="formData.account_type === 'market' ? 'checked' : ''"></view> |
|||
<text>市场</text> |
|||
</label> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 入职时间 --> |
|||
<view class="form-item"> |
|||
<view class="label">入职时间</view> |
|||
<picker mode="date" :value="formData.join_time" @change="onJoinTimeChange"> |
|||
<view class="picker-input"> |
|||
{{formData.join_time || '请选择入职时间'}} |
|||
</view> |
|||
</picker> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 第二步：详细信息 --> |
|||
<view v-if="currentStep === 2" class="step-content"> |
|||
<view class="section-title">详细信息</view> |
|||
|
|||
<!-- 民族 --> |
|||
<view class="form-item"> |
|||
<view class="label">民族</view> |
|||
<input class="form-input" v-model="detailData.ethnicity" placeholder="请输入民族" /> |
|||
</view> |
|||
|
|||
<!-- 年龄 --> |
|||
<view class="form-item"> |
|||
<view class="label">年龄</view> |
|||
<input class="form-input" v-model.number="detailData.age" placeholder="请输入年龄" type="number" /> |
|||
</view> |
|||
|
|||
<!-- 政治面貌 --> |
|||
<view class="form-item"> |
|||
<view class="label">政治面貌</view> |
|||
<picker :range="politicsOptions" @change="onPoliticsChange"> |
|||
<view class="picker-input"> |
|||
{{detailData.politics || '请选择政治面貌'}} |
|||
</view> |
|||
</picker> |
|||
</view> |
|||
|
|||
<!-- 毕业院校 --> |
|||
<view class="form-item"> |
|||
<view class="label">毕业院校</view> |
|||
<input class="form-input" v-model="detailData.university" placeholder="请输入毕业院校" /> |
|||
</view> |
|||
|
|||
<!-- 学历 --> |
|||
<view class="form-item"> |
|||
<view class="label">学历</view> |
|||
<picker :range="educationOptions" @change="onEducationChange"> |
|||
<view class="picker-input"> |
|||
{{detailData.education || '请选择学历'}} |
|||
</view> |
|||
</picker> |
|||
</view> |
|||
|
|||
<!-- 专业 --> |
|||
<view class="form-item"> |
|||
<view class="label">专业</view> |
|||
<input class="form-input" v-model="detailData.major" placeholder="请输入专业" /> |
|||
</view> |
|||
|
|||
<!-- 毕业日期 --> |
|||
<view class="form-item"> |
|||
<view class="label">毕业日期</view> |
|||
<picker mode="date" :value="detailData.graduation_date" @change="onGraduationDateChange"> |
|||
<view class="picker-input"> |
|||
{{detailData.graduation_date || '请选择毕业日期'}} |
|||
</view> |
|||
</picker> |
|||
</view> |
|||
|
|||
<!-- 籍贯 --> |
|||
<view class="form-item"> |
|||
<view class="label">籍贯</view> |
|||
<input class="form-input" v-model="detailData.native_place" placeholder="请输入籍贯" /> |
|||
</view> |
|||
|
|||
<!-- 户口所在地 --> |
|||
<view class="form-item"> |
|||
<view class="label">户口所在地</view> |
|||
<input class="form-input" v-model="detailData.household_place" placeholder="请输入户口所在地" /> |
|||
</view> |
|||
|
|||
<!-- 户口性质 --> |
|||
<view class="form-item"> |
|||
<view class="label">户口性质</view> |
|||
<picker :range="householdTypeOptions" @change="onHouseholdTypeChange"> |
|||
<view class="picker-input"> |
|||
{{detailData.household_type || '请选择户口性质'}} |
|||
</view> |
|||
</picker> |
|||
</view> |
|||
|
|||
<!-- 户籍地址 --> |
|||
<view class="form-item"> |
|||
<view class="label">户籍地址</view> |
|||
<textarea class="form-textarea" v-model="detailData.household_address" placeholder="请输入户籍地址"></textarea> |
|||
</view> |
|||
|
|||
<!-- 现居地址 --> |
|||
<view class="form-item"> |
|||
<view class="label">现居地址</view> |
|||
<textarea class="form-textarea" v-model="detailData.current_address" placeholder="请输入现居地址"></textarea> |
|||
</view> |
|||
|
|||
<!-- 紧急联系人 --> |
|||
<view class="form-item"> |
|||
<view class="label">紧急联系人</view> |
|||
<input class="form-input" v-model="detailData.emergency_contact" placeholder="请输入紧急联系人姓名" /> |
|||
</view> |
|||
|
|||
<!-- 紧急联系电话 --> |
|||
<view class="form-item"> |
|||
<view class="label">紧急联系电话</view> |
|||
<input class="form-input" v-model="detailData.emergency_phone" placeholder="请输入紧急联系电话" type="number" /> |
|||
</view> |
|||
|
|||
<!-- 婚姻状况 --> |
|||
<view class="form-item"> |
|||
<view class="label">婚姻状况</view> |
|||
<picker :range="maritalStatusOptions" @change="onMaritalStatusChange"> |
|||
<view class="picker-input"> |
|||
{{detailData.marital_status || '请选择婚姻状况'}} |
|||
</view> |
|||
</picker> |
|||
</view> |
|||
|
|||
<!-- 银行卡号 --> |
|||
<view class="form-item"> |
|||
<view class="label">银行卡号</view> |
|||
<input class="form-input" v-model="detailData.bank_card" placeholder="请输入银行卡号" type="number" /> |
|||
</view> |
|||
|
|||
<!-- 开户银行 --> |
|||
<view class="form-item"> |
|||
<view class="label">开户银行</view> |
|||
<input class="form-input" v-model="detailData.bank_name" placeholder="请输入开户银行" /> |
|||
</view> |
|||
|
|||
<!-- 备注 --> |
|||
<view class="form-item"> |
|||
<view class="label">备注</view> |
|||
<textarea class="form-textarea" v-model="detailData.remark" placeholder="请输入备注信息"></textarea> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 第三步：确认信息 --> |
|||
<view v-if="currentStep === 3" class="step-content"> |
|||
<view class="section-title">确认信息</view> |
|||
<view class="confirm-info"> |
|||
<view class="info-section"> |
|||
<view class="info-title">基本信息</view> |
|||
<view class="info-item"> |
|||
<text class="info-label">姓名：</text> |
|||
<text class="info-value">{{formData.name}}</text> |
|||
</view> |
|||
<view class="info-item"> |
|||
<text class="info-label">性别：</text> |
|||
<text class="info-value">{{formData.gender === 1 ? '男' : '女'}}</text> |
|||
</view> |
|||
<view class="info-item"> |
|||
<text class="info-label">手机：</text> |
|||
<text class="info-value">{{formData.phone}}</text> |
|||
</view> |
|||
<view class="info-item"> |
|||
<text class="info-label">职位：</text> |
|||
<text class="info-value">{{formData.account_type === 'teacher' ? '教师' : '市场'}}</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="info-section"> |
|||
<view class="info-title">详细信息</view> |
|||
<view class="info-item" v-if="detailData.education"> |
|||
<text class="info-label">学历：</text> |
|||
<text class="info-value">{{detailData.education}}</text> |
|||
</view> |
|||
<view class="info-item" v-if="detailData.university"> |
|||
<text class="info-label">毕业院校：</text> |
|||
<text class="info-value">{{detailData.university}}</text> |
|||
</view> |
|||
<view class="info-item" v-if="detailData.emergency_contact"> |
|||
<text class="info-label">紧急联系人：</text> |
|||
<text class="info-value">{{detailData.emergency_contact}}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 底部按钮 --> |
|||
<view class="footer-buttons"> |
|||
<button v-if="currentStep > 1" class="btn btn-secondary" @click="prevStep">上一步</button> |
|||
<button v-if="currentStep < 3" class="btn btn-primary" @click="nextStep">下一步</button> |
|||
<button v-if="currentStep === 3" class="btn btn-primary" @click="submitForm" :loading="submitting">提交</button> |
|||
</view> |
|||
|
|||
<!-- 加载提示 --> |
|||
<uni-load-more v-if="submitting" status="loading" content-text="正在提交..."></uni-load-more> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import apiRoute from '@/common/axios.js' |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
currentStep: 1, |
|||
submitting: false, |
|||
// 基本信息 |
|||
formData: { |
|||
name: '', |
|||
head_img: '', |
|||
gender: null, |
|||
birthday: '', |
|||
phone: '', |
|||
email: '', |
|||
wx: '', |
|||
account_type: '', |
|||
join_time: '' |
|||
}, |
|||
// 详细信息 |
|||
detailData: { |
|||
ethnicity: '', |
|||
age: null, |
|||
politics: '', |
|||
university: '', |
|||
education: '', |
|||
major: '', |
|||
graduation_date: '', |
|||
native_place: '', |
|||
household_place: '', |
|||
household_type: '', |
|||
household_address: '', |
|||
current_address: '', |
|||
emergency_contact: '', |
|||
emergency_phone: '', |
|||
marital_status: '', |
|||
bank_card: '', |
|||
bank_name: '', |
|||
remark: '' |
|||
}, |
|||
// 选项数据 |
|||
politicsOptions: ['群众', '共青团员', '中共党员', '民主党派', '无党派人士'], |
|||
educationOptions: ['高中', '中专', '大专', '本科', '硕士', '博士'], |
|||
householdTypeOptions: ['城镇', '农村'], |
|||
maritalStatusOptions: ['未婚', '已婚', '离异', '丧偶'] |
|||
} |
|||
}, |
|||
onLoad() { |
|||
// 设置当前日期为默认入职时间 |
|||
const today = new Date() |
|||
const year = today.getFullYear() |
|||
const month = String(today.getMonth() + 1).padStart(2, '0') |
|||
const day = String(today.getDate()).padStart(2, '0') |
|||
this.formData.join_time = `${year}-${month}-${day}` |
|||
}, |
|||
methods: { |
|||
// 返回上一页 |
|||
goBack() { |
|||
uni.navigateBack() |
|||
}, |
|||
|
|||
// 选择头像 |
|||
chooseAvatar() { |
|||
uni.chooseImage({ |
|||
count: 1, |
|||
sizeType: ['compressed'], |
|||
sourceType: ['album', 'camera'], |
|||
success: (res) => { |
|||
const tempFilePath = res.tempFilePaths[0] |
|||
this.uploadAvatar(tempFilePath) |
|||
} |
|||
}) |
|||
}, |
|||
|
|||
// 上传头像 |
|||
uploadAvatar(filePath) { |
|||
uni.showLoading({ title: '上传中...' }) |
|||
|
|||
uni.uploadFile({ |
|||
url: this.$baseUrl + '/file/avatar', |
|||
filePath: filePath, |
|||
name: 'file', |
|||
success: (res) => { |
|||
const data = JSON.parse(res.data) |
|||
if (data.code === 1) { |
|||
this.formData.head_img = data.data.url |
|||
uni.showToast({ title: '头像上传成功', icon: 'success' }) |
|||
} else { |
|||
uni.showToast({ title: data.msg || '上传失败', icon: 'none' }) |
|||
} |
|||
}, |
|||
fail: (error) => { |
|||
console.error('头像上传失败:', error) |
|||
uni.showToast({ title: '上传失败', icon: 'none' }) |
|||
}, |
|||
complete: () => { |
|||
uni.hideLoading() |
|||
} |
|||
}) |
|||
}, |
|||
|
|||
// 日期选择事件 |
|||
onBirthdayChange(e) { |
|||
this.formData.birthday = e.detail.value |
|||
// 自动计算年龄 |
|||
this.calculateAge() |
|||
}, |
|||
|
|||
onJoinTimeChange(e) { |
|||
this.formData.join_time = e.detail.value |
|||
}, |
|||
|
|||
onGraduationDateChange(e) { |
|||
this.detailData.graduation_date = e.detail.value |
|||
}, |
|||
|
|||
// 下拉选择事件 |
|||
onPoliticsChange(e) { |
|||
this.detailData.politics = this.politicsOptions[e.detail.value] |
|||
}, |
|||
|
|||
onEducationChange(e) { |
|||
this.detailData.education = this.educationOptions[e.detail.value] |
|||
}, |
|||
|
|||
onHouseholdTypeChange(e) { |
|||
this.detailData.household_type = this.householdTypeOptions[e.detail.value] |
|||
}, |
|||
|
|||
onMaritalStatusChange(e) { |
|||
this.detailData.marital_status = this.maritalStatusOptions[e.detail.value] |
|||
}, |
|||
|
|||
// 计算年龄 |
|||
calculateAge() { |
|||
if (this.formData.birthday) { |
|||
const birthDate = new Date(this.formData.birthday) |
|||
const today = new Date() |
|||
let age = today.getFullYear() - birthDate.getFullYear() |
|||
const monthDiff = today.getMonth() - birthDate.getMonth() |
|||
|
|||
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) { |
|||
age-- |
|||
} |
|||
|
|||
this.detailData.age = age |
|||
} |
|||
}, |
|||
|
|||
// 步骤控制 |
|||
nextStep() { |
|||
if (this.validateCurrentStep()) { |
|||
this.currentStep++ |
|||
} |
|||
}, |
|||
|
|||
prevStep() { |
|||
this.currentStep-- |
|||
}, |
|||
|
|||
// 验证当前步骤 |
|||
validateCurrentStep() { |
|||
if (this.currentStep === 1) { |
|||
if (!this.formData.name) { |
|||
uni.showToast({ title: '请输入姓名', icon: 'none' }) |
|||
return false |
|||
} |
|||
if (this.formData.gender === null) { |
|||
uni.showToast({ title: '请选择性别', icon: 'none' }) |
|||
return false |
|||
} |
|||
if (!this.formData.phone) { |
|||
uni.showToast({ title: '请输入手机号码', icon: 'none' }) |
|||
return false |
|||
} |
|||
if (!/^1[3-9]\d{9}$/.test(this.formData.phone)) { |
|||
uni.showToast({ title: '请输入正确的手机号码', icon: 'none' }) |
|||
return false |
|||
} |
|||
if (!this.formData.account_type) { |
|||
uni.showToast({ title: '请选择职位类型', icon: 'none' }) |
|||
return false |
|||
} |
|||
} |
|||
return true |
|||
}, |
|||
|
|||
// 提交表单 |
|||
async submitForm() { |
|||
if (!this.validateCurrentStep()) { |
|||
return |
|||
} |
|||
|
|||
this.submitting = true |
|||
|
|||
try { |
|||
const submitData = { |
|||
...this.formData, |
|||
...this.detailData |
|||
} |
|||
|
|||
const response = await apiRoute.post('personnel/add', submitData) |
|||
|
|||
if (response.data.code === 1) { |
|||
uni.showToast({ |
|||
title: '员工信息提交成功', |
|||
icon: 'success', |
|||
duration: 2000 |
|||
}) |
|||
|
|||
setTimeout(() => { |
|||
uni.navigateBack() |
|||
}, 2000) |
|||
} else { |
|||
uni.showToast({ |
|||
title: response.data.msg || '提交失败', |
|||
icon: 'none' |
|||
}) |
|||
} |
|||
} catch (error) { |
|||
console.error('提交员工信息失败:', error) |
|||
uni.showToast({ |
|||
title: '网络错误，请稍后重试', |
|||
icon: 'none' |
|||
}) |
|||
} finally { |
|||
this.submitting = false |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.personnel-form-container { |
|||
min-height: 100vh; |
|||
background-color: #f5f5f5; |
|||
padding-bottom: 120rpx; |
|||
} |
|||
|
|||
/* 自定义导航栏 */ |
|||
.custom-nav { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
height: 88rpx; |
|||
padding: 0 32rpx; |
|||
background-color: #fff; |
|||
border-bottom: 1rpx solid #e5e5e5; |
|||
position: sticky; |
|||
top: 0; |
|||
z-index: 100; |
|||
|
|||
.nav-left { |
|||
width: 80rpx; |
|||
height: 80rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
|
|||
.iconfont { |
|||
font-size: 36rpx; |
|||
color: #333; |
|||
} |
|||
} |
|||
|
|||
.nav-title { |
|||
font-size: 36rpx; |
|||
font-weight: 600; |
|||
color: #333; |
|||
} |
|||
|
|||
.nav-right { |
|||
width: 80rpx; |
|||
} |
|||
} |
|||
|
|||
/* 进度条 */ |
|||
.progress-container { |
|||
background-color: #fff; |
|||
padding: 40rpx 32rpx; |
|||
margin-bottom: 20rpx; |
|||
} |
|||
|
|||
.progress-bar { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
} |
|||
|
|||
.progress-step { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
flex: 1; |
|||
|
|||
.step-number { |
|||
width: 60rpx; |
|||
height: 60rpx; |
|||
border-radius: 50%; |
|||
background-color: #e5e5e5; |
|||
color: #999; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
font-size: 28rpx; |
|||
font-weight: 600; |
|||
margin-bottom: 12rpx; |
|||
} |
|||
|
|||
.step-text { |
|||
font-size: 24rpx; |
|||
color: #999; |
|||
} |
|||
|
|||
&.active { |
|||
.step-number { |
|||
background-color: #007ACC; |
|||
color: #fff; |
|||
} |
|||
|
|||
.step-text { |
|||
color: #007ACC; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.progress-line { |
|||
flex: 1; |
|||
height: 4rpx; |
|||
background-color: #e5e5e5; |
|||
margin: 0 20rpx; |
|||
margin-top: -30rpx; |
|||
|
|||
&.active { |
|||
background-color: #007ACC; |
|||
} |
|||
} |
|||
|
|||
/* 表单内容 */ |
|||
.form-content { |
|||
background-color: #fff; |
|||
margin: 0 20rpx 20rpx; |
|||
border-radius: 16rpx; |
|||
padding: 32rpx; |
|||
} |
|||
|
|||
.section-title { |
|||
font-size: 36rpx; |
|||
font-weight: 600; |
|||
color: #333; |
|||
margin-bottom: 40rpx; |
|||
border-left: 8rpx solid #007ACC; |
|||
padding-left: 20rpx; |
|||
} |
|||
|
|||
.form-item { |
|||
margin-bottom: 40rpx; |
|||
|
|||
&.required .label::before { |
|||
content: '*'; |
|||
color: #ff4d4f; |
|||
margin-right: 8rpx; |
|||
} |
|||
|
|||
.label { |
|||
font-size: 28rpx; |
|||
color: #333; |
|||
margin-bottom: 16rpx; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.form-input, |
|||
.picker-input { |
|||
width: 100%; |
|||
height: 88rpx; |
|||
border: 2rpx solid #e5e5e5; |
|||
border-radius: 12rpx; |
|||
padding: 0 24rpx; |
|||
font-size: 28rpx; |
|||
color: #333; |
|||
background-color: #fff; |
|||
box-sizing: border-box; |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
&:focus { |
|||
border-color: #007ACC; |
|||
} |
|||
} |
|||
|
|||
.form-textarea { |
|||
width: 100%; |
|||
min-height: 120rpx; |
|||
border: 2rpx solid #e5e5e5; |
|||
border-radius: 12rpx; |
|||
padding: 20rpx 24rpx; |
|||
font-size: 28rpx; |
|||
color: #333; |
|||
background-color: #fff; |
|||
box-sizing: border-box; |
|||
resize: none; |
|||
|
|||
&:focus { |
|||
border-color: #007ACC; |
|||
} |
|||
} |
|||
|
|||
.picker-input { |
|||
color: #999; |
|||
cursor: pointer; |
|||
} |
|||
} |
|||
|
|||
/* 头像上传 */ |
|||
.avatar-upload { |
|||
width: 120rpx; |
|||
height: 120rpx; |
|||
border: 2rpx solid #e5e5e5; |
|||
border-radius: 50%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
overflow: hidden; |
|||
cursor: pointer; |
|||
|
|||
.avatar-preview { |
|||
width: 100%; |
|||
height: 100%; |
|||
border-radius: 50%; |
|||
} |
|||
|
|||
.avatar-placeholder { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
color: #999; |
|||
|
|||
.iconfont { |
|||
font-size: 32rpx; |
|||
margin-bottom: 8rpx; |
|||
} |
|||
|
|||
.placeholder-text { |
|||
font-size: 20rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
/* 单选按钮组 */ |
|||
.radio-group { |
|||
display: flex; |
|||
gap: 60rpx; |
|||
} |
|||
|
|||
.radio-item { |
|||
display: flex; |
|||
align-items: center; |
|||
cursor: pointer; |
|||
|
|||
.radio { |
|||
width: 32rpx; |
|||
height: 32rpx; |
|||
border: 2rpx solid #e5e5e5; |
|||
border-radius: 50%; |
|||
margin-right: 16rpx; |
|||
position: relative; |
|||
|
|||
&.checked { |
|||
border-color: #007ACC; |
|||
|
|||
&::after { |
|||
content: ''; |
|||
width: 16rpx; |
|||
height: 16rpx; |
|||
background-color: #007ACC; |
|||
border-radius: 50%; |
|||
position: absolute; |
|||
top: 50%; |
|||
left: 50%; |
|||
transform: translate(-50%, -50%); |
|||
} |
|||
} |
|||
} |
|||
|
|||
text { |
|||
font-size: 28rpx; |
|||
color: #333; |
|||
} |
|||
} |
|||
|
|||
/* 确认信息 */ |
|||
.confirm-info { |
|||
.info-section { |
|||
margin-bottom: 40rpx; |
|||
|
|||
.info-title { |
|||
font-size: 32rpx; |
|||
font-weight: 600; |
|||
color: #333; |
|||
margin-bottom: 24rpx; |
|||
border-left: 6rpx solid #007ACC; |
|||
padding-left: 16rpx; |
|||
} |
|||
|
|||
.info-item { |
|||
display: flex; |
|||
margin-bottom: 16rpx; |
|||
|
|||
.info-label { |
|||
font-size: 28rpx; |
|||
color: #666; |
|||
width: 120rpx; |
|||
flex-shrink: 0; |
|||
} |
|||
|
|||
.info-value { |
|||
font-size: 28rpx; |
|||
color: #333; |
|||
flex: 1; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
/* 底部按钮 */ |
|||
.footer-buttons { |
|||
position: fixed; |
|||
bottom: 0; |
|||
left: 0; |
|||
right: 0; |
|||
background-color: #fff; |
|||
padding: 24rpx 32rpx 24rpx; |
|||
border-top: 1rpx solid #e5e5e5; |
|||
display: flex; |
|||
gap: 24rpx; |
|||
z-index: 100; |
|||
|
|||
.btn { |
|||
flex: 1; |
|||
height: 88rpx; |
|||
border-radius: 12rpx; |
|||
font-size: 32rpx; |
|||
font-weight: 600; |
|||
border: none; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
|
|||
&.btn-primary { |
|||
background-color: #007ACC; |
|||
color: #fff; |
|||
|
|||
&:active { |
|||
background-color: #0056b3; |
|||
} |
|||
} |
|||
|
|||
&.btn-secondary { |
|||
background-color: #f5f5f5; |
|||
color: #666; |
|||
|
|||
&:active { |
|||
background-color: #e5e5e5; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
/* 步骤内容动画 */ |
|||
.step-content { |
|||
animation: fadeIn 0.3s ease-in-out; |
|||
} |
|||
|
|||
@keyframes fadeIn { |
|||
from { |
|||
opacity: 0; |
|||
transform: translateX(20rpx); |
|||
} |
|||
to { |
|||
opacity: 1; |
|||
transform: translateX(0); |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,111 @@ |
|||
<template> |
|||
<view class="assemble"> |
|||
<view class="html-style" v-html="text"></view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import agreement from '@/api/agreement.js'; |
|||
export default { |
|||
data() { |
|||
return { |
|||
type: 1, //类型 1为用户协议,2为隐私策略 |
|||
text: '', |
|||
} |
|||
}, |
|||
onLoad(item) { |
|||
console.log(item.type, '类型') |
|||
this.init(item.type) |
|||
}, |
|||
methods: { |
|||
//初始化拿数据的接口 |
|||
init(type) { |
|||
if (type == 1) { |
|||
//获取用户协议 |
|||
agreement.userAgreement('service').then(res => { |
|||
if(res.code == 1){ |
|||
this.text = res.data.content |
|||
}else{ |
|||
this.text = '' |
|||
} |
|||
}) |
|||
uni.setNavigationBarTitle({ |
|||
title: '用户协议' |
|||
}); |
|||
} else if (type == 2) { |
|||
//获取隐私策略 |
|||
agreement.userAgreement('privacy').then(res => { |
|||
if(res.code == 1){ |
|||
this.text = res.data.content |
|||
}else{ |
|||
this.text = '' |
|||
} |
|||
}) |
|||
uni.setNavigationBarTitle({ |
|||
title: '隐私策略' |
|||
}); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.assemble { |
|||
width: 100%; |
|||
height: 100vh; |
|||
overflow: auto; |
|||
background-color: $bg-color-white; |
|||
} |
|||
|
|||
.html-style { |
|||
padding: 30rpx 40rpx; |
|||
line-height: 1.8; |
|||
font-size: $font-size-base; |
|||
color: $text-color-base; |
|||
|
|||
// 富文本内容样式优化 |
|||
::v-deep p { |
|||
margin-bottom: 20rpx; |
|||
line-height: 1.6; |
|||
} |
|||
|
|||
::v-deep h1, ::v-deep h2, ::v-deep h3 { |
|||
color: $color-primary; |
|||
margin: 30rpx 0 20rpx 0; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
::v-deep h1 { |
|||
font-size: $font-size-extra-lg; |
|||
} |
|||
|
|||
::v-deep h2 { |
|||
font-size: $font-size-lg; |
|||
} |
|||
|
|||
::v-deep h3 { |
|||
font-size: $font-size-medium; |
|||
} |
|||
|
|||
::v-deep ul, ::v-deep ol { |
|||
margin: 20rpx 0; |
|||
padding-left: 40rpx; |
|||
} |
|||
|
|||
::v-deep li { |
|||
margin-bottom: 10rpx; |
|||
line-height: 1.6; |
|||
} |
|||
|
|||
::v-deep strong { |
|||
color: $text-color-base; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
::v-deep a { |
|||
color: $color-primary; |
|||
text-decoration: underline; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,259 @@ |
|||
<template> |
|||
<view class="profile-container"> |
|||
<!-- 自定义导航栏 --> |
|||
<uni-nav-bar |
|||
:statusBar="true" |
|||
backgroundColor="#181A20" |
|||
color="#fff" |
|||
title="我的" |
|||
/> |
|||
|
|||
<!-- 用户头像和基本信息 --> |
|||
<view class="profile-header"> |
|||
<view class="avatar-section"> |
|||
<image :src="userInfo.avatar || $util.img('/static/icon-img/tou.png')" mode="aspectFill"></image> |
|||
</view> |
|||
<view class="user-info"> |
|||
<text class="user-name">{{ userInfo.name || '员工姓名' }}</text> |
|||
<text class="user-role">{{ (userInfo.role_info && userInfo.role_info.role_name) || '员工角色' }}</text> |
|||
<text class="user-phone">{{ userInfo.phone || '手机号码' }}</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 我的功能九宫格 --> |
|||
<view class="grid-container"> |
|||
<view class="grid-title">个人中心</view> |
|||
<view class="grid-content"> |
|||
<view |
|||
class="grid-item" |
|||
v-for="(item, index) in profileItems" |
|||
:key="index" |
|||
@click="handleProfileClick(item)" |
|||
> |
|||
<view class="grid-icon"> |
|||
<uni-icons :type="item.icon" size="32" color="#29d3b4"></uni-icons> |
|||
</view> |
|||
<text class="grid-text">{{ item.title }}</text> |
|||
<text class="grid-desc" v-if="item.desc">{{ item.desc }}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
userInfo: {}, |
|||
profileItems: [ |
|||
{ |
|||
title: '我的资料', |
|||
icon: 'contact', |
|||
desc: '查看编辑个人信息', |
|||
action: 'viewProfile' |
|||
}, |
|||
{ |
|||
title: '我的合同', |
|||
icon: 'compose', |
|||
desc: '查看签署合同', |
|||
path: '/pages-common/contract/my_contract' |
|||
}, |
|||
{ |
|||
title: '我的工资', |
|||
icon: 'wallet', |
|||
desc: '查看工资明细', |
|||
action: 'viewSalary' |
|||
}, |
|||
{ |
|||
title: '我的考勤', |
|||
icon: 'calendar', |
|||
path: '/pages-common/my_attendance' |
|||
}, |
|||
{ |
|||
title: '系统设置', |
|||
icon: 'settings', |
|||
path: '/pages-market/my/set_up' |
|||
} |
|||
] |
|||
} |
|||
}, |
|||
onLoad() { |
|||
this.loadUserInfo(); |
|||
}, |
|||
onShow() { |
|||
this.loadUserInfo(); |
|||
}, |
|||
methods: { |
|||
loadUserInfo() { |
|||
// 从本地存储获取用户信息 |
|||
const userInfo = uni.getStorageSync('userInfo'); |
|||
if (userInfo) { |
|||
this.userInfo = userInfo; |
|||
} |
|||
}, |
|||
handleProfileClick(item) { |
|||
if (item.action) { |
|||
// 处理特殊操作 |
|||
switch (item.action) { |
|||
case 'viewProfile': |
|||
this.viewPersonalProfile(); |
|||
break; |
|||
case 'viewSalary': |
|||
this.viewSalaryInfo(); |
|||
break; |
|||
} |
|||
} else if (item.path) { |
|||
// 页面跳转 |
|||
console.log('跳转到页面:', item.path); |
|||
uni.navigateTo({ |
|||
url: item.path, |
|||
fail: (err) => { |
|||
console.error('页面跳转失败:', err); |
|||
uni.showToast({ |
|||
title: '页面跳转失败', |
|||
icon: 'none' |
|||
}); |
|||
} |
|||
}); |
|||
} |
|||
}, |
|||
viewPersonalProfile() { |
|||
// 跳转到个人资料页面 |
|||
console.log('跳转到个人资料页面'); |
|||
uni.navigateTo({ |
|||
url: '/pages-common/profile/personal_info', |
|||
fail: (err) => { |
|||
console.error('跳转到个人资料页面失败:', err); |
|||
uni.showToast({ |
|||
title: '页面跳转失败', |
|||
icon: 'none' |
|||
}); |
|||
} |
|||
}); |
|||
}, |
|||
viewSalaryInfo() { |
|||
// 跳转到工资页面 |
|||
console.log('跳转到工资页面'); |
|||
uni.navigateTo({ |
|||
url: '/pages-coach/coach/my/salary', |
|||
fail: (err) => { |
|||
console.error('跳转到工资页面失败:', err); |
|||
uni.showToast({ |
|||
title: '页面跳转失败', |
|||
icon: 'none' |
|||
}); |
|||
} |
|||
}); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.profile-container { |
|||
background-color: #181A20; |
|||
min-height: 100vh; |
|||
color: #fff; |
|||
} |
|||
|
|||
.profile-header { |
|||
display: flex; |
|||
align-items: center; |
|||
padding: 30px 20px; |
|||
background: linear-gradient(135deg, #29d3b4 0%, #1a9b7c 100%); |
|||
margin: 20px; |
|||
border-radius: 12px; |
|||
} |
|||
|
|||
.avatar-section { |
|||
width: 80px; |
|||
height: 80px; |
|||
margin-right: 20px; |
|||
} |
|||
|
|||
.avatar-section image { |
|||
width: 100%; |
|||
height: 100%; |
|||
border-radius: 50%; |
|||
border: 3px solid rgba(255, 255, 255, 0.3); |
|||
} |
|||
|
|||
.user-info { |
|||
flex: 1; |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.user-name { |
|||
font-size: 20px; |
|||
font-weight: bold; |
|||
margin-bottom: 8px; |
|||
color: #fff; |
|||
} |
|||
|
|||
.user-role { |
|||
font-size: 14px; |
|||
color: rgba(255, 255, 255, 0.8); |
|||
margin-bottom: 5px; |
|||
} |
|||
|
|||
.user-phone { |
|||
font-size: 12px; |
|||
color: rgba(255, 255, 255, 0.6); |
|||
} |
|||
|
|||
.grid-container { |
|||
margin: 20px; |
|||
} |
|||
|
|||
.grid-title { |
|||
font-size: 16px; |
|||
font-weight: bold; |
|||
margin-bottom: 15px; |
|||
color: #fff; |
|||
} |
|||
|
|||
.grid-content { |
|||
display: grid; |
|||
grid-template-columns: repeat(3, 1fr); |
|||
gap: 15px; |
|||
} |
|||
|
|||
.grid-item { |
|||
background-color: #292929; |
|||
border-radius: 8px; |
|||
padding: 20px 10px; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
min-height: 90px; |
|||
transition: all 0.3s ease; |
|||
} |
|||
|
|||
.grid-item:active { |
|||
background-color: #3a3a3a; |
|||
transform: scale(0.95); |
|||
} |
|||
|
|||
.grid-icon { |
|||
margin-bottom: 8px; |
|||
} |
|||
|
|||
.grid-text { |
|||
font-size: 12px; |
|||
color: #fff; |
|||
text-align: center; |
|||
line-height: 1.2; |
|||
margin-bottom: 3px; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.grid-desc { |
|||
font-size: 10px; |
|||
color: rgba(255, 255, 255, 0.6); |
|||
text-align: center; |
|||
line-height: 1.1; |
|||
} |
|||
</style> |
|||
File diff suppressed because it is too large
@ -0,0 +1,225 @@ |
|||
<!--系统消息-列表--> |
|||
<template> |
|||
<view class="main_box"> |
|||
|
|||
<view class="main_section"> |
|||
<scroll-view |
|||
class="section_1" |
|||
scroll-y="true" |
|||
:lower-threshold="lowerThreshold" |
|||
@scrolltolower="loadMoreData" |
|||
style="height: 90vh;" |
|||
> |
|||
<view |
|||
class="item" |
|||
v-for="(v,k) in tableList" |
|||
:key="k" |
|||
@click="openViewArticleInfo(v)" |
|||
> |
|||
<view class="title">{{v.title}}</view> |
|||
<!-- <image--> |
|||
<!-- class="img_box"--> |
|||
<!-- :src="$util.img('/upload/attachment/image/202504/02/1743562333d1bb6666f969da1b7170381d0845153e_local.png')"--> |
|||
<!-- model="aspectFit"--> |
|||
<!-- ></image>--> |
|||
|
|||
<view class="content" v-html="v.content"></view> |
|||
|
|||
<view class="time">{{v.show_time}}</view> |
|||
</view> |
|||
|
|||
</scroll-view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import commonApi from '@/api/common.js'; |
|||
|
|||
|
|||
|
|||
export default { |
|||
components: { |
|||
}, |
|||
data() { |
|||
return { |
|||
loading:false,//加载状态 |
|||
lowerThreshold: 100,//距离底部多远触发 |
|||
isReachedBottom: false,//防止重复加载|true=不可加载|false=可加载 |
|||
|
|||
//筛选条件 |
|||
filteredData:{ |
|||
page:1,//当前页码 |
|||
limit:10,//每页返回数据条数 |
|||
total:10,//数据总条数 |
|||
hair_staff_id: '',//发信人id |
|||
}, |
|||
tableList:[],//聊天数据列表 |
|||
} |
|||
}, |
|||
onLoad(options) { |
|||
this.filteredData.hair_staff_id = options.hair_staff_id//发信人id |
|||
}, |
|||
onShow(){ |
|||
this.init() |
|||
}, |
|||
//下拉刷新 |
|||
async onPullDownRefresh() { |
|||
//重置为第一页 |
|||
await this.resetFilteredData() |
|||
await this.getList() |
|||
}, |
|||
methods: { |
|||
//初始化 |
|||
async init(){ |
|||
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 commonApi.getContactMessage(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.tableList.unshift(...res.data.data); // 将新数据插入到数组头部 |
|||
|
|||
console.log('列表',this.tableList) |
|||
this.filteredData.total = res.data.total |
|||
this.filteredData.page++ |
|||
}, |
|||
|
|||
//跳转文章详情 |
|||
openViewArticleInfo(item) { |
|||
let id = item.id |
|||
let redirect = item.redirect//重定向地址 |
|||
uni.navigateTo({ |
|||
url: `/pages-common/article_info?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: 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: rgba(255,255,255,1); |
|||
border: 2rpx solid rgba(187,187,187,1); |
|||
|
|||
color: #4F4F4F; |
|||
font-size: 32rpx; |
|||
|
|||
.title{ |
|||
} |
|||
.img_box{ |
|||
margin-top: 30rpx; |
|||
width: 100%; |
|||
} |
|||
.content{ |
|||
margin-top: 30rpx; |
|||
} |
|||
.time{ |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
margin-top: 36rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
|
|||
|
|||
} |
|||
|
|||
.describe { |
|||
color: #999999; |
|||
padding-left: 30rpx; |
|||
} |
|||
</style> |
|||
File diff suppressed because it is too large
@ -0,0 +1,631 @@ |
|||
<template> |
|||
<view class="class-arrange-root"> |
|||
<!-- 顶部日期选择 --> |
|||
<view class="date-bar"> |
|||
<view class="date-item" v-for="(item, idx) in weekList" :key="idx" :class="{active: item.status}" @click="getDate(item.date,item.day)"> |
|||
<view class="week">{{ item.week }}</view> |
|||
<view class="day">{{ item.day }}</view> |
|||
</view> |
|||
</view> |
|||
<!-- "查询"按钮移到日期条下方 --> |
|||
<view class="more-bar-wrapper"> |
|||
<view class="more-bar" @click="openSearchPopup"> |
|||
<text>查询</text> |
|||
<uni-icons type="arrowdown" size="18" color="#bdbdbd" /> |
|||
</view> |
|||
</view> |
|||
<!-- 日历底部弹窗 --> |
|||
<uni-popup ref="calendarPopup" type="bottom"> |
|||
<uni-calendar @change="onCalendarChange" /> |
|||
</uni-popup> |
|||
|
|||
<!-- 查询弹窗 --> |
|||
<view v-if="showSearchPopup" class="search_popup_mask" @tap="showSearchPopup=false"> |
|||
<view class="search_popup_content" @tap.stop> |
|||
<view class="popup_search_content"> |
|||
<view class="popup_header"> |
|||
<view class="popup_title">筛选</view> |
|||
<view class="popup_close" @tap="showSearchPopup=false"> |
|||
<text class="close_text">✕</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<scroll-view :scroll-y="true" class="popup_scroll_view"> |
|||
<!-- 筛选区域 --> |
|||
<view class="popup_filter_section"> |
|||
<view class="popup_filter_row"> |
|||
<view class="popup_filter_item"> |
|||
<text class="popup_filter_label">时间查询</text> |
|||
<picker :value="timeIndex" :range="timeOptions" @change="onTimeChange"> |
|||
<view class="popup_filter_picker">{{ timeOptions[timeIndex] }}</view> |
|||
</picker> |
|||
</view> |
|||
<view class="popup_filter_item"> |
|||
<text class="popup_filter_label">班主任筛选</text> |
|||
<input class="popup_filter_input" placeholder="人员名称筛选" v-model="searchForm.teacher_name" /> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="popup_filter_row"> |
|||
<view class="popup_filter_item"> |
|||
<text class="popup_filter_label">开始日期</text> |
|||
<picker mode="date" :value="searchForm.start_date" @change="onStartDateChange"> |
|||
<view class="popup_filter_input"> |
|||
{{ searchForm.start_date || '选择开始日期' }} |
|||
</view> |
|||
</picker> |
|||
</view> |
|||
<view class="popup_filter_item"> |
|||
<text class="popup_filter_label">结束日期</text> |
|||
<picker mode="date" :value="searchForm.end_date" @change="onEndDateChange"> |
|||
<view class="popup_filter_input"> |
|||
{{ searchForm.end_date || '选择结束日期' }} |
|||
</view> |
|||
</picker> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="popup_filter_row"> |
|||
<view class="popup_filter_item"> |
|||
<text class="popup_filter_label">固定位筛选</text> |
|||
<input class="popup_filter_input" placeholder="输入固定位编号" v-model="searchForm.venue_number" type="number" /> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</scroll-view> |
|||
|
|||
<view class="popup_filter_buttons"> |
|||
<view class="popup_filter_btn reset_btn" @click="resetSearchOnly">重置</view> |
|||
<view class="popup_filter_btn search_btn" @click="searchDataAndClose">搜索</view> |
|||
<view class="popup_filter_btn close_btn" @click="closeSearchPopup">关闭</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
|
|||
<!-- 课程卡片列表 --> |
|||
<view class="course-list"> |
|||
<view class="course-card" v-for="(course, idx) in courseList" :key="idx"> |
|||
<view class="card-header"> |
|||
<view class="status-end">{{ getStatusText(course.status) }}</view> |
|||
</view> |
|||
<view class="card-body"> |
|||
<view class="row">时间：{{ course.course_date || '未设置' }}</view> |
|||
<view class="row">校区：{{ course.campus_name || '未设置' }}</view> |
|||
<view class="row">教室：{{ course.venue ? course.venue.venue_name : '未设置' }}</view> |
|||
<view class="row">课程：{{ course.course ? course.course.course_name : '未设置' }}</view> |
|||
<view class="row">人数：{{ course.available_capacity || 0 }}</view> |
|||
<view class="row">安排情况：{{ course.student ? course.student.length : 0 }}/{{course.max_students ? course.max_students : '不限'}}</view> |
|||
</view> |
|||
<view class="card-footer"> |
|||
<button class="detail-btn" @click="viewDetail(course)">详情</button> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import apiRoute from '@/api/apiRoute.js'; |
|||
export default { |
|||
data() { |
|||
return { |
|||
weekList: [], |
|||
selectedDayIndex: 4, |
|||
date: '', |
|||
courseList: [], |
|||
resource_id: '', |
|||
student_id: '', |
|||
|
|||
// 查询弹窗相关 |
|||
showSearchPopup: false, |
|||
searchForm: { |
|||
time_hour: '', |
|||
start_date: '', |
|||
end_date: '', |
|||
teacher_name: '', |
|||
venue_number: '' |
|||
}, |
|||
|
|||
// 时间选择器相关 |
|||
timeIndex: 0, |
|||
timeOptions: ['全部时间', '上午(8:00-12:00)', '下午(12:00-18:00)', '晚上(18:00-22:00)'] |
|||
}; |
|||
}, |
|||
onLoad(options) { |
|||
this.resource_id = options.resource_id || ''; |
|||
this.student_id = options.student_id || ''; |
|||
this.getDate(); |
|||
|
|||
}, |
|||
methods: { |
|||
async getDate(date = '', day = '') { |
|||
try { |
|||
let res = await apiRoute.getDate({ |
|||
'date': date, |
|||
'day': day |
|||
}) |
|||
this.weekList = res.data.dates |
|||
this.date = res.data.date |
|||
|
|||
let data = await apiRoute.courseAllList({ |
|||
'schedule_date': this.date |
|||
}) |
|||
// 确保courseList是数组，并处理可能的空数据 |
|||
this.courseList = Array.isArray(data.data) ? data.data : [] |
|||
|
|||
|
|||
} catch (error) { |
|||
console.error('获取信息失败:', error); |
|||
// 确保即使出错也有默认数据 |
|||
this.courseList = []; |
|||
uni.showToast({ |
|||
title: '获取课程数据失败', |
|||
icon: 'none' |
|||
}); |
|||
} |
|||
}, |
|||
openCalendar() { |
|||
this.$refs.calendarPopup.open(); |
|||
}, |
|||
closeCalendar() { |
|||
console.log(123123) |
|||
this.$refs.calendarPopup.close(); |
|||
}, |
|||
viewDetail(course) { |
|||
// 跳转到课程详情页 |
|||
const resourceId = this.resource_id || ''; |
|||
const studentId = this.student_id || ''; |
|||
console.log('跳转到课程详情页:', course.id, resourceId, studentId); |
|||
uni.navigateTo({ |
|||
url: '/pages-market/clue/class_arrangement_detail?schedule_id=' + course.id + '&resource_id=' + resourceId + '&student_id=' + studentId, |
|||
fail: (err) => { |
|||
console.error('跳转到课程详情页失败:', err); |
|||
uni.showToast({ |
|||
title: '页面跳转失败', |
|||
icon: 'none' |
|||
}); |
|||
} |
|||
}); |
|||
}, |
|||
onCalendarConfirm(e) { |
|||
|
|||
// 这里可以处理选中的日期 e.fulldate |
|||
uni.showToast({ |
|||
title: '选择日期：' + e.fulldate, |
|||
icon: 'none' |
|||
}); |
|||
|
|||
this.closeCalendar(); |
|||
}, |
|||
onCalendarChange(e) { |
|||
this.getDate(e.fulldate, e.date); |
|||
this.closeCalendar(); |
|||
}, |
|||
getStatusText(status) { |
|||
const statusMap = { |
|||
pending: '待开始', |
|||
upcoming: '即将开始', |
|||
ongoing: '进行中', |
|||
completed: '已结束' |
|||
}; |
|||
return statusMap[status] || status; |
|||
}, |
|||
|
|||
// 查询弹窗相关方法 |
|||
openSearchPopup() { |
|||
this.showSearchPopup = true; |
|||
}, |
|||
|
|||
closeSearchPopup() { |
|||
this.showSearchPopup = false; |
|||
}, |
|||
|
|||
// 时间选择器变化 |
|||
onTimeChange(e) { |
|||
this.timeIndex = e.detail.value; |
|||
this.searchForm.time_hour = this.timeOptions[this.timeIndex]; |
|||
}, |
|||
|
|||
// 开始日期选择变化 |
|||
onStartDateChange(e) { |
|||
this.searchForm.start_date = e.detail.value; |
|||
console.log('开始日期选择:', e.detail.value); |
|||
}, |
|||
|
|||
// 结束日期选择变化 |
|||
onEndDateChange(e) { |
|||
this.searchForm.end_date = e.detail.value; |
|||
console.log('结束日期选择:', e.detail.value); |
|||
}, |
|||
|
|||
// 搜索并关闭弹窗 |
|||
searchDataAndClose() { |
|||
console.log('执行搜索，表单数据:', this.searchForm); |
|||
this.searchCourseData(); |
|||
this.showSearchPopup = false; |
|||
}, |
|||
|
|||
// 搜索课程数据 |
|||
async searchCourseData() { |
|||
try { |
|||
let searchParams = { |
|||
schedule_date: this.date |
|||
}; |
|||
|
|||
// 添加搜索条件 |
|||
if (this.searchForm.time_hour && this.searchForm.time_hour !== '全部时间') { |
|||
searchParams.time_hour = this.searchForm.time_hour; |
|||
} |
|||
if (this.searchForm.start_date) { |
|||
searchParams.start_date = this.searchForm.start_date; |
|||
} |
|||
if (this.searchForm.end_date) { |
|||
searchParams.end_date = this.searchForm.end_date; |
|||
} |
|||
if (this.searchForm.teacher_name) { |
|||
searchParams.teacher_name = this.searchForm.teacher_name; |
|||
} |
|||
if (this.searchForm.venue_number) { |
|||
searchParams.venue_number = this.searchForm.venue_number; |
|||
} |
|||
|
|||
console.log('搜索参数:', searchParams); |
|||
|
|||
let data = await apiRoute.courseAllList(searchParams); |
|||
// 确保courseList是数组，并处理可能的空数据 |
|||
this.courseList = Array.isArray(data.data) ? data.data : []; |
|||
|
|||
uni.showToast({ |
|||
title: '查询完成', |
|||
icon: 'success' |
|||
}); |
|||
} catch (error) { |
|||
console.error('搜索失败:', error); |
|||
uni.showToast({ |
|||
title: '搜索失败', |
|||
icon: 'none' |
|||
}); |
|||
} |
|||
}, |
|||
|
|||
// 重置搜索条件 |
|||
resetSearchOnly() { |
|||
this.searchForm = { |
|||
time_hour: '', |
|||
start_date: '', |
|||
end_date: '', |
|||
teacher_name: '', |
|||
venue_number: '' |
|||
}; |
|||
this.timeIndex = 0; |
|||
|
|||
// 重新加载默认数据 |
|||
this.getDate(); |
|||
}, |
|||
|
|||
// 数据安全处理方法 - 确保嵌套对象访问的安全性 |
|||
safeGet(obj, path, defaultValue = '') { |
|||
if (!obj) return defaultValue; |
|||
const keys = path.split('.'); |
|||
let result = obj; |
|||
for (let key of keys) { |
|||
if (result === null || result === undefined || !result.hasOwnProperty(key)) { |
|||
return defaultValue; |
|||
} |
|||
result = result[key]; |
|||
} |
|||
return result || defaultValue; |
|||
} |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.class-arrange-root { |
|||
background: #232323; |
|||
min-height: 100vh; |
|||
padding-bottom: 30rpx; |
|||
} |
|||
|
|||
.date-bar { |
|||
display: flex; |
|||
align-items: center; |
|||
background: #232323; |
|||
padding: 0 0 10rpx 0; |
|||
overflow-x: auto; |
|||
border-bottom: 1px solid #333; |
|||
|
|||
.date-item { |
|||
flex: 1; |
|||
text-align: center; |
|||
color: #bdbdbd; |
|||
padding: 16rpx 0 0 0; |
|||
|
|||
.week { |
|||
font-size: 22rpx; |
|||
} |
|||
|
|||
.day { |
|||
font-size: 28rpx; |
|||
margin-top: 4rpx; |
|||
} |
|||
|
|||
&.active { |
|||
color: #29d3b4; |
|||
|
|||
.day { |
|||
border-radius: 50%; |
|||
background: #333; |
|||
color: #29d3b4; |
|||
padding: 2rpx 10rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.more-bar-wrapper { |
|||
width: 100%; |
|||
display: flex; |
|||
justify-content: center; |
|||
margin: 10rpx 0 0 0; |
|||
} |
|||
|
|||
.more-bar { |
|||
display: flex; |
|||
align-items: center; |
|||
color: #bdbdbd; |
|||
font-size: 22rpx; |
|||
cursor: pointer; |
|||
background: #333; |
|||
border-radius: 20rpx; |
|||
padding: 8rpx 24rpx; |
|||
} |
|||
|
|||
.course-list { |
|||
margin-top: 20rpx; |
|||
|
|||
.course-card { |
|||
background: #434544; |
|||
border-radius: 10rpx; |
|||
margin: 0 0 20rpx 0; |
|||
padding: 0 0 20rpx 0; |
|||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08); |
|||
|
|||
.card-header { |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
padding: 10rpx 20rpx 0 0; |
|||
|
|||
.status-end { |
|||
background: #e95c6b; |
|||
color: #fff; |
|||
border-radius: 10rpx; |
|||
padding: 4rpx 18rpx; |
|||
font-size: 22rpx; |
|||
} |
|||
} |
|||
|
|||
.card-body { |
|||
padding: 0 20rpx; |
|||
|
|||
.row { |
|||
color: #fff; |
|||
font-size: 24rpx; |
|||
margin: 8rpx 0; |
|||
} |
|||
} |
|||
|
|||
.card-footer { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding: 0 20rpx; |
|||
|
|||
.sign-info { |
|||
color: #bdbdbd; |
|||
font-size: 22rpx; |
|||
} |
|||
|
|||
.detail-btn { |
|||
background: transparent; |
|||
border: 2rpx solid #ffd86b; |
|||
color: #ffd86b; |
|||
border-radius: 8rpx; |
|||
padding: 6rpx 24rpx; |
|||
font-size: 24rpx; |
|||
width: 100%; |
|||
margin-top: 40rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 搜索弹窗样式 |
|||
.search_popup_mask { |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
background: rgba(0, 0, 0, 0.6); |
|||
z-index: 999; |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.search_popup_content { |
|||
background: #fff; |
|||
border-bottom-left-radius: 24rpx; |
|||
border-bottom-right-radius: 24rpx; |
|||
animation: slideDown 0.3s ease-out; |
|||
width: 100%; |
|||
max-height: 80vh; |
|||
overflow: hidden; |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
@keyframes slideDown { |
|||
from { |
|||
transform: translateY(-100%); |
|||
} |
|||
to { |
|||
transform: translateY(0); |
|||
} |
|||
} |
|||
|
|||
// 弹窗搜索内容样式 |
|||
.popup_search_content { |
|||
padding: 0; |
|||
background: #fff; |
|||
min-height: 60vh; |
|||
max-height: 80vh; |
|||
display: flex; |
|||
flex-direction: column; |
|||
border-bottom-left-radius: 24rpx; |
|||
border-bottom-right-radius: 24rpx; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.popup_header { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding: 32rpx; |
|||
border-bottom: 1px solid #f0f0f0; |
|||
} |
|||
|
|||
.popup_title { |
|||
font-size: 32rpx; |
|||
font-weight: 600; |
|||
color: #333; |
|||
} |
|||
|
|||
.popup_close { |
|||
width: 60rpx; |
|||
height: 60rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
|
|||
.close_text { |
|||
font-size: 32rpx; |
|||
color: #999; |
|||
} |
|||
} |
|||
|
|||
.popup_scroll_view { |
|||
flex: 1; |
|||
padding: 32rpx; |
|||
overflow-y: auto; |
|||
} |
|||
|
|||
.popup_filter_section { |
|||
margin-bottom: 32rpx; |
|||
|
|||
&:last-child { |
|||
margin-bottom: 0; |
|||
} |
|||
} |
|||
|
|||
.popup_filter_row { |
|||
display: flex; |
|||
gap: 20rpx; |
|||
margin-bottom: 24rpx; |
|||
|
|||
&:last-child { |
|||
margin-bottom: 0; |
|||
} |
|||
} |
|||
|
|||
.popup_filter_item { |
|||
flex: 1; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 12rpx; |
|||
|
|||
&.full_width { |
|||
flex: 1; |
|||
} |
|||
|
|||
.popup_filter_label { |
|||
font-size: 26rpx; |
|||
color: #666; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.popup_filter_input { |
|||
height: 72rpx; |
|||
line-height: 72rpx; |
|||
padding: 0 16rpx; |
|||
border: 1px solid #ddd; |
|||
border-radius: 8rpx; |
|||
font-size: 28rpx; |
|||
color: #333; |
|||
background: #fff; |
|||
|
|||
&::placeholder { |
|||
color: #999; |
|||
} |
|||
} |
|||
|
|||
.popup_filter_picker { |
|||
height: 72rpx; |
|||
line-height: 72rpx; |
|||
padding: 0 16rpx; |
|||
border: 1px solid #ddd; |
|||
border-radius: 8rpx; |
|||
font-size: 28rpx; |
|||
color: #333; |
|||
background: #fff; |
|||
position: relative; |
|||
|
|||
&::after { |
|||
content: '▼'; |
|||
position: absolute; |
|||
right: 16rpx; |
|||
font-size: 20rpx; |
|||
color: #999; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.popup_filter_buttons { |
|||
display: flex; |
|||
gap: 20rpx; |
|||
padding: 32rpx; |
|||
margin-top: auto; |
|||
border-top: 1px solid #f0f0f0; |
|||
background: #fff; |
|||
border-bottom-left-radius: 24rpx; |
|||
border-bottom-right-radius: 24rpx; |
|||
} |
|||
|
|||
.popup_filter_btn { |
|||
flex: 1; |
|||
height: 72rpx; |
|||
line-height: 72rpx; |
|||
text-align: center; |
|||
border-radius: 8rpx; |
|||
font-size: 28rpx; |
|||
font-weight: 600; |
|||
|
|||
&.search_btn { |
|||
background: #29d3b4; |
|||
color: #fff; |
|||
} |
|||
|
|||
&.reset_btn { |
|||
background: #f5f5f5; |
|||
color: #666; |
|||
border: 1px solid #ddd; |
|||
} |
|||
|
|||
&.close_btn { |
|||
background: #666; |
|||
color: #fff; |
|||
} |
|||
} |
|||
</style> |
|||
File diff suppressed because it is too large
@ -0,0 +1,431 @@ |
|||
// 客户详情页样式文件 |
|||
.assemble { |
|||
background-color: #292929; |
|||
min-height: 100vh; |
|||
} |
|||
|
|||
.content { |
|||
padding: 20rpx; |
|||
} |
|||
|
|||
.tab-switcher-container { |
|||
margin: 20rpx 0; |
|||
} |
|||
|
|||
// 学生信息区域 |
|||
.student-section { |
|||
margin-top: 20rpx; |
|||
|
|||
.section-header { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
padding: 20rpx; |
|||
|
|||
.section-title { |
|||
font-size: 32rpx; |
|||
font-weight: bold; |
|||
color: #fff; |
|||
} |
|||
|
|||
.add-student-btn { |
|||
display: flex; |
|||
align-items: center; |
|||
background: #29d3b4; |
|||
color: #fff; |
|||
border-radius: 20rpx; |
|||
padding: 12rpx 20rpx; |
|||
font-size: 24rpx; |
|||
|
|||
.add-icon { |
|||
margin-right: 8rpx; |
|||
font-weight: bold; |
|||
font-size: 20rpx; |
|||
} |
|||
|
|||
&:active { |
|||
background: #1ea08e; |
|||
transform: scale(0.95); |
|||
} |
|||
} |
|||
} |
|||
|
|||
.student-cards { |
|||
width: 100%; |
|||
min-height: 600rpx; |
|||
|
|||
.student-swiper { |
|||
width: 100%; |
|||
height: 560rpx; |
|||
|
|||
.student-swiper-content { |
|||
display: flex; |
|||
flex-direction: column; |
|||
height: 580rpx; |
|||
padding: 20rpx; |
|||
box-sizing: border-box; |
|||
background-color: #434544; |
|||
border-radius: 16rpx; |
|||
margin: 0 10rpx; |
|||
color: #fff; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.popup-footer { |
|||
display: flex; |
|||
padding: 30rpx 40rpx; |
|||
padding-bottom: calc(30rpx + env(safe-area-inset-bottom)); |
|||
border-top: 1px solid #333; |
|||
gap: 30rpx; |
|||
flex-shrink: 0; /* 确保底部按钮区域不被压缩 */ |
|||
background: #1a1a1a; /* 确保背景色一致 */ |
|||
|
|||
.popup-footer-btns { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
|
|||
.footer-btn { |
|||
flex: 1; |
|||
height: 88rpx; |
|||
display: flex; |
|||
width: 45%; |
|||
align-items: center; |
|||
justify-content: center; |
|||
border-radius: 12rpx; |
|||
font-size: 32rpx; |
|||
font-weight: 500; |
|||
|
|||
&.cancel-btn { |
|||
background: #cccccc; |
|||
} |
|||
|
|||
&.confirm-btn { |
|||
background: linear-gradient(45deg, #29D3B4, #1DB584); |
|||
color: #ffffff; |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
// 课程、通话、体测记录等区域 |
|||
.course-section, .call-section, .fitness-section, .study-plan-section { |
|||
background-color: #434544; |
|||
border-radius: 16rpx; |
|||
margin: 20rpx 0; |
|||
|
|||
.section-header { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
padding: 20rpx; |
|||
|
|||
.context-title { |
|||
font-size: 28rpx; |
|||
font-weight: bold; |
|||
color: #fff; |
|||
} |
|||
|
|||
.add-record-btn { |
|||
display: flex; |
|||
align-items: center; |
|||
background: #29d3b4; |
|||
color: #fff; |
|||
border-radius: 20rpx; |
|||
padding: 12rpx 20rpx; |
|||
font-size: 24rpx; |
|||
|
|||
.add-icon { |
|||
margin-right: 8rpx; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
&:active { |
|||
background: #1ea08e; |
|||
transform: scale(0.95); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 操作按钮区域 - 独立于Swiper外部 |
|||
.student-section .action-buttons-section { |
|||
display: flex; |
|||
gap: 8rpx; |
|||
margin-top: 15rpx; |
|||
padding: 15rpx; |
|||
flex-wrap: nowrap; |
|||
height: 100rpx; |
|||
box-sizing: border-box; |
|||
overflow-x: auto; |
|||
overflow-y: hidden; |
|||
-webkit-overflow-scrolling: touch; |
|||
background-color: #434544; |
|||
border-radius: 16rpx; |
|||
margin: 15rpx 0; |
|||
|
|||
&::-webkit-scrollbar { |
|||
display: none; |
|||
} |
|||
|
|||
.action-item { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
background: rgba(255, 255, 255, 0.05); |
|||
border: 1px solid rgba(41, 211, 180, 0.3); |
|||
border-radius: 8rpx; |
|||
padding: 12rpx 8rpx; |
|||
min-width: 90rpx; |
|||
flex-shrink: 0; |
|||
transition: all 0.3s ease; |
|||
|
|||
.action-icon { |
|||
font-size: 24rpx; |
|||
margin-bottom: 5rpx; |
|||
line-height: 1; |
|||
} |
|||
|
|||
.action-text { |
|||
font-size: 18rpx; |
|||
color: #fff; |
|||
text-align: center; |
|||
line-height: 1.2; |
|||
word-break: break-all; |
|||
} |
|||
|
|||
&:active { |
|||
background: rgba(41, 211, 180, 0.2); |
|||
border-color: #29d3b4; |
|||
transform: scale(0.95); |
|||
|
|||
.action-text { |
|||
color: #29d3b4; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 通用空状态样式 |
|||
.empty-state { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding: 60rpx 20rpx; |
|||
min-height: 200rpx; |
|||
|
|||
.empty-icon { |
|||
font-size: 60rpx; |
|||
opacity: 0.6; |
|||
margin-bottom: 20rpx; |
|||
} |
|||
|
|||
.empty-text { |
|||
color: #ccc; |
|||
font-size: 28rpx; |
|||
margin-bottom: 20rpx; |
|||
} |
|||
|
|||
.empty-add-btn { |
|||
background: #29d3b4; |
|||
color: #fff; |
|||
padding: 12rpx 24rpx; |
|||
border-radius: 20rpx; |
|||
font-size: 24rpx; |
|||
transition: all 0.3s ease; |
|||
|
|||
&:active { |
|||
background: #1ea08e; |
|||
transform: scale(0.95); |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 备注弹窗样式 |
|||
.remark-dialog { |
|||
width: 600rpx; |
|||
padding: 30rpx; |
|||
background: #fff; |
|||
border-radius: 16rpx; |
|||
|
|||
textarea { |
|||
width: 100%; |
|||
height: 200rpx; |
|||
padding: 20rpx; |
|||
border: 2rpx solid #e9ecef; |
|||
border-radius: 12rpx; |
|||
font-size: 28rpx; |
|||
color: #333; |
|||
background-color: #fff; |
|||
box-sizing: border-box; |
|||
resize: none; |
|||
|
|||
&::placeholder { |
|||
color: #999; |
|||
} |
|||
|
|||
&:focus { |
|||
border-color: #29d3b4; |
|||
outline: none; |
|||
box-shadow: 0 0 0 2rpx rgba(41, 211, 180, 0.1); |
|||
} |
|||
} |
|||
|
|||
.dialog-btns { |
|||
display: flex; |
|||
gap: 20rpx; |
|||
margin-top: 30rpx; |
|||
|
|||
.btn { |
|||
flex: 1; |
|||
padding: 20rpx; |
|||
border-radius: 8rpx; |
|||
font-size: 28rpx; |
|||
text-align: center; |
|||
|
|||
&.cancel { |
|||
background: #f8f9fa; |
|||
color: #666; |
|||
border: 2rpx solid #e9ecef; |
|||
} |
|||
|
|||
&.confirm { |
|||
background: #29d3b4; |
|||
color: #fff; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 二维码支付弹窗样式 |
|||
.qrcode-payment-modal { |
|||
width: 600rpx; |
|||
background: #fff; |
|||
border-radius: 20rpx; |
|||
overflow: hidden; |
|||
|
|||
.modal-header { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
padding: 40rpx 40rpx 20rpx; |
|||
border-bottom: 1px solid #f0f0f0; |
|||
|
|||
.modal-title { |
|||
font-size: 36rpx; |
|||
font-weight: 600; |
|||
color: #333; |
|||
} |
|||
|
|||
.close-btn { |
|||
width: 60rpx; |
|||
height: 60rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
border-radius: 50%; |
|||
background: #f5f5f5; |
|||
color: #666; |
|||
font-size: 32rpx; |
|||
|
|||
&:active { |
|||
background: #e5e5e5; |
|||
transform: scale(0.95); |
|||
} |
|||
} |
|||
} |
|||
|
|||
.order-info { |
|||
padding: 30rpx 40rpx; |
|||
|
|||
.info-row { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-bottom: 20rpx; |
|||
|
|||
.label { |
|||
font-size: 28rpx; |
|||
color: #666; |
|||
margin-right: 20rpx; |
|||
} |
|||
|
|||
.value { |
|||
font-size: 28rpx; |
|||
color: #333; |
|||
flex: 1; |
|||
} |
|||
|
|||
.amount { |
|||
font-size: 32rpx; |
|||
color: #ff4757; |
|||
font-weight: 600; |
|||
flex: 1; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.qrcode-container { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
padding: 40rpx; |
|||
background: #fafafa; |
|||
|
|||
.qrcode-image { |
|||
width: 300rpx; |
|||
height: 300rpx; |
|||
border: 1px solid #e5e5e5; |
|||
border-radius: 12rpx; |
|||
background: #fff; |
|||
margin-bottom: 20rpx; |
|||
} |
|||
|
|||
.qrcode-tip { |
|||
font-size: 24rpx; |
|||
color: #666; |
|||
text-align: center; |
|||
line-height: 1.4; |
|||
} |
|||
} |
|||
|
|||
.modal-buttons { |
|||
display: flex; |
|||
padding: 30rpx 40rpx 40rpx; |
|||
gap: 20rpx; |
|||
|
|||
.btn { |
|||
flex: 1; |
|||
height: 80rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
border-radius: 40rpx; |
|||
font-size: 28rpx; |
|||
font-weight: 500; |
|||
|
|||
&.secondary { |
|||
background: #f5f5f5; |
|||
color: #666; |
|||
|
|||
&:active { |
|||
background: #e5e5e5; |
|||
transform: scale(0.98); |
|||
} |
|||
} |
|||
|
|||
&.primary { |
|||
background: #29d3b4; |
|||
color: #fff; |
|||
|
|||
&:active { |
|||
background: #1ea08e; |
|||
transform: scale(0.98); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
File diff suppressed because it is too large
@ -0,0 +1,164 @@ |
|||
<template> |
|||
<view class="dark-table-container"> |
|||
<view v-for="(row, rIdx) in data" :key="rIdx" class="card"> |
|||
<view class="card-title" @click="toggleExpand(rIdx)"> |
|||
{{ row.channel }} |
|||
<text class="expand-icon">{{ expanded[rIdx] ? '▲' : '▼' }}</text> |
|||
</view> |
|||
<view class="card-content"> |
|||
<view |
|||
class="card-row" |
|||
v-for="(col, cIdx) in getVisibleColumns(rIdx)" |
|||
:key="cIdx" |
|||
> |
|||
<view class="card-label"> |
|||
{{ col.label }} |
|||
<text v-if="col.tip" class="tip" @click.stop="showTip(col.tip)">?</text> |
|||
</view> |
|||
<view class="card-value">{{ row[col.key] || '-' }}</view> |
|||
</view> |
|||
</view> |
|||
<view v-if="columns.length > 6" class="expand-btn" @click="toggleExpand(rIdx)"> |
|||
{{ expanded[rIdx] ? '收起' : '展开全部' }} |
|||
</view> |
|||
</view> |
|||
<!-- 说明弹窗 --> |
|||
<uni-popup ref="popup" type="center"> |
|||
<view class="popup-content">{{ tipContent }}</view> |
|||
</uni-popup> |
|||
<AQTabber></AQTabber> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import AQTabber from "@/components/AQ/AQTabber.vue" |
|||
|
|||
export default { |
|||
components: { |
|||
AQTabber, |
|||
}, |
|||
data() { |
|||
return { |
|||
columns: [ |
|||
{ label: '渠道', key: 'channel' }, |
|||
{ label: '资源数', key: 'resource', tip: '本月的新资源' }, |
|||
{ label: '到访数(一访)', key: 'visit1', tip: '本月资源的一访到访数' }, |
|||
{ label: '到访率(一访)', key: 'visitRate1', tip: '一访到访数/本月新资源数' }, |
|||
{ label: '到访数(二访)', key: 'visit2', tip: '二访到访数/一访到访数' }, |
|||
{ label: '到访率(二访)', key: 'visitRate2', tip: '二访到访数/一访到访数' }, |
|||
{ label: '关单数(一访)', key: 'close1', tip: '本月一访到访的关单数' }, |
|||
{ label: '关单率(一访)', key: 'closeRate1', tip: '一访关单数/一访到访数' }, |
|||
{ label: '关单数(二访)', key: 'close2', tip: '二访到访的关单数' }, |
|||
{ label: '关单率(二访)', key: 'closeRate2', tip: '二访关单数/二访到访数' }, |
|||
{ label: '月总转', key: 'monthTrans', tip: '关单数（合计）/资源数' }, |
|||
{ label: '往月到访数', key: 'lastMonthVisit', tip: '本月资源在往月到访的到访数' }, |
|||
{ label: '月共到访', key: 'monthTotalVisit', tip: '本月资源任在本月到访/关单' }, |
|||
{ label: '往月关单数', key: 'lastMonthClose', tip: '本月关单-往月关单' }, |
|||
{ label: '月共关单', key: 'monthTotalClose', tip: '本月关单+往月关单' }, |
|||
], |
|||
data: [ |
|||
{ channel: '体检包（地推）', resource: 10, visit1: 5, visitRate1: '50%', visit2: 2, visitRate2: '40%', close1: 1, closeRate1: '20%', close2: 1, closeRate2: '50%', monthTrans: '10%', lastMonthVisit: 0, monthTotalVisit: 5, lastMonthClose: 0, monthTotalClose: 1 }, |
|||
], |
|||
tipContent: '', |
|||
expanded: {}, |
|||
} |
|||
}, |
|||
methods: { |
|||
showTip(content) { |
|||
this.tipContent = content |
|||
this.$refs.popup.open() |
|||
}, |
|||
toggleExpand(idx) { |
|||
this.$set(this.expanded, idx, !this.expanded[idx]) |
|||
}, |
|||
getVisibleColumns(idx) { |
|||
// 只展示前5个字段，展开后展示全部（不含渠道） |
|||
const cols = this.columns.slice(1) |
|||
if (this.expanded[idx]) return cols |
|||
return cols.slice(0, 5) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.dark-table-container { |
|||
background: #18181c; |
|||
color: #f1f1f1; |
|||
min-height: 100vh; |
|||
padding: 24rpx 12rpx; |
|||
} |
|||
.card { |
|||
background: #23232a; |
|||
border-radius: 18rpx; |
|||
box-shadow: 0 4rpx 24rpx rgba(0,0,0,0.18); |
|||
margin-bottom: 32rpx; |
|||
padding: 24rpx 20rpx 8rpx 20rpx; |
|||
transition: box-shadow 0.2s; |
|||
} |
|||
.card-title { |
|||
font-size: 32rpx; |
|||
font-weight: bold; |
|||
margin-bottom: 18rpx; |
|||
color: #ffb300; |
|||
letter-spacing: 2rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
cursor: pointer; |
|||
} |
|||
.expand-icon { |
|||
font-size: 24rpx; |
|||
color: #bdbdbd; |
|||
margin-left: 12rpx; |
|||
} |
|||
.card-content { |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 12rpx; |
|||
overflow: hidden; |
|||
transition: max-height 0.3s; |
|||
} |
|||
.card-row { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
border-bottom: 1px dashed #333; |
|||
padding: 8rpx 0; |
|||
} |
|||
.card-label { |
|||
color: #bdbdbd; |
|||
font-size: 26rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
.card-value { |
|||
color: #f1f1f1; |
|||
font-size: 26rpx; |
|||
text-align: right; |
|||
max-width: 60%; |
|||
word-break: break-all; |
|||
} |
|||
.tip { |
|||
color: #ffb300; |
|||
margin-left: 8rpx; |
|||
font-size: 24rpx; |
|||
cursor: pointer; |
|||
} |
|||
.expand-btn { |
|||
color: #ffb300; |
|||
text-align: center; |
|||
font-size: 26rpx; |
|||
margin: 10rpx 0 0 0; |
|||
padding-bottom: 8rpx; |
|||
cursor: pointer; |
|||
} |
|||
.popup-content { |
|||
background: #23232a; |
|||
color: #fff; |
|||
padding: 32rpx; |
|||
border-radius: 16rpx; |
|||
min-width: 300rpx; |
|||
text-align: center; |
|||
} |
|||
</style> |
|||
File diff suppressed because it is too large
@ -0,0 +1,365 @@ |
|||
<!--编辑客户--> |
|||
<template> |
|||
<view class="assemble"> |
|||
<!--切换--> |
|||
<view class="tab_section"> |
|||
<fui-segmented-control |
|||
:values="optionTable" |
|||
:current="(Number(optionTableId))" |
|||
type="button" |
|||
radius="8" |
|||
height="80" |
|||
color="#29d3b4" |
|||
bold="true" |
|||
@click="segmented"> |
|||
</fui-segmented-control> |
|||
</view> |
|||
|
|||
<!-- 客户资源修改记录--> |
|||
<scroll-view |
|||
v-show="filteredData.type == `resource`" |
|||
scroll-y="true" |
|||
:lower-threshold="lowerThreshold" |
|||
@scrolltolower="loadMoreData" |
|||
style="margin-top:40rpx;height: 80vh;" |
|||
> |
|||
<!--时间轴--> |
|||
<view class="table_list"> |
|||
<fui-timeaxis background="#292929" :padding="['36rpx','16rpx']"> |
|||
<fui-timeaxis-node |
|||
:lineColor="k<3 ? v.activeColor:'#ccc'" |
|||
:lined="k!==tableList.length-1" |
|||
v-for="(v,k) in tableList" |
|||
:key="k" |
|||
> |
|||
<!--inco--> |
|||
<view |
|||
class="fui-node" |
|||
:style="{borderColor:(k != tableList.length-1 ? '#29d3b4' :'' ) }" |
|||
> |
|||
</view> |
|||
<template v-slot:right> |
|||
<view |
|||
class="fui-process__node table_itme" |
|||
:style="{paddingBottom:(k !== tableList.length-1 ? '50rpx' :'0rpx')}" |
|||
:class="{'fui-node__pb':k!==tableList.length-1}" |
|||
> |
|||
|
|||
<view class="fui-title"> |
|||
<!--修改时间--> |
|||
{{v.modification_time}} |
|||
</view> |
|||
<view class="itme_box"> |
|||
<view class="title_name">修改人：{{v.staff_id_name}} 修改了如下内容</view> |
|||
<view class="table_section"> |
|||
<table class="table_box"> |
|||
<!-- 自定义表头 --> |
|||
<thead> |
|||
<tr> |
|||
<th style="width: 30%; border: 1px solid #ddd; padding: 12rpx;">字段名称</th> |
|||
<th style="width: 34%; border: 1px solid #ddd; padding: 12rpx;">原数据</th> |
|||
<th style="width: 34%; border: 1px solid #ddd; padding: 12rpx;">新数据</th> |
|||
</tr> |
|||
</thead> |
|||
|
|||
<!-- 自定义每一行数据 --> |
|||
<tbody> |
|||
<tr v-for="(row, index) in v.update_arr" :key="index"> |
|||
<td style="width: 30%; border: 1px solid #ddd; padding: 12rpx;">{{ row.field_name_zh }}</td> |
|||
<td style="width: 34%; border: 1px solid #ddd; padding: 12rpx;">{{ row.old_value }}</td> |
|||
<td style="width: 34%; border: 1px solid #ddd; padding: 12rpx;">{{ row.new_value }}</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
</fui-timeaxis-node> |
|||
</fui-timeaxis> |
|||
</view> |
|||
</scroll-view> |
|||
|
|||
<!-- 六要素修改记录--> |
|||
<scroll-view |
|||
v-show="filteredData.type == `six_speed`" |
|||
scroll-y="true" |
|||
:lower-threshold="lowerThreshold" |
|||
@scrolltolower="loadMoreData" |
|||
style="margin-top:40rpx;height: 80vh;" |
|||
> |
|||
<!--时间轴--> |
|||
<view class="table_list"> |
|||
<fui-timeaxis background="#292929" :padding="['36rpx','16rpx']"> |
|||
<fui-timeaxis-node |
|||
:lineColor="k<3?v.activeColor:'#ccc'" |
|||
:lined="k!==tableList.length-1" |
|||
v-for="(v,k) in tableList" |
|||
:key="k" |
|||
> |
|||
<!--inco--> |
|||
<view |
|||
class="fui-node" |
|||
:style="{borderColor:(k != tableList.length-1 ? '#29d3b4' :'' ) }" |
|||
> |
|||
</view> |
|||
<template v-slot:right> |
|||
<view |
|||
class="fui-process__node table_itme" |
|||
:style="{paddingBottom:(k !== tableList.length-1 ? '50rpx' :'0rpx')}" |
|||
:class="{'fui-node__pb':k!==tableList.length-1}" |
|||
> |
|||
|
|||
<view class="fui-title"> |
|||
<!--修改时间--> |
|||
{{v.modification_time}} |
|||
</view> |
|||
<view class="itme_box"> |
|||
<view class="title_name">修改人：{{v.staff_id_name}} 修改了如下内容</view> |
|||
<view class="table_section"> |
|||
<table class="table_box"> |
|||
<!-- 自定义表头 --> |
|||
<thead> |
|||
<tr> |
|||
<th style="width: 30%; border: 1px solid #ddd; padding: 12rpx;">字段名称</th> |
|||
<th style="width: 34%; border: 1px solid #ddd; padding: 12rpx;">原数据</th> |
|||
<th style="width: 34%; border: 1px solid #ddd; padding: 12rpx;">新数据</th> |
|||
</tr> |
|||
</thead> |
|||
|
|||
<!-- 自定义每一行数据 --> |
|||
<tbody> |
|||
<tr v-for="(row, index) in v.update_arr" :key="index"> |
|||
<td style="width: 30%; border: 1px solid #ddd; padding: 12rpx;">{{ row.field_name_zh }}</td> |
|||
<td style="width: 34%; border: 1px solid #ddd; padding: 12rpx;">{{ row.old_value }}</td> |
|||
<td style="width: 34%; border: 1px solid #ddd; padding: 12rpx;">{{ row.new_value }}</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
</fui-timeaxis-node> |
|||
</fui-timeaxis> |
|||
</view> |
|||
</scroll-view> |
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import apiRoute from '@/api/apiRoute.js'; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
|
|||
loading:false,//加载状态 |
|||
lowerThreshold: 100,//距离底部多远触发 |
|||
isReachedBottom: false,//防止重复加载|true=不可加载|false=可加载 |
|||
|
|||
//筛选条件 |
|||
filteredData:{ |
|||
page:1,//当前页码 |
|||
limit:10,//每页返回数据条数 |
|||
total:10,//数据总条数 |
|||
type:'resource',//查询类型|resource=客户资源,six_speed=六要素 |
|||
customer_resource_id: '',//客户资源表id |
|||
}, |
|||
//数据列表 |
|||
tableList:[],//表格数据 |
|||
|
|||
//tab切换 |
|||
optionTableId:0,//分段器初始选中项索引 |
|||
optionTable:[ |
|||
{ |
|||
id: 0, |
|||
name: '客户资源修改记录', |
|||
type:'resource', |
|||
}, |
|||
{ |
|||
id: 1, |
|||
name: '六要素修改记录', |
|||
type:'six_speed', |
|||
} |
|||
] |
|||
} |
|||
}, |
|||
onLoad(options) { |
|||
this.filteredData.customer_resource_id = options.resource_id//客户资源表id |
|||
}, |
|||
onShow() { |
|||
this.init() |
|||
}, |
|||
//下拉刷新 |
|||
async onPullDownRefresh() { |
|||
//重置为第一页 |
|||
await this.resetFilteredData() |
|||
await this.getList() |
|||
}, |
|||
methods: { |
|||
//初始化 |
|||
async init() { |
|||
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 apiRoute.xs_customerResourcesGetEditLogList(data) |
|||
this.loading = false |
|||
this.isReachedBottom = false; |
|||
if (res.code != 1){ |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
|
|||
console.log(123123123,res) |
|||
|
|||
this.tableList = this.tableList.concat(res.data.data); // 使用 concat 方法 将新数据追加到数组中 |
|||
|
|||
console.log('列表1',this.tableList) |
|||
this.filteredData.total = res.data.total |
|||
this.filteredData.page++ |
|||
|
|||
}, |
|||
|
|||
//切换tag列表 |
|||
async segmented(e) { |
|||
console.log('切换',e) |
|||
//e.id|0=基础信息 1=六要素 |
|||
let status = e.id |
|||
this.optionTableId = String(status) |
|||
this.filteredData.type = e.type//查询类型|resource=客户资源,six_speed=六要素 |
|||
|
|||
await this.resetFilteredData() |
|||
await this.getList() |
|||
}, |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.assemble{ |
|||
width: 100%; |
|||
height: 100%; |
|||
background-color: #292929; |
|||
overflow: auto; |
|||
.tab_section{ |
|||
padding: 0 20rpx; |
|||
padding-top: 30rpx; |
|||
} |
|||
.table_list{ |
|||
color: #fff; |
|||
::v-deep .fui-timeaxis__line{ |
|||
background-color: #fff; |
|||
} |
|||
|
|||
.itme_box { |
|||
margin-top: 30rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 25rpx; |
|||
.title_name{ |
|||
font-size: 28rpx; |
|||
} |
|||
.table_section{ |
|||
.table_box{ |
|||
width: 100%; |
|||
border-collapse: collapse; |
|||
table-layout: fixed; |
|||
tr{ |
|||
display: flex; |
|||
th{} |
|||
td{} |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
::v-deep .fui-timeaxis__wrap{ |
|||
|
|||
} |
|||
.fui-node { |
|||
width: 32rpx; |
|||
height: 32rpx; |
|||
border-radius: 50%; |
|||
background: #fff; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
border: 4px solid #ccc; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.fui-process__node { |
|||
padding-left: 20rpx; |
|||
} |
|||
|
|||
.fui-title { |
|||
font-size: 34rpx; |
|||
line-height: 34rpx; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.fui-descr { |
|||
font-size: 28rpx; |
|||
padding-top: 12rpx; |
|||
color: #7F7F7F; |
|||
} |
|||
|
|||
.fui-time__left { |
|||
font-size: 36rpx; |
|||
line-height: 36rpx; |
|||
text-align: right; |
|||
padding-right: 20rpx; |
|||
} |
|||
|
|||
.fui-node__pbtm { |
|||
padding-bottom: 88rpx; |
|||
} |
|||
|
|||
|
|||
} |
|||
|
|||
} |
|||
</style> |
|||
File diff suppressed because it is too large
@ -0,0 +1,343 @@ |
|||
<!--市场数据统计页面--> |
|||
<template> |
|||
<view class="main_box" :class="{'has-safe-area': hasSafeArea}"> |
|||
<!--自定义导航栏--> |
|||
<view class="navbar_section"> |
|||
<view class="title">市场数据统计</view> |
|||
</view> |
|||
|
|||
<!-- 顶部筛选 --> |
|||
<view class="filter-section"> |
|||
<view class="filter-item"> |
|||
<view class="label">统计时间：</view> |
|||
<picker mode="date" fields="month" :value="currentDate" @change="dateChange"> |
|||
<view class="picker-value">{{currentDate}}</view> |
|||
</picker> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 市场人员资源量统计 --> |
|||
<view class="table-section"> |
|||
<view class="table-title">市场人员资源量统计</view> |
|||
<view class="table-container"> |
|||
<view class="table-header"> |
|||
<view class="th th-person">人员</view> |
|||
<view class="th th-week">周数量</view> |
|||
<view class="th th-month">月数量</view> |
|||
<view class="th th-year">年数量</view> |
|||
</view> |
|||
<view class="table-body"> |
|||
<view class="table-row" v-for="(item, index) in staffData" :key="index"> |
|||
<view class="td td-person">{{item.name}}</view> |
|||
<view class="td td-week">{{item.weekCount}}</view> |
|||
<view class="td td-month">{{item.monthCount}}</view> |
|||
<view class="td td-year">{{item.yearCount}}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 校区人员资源渠道量 --> |
|||
<view class="table-section"> |
|||
<view class="table-title">{{currentMonth}}月 - 年度校区人员资源渠道量</view> |
|||
<view class="table-container"> |
|||
<view class="table-header"> |
|||
<view class="th th-channel" style="width: 100px;">渠道</view> |
|||
<view class="th" v-for="(school, index) in schoolList" :key="index">{{school.campus_name}}</view> |
|||
<view class="th th-total">渠道合计</view> |
|||
</view> |
|||
<view class="table-body"> |
|||
<view class="table-row" v-for="(channel, index) in channelList" :key="index"> |
|||
<view class="td td-channel" style="width: 100px;">{{channel.name}}</view> |
|||
<view class="td" v-for="(school, sIndex) in schoolList" :key="sIndex"> |
|||
{{channel[school.id] || 0}} |
|||
</view> |
|||
<view class="td td-total">{{channel.total}}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 市场人员资源渠道统计 --> |
|||
<view class="table-section"> |
|||
<view class="table-title">{{currentMonth}}月 - 年度市场人员资源渠道统计</view> |
|||
<view class="table-container"> |
|||
<view class="table-header"> |
|||
<view class="th th-channel" style="width: 100px;">渠道</view> |
|||
<view class="th" v-for="(staff, index) in staffData" :key="index">市场{{staff.name}}</view> |
|||
<view class="th th-total">资源合计</view> |
|||
</view> |
|||
<view class="table-body"> |
|||
<view class="table-row" v-for="(channel, index) in channelList" :key="index"> |
|||
<view class="td td-channel" style="width: 100px;">{{channel.name}}</view> |
|||
<view class="td" v-for="(staff, sIndex) in staffData" :key="sIndex"> |
|||
{{staff['channel'][channel.value] || 0}} |
|||
</view> |
|||
<view class="td td-total">{{channel.total}}</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 { |
|||
currentDate: this.formatDate(new Date()), |
|||
currentMonth: new Date().getMonth() + 1, |
|||
// 市场人员资源量统计 |
|||
staffData: [], |
|||
// 校区列表 |
|||
schoolList: [], |
|||
// 是否有安全区域 |
|||
hasSafeArea: false, |
|||
// 渠道列表 |
|||
channelList: [], |
|||
// 市场人员列表 |
|||
marketStaffList: [ |
|||
{ id: 'A', name: 'A' }, |
|||
{ id: 'B', name: 'B' }, |
|||
{ id: 'C', name: 'C' }, |
|||
{ id: 'D', name: 'D' } |
|||
], |
|||
// 校区渠道数据 |
|||
channelSchoolData: [], |
|||
// 人员渠道数据 |
|||
channelStaffData: [] |
|||
} |
|||
}, |
|||
onLoad() { |
|||
this.initData(); |
|||
this.checkSafeArea(); |
|||
}, |
|||
methods: { |
|||
// 格式化日期为 YYYY-MM |
|||
formatDate(date) { |
|||
const year = date.getFullYear(); |
|||
const month = (date.getMonth() + 1).toString().padStart(2, '0'); |
|||
return `${year}-${month}`; |
|||
}, |
|||
|
|||
// 日期选择器变更 |
|||
dateChange(e) { |
|||
this.currentDate = e.detail.value; |
|||
const [year, month] = this.currentDate.split('-'); |
|||
this.currentMonth = parseInt(month); |
|||
this.initData(); |
|||
}, |
|||
|
|||
// 初始化数据 |
|||
async initData() { |
|||
// 模拟获取数据，实际项目中应该调用API |
|||
await this.getStaffStatistics(); |
|||
// await this.getChannelSchoolStatistics(); |
|||
// this.getChannelStaffStatistics(); |
|||
}, |
|||
|
|||
// 获取人员资源量统计 |
|||
async getStaffStatistics() { |
|||
// 模拟数据，实际项目中应该调用API |
|||
let res = await apiRoute.getStaffStatistics({date: this.currentDate}) |
|||
|
|||
console.log(res.data.staffData,"================"); |
|||
this.staffData = res.data.staffData |
|||
this.schoolList = res.data.schoolList |
|||
this.channelList = res.data.channelList |
|||
|
|||
}, |
|||
|
|||
// 获取校区渠道统计 |
|||
getChannelSchoolStatistics() { |
|||
// 模拟数据，实际项目中应该调用API |
|||
this.channelSchoolData = this.channelList.map(channel => { |
|||
const schools = {}; |
|||
let total = 0; |
|||
|
|||
this.schoolList.forEach(school => { |
|||
const count = Math.floor(Math.random() * 50); |
|||
schools[school.id] = count; |
|||
total += count; |
|||
}); |
|||
|
|||
return { |
|||
id: channel.id, |
|||
name: channel.name, |
|||
schools, |
|||
total |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
// 获取人员渠道统计 |
|||
getChannelStaffStatistics() { |
|||
// 模拟数据，实际项目中应该调用API |
|||
this.channelStaffData = this.channelList.map(channel => { |
|||
const staffs = {}; |
|||
let total = 0; |
|||
|
|||
this.marketStaffList.forEach(staff => { |
|||
const count = Math.floor(Math.random() * 40); |
|||
staffs[staff.id] = count; |
|||
total += count; |
|||
}); |
|||
|
|||
return { |
|||
id: channel.id, |
|||
name: channel.name, |
|||
staffs, |
|||
total |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
// 检测设备是否有安全区域 |
|||
checkSafeArea() { |
|||
try { |
|||
const systemInfo = uni.getSystemInfoSync(); |
|||
// 检测是否为iPhone X及以上机型或其他有安全区域的设备 |
|||
if (systemInfo.safeAreaInsets && systemInfo.safeAreaInsets.bottom > 0) { |
|||
this.hasSafeArea = true; |
|||
} |
|||
} catch (e) { |
|||
console.error('获取系统信息失败', e); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.main_box { |
|||
min-height: 100vh; |
|||
background-color: #1a1a1a; |
|||
color: #ffffff; |
|||
padding-bottom: 150rpx; /* 增加底部内边距，防止内容被底部导航栏遮挡 */ |
|||
} |
|||
|
|||
/* 适配有安全区域的设备（如iPhone X及以上机型） */ |
|||
.has-safe-area { |
|||
padding-bottom: calc(150rpx + constant(safe-area-inset-bottom)); /* iOS 11.0-11.2 */ |
|||
padding-bottom: calc(150rpx + env(safe-area-inset-bottom)); /* iOS 11.2+ */ |
|||
} |
|||
|
|||
.navbar_section { |
|||
background-color: #1a1a1a; |
|||
height: 88rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
position: relative; |
|||
|
|||
.title { |
|||
font-size: 36rpx; |
|||
font-weight: bold; |
|||
} |
|||
} |
|||
|
|||
.filter-section { |
|||
padding: 20rpx; |
|||
background-color: #222222; |
|||
margin: 20rpx; |
|||
border-radius: 10rpx; |
|||
|
|||
.filter-item { |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
.label { |
|||
font-size: 28rpx; |
|||
margin-right: 10rpx; |
|||
} |
|||
|
|||
.picker-value { |
|||
padding: 10rpx 20rpx; |
|||
background-color: #333333; |
|||
border-radius: 6rpx; |
|||
font-size: 28rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.table-section { |
|||
margin: 30rpx 20rpx; |
|||
background-color: #222222; |
|||
border-radius: 10rpx; |
|||
overflow: hidden; |
|||
|
|||
.table-title { |
|||
font-size: 32rpx; |
|||
font-weight: bold; |
|||
padding: 20rpx; |
|||
border-bottom: 1px solid #333333; |
|||
} |
|||
|
|||
.table-container { |
|||
width: 100%; |
|||
overflow-x: auto; |
|||
} |
|||
|
|||
.table-header { |
|||
display: flex; |
|||
background-color: #333333; |
|||
|
|||
.th { |
|||
padding: 15rpx 10rpx; |
|||
font-size: 26rpx; |
|||
text-align: center; |
|||
flex: 1; |
|||
min-width: 100rpx; |
|||
font-weight: bold; |
|||
} |
|||
} |
|||
|
|||
.table-body { |
|||
.table-row { |
|||
display: flex; |
|||
border-bottom: 1px solid #333333; |
|||
|
|||
&:last-child { |
|||
border-bottom: none; |
|||
} |
|||
|
|||
.td { |
|||
padding: 15rpx 10rpx; |
|||
font-size: 26rpx; |
|||
text-align: center; |
|||
flex: 1; |
|||
min-width: 100rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.th-person, .td-person { |
|||
min-width: 80rpx; |
|||
flex: 0.8; |
|||
} |
|||
|
|||
.th-week, .td-week, |
|||
.th-month, .td-month, |
|||
.th-year, .td-year { |
|||
flex: 1; |
|||
} |
|||
|
|||
.th-channel, .td-channel { |
|||
flex: 1.2; |
|||
text-align: left; |
|||
padding-left: 20rpx; |
|||
} |
|||
|
|||
.th-total, .td-total { |
|||
flex: 1.2; |
|||
font-weight: bold; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,427 @@ |
|||
<template> |
|||
<view class="assemble"> |
|||
<view style="height: 20rpx;"></view> |
|||
<!-- 时间筛选 --> |
|||
<view class="filter-section"> |
|||
<picker mode="date" fields="month" :value="currentDate" @change="onDateChange"> |
|||
<view class="date-picker"> |
|||
<text>{{currentDate}}</text> |
|||
<image class="drop-image" :src="$util.img('/static/images/drop.png')" mode="aspectFit"></image> |
|||
</view> |
|||
</picker> |
|||
</view> |
|||
|
|||
<!-- 本月提成卡片 --> |
|||
<view class="commission-card"> |
|||
<view class="card-title">本月提成</view> |
|||
<view class="commission-amount">¥{{totalCommission}}</view> |
|||
</view> |
|||
|
|||
<!-- 续费提成记录 --> |
|||
<view class="record-card"> |
|||
<view class="card-title">续费提成</view> |
|||
<view class="table"> |
|||
<view class="table-header"> |
|||
<view class="th">时间</view> |
|||
<view class="th">到期数</view> |
|||
<view class="th">续费数</view> |
|||
<view class="th">续费率</view> |
|||
<view class="th">提成</view> |
|||
</view> |
|||
<view class="table-body"> |
|||
<view class="tr" v-for="(item, index) in renewalRecords" :key="index"> |
|||
<view class="td">{{item.time}}</view> |
|||
<view class="td">{{item.expireCount}}</view> |
|||
<view class="td">{{item.renewCount}}</view> |
|||
<view class="td">{{item.renewRate}}%</view> |
|||
<view class="td">¥{{item.commission}}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 新招课包 --> |
|||
<view class="record-card"> |
|||
<view class="card-title">新招课包</view> |
|||
<view class="table"> |
|||
<view class="table-header"> |
|||
<view class="th">成交数</view> |
|||
<view class="th">提成</view> |
|||
<view class="th">合计</view> |
|||
</view> |
|||
<view class="table-body"> |
|||
<view class="tr"> |
|||
<view class="td">{{newPackageCount}}</view> |
|||
<view class="td">¥{{newPackageCommission}}</view> |
|||
<view class="td">¥{{newPackageTotal}}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 私教课包 --> |
|||
<view class="record-card"> |
|||
<view class="card-title">私教课包</view> |
|||
<view class="table"> |
|||
<view class="table-header"> |
|||
<view class="th">数量</view> |
|||
<view class="th">提成</view> |
|||
</view> |
|||
<view class="table-body"> |
|||
<view class="tr"> |
|||
<view class="td">{{privatePackageCount}}</view> |
|||
<view class="td">¥{{privatePackageCommission}}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 时间卡 --> |
|||
<view class="record-card"> |
|||
<view class="card-title">时间卡</view> |
|||
<view class="table"> |
|||
<view class="table-header"> |
|||
<view class="th">时间卡</view> |
|||
<view class="th">数量</view> |
|||
<view class="th">提成</view> |
|||
</view> |
|||
<view class="table-body"> |
|||
<view class="tr"> |
|||
<view class="td">{{timeCardCount}}</view> |
|||
<view class="td">{{timeCardAmount}}</view> |
|||
<view class="td">¥{{timeCardCommission}}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 其他提成 --> |
|||
<view class="record-card"> |
|||
<view class="card-title">其他提成</view> |
|||
<view class="table"> |
|||
<view class="table-header"> |
|||
<view class="th">项目</view> |
|||
<view class="th">金额</view> |
|||
</view> |
|||
<view class="table-body"> |
|||
<view class="tr" v-for="(item, index) in otherCommissions" :key="index"> |
|||
<view class="td">{{item.project}}</view> |
|||
<view class="td">¥{{item.amount}}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import apiRoute from '@/api/apiRoute.js' |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
currentDate: this.formatDate(new Date()), |
|||
totalCommission: 0, |
|||
renewalRecords: [], |
|||
newPackageCount: 0, |
|||
newPackageCommission: 0, |
|||
newPackageTotal: 0, |
|||
privatePackageCount: 0, |
|||
privatePackageCommission: 0, |
|||
timeCardCount: 0, |
|||
timeCardAmount: 0, |
|||
timeCardCommission: 0, |
|||
otherCommissions: [] |
|||
} |
|||
}, |
|||
onShow() { |
|||
this.getStatisticsData() |
|||
}, |
|||
methods: { |
|||
formatDate(date) { |
|||
const year = date.getFullYear() |
|||
const month = String(date.getMonth() + 1).padStart(2, '0') |
|||
return `${year}-${month}` |
|||
}, |
|||
onDateChange(e) { |
|||
this.currentDate = e.detail.value |
|||
this.getStatisticsData() |
|||
}, |
|||
async getStatisticsData() { |
|||
try { |
|||
const res = await apiRoute.xs_statisticsMarketData({ |
|||
date: this.currentDate |
|||
}) |
|||
if (res && res.code === 1) { |
|||
const data = res.data |
|||
this.totalCommission = data.totalCommission || 0 |
|||
this.renewalRecords = data.renewalRecords || [] |
|||
this.newPackageCount = data.newPackageCount || 0 |
|||
this.newPackageCommission = data.newPackageCommission || 0 |
|||
this.newPackageTotal = data.newPackageTotal || 0 |
|||
this.privatePackageCount = data.privatePackageCount || 0 |
|||
this.privatePackageCommission = data.privatePackageCommission || 0 |
|||
this.timeCardCount = data.timeCardCount || 0 |
|||
this.timeCardAmount = data.timeCardAmount || 0 |
|||
this.timeCardCommission = data.timeCardCommission || 0 |
|||
this.otherCommissions = data.otherCommissions || [] |
|||
} |
|||
} catch (error) { |
|||
console.error('获取统计数据失败:', error) |
|||
uni.showToast({ |
|||
title: '获取数据失败', |
|||
icon: 'none' |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
//自定义导航栏 |
|||
.navbar_section { |
|||
border: 1px solid #23262F; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
background: #23262F; |
|||
box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.18); |
|||
|
|||
.title { |
|||
padding: 40rpx 0rpx; |
|||
// #ifdef MP-WEIXIN |
|||
padding: 80rpx 0rpx; |
|||
// #endif |
|||
font-size: 30rpx; |
|||
color: #F5F6FA; |
|||
font-weight: bold; |
|||
letter-spacing: 2rpx; |
|||
} |
|||
} |
|||
|
|||
.assemble { |
|||
width: 100%; |
|||
min-height: 100vh; |
|||
background: #181A20; |
|||
padding-bottom: 100rpx; |
|||
} |
|||
|
|||
.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; |
|||
filter: brightness(0.8); |
|||
} |
|||
|
|||
.title { |
|||
font-size: 30rpx; |
|||
color: #F5F6FA; |
|||
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; |
|||
} |
|||
|
|||
.filter-section { |
|||
padding: 20rpx 30rpx; |
|||
background: #23262F; |
|||
margin-bottom: 20rpx; |
|||
border-radius: 12rpx; |
|||
box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.2); |
|||
|
|||
.date-picker { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
font-size: 32rpx; |
|||
color: #F5F6FA; |
|||
|
|||
.drop-image { |
|||
width: 30rpx; |
|||
height: 30rpx; |
|||
margin-left: 10rpx; |
|||
filter: brightness(0.8); |
|||
} |
|||
} |
|||
} |
|||
|
|||
.commission-card { |
|||
background: linear-gradient(135deg, #FF6B6B, #FF8E8E); |
|||
margin: 20rpx; |
|||
padding: 30rpx; |
|||
border-radius: 16rpx; |
|||
color: #fff; |
|||
box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.25); |
|||
|
|||
.card-title { |
|||
font-size: 28rpx; |
|||
margin-bottom: 20rpx; |
|||
color: #fff; |
|||
} |
|||
|
|||
.commission-amount { |
|||
font-size: 48rpx; |
|||
font-weight: bold; |
|||
color: #fff; |
|||
} |
|||
} |
|||
|
|||
.record-card { |
|||
background: #23262F; |
|||
margin: 20rpx; |
|||
padding: 20rpx; |
|||
border-radius: 16rpx; |
|||
box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.18); |
|||
|
|||
.card-title { |
|||
font-size: 30rpx; |
|||
color: #F5F6FA; |
|||
margin-bottom: 20rpx; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.table { |
|||
width: 100%; |
|||
|
|||
.table-header { |
|||
display: flex; |
|||
background: #181A20; |
|||
padding: 20rpx 0; |
|||
border-radius: 8rpx 8rpx 0 0; |
|||
|
|||
.th { |
|||
flex: 1; |
|||
text-align: center; |
|||
font-size: 26rpx; |
|||
color: #A0A3B1; |
|||
font-weight: 500; |
|||
} |
|||
} |
|||
|
|||
.table-body { |
|||
.tr { |
|||
display: flex; |
|||
padding: 20rpx 0; |
|||
border-bottom: 1px solid #33343A; |
|||
transition: background 0.2s; |
|||
|
|||
&:last-child { |
|||
border-bottom: none; |
|||
} |
|||
|
|||
.td { |
|||
flex: 1; |
|||
text-align: center; |
|||
font-size: 26rpx; |
|||
color: #F5F6FA; |
|||
font-weight: 400; |
|||
} |
|||
&:hover { |
|||
background: #23262F; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 其他细节样式 |
|||
::-webkit-scrollbar { |
|||
display: none; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,495 @@ |
|||
<!--校区数据--> |
|||
<template> |
|||
<view class="main_box"> |
|||
<!--自定义导航栏--> |
|||
<view class="navbar_section"> |
|||
<view class="navbar_content"> |
|||
<view class="back_btn" @click="goBack"> |
|||
<fui-icon name="arrowleft" size="32" color="#fff"></fui-icon> |
|||
</view> |
|||
<view class="title">校区数据</view> |
|||
<view class="placeholder"></view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="content_section"> |
|||
<!-- 校区选择器 --> |
|||
<view class="campus_selector"> |
|||
<view class="selector_label">选择校区：</view> |
|||
<view class="selector_box"> |
|||
<view class="selected_campus">请选择校区</view> |
|||
<fui-icon name="dropdown" size="24" color="#999"></fui-icon> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 数据概览卡片 --> |
|||
<view class="overview_cards"> |
|||
<view class="card_item"> |
|||
<view class="card_icon"> |
|||
<fui-icon name="home" size="40" color="#29D3B4"></fui-icon> |
|||
</view> |
|||
<view class="card_content"> |
|||
<view class="card_title">部门数量</view> |
|||
<view class="card_value">--</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="card_item"> |
|||
<view class="card_icon"> |
|||
<fui-icon name="addressbook" size="40" color="#29D3B4"></fui-icon> |
|||
</view> |
|||
<view class="card_content"> |
|||
<view class="card_title">员工总数</view> |
|||
<view class="card_value">--</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="card_item"> |
|||
<view class="card_icon"> |
|||
<fui-icon name="star" size="40" color="#29D3B4"></fui-icon> |
|||
</view> |
|||
<view class="card_content"> |
|||
<view class="card_title">客户总数</view> |
|||
<view class="card_value">--</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="card_item"> |
|||
<view class="card_icon"> |
|||
<fui-icon name="wallet" size="40" color="#29D3B4"></fui-icon> |
|||
</view> |
|||
<view class="card_content"> |
|||
<view class="card_title">校区业绩</view> |
|||
<view class="card_value">--</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 部门对比 --> |
|||
<view class="dept_comparison"> |
|||
<view class="section_title">部门业绩对比</view> |
|||
<view class="comparison_list"> |
|||
<view class="comparison_item"> |
|||
<view class="dept_info"> |
|||
<view class="dept_name">销售部</view> |
|||
<view class="dept_score">￥120000</view> |
|||
</view> |
|||
<view class="progress_bar"> |
|||
<view class="progress_fill" style="width: 80%"></view> |
|||
</view> |
|||
<view class="dept_percent">80%</view> |
|||
</view> |
|||
|
|||
<view class="comparison_item"> |
|||
<view class="dept_info"> |
|||
<view class="dept_name">市场部</view> |
|||
<view class="dept_score">￥100000</view> |
|||
</view> |
|||
<view class="progress_bar"> |
|||
<view class="progress_fill" style="width: 67%"></view> |
|||
</view> |
|||
<view class="dept_percent">67%</view> |
|||
</view> |
|||
|
|||
<view class="comparison_item"> |
|||
<view class="dept_info"> |
|||
<view class="dept_name">运营部</view> |
|||
<view class="dept_score">￥80000</view> |
|||
</view> |
|||
<view class="progress_bar"> |
|||
<view class="progress_fill" style="width: 53%"></view> |
|||
</view> |
|||
<view class="dept_percent">53%</view> |
|||
</view> |
|||
|
|||
<view class="comparison_item"> |
|||
<view class="dept_info"> |
|||
<view class="dept_name">客服部</view> |
|||
<view class="dept_score">￥60000</view> |
|||
</view> |
|||
<view class="progress_bar"> |
|||
<view class="progress_fill" style="width: 40%"></view> |
|||
</view> |
|||
<view class="dept_percent">40%</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 月度趋势 --> |
|||
<view class="trend_section"> |
|||
<view class="section_title">月度趋势</view> |
|||
<view class="trend_chart"> |
|||
<view class="chart_placeholder"> |
|||
<fui-icon name="linechart" size="80" color="#ddd"></fui-icon> |
|||
<view class="placeholder_text">图表功能待开发</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 功能按钮区域 --> |
|||
<view class="function_section"> |
|||
<view class="section_title">数据分析</view> |
|||
<view class="function_grid"> |
|||
<view class="function_item"> |
|||
<view class="function_icon"> |
|||
<fui-icon name="barchart" size="32" color="#29D3B4"></fui-icon> |
|||
</view> |
|||
<view class="function_text">校区对比</view> |
|||
</view> |
|||
|
|||
<view class="function_item"> |
|||
<view class="function_icon"> |
|||
<fui-icon name="piechart" size="32" color="#29D3B4"></fui-icon> |
|||
</view> |
|||
<view class="function_text">部门分析</view> |
|||
</view> |
|||
|
|||
<view class="function_item"> |
|||
<view class="function_icon"> |
|||
<fui-icon name="linechart" size="32" color="#29D3B4"></fui-icon> |
|||
</view> |
|||
<view class="function_text">趋势分析</view> |
|||
</view> |
|||
|
|||
<view class="function_item"> |
|||
<view class="function_icon"> |
|||
<fui-icon name="list" size="32" color="#29D3B4"></fui-icon> |
|||
</view> |
|||
<view class="function_text">详细报表</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 提示信息 --> |
|||
<view class="tips_section"> |
|||
<view class="tips_title">功能说明</view> |
|||
<view class="tips_content"> |
|||
这里将显示校区的各项数据统计，包括部门数量、员工总数、客户数量、校区业绩等。 |
|||
具体功能待后续开发实现。 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import fuiIcon from "@/components/firstui/fui-icon/fui-icon.vue" |
|||
|
|||
export default { |
|||
components: { |
|||
fuiIcon, |
|||
}, |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
onLoad() { |
|||
|
|||
}, |
|||
methods: { |
|||
// 返回上一页 |
|||
goBack() { |
|||
uni.navigateBack() |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.main_box { |
|||
background: #f5f5f5; |
|||
min-height: 100vh; |
|||
} |
|||
|
|||
// 自定义导航栏 |
|||
.navbar_section { |
|||
background: #29D3B4; |
|||
padding-top: 20rpx; |
|||
|
|||
// 小程序端样式 |
|||
// #ifdef MP-WEIXIN |
|||
padding-top: 90rpx; |
|||
// #endif |
|||
|
|||
.navbar_content { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
padding: 20rpx 24rpx 40rpx 24rpx; |
|||
|
|||
.back_btn { |
|||
width: 60rpx; |
|||
height: 60rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.title { |
|||
font-size: 32rpx; |
|||
color: #fff; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.placeholder { |
|||
width: 60rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 内容区域 |
|||
.content_section { |
|||
padding: 40rpx 24rpx; |
|||
|
|||
// 校区选择器 |
|||
.campus_selector { |
|||
background: #fff; |
|||
border-radius: 16rpx; |
|||
padding: 32rpx 24rpx; |
|||
margin-bottom: 32rpx; |
|||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05); |
|||
|
|||
.selector_label { |
|||
font-size: 28rpx; |
|||
color: #333; |
|||
margin-bottom: 16rpx; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.selector_box { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
padding: 20rpx 24rpx; |
|||
background: #f8f8f8; |
|||
border-radius: 12rpx; |
|||
|
|||
.selected_campus { |
|||
font-size: 26rpx; |
|||
color: #666; |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 概览卡片 |
|||
.overview_cards { |
|||
display: grid; |
|||
grid-template-columns: repeat(2, 1fr); |
|||
gap: 24rpx; |
|||
margin-bottom: 40rpx; |
|||
|
|||
.card_item { |
|||
background: #fff; |
|||
border-radius: 16rpx; |
|||
padding: 32rpx 24rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 20rpx; |
|||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05); |
|||
|
|||
.card_icon { |
|||
width: 64rpx; |
|||
height: 64rpx; |
|||
background: rgba(41, 211, 180, 0.1); |
|||
border-radius: 50%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.card_content { |
|||
flex: 1; |
|||
|
|||
.card_title { |
|||
font-size: 24rpx; |
|||
color: #999; |
|||
margin-bottom: 8rpx; |
|||
} |
|||
|
|||
.card_value { |
|||
font-size: 32rpx; |
|||
color: #333; |
|||
font-weight: 600; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 部门对比 |
|||
.dept_comparison { |
|||
margin-bottom: 40rpx; |
|||
|
|||
.section_title { |
|||
font-size: 28rpx; |
|||
color: #333; |
|||
font-weight: 600; |
|||
margin-bottom: 24rpx; |
|||
} |
|||
|
|||
.comparison_list { |
|||
background: #fff; |
|||
border-radius: 16rpx; |
|||
padding: 32rpx 24rpx; |
|||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05); |
|||
|
|||
.comparison_item { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-bottom: 32rpx; |
|||
|
|||
&:last-child { |
|||
margin-bottom: 0; |
|||
} |
|||
|
|||
.dept_info { |
|||
width: 150rpx; |
|||
|
|||
.dept_name { |
|||
font-size: 26rpx; |
|||
color: #333; |
|||
margin-bottom: 8rpx; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.dept_score { |
|||
font-size: 22rpx; |
|||
color: #29D3B4; |
|||
font-weight: 600; |
|||
} |
|||
} |
|||
|
|||
.progress_bar { |
|||
flex: 1; |
|||
height: 16rpx; |
|||
background: #f0f0f0; |
|||
border-radius: 8rpx; |
|||
margin: 0 20rpx; |
|||
overflow: hidden; |
|||
|
|||
.progress_fill { |
|||
height: 100%; |
|||
background: linear-gradient(90deg, #29D3B4, #5CE1E6); |
|||
border-radius: 8rpx; |
|||
transition: width 0.3s ease; |
|||
} |
|||
} |
|||
|
|||
.dept_percent { |
|||
width: 60rpx; |
|||
text-align: right; |
|||
font-size: 24rpx; |
|||
color: #29D3B4; |
|||
font-weight: 600; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 月度趋势 |
|||
.trend_section { |
|||
margin-bottom: 40rpx; |
|||
|
|||
.section_title { |
|||
font-size: 28rpx; |
|||
color: #333; |
|||
font-weight: 600; |
|||
margin-bottom: 24rpx; |
|||
} |
|||
|
|||
.trend_chart { |
|||
background: #fff; |
|||
border-radius: 16rpx; |
|||
padding: 40rpx 24rpx; |
|||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05); |
|||
|
|||
.chart_placeholder { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
height: 200rpx; |
|||
|
|||
.placeholder_text { |
|||
font-size: 24rpx; |
|||
color: #999; |
|||
margin-top: 16rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 功能区域 |
|||
.function_section { |
|||
margin-bottom: 40rpx; |
|||
|
|||
.section_title { |
|||
font-size: 28rpx; |
|||
color: #333; |
|||
font-weight: 600; |
|||
margin-bottom: 24rpx; |
|||
} |
|||
|
|||
.function_grid { |
|||
background: #fff; |
|||
border-radius: 16rpx; |
|||
padding: 32rpx 24rpx; |
|||
display: grid; |
|||
grid-template-columns: repeat(2, 1fr); |
|||
gap: 32rpx; |
|||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05); |
|||
|
|||
.function_item { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
padding: 24rpx 16rpx; |
|||
border-radius: 12rpx; |
|||
transition: all 0.3s ease; |
|||
|
|||
&:active { |
|||
background-color: #f5f5f5; |
|||
transform: scale(0.95); |
|||
} |
|||
|
|||
.function_icon { |
|||
width: 64rpx; |
|||
height: 64rpx; |
|||
background: rgba(41, 211, 180, 0.1); |
|||
border-radius: 50%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
margin-bottom: 16rpx; |
|||
} |
|||
|
|||
.function_text { |
|||
font-size: 24rpx; |
|||
color: #333; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 提示信息 |
|||
.tips_section { |
|||
background: #fff; |
|||
border-radius: 16rpx; |
|||
padding: 32rpx 24rpx; |
|||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05); |
|||
|
|||
.tips_title { |
|||
font-size: 28rpx; |
|||
color: #333; |
|||
font-weight: 600; |
|||
margin-bottom: 16rpx; |
|||
} |
|||
|
|||
.tips_content { |
|||
font-size: 24rpx; |
|||
color: #666; |
|||
line-height: 1.6; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,445 @@ |
|||
<!--部门数据--> |
|||
<template> |
|||
<view class="main_box"> |
|||
<!--自定义导航栏--> |
|||
<view class="navbar_section"> |
|||
<view class="navbar_content"> |
|||
<view class="back_btn" @click="goBack"> |
|||
<fui-icon name="arrowleft" size="32" color="#fff"></fui-icon> |
|||
</view> |
|||
<view class="title">部门数据</view> |
|||
<view class="placeholder"></view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="content_section"> |
|||
<!-- 部门选择器 --> |
|||
<view class="dept_selector"> |
|||
<view class="selector_label">选择部门：</view> |
|||
<view class="selector_box"> |
|||
<view class="selected_dept">请选择部门</view> |
|||
<fui-icon name="dropdown" size="24" color="#999"></fui-icon> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 数据概览卡片 --> |
|||
<view class="overview_cards"> |
|||
<view class="card_item"> |
|||
<view class="card_icon"> |
|||
<fui-icon name="addressbook" size="40" color="#29D3B4"></fui-icon> |
|||
</view> |
|||
<view class="card_content"> |
|||
<view class="card_title">部门人数</view> |
|||
<view class="card_value">--</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="card_item"> |
|||
<view class="card_icon"> |
|||
<fui-icon name="star" size="40" color="#29D3B4"></fui-icon> |
|||
</view> |
|||
<view class="card_content"> |
|||
<view class="card_title">总客户数</view> |
|||
<view class="card_value">--</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="card_item"> |
|||
<view class="card_icon"> |
|||
<fui-icon name="wallet" size="40" color="#29D3B4"></fui-icon> |
|||
</view> |
|||
<view class="card_content"> |
|||
<view class="card_title">部门业绩</view> |
|||
<view class="card_value">--</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="card_item"> |
|||
<view class="card_icon"> |
|||
<fui-icon name="check" size="40" color="#29D3B4"></fui-icon> |
|||
</view> |
|||
<view class="card_content"> |
|||
<view class="card_title">完成率</view> |
|||
<view class="card_value">--</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 排行榜 --> |
|||
<view class="ranking_section"> |
|||
<view class="section_title">部门排行榜</view> |
|||
<view class="ranking_list"> |
|||
<view class="ranking_item"> |
|||
<view class="rank_number first">1</view> |
|||
<view class="member_info"> |
|||
<view class="member_name">张三</view> |
|||
<view class="member_score">业绩：￥50000</view> |
|||
</view> |
|||
<view class="medal"> |
|||
<fui-icon name="star-fill" size="24" color="#FFD700"></fui-icon> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="ranking_item"> |
|||
<view class="rank_number second">2</view> |
|||
<view class="member_info"> |
|||
<view class="member_name">李四</view> |
|||
<view class="member_score">业绩：￥45000</view> |
|||
</view> |
|||
<view class="medal"> |
|||
<fui-icon name="star-fill" size="24" color="#C0C0C0"></fui-icon> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="ranking_item"> |
|||
<view class="rank_number third">3</view> |
|||
<view class="member_info"> |
|||
<view class="member_name">王五</view> |
|||
<view class="member_score">业绩：￥40000</view> |
|||
</view> |
|||
<view class="medal"> |
|||
<fui-icon name="star-fill" size="24" color="#CD7F32"></fui-icon> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 功能按钮区域 --> |
|||
<view class="function_section"> |
|||
<view class="section_title">数据分析</view> |
|||
<view class="function_grid"> |
|||
<view class="function_item"> |
|||
<view class="function_icon"> |
|||
<fui-icon name="barchart" size="32" color="#29D3B4"></fui-icon> |
|||
</view> |
|||
<view class="function_text">业绩对比</view> |
|||
</view> |
|||
|
|||
<view class="function_item"> |
|||
<view class="function_icon"> |
|||
<fui-icon name="piechart" size="32" color="#29D3B4"></fui-icon> |
|||
</view> |
|||
<view class="function_text">人员分布</view> |
|||
</view> |
|||
|
|||
<view class="function_item"> |
|||
<view class="function_icon"> |
|||
<fui-icon name="linechart" size="32" color="#29D3B4"></fui-icon> |
|||
</view> |
|||
<view class="function_text">趋势分析</view> |
|||
</view> |
|||
|
|||
<view class="function_item"> |
|||
<view class="function_icon"> |
|||
<fui-icon name="list" size="32" color="#29D3B4"></fui-icon> |
|||
</view> |
|||
<view class="function_text">详细报表</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 提示信息 --> |
|||
<view class="tips_section"> |
|||
<view class="tips_title">功能说明</view> |
|||
<view class="tips_content"> |
|||
这里将显示部门的各项数据统计，包括部门人员、客户数量、销售业绩、排行榜等。 |
|||
具体功能待后续开发实现。 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import fuiIcon from "@/components/firstui/fui-icon/fui-icon.vue" |
|||
|
|||
export default { |
|||
components: { |
|||
fuiIcon, |
|||
}, |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
onLoad() { |
|||
|
|||
}, |
|||
methods: { |
|||
// 返回上一页 |
|||
goBack() { |
|||
uni.navigateBack() |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.main_box { |
|||
background: #f5f5f5; |
|||
min-height: 100vh; |
|||
} |
|||
|
|||
// 自定义导航栏 |
|||
.navbar_section { |
|||
background: #29D3B4; |
|||
padding-top: 20rpx; |
|||
|
|||
// 小程序端样式 |
|||
// #ifdef MP-WEIXIN |
|||
padding-top: 90rpx; |
|||
// #endif |
|||
|
|||
.navbar_content { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
padding: 20rpx 24rpx 40rpx 24rpx; |
|||
|
|||
.back_btn { |
|||
width: 60rpx; |
|||
height: 60rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.title { |
|||
font-size: 32rpx; |
|||
color: #fff; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.placeholder { |
|||
width: 60rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 内容区域 |
|||
.content_section { |
|||
padding: 40rpx 24rpx; |
|||
|
|||
// 部门选择器 |
|||
.dept_selector { |
|||
background: #fff; |
|||
border-radius: 16rpx; |
|||
padding: 32rpx 24rpx; |
|||
margin-bottom: 32rpx; |
|||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05); |
|||
|
|||
.selector_label { |
|||
font-size: 28rpx; |
|||
color: #333; |
|||
margin-bottom: 16rpx; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.selector_box { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
padding: 20rpx 24rpx; |
|||
background: #f8f8f8; |
|||
border-radius: 12rpx; |
|||
|
|||
.selected_dept { |
|||
font-size: 26rpx; |
|||
color: #666; |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 概览卡片 |
|||
.overview_cards { |
|||
display: grid; |
|||
grid-template-columns: repeat(2, 1fr); |
|||
gap: 24rpx; |
|||
margin-bottom: 40rpx; |
|||
|
|||
.card_item { |
|||
background: #fff; |
|||
border-radius: 16rpx; |
|||
padding: 32rpx 24rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 20rpx; |
|||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05); |
|||
|
|||
.card_icon { |
|||
width: 64rpx; |
|||
height: 64rpx; |
|||
background: rgba(41, 211, 180, 0.1); |
|||
border-radius: 50%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.card_content { |
|||
flex: 1; |
|||
|
|||
.card_title { |
|||
font-size: 24rpx; |
|||
color: #999; |
|||
margin-bottom: 8rpx; |
|||
} |
|||
|
|||
.card_value { |
|||
font-size: 32rpx; |
|||
color: #333; |
|||
font-weight: 600; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 排行榜 |
|||
.ranking_section { |
|||
margin-bottom: 40rpx; |
|||
|
|||
.section_title { |
|||
font-size: 28rpx; |
|||
color: #333; |
|||
font-weight: 600; |
|||
margin-bottom: 24rpx; |
|||
} |
|||
|
|||
.ranking_list { |
|||
background: #fff; |
|||
border-radius: 16rpx; |
|||
padding: 24rpx; |
|||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05); |
|||
|
|||
.ranking_item { |
|||
display: flex; |
|||
align-items: center; |
|||
padding: 20rpx 16rpx; |
|||
border-bottom: 1px solid #f0f0f0; |
|||
|
|||
&:last-child { |
|||
border-bottom: none; |
|||
} |
|||
|
|||
.rank_number { |
|||
width: 48rpx; |
|||
height: 48rpx; |
|||
border-radius: 50%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
font-size: 24rpx; |
|||
font-weight: 600; |
|||
color: #fff; |
|||
margin-right: 24rpx; |
|||
|
|||
&.first { |
|||
background: #FFD700; |
|||
} |
|||
|
|||
&.second { |
|||
background: #C0C0C0; |
|||
} |
|||
|
|||
&.third { |
|||
background: #CD7F32; |
|||
} |
|||
} |
|||
|
|||
.member_info { |
|||
flex: 1; |
|||
|
|||
.member_name { |
|||
font-size: 28rpx; |
|||
color: #333; |
|||
margin-bottom: 8rpx; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.member_score { |
|||
font-size: 24rpx; |
|||
color: #666; |
|||
} |
|||
} |
|||
|
|||
.medal { |
|||
margin-left: 16rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 功能区域 |
|||
.function_section { |
|||
margin-bottom: 40rpx; |
|||
|
|||
.section_title { |
|||
font-size: 28rpx; |
|||
color: #333; |
|||
font-weight: 600; |
|||
margin-bottom: 24rpx; |
|||
} |
|||
|
|||
.function_grid { |
|||
background: #fff; |
|||
border-radius: 16rpx; |
|||
padding: 32rpx 24rpx; |
|||
display: grid; |
|||
grid-template-columns: repeat(2, 1fr); |
|||
gap: 32rpx; |
|||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05); |
|||
|
|||
.function_item { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
padding: 24rpx 16rpx; |
|||
border-radius: 12rpx; |
|||
transition: all 0.3s ease; |
|||
|
|||
&:active { |
|||
background-color: #f5f5f5; |
|||
transform: scale(0.95); |
|||
} |
|||
|
|||
.function_icon { |
|||
width: 64rpx; |
|||
height: 64rpx; |
|||
background: rgba(41, 211, 180, 0.1); |
|||
border-radius: 50%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
margin-bottom: 16rpx; |
|||
} |
|||
|
|||
.function_text { |
|||
font-size: 24rpx; |
|||
color: #333; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 提示信息 |
|||
.tips_section { |
|||
background: #fff; |
|||
border-radius: 16rpx; |
|||
padding: 32rpx 24rpx; |
|||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05); |
|||
|
|||
.tips_title { |
|||
font-size: 28rpx; |
|||
color: #333; |
|||
font-weight: 600; |
|||
margin-bottom: 16rpx; |
|||
} |
|||
|
|||
.tips_content { |
|||
font-size: 24rpx; |
|||
color: #666; |
|||
line-height: 1.6; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,523 @@ |
|||
<!--销售我的-首页--> |
|||
<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="openViewMyInfo()"> |
|||
<image class="pic" :src="userInfo.head_img"></image> |
|||
<view class="name">{{userInfo.name}}</view> |
|||
</view> |
|||
<view class="right"> |
|||
<view class="btn"></view> |
|||
<!-- <view class="btn">切换身份</view>--> |
|||
<view class="btn"></view> |
|||
</view> |
|||
</view> |
|||
<view class="bottom" v-for="(v,k) in userInfo.cameus_dept_arr"> |
|||
<view class="left"> |
|||
<view class="title">校区：</view> |
|||
<view class="title">{{v.campus_id_name || ''}}</view> |
|||
</view> |
|||
<view class="division"></view> |
|||
<view class="right"> |
|||
<view class="title">部门：</view> |
|||
<view class="title dept">{{v.dept_name_str || ''}}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
|
|||
|
|||
<view class="main_section"> |
|||
<view class="grid_container"> |
|||
<view class="grid_item" @click="openViewReimbursementList()"> |
|||
<view class="icon_wrapper"> |
|||
<fui-icon name="bankcard" size="48" color="#29D3B4"></fui-icon> |
|||
</view> |
|||
<view class="item_text">报销记录</view> |
|||
</view> |
|||
|
|||
<view class="grid_item" @click="openViewMyAttendance()"> |
|||
<view class="icon_wrapper"> |
|||
<fui-icon name="calendar" size="48" color="#29D3B4"></fui-icon> |
|||
</view> |
|||
<view class="item_text">我的考勤</view> |
|||
</view> |
|||
|
|||
<view class="grid_item" @click="goCourseSchedule()"> |
|||
<view class="icon_wrapper"> |
|||
<fui-icon name="list" size="48" color="#29D3B4"></fui-icon> |
|||
</view> |
|||
<view class="item_text">课程安排</view> |
|||
</view> |
|||
|
|||
<view class="grid_item" @click="openViewMyMessage()"> |
|||
<view class="icon_wrapper"> |
|||
<fui-icon name="message" size="48" color="#29D3B4"></fui-icon> |
|||
</view> |
|||
<view class="item_text">我的消息</view> |
|||
</view> |
|||
|
|||
<view class="grid_item" @click="my_contract()"> |
|||
<view class="icon_wrapper"> |
|||
<fui-icon name="order" size="48" color="#29D3B4"></fui-icon> |
|||
</view> |
|||
<view class="item_text">我的合同</view> |
|||
</view> |
|||
|
|||
<view class="grid_item" @click="openMyData()"> |
|||
<view class="icon_wrapper"> |
|||
<fui-icon name="barchart" size="48" color="#29D3B4"></fui-icon> |
|||
</view> |
|||
<view class="item_text">我的数据</view> |
|||
</view> |
|||
|
|||
<view class="grid_item" @click="openDeptData()"> |
|||
<view class="icon_wrapper"> |
|||
<fui-icon name="piechart" size="48" color="#29D3B4"></fui-icon> |
|||
</view> |
|||
<view class="item_text">部门数据</view> |
|||
</view> |
|||
|
|||
<view class="grid_item" @click="openCampusData()"> |
|||
<view class="icon_wrapper"> |
|||
<fui-icon name="linechart" size="48" color="#29D3B4"></fui-icon> |
|||
</view> |
|||
<view class="item_text">校区数据</view> |
|||
</view> |
|||
|
|||
<view class="grid_item" @click="openViewSetUp()"> |
|||
<view class="icon_wrapper"> |
|||
<fui-icon name="setup" size="48" color="#29D3B4"></fui-icon> |
|||
</view> |
|||
<view class="item_text">设置</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 底部导航--> |
|||
<AQTabber/> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import marketApi from '@/api/market.js'; |
|||
import apiRoute from '@/api/apiRoute.js'; |
|||
import { |
|||
Api_url |
|||
} from "@/common/config.js"; |
|||
import AQTabber from "@/components/AQ/AQTabber.vue" |
|||
import fuiIcon from "@/components/firstui/fui-icon/fui-icon.vue" |
|||
|
|||
|
|||
export default { |
|||
components: { |
|||
AQTabber, |
|||
fuiIcon, |
|||
}, |
|||
data() { |
|||
return { |
|||
formData:{}, |
|||
userInfo:{},//用户信息 |
|||
//上传图片APi路径 |
|||
uploadUrl: `${Api_url}/file/image`, |
|||
|
|||
signedClientListCount:0,//已签客户数量 |
|||
} |
|||
}, |
|||
onLoad() { |
|||
}, |
|||
onShow() { |
|||
this.init(); |
|||
}, |
|||
methods: { |
|||
|
|||
//初始化 |
|||
async init(){ |
|||
await this.getUserInfo()//获取用户详情 |
|||
// await this.getSignedClientListCount()//获取已签客户数量 |
|||
}, |
|||
|
|||
//获取已签客户数量 |
|||
async getSignedClientListCount(){ |
|||
let data = { |
|||
page:1, |
|||
limit:1, |
|||
} |
|||
let res = await marketApi.signClient(data); |
|||
if (res.code != 1){ |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
this.signedClientListCount = res.data.total |
|||
}, |
|||
|
|||
//获取用户详情 |
|||
async getUserInfo(){ |
|||
let data = {} |
|||
let res = await apiRoute.getPersonnelInfo(data); |
|||
if (res.code != 1){ |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
|
|||
res.data.cameus_dept_arr.forEach((v,k)=>{ |
|||
let d_arr = [] |
|||
v.dept_arr.forEach((dv,dk)=>{ |
|||
d_arr.push(dv.dept_name) |
|||
}) |
|||
//数组转字符串 |
|||
v.dept_name_str = d_arr.join('，') |
|||
}) |
|||
|
|||
this.userInfo = res.data |
|||
}, |
|||
|
|||
|
|||
//打开到课率统计 |
|||
openViewArrivalStatistics(){ |
|||
uni.navigateTo({ |
|||
url: '/pages-market/my/arrival_statistics' |
|||
}) |
|||
}, |
|||
|
|||
//打开即将到期 |
|||
openViewDueSoon(){ |
|||
uni.navigateTo({ |
|||
url: '/pages-market/my/due_soon' |
|||
}) |
|||
}, |
|||
|
|||
//打开授课统计 |
|||
openViewSchoolingStatistics(){ |
|||
uni.navigateTo({ |
|||
url: '/pages-market/my/schooling_statistics' |
|||
}) |
|||
}, |
|||
|
|||
//打开意见反馈 |
|||
openViewFeedback(){ |
|||
uni.navigateTo({ |
|||
url: '/pages-common/feedback' |
|||
}) |
|||
}, |
|||
|
|||
//打开个人资料 |
|||
openViewMyInfo(){ |
|||
uni.navigateTo({ |
|||
url: '/pages-market/my/info' |
|||
}) |
|||
}, |
|||
|
|||
|
|||
//跳转页面-已签客户 |
|||
openViewSignedClientList(){ |
|||
uni.navigateTo({ |
|||
url: '/pages-market/my/signed_client_list' |
|||
}) |
|||
}, |
|||
|
|||
//跳转页面-我的考勤 |
|||
openViewMyAttendance(){ |
|||
uni.navigateTo({ |
|||
url: '/pages-common/my_attendance' |
|||
}) |
|||
}, |
|||
|
|||
|
|||
//打开企业信息 |
|||
openViewFirmInfo(){ |
|||
uni.navigateTo({ |
|||
url: '/pages-market/my/firm_info' |
|||
}) |
|||
}, |
|||
|
|||
|
|||
//打开设置 |
|||
openViewSetUp(){ |
|||
uni.navigateTo({ |
|||
url: '/pages-market/my/set_up' |
|||
}) |
|||
}, |
|||
|
|||
//跳转页面-我的消息 |
|||
openViewMyMessage(){ |
|||
uni.navigateTo({ |
|||
url: '/pages-common/my_message' |
|||
}) |
|||
}, |
|||
|
|||
//跳转页面-报销记录 |
|||
openViewReimbursementList(){ |
|||
uni.navigateTo({ |
|||
url: '/pages-market/reimbursement/list' |
|||
}) |
|||
}, |
|||
|
|||
|
|||
goCourseSchedule(){ |
|||
uni.navigateTo({ |
|||
url: '/pages-coach/coach/schedule/schedule_table' |
|||
}) |
|||
}, |
|||
my_contract(){ |
|||
uni.navigateTo({ |
|||
url: '/pages-common/contract/my_contract' |
|||
}) |
|||
}, |
|||
|
|||
//打开我的数据 |
|||
openMyData(){ |
|||
uni.navigateTo({ |
|||
url: '/pages-market/my/my_data' |
|||
}) |
|||
}, |
|||
|
|||
//打开部门数据 |
|||
openDeptData(){ |
|||
uni.navigateTo({ |
|||
url: '/pages-market/my/dept_data' |
|||
}) |
|||
}, |
|||
|
|||
//打开校区数据 |
|||
openCampusData(){ |
|||
uni.navigateTo({ |
|||
url: '/pages-market/my/campus_data' |
|||
}) |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
|
|||
.main_box{ |
|||
background: #292929; |
|||
//min-height: 28vh; |
|||
min-height: 100%; |
|||
} |
|||
|
|||
//自定义导航栏 |
|||
.navbar_section{ |
|||
border: 1px solid #29D3B4; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
background: #29D3B4; |
|||
.title{ |
|||
padding: 40rpx 0rpx; |
|||
|
|||
/* 小程序端样式 */ |
|||
// #ifdef MP-WEIXIN |
|||
padding-top: 110rpx; |
|||
padding-bottom: 40rpx; |
|||
// #endif |
|||
|
|||
font-size: 30rpx; |
|||
color: #fff; |
|||
} |
|||
} |
|||
|
|||
//用户信息 |
|||
.user_section { |
|||
background-color: #29D3B4; |
|||
padding-top: 10rpx; |
|||
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; |
|||
} |
|||
} |
|||
} |
|||
.bottom{ |
|||
margin-top: 30rpx; |
|||
padding: 0rpx 40rpx; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: flex-start; |
|||
.title{ |
|||
font-size: 28rpx; |
|||
} |
|||
//分割线段 |
|||
.division{ |
|||
width: 2px; |
|||
height: 35rpx; |
|||
background-color: #fff; |
|||
} |
|||
.left{ |
|||
width: 48%; |
|||
display: flex; |
|||
} |
|||
.right{ |
|||
width: 48%; |
|||
display: flex; |
|||
.dept{ |
|||
width: 70%; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
//统计信息 |
|||
.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{ |
|||
margin-left: 10rpx; |
|||
color: #29D3B4; |
|||
} |
|||
.reduce{ |
|||
color: #ef95a0; |
|||
} |
|||
} |
|||
|
|||
} |
|||
} |
|||
.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; |
|||
|
|||
.grid_container { |
|||
background: #fff; |
|||
border-radius: 16rpx; |
|||
padding: 40rpx 24rpx; |
|||
display: grid; |
|||
grid-template-columns: repeat(3, 1fr); |
|||
gap: 40rpx 20rpx; |
|||
|
|||
.grid_item { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding: 20rpx 10rpx; |
|||
border-radius: 12rpx; |
|||
transition: all 0.3s ease; |
|||
|
|||
&:active { |
|||
background-color: #f5f5f5; |
|||
transform: scale(0.95); |
|||
} |
|||
|
|||
.icon_wrapper { |
|||
width: 80rpx; |
|||
height: 80rpx; |
|||
background: rgba(41, 211, 180, 0.1); |
|||
border-radius: 50%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
margin-bottom: 16rpx; |
|||
} |
|||
|
|||
.item_text { |
|||
font-size: 24rpx; |
|||
color: #333333; |
|||
text-align: center; |
|||
font-weight: 400; |
|||
line-height: 1.2; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
</style> |
|||
@ -0,0 +1,505 @@ |
|||
<!--销售-个人资料-详情--> |
|||
<template> |
|||
<view class="main_box"> |
|||
|
|||
<view class="main_section"> |
|||
<view class="section"> |
|||
<view class="item"> |
|||
<image |
|||
@click="changeAvatar()" |
|||
class="pic" |
|||
:src="$util.img(formData.head_img)" |
|||
></image> |
|||
|
|||
<view class="btn" @click="changeAvatar()">修改头像</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="section"> |
|||
<view class="item"> |
|||
<view class="title"> |
|||
姓名 <text class="required">*</text> |
|||
</view> |
|||
<view class="input"> |
|||
<input v-model="formData.name" placeholder="请输入姓名" /> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="item"> |
|||
<view class="title"> |
|||
账号 <text class="required"></text> |
|||
</view> |
|||
<view class="input"> |
|||
<input v-model="formData.username" disabled placeholder="暂无" /> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="item"> |
|||
<view class="title"> |
|||
部门 <text class="required"></text> |
|||
</view> |
|||
<view class="input"> |
|||
<!-- <input disabled :placeholder="formData.department_name_str" />--> |
|||
<view class="dept disabled">{{formData.department_name_str || '暂无'}}</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="item"> |
|||
<view class="title"> |
|||
等级 <text class="required"></text> |
|||
</view> |
|||
<view class="input"> |
|||
<input v-model="formData.member_level_name" disabled placeholder="暂无" /> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="section"> |
|||
<view class="item"> |
|||
<view class="title"> |
|||
性别 <text class="required">*</text> |
|||
</view> |
|||
<view class="input"> |
|||
<input placeholder="请选择性别" v-model="formData.gender_str" @click="picker_show_sex=true"/> |
|||
<fui-picker |
|||
layer="1" |
|||
:linkage="true" |
|||
:options="options_sex_arr" |
|||
:show="picker_show_sex" |
|||
@change="changePickerSex" |
|||
@cancel="picker_show_sex=false" |
|||
></fui-picker> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="item"> |
|||
<view class="title"> |
|||
生日 <text class="required">*</text> |
|||
</view> |
|||
<view class="input"> |
|||
<input placeholder="请选择生日" @click="picker_show_birthday=true" v-model="formData.birthday"/> |
|||
<fui-date-picker |
|||
:minDate="minDate" |
|||
:maxDate="maxDate" |
|||
:show="picker_show_birthday" |
|||
type="3" |
|||
@change="changePickerBirthday" |
|||
@cancel="picker_show_birthday=false" |
|||
></fui-date-picker> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="item"> |
|||
<view class="title"> |
|||
邮箱 <text class="required">*</text> |
|||
</view> |
|||
<view class="input"> |
|||
<input v-model="formData.email" placeholder="请输入邮箱" /> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="item"> |
|||
<view class="title"> |
|||
手机 <text class="required">*</text> |
|||
</view> |
|||
<view class="input"> |
|||
<input v-model="formData.phone" placeholder="请输入手机" /> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="item"> |
|||
<view class="title"> |
|||
微信 <text class="required"></text> |
|||
</view> |
|||
<view class="input"> |
|||
<input v-model="formData.wx" placeholder="请输入微信" /> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="submet_btn" @click="submit">提交</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import apiRoute from '@/api/apiRoute.js'; |
|||
import marketApi from '@/api/market.js'; |
|||
import { |
|||
Api_url |
|||
} from "@/common/config.js"; |
|||
import AQTabber from "@/components/AQ/AQTabber" |
|||
|
|||
|
|||
export default { |
|||
components: { |
|||
AQTabber, |
|||
}, |
|||
data() { |
|||
return { |
|||
formData:{ |
|||
head_img:'',//头像地址 |
|||
name:'',//姓名 |
|||
username:'',//账号 |
|||
address:'',//住址 |
|||
gender:'',//性别|1男,2女 |
|||
gender_str:'', |
|||
birthday:'',//生日 |
|||
email:'',//邮箱 |
|||
phone:'',//手机 |
|||
wx:'',//微信号 |
|||
}, |
|||
|
|||
userInfo: {}, |
|||
|
|||
//上传图片APi路径 |
|||
uploadUrl: `${Api_url}/uploadImage`, |
|||
|
|||
//性别选择器 相关 |
|||
picker_show_sex: false, |
|||
sex_name:'请选择', |
|||
options_sex_arr: [ |
|||
{ |
|||
value: 1, |
|||
text: '男' |
|||
}, |
|||
{ |
|||
value: 2, |
|||
text: '女' |
|||
}, |
|||
], |
|||
|
|||
//生日选择器相关 |
|||
minDate: '', |
|||
maxDate: '', |
|||
picker_show_birthday: false, |
|||
upload_type: 1, |
|||
uploadHeadimg: '', |
|||
editHeadimg: '', |
|||
} |
|||
}, |
|||
onLoad() { |
|||
}, |
|||
onShow() { |
|||
this.init() |
|||
}, |
|||
methods: { |
|||
|
|||
async init(){ |
|||
// this.getBirthday() |
|||
this.setDateYear() |
|||
await this.getUserInfo() |
|||
}, |
|||
|
|||
//设置年份 |
|||
setDateYear() { |
|||
let currentYear = new Date().getFullYear(); |
|||
this.minDate = String(currentYear - 100); |
|||
this.maxDate = String(currentYear + 1); |
|||
}, |
|||
|
|||
//获取用户详情 |
|||
async getUserInfo(){ |
|||
let res = await apiRoute.getPersonnelInfo({}) |
|||
if (res.code != 1){ |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
|
|||
let gender_str = '' |
|||
if(res.data.gender == 1){ |
|||
gender_str = '男' |
|||
}else if(res.data.gender == 2){ |
|||
gender_str = '女' |
|||
} |
|||
|
|||
//用户表单 |
|||
this.formData = { |
|||
head_img: res.data.head_img,//头像地址 |
|||
name: res.data.name,//姓名 |
|||
username: res.data.phone,//账号 |
|||
address: res.data.address,//住址 |
|||
gender: res.data.gender,//性别|1男,2女 |
|||
gender_str:gender_str, |
|||
birthday: res.data.birthday,//生日 |
|||
email: res.data.email || '',//邮箱 |
|||
phone: res.data.phone,//手机 |
|||
wx: res.data.wx || '',//微信号 |
|||
member_level_name: res.data.member_level_name || '',//等级名称 |
|||
department_name_str:res.data.department_name_str || '暂无',//部门名称 |
|||
} |
|||
}, |
|||
|
|||
// 修改头像按钮 |
|||
changeAvatar() { |
|||
uni.chooseImage({ |
|||
count: 1, |
|||
sizeType: ['compressed'], |
|||
sourceType: ['album', 'camera'], |
|||
success: (res) => { |
|||
const tempFilePath = res.tempFilePaths[0] |
|||
// 这里可以调用上传接口 |
|||
this.uploadFilePromise(tempFilePath) |
|||
} |
|||
}) |
|||
}, |
|||
uploadFilePromise(url) { |
|||
let token = uni.getStorageSync('token') || '' |
|||
let a = uni.uploadFile({ |
|||
url: this.uploadUrl, //仅为示例，非真实的接口地址 |
|||
filePath: url, |
|||
name: 'file', |
|||
header: { |
|||
'token': `${token}`, //请求头设置token |
|||
}, |
|||
success: (e) => { |
|||
let res = JSON.parse(e.data.replace(/\ufeff/g, "") || "{}") |
|||
console.log('上传成功2', res) |
|||
if (res.code == 1) { |
|||
this.upload_type = 2 |
|||
this.formData.head_img = res.data.url |
|||
// this.editHeadimg = res.data.path |
|||
// this.uploadHeadimg = res.data.url |
|||
} else { |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: 'none' |
|||
}) |
|||
} |
|||
}, |
|||
}); |
|||
}, |
|||
|
|||
//性别选择相关 |
|||
changePickerSex(e) { |
|||
console.log('监听选择', e) |
|||
this.formData.gender = e.value |
|||
this.formData.gender_str = e.text |
|||
this.picker_show_sex = false |
|||
}, |
|||
|
|||
//生日选择相关 |
|||
//获取当前年月日+获取30年前的日期 |
|||
getBirthday() { |
|||
let date = new Date(); |
|||
let year = date.getFullYear(); |
|||
let month = date.getMonth() + 1; |
|||
let day = date.getDate(); |
|||
let year_30 = year - 30; |
|||
let month_30 = month; |
|||
let day_30 = day; |
|||
if (month_30 == 2 && day_30 > 28) { |
|||
month_30 = 3; |
|||
day_30 = 1; |
|||
} |
|||
if (month_30 == 4 && day_30 > 30) { |
|||
month_30 = 5; |
|||
day_30 = 1; |
|||
} |
|||
if (month_30 == 6 && day_30 > 30) { |
|||
month_30 = 7; |
|||
day_30 = 1; |
|||
} |
|||
if (month_30 == 9 && day_30 > 30) { |
|||
month_30 = 10; |
|||
day_30 = 1; |
|||
} |
|||
if (month_30 == 11 && day_30 > 30) { |
|||
month_30 = 12; |
|||
day_30 = 1; |
|||
} |
|||
if (month_30 > 12) { |
|||
month_30 = month_30 - 12; |
|||
year_30 = year_30 + 1; |
|||
} |
|||
let minDate = year_30 + "-" + month_30 + "-" + day_30 |
|||
let maxDate = year + "-" + month + "-" + day |
|||
this.minDate = minDate |
|||
this.maxDate = maxDate |
|||
}, |
|||
|
|||
//监听生日选择 |
|||
changePickerBirthday(e) { |
|||
console.log('监听生日选择', e) |
|||
this.formData.birthday = e.result |
|||
this.picker_show_birthday = false |
|||
}, |
|||
|
|||
//提交信息 |
|||
async submit() { |
|||
let data = {...this.formData} |
|||
|
|||
if(!data.head_img){ |
|||
uni.showToast({ |
|||
title: '请上传头像', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
|
|||
if(!data.name){ |
|||
uni.showToast({ |
|||
title: '请填写', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
|
|||
if(!data.gender){ |
|||
uni.showToast({ |
|||
title: '请选择性别', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
|
|||
if(!data.birthday){ |
|||
uni.showToast({ |
|||
title: '请选择生日', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
|
|||
if(!data.email){ |
|||
uni.showToast({ |
|||
title: '请填写邮箱', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
|
|||
if(!data.phone){ |
|||
uni.showToast({ |
|||
title: '请填写手机', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
|
|||
|
|||
let res = await apiRoute.editPersonnelInfo(data) |
|||
if(res.code != 1){ |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: 'success' |
|||
}) |
|||
//延迟1s执行 |
|||
setTimeout(() => { |
|||
this.getUserInfo() |
|||
}, 1000) |
|||
}, |
|||
|
|||
|
|||
} |
|||
} |
|||
</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 0rpx; |
|||
padding-top: 32rpx; |
|||
padding-bottom: 150rpx; |
|||
font-size: 28rpx; |
|||
color: #fff; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 20rpx; |
|||
|
|||
.section{ |
|||
background-color: #434544; |
|||
.item{ |
|||
padding: 20rpx 40rpx; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
.pic{ |
|||
width: 82rpx; |
|||
height: 82rpx; |
|||
border-radius: 50%; |
|||
} |
|||
.btn{} |
|||
|
|||
.title{ |
|||
min-width: 100rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
font-size: 26rpx; |
|||
color: #D7D7D7; |
|||
.required{ |
|||
margin-left: 10rpx; |
|||
color: red; |
|||
} |
|||
} |
|||
.input{ |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
input{ |
|||
text-align: right; |
|||
} |
|||
.dept{ |
|||
width: 50%; |
|||
} |
|||
.disabled{ |
|||
color: #808080; |
|||
//禁止图标 |
|||
cursor: not-allowed; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.submet_btn{ |
|||
margin: 0 auto; |
|||
margin-top: 40rpx; |
|||
border: 2px solid #25a18b; |
|||
color: #25a18b; |
|||
width: 80%; |
|||
height: 80rpx; |
|||
font-size: 30rpx; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
|
|||
|
|||
|
|||
} |
|||
|
|||
|
|||
</style> |
|||
@ -0,0 +1,292 @@ |
|||
<!--我的数据--> |
|||
<template> |
|||
<view class="main_box"> |
|||
<!--自定义导航栏--> |
|||
<view class="navbar_section"> |
|||
<view class="navbar_content"> |
|||
<view class="back_btn" @click="goBack"> |
|||
<fui-icon name="arrowleft" size="32" color="#fff"></fui-icon> |
|||
</view> |
|||
<view class="title">我的数据</view> |
|||
<view class="placeholder"></view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="content_section"> |
|||
<!-- 数据概览卡片 --> |
|||
<view class="overview_cards"> |
|||
<view class="card_item"> |
|||
<view class="card_icon"> |
|||
<fui-icon name="star" size="40" color="#29D3B4"></fui-icon> |
|||
</view> |
|||
<view class="card_content"> |
|||
<view class="card_title">总客户数</view> |
|||
<view class="card_value">--</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="card_item"> |
|||
<view class="card_icon"> |
|||
<fui-icon name="check" size="40" color="#29D3B4"></fui-icon> |
|||
</view> |
|||
<view class="card_content"> |
|||
<view class="card_title">已签客户</view> |
|||
<view class="card_value">--</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="card_item"> |
|||
<view class="card_icon"> |
|||
<fui-icon name="wallet" size="40" color="#29D3B4"></fui-icon> |
|||
</view> |
|||
<view class="card_content"> |
|||
<view class="card_title">销售业绩</view> |
|||
<view class="card_value">--</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="card_item"> |
|||
<view class="card_icon"> |
|||
<fui-icon name="calendar" size="40" color="#29D3B4"></fui-icon> |
|||
</view> |
|||
<view class="card_content"> |
|||
<view class="card_title">本月任务</view> |
|||
<view class="card_value">--</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 功能按钮区域 --> |
|||
<view class="function_section"> |
|||
<view class="section_title">数据统计</view> |
|||
<view class="function_grid"> |
|||
<view class="function_item"> |
|||
<view class="function_icon"> |
|||
<fui-icon name="barchart" size="32" color="#29D3B4"></fui-icon> |
|||
</view> |
|||
<view class="function_text">客户统计</view> |
|||
</view> |
|||
|
|||
<view class="function_item"> |
|||
<view class="function_icon"> |
|||
<fui-icon name="piechart" size="32" color="#29D3B4"></fui-icon> |
|||
</view> |
|||
<view class="function_text">业绩统计</view> |
|||
</view> |
|||
|
|||
<view class="function_item"> |
|||
<view class="function_icon"> |
|||
<fui-icon name="linechart" size="32" color="#29D3B4"></fui-icon> |
|||
</view> |
|||
<view class="function_text">趋势分析</view> |
|||
</view> |
|||
|
|||
<view class="function_item"> |
|||
<view class="function_icon"> |
|||
<fui-icon name="list" size="32" color="#29D3B4"></fui-icon> |
|||
</view> |
|||
<view class="function_text">详细报表</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 提示信息 --> |
|||
<view class="tips_section"> |
|||
<view class="tips_title">功能说明</view> |
|||
<view class="tips_content"> |
|||
这里将显示您个人的各项数据统计，包括客户数量、销售业绩、任务完成情况等。 |
|||
具体功能待后续开发实现。 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import fuiIcon from "@/components/firstui/fui-icon/fui-icon.vue" |
|||
|
|||
export default { |
|||
components: { |
|||
fuiIcon, |
|||
}, |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
onLoad() { |
|||
|
|||
}, |
|||
methods: { |
|||
// 返回上一页 |
|||
goBack() { |
|||
uni.navigateBack() |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.main_box { |
|||
background: #f5f5f5; |
|||
min-height: 100vh; |
|||
} |
|||
|
|||
// 自定义导航栏 |
|||
.navbar_section { |
|||
background: #29D3B4; |
|||
padding-top: 20rpx; |
|||
|
|||
// 小程序端样式 |
|||
// #ifdef MP-WEIXIN |
|||
padding-top: 90rpx; |
|||
// #endif |
|||
|
|||
.navbar_content { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
padding: 20rpx 24rpx 40rpx 24rpx; |
|||
|
|||
.back_btn { |
|||
width: 60rpx; |
|||
height: 60rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.title { |
|||
font-size: 32rpx; |
|||
color: #fff; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.placeholder { |
|||
width: 60rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 内容区域 |
|||
.content_section { |
|||
padding: 40rpx 24rpx; |
|||
|
|||
// 概览卡片 |
|||
.overview_cards { |
|||
display: grid; |
|||
grid-template-columns: repeat(2, 1fr); |
|||
gap: 24rpx; |
|||
margin-bottom: 40rpx; |
|||
|
|||
.card_item { |
|||
background: #fff; |
|||
border-radius: 16rpx; |
|||
padding: 32rpx 24rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 20rpx; |
|||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05); |
|||
|
|||
.card_icon { |
|||
width: 64rpx; |
|||
height: 64rpx; |
|||
background: rgba(41, 211, 180, 0.1); |
|||
border-radius: 50%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.card_content { |
|||
flex: 1; |
|||
|
|||
.card_title { |
|||
font-size: 24rpx; |
|||
color: #999; |
|||
margin-bottom: 8rpx; |
|||
} |
|||
|
|||
.card_value { |
|||
font-size: 32rpx; |
|||
color: #333; |
|||
font-weight: 600; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 功能区域 |
|||
.function_section { |
|||
margin-bottom: 40rpx; |
|||
|
|||
.section_title { |
|||
font-size: 28rpx; |
|||
color: #333; |
|||
font-weight: 600; |
|||
margin-bottom: 24rpx; |
|||
} |
|||
|
|||
.function_grid { |
|||
background: #fff; |
|||
border-radius: 16rpx; |
|||
padding: 32rpx 24rpx; |
|||
display: grid; |
|||
grid-template-columns: repeat(2, 1fr); |
|||
gap: 32rpx; |
|||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05); |
|||
|
|||
.function_item { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
padding: 24rpx 16rpx; |
|||
border-radius: 12rpx; |
|||
transition: all 0.3s ease; |
|||
|
|||
&:active { |
|||
background-color: #f5f5f5; |
|||
transform: scale(0.95); |
|||
} |
|||
|
|||
.function_icon { |
|||
width: 64rpx; |
|||
height: 64rpx; |
|||
background: rgba(41, 211, 180, 0.1); |
|||
border-radius: 50%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
margin-bottom: 16rpx; |
|||
} |
|||
|
|||
.function_text { |
|||
font-size: 24rpx; |
|||
color: #333; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 提示信息 |
|||
.tips_section { |
|||
background: #fff; |
|||
border-radius: 16rpx; |
|||
padding: 32rpx 24rpx; |
|||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05); |
|||
|
|||
.tips_title { |
|||
font-size: 28rpx; |
|||
color: #333; |
|||
font-weight: 600; |
|||
margin-bottom: 16rpx; |
|||
} |
|||
|
|||
.tips_content { |
|||
font-size: 24rpx; |
|||
color: #666; |
|||
line-height: 1.6; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,105 @@ |
|||
<!--设置页--> |
|||
<template> |
|||
<view class="assemble"> |
|||
<view style="height: 30rpx;"></view> |
|||
<view class="option" @click="update_pass()">修改密码</view> |
|||
<view class="option" @click="privacy_agreement(1)">用户协议</view> |
|||
<view class="option" @click="privacy_agreement(2)">隐私策略</view> |
|||
<view class="option" @click="clearCache()">清空缓存</view> |
|||
|
|||
<view style="width:90%;margin: 60rpx auto;"> |
|||
<fui-button background="#29d3b4" @click="loginOut()">退出账号</fui-button> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
methods: { |
|||
//退出登陆 |
|||
loginOut(){ |
|||
this.$util.loginOut() |
|||
}, |
|||
|
|||
privacy_agreement(type){ |
|||
uni.navigateTo({ |
|||
url: '/pages-common/privacy_agreement?type='+type |
|||
}) |
|||
}, |
|||
update_pass(){ |
|||
uni.navigateTo({ |
|||
url: '/pages-market/my/update_pass' |
|||
}) |
|||
}, |
|||
|
|||
// 清空缓存 |
|||
clearCache() { |
|||
uni.showModal({ |
|||
title: '清空缓存', |
|||
content: '确定要清空所有字典缓存吗？', |
|||
success: (res) => { |
|||
if (res.confirm) { |
|||
this.performClearCache(); |
|||
} |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
// 执行清空缓存操作 |
|||
performClearCache() { |
|||
try { |
|||
// 获取本地存储的所有键 |
|||
const storageInfo = uni.getStorageInfoSync(); |
|||
const keys = storageInfo.keys; |
|||
|
|||
// 筛选出dict_开头的键并删除 |
|||
let clearCount = 0; |
|||
keys.forEach(key => { |
|||
if (key.startsWith('dict_')) { |
|||
uni.removeStorageSync(key); |
|||
clearCount++; |
|||
} |
|||
}); |
|||
|
|||
// 显示清理结果 |
|||
uni.showToast({ |
|||
title: `已清空${clearCount}个字典缓存`, |
|||
icon: 'success', |
|||
duration: 2000 |
|||
}); |
|||
|
|||
console.log(`清空缓存完成，共清理${clearCount}个dict_开头的缓存项`); |
|||
} catch (error) { |
|||
console.error('清空缓存失败：', error); |
|||
uni.showToast({ |
|||
title: '清空缓存失败', |
|||
icon: 'none', |
|||
duration: 2000 |
|||
}); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.assemble{ |
|||
width: 100%; |
|||
height: 100vh; |
|||
background: #333333; |
|||
} |
|||
.option{ |
|||
margin-bottom: 20rpx; |
|||
background: #404045; |
|||
width: 100%; |
|||
font-size: 28rpx; |
|||
color: #fff; |
|||
line-height: 56rpx; |
|||
padding: 20rpx 0 20rpx 100rpx; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,275 @@ |
|||
<!--已签客户-列表--> |
|||
<template> |
|||
<view class="main_box"> |
|||
<!--自定义导航栏--> |
|||
<!-- <view class="navbar_section">--> |
|||
<!-- <view class="title">班级详情</view>--> |
|||
<!-- </view>--> |
|||
|
|||
<view class="main_section"> |
|||
<!-- 班级成员列表--> |
|||
<scroll-view |
|||
class="section_4" |
|||
scroll-y="true" |
|||
:lower-threshold="lowerThreshold" |
|||
@scrolltolower="loadMoreData" |
|||
style="height: 83vh;" |
|||
> |
|||
<view class="ul"> |
|||
<view class="li" |
|||
v-for="(v,k) in tableList" |
|||
:key="k" |
|||
@click="openViewStudentInfo(v)"> |
|||
<view class="left"> |
|||
<view class="box_1"> |
|||
<image class="pic" |
|||
v-if="v.header" :src="$util.img(v.header)"></image> |
|||
<image v-else class="pic" :src="$util.img('/uniapp_src/static/images/index/myk.png')"></image> |
|||
<!-- <view class="tag_box">--> |
|||
<!-- 即将到期--> |
|||
<!-- </view>--> |
|||
</view> |
|||
<view class="box_2"> |
|||
<view class="name">{{v.name}}</view> |
|||
<view class="date">课程截止时间：{{v.end_time}}</view> |
|||
</view> |
|||
</view> |
|||
<view class="right"> |
|||
<view class="item"> |
|||
<view>{{v.have_study_time}}</view> |
|||
<view>已上课时</view> |
|||
</view> |
|||
<view class="item"> |
|||
<view>{{v.end_study_time ? v.end_study_time:0}}</view> |
|||
<view>剩余课时</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</scroll-view> |
|||
</view> |
|||
|
|||
<!-- 底部导航--> |
|||
<!-- <AQTabber/>--> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import marketApi from '@/api/market.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,//数据总条数 |
|||
name: '',//班级名称 |
|||
}, |
|||
tableList:[],//聊天数据列表 |
|||
} |
|||
}, |
|||
onLoad() { |
|||
}, |
|||
onShow() { |
|||
this.init(); |
|||
}, |
|||
methods: { |
|||
//初始化 |
|||
async init(){ |
|||
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.signClient(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++ |
|||
}, |
|||
|
|||
//打开学员详情页 |
|||
openViewStudentInfo(item){ |
|||
let students_id= item.id |
|||
uni.navigateTo({ |
|||
url: `/pages-coach/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: 95vh; |
|||
background: #292929 100%; |
|||
padding: 0 24rpx; |
|||
padding-top: 40rpx; |
|||
padding-bottom: 150rpx; |
|||
font-size: 24rpx; |
|||
color: #FFFFFF; |
|||
//班级成员列表 |
|||
.section_4{ |
|||
.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; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
</style> |
|||
@ -0,0 +1,229 @@ |
|||
<!--修改密码--> |
|||
<template> |
|||
<view> |
|||
<view class="title"> |
|||
<view :class="{'green-text': tset_style === 1}">1.验证旧密码</view> |
|||
<view :class="{'green-text': tset_style === 2}">2.设置新密码</view> |
|||
</view> |
|||
<view :style="{'background-color':'#fff','width':'100%','height':'100vh' }"> |
|||
<view style="width: 95%;height: 30rpx;"></view> |
|||
<view v-if="tset_style == 1"> |
|||
<view class="describe"> |
|||
为保障您的账号安全，修改密码前请填写原密码 |
|||
</view> |
|||
<view style="width: 95%;margin:30rpx auto;"> |
|||
<fui-input borderTop placeholder="请输入原登录密码" v-model="old_password" |
|||
backgroundColor="#f2f2f2"></fui-input> |
|||
</view> |
|||
</view> |
|||
<view v-if="tset_style == 2"> |
|||
<view style="width: 95%;margin:30rpx auto;"> |
|||
<fui-input borderTop placeholder="请设置6-20位新的登录密码" v-model="formData.new_password" @input="input" |
|||
backgroundColor="#f2f2f2"></fui-input> |
|||
</view> |
|||
<view style="width: 95%;margin: auto;"> |
|||
<fui-input borderTop :padding="['20rpx','32rpx']" v-model="formData.new_password_2" placeholder="请再次输入新的登录密码" @input="input" |
|||
backgroundColor="#f2f2f2"> |
|||
</fui-input> |
|||
</view> |
|||
</view> |
|||
<view style="width: 95%;margin:60rpx auto;"> |
|||
<view class="btn_box"> |
|||
<fui-button |
|||
background="#465cff" |
|||
radius="5rpx" |
|||
@click="nextStep(1)" |
|||
v-if="tset_style != 1">上一步 |
|||
</fui-button> |
|||
|
|||
<fui-button background="#00be8c" radius="5rpx" @click="nextStep(2)" v-if="tset_style == 1">下一步</fui-button> |
|||
|
|||
<fui-button background="#00be8c" radius="5rpx" @click="submit" v-if="tset_style == 2">提交</fui-button> |
|||
</view> |
|||
|
|||
|
|||
<view style="width: 95%;margin:60rpx auto;"> |
|||
<fui-button background="#fff" radius="5rpx" @click="forgot" color="#999999" v-if="tset_style == 1">忘记原密码</fui-button> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import apiRoute from '@/api/apiRoute.js'; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
code: '', |
|||
user: '', |
|||
tset_style: 1,//tab栏目|1=验证旧密码页,2=设置新密码页 |
|||
|
|||
old_password:'',//旧密码 |
|||
|
|||
|
|||
formData:{ |
|||
phone:'',//当前登录用户的手机号 |
|||
new_password:'',//新密码 |
|||
new_password_2:'',//二次新密码 |
|||
key_value:'',//修改密码的key_value |
|||
}, |
|||
} |
|||
}, |
|||
onLoad() {}, |
|||
onShow() { |
|||
this.init()//初始化 |
|||
}, |
|||
methods: { |
|||
//初始化 |
|||
async init(){ |
|||
await this.getUserInfo() |
|||
}, |
|||
//获取用户信息 |
|||
async getUserInfo() { |
|||
let res = await apiRoute.getPersonnelInfo({}) |
|||
if (res.code != 1) { |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
this.formData.phone = res.data.phone//用户手机号 |
|||
}, |
|||
|
|||
//上/下一步切换 |
|||
async nextStep(tset_style){ |
|||
//tset_style|1=第一页,2=第二页 |
|||
if(tset_style == 2){ |
|||
if(!this.old_password){ |
|||
uni.showToast({ |
|||
title: '请输入原登录密码', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
//验证旧密码 |
|||
let params = { |
|||
old_password: this.old_password |
|||
} |
|||
//验证旧密码是否正确 |
|||
let res = await apiRoute.common_personnelCheckOldPwd(params) |
|||
if(!res.code){ |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
this.formData.key_value = res.data.key_value |
|||
} |
|||
this.tset_style = Number(tset_style) |
|||
}, |
|||
//忘记密码 |
|||
forgot() { |
|||
uni.navigateTo({ |
|||
url: '/pages/student/login/forgot' |
|||
}) |
|||
}, |
|||
|
|||
//提交 |
|||
async submit() { |
|||
//验证数据 |
|||
if (!this.formData.new_password) { |
|||
uni.showToast({ |
|||
title: '请输入新密码', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
|
|||
if (this.formData.new_password.length < 6 || this.formData.new_password.length > 20) { |
|||
uni.showToast({ |
|||
title: '新密码长度为6-20位', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
|
|||
if (!this.formData.new_password) { |
|||
uni.showToast({ |
|||
title: '请输入新密码', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
//验证两次密码是否一致 |
|||
if (this.formData.new_password != this.formData.new_password_2) { |
|||
uni.showToast({ |
|||
title: '两次密码不一致', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
|
|||
let res = await apiRoute.common_personnelEdidPassword(this.formData) |
|||
if(!res.code){ |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: 'success' |
|||
}) |
|||
//延迟1s执行 |
|||
setTimeout(() => { |
|||
//跳转页面-个人中心 |
|||
//关闭当前页跳转新页面 |
|||
uni.redirectTo({ |
|||
url: `/pages-market/my/index` |
|||
}) |
|||
}, 1000) |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
page { |
|||
font-weight: normal; |
|||
} |
|||
|
|||
.fui-section__title { |
|||
margin-left: 32rpx; |
|||
} |
|||
|
|||
.fui-left__icon { |
|||
padding-right: 24rpx; |
|||
} |
|||
|
|||
.title { |
|||
display: flex; |
|||
justify-content: space-around; |
|||
align-items: center; |
|||
height: 100rpx; |
|||
width: 100%; |
|||
background-color: #fff; |
|||
font-size: 26rpx; |
|||
border: 4rpx #f5f5f5 solid; |
|||
} |
|||
|
|||
.green-text{ |
|||
color: #36d6b9; |
|||
} |
|||
|
|||
.describe{ |
|||
color: #999999; |
|||
padding-left: 30rpx; |
|||
} |
|||
|
|||
.btn_box{ |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 40rpx; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,272 @@ |
|||
<template> |
|||
<view class="reim-add-page"> |
|||
<view class="header-bar"> |
|||
<view class="title">{{ pageTitle }}</view> |
|||
</view> |
|||
<view class="form-box"> |
|||
<!-- 金额 --> |
|||
<view class="form-row"> |
|||
<view class="label">报销金额</view> |
|||
<input class="input-amount" type="number" v-model="form.amount" placeholder="0.00" |
|||
:disabled="disabled" /> |
|||
</view> |
|||
<!-- 描述 --> |
|||
<view class="form-row-top"> |
|||
<view class="label">报销描述</view> |
|||
<textarea class="textarea" v-model="form.description" placeholder="请输入报销事由" :disabled="disabled" /> |
|||
</view> |
|||
<!-- 附件 --> |
|||
<view class="form-row"> |
|||
<view class="label">发票/收据</view> |
|||
<view class="file-upload-wrapper"> |
|||
<view v-if="form.receipt_url" class="preview-box" @click="previewImage"> |
|||
<image v-if="isImage(form.receipt_url)" :src="form.receipt_url" class="preview-img" |
|||
mode="aspectFit" /> |
|||
<view v-else class="file-link">{{ getFileName(form.receipt_url) }}</view> |
|||
</view> |
|||
<button class="upload-btn" @click="chooseFile" :disabled="disabled"> |
|||
{{ form.receipt_url ? '重新选择' : '选择附件' }} |
|||
</button> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="save-btn-box" v-if="!disabled"> |
|||
<fui-button background="#434544" color="#24BA9F" borderColor="#24BA9F" @click="submit">提交</fui-button> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import apiRoute from '@/api/apiRoute.js'; |
|||
import { |
|||
Api_url |
|||
} from "@/common/config.js"; |
|||
export default { |
|||
data() { |
|||
return { |
|||
uploadUrl: `${Api_url}/uploadImage`, |
|||
pageTitle: '新增报销', |
|||
disabled: false, |
|||
form: { |
|||
id: null, |
|||
amount: '', |
|||
description: '', |
|||
receipt_url: '', |
|||
} |
|||
} |
|||
}, |
|||
onLoad(options) { |
|||
if (options.id) { |
|||
this.form.id = options.id; |
|||
this.fetchDetail(options.id); |
|||
} |
|||
}, |
|||
methods: { |
|||
async fetchDetail(id) { |
|||
uni.showLoading({ |
|||
title: '加载中...' |
|||
}); |
|||
|
|||
let res = await apiRoute.reimbursement_info({id:id}) |
|||
let mockData = res.data |
|||
|
|||
if (mockData.status !== 'pending') { |
|||
this.disabled = true; |
|||
this.pageTitle = '查看报销'; |
|||
} else { |
|||
this.pageTitle = '编辑报销'; |
|||
} |
|||
|
|||
this.form.amount = mockData.amount; |
|||
this.form.description = mockData.description; |
|||
this.form.receipt_url = mockData.receipt_url; |
|||
uni.hideLoading(); |
|||
}, |
|||
chooseFile() { |
|||
|
|||
uni.chooseImage({ |
|||
count: 1, |
|||
success: (res) => { |
|||
const tempFilePath = res.tempFilePaths[0] |
|||
// 这里可以调用上传接口 |
|||
this.uploadFilePromise(tempFilePath) |
|||
} |
|||
}) |
|||
}, |
|||
uploadFilePromise(url) { |
|||
let token = uni.getStorageSync('token') || '' |
|||
let a = uni.uploadFile({ |
|||
url: this.uploadUrl, //仅为示例，非真实的接口地址 |
|||
filePath: url, |
|||
name: 'file', |
|||
header: { |
|||
'token': `${token}`, //请求头设置token |
|||
}, |
|||
success: (e) => { |
|||
let res = JSON.parse(e.data.replace(/\ufeff/g, "") || "{}") |
|||
|
|||
if (res.code == 1) { |
|||
this.form.receipt_url = res.data.url |
|||
} else { |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: 'none' |
|||
}) |
|||
} |
|||
}, |
|||
}); |
|||
}, |
|||
isImage(url) { |
|||
if (!url) return false; |
|||
return /\.(jpg|jpeg|png|gif|bmp)$/i.test(url); |
|||
}, |
|||
getFileName(path) { |
|||
if (!path) return ''; |
|||
return path.split('/').pop(); |
|||
}, |
|||
previewImage() { |
|||
if (this.form.receipt_url && this.isImage(this.form.receipt_url)) { |
|||
uni.previewImage({ |
|||
urls: [this.form.receipt_url] |
|||
}); |
|||
} |
|||
}, |
|||
submit() { |
|||
if (!this.form.amount || !this.form.description) { |
|||
uni.showToast({ |
|||
title: '请填写完整', |
|||
icon: 'none' |
|||
}); |
|||
return; |
|||
} |
|||
let res = apiRoute.reimbursement_add(this.form) |
|||
|
|||
if (res['code'] == 1) { |
|||
uni.showToast({ |
|||
title: '提交成功', |
|||
icon: 'success' |
|||
}); |
|||
} |
|||
|
|||
setTimeout(() => { |
|||
uni.navigateBack(); |
|||
}, 1000); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.reim-add-page { |
|||
min-height: 100vh; |
|||
background: #292929; |
|||
padding-bottom: 120rpx; |
|||
} |
|||
|
|||
.header-bar { |
|||
padding: 32rpx; |
|||
|
|||
.title { |
|||
font-size: 44rpx; |
|||
color: #fff; |
|||
font-weight: bold; |
|||
} |
|||
} |
|||
|
|||
.form-box { |
|||
margin: 0 32rpx; |
|||
background: #434544; |
|||
border-radius: 18rpx; |
|||
padding: 0 24rpx; |
|||
} |
|||
|
|||
.form-row, |
|||
.form-row-top { |
|||
display: flex; |
|||
padding: 32rpx 0; |
|||
border-bottom: 1rpx solid #3a3a3a; |
|||
|
|||
&:last-of-type { |
|||
border-bottom: none; |
|||
} |
|||
} |
|||
|
|||
.form-row { |
|||
align-items: center; |
|||
} |
|||
|
|||
.form-row-top { |
|||
align-items: flex-start; |
|||
} |
|||
|
|||
.label { |
|||
color: #aaa; |
|||
font-size: 28rpx; |
|||
width: 180rpx; |
|||
flex-shrink: 0; |
|||
} |
|||
|
|||
.input-amount { |
|||
flex: 1; |
|||
color: #fff; |
|||
font-size: 28rpx; |
|||
text-align: right; |
|||
} |
|||
|
|||
.textarea { |
|||
flex: 1; |
|||
height: 180rpx; |
|||
color: #fff; |
|||
font-size: 28rpx; |
|||
background-color: transparent; |
|||
padding: 0; |
|||
width: 100%; |
|||
} |
|||
|
|||
.file-upload-wrapper { |
|||
flex: 1; |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
align-items: center; |
|||
gap: 20rpx; |
|||
} |
|||
|
|||
.upload-btn { |
|||
background: #24BA9F; |
|||
color: #fff; |
|||
border: none; |
|||
border-radius: 8rpx; |
|||
padding: 0 32rpx; |
|||
line-height: 64rpx; |
|||
height: 64rpx; |
|||
font-size: 26rpx; |
|||
margin: 0; |
|||
} |
|||
|
|||
.preview-box { |
|||
.preview-img { |
|||
width: 120rpx; |
|||
height: 120rpx; |
|||
border-radius: 8rpx; |
|||
background: #222; |
|||
border: 1rpx solid #333; |
|||
} |
|||
|
|||
.file-link { |
|||
color: #24BA9F; |
|||
font-size: 26rpx; |
|||
word-break: break-all; |
|||
} |
|||
} |
|||
|
|||
.save-btn-box { |
|||
position: fixed; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
z-index: 100; |
|||
background: #292929; |
|||
padding: 20rpx 40rpx 40rpx 40rpx; |
|||
box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.12); |
|||
} |
|||
</style> |
|||
@ -0,0 +1,136 @@ |
|||
<template> |
|||
<view class="reim-detail-page"> |
|||
<view class="header-bar"> |
|||
<view class="title">报销详情</view> |
|||
</view> |
|||
<view class="detail-box"> |
|||
<view class="row"> |
|||
<view class="label">报销金额</view> |
|||
<view class="value">￥{{ detail.amount }}</view> |
|||
</view> |
|||
<view class="row"> |
|||
<view class="label">报销描述</view> |
|||
<view class="value">{{ detail.description }}</view> |
|||
</view> |
|||
<view class="row"> |
|||
<view class="label">发票/收据</view> |
|||
<view class="value"> |
|||
<image v-if="detail.receipt_url && isImage(detail.receipt_url)" :src="detail.receipt_url" class="receipt-img" mode="aspectFit" /> |
|||
<view v-else-if="detail.receipt_url" class="file-link">{{ detail.receipt_url }}</view> |
|||
<text v-else>无附件</text> |
|||
</view> |
|||
</view> |
|||
<view class="row"> |
|||
<view class="label">状态</view> |
|||
<view :class="['value', 'status-' + detail.status]">{{ statusMap[detail.status] || detail.status }}</view> |
|||
</view> |
|||
<view class="row"> |
|||
<view class="label">创建时间</view> |
|||
<view class="value">{{ detail.created_at }}</view> |
|||
</view> |
|||
<view class="row"> |
|||
<view class="label">修改时间</view> |
|||
<view class="value">{{ detail.updated_at }}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
detail: {}, |
|||
statusMap: { |
|||
pending: '待审批', |
|||
approved: '已批准', |
|||
rejected: '已拒绝', |
|||
}, |
|||
} |
|||
}, |
|||
onLoad(options) { |
|||
if (options.id) { |
|||
this.fetchDetail(options.id); |
|||
} else { |
|||
uni.showToast({ title: '缺少报销ID', icon: 'none' }); |
|||
uni.navigateBack(); |
|||
} |
|||
}, |
|||
methods: { |
|||
fetchDetail(id) { |
|||
// 模拟接口获取详情 |
|||
uni.showLoading({ title: '加载中...' }); |
|||
setTimeout(() => { |
|||
const mockData = { |
|||
id: id, |
|||
amount: 300.00, |
|||
description: '办公用品采购（已批准）', |
|||
receipt_url: 'https://cdn.uviewui.com/uview/swiper/1.jpg', |
|||
status: 'approved', |
|||
created_at: '2024-06-02 09:30', |
|||
updated_at: '2024-06-03 12:00', |
|||
}; |
|||
this.detail = mockData; |
|||
uni.hideLoading(); |
|||
}, 500); |
|||
}, |
|||
isImage(url) { |
|||
if (!url) return false; |
|||
return /\.(jpg|jpeg|png|gif|bmp)$/i.test(url) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.reim-detail-page { |
|||
min-height: 100vh; |
|||
background: #292929; |
|||
} |
|||
.header-bar { |
|||
padding: 32rpx 32rpx 0 32rpx; |
|||
.title { |
|||
font-size: 36rpx; |
|||
color: #24BA9F; |
|||
font-weight: bold; |
|||
} |
|||
} |
|||
.detail-box { |
|||
margin: 32rpx; |
|||
background: #434544; |
|||
border-radius: 18rpx; |
|||
padding: 32rpx 24rpx 24rpx 24rpx; |
|||
} |
|||
.row { |
|||
display: flex; |
|||
align-items: flex-start; |
|||
margin-bottom: 32rpx; |
|||
.label { |
|||
color: #aaa; |
|||
font-size: 28rpx; |
|||
width: 180rpx; |
|||
flex-shrink: 0; |
|||
margin-top: 10rpx; |
|||
} |
|||
.value { |
|||
color: #fff; |
|||
font-size: 28rpx; |
|||
word-break: break-all; |
|||
} |
|||
.status-pending { color: #f0ad4e; } |
|||
.status-approved { color: #24BA9F; } |
|||
.status-rejected { color: #e74c3c; } |
|||
.receipt-img { |
|||
width: 160rpx; |
|||
height: 160rpx; |
|||
border-radius: 8rpx; |
|||
background: #222; |
|||
border: 1rpx solid #333; |
|||
} |
|||
.file-link { |
|||
color: #24BA9F; |
|||
font-size: 26rpx; |
|||
word-break: break-all; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,144 @@ |
|||
<template> |
|||
<view class="reim-list-page"> |
|||
<view class="header-bar"> |
|||
<view class="title">报销列表</view> |
|||
<fui-button |
|||
background="transparent" |
|||
color="#24BA9F" |
|||
borderColor="#24BA9F" |
|||
width="180rpx" |
|||
height="64rpx" |
|||
radius="32rpx" |
|||
@click="goAdd"> |
|||
新增报销 |
|||
</fui-button> |
|||
</view> |
|||
<view v-if="list.length === 0" class="empty-tip">暂无报销记录</view> |
|||
<view v-for="item in list" :key="item.id" class="reim-card" @click="goDetail(item)"> |
|||
<view class="row"> |
|||
<view class="label">金额：</view> |
|||
<view class="value">￥{{ item.amount }}</view> |
|||
</view> |
|||
<view class="row"> |
|||
<view class="label">描述：</view> |
|||
<view class="value">{{ item.description }}</view> |
|||
</view> |
|||
<view class="row"> |
|||
<view class="label">发票/收据：</view> |
|||
<view class="value"> |
|||
<image v-if="item.receipt_url" :src="item.receipt_url" class="receipt-img" mode="aspectFit" /> |
|||
<text v-else>无附件</text> |
|||
</view> |
|||
</view> |
|||
<view class="row"> |
|||
<view class="label">状态：</view> |
|||
<view :class="['value', 'status-' + item.status]">{{ statusMap[item.status] || item.status }}</view> |
|||
</view> |
|||
<view class="row"> |
|||
<view class="label">创建时间：</view> |
|||
<view class="value">{{ item.created_at }}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import apiRoute from '@/api/apiRoute.js'; |
|||
export default { |
|||
data() { |
|||
return { |
|||
list: [], |
|||
statusMap: { |
|||
pending: '待审批', |
|||
approved: '已批准', |
|||
rejected: '已拒绝', |
|||
}, |
|||
} |
|||
}, |
|||
async onShow() { |
|||
await this.reimbursementList(); |
|||
}, |
|||
methods: { |
|||
async reimbursementList(){ |
|||
let res = await apiRoute.reimbursement_list({}) |
|||
this.list = res.data; |
|||
|
|||
}, |
|||
goAdd() { |
|||
uni.navigateTo({ |
|||
url: '/pages-market/reimbursement/add' |
|||
}); |
|||
}, |
|||
goDetail(item) { |
|||
// 待审批状态可编辑，否则只能查看 |
|||
if (item.status === 'pending') { |
|||
this.$navigateToPage(`/pages-market/reimbursement/add`, { |
|||
id: item.id |
|||
}); |
|||
} else { |
|||
this.$navigateToPage(`/pages-market/reimbursement/detail`, { |
|||
id: item.id |
|||
}); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.reim-list-page { |
|||
min-height: 100vh; |
|||
background: #292929; |
|||
padding-bottom: 120rpx; |
|||
} |
|||
.header-bar { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding: 32rpx 32rpx 0 32rpx; |
|||
.title { |
|||
font-size: 36rpx; |
|||
color: #fff; |
|||
font-weight: bold; |
|||
} |
|||
} |
|||
.empty-tip { |
|||
color: #888; |
|||
text-align: center; |
|||
margin: 80rpx 0; |
|||
} |
|||
.reim-card { |
|||
background: #434544; |
|||
border-radius: 18rpx; |
|||
margin: 32rpx; |
|||
margin-bottom: 0; |
|||
padding: 32rpx 24rpx 24rpx 24rpx; |
|||
box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.08); |
|||
.row { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-bottom: 18rpx; |
|||
.label { |
|||
color: #aaa; |
|||
font-size: 26rpx; |
|||
width: 140rpx; |
|||
flex-shrink: 0; |
|||
} |
|||
.value { |
|||
color: #fff; |
|||
font-size: 28rpx; |
|||
word-break: break-all; |
|||
} |
|||
.status-pending { color: #f0ad4e; } |
|||
.status-approved { color: #24BA9F; } |
|||
.status-rejected { color: #e74c3c; } |
|||
.receipt-img { |
|||
width: 120rpx; |
|||
height: 120rpx; |
|||
border-radius: 8rpx; |
|||
background: #222; |
|||
border: 1rpx solid #333; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,590 @@ |
|||
{ |
|||
"pages": [ |
|||
{ |
|||
"path": "pages/student/login/login", |
|||
"style": { |
|||
"navigationBarTitleText": "", |
|||
"navigationStyle": "default", |
|||
"navigationBarBackgroundColor": "#fff", |
|||
"navigationBarTextStyle": "white" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/student/home/index", |
|||
"style": { |
|||
"navigationBarTitleText": "首页", |
|||
"navigationStyle": "custom", |
|||
"navigationBarBackgroundColor": "#29d3b4", |
|||
"navigationBarTextStyle": "white" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/common/home/index", |
|||
"style": { |
|||
"navigationBarTitleText": "首页", |
|||
"navigationStyle": "custom", |
|||
"navigationBarBackgroundColor": "#181A20", |
|||
"navigationBarTextStyle": "white" |
|||
} |
|||
} |
|||
], |
|||
"subPackages": [ |
|||
{ |
|||
"root": "pages-student", |
|||
"name": "student", |
|||
"pages": [ |
|||
{ |
|||
"path": "profile/index", |
|||
"style": { |
|||
"navigationBarTitleText": "个人信息管理", |
|||
"navigationStyle": "custom", |
|||
"navigationBarBackgroundColor": "#29d3b4", |
|||
"navigationBarTextStyle": "white" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "physical-test/index", |
|||
"style": { |
|||
"navigationBarTitleText": "体测数据", |
|||
"navigationStyle": "custom", |
|||
"navigationBarBackgroundColor": "#29d3b4", |
|||
"navigationBarTextStyle": "white" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "schedule/index", |
|||
"style": { |
|||
"navigationBarTitleText": "课程安排", |
|||
"navigationStyle": "custom", |
|||
"navigationBarBackgroundColor": "#29d3b4", |
|||
"navigationBarTextStyle": "white" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "course-booking/index", |
|||
"style": { |
|||
"navigationBarTitleText": "课程预约", |
|||
"navigationStyle": "custom", |
|||
"navigationBarBackgroundColor": "#29d3b4", |
|||
"navigationBarTextStyle": "white" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "orders/index", |
|||
"style": { |
|||
"navigationBarTitleText": "订单管理", |
|||
"navigationStyle": "custom", |
|||
"navigationBarBackgroundColor": "#29d3b4", |
|||
"navigationBarTextStyle": "white" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "contracts/index", |
|||
"style": { |
|||
"navigationBarTitleText": "合同管理", |
|||
"navigationStyle": "custom", |
|||
"navigationBarBackgroundColor": "#29d3b4", |
|||
"navigationBarTextStyle": "white" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "knowledge/index", |
|||
"style": { |
|||
"navigationBarTitleText": "知识库", |
|||
"navigationStyle": "custom", |
|||
"navigationBarBackgroundColor": "#29d3b4", |
|||
"navigationBarTextStyle": "white" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "messages/index", |
|||
"style": { |
|||
"navigationBarTitleText": "消息管理", |
|||
"navigationStyle": "custom", |
|||
"navigationBarBackgroundColor": "#29d3b4", |
|||
"navigationBarTextStyle": "white" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "settings/index", |
|||
"style": { |
|||
"navigationBarTitleText": "系统设置", |
|||
"navigationStyle": "custom", |
|||
"navigationBarBackgroundColor": "#29d3b4", |
|||
"navigationBarTextStyle": "white" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "child/add", |
|||
"style": { |
|||
"navigationBarTitleText": "添加孩子", |
|||
"navigationStyle": "custom", |
|||
"navigationBarBackgroundColor": "#29d3b4", |
|||
"navigationBarTextStyle": "white" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "my/set_up", |
|||
"style": { |
|||
"navigationBarTitleText": "设置", |
|||
"navigationStyle": "default", |
|||
"navigationBarBackgroundColor": "#29D3B4", |
|||
"navigationBarTextStyle": "white" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "my/update_pass", |
|||
"style": { |
|||
"navigationBarTitleText": "修改密码", |
|||
"navigationStyle": "default", |
|||
"navigationBarBackgroundColor": "#fff", |
|||
"navigationBarTextStyle": "black" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "my/personal_data", |
|||
"style": { |
|||
"navigationBarTitleText": "个人资料", |
|||
"navigationStyle": "default", |
|||
"navigationBarBackgroundColor": "#333333", |
|||
"navigationBarTextStyle": "white" |
|||
} |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
"root": "pages-market", |
|||
"name": "market", |
|||
"pages": [ |
|||
{ |
|||
"path": "clue/index", |
|||
"style": { |
|||
"navigationBarTitleText": "线索", |
|||
"navigationStyle": "default", |
|||
"navigationBarBackgroundColor": "#292929", |
|||
"navigationBarTextStyle": "white" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "clue/add_clues", |
|||
"style": { |
|||
"navigationBarTitleText": "添加客户", |
|||
"navigationStyle": "default", |
|||
"navigationBarBackgroundColor": "#fff", |
|||
"navigationBarTextStyle": "black" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "clue/edit_clues", |
|||
"style": { |
|||
"navigationBarTitleText": "编辑客户", |
|||
"navigationStyle": "default", |
|||
"navigationBarBackgroundColor": "#fff", |
|||
"navigationBarTextStyle": "black" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "clue/edit_clues_log", |
|||
"style": { |
|||
"navigationBarTitleText": "修改记录", |
|||
"navigationStyle": "default", |
|||
"navigationBarBackgroundColor": "#fff", |
|||
"navigationBarTextStyle": "black" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "clue/clue_info", |
|||
"style": { |
|||
"navigationBarTitleText": "客户详情", |
|||
"navigationStyle": "default", |
|||
"navigationBarBackgroundColor": "#29d3b4", |
|||
"navigationBarTextStyle": "black" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "clue/class_arrangement", |
|||
"style": { |
|||
"navigationBarTitleText": "课程安排", |
|||
"navigationStyle": "default", |
|||
"navigationBarBackgroundColor": "#232323", |
|||
"navigationBarTextStyle": "white" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "clue/class_arrangement_detail", |
|||
"style": { |
|||
"navigationBarTitleText": "课程安排详情", |
|||
"navigationStyle": "default", |
|||
"navigationBarBackgroundColor": "#232323", |
|||
"navigationBarTextStyle": "white" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "clue/clue_table", |
|||
"style": { |
|||
"navigationBarTitleText": "数据统计", |
|||
"navigationBarBackgroundColor": "#292929", |
|||
"navigationBarTextStyle": "white" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "index/index", |
|||
"style": { |
|||
"navigationBarTitleText": "销售数据" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "my/index", |
|||
"style": { |
|||
"navigationBarTitleText": "我的", |
|||
"navigationStyle": "custom", |
|||
"navigationBarBackgroundColor": "#fff", |
|||
"navigationBarTextStyle": "black" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "my/signed_client_list", |
|||
"style": { |
|||
"navigationBarTitleText": "已签客户", |
|||
"navigationStyle": "default", |
|||
"navigationBarBackgroundColor": "#292929", |
|||
"navigationBarTextStyle": "white" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "my/info", |
|||
"style": { |
|||
"navigationBarTitleText": "个人资料", |
|||
"navigationStyle": "default", |
|||
"navigationBarBackgroundColor": "#292929", |
|||
"navigationBarTextStyle": "white" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "my/set_up", |
|||
"style": { |
|||
"navigationBarTitleText": "设置", |
|||
"navigationStyle": "default", |
|||
"navigationBarBackgroundColor": "#292929", |
|||
"navigationBarTextStyle": "white" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "my/update_pass", |
|||
"style": { |
|||
"navigationBarTitleText": "修改密码", |
|||
"navigationStyle": "default", |
|||
"navigationBarBackgroundColor": "#fff", |
|||
"navigationBarTextStyle": "black" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "my/my_data", |
|||
"style": { |
|||
"navigationBarTitleText": "我的数据", |
|||
"navigationStyle": "custom", |
|||
"navigationBarBackgroundColor": "#29d3b4", |
|||
"navigationBarTextStyle": "white" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "my/dept_data", |
|||
"style": { |
|||
"navigationBarTitleText": "部门数据", |
|||
"navigationStyle": "custom", |
|||
"navigationBarBackgroundColor": "#29d3b4", |
|||
"navigationBarTextStyle": "white" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "my/campus_data", |
|||
"style": { |
|||
"navigationBarTitleText": "校区数据", |
|||
"navigationStyle": "custom", |
|||
"navigationBarBackgroundColor": "#29d3b4", |
|||
"navigationBarTextStyle": "white" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "reimbursement/list", |
|||
"style": { |
|||
"navigationBarTitleText": "报销列表", |
|||
"navigationBarBackgroundColor": "#292929", |
|||
"navigationBarTextStyle": "white" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "reimbursement/add", |
|||
"style": { |
|||
"navigationBarTitleText": "新增报销", |
|||
"navigationBarBackgroundColor": "#292929", |
|||
"navigationBarTextStyle": "white" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "reimbursement/detail", |
|||
"style": { |
|||
"navigationBarTitleText": "报销详情", |
|||
"navigationBarBackgroundColor": "#292929", |
|||
"navigationBarTextStyle": "white" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "data/statistics", |
|||
"style": { |
|||
"navigationBarTitleText": "市场数据统计", |
|||
"navigationBarBackgroundColor": "#292929", |
|||
"navigationBarTextStyle": "white" |
|||
} |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
"root": "pages-coach", |
|||
"name": "coach", |
|||
"pages": [ |
|||
{ |
|||
"path": "student/student_list", |
|||
"style": { |
|||
"navigationBarTitleText": "我的学员", |
|||
"navigationBarBackgroundColor": "#29d3b4", |
|||
"navigationBarTextStyle": "white" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "my/teaching_management", |
|||
"style": { |
|||
"navigationBarTitleText": "教研管理列表", |
|||
"navigationStyle": "default", |
|||
"navigationBarBackgroundColor": "#171717", |
|||
"navigationBarTextStyle": "white" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "my/gotake_exam", |
|||
"style": { |
|||
"navigationBarTitleText": "考试", |
|||
"navigationStyle": "default", |
|||
"navigationBarBackgroundColor": "#171717", |
|||
"navigationBarTextStyle": "white" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "my/exam_results", |
|||
"style": { |
|||
"navigationBarTitleText": "考试结果", |
|||
"navigationStyle": "default", |
|||
"navigationBarBackgroundColor": "#fff", |
|||
"navigationBarTextStyle": "black" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "my/salary", |
|||
"style": { |
|||
"navigationBarTitleText": "我的工资", |
|||
"navigationStyle": "default", |
|||
"navigationBarBackgroundColor": "#29d3b4", |
|||
"navigationBarTextStyle": "white" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "schedule/schedule_table", |
|||
"style": { |
|||
"navigationBarTitleText": "课程安排", |
|||
"navigationBarBackgroundColor": "#292929", |
|||
"navigationBarTextStyle": "white" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "schedule/add_schedule", |
|||
"style": { |
|||
"navigationBarTitleText": "添加课程安排", |
|||
"navigationBarBackgroundColor": "#292929", |
|||
"navigationBarTextStyle": "white" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "schedule/adjust_course", |
|||
"style": { |
|||
"navigationBarTitleText": "调整课程安排", |
|||
"navigationBarBackgroundColor": "#292929", |
|||
"navigationBarTextStyle": "white" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "schedule/sign_in", |
|||
"style": { |
|||
"navigationBarTitleText": "课程点名", |
|||
"navigationStyle": "custom", |
|||
"navigationBarBackgroundColor": "#292929", |
|||
"navigationBarTextStyle": "white" |
|||
} |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
"root": "pages-common", |
|||
"name": "common", |
|||
"pages": [ |
|||
{ |
|||
"path": "privacy_agreement", |
|||
"style": { |
|||
"navigationBarTitleText": "隐私协议", |
|||
"navigationStyle": "default", |
|||
"navigationBarBackgroundColor": "#fff", |
|||
"navigationBarTextStyle": "black" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "my_message", |
|||
"style": { |
|||
"navigationBarTitleText": "我的消息", |
|||
"navigationStyle": "default", |
|||
"navigationBarBackgroundColor": "#292929", |
|||
"navigationBarTextStyle": "white" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "im_chat_info", |
|||
"style": { |
|||
"navigationBarTitleText": "消息", |
|||
"navigationStyle": "default", |
|||
"navigationBarBackgroundColor": "#292929", |
|||
"navigationBarTextStyle": "white" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "sys_msg_list", |
|||
"style": { |
|||
"navigationBarTitleText": "系统消息", |
|||
"navigationStyle": "default", |
|||
"navigationBarBackgroundColor": "#292929", |
|||
"navigationBarTextStyle": "white" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "article_info", |
|||
"style": { |
|||
"navigationBarTitleText": "文章详情", |
|||
"navigationStyle": "default", |
|||
"navigationBarBackgroundColor": "#292929", |
|||
"navigationBarTextStyle": "white" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "feedback", |
|||
"style": { |
|||
"navigationBarTitleText": "意见反馈", |
|||
"navigationStyle": "default", |
|||
"navigationBarBackgroundColor": "#292929", |
|||
"navigationBarTextStyle": "white" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "my_attendance", |
|||
"style": { |
|||
"navigationBarTitleText": "我的考勤", |
|||
"navigationStyle": "default", |
|||
"navigationBarBackgroundColor": "#292929", |
|||
"navigationBarTextStyle": "white" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "personnel/add_personnel", |
|||
"style": { |
|||
"navigationBarTitleText": "新员工信息填写", |
|||
"navigationStyle": "custom", |
|||
"navigationBarBackgroundColor": "#fff", |
|||
"navigationBarTextStyle": "black" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "contract/my_contract", |
|||
"style": { |
|||
"navigationBarTitleText": "我的合同", |
|||
"navigationStyle": "default", |
|||
"navigationBarBackgroundColor": "#29d3b4", |
|||
"navigationBarTextStyle": "white", |
|||
"enablePullDownRefresh": true |
|||
} |
|||
}, |
|||
{ |
|||
"path": "contract/contract_detail", |
|||
"style": { |
|||
"navigationBarTitleText": "合同详情", |
|||
"navigationStyle": "default", |
|||
"navigationBarBackgroundColor": "#29d3b4", |
|||
"navigationBarTextStyle": "white" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "contract/contract_sign", |
|||
"style": { |
|||
"navigationBarTitleText": "电子签名", |
|||
"navigationBarBackgroundColor": "#181A20", |
|||
"navigationBarTextStyle": "white", |
|||
"backgroundColor": "#181A20" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "profile/index", |
|||
"style": { |
|||
"navigationBarTitleText": "我的", |
|||
"navigationStyle": "custom", |
|||
"navigationBarBackgroundColor": "#181A20", |
|||
"navigationBarTextStyle": "white" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "profile/personal_info", |
|||
"style": { |
|||
"navigationBarTitleText": "个人资料", |
|||
"navigationStyle": "custom", |
|||
"navigationBarBackgroundColor": "#181A20", |
|||
"navigationBarTextStyle": "white" |
|||
} |
|||
} |
|||
] |
|||
} |
|||
], |
|||
"preloadRule": { |
|||
"pages/student/home/index": { |
|||
"network": "all", |
|||
"packages": ["student"] |
|||
}, |
|||
"pages/common/home/index": { |
|||
"network": "all", |
|||
"packages": ["market", "coach", "common"] |
|||
} |
|||
}, |
|||
"globalStyle": { |
|||
"navigationBarTextStyle": "black", |
|||
"navigationBarTitleText": "智慧教务", |
|||
"navigationBarBackgroundColor": "#F8F8F8", |
|||
"backgroundColor": "#F8F8F8" |
|||
}, |
|||
"tabBar": { |
|||
"color": "#7A7E83", |
|||
"selectedColor": "#3cc51f", |
|||
"borderStyle": "black", |
|||
"backgroundColor": "#ffffff", |
|||
"list": [ |
|||
{ |
|||
"pagePath": "pages/student/home/index", |
|||
"iconPath": "static/icon-img/home.png", |
|||
"selectedIconPath": "static/icon-img/home-active.png", |
|||
"text": "首页" |
|||
}, |
|||
{ |
|||
"pagePath": "pages-student/profile/index", |
|||
"iconPath": "static/icon-img/profile.png", |
|||
"selectedIconPath": "static/icon-img/profile-active.png", |
|||
"text": "我的" |
|||
} |
|||
] |
|||
}, |
|||
"condition": { |
|||
"current": 0, |
|||
"list": [] |
|||
} |
|||
} |
|||
@ -0,0 +1,501 @@ |
|||
<!--添加孩子页面--> |
|||
<template> |
|||
<view class="add_child_container"> |
|||
<!-- 自定义导航栏 --> |
|||
<view class="navbar_section"> |
|||
<view class="navbar_content"> |
|||
<view class="back_button" @click="goBack"> |
|||
<image src="/static/icon-img/back.png" class="back_icon"></image> |
|||
</view> |
|||
<view class="navbar_title">添加孩子</view> |
|||
<view class="navbar_placeholder"></view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 表单区域 --> |
|||
<view class="form_section"> |
|||
<view class="form_card"> |
|||
<view class="form_title">孩子基本信息</view> |
|||
|
|||
<!-- 头像选择 --> |
|||
<view class="form_item"> |
|||
<view class="item_label">头像</view> |
|||
<view class="avatar_selector" @click="selectAvatar"> |
|||
<image |
|||
:src="formData.headimg || '/static/default-avatar.png'" |
|||
class="avatar_preview" |
|||
mode="aspectFill" |
|||
></image> |
|||
<view class="avatar_text">点击选择头像</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 姓名输入 --> |
|||
<view class="form_item"> |
|||
<view class="item_label required">姓名</view> |
|||
<input |
|||
v-model="formData.name" |
|||
placeholder="请输入孩子姓名" |
|||
class="form_input" |
|||
maxlength="20" |
|||
/> |
|||
</view> |
|||
|
|||
<!-- 性别选择 --> |
|||
<view class="form_item"> |
|||
<view class="item_label required">性别</view> |
|||
<view class="gender_selector"> |
|||
<view |
|||
:class="['gender_option', formData.gender === '1' ? 'active' : '']" |
|||
@click="selectGender('1')" |
|||
> |
|||
<image src="/static/icon-img/male.png" class="gender_icon"></image> |
|||
<text>男孩</text> |
|||
</view> |
|||
<view |
|||
:class="['gender_option', formData.gender === '2' ? 'active' : '']" |
|||
@click="selectGender('2')" |
|||
> |
|||
<image src="/static/icon-img/female.png" class="gender_icon"></image> |
|||
<text>女孩</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 出生日期 --> |
|||
<view class="form_item"> |
|||
<view class="item_label required">出生日期</view> |
|||
<picker |
|||
mode="date" |
|||
:value="formData.birthday" |
|||
@change="onBirthdayChange" |
|||
class="date_picker" |
|||
> |
|||
<view class="picker_display"> |
|||
{{ formData.birthday || '请选择出生日期' }} |
|||
</view> |
|||
</picker> |
|||
</view> |
|||
|
|||
<!-- 紧急联系人 --> |
|||
<view class="form_item"> |
|||
<view class="item_label">紧急联系人</view> |
|||
<input |
|||
v-model="formData.emergency_contact" |
|||
placeholder="请输入紧急联系人姓名" |
|||
class="form_input" |
|||
maxlength="20" |
|||
/> |
|||
</view> |
|||
|
|||
<!-- 联系电话 --> |
|||
<view class="form_item"> |
|||
<view class="item_label">联系电话</view> |
|||
<input |
|||
v-model="formData.contact_phone" |
|||
placeholder="请输入联系电话" |
|||
class="form_input" |
|||
type="number" |
|||
maxlength="11" |
|||
/> |
|||
</view> |
|||
|
|||
<!-- 备注信息 --> |
|||
<view class="form_item"> |
|||
<view class="item_label">备注</view> |
|||
<textarea |
|||
v-model="formData.note" |
|||
placeholder="请输入备注信息（选填）" |
|||
class="form_textarea" |
|||
maxlength="500" |
|||
></textarea> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 提交按钮 --> |
|||
<view class="submit_section"> |
|||
<button |
|||
class="submit_button" |
|||
@click="submitForm" |
|||
:disabled="submitting" |
|||
> |
|||
{{ submitting ? '提交中...' : '添加孩子' }} |
|||
</button> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import apiRoute from '@/api/member.js' |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
formData: { |
|||
name: '', |
|||
gender: '1', // '1':男 '2':女 |
|||
birthday: '', |
|||
headimg: '', |
|||
emergency_contact: '', |
|||
contact_phone: '', |
|||
note: '' |
|||
}, |
|||
submitting: false, |
|||
uploadingAvatar: false |
|||
} |
|||
}, |
|||
methods: { |
|||
goBack() { |
|||
uni.navigateBack() |
|||
}, |
|||
|
|||
selectAvatar() { |
|||
uni.chooseImage({ |
|||
count: 1, |
|||
sizeType: ['original', 'compressed'], |
|||
sourceType: ['album', 'camera'], |
|||
success: (res) => { |
|||
const tempFilePath = res.tempFilePaths[0] |
|||
this.formData.headimg = tempFilePath |
|||
|
|||
// 这里可以上传图片到服务器 |
|||
this.uploadAvatar(tempFilePath) |
|||
}, |
|||
fail: (err) => { |
|||
console.error('选择图片失败:', err) |
|||
} |
|||
}) |
|||
}, |
|||
|
|||
async uploadAvatar(filePath) { |
|||
this.uploadingAvatar = true |
|||
uni.showLoading({ |
|||
title: '上传中...' |
|||
}) |
|||
|
|||
try { |
|||
// 调用头像上传API（暂时不需要student_id，因为是新增孩子） |
|||
const response = await apiRoute.uploadAvatarForAdd(filePath) |
|||
console.log('头像上传响应:', response) |
|||
|
|||
if (response.code === 1) { |
|||
// 更新表单中的头像字段 |
|||
this.formData.headimg = response.data.url |
|||
uni.showToast({ |
|||
title: '头像上传成功', |
|||
icon: 'success' |
|||
}) |
|||
} else { |
|||
throw new Error(response.msg || '上传失败') |
|||
} |
|||
} catch (error) { |
|||
console.error('头像上传失败:', error) |
|||
uni.showToast({ |
|||
title: error.message || '头像上传失败', |
|||
icon: 'none' |
|||
}) |
|||
// 恢复本地预览图片 |
|||
this.formData.headimg = filePath |
|||
} finally { |
|||
uni.hideLoading() |
|||
this.uploadingAvatar = false |
|||
} |
|||
}, |
|||
|
|||
selectGender(gender) { |
|||
this.formData.gender = gender |
|||
}, |
|||
|
|||
onBirthdayChange(e) { |
|||
this.formData.birthday = e.detail.value |
|||
}, |
|||
|
|||
validateForm() { |
|||
if (!this.formData.name.trim()) { |
|||
uni.showToast({ |
|||
title: '请输入孩子姓名', |
|||
icon: 'none' |
|||
}) |
|||
return false |
|||
} |
|||
|
|||
if (!this.formData.gender) { |
|||
uni.showToast({ |
|||
title: '请选择性别', |
|||
icon: 'none' |
|||
}) |
|||
return false |
|||
} |
|||
|
|||
if (!this.formData.birthday) { |
|||
uni.showToast({ |
|||
title: '请选择出生日期', |
|||
icon: 'none' |
|||
}) |
|||
return false |
|||
} |
|||
|
|||
// 手机号验证 |
|||
if (this.formData.contact_phone && !/^1[3-9]\d{9}$/.test(this.formData.contact_phone)) { |
|||
uni.showToast({ |
|||
title: '请输入正确的手机号', |
|||
icon: 'none' |
|||
}) |
|||
return false |
|||
} |
|||
|
|||
return true |
|||
}, |
|||
|
|||
async submitForm() { |
|||
if (!this.validateForm()) { |
|||
return |
|||
} |
|||
|
|||
this.submitting = true |
|||
|
|||
try { |
|||
console.log('提交表单数据:', this.formData) |
|||
|
|||
// 调用真实API |
|||
const response = await apiRoute.addChild(this.formData) |
|||
console.log('添加孩子API响应:', response) |
|||
|
|||
if (response.code === 1) { |
|||
uni.showToast({ |
|||
title: '添加成功', |
|||
icon: 'success' |
|||
}) |
|||
|
|||
// 延迟跳转，让用户看到成功提示 |
|||
setTimeout(() => { |
|||
uni.navigateBack() |
|||
}, 1500) |
|||
} else { |
|||
uni.showToast({ |
|||
title: response.msg || '添加失败', |
|||
icon: 'none' |
|||
}) |
|||
} |
|||
|
|||
} catch (error) { |
|||
console.error('添加孩子失败:', error) |
|||
uni.showToast({ |
|||
title: error.message || '添加失败', |
|||
icon: 'none' |
|||
}) |
|||
} finally { |
|||
this.submitting = false |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.add_child_container { |
|||
background: #f8f9fa; |
|||
min-height: 100vh; |
|||
} |
|||
|
|||
// 自定义导航栏 |
|||
.navbar_section { |
|||
background: linear-gradient(135deg, #29D3B4 0%, #1BA297 100%); |
|||
padding: 40rpx 32rpx 32rpx; |
|||
|
|||
// 小程序端适配状态栏 |
|||
// #ifdef MP-WEIXIN |
|||
padding-top: 80rpx; |
|||
// #endif |
|||
|
|||
.navbar_content { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
|
|||
.back_button { |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
|
|||
.back_icon { |
|||
width: 24rpx; |
|||
height: 24rpx; |
|||
} |
|||
} |
|||
|
|||
.navbar_title { |
|||
color: #fff; |
|||
font-size: 36rpx; |
|||
font-weight: 600; |
|||
} |
|||
|
|||
.navbar_placeholder { |
|||
width: 40rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 表单区域 |
|||
.form_section { |
|||
padding: 32rpx 20rpx; |
|||
|
|||
.form_card { |
|||
background: #fff; |
|||
border-radius: 16rpx; |
|||
padding: 32rpx; |
|||
|
|||
.form_title { |
|||
font-size: 32rpx; |
|||
font-weight: 600; |
|||
color: #333; |
|||
margin-bottom: 32rpx; |
|||
text-align: center; |
|||
} |
|||
|
|||
.form_item { |
|||
margin-bottom: 32rpx; |
|||
|
|||
.item_label { |
|||
font-size: 28rpx; |
|||
color: #333; |
|||
margin-bottom: 16rpx; |
|||
font-weight: 500; |
|||
|
|||
&.required::after { |
|||
content: '*'; |
|||
color: #ff4757; |
|||
margin-left: 4rpx; |
|||
} |
|||
} |
|||
|
|||
.form_input { |
|||
width: 100%; |
|||
padding: 24rpx; |
|||
background: #f8f9fa; |
|||
border-radius: 12rpx; |
|||
border: 1px solid #e9ecef; |
|||
font-size: 28rpx; |
|||
color: #333; |
|||
|
|||
&:focus { |
|||
border-color: #29d3b4; |
|||
} |
|||
} |
|||
|
|||
.form_textarea { |
|||
width: 100%; |
|||
min-height: 120rpx; |
|||
padding: 24rpx; |
|||
background: #f8f9fa; |
|||
border-radius: 12rpx; |
|||
border: 1px solid #e9ecef; |
|||
font-size: 28rpx; |
|||
color: #333; |
|||
resize: none; |
|||
} |
|||
|
|||
// 头像选择器 |
|||
.avatar_selector { |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 24rpx; |
|||
padding: 24rpx; |
|||
background: #f8f9fa; |
|||
border-radius: 12rpx; |
|||
border: 1px solid #e9ecef; |
|||
|
|||
.avatar_preview { |
|||
width: 100rpx; |
|||
height: 100rpx; |
|||
border-radius: 50%; |
|||
border: 2px solid #29d3b4; |
|||
} |
|||
|
|||
.avatar_text { |
|||
font-size: 28rpx; |
|||
color: #666; |
|||
} |
|||
} |
|||
|
|||
// 性别选择器 |
|||
.gender_selector { |
|||
display: flex; |
|||
gap: 32rpx; |
|||
|
|||
.gender_option { |
|||
flex: 1; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
gap: 12rpx; |
|||
padding: 32rpx 20rpx; |
|||
background: #f8f9fa; |
|||
border-radius: 12rpx; |
|||
border: 2px solid #e9ecef; |
|||
|
|||
&.active { |
|||
border-color: #29d3b4; |
|||
background: rgba(41, 211, 180, 0.1); |
|||
|
|||
text { |
|||
color: #29d3b4; |
|||
font-weight: 600; |
|||
} |
|||
} |
|||
|
|||
.gender_icon { |
|||
width: 48rpx; |
|||
height: 48rpx; |
|||
} |
|||
|
|||
text { |
|||
font-size: 26rpx; |
|||
color: #666; |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 日期选择器 |
|||
.date_picker { |
|||
.picker_display { |
|||
width: 100%; |
|||
padding: 24rpx; |
|||
background: #f8f9fa; |
|||
border-radius: 12rpx; |
|||
border: 1px solid #e9ecef; |
|||
font-size: 28rpx; |
|||
color: #333; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 提交按钮 |
|||
.submit_section { |
|||
padding: 32rpx 20rpx 60rpx; |
|||
|
|||
.submit_button { |
|||
width: 100%; |
|||
background: linear-gradient(135deg, #29D3B4 0%, #1BA297 100%); |
|||
color: #fff; |
|||
border: none; |
|||
border-radius: 16rpx; |
|||
padding: 28rpx 0; |
|||
font-size: 32rpx; |
|||
font-weight: 600; |
|||
|
|||
&:disabled { |
|||
opacity: 0.6; |
|||
} |
|||
|
|||
&:active:not(:disabled) { |
|||
opacity: 0.8; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,988 @@ |
|||
<!--学员合同管理页面--> |
|||
<template> |
|||
<view class="main_box"> |
|||
<!-- 自定义导航栏 --> |
|||
<view class="navbar_section"> |
|||
<view class="navbar_back" @click="goBack"> |
|||
<text class="back_icon">‹</text> |
|||
</view> |
|||
<view class="navbar_title">合同管理</view> |
|||
<view class="navbar_action"></view> |
|||
</view> |
|||
|
|||
<!-- 学员信息 --> |
|||
<view class="student_info_section" v-if="studentInfo"> |
|||
<view class="student_name">{{ studentInfo.name }}</view> |
|||
<view class="contract_stats"> |
|||
<text class="stat_item">有效合同：{{ contractStats.active_contracts }}个</text> |
|||
<text class="stat_item">剩余课时：{{ contractStats.remaining_hours }}节</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 合同状态筛选 --> |
|||
<view class="filter_section"> |
|||
<view class="filter_tabs"> |
|||
<view |
|||
v-for="tab in statusTabs" |
|||
:key="tab.value" |
|||
:class="['filter_tab', activeStatus === tab.value ? 'active' : '']" |
|||
@click="changeStatus(tab.value)" |
|||
> |
|||
{{ tab.text }} |
|||
<view class="tab_badge" v-if="tab.count > 0">{{ tab.count }}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 合同列表 --> |
|||
<view class="contracts_section"> |
|||
<view v-if="loading" class="loading_section"> |
|||
<view class="loading_text">加载中...</view> |
|||
</view> |
|||
|
|||
<view v-else-if="filteredContracts.length === 0" class="empty_section"> |
|||
<view class="empty_icon">📋</view> |
|||
<view class="empty_text">暂无合同</view> |
|||
<view class="empty_hint">签署合同后会在这里显示</view> |
|||
</view> |
|||
|
|||
<view v-else class="contracts_list"> |
|||
<view |
|||
v-for="contract in filteredContracts" |
|||
:key="contract.id" |
|||
class="contract_item" |
|||
@click="viewContractDetail(contract)" |
|||
> |
|||
<view class="contract_header"> |
|||
<view class="contract_info"> |
|||
<view class="contract_name">{{ contract.contract_name }}</view> |
|||
<view class="contract_number">合同编号：{{ contract.contract_no }}</view> |
|||
</view> |
|||
<view class="contract_status" :class="contract.status"> |
|||
{{ getStatusText(contract.status) }} |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="contract_content"> |
|||
<view class="contract_details"> |
|||
<view class="detail_row"> |
|||
<text class="detail_label">课程类型：</text> |
|||
<text class="detail_value">{{ contract.course_type }}</text> |
|||
</view> |
|||
<view class="detail_row"> |
|||
<text class="detail_label">总课时：</text> |
|||
<text class="detail_value">{{ contract.total_hours }}节</text> |
|||
</view> |
|||
<view class="detail_row"> |
|||
<text class="detail_label">剩余课时：</text> |
|||
<text class="detail_value remaining">{{ contract.remaining_hours }}节</text> |
|||
</view> |
|||
<view class="detail_row"> |
|||
<text class="detail_label">合同金额：</text> |
|||
<text class="detail_value amount">¥{{ contract.total_amount }}</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="contract_dates"> |
|||
<view class="date_row"> |
|||
<text class="date_label">签署日期：</text> |
|||
<text class="date_value">{{ formatDate(contract.sign_date) }}</text> |
|||
</view> |
|||
<view class="date_row"> |
|||
<text class="date_label">生效日期：</text> |
|||
<text class="date_value">{{ formatDate(contract.start_date) }}</text> |
|||
</view> |
|||
<view class="date_row"> |
|||
<text class="date_label">到期日期：</text> |
|||
<text class="date_value">{{ formatDate(contract.end_date) }}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="contract_progress" v-if="contract.status === 'active'"> |
|||
<view class="progress_info"> |
|||
<text class="progress_text">课时使用进度</text> |
|||
<text class="progress_percent">{{ getProgressPercent(contract) }}%</text> |
|||
</view> |
|||
<view class="progress_bar"> |
|||
<view class="progress_fill" :style="{ width: getProgressPercent(contract) + '%' }"></view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="contract_actions"> |
|||
<fui-button |
|||
v-if="contract.status === 'active'" |
|||
background="transparent" |
|||
color="#29d3b4" |
|||
size="small" |
|||
@click.stop="viewContractDetail(contract)" |
|||
> |
|||
查看详情 |
|||
</fui-button> |
|||
|
|||
<fui-button |
|||
v-if="contract.status === 'active' && contract.can_renew" |
|||
background="#29d3b4" |
|||
size="small" |
|||
@click.stop="renewContract(contract)" |
|||
> |
|||
续约 |
|||
</fui-button> |
|||
|
|||
<fui-button |
|||
v-if="contract.status === 'pending'" |
|||
background="#f39c12" |
|||
size="small" |
|||
@click.stop="signContract(contract)" |
|||
> |
|||
签署合同 |
|||
</fui-button> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 加载更多 --> |
|||
<view class="load_more_section" v-if="!loading && hasMore"> |
|||
<fui-button |
|||
background="transparent" |
|||
color="#666" |
|||
@click="loadMoreContracts" |
|||
:loading="loadingMore" |
|||
> |
|||
{{ loadingMore ? '加载中...' : '加载更多' }} |
|||
</fui-button> |
|||
</view> |
|||
|
|||
<!-- 合同详情弹窗 --> |
|||
<view class="contract_popup" v-if="showContractPopup" @click="closeContractPopup"> |
|||
<view class="popup_content" @click.stop> |
|||
<view class="popup_header"> |
|||
<view class="popup_title">合同详情</view> |
|||
<view class="popup_close" @click="closeContractPopup">×</view> |
|||
</view> |
|||
|
|||
<view class="popup_contract_detail" v-if="selectedContract"> |
|||
<view class="detail_section"> |
|||
<view class="section_title">基本信息</view> |
|||
<view class="info_grid"> |
|||
<view class="info_row"> |
|||
<text class="info_label">合同名称：</text> |
|||
<text class="info_value">{{ selectedContract.contract_name }}</text> |
|||
</view> |
|||
<view class="info_row"> |
|||
<text class="info_label">合同编号：</text> |
|||
<text class="info_value">{{ selectedContract.contract_no }}</text> |
|||
</view> |
|||
<view class="info_row"> |
|||
<text class="info_label">课程类型：</text> |
|||
<text class="info_value">{{ selectedContract.course_type }}</text> |
|||
</view> |
|||
<view class="info_row"> |
|||
<text class="info_label">总课时：</text> |
|||
<text class="info_value">{{ selectedContract.total_hours }}节</text> |
|||
</view> |
|||
<view class="info_row"> |
|||
<text class="info_label">剩余课时：</text> |
|||
<text class="info_value">{{ selectedContract.remaining_hours }}节</text> |
|||
</view> |
|||
<view class="info_row"> |
|||
<text class="info_label">合同金额：</text> |
|||
<text class="info_value">¥{{ selectedContract.total_amount }}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="detail_section"> |
|||
<view class="section_title">时间信息</view> |
|||
<view class="info_grid"> |
|||
<view class="info_row"> |
|||
<text class="info_label">签署日期：</text> |
|||
<text class="info_value">{{ formatFullDate(selectedContract.sign_date) }}</text> |
|||
</view> |
|||
<view class="info_row"> |
|||
<text class="info_label">生效日期：</text> |
|||
<text class="info_value">{{ formatFullDate(selectedContract.start_date) }}</text> |
|||
</view> |
|||
<view class="info_row"> |
|||
<text class="info_label">到期日期：</text> |
|||
<text class="info_value">{{ formatFullDate(selectedContract.end_date) }}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="detail_section" v-if="selectedContract.terms"> |
|||
<view class="section_title">合同条款</view> |
|||
<view class="contract_terms">{{ selectedContract.terms }}</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="popup_actions"> |
|||
<fui-button |
|||
v-if="selectedContract && selectedContract.contract_file_url" |
|||
background="#3498db" |
|||
@click="downloadContract" |
|||
> |
|||
下载合同 |
|||
</fui-button> |
|||
|
|||
<fui-button |
|||
background="#f8f9fa" |
|||
color="#666" |
|||
@click="closeContractPopup" |
|||
> |
|||
关闭 |
|||
</fui-button> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import apiRoute from '@/api/apiRoute.js' |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
studentId: 0, |
|||
studentInfo: {}, |
|||
contractsList: [], |
|||
filteredContracts: [], |
|||
contractStats: {}, |
|||
loading: false, |
|||
loadingMore: false, |
|||
hasMore: true, |
|||
currentPage: 1, |
|||
activeStatus: 'all', |
|||
showContractPopup: false, |
|||
selectedContract: null, |
|||
statusTabs: [ |
|||
{ value: 'all', text: '全部', count: 0 }, |
|||
{ value: 'active', text: '生效中', count: 0 }, |
|||
{ value: 'pending', text: '待签署', count: 0 }, |
|||
{ value: 'expired', text: '已到期', count: 0 }, |
|||
{ value: 'terminated', text: '已终止', count: 0 } |
|||
] |
|||
} |
|||
}, |
|||
|
|||
onLoad(options) { |
|||
this.studentId = parseInt(options.student_id) || 0 |
|||
if (this.studentId) { |
|||
this.initPage() |
|||
} else { |
|||
uni.showToast({ |
|||
title: '参数错误', |
|||
icon: 'none' |
|||
}) |
|||
} |
|||
}, |
|||
|
|||
methods: { |
|||
goBack() { |
|||
uni.navigateBack() |
|||
}, |
|||
|
|||
async initPage() { |
|||
await this.loadStudentInfo() |
|||
await this.loadContracts() |
|||
this.updateStatusCounts() |
|||
}, |
|||
|
|||
async loadStudentInfo() { |
|||
try { |
|||
// 模拟获取学员信息 |
|||
const mockStudentInfo = { |
|||
id: this.studentId, |
|||
name: '小明' |
|||
} |
|||
this.studentInfo = mockStudentInfo |
|||
} catch (error) { |
|||
console.error('获取学员信息失败:', error) |
|||
} |
|||
}, |
|||
|
|||
async loadContracts() { |
|||
this.loading = true |
|||
try { |
|||
console.log('加载合同列表:', this.studentId) |
|||
|
|||
// 模拟API调用 |
|||
// const response = await apiRoute.getStudentContracts({ |
|||
// student_id: this.studentId, |
|||
// page: this.currentPage, |
|||
// limit: 10 |
|||
// }) |
|||
|
|||
// 使用模拟数据 |
|||
const mockResponse = { |
|||
code: 1, |
|||
data: { |
|||
list: [ |
|||
{ |
|||
id: 1, |
|||
contract_no: 'HT202401150001', |
|||
contract_name: '少儿体适能训练合同', |
|||
course_type: '少儿体适能', |
|||
total_hours: 48, |
|||
remaining_hours: 32, |
|||
used_hours: 16, |
|||
total_amount: '4800.00', |
|||
status: 'active', |
|||
sign_date: '2024-01-15', |
|||
start_date: '2024-01-20', |
|||
end_date: '2024-07-20', |
|||
can_renew: true, |
|||
contract_file_url: '/uploads/contracts/contract_001.pdf', |
|||
terms: '1. 本合同自签署之日起生效\n2. 学员应按时参加课程\n3. 如需请假，请提前24小时通知\n4. 课程有效期为6个月\n5. 未使用完的课时可申请延期' |
|||
}, |
|||
{ |
|||
id: 2, |
|||
contract_no: 'HT202312100002', |
|||
contract_name: '基础体能训练合同', |
|||
course_type: '基础体能', |
|||
total_hours: 24, |
|||
remaining_hours: 0, |
|||
used_hours: 24, |
|||
total_amount: '2400.00', |
|||
status: 'expired', |
|||
sign_date: '2023-12-10', |
|||
start_date: '2023-12-15', |
|||
end_date: '2024-01-15', |
|||
can_renew: false, |
|||
contract_file_url: '/uploads/contracts/contract_002.pdf', |
|||
terms: '已到期的合同条款...' |
|||
}, |
|||
{ |
|||
id: 3, |
|||
contract_no: 'HT202401200003', |
|||
contract_name: '专项技能训练合同', |
|||
course_type: '专项技能', |
|||
total_hours: 36, |
|||
remaining_hours: 36, |
|||
used_hours: 0, |
|||
total_amount: '3600.00', |
|||
status: 'pending', |
|||
sign_date: null, |
|||
start_date: '2024-02-01', |
|||
end_date: '2024-08-01', |
|||
can_renew: false, |
|||
contract_file_url: '/uploads/contracts/contract_003.pdf', |
|||
terms: '待签署的合同条款...' |
|||
} |
|||
], |
|||
total: 3, |
|||
has_more: false, |
|||
stats: { |
|||
active_contracts: 1, |
|||
remaining_hours: 32, |
|||
total_amount: '4800.00' |
|||
} |
|||
} |
|||
} |
|||
|
|||
if (mockResponse.code === 1) { |
|||
const newList = mockResponse.data.list || [] |
|||
if (this.currentPage === 1) { |
|||
this.contractsList = newList |
|||
} else { |
|||
this.contractsList = [...this.contractsList, ...newList] |
|||
} |
|||
|
|||
this.hasMore = mockResponse.data.has_more || false |
|||
this.contractStats = mockResponse.data.stats || {} |
|||
this.applyStatusFilter() |
|||
console.log('合同数据加载成功:', this.contractsList) |
|||
} else { |
|||
uni.showToast({ |
|||
title: mockResponse.msg || '获取合同列表失败', |
|||
icon: 'none' |
|||
}) |
|||
} |
|||
} catch (error) { |
|||
console.error('获取合同列表失败:', error) |
|||
uni.showToast({ |
|||
title: '获取合同列表失败', |
|||
icon: 'none' |
|||
}) |
|||
} finally { |
|||
this.loading = false |
|||
this.loadingMore = false |
|||
} |
|||
}, |
|||
|
|||
async loadMoreContracts() { |
|||
if (this.loadingMore || !this.hasMore) return |
|||
|
|||
this.loadingMore = true |
|||
this.currentPage++ |
|||
await this.loadContracts() |
|||
}, |
|||
|
|||
changeStatus(status) { |
|||
this.activeStatus = status |
|||
this.applyStatusFilter() |
|||
}, |
|||
|
|||
applyStatusFilter() { |
|||
if (this.activeStatus === 'all') { |
|||
this.filteredContracts = [...this.contractsList] |
|||
} else { |
|||
this.filteredContracts = this.contractsList.filter(contract => contract.status === this.activeStatus) |
|||
} |
|||
}, |
|||
|
|||
updateStatusCounts() { |
|||
const counts = {} |
|||
this.contractsList.forEach(contract => { |
|||
counts[contract.status] = (counts[contract.status] || 0) + 1 |
|||
}) |
|||
|
|||
this.statusTabs.forEach(tab => { |
|||
if (tab.value === 'all') { |
|||
tab.count = this.contractsList.length |
|||
} else { |
|||
tab.count = counts[tab.value] || 0 |
|||
} |
|||
}) |
|||
}, |
|||
|
|||
getStatusText(status) { |
|||
const statusMap = { |
|||
'active': '生效中', |
|||
'pending': '待签署', |
|||
'expired': '已到期', |
|||
'terminated': '已终止' |
|||
} |
|||
return statusMap[status] || status |
|||
}, |
|||
|
|||
getProgressPercent(contract) { |
|||
if (contract.total_hours === 0) return 0 |
|||
return Math.round((contract.used_hours / contract.total_hours) * 100) |
|||
}, |
|||
|
|||
formatDate(dateString) { |
|||
if (!dateString) return '未设置' |
|||
const date = new Date(dateString) |
|||
const month = String(date.getMonth() + 1).padStart(2, '0') |
|||
const day = String(date.getDate()).padStart(2, '0') |
|||
return `${month}-${day}` |
|||
}, |
|||
|
|||
formatFullDate(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}` |
|||
}, |
|||
|
|||
viewContractDetail(contract) { |
|||
this.selectedContract = contract |
|||
this.showContractPopup = true |
|||
}, |
|||
|
|||
closeContractPopup() { |
|||
this.showContractPopup = false |
|||
this.selectedContract = null |
|||
}, |
|||
|
|||
async renewContract(contract) { |
|||
uni.showModal({ |
|||
title: '确认续约', |
|||
content: '确定要续约此合同吗？', |
|||
success: async (res) => { |
|||
if (res.confirm) { |
|||
try { |
|||
console.log('续约合同:', contract.id) |
|||
|
|||
// 模拟API调用 |
|||
await new Promise(resolve => setTimeout(resolve, 1000)) |
|||
const mockResponse = { code: 1, message: '续约申请已提交' } |
|||
|
|||
if (mockResponse.code === 1) { |
|||
uni.showToast({ |
|||
title: '续约申请已提交', |
|||
icon: 'success' |
|||
}) |
|||
} else { |
|||
uni.showToast({ |
|||
title: mockResponse.message || '续约申请失败', |
|||
icon: 'none' |
|||
}) |
|||
} |
|||
} catch (error) { |
|||
console.error('续约申请失败:', error) |
|||
uni.showToast({ |
|||
title: '续约申请失败', |
|||
icon: 'none' |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
}) |
|||
}, |
|||
|
|||
async signContract(contract) { |
|||
uni.showModal({ |
|||
title: '确认签署', |
|||
content: '确定要签署此合同吗？', |
|||
success: async (res) => { |
|||
if (res.confirm) { |
|||
try { |
|||
console.log('签署合同:', contract.id) |
|||
|
|||
// 模拟API调用 |
|||
await new Promise(resolve => setTimeout(resolve, 1500)) |
|||
const mockResponse = { code: 1, message: '合同签署成功' } |
|||
|
|||
if (mockResponse.code === 1) { |
|||
uni.showToast({ |
|||
title: '合同签署成功', |
|||
icon: 'success' |
|||
}) |
|||
|
|||
// 更新合同状态 |
|||
const contractIndex = this.contractsList.findIndex(c => c.id === contract.id) |
|||
if (contractIndex !== -1) { |
|||
this.contractsList[contractIndex].status = 'active' |
|||
this.contractsList[contractIndex].sign_date = new Date().toISOString().split('T')[0] |
|||
} |
|||
|
|||
this.applyStatusFilter() |
|||
this.updateStatusCounts() |
|||
} else { |
|||
uni.showToast({ |
|||
title: mockResponse.message || '合同签署失败', |
|||
icon: 'none' |
|||
}) |
|||
} |
|||
} catch (error) { |
|||
console.error('合同签署失败:', error) |
|||
uni.showToast({ |
|||
title: '合同签署失败', |
|||
icon: 'none' |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
}) |
|||
}, |
|||
|
|||
downloadContract() { |
|||
if (!this.selectedContract || !this.selectedContract.contract_file_url) { |
|||
uni.showToast({ |
|||
title: '合同文件不存在', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
|
|||
uni.showModal({ |
|||
title: '提示', |
|||
content: '合同下载功能开发中', |
|||
showCancel: false |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.main_box { |
|||
background: #f8f9fa; |
|||
min-height: 100vh; |
|||
} |
|||
|
|||
// 自定义导航栏 |
|||
.navbar_section { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
background: #29D3B4; |
|||
padding: 40rpx 32rpx 20rpx; |
|||
|
|||
// 小程序端适配状态栏 |
|||
// #ifdef MP-WEIXIN |
|||
padding-top: 80rpx; |
|||
// #endif |
|||
|
|||
.navbar_back { |
|||
width: 60rpx; |
|||
|
|||
.back_icon { |
|||
color: #fff; |
|||
font-size: 40rpx; |
|||
font-weight: 600; |
|||
} |
|||
} |
|||
|
|||
.navbar_title { |
|||
color: #fff; |
|||
font-size: 32rpx; |
|||
font-weight: 600; |
|||
} |
|||
|
|||
.navbar_action { |
|||
width: 60rpx; |
|||
} |
|||
} |
|||
|
|||
// 学员信息 |
|||
.student_info_section { |
|||
background: #fff; |
|||
padding: 24rpx 32rpx; |
|||
border-bottom: 1px solid #f0f0f0; |
|||
|
|||
.student_name { |
|||
font-size: 32rpx; |
|||
font-weight: 600; |
|||
color: #333; |
|||
margin-bottom: 12rpx; |
|||
} |
|||
|
|||
.contract_stats { |
|||
display: flex; |
|||
gap: 24rpx; |
|||
|
|||
.stat_item { |
|||
font-size: 24rpx; |
|||
color: #666; |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 状态筛选 |
|||
.filter_section { |
|||
background: #fff; |
|||
margin: 20rpx; |
|||
border-radius: 16rpx; |
|||
padding: 24rpx 32rpx; |
|||
|
|||
.filter_tabs { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
gap: 12rpx; |
|||
|
|||
.filter_tab { |
|||
position: relative; |
|||
padding: 10rpx 20rpx; |
|||
font-size: 24rpx; |
|||
color: #666; |
|||
background: #f8f9fa; |
|||
border-radius: 16rpx; |
|||
|
|||
&.active { |
|||
color: #fff; |
|||
background: #29D3B4; |
|||
} |
|||
|
|||
.tab_badge { |
|||
position: absolute; |
|||
top: -6rpx; |
|||
right: -6rpx; |
|||
background: #ff4757; |
|||
color: #fff; |
|||
font-size: 18rpx; |
|||
padding: 2rpx 6rpx; |
|||
border-radius: 10rpx; |
|||
min-width: 16rpx; |
|||
text-align: center; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 合同列表 |
|||
.contracts_section { |
|||
margin: 0 20rpx; |
|||
|
|||
.loading_section, .empty_section { |
|||
background: #fff; |
|||
border-radius: 16rpx; |
|||
padding: 80rpx 32rpx; |
|||
text-align: center; |
|||
|
|||
.loading_text, .empty_text { |
|||
font-size: 28rpx; |
|||
color: #666; |
|||
margin-bottom: 12rpx; |
|||
} |
|||
|
|||
.empty_icon { |
|||
font-size: 80rpx; |
|||
margin-bottom: 24rpx; |
|||
} |
|||
|
|||
.empty_hint { |
|||
font-size: 24rpx; |
|||
color: #999; |
|||
} |
|||
} |
|||
|
|||
.contracts_list { |
|||
.contract_item { |
|||
background: #fff; |
|||
border-radius: 16rpx; |
|||
padding: 24rpx; |
|||
margin-bottom: 20rpx; |
|||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08); |
|||
|
|||
.contract_header { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: flex-start; |
|||
margin-bottom: 20rpx; |
|||
|
|||
.contract_info { |
|||
flex: 1; |
|||
|
|||
.contract_name { |
|||
font-size: 28rpx; |
|||
font-weight: 600; |
|||
color: #333; |
|||
margin-bottom: 8rpx; |
|||
} |
|||
|
|||
.contract_number { |
|||
font-size: 24rpx; |
|||
color: #666; |
|||
} |
|||
} |
|||
|
|||
.contract_status { |
|||
font-size: 22rpx; |
|||
padding: 6rpx 12rpx; |
|||
border-radius: 12rpx; |
|||
|
|||
&.active { |
|||
color: #27ae60; |
|||
background: rgba(39, 174, 96, 0.1); |
|||
} |
|||
|
|||
&.pending { |
|||
color: #f39c12; |
|||
background: rgba(243, 156, 18, 0.1); |
|||
} |
|||
|
|||
&.expired { |
|||
color: #e74c3c; |
|||
background: rgba(231, 76, 60, 0.1); |
|||
} |
|||
|
|||
&.terminated { |
|||
color: #95a5a6; |
|||
background: rgba(149, 165, 166, 0.1); |
|||
} |
|||
} |
|||
} |
|||
|
|||
.contract_content { |
|||
display: flex; |
|||
gap: 32rpx; |
|||
margin-bottom: 20rpx; |
|||
|
|||
.contract_details { |
|||
flex: 1; |
|||
|
|||
.detail_row { |
|||
display: flex; |
|||
margin-bottom: 8rpx; |
|||
|
|||
.detail_label { |
|||
font-size: 24rpx; |
|||
color: #666; |
|||
min-width: 120rpx; |
|||
} |
|||
|
|||
.detail_value { |
|||
font-size: 24rpx; |
|||
color: #333; |
|||
|
|||
&.remaining { |
|||
color: #29D3B4; |
|||
font-weight: 600; |
|||
} |
|||
|
|||
&.amount { |
|||
color: #e74c3c; |
|||
font-weight: 600; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.contract_dates { |
|||
.date_row { |
|||
display: flex; |
|||
margin-bottom: 8rpx; |
|||
|
|||
.date_label { |
|||
font-size: 22rpx; |
|||
color: #999; |
|||
min-width: 100rpx; |
|||
} |
|||
|
|||
.date_value { |
|||
font-size: 22rpx; |
|||
color: #666; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.contract_progress { |
|||
margin-bottom: 20rpx; |
|||
|
|||
.progress_info { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
margin-bottom: 8rpx; |
|||
|
|||
.progress_text { |
|||
font-size: 22rpx; |
|||
color: #666; |
|||
} |
|||
|
|||
.progress_percent { |
|||
font-size: 22rpx; |
|||
color: #29D3B4; |
|||
font-weight: 600; |
|||
} |
|||
} |
|||
|
|||
.progress_bar { |
|||
height: 8rpx; |
|||
background: #f0f0f0; |
|||
border-radius: 4rpx; |
|||
overflow: hidden; |
|||
|
|||
.progress_fill { |
|||
height: 100%; |
|||
background: linear-gradient(90deg, #29D3B4, #26c6a0); |
|||
border-radius: 4rpx; |
|||
transition: width 0.3s ease; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.contract_actions { |
|||
display: flex; |
|||
gap: 16rpx; |
|||
justify-content: flex-end; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 加载更多 |
|||
.load_more_section { |
|||
padding: 40rpx 20rpx 80rpx; |
|||
} |
|||
|
|||
// 合同详情弹窗 |
|||
.contract_popup { |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
background: rgba(0, 0, 0, 0.5); |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
z-index: 1000; |
|||
|
|||
.popup_content { |
|||
background: #fff; |
|||
border-radius: 16rpx; |
|||
width: 90%; |
|||
max-height: 80vh; |
|||
overflow: hidden; |
|||
|
|||
.popup_header { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding: 32rpx; |
|||
border-bottom: 1px solid #f0f0f0; |
|||
|
|||
.popup_title { |
|||
font-size: 32rpx; |
|||
font-weight: 600; |
|||
color: #333; |
|||
} |
|||
|
|||
.popup_close { |
|||
font-size: 48rpx; |
|||
color: #999; |
|||
font-weight: 300; |
|||
} |
|||
} |
|||
|
|||
.popup_contract_detail { |
|||
padding: 32rpx; |
|||
max-height: 60vh; |
|||
overflow-y: auto; |
|||
|
|||
.detail_section { |
|||
margin-bottom: 32rpx; |
|||
|
|||
&:last-child { |
|||
margin-bottom: 0; |
|||
} |
|||
|
|||
.section_title { |
|||
font-size: 28rpx; |
|||
font-weight: 600; |
|||
color: #333; |
|||
margin-bottom: 16rpx; |
|||
padding-bottom: 8rpx; |
|||
border-bottom: 2rpx solid #29D3B4; |
|||
} |
|||
|
|||
.info_grid { |
|||
.info_row { |
|||
display: flex; |
|||
margin-bottom: 12rpx; |
|||
|
|||
.info_label { |
|||
font-size: 26rpx; |
|||
color: #666; |
|||
min-width: 120rpx; |
|||
} |
|||
|
|||
.info_value { |
|||
font-size: 26rpx; |
|||
color: #333; |
|||
flex: 1; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.contract_terms { |
|||
font-size: 24rpx; |
|||
color: #666; |
|||
line-height: 1.6; |
|||
white-space: pre-line; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.popup_actions { |
|||
padding: 24rpx 32rpx; |
|||
display: flex; |
|||
gap: 16rpx; |
|||
border-top: 1px solid #f0f0f0; |
|||
|
|||
fui-button { |
|||
flex: 1; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
File diff suppressed because it is too large
File diff suppressed because it is too large
@ -0,0 +1,887 @@ |
|||
<!--学员消息管理页面--> |
|||
<template> |
|||
<view class="main_box"> |
|||
<!-- 自定义导航栏 --> |
|||
<view class="navbar_section"> |
|||
<view class="navbar_back" @click="goBack"> |
|||
<text class="back_icon">‹</text> |
|||
</view> |
|||
<view class="navbar_title">消息管理</view> |
|||
<view class="navbar_action"> |
|||
<view class="mark_all_read" @click="markAllAsRead" v-if="unreadCount > 0"> |
|||
<text class="mark_text">全部已读</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 学员信息 --> |
|||
<view class="student_info_section" v-if="studentInfo"> |
|||
<view class="student_name">{{ studentInfo.name }}</view> |
|||
<view class="message_stats"> |
|||
<text class="stat_item">未读消息：{{ unreadCount }}条</text> |
|||
<text class="stat_item">总消息：{{ messagesList.length }}条</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 消息类型筛选 --> |
|||
<view class="filter_section"> |
|||
<view class="filter_tabs"> |
|||
<view |
|||
v-for="tab in typeTabs" |
|||
:key="tab.value" |
|||
:class="['filter_tab', activeType === tab.value ? 'active' : '']" |
|||
@click="changeType(tab.value)" |
|||
> |
|||
{{ tab.text }} |
|||
<view class="tab_badge" v-if="tab.count > 0">{{ tab.count }}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 消息列表 --> |
|||
<view class="messages_section"> |
|||
<view v-if="loading" class="loading_section"> |
|||
<view class="loading_text">加载中...</view> |
|||
</view> |
|||
|
|||
<view v-else-if="filteredMessages.length === 0" class="empty_section"> |
|||
<view class="empty_icon">💬</view> |
|||
<view class="empty_text">暂无消息</view> |
|||
<view class="empty_hint">新消息会在这里显示</view> |
|||
</view> |
|||
|
|||
<view v-else class="messages_list"> |
|||
<view |
|||
v-for="message in filteredMessages" |
|||
:key="message.id" |
|||
:class="['message_item', !message.is_read ? 'unread' : '']" |
|||
@click="viewMessage(message)" |
|||
> |
|||
<view class="message_header"> |
|||
<view class="message_type" :class="message.type"> |
|||
{{ getTypeText(message.type) }} |
|||
</view> |
|||
<view class="message_time">{{ formatTime(message.send_time) }}</view> |
|||
<view class="unread_dot" v-if="!message.is_read"></view> |
|||
</view> |
|||
|
|||
<view class="message_content"> |
|||
<view class="message_title">{{ message.title }}</view> |
|||
<view class="message_preview">{{ message.content | truncate(50) }}</view> |
|||
</view> |
|||
|
|||
<view class="message_meta" v-if="message.sender_name"> |
|||
<text class="sender_name">来自：{{ message.sender_name }}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 加载更多 --> |
|||
<view class="load_more_section" v-if="!loading && hasMore"> |
|||
<fui-button |
|||
background="transparent" |
|||
color="#666" |
|||
@click="loadMoreMessages" |
|||
:loading="loadingMore" |
|||
> |
|||
{{ loadingMore ? '加载中...' : '加载更多' }} |
|||
</fui-button> |
|||
</view> |
|||
|
|||
<!-- 消息详情弹窗 --> |
|||
<view class="message_popup" v-if="showMessagePopup" @click="closeMessagePopup"> |
|||
<view class="popup_content" @click.stop> |
|||
<view class="popup_header"> |
|||
<view class="popup_title">消息详情</view> |
|||
<view class="popup_close" @click="closeMessagePopup">×</view> |
|||
</view> |
|||
|
|||
<view class="popup_message_detail" v-if="selectedMessage"> |
|||
<view class="detail_header"> |
|||
<view class="detail_type" :class="selectedMessage.type"> |
|||
{{ getTypeText(selectedMessage.type) }} |
|||
</view> |
|||
<view class="detail_time">{{ formatFullTime(selectedMessage.send_time) }}</view> |
|||
</view> |
|||
|
|||
<view class="detail_title">{{ selectedMessage.title }}</view> |
|||
|
|||
<view class="detail_content">{{ selectedMessage.content }}</view> |
|||
|
|||
<view class="detail_sender" v-if="selectedMessage.sender_name"> |
|||
<text class="sender_label">发送人：</text> |
|||
<text class="sender_value">{{ selectedMessage.sender_name }}</text> |
|||
</view> |
|||
|
|||
<view class="detail_attachment" v-if="selectedMessage.attachment_url"> |
|||
<fui-button |
|||
background="#29d3b4" |
|||
size="small" |
|||
@click="viewAttachment(selectedMessage.attachment_url)" |
|||
> |
|||
查看附件 |
|||
</fui-button> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="popup_actions"> |
|||
<fui-button |
|||
v-if="selectedMessage && selectedMessage.type === 'homework'" |
|||
background="#f39c12" |
|||
@click="submitHomework" |
|||
> |
|||
提交作业 |
|||
</fui-button> |
|||
|
|||
<fui-button |
|||
v-if="selectedMessage && selectedMessage.type === 'notification'" |
|||
background="#29d3b4" |
|||
@click="confirmNotification" |
|||
> |
|||
确认已读 |
|||
</fui-button> |
|||
|
|||
<fui-button |
|||
background="#f8f9fa" |
|||
color="#666" |
|||
@click="closeMessagePopup" |
|||
> |
|||
关闭 |
|||
</fui-button> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import apiRoute from '@/api/apiRoute.js' |
|||
|
|||
export default { |
|||
filters: { |
|||
truncate(text, length) { |
|||
if (!text) return '' |
|||
if (text.length <= length) return text |
|||
return text.substring(0, length) + '...' |
|||
} |
|||
}, |
|||
|
|||
data() { |
|||
return { |
|||
studentId: 0, |
|||
studentInfo: {}, |
|||
messagesList: [], |
|||
filteredMessages: [], |
|||
loading: false, |
|||
loadingMore: false, |
|||
hasMore: true, |
|||
currentPage: 1, |
|||
activeType: 'all', |
|||
showMessagePopup: false, |
|||
selectedMessage: null, |
|||
typeTabs: [ |
|||
{ value: 'all', text: '全部', count: 0 }, |
|||
{ value: 'system', text: '系统消息', count: 0 }, |
|||
{ value: 'notification', text: '通知公告', count: 0 }, |
|||
{ value: 'homework', text: '作业任务', count: 0 }, |
|||
{ value: 'feedback', text: '反馈评价', count: 0 }, |
|||
{ value: 'reminder', text: '课程提醒', count: 0 } |
|||
] |
|||
} |
|||
}, |
|||
|
|||
computed: { |
|||
unreadCount() { |
|||
return this.messagesList.filter(msg => !msg.is_read).length |
|||
} |
|||
}, |
|||
|
|||
onLoad(options) { |
|||
this.studentId = parseInt(options.student_id) || 0 |
|||
if (this.studentId) { |
|||
this.initPage() |
|||
} else { |
|||
uni.showToast({ |
|||
title: '参数错误', |
|||
icon: 'none' |
|||
}) |
|||
} |
|||
}, |
|||
|
|||
methods: { |
|||
goBack() { |
|||
uni.navigateBack() |
|||
}, |
|||
|
|||
async initPage() { |
|||
await this.loadStudentInfo() |
|||
await this.loadMessages() |
|||
this.updateTypeCounts() |
|||
}, |
|||
|
|||
async loadStudentInfo() { |
|||
try { |
|||
// 模拟获取学员信息 |
|||
const mockStudentInfo = { |
|||
id: this.studentId, |
|||
name: '小明' |
|||
} |
|||
this.studentInfo = mockStudentInfo |
|||
} catch (error) { |
|||
console.error('获取学员信息失败:', error) |
|||
} |
|||
}, |
|||
|
|||
async loadMessages() { |
|||
this.loading = true |
|||
try { |
|||
console.log('加载消息列表:', this.studentId) |
|||
|
|||
// 模拟API调用 |
|||
// const response = await apiRoute.getStudentMessages({ |
|||
// student_id: this.studentId, |
|||
// page: this.currentPage, |
|||
// limit: 10 |
|||
// }) |
|||
|
|||
// 使用模拟数据 |
|||
const mockResponse = { |
|||
code: 1, |
|||
data: { |
|||
list: [ |
|||
{ |
|||
id: 1, |
|||
type: 'system', |
|||
title: '欢迎加入运动识堂', |
|||
content: '欢迎您的孩子加入我们的运动训练课程！我们将为您的孩子提供专业的体能训练指导，帮助孩子健康成长。课程安排和相关信息会及时通过消息推送给您，请注意查收。', |
|||
sender_name: '系统管理员', |
|||
send_time: '2024-01-15 09:00:00', |
|||
is_read: false, |
|||
attachment_url: '' |
|||
}, |
|||
{ |
|||
id: 2, |
|||
type: 'notification', |
|||
title: '本周课程安排通知', |
|||
content: '本周课程安排已更新，请及时查看课程表。周三下午16:00-17:00的基础体能训练课程请准时参加，课程地点：训练馆A。如有疑问请联系教练。', |
|||
sender_name: '张教练', |
|||
send_time: '2024-01-14 15:30:00', |
|||
is_read: true, |
|||
attachment_url: '' |
|||
}, |
|||
{ |
|||
id: 3, |
|||
type: 'homework', |
|||
title: '体能训练作业', |
|||
content: '请完成以下体能训练作业：1. 每天跳绳100个 2. 俯卧撑10个 3. 仰卧起坐15个。请在下次课程前完成并提交训练视频。', |
|||
sender_name: '李教练', |
|||
send_time: '2024-01-13 18:20:00', |
|||
is_read: false, |
|||
attachment_url: '/uploads/homework/homework_guide.pdf' |
|||
}, |
|||
{ |
|||
id: 4, |
|||
type: 'feedback', |
|||
title: '上次课程反馈', |
|||
content: '您的孩子在上次的基础体能训练中表现优秀，动作标准，学习积极。建议继续加强核心力量训练，可以适当增加训练强度。', |
|||
sender_name: '王教练', |
|||
send_time: '2024-01-12 20:15:00', |
|||
is_read: true, |
|||
attachment_url: '' |
|||
}, |
|||
{ |
|||
id: 5, |
|||
type: 'reminder', |
|||
title: '明日课程提醒', |
|||
content: '提醒您的孩子明天下午14:00有专项技能训练课程，请准时到达训练馆B。建议提前10分钟到场进行热身准备。', |
|||
sender_name: '系统提醒', |
|||
send_time: '2024-01-11 19:00:00', |
|||
is_read: true, |
|||
attachment_url: '' |
|||
} |
|||
], |
|||
total: 5, |
|||
has_more: false |
|||
} |
|||
} |
|||
|
|||
if (mockResponse.code === 1) { |
|||
const newList = mockResponse.data.list || [] |
|||
if (this.currentPage === 1) { |
|||
this.messagesList = newList |
|||
} else { |
|||
this.messagesList = [...this.messagesList, ...newList] |
|||
} |
|||
|
|||
this.hasMore = mockResponse.data.has_more || false |
|||
this.applyTypeFilter() |
|||
console.log('消息数据加载成功:', this.messagesList) |
|||
} else { |
|||
uni.showToast({ |
|||
title: mockResponse.msg || '获取消息列表失败', |
|||
icon: 'none' |
|||
}) |
|||
} |
|||
} catch (error) { |
|||
console.error('获取消息列表失败:', error) |
|||
uni.showToast({ |
|||
title: '获取消息列表失败', |
|||
icon: 'none' |
|||
}) |
|||
} finally { |
|||
this.loading = false |
|||
this.loadingMore = false |
|||
} |
|||
}, |
|||
|
|||
async loadMoreMessages() { |
|||
if (this.loadingMore || !this.hasMore) return |
|||
|
|||
this.loadingMore = true |
|||
this.currentPage++ |
|||
await this.loadMessages() |
|||
}, |
|||
|
|||
changeType(type) { |
|||
this.activeType = type |
|||
this.applyTypeFilter() |
|||
}, |
|||
|
|||
applyTypeFilter() { |
|||
if (this.activeType === 'all') { |
|||
this.filteredMessages = [...this.messagesList] |
|||
} else { |
|||
this.filteredMessages = this.messagesList.filter(message => message.type === this.activeType) |
|||
} |
|||
}, |
|||
|
|||
updateTypeCounts() { |
|||
const counts = {} |
|||
this.messagesList.forEach(message => { |
|||
counts[message.type] = (counts[message.type] || 0) + 1 |
|||
}) |
|||
|
|||
this.typeTabs.forEach(tab => { |
|||
if (tab.value === 'all') { |
|||
tab.count = this.messagesList.length |
|||
} else { |
|||
tab.count = counts[tab.value] || 0 |
|||
} |
|||
}) |
|||
}, |
|||
|
|||
getTypeText(type) { |
|||
const typeMap = { |
|||
'system': '系统消息', |
|||
'notification': '通知公告', |
|||
'homework': '作业任务', |
|||
'feedback': '反馈评价', |
|||
'reminder': '课程提醒' |
|||
} |
|||
return typeMap[type] || type |
|||
}, |
|||
|
|||
formatTime(timeString) { |
|||
const now = new Date() |
|||
const msgTime = new Date(timeString) |
|||
const diffHours = (now - msgTime) / (1000 * 60 * 60) |
|||
|
|||
if (diffHours < 1) { |
|||
return '刚刚' |
|||
} else if (diffHours < 24) { |
|||
return Math.floor(diffHours) + '小时前' |
|||
} else if (diffHours < 48) { |
|||
return '昨天' |
|||
} else { |
|||
const month = String(msgTime.getMonth() + 1).padStart(2, '0') |
|||
const day = String(msgTime.getDate()).padStart(2, '0') |
|||
return `${month}-${day}` |
|||
} |
|||
}, |
|||
|
|||
formatFullTime(timeString) { |
|||
const date = new Date(timeString) |
|||
const year = date.getFullYear() |
|||
const month = String(date.getMonth() + 1).padStart(2, '0') |
|||
const day = String(date.getDate()).padStart(2, '0') |
|||
const hours = String(date.getHours()).padStart(2, '0') |
|||
const minutes = String(date.getMinutes()).padStart(2, '0') |
|||
return `${year}-${month}-${day} ${hours}:${minutes}` |
|||
}, |
|||
|
|||
viewMessage(message) { |
|||
this.selectedMessage = message |
|||
this.showMessagePopup = true |
|||
|
|||
// 标记为已读 |
|||
if (!message.is_read) { |
|||
this.markAsRead(message) |
|||
} |
|||
}, |
|||
|
|||
closeMessagePopup() { |
|||
this.showMessagePopup = false |
|||
this.selectedMessage = null |
|||
}, |
|||
|
|||
async markAsRead(message) { |
|||
try { |
|||
console.log('标记已读:', message.id) |
|||
|
|||
// 模拟API调用 |
|||
await new Promise(resolve => setTimeout(resolve, 200)) |
|||
|
|||
// 更新本地状态 |
|||
const index = this.messagesList.findIndex(msg => msg.id === message.id) |
|||
if (index !== -1) { |
|||
this.messagesList[index].is_read = true |
|||
} |
|||
} catch (error) { |
|||
console.error('标记已读失败:', error) |
|||
} |
|||
}, |
|||
|
|||
async markAllAsRead() { |
|||
if (this.unreadCount === 0) { |
|||
uni.showToast({ |
|||
title: '暂无未读消息', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
|
|||
try { |
|||
console.log('标记全部已读') |
|||
|
|||
// 模拟API调用 |
|||
await new Promise(resolve => setTimeout(resolve, 500)) |
|||
|
|||
// 更新本地状态 |
|||
this.messagesList.forEach(message => { |
|||
message.is_read = true |
|||
}) |
|||
|
|||
uni.showToast({ |
|||
title: '已全部标记为已读', |
|||
icon: 'success' |
|||
}) |
|||
} catch (error) { |
|||
console.error('标记全部已读失败:', error) |
|||
uni.showToast({ |
|||
title: '操作失败', |
|||
icon: 'none' |
|||
}) |
|||
} |
|||
}, |
|||
|
|||
viewAttachment(attachmentUrl) { |
|||
console.log('查看附件:', attachmentUrl) |
|||
uni.showModal({ |
|||
title: '提示', |
|||
content: '附件下载功能开发中', |
|||
showCancel: false |
|||
}) |
|||
}, |
|||
|
|||
submitHomework() { |
|||
console.log('提交作业') |
|||
uni.showModal({ |
|||
title: '提示', |
|||
content: '作业提交功能开发中', |
|||
showCancel: false |
|||
}) |
|||
}, |
|||
|
|||
confirmNotification() { |
|||
console.log('确认通知') |
|||
this.closeMessagePopup() |
|||
uni.showToast({ |
|||
title: '已确认', |
|||
icon: 'success' |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.main_box { |
|||
background: #f8f9fa; |
|||
min-height: 100vh; |
|||
} |
|||
|
|||
// 自定义导航栏 |
|||
.navbar_section { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
background: #29D3B4; |
|||
padding: 40rpx 32rpx 20rpx; |
|||
|
|||
// 小程序端适配状态栏 |
|||
// #ifdef MP-WEIXIN |
|||
padding-top: 80rpx; |
|||
// #endif |
|||
|
|||
.navbar_back { |
|||
width: 60rpx; |
|||
|
|||
.back_icon { |
|||
color: #fff; |
|||
font-size: 40rpx; |
|||
font-weight: 600; |
|||
} |
|||
} |
|||
|
|||
.navbar_title { |
|||
color: #fff; |
|||
font-size: 32rpx; |
|||
font-weight: 600; |
|||
} |
|||
|
|||
.navbar_action { |
|||
width: 120rpx; |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
|
|||
.mark_all_read { |
|||
background: rgba(255, 255, 255, 0.2); |
|||
padding: 8rpx 16rpx; |
|||
border-radius: 16rpx; |
|||
|
|||
.mark_text { |
|||
color: #fff; |
|||
font-size: 24rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 学员信息 |
|||
.student_info_section { |
|||
background: #fff; |
|||
padding: 24rpx 32rpx; |
|||
border-bottom: 1px solid #f0f0f0; |
|||
|
|||
.student_name { |
|||
font-size: 32rpx; |
|||
font-weight: 600; |
|||
color: #333; |
|||
margin-bottom: 12rpx; |
|||
} |
|||
|
|||
.message_stats { |
|||
display: flex; |
|||
gap: 24rpx; |
|||
|
|||
.stat_item { |
|||
font-size: 24rpx; |
|||
color: #666; |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 类型筛选 |
|||
.filter_section { |
|||
background: #fff; |
|||
margin: 20rpx; |
|||
border-radius: 16rpx; |
|||
padding: 24rpx 32rpx; |
|||
|
|||
.filter_tabs { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
gap: 16rpx; |
|||
|
|||
.filter_tab { |
|||
position: relative; |
|||
padding: 12rpx 24rpx; |
|||
font-size: 26rpx; |
|||
color: #666; |
|||
background: #f8f9fa; |
|||
border-radius: 20rpx; |
|||
|
|||
&.active { |
|||
color: #fff; |
|||
background: #29D3B4; |
|||
} |
|||
|
|||
.tab_badge { |
|||
position: absolute; |
|||
top: -8rpx; |
|||
right: -8rpx; |
|||
background: #ff4757; |
|||
color: #fff; |
|||
font-size: 18rpx; |
|||
padding: 2rpx 8rpx; |
|||
border-radius: 12rpx; |
|||
min-width: 16rpx; |
|||
text-align: center; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 消息列表 |
|||
.messages_section { |
|||
margin: 0 20rpx; |
|||
|
|||
.loading_section, .empty_section { |
|||
background: #fff; |
|||
border-radius: 16rpx; |
|||
padding: 80rpx 32rpx; |
|||
text-align: center; |
|||
|
|||
.loading_text, .empty_text { |
|||
font-size: 28rpx; |
|||
color: #666; |
|||
margin-bottom: 12rpx; |
|||
} |
|||
|
|||
.empty_icon { |
|||
font-size: 80rpx; |
|||
margin-bottom: 24rpx; |
|||
} |
|||
|
|||
.empty_hint { |
|||
font-size: 24rpx; |
|||
color: #999; |
|||
} |
|||
} |
|||
|
|||
.messages_list { |
|||
.message_item { |
|||
background: #fff; |
|||
border-radius: 16rpx; |
|||
padding: 24rpx; |
|||
margin-bottom: 16rpx; |
|||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06); |
|||
position: relative; |
|||
|
|||
&.unread { |
|||
background: #f8fdff; |
|||
border-left: 4rpx solid #29D3B4; |
|||
} |
|||
|
|||
.message_header { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
margin-bottom: 16rpx; |
|||
|
|||
.message_type { |
|||
font-size: 22rpx; |
|||
padding: 4rpx 12rpx; |
|||
border-radius: 12rpx; |
|||
|
|||
&.system { |
|||
color: #3498db; |
|||
background: rgba(52, 152, 219, 0.1); |
|||
} |
|||
|
|||
&.notification { |
|||
color: #f39c12; |
|||
background: rgba(243, 156, 18, 0.1); |
|||
} |
|||
|
|||
&.homework { |
|||
color: #e74c3c; |
|||
background: rgba(231, 76, 60, 0.1); |
|||
} |
|||
|
|||
&.feedback { |
|||
color: #27ae60; |
|||
background: rgba(39, 174, 96, 0.1); |
|||
} |
|||
|
|||
&.reminder { |
|||
color: #9b59b6; |
|||
background: rgba(155, 89, 182, 0.1); |
|||
} |
|||
} |
|||
|
|||
.message_time { |
|||
font-size: 22rpx; |
|||
color: #999; |
|||
} |
|||
|
|||
.unread_dot { |
|||
position: absolute; |
|||
top: 20rpx; |
|||
right: 20rpx; |
|||
width: 12rpx; |
|||
height: 12rpx; |
|||
background: #ff4757; |
|||
border-radius: 50%; |
|||
} |
|||
} |
|||
|
|||
.message_content { |
|||
margin-bottom: 12rpx; |
|||
|
|||
.message_title { |
|||
font-size: 28rpx; |
|||
font-weight: 600; |
|||
color: #333; |
|||
margin-bottom: 8rpx; |
|||
} |
|||
|
|||
.message_preview { |
|||
font-size: 24rpx; |
|||
color: #666; |
|||
line-height: 1.4; |
|||
} |
|||
} |
|||
|
|||
.message_meta { |
|||
.sender_name { |
|||
font-size: 22rpx; |
|||
color: #999; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 加载更多 |
|||
.load_more_section { |
|||
padding: 40rpx 20rpx 80rpx; |
|||
} |
|||
|
|||
// 消息详情弹窗 |
|||
.message_popup { |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
background: rgba(0, 0, 0, 0.5); |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
z-index: 1000; |
|||
|
|||
.popup_content { |
|||
background: #fff; |
|||
border-radius: 16rpx; |
|||
width: 90%; |
|||
max-height: 80vh; |
|||
overflow: hidden; |
|||
|
|||
.popup_header { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding: 32rpx; |
|||
border-bottom: 1px solid #f0f0f0; |
|||
|
|||
.popup_title { |
|||
font-size: 32rpx; |
|||
font-weight: 600; |
|||
color: #333; |
|||
} |
|||
|
|||
.popup_close { |
|||
font-size: 48rpx; |
|||
color: #999; |
|||
font-weight: 300; |
|||
} |
|||
} |
|||
|
|||
.popup_message_detail { |
|||
padding: 32rpx; |
|||
max-height: 60vh; |
|||
overflow-y: auto; |
|||
|
|||
.detail_header { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
margin-bottom: 20rpx; |
|||
|
|||
.detail_type { |
|||
font-size: 24rpx; |
|||
padding: 6rpx 16rpx; |
|||
border-radius: 16rpx; |
|||
|
|||
&.system { |
|||
color: #3498db; |
|||
background: rgba(52, 152, 219, 0.1); |
|||
} |
|||
|
|||
&.notification { |
|||
color: #f39c12; |
|||
background: rgba(243, 156, 18, 0.1); |
|||
} |
|||
|
|||
&.homework { |
|||
color: #e74c3c; |
|||
background: rgba(231, 76, 60, 0.1); |
|||
} |
|||
|
|||
&.feedback { |
|||
color: #27ae60; |
|||
background: rgba(39, 174, 96, 0.1); |
|||
} |
|||
|
|||
&.reminder { |
|||
color: #9b59b6; |
|||
background: rgba(155, 89, 182, 0.1); |
|||
} |
|||
} |
|||
|
|||
.detail_time { |
|||
font-size: 24rpx; |
|||
color: #999; |
|||
} |
|||
} |
|||
|
|||
.detail_title { |
|||
font-size: 32rpx; |
|||
font-weight: 600; |
|||
color: #333; |
|||
margin-bottom: 20rpx; |
|||
} |
|||
|
|||
.detail_content { |
|||
font-size: 28rpx; |
|||
color: #666; |
|||
line-height: 1.6; |
|||
margin-bottom: 20rpx; |
|||
} |
|||
|
|||
.detail_sender { |
|||
margin-bottom: 20rpx; |
|||
padding-top: 20rpx; |
|||
border-top: 1px solid #f8f9fa; |
|||
|
|||
.sender_label { |
|||
font-size: 24rpx; |
|||
color: #999; |
|||
} |
|||
|
|||
.sender_value { |
|||
font-size: 24rpx; |
|||
color: #666; |
|||
} |
|||
} |
|||
|
|||
.detail_attachment { |
|||
margin-bottom: 20rpx; |
|||
} |
|||
} |
|||
|
|||
.popup_actions { |
|||
padding: 24rpx 32rpx; |
|||
display: flex; |
|||
gap: 16rpx; |
|||
border-top: 1px solid #f0f0f0; |
|||
|
|||
fui-button { |
|||
flex: 1; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,195 @@ |
|||
<!--课时消耗列表--> |
|||
<template> |
|||
<view class="assemble"> |
|||
<view style="height: 50rpx;"></view> |
|||
|
|||
<view class="message_box" v-if="!tableList.length"> |
|||
暂无更多数据 |
|||
</view> |
|||
|
|||
<view class="ul" v-if="tableList.length"> |
|||
<view class="li" v-for="(v,k) in tableList" :key="k"> |
|||
<view class="left"> |
|||
<view class="title">{{v.name}}</view> |
|||
<view class="date">课程使用日期：{{v.usage_date}}</view> |
|||
</view> |
|||
<view class="right"> |
|||
<view |
|||
class="btn" |
|||
style="background-color: #29d3b4;" |
|||
> |
|||
{{v.usage_date}}课时 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import apiRoute from '@/api/apiRoute.js'; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
loading:false,//加载状态 |
|||
lowerThreshold: 100,//距离底部多远触发 |
|||
isReachedBottom: false,//防止重复加载|true=不可加载|false=可加载 |
|||
|
|||
//筛选条件 |
|||
filteredData:{ |
|||
page:1,//当前页码 |
|||
limit:10,//每页返回数据条数 |
|||
total:10,//数据总条数 |
|||
resources_id:'',//学生资源表id |
|||
}, |
|||
|
|||
tableList:[],//表格数据 |
|||
|
|||
memberInfo:{},//当前登录的学生资源信息 |
|||
} |
|||
}, |
|||
onLoad(options) { |
|||
|
|||
}, |
|||
onShow(){ |
|||
this.init()//初始化 |
|||
}, |
|||
//下拉刷新 |
|||
async onPullDownRefresh() { |
|||
//重置为第一页 |
|||
await this.resetFilteredData() |
|||
await this.getList() |
|||
}, |
|||
methods: { |
|||
//初始化 |
|||
async init(){ |
|||
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 |
|||
}, |
|||
|
|||
//加载更多(下一页) |
|||
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_personCourseScheduleGetStudentCourseUsageList(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++ |
|||
}, |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.message_box{ |
|||
font-size: 30rpx; |
|||
text-align: center; |
|||
color: #fff; |
|||
} |
|||
.assemble { |
|||
width: 100%; |
|||
height: 100vh; |
|||
background: #333333; |
|||
overflow: auto; |
|||
} |
|||
|
|||
.ul { |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 12rpx; |
|||
background-color: #fff; |
|||
width: 90%; |
|||
margin: 0 auto 30rpx; |
|||
padding: 26rpx; |
|||
border-radius: 16rpx; |
|||
} |
|||
|
|||
.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; |
|||
} |
|||
|
|||
.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; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,211 @@ |
|||
<!--我的教练-列表--> |
|||
<template> |
|||
<view class="main_box"> |
|||
<scroll-view scroll-y="true" :lower-threshold="lowerThreshold" |
|||
@scrolltolower="loadMoreData" style="height: 100%;padding-top:50rpx;padding-bottom: 50rpx"> |
|||
|
|||
<!-- <view class="data_hint" v-if="!this.tableList.length">暂无更多数据</view>--> |
|||
|
|||
<view class="main_section" v-for="(v,k) in tableList" :key="k"> |
|||
<view class="left"> |
|||
<!-- 头像--> |
|||
<image :src="v.head_img ? v.head_img : $util.img('/uniapp_src/static/images/common/yong_hu.png')" class="pic"></image> |
|||
</view> |
|||
<view class="right"> |
|||
<view class="title">姓名：{{v.name}}</view> |
|||
<view class="title">电话：{{v.phone}}</view> |
|||
</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,//数据总条数 |
|||
resources_id:'',//学生资源表id |
|||
}, |
|||
|
|||
tableList:[],//表格数据 |
|||
} |
|||
}, |
|||
onLoad(options) {}, |
|||
onShow() { |
|||
this.init()//初始化 |
|||
}, |
|||
//下拉刷新 |
|||
async onPullDownRefresh() { |
|||
//重置为第一页 |
|||
await this.resetFilteredData() |
|||
await this.getList() |
|||
}, |
|||
methods: { |
|||
//初始化 |
|||
async init() { |
|||
await this.getMemberInfo(); |
|||
await this.getList(); |
|||
}, |
|||
|
|||
//重置为第一页 |
|||
async resetFilteredData() { |
|||
this.isReachedBottom = false; // 重置状态，以便下次触发加载更多 |
|||
|
|||
this.filteredData.page = 1//当前页码 |
|||
this.filteredData.limit = 10//每页返回数据条数 |
|||
this.filteredData.total = 10//数据总条数 |
|||
}, |
|||
|
|||
//获取当前登录的学生信息 |
|||
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 |
|||
}, |
|||
|
|||
|
|||
//加载更多(下一页) |
|||
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 - 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_personCourseScheduleGetMyCoach(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++ |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.main_box { |
|||
width: 100%; |
|||
height: 100%; |
|||
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: 30rpx; |
|||
color: #fff; |
|||
display: flex; |
|||
align-items: center; |
|||
.left{ |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
.pic{ |
|||
width: 100rpx; |
|||
height: 100rpx; |
|||
border-radius: 50%; |
|||
} |
|||
} |
|||
.right{ |
|||
margin-left: 20rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 20rpx; |
|||
} |
|||
} |
|||
.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> |
|||
@ -0,0 +1,158 @@ |
|||
<template> |
|||
<view class="assemble"> |
|||
<view style="height: 50rpx;"></view> |
|||
<view class="ul"> |
|||
<view class="li"> |
|||
<view class="left"> |
|||
<view class="title">智卓燕</view> |
|||
<view class="date">哥哥</view> |
|||
</view> |
|||
<view class="right"> |
|||
<view class="btn" style="background-color: #29d3b4;">5课时</view> |
|||
</view> |
|||
</view> |
|||
<view class="li"> |
|||
<view class="left"> |
|||
<view class="title">智卓燕</view> |
|||
<view class="date">哥哥</view> |
|||
</view> |
|||
<view class="right"> |
|||
<view class="btn" style="background-color: #29d3b4;">5课时</view> |
|||
</view> |
|||
</view> |
|||
<view class="li"> |
|||
<view class="left"> |
|||
<view class="title">智卓燕</view> |
|||
<view class="date">哥哥</view> |
|||
</view> |
|||
<view class="right"> |
|||
<view class="btn" style="background-color: #29d3b4;">5课时</view> |
|||
</view> |
|||
</view> |
|||
<view class="li"> |
|||
<view class="left"> |
|||
<view class="title">智卓燕</view> |
|||
<view class="date">哥哥</view> |
|||
</view> |
|||
<view class="right"> |
|||
<view class="btn" style="background-color: #29d3b4;">5课时</view> |
|||
</view> |
|||
</view> |
|||
<view class="li"> |
|||
<view class="left"> |
|||
<view class="title">智卓燕</view> |
|||
<view class="date">哥哥</view> |
|||
</view> |
|||
<view class="right"> |
|||
<view class="btn" style="background-color: #29d3b4;">5课时</view> |
|||
</view> |
|||
</view> |
|||
<view class="li"> |
|||
<view class="left"> |
|||
<view class="title">智卓燕</view> |
|||
<view class="date">哥哥</view> |
|||
</view> |
|||
<view class="right"> |
|||
<view class="btn" style="background-color: #29d3b4;">5课时</view> |
|||
</view> |
|||
</view> |
|||
<view class="li"> |
|||
<view class="left"> |
|||
<view class="title">智卓燕</view> |
|||
<view class="date">哥哥</view> |
|||
</view> |
|||
<view class="right"> |
|||
<view class="btn" style="background-color: #29d3b4;">5课时</view> |
|||
</view> |
|||
</view> |
|||
<view class="li"> |
|||
<view class="left"> |
|||
<view class="title">智卓燕</view> |
|||
<view class="date">哥哥</view> |
|||
</view> |
|||
<view class="right"> |
|||
<view class="btn" style="background-color: #29d3b4;">5课时</view> |
|||
</view> |
|||
</view> |
|||
<view class="li"> |
|||
<view class="left"> |
|||
<view class="title">智卓燕</view> |
|||
<view class="date">哥哥</view> |
|||
</view> |
|||
<view class="right"> |
|||
<view class="btn" style="background-color: #29d3b4;">5课时</view> |
|||
</view> |
|||
</view> |
|||
<view class="li"> |
|||
<view class="left"> |
|||
<view class="title">智卓燕</view> |
|||
<view class="date">哥哥</view> |
|||
</view> |
|||
<view class="right"> |
|||
<view class="btn" style="background-color: #29d3b4;">5课时</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
methods: { |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.assemble { |
|||
width: 100%; |
|||
height: 100vh; |
|||
background: #333333; |
|||
overflow: auto; |
|||
} |
|||
|
|||
.ul { |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 12rpx; |
|||
background-color: #fff; |
|||
width: 90%; |
|||
margin: 0 auto 30rpx; |
|||
padding: 26rpx; |
|||
border-radius: 16rpx; |
|||
} |
|||
|
|||
.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; |
|||
} |
|||
|
|||
.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; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,421 @@ |
|||
<!--授课统计-详情--> |
|||
<template> |
|||
<view class="main_box"> |
|||
|
|||
<view class="main_section"> |
|||
<view class="section"> |
|||
<view class="item"> |
|||
<image @click="previewImage(editHeadimg)" class="pic" :src="editHeadimg"></image> |
|||
<view class="btn"> |
|||
<AQUplodeImage |
|||
:uploadUrl=uploadUrl |
|||
:extraData="{ input_name: 'headimg', formData:{} }" |
|||
@uplodeImageRes="uplodeImageRes" |
|||
> |
|||
修改头像 |
|||
</AQUplodeImage> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="section"> |
|||
<view class="item"> |
|||
<view class="title"> |
|||
学员姓名 <text class="required">*</text> |
|||
</view> |
|||
<view class="input"> |
|||
<input v-model="formData.name" placeholder="请输入姓名" /> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="item"> |
|||
<view class="title"> |
|||
账号 <text class="required"></text> |
|||
</view> |
|||
<view class="input"> |
|||
<input disabled placeholder="暂无" v-model="formData.memberHasOne.mobile" /> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- <view class="item">--> |
|||
<!-- <view class="title">--> |
|||
<!-- 住址 <text class="required"></text>--> |
|||
<!-- </view>--> |
|||
<!-- <view class="input">--> |
|||
<!-- <input placeholder="暂无" v-model="formData.address" />--> |
|||
<!-- </view>--> |
|||
<!-- </view>--> |
|||
|
|||
<view class="item"> |
|||
<view class="title"> |
|||
课程 <text class="required"></text> |
|||
</view> |
|||
<view class="input"> |
|||
<input disabled placeholder="暂无" :value="formData.classes_list" /> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="section"> |
|||
<view class="item"> |
|||
<view class="title"> |
|||
性别 <text class="required">*</text> |
|||
</view> |
|||
<view class="input"> |
|||
<input placeholder="请选择性别" v-model="formData.gender_name" @click="picker_show_sex=true" /> |
|||
<fui-picker layer="1" :linkage="true" :options="options_sex_arr" :show="picker_show_sex" |
|||
@change="changePickerSex" @cancel="cancelPickerSex"></fui-picker> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="item"> |
|||
<view class="title"> |
|||
年龄 <text class="required">*</text> |
|||
</view> |
|||
<view class="input"> |
|||
<input type="number" v-model.number="formData.age" :min="3" :max="18" placeholder="请输入年龄" @input="handleAgeInput" /> </view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="section"> |
|||
<!-- <view class="item">--> |
|||
<!-- <view class="title">--> |
|||
<!-- 邮箱 <text class="required">*</text>--> |
|||
<!-- </view>--> |
|||
<!-- <view class="input">--> |
|||
<!-- <input v-model="formData.email" placeholder="请输入邮箱" />--> |
|||
<!-- </view>--> |
|||
<!-- </view>--> |
|||
|
|||
<view class="item"> |
|||
<view class="title"> |
|||
手机 <text class="required">*</text> |
|||
</view> |
|||
<view class="input"> |
|||
<input v-model="formData.phone_number" placeholder="请输入手机" /> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
|
|||
<view class="submet_btn" @click="submit">提交</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import apiRoute from '@/api/apiRoute.js'; |
|||
import member from '@/api/member.js'; |
|||
import { |
|||
Api_url |
|||
} from "@/common/config.js"; |
|||
import AQTabber from "@/components/AQ/AQTabber" |
|||
import AQUplodeImage from '@/components/AQ/AQUplodeImage';//单图上传组件 |
|||
|
|||
|
|||
export default { |
|||
components: { |
|||
AQTabber, |
|||
AQUplodeImage, |
|||
}, |
|||
data() { |
|||
return { |
|||
member_info: {}, |
|||
|
|||
|
|||
//上传图片APi路径 |
|||
uploadUrl: `${Api_url}/memberUploadImage`, |
|||
|
|||
//性别选择器 相关 |
|||
picker_show_sex: false, |
|||
sex_name: '请选择', |
|||
options_sex_arr: [ |
|||
// { |
|||
// value: 1, |
|||
// text: '男' |
|||
// }, |
|||
], |
|||
|
|||
//生日选择器相关 |
|||
minDate: '', |
|||
maxDate: '', |
|||
picker_show_birthday: false, |
|||
upload_type: 1, |
|||
uploadHeadimg: '', |
|||
editHeadimg: '', |
|||
|
|||
//表单 |
|||
formData: { |
|||
headimg:'',//头像 |
|||
name:'',//姓名 |
|||
course_arr:[],//课程 |
|||
gender:'',//性别: male-男性, female-女性, other-其他 |
|||
gender_name:'',//性别: male-男性, female-女性, other-其他 |
|||
age:'',//年龄 |
|||
phone_number:'',//手机号 |
|||
}, |
|||
} |
|||
}, |
|||
onLoad() {}, |
|||
onShow() { |
|||
this.init() |
|||
}, |
|||
methods: { |
|||
|
|||
async init() { |
|||
await this.memberInfo() |
|||
await this.getSexDict() |
|||
this.getBirthday() |
|||
}, |
|||
|
|||
//获取学员信息 |
|||
async memberInfo() { |
|||
let res = await apiRoute.xy_memberInfo({}) |
|||
if(res.code != 1){ |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
this.formData = res.data |
|||
|
|||
this.formData.headimg = res.data.memberHasOne ? res.data.memberHasOne.headimg : $util.img('/uniapp_src/static/images/common/yong_hu.png') |
|||
this.editHeadimg = this.formData.headimg |
|||
|
|||
console.log('xq',this.formData) |
|||
}, |
|||
|
|||
//获取性别字典 |
|||
async getSexDict() { |
|||
let res = await apiRoute.common_Dictionary({key:'zy_sex'}) |
|||
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.options_sex_arr = arr |
|||
}, |
|||
|
|||
//性别选择相关 |
|||
changePickerSex(e) { |
|||
console.log('监听选择', e) |
|||
this.formData.gender_name = e.text |
|||
this.formData.gender = e.value |
|||
this.cancelPickerSex() |
|||
}, |
|||
cancelPickerSex(){ |
|||
this.picker_show_sex = false |
|||
}, |
|||
|
|||
//生日选择相关 |
|||
//获取当前年月日+获取30年前的日期 |
|||
getBirthday() { |
|||
let date = new Date(); |
|||
let year = date.getFullYear(); |
|||
let month = date.getMonth() + 1; |
|||
let day = date.getDate(); |
|||
let year_30 = year - 30; |
|||
let month_30 = month; |
|||
let day_30 = day; |
|||
if (month_30 == 2 && day_30 > 28) { |
|||
month_30 = 3; |
|||
day_30 = 1; |
|||
} |
|||
if (month_30 == 4 && day_30 > 30) { |
|||
month_30 = 5; |
|||
day_30 = 1; |
|||
} |
|||
if (month_30 == 6 && day_30 > 30) { |
|||
month_30 = 7; |
|||
day_30 = 1; |
|||
} |
|||
if (month_30 == 9 && day_30 > 30) { |
|||
month_30 = 10; |
|||
day_30 = 1; |
|||
} |
|||
if (month_30 == 11 && day_30 > 30) { |
|||
month_30 = 12; |
|||
day_30 = 1; |
|||
} |
|||
if (month_30 > 12) { |
|||
month_30 = month_30 - 12; |
|||
year_30 = year_30 + 1; |
|||
} |
|||
let minDate = year_30 + "-" + month_30 + "-" + day_30 |
|||
let maxDate = year + "-" + month + "-" + day |
|||
this.minDate = minDate |
|||
this.maxDate = maxDate |
|||
}, |
|||
|
|||
//监听生日选择 |
|||
changePickerBirthday(e) { |
|||
console.log('监听生日选择', e) |
|||
this.formData.birthday = e.result |
|||
this.picker_show_birthday = false |
|||
}, |
|||
|
|||
//监听-年龄修改 |
|||
handleAgeInput(e) { |
|||
let age = e.detail.value; |
|||
if (age < 3) { |
|||
uni.showToast({ |
|||
title: '年龄不能小于3岁', |
|||
icon: 'none' |
|||
}); |
|||
this.formData.age = 3; |
|||
} else if (age > 18) { |
|||
uni.showToast({ |
|||
title: '年龄不能大于18岁', |
|||
icon: 'none' |
|||
}); |
|||
this.formData.age = 18; |
|||
} else { |
|||
this.formData.age = age; |
|||
} |
|||
}, |
|||
|
|||
|
|||
//文件上传回调 |
|||
uplodeImageRes(resData,extraData){ |
|||
console.log('上传成功回调',resData,extraData) |
|||
//判断是不是上传相册图片 |
|||
if (extraData.input_name == 'headimg') { |
|||
console.log('收到的图片地址:', resData.url); |
|||
this.editHeadimg = resData.url; |
|||
} |
|||
}, |
|||
|
|||
//图片预览 |
|||
previewImage(url){ |
|||
uni.previewImage({ |
|||
current: url, // 当前图片地址 |
|||
urls: [url] // 所有图片列表（可以是多个） |
|||
}); |
|||
}, |
|||
|
|||
//提交信息 |
|||
async submit() { |
|||
if (this.editHeadimg) { |
|||
this.formData.headimg = this.editHeadimg |
|||
} |
|||
let params = { |
|||
...this.formData |
|||
} |
|||
|
|||
let res = await apiRoute.xy_memberEdit(params) |
|||
if(res.code != 1){ |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: 'success' |
|||
}) |
|||
}, |
|||
|
|||
|
|||
|
|||
} |
|||
} |
|||
</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; |
|||
color: #fff; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 20rpx; |
|||
|
|||
.section { |
|||
background-color: #434544; |
|||
|
|||
.item { |
|||
padding: 20rpx 40rpx; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
|
|||
.pic { |
|||
width: 82rpx; |
|||
height: 82rpx; |
|||
border-radius: 50%; |
|||
} |
|||
|
|||
.btn {} |
|||
|
|||
.title { |
|||
display: flex; |
|||
align-items: center; |
|||
font-size: 26rpx; |
|||
color: #D7D7D7; |
|||
|
|||
.required { |
|||
margin-left: 10rpx; |
|||
color: red; |
|||
} |
|||
} |
|||
|
|||
.input { |
|||
input { |
|||
text-align: right; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.submet_btn { |
|||
margin: 0 auto; |
|||
margin-top: 40rpx; |
|||
border: 2px solid #25a18b; |
|||
color: #25a18b; |
|||
width: 80%; |
|||
height: 80rpx; |
|||
font-size: 30rpx; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
|
|||
|
|||
|
|||
} |
|||
</style> |
|||
@ -0,0 +1,57 @@ |
|||
<template> |
|||
<view class="assemble"> |
|||
<view style="height: 30rpx;"></view> |
|||
<view class="option" @click="update_pass()">修改密码</view> |
|||
<view class="option" @click="privacy_agreement(1)">用户协议</view> |
|||
<view class="option" @click="privacy_agreement(2)">隐私策略</view> |
|||
<view class="option">清空缓存</view> |
|||
|
|||
<view style="width:90%;margin: 60rpx auto;"> |
|||
<fui-button background="#29d3b4" @click="loginOut()">退出账号</fui-button> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
methods: { |
|||
//退出登陆 |
|||
loginOut(){ |
|||
this.$util.loginOut() |
|||
}, |
|||
|
|||
privacy_agreement(type){ |
|||
uni.navigateTo({ |
|||
url: '/pages-common/privacy_agreement?type='+type |
|||
}) |
|||
}, |
|||
update_pass(){ |
|||
uni.navigateTo({ |
|||
url: '/pages-student/my/update_pass' |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.assemble{ |
|||
width: 100%; |
|||
height: 100vh; |
|||
background: #333333; |
|||
} |
|||
.option{ |
|||
margin-bottom: 20rpx; |
|||
background: #404045; |
|||
width: 100%; |
|||
font-size: 28rpx; |
|||
color: #fff; |
|||
line-height: 56rpx; |
|||
padding: 20rpx 0 20rpx 100rpx; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,125 @@ |
|||
<template> |
|||
<view> |
|||
<view class="title"> |
|||
<view :class="{'green-text': tset_style === 1}">1.验证原密码</view> |
|||
<view :class="{'green-text': tset_style === 2}">2.设置新密码</view> |
|||
</view> |
|||
<view :style="{'background-color':'#fff','width':'100%','height':'100vh' }"> |
|||
<view style="width: 95%;height: 30rpx;"></view> |
|||
<view v-if="tset_style == 1"> |
|||
<view class="describe"> |
|||
为保障您的账号安全，修改密码前请填写原密码 |
|||
</view> |
|||
<view style="width: 95%;margin:30rpx auto;"> |
|||
<fui-input borderTop placeholder="请输入原登录密码" v-model="password" backgroundColor="#f2f2f2"></fui-input> |
|||
</view> |
|||
</view> |
|||
<view v-if="tset_style == 2"> |
|||
<view style="width: 95%;margin:30rpx auto;"> |
|||
<fui-input borderTop placeholder="请设置6-20位新的登录密码" v-model="passwords" backgroundColor="#f2f2f2"></fui-input> |
|||
</view> |
|||
<view style="width: 95%;margin: auto;"> |
|||
<fui-input borderTop :padding="['20rpx','32rpx']" v-model="old_password" placeholder="请再次输入新的登录密码" backgroundColor="#f2f2f2"> |
|||
</fui-input> |
|||
</view> |
|||
</view> |
|||
<view style="width: 95%;margin:60rpx auto;"> |
|||
<fui-button background="#00be8c" radius="5rpx" @click="nextStep" v-if="tset_style == 1">下一步</fui-button> |
|||
<fui-button background="#00be8c" radius="5rpx" @click="submit" v-if="tset_style == 2">提交</fui-button> |
|||
<view style="width: 95%;margin:60rpx auto;"> |
|||
<fui-button background="#fff" radius="5rpx" @click="forgot" color="#999999" |
|||
v-if="tset_style == 1">忘记原密码</fui-button> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import member from '@/api/member.js'; |
|||
export default { |
|||
data() { |
|||
return { |
|||
password: '', |
|||
passwords: '', |
|||
old_password: '', |
|||
tset_style: 1, |
|||
} |
|||
}, |
|||
onLoad() { |
|||
|
|||
}, |
|||
methods: { |
|||
//验证原密码 |
|||
nextStep() { |
|||
member.is_pass({ |
|||
password: this.password |
|||
}).then(res => { |
|||
if (res.code == 1) { |
|||
this.tset_style = 2 |
|||
} else { |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: 'none' |
|||
}) |
|||
} |
|||
}); |
|||
}, |
|||
//提交 |
|||
submit() { |
|||
member.set_pass({ |
|||
password: this.passwords, |
|||
old_password: this.old_password, |
|||
}).then(res => { |
|||
if (res.code == 1) { |
|||
this.$util.loginOut(); |
|||
} else { |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: 'none' |
|||
}) |
|||
} |
|||
}); |
|||
}, |
|||
forgot() { |
|||
uni.navigateTo({ |
|||
url: '/pages-student/login/forgot' |
|||
}) |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
page { |
|||
font-weight: normal; |
|||
} |
|||
|
|||
.fui-section__title { |
|||
margin-left: 32rpx; |
|||
} |
|||
|
|||
.fui-left__icon { |
|||
padding-right: 24rpx; |
|||
} |
|||
|
|||
.title { |
|||
display: flex; |
|||
justify-content: space-around; |
|||
align-items: center; |
|||
height: 100rpx; |
|||
width: 100%; |
|||
background-color: #fff; |
|||
font-size: 26rpx; |
|||
border: 4rpx #f5f5f5 solid; |
|||
} |
|||
|
|||
.green-text { |
|||
color: #36d6b9; |
|||
} |
|||
|
|||
.describe { |
|||
color: #999999; |
|||
padding-left: 30rpx; |
|||
} |
|||
</style> |
|||
File diff suppressed because it is too large
@ -0,0 +1,823 @@ |
|||
<!--学员体测数据页面--> |
|||
<template> |
|||
<view class="main_box"> |
|||
<!-- 自定义导航栏 --> |
|||
<view class="navbar_section"> |
|||
<view class="navbar_content"> |
|||
<view class="navbar_back" @click="goBack"> |
|||
<text class="back_icon">‹</text> |
|||
</view> |
|||
<view class="navbar_title">体测数据</view> |
|||
<view class="navbar_action"> |
|||
<view class="share_button" @click="sharePhysicalTest" v-if="physicalTestList.length > 0"> |
|||
<image src="/static/icon-img/share.png" class="share_icon"></image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 学员基本信息 --> |
|||
<view class="student_basic_section" v-if="studentInfo"> |
|||
<view class="student_name">{{ studentInfo.name }}</view> |
|||
<view class="student_meta"> |
|||
<text class="meta_item">{{ studentInfo.gender_text }}</text> |
|||
<text class="meta_item">{{ studentInfo.age }}岁</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 数据统计卡片 --> |
|||
<view class="stats_section"> |
|||
<view class="stat_card"> |
|||
<view class="stat_number">{{ physicalTestList.length }}</view> |
|||
<view class="stat_label">测试次数</view> |
|||
</view> |
|||
<view class="stat_card" v-if="latestTest"> |
|||
<view class="stat_number">{{ latestTest.height }}cm</view> |
|||
<view class="stat_label">最新身高</view> |
|||
</view> |
|||
<view class="stat_card" v-if="latestTest"> |
|||
<view class="stat_number">{{ latestTest.weight }}kg</view> |
|||
<view class="stat_label">最新体重</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 体测记录列表 --> |
|||
<view class="test_list_section"> |
|||
<view v-if="loading" class="loading_section"> |
|||
<view class="loading_text">加载中...</view> |
|||
</view> |
|||
|
|||
<view v-else-if="physicalTestList.length === 0" class="empty_section"> |
|||
<view class="empty_icon">📊</view> |
|||
<view class="empty_text">暂无体测数据</view> |
|||
<view class="empty_hint">完成体测后数据会在这里显示</view> |
|||
</view> |
|||
|
|||
<view v-else class="test_list"> |
|||
<view |
|||
v-for="test in physicalTestList" |
|||
:key="test.id" |
|||
class="test_item" |
|||
> |
|||
<view class="test_header"> |
|||
<view class="test_date">{{ formatDate(test.created_at) }}</view> |
|||
<view class="test_status">体测记录</view> |
|||
</view> |
|||
|
|||
<view class="test_content"> |
|||
<view class="measurement_row"> |
|||
<view class="measurement_item"> |
|||
<view class="item_label">身高</view> |
|||
<view class="item_value">{{ test.height || '-' }}cm</view> |
|||
</view> |
|||
<view class="measurement_item"> |
|||
<view class="item_label">体重</view> |
|||
<view class="item_value">{{ test.weight || '-' }}kg</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- PDF报告列表 --> |
|||
<view class="pdf_reports" v-if="test.physical_test_report"> |
|||
<view class="reports_title">体测报告</view> |
|||
<view class="reports_list"> |
|||
<view |
|||
v-for="(pdfUrl, index) in getPdfList(test.physical_test_report)" |
|||
:key="index" |
|||
class="pdf_item" |
|||
@click="previewPdf(pdfUrl, test.id, index)" |
|||
> |
|||
<view class="pdf_icon"> |
|||
<image src="/static/icon-img/pdf.png" class="icon_image"></image> |
|||
</view> |
|||
<view class="pdf_info"> |
|||
<view class="pdf_name">体测报告{{ index + 1 }}</view> |
|||
<view class="pdf_action">点击预览</view> |
|||
</view> |
|||
<view class="pdf_arrow"> |
|||
<image src="/static/icon-img/arrow-right.png" class="arrow_icon"></image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 加载更多 --> |
|||
<view class="load_more_section" v-if="!loading && hasMore"> |
|||
<button class="load_more_button" @click="loadMoreTests" :disabled="loadingMore"> |
|||
{{ loadingMore ? '加载中...' : '加载更多' }} |
|||
</button> |
|||
</view> |
|||
|
|||
<!-- PDF预览弹窗 --> |
|||
<view class="pdf_preview_popup" v-if="showPdfPreview" @click="closePdfPreview"> |
|||
<view class="preview_content" @click.stop> |
|||
<view class="preview_header"> |
|||
<view class="preview_title">体测报告预览</view> |
|||
<view class="preview_close" @click="closePdfPreview">×</view> |
|||
</view> |
|||
<view class="preview_body"> |
|||
<view v-if="pdfPreviewLoading" class="preview_loading"> |
|||
<view class="loading_text">加载中...</view> |
|||
</view> |
|||
<view v-else-if="pdfImageUrl" class="preview_image_container"> |
|||
<image |
|||
:src="pdfImageUrl" |
|||
class="preview_image" |
|||
mode="widthFix" |
|||
@error="onImageError" |
|||
></image> |
|||
</view> |
|||
<view v-else class="preview_error"> |
|||
<view class="error_text">预览失败</view> |
|||
<button class="retry_button" @click="retryPreview">重试</button> |
|||
</view> |
|||
</view> |
|||
<view class="preview_footer"> |
|||
<button class="share_pdf_button" @click="sharePdfImage" :disabled="!pdfImageUrl"> |
|||
分享报告 |
|||
</button> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import apiRoute from '@/api/member.js' |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
studentId: 0, |
|||
studentInfo: {}, |
|||
physicalTestList: [], |
|||
loading: false, |
|||
loadingMore: false, |
|||
hasMore: true, |
|||
currentPage: 1, |
|||
showPdfPreview: false, |
|||
pdfPreviewLoading: false, |
|||
pdfImageUrl: '', |
|||
currentPdfUrl: '', |
|||
currentTestId: 0, |
|||
currentPdfIndex: 0 |
|||
} |
|||
}, |
|||
|
|||
computed: { |
|||
latestTest() { |
|||
if (this.physicalTestList.length === 0) return null |
|||
return this.physicalTestList[0] |
|||
} |
|||
}, |
|||
|
|||
onLoad(options) { |
|||
this.studentId = parseInt(options.student_id) || 0 |
|||
if (this.studentId) { |
|||
this.initPage() |
|||
} else { |
|||
uni.showToast({ |
|||
title: '参数错误', |
|||
icon: 'none' |
|||
}) |
|||
} |
|||
}, |
|||
|
|||
methods: { |
|||
goBack() { |
|||
uni.navigateBack() |
|||
}, |
|||
|
|||
async initPage() { |
|||
await this.loadStudentInfo() |
|||
await this.loadPhysicalTests() |
|||
}, |
|||
|
|||
async loadStudentInfo() { |
|||
try { |
|||
// 调用真实API获取学员信息 |
|||
const response = await apiRoute.getStudentSummary(this.studentId) |
|||
if (response.code === 1) { |
|||
this.studentInfo = response.data |
|||
} else { |
|||
console.error('获取学员信息失败:', response) |
|||
} |
|||
} catch (error) { |
|||
console.error('获取学员信息失败:', error) |
|||
} |
|||
}, |
|||
|
|||
async loadPhysicalTests() { |
|||
this.loading = true |
|||
try { |
|||
console.log('加载体测数据:', this.studentId) |
|||
|
|||
// 调用真实API获取体测数据 |
|||
const response = await apiRoute.getPhysicalTestList({ |
|||
student_id: this.studentId, |
|||
page: this.currentPage, |
|||
limit: 10 |
|||
}) |
|||
|
|||
if (response.code === 1) { |
|||
const newList = response.data.list || [] |
|||
if (this.currentPage === 1) { |
|||
this.physicalTestList = newList |
|||
} else { |
|||
this.physicalTestList = [...this.physicalTestList, ...newList] |
|||
} |
|||
|
|||
this.hasMore = response.data.has_more || false |
|||
console.log('体测数据加载成功:', this.physicalTestList) |
|||
} else { |
|||
uni.showToast({ |
|||
title: response.msg || '获取体测数据失败', |
|||
icon: 'none' |
|||
}) |
|||
} |
|||
} catch (error) { |
|||
console.error('获取体测数据失败:', error) |
|||
uni.showToast({ |
|||
title: '获取体测数据失败', |
|||
icon: 'none' |
|||
}) |
|||
} finally { |
|||
this.loading = false |
|||
this.loadingMore = false |
|||
} |
|||
}, |
|||
|
|||
async loadMoreTests() { |
|||
if (this.loadingMore || !this.hasMore) return |
|||
|
|||
this.loadingMore = true |
|||
this.currentPage++ |
|||
await this.loadPhysicalTests() |
|||
}, |
|||
|
|||
getPdfList(pdfReportString) { |
|||
if (!pdfReportString || pdfReportString.trim() === '') { |
|||
return [] |
|||
} |
|||
|
|||
// 按逗号分割PDF URL列表，并过滤空值 |
|||
return pdfReportString.split(',').filter(url => url.trim() !== '') |
|||
}, |
|||
|
|||
async previewPdf(pdfUrl, testId, pdfIndex) { |
|||
console.log('预览PDF:', pdfUrl) |
|||
|
|||
this.currentPdfUrl = pdfUrl |
|||
this.currentTestId = testId |
|||
this.currentPdfIndex = pdfIndex |
|||
this.showPdfPreview = true |
|||
this.pdfPreviewLoading = true |
|||
this.pdfImageUrl = '' |
|||
|
|||
try { |
|||
// 调用后端API将PDF转换为图片 |
|||
const response = await apiRoute.convertPdfToImage({ |
|||
pdf_url: pdfUrl, |
|||
test_id: testId, |
|||
pdf_index: pdfIndex |
|||
}) |
|||
|
|||
if (response.code === 1) { |
|||
this.pdfImageUrl = response.data.image_url |
|||
} else { |
|||
throw new Error(response.msg || 'PDF转换失败') |
|||
} |
|||
} catch (error) { |
|||
console.error('PDF预览失败:', error) |
|||
uni.showToast({ |
|||
title: error.message || 'PDF预览失败', |
|||
icon: 'none' |
|||
}) |
|||
} finally { |
|||
this.pdfPreviewLoading = false |
|||
} |
|||
}, |
|||
|
|||
closePdfPreview() { |
|||
this.showPdfPreview = false |
|||
this.pdfImageUrl = '' |
|||
this.currentPdfUrl = '' |
|||
}, |
|||
|
|||
retryPreview() { |
|||
this.previewPdf(this.currentPdfUrl, this.currentTestId, this.currentPdfIndex) |
|||
}, |
|||
|
|||
onImageError() { |
|||
console.error('图片加载失败') |
|||
uni.showToast({ |
|||
title: '图片加载失败', |
|||
icon: 'none' |
|||
}) |
|||
}, |
|||
|
|||
async sharePdfImage() { |
|||
if (!this.pdfImageUrl) { |
|||
uni.showToast({ |
|||
title: '没有可分享的内容', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
|
|||
try { |
|||
uni.showActionSheet({ |
|||
itemList: ['保存到相册', '分享给朋友'], |
|||
success: async (res) => { |
|||
if (res.tapIndex === 0) { |
|||
// 保存到相册 |
|||
try { |
|||
await uni.saveImageToPhotosAlbum({ |
|||
filePath: this.pdfImageUrl |
|||
}) |
|||
uni.showToast({ |
|||
title: '已保存到相册', |
|||
icon: 'success' |
|||
}) |
|||
} catch (error) { |
|||
console.error('保存图片失败:', error) |
|||
uni.showToast({ |
|||
title: '保存失败', |
|||
icon: 'none' |
|||
}) |
|||
} |
|||
} else if (res.tapIndex === 1) { |
|||
// 分享功能 |
|||
uni.showToast({ |
|||
title: '分享功能开发中', |
|||
icon: 'none' |
|||
}) |
|||
} |
|||
} |
|||
}) |
|||
} catch (error) { |
|||
console.error('分享操作失败:', error) |
|||
} |
|||
}, |
|||
|
|||
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') |
|||
const hours = String(date.getHours()).padStart(2, '0') |
|||
const minutes = String(date.getMinutes()).padStart(2, '0') |
|||
|
|||
return `${year}-${month}-${day} ${hours}:${minutes}` |
|||
}, |
|||
|
|||
async sharePhysicalTest() { |
|||
try { |
|||
uni.showLoading({ |
|||
title: '生成分享图片...' |
|||
}) |
|||
|
|||
// 调用API生成分享图片 |
|||
const response = await apiRoute.generateShareImage({ |
|||
student_id: this.studentId, |
|||
type: 'physical_test' |
|||
}) |
|||
|
|||
if (response.code === 1) { |
|||
uni.hideLoading() |
|||
uni.showActionSheet({ |
|||
itemList: ['保存到相册', '分享给朋友'], |
|||
success: async (res) => { |
|||
if (res.tapIndex === 0) { |
|||
try { |
|||
await uni.saveImageToPhotosAlbum({ |
|||
filePath: response.data.image_url |
|||
}) |
|||
uni.showToast({ |
|||
title: '已保存到相册', |
|||
icon: 'success' |
|||
}) |
|||
} catch (error) { |
|||
uni.showToast({ |
|||
title: '保存失败', |
|||
icon: 'none' |
|||
}) |
|||
} |
|||
} else if (res.tapIndex === 1) { |
|||
uni.showToast({ |
|||
title: '分享功能开发中', |
|||
icon: 'none' |
|||
}) |
|||
} |
|||
} |
|||
}) |
|||
} else { |
|||
throw new Error(response.msg || '生成分享图片失败') |
|||
} |
|||
} catch (error) { |
|||
console.error('分享失败:', error) |
|||
uni.hideLoading() |
|||
uni.showToast({ |
|||
title: error.message || '分享失败', |
|||
icon: 'none' |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.main_box { |
|||
background: #f8f9fa; |
|||
min-height: 100vh; |
|||
} |
|||
|
|||
// 自定义导航栏 |
|||
.navbar_section { |
|||
background: linear-gradient(135deg, #29D3B4 0%, #1BA297 100%); |
|||
padding: 40rpx 32rpx 32rpx; |
|||
|
|||
// 小程序端适配状态栏 |
|||
// #ifdef MP-WEIXIN |
|||
padding-top: 80rpx; |
|||
// #endif |
|||
.navbar_back { |
|||
width: 60rpx; |
|||
|
|||
.back_icon { |
|||
color: #fff; |
|||
font-size: 40rpx; |
|||
font-weight: 600; |
|||
} |
|||
} |
|||
.navbar_content { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
|
|||
.back_button { |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
|
|||
.back_icon { |
|||
width: 24rpx; |
|||
height: 24rpx; |
|||
} |
|||
} |
|||
|
|||
.navbar_title { |
|||
color: #fff; |
|||
font-size: 36rpx; |
|||
font-weight: 600; |
|||
} |
|||
|
|||
.navbar_action { |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
|
|||
.share_button { |
|||
background: rgba(255, 255, 255, 0.2); |
|||
padding: 12rpx; |
|||
border-radius: 50%; |
|||
|
|||
.share_icon { |
|||
width: 20rpx; |
|||
height: 20rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 学员基本信息 |
|||
.student_basic_section { |
|||
background: #fff; |
|||
padding: 24rpx 32rpx; |
|||
border-bottom: 1px solid #f0f0f0; |
|||
|
|||
.student_name { |
|||
font-size: 32rpx; |
|||
font-weight: 600; |
|||
color: #333; |
|||
margin-bottom: 12rpx; |
|||
} |
|||
|
|||
.student_meta { |
|||
display: flex; |
|||
gap: 16rpx; |
|||
|
|||
.meta_item { |
|||
font-size: 24rpx; |
|||
color: #666; |
|||
background: #f0f0f0; |
|||
padding: 6rpx 12rpx; |
|||
border-radius: 12rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 统计卡片 |
|||
.stats_section { |
|||
display: flex; |
|||
background: #fff; |
|||
margin: 20rpx; |
|||
border-radius: 16rpx; |
|||
padding: 32rpx 24rpx; |
|||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08); |
|||
|
|||
.stat_card { |
|||
flex: 1; |
|||
text-align: center; |
|||
|
|||
.stat_number { |
|||
font-size: 36rpx; |
|||
font-weight: 600; |
|||
color: #29D3B4; |
|||
margin-bottom: 8rpx; |
|||
} |
|||
|
|||
.stat_label { |
|||
font-size: 24rpx; |
|||
color: #666; |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 体测记录列表 |
|||
.test_list_section { |
|||
margin: 0 20rpx; |
|||
|
|||
.loading_section, .empty_section { |
|||
background: #fff; |
|||
border-radius: 16rpx; |
|||
padding: 80rpx 32rpx; |
|||
text-align: center; |
|||
|
|||
.loading_text, .empty_text { |
|||
font-size: 28rpx; |
|||
color: #666; |
|||
margin-bottom: 12rpx; |
|||
} |
|||
|
|||
.empty_icon { |
|||
font-size: 80rpx; |
|||
margin-bottom: 24rpx; |
|||
} |
|||
|
|||
.empty_hint { |
|||
font-size: 24rpx; |
|||
color: #999; |
|||
} |
|||
} |
|||
|
|||
.test_list { |
|||
.test_item { |
|||
background: #fff; |
|||
border-radius: 16rpx; |
|||
padding: 32rpx; |
|||
margin-bottom: 20rpx; |
|||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08); |
|||
|
|||
.test_header { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
margin-bottom: 24rpx; |
|||
|
|||
.test_date { |
|||
font-size: 28rpx; |
|||
color: #333; |
|||
font-weight: 600; |
|||
} |
|||
|
|||
.test_status { |
|||
font-size: 24rpx; |
|||
color: #29D3B4; |
|||
background: rgba(41, 211, 180, 0.1); |
|||
padding: 6rpx 16rpx; |
|||
border-radius: 12rpx; |
|||
} |
|||
} |
|||
|
|||
.test_content { |
|||
.measurement_row { |
|||
display: flex; |
|||
gap: 32rpx; |
|||
margin-bottom: 24rpx; |
|||
|
|||
.measurement_item { |
|||
flex: 1; |
|||
text-align: center; |
|||
background: #f8f9fa; |
|||
padding: 24rpx; |
|||
border-radius: 12rpx; |
|||
|
|||
.item_label { |
|||
font-size: 24rpx; |
|||
color: #666; |
|||
margin-bottom: 8rpx; |
|||
} |
|||
|
|||
.item_value { |
|||
font-size: 32rpx; |
|||
color: #333; |
|||
font-weight: 600; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.pdf_reports { |
|||
.reports_title { |
|||
font-size: 26rpx; |
|||
color: #333; |
|||
font-weight: 600; |
|||
margin-bottom: 16rpx; |
|||
} |
|||
|
|||
.reports_list { |
|||
.pdf_item { |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 20rpx; |
|||
padding: 20rpx; |
|||
background: #f8f9fa; |
|||
border-radius: 12rpx; |
|||
margin-bottom: 12rpx; |
|||
|
|||
&:last-child { |
|||
margin-bottom: 0; |
|||
} |
|||
|
|||
.pdf_icon { |
|||
width: 60rpx; |
|||
height: 60rpx; |
|||
background: rgba(231, 76, 60, 0.1); |
|||
border-radius: 12rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
|
|||
.icon_image { |
|||
width: 32rpx; |
|||
height: 32rpx; |
|||
} |
|||
} |
|||
|
|||
.pdf_info { |
|||
flex: 1; |
|||
|
|||
.pdf_name { |
|||
font-size: 26rpx; |
|||
color: #333; |
|||
font-weight: 500; |
|||
margin-bottom: 4rpx; |
|||
} |
|||
|
|||
.pdf_action { |
|||
font-size: 22rpx; |
|||
color: #666; |
|||
} |
|||
} |
|||
|
|||
.pdf_arrow { |
|||
.arrow_icon { |
|||
width: 16rpx; |
|||
height: 16rpx; |
|||
opacity: 0.6; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 加载更多 |
|||
.load_more_section { |
|||
padding: 40rpx 20rpx 80rpx; |
|||
|
|||
.load_more_button { |
|||
width: 100%; |
|||
background: #f8f9fa; |
|||
color: #666; |
|||
border: 1px solid #e9ecef; |
|||
border-radius: 16rpx; |
|||
padding: 24rpx 0; |
|||
font-size: 28rpx; |
|||
|
|||
&:disabled { |
|||
opacity: 0.6; |
|||
} |
|||
} |
|||
} |
|||
|
|||
// PDF预览弹窗 |
|||
.pdf_preview_popup { |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
background: rgba(0, 0, 0, 0.5); |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
z-index: 1000; |
|||
|
|||
.preview_content { |
|||
background: #fff; |
|||
border-radius: 16rpx; |
|||
width: 90%; |
|||
max-height: 80vh; |
|||
overflow: hidden; |
|||
|
|||
.preview_header { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding: 32rpx; |
|||
border-bottom: 1px solid #f0f0f0; |
|||
|
|||
.preview_title { |
|||
font-size: 32rpx; |
|||
font-weight: 600; |
|||
color: #333; |
|||
} |
|||
|
|||
.preview_close { |
|||
font-size: 48rpx; |
|||
color: #999; |
|||
font-weight: 300; |
|||
} |
|||
} |
|||
|
|||
.preview_body { |
|||
max-height: 60vh; |
|||
overflow-y: auto; |
|||
|
|||
.preview_loading, .preview_error { |
|||
padding: 80rpx 32rpx; |
|||
text-align: center; |
|||
|
|||
.loading_text, .error_text { |
|||
font-size: 28rpx; |
|||
color: #666; |
|||
margin-bottom: 24rpx; |
|||
} |
|||
|
|||
.retry_button { |
|||
background: #29D3B4; |
|||
color: #fff; |
|||
border: none; |
|||
border-radius: 12rpx; |
|||
padding: 16rpx 32rpx; |
|||
font-size: 26rpx; |
|||
} |
|||
} |
|||
|
|||
.preview_image_container { |
|||
padding: 20rpx; |
|||
|
|||
.preview_image { |
|||
width: 100%; |
|||
border-radius: 12rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.preview_footer { |
|||
padding: 32rpx; |
|||
border-top: 1px solid #f0f0f0; |
|||
|
|||
.share_pdf_button { |
|||
width: 100%; |
|||
background: linear-gradient(135deg, #29D3B4 0%, #1BA297 100%); |
|||
color: #fff; |
|||
border: none; |
|||
border-radius: 16rpx; |
|||
padding: 24rpx 0; |
|||
font-size: 28rpx; |
|||
font-weight: 600; |
|||
|
|||
&:disabled { |
|||
opacity: 0.6; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,605 @@ |
|||
<!--学员个人信息管理页面--> |
|||
<template> |
|||
<view class="main_box"> |
|||
<!-- 自定义导航栏 --> |
|||
<view class="navbar_section"> |
|||
<view class="navbar_back" @click="goBack"> |
|||
<text class="back_icon">‹</text> |
|||
</view> |
|||
<view class="navbar_title">个人信息管理</view> |
|||
<view class="navbar_action"></view> |
|||
</view> |
|||
|
|||
<!-- 学员头像区域 --> |
|||
<view class="avatar_section"> |
|||
<view class="avatar_container"> |
|||
<image |
|||
:src="studentInfo.headimg || '/static/default-avatar.png'" |
|||
class="avatar_image" |
|||
mode="aspectFill" |
|||
@click="uploadAvatar" |
|||
></image> |
|||
<view class="avatar_edit_icon" @click="uploadAvatar"> |
|||
<text class="edit_text">✎</text> |
|||
</view> |
|||
</view> |
|||
<view class="student_name">{{ studentInfo.name || '学员姓名' }}</view> |
|||
<view class="student_basic_info"> |
|||
<text class="info_tag">{{ studentInfo.gender_text }}</text> |
|||
<text class="info_tag">{{ studentInfo.ageText }}岁</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 基本信息表单 --> |
|||
<view class="form_section"> |
|||
<view class="section_title">基本信息</view> |
|||
|
|||
<view class="form_item"> |
|||
<view class="form_label">姓名</view> |
|||
<fui-input |
|||
v-model="formData.name" |
|||
placeholder="请输入学员姓名" |
|||
borderColor="transparent" |
|||
backgroundColor="#f8f9fa" |
|||
:maxlength="20" |
|||
></fui-input> |
|||
</view> |
|||
|
|||
<view class="form_item"> |
|||
<view class="form_label">性别</view> |
|||
<fui-input |
|||
v-model="genderText" |
|||
placeholder="请选择性别" |
|||
borderColor="transparent" |
|||
backgroundColor="#f8f9fa" |
|||
readonly |
|||
@click="showGenderPicker = true" |
|||
> |
|||
<fui-icon name="arrowdown" color="#B2B2B2" :size="40"></fui-icon> |
|||
</fui-input> |
|||
<fui-picker |
|||
:options="genderOptions" |
|||
:show="showGenderPicker" |
|||
@change="changeGender" |
|||
@cancel="showGenderPicker = false" |
|||
></fui-picker> |
|||
</view> |
|||
|
|||
<view class="form_item"> |
|||
<view class="form_label">生日</view> |
|||
<fui-date-picker |
|||
:show="showDatePicker" |
|||
v-model="formData.birthday" |
|||
@change="changeBirthday" |
|||
@cancel="showDatePicker = false" |
|||
> |
|||
<fui-input |
|||
:value="birthdayText" |
|||
placeholder="请选择生日" |
|||
borderColor="transparent" |
|||
backgroundColor="#f8f9fa" |
|||
readonly |
|||
@click="showDatePicker = true" |
|||
> |
|||
<fui-icon name="arrowdown" color="#B2B2B2" :size="40"></fui-icon> |
|||
</fui-input> |
|||
</fui-date-picker> |
|||
</view> |
|||
|
|||
<view class="form_item"> |
|||
<view class="form_label">年龄</view> |
|||
<fui-input |
|||
:value="ageText" |
|||
placeholder="根据生日自动计算" |
|||
borderColor="transparent" |
|||
backgroundColor="#f0f0f0" |
|||
readonly |
|||
></fui-input> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 体测信息（只读展示） --> |
|||
<view class="form_section"> |
|||
<view class="section_title">体测信息</view> |
|||
|
|||
<view class="form_item"> |
|||
<view class="form_label">身高 (cm)</view> |
|||
<fui-input |
|||
:value="physicalTestInfo.height || '暂无数据'" |
|||
placeholder="暂无体测数据" |
|||
borderColor="transparent" |
|||
backgroundColor="#f0f0f0" |
|||
readonly |
|||
></fui-input> |
|||
</view> |
|||
|
|||
<view class="form_item"> |
|||
<view class="form_label">体重 (kg)</view> |
|||
<fui-input |
|||
:value="physicalTestInfo.weight || '暂无数据'" |
|||
placeholder="暂无体测数据" |
|||
borderColor="transparent" |
|||
backgroundColor="#f0f0f0" |
|||
readonly |
|||
></fui-input> |
|||
</view> |
|||
|
|||
<view class="form_item" v-if="physicalTestInfo.test_date"> |
|||
<view class="form_label">体测日期</view> |
|||
<fui-input |
|||
:value="physicalTestInfo.test_date" |
|||
placeholder="暂无体测数据" |
|||
borderColor="transparent" |
|||
backgroundColor="#f0f0f0" |
|||
readonly |
|||
></fui-input> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 联系信息 --> |
|||
<view class="form_section"> |
|||
<view class="section_title">紧急联系人</view> |
|||
|
|||
<view class="form_item"> |
|||
<view class="form_label">联系人姓名</view> |
|||
<fui-input |
|||
v-model="formData.emergency_contact" |
|||
placeholder="请输入紧急联系人姓名" |
|||
borderColor="transparent" |
|||
backgroundColor="#f8f9fa" |
|||
:maxlength="20" |
|||
></fui-input> |
|||
</view> |
|||
|
|||
<view class="form_item"> |
|||
<view class="form_label">联系电话</view> |
|||
<fui-input |
|||
v-model="formData.contact_phone" |
|||
placeholder="请输入联系电话" |
|||
borderColor="transparent" |
|||
backgroundColor="#f8f9fa" |
|||
type="number" |
|||
:maxlength="11" |
|||
></fui-input> |
|||
</view> |
|||
|
|||
<view class="form_item"> |
|||
<view class="form_label">备注信息</view> |
|||
<fui-textarea |
|||
v-model="formData.note" |
|||
placeholder="其他需要说明的信息" |
|||
backgroundColor="#f8f9fa" |
|||
:maxlength="500" |
|||
:rows="4" |
|||
></fui-textarea> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 保存按钮 --> |
|||
<view class="save_section"> |
|||
<fui-button |
|||
background="#29d3b4" |
|||
radius="12rpx" |
|||
:loading="saving" |
|||
@click="saveStudentInfo" |
|||
> |
|||
{{ saving ? '保存中...' : '保存信息' }} |
|||
</fui-button> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import apiRoute from '@/api/member.js' |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
studentId: 0, |
|||
studentInfo: {}, |
|||
physicalTestInfo: {}, // 体测信息 |
|||
formData: { |
|||
name: '', |
|||
gender: '', |
|||
birthday: '', |
|||
emergency_contact: '', |
|||
contact_phone: '', |
|||
note: '' |
|||
}, |
|||
saving: false, |
|||
showGenderPicker: false, |
|||
showDatePicker: false, |
|||
genderOptions: [ |
|||
{ value: '1', text: '男' }, |
|||
{ value: '2', text: '女' } |
|||
] |
|||
} |
|||
}, |
|||
computed: { |
|||
genderText() { |
|||
const gender = this.genderOptions.find(item => item.value === this.formData.gender) |
|||
return gender ? gender.text : '' |
|||
}, |
|||
birthdayText() { |
|||
return this.formData.birthday || '' |
|||
}, |
|||
ageText() { |
|||
if (!this.formData.birthday) return '' |
|||
|
|||
const today = new Date() |
|||
const birthDate = new Date(this.formData.birthday) |
|||
let age = today.getFullYear() - birthDate.getFullYear() |
|||
let months = today.getMonth() - birthDate.getMonth() |
|||
|
|||
if (months < 0 || (months === 0 && today.getDate() < birthDate.getDate())) { |
|||
age-- |
|||
months += 12 |
|||
} |
|||
|
|||
if (months < 0) { |
|||
months = 0 |
|||
} |
|||
|
|||
return age > 0 ? `${age}.${months.toString().padStart(2, '0')}岁` : `${months}个月` |
|||
} |
|||
}, |
|||
onLoad(options) { |
|||
this.studentId = parseInt(options.student_id) || 0 |
|||
if (this.studentId) { |
|||
this.loadStudentInfo() |
|||
} else { |
|||
uni.showToast({ |
|||
title: '参数错误', |
|||
icon: 'none' |
|||
}) |
|||
} |
|||
}, |
|||
|
|||
methods: { |
|||
goBack() { |
|||
uni.navigateBack() |
|||
}, |
|||
|
|||
async loadStudentInfo() { |
|||
try { |
|||
console.log('加载学员信息:', this.studentId) |
|||
|
|||
// 调用真实API |
|||
const response = await apiRoute.getStudentInfo(this.studentId) |
|||
console.log('学员信息API响应:', response) |
|||
|
|||
if (response.code === 1) { |
|||
this.studentInfo = response.data.student_info |
|||
this.physicalTestInfo = response.data.physical_test_info || {} |
|||
|
|||
// 填充表单数据 |
|||
this.formData = { |
|||
name: this.studentInfo.name || '', |
|||
gender: String(this.studentInfo.gender || ''), |
|||
birthday: this.studentInfo.birthday || '', |
|||
emergency_contact: this.studentInfo.emergency_contact || '', |
|||
contact_phone: this.studentInfo.contact_phone || '', |
|||
note: this.studentInfo.note || '' |
|||
} |
|||
console.log('学员信息加载成功:', this.studentInfo) |
|||
console.log('体测信息加载成功:', this.physicalTestInfo) |
|||
} else { |
|||
uni.showToast({ |
|||
title: response.msg || '获取学员信息失败', |
|||
icon: 'none' |
|||
}) |
|||
} |
|||
} catch (error) { |
|||
console.error('获取学员信息失败:', error) |
|||
uni.showToast({ |
|||
title: '获取学员信息失败', |
|||
icon: 'none' |
|||
}) |
|||
} |
|||
}, |
|||
|
|||
changeGender(e) { |
|||
this.formData.gender = e.value |
|||
this.showGenderPicker = false |
|||
}, |
|||
|
|||
changeBirthday(e) { |
|||
this.formData.birthday = e.result |
|||
this.showDatePicker = false |
|||
}, |
|||
|
|||
async uploadAvatar() { |
|||
try { |
|||
uni.chooseImage({ |
|||
count: 1, |
|||
sizeType: ['compressed'], |
|||
sourceType: ['album', 'camera'], |
|||
success: async (res) => { |
|||
const tempFilePath = res.tempFilePaths[0] |
|||
console.log('选择的图片:', tempFilePath) |
|||
|
|||
// 显示上传中提示 |
|||
uni.showLoading({ |
|||
title: '上传中...' |
|||
}) |
|||
|
|||
try { |
|||
// 调用头像上传API（无需token验证） |
|||
const response = await apiRoute.uploadAvatarForAdd(tempFilePath) |
|||
console.log('头像上传API响应:', response) |
|||
|
|||
if (response.code === 1 && response.data && response.data.url) { |
|||
// 更新本地头像显示 |
|||
this.studentInfo.headimg = response.data.url |
|||
|
|||
// 立即保存头像到数据库 |
|||
await this.saveAvatarToDatabase(response.data.url) |
|||
|
|||
uni.showToast({ |
|||
title: '头像上传成功', |
|||
icon: 'success' |
|||
}) |
|||
} else { |
|||
throw new Error(response.msg || '上传接口返回数据异常') |
|||
} |
|||
} catch (uploadError) { |
|||
console.error('头像上传失败:', uploadError) |
|||
uni.showToast({ |
|||
title: uploadError.message || '头像上传失败', |
|||
icon: 'none' |
|||
}) |
|||
} finally { |
|||
uni.hideLoading() |
|||
} |
|||
}, |
|||
fail: (error) => { |
|||
console.error('选择图片失败:', error) |
|||
uni.showToast({ |
|||
title: '选择图片失败', |
|||
icon: 'none' |
|||
}) |
|||
} |
|||
}) |
|||
} catch (error) { |
|||
console.error('选择头像失败:', error) |
|||
uni.showToast({ |
|||
title: '操作失败', |
|||
icon: 'none' |
|||
}) |
|||
} |
|||
}, |
|||
|
|||
async saveAvatarToDatabase(avatarUrl) { |
|||
try { |
|||
// 包含完整的必要字段，特别是name字段 |
|||
const updateData = { |
|||
student_id: this.studentId, |
|||
name: this.formData.name || this.studentInfo.name, |
|||
gender: this.formData.gender || String(this.studentInfo.gender || ''), |
|||
headimg: avatarUrl |
|||
} |
|||
|
|||
console.log('保存头像到数据库:', updateData) |
|||
|
|||
// 调用更新学员信息API |
|||
const response = await apiRoute.updateStudentInfo(updateData) |
|||
console.log('保存头像API响应:', response) |
|||
|
|||
if (response.code !== 1) { |
|||
throw new Error(response.msg || '保存头像失败') |
|||
} |
|||
} catch (error) { |
|||
console.error('保存头像到数据库失败:', error) |
|||
throw error |
|||
} |
|||
}, |
|||
|
|||
async saveStudentInfo() { |
|||
// 表单验证 |
|||
if (!this.formData.name.trim()) { |
|||
uni.showToast({ |
|||
title: '请输入学员姓名', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
|
|||
if (!this.formData.gender) { |
|||
uni.showToast({ |
|||
title: '请选择性别', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
|
|||
// 手机号验证 |
|||
if (this.formData.contact_phone && !/^1[3-9]\d{9}$/.test(this.formData.contact_phone)) { |
|||
uni.showToast({ |
|||
title: '请输入正确的手机号', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
|
|||
this.saving = true |
|||
try { |
|||
const updateData = { |
|||
student_id: this.studentId, |
|||
...this.formData |
|||
} |
|||
|
|||
console.log('保存学员信息:', updateData) |
|||
|
|||
// 调用真实API |
|||
const response = await apiRoute.updateStudentInfo(updateData) |
|||
console.log('更新学员信息API响应:', response) |
|||
|
|||
if (response.code === 1) { |
|||
// 更新本地学员信息 |
|||
Object.assign(this.studentInfo, this.formData) |
|||
|
|||
uni.showToast({ |
|||
title: '保存成功', |
|||
icon: 'success' |
|||
}) |
|||
|
|||
// 延迟返回上一页 |
|||
setTimeout(() => { |
|||
uni.navigateBack() |
|||
}, 1500) |
|||
} else { |
|||
uni.showToast({ |
|||
title: response.message || '保存失败', |
|||
icon: 'none' |
|||
}) |
|||
} |
|||
} catch (error) { |
|||
console.error('保存学员信息失败:', error) |
|||
uni.showToast({ |
|||
title: '保存失败，请重试', |
|||
icon: 'none' |
|||
}) |
|||
} finally { |
|||
this.saving = false |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.main_box { |
|||
background: #f8f9fa; |
|||
min-height: 100vh; |
|||
} |
|||
|
|||
// 自定义导航栏 |
|||
.navbar_section { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
background: #29D3B4; |
|||
padding: 40rpx 32rpx 20rpx; |
|||
|
|||
// 小程序端适配状态栏 |
|||
// #ifdef MP-WEIXIN |
|||
padding-top: 80rpx; |
|||
// #endif |
|||
|
|||
.navbar_back { |
|||
width: 60rpx; |
|||
|
|||
.back_icon { |
|||
color: #fff; |
|||
font-size: 40rpx; |
|||
font-weight: 600; |
|||
} |
|||
} |
|||
|
|||
.navbar_title { |
|||
color: #fff; |
|||
font-size: 32rpx; |
|||
font-weight: 600; |
|||
} |
|||
|
|||
.navbar_action { |
|||
width: 60rpx; |
|||
} |
|||
} |
|||
|
|||
// 头像区域 |
|||
.avatar_section { |
|||
background: #fff; |
|||
padding: 40rpx 32rpx; |
|||
text-align: center; |
|||
|
|||
.avatar_container { |
|||
position: relative; |
|||
display: inline-block; |
|||
margin-bottom: 24rpx; |
|||
|
|||
.avatar_image { |
|||
width: 120rpx; |
|||
height: 120rpx; |
|||
border-radius: 50%; |
|||
border: 4rpx solid #f0f0f0; |
|||
} |
|||
|
|||
.avatar_edit_icon { |
|||
position: absolute; |
|||
bottom: 0; |
|||
right: 0; |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
background: #29d3b4; |
|||
border-radius: 50%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
border: 2rpx solid #fff; |
|||
|
|||
.edit_text { |
|||
color: #fff; |
|||
font-size: 20rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.student_name { |
|||
font-size: 32rpx; |
|||
font-weight: 600; |
|||
color: #333; |
|||
margin-bottom: 12rpx; |
|||
} |
|||
|
|||
.student_basic_info { |
|||
.info_tag { |
|||
display: inline-block; |
|||
font-size: 22rpx; |
|||
color: #666; |
|||
background: #f0f0f0; |
|||
padding: 6rpx 16rpx; |
|||
border-radius: 16rpx; |
|||
margin: 0 8rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 表单区域 |
|||
.form_section { |
|||
background: #fff; |
|||
margin: 20rpx; |
|||
border-radius: 16rpx; |
|||
padding: 32rpx; |
|||
|
|||
.section_title { |
|||
font-size: 28rpx; |
|||
font-weight: 600; |
|||
color: #333; |
|||
margin-bottom: 32rpx; |
|||
padding-bottom: 16rpx; |
|||
border-bottom: 1px solid #f0f0f0; |
|||
} |
|||
|
|||
.form_item { |
|||
margin-bottom: 32rpx; |
|||
|
|||
&:last-child { |
|||
margin-bottom: 0; |
|||
} |
|||
|
|||
.form_label { |
|||
font-size: 26rpx; |
|||
color: #333; |
|||
margin-bottom: 12rpx; |
|||
font-weight: 500; |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 保存按钮区域 |
|||
.save_section { |
|||
padding: 40rpx 32rpx; |
|||
padding-bottom: 80rpx; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,933 @@ |
|||
<!--学员课程安排页面--> |
|||
<template> |
|||
<view class="main_box"> |
|||
<!-- 自定义导航栏 --> |
|||
<view class="navbar_section"> |
|||
<view class="navbar_back" @click="goBack"> |
|||
<text class="back_icon">‹</text> |
|||
</view> |
|||
<view class="navbar_title">课程安排</view> |
|||
<view class="navbar_action"> |
|||
<view class="today_button" @click="goToToday"> |
|||
<text class="today_text">今天</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 学员信息 --> |
|||
<view class="student_info_section" v-if="studentInfo"> |
|||
<view class="student_name">{{ studentInfo.name }}</view> |
|||
<view class="schedule_stats"> |
|||
<text class="stat_item">本周课程：{{ weeklyStats.total_courses }}节</text> |
|||
<text class="stat_item">已完成：{{ weeklyStats.completed_courses }}节</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 日历切换 --> |
|||
<view class="calendar_section"> |
|||
<view class="calendar_header"> |
|||
<view class="month_controls"> |
|||
<view class="control_button" @click="prevWeek">‹</view> |
|||
<view class="current_period">{{ currentWeekText }}</view> |
|||
<view class="control_button" @click="nextWeek">›</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="week_tabs"> |
|||
<view |
|||
v-for="day in weekDays" |
|||
:key="day.date" |
|||
:class="['week_tab', selectedDate === day.date ? 'active' : '', day.isToday ? 'today' : '']" |
|||
@click="selectDate(day.date)" |
|||
> |
|||
<view class="tab_weekday">{{ day.weekday }}</view> |
|||
<view class="tab_date">{{ day.day }}</view> |
|||
<view class="tab_indicator" v-if="day.hasCourse"></view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 课程列表 --> |
|||
<view class="courses_section"> |
|||
<view v-if="loading" class="loading_section"> |
|||
<view class="loading_text">加载中...</view> |
|||
</view> |
|||
|
|||
<view v-else-if="dailyCourses.length === 0" class="empty_section"> |
|||
<view class="empty_icon">📅</view> |
|||
<view class="empty_text">当日暂无课程安排</view> |
|||
<view class="empty_hint">选择其他日期查看课程</view> |
|||
</view> |
|||
|
|||
<view v-else class="courses_list"> |
|||
<view |
|||
v-for="course in dailyCourses" |
|||
:key="course.id" |
|||
:class="['course_item', course.status]" |
|||
@click="viewCourseDetail(course)" |
|||
> |
|||
<view class="course_time"> |
|||
<view class="time_range">{{ course.start_time }}</view> |
|||
<view class="time_duration">{{ course.duration }}分钟</view> |
|||
</view> |
|||
|
|||
<view class="course_info"> |
|||
<view class="course_name">{{ course.course_name }}</view> |
|||
<view class="course_details"> |
|||
<view class="detail_row"> |
|||
<text class="detail_label">教练：</text> |
|||
<text class="detail_value">{{ course.coach_name }}</text> |
|||
</view> |
|||
<view class="detail_row"> |
|||
<text class="detail_label">场地：</text> |
|||
<text class="detail_value">{{ course.venue_name }}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="course_status"> |
|||
<view :class="['status_badge', course.status]"> |
|||
{{ getStatusText(course.status) }} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 课程详情弹窗 --> |
|||
<view class="course_popup" v-if="showCoursePopup" @click="closeCoursePopup"> |
|||
<view class="popup_content" @click.stop> |
|||
<view class="popup_header"> |
|||
<view class="popup_title">课程详情</view> |
|||
<view class="popup_close" @click="closeCoursePopup">×</view> |
|||
</view> |
|||
|
|||
<view class="popup_course_detail" v-if="selectedCourse"> |
|||
<view class="detail_section"> |
|||
<view class="section_title">基本信息</view> |
|||
<view class="info_grid"> |
|||
<view class="info_row"> |
|||
<text class="info_label">课程名称：</text> |
|||
<text class="info_value">{{ selectedCourse.course_name }}</text> |
|||
</view> |
|||
<view class="info_row"> |
|||
<text class="info_label">上课时间：</text> |
|||
<text class="info_value">{{ formatDateTime(selectedCourse.course_date, selectedCourse.start_time) }}</text> |
|||
</view> |
|||
<view class="info_row"> |
|||
<text class="info_label">课程时长：</text> |
|||
<text class="info_value">{{ selectedCourse.duration }}分钟</text> |
|||
</view> |
|||
<view class="info_row"> |
|||
<text class="info_label">授课教练：</text> |
|||
<text class="info_value">{{ selectedCourse.coach_name }}</text> |
|||
</view> |
|||
<view class="info_row"> |
|||
<text class="info_label">上课地点：</text> |
|||
<text class="info_value">{{ selectedCourse.venue_name }}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="detail_section" v-if="selectedCourse.course_description"> |
|||
<view class="section_title">课程介绍</view> |
|||
<view class="course_description">{{ selectedCourse.course_description }}</view> |
|||
</view> |
|||
|
|||
<view class="detail_section" v-if="selectedCourse.preparation_items"> |
|||
<view class="section_title">课前准备</view> |
|||
<view class="preparation_list"> |
|||
<view |
|||
v-for="item in selectedCourse.preparation_items" |
|||
:key="item" |
|||
class="preparation_item" |
|||
> |
|||
• {{ item }} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="popup_actions"> |
|||
<fui-button |
|||
v-if="selectedCourse && selectedCourse.status === 'scheduled'" |
|||
background="#f39c12" |
|||
@click="requestLeave" |
|||
> |
|||
请假 |
|||
</fui-button> |
|||
|
|||
<fui-button |
|||
background="#f8f9fa" |
|||
color="#666" |
|||
@click="closeCoursePopup" |
|||
> |
|||
关闭 |
|||
</fui-button> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import apiRoute from '@/api/apiRoute.js' |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
studentId: 0, |
|||
studentInfo: {}, |
|||
selectedDate: '', |
|||
currentWeekStart: new Date(), |
|||
weekDays: [], |
|||
dailyCourses: [], |
|||
weeklyStats: {}, |
|||
loading: false, |
|||
showCoursePopup: false, |
|||
selectedCourse: null |
|||
} |
|||
}, |
|||
|
|||
computed: { |
|||
currentWeekText() { |
|||
const start = new Date(this.currentWeekStart) |
|||
const end = new Date(start) |
|||
end.setDate(start.getDate() + 6) |
|||
|
|||
const startMonth = start.getMonth() + 1 |
|||
const startDay = start.getDate() |
|||
const endMonth = end.getMonth() + 1 |
|||
const endDay = end.getDate() |
|||
|
|||
if (startMonth === endMonth) { |
|||
return `${startMonth}月${startDay}日-${endDay}日` |
|||
} else { |
|||
return `${startMonth}月${startDay}日-${endMonth}月${endDay}日` |
|||
} |
|||
} |
|||
}, |
|||
|
|||
onLoad(options) { |
|||
this.studentId = parseInt(options.student_id) || 0 |
|||
if (this.studentId) { |
|||
this.initPage() |
|||
} else { |
|||
uni.showToast({ |
|||
title: '参数错误', |
|||
icon: 'none' |
|||
}) |
|||
} |
|||
}, |
|||
|
|||
methods: { |
|||
goBack() { |
|||
uni.navigateBack() |
|||
}, |
|||
|
|||
async initPage() { |
|||
await this.loadStudentInfo() |
|||
this.generateWeekDays() |
|||
|
|||
// 默认选择今天 |
|||
const today = this.formatDateString(new Date()) |
|||
this.selectedDate = today |
|||
await this.loadDailyCourses() |
|||
await this.loadWeeklyStats() |
|||
}, |
|||
|
|||
async loadStudentInfo() { |
|||
try { |
|||
// 模拟获取学员信息 |
|||
const mockStudentInfo = { |
|||
id: this.studentId, |
|||
name: '小明' |
|||
} |
|||
this.studentInfo = mockStudentInfo |
|||
} catch (error) { |
|||
console.error('获取学员信息失败:', error) |
|||
} |
|||
}, |
|||
|
|||
generateWeekDays() { |
|||
const days = [] |
|||
const startDate = new Date(this.currentWeekStart) |
|||
const today = new Date() |
|||
const todayStr = this.formatDateString(today) |
|||
|
|||
for (let i = 0; i < 7; i++) { |
|||
const date = new Date(startDate) |
|||
date.setDate(startDate.getDate() + i) |
|||
|
|||
const dateStr = this.formatDateString(date) |
|||
days.push({ |
|||
date: dateStr, |
|||
day: date.getDate(), |
|||
weekday: this.getWeekday(date.getDay()), |
|||
isToday: dateStr === todayStr, |
|||
hasCourse: false // 待后续加载课程数据后更新 |
|||
}) |
|||
} |
|||
|
|||
this.weekDays = days |
|||
}, |
|||
|
|||
prevWeek() { |
|||
this.currentWeekStart.setDate(this.currentWeekStart.getDate() - 7) |
|||
this.generateWeekDays() |
|||
this.loadDailyCourses() |
|||
this.loadWeeklyStats() |
|||
}, |
|||
|
|||
nextWeek() { |
|||
this.currentWeekStart.setDate(this.currentWeekStart.getDate() + 7) |
|||
this.generateWeekDays() |
|||
this.loadDailyCourses() |
|||
this.loadWeeklyStats() |
|||
}, |
|||
|
|||
goToToday() { |
|||
const today = new Date() |
|||
this.currentWeekStart = this.getWeekStartDate(today) |
|||
this.generateWeekDays() |
|||
this.selectedDate = this.formatDateString(today) |
|||
this.loadDailyCourses() |
|||
this.loadWeeklyStats() |
|||
}, |
|||
|
|||
selectDate(date) { |
|||
this.selectedDate = date |
|||
this.loadDailyCourses() |
|||
}, |
|||
|
|||
async loadDailyCourses() { |
|||
if (!this.selectedDate) return |
|||
|
|||
this.loading = true |
|||
try { |
|||
console.log('加载课程安排:', this.selectedDate, '学员ID:', this.studentId) |
|||
|
|||
// 调用真实API |
|||
const response = await apiRoute.getCourseScheduleList({ |
|||
student_id: this.studentId, |
|||
date: this.selectedDate |
|||
}) |
|||
|
|||
console.log('课程安排API响应:', response) |
|||
|
|||
if (response.code === 1) { |
|||
// 处理API返回的数据格式 |
|||
const courses = response.data.list || [] |
|||
this.dailyCourses = courses.map(course => ({ |
|||
id: course.id, |
|||
course_date: course.course_date, |
|||
start_time: course.start_time, |
|||
end_time: course.end_time, |
|||
duration: course.duration, |
|||
course_name: course.course_name, |
|||
course_description: course.course_description, |
|||
coach_name: course.coach_name, |
|||
venue_name: course.venue_name, |
|||
status: this.mapApiStatusToFrontend(course.status), |
|||
preparation_items: course.preparation_items || [] |
|||
})) |
|||
|
|||
// 更新周视图中的课程指示器 |
|||
this.updateWeekCourseIndicators() |
|||
|
|||
console.log('课程数据加载成功:', this.dailyCourses) |
|||
} else { |
|||
console.warn('API返回错误，使用模拟数据:', response.msg) |
|||
// 如果API失败，使用模拟数据 |
|||
this.loadMockCourseData() |
|||
} |
|||
} catch (error) { |
|||
console.error('获取课程安排失败:', error) |
|||
console.warn('API调用失败，使用模拟数据') |
|||
// 如果API调用失败，使用模拟数据 |
|||
this.loadMockCourseData() |
|||
} finally { |
|||
this.loading = false |
|||
} |
|||
}, |
|||
|
|||
// 加载模拟课程数据（作为后备方案） |
|||
loadMockCourseData() { |
|||
const mockCourses = [ |
|||
{ |
|||
id: 1, |
|||
course_date: this.selectedDate, |
|||
start_time: '09:00', |
|||
end_time: '10:00', |
|||
duration: 60, |
|||
course_name: '基础体能训练', |
|||
course_description: '通过基础的体能训练动作，提升学员的身体素质，包括力量、耐力、协调性等方面的训练。', |
|||
coach_name: '张教练', |
|||
venue_name: '训练馆A', |
|||
status: 'scheduled', |
|||
preparation_items: ['运动服装', '运动鞋', '毛巾', '水杯'] |
|||
}, |
|||
{ |
|||
id: 2, |
|||
course_date: this.selectedDate, |
|||
start_time: '14:00', |
|||
end_time: '15:30', |
|||
duration: 90, |
|||
course_name: '专项技能训练', |
|||
course_description: '针对特定运动项目进行专项技能训练，提高学员在该项目上的技术水平。', |
|||
coach_name: '李教练', |
|||
venue_name: '训练馆B', |
|||
status: 'completed', |
|||
preparation_items: ['专项器材', '护具', '运动服装'] |
|||
} |
|||
] |
|||
this.dailyCourses = mockCourses |
|||
this.updateWeekCourseIndicators() |
|||
}, |
|||
|
|||
// 映射API状态到前端状态 |
|||
mapApiStatusToFrontend(apiStatus) { |
|||
const statusMap = { |
|||
0: 'scheduled', // 待上课 |
|||
1: 'completed', // 已完成 |
|||
2: 'leave_requested', // 请假 |
|||
3: 'cancelled' // 取消 |
|||
} |
|||
return statusMap[apiStatus] || 'scheduled' |
|||
}, |
|||
|
|||
async loadWeeklyStats() { |
|||
try { |
|||
// 模拟获取本周统计数据 |
|||
const mockStats = { |
|||
total_courses: 8, |
|||
completed_courses: 3, |
|||
scheduled_courses: 4, |
|||
cancelled_courses: 1 |
|||
} |
|||
this.weeklyStats = mockStats |
|||
} catch (error) { |
|||
console.error('获取周统计失败:', error) |
|||
} |
|||
}, |
|||
|
|||
updateWeekCourseIndicators() { |
|||
// 更新周视图中每天是否有课程的指示器 |
|||
this.weekDays.forEach(day => { |
|||
// 这里简化处理，实际应该查询每天的课程数据 |
|||
day.hasCourse = day.date === this.selectedDate && this.dailyCourses.length > 0 |
|||
}) |
|||
}, |
|||
|
|||
viewCourseDetail(course) { |
|||
this.selectedCourse = course |
|||
this.showCoursePopup = true |
|||
}, |
|||
|
|||
closeCoursePopup() { |
|||
this.showCoursePopup = false |
|||
this.selectedCourse = null |
|||
}, |
|||
|
|||
async requestLeave() { |
|||
if (!this.selectedCourse) return |
|||
|
|||
uni.showModal({ |
|||
title: '确认请假', |
|||
content: '确定要为此课程申请请假吗？', |
|||
success: async (res) => { |
|||
if (res.confirm) { |
|||
try { |
|||
console.log('申请请假:', this.selectedCourse.id) |
|||
|
|||
// 调用真实API |
|||
const response = await apiRoute.requestCourseLeave({ |
|||
schedule_id: this.selectedCourse.id, |
|||
reason: '学员申请请假' |
|||
}) |
|||
|
|||
console.log('请假申请API响应:', response) |
|||
|
|||
if (response.code === 1) { |
|||
uni.showToast({ |
|||
title: '请假申请已提交', |
|||
icon: 'success' |
|||
}) |
|||
|
|||
// 更新课程状态 |
|||
const courseIndex = this.dailyCourses.findIndex(c => c.id === this.selectedCourse.id) |
|||
if (courseIndex !== -1) { |
|||
this.dailyCourses[courseIndex].status = 'leave_requested' |
|||
} |
|||
|
|||
this.closeCoursePopup() |
|||
} else { |
|||
uni.showToast({ |
|||
title: response.msg || '请假申请失败', |
|||
icon: 'none' |
|||
}) |
|||
} |
|||
} catch (error) { |
|||
console.error('请假申请失败:', error) |
|||
uni.showToast({ |
|||
title: '请假申请失败', |
|||
icon: 'none' |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
}) |
|||
}, |
|||
|
|||
// 工具方法 |
|||
formatDateString(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}` |
|||
}, |
|||
|
|||
formatDateTime(dateString, timeString) { |
|||
const date = new Date(dateString) |
|||
const month = date.getMonth() + 1 |
|||
const day = date.getDate() |
|||
const weekday = this.getWeekday(date.getDay()) |
|||
return `${month}月${day}日 ${weekday} ${timeString}` |
|||
}, |
|||
|
|||
getWeekday(dayIndex) { |
|||
const weekdays = ['日', '一', '二', '三', '四', '五', '六'] |
|||
return weekdays[dayIndex] |
|||
}, |
|||
|
|||
getWeekStartDate(date) { |
|||
const start = new Date(date) |
|||
const day = start.getDay() |
|||
const diff = start.getDate() - day |
|||
start.setDate(diff) |
|||
return start |
|||
}, |
|||
|
|||
getStatusText(status) { |
|||
const statusMap = { |
|||
'scheduled': '待上课', |
|||
'completed': '已完成', |
|||
'cancelled': '已取消', |
|||
'leave_requested': '请假中' |
|||
} |
|||
return statusMap[status] || status |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.main_box { |
|||
background: #f8f9fa; |
|||
min-height: 100vh; |
|||
} |
|||
|
|||
// 自定义导航栏 |
|||
.navbar_section { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
background: #29D3B4; |
|||
padding: 40rpx 32rpx 20rpx; |
|||
|
|||
// 小程序端适配状态栏 |
|||
// #ifdef MP-WEIXIN |
|||
padding-top: 80rpx; |
|||
// #endif |
|||
|
|||
.navbar_back { |
|||
width: 60rpx; |
|||
|
|||
.back_icon { |
|||
color: #fff; |
|||
font-size: 40rpx; |
|||
font-weight: 600; |
|||
} |
|||
} |
|||
|
|||
.navbar_title { |
|||
color: #fff; |
|||
font-size: 32rpx; |
|||
font-weight: 600; |
|||
} |
|||
|
|||
.navbar_action { |
|||
width: 80rpx; |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
|
|||
.today_button { |
|||
background: rgba(255, 255, 255, 0.2); |
|||
padding: 8rpx 16rpx; |
|||
border-radius: 16rpx; |
|||
|
|||
.today_text { |
|||
color: #fff; |
|||
font-size: 24rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 学员信息 |
|||
.student_info_section { |
|||
background: #fff; |
|||
padding: 24rpx 32rpx; |
|||
border-bottom: 1px solid #f0f0f0; |
|||
|
|||
.student_name { |
|||
font-size: 32rpx; |
|||
font-weight: 600; |
|||
color: #333; |
|||
margin-bottom: 12rpx; |
|||
} |
|||
|
|||
.schedule_stats { |
|||
display: flex; |
|||
gap: 24rpx; |
|||
|
|||
.stat_item { |
|||
font-size: 24rpx; |
|||
color: #666; |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 日历部分 |
|||
.calendar_section { |
|||
background: #fff; |
|||
margin: 20rpx; |
|||
border-radius: 16rpx; |
|||
padding: 24rpx 32rpx; |
|||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08); |
|||
|
|||
.calendar_header { |
|||
margin-bottom: 24rpx; |
|||
|
|||
.month_controls { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
gap: 32rpx; |
|||
|
|||
.control_button { |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
background: #f8f9fa; |
|||
border-radius: 50%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
font-size: 24rpx; |
|||
color: #666; |
|||
} |
|||
|
|||
.current_period { |
|||
font-size: 28rpx; |
|||
font-weight: 600; |
|||
color: #333; |
|||
min-width: 200rpx; |
|||
text-align: center; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.week_tabs { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
|
|||
.week_tab { |
|||
flex: 1; |
|||
text-align: center; |
|||
padding: 16rpx 8rpx; |
|||
border-radius: 12rpx; |
|||
position: relative; |
|||
|
|||
&.active { |
|||
background: #29D3B4; |
|||
color: #fff; |
|||
} |
|||
|
|||
&.today { |
|||
background: rgba(41, 211, 180, 0.1); |
|||
|
|||
&.active { |
|||
background: #29D3B4; |
|||
} |
|||
} |
|||
|
|||
.tab_weekday { |
|||
font-size: 22rpx; |
|||
margin-bottom: 4rpx; |
|||
opacity: 0.8; |
|||
} |
|||
|
|||
.tab_date { |
|||
font-size: 28rpx; |
|||
font-weight: 600; |
|||
} |
|||
|
|||
.tab_indicator { |
|||
position: absolute; |
|||
bottom: 4rpx; |
|||
left: 50%; |
|||
transform: translateX(-50%); |
|||
width: 6rpx; |
|||
height: 6rpx; |
|||
background: #ff4757; |
|||
border-radius: 50%; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 课程列表 |
|||
.courses_section { |
|||
margin: 0 20rpx; |
|||
|
|||
.loading_section, .empty_section { |
|||
background: #fff; |
|||
border-radius: 16rpx; |
|||
padding: 80rpx 32rpx; |
|||
text-align: center; |
|||
|
|||
.loading_text, .empty_text { |
|||
font-size: 28rpx; |
|||
color: #666; |
|||
margin-bottom: 12rpx; |
|||
} |
|||
|
|||
.empty_icon { |
|||
font-size: 80rpx; |
|||
margin-bottom: 24rpx; |
|||
} |
|||
|
|||
.empty_hint { |
|||
font-size: 24rpx; |
|||
color: #999; |
|||
} |
|||
} |
|||
|
|||
.courses_list { |
|||
.course_item { |
|||
background: #fff; |
|||
border-radius: 16rpx; |
|||
padding: 24rpx; |
|||
margin-bottom: 16rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 20rpx; |
|||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06); |
|||
|
|||
&.scheduled { |
|||
border-left: 4rpx solid #29D3B4; |
|||
} |
|||
|
|||
&.completed { |
|||
background: #f8f9fa; |
|||
border-left: 4rpx solid #27ae60; |
|||
} |
|||
|
|||
&.cancelled { |
|||
background: #f8f9fa; |
|||
border-left: 4rpx solid #e74c3c; |
|||
opacity: 0.7; |
|||
} |
|||
|
|||
&.leave_requested { |
|||
background: #f8f9fa; |
|||
border-left: 4rpx solid #f39c12; |
|||
} |
|||
|
|||
.course_time { |
|||
min-width: 100rpx; |
|||
text-align: center; |
|||
|
|||
.time_range { |
|||
font-size: 28rpx; |
|||
font-weight: 600; |
|||
color: #333; |
|||
margin-bottom: 4rpx; |
|||
} |
|||
|
|||
.time_duration { |
|||
font-size: 22rpx; |
|||
color: #999; |
|||
} |
|||
} |
|||
|
|||
.course_info { |
|||
flex: 1; |
|||
|
|||
.course_name { |
|||
font-size: 28rpx; |
|||
font-weight: 600; |
|||
color: #333; |
|||
margin-bottom: 12rpx; |
|||
} |
|||
|
|||
.course_details { |
|||
.detail_row { |
|||
display: flex; |
|||
margin-bottom: 6rpx; |
|||
|
|||
.detail_label { |
|||
font-size: 24rpx; |
|||
color: #666; |
|||
min-width: 80rpx; |
|||
} |
|||
|
|||
.detail_value { |
|||
font-size: 24rpx; |
|||
color: #333; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.course_status { |
|||
.status_badge { |
|||
font-size: 22rpx; |
|||
padding: 6rpx 12rpx; |
|||
border-radius: 12rpx; |
|||
|
|||
&.scheduled { |
|||
color: #29D3B4; |
|||
background: rgba(41, 211, 180, 0.1); |
|||
} |
|||
|
|||
&.completed { |
|||
color: #27ae60; |
|||
background: rgba(39, 174, 96, 0.1); |
|||
} |
|||
|
|||
&.cancelled { |
|||
color: #e74c3c; |
|||
background: rgba(231, 76, 60, 0.1); |
|||
} |
|||
|
|||
&.leave_requested { |
|||
color: #f39c12; |
|||
background: rgba(243, 156, 18, 0.1); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 课程详情弹窗 |
|||
.course_popup { |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
background: rgba(0, 0, 0, 0.5); |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
z-index: 1000; |
|||
|
|||
.popup_content { |
|||
background: #fff; |
|||
border-radius: 16rpx; |
|||
width: 90%; |
|||
max-height: 80vh; |
|||
overflow: hidden; |
|||
|
|||
.popup_header { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding: 32rpx; |
|||
border-bottom: 1px solid #f0f0f0; |
|||
|
|||
.popup_title { |
|||
font-size: 32rpx; |
|||
font-weight: 600; |
|||
color: #333; |
|||
} |
|||
|
|||
.popup_close { |
|||
font-size: 48rpx; |
|||
color: #999; |
|||
font-weight: 300; |
|||
} |
|||
} |
|||
|
|||
.popup_course_detail { |
|||
padding: 32rpx; |
|||
max-height: 60vh; |
|||
overflow-y: auto; |
|||
|
|||
.detail_section { |
|||
margin-bottom: 32rpx; |
|||
|
|||
&:last-child { |
|||
margin-bottom: 0; |
|||
} |
|||
|
|||
.section_title { |
|||
font-size: 28rpx; |
|||
font-weight: 600; |
|||
color: #333; |
|||
margin-bottom: 16rpx; |
|||
padding-bottom: 8rpx; |
|||
border-bottom: 2rpx solid #29D3B4; |
|||
} |
|||
|
|||
.info_grid { |
|||
.info_row { |
|||
display: flex; |
|||
margin-bottom: 12rpx; |
|||
|
|||
.info_label { |
|||
font-size: 26rpx; |
|||
color: #666; |
|||
min-width: 120rpx; |
|||
} |
|||
|
|||
.info_value { |
|||
font-size: 26rpx; |
|||
color: #333; |
|||
flex: 1; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.course_description { |
|||
font-size: 26rpx; |
|||
color: #333; |
|||
line-height: 1.6; |
|||
} |
|||
|
|||
.preparation_list { |
|||
.preparation_item { |
|||
font-size: 24rpx; |
|||
color: #666; |
|||
line-height: 1.5; |
|||
margin-bottom: 8rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.popup_actions { |
|||
padding: 24rpx 32rpx; |
|||
display: flex; |
|||
gap: 16rpx; |
|||
border-top: 1px solid #f0f0f0; |
|||
|
|||
fui-button { |
|||
flex: 1; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,254 @@ |
|||
<!--学员端系统设置页面--> |
|||
<template> |
|||
<view class="settings_container"> |
|||
<!-- 自定义导航栏 --> |
|||
<view class="navbar_section"> |
|||
<view class="navbar_content"> |
|||
<view class="back_button" @click="goBack"> |
|||
<image src="/static/icon-img/back.png" class="back_icon"></image> |
|||
</view> |
|||
<view class="navbar_title">系统设置</view> |
|||
<view class="navbar_placeholder"></view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 设置选项列表 --> |
|||
<view class="settings_section"> |
|||
<view class="setting_item" @click="navigateToProfile"> |
|||
<view class="setting_left"> |
|||
<view class="setting_icon profile_setting"> |
|||
<image src="/static/icon-img/profile.png" class="icon_image"></image> |
|||
</view> |
|||
<view class="setting_text">个人资料</view> |
|||
</view> |
|||
<view class="setting_arrow"> |
|||
<image src="/static/icon-img/arrow-right.png" class="arrow_icon"></image> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="setting_item" @click="navigateToPassword"> |
|||
<view class="setting_left"> |
|||
<view class="setting_icon password_setting"> |
|||
<image src="/static/icon-img/lock.png" class="icon_image"></image> |
|||
</view> |
|||
<view class="setting_text">修改密码</view> |
|||
</view> |
|||
<view class="setting_arrow"> |
|||
<image src="/static/icon-img/arrow-right.png" class="arrow_icon"></image> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="setting_item" @click="navigateToAbout"> |
|||
<view class="setting_left"> |
|||
<view class="setting_icon about_setting"> |
|||
<image src="/static/icon-img/info.png" class="icon_image"></image> |
|||
</view> |
|||
<view class="setting_text">关于我们</view> |
|||
</view> |
|||
<view class="setting_arrow"> |
|||
<image src="/static/icon-img/arrow-right.png" class="arrow_icon"></image> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="setting_item" @click="navigateToPrivacy"> |
|||
<view class="setting_left"> |
|||
<view class="setting_icon privacy_setting"> |
|||
<image src="/static/icon-img/shield.png" class="icon_image"></image> |
|||
</view> |
|||
<view class="setting_text">隐私协议</view> |
|||
</view> |
|||
<view class="setting_arrow"> |
|||
<image src="/static/icon-img/arrow-right.png" class="arrow_icon"></image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 退出登录按钮 --> |
|||
<view class="logout_section"> |
|||
<button class="logout_button" @click="logout">退出登录</button> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
methods: { |
|||
goBack() { |
|||
uni.navigateBack() |
|||
}, |
|||
|
|||
navigateToProfile() { |
|||
uni.navigateTo({ |
|||
url: '/pages-common/profile/personal_info' |
|||
}) |
|||
}, |
|||
|
|||
navigateToPassword() { |
|||
uni.navigateTo({ |
|||
url: '/pages-student/my/update_pass' |
|||
}) |
|||
}, |
|||
|
|||
navigateToAbout() { |
|||
uni.navigateTo({ |
|||
url: '/pages-student/settings/about' |
|||
}) |
|||
}, |
|||
|
|||
navigateToPrivacy() { |
|||
uni.navigateTo({ |
|||
url: '/pages-common/privacy_agreement' |
|||
}) |
|||
}, |
|||
|
|||
logout() { |
|||
uni.showModal({ |
|||
title: '确认退出', |
|||
content: '确定要退出登录吗？', |
|||
success: (res) => { |
|||
if (res.confirm) { |
|||
// 清除本地存储 |
|||
uni.clearStorageSync() |
|||
|
|||
// 跳转到登录页 |
|||
uni.reLaunch({ |
|||
url: '/pages-student/login/login' |
|||
}) |
|||
} |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.settings_container { |
|||
background: #f8f9fa; |
|||
min-height: 100vh; |
|||
} |
|||
|
|||
// 自定义导航栏 |
|||
.navbar_section { |
|||
background: linear-gradient(135deg, #29D3B4 0%, #1BA297 100%); |
|||
padding: 40rpx 32rpx 32rpx; |
|||
|
|||
// 小程序端适配状态栏 |
|||
// #ifdef MP-WEIXIN |
|||
padding-top: 80rpx; |
|||
// #endif |
|||
|
|||
.navbar_content { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
|
|||
.back_button { |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
|
|||
.back_icon { |
|||
width: 24rpx; |
|||
height: 24rpx; |
|||
} |
|||
} |
|||
|
|||
.navbar_title { |
|||
color: #fff; |
|||
font-size: 36rpx; |
|||
font-weight: 600; |
|||
} |
|||
|
|||
.navbar_placeholder { |
|||
width: 40rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 设置选项 |
|||
.settings_section { |
|||
margin: 32rpx 20rpx; |
|||
background: #fff; |
|||
border-radius: 16rpx; |
|||
overflow: hidden; |
|||
|
|||
.setting_item { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
padding: 32rpx; |
|||
border-bottom: 1px solid #f0f0f0; |
|||
|
|||
&:last-child { |
|||
border-bottom: none; |
|||
} |
|||
|
|||
.setting_left { |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 24rpx; |
|||
|
|||
.setting_icon { |
|||
width: 60rpx; |
|||
height: 60rpx; |
|||
border-radius: 50%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
|
|||
&.profile_setting { background: rgba(52, 152, 219, 0.15); } |
|||
&.password_setting { background: rgba(231, 76, 60, 0.15); } |
|||
&.about_setting { background: rgba(155, 89, 182, 0.15); } |
|||
&.privacy_setting { background: rgba(46, 204, 113, 0.15); } |
|||
|
|||
.icon_image { |
|||
width: 32rpx; |
|||
height: 32rpx; |
|||
} |
|||
} |
|||
|
|||
.setting_text { |
|||
font-size: 28rpx; |
|||
color: #333; |
|||
font-weight: 500; |
|||
} |
|||
} |
|||
|
|||
.setting_arrow { |
|||
.arrow_icon { |
|||
width: 20rpx; |
|||
height: 20rpx; |
|||
opacity: 0.6; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 退出登录按钮 |
|||
.logout_section { |
|||
margin: 60rpx 20rpx; |
|||
|
|||
.logout_button { |
|||
width: 100%; |
|||
background: #ff4757; |
|||
color: #fff; |
|||
border: none; |
|||
border-radius: 16rpx; |
|||
padding: 24rpx 0; |
|||
font-size: 28rpx; |
|||
font-weight: 600; |
|||
|
|||
&:active { |
|||
background: #ff3742; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,601 @@ |
|||
{ |
|||
"pages": [ |
|||
{ |
|||
"path": "pages/student/login/login", |
|||
"style": { |
|||
"navigationBarTitleText": "", |
|||
"navigationStyle": "default", |
|||
"navigationBarBackgroundColor": "#fff", |
|||
"navigationBarTextStyle": "white" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/student/home/index", |
|||
"style": { |
|||
"navigationBarTitleText": "首页", |
|||
"navigationStyle": "custom", |
|||
"navigationBarBackgroundColor": "#29d3b4", |
|||
"navigationBarTextStyle": "white" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/common/home/index", |
|||
"style": { |
|||
"navigationBarTitleText": "首页", |
|||
"navigationStyle": "custom", |
|||
"navigationBarBackgroundColor": "#181A20", |
|||
"navigationBarTextStyle": "white" |
|||
} |
|||
} |
|||
{ |
|||
"path": "pages/student/my/set_up", |
|||
"style": { |
|||
"navigationBarTitleText": "设置", |
|||
"navigationStyle": "default", |
|||
"navigationBarBackgroundColor": "#29D3B4", |
|||
"navigationBarTextStyle": "white" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/student/my/update_pass", |
|||
"style": { |
|||
"navigationBarTitleText": "修改密码", |
|||
"navigationStyle": "default", |
|||
"navigationBarBackgroundColor": "#fff", |
|||
"navigationBarTextStyle": "black" |
|||
} |
|||
}, |
|||
|
|||
{ |
|||
"path": "pages/student/my/personal_data", |
|||
"style": { |
|||
"navigationBarTitleText": "个人资料", |
|||
"navigationStyle": "default", |
|||
"navigationBarBackgroundColor": "#333333", |
|||
"navigationBarTextStyle": "white" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/student/profile/index", |
|||
"style": { |
|||
"navigationBarTitleText": "个人信息管理", |
|||
"navigationStyle": "custom", |
|||
"navigationBarBackgroundColor": "#29d3b4", |
|||
"navigationBarTextStyle": "white" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/student/physical-test/index", |
|||
"style": { |
|||
"navigationBarTitleText": "体测数据", |
|||
"navigationStyle": "custom", |
|||
"navigationBarBackgroundColor": "#29d3b4", |
|||
"navigationBarTextStyle": "white" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/student/schedule/index", |
|||
"style": { |
|||
"navigationBarTitleText": "课程安排", |
|||
"navigationStyle": "custom", |
|||
"navigationBarBackgroundColor": "#29d3b4", |
|||
"navigationBarTextStyle": "white" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/student/course-booking/index", |
|||
"style": { |
|||
"navigationBarTitleText": "课程预约", |
|||
"navigationStyle": "custom", |
|||
"navigationBarBackgroundColor": "#29d3b4", |
|||
"navigationBarTextStyle": "white" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/student/orders/index", |
|||
"style": { |
|||
"navigationBarTitleText": "订单管理", |
|||
"navigationStyle": "custom", |
|||
"navigationBarBackgroundColor": "#29d3b4", |
|||
"navigationBarTextStyle": "white" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/student/contracts/index", |
|||
"style": { |
|||
"navigationBarTitleText": "合同管理", |
|||
"navigationStyle": "custom", |
|||
"navigationBarBackgroundColor": "#29d3b4", |
|||
"navigationBarTextStyle": "white" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/student/knowledge/index", |
|||
"style": { |
|||
"navigationBarTitleText": "知识库", |
|||
"navigationStyle": "custom", |
|||
"navigationBarBackgroundColor": "#29d3b4", |
|||
"navigationBarTextStyle": "white" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/student/messages/index", |
|||
"style": { |
|||
"navigationBarTitleText": "消息管理", |
|||
"navigationStyle": "custom", |
|||
"navigationBarBackgroundColor": "#29d3b4", |
|||
"navigationBarTextStyle": "white" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/student/settings/index", |
|||
"style": { |
|||
"navigationBarTitleText": "系统设置", |
|||
"navigationStyle": "custom", |
|||
"navigationBarBackgroundColor": "#29d3b4", |
|||
"navigationBarTextStyle": "white" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/student/child/add", |
|||
"style": { |
|||
"navigationBarTitleText": "添加孩子", |
|||
"navigationStyle": "custom", |
|||
"navigationBarBackgroundColor": "#29d3b4", |
|||
"navigationBarTextStyle": "white" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/common/privacy_agreement", |
|||
"style": { |
|||
"navigationBarTitleText": "隐私协议", |
|||
"navigationStyle": "default", |
|||
"navigationBarBackgroundColor": "#fff", |
|||
"navigationBarTextStyle": "black" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/common/my_message", |
|||
"style": { |
|||
"navigationBarTitleText": "我的消息", |
|||
"navigationStyle": "default", |
|||
"navigationBarBackgroundColor": "#292929", |
|||
"navigationBarTextStyle": "white" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/common/im_chat_info", |
|||
"style": { |
|||
"navigationBarTitleText": "消息", |
|||
"navigationStyle": "default", |
|||
"navigationBarBackgroundColor": "#292929", |
|||
"navigationBarTextStyle": "white" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/common/sys_msg_list", |
|||
"style": { |
|||
"navigationBarTitleText": "系统消息", |
|||
"navigationStyle": "default", |
|||
"navigationBarBackgroundColor": "#292929", |
|||
"navigationBarTextStyle": "white" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/common/article_info", |
|||
"style": { |
|||
"navigationBarTitleText": "文章详情", |
|||
"navigationStyle": "default", |
|||
"navigationBarBackgroundColor": "#292929", |
|||
"navigationBarTextStyle": "white" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/common/feedback", |
|||
"style": { |
|||
"navigationBarTitleText": "意见反馈", |
|||
"navigationStyle": "default", |
|||
"navigationBarBackgroundColor": "#292929", |
|||
"navigationBarTextStyle": "white" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/common/my_attendance", |
|||
"style": { |
|||
"navigationBarTitleText": "我的考勤", |
|||
"navigationStyle": "default", |
|||
"navigationBarBackgroundColor": "#292929", |
|||
"navigationBarTextStyle": "white" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/common/personnel/add_personnel", |
|||
"style": { |
|||
"navigationBarTitleText": "新员工信息填写", |
|||
"navigationStyle": "custom", |
|||
"navigationBarBackgroundColor": "#fff", |
|||
"navigationBarTextStyle": "black" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/common/contract/my_contract", |
|||
"style": { |
|||
"navigationBarTitleText": "我的合同", |
|||
"navigationStyle": "default", |
|||
"navigationBarBackgroundColor": "#29d3b4", |
|||
"navigationBarTextStyle": "white", |
|||
"enablePullDownRefresh": true |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/common/contract/contract_detail", |
|||
"style": { |
|||
"navigationBarTitleText": "合同详情", |
|||
"navigationStyle": "default", |
|||
"navigationBarBackgroundColor": "#29d3b4", |
|||
"navigationBarTextStyle": "white" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/coach/student/student_list", |
|||
"style": { |
|||
"navigationBarTitleText": "我的学员", |
|||
"navigationBarBackgroundColor": "#29d3b4", |
|||
"navigationBarTextStyle": "white" |
|||
} |
|||
}, |
|||
|
|||
{ |
|||
"path": "pages/coach/my/teaching_management", |
|||
"style": { |
|||
"navigationBarTitleText": "教研管理列表", |
|||
"navigationStyle": "default", |
|||
"navigationBarBackgroundColor": "#171717", |
|||
"navigationBarTextStyle": "white" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/coach/my/gotake_exam", |
|||
"style": { |
|||
"navigationBarTitleText": "考试", |
|||
"navigationStyle": "default", |
|||
"navigationBarBackgroundColor": "#171717", |
|||
"navigationBarTextStyle": "white" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/coach/my/exam_results", |
|||
"style": { |
|||
"navigationBarTitleText": "考试结果", |
|||
"navigationStyle": "default", |
|||
"navigationBarBackgroundColor": "#fff", |
|||
"navigationBarTextStyle": "black" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/coach/my/salary", |
|||
"style": { |
|||
"navigationBarTitleText": "我的工资", |
|||
"navigationStyle": "default", |
|||
"navigationBarBackgroundColor": "#29d3b4", |
|||
"navigationBarTextStyle": "white" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/market/clue/add_clues", |
|||
"style": { |
|||
"navigationBarTitleText": "添加客户", |
|||
"navigationStyle": "default", |
|||
"navigationBarBackgroundColor": "#fff", |
|||
"navigationBarTextStyle": "black" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/market/clue/edit_clues", |
|||
"style": { |
|||
"navigationBarTitleText": "编辑客户", |
|||
"navigationStyle": "default", |
|||
"navigationBarBackgroundColor": "#fff", |
|||
"navigationBarTextStyle": "black" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/market/clue/edit_clues_log", |
|||
"style": { |
|||
"navigationBarTitleText": "修改记录", |
|||
"navigationStyle": "default", |
|||
"navigationBarBackgroundColor": "#fff", |
|||
"navigationBarTextStyle": "black" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/market/clue/clue_info", |
|||
"style": { |
|||
"navigationBarTitleText": "客户详情", |
|||
"navigationStyle": "default", |
|||
"navigationBarBackgroundColor": "#29d3b4", |
|||
"navigationBarTextStyle": "black" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/market/clue/index", |
|||
"style": { |
|||
"navigationBarTitleText": "线索", |
|||
"navigationStyle": "default", |
|||
"navigationBarBackgroundColor": "#292929", |
|||
"navigationBarTextStyle": "white" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/market/index/index", |
|||
"style": { |
|||
"navigationBarTitleText": "销售数据" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/market/my/index", |
|||
"style": { |
|||
"navigationBarTitleText": "我的", |
|||
"navigationStyle": "custom", |
|||
"navigationBarBackgroundColor": "#fff", |
|||
"navigationBarTextStyle": "black" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/market/my/signed_client_list", |
|||
"style": { |
|||
"navigationBarTitleText": "已签客户", |
|||
"navigationStyle": "default", |
|||
"navigationBarBackgroundColor": "#292929", |
|||
"navigationBarTextStyle": "white" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/market/my/info", |
|||
"style": { |
|||
"navigationBarTitleText": "个人资料", |
|||
"navigationStyle": "default", |
|||
"navigationBarBackgroundColor": "#292929", |
|||
"navigationBarTextStyle": "white" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/market/my/set_up", |
|||
"style": { |
|||
"navigationBarTitleText": "设置", |
|||
"navigationStyle": "default", |
|||
"navigationBarBackgroundColor": "#292929", |
|||
"navigationBarTextStyle": "white" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/market/my/update_pass", |
|||
"style": { |
|||
"navigationBarTitleText": "修改密码", |
|||
"navigationStyle": "default", |
|||
"navigationBarBackgroundColor": "#fff", |
|||
"navigationBarTextStyle": "black" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/market/my/my_data", |
|||
"style": { |
|||
"navigationBarTitleText": "我的数据", |
|||
"navigationStyle": "custom", |
|||
"navigationBarBackgroundColor": "#29d3b4", |
|||
"navigationBarTextStyle": "white" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/market/my/dept_data", |
|||
"style": { |
|||
"navigationBarTitleText": "部门数据", |
|||
"navigationStyle": "custom", |
|||
"navigationBarBackgroundColor": "#29d3b4", |
|||
"navigationBarTextStyle": "white" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/market/my/campus_data", |
|||
"style": { |
|||
"navigationBarTitleText": "校区数据", |
|||
"navigationStyle": "custom", |
|||
"navigationBarBackgroundColor": "#29d3b4", |
|||
"navigationBarTextStyle": "white" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/market/clue/class_arrangement", |
|||
"style": { |
|||
"navigationBarTitleText": "课程安排", |
|||
"navigationStyle": "default", |
|||
"navigationBarBackgroundColor": "#232323", |
|||
"navigationBarTextStyle": "white" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/market/clue/class_arrangement_detail", |
|||
"style": { |
|||
"navigationBarTitleText": "课程安排详情", |
|||
"navigationStyle": "default", |
|||
"navigationBarBackgroundColor": "#232323", |
|||
"navigationBarTextStyle": "white" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/market/reimbursement/list", |
|||
"style": { |
|||
"navigationBarTitleText": "报销列表", |
|||
"navigationBarBackgroundColor": "#292929", |
|||
"navigationBarTextStyle": "white" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/market/reimbursement/add", |
|||
"style": { |
|||
"navigationBarTitleText": "新增报销", |
|||
"navigationBarBackgroundColor": "#292929", |
|||
"navigationBarTextStyle": "white" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/market/reimbursement/detail", |
|||
"style": { |
|||
"navigationBarTitleText": "报销详情", |
|||
"navigationBarBackgroundColor": "#292929", |
|||
"navigationBarTextStyle": "white" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/market/data/statistics", |
|||
"style": { |
|||
"navigationBarTitleText": "市场数据统计", |
|||
"navigationBarBackgroundColor": "#292929", |
|||
"navigationBarTextStyle": "white" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/coach/schedule/schedule_table", |
|||
"style": { |
|||
"navigationBarTitleText": "课程安排", |
|||
"navigationBarBackgroundColor": "#292929", |
|||
"navigationBarTextStyle": "white" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/coach/schedule/add_schedule", |
|||
"style": { |
|||
"navigationBarTitleText": "添加课程安排", |
|||
"navigationBarBackgroundColor": "#292929", |
|||
"navigationBarTextStyle": "white" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/coach/schedule/adjust_course", |
|||
"style": { |
|||
"navigationBarTitleText": "调整课程安排", |
|||
"navigationBarBackgroundColor": "#292929", |
|||
"navigationBarTextStyle": "white" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/coach/schedule/sign_in", |
|||
"style": { |
|||
"navigationBarTitleText": "课程点名", |
|||
"navigationStyle": "custom", |
|||
"navigationBarBackgroundColor": "#292929", |
|||
"navigationBarTextStyle": "white" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/market/clue/clue_table", |
|||
"style": { |
|||
"navigationBarTitleText": "数据统计", |
|||
"navigationBarBackgroundColor": "#292929", |
|||
"navigationBarTextStyle": "white" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/common/home/index", |
|||
"style": { |
|||
"navigationBarTitleText": "首页", |
|||
"navigationStyle": "custom", |
|||
"navigationBarBackgroundColor": "#181A20", |
|||
"navigationBarTextStyle": "white" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/common/profile/index", |
|||
"style": { |
|||
"navigationBarTitleText": "我的", |
|||
"navigationStyle": "custom", |
|||
"navigationBarBackgroundColor": "#181A20", |
|||
"navigationBarTextStyle": "white" |
|||
} |
|||
} |
|||
, |
|||
{ |
|||
"path": "pages/common/profile/personal_info", |
|||
"style": { |
|||
"navigationBarTitleText": "个人资料", |
|||
"navigationStyle": "custom", |
|||
"navigationBarBackgroundColor": "#181A20", |
|||
"navigationBarTextStyle": "white" |
|||
} |
|||
} |
|||
, |
|||
{ |
|||
"path": "pages/contract/list", |
|||
"style": { |
|||
"navigationBarTitleText": "我的合同", |
|||
"navigationBarBackgroundColor": "#181A20", |
|||
"navigationBarTextStyle": "white", |
|||
"backgroundColor": "#181A20" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/contract/fill", |
|||
"style": { |
|||
"navigationBarTitleText": "填写信息", |
|||
"navigationBarBackgroundColor": "#181A20", |
|||
"navigationBarTextStyle": "white", |
|||
"backgroundColor": "#181A20" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/contract/detail", |
|||
"style": { |
|||
"navigationBarTitleText": "合同详情", |
|||
"navigationBarBackgroundColor": "#181A20", |
|||
"navigationBarTextStyle": "white", |
|||
"backgroundColor": "#181A20" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/common/contract/contract_sign", |
|||
"style": { |
|||
"navigationBarTitleText": "电子签名", |
|||
"navigationBarBackgroundColor": "#181A20", |
|||
"navigationBarTextStyle": "white", |
|||
"backgroundColor": "#181A20" |
|||
} |
|||
} |
|||
|
|||
], |
|||
"globalStyle": { |
|||
"navigationBarTextStyle": "white", |
|||
"navigationBarTitleText": "", |
|||
"navigationBarBackgroundColor": "#181A20", |
|||
"backgroundColor": "#FDFDFD", |
|||
"enablePullDownRefresh": true |
|||
}, |
|||
"tabBar": { |
|||
"color": "#7A7E83", |
|||
"selectedColor": "#29d3b4", |
|||
"borderStyle": "black", |
|||
"backgroundColor": "#1a1a1a", |
|||
"list": [ |
|||
{ |
|||
"pagePath": "pages/common/home/index", |
|||
"iconPath": "static/icon-img/home.png", |
|||
"selectedIconPath": "static/icon-img/home-active.png", |
|||
"text": "首页" |
|||
}, |
|||
{ |
|||
"pagePath": "pages/common/profile/index", |
|||
"iconPath": "static/icon-img/profile.png", |
|||
"selectedIconPath": "static/icon-img/profile-active.png", |
|||
"text": "我的" |
|||
} |
|||
] |
|||
}, |
|||
"easycom": { |
|||
"autoscan": true, |
|||
"custom": { |
|||
"fui-(.*)": "@/components/firstui/fui-$1/fui-$1.vue", |
|||
"uni-icons": "@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue", |
|||
"uni-calendar": "@/uni_modules/uni-calendar/components/uni-calendar/uni-calendar.vue", |
|||
"uni-file-picker": "@/uni_modules/uni-file-picker/components/uni-file-picker/uni-file-picker.vue" |
|||
} |
|||
} |
|||
} |
|||
Some files were not shown because too many files changed in this diff
Loading…
Reference in new issue