9 changed files with 348 additions and 66 deletions
-
247src/components/order_list/modal/ticket_check.vue
-
8src/components/organize_order/organize_order.vue
-
53src/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