zmt
4 years ago
9 changed files with 1025 additions and 99 deletions
-
412src/components/site/order_modal/order_modal.vue
-
17src/js/api.js
-
13src/pages.json
-
5src/pages/index/index.vue
-
95src/pages/site/confirm/confirm.vue
-
330src/pages/site/manage/manage.vue
-
134src/pages/site/occupy_share/occupy_share.vue
-
118src/pages/site/occupy_success/occupy_success.vue
-
BINsrc/static/images/icon/share_arrow_cff.png
@ -0,0 +1,412 @@ |
|||
<template> |
|||
<view class="fixed-mask" @click="modalClose"> |
|||
<view class="order-modal" @click.stop="_=>false"> |
|||
<view class="om-title">{{ getTitle(queryInfo.venueInfo.type) }}</view> |
|||
<image class="om-close" @click="modalClose" mode="aspectFit" src="/static/images/icon/x_close.png"></image> |
|||
<view class="om-name-line"> |
|||
<view class="onl-view">{{ orderInfo.stadium_name || '-' }}</view> |
|||
<!-- 0、1、2、8 --> |
|||
<view class="onl-view" v-if="isShowStatus">{{ getStatusTxt(orderInfo.pay_status) }}</view> |
|||
</view> |
|||
<view class="om-info-line"> |
|||
<view class="oil-view">订单编号：</view> |
|||
<view class="oil-view"> |
|||
<view class="ov-view">{{ orderInfo.order_no || '' }}</view> |
|||
</view> |
|||
</view> |
|||
<view class="om-info-line" v-if="orderInfo.type != 'take_up_venue'"> |
|||
<view class="oil-view">创建时间：</view> |
|||
<view class="oil-view"> |
|||
<view class="ov-view">{{ orderInfo.created_at || ' ' }}</view> |
|||
</view> |
|||
</view> |
|||
<view class="om-info-line" v-if="orderInfo.type != 'take_up_venue'"> |
|||
<view class="oil-view">验证码：</view> |
|||
<view class="oil-view"> |
|||
<view class="ov-view">{{ orderInfo.verifyt_code || ' ' }}</view> |
|||
</view> |
|||
</view> |
|||
<view class="om-info-line" v-if="orderInfo.type == 'mini_program'"> |
|||
<view class="oil-view">手机号码：</view> |
|||
<view class="oil-view"> |
|||
<view class="ov-view">{{ orderInfo.mobile || ' ' }}</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<block v-if="orderInfo.type == 'take_up_venue'" > |
|||
<view class="om-info-line"> |
|||
<view class="oil-view">是否联动开灯：</view> |
|||
<view class="oil-view"> |
|||
<view class="ov-view">{{ orderInfo.light_up?'是':'否'}}</view> |
|||
</view> |
|||
</view> |
|||
<view class="om-info-line"> |
|||
<view class="oil-view">收取金额：</view> |
|||
<view class="oil-view"> |
|||
<view class="ov-view">{{ orderInfo.amount || '0' }}</view> |
|||
</view> |
|||
</view> |
|||
<view class="om-info-line"> |
|||
<view class="oil-view">占用原因：</view> |
|||
<view class="oil-view"> |
|||
<view class="ov-view">{{ orderInfo.reason || ' ' }}</view> |
|||
</view> |
|||
</view> |
|||
<view class="om-info-line"> |
|||
<view class="oil-view">操作人：</view> |
|||
<view class="oil-view"> |
|||
<view class="ov-view">{{ orderInfo.operator || ' ' }}</view> |
|||
</view> |
|||
</view> |
|||
</block> |
|||
|
|||
|
|||
<view class="om-border"></view> |
|||
|
|||
<view class="om-name-line"> |
|||
<view class="onl-view">预订信息</view> |
|||
</view> |
|||
<view class="om-info-line"> |
|||
<view class="oil-view">预订项目：</view> |
|||
<view class="oil-view"> |
|||
<view class="ov-view">{{ orderInfo.stadium_name || ' ' }}</view> |
|||
</view> |
|||
</view> |
|||
<view class="om-info-line"> |
|||
<view class="oil-view">预订日期：</view> |
|||
<view class="oil-view"> |
|||
<view class="ov-view">{{ orderInfo.date || ' ' }}</view> |
|||
</view> |
|||
</view> |
|||
<view class="om-info-line"> |
|||
<view class="oil-view">预订场次：</view> |
|||
<view class="oil-view"> |
|||
<view class="ov-view" v-for="(e, i) in orderInfo.sessions" :key="i"> |
|||
{{ e.venue_name || '' }} {{ e.duration || '' }} （￥{{ e.price || '' }} ） |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="om-total" v-if="isShowTotalAmoutn" >实付款 ￥{{ orderInfo.amount || '0' }}</view> |
|||
<!-- 管理员占用 --> |
|||
<view class="om-btns" v-if="orderInfo.type == 'take_up_venue'"> |
|||
<view class="ob-view" @click="toShare">分享给朋友</view> |
|||
<view class="ob-view red" @click="cancelOccupy">取消占用</view> |
|||
</view> |
|||
<!-- 小程序预定 --> |
|||
<view class="om-btns" v-if="orderInfo.type == 'mini_program'"> |
|||
<view class="ob-view" @click="toOrderInfo">订单详情</view> |
|||
<view class="ob-view red" @click="refundBtn">退款</view> |
|||
</view> |
|||
<!-- 课程预定 --> |
|||
<view class="om-btns" v-if="orderInfo.type == 'course_venue'"> |
|||
<view class="ob-view" @click="toCouseInfo">约课详情</view> |
|||
</view> |
|||
<!-- 固定场 --> |
|||
<view class="om-btns" v-if="orderInfo.type == 'fixed_venue'"> |
|||
<!-- 测试：固定场地没有详情 --> |
|||
<view class="ob-view" v-if="orderInfo.pay_status != 0" @click="toOrderInfo">订单详情</view> |
|||
<view class="ob-view red" @click="fixedCancelOccupy" v-if="orderInfo.pay_status!=2">取消订场</view> |
|||
<!-- <view class="ob-view red">退款</view> --> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
</template> |
|||
|
|||
<script> |
|||
import { API } from '../../../js/api' |
|||
import { servers } from '../../../js/server' |
|||
import util from '../../../utils/util' |
|||
export default { |
|||
computed: { |
|||
// 是否显示使用状态 |
|||
isShowStatus(){ |
|||
let { orderInfo } = this; |
|||
// 测试： 固定场地没有状态 |
|||
return orderInfo.type == 'mini_program' || orderInfo.type == 'fixed_venue' |
|||
}, |
|||
|
|||
isShowTotalAmoutn(){ |
|||
let { orderInfo } = this; |
|||
|
|||
return orderInfo.type == 'mini_program' || orderInfo.type == 'course_venue' || orderInfo.type == 'fixed_venue' |
|||
} |
|||
}, |
|||
props: { |
|||
queryInfo: { |
|||
type: Object, |
|||
default: {} |
|||
} |
|||
}, |
|||
data(){ |
|||
return { |
|||
orderInfo: {} |
|||
} |
|||
}, |
|||
mounted(){ |
|||
this.getOrderInfo(); |
|||
}, |
|||
methods: { |
|||
fixedCancelOccupy: util.debounce(function(){ |
|||
let { orderInfo, queryInfo } = this; |
|||
util.showLoad(); |
|||
servers.get({ |
|||
url: API.venue.FixedOccupyCancel, |
|||
data: { |
|||
id: orderInfo.fix_venue_id, |
|||
}, |
|||
isDefaultGet: false, |
|||
}) |
|||
.then(res=>{ |
|||
util.hideLoad(); |
|||
if(res.data.code == 0){ |
|||
setTimeout(_=>this.$emit('refresh'), 1200); |
|||
util.showNone(res.data.message || '操作成功！'); |
|||
}else{ |
|||
util.showNone(res.data.message || '操作失败！'); |
|||
} |
|||
}) |
|||
.catch(util.hideLoad) |
|||
}, 300, true), |
|||
toCouseInfo(){ |
|||
util.showNone('待开放') |
|||
}, |
|||
refundBtn: util.debounce(function(){ |
|||
let { orderInfo, queryInfo } = this; |
|||
servers.post({ |
|||
url: API.venue.orderRefund, |
|||
data: { |
|||
brand_id: queryInfo.brand_id, |
|||
order_no: orderInfo.order_no, |
|||
}, |
|||
isDefaultGet: false, |
|||
}) |
|||
.then(res=>{ |
|||
if(res.data.code == 0){ |
|||
util.showNone(res.data.message || '操作成功！'); |
|||
setTimeout(_=>this.$emit('refresh'), 1200); |
|||
}else{ |
|||
util.showNone(res.data.message || '操作失败！'); |
|||
} |
|||
}) |
|||
}, 300, true), |
|||
toOrderInfo(){ |
|||
let { orderInfo, queryInfo } = this; |
|||
let _query = {} |
|||
_query["stadium_id"] = queryInfo.stadium_id |
|||
_query["order_no"] = orderInfo.order_no |
|||
_query["order_type"] = 3 |
|||
util.routeTo(`/subpackage/device/pages/order_details/order_details?query=${util.jsonStr(_query)}`,'nT'); |
|||
}, |
|||
toShare(){ |
|||
let { orderInfo, queryInfo } = this; |
|||
let _qyStr = `?brand_id=${queryInfo.brand_id}&order_no=${orderInfo.order_no}` |
|||
util.routeTo(`/pages/site/occupy_share/occupy_share${_qyStr}`, 'nT'); |
|||
}, |
|||
|
|||
getStatusTxt(status){ |
|||
switch(status){ |
|||
case 0: |
|||
return '待扣款' |
|||
case 1: |
|||
return '待使用' |
|||
case 2: |
|||
return '已使用' |
|||
case 3: |
|||
return '已失效' |
|||
case 8: |
|||
return '使用中' |
|||
default: return '-' |
|||
} |
|||
}, |
|||
getTitle(type){ |
|||
switch(type){ |
|||
case 'no_price_venue': |
|||
return '无法订场' |
|||
case 'empty_venue': |
|||
return '-' |
|||
case 'mini_program': |
|||
return '小程序订场' |
|||
case 'take_up_venue': |
|||
return '管理员占用' |
|||
case 'course_venue': |
|||
return '课程预定' |
|||
case 'play_venue': |
|||
return '约玩占用' |
|||
case 'fixed_venue': |
|||
return '固定场锁定' |
|||
default: return '-' |
|||
} |
|||
}, |
|||
cancelOccupy: util.debounce(function(){ |
|||
let { orderInfo, queryInfo } = this; |
|||
servers.get({ |
|||
url: API.venue.takeUpCancel, |
|||
data: { |
|||
brand_id: queryInfo.brand_id, |
|||
order_no: orderInfo.order_no, |
|||
}, |
|||
isDefaultGet: false, |
|||
}) |
|||
.then(res=>{ |
|||
if(res.data.code == 0){ |
|||
setTimeout(_=>this.$emit('refresh'), 1200); |
|||
util.showNone(res.data.message || '操作成功！'); |
|||
}else{ |
|||
util.showNone(res.data.message || '操作失败！'); |
|||
} |
|||
}) |
|||
}, 300, true), |
|||
modalClose(){ |
|||
this.$emit('close'); |
|||
}, |
|||
getOrderInfo(){ |
|||
util.showLoad(); |
|||
let { queryInfo } = this; |
|||
servers.post({ |
|||
url: API.venue.dashboardInfo, |
|||
data: { |
|||
brand_id: queryInfo.brand_id, |
|||
stadium_id: queryInfo.stadium_id, |
|||
venue_id: queryInfo.venue_id, |
|||
date: queryInfo.date, |
|||
duration: queryInfo.duration, |
|||
}, |
|||
isDefaultGet: false, |
|||
}) |
|||
.then(res=>{ |
|||
util.hideLoad(); |
|||
if(res.data.code == 0){ |
|||
this.orderInfo = res.data.data || {} |
|||
}else{ |
|||
// util.showNone(res.data.message || '加载失败！'); |
|||
this.modalClose(); |
|||
util.showModal({ |
|||
title: '提示', |
|||
content: res.data.message || '加载失败！', |
|||
success: mRes=> { |
|||
|
|||
} |
|||
}) |
|||
} |
|||
}) |
|||
.catch(util.hideLoad) |
|||
|
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
@import '~style/public.scss'; |
|||
.fixed-mask{ |
|||
position: fixed; |
|||
top: 0; |
|||
bottom: 0; |
|||
right: 0; |
|||
left: 0; |
|||
z-index: 10; |
|||
width: 100%; |
|||
background-color: rgba($color: #000000, $alpha: .5); |
|||
} |
|||
.order-modal{ |
|||
position: absolute; |
|||
left: 0; |
|||
bottom: 0; |
|||
width: 100%; |
|||
padding-left: 30upx; |
|||
padding-right: 30upx; |
|||
padding-top: 48upx; |
|||
padding-bottom: 0upx; |
|||
padding-bottom: calc( 0upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */ |
|||
padding-bottom: calc( 0upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */ |
|||
background-color: #fff; |
|||
.om-close{ |
|||
position: absolute; |
|||
right: 30upx; |
|||
top: 30upx; |
|||
width: 34upx; |
|||
height: 34upx; |
|||
} |
|||
.om-title{ |
|||
margin-bottom: 34upx; |
|||
text-align: center; |
|||
font-size: 32upx; |
|||
line-height: 44upx; |
|||
color: #1a1a1a; |
|||
font-weight: 500; |
|||
} |
|||
.om-name-line{ |
|||
margin-bottom: 12upx; |
|||
@include centerFlex(space-between); |
|||
.onl-view{ |
|||
&:first-child{ |
|||
line-height: 40upx; |
|||
font-size: 28upx; |
|||
color: #1a1a1a; |
|||
} |
|||
&+.onl-view{ |
|||
line-height: 40upx; |
|||
font-size: 28upx; |
|||
color: $themeColor; |
|||
} |
|||
} |
|||
} |
|||
.om-info-line{ |
|||
display: flex; |
|||
align-items: baseline; |
|||
.oil-view{ |
|||
font-size: 28upx; |
|||
line-height: 40upx; |
|||
color: #9C9C9F; |
|||
&:first-child{ |
|||
flex-shrink: 0; |
|||
} |
|||
&+.oil-view{ |
|||
flex-grow: 1; |
|||
.ov-view{ |
|||
font-size: 28upx; |
|||
line-height: 40upx; |
|||
color: #1a1a1a; |
|||
@include textHide(1); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.om-border{ |
|||
margin-top: 20upx; |
|||
margin-bottom: 18upx; |
|||
height: 2upx; |
|||
background-color: #D8D8D8; |
|||
} |
|||
.om-total{ |
|||
margin-top: 20upx; |
|||
margin-bottom: 40upx; |
|||
text-align: right; |
|||
line-height: 40upx; |
|||
font-size: 28upx; |
|||
color: #1a1a1a; |
|||
} |
|||
.om-btns{ |
|||
margin-top: 40upx; |
|||
margin-bottom: 10upx; |
|||
@include centerFlex(flex-end); |
|||
.ob-view{ |
|||
margin-left: 20upx; |
|||
width: 210upx; |
|||
height: 80upx; |
|||
border: 2upx solid $themeColor; |
|||
text-align: center; |
|||
line-height: 76upx; |
|||
border-radius: 10upx; |
|||
font-size: 32upx; |
|||
font-weight: 500; |
|||
color: $themeColor; |
|||
&.red{ |
|||
border-color: #EA5061; |
|||
color: #EA5061; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,134 @@ |
|||
<template> |
|||
<view class="occupy-share"> |
|||
<view class="os-address"> |
|||
<view class="oa-name"> |
|||
<image mode="aspectFit" :src="shareInfo.stadium_logo"></image> |
|||
<view>{{ shareInfo.stadium_name || '-' }}</view> |
|||
</view> |
|||
<view class="oa-info"> |
|||
<view>地址：</view> |
|||
<view>{{ shareInfo.stadium_address || '-' }}</view> |
|||
</view> |
|||
</view> |
|||
<view class="os-section"> |
|||
<view class="os-des"> |
|||
<view>①<text>截图</text>该页面后，发此图给朋友 </view> |
|||
<view>② 朋友<text>长按此图</text>识别下面的二维码<text>关注公众号</text> </view> |
|||
<view>③ 接收微信消息，<text>领取入场码</text></view> |
|||
<view>④ 领取成功后<text>仅限本人使用</text></view> |
|||
</view> |
|||
<image class="os-code-img" mode="aspectFit" :src="shareInfo.share_qrcode"></image> |
|||
<view class="os-tip">注：此码非入场码</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import { API } from '../../../js/api' |
|||
import { servers } from '../../../js/server' |
|||
export default { |
|||
data(){ |
|||
return { |
|||
shareInfo: {}, |
|||
} |
|||
}, |
|||
onLoad(options){ |
|||
this.getShareCode({ |
|||
brand_id: options.brand_id, |
|||
order_no: options.order_no, |
|||
}) |
|||
}, |
|||
methods: { |
|||
getShareCode({ brand_id, order_no }){ |
|||
servers.get({ |
|||
url: API.venue.takeUpShareQr, |
|||
data: { brand_id, order_no, }, |
|||
failMsg: '加载失败！' |
|||
}) |
|||
.then(res=> { |
|||
console.warn('shareInfo', res) |
|||
this.shareInfo = res || {}; |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
@import '~style/public.scss'; |
|||
page{ |
|||
background-color: $themeColor; |
|||
} |
|||
.occupy-share{ |
|||
padding-top: 32upx; |
|||
padding-left: 24upx; |
|||
padding-right: 24upx; |
|||
|
|||
} |
|||
.os-address{ |
|||
margin-bottom: 36upx; |
|||
.oa-name{ |
|||
margin-bottom: 20upx; |
|||
@include centerFlex(flex-start); |
|||
>image{ |
|||
flex-shrink: 0; |
|||
margin-right: 10upx; |
|||
width: 34upx; |
|||
height: 34upx; |
|||
} |
|||
>view{ |
|||
line-height: 40upx; |
|||
font-size: 28upx; |
|||
color: #fff; |
|||
@include textHide(1); |
|||
} |
|||
} |
|||
.oa-info{ |
|||
display: flex; |
|||
align-items: baseline; |
|||
>view{ |
|||
line-height: 40upx; |
|||
font-size: 28upx; |
|||
color: #fff; |
|||
&:first-child{ |
|||
flex-shrink: 0; |
|||
} |
|||
&+view{ |
|||
flex-grow: 1; |
|||
word-break: break-all; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.os-section{ |
|||
padding: 30upx 60upx 0; |
|||
height: 640upx; |
|||
overflow: hidden; |
|||
border-radius: 10upx; |
|||
background-color: #fff; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: flex-start; |
|||
flex-direction: column; |
|||
.os-des{ |
|||
margin-bottom: 16upx; |
|||
>view{ |
|||
line-height: 52upx; |
|||
font-size: 28upx; |
|||
color: #333; |
|||
>text{ |
|||
color: $themeColor; |
|||
} |
|||
} |
|||
} |
|||
.os-code-img{ |
|||
margin-bottom: 12upx; |
|||
width: 300upx; |
|||
height: 300upx; |
|||
} |
|||
} |
|||
.os-tip{ |
|||
font-size: 24upx; |
|||
color: #9A9A9D; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,118 @@ |
|||
<template> |
|||
<view class="occupy-success"> |
|||
<view class="os-address">{{ qrInfo.stadium_name || '-' }}</view> |
|||
<image class="os-code" mode="aspectFit" :src="qrInfo.verify_qrcode"></image> |
|||
<view class="os-num">验证码：{{ qrInfo.verify_code || '-' }}</view> |
|||
<view class="os-btn" @click="toShare"> |
|||
<view>分享给朋友</view> |
|||
<image mode="aspectFit" src="/static/images/icon/share_arrow_cff.png"></image> |
|||
</view> |
|||
<view class="os-black" @click="backBtn">返回</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import { API } from '../../../js/api'; |
|||
import { servers } from '../../../js/server'; |
|||
import util from '../../../utils/util'; |
|||
export default { |
|||
data(){ |
|||
return { |
|||
qrInfo: {}, |
|||
optionsQuery: {}, |
|||
} |
|||
}, |
|||
onLoad(options){ |
|||
this.optionsQuery = options || {}; |
|||
this.getPageInfo({ |
|||
brand_id: options.brand_id, |
|||
order_no: options.order_no, |
|||
}) |
|||
}, |
|||
methods: { |
|||
toShare(){ |
|||
let { optionsQuery } = this; |
|||
let _qrStr = `?brand_id=${optionsQuery.brand_id}&order_no=${optionsQuery.order_no}` |
|||
util.routeTo(`/pages/site/occupy_share/occupy_share${_qrStr}`, 'nT') |
|||
}, |
|||
backBtn(){ |
|||
util.routeTo(); |
|||
util.previousPageFunction({ // 刷新占用列表 |
|||
fnName: 'refreshList', |
|||
query: null |
|||
}) |
|||
}, |
|||
getPageInfo({ |
|||
brand_id, |
|||
order_no, |
|||
}){ |
|||
servers.get({ |
|||
url: API.venue.takeUpVerifyQr, |
|||
data: { |
|||
brand_id, |
|||
order_no, |
|||
}, |
|||
failMsg: '加载失败！' |
|||
}) |
|||
.then(res=>{ |
|||
console.warn('res--->' , res); |
|||
this.qrInfo = res || {}; |
|||
}) |
|||
} |
|||
} |
|||
|
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
@import '~style/public.scss'; |
|||
.occupy-success{ |
|||
padding: 0 24upx; |
|||
.os-address{ |
|||
margin-bottom: 80upx; |
|||
height: 92upx; |
|||
line-height: 90upx; |
|||
border-bottom: 2upx solid #D8D8D8; |
|||
font-size: 32upx; |
|||
color: #333; |
|||
@include textHide(1); |
|||
} |
|||
.os-code{ |
|||
margin: 0 auto 40upx; |
|||
display: block; |
|||
width: 400upx; |
|||
height: 400upx; |
|||
} |
|||
.os-num{ |
|||
margin-bottom: 128upx; |
|||
text-align: center; |
|||
font-size: 32upx; |
|||
color: #333; |
|||
@include textHide(1); |
|||
} |
|||
.os-btn{ |
|||
margin: 0 auto 92upx; |
|||
width: 320upx; |
|||
height: 112upx; |
|||
background-color: $themeColor; |
|||
border-radius: 10upx; |
|||
@include centerFlex(center); |
|||
>view{ |
|||
font-size: 32upx; |
|||
color: #fff; |
|||
} |
|||
>image{ |
|||
margin-left: 20upx; |
|||
width: 34upx; |
|||
height: 36upx; |
|||
} |
|||
} |
|||
.os-black{ |
|||
font-size: 32upx; |
|||
line-height: 44upx; |
|||
text-align: center; |
|||
color: $themeColor; |
|||
text-decoration: underline; |
|||
} |
|||
} |
|||
</style> |
|||
|
After Width: 68 | Height: 72 | Size: 705 B |
Write
Preview
Loading…
Cancel
Save
Reference in new issue