|
|
<template>
|
|
|
<view class="page">
|
|
|
|
|
|
<view class="oinfo">
|
|
|
|
|
|
<view class="yycon scell" v-if="item">
|
|
|
<view class="oitem">
|
|
|
|
|
|
<view class="otop">
|
|
|
<view class="hleft">
|
|
|
{{item.courseName}}
|
|
|
</view>
|
|
|
<view class="hright">
|
|
|
{{item.startTime+'-'+item.endTime}}
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<view class="oscon">
|
|
|
<view class="osimg imgload">
|
|
|
<image class="osimg" v-if="item.pic" :src="getimgRemoteFile(item.pic)" mode="aspectFill"></image>
|
|
|
</view>
|
|
|
<view class="osname">
|
|
|
<view class="oscell">
|
|
|
<view v-if="item.claName=='团课'" class="txtbg">{{item.claName}}</view>
|
|
|
<view v-else class="txtbg1">{{item.claName}}</view>
|
|
|
<uni-rate :size="20" :readonly="true" :value="item.star" :max="item.star"/>
|
|
|
</view>
|
|
|
<view class="oscell" v-if="item.storeName">
|
|
|
<uni-icons type="shop" size="18" color="#00A99A"></uni-icons>
|
|
|
<view class="ntip">{{item.storeName}}</view>
|
|
|
</view>
|
|
|
<view class="oscell">
|
|
|
<uni-icons type="calendar" size="18" color="#00A99A"></uni-icons>
|
|
|
<view class="ntip">{{item.claDate}}</view>
|
|
|
<view class="txt">{{item.weekDay }}</view>
|
|
|
</view>
|
|
|
<view class="oscell">
|
|
|
<uni-icons type="person" size="18" color="#666"></uni-icons>
|
|
|
<view class="ntxt">{{item.staffName}}</view>
|
|
|
<!-- <view class="txt">授课5000h</view> -->
|
|
|
</view>
|
|
|
<view class="oscell" v-if="item.roomName">
|
|
|
<uni-icons type="map-pin-ellipse" size="18" color="#00A99A"></uni-icons>
|
|
|
<view class="ntxt">{{item.roomName}}</view>
|
|
|
</view>
|
|
|
<view class="oscell" v-if="item.atClassCnt">
|
|
|
<uni-icons type="checkbox" size="18" color="#00A99A"></uni-icons>
|
|
|
<view class="ntxt">已预约{{item.bookAttendCnt}}人/限{{item.atClassCnt}}人</view>
|
|
|
</view>
|
|
|
<view class="oscell" v-if="item.lessCnt">
|
|
|
<view class="txt" style="margin-left: 46rpx;">满{{item.lessCnt}}人开课</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="rcpm">
|
|
|
<button type="primary" class="orderbtn" @click="gotoorder">预约</button>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<!-- 信息 -->
|
|
|
<view class="yycon tcon">
|
|
|
<view class="olist">
|
|
|
<view class="ltxt">会籍类型：</view>
|
|
|
<view class="rtxt">精品团课</view>
|
|
|
</view>
|
|
|
<view class="olist">
|
|
|
<view class="ltxt">内容功效：</view>
|
|
|
<view class="rtxt">体育锻炼可以提高心肺的功能，提高心肌功能和血管弹性,还可以消耗体内多余的脂肪，促进肌肉的发育，增加韧带的强度，缓解精神紧张和压力</view>
|
|
|
</view>
|
|
|
<view class="olist">
|
|
|
<view class="ltxt">适合人群：</view>
|
|
|
<view class="rtxt">所有人</view>
|
|
|
</view>
|
|
|
<view class="olist">
|
|
|
<view class="ltxt">适合人群：</view>
|
|
|
<view class="rtxt">
|
|
|
● 可预约3天内课程，今天07:00后可约第3天的课<br>
|
|
|
● 预约课程请提前35分钟 <br>
|
|
|
● 取消预约请提前40分钟 <br>
|
|
|
● 爽约惩罚：在30天内爽约累计3次，则禁止约课3天<br>
|
|
|
● 签到说明:在课程开始前30分钟内至课程结束后30分钟内可以签到，其余时间不可签到<br>
|
|
|
● 请至少提前10分钟进教室（保持手机静音）<br>
|
|
|
● 课程中如有特殊情况请及时联系老师
|
|
|
</view>
|
|
|
</view>
|
|
|
</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:"",
|
|
|
item:{
|
|
|
"courseTimeId": 1935590320322428931,
|
|
|
"claName": "普拉提A班",
|
|
|
"courseName": "普拉提",
|
|
|
"storeName": "慢瑜伽-三台子店",
|
|
|
"pic": null,
|
|
|
"claDate": "2025-10-01",
|
|
|
"weekDay": "星期二",
|
|
|
"startTime": "08:00",
|
|
|
"endTime": "09:30",
|
|
|
"staffName": "冉洪涛老师",
|
|
|
"studentCount": 1,
|
|
|
"roomName": null,
|
|
|
"claColor": "#409EFF",
|
|
|
"claTimeStatus": "1",
|
|
|
"bookAttendCnt": "1",
|
|
|
"atClassCnt": "5",
|
|
|
"lessCnt": "3",
|
|
|
}
|
|
|
|
|
|
};
|
|
|
},
|
|
|
onLoad(options) {
|
|
|
// 课程详情
|
|
|
if(options.data){
|
|
|
this.item = JSON.parse(decodeURIComponent(options.data));
|
|
|
this.id = this.item.courseTimeId;
|
|
|
}
|
|
|
},
|
|
|
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: {
|
|
|
getimgRemoteFile(img){
|
|
|
if(img){
|
|
|
img=img.split(',')[0];
|
|
|
return getRemoteFile(img)
|
|
|
}
|
|
|
else{
|
|
|
return require("@/static/image/theme/p1.jpg")
|
|
|
}
|
|
|
},
|
|
|
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', {id:this.id});
|
|
|
if(res){
|
|
|
|
|
|
// 订单信息
|
|
|
this.info=res;
|
|
|
this.$forceUpdate();
|
|
|
}
|
|
|
},
|
|
|
gotoorder(){
|
|
|
var that = this;
|
|
|
// 再次预约
|
|
|
uni.showModal({
|
|
|
title: '提示',
|
|
|
content: '确定预约吗？',
|
|
|
cancelText: '取消',
|
|
|
confirmText: '确定',
|
|
|
success: ress => {
|
|
|
if (ress.confirm) {
|
|
|
that.orderdodo();
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
// 预约
|
|
|
async orderdodo(){
|
|
|
var param={
|
|
|
"courseTimeId": this.item.courseTimeId
|
|
|
};
|
|
|
uni.showToast({
|
|
|
title: '课程预约中...',
|
|
|
icon: 'success',
|
|
|
duration: 2000
|
|
|
});
|
|
|
const {data: res} = await uni.$http.post('/api/course/bookCourse', param);
|
|
|
if(res.msg=="successed"){
|
|
|
uni.showToast({
|
|
|
title: '课程已预约！',
|
|
|
icon: 'success',
|
|
|
duration: 2000
|
|
|
});
|
|
|
// 刷新保存
|
|
|
myCache('courserefresh',1);
|
|
|
// 返回
|
|
|
uni.navigateBack({
|
|
|
delta: 1
|
|
|
});
|
|
|
}
|
|
|
else{
|
|
|
uni.showToast({
|
|
|
title: res.msg? res.msg:'课程预约失败！',
|
|
|
icon: 'error',
|
|
|
duration: 2000
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
|
|
|
}
|
|
|
}
|
|
|
</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;
|
|
|
}
|
|
|
|
|
|
.oscon{
|
|
|
background-color: #f3fafa;
|
|
|
border-radius: 16rpx;
|
|
|
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;
|
|
|
}
|
|
|
.oscell{
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
|
align-items: center;
|
|
|
font-size: 28rpx;
|
|
|
color:#333;
|
|
|
padding: 10rpx 0;
|
|
|
border-bottom: 1rpx dotted #74defb;
|
|
|
.txt{
|
|
|
display: flex; flex: 1;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.oinfo{
|
|
|
padding:20rpx;
|
|
|
position: relative;
|
|
|
margin-bottom: 20rpx;
|
|
|
.yycon{
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
justify-content: center;
|
|
|
background-color: #FFFFFF;
|
|
|
padding: 20rpx 20rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.tcon{
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
justify-content: center;
|
|
|
background-color: #FFFFFF;
|
|
|
margin: 20rpx 10rpx 10rpx 10rpx;
|
|
|
.olist{
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
|
padding: 10rpx;
|
|
|
width: 100%;
|
|
|
.ltxt{
|
|
|
font-size: 26rpx;
|
|
|
color:#747474;
|
|
|
width: 150rpx;
|
|
|
}
|
|
|
.rtxt{
|
|
|
display: flex;
|
|
|
flex: 1;
|
|
|
font-size: 26rpx;
|
|
|
color:#747474;
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.red{
|
|
|
color:#ff3d0e;
|
|
|
}
|
|
|
.green{
|
|
|
color:#00cd00;
|
|
|
}
|
|
|
|
|
|
::v-deep.uni-radio-input-checked{
|
|
|
background-color: #00A99A !important;
|
|
|
border-color: #00A99A !important;
|
|
|
background-clip: content-box!important;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
::v-deep.uni-radio-input-checked::before{
|
|
|
display: none!important;
|
|
|
}
|
|
|
|
|
|
.scell{
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
justify-content: flex-start;
|
|
|
margin: 10rpx;
|
|
|
.oitem{
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
background-color: #FFFFFF;
|
|
|
border-radius: 6rpx;
|
|
|
padding: 20rpx 20rpx 0 20rpx;
|
|
|
width: 100%;
|
|
|
margin-bottom: 20rpx;
|
|
|
.rcpm{
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
width: 100%;
|
|
|
margin: 20rpx 0 0;
|
|
|
}
|
|
|
.orderbtn{
|
|
|
width: 100%;
|
|
|
background-color: #00A99A !important;
|
|
|
height: 80rpx;
|
|
|
line-height: 80rpx;
|
|
|
padding: 0 20rpx;
|
|
|
border:1rpx solid #00A99A;
|
|
|
}
|
|
|
.orderbtn::after{
|
|
|
border:0 !important;
|
|
|
}
|
|
|
.otop{
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
|
padding: 10rpx 0 20rpx;
|
|
|
width: 100%;
|
|
|
border-bottom: 1rpx solid #f0f0f0;
|
|
|
.hleft{
|
|
|
display: flex;
|
|
|
flex:1;
|
|
|
align-items: center;
|
|
|
font-size: 30rpx;
|
|
|
font-weight: 600;
|
|
|
line-height: 32rpx;
|
|
|
color: #000;
|
|
|
}
|
|
|
.hright{
|
|
|
display: flex;
|
|
|
justify-content: flex-end;
|
|
|
align-items: center;
|
|
|
font-size: 28rpx;
|
|
|
color: #000;
|
|
|
font-weight: 600;
|
|
|
}
|
|
|
}
|
|
|
.oscon{
|
|
|
margin:20rpx 0 10rpx;
|
|
|
border-radius: 16rpx;
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
.osimg{
|
|
|
width: 160rpx;
|
|
|
height: 260rpx;
|
|
|
border-radius: 10rpx;
|
|
|
}
|
|
|
.osname{
|
|
|
display: flex;
|
|
|
flex: 1;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
margin-left: 26rpx;
|
|
|
.oscell{
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
|
}
|
|
|
.txtbg{
|
|
|
padding: 2rpx 15rpx;
|
|
|
border-radius: 30rpx;
|
|
|
background-color: #f3fbfb;
|
|
|
border: 1rpx solid #7cced6;
|
|
|
font-size: 26rpx;
|
|
|
color: #333;
|
|
|
margin-right: 10rpx;
|
|
|
}
|
|
|
.txtbg1{
|
|
|
padding: 2rpx 15rpx;
|
|
|
border-radius: 30rpx;
|
|
|
background-color: #fcf2f3;
|
|
|
border: 1rpx solid #f09fb6;
|
|
|
font-size: 26rpx;
|
|
|
color: #333;
|
|
|
margin-right: 10rpx;
|
|
|
}
|
|
|
.txtbg2{
|
|
|
padding: 2rpx 15rpx;
|
|
|
border-radius: 30rpx;
|
|
|
background-color: #fcf3ef;
|
|
|
border: 1rpx solid #e99b12;
|
|
|
font-size: 26rpx;
|
|
|
color: #333;
|
|
|
margin-right: 10rpx;
|
|
|
}
|
|
|
.txtbg3{
|
|
|
padding: 2rpx 15rpx;
|
|
|
border-radius: 30rpx;
|
|
|
background-color: #f1f8f0;
|
|
|
border: 1rpx solid #7dbd71;
|
|
|
font-size: 26rpx;
|
|
|
color: #333;
|
|
|
margin-right: 10rpx;
|
|
|
}
|
|
|
.ntip{
|
|
|
font-size: 26rpx;
|
|
|
color:#1abbc3;
|
|
|
line-height: 32rpx;
|
|
|
margin-left: 10rpx;
|
|
|
}
|
|
|
.ntxt{
|
|
|
font-size: 26rpx;
|
|
|
color:#000;
|
|
|
line-height: 32rpx;
|
|
|
margin-left: 10rpx;
|
|
|
}
|
|
|
.txt{
|
|
|
font-size: 24rpx;
|
|
|
color:#666;
|
|
|
margin-left: 10rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.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;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
</style>
|
