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.
391 lines
8.6 KiB
391 lines
8.6 KiB
<template>
|
|
<view>
|
|
<view class="bookedInformation">
|
|
<view class="booked-title">
|
|
<!-- 头部信息 -->
|
|
<view class="booked-title-box dis-flex">
|
|
<view class="booked-img">
|
|
<image :src="bookedData.goods.logo" mode=""></image>
|
|
</view>
|
|
<view class="booked-name">
|
|
<view class="booked-name-title">
|
|
{{bookedData.goods.name}}
|
|
</view>
|
|
<view class="col-9 f-26 p-top-20" v-if="bookedData.goods.optionName">
|
|
{{bookedData.goods.optionName}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 商家详情 -->
|
|
<view class="store-datum">
|
|
<view class="store-name">
|
|
{{bookedData.merchant.storename}}
|
|
</view>
|
|
<view class="store-time">
|
|
营业时间：{{bookedData.merchant.storehours}}
|
|
</view>
|
|
<view class="store-phone store-time dis-flex">
|
|
<view class="phone">
|
|
商家电话：{{bookedData.merchant.mobile}}
|
|
</view>
|
|
<view class="play-call" @click="playcall">
|
|
<view class="iconfont icon-dianhua play-call-icon">
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="store-phone store-time dis-flex">
|
|
<view class="phone">
|
|
{{bookedData.merchant.address}}
|
|
</view>
|
|
<view class="play-call" @click="openNavigation">
|
|
<view class="iconfont icon-location_light play-call-icon">
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view style="padding-bottom: 200upx;">
|
|
<view class="appointment-box" v-for="(item,index) in bookedData.applist">
|
|
<view class="appointment-state dis-flex">
|
|
<view class="state">
|
|
<view >
|
|
<view class="dis-il-block iconfont icon-timefill c-ff4444" v-if="item.status == 0">
|
|
|
|
</view>
|
|
<view class="dis-il-block iconfont icon-roundcheckfill c-ff4444" v-else-if="item.status == 1">
|
|
|
|
</view>
|
|
<view class="dis-il-block iconfont icon-roundclosefill c-ff4444" v-else>
|
|
|
|
</view>
|
|
<view class="dis-il-block state-title">
|
|
{{item.statusTips}}
|
|
</view>
|
|
</view>
|
|
<view class="state-text">
|
|
{{item.statusText}}
|
|
</view>
|
|
</view>
|
|
<view class="appointment-btn">
|
|
<view class="btn" v-if="item.status == 0" @click="cancel(item)">
|
|
取消预约
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="appointment-data">
|
|
<view class="dis-flex appointment-time">
|
|
<view class="time-title">
|
|
预约时间
|
|
</view>
|
|
<view class="time-time t-r">
|
|
{{item.date}} {{item.starttime}}-{{item.endtime}}
|
|
</view>
|
|
</view>
|
|
<view class="dis-flex appointment-time">
|
|
<view class="time-title">
|
|
预约数量
|
|
</view>
|
|
<view class="time-time t-r">
|
|
{{item.num}}份
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="appointment-remark" v-if="item.remark">
|
|
<view class="remark-box">
|
|
<text>{{item.remark}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
<view class="booked-content">
|
|
|
|
</view>
|
|
</view>
|
|
<TabBars :tabBarAct="0" />
|
|
</view>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import App from '@/common/js/app.js';
|
|
import Map from '@/common/js/ms-openMap/openMap.js'
|
|
// #ifdef H5
|
|
import wxApi from '@/common/js/wxApi.js';
|
|
// #endif
|
|
import TabBars from '@/components/template/tabBar.vue';
|
|
export default{
|
|
data(){
|
|
return{
|
|
loadlogo:false,
|
|
bookedData:{},
|
|
channel:3,
|
|
ids:{}
|
|
}
|
|
},
|
|
components:{
|
|
TabBars
|
|
},
|
|
onLoad(e) {
|
|
this.ids = e;
|
|
this.getBookedData();
|
|
},
|
|
methods:{
|
|
playcall(){ //拨打电话
|
|
let _this = this;
|
|
uni.makePhoneCall({
|
|
phoneNumber: _this.bookedData.merchant.mobile
|
|
});
|
|
},
|
|
openNavigation(){ //打开地图
|
|
let detailsData = this.bookedData.merchant;
|
|
detailsData.location = {
|
|
lat:detailsData.lat,
|
|
lng:detailsData.lng
|
|
}
|
|
// #ifdef H5
|
|
console.log(detailsData);
|
|
wxApi.WxopenLocation(
|
|
detailsData['lat'],
|
|
detailsData['lng'],
|
|
detailsData['storename'],
|
|
detailsData['address']
|
|
)
|
|
// #endif
|
|
// #ifdef MP-WEIXIN
|
|
App.openLocation(detailsData)
|
|
// #endif
|
|
//#ifdef APP-PLUS
|
|
Map.openMap(Number(detailsData['lat']),Number(detailsData['lng']),detailsData['storename'],'gcj02')
|
|
//#endif
|
|
},
|
|
cancel(item){ //预约函数
|
|
App.showError(
|
|
`确定取消本次预约?`,
|
|
data => {
|
|
if (data.confirm) {
|
|
let data = {
|
|
appointid:item.id,
|
|
channel:this.channel
|
|
}
|
|
App._post_form(
|
|
`&p=order&do=cancelAppoint`,
|
|
data,
|
|
res => {
|
|
uni.showToast({
|
|
title:res.message
|
|
});
|
|
this.getBookedData(); //状态更改
|
|
},
|
|
false,
|
|
() => {
|
|
}
|
|
);
|
|
}
|
|
},
|
|
true
|
|
);
|
|
|
|
},
|
|
getBookedData(){ //初始化信息
|
|
let data = {
|
|
orderid:this.ids.orderid,
|
|
goodsid:this.ids.id,
|
|
pluginno:this.ids.type
|
|
}
|
|
App._post_form(
|
|
`&p=order&do=appointDetail`,
|
|
data,
|
|
res => {
|
|
this.bookedData = res.data;
|
|
},
|
|
false,
|
|
() => {
|
|
this.loadlogo = true;
|
|
}
|
|
);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
page{
|
|
background-color: #F8F8F8;
|
|
}
|
|
</style>
|
|
<style lang="scss" scoped>
|
|
.bookedInformation{
|
|
// padding-bottom: 300upx;
|
|
.booked-title{
|
|
width: 750upx;
|
|
height: 358upx;
|
|
background: linear-gradient(180deg, #FF4444 0%, #FF9494 76%, rgba(255, 255, 255, 0) 100%);
|
|
opacity: 1;
|
|
padding: 40upx 30upx;
|
|
box-sizing: border-box;
|
|
.booked-title-box{
|
|
padding: 30upx;
|
|
border-radius: 10upx;
|
|
background-color: #FFFFFF;
|
|
.booked-img{
|
|
width: 130upx;
|
|
height: 130upx;
|
|
padding-right: 30upx;
|
|
flex: 0.3;
|
|
image{
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 6upx;
|
|
}
|
|
}
|
|
.booked-name{
|
|
flex: 0.7;
|
|
.booked-name-title{
|
|
min-height: 76upx;
|
|
font-size: 28upx;
|
|
font-weight: bold;
|
|
line-height: 40upx;
|
|
color: #333333;
|
|
letter-spacing: 3upx;
|
|
opacity: 1;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
/*! autoprefixer: off */
|
|
-webkit-box-orient: vertical;
|
|
width: 470upx;
|
|
|
|
}
|
|
}
|
|
}
|
|
.store-datum{
|
|
padding: 30upx;
|
|
border-radius: 10upx;
|
|
background-color: #FFFFFF;
|
|
margin-top: 20upx;
|
|
.store-name{
|
|
height: 50upx;
|
|
font-size: 28upx;
|
|
font-weight: bold;
|
|
line-height: 34upx;
|
|
color: #333333;
|
|
opacity: 1;
|
|
}
|
|
.store-time{
|
|
height: 50upx;
|
|
font-size: 24upx;
|
|
|
|
font-weight: 400;
|
|
line-height: 34upx;
|
|
color: #999999;
|
|
opacity: 1;
|
|
}
|
|
.store-phone{
|
|
.phone{
|
|
flex: 0.9;
|
|
}
|
|
.play-call{
|
|
flex: 0.1;
|
|
.play-call-icon{
|
|
font-size: 22upx;
|
|
float: right;
|
|
background-color: #FF4444;
|
|
color: #FFFFFF;
|
|
height: 40upx;
|
|
width: 40upx;
|
|
text-align: center;
|
|
line-height: 40upx;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.appointment-box{
|
|
padding: 30upx;
|
|
border-radius: 10upx;
|
|
margin-top: 20upx;
|
|
background-color: #FFFFFF;
|
|
|
|
.appointment-state{
|
|
padding-bottom: 20upx;
|
|
border-bottom: 1upx solid #EEEEEE;
|
|
.state{
|
|
flex: 0.78;
|
|
|
|
.state-title{
|
|
padding-left: 20upx;
|
|
font-size: 32upx;
|
|
font-weight: bold;
|
|
line-height: 45upx;
|
|
color: #333333;
|
|
letter-spacing: 2upx;
|
|
opacity: 1;
|
|
}
|
|
.state-text{
|
|
height: 50upx;
|
|
font-size: 24upx;
|
|
font-weight: 400;
|
|
line-height: 60upx;
|
|
color: #333333;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
.appointment-btn{
|
|
padding-top: 25upx;
|
|
flex: 0.22;
|
|
.btn{
|
|
float: right;
|
|
text-align: center;
|
|
line-height: 50upx;
|
|
font-size: 24upx;
|
|
width: 140upx;
|
|
height: 50upx;
|
|
border-radius: 60upx;
|
|
border: 2upx solid #333333;
|
|
color: #333333;
|
|
}
|
|
}
|
|
}
|
|
.appointment-data{
|
|
padding-top: 20upx;
|
|
.appointment-time{
|
|
.time-title{
|
|
font-size: 24upx;
|
|
font-weight: 400;
|
|
line-height: 48upx;
|
|
color: #999999;
|
|
opacity: 1;
|
|
flex: 0.3;
|
|
}
|
|
.time-time{
|
|
font-size: 24upx;
|
|
font-weight: 400;
|
|
line-height: 48upx;
|
|
color: #333333;
|
|
opacity: 1;
|
|
flex: 0.7;
|
|
}
|
|
}
|
|
}
|
|
.appointment-remark{
|
|
background-color: #F8F8F8;
|
|
border-radius: 10upx;
|
|
padding: 20upx 30upx;
|
|
margin-top: 20upx;
|
|
.remark-box{
|
|
font-size: 24upx;
|
|
font-weight: 400;
|
|
line-height: 42upx;
|
|
color: #333333;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|