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.
316 lines
11 KiB
316 lines
11 KiB
<template>
|
|
<view class="site-confirm">
|
|
<view class="sc-section">
|
|
<view class="sc-address">
|
|
<view class="sa-name">
|
|
<image mode="aspectFit" :src="occupyInfo.storeInfo.logo || ''"></image>
|
|
<text>{{occupyInfo.storeInfo.name || '-'}}</text>
|
|
</view>
|
|
<view class="sa-detail">
|
|
<view>地址：</view>
|
|
<view>{{occupyInfo.storeInfo.venue_addr || '-'}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="sc-order-info">
|
|
<view class="soi-line">
|
|
<view>预定项目：</view>
|
|
<view><view>{{occupyInfo.typeInfo.name || '-'}}</view></view>
|
|
</view>
|
|
<view class="soi-line">
|
|
<view>预定日期：</view>
|
|
<view><view>{{occupyInfo.dateInfo.dayStr || '-'}}({{occupyInfo.dateInfo.showDateStr || '-'}})</view></view>
|
|
</view>
|
|
<view class="soi-line">
|
|
<view>预定场次：</view>
|
|
<view>
|
|
<block v-for="(e, i) in occupyInfo.venueList" :key="i">
|
|
<view>{{e.parentObj.venue_name || '-'}} {{e.durations || '-'}} (¥{{e.price || '-'}})</view>
|
|
</block>
|
|
</view>
|
|
</view>
|
|
<view class="soi-total">
|
|
<text>小计（共{{(occupyInfo.venueList&&occupyInfo.venueList.length) || 0}}场）</text>
|
|
¥{{ totalPrice || 0 }}
|
|
</view>
|
|
</view>
|
|
<view class="sc-switch">
|
|
<view><view><text>*</text>是否联动开灯</view><switch @change="switchChange" color="#009874"></switch></view>
|
|
<view>联动开灯开启后，会根据占用时间自动开灯</view>
|
|
</view>
|
|
<view class="sc-ipt">
|
|
<view class="si-price">
|
|
<view class="sp-tit">收取金额</view>
|
|
<view class="sp-frame"><input v-model="ocPrice" type="number" /></view>
|
|
</view>
|
|
<view class="si-reason">
|
|
<view class="sr-tit">占用原因</view>
|
|
<view class="sr-frame">
|
|
<textarea placeholder="多行输入…" v-model="ocReaon"></textarea>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<cover-view class="sc-fixed-bot">
|
|
<cover-view class="sfb-view" hover-class="hover-active" @click="confirmOccupy">确定</cover-view>
|
|
</cover-view>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import { mapState } from 'vuex';
|
|
import { API } from '../../../js/api';
|
|
import { servers } from '../../../js/server';
|
|
import util from '../../../utils/util';
|
|
export default {
|
|
data(){
|
|
return {
|
|
ocPrice: '',
|
|
ocReaon: '',
|
|
light_up: false,
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState([ 'occupyInfo' ]),
|
|
totalPrice(){
|
|
let { occupyInfo } = this;
|
|
let _list = occupyInfo.venueList || [];
|
|
if(!_list.length)return 0;
|
|
let _price = 0;
|
|
_list.forEach(e=>_price += +e.price);
|
|
console.warn(_price)
|
|
return _price.toFixed(2);
|
|
}
|
|
},
|
|
onLoad(){
|
|
console.log(this.occupyInfo)
|
|
},
|
|
methods: {
|
|
switchChange(e){
|
|
this.light_up = e.detail.value
|
|
},
|
|
confirmOccupy: util.debounce(function(){
|
|
let { storeInfo, dateInfo, venueList, typeInfo } = this.occupyInfo;
|
|
let { ocPrice, ocReaon, light_up } = this;
|
|
util.showLoad();
|
|
servers.post({
|
|
url: API.venue.venueTakeUp,
|
|
data: {
|
|
brand_id: storeInfo.brand_id,
|
|
reason: ocReaon,
|
|
amount: +ocPrice,
|
|
group: storeInfo.id,
|
|
date: dateInfo.dateStr,
|
|
items: venueList.map(el=>{
|
|
return {
|
|
venue_id: el.parentObj.venue_id,
|
|
venue_name: el.parentObj.venue_name,
|
|
duration: el.durations,
|
|
price: el.price
|
|
}
|
|
}),
|
|
light_up,
|
|
},
|
|
isDefaultGet: false
|
|
})
|
|
.then(res=>{
|
|
util.hideLoad();
|
|
if(res.data.code == 0){
|
|
|
|
util.showNone(res.data.message || '操作成功！');
|
|
let _res = res.data.data || {};
|
|
let _qrStr = `?brand_id=${_res.brand_id}&order_no=${_res.order_no}`
|
|
util.routeTo(`/pages/site/occupy_success/occupy_success${_qrStr}`, 'rT');
|
|
// setTimeout(_=>{
|
|
// util.routeTo();
|
|
// util.previousPageFunction({ // 刷新占用列表
|
|
// fnName: 'refreshList',
|
|
// query: null
|
|
// })
|
|
// }, 1200)
|
|
}else{
|
|
util.showNone(res.data.message || '操作失败！');
|
|
}
|
|
})
|
|
.catch(util.hideLoad)
|
|
|
|
}, 300, true),
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import "~style/public.scss";
|
|
.site-confirm{
|
|
padding-bottom: 138upx;
|
|
padding-bottom: calc( 138upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
|
|
padding-bottom: calc( 138upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
|
|
.sc-section{
|
|
background-color: #fff;
|
|
}
|
|
.sc-address{
|
|
padding: 24upx 24upx 20upx;
|
|
border-bottom: 2upx solid #D8D8D8;
|
|
.sa-name{
|
|
margin-bottom: 24upx;
|
|
line-height: 44upx;
|
|
font-size: 32upx;
|
|
font-weight: 500;
|
|
color: #333;
|
|
@include textHide(1);
|
|
>image{
|
|
margin-right: 2upx;
|
|
vertical-align: middle;
|
|
width: 34upx;
|
|
height: 34upx;
|
|
}
|
|
}
|
|
.sa-detail{
|
|
display: flex;
|
|
>view{
|
|
line-height: 40upx;
|
|
color: #9a9a9d;
|
|
font-size: 28upx;
|
|
&:first-child{
|
|
flex-shrink: 0;
|
|
}
|
|
&:nth-child(2){
|
|
flex-grow: 1;
|
|
word-break: break-all;
|
|
@include textHide(2);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.sc-order-info{
|
|
padding: 22upx 0;
|
|
margin: 0 auto;
|
|
width: 702upx;
|
|
border-bottom: 2upx solid #D8D8D8;
|
|
.soi-line{
|
|
display: flex;
|
|
margin-bottom: 8upx;
|
|
>view{
|
|
&:first-child{
|
|
flex-shrink: 0;
|
|
margin-right: 8upx;
|
|
line-height: 52upx;
|
|
font-size: 28upx;
|
|
color: #9a9a9d;
|
|
}
|
|
&:nth-child(2){
|
|
flex-grow: 1;
|
|
>view{
|
|
font-size: 28upx;
|
|
line-height: 52upx;
|
|
color: #333;
|
|
@include textHide(1);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.soi-total{
|
|
margin-top: 30upx;
|
|
text-align: right;
|
|
font-size: 28upx;
|
|
line-height: 52upx;
|
|
color: #333;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
>text{
|
|
color: #9a9a9d;
|
|
}
|
|
}
|
|
}
|
|
.sc-switch{
|
|
padding: 40upx 24upx 0;
|
|
>view{
|
|
&:first-child{
|
|
margin-bottom: 10upx;
|
|
@include centerFlex(space-between);
|
|
>view{
|
|
font-size: 32upx;
|
|
color: #333;
|
|
>text{
|
|
color: #EA5061;
|
|
}
|
|
}
|
|
}
|
|
&+view{
|
|
padding: 0 24upx;
|
|
font-size: 24upx;
|
|
line-height: 34upx;
|
|
color: #9A9A9D;
|
|
}
|
|
}
|
|
}
|
|
.sc-ipt{
|
|
margin: 0 auto;
|
|
padding-top: 40upx;
|
|
padding-bottom: 62upx;
|
|
width: 682upx;
|
|
.si-price{
|
|
margin-bottom: 12upx;
|
|
@include centerFlex(flex-start);
|
|
.sp-tit{
|
|
flex-shrink: 0;
|
|
margin-right: 28upx;
|
|
line-height: 40upx;
|
|
font-size: 28upx;
|
|
color: #333;
|
|
}
|
|
.sp-frame{
|
|
padding: 0 20upx;
|
|
width: 262upx;
|
|
height: 56upx;
|
|
border: 2upx solid #D8D8D8;
|
|
border-radius: 10upx;
|
|
>input{
|
|
width: 100%;
|
|
height: 100%;
|
|
font-size: 28upx;
|
|
color: #333;
|
|
}
|
|
}
|
|
}
|
|
.si-reason{
|
|
.sr-tit{
|
|
margin-bottom: 18upx;
|
|
font-size: 28upx;
|
|
color: #333;
|
|
}
|
|
.sr-frame{
|
|
padding: 20upx 10upx;
|
|
width: 682upx;
|
|
height: 260upx;
|
|
border: 2upx solid #D8D8D8;
|
|
border-radius: 10upx;
|
|
font-size: 28upx;
|
|
line-height: 40upx;
|
|
color: #333;
|
|
}
|
|
}
|
|
}
|
|
.sc-fixed-bot{
|
|
position: fixed;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
padding-top: 10upx;
|
|
padding-bottom: 10upx;
|
|
padding-bottom: calc( 10upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
|
|
padding-bottom: calc( 10upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
|
|
background-color: #fff;
|
|
.sfb-view{
|
|
margin: 0 auto;
|
|
width: 702upx;
|
|
height: 88upx;
|
|
line-height: 88upx;
|
|
text-align: center;
|
|
font-size: 32upx;
|
|
background-color: #FF873D;
|
|
color: #fff;
|
|
border-radius: 44upx;
|
|
}
|
|
}
|
|
}
|
|
</style>
|