You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
270 lines
9.5 KiB
270 lines
9.5 KiB
<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>
|