310 lines
8.6 KiB
Vue
310 lines
8.6 KiB
Vue
<template>
|
||
<view class="page flex-col">
|
||
<view style="width: 100%;background: #f4f5f6;box-sizing: border-box;padding-top: 88px;">
|
||
<headers titles="预约训练">
|
||
<uni-icons type="left" color="#000000" size="22px"></uni-icons>
|
||
</headers>
|
||
</view>
|
||
<view style="padding: 10rpx 30rpx">
|
||
<u-subsection :list="list" :current="curNow" @change="sectionChange"></u-subsection>
|
||
</view>
|
||
<scroll-view :style="{ height: scrollHeight + 'px' }" scroll-y="true" class="scroll-view" @scrolltolower="onReachBottomCus"
|
||
refresher-enabled @refresherrefresh="onRefresherrefresh" :refresher-triggered="isTriggered" v-if="appointmentList.length > 0">
|
||
<!-- 新增内容容器 -->
|
||
<view class="box_2 flex-col" v-if="curNow === 0">
|
||
<view class="box_4 flex-col" v-for="item in appointmentList" @click="goDetail(item,'')" :key="item.id">
|
||
<view class="group_5 flex-row justify-between">
|
||
<view class="block_3 flex-col justify-between">
|
||
<text class="text_2">{{ item.reservDay }}</text>
|
||
<view class="group_6 flex-row justify-between">
|
||
<view class="text-wrapper_1 flex-col">
|
||
<text class="text_3">{{ item.subjectStr }}</text>
|
||
</view>
|
||
<view class="text-wrapper_2 flex-col">
|
||
<text class="text_4">{{ item.courseType }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view :class="item.status === true ? 'ytg' : 'text-wrapper_3'" class=" flex-col">
|
||
<text class="text_5">{{ item.statusStr }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="text-wrapper_4 flex-row justify-between">
|
||
<text class="text_6">时间范围：</text>
|
||
<text class="text_7">{{ item.reservTime }}</text>
|
||
</view>
|
||
<view class="text-wrapper_5 flex-row justify-between">
|
||
<text class="text_8">教练名称：</text>
|
||
<text class="text_9">{{ item.coachName }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 新增内容容器 -->
|
||
<view class="box_2 flex-col" v-if="curNow === 1">
|
||
<view class="box_4 flex-col" v-for="item in appointmentList" @click="goDetail(item,'train')"
|
||
:key="item.id">
|
||
<view class="group_5 flex-row justify-between">
|
||
<view class="block_3 flex-col justify-between">
|
||
<text class="text_2">{{ item.trainDay }}</text>
|
||
<view class="group_6 flex-row justify-between">
|
||
<view class="text-wrapper_1 flex-col">
|
||
<text class="text_3">{{ subjectArr[item.subject - 1] }}</text>
|
||
</view>
|
||
<view class="text-wrapper_2 flex-col">
|
||
<text class="text_4">{{ item.courseType }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="text-wrapper_4 flex-row justify-between">
|
||
<text class="text_6">交通方式：</text>
|
||
<text class="text_7">{{ item.transWay }}</text>
|
||
</view>
|
||
<view class="text-wrapper_4 flex-row justify-between">
|
||
<text class="text_6">训练地址：</text>
|
||
<text class="text_7">{{ item.addr }}</text>
|
||
</view>
|
||
<view class="text-wrapper_4 flex-row justify-between">
|
||
<text class="text_6">训练时长：</text>
|
||
<text class="text_7">{{ item.trainTime }}分钟</text>
|
||
</view>
|
||
<view class="text-wrapper_5 flex-row justify-between">
|
||
<text class="text_8">教练名称：</text>
|
||
<text class="text_9">{{ item.coachName }}</text>
|
||
</view>
|
||
<view class="block_5 box_10 flex-row" style="justify-content: flex-end; margin: 0 20rpx 15rpx 0;"
|
||
v-if="!item.ifEvaluate" @click="goEvaluateAdd(item)">
|
||
<view
|
||
style="border: 1px solid rgba(44, 120, 245, 1); padding: 7rpx 30rpx; border-radius: 50rpx;color: rgba(44, 120, 245, 1)">
|
||
<text class="text_18">开始评价</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
<view class="empty-container" v-else>
|
||
<u-empty
|
||
mode="data"
|
||
/>
|
||
</view>
|
||
|
||
|
||
<view class="box_6 flex-col bottom_">
|
||
<view class="text-wrapper_12 flex-col " @click="goAppointment()">
|
||
<text class="text_19">预约</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
import headers from "@/components/header/headers.vue";
|
||
import request from "@/utils/request";
|
||
|
||
export default {
|
||
components: {
|
||
headers
|
||
},
|
||
data() {
|
||
return {
|
||
isTriggered: false,
|
||
pageNo: 1,
|
||
pageSize: 10,
|
||
total: 0,
|
||
appointmentList: [],
|
||
constants: {},
|
||
list: ['预约记录', '训练记录'],
|
||
curNow: 0,
|
||
subjectArr: ['科目一', '科目二', '科目三', '科目四'],
|
||
scrollHeight: 0,
|
||
};
|
||
},
|
||
onLoad() {
|
||
this.getList()
|
||
uni.$on('refresh', (data) => {
|
||
this.pageNo = 1
|
||
this.appointmentList = []
|
||
if (this.curNow === 0) {
|
||
this.getList()
|
||
} else {
|
||
this.getTrainList()
|
||
}
|
||
})
|
||
},
|
||
onReady() {
|
||
// 动态计算滚动区域高度
|
||
this.calculateScrollHeight();
|
||
},
|
||
methods: {
|
||
goback() {
|
||
uni.navigateBack()
|
||
},
|
||
sectionChange(index) {
|
||
this.curNow = index;
|
||
this.pageNo = 1
|
||
this.appointmentList = []
|
||
if (this.curNow === 0) {
|
||
this.getList()
|
||
} else {
|
||
this.getTrainList()
|
||
}
|
||
},
|
||
getList() {
|
||
request({
|
||
url: '/app-api/reservation-course/page',
|
||
method: 'GET',
|
||
params: {
|
||
pageNo: this.pageNo,
|
||
pageSize: this.pageSize,
|
||
ifCancel: false
|
||
},
|
||
tenantIdFlag: false
|
||
}).then(res => {
|
||
if (this.pageNo === 1) {
|
||
this.total = res.data.total
|
||
this.appointmentList = []
|
||
this.appointmentList = res.data.records
|
||
} else {
|
||
this.appointmentList = this.appointmentList.concat(res.data.records)
|
||
}
|
||
this.isTriggered = false
|
||
})
|
||
},
|
||
getTrainList() {
|
||
request({
|
||
url: '/app-api/train/page',
|
||
method: 'GET',
|
||
params: {
|
||
pageNum: this.pageNo,
|
||
pageSize: this.pageSize,
|
||
selectType: 'my'
|
||
},
|
||
tenantIdFlag: false
|
||
}).then(res => {
|
||
if (this.pageNo === 1) {
|
||
this.total = res.data.total
|
||
this.appointmentList = []
|
||
this.appointmentList = res.data.records
|
||
} else {
|
||
this.appointmentList = this.appointmentList.concat(res.data.records)
|
||
}
|
||
this.isTriggered = false
|
||
})
|
||
},
|
||
goDetail(data, str) {
|
||
//将data转为字符串
|
||
uni.navigateTo({
|
||
url: `/pagesA/appointmentDetail/index?data=${JSON.stringify(data)}&type=${str}`
|
||
})
|
||
},
|
||
calculateScrollHeight() {
|
||
// 获取屏幕高度
|
||
const screenHeight = uni.getSystemInfoSync().windowHeight;
|
||
// 获取顶部区域高度（头部+分段选择器）
|
||
const topHeight = 138; // 140rpx转换为px
|
||
// 获取底部按钮高度（假设约100rpx）
|
||
const bottomHeight = uni.upx2px(120);
|
||
// 计算滚动区域高度
|
||
this.scrollHeight = screenHeight - topHeight - bottomHeight;
|
||
},
|
||
/**
|
||
* 上滑加载数据
|
||
*/
|
||
onReachBottomCus() {
|
||
//判断 如果页码*页容量大于等于总条数，提示该页数据加载完毕
|
||
if (this.pageNo * this.pageSize >= this.total) {
|
||
uni.$u.toast('没有更多数据了')
|
||
return
|
||
}
|
||
//页码+1,调用获取数据的方法获取第二页数据
|
||
this.pageNo++
|
||
//此处调用自己获取数据列表的方法
|
||
if (this.curNow === 1) {
|
||
this.getTrainList()
|
||
} else {
|
||
this.getList()
|
||
}
|
||
},
|
||
/**
|
||
* 下拉刷新数据
|
||
*/
|
||
onRefresherrefresh() {
|
||
this.isTriggered = true
|
||
this.pageNo = 1
|
||
this.total = 0
|
||
this.appointmentList = []
|
||
if (this.curNow === 1) {
|
||
this.getTrainList()
|
||
} else {
|
||
this.getList()
|
||
}
|
||
},
|
||
goAppointment() {
|
||
uni.navigateTo({
|
||
url: '/pagesA/appointmentAdd/index'
|
||
})
|
||
},
|
||
goEvaluateAdd(data) {
|
||
data = JSON.stringify(data)
|
||
uni.navigateTo({
|
||
url: `/pagesA/evaluateAdd/index?data=${data}&type=xunlian&controls=add`
|
||
})
|
||
},
|
||
}
|
||
};
|
||
</script>
|
||
<style lang='scss'>
|
||
@import '../common/common.scss';
|
||
@import './assets/style/index.rpx.scss';
|
||
|
||
// 新增样式
|
||
.content-box {
|
||
margin-top: 88rpx;
|
||
/* 根据头部高度调整 */
|
||
padding: 20rpx;
|
||
overflow-y: auto;
|
||
height: calc(100vh - 88rpx);
|
||
/* 确保内容区域高度正确 */
|
||
}
|
||
|
||
.header {
|
||
width: 100%;
|
||
background: #f4f5f6;
|
||
box-sizing: border-box;
|
||
padding-top: 88px;
|
||
}
|
||
|
||
.bottom_ {
|
||
position: fixed;
|
||
bottom: 0;
|
||
}
|
||
|
||
.ytg {
|
||
background-color: #cfe2ff;
|
||
border-radius: 4px;
|
||
height: 40rpx;
|
||
margin-top: 22rpx;
|
||
width: 96rpx;
|
||
|
||
.text_5 {
|
||
width: 72rpx;
|
||
height: 24rpx;
|
||
overflow-wrap: break-word;
|
||
color: rgba(4, 78, 242, 1);
|
||
font-size: 24rpx;
|
||
font-family: PingFang SC-Regular;
|
||
font-weight: NaN;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
line-height: 24rpx;
|
||
margin: 8rpx 0 0 12rpx;
|
||
}
|
||
}
|
||
.empty-container {
|
||
display: flex;
|
||
justify-content: center; /* 水平居中 */
|
||
align-items: center; /* 垂直居中 */
|
||
height: 100vh; /* 或者你需要撑满的高度 */
|
||
}
|
||
|
||
</style>
|