334 lines
9.1 KiB
Vue
334 lines
9.1 KiB
Vue
<template>
|
|
<view style="background-color: #242A38; height: auto; min-height: 100vh;">
|
|
|
|
<view class="w750 flex-col align-center " style="height: 100%;" v-if="current == 0">
|
|
<view class="goodList" v-if="schoolInstructorList.length > 0">
|
|
<view class="flex-col goods" v-for="(item,index) in schoolInstructorList" :key="index">
|
|
<view class="flex-row justify-between">
|
|
<view class="flex-col margin-top margin-left margin-bottom">
|
|
<!-- <u--image radius="10rpx" width="203rpx" height="300rpx" :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="flex-col margin " style="width: 400rpx;">
|
|
<view class="flex-col justify-between">
|
|
<view>
|
|
<text class="text_9 margin-right-xs">{{ item.instructorName}}</text>
|
|
<text class="text_10">教练 {{ item.sex == '1' ? '女' : '男' }}</text>
|
|
<uni-rate :size="18" :value="item.averageStar" :readonly="true" />
|
|
</view>
|
|
|
|
<view class="flex-row" style="height: 60rpx;">
|
|
<text class="margin-right-sm">{{ item.drivingYear }}年驾龄</text>
|
|
<text class="">从业{{ item.experienceYear }}年</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="flex-col">
|
|
<u--text :lines="6" :text="item.instructorDesc" size="24rpx"></u--text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<u-empty mode="list" v-else marginTop="150" iconSize="200" textSize="30rpx">
|
|
</u-empty>
|
|
<u-loading-page :loading="loading" loading-mode="semicircle" icon-size="100" font-size="40"
|
|
bg-color="#242a38"></u-loading-page>
|
|
|
|
<u-loadmore :status="status" line fontSize="22rpx" />
|
|
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
urls2: [
|
|
'https://cdn.uviewui.com/uview/album/1.jpg',
|
|
'https://cdn.uviewui.com/uview/album/2.jpg',
|
|
'https://cdn.uviewui.com/uview/album/3.jpg',
|
|
'https://cdn.uviewui.com/uview/album/4.jpg',
|
|
'https://cdn.uviewui.com/uview/album/5.jpg',
|
|
'https://cdn.uviewui.com/uview/album/6.jpg',
|
|
'https://cdn.uviewui.com/uview/album/7.jpg',
|
|
'https://cdn.uviewui.com/uview/album/8.jpg',
|
|
'https://cdn.uviewui.com/uview/album/9.jpg',
|
|
'https://cdn.uviewui.com/uview/album/10.jpg',
|
|
],
|
|
|
|
list: [{
|
|
name: '预约练车',
|
|
}, {
|
|
name: '预约纪录',
|
|
}],
|
|
current: 0,
|
|
imagesUrl: getApp().globalData.config.imagesUrl,
|
|
baseUrl: getApp().globalData.config.baseUrl,
|
|
schoolInstructorList: [],
|
|
isLoadMore: false, //是否加载中
|
|
params: {
|
|
pageSize: 10,
|
|
pageNum: 1,
|
|
},
|
|
status: 'loadmore',
|
|
loading: false
|
|
|
|
};
|
|
},
|
|
onLoad(option) {
|
|
this.getSchoolInstructorlist()
|
|
this.loading = true
|
|
},
|
|
onReachBottom() {
|
|
if (!this.isLoadMore) { //此处判断，上锁，防止重复请求
|
|
this.status = 'loading';
|
|
this.isLoadMore = true
|
|
this.params.pageNum++
|
|
this.getSchoolInstructorlist()
|
|
}
|
|
},
|
|
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.loading = false
|
|
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
|
|
this.getAppointmentList()
|
|
},
|
|
// 报名弹窗
|
|
appointment(id, name) {
|
|
this.appointmentInputShow = true
|
|
this.postData.instructorName = name
|
|
this.postData.instructorId = id
|
|
this.getMaxDateAndMinDate()
|
|
this.getUserInfo()
|
|
},
|
|
// 项目选择器
|
|
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 addWx() {
|
|
if (uni.$u.test.isEmpty(this.postData.instructorId)) {
|
|
return this.$modal.msgError('请选择教练')
|
|
}
|
|
if (uni.$u.test.isEmpty(this.postData.instructorName)) {
|
|
return this.$modal.msgError('请选择教练')
|
|
}
|
|
if (uni.$u.test.isEmpty(this.postData.appointmentDate)) {
|
|
return this.$modal.msgError('请选择预约日期')
|
|
}
|
|
if (uni.$u.test.isEmpty(this.postData.appointmentInterval)) {
|
|
return this.$modal.msgError('请选择预约时间')
|
|
}
|
|
if (uni.$u.test.isEmpty(this.postData.category)) {
|
|
return this.$modal.msgError('请选择练车项目')
|
|
}
|
|
if (uni.$u.test.isEmpty(this.postData.realName)) {
|
|
return this.$modal.msgError('请填写姓名')
|
|
}
|
|
if (uni.$u.test.isEmpty(this.postData.phoneNumber)) {
|
|
return this.$modal.msgError('请填写联系电话')
|
|
}
|
|
|
|
const res = await this.$request({
|
|
url: '/system/schoolAppointmentInfo/addWx',
|
|
method: 'POST',
|
|
data: this.postData
|
|
})
|
|
this.$modal.msgSuccess('预约成功')
|
|
setTimeout(() => {
|
|
this.appointmentInputShow = false
|
|
}, 1500)
|
|
},
|
|
// 获取预约记录
|
|
async getAppointmentList() {
|
|
const res = await this.$request({
|
|
url: '/system/schoolAppointmentInfo/listWx'
|
|
})
|
|
this.appointmentList = res.rows
|
|
console.log(res);
|
|
},
|
|
// 评价弹窗
|
|
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
|
|
}, 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;
|
|
}
|
|
|
|
.goodList {
|
|
margin: 20rpx auto 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
width: 700rpx;
|
|
|
|
.goods {
|
|
width: 100%;
|
|
|
|
background-color: rgba(255, 255, 255, 1);
|
|
border-radius: 10px;
|
|
width: 690rpx;
|
|
margin-bottom: 20rpx;
|
|
|
|
.goodTitle {}
|
|
|
|
|
|
}
|
|
}
|
|
|
|
.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: 30rpx;
|
|
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: 40rpx auto;
|
|
}
|
|
</style>
|