|
|
<template>
|
|
|
<view class="page">
|
|
|
<scroll-view class="scrolllist" scroll-x="true" scroll-with-animation :scroll-left="scrollLeft">
|
|
|
<view class="tabicl" v-for="(item, index) in list" :key="index" :class="index==tabCurrentIndex?'cur':''" @tap="tabSelect" :data-id="index">
|
|
|
<view class="ptext">{{item.name}}</view>
|
|
|
<view class="pline"></view>
|
|
|
</view>
|
|
|
</scroll-view>
|
|
|
<swiper class="swiper-box" :duration="300" :current="tabCurrentIndex" @animationfinish="animationfinish" @change="handleChange">
|
|
|
<swiper-item class="swiper-item" v-for="tabItem in list" :key="tabItem.id">
|
|
|
<scroll-view scroll-y style="height: 100%;width: 100%;">
|
|
|
<view class="scell" v-if="tabItem.slist.length>0">
|
|
|
<view v-for="(item, index) in tabItem.slist" :key="index" class="oitem">
|
|
|
|
|
|
<view class="otop" @click="gotoInfo(item.bookId)">
|
|
|
<view class="hleft">
|
|
|
<text>{{item.storeName?item.storeName:'门店'}}</text>
|
|
|
</view>
|
|
|
<view class="hright">
|
|
|
<!-- 1：待上课，2：预约中，3：待评价 ，4：已完成 ，5：已取消 -->
|
|
|
<!-- 描述:0->预约中;1->教练确认;2->店长确认/预约成功/待上课 3->已取消;4->已完成/待评价; -->
|
|
|
<view v-if="item.bookStatus==1" class="ztip">教练确认</view>
|
|
|
<view v-else-if="item.bookStatus==0" class="jtip">预约中</view>
|
|
|
<view v-else-if="item.bookStatus==2" class="htip">待上课</view>
|
|
|
<view v-else-if="item.bookStatus==4" class="wtip">已完成</view>
|
|
|
<view v-else-if="item.bookStatus==3" class="ctip">已取消</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<view class="oscon" @click="gotoInfo(item.bookId)">
|
|
|
<view class="osimg imgload">
|
|
|
<image class="osimg" v-if="item.pic" :src="getimgRemoteFile(item.pic)" mode="aspectFill"></image>
|
|
|
</view>
|
|
|
<view class="osname">
|
|
|
<text class="ntxt">{{item.courseName}} {{item.claName}} </text>
|
|
|
<text class="txt"> 教练：{{item.teacherName || '-'}}</text>
|
|
|
<text class="txt"> 上课时间：{{ item.claDate+' '+item.startTime+'-'+item.endTime}}</text>
|
|
|
<text class="txt"> 教室：{{item.roomName}}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<view class="obtn">
|
|
|
<view class="qr">
|
|
|
<view class="qrimg" v-if="item.qrCode" @click="openQR(item.qrCode)">
|
|
|
<image class="qrimg" :src="'data:image/png;base64,'+item.qrCode" mode="aspectFill"></image>
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- 1：待上课，2：预约中，3：待评价 ，4：已完成 5：已取消-->
|
|
|
<!-- 描述:0->预约中;1->教练确认;2->店长确认/预约成功/待上课 3->已取消;4->已完成/待评价; -->
|
|
|
<button type="primary" class="conbtn" @click="gototeacher(item)">联系教练</button>
|
|
|
<button v-if="item.orderstate==2||item.orderstate==1" type="primary" class="cancelbtn" :data-id="item.courseTimeId" @click="cancelkcdo">取消课程</button>
|
|
|
<button v-if="item.orderstate==0" type="primary" class="cancelbtn" :data-id="item.courseTimeId" @click="cancelyydo">取消预约</button>
|
|
|
<button v-if="item.orderstate==0" type="primary" class="paybtn" :data-id="item.courseTimeId" @click="checkdo($event,item)">确认上课</button>
|
|
|
<button v-if="item.orderstate==4" type="primary" class="viewbtn" :data-id="item.courseTimeId" @click="orderdo($event,item)">再次预约</button>
|
|
|
<button v-if="item.orderstate==4" type="primary" class="gzbtn" :data-id="item.courseTimeId" @click="gotoevaluate($event,item)">评价</button>
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<view v-if="tabItem.slist.length==0 && tabItem.loadStatus=='noMore'" class="nodata"></view>
|
|
|
<uni-load-more v-if="tabItem.slist.length>0" iconType="circle" :status="tabItem.loadStatus" />
|
|
|
|
|
|
</scroll-view>
|
|
|
</swiper-item>
|
|
|
</swiper>
|
|
|
|
|
|
<!-- 二维码 -->
|
|
|
<uni-popup ref="pfDialog" :mask-click="false">
|
|
|
<view class="pcon">
|
|
|
<view class="phtxt">预约二维码</view>
|
|
|
<view class="ptxt">
|
|
|
<image class="qrimg" :src="qr" mode="aspectFill"></image>
|
|
|
</view>
|
|
|
<view class="btn" @click="closeDialog">
|
|
|
关闭
|
|
|
</view>
|
|
|
</view>
|
|
|
</uni-popup>
|
|
|
|
|
|
<!-- 是否登录 -->
|
|
|
<openlogin ref="loginId" @getPhoneNumber="getPhoneNumber"></openlogin>
|
|
|
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import { myCache,getRemoteFile } from '../../utils/utils.js';
|
|
|
import openlogin from "../components/openlogin.vue";
|
|
|
export default {
|
|
|
components: {
|
|
|
openlogin
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
openId:"",
|
|
|
phone:"",
|
|
|
userid:"",
|
|
|
tabCurrentIndex: 0,
|
|
|
scrollLeft: 0,//tabs
|
|
|
qr:'', // 预约二维码
|
|
|
// 1：待上课，2：预约中，3：待评价
|
|
|
list:[
|
|
|
{
|
|
|
id:0,
|
|
|
order_state:null,
|
|
|
loadStatus:'more', // 'more', // 'noMore',
|
|
|
name:'全部',
|
|
|
sort:'all',
|
|
|
slist:[
|
|
|
{
|
|
|
id:1,
|
|
|
orderid:"ord0001",
|
|
|
business:"商家1",
|
|
|
productid:"1",
|
|
|
productprice:39.9,
|
|
|
productname:"减脂|减重|垫子上瑜伽",
|
|
|
img:'../../static/image/theme/p1.jpg',
|
|
|
productspecs:"团课",
|
|
|
productnum:1,
|
|
|
productunit:"个",
|
|
|
orderstate:'1',
|
|
|
orderdate:"2025-06-23 10:26:09",
|
|
|
room:"VIP1"
|
|
|
},
|
|
|
{
|
|
|
id:"ord0002",
|
|
|
orderid:"ord0002",
|
|
|
business:"商家2",
|
|
|
productid:"1",
|
|
|
productprice:39.9,
|
|
|
productname:"减脂|减重|垫子上瑜伽",
|
|
|
img:'../../static/image/theme/p3.jpg',
|
|
|
productspecs:"团课",
|
|
|
productnum:2,
|
|
|
productunit:"个",
|
|
|
orderstate:'2',
|
|
|
orderdate:"2025-06-23 10:26:09",
|
|
|
room:"VIP2"
|
|
|
},
|
|
|
{
|
|
|
id:"ord0003",
|
|
|
orderid:"ord0003",
|
|
|
business:"商家3",
|
|
|
productid:"1",
|
|
|
productprice:39.9,
|
|
|
productname:"减脂|减重|垫子上瑜伽",
|
|
|
img:'../../static/image/theme/p1.jpg',
|
|
|
productspecs:"L 白",
|
|
|
productnum:1,
|
|
|
productunit:"个",
|
|
|
orderstate:'3',
|
|
|
orderdate:"2025-06-23 10:26:09",
|
|
|
room:"VIP3"
|
|
|
},
|
|
|
{
|
|
|
id:"ord0004",
|
|
|
orderid:"ord0004",
|
|
|
business:"商家4",
|
|
|
productid:"1",
|
|
|
productprice:39.9,
|
|
|
productname:"减脂|减重|垫子上瑜伽",
|
|
|
img:'../../static/image/theme/p1.jpg',
|
|
|
productspecs:"团课",
|
|
|
productnum:1,
|
|
|
productunit:"个",
|
|
|
orderstate:'4',
|
|
|
orderdate:"2025-06-23 10:26:09",
|
|
|
room:"VIP4"
|
|
|
},
|
|
|
{
|
|
|
id:"ord0005",
|
|
|
orderid:"ord0005",
|
|
|
business:"商家5",
|
|
|
productid:"1",
|
|
|
productprice:39.9,
|
|
|
productname:"减脂|减重|垫子上瑜伽",
|
|
|
img:'../../static/image/theme/p1.jpg',
|
|
|
productspecs:"团课",
|
|
|
productnum:2,
|
|
|
productunit:"个",
|
|
|
orderstate:'3',
|
|
|
orderdate:"2025-06-23 10:26:09",
|
|
|
room:"VIP2"
|
|
|
},
|
|
|
{
|
|
|
id:"ord0006",
|
|
|
orderid:"ord0006",
|
|
|
business:"商家6",
|
|
|
productid:"1",
|
|
|
productprice:39.9,
|
|
|
productname:"减脂|减重|垫子上瑜伽",
|
|
|
img:'../../static/image/theme/p1.jpg',
|
|
|
productspecs:"团课",
|
|
|
productnum:3,
|
|
|
productunit:"个",
|
|
|
orderstate:'1',
|
|
|
orderdate:"2025-06-23 10:26:09",
|
|
|
room:"VIP2"
|
|
|
},
|
|
|
{
|
|
|
id:"ord0007",
|
|
|
orderid:"ord0007",
|
|
|
business:"商家7",
|
|
|
productid:"1",
|
|
|
productprice:39.9,
|
|
|
productname:"减脂|减重|垫子上瑜伽",
|
|
|
img:'../../static/image/theme/p1.jpg',
|
|
|
productspecs:"团课",
|
|
|
productnum:1,
|
|
|
productunit:"个",
|
|
|
orderstate:'1',
|
|
|
orderdate:"2025-06-23 10:26:09",
|
|
|
room:"VIP2"
|
|
|
}
|
|
|
]
|
|
|
},
|
|
|
{
|
|
|
id:1,
|
|
|
order_state:1,
|
|
|
loadStatus:'more', // 'more',
|
|
|
name:'待上课',
|
|
|
sort:'waitingForClass',
|
|
|
slist:[
|
|
|
{
|
|
|
id:1,
|
|
|
orderid:"ord0001",
|
|
|
business:"商家1",
|
|
|
productid:"1",
|
|
|
productprice:39.9,
|
|
|
productname:"减脂|减重|垫子上瑜伽",
|
|
|
img:'../../static/image/theme/p1.jpg',
|
|
|
productspecs:"团课",
|
|
|
productnum:1,
|
|
|
productunit:"个",
|
|
|
orderstate:'1',
|
|
|
orderdate:"2025-06-23 10:26:09",
|
|
|
room:"VIP1"
|
|
|
},
|
|
|
{
|
|
|
id:"ord0006",
|
|
|
orderid:"ord0006",
|
|
|
business:"商家6",
|
|
|
productid:"1",
|
|
|
productprice:39.9,
|
|
|
productname:"减脂|减重|垫子上瑜伽",
|
|
|
img:'../../static/image/theme/p1.jpg',
|
|
|
productspecs:"团课",
|
|
|
productnum:3,
|
|
|
productunit:"个",
|
|
|
orderstate:'1',
|
|
|
orderdate:"2025-06-23 10:26:09",
|
|
|
room:"VIP2"
|
|
|
},
|
|
|
]
|
|
|
},
|
|
|
{
|
|
|
id:2,
|
|
|
order_state:2,
|
|
|
loadStatus:'more', // 'more',
|
|
|
name:'预约中',
|
|
|
sort:'booking',
|
|
|
slist:[
|
|
|
{
|
|
|
id:"ord0002",
|
|
|
orderid:"ord0002",
|
|
|
business:"商家2",
|
|
|
productid:"1",
|
|
|
productprice:39.9,
|
|
|
productname:"减脂|减重|垫子上瑜伽",
|
|
|
img:'../../static/image/theme/p3.jpg',
|
|
|
productspecs:"团课",
|
|
|
productnum:2,
|
|
|
productunit:"个",
|
|
|
orderstate:'2',
|
|
|
orderdate:"2025-06-23 10:26:09",
|
|
|
room:"VIP2"
|
|
|
},
|
|
|
]
|
|
|
},
|
|
|
// {
|
|
|
// id:3,
|
|
|
// order_state:3,
|
|
|
// loadStatus:'more', // 'more',
|
|
|
// name:'待评价',
|
|
|
// sort:'all',
|
|
|
// slist:[
|
|
|
// {
|
|
|
// id:"ord0005",
|
|
|
// orderid:"ord0005",
|
|
|
// business:"商家5",
|
|
|
// productid:"1",
|
|
|
// productprice:39.9,
|
|
|
// productname:"减脂|减重|垫子上瑜伽",
|
|
|
// img:'../../static/image/theme/p1.jpg',
|
|
|
// productspecs:"团课",
|
|
|
// productnum:2,
|
|
|
// productunit:"个",
|
|
|
// orderstate:'3',
|
|
|
// orderdate:"2025-06-23 10:26:09",
|
|
|
// room:"VIP2"
|
|
|
// },
|
|
|
// ]
|
|
|
// },
|
|
|
{
|
|
|
id:4,
|
|
|
order_state:4,
|
|
|
loadStatus:'more', // 'more',noMore
|
|
|
name:'已完成',
|
|
|
sort:'completed',
|
|
|
slist:[
|
|
|
{
|
|
|
id:"ord0004",
|
|
|
orderid:"ord0004",
|
|
|
business:"商家4",
|
|
|
productid:"1",
|
|
|
productprice:39.9,
|
|
|
productname:"减脂|减重|垫子上瑜伽",
|
|
|
img:'../../static/image/theme/p1.jpg',
|
|
|
productspecs:"团课",
|
|
|
productnum:1,
|
|
|
productunit:"个",
|
|
|
orderstate:'4',
|
|
|
orderdate:"2025-06-23 10:26:09",
|
|
|
room:"VIP4"
|
|
|
},
|
|
|
]
|
|
|
},
|
|
|
{
|
|
|
id:5,
|
|
|
order_state:5,
|
|
|
loadStatus:'more', // 'more',
|
|
|
name:'已取消',
|
|
|
sort:'canceled',
|
|
|
slist:[
|
|
|
{
|
|
|
id:"ord0005",
|
|
|
orderid:"ord0005",
|
|
|
business:"商家5",
|
|
|
productid:"1",
|
|
|
productprice:39.9,
|
|
|
productname:"减脂|减重|垫子上瑜伽",
|
|
|
img:'../../static/image/theme/p1.jpg',
|
|
|
productspecs:"团课",
|
|
|
productnum:1,
|
|
|
productunit:"个",
|
|
|
orderstate:'5',
|
|
|
orderdate:"2025-06-23 10:26:09",
|
|
|
room:"VIP4"
|
|
|
},
|
|
|
]
|
|
|
},
|
|
|
],
|
|
|
};
|
|
|
},
|
|
|
onLoad(option) {
|
|
|
if(option.id||option.id==0){
|
|
|
if(parseInt(option.id)==0){
|
|
|
this.tabCurrentIndex=0;
|
|
|
}
|
|
|
else{
|
|
|
this.tabCurrentIndex=parseInt(option.id);
|
|
|
}
|
|
|
this.scrollLeft = (this.tabCurrentIndex - 1) * 60;
|
|
|
}
|
|
|
myCache('courserefresh',0);
|
|
|
this.reset();
|
|
|
},
|
|
|
onShow(option){
|
|
|
// 预约后重新刷新课程表
|
|
|
if(myCache('courserefresh')){
|
|
|
this.reset();
|
|
|
myCache('courserefresh',0);
|
|
|
}
|
|
|
},
|
|
|
onReady(){
|
|
|
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`
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
onPullDownRefresh() {
|
|
|
setTimeout(()=>{
|
|
|
uni.stopPullDownRefresh()
|
|
|
},100);
|
|
|
},
|
|
|
methods: {
|
|
|
openQR(qr){
|
|
|
console.log("openQR")
|
|
|
this.qr='data:image/png;base64,'+qr;
|
|
|
this.$forceUpdate();
|
|
|
this.openDialog();
|
|
|
},
|
|
|
closeDialog(){
|
|
|
this.$refs.pfDialog.close();
|
|
|
},
|
|
|
openDialog(){
|
|
|
this.$refs.pfDialog.open();
|
|
|
},
|
|
|
getimgRemoteFile(img){
|
|
|
if(img){
|
|
|
img=img.split(',')[0];
|
|
|
return getRemoteFile(img)
|
|
|
}
|
|
|
else{
|
|
|
return require("@/static/image/theme/p1.jpg")
|
|
|
}
|
|
|
},
|
|
|
getPhoneNumber(e){
|
|
|
if(e.phone){
|
|
|
this.phone = e.phone
|
|
|
}
|
|
|
if(e.userid){
|
|
|
this.userid = e.userid
|
|
|
}
|
|
|
},
|
|
|
async getOrderList() {
|
|
|
if(this.list[this.tabCurrentIndex].loadStatus!=="noMore")
|
|
|
{
|
|
|
uni.showLoading({
|
|
|
title: '数据加载中...'
|
|
|
});
|
|
|
const {data: res} = await uni.$http.get('/api/course/bookCourseList');
|
|
|
var data = res.data;
|
|
|
if(data){
|
|
|
console.log(res)
|
|
|
// 全部
|
|
|
this.list[0].loadStatus="noMore";
|
|
|
this.list[0].slist=data.all;
|
|
|
console.log(this.list[0].slist)
|
|
|
this.$forceUpdate();
|
|
|
|
|
|
// 已取消
|
|
|
this.list[4].loadStatus="noMore";
|
|
|
this.list[4].slist=data.canceled;
|
|
|
this.$forceUpdate();
|
|
|
|
|
|
// 待上课
|
|
|
this.list[1].loadStatus="noMore";
|
|
|
this.list[1].slist=data.waitingForClass;
|
|
|
this.$forceUpdate();
|
|
|
|
|
|
// 预约中
|
|
|
this.list[2].loadStatus="noMore";
|
|
|
this.list[2].slist=data.booking;
|
|
|
this.$forceUpdate();
|
|
|
|
|
|
// 已完成
|
|
|
this.list[3].loadStatus="noMore";
|
|
|
this.list[3].slist=data.completed;
|
|
|
this.$forceUpdate();
|
|
|
}
|
|
|
else{
|
|
|
this.list[this.tabCurrentIndex].loadStatus="noMore";
|
|
|
this.$forceUpdate();
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
loadData(){
|
|
|
console.log('loadData');
|
|
|
// 加载
|
|
|
if(this.list[this.tabCurrentIndex].loadStatus=="more") {
|
|
|
this.list[this.tabCurrentIndex].loadStatus="loading";
|
|
|
setTimeout(() => {
|
|
|
this.getOrderList();
|
|
|
}, 300);
|
|
|
}
|
|
|
},
|
|
|
tabSelect(e) {
|
|
|
console.log(e)
|
|
|
this.tabCurrentIndex = e.currentTarget.dataset.id;
|
|
|
this.$forceUpdate();
|
|
|
// 重新加载 暂不需要加载
|
|
|
// this.list[this.tabCurrentIndex].loadStatus="more";
|
|
|
// this.list[this.tabCurrentIndex].slist=[];
|
|
|
// this.loadData();
|
|
|
},
|
|
|
animationfinish({ detail: { current } }) {
|
|
|
// this.tabCurrentIndex = current;
|
|
|
// this.loadData();
|
|
|
},
|
|
|
handleChange(e) {
|
|
|
//原在animationfinish中的操作转移到这里
|
|
|
console.log("handleChange");
|
|
|
this.tabCurrentIndex = e.detail.current;
|
|
|
this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
|
|
|
this.$forceUpdate();
|
|
|
this.loadData();
|
|
|
},
|
|
|
gotoInfo(id){
|
|
|
id=id+"";
|
|
|
// 预约详情
|
|
|
uni.navigateTo({
|
|
|
url: `/pages/book/bookinfo?id=${id}`
|
|
|
});
|
|
|
},
|
|
|
// 联系教练
|
|
|
gototeacher(item){
|
|
|
console.log(item);
|
|
|
if(item.teacherId){
|
|
|
uni.showLoading({
|
|
|
title: '会话创建中...'
|
|
|
});
|
|
|
// 直接跳转到聊天框
|
|
|
var chatid="privatechat-" + this.userid +"-"+ item.teacherId;
|
|
|
var timestamp = new Date().getTime();
|
|
|
var info={
|
|
|
chatId: "privatechat-" + this.userid +"-"+ item.teacherId,
|
|
|
chatType: "coach",
|
|
|
chatName: item.teacherName,
|
|
|
chatAvatar: item.pic?item.pic:'/static/image/kf.png',
|
|
|
chatTime: timestamp,
|
|
|
userid: this.userid,
|
|
|
friendId: item.teacherId, // 会话教练userid
|
|
|
minId: "", // 已读消息的最大id
|
|
|
sort:"privatechat", // privatechat 私聊 groupchat 群聊
|
|
|
from:"yh" // yh 用户咨询进入聊天框，message 从消息进入聊天框
|
|
|
}
|
|
|
var data=encodeURIComponent(JSON.stringify(info));
|
|
|
uni.navigateTo({
|
|
|
url: `/pages/chat/chat?data=${data}`
|
|
|
});
|
|
|
}
|
|
|
else{
|
|
|
uni.showModal({
|
|
|
title: '提示',
|
|
|
content: '抱歉！当前预约尚未配置教练在线服务..',
|
|
|
cancelText: '取消',
|
|
|
confirmText: '确定',
|
|
|
success: ress => {
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
// 去评价
|
|
|
gotoevaluate(item){
|
|
|
var data=encodeURIComponent(JSON.stringify(item));
|
|
|
uni.navigateTo({
|
|
|
url: `/pages/book/bookpj?data=${data}`
|
|
|
});
|
|
|
},
|
|
|
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;
|
|
|
}
|
|
|
},
|
|
|
// 再次预约
|
|
|
orderdo(e,item){
|
|
|
console.log(id,item);
|
|
|
var that = this;
|
|
|
// 再次预约
|
|
|
uni.showModal({
|
|
|
title: '提示',
|
|
|
content: '确定再次预约吗？',
|
|
|
cancelText: '取消',
|
|
|
confirmText: '确定',
|
|
|
success: ress => {
|
|
|
if (ress.confirm) {
|
|
|
that.checkdodo(id,item);
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
// 再次预约
|
|
|
async orderdodo(id,item){
|
|
|
var param={
|
|
|
"courseTimeId": item.courseTimeId
|
|
|
};
|
|
|
uni.showToast({
|
|
|
title: '再次预约中...',
|
|
|
icon: 'success',
|
|
|
duration: 2000
|
|
|
});
|
|
|
const {data: res} = await uni.$http.post('/api/course/bookCourse', param);
|
|
|
if(res.success){
|
|
|
uni.showToast({
|
|
|
title: '上课已预约！',
|
|
|
icon: 'success',
|
|
|
duration: 2000
|
|
|
});
|
|
|
// 重新加载
|
|
|
this.reset();
|
|
|
}
|
|
|
else{
|
|
|
uni.showModal({
|
|
|
title: '提示',
|
|
|
content: res.message? res.message:'课程预约失败！',
|
|
|
cancelText: '取消',
|
|
|
confirmText: '确定',
|
|
|
success: ress => {
|
|
|
if (ress.confirm) {
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
// 确认上课
|
|
|
checkdo(e,item){
|
|
|
console.log(e);
|
|
|
var id= e.currentTarget.dataset.id;
|
|
|
var that = this;
|
|
|
// 确认上课
|
|
|
uni.showModal({
|
|
|
title: '提示',
|
|
|
content: '确定上课吗？',
|
|
|
cancelText: '取消',
|
|
|
confirmText: '确定',
|
|
|
success: ress => {
|
|
|
if (ress.confirm) {
|
|
|
that.checkdodo(id,item);
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
// 确认上课
|
|
|
async checkdodo(id,item){
|
|
|
var param={
|
|
|
"courseTimeId": item.courseTimeId,
|
|
|
"startTime": item.startTime,
|
|
|
"endTime": item.endTime
|
|
|
};
|
|
|
uni.showToast({
|
|
|
title: '确定上课中...',
|
|
|
icon: 'success',
|
|
|
duration: 2000
|
|
|
});
|
|
|
const {data: res} = await uni.$http.post('/api/my/confirmClass', param);
|
|
|
if(res.msg=="successed"){
|
|
|
uni.showToast({
|
|
|
title: '上课已确认！',
|
|
|
icon: 'success',
|
|
|
duration: 2000
|
|
|
});
|
|
|
// 重新加载
|
|
|
this.reset();
|
|
|
}
|
|
|
else{
|
|
|
uni.showToast({
|
|
|
title: res.msg? res.msg:'上课确认失败！',
|
|
|
icon: 'error',
|
|
|
duration: 2000
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
// 取消预约
|
|
|
cancelyydo(e){
|
|
|
console.log(e);
|
|
|
var id= e.currentTarget.dataset.id;
|
|
|
var that = this;
|
|
|
//取消预约
|
|
|
uni.showModal({
|
|
|
title: '提示',
|
|
|
content: '确定要取消预约吗？',
|
|
|
cancelText: '取消',
|
|
|
confirmText: '确定',
|
|
|
success: ress => {
|
|
|
if (ress.confirm) {
|
|
|
that.delyydo(id);
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
// 取消预约
|
|
|
async delyydo(id){
|
|
|
var param={
|
|
|
"courseTimeId":id
|
|
|
};
|
|
|
uni.showToast({
|
|
|
title: '取消中...',
|
|
|
icon: 'success',
|
|
|
duration: 2000
|
|
|
});
|
|
|
const {data: res} = await uni.$http.post('/api/course/cancelCourse', param);
|
|
|
if(res.msg=="successed"){
|
|
|
uni.showToast({
|
|
|
title: '预约已取消！',
|
|
|
icon: 'success',
|
|
|
duration: 2000
|
|
|
});
|
|
|
// 重新加载
|
|
|
this.reset();
|
|
|
}
|
|
|
else{
|
|
|
uni.showToast({
|
|
|
title: res.msg? res.msg:'预约取消失败！',
|
|
|
icon: 'error',
|
|
|
duration: 2000
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
// 取消课程
|
|
|
cancelkcdo(e){
|
|
|
console.log(e);
|
|
|
var id= e.currentTarget.dataset.id;
|
|
|
var that = this;
|
|
|
//取消课程
|
|
|
uni.showModal({
|
|
|
title: '提示',
|
|
|
content: '确定要取消课程吗？',
|
|
|
cancelText: '取消',
|
|
|
confirmText: '确定',
|
|
|
success: ress => {
|
|
|
if (ress.confirm) {
|
|
|
that.delkcdo(id);
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
// 取消课程
|
|
|
async delkcdo(id){
|
|
|
var param={
|
|
|
"courseTimeId":id
|
|
|
};
|
|
|
uni.showToast({
|
|
|
title: '取消中...',
|
|
|
icon: 'success',
|
|
|
duration: 2000
|
|
|
});
|
|
|
const {data: res} = await uni.$http.post('/api/course/cancelCourse', param);
|
|
|
if(res.msg=="successed"){
|
|
|
uni.showToast({
|
|
|
title: '课程已取消！',
|
|
|
icon: 'success',
|
|
|
duration: 2000
|
|
|
});
|
|
|
// 重新加载
|
|
|
this.reset();
|
|
|
}
|
|
|
else{
|
|
|
uni.showToast({
|
|
|
title: res.msg? res.msg:'课程取消失败！',
|
|
|
icon: 'error',
|
|
|
duration: 2000
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
reset(){
|
|
|
// 重新加载数据
|
|
|
this.list.forEach((cell,idx)=>{
|
|
|
this.list[idx].loadStatus='more';
|
|
|
this.list[idx].slist=[];
|
|
|
});
|
|
|
this.$forceUpdate();
|
|
|
this.loadData();
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.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));
|
|
|
}
|
|
|
.olistcon{
|
|
|
padding: 0 20rpx 20rpx 20rpx;
|
|
|
.olist{
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
.ocell{
|
|
|
font-size: 26rpx;
|
|
|
color:#747474;
|
|
|
padding: 10rpx 0;
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
.red{
|
|
|
color:#ff3d0e;
|
|
|
}
|
|
|
.green{
|
|
|
color:#00cd00;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.swiper-box {
|
|
|
flex: 1;
|
|
|
height: calc(100vh - var(--window-top) - 130rpx) !important;
|
|
|
}
|
|
|
.swiper-item {
|
|
|
height: 100%;
|
|
|
}
|
|
|
.scrolllist{
|
|
|
height: 110rpx;
|
|
|
background: #FFF;
|
|
|
white-space: nowrap;
|
|
|
width: 100%;
|
|
|
}
|
|
|
.tabicl{
|
|
|
min-width: 130rpx;
|
|
|
height: 100rpx;
|
|
|
line-height: 100rpx;
|
|
|
position: relative;
|
|
|
display: inline-block;
|
|
|
overflow: hidden;
|
|
|
margin-right: 20rpx;
|
|
|
}
|
|
|
.ptext{
|
|
|
font-size: 30rpx;
|
|
|
text-align: center;
|
|
|
color: #000;
|
|
|
font-weight: 600;
|
|
|
height: 90rpx;
|
|
|
}
|
|
|
.cur .ptext{
|
|
|
color: #00a89b;
|
|
|
font-size: 33rpx;
|
|
|
font-weight: 600;
|
|
|
}
|
|
|
.cur .pline{
|
|
|
width: 40%;
|
|
|
height: 9rpx;
|
|
|
background: #00a89b;
|
|
|
border-radius: 6rpx;
|
|
|
opacity: 1;
|
|
|
margin-left: 30%;
|
|
|
}
|
|
|
.nodata{
|
|
|
width: 100%;
|
|
|
height: calc(100vh - 400rpx) !important;
|
|
|
line-height: calc(100vh) !important;
|
|
|
background-image: url('/static/image/no.png');
|
|
|
background-size: 52% auto;
|
|
|
background-repeat: no-repeat;
|
|
|
background-position: center;
|
|
|
font-size: 28rpx;
|
|
|
text-align: center;
|
|
|
color: #00a89b;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
.scell{
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
justify-content: flex-start;
|
|
|
margin: 20rpx;
|
|
|
.oitem{
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
background-color: #FFFFFF;
|
|
|
border-radius: 6rpx;
|
|
|
padding: 20rpx;
|
|
|
width: 100%;
|
|
|
margin-bottom: 20rpx;
|
|
|
.otop{
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
|
padding: 10rpx 0 0;
|
|
|
height: 60rpx;
|
|
|
line-height: 60rpx;
|
|
|
width: 100%;
|
|
|
.hleft{
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
|
flex:1;
|
|
|
align-items: center;
|
|
|
font-size: 30rpx;
|
|
|
color: #000;
|
|
|
}
|
|
|
.hright{
|
|
|
display: flex;
|
|
|
justify-content: flex-end;
|
|
|
align-items: center;
|
|
|
// <!--1：待付款，2：待发货，3：待收货 ，4：待评价 ，5：已完成，6：订单取消-->
|
|
|
.ztip{
|
|
|
border-radius: 12rpx;
|
|
|
color:#1296db;
|
|
|
font-size: 26rpx;
|
|
|
padding: 0;
|
|
|
height: 40rpx;
|
|
|
line-height: 40rpx;
|
|
|
}
|
|
|
.jtip{
|
|
|
border-radius: 12rpx;
|
|
|
color:#feb467;
|
|
|
font-size: 26rpx;
|
|
|
padding: 0;
|
|
|
height: 40rpx;
|
|
|
line-height: 40rpx;
|
|
|
}
|
|
|
.htip{
|
|
|
border-radius: 12rpx;
|
|
|
color:#fc6900;
|
|
|
font-size: 26rpx;
|
|
|
padding: 0;
|
|
|
height: 40rpx;
|
|
|
line-height: 40rpx;
|
|
|
}
|
|
|
.hwtip{
|
|
|
border-radius: 12rpx;
|
|
|
color:#FF0000;
|
|
|
font-size: 26rpx;
|
|
|
padding: 0;
|
|
|
height: 40rpx;
|
|
|
line-height: 40rpx;
|
|
|
}
|
|
|
.wtip{
|
|
|
border-radius: 12rpx;
|
|
|
color:#43cca4;
|
|
|
font-size: 26rpx;
|
|
|
padding: 0;
|
|
|
height: 40rpx;
|
|
|
line-height: 40rpx;
|
|
|
}
|
|
|
.gtip{
|
|
|
border-radius: 12rpx;
|
|
|
color:#0036D6;
|
|
|
font-size: 26rpx;
|
|
|
padding: 0;
|
|
|
height: 40rpx;
|
|
|
line-height: 40rpx;
|
|
|
}
|
|
|
.ftip{
|
|
|
border-radius: 12rpx;
|
|
|
color:#6A81F1;
|
|
|
font-size: 26rpx;
|
|
|
padding: 0;
|
|
|
height: 40rpx;
|
|
|
line-height: 40rpx;
|
|
|
}
|
|
|
.ctip{
|
|
|
border-radius: 12rpx;
|
|
|
color:#888;
|
|
|
font-size: 26rpx;
|
|
|
padding: 0;
|
|
|
height: 40rpx;
|
|
|
line-height: 40rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.obtn{
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
|
justify-content: flex-end;
|
|
|
border-top: 1rpx solid #eee;
|
|
|
padding: 20rpx 0 0;
|
|
|
width: 100%;
|
|
|
.qr{
|
|
|
display: flex;
|
|
|
flex:1;
|
|
|
color:#333;
|
|
|
align-items: center;
|
|
|
.qrimg{
|
|
|
width: 50rpx;
|
|
|
height: 50rpx;
|
|
|
}
|
|
|
}
|
|
|
.cancelbtn{
|
|
|
background-color: #FFFFFF !important;
|
|
|
margin-left: 20rpx;
|
|
|
border-radius: 50rpx;
|
|
|
height: 50rpx;
|
|
|
line-height: 48rpx;
|
|
|
padding: 0 20rpx;
|
|
|
font-size: 24rpx;
|
|
|
color:#888;
|
|
|
border:1rpx solid #888;
|
|
|
}
|
|
|
.cancelbtn::after{
|
|
|
border:0 !important;
|
|
|
}
|
|
|
.viewbtn{
|
|
|
background-color: #FFFFFF !important;
|
|
|
margin-left: 20rpx;
|
|
|
border-radius: 50rpx;
|
|
|
border-radius: 50rpx;
|
|
|
height: 50rpx;
|
|
|
line-height: 48rpx;
|
|
|
padding: 0 20rpx;
|
|
|
font-size: 24rpx;
|
|
|
color:#6A81F1;
|
|
|
border:1rpx solid #6A81F1;
|
|
|
}
|
|
|
.viewbtn::after{
|
|
|
border:0 !important;
|
|
|
}
|
|
|
.pjbtn{
|
|
|
background-color: #FFFFFF !important;
|
|
|
margin-left: 20rpx;
|
|
|
border-radius: 50rpx;
|
|
|
border-radius: 50rpx;
|
|
|
height: 50rpx;
|
|
|
line-height: 48rpx;
|
|
|
padding: 0 20rpx;
|
|
|
font-size: 24rpx;
|
|
|
border:1rpx solid rgb(252, 105, 0);
|
|
|
color:rgb(252, 105, 0);
|
|
|
}
|
|
|
.pjbtn::after{
|
|
|
border:0 !important;
|
|
|
}
|
|
|
.conbtn{
|
|
|
background-color: #f3f4ef !important;
|
|
|
margin-left: 20rpx;
|
|
|
border-radius: 50rpx;
|
|
|
border-radius: 50rpx;
|
|
|
height: 50rpx;
|
|
|
line-height: 48rpx;
|
|
|
padding: 0 20rpx;
|
|
|
font-size: 24rpx;
|
|
|
border:1rpx solid #00a89b;
|
|
|
color:#595d4d;
|
|
|
}
|
|
|
.conbtn::after{
|
|
|
border:0 !important;
|
|
|
}
|
|
|
.paybtn{
|
|
|
background-color: #00a89b !important;
|
|
|
margin-left: 20rpx;
|
|
|
border-radius: 50rpx;
|
|
|
border-radius: 50rpx;
|
|
|
height: 50rpx;
|
|
|
line-height: 48rpx;
|
|
|
padding: 0 20rpx;
|
|
|
font-size: 24rpx;
|
|
|
border:1rpx solid #00a89b;
|
|
|
}
|
|
|
.paybtn::after{
|
|
|
border:0 !important;
|
|
|
}
|
|
|
.gzbtn{
|
|
|
background-color: #f5aa00 !important;
|
|
|
margin-left: 20rpx;
|
|
|
border-radius: 50rpx;
|
|
|
height: 50rpx;
|
|
|
line-height: 48rpx;
|
|
|
padding: 0 20rpx;
|
|
|
font-size: 24rpx;
|
|
|
border:1rpx solid #f5aa00;
|
|
|
}
|
|
|
.gzbtn::after{
|
|
|
border:0 !important;
|
|
|
}
|
|
|
}
|
|
|
.oscon{
|
|
|
margin:20rpx 0;
|
|
|
border-radius: 16rpx;
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
.osimg{
|
|
|
width: 120rpx;
|
|
|
height: 120rpx;
|
|
|
border-radius: 10rpx;
|
|
|
}
|
|
|
.osname{
|
|
|
display: flex;
|
|
|
flex: 1;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
margin-left: 20rpx;
|
|
|
.ntxt{
|
|
|
font-size: 28rpx;
|
|
|
color:#000;
|
|
|
line-height: 36rpx;
|
|
|
margin-bottom: 8rpx;
|
|
|
}
|
|
|
.txt{
|
|
|
font-size: 24rpx;
|
|
|
color:#666;
|
|
|
}
|
|
|
}
|
|
|
.osprice{
|
|
|
display: flex;
|
|
|
justify-content: flex-end;
|
|
|
margin-right: 10rpx;
|
|
|
font-size: 30rpx;
|
|
|
color:#666;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.sitem {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
flex: 1;
|
|
|
background-color: #FFFFFF;
|
|
|
/*设置最小宽度，才会让元素排不下，导致换行排列*/
|
|
|
min-width: calc((100% - 20rpx) / 2);
|
|
|
max-width: calc((100% - 20rpx) / 2);
|
|
|
margin-right:5rpx;
|
|
|
margin-left:5rpx;
|
|
|
margin-bottom: 10rpx;
|
|
|
border-radius: 16rpx;
|
|
|
.simg{
|
|
|
width: 100%;
|
|
|
height: 360rpx;
|
|
|
.img{
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
border-radius: 16rpx 16rpx 0 0;
|
|
|
}
|
|
|
}
|
|
|
.sname{
|
|
|
font-size: 30rpx;
|
|
|
font-weight: 600;
|
|
|
color: rgb(29, 29, 29);
|
|
|
padding: 16rpx;
|
|
|
}
|
|
|
.sinfo{
|
|
|
font-size: 26rpx;
|
|
|
color:rgb(116, 116, 116);
|
|
|
padding: 0 16rpx;
|
|
|
height: 60rpx;
|
|
|
line-height: 30rpx;
|
|
|
overflow: hidden;
|
|
|
position: relative;
|
|
|
text-overflow: ellipsis;
|
|
|
display:-webkit-box;
|
|
|
-webkit-box-orient:vertical;
|
|
|
-webkit-line-clamp:2;
|
|
|
}
|
|
|
.sprices{
|
|
|
padding: 0 16rpx 20rpx 16rpx;
|
|
|
font-size: 36rpx;
|
|
|
color:rgb(252, 105, 0);
|
|
|
border-radius: 0 0 16rpx 16rpx;
|
|
|
.cx{
|
|
|
font-size: 28rpx;
|
|
|
color:rgb(116, 116, 116);
|
|
|
text-decoration: line-through;
|
|
|
margin-left: 20rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.pcon{
|
|
|
width: 690rpx;
|
|
|
padding-top:30rpx;
|
|
|
padding-bottom:50rpx;
|
|
|
background: #FCFCFD;
|
|
|
box-shadow: 0rpx 128rpx 128rpx 2rpx rgba(31,47,70,0.12);
|
|
|
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
|
|
position: relative;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
.phtxt{
|
|
|
width: 600rpx;
|
|
|
margin: 20rpx auto 10rpx;
|
|
|
font-size: 36rpx;
|
|
|
font-family: PingFang SC-Regular, PingFang SC;
|
|
|
font-weight: 600;
|
|
|
color: #23262F;
|
|
|
}
|
|
|
.ptxt
|
|
|
{
|
|
|
width: 620rpx;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
margin: 30rpx auto;
|
|
|
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
|
|
opacity: 1;
|
|
|
border: 2rpx solid #F7F8FA;
|
|
|
padding: 30rpx;
|
|
|
.qrimg{
|
|
|
width: 400rpx;
|
|
|
height: 400rpx;
|
|
|
}
|
|
|
}
|
|
|
.btn{
|
|
|
width: 520rpx;
|
|
|
height: 80rpx;
|
|
|
line-height: 80rpx;
|
|
|
background: #00A99A;
|
|
|
box-shadow: 0rpx 12rpx 64rpx 2rpx rgba(0,169,154,0.4);
|
|
|
border-radius: 254rpx 254rpx 254rpx 254rpx;
|
|
|
text-align: center;
|
|
|
font-size: 32rpx;
|
|
|
font-family: PingFang SC-Medium, PingFang SC;
|
|
|
font-weight: 500;
|
|
|
color: #FCFCFD;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
</style>
|
