5 Commits
a27123878c
...
5b0f63063f
| Author | SHA1 | Message | Date |
|---|---|---|---|
 郑锦全
|
5b0f63063f |
增加订单管理权限
|
4 years ago |
|
郑锦全
|
3cee378484 |
Merge branch 'iteration' of https://git.ouxuan.net/APP/ox_zhiNengZhuShou into iteration
|
4 years ago |
|
郑锦全
|
20f470cdfb |
add api order
|
4 years ago |
|
郑锦全
|
72e393c32c |
Merge branch 'iteration' of https://git.ouxuan.net/APP/ox_zhiNengZhuShou into iteration
|
4 years ago |
|
郑锦全
|
ae34e825b7 |
fix style
|
4 years ago |
17 changed files with 1683 additions and 1183 deletions
-
72src/components/reservation_order/reservation_order.vue
-
28src/components/timing_order/timing_order.vue
-
5src/js/api.js
-
12src/pages.json
-
8src/pages/index/index.vue
-
27src/pages/order_list/order_list.vue
-
1src/store/index.js
-
546src/subpackage/device/components/order/reservation_people/reservation_people.vue
-
828src/subpackage/device/components/order/reservation_people_detail/reservation_people_detail.vue
-
103src/subpackage/device/components/order/reservation_site_detail/reservation_site_detail.vue
-
120src/subpackage/device/components/order/timing_detail/timing_detail.vue
-
14src/subpackage/device/js/device_api.js
-
98src/subpackage/device/pages/order_details/order_details.vue
-
32src/subpackage/device/pages/order_details/reservation_details/reservation_details.vue
-
2src/subpackage/device/pages/order_manage/order_manage.vue
@ -1,546 +0,0 @@ |
|||
<template> |
|||
<view class="reservation-people"> |
|||
<view class="rp-head"> |
|||
<view class="rh-store"> |
|||
<image></image> |
|||
<view>欧轩智能场馆(羽毛球永泰店)</view> |
|||
</view> |
|||
<view class="rh-line"> |
|||
<view>订单编号：<text>2352534645764747</text></view> |
|||
<view><text :class="[true?'rl-active':'']">待使用</text></view> |
|||
</view> |
|||
<view class="rh-line"> |
|||
<view>创建时间：<text>2019-06-06 12:00:06</text></view> |
|||
</view> |
|||
<view class="rh-line"> |
|||
<view>用户昵称：<text>i术生</text></view> |
|||
</view> |
|||
<view class="rh-line"> |
|||
<view>创建时间：<text>2019-06-06 12:00:06</text></view> |
|||
</view> |
|||
<!-- 待使用 已绑定ic卡 --> |
|||
<block v-if="false"> |
|||
<view class="rh-line"> |
|||
<view>已绑定IC卡：<text>000000000213</text></view> |
|||
</view> |
|||
<view class="rh-line"> |
|||
<view>绑定时间：<text>2019-07-06 12:06:03</text></view> |
|||
</view> |
|||
</block> |
|||
|
|||
<!-- 待使用 未绑定ic卡 --> |
|||
<view :class="['rh-ic', false?'rh-ic-untie':'']" @click="isShowBindIC = !isShowBindIC">{{ false?'解绑IC卡':'绑定IC卡' }}</view> |
|||
</view> |
|||
<view class="rp-box"> |
|||
<view class="rb-title">验证信息<text>(1张可用)</text></view> |
|||
<!-- 人次+随时用 --> |
|||
<view class="rb-time" v-if="true"> |
|||
<view>有效期至：</view> |
|||
<text>2019年6月18日 10:30:40 </text> |
|||
</view> |
|||
<!-- 人次+指定日期 --> |
|||
<view class="rb-time" v-if="false"> |
|||
<view>使用日期：</view> |
|||
<text>2020-12-25（周五） 上午场</text> |
|||
</view> |
|||
<view class="rb-code"> |
|||
<view class="rc-item" v-for="i in 2" :key="i"> |
|||
<view class="ri-tit">验证码{{i+1}}：</view> |
|||
<view class="ri-section"> |
|||
<view class="rs-view">1223 5512 4534 (已使用)</view> |
|||
<view class="rs-view">核销方式：扫码核销</view> |
|||
<view class="rs-view">核销时间：2019-06-01 13:20</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="rp-box"> |
|||
<view class="rb-title">预订信息</view> |
|||
<view class="rb-name"> |
|||
<view>单人羽毛球次卡<text>（可随时使用）</text></view> |
|||
</view> |
|||
<view class="rb-line"> |
|||
<view>数量：<text>3</text></view> |
|||
</view> |
|||
<view class="rb-line"> |
|||
<view>类型：<text>平日+上午场</text></view> |
|||
</view> |
|||
<view class="rb-section"> |
|||
<view class="rs-line"> |
|||
<view>金额小计</view> |
|||
<view>¥6</view> |
|||
</view> |
|||
<view class="rs-line"> |
|||
<view>积分抵扣</view> |
|||
<view>-¥6</view> |
|||
</view> |
|||
<view class="rs-line"> |
|||
<view>折扣金额</view> |
|||
<view>-¥0</view> |
|||
</view> |
|||
<view class="rs-line"> |
|||
<view>优惠券优惠</view> |
|||
<view>-¥1</view> |
|||
</view> |
|||
</view> |
|||
<view class="rb-total"> |
|||
<view>合计支付：<text>￥</text><text>5</text></view> |
|||
</view> |
|||
</view> |
|||
<view class="rp-box"> |
|||
<view class="rb-title">支付信息</view> |
|||
<view class="rb-line"> |
|||
<view>支付方式：<text>微信支付</text></view> |
|||
</view> |
|||
<view class="rb-line"> |
|||
<view>支付时间：<text>2019年6月18日 10:30:40</text></view> |
|||
</view> |
|||
<view class="rb-line"> |
|||
<view>微信交易号：<text>424736746998493847989434</text></view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 弹框 绑定ic卡 --> |
|||
<view class="ox-dark-mask" v-if="isShowBindIC" @touchmove.stop.prevent="moveHandle"> |
|||
<view class="odm-ic-modal"> |
|||
<view class="oim-close"> |
|||
<image src="/static/images/icon/x_close.png" @click="isShowBindIC = !isShowBindIC"></image> |
|||
</view> |
|||
<view class="oim-tit">绑定IC卡</view> |
|||
<view class="oim-card"> |
|||
<view class="oc-sign">*</view> |
|||
<view class="oc-depot">仓</view> |
|||
<input type="number" placeholder="请输入卡号" v-model="icNumber" /> |
|||
<image class="oc-icon" src="/subpackage/device/static/images/scan_code.png"></image> |
|||
</view> |
|||
<view class="oim-tips">可直接输入卡号、扫描条码或在已选择仓库下选择卡号</view> |
|||
<view class="oim-ipt"> |
|||
<input type="text" placeholder="单价" v-model="icPrice" /> |
|||
</view> |
|||
<view class="oim-ipt"> |
|||
<input type="text" placeholder="其他费用(选填)" v-model="icOtherFee" /> |
|||
</view> |
|||
<view class="oim-ipt"> |
|||
<input type="text" placeholder="备注说明(选填)" v-model="icRemarks" /> |
|||
</view> |
|||
<view class="oim-btn" hover-class="hover-active" @click="modalBtn(1)">确认</view> |
|||
</view> |
|||
</view> |
|||
<!-- 弹框 选择ic卡 --> |
|||
<view class="ox-dark-mask" v-if="isShowSelectIC" @touchmove.stop.prevent="moveHandle"> |
|||
<view class="odm-select-modal"> |
|||
<view class="osm-close"> |
|||
<image src="/static/images/icon/x_close.png" @click="isShowSelectIC = !isShowSelectIC"></image> |
|||
</view> |
|||
<view class="osm-tit">筛选卡号</view> |
|||
<view class="osm-ipt"> |
|||
<input type="text" placeholder="请选择仓库" v-model="icRemarks" /> |
|||
<image src="/subpackage/device/static/images/arrow_b2.png"></image> |
|||
</view> |
|||
<view class="osm-ipt"> |
|||
<input type="text" placeholder="请输入卡号" v-model="icRemarks" /> |
|||
</view> |
|||
<view class="osm-btn" hover-class="hover-active" @click="modalBtn(2)">确认</view> |
|||
</view> |
|||
</view> |
|||
<!-- 弹框 ic卡绑定成功 --> |
|||
<view class="ox-dark-mask" v-if="isShowSuccessIC" @touchmove.stop.prevent="moveHandle"> |
|||
<view class="odm-select-modal"> |
|||
<view class="osm-title">绑定成功</view> |
|||
<view class="osm-line"> |
|||
<view>卡号：0000023</view> |
|||
<view>关联订单号：yy202101294566</view> |
|||
<view>门店名称：广州欧轩智能场馆（永泰店）</view> |
|||
</view> |
|||
<view class="osm-line"> |
|||
<view>订单类型：预约订单</view> |
|||
<view>项目名称：开业优惠卡(10次)</view> |
|||
<view>购买者昵称：yiming</view> |
|||
</view> |
|||
<view class="osm-btn" hover-class="hover-active" @click="isShowSuccessIC = !isShowSuccessIC">好的</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
isShowBindIC: false, |
|||
isShowSelectIC: false, |
|||
isShowSuccessIC: false, |
|||
icNumber: '', |
|||
icPrice: '', |
|||
icOtherFee: '', |
|||
icRemarks: '', |
|||
}; |
|||
}, |
|||
methods:{ |
|||
moveHandle(){}, |
|||
modalBtn(type){ |
|||
if(type == 1){ |
|||
this.isShowBindIC = false |
|||
this.isShowSelectIC = true; |
|||
return; |
|||
} |
|||
if(type == 2){ |
|||
this.isShowSelectIC = false; |
|||
this.isShowSuccessIC = true; |
|||
return; |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" > |
|||
@import '~style/public.scss'; |
|||
.reservation-people{ |
|||
margin-bottom: 24rpx; |
|||
.rp-head{ |
|||
margin: 24rpx 24rpx 0rpx; |
|||
padding: 30rpx; |
|||
background-color: #FFF; |
|||
border-radius: 10rpx 10rpx 0px 0px; |
|||
.rh-store{ |
|||
padding-bottom: 26rpx; |
|||
margin-bottom: 18rpx; |
|||
border-bottom: 2rpx solid #D8D8D8; |
|||
display: flex; |
|||
justify-content: flex-start; |
|||
>image{ |
|||
flex-shrink: 0; |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
background-color: skyblue; |
|||
|
|||
} |
|||
>view{ |
|||
flex-grow: 1; |
|||
margin-left: 14rpx; |
|||
color: #333333; |
|||
font-size: 28rpx; |
|||
} |
|||
} |
|||
.rh-line{ |
|||
margin-top: 8rpx; |
|||
@include centerFlex(space-between); |
|||
>view{ |
|||
line-height: 40rpx; |
|||
font-size: 28rpx; |
|||
&:first-child{ |
|||
color: #9A9A9D; |
|||
>text{ |
|||
color: #333333; |
|||
} |
|||
} |
|||
&:nth-child(2){ |
|||
>text{ |
|||
color: #9A9A9D; |
|||
} |
|||
.rl-active{ |
|||
color: #009874; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.rh-ic{ |
|||
margin-top: 40rpx; |
|||
border-radius: 10rpx; |
|||
background-color: #009874; |
|||
color: #FFFFFF; |
|||
font-size: 32rpx; |
|||
text-align: center; |
|||
width: 500rpx; |
|||
// height: 112rpx; |
|||
// line-height: 112rpx; |
|||
padding: 34rpx 0rpx; |
|||
margin-left: 71rpx; |
|||
} |
|||
.rh-ic-untie{ |
|||
padding: 32rpx 0rpx; |
|||
color: #009874; |
|||
border: 2rpx solid #009874; |
|||
background-color: #fff; |
|||
} |
|||
} |
|||
.rp-box{ |
|||
margin: 24rpx 24rpx 0rpx; |
|||
padding: 30rpx; |
|||
background-color: #FFF; |
|||
border-radius: 10rpx; |
|||
.rb-title{ |
|||
color: #9A9A9D; |
|||
font-size: 28rpx; |
|||
margin-bottom: 20rpx; |
|||
>text{ |
|||
color: #333333; |
|||
font-size: 28rpx; |
|||
margin-left: 28rpx; |
|||
} |
|||
} |
|||
.rb-time{ |
|||
line-height: 48rpx; |
|||
display: flex; |
|||
justify-content: flex-start; |
|||
>view{ |
|||
color: #9A9A9D; |
|||
font-size: 28rpx; |
|||
} |
|||
>text{ |
|||
color: #333333; |
|||
font-size: 28rpx; |
|||
} |
|||
} |
|||
.rb-code{ |
|||
.rc-item{ |
|||
display: flex; |
|||
justify-content: flex-start; |
|||
margin-top: 24rpx; |
|||
.ri-tit{ |
|||
color: #9A9A9D; |
|||
font-size: 28rpx; |
|||
line-height: 46rpx; |
|||
} |
|||
.ri-section{ |
|||
.rs-view{ |
|||
color: #333333; |
|||
font-size: 28rpx; |
|||
line-height: 46rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.rb-name{ |
|||
margin-bottom: 8rpx; |
|||
color: #333333; |
|||
>view{ |
|||
font-size: 28rpx; |
|||
} |
|||
>text{ |
|||
font-size: 24rpx; |
|||
} |
|||
} |
|||
.rb-line{ |
|||
>view{ |
|||
line-height: 52rpx; |
|||
font-size: 28rpx; |
|||
color: #9A9A9D; |
|||
>text{ |
|||
color: #333333; |
|||
} |
|||
} |
|||
|
|||
} |
|||
.rb-section{ |
|||
margin: 30rpx 0rpx 24rpx; |
|||
border-top: 2rpx solid #D8D8D8; |
|||
.rs-line{ |
|||
margin-top: 26rpx; |
|||
@include centerFlex(space-between); |
|||
>view{ |
|||
color: #333333; |
|||
&:first-child{ |
|||
font-size: 28rpx; |
|||
} |
|||
&:nth-child(2){ |
|||
font-size: 24rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.rb-total{ |
|||
@include centerFlex(flex-end); |
|||
>view{ |
|||
color: #333333; |
|||
font-size: 28rpx; |
|||
>text{ |
|||
color: #FF873D; |
|||
&:first-child{ |
|||
font-size: 28rpx; |
|||
} |
|||
&:nth-child(2){ |
|||
font-size: 36rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.odm-ic-modal { |
|||
position: absolute; |
|||
left: 65rpx; |
|||
top: 10%; |
|||
background-color: #fff; |
|||
width: 620rpx; |
|||
padding: 30rpx 0rpx 80rpx; |
|||
border-radius: 10rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
.oim-close{ |
|||
width: 100%; |
|||
@include centerFlex(flex-end); |
|||
>image{ |
|||
width: 32rpx; |
|||
height: 32rpx; |
|||
margin-right: 30rpx; |
|||
} |
|||
} |
|||
.oim-tit { |
|||
color: #333; |
|||
font-size: 32rpx; |
|||
font-weight: 700; |
|||
margin-top: 16rpx; |
|||
} |
|||
.oim-card{ |
|||
width: 538rpx; |
|||
position: relative; |
|||
padding: 20rpx 0rpx; |
|||
margin-top: 38rpx; |
|||
border-radius: 10rpx; |
|||
border: 2rpx solid #D8D8D8; |
|||
@include centerFlex(flex-start); |
|||
.oc-sign{ |
|||
position: absolute; |
|||
color: #EA5061; |
|||
font-size: 28rpx; |
|||
margin-left: -20rpx; |
|||
} |
|||
.oc-depot{ |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
color: #fff; |
|||
font-size: 28rpx; |
|||
text-align: center; |
|||
border-radius: 6rpx; |
|||
background-color: #333333; |
|||
margin: 0rpx 20rpx; |
|||
} |
|||
& input { |
|||
height: 48rpx; |
|||
padding: 0rpx 20rpx; |
|||
font-size: 28rpx; |
|||
color: #333; |
|||
flex-grow: 1; |
|||
border-left: 2rpx solid #D8D8D8; |
|||
} |
|||
.oc-icon{ |
|||
flex-shrink: 0; |
|||
width: 48rpx; |
|||
height: 48rpx; |
|||
margin-right: 20rpx; |
|||
} |
|||
} |
|||
.oim-tips{ |
|||
width: 518rpx; |
|||
color: #9A9A9D; |
|||
font-size: 24rpx; |
|||
margin: 12rpx 0rpx 20rpx; |
|||
} |
|||
.oim-ipt{ |
|||
width: 538rpx; |
|||
padding: 20rpx 0rpx; |
|||
border: 2rpx solid #D8D8D8; |
|||
border-radius: 10rpx; |
|||
margin-bottom: 36rpx; |
|||
& input { |
|||
flex-grow: 1; |
|||
height: 48rpx; |
|||
color: #333; |
|||
font-size: 28rpx; |
|||
padding: 0rpx 20rpx; |
|||
} |
|||
} |
|||
.oim-btn{ |
|||
width: 240rpx; |
|||
height: 88rpx; |
|||
margin-top: 44rpx; |
|||
border-radius: 10rpx; |
|||
background-color: #009874; |
|||
color: #FFFFFF; |
|||
font-size: 32rpx; |
|||
line-height: 88rpx; |
|||
text-align: center; |
|||
} |
|||
} |
|||
.odm-select-modal{ |
|||
position: absolute; |
|||
left: 65rpx; |
|||
top: 16%; |
|||
background-color: #fff; |
|||
width: 620rpx; |
|||
padding: 30rpx 0rpx 80rpx; |
|||
border-radius: 10rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
.osm-close{ |
|||
width: 100%; |
|||
@include centerFlex(flex-end); |
|||
>image{ |
|||
width: 32rpx; |
|||
height: 32rpx; |
|||
margin-right: 30rpx; |
|||
} |
|||
} |
|||
.osm-tit { |
|||
color: #333; |
|||
font-size: 32rpx; |
|||
font-weight: 700; |
|||
margin: 16rpx 0rpx 38rpx; |
|||
} |
|||
.osm-ipt{ |
|||
width: 538rpx; |
|||
padding: 20rpx 0rpx; |
|||
border: 2rpx solid #D8D8D8; |
|||
border-radius: 10rpx; |
|||
margin-bottom: 36rpx; |
|||
@include centerFlex(flex-start); |
|||
& input { |
|||
flex-grow: 1; |
|||
height: 48rpx; |
|||
color: #333; |
|||
font-size: 28rpx; |
|||
padding: 0rpx 20rpx; |
|||
} |
|||
>image{ |
|||
flex-shrink: 0; |
|||
width: 32rpx; |
|||
height: 32rpx; |
|||
margin-right: 22rpx; |
|||
} |
|||
} |
|||
.osm-btn{ |
|||
width: 240rpx; |
|||
height: 88rpx; |
|||
margin-top: 44rpx; |
|||
border-radius: 10rpx; |
|||
background-color: #009874; |
|||
color: #FFFFFF; |
|||
font-size: 32rpx; |
|||
line-height: 88rpx; |
|||
text-align: center; |
|||
} |
|||
.osm-title{ |
|||
margin: 48rpx 0rpx 34rpx; |
|||
color: #333; |
|||
font-size: 32rpx; |
|||
font-weight: 700; |
|||
} |
|||
.osm-line{ |
|||
width: 504rpx; |
|||
margin-bottom: 26rpx; |
|||
>view{ |
|||
color: #333333; |
|||
font-size: 28rpx; |
|||
line-height: 48rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
</style> |
|||
@ -0,0 +1,828 @@ |
|||
<template> |
|||
<view class="reservation-people"> |
|||
<view class="rp-head"> |
|||
<view class="rh-store"> |
|||
<image :src="orderInfo.stadium_logo || '' "></image> |
|||
<view>{{orderInfo.stadium_name || '-'}}</view> |
|||
</view> |
|||
<view class="rh-line"> |
|||
<view>订单编号：<text>{{orderInfo.order_no || ''}}</text></view> |
|||
<view><text :class="[orderInfo.pay_status==1?'rl-active':'']">{{zh_pay_status(orderInfo.pay_status)}}</text></view> |
|||
</view> |
|||
<view class="rh-line"> |
|||
<view>创建时间：<text>{{orderInfo.created_at || '-'}}</text></view> |
|||
</view> |
|||
<view class="rh-line"> |
|||
<view>用户昵称：<text>{{orderInfo.nickname || '-'}}</text></view> |
|||
</view> |
|||
<!-- 门店是否开启ic卡 --> |
|||
<block v-if="orderInfo.stadium_has_iccard && orderInfo.pay_status==1"> |
|||
<!-- 待使用 已绑定ic卡 卡id，>0就是绑定了--> |
|||
<block v-if="orderInfo.bind_iccard_info.id > 0"> |
|||
<view class="rh-line"> |
|||
<view>已绑定IC卡：<text>{{orderInfo.bind_iccard_info.erp_iccard_no || '-'}}</text></view> |
|||
</view> |
|||
<view class="rh-line"> |
|||
<view>绑定时间：<text>{{orderInfo.bind_iccard_info.bind_order_at || '-'}}</text></view> |
|||
</view> |
|||
</block> |
|||
<!-- 待使用 未绑定ic卡 --> |
|||
<view :class="['rh-ic', orderInfo.bind_iccard_info.id > 0?'rh-ic-untie':'']" @click="orderInfo.bind_iccard_info.id > 0?bindICCardChange(1):bindICCardChange(2)">{{ orderInfo.bind_iccard_info.id > 0?'解绑IC卡':'绑定IC卡' }}</view> |
|||
</block> |
|||
</view> |
|||
<view class="rp-box"> |
|||
<view class="rb-title">验证信息<text>({{orderInfo.available_num || 0}}张可用)</text></view> |
|||
<!-- 人次+随时用 --> |
|||
<view class="rb-time" v-if="orderInfo.person_number_rule.order_method==1"> |
|||
<view>有效期至：</view> |
|||
<text>{{orderInfo.end_time || '-'}}</text> |
|||
</view> |
|||
<!-- 人次+指定日期 --> |
|||
<view class="rb-time" v-if="orderInfo.person_number_rule.order_method==2"> |
|||
<view>使用日期：</view> |
|||
<text>{{orderInfo.date || '-'}}</text> |
|||
</view> |
|||
<view class="rb-code"> |
|||
<view class="rc-item" v-for="(e,i) in orderInfo.sessions" :key="i"> |
|||
<view class="ri-tit">验证码{{i+1}}：</view> |
|||
<view class="ri-section"> |
|||
<view class="rs-view">{{e.verify_code || '-'}} ({{zh_verify_status(e.status)}})</view> |
|||
<block v-if="e.status==2"> |
|||
<view class="rs-view">核销方式：{{zh_verify_type(e.verify_type)}}</view> |
|||
<view class="rs-view">核销时间：{{e.verify_time || '-'}}</view> |
|||
</block> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="rp-box"> |
|||
<view class="rb-title">预订信息</view> |
|||
<view class="rb-name"> |
|||
<view>{{orderInfo.person_number_rule_name || ''}} <text> {{orderInfo.person_number_rule.order_method==1?'（可随时使用）':'（固定日期）'}}</text></view> |
|||
</view> |
|||
<view class="rb-line"> |
|||
<view>数量：<text>{{orderInfo.number || 0}}</text></view> |
|||
</view> |
|||
<view class="rb-line"> |
|||
<view>类型：{{ zh_spec_names }}</view> |
|||
</view> |
|||
<view class="rb-section"> |
|||
<view class="rs-line"> |
|||
<view>金额小计</view> |
|||
<view>¥{{orderInfo.amount || 0}}</view> |
|||
</view> |
|||
<view class="rs-line"> |
|||
<view>积分抵扣</view> |
|||
<view>-¥{{orderInfo.deduction_amount || 0}}</view> |
|||
</view> |
|||
<view class="rs-line"> |
|||
<view>折扣金额</view> |
|||
<view>-¥{{orderInfo.deduction_amount || 0}}</view> |
|||
</view> |
|||
<view class="rs-line"> |
|||
<view>优惠券优惠</view> |
|||
<view>-¥{{orderInfo.coupons_amount || 0}}</view> |
|||
</view> |
|||
</view> |
|||
<view class="rb-total"> |
|||
<view>合计支付：<text>￥</text><text>{{orderInfo.pay_amount || 0}}</text></view> |
|||
</view> |
|||
</view> |
|||
<view class="rp-box"> |
|||
<view class="rb-title">支付信息</view> |
|||
<view class="rb-line"> |
|||
<view>支付方式：<text>{{zh_pay_type(orderInfo.pay_type)}}</text></view> |
|||
</view> |
|||
<view class="rb-line"> |
|||
<view>支付时间：<text>{{orderInfo.pay_time || '-'}}</text></view> |
|||
</view> |
|||
<view class="rb-line"> |
|||
<view>微信交易号：<text>{{orderInfo.trade_no || ''}}</text></view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 弹框 绑定ic卡 --> |
|||
<view class="ox-dark-mask" v-if="isShowBindIC" @touchmove.stop.prevent="moveHandle"> |
|||
<view class="odm-ic-modal"> |
|||
<view class="oim-close"> |
|||
<image src="/static/images/icon/x_close.png" @click="isShowBindIC = !isShowBindIC"></image> |
|||
</view> |
|||
<view class="oim-tit">绑定IC卡</view> |
|||
<view class="oim-card"> |
|||
<view class="oc-sign">*</view> |
|||
<view class="oc-depot" @click="depotChange">仓</view> |
|||
<input type="number" placeholder="请输入卡号" v-model=" bindInfo.iccard_no" /> |
|||
<image class="oc-icon" src="/subpackage/device/static/images/scan_code.png" @click="scanChange"></image> |
|||
</view> |
|||
<view class="oim-tips">可直接输入卡号、扫描条码或在已选择仓库下选择卡号</view> |
|||
<view class="oim-ipt"> |
|||
<input type="digit" placeholder="单价" v-model="bindInfo.iccard_price" /> |
|||
</view> |
|||
<view class="oim-ipt"> |
|||
<input type="text" placeholder="其他费用(选填)" v-model="bindInfo.iccard_otherfee" /> |
|||
</view> |
|||
<view class="oim-ipt"> |
|||
<input type="text" placeholder="备注说明(选填)" v-model="bindInfo.iccard_remarks" /> |
|||
</view> |
|||
<view class="oim-btn" hover-class="hover-active" @click="modalBtn(1)">确认</view> |
|||
</view> |
|||
</view> |
|||
<!-- 弹框 仓库选择ic卡 --> |
|||
<view class="ox-dark-mask" v-if="isShowSelectIC" @touchmove.stop.prevent="moveHandle"> |
|||
<view class="odm-select-modal"> |
|||
<view class="osm-close"> |
|||
<image src="/static/images/icon/x_close.png" @click="isShowSelectIC = !isShowSelectIC"></image> |
|||
</view> |
|||
<view class="osm-tit">筛选卡号</view> |
|||
<picker class="osm-picker" :range="depotList" @change="pickerChange"> |
|||
<view class="osm-ipt"> |
|||
<input type="text" placeholder="请选择仓库" v-model="depotInfo.ic_name" /> |
|||
<image src="/subpackage/device/static/images/arrow_b2.png"></image> |
|||
</view> |
|||
</picker> |
|||
|
|||
<view class="osm-ipt"> |
|||
<input type="text" placeholder="请输入卡号" v-model="depotInfo.ic_no" @change="inputChange"/> |
|||
</view> |
|||
<view class="osm-btn-box"> |
|||
<picker class="osm-check" :range="iccardList" @change="checkPickerChange"> |
|||
<view class="oc-btn" hover-class="hover-active">查询卡号</view> |
|||
</picker> |
|||
<view class="osm-btn" hover-class="hover-active" @click="modalBtn(2)">确认</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<!-- 弹框 ic卡绑定成功 --> |
|||
<view class="ox-dark-mask" v-if="isShowSuccessIC" @touchmove.stop.prevent="moveHandle"> |
|||
<view class="odm-select-modal"> |
|||
<view class="osm-title">绑定成功</view> |
|||
<view class="osm-line"> |
|||
<view>卡号：{{sucInfo.iccard.erp_iccard_no || '-'}}</view> |
|||
<view>关联订单号：{{sucInfo.order_no || ''}}</view> |
|||
<view>门店名称：{{sucInfo.stadium_name || '-'}}</view> |
|||
</view> |
|||
<view class="osm-line"> |
|||
<view>订单类型：{{zh_order_type(sucInfo.order_type)}}</view> |
|||
<view>项目名称：{{sucInfo.project || '-'}}</view> |
|||
<view>购买者昵称：{{sucInfo.nickname || '-'}}</view> |
|||
</view> |
|||
<view class="osm-btn" hover-class="hover-active" @click="okChange">好的</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import util from '@/utils/util'; |
|||
import deviceServer from '../../../js/device_server'; |
|||
import deviceApi from '../../../js/device_api'; |
|||
import { mapState } from 'vuex'; |
|||
export default { |
|||
props: { |
|||
orderInfo: { |
|||
type: Object, |
|||
default: ()=>({}) |
|||
} |
|||
}, |
|||
computed: { |
|||
...mapState(['brandInfo']), |
|||
zh_pay_status(){ |
|||
// 订单状态 1已支付待使用2已使用3已失效4已退款 |
|||
return status =>{ |
|||
const _obj = { |
|||
'0': '未付款', |
|||
'1': '待使用', |
|||
'2': '已使用', |
|||
'3': '已失效', |
|||
'4': '已退款', |
|||
} |
|||
return _obj[`${status}`] || '-' |
|||
} |
|||
}, |
|||
zh_verify_type(){ |
|||
// 核销方式 1/2/3/4 核销码核销/人脸核销/扫码核销/商家扫码 |
|||
return status =>{ |
|||
const _obj = { |
|||
'0': '未核销', |
|||
'1': '核销码核销', |
|||
'2': '人脸核销', |
|||
'3': '扫码核销', |
|||
'4': '商家扫码', |
|||
} |
|||
return _obj[`${status}`] || '-' |
|||
} |
|||
}, |
|||
zh_verify_status(){ |
|||
// 核销状态 0/1/2/3/4 无效/待使用/已核销/已失效/已退款 |
|||
return status =>{ |
|||
const _obj = { |
|||
'0': '无效', |
|||
'1': '待使用', |
|||
'2': '已使用', |
|||
'3': '已失效', |
|||
'4': '已退款', |
|||
} |
|||
return _obj[`${status}`] || '-' |
|||
} |
|||
}, |
|||
zh_pay_type(){ |
|||
// 支付类型 0微信支付1支付宝支付2储值卡支付 |
|||
return status =>{ |
|||
const _obj = { |
|||
'0': '微信支付', |
|||
'1': '支付宝支付', |
|||
'2': '储值卡支付', |
|||
} |
|||
return _obj[`${status}`] || '-' |
|||
} |
|||
}, |
|||
zh_spec_names(){ |
|||
let { orderInfo } = this |
|||
if(!orderInfo.person_number_spec_names)return ''; |
|||
let spec = orderInfo.person_number_spec_names.join('+') |
|||
return spec; |
|||
}, |
|||
zh_order_type(){ |
|||
//订单类型 0预约订单 1课程订单 |
|||
return status =>{ |
|||
const _obj = { |
|||
'0': '预约订单', |
|||
'1': '课程订单', |
|||
} |
|||
return _obj[`${status}`] || '-' |
|||
} |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
isShowBindIC: false, //绑定ic卡弹框 |
|||
isShowSelectIC: false, //仓库选择ic卡弹框 |
|||
isShowSuccessIC: false,//ic卡绑定成功弹框 |
|||
bindInfo: { //绑定ic卡所需参数 |
|||
iccard_no: '', //卡号 |
|||
iccard_price: '', //单价 |
|||
iccard_otherfee: '', //其他费用 |
|||
iccard_remarks: '', //备注说明 |
|||
}, |
|||
depotInfo: { |
|||
ic_name: '', //仓库名称 |
|||
ic_no: '', //仓库下卡号 |
|||
}, |
|||
depotList: [], //picker仓库名字列表 |
|||
curIdx: -1, |
|||
storehouseList: [], //仓库列表 |
|||
iccardList: [], //ic卡列表 |
|||
sucInfo: {}, //绑定IC卡成功信息 |
|||
}; |
|||
}, |
|||
methods:{ |
|||
moveHandle(){}, |
|||
modalBtn(type){ |
|||
// type: 1绑定ic卡弹框确认按钮 2仓库选择ic卡弹框确认按钮 |
|||
let { bindInfo, depotInfo } = this |
|||
if(type == 1){ |
|||
if(bindInfo.iccard_no == '')return util.showNone('请输入ic卡卡号'); |
|||
if(bindInfo.iccard_price == '')return util.showNone('请输入单价'); |
|||
return this.getCheckIccard(); |
|||
} |
|||
if(type == 2){ |
|||
if(depotInfo.ic_name == '')return util.showNone('请选择仓库'); |
|||
if(depotInfo.ic_no == '')return util.showNone('请输入ic卡卡号'); |
|||
this.isShowModal() |
|||
this.bindInfo.iccard_no = depotInfo.ic_no |
|||
return; |
|||
} |
|||
}, |
|||
isShowModal(){ |
|||
this.isShowBindIC = !this.isShowBindIC; |
|||
this.isShowSelectIC = !this.isShowSelectIC; |
|||
}, |
|||
// 仓库按钮 |
|||
depotChange(){ |
|||
this.isShowModal(); |
|||
this.getStoreHouseList() |
|||
}, |
|||
// 选择仓库 |
|||
pickerChange(e){ |
|||
console.log(e); |
|||
this.curIdx = e.detail.value |
|||
let _list = this.depotList || []; |
|||
this.depotInfo.ic_name = _list[e.detail.value] || '' |
|||
}, |
|||
// 仓库列表 |
|||
getStoreHouseList(){ |
|||
let { brandInfo } = this |
|||
util.showLoad(); |
|||
deviceServer.get({ |
|||
url: deviceApi.storeHouseList, |
|||
data: { |
|||
brand_id: brandInfo.brand.id, |
|||
}, |
|||
failMsg: '加载失败！' |
|||
}) |
|||
.then(res=>{ |
|||
util.hideLoad() |
|||
// setTimeout(()=>uni.navigateBack(),1200); |
|||
let _list = res.list || [] |
|||
this.storehouseList = _list |
|||
for(var i in _list){ |
|||
this.depotList.push(_list[i].storehouse_name) |
|||
} |
|||
}) |
|||
}, |
|||
inputChange(e){ |
|||
if(this.depotInfo.ic_name == '')return; |
|||
this.getICCardList({ |
|||
key: e.detail.value, |
|||
}) |
|||
}, |
|||
// 选择ic卡 |
|||
checkPickerChange(e){ |
|||
console.log(e); |
|||
let _list = this.iccardList || []; |
|||
this.depotInfo.ic_no = _list[e.detail.value] || '' |
|||
}, |
|||
// ic卡列表 |
|||
getICCardList({key=''}){ |
|||
let { brandInfo, curIdx, storehouseList } = this |
|||
util.showLoad(); |
|||
deviceServer.get({ |
|||
url: deviceApi.iccardList, |
|||
data: { |
|||
brand_id: brandInfo.brand.id, |
|||
store_house_id: storehouseList[curIdx].id, |
|||
store_house_type: storehouseList[curIdx].store_house_type, |
|||
key, |
|||
}, |
|||
failMsg: '加载失败！' |
|||
}) |
|||
.then(res=>{ |
|||
util.hideLoad() |
|||
this.iccardList = res.list || [] |
|||
}) |
|||
}, |
|||
// 校验ic卡 |
|||
getCheckIccard(){ |
|||
let { brandInfo, bindInfo } = this |
|||
util.showLoad(); |
|||
deviceServer.get({ |
|||
url: deviceApi.checkIccard, |
|||
data: { |
|||
brand_id: brandInfo.brand.id, |
|||
erp_iccard_no: bindInfo.iccard_no, |
|||
}, |
|||
failMsg: '请求失败！' |
|||
}) |
|||
.then(res=>{ |
|||
util.hideLoad() |
|||
this.getBindIcCard() |
|||
}) |
|||
}, |
|||
// 绑定ic卡 |
|||
getBindIcCard(){ |
|||
let { brandInfo, bindInfo, orderInfo } = this |
|||
util.showLoad(); |
|||
deviceServer.get({ |
|||
url: deviceApi.bindIcCard, |
|||
data: { |
|||
brand_id: brandInfo.brand.id, |
|||
price: bindInfo.iccard_price, //单价 |
|||
iccard_no: bindInfo.iccard_no, //IC卡卡号 |
|||
delivery_expenses: bindInfo.iccard_otherfee, //其他费用 |
|||
delivery_order_number: orderInfo.order_no, //关联单号 |
|||
delivery_desc: bindInfo.iccard_otherfee, //备注 |
|||
}, |
|||
failMsg: '请求失败！' |
|||
}) |
|||
.then(res=>{ |
|||
util.hideLoad() |
|||
this.sucInfo = res || {}; |
|||
this.isShowBindIC = false; |
|||
this.isShowSuccessIC = true; |
|||
}) |
|||
}, |
|||
bindICCardChange: util.debounce(function(type){ |
|||
// type: 1解绑ic卡 2绑定ic卡 |
|||
let { brandInfo, orderInfo } = this |
|||
if(type == 1){ |
|||
util.showModal({ |
|||
title: '提示', |
|||
content: '确认解绑ic卡吗？', |
|||
showCancel: true, |
|||
success: modalRes => { |
|||
if (modalRes.confirm) { |
|||
util.showLoad(); |
|||
deviceServer.get({ |
|||
url: deviceApi.unbindIccard, |
|||
data: { |
|||
brand_id: brandInfo.brand.id, |
|||
order_no: orderInfo.order_no, |
|||
iccard_no: orderInfo.bind_iccard_info.erp_iccard_no, |
|||
}, |
|||
failMsg: '请求失败！' |
|||
}) |
|||
.then(res=>{ |
|||
util.hideLoad() |
|||
util.showNone('操作成功！'); |
|||
}) |
|||
} |
|||
} |
|||
}); |
|||
return; |
|||
} |
|||
if(type == 2){ |
|||
this.isShowBindIC = !this.isShowBindIC |
|||
} |
|||
},300,300), |
|||
// 扫描条形码 |
|||
scanChange(){ |
|||
let that = this; |
|||
// 允许从相机和相册扫码 |
|||
uni.scanCode({ |
|||
success: function(res) { |
|||
that.bindInfo.iccard_no = res.result; |
|||
console.log('条码类型：' + res.scanType); |
|||
console.log('条码内容：' + res.result); |
|||
} |
|||
}); |
|||
}, |
|||
okChange(){ |
|||
this.isShowSuccessIC = !this.isShowSuccessIC |
|||
this.$emit('okChange'); |
|||
}, |
|||
} |
|||
|
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" > |
|||
@import '~style/public.scss'; |
|||
.reservation-people{ |
|||
margin-bottom: 24rpx; |
|||
.rp-head{ |
|||
margin: 24rpx 24rpx 0rpx; |
|||
padding: 30rpx; |
|||
background-color: #FFF; |
|||
border-radius: 10rpx 10rpx 0px 0px; |
|||
.rh-store{ |
|||
padding-bottom: 26rpx; |
|||
margin-bottom: 18rpx; |
|||
border-bottom: 2rpx solid #D8D8D8; |
|||
display: flex; |
|||
justify-content: flex-start; |
|||
>image{ |
|||
flex-shrink: 0; |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
background-color: skyblue; |
|||
|
|||
} |
|||
>view{ |
|||
flex-grow: 1; |
|||
margin-left: 14rpx; |
|||
color: #333333; |
|||
font-size: 28rpx; |
|||
} |
|||
} |
|||
.rh-line{ |
|||
margin-top: 8rpx; |
|||
@include centerFlex(space-between); |
|||
>view{ |
|||
line-height: 40rpx; |
|||
font-size: 28rpx; |
|||
&:first-child{ |
|||
color: #9A9A9D; |
|||
>text{ |
|||
color: #333333; |
|||
} |
|||
} |
|||
&:nth-child(2){ |
|||
>text{ |
|||
color: #9A9A9D; |
|||
} |
|||
.rl-active{ |
|||
color: #009874; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.rh-ic{ |
|||
margin-top: 40rpx; |
|||
border-radius: 10rpx; |
|||
background-color: #009874; |
|||
color: #FFFFFF; |
|||
font-size: 32rpx; |
|||
text-align: center; |
|||
width: 500rpx; |
|||
// height: 112rpx; |
|||
// line-height: 112rpx; |
|||
padding: 34rpx 0rpx; |
|||
margin-left: 71rpx; |
|||
} |
|||
.rh-ic-untie{ |
|||
padding: 32rpx 0rpx; |
|||
color: #009874; |
|||
border: 2rpx solid #009874; |
|||
background-color: #fff; |
|||
} |
|||
} |
|||
.rp-box{ |
|||
margin: 24rpx 24rpx 0rpx; |
|||
padding: 30rpx; |
|||
background-color: #FFF; |
|||
border-radius: 10rpx; |
|||
.rb-title{ |
|||
color: #9A9A9D; |
|||
font-size: 28rpx; |
|||
margin-bottom: 20rpx; |
|||
>text{ |
|||
color: #333333; |
|||
font-size: 28rpx; |
|||
margin-left: 28rpx; |
|||
} |
|||
} |
|||
.rb-time{ |
|||
line-height: 48rpx; |
|||
display: flex; |
|||
justify-content: flex-start; |
|||
>view{ |
|||
color: #9A9A9D; |
|||
font-size: 28rpx; |
|||
} |
|||
>text{ |
|||
color: #333333; |
|||
font-size: 28rpx; |
|||
} |
|||
} |
|||
.rb-code{ |
|||
.rc-item{ |
|||
display: flex; |
|||
justify-content: flex-start; |
|||
margin-top: 24rpx; |
|||
.ri-tit{ |
|||
color: #9A9A9D; |
|||
font-size: 28rpx; |
|||
line-height: 46rpx; |
|||
} |
|||
.ri-section{ |
|||
.rs-view{ |
|||
color: #333333; |
|||
font-size: 28rpx; |
|||
line-height: 46rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.rb-name{ |
|||
margin-bottom: 8rpx; |
|||
color: #333333; |
|||
>view{ |
|||
font-size: 28rpx; |
|||
} |
|||
>text{ |
|||
font-size: 24rpx; |
|||
} |
|||
} |
|||
.rb-line{ |
|||
>view{ |
|||
line-height: 52rpx; |
|||
font-size: 28rpx; |
|||
color: #9A9A9D; |
|||
>text{ |
|||
color: #333333; |
|||
} |
|||
} |
|||
|
|||
} |
|||
.rb-section{ |
|||
margin: 30rpx 0rpx 24rpx; |
|||
border-top: 2rpx solid #D8D8D8; |
|||
.rs-line{ |
|||
margin-top: 26rpx; |
|||
@include centerFlex(space-between); |
|||
>view{ |
|||
color: #333333; |
|||
&:first-child{ |
|||
font-size: 28rpx; |
|||
} |
|||
&:nth-child(2){ |
|||
font-size: 24rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.rb-total{ |
|||
@include centerFlex(flex-end); |
|||
>view{ |
|||
color: #333333; |
|||
font-size: 28rpx; |
|||
>text{ |
|||
color: #FF873D; |
|||
&:first-child{ |
|||
font-size: 28rpx; |
|||
} |
|||
&:nth-child(2){ |
|||
font-size: 36rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.odm-ic-modal { |
|||
position: absolute; |
|||
left: 65rpx; |
|||
top: 10%; |
|||
background-color: #fff; |
|||
width: 620rpx; |
|||
padding: 30rpx 0rpx 80rpx; |
|||
border-radius: 10rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
.oim-close{ |
|||
width: 100%; |
|||
@include centerFlex(flex-end); |
|||
>image{ |
|||
width: 32rpx; |
|||
height: 32rpx; |
|||
margin-right: 30rpx; |
|||
} |
|||
} |
|||
.oim-tit { |
|||
color: #333; |
|||
font-size: 32rpx; |
|||
font-weight: 700; |
|||
margin-top: 16rpx; |
|||
} |
|||
.oim-card{ |
|||
width: 538rpx; |
|||
position: relative; |
|||
padding: 20rpx 0rpx; |
|||
margin-top: 38rpx; |
|||
border-radius: 10rpx; |
|||
border: 2rpx solid #D8D8D8; |
|||
@include centerFlex(flex-start); |
|||
.oc-sign{ |
|||
position: absolute; |
|||
color: #EA5061; |
|||
font-size: 28rpx; |
|||
margin-left: -20rpx; |
|||
} |
|||
.oc-depot{ |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
color: #fff; |
|||
font-size: 28rpx; |
|||
text-align: center; |
|||
border-radius: 6rpx; |
|||
background-color: #333333; |
|||
margin: 0rpx 20rpx; |
|||
} |
|||
& input { |
|||
height: 48rpx; |
|||
padding: 0rpx 20rpx; |
|||
font-size: 28rpx; |
|||
color: #333; |
|||
flex-grow: 1; |
|||
border-left: 2rpx solid #D8D8D8; |
|||
} |
|||
.oc-icon{ |
|||
flex-shrink: 0; |
|||
width: 48rpx; |
|||
height: 48rpx; |
|||
margin-right: 20rpx; |
|||
} |
|||
} |
|||
.oim-tips{ |
|||
width: 518rpx; |
|||
color: #9A9A9D; |
|||
font-size: 24rpx; |
|||
margin: 12rpx 0rpx 20rpx; |
|||
} |
|||
.oim-ipt{ |
|||
width: 538rpx; |
|||
padding: 20rpx 0rpx; |
|||
border: 2rpx solid #D8D8D8; |
|||
border-radius: 10rpx; |
|||
margin-bottom: 36rpx; |
|||
& input { |
|||
flex-grow: 1; |
|||
height: 48rpx; |
|||
color: #333; |
|||
font-size: 28rpx; |
|||
padding: 0rpx 20rpx; |
|||
} |
|||
} |
|||
.oim-btn{ |
|||
width: 240rpx; |
|||
height: 88rpx; |
|||
margin-top: 44rpx; |
|||
border-radius: 10rpx; |
|||
background-color: #009874; |
|||
color: #FFFFFF; |
|||
font-size: 32rpx; |
|||
line-height: 88rpx; |
|||
text-align: center; |
|||
} |
|||
} |
|||
.odm-select-modal{ |
|||
position: absolute; |
|||
left: 65rpx; |
|||
top: 16%; |
|||
background-color: #fff; |
|||
width: 620rpx; |
|||
padding: 30rpx 0rpx 80rpx; |
|||
border-radius: 10rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
.osm-close{ |
|||
width: 100%; |
|||
@include centerFlex(flex-end); |
|||
>image{ |
|||
width: 32rpx; |
|||
height: 32rpx; |
|||
margin-right: 30rpx; |
|||
} |
|||
} |
|||
.osm-tit { |
|||
color: #333; |
|||
font-size: 32rpx; |
|||
font-weight: 700; |
|||
margin: 16rpx 0rpx 38rpx; |
|||
} |
|||
.osm-picker{ |
|||
width: 538rpx; |
|||
} |
|||
.osm-ipt{ |
|||
width: 538rpx; |
|||
padding: 20rpx 0rpx; |
|||
border: 2rpx solid #D8D8D8; |
|||
border-radius: 10rpx; |
|||
margin-bottom: 36rpx; |
|||
@include centerFlex(flex-start); |
|||
& input { |
|||
flex-grow: 1; |
|||
height: 48rpx; |
|||
color: #333; |
|||
font-size: 28rpx; |
|||
padding: 0rpx 20rpx; |
|||
} |
|||
>image{ |
|||
flex-shrink: 0; |
|||
width: 32rpx; |
|||
height: 32rpx; |
|||
margin-right: 22rpx; |
|||
} |
|||
} |
|||
.osm-btn-box{ |
|||
width: 100%; |
|||
padding: 0rpx 40rpx; |
|||
@include centerFlex(space-between); |
|||
} |
|||
.osm-btn{ |
|||
width: 240rpx; |
|||
height: 88rpx; |
|||
margin-top: 44rpx; |
|||
border-radius: 10rpx; |
|||
background-color: #009874; |
|||
color: #FFFFFF; |
|||
font-size: 32rpx; |
|||
line-height: 88rpx; |
|||
text-align: center; |
|||
} |
|||
.osm-check{ |
|||
width: 240rpx; |
|||
.oc-btn{ |
|||
width: 240rpx; |
|||
height: 88rpx; |
|||
margin-top: 44rpx; |
|||
border-radius: 10rpx; |
|||
border: 2rpx solid #009874; |
|||
color: #009874; |
|||
font-size: 32rpx; |
|||
line-height: 88rpx; |
|||
text-align: center; |
|||
} |
|||
} |
|||
.osm-title{ |
|||
margin: 48rpx 0rpx 34rpx; |
|||
color: #333; |
|||
font-size: 32rpx; |
|||
font-weight: 700; |
|||
} |
|||
.osm-line{ |
|||
width: 504rpx; |
|||
margin-bottom: 26rpx; |
|||
>view{ |
|||
color: #333333; |
|||
font-size: 28rpx; |
|||
line-height: 48rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
</style> |
|||
@ -0,0 +1,98 @@ |
|||
<template> |
|||
<view class="order-details"> |
|||
<block v-if="optionsQuery.order_type==3"> |
|||
<reservation-site-detail :orderInfo="pageInfo" v-if="pageInfo.order_type == 0"></reservation-site-detail> |
|||
<reservation-people-detail :orderInfo="pageInfo" v-if="pageInfo.order_type == 1" @okChange="okChange"></reservation-people-detail> |
|||
</block> |
|||
<timing-detail :orderInfo="pageInfo" v-if="optionsQuery.order_type==1"></timing-detail> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import timingDetail from '../../components/order/timing_detail/timing_detail.vue' |
|||
import reservationSiteDetail from '../../components/order/reservation_site_detail/reservation_site_detail.vue'; |
|||
import reservationPeopleDetail from '../../components/order/reservation_people_detail/reservation_people_detail.vue'; |
|||
import util from '@/utils/util'; |
|||
import deviceServer from '../../js/device_server'; |
|||
import deviceApi from '../../js/device_api'; |
|||
import { mapState } from 'vuex'; |
|||
export default { |
|||
components: { |
|||
'timing-detail': timingDetail, |
|||
'reservation-site-detail': reservationSiteDetail, |
|||
'reservation-people-detail': reservationPeopleDetail, |
|||
}, |
|||
computed:{ |
|||
titleName(){ |
|||
let { optionsQuery } = this; |
|||
if(optionsQuery.order_type == 1)return '计时订单详情'; //PM: 2021/4/19 已做 |
|||
if(optionsQuery.order_type == 3)return '预约订单详情'; //PM: 2021/4/19 已做 |
|||
if(optionsQuery.order_type == 4)return '储值卡订单详情'; |
|||
if(optionsQuery.order_type == 5)return '积分商城订单详情'; |
|||
return '订单详情' |
|||
}, |
|||
...mapState(['brandInfo']), |
|||
}, |
|||
data() { |
|||
return { |
|||
optionsQuery: { |
|||
stadium_id: '', |
|||
order_type: -1, |
|||
}, |
|||
pageInfo: {}, |
|||
} |
|||
}, |
|||
onLoad(options) { |
|||
let _query = util.jsonPar(options.query); |
|||
this.optionsQuery = _query |
|||
this.$nextTick(_=>{ |
|||
uni.setNavigationBarTitle({ |
|||
title: this.titleName |
|||
}) |
|||
}) |
|||
this.getPageInfo({ |
|||
orderType: _query.order_type, |
|||
stadium_id: _query.stadium_id, |
|||
order_no: _query.order_no, |
|||
}) |
|||
}, |
|||
methods: { |
|||
getApiUrl(type){ |
|||
if(type == 1)return deviceApi.timeOrderDetail; |
|||
if(type == 3)return deviceApi.reservationDetail; |
|||
}, |
|||
getPageInfo({orderType, stadium_id, order_no}){ |
|||
util.showLoad(); |
|||
deviceServer.get({ |
|||
url: this.getApiUrl(orderType), |
|||
data: { |
|||
stadium_id, |
|||
order_no, |
|||
}, |
|||
failMsg: '加载失败！' |
|||
}) |
|||
.then(res=>{ |
|||
util.hideLoad() |
|||
this.pageInfo = res |
|||
}) |
|||
.catch(util.hideLoad) |
|||
}, |
|||
okChange(){ |
|||
console.log("有了吗") |
|||
let { optionsQuery } = this |
|||
this.getPageInfo({ |
|||
orderType: optionsQuery.order_type, |
|||
stadium_id: optionsQuery.stadium_id, |
|||
order_no: optionsQuery.order_no, |
|||
}) |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" > |
|||
@import '~style/public.scss'; |
|||
.order-details{ |
|||
|
|||
} |
|||
</style> |
|||
@ -1,32 +0,0 @@ |
|||
<template> |
|||
<view class="reservation-details"> |
|||
<reservation-site v-if="false"></reservation-site> |
|||
<reservation-people v-if="true"></reservation-people> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import reservation_site from '../../../components/order/reservation_site/reservation_site.vue' |
|||
import reservation_people from '../../../components/order/reservation_people/reservation_people.vue' |
|||
export default { |
|||
components: { |
|||
'reservation-site': reservation_site, |
|||
'reservation-people': reservation_people, |
|||
}, |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
methods: { |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" > |
|||
@import '~style/public.scss'; |
|||
.reservation-details{ |
|||
|
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue