5 changed files with 381 additions and 1 deletions
-
71src/components/order_list/locker/locker.vue
-
8src/pages.json
-
8src/pages/order_list/order_list.vue
-
25src/subpackage/order/pages/events/member_info/member_info.vue
-
270src/subpackage/order/pages/locker/detail/detail.vue
@ -0,0 +1,71 @@ |
|||||
|
<template> |
||||
|
<view class="locker-container"> |
||||
|
<a-header :source="'地址'" :status="'状态'"> |
||||
|
<view slot="line" class="lc-line"> |
||||
|
<image class="ll-img" mode="aspectFit" src="/static/images/icon/location.png"></image> |
||||
|
<view class="ll-view">储物柜-B柜</view> |
||||
|
</view> |
||||
|
</a-header> |
||||
|
|
||||
|
<view class="lc-info"> |
||||
|
<a-line :value="'sc20 0822 0815 6894'"> |
||||
|
<block slot="name">订单编号：</block> |
||||
|
</a-line> |
||||
|
<a-line :value="'1小时58分46秒'"> |
||||
|
<block slot="name">寄存时长：</block> |
||||
|
</a-line> |
||||
|
<view class="li-total"><text class="lt-txt">合计支付：</text>¥6</view> |
||||
|
</view> |
||||
|
|
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import util from '../../../utils/util'; |
||||
|
import a_header from '../a_header/a_header.vue'; |
||||
|
import a_line from '../a_line/a_line.vue'; |
||||
|
export default { |
||||
|
components: { |
||||
|
'a-header': a_header, |
||||
|
'a-line': a_line, |
||||
|
}, |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
@import '~style/public.scss'; |
||||
|
.locker-container{ |
||||
|
background-color: #fff; |
||||
|
padding: 0 20upx 20upx; |
||||
|
border-radius: 10upx; |
||||
|
} |
||||
|
.lc-info{ |
||||
|
padding-top: 20upx; |
||||
|
.li-total{ |
||||
|
text-align: right; |
||||
|
line-height: 40upx; |
||||
|
font-weight: 500; |
||||
|
font-size: 28upx; |
||||
|
color: #333; |
||||
|
@include textHide(1); |
||||
|
.lt-txt{ |
||||
|
font-weight: 400; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.lc-line{ |
||||
|
margin-top: 10upx; |
||||
|
@include centerFlex(flex-start); |
||||
|
.ll-img{ |
||||
|
flex-shrink: 0; |
||||
|
margin-right: 12upx; |
||||
|
height: 28upx; |
||||
|
width: 28upx; |
||||
|
} |
||||
|
.ll-view{ |
||||
|
font-size: 24upx; |
||||
|
line-height: 34upx; |
||||
|
color: #9A9A9D; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,270 @@ |
|||||
|
<template> |
||||
|
<view class="locker-order-info"> |
||||
|
<o-header></o-header> |
||||
|
<view class="loi-box"> |
||||
|
<view class="lb-tit">租用详情</view> |
||||
|
<a-line :value="'欧轩智能储物柜'"> |
||||
|
<block slot="name">设备名称：</block> |
||||
|
</a-line> |
||||
|
<a-line :value="'7号柜'"> |
||||
|
<block slot="name">柜子编号：</block> |
||||
|
</a-line> |
||||
|
<a-line :value="'2020-01-10 15:02:24 '"> |
||||
|
<block slot="name">租借时间：</block> |
||||
|
</a-line> |
||||
|
<a-line :value="'2020-01-10 17:37:33'"> |
||||
|
<block slot="name">归还时间：</block> |
||||
|
</a-line> |
||||
|
<a-line :value="'2小时35分9秒'" value-color="#019874"> |
||||
|
<block slot="name">租借时长：</block> |
||||
|
</a-line> |
||||
|
</view> |
||||
|
<view class="loi-box"> |
||||
|
<view class="lb-tit">费用详情</view> |
||||
|
<view class="lb-section"> |
||||
|
<view class="ls-header"> |
||||
|
<view class="over-time"><text>超时时长：</text>1小时35分9秒 </view> |
||||
|
<view class="over-price">缴欠费金额：<text>￥4</text> （超时费用计算标准：1元/小时）</view> |
||||
|
</view> |
||||
|
<view class="lb-price"> |
||||
|
<s-line :keyname="'商品金额小计'" :value="'¥6'"></s-line> |
||||
|
<s-line :keyname="'金额折扣'" :value="'¥6'"></s-line> |
||||
|
<s-line :keyname="'积分抵扣'" :value="'¥6'"></s-line> |
||||
|
<s-line :keyname="'优惠券优惠'" :value="'¥6'"></s-line> |
||||
|
<view class="lp-total"><text>合计支付：</text>￥5</view> |
||||
|
</view> |
||||
|
<view class="lb-line"></view> |
||||
|
|
||||
|
<view class="lb-pay-info"> |
||||
|
<p-line :keyname="'下单时间'" :value="'2020-08-22 10:30:40'" isbtn></p-line> |
||||
|
<p-line :keyname="'订单编号'" :value="'sc20 0822 0815 6894'"></p-line> |
||||
|
<p-line :keyname="'支付方式'" :value="'会员卡支付'"></p-line> |
||||
|
<p-line :keyname="'交易流水号'" :value="'202009181255364564612622'"></p-line> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="lb-section"> |
||||
|
<view class="ls-header"> |
||||
|
<view class="prestore-line"> |
||||
|
<view>预寄存时长：1小时</view> |
||||
|
<view>预寄存时长数量：2</view> |
||||
|
</view> |
||||
|
<view class="prestore-line"> |
||||
|
<view>收费标准：2元/小时 </view> |
||||
|
<view>合计预寄存时长：2小时 </view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="lb-price"> |
||||
|
<s-line :keyname="'商品金额小计'" :value="'¥6'"></s-line> |
||||
|
<s-line :keyname="'金额折扣'" :value="'¥6'"></s-line> |
||||
|
<s-line :keyname="'积分抵扣'" :value="'¥6'"></s-line> |
||||
|
<s-line :keyname="'优惠券优惠'" :value="'¥6'"></s-line> |
||||
|
<view class="lp-total"><text>合计支付：</text>￥5</view> |
||||
|
</view> |
||||
|
<view class="lb-line"></view> |
||||
|
|
||||
|
<view class="lb-pay-info"> |
||||
|
<p-line :keyname="'下单时间'" :value="'2020-08-22 10:30:40'" ></p-line> |
||||
|
<p-line :keyname="'订单编号'" :value="'sc20 0822 0815 6894'" isbtn></p-line> |
||||
|
<p-line :keyname="'支付方式'" :value="'会员卡支付'"></p-line> |
||||
|
<p-line :keyname="'交易流水号'" :value="'202009181255364564612622'"></p-line> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="loi-btn">结束计费</view> |
||||
|
<view class="loi-mask"> |
||||
|
<view class="lm-content"> |
||||
|
<view class="lc-tit">结束计费</view> |
||||
|
<view class="lc-info"> |
||||
|
<a-line :value="'张贺语'"> |
||||
|
<block slot="name">操作人：</block> |
||||
|
</a-line> |
||||
|
<a-line :value="'1小时25分9秒'" value-color="#019874"> |
||||
|
<block slot="name">时长合计：</block> |
||||
|
</a-line> |
||||
|
<a-line :value="'¥100.2'" value-color="#ff873e"> |
||||
|
<block slot="name">金额合计：</block> |
||||
|
</a-line> |
||||
|
</view> |
||||
|
<view class="lc-ipt"> |
||||
|
<view class="li-txt"><text>*</text>请输入金额</view> |
||||
|
<view class="li-frame"><input /></view> |
||||
|
</view> |
||||
|
<view class="lc-btn">确认</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import header from '../../../components/header/header.vue'; |
||||
|
import a_line from '../../../../../components/order_list/a_line/a_line.vue'; |
||||
|
import s_line from '../../../components/s_line/s_line.vue'; |
||||
|
import p_line from '../../../components/p_line/p_line.vue'; |
||||
|
export default { |
||||
|
components: { |
||||
|
'o-header': header, |
||||
|
'a-line': a_line, |
||||
|
's-line': s_line, |
||||
|
'p-line': p_line, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
@import '~style/public.scss'; |
||||
|
.locker-order-info{ |
||||
|
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 */ |
||||
|
} |
||||
|
.loi-box{ |
||||
|
margin-bottom: 24upx; |
||||
|
padding: 30upx; |
||||
|
background-color: #fff; |
||||
|
} |
||||
|
.lb-tit{ |
||||
|
margin-bottom: 18upx; |
||||
|
font-size: 32upx; |
||||
|
line-height: 44upx; |
||||
|
color: #333; |
||||
|
} |
||||
|
.lb-section{ |
||||
|
margin-bottom: 24upx; |
||||
|
background-color: #f6f6f6; |
||||
|
border-radius: 10upx; |
||||
|
.ls-header{ |
||||
|
padding: 40upx 30upx; |
||||
|
border-radius: 10upx; |
||||
|
background-color: #f1f1f1; |
||||
|
.over-time{ |
||||
|
margin-bottom: 12upx; |
||||
|
font-size: 28upx; |
||||
|
line-height: 40upx; |
||||
|
color: #e6081a; |
||||
|
@include textHide(1); |
||||
|
>text{ |
||||
|
color: #333333; |
||||
|
} |
||||
|
} |
||||
|
.over-price{ |
||||
|
line-height: 40upx; |
||||
|
font-size: 28upx; |
||||
|
color: #333; |
||||
|
>text{ |
||||
|
color: #fe873d; |
||||
|
} |
||||
|
} |
||||
|
.prestore-line{ |
||||
|
margin-bottom: 12upx; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
>view{ |
||||
|
flex-shrink: 0; |
||||
|
flex-grow: 0; |
||||
|
line-height: 40upx; |
||||
|
width: 50%; |
||||
|
font-size: 28upx; |
||||
|
color: #333333; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
.lb-price{ |
||||
|
padding: 44upx 30upx 0; |
||||
|
.lp-total{ |
||||
|
text-align: right; |
||||
|
font-size: 28upx; |
||||
|
font-weight: 500; |
||||
|
color: #ff873d; |
||||
|
@include textHide(1); |
||||
|
>text{ |
||||
|
font-weight: 400; |
||||
|
color: #333; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.lb-line{ |
||||
|
margin: 20upx 0 0; |
||||
|
height: 0; |
||||
|
border-top: 2upx dashed #fff; |
||||
|
} |
||||
|
.lb-pay-info{ |
||||
|
padding: 40upx 30upx; |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
.loi-btn{ |
||||
|
margin: 0 auto; |
||||
|
width: 702upx; |
||||
|
text-align: center; |
||||
|
line-height: 112upx; |
||||
|
border-radius: 10upx; |
||||
|
font-size: 32upx; |
||||
|
background-color: $themeColor; |
||||
|
color: #fff; |
||||
|
} |
||||
|
.loi-mask{ |
||||
|
position: fixed; |
||||
|
left: 0; |
||||
|
top: 0; |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
|
background-color: rgba($color: #000000, $alpha: .5); |
||||
|
.lm-content{ |
||||
|
position: absolute; |
||||
|
left: 50%; |
||||
|
top: 50%; |
||||
|
transform: translate(-50%, -50%); |
||||
|
padding: 80upx; |
||||
|
width: 620upx; |
||||
|
background-color: #fff; |
||||
|
border-radius: 10upx; |
||||
|
.lc-tit{ |
||||
|
margin-bottom: 34upx; |
||||
|
text-align: center; |
||||
|
line-height: 44upx; |
||||
|
font-size: 32upx; |
||||
|
font-weight: 500; |
||||
|
color: #333; |
||||
|
} |
||||
|
.lc-info{ |
||||
|
margin-bottom: 34upx; |
||||
|
} |
||||
|
.lc-ipt{ |
||||
|
margin-bottom: 60upx; |
||||
|
.li-txt{ |
||||
|
margin-bottom: 8upx; |
||||
|
font-size: 28upx; |
||||
|
line-height: 40upx; |
||||
|
color: #333; |
||||
|
>text{ |
||||
|
color: #EA5061; |
||||
|
} |
||||
|
} |
||||
|
.li-frame{ |
||||
|
padding: 0 20upx; |
||||
|
height: 88upx; |
||||
|
border-radius: 10upx; |
||||
|
border: 2upx solid #D8D8D8; |
||||
|
>input{ |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
font-size: 28upx; |
||||
|
color: #333; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.lc-btn{ |
||||
|
margin: 0 auto; |
||||
|
width: 240upx; |
||||
|
line-height: 88upx; |
||||
|
text-align: center; |
||||
|
border-radius: 10upx; |
||||
|
color: #fff; |
||||
|
background-color: $themeColor; |
||||
|
font-size: 32upx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue