9 changed files with 348 additions and 66 deletions
-
247src/components/order_list/modal/ticket_check.vue
-
8src/components/organize_order/organize_order.vue
-
55src/components/reservation_order/reservation_order.vue
-
7src/components/site/order_modal/order_modal.vue
-
11src/components/timing_order/timing_order.vue
-
7src/js/api.js
-
25src/pages/order_list/order_list.vue
-
28src/subpackage/device/components/order/reservation_people_detail/reservation_people_detail.vue
-
26src/subpackage/device/pages/order_details/order_details.vue
@ -0,0 +1,247 @@ |
|||
<template> |
|||
<view> |
|||
<view class="modal-mask" v-if="isShow"> |
|||
<view class="time-ticket-check"> |
|||
<image @click="hide" class="ttc-close" mode="aspectFit" src="/static/images/icon/x_close.png"></image> |
|||
<view class="ttc-title">核销次票</view> |
|||
<view class="ttc-container"> |
|||
<view class="ttc-ticket-info"> |
|||
<view class="tti-line">到期时间：{{ orderInfo.end_time || '-' }}</view> |
|||
<view class="tti-line">剩余待使用：{{ orderInfo.available_num || 0 }}</view> |
|||
</view> |
|||
<view class="tc-check-number"> |
|||
<veiew class="tcn-text"><text class="tt-txt">*</text>核销次数</veiew> |
|||
<veiw class="tcn-operate"> |
|||
<view class="to-btn" @click="numOperate('reduce')"></view> |
|||
<view class="to-ipt"> |
|||
<input |
|||
:disabled="orderInfo.available_num === 1" |
|||
class="ti-input" |
|||
type="number" |
|||
placeholder="0" |
|||
v-model="ticketNumber" |
|||
/> |
|||
</view> |
|||
<view class="to-btn add" @click="numOperate('add')"></view> |
|||
</veiw> |
|||
<veiew class="tcn-text">张</veiew> |
|||
</view> |
|||
<view class="tc-tip">确认核销数量后，系统将会自动核销对应数量的票，核销后“待使用”的验证码状态更改为“已使用”</view> |
|||
</view> |
|||
<view class="ttc-btns"> |
|||
<view class="tb-btn" @click="hide">取消</view> |
|||
<view class="tb-btn active" @click="confirm">确认</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import util from '../../../utils/util.js'; |
|||
import { servers } from '../../../js/server'; |
|||
import { API } from '../../../js/api'; |
|||
export default { |
|||
data() { |
|||
return { |
|||
isShow: false, |
|||
ticketNumber: 1, |
|||
orderInfo: {}, |
|||
orderIndex: -1, |
|||
} |
|||
}, |
|||
methods: { |
|||
numOperate(type){ |
|||
let { ticketNumber, orderInfo } = this; |
|||
let { available_num } = orderInfo; |
|||
if(+available_num === 0)return; |
|||
if(type === 'add'){ |
|||
if(+ticketNumber >= +available_num)return; |
|||
this.ticketNumber++; |
|||
}else{ |
|||
if(+ticketNumber <= 1)return; |
|||
this.ticketNumber--; |
|||
} |
|||
}, |
|||
confirm(){ |
|||
let { ticketNumber, orderInfo } = this; |
|||
let { available_num, id } = orderInfo; |
|||
if(+available_num === 0)return; |
|||
if(+ticketNumber > +available_num)return util.showNone('核销次数不能大于剩余次数'); |
|||
this.getOrderInfo({ |
|||
order_no: orderInfo.order_no, |
|||
stadium_id: orderInfo.stadium_id |
|||
}) |
|||
|
|||
this.hide(); |
|||
}, |
|||
getOrderInfo({ |
|||
order_no, |
|||
stadium_id |
|||
}){ |
|||
let { orderIndex } = this; |
|||
util.showLoad(); |
|||
servers.get({ |
|||
url: API.order.reservationDetail, |
|||
data: { order_no, stadium_id }, |
|||
failMsg: '加载订单信息失败！' |
|||
}) |
|||
.then(res => { |
|||
util.hideLoad(); |
|||
this.$emit('confirm', { orderInfo: res || {}, orderIndex }); |
|||
}) |
|||
}, |
|||
show({ info, index }) { |
|||
let { orderInfo } = this; |
|||
this.orderInfo = info || {}; |
|||
this.orderIndex = index; |
|||
this.isShow = true; |
|||
this.$emit('show'); |
|||
if(orderInfo?.id !== info?.id){ |
|||
this.ticketNumber = 1; |
|||
} |
|||
}, |
|||
hide() { |
|||
this.isShow = false; |
|||
this.$emit('hide'); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
@import '~style/public.scss'; |
|||
.modal-mask{ |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
background-color: rgba(0,0,0,.5); |
|||
} |
|||
.time-ticket-check{ |
|||
position: absolute; |
|||
top: 50%; |
|||
left: 50%; |
|||
transform: translate(-50%, -50%); |
|||
padding-top: 78upx; |
|||
padding-bottom: 80upx; |
|||
width: 620upx; |
|||
background-color: #fff; |
|||
border-radius: 10upx; |
|||
} |
|||
.ttc-close{ |
|||
position: absolute; |
|||
right: 30upx; |
|||
top: 30upx; |
|||
display: block; |
|||
width: 34upx; |
|||
height: 34upx; |
|||
} |
|||
.ttc-title{ |
|||
text-align: center; |
|||
font-size: 32upx; |
|||
font-weight: 500; |
|||
line-height: 44upx; |
|||
color: #333; |
|||
} |
|||
.ttc-container{ |
|||
padding: 32upx 62upx; |
|||
} |
|||
.ttc-ticket-info{ |
|||
.tti-line{ |
|||
font-size: 28upx; |
|||
line-height: 48upx; |
|||
color: #333; |
|||
@include textHide(1); |
|||
} |
|||
} |
|||
.tc-check-number{ |
|||
margin-top: 50upx; |
|||
@include centerFlex(space-between); |
|||
.tcn-text{ |
|||
font-size: 28upx; |
|||
line-height: 48upx; |
|||
color: #333; |
|||
.tt-txt{ |
|||
color: #EA5061; |
|||
} |
|||
} |
|||
.tcn-operate{ |
|||
margin-left: auto; |
|||
margin-right: 20upx; |
|||
@include centerFlex(center); |
|||
.to-btn{ |
|||
position: relative; |
|||
width: 58upx; |
|||
height: 56upx; |
|||
background-color: #F2F2F7; |
|||
&::before{ |
|||
content: ''; |
|||
position: absolute; |
|||
display: block; |
|||
left: 50%; |
|||
top: 50%; |
|||
transform: translate(-50%, -50%); |
|||
width: 24upx; |
|||
height: 4upx; |
|||
border-radius: 2upx; |
|||
background-color: #9A9A9D; |
|||
} |
|||
&.add{ |
|||
&::after{ |
|||
content: ''; |
|||
position: absolute; |
|||
display: block; |
|||
left: 50%; |
|||
top: 50%; |
|||
transform: translate(-50%, -50%); |
|||
width: 4upx; |
|||
height: 24upx; |
|||
border-radius: 2upx; |
|||
background-color: #9A9A9D; |
|||
} |
|||
} |
|||
} |
|||
.to-ipt{ |
|||
margin: 0 4upx; |
|||
width: 132upx; |
|||
height: 56upx; |
|||
background-color: #F2F2F7; |
|||
.ti-input{ |
|||
width: 100%; |
|||
height: 100%; |
|||
font-size: 28upx; |
|||
color: #333; |
|||
text-align: center; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.tc-tip{ |
|||
margin-top: 28upx; |
|||
font-size: 24upx; |
|||
line-height: 48upx; |
|||
color: #9a9a9d; |
|||
} |
|||
.ttc-btns{ |
|||
@include centerFlex(center); |
|||
.tb-btn{ |
|||
margin: 0 20upx; |
|||
width: 240upx; |
|||
line-height: 84upx; |
|||
text-align: center; |
|||
border: 2upx solid $themeColor; |
|||
border-radius: 10upx; |
|||
font-size: 32upx; |
|||
font-weight: 500; |
|||
color: $themeColor; |
|||
&.active{ |
|||
background-color: $themeColor; |
|||
color: #fff; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue