26 changed files with 1497 additions and 66 deletions
-
11.hbuilderx/launch.json
-
104src/components/reservation_order/reservation_order.vue
-
134src/components/timing_order/timing_order.vue
-
14src/pages.json
-
53src/pages/index/index.vue
-
13src/pages/order_list/order_list.vue
-
BINsrc/static/images/icon/x_close.png
-
546src/subpackage/device/components/order/reservation_people/reservation_people.vue
-
261src/subpackage/device/components/order/reservation_site/reservation_site.vue
-
32src/subpackage/device/pages/order_details/reservation_details/reservation_details.vue
-
285src/subpackage/device/pages/order_details/timing_details/timing_details.vue
-
110src/subpackage/device/pages/order_manage/order_manage.vue
-
BINsrc/subpackage/device/static/images/order/tab_0_0.png
-
BINsrc/subpackage/device/static/images/order/tab_0_1.png
-
BINsrc/subpackage/device/static/images/order/tab_0_10.png
-
BINsrc/subpackage/device/static/images/order/tab_0_11.png
-
BINsrc/subpackage/device/static/images/order/tab_0_2.png
-
BINsrc/subpackage/device/static/images/order/tab_0_3.png
-
BINsrc/subpackage/device/static/images/order/tab_0_4.png
-
BINsrc/subpackage/device/static/images/order/tab_0_5.png
-
BINsrc/subpackage/device/static/images/order/tab_0_6.png
-
BINsrc/subpackage/device/static/images/order/tab_0_7.png
-
BINsrc/subpackage/device/static/images/order/tab_0_8.png
-
BINsrc/subpackage/device/static/images/order/tab_0_9.png
-
BINsrc/subpackage/device/static/images/order/tab_1_0.png
-
BINsrc/subpackage/device/static/images/scan_code.png
@ -0,0 +1,11 @@ |
|||
{ // launch.json 配置了启动调试时相关设置，configurations下节点名称可为 app-plus/h5/mp-weixin/mp-baidu/mp-alipay/mp-qq/mp-toutiao/mp-360/ |
|||
// launchtype项可配置值为local或remote, local代表前端连本地云函数，remote代表前端连云端云函数 |
|||
"version": "0.0", |
|||
"configurations": [{ |
|||
"type": "uniCloud", |
|||
"default": { |
|||
"launchtype": "remote" |
|||
} |
|||
} |
|||
] |
|||
} |
|||
@ -0,0 +1,134 @@ |
|||
<template> |
|||
<view class="timing-order" @click="toOrderDetails"> |
|||
<view class="ro-header"> |
|||
<view class="rh-view">{{orderInfo.stadium_name || '-'}}</view> |
|||
<text :class="[ 'rh-text', orderInfo.pay_status == 0?'rh-active':'' ]">{{zh_order_status(orderInfo.pay_status)}}</text> |
|||
</view> |
|||
<view class="ro-section"> |
|||
<view class="rs-line"> |
|||
<view class="rl-view">订单编号：</view> |
|||
<view class="rl-view"> |
|||
<view class="rv-view">{{orderInfo.order_no || '-'}}</view> |
|||
</view> |
|||
<image src="/static/images/icon/arrow_b2.png"></image> |
|||
</view> |
|||
<!-- 场次有 人次没有 --> |
|||
<view class="rs-line" v-if="true"> |
|||
<view class="rl-view">项目：</view> |
|||
<view class="rl-view"> |
|||
<view class="rv-view">{{'羽毛球(1号馆)' || '-'}}</view> |
|||
</view> |
|||
</view> |
|||
<view class="rs-line"> |
|||
<view class="rl-view">时长：</view> |
|||
<view class="rl-view"> |
|||
<view class="rv-view">{{ '1小时58分46秒' || '-'}}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="ro-bot"> |
|||
<view class="rb-total">实付款 <text class="rt-txt"> ¥{{orderInfo.pay_amount || '0'}}</text></view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import util from '@/utils/util'; |
|||
export default { |
|||
computed: { |
|||
zh_order_status(){ |
|||
// 订单状态 0计费中1已完成 |
|||
return status =>{ |
|||
const _obj = { |
|||
'0': '计费中', |
|||
'1': '已完成', |
|||
} |
|||
return _obj[`${status}`] || '-' |
|||
} |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
} |
|||
}, |
|||
methods:{ |
|||
toOrderDetails(){ |
|||
util.routeTo('/subpackage/device/pages/order_details/timing_details/timing_details','nT'); |
|||
} |
|||
} |
|||
|
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" > |
|||
@import '~style/public.scss'; |
|||
.timing-order{ |
|||
padding: 0 24upx; |
|||
border-radius: 10upx; |
|||
background-color: #fff; |
|||
.ro-header{ |
|||
margin-bottom: 18upx; |
|||
height: 98upx; |
|||
line-height: 96upx; |
|||
border-bottom: 2upx solid #D8D8D8; |
|||
@include centerFlex(space-between); |
|||
.rh-view{ |
|||
flex-grow: 1; |
|||
font-size: 28upx; |
|||
color: #1a1a1a; |
|||
@include textHide(1); |
|||
} |
|||
.rh-text{ |
|||
margin-left: 20upx; |
|||
flex-shrink: 0; |
|||
font-size: 28upx; |
|||
color: #9C9C9F; |
|||
} |
|||
.rh-active{ |
|||
color: $themeColor; |
|||
} |
|||
} |
|||
.ro-section{ |
|||
padding-bottom: 20upx; |
|||
.rs-line{ |
|||
display: flex; |
|||
.rl-view,.rv-view{ |
|||
line-height: 40upx; |
|||
font-size: 24upx; |
|||
color: #9c9c9f; |
|||
} |
|||
.rl-view{ |
|||
&:first-child{ |
|||
flex-shrink: 0; |
|||
} |
|||
&+.rl-view{ |
|||
flex-grow: 1; |
|||
.rv-view{ |
|||
@include textHide(1); |
|||
} |
|||
} |
|||
} |
|||
>image{ |
|||
width: 32rpx; |
|||
height: 32rpx; |
|||
} |
|||
} |
|||
|
|||
} |
|||
.ro-bot{ |
|||
padding-top: 20upx; |
|||
padding-bottom: 30upx; |
|||
border-top: 2upx solid #D8D8D8; |
|||
.rb-total{ |
|||
line-height: 40upx; |
|||
text-align: right; |
|||
font-size: 24upx; |
|||
color: #9c9c9f; |
|||
.rt-txt{ |
|||
color: #1A1A1A; |
|||
margin-left: 10rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
|
After Width: 34 | Height: 34 | Size: 425 B |
@ -0,0 +1,546 @@ |
|||
<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,261 @@ |
|||
<template> |
|||
<view class="reservation-site"> |
|||
<view class="rs-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> |
|||
<view class="rs-box"> |
|||
<view class="rb-title">验证信息</view> |
|||
<view class="rb-line"> |
|||
<view class="rl-view">验证码：</view> |
|||
<view :class="['rl-code1', false?'rl-code2':'', false?'rl-code3':'', false?'rl-code4':'']" >1233 5512 4565<text>(待使用)</text></view> |
|||
</view> |
|||
<!-- 已使用 --> |
|||
<block v-if="true"> |
|||
<view class="rb-line"> |
|||
<view class="rl-view">核销方式：</view> |
|||
<text class="rl-text">扫码核销</text> |
|||
</view> |
|||
<view class="rb-line"> |
|||
<view class="rl-view">核销时间：</view> |
|||
<text class="rl-text">2019-05-17 11:12:58</text> |
|||
</view> |
|||
</block> |
|||
</view> |
|||
<view class="rs-box"> |
|||
<view class="rb-title">预订信息</view> |
|||
<view class="rb-line"> |
|||
<view class="rl-view">预订项目：</view> |
|||
<text class="rl-text">羽毛球次卡</text> |
|||
</view> |
|||
<view class="rb-line"> |
|||
<view class="rl-view">预订日期：</view> |
|||
<text class="rl-text">2019-05-18(周五)</text> |
|||
</view> |
|||
<view class="rb-line"> |
|||
<view class="rl-view">预订场次：</view> |
|||
<text class="rl-text">1号馆 10:00-12:00（¥80）\n3号馆 11:00-12:00（¥80）</text> |
|||
</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="rs-box"> |
|||
<view class="rb-title">支付信息</view> |
|||
<view class="rb-line"> |
|||
<view class="rl-view">支付方式：</view> |
|||
<text class="rl-text">微信支付</text> |
|||
</view> |
|||
<view class="rb-line"> |
|||
<view class="rl-view">支付时间：</view> |
|||
<text class="rl-text">2019年6月18日 10:30:40</text> |
|||
</view> |
|||
<view class="rb-line"> |
|||
<view class="rl-view">微信交易号：</view> |
|||
<text class="rl-text">424736746998493847989434</text> |
|||
</view> |
|||
<!-- 已退款 --> |
|||
<block v-if="true"> |
|||
<view class="rb-line"> |
|||
<view class="rl-view">退款时间：</view> |
|||
<text class="rl-text">2019年6月18日 10:30:40</text> |
|||
</view> |
|||
<view class="rb-line"> |
|||
<view class="rl-view">退款单号：</view> |
|||
<text class="rl-text">424736746998493847989434</text> |
|||
</view> |
|||
</block> |
|||
<!-- 已失效 --> |
|||
<view class="rb-line"> |
|||
<view class="rl-view">失效时间：</view> |
|||
<text class="rl-text">2019年6月18日 10:30:40</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
} |
|||
}, |
|||
|
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" > |
|||
@import '~style/public.scss'; |
|||
.reservation-site{ |
|||
margin-bottom: 24rpx; |
|||
.rs-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; |
|||
// @include centerFlex(flex-start); |
|||
display: flex; |
|||
// align-items: center; |
|||
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; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
.rs-box{ |
|||
margin: 24rpx 24rpx 0rpx; |
|||
padding: 30rpx; |
|||
background-color: #FFF; |
|||
border-radius: 10rpx; |
|||
.rb-title{ |
|||
color: #9A9A9D; |
|||
font-size: 28rpx; |
|||
margin-bottom: 20rpx; |
|||
} |
|||
.rb-line{ |
|||
line-height: 48rpx; |
|||
display: flex; |
|||
// align-items: center; |
|||
justify-content: flex-start; |
|||
.rl-view{ |
|||
color: #9A9A9D; |
|||
font-size: 28rpx; |
|||
} |
|||
.rl-text{ |
|||
color: #333333; |
|||
font-size: 28rpx; |
|||
} |
|||
.rl-code1{ |
|||
color: #009874; |
|||
font-size: 28rpx; |
|||
>text{ |
|||
color: #009874; |
|||
margin-left: 20rpx; |
|||
} |
|||
} |
|||
.rl-code2{ |
|||
color: #333; |
|||
font-size: 28rpx; |
|||
>text{ |
|||
color: #333; |
|||
} |
|||
} |
|||
.rl-code3{ |
|||
color: #9A9A9D; |
|||
font-size: 28rpx; |
|||
>text{ |
|||
color: #EA5061; |
|||
} |
|||
} |
|||
.rl-code4{ |
|||
color: #9A9A9D; |
|||
font-size: 28rpx; |
|||
>text{ |
|||
color: #9A9A9D; |
|||
} |
|||
} |
|||
} |
|||
.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; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,32 @@ |
|||
<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> |
|||
@ -0,0 +1,285 @@ |
|||
<template> |
|||
<view class="timing-details"> |
|||
<view class="td-head"> |
|||
<view class="th-store"> |
|||
<image></image> |
|||
<view>欧轩智能场馆(羽毛球永泰店)</view> |
|||
</view> |
|||
<view class="th-line"> |
|||
<view>订单编号：<text>2352534645764747</text></view> |
|||
<view><text :class="[true?'tl-active':'']">计费中</text></view> |
|||
</view> |
|||
<view class="th-line"> |
|||
<view>创建时间：<text>2019-06-06 12:00:06</text></view> |
|||
</view> |
|||
<view class="th-line"> |
|||
<view>用户昵称：<text>i术生</text></view> |
|||
</view> |
|||
</view> |
|||
<view class="td-box"> |
|||
<view class="tb-title">计时信息</view> |
|||
<view class="tb-line"> |
|||
<!-- 项目 场次有 人次没有 --> |
|||
<view v-if="false">项目：<text>羽毛球(1号馆)</text></view> |
|||
<view>进场时间：<text>2020-01-10 15:02:24</text></view> |
|||
<!-- 离场时间 已完成显示 --> |
|||
<view v-if="false">离场时间：<text>2020-01-10 17:20:24</text></view> |
|||
<view>时长合计：<text>1小时35分9秒</text></view> |
|||
</view> |
|||
<view class="tb-section" v-if="false"> |
|||
<view class="ts-line"> |
|||
<view>金额小计</view> |
|||
<view>¥6</view> |
|||
</view> |
|||
<view class="ts-line"> |
|||
<view>积分抵扣</view> |
|||
<view>-¥0</view> |
|||
</view> |
|||
<view class="ts-line"> |
|||
<view>折扣金额</view> |
|||
<view>-¥0</view> |
|||
</view> |
|||
<view class="ts-line"> |
|||
<view>优惠券优惠</view> |
|||
<view>-¥1</view> |
|||
</view> |
|||
<view class="ts-total"> |
|||
<view>合计支付：<text>￥</text><text>5</text></view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="td-box" v-if="false"> |
|||
<view class="tb-title">支付信息</view> |
|||
<view class="tb-line"> |
|||
<view>支付方式：<text>微信支付</text></view> |
|||
<view>支付时间：<text>2019年6月18日 10:30:40</text></view> |
|||
<view>微信交易号：<text>424736746998493847989434</text></view> |
|||
</view> |
|||
</view> |
|||
<view class="td-btn" @click="isShowEnd = !isShowEnd">结束计费</view> |
|||
|
|||
<!-- 弹框 结束计费 --> |
|||
<view class="ox-dark-mask" v-if="isShowEnd" @touchmove.stop.prevent="moveHandle"> |
|||
<view class="odm-end-modal"> |
|||
<view class="oem-close"> |
|||
<image src="/static/images/icon/x_close.png" @click="isShowEnd = false"></image> |
|||
</view> |
|||
<view class="oem-tit">结束计费</view> |
|||
<view class="oem-line">操作人：张三</view> |
|||
<view class="oem-line">时长合计：<text class="ol-txt1">1小时25分9秒</text></view> |
|||
<view class="oem-line">金额合计：<text class="ol-txt2">¥100.2</text></view> |
|||
<view class="oem-tips">*<text>请输入金额</text></view> |
|||
<view class="oem-ipt"><input type="text" /></view> |
|||
<view class="oem-btn" hover-class="hover-active" @click="isShowEnd = !isShowEnd">确认</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
isShowEnd: false, |
|||
} |
|||
}, |
|||
methods: { |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" > |
|||
@import '~style/public.scss'; |
|||
.timing-details{ |
|||
margin-bottom: 24rpx; |
|||
.td-head{ |
|||
margin: 24rpx 24rpx 0rpx; |
|||
padding: 30rpx; |
|||
background-color: #FFF; |
|||
border-radius: 10rpx 10rpx 0px 0px; |
|||
.th-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; |
|||
} |
|||
} |
|||
.th-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; |
|||
} |
|||
.tl-active{ |
|||
color: #009874; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.td-box{ |
|||
margin: 24rpx 24rpx 0rpx; |
|||
padding: 30rpx; |
|||
background-color: #FFF; |
|||
border-radius: 10rpx; |
|||
.tb-title{ |
|||
color: #9A9A9D; |
|||
font-size: 28rpx; |
|||
margin-bottom: 20rpx; |
|||
} |
|||
.tb-line{ |
|||
>view{ |
|||
line-height: 52rpx; |
|||
font-size: 28rpx; |
|||
color: #9A9A9D; |
|||
>text{ |
|||
color: #333333; |
|||
} |
|||
} |
|||
|
|||
} |
|||
.tb-section{ |
|||
margin-top: 30rpx; |
|||
border-top: 2rpx solid #D8D8D8; |
|||
.ts-line{ |
|||
margin-top: 26rpx; |
|||
@include centerFlex(space-between); |
|||
>view{ |
|||
color: #333333; |
|||
&:first-child{ |
|||
font-size: 28rpx; |
|||
} |
|||
&:nth-child(2){ |
|||
font-size: 24rpx; |
|||
margin-right: 8rpx; |
|||
} |
|||
} |
|||
} |
|||
.ts-total{ |
|||
margin-top: 22rpx; |
|||
@include centerFlex(flex-end); |
|||
>view{ |
|||
color: #333333; |
|||
font-size: 28rpx; |
|||
>text{ |
|||
color: #FF873D; |
|||
&:first-child{ |
|||
font-size: 28rpx; |
|||
} |
|||
&:nth-child(2){ |
|||
font-size: 36rpx; |
|||
margin-right: 8rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.td-btn{ |
|||
height: 112rpx; |
|||
margin: 80rpx 24rpx; |
|||
border-radius: 10rpx; |
|||
background-color: #009874; |
|||
color: #FFF; |
|||
font-size: 32rpx; |
|||
line-height: 112rpx; |
|||
text-align: center; |
|||
} |
|||
.odm-end-modal{ |
|||
position: absolute; |
|||
left: 65rpx; |
|||
top: 12%; |
|||
background-color: #fff; |
|||
width: 620rpx; |
|||
padding: 30rpx 0rpx 80rpx; |
|||
border-radius: 10rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
.oem-close{ |
|||
width: 100%; |
|||
@include centerFlex(flex-end); |
|||
>image{ |
|||
width: 32rpx; |
|||
height: 32rpx; |
|||
margin-right: 30rpx; |
|||
} |
|||
} |
|||
.oem-tit { |
|||
color: #333; |
|||
font-size: 32rpx; |
|||
font-weight: 700; |
|||
margin: 16rpx 0rpx 34rpx; |
|||
} |
|||
.oem-line{ |
|||
width: 456rpx; |
|||
color: #333; |
|||
font-size: 28rpx; |
|||
line-height: 48rpx; |
|||
.ol-txt1{ |
|||
color: #009874; |
|||
} |
|||
.ol-txt2{ |
|||
color: #FF873D; |
|||
} |
|||
} |
|||
.oem-tips{ |
|||
width: 456rpx; |
|||
margin: 34rpx 0rpx 8rpx; |
|||
color: #EA5061; |
|||
font-size: 28rpx; |
|||
>text{ |
|||
color: #333333; |
|||
} |
|||
} |
|||
.oem-ipt{ |
|||
width: 456rpx; |
|||
border: 2rpx solid #D8D8D8; |
|||
border-radius: 10rpx; |
|||
& input { |
|||
flex-grow: 1; |
|||
height: 88rpx; |
|||
color: #333; |
|||
font-size: 28rpx; |
|||
padding: 0rpx 20rpx; |
|||
} |
|||
} |
|||
.oem-btn{ |
|||
width: 240rpx; |
|||
height: 88rpx; |
|||
margin-top: 60rpx; |
|||
border-radius: 10rpx; |
|||
background-color: #009874; |
|||
color: #FFF; |
|||
font-size: 32rpx; |
|||
line-height: 88rpx; |
|||
text-align: center; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
|
After Width: 60 | Height: 60 | Size: 878 B |
|
After Width: 60 | Height: 60 | Size: 1.4 KiB |
|
After Width: 60 | Height: 60 | Size: 1.7 KiB |
|
After Width: 60 | Height: 60 | Size: 1.4 KiB |
|
After Width: 60 | Height: 60 | Size: 1.8 KiB |
|
After Width: 60 | Height: 60 | Size: 1.4 KiB |
|
After Width: 60 | Height: 60 | Size: 2.7 KiB |
|
After Width: 60 | Height: 60 | Size: 856 B |
|
After Width: 60 | Height: 60 | Size: 1.5 KiB |
|
After Width: 60 | Height: 60 | Size: 709 B |
|
After Width: 60 | Height: 60 | Size: 2.3 KiB |
|
After Width: 60 | Height: 60 | Size: 1.6 KiB |
|
After Width: 60 | Height: 60 | Size: 2.2 KiB |
|
After Width: 48 | Height: 48 | Size: 553 B |
Write
Preview
Loading…
Cancel
Save
Reference in new issue