You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

599 lines
12 KiB

3 weeks ago
<template>
<view class="page">
<view class="oinfo" v-if="info">
<!-- 信息 -->
<view class="yycon">
<view class="oscon">
<view class="osrcon">
<view class="osname">
{{info.storeName?info.storeName:''}}
</view>
<view class="oscell">
课程
<text class="txt">{{info.claName }}</text>
<text class="txt">{{info.courseName }}</text>
</view>
<view class="oscell">
授课教练
<text class="txt">{{info.teacherName }}</text>
</view>
<view class="oscell">
上课地点
<text class="txt">{{info.roomName }}</text>
</view>
<view class="oscell">
上课时间
<text class="txt">{{ info.claDate+' '+ info.startTime +'-'+ info.endTime }}</text>
</view>
</view>
</view>
</view>
<!-- 进度信息 -->
<view class="yycon">
<uni-steps :options="steps" direction="column" :active="2"></uni-steps>
</view>
</view>
<!-- 是否登录 -->
<openlogin ref="loginId" @getPhoneNumber="getPhoneNumber"></openlogin>
</view>
</template>
<script>
import { myCache } from '../../utils/utils.js';
import openlogin from "../components/openlogin.vue";
export default {
components: {
openlogin
},
data() {
return {
openId:"",
phone:"",
userid:"",
id:"",
info: {
"courseTimeId": 1935590110594646018,
"bookId": 1,
"claName": "普拉提A班",
"storeName": "慢瑜伽-三台子店",
"pic": null,
"claDate": "2025-10-25",
"weekDay": null,
"startTime": "16:00:00",
"endTime": "17:30:00",
"roomName": null,
"claColor": null,
"claTimeStatus": null,
"bookStatus": 3,
"createTime": "2025-08-28 14:46:24",
"code": null,
"courseName": null,
"teacherId": null,
"teacherName": "乐乐老师",
"checkIn": 1,
"statusTime": [
{
"time": "2025-09-02 17:26:18",
"status": 0
},
{
"time": "2025-09-02 17:26:18",
"status": 1
},
{
"time": "2025-09-02 17:26:18",
"status": 2
},
{
"time": "2025-09-02 17:26:18",
"status": 3
}
]
},
steps:
[
{title:'已付款',desc:'2025-02-05 13:30'},
{title:'已预约',desc:'2025-02-05 13:30'},
{title:'教练已确认',desc:'2025-02-05 13:30'},
{title:'店长确认,准备上课',desc:''},
{title:'课程结束',desc:''},
],
};
},
onLoad(options) {
if(options.id)
{
this.id=parseInt(options.id);
this.getinfo();
}
},
onShow(){
this.openId = myCache('openId');
var user = myCache('user');
this.userid = user.userid? user.userid:'';
this.phone = user.userphone;
if(this.userid==""||this.userid=="0"){
uni.navigateTo({
url: `/pages/login/login`
});
}
},
methods: {
timestampToTime(timestamp) {
const date = new Date(timestamp*1000);
const Y = date.getFullYear() + '-';
const M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
const D = (date.getDate() < 10 ? '0'+(date.getDate()) : date.getDate()) + ' ';
const h = (date.getHours() < 10 ? '0'+(date.getHours()) : date.getHours()) + ':';
const m = (date.getMinutes() < 10 ? '0'+(date.getMinutes()) : date.getMinutes()) + ':';
const s = (date.getSeconds() < 10 ? '0'+(date.getSeconds()) : date.getSeconds());
return Y+M+D+h+m+s;
},
getPhoneNumber(e){
if(e.phone){
this.phone = e.phone
}
if(e.userid){
this.userid = e.userid
}
},
iflogin(){
this.openId = myCache('openId');
var user = myCache('user');
this.userid = user.userid? user.userid:'';
this.phone = user.userphone;
if(this.userid==""||this.userid=="0"||this.phone==""){
uni.navigateTo({
url: `/pages/login/login`
});
return false;
}
else{
return true;
}
},
goback(){
uni.navigateBack({
delta: 1
});
},
async getinfo() {
uni.showLoading({
title: '数据加载中...'
});
const {data: res} = await uni.$http.post('/api/course/bookCourseDetail', {"bookId":this.id});
if(res){
// 预约信息
this.info=res;
this.steps=[];
// 描述预约进度0->预约中1->教练确认2->店长确认/预约成功/待上课 3->已取消;4- >已完成/待评价;
// {title:'已付款',desc:'2025-02-05 13:30'},
// {title:'已预约',desc:'2025-02-05 13:30'},
// {title:'教练已确认',desc:'2025-02-05 13:30'},
// {title:'店长确认,准备上课',desc:''},
// {title:'课程结束',desc:''},
if(res.statusTime&&res.statusTime.length>0){
res.statusTime.forEach(cell=>{
var ii={
title: cell.status==0?'已预约':(cell.status==1?'教练已确认':(cell.status==2?'店长已确认':(cell.status==3?'预约已取消':cell.status==4?'课程已结束':''))),
desc: cell.time
}
this.steps.push(ii);
});
var lastStatus=res.statusTime[res.statusTim.length-1].status;
if(lastStatus==0){
this.steps.push({
title:'教练待确认',desc:''
});
this.steps.push({
title:'店长确认,准备上课',desc:''
});
this.steps.push({
title:'课程结束',desc:''
});
}
else if(lastStatus==1){
this.steps.push({
title:'店长确认,准备上课',desc:''
});
this.steps.push({
title:'课程结束',desc:''
});
}
if(lastStatus==2){
this.steps.push({
title:'课程结束',desc:''
});
}
}
else{
this.steps.push({
title:'预约中',desc:''
});
this.steps.push({
title:'教练待确认',desc:''
});
this.steps.push({
title:'店长确认,准备上课',desc:''
});
this.steps.push({
title:'课程结束',desc:''
});
}
this.$forceUpdate();
}
},
}
}
</script>
<style lang="scss" scoped>
::v-deep .uni-collapse-item__title-box{
padding: 0 !important;
}
::v-deep .uni-collapse-item__title-text{
font-weight: 600;
}
.page{
padding: 0;
position: relative;
background-image: url('@/static/image/bg.jpg');
background-attachment: fixed;
background-size: cover;
background-position: center center;
min-height: calc(100vh - var(--window-top) - var(--window-bottom));
}
.ret{
position: fixed;
top:20rpx;
left:20rpx;
background: rgba(0, 0, 0, .3);
height: 60rpx;
width: 60rpx;
border-radius: 50% 50%;
text-align: center;
line-height: 60rpx;
z-index: 9999;
}
.submitcon{
position: fixed;
display: flex;
bottom: 0;
left: 0;
width: 100%;
height: 140rpx;
background-color: #FFFFFF;
.pcon{
margin-left: 20rpx;
margin-top: 28rpx;
height: 50rpx;
display: flex;
flex:1;
justify-content: flex-start;
align-items: baseline;
.hj{
font-size: 30rpx;
}
.rmb{
font-size: 30rpx;
font-family: smallYuan;
color:#89965f ;
margin-left: 10rpx;
}
.zs{
font-size: 48rpx;
font-weight: 600;
font-family: smallYuan;
color:#89965f ;
}
.xs{
font-size: 28rpx;
font-weight: 600;
font-family: smallYuan;
color:#89965f ;
}
}
.btn{
background-color: #89965f !important;
margin: 30rpx 20rpx 0 0;
border-radius: 50rpx;
height: 60rpx;
line-height: 60rpx;
width: 180rpx;
font-size: 26rpx;
}
.btn::after{
border:0 !important;
}
.gzbtn{
background-color: #4A4AFF !important;
margin: 30rpx 20rpx 0 0;
border-radius: 50rpx;
height: 60rpx;
line-height: 60rpx;
width: 180rpx;
font-size: 26rpx;
}
.gzbtn::after{
border:0 !important;
}
.cancelbtn{
background-color: #FFFFFF !important;
margin: 30rpx 20rpx 0 0;
border-radius: 50rpx;
height: 60rpx;
line-height: 60rpx;
width:180rpx;
font-size: 26rpx;
color:#333;
border:1rpx solid #dddddd;
}
.cancelbtn::after{
border:0 !important;
}
.returnbtn{
background-color: #ff3d0e !important;
margin: 30rpx 20rpx 0 0;
border-radius: 50rpx;
height: 60rpx;
line-height: 60rpx;
width:180rpx;
font-size: 26rpx;
border:1rpx solid #ff3d0e;
color:#FFF;
}
.returnbtn::after{
border:0 !important;
}
.pjbtn{
background-color: #FFFFFF !important;
margin: 30rpx 20rpx 0 0;
border-radius: 50rpx;
height: 60rpx;
line-height: 60rpx;
width:170rpx;
font-size: 26rpx;
border:1rpx solid #f5aa00;
color:#f5aa00;
}
.pjbtn::after{
border:0 !important;
}
.wlbtn{
background-color: #FFFFFF !important;
margin: 30rpx 20rpx 0 0;
border-radius: 50rpx;
height: 60rpx;
line-height: 60rpx;
width:170rpx;
font-size: 26rpx;
border:1rpx solid #89965f;
color:#89965f;
}
.wlbtn::after{
border:0 !important;
}
}
.signimg{
width: 150rpx;
height: 180rpx;
border-radius: 10rpx;
}
.oscon{
margin:0;
background-color: #f3fafa;
padding: 16rpx;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
.osimg{
width: 120rpx;
height: 120rpx;
border-radius: 10rpx;
}
.osrcon{
display: flex;
flex-direction: column;
flex: 1;
justify-content: flex-start;
margin-left: 20rpx;
}
.osname{
line-height: 48rpx;
font-size:32rpx;
font-weight: 600;
color:#009999;
padding-bottom: 15rpx;
border-bottom: 1rpx dotted #74defb;
}
.oscell{
display: flex;
flex-direction: row;
font-size: 28rpx;
color:#333;
padding: 15rpx 0;
border-bottom: 1rpx dotted #74defb;
.txt{
display: flex; flex: 1;
}
}
}
.ydcon{
position: relative;
}
.yyright{
position: absolute;
right: 100rpx;
top:50rpx;
}
.oinfo{
padding:20rpx;
position: relative;
margin-bottom: 160rpx;
.ozc{
display: flex;
flex-direction: column;
background-color: #becba0 ;
padding: 20rpx;
border-radius: 16rpx;
.ozstate{
font-size: 28rpx;
color: #333;
width: 100%;
margin: 10rpx 0;
}
.oztip{
font-size: 26rpx;
color: #333;
width: 100%;
margin: 0 0 20rpx;
}
}
.owc{
display: flex;
flex-direction: column;
background-color: #89965f ;
padding: 20rpx;
border-radius: 16rpx;
.ozstate{
font-size: 28rpx;
color: #FFF;
width: 100%;
margin: 6rpx 0 0;
}
.oztip{
font-size: 26rpx;
color: #FFF;
width: 100%;
margin: 0 0 6rpx;
}
}
.oztgray{
display: flex;
flex-direction: column;
background-color: #ddd;
padding: 20rpx;
border-radius: 16rpx;
.ozstate{
font-size: 28rpx;
color: #333;
width: 100%;
margin: 6rpx 0;
}
.oztip{
font-size: 26rpx;
color: #747474;
width: 100%;
margin: 0 0 20rpx;
}
}
.oztorange{
display: flex;
flex-direction: column;
background-color: #faa755;
padding: 20rpx;
border-radius: 16rpx;
.ozstate{
font-size: 28rpx;
color: #FFF;
width: 100%;
margin: 6rpx 0;
}
.oztip{
font-size: 26rpx;
color: #FFF;
width: 100%;
margin: 0 0 20rpx;
}
}
.yycon{
display: flex;
flex-direction: column;
justify-content: center;
background-color: #FFFFFF;
margin-top: 20rpx;
padding: 20rpx 20rpx;
.atitle{
padding: 10rpx 0 10rpx;
color:#303133;
font-size: 30rpx;
font-weight: 600;
display: flex;
flex-direction: row;
justify-content: space-between;
.price{
font-size: 36rpx;
}
}
.olist{
display: flex;
flex-direction: column;
padding: 0;
width: 100%;
.ocell{
font-size: 26rpx;
color:#747474;
padding: 10rpx 0 10rpx;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.ocell1{
font-size: 26rpx;
color:#747474;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
}
.sqcon{
padding: 20rpx;
margin: 20rpx 0;
background-color: #f5f5f5;
display: flex;
flex-direction: column;
border-radius: 10rpx;
.sqlist{
display: flex;
flex-direction: row;
justify-content: space-between;
color: #333333;
font-size: 26rpx;
line-height: 50rpx;
}
}
}
}
.red{
color:#ff3d0e;
}
.green{
color:#00cd00;
}
::v-deep.uni-radio-input-checked{
background-color: #89965f !important;
border-color: #89965f !important;
background-clip: content-box!important;
box-sizing: border-box;
}
::v-deep.uni-radio-input-checked::before{
display: none!important;
}
</style>