445 lines
13 KiB
Vue
445 lines
13 KiB
Vue
<template>
|
|
<view style="background-color: #242A38; height: auto; min-height: 100vh;">
|
|
<view class="w700 flex-row justify-center">
|
|
<u-tabs :list="list" :current="current" @click="changeTab" lineWidth="250rpx" lineColor="#d2c3af"
|
|
lineHeight="5rpx" :activeStyle="{
|
|
color: '#d2c3af',
|
|
fontWeight: 'bold',
|
|
transform: 'scale(1.05)'
|
|
}" :inactiveStyle="{
|
|
color: '#d2c3af',
|
|
transform: 'scale(1)'
|
|
}" itemStyle="margin-top: 20rpx;margin-bottom: 20rpx; width:300rpx; "></u-tabs>
|
|
|
|
</view>
|
|
|
|
<view class="w750 flex-col align-center " style="height: 100%;" v-show="current == 0">
|
|
<view class="goodList">
|
|
<view class="goods" v-for="(item,index) in schoolInstructorList" :key="index">
|
|
<view class="goodImg">
|
|
<!-- <u--image radius="10rpx" width="203rpx" height="172rpx" :showLoading="false"
|
|
:src="baseUrl + firstSubstring(item.image)"></u--image> -->
|
|
<u-album :urls="showImageUrl(item.image)" maxCount="1" multipleSize="203rpx"
|
|
:showMore="false"></u-album>
|
|
</view>
|
|
|
|
<view class="goodTitle flex-row justify-between" style="height: 172rpx;">
|
|
<view class="section_2 flex-col justify-between">
|
|
<view class="flex-row justify-between">
|
|
<text class="text_9">{{ item.instructorName}}</text>
|
|
<text class="text_10">教练</text>
|
|
</view>
|
|
<text class="text_11">{{ item.drivingYear }}年驾龄</text>
|
|
<text class="text_12">从业{{ item.experienceYear }}年</text>
|
|
<uni-rate :size="18" :value="item.averageStar" :readonly="true" />
|
|
</view>
|
|
<view class="section_3 flex-col justify-between">
|
|
<view class="image-text_1 flex-row justify-between">
|
|
<image class="label_2" :src="imagesUrl+'fire.png'" />
|
|
<text class="text-group_1">明星教练</text>
|
|
</view>
|
|
<view class="text-wrapper_5 flex-col"
|
|
@click="appointment(item.instructorId,item.instructorName)">
|
|
<text class="text_13">预约</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="w750 padding flex-col align-center " v-show="current == 1" style="min-height: 100%;">
|
|
<view class="response padding bg-white margin-bottom border-bottom" style="border-radius: 20rpx;"
|
|
v-for="(item, index) in appointmentList" :key="index">
|
|
<view class="margin-bottom flex-row justify-between">
|
|
<text>预约时间:{{item.appointmentDate}} {{ item.appointmentInterval }}</text>
|
|
<text>预约科目:{{item.category}}</text>
|
|
</view>
|
|
|
|
<view class="flex-row justify-between">
|
|
<text>预约教练:{{item.instructorName}}</text>
|
|
|
|
<view class="pjbtn" @click="commentOpen(item.appointmentId,item.instructorId,item.instructorName)"
|
|
v-if="!item.commentContent">
|
|
<text>评价</text>
|
|
</view>
|
|
<view class="pjbtn" @click="commentView(item.commentContent,item.commentTime,item.commentStar)"
|
|
v-else>
|
|
<text>查看评价</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<u-popup :show="commentInputShow" mode="center" :closeable="true" @close="commentInputShow = false"
|
|
:customStyle="{backgroundColor:'transparent'}">
|
|
<view class="nickname-pop">
|
|
<text class="nickname-label">评价教练</text>
|
|
<view class="nickname-input margin-bottom-xs">
|
|
<text style="color: #d2c3af; width: 400rpx; font-size: 18px;">教练姓名:
|
|
{{ comment.instructorName }}</text>
|
|
|
|
<input class="input-style" v-model.trim="comment.instructorName" readonly border="surround"
|
|
:disabled="true" style="display: none;" />
|
|
<input class="input-style" v-model.trim="comment.instructorId" readonly border="surround"
|
|
:disabled="true" style="display: none;" />
|
|
</view>
|
|
<view class="nickname-input margin-bottom-xs">
|
|
<text style="color: #d2c3af; width: 160rpx; font-size: 18px;">评价内容:</text>
|
|
|
|
</view>
|
|
<u--textarea v-model.trim="comment.commentContent" placeholder="请输入评价内容" count
|
|
border="bottom"></u--textarea>
|
|
<view class="nickname-input margin-bottom-xs">
|
|
<text style="color: #d2c3af; width: 160rpx; font-size: 18px;">星级评价:</text>
|
|
<uni-rate v-model="comment.commentStar" />
|
|
</view>
|
|
|
|
<view class="button-style">
|
|
<u-button color="linear-gradient(to right, rgb(244, 230, 186), rgb(252, 236, 210))"
|
|
shape="circle" text="提交" throttleTime="3000" @click="addInstuctorComment"
|
|
:customStyle="{color:'#000',height:'60rpx'}"></u-button>
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
<!-- 查看評論 -->
|
|
<u-popup :show="commentViewShow" mode="center" :closeable="true" @close="commentViewShow = false"
|
|
:customStyle="{backgroundColor:'transparent'}">
|
|
<view class="nickname-pop">
|
|
<text class="nickname-label">评价教练</text>
|
|
<view class="nickname-input margin-bottom-xs">
|
|
<text style="color: #d2c3af; width: 400rpx; ">评价时间: {{ commentViewObj.commentTime }}</text>
|
|
</view>
|
|
<view class="nickname-input margin-bottom-xs">
|
|
<text style="color: #d2c3af; width: 400rpx;">评价内容: {{ commentViewObj.commentContent }}</text>
|
|
</view>
|
|
|
|
<view class="nickname-input margin-bottom-xs">
|
|
<text style="color: #d2c3af; width: 400rpx;">星级评价: </text>
|
|
<uni-rate v-model="commentViewObj.commentStar" :readonly="true" />
|
|
</view>
|
|
|
|
<view class="button-style">
|
|
<u-button color="linear-gradient(to right, rgb(244, 230, 186), rgb(252, 236, 210))"
|
|
shape="circle" text="关闭" throttleTime="3000" @click="commentViewShow = false"
|
|
:customStyle="{color:'#000',height:'60rpx'}"></u-button>
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
</view>
|
|
</view>
|
|
|
|
</template>
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
list: [{
|
|
name: '预约练车',
|
|
}, {
|
|
name: '预约纪录',
|
|
}],
|
|
current: 0,
|
|
imagesUrl: getApp().globalData.config.imagesUrl,
|
|
baseUrl: getApp().globalData.config.baseUrl,
|
|
schoolInstructorList: [],
|
|
postData: {
|
|
realName: null,
|
|
phoneNumber: '',
|
|
appointmentDate: null,
|
|
appointmentInterval: '',
|
|
instructorId: '',
|
|
instructorName: '',
|
|
category: '',
|
|
},
|
|
categoryShow: false,
|
|
categoryColumns: [
|
|
['科目二', '科目三']
|
|
],
|
|
intervalShow: false,
|
|
intervalColumns: [
|
|
['上午', '下午', '全天']
|
|
],
|
|
appointmentDateShow: false,
|
|
maxDate: null,
|
|
minDate: null,
|
|
carRecordDatePickerShow: false,
|
|
appointmentInputShow: false,
|
|
appointmentList: [],
|
|
comment: {
|
|
instructorId: '',
|
|
instructorName: '',
|
|
commentContent: '',
|
|
commentStar: '',
|
|
appointmentId: '',
|
|
userId: ''
|
|
},
|
|
commentInputShow: false,
|
|
commentViewShow: false,
|
|
commentViewObj: {
|
|
commentContent: '',
|
|
commentTime: '',
|
|
commentStar: ''
|
|
},
|
|
|
|
isLoadMore: false, //是否加载中
|
|
params: {
|
|
pageSize: 10,
|
|
pageNum: 1,
|
|
},
|
|
|
|
isLoadMorer: false, //是否加载中
|
|
paramsr: {
|
|
pageSize: 10,
|
|
pageNum: 1,
|
|
},
|
|
|
|
};
|
|
},
|
|
onLoad(option) {
|
|
this.current = option.tab
|
|
this.getSchoolInstructorlist()
|
|
this.getAppointmentList()
|
|
this.getUserInfo()
|
|
},
|
|
onReachBottom() {
|
|
if (!this.isLoadMore) { //此处判断，上锁，防止重复请求
|
|
this.isLoadMore = true
|
|
this.params.pageNum++
|
|
this.getSchoolInstructorlist()
|
|
}
|
|
if (!this.isLoadMorer) { //此处判断，上锁，防止重复请求
|
|
this.isLoadMorer = true
|
|
this.paramsr.pageNum++
|
|
this.getAppointmentList()
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
showImageUrl(string) {
|
|
let arr = string.split(',')
|
|
for (let i = 0; i < arr.length; i++) {
|
|
arr[i] = this.baseUrl + arr[i]
|
|
}
|
|
return arr;
|
|
},
|
|
// 按逗号分隔字符串，获取第一个元素，用于图片展示
|
|
firstSubstring(string) {
|
|
if (string.includes(',')) {
|
|
return string.split(',')[0];
|
|
} else {
|
|
return string;
|
|
}
|
|
},
|
|
async getSchoolInstructorlist() {
|
|
const res = await this.$request({
|
|
url: '/system/schoolInstructor/listWx',
|
|
data: this.params
|
|
})
|
|
this.schoolInstructorList = this.schoolInstructorList.concat(res.rows);
|
|
|
|
if (res.rows.length < this.params.pageSize) { //判断接口返回数据量小于请求数据量，则表示此为最后一页
|
|
this.status = 'nomore';
|
|
this.isLoadMore = true
|
|
} else {
|
|
this.isLoadMore = false
|
|
}
|
|
|
|
},
|
|
|
|
changeTab(e) {
|
|
this.current = e.index
|
|
|
|
|
|
|
|
console.log(e);
|
|
},
|
|
// 预约登记跳转
|
|
appointment(id, name) {
|
|
// this.appointmentInputShow = true
|
|
// this.postData.instructorName = name
|
|
// this.postData.instructorId = id
|
|
// this.getMaxDateAndMinDate()
|
|
// this.getUserInfo()
|
|
|
|
this.$tab.navigateTo("/subSchoolPages/appointmentPage/appointmentPage?instructorId=" + id +
|
|
"&instructorName=" + name)
|
|
},
|
|
// 项目选择器
|
|
chooseCategory(e) {
|
|
this.postData.category = e.value[0]
|
|
this.closePicker()
|
|
},
|
|
closePicker() {
|
|
this.categoryShow = false
|
|
this.intervalShow = false
|
|
},
|
|
// 时间段选择器
|
|
chooseInterval(e) {
|
|
this.postData.appointmentInterval = e.value[0]
|
|
this.closePicker()
|
|
},
|
|
// 获取最大日期和最小日期
|
|
getMaxDateAndMinDate() {
|
|
const currentDate = new Date(); // 获取当前日期
|
|
const thirtyYearsAgo = new Date(currentDate.getFullYear(), currentDate.getMonth() + 3, currentDate
|
|
.getDate()); // 30年之前的日期
|
|
this.maxDate = thirtyYearsAgo.getTime();
|
|
this.minDate = Number(currentDate);
|
|
},
|
|
// 选择预约日期
|
|
appointmentDateConfirm(e) {
|
|
console.log(e.value);
|
|
this.postData.appointmentDate = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
|
|
this.appointmentDateShow = false
|
|
},
|
|
|
|
// 获取用户信息
|
|
async getUserInfo() {
|
|
const res = await this.$request({
|
|
url: '/getInfo',
|
|
})
|
|
if (res.code == 200 && res.hasOwnProperty('user')) {
|
|
this.user = res.user
|
|
this.postData.phoneNumber = res.user.phonenumber
|
|
this.postData.realName = res.user.realName
|
|
}
|
|
},
|
|
|
|
// 获取预约记录
|
|
async getAppointmentList() {
|
|
const res = await this.$request({
|
|
url: '/system/schoolAppointmentInfo/listWx',
|
|
data: this.paramsr
|
|
})
|
|
this.appointmentList = this.appointmentList.concat(res.rows);
|
|
|
|
if (res.rows.length < this.params.pageSize) { //判断接口返回数据量小于请求数据量，则表示此为最后一页
|
|
this.isLoadMorer = true
|
|
} else {
|
|
this.isLoadMorer = false
|
|
}
|
|
|
|
},
|
|
// 评价弹窗
|
|
commentOpen(appointmentId, instructorId, instructorName) {
|
|
this.commentInputShow = true
|
|
this.comment = {};
|
|
this.comment.instructorName = instructorName
|
|
this.comment.instructorId = instructorId
|
|
this.comment.appointmentId = appointmentId
|
|
},
|
|
// 提交评论
|
|
async addInstuctorComment() {
|
|
if (uni.$u.test.isEmpty(this.comment.appointmentId)) {
|
|
return this.$modal.msgError('预约id不存在')
|
|
}
|
|
if (uni.$u.test.isEmpty(this.comment.instructorId)) {
|
|
return this.$modal.msgError('请选择教练')
|
|
}
|
|
if (uni.$u.test.isEmpty(this.comment.instructorName)) {
|
|
return this.$modal.msgError('请选择教练')
|
|
}
|
|
if (uni.$u.test.isEmpty(this.comment.commentContent)) {
|
|
return this.$modal.msgError('请填写评价内容')
|
|
}
|
|
if (uni.$u.test.isEmpty(this.comment.commentStar)) {
|
|
return this.$modal.msgError('请星级评价')
|
|
}
|
|
const res = await this.$request({
|
|
url: '/system/schoolInstuctorComment/addWx',
|
|
method: 'POST',
|
|
data: this.comment
|
|
})
|
|
this.$modal.msgSuccess('评价成功')
|
|
setTimeout(() => {
|
|
this.commentInputShow = false
|
|
this.$tab.navigateTo("/subSchoolPages/appointment/appointment?tab=1")
|
|
}, 1500)
|
|
},
|
|
// 查看评价
|
|
commentView(commentContent, commentTime, commentStar) {
|
|
this.commentViewShow = true
|
|
this.commentViewObj.commentContent = commentContent;
|
|
this.commentViewObj.commentTime = commentTime;
|
|
this.commentViewObj.commentStar = commentStar;
|
|
console.log(this.commentViewObj);
|
|
}
|
|
|
|
},
|
|
};
|
|
</script>
|
|
<style scoped lang="scss">
|
|
@import './index.rpx.css';
|
|
|
|
page {
|
|
min-height: 100vh;
|
|
}
|
|
|
|
/deep/.u-icon__icon {
|
|
font-size: 30px !important;
|
|
}
|
|
|
|
.goodList {
|
|
margin: 20rpx auto 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
width: 700rpx;
|
|
|
|
.goods {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
background-color: rgba(255, 255, 255, 1);
|
|
border-radius: 10px;
|
|
width: 700rpx;
|
|
height: 217rpx;
|
|
margin-bottom: 20rpx;
|
|
|
|
.goodTitle {}
|
|
|
|
.goodImg {
|
|
border-radius: 25rpx;
|
|
margin: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.nickname-pop {
|
|
width: 680rpx;
|
|
padding: 70rpx 50rpx 0rpx;
|
|
background: #242a38;
|
|
border-radius: 10rpx;
|
|
}
|
|
|
|
.nickname-input {
|
|
width: 100%;
|
|
font-size: 26rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.nickname-label {
|
|
font-size: 60rpx;
|
|
display: block;
|
|
margin-bottom: 20rpx;
|
|
text-align: center;
|
|
color: #d2c3af;
|
|
}
|
|
|
|
.input-style {
|
|
border-bottom: 1px solid #d2c3af;
|
|
display: block;
|
|
width: 100%;
|
|
height: 60rpx;
|
|
color: #d2c3af;
|
|
}
|
|
|
|
.button-style {
|
|
width: 600rpx;
|
|
margin: 20rpx auto;
|
|
}
|
|
</style> |