5 changed files with 751 additions and 172 deletions
-
8src/pages.json
-
18src/subpackage/order/pages/curriculum/detail/detail.vue
-
549src/subpackage/order/pages/value_card/detail/detail.vue
-
170src/subpackage/order/pages/value_card/value_card.vue
-
176src/subpackage/order/pages/value_card/xpense_tracker/xpense_tracker.vue
@ -0,0 +1,18 @@ |
|||||
|
<template> |
||||
|
<view class="curriculum-info"> |
||||
|
|
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
|
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
@import '~style/public.scss'; |
||||
|
.curriculum-info{ |
||||
|
|
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,549 @@ |
|||||
|
<template> |
||||
|
<view class="value-card-order-info"> |
||||
|
<view class="i-box vc-header"> |
||||
|
<view class="vh-name"> |
||||
|
<view>欧轩智能场馆(羽毛球永泰店)</view> |
||||
|
</view> |
||||
|
<view class="vh-info"> |
||||
|
<view class="vi-line">储值卡卡号：124646</view> |
||||
|
<view class="vi-line">手机号码：18316466456</view> |
||||
|
<view class="vi-line">储值卡余额：1000</view> |
||||
|
</view> |
||||
|
<view class="vh-btns"> |
||||
|
<view>消费记录</view> |
||||
|
<view class="red">扣费</view> |
||||
|
<view class="orange">充值</view> |
||||
|
</view> |
||||
|
<image class="vh-tag"></image> |
||||
|
</view> |
||||
|
<view class="i-box vc-info"> |
||||
|
<view class="vc-tit">储值卡信息</view> |
||||
|
<a-line :value="'yiming'"> |
||||
|
<block slot="name">微信昵称：</block> |
||||
|
</a-line> |
||||
|
<a-line :value="'白金储值卡'"> |
||||
|
<block slot="name">储值卡名称：</block> |
||||
|
</a-line> |
||||
|
<a-line :value="'个人卡（1/1 ）'"> |
||||
|
<block slot="name">卡类型：</block> |
||||
|
</a-line> |
||||
|
<a-line :value="'至2022.08.28'"> |
||||
|
<block slot="name">有效期：</block> |
||||
|
</a-line> |
||||
|
</view> |
||||
|
<view class="i-box vc-record"> |
||||
|
<view class="vc-tit">购卡记录</view> |
||||
|
<view class="vr-tit">升级 2020-05-23 13:25</view> |
||||
|
<a-line :value="'黄金储值卡'"> |
||||
|
<block slot="name">名称：</block> |
||||
|
</a-line> |
||||
|
<a-line :value="'1000元'"> |
||||
|
<block slot="name">面值：</block> |
||||
|
</a-line> |
||||
|
<a-line :value="'￥1999'"> |
||||
|
<block slot="name">售价：</block> |
||||
|
</a-line> |
||||
|
<a-line :value="'￥1000'"> |
||||
|
<block slot="name">支付金额：</block> |
||||
|
</a-line> |
||||
|
<a-line :value="'￥10（30天内有效）'"> |
||||
|
<block slot="name">赠送金额：</block> |
||||
|
</a-line> |
||||
|
<a-line :value="'小程序'"> |
||||
|
<block slot="name">途径：</block> |
||||
|
</a-line> |
||||
|
|
||||
|
<view class="vr-border"></view> |
||||
|
|
||||
|
<view class="vr-tit">升级 2020-05-23 13:25</view> |
||||
|
<a-line :value="'黄金储值卡'"> |
||||
|
<block slot="name">名称：</block> |
||||
|
</a-line> |
||||
|
<a-line :value="'1000元'"> |
||||
|
<block slot="name">面值：</block> |
||||
|
</a-line> |
||||
|
<a-line :value="'￥1999'"> |
||||
|
<block slot="name">售价：</block> |
||||
|
</a-line> |
||||
|
<a-line :value="'￥1000'"> |
||||
|
<block slot="name">支付金额：</block> |
||||
|
</a-line> |
||||
|
<a-line :value="'￥10（30天内有效）'"> |
||||
|
<block slot="name">赠送金额：</block> |
||||
|
</a-line> |
||||
|
<a-line :value="'小程序'"> |
||||
|
<block slot="name">途径：</block> |
||||
|
</a-line> |
||||
|
</view> |
||||
|
|
||||
|
<view class="vc-mask" v-if="false"> |
||||
|
<view class="vc-recharge"> |
||||
|
<image class="vr-close"></image> |
||||
|
<view class="vr-tit">充值</view> |
||||
|
|
||||
|
<view class="vr-info"> |
||||
|
<view><text>储值卡号：</text>20195171564566</view> |
||||
|
<view><text>手机号码：</text>18316553478</view> |
||||
|
<view><text>余额：</text>￥75.25</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="vr-edit"> |
||||
|
<view class="ve-line"> |
||||
|
<view class="vl-name"><text>*</text>充值金额</view> |
||||
|
<view class="vl-ipt"> |
||||
|
<view class="vi-box"> |
||||
|
<view class="vb-btn"></view> |
||||
|
<view class="vb-ipt"> |
||||
|
<input /> |
||||
|
</view> |
||||
|
<view class="vb-btn"></view> |
||||
|
</view> |
||||
|
<view class="vi-unit">元</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="ve-line"> |
||||
|
<view class="vl-name"><text>*</text>充值赠送金额</view> |
||||
|
<view class="vl-ipt"> |
||||
|
<view class="vi-box"> |
||||
|
<view class="vb-btn"></view> |
||||
|
<view class="vb-ipt"> |
||||
|
<input /> |
||||
|
</view> |
||||
|
<view class="vb-btn"></view> |
||||
|
</view> |
||||
|
<view class="vi-unit">元</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="ve-line"> |
||||
|
<view class="vl-name"><text>*</text>赠送有效期</view> |
||||
|
<view class="vl-ipt"> |
||||
|
<view class="vi-box"> |
||||
|
<view class="vb-btn"></view> |
||||
|
<view class="vb-ipt"> |
||||
|
<input /> |
||||
|
</view> |
||||
|
<view class="vb-btn"></view> |
||||
|
</view> |
||||
|
<view class="vi-unit">天</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="ve-line"> |
||||
|
<view class="vl-name"><text>*</text>延长有效期</view> |
||||
|
<view class="vl-ipt"> |
||||
|
<view class="vi-box"> |
||||
|
<view class="vb-btn"></view> |
||||
|
<view class="vb-ipt"> |
||||
|
<input /> |
||||
|
</view> |
||||
|
<view class="vb-btn"></view> |
||||
|
</view> |
||||
|
<view class="vi-unit">天</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="vr-btns"> |
||||
|
<view class="white">取消</view> |
||||
|
<view>确认</view> |
||||
|
</view> |
||||
|
|
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="vc-mask" v-if="false"> |
||||
|
<view class="vc-recharge vc-deductions"> |
||||
|
<image class="vr-close"></image> |
||||
|
<view class="vr-tit">扣费</view> |
||||
|
|
||||
|
<view class="vr-info"> |
||||
|
<view><text>储值卡号：</text>20195171564566</view> |
||||
|
<view><text>手机号码：</text>18316553478</view> |
||||
|
<view><text>余额：</text>￥75.25</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="vr-edit"> |
||||
|
<view class="ve-line"> |
||||
|
<view class="vl-name"><text>*</text>充值金额</view> |
||||
|
<view class="vl-ipt"> |
||||
|
<view class="vi-box"> |
||||
|
<view class="vb-btn"></view> |
||||
|
<view class="vb-ipt"> |
||||
|
<input /> |
||||
|
</view> |
||||
|
<view class="vb-btn"></view> |
||||
|
</view> |
||||
|
<view class="vi-unit">元</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="ve-line" style="margin-bottom: 20rpx;"> |
||||
|
<view class="vl-name"><text>*</text>消费场景(单选)</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="vd-ipt"> |
||||
|
<picker> |
||||
|
<view class="vi-box"> |
||||
|
<input /> |
||||
|
<image></image> |
||||
|
</view> |
||||
|
</picker> |
||||
|
<view class="vi-box vi-remark"> |
||||
|
<input /> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
|
||||
|
|
||||
|
<view class="vr-btns"> |
||||
|
<view>确认</view> |
||||
|
</view> |
||||
|
|
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="vc-mask"> |
||||
|
<view class="tip-modal"> |
||||
|
<image class="tm-close"></image> |
||||
|
<image class="tm-icon"></image> |
||||
|
<view class="tm-tit">扣费成功！</view> |
||||
|
<view class="tm-info"> |
||||
|
<view> |
||||
|
<view>扣费金额：<text>-￥50</text></view> |
||||
|
<view>当前余额：￥25.25 </view> |
||||
|
<view>储值卡号：20195171564566</view> |
||||
|
<view>手机号码：18316553478</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import a_line from '../../../../../components/order_list/a_line/a_line.vue'; |
||||
|
export default { |
||||
|
components: { |
||||
|
'a-line': a_line, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
@import '~style/public.scss'; |
||||
|
.value-card-order-info{ |
||||
|
padding: 24upx; |
||||
|
padding-bottom: calc( 24upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */ |
||||
|
padding-bottom: calc( 24upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */ |
||||
|
>.i-box{ |
||||
|
position: relative; |
||||
|
margin: 0 auto 24upx; |
||||
|
padding: 30upx; |
||||
|
border-radius: 10upx; |
||||
|
background-color: #fff; |
||||
|
} |
||||
|
.vc-tit{ |
||||
|
margin-bottom: 20upx; |
||||
|
line-height: 40upx; |
||||
|
font-size: 28upx; |
||||
|
color: #9C9C9F; |
||||
|
} |
||||
|
.vc-header{ |
||||
|
.vh-name{ |
||||
|
padding-bottom: 26upx; |
||||
|
border-bottom: 2upx solid #D8D8D8; |
||||
|
>view{ |
||||
|
line-height: 40upx; |
||||
|
font-weight: 500; |
||||
|
font-size: 28upx; |
||||
|
color: #333; |
||||
|
@include textHide(1); |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
.vh-info{ |
||||
|
padding: 20upx 0 30upx; |
||||
|
.vi-line{ |
||||
|
line-height: 48upx; |
||||
|
font-size: 28upx; |
||||
|
color: #1a1a1a; |
||||
|
@include textHide(1); |
||||
|
} |
||||
|
} |
||||
|
.vh-btns{ |
||||
|
@include centerFlex(space-between); |
||||
|
>view{ |
||||
|
width: 176upx; |
||||
|
height: 80upx; |
||||
|
border: 2upx solid #9A9A9D; |
||||
|
border-radius: 10upx; |
||||
|
text-align: center; |
||||
|
line-height: 76upx; |
||||
|
font-size: 32upx; |
||||
|
color: #9a9a9d; |
||||
|
&.red{ |
||||
|
color: #EA5061; |
||||
|
border-color: #EA5061; |
||||
|
} |
||||
|
&.orange{ |
||||
|
color: #FF873D; |
||||
|
border-color: #FF873D; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.vh-tag{ |
||||
|
position: absolute; |
||||
|
right: 0; |
||||
|
top: 0; |
||||
|
width: 132upx; |
||||
|
height: 132upx; |
||||
|
background-color: skyblue; |
||||
|
} |
||||
|
} |
||||
|
.vc-info{ |
||||
|
margin-bottom: 24upx; |
||||
|
} |
||||
|
.vc-record{ |
||||
|
.vr-tit{ |
||||
|
line-height: 52upx; |
||||
|
font-weight: 500; |
||||
|
font-size: 28upx; |
||||
|
color: #1a1a1a; |
||||
|
} |
||||
|
.vr-border{ |
||||
|
margin: 30upx 0; |
||||
|
height: 2upx; |
||||
|
background-color: #D8D8D8; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
.vc-mask{ |
||||
|
position: fixed; |
||||
|
left: 0; |
||||
|
top: 0; |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
|
background-color: rgba($color: #000000, $alpha: .5); |
||||
|
|
||||
|
} |
||||
|
.vc-recharge{ |
||||
|
position: absolute; |
||||
|
left: 50%; |
||||
|
top: 50%; |
||||
|
transform: translate(-50%, -50%); |
||||
|
padding-top: 78upx; |
||||
|
padding-bottom: 72upx; |
||||
|
width: 620upx; |
||||
|
border-radius: 10upx; |
||||
|
background-color: #fff; |
||||
|
.vr-close{ |
||||
|
position: absolute; |
||||
|
right: 30upx; |
||||
|
top: 30upx; |
||||
|
width: 34upx; |
||||
|
height: 34upx; |
||||
|
background-color: skyblue; |
||||
|
} |
||||
|
.vr-tit{ |
||||
|
margin-bottom: 34upx; |
||||
|
text-align: center; |
||||
|
line-height: 44upx; |
||||
|
font-weight: 500; |
||||
|
font-size: 32upx; |
||||
|
color: #333; |
||||
|
} |
||||
|
.vr-info{ |
||||
|
margin-bottom: 26upx; |
||||
|
padding: 0 56upx; |
||||
|
>view{ |
||||
|
line-height: 48upx; |
||||
|
font-size: 28upx; |
||||
|
color: #1a1a1a; |
||||
|
@include textHide(1); |
||||
|
&:last-child{ |
||||
|
color: #ff873d; |
||||
|
>text{ |
||||
|
color: #1a1a1a; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.vr-edit{ |
||||
|
margin-bottom: 60upx; |
||||
|
.ve-line{ |
||||
|
margin-bottom: 10upx; |
||||
|
padding: 0 56upx; |
||||
|
@include centerFlex(space-between); |
||||
|
.vl-name{ |
||||
|
flex-shrink: 0; |
||||
|
font-size: 28upx; |
||||
|
color: #1a1a1a; |
||||
|
>text{ |
||||
|
color: #EA5061; |
||||
|
} |
||||
|
} |
||||
|
.vl-ipt{ |
||||
|
flex-shrink: 0; |
||||
|
@include centerFlex(flex-end); |
||||
|
.vi-box{ |
||||
|
@include centerFlex(center); |
||||
|
.vb-btn{ |
||||
|
position: relative; |
||||
|
width: 58upx; |
||||
|
height: 56upx; |
||||
|
background-color: #f2f2f7; |
||||
|
&:first-child{ |
||||
|
border-top-left-radius: 10upx; |
||||
|
border-bottom-left-radius: 10upx; |
||||
|
} |
||||
|
&::before{ |
||||
|
content: ''; |
||||
|
position: absolute; |
||||
|
left: 50%; |
||||
|
top: 50%; |
||||
|
transform: translate(-50%, -50%); |
||||
|
width: 24upx; |
||||
|
height: 4upx; |
||||
|
border-radius: 2upx; |
||||
|
background-color: #9a9a9d; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
.vb-ipt{ |
||||
|
margin: 0 4upx; |
||||
|
padding: 0 10upx; |
||||
|
width: 132upx; |
||||
|
height: 56upx; |
||||
|
background-color: #f2f2f7; |
||||
|
>input { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
text-align: center; |
||||
|
font-size: 28upx; |
||||
|
color: #1a1a1a; |
||||
|
} |
||||
|
&+.vb-btn{ |
||||
|
border-top-right-radius: 10upx; |
||||
|
border-bottom-right-radius: 10upx; |
||||
|
&::after{ |
||||
|
content: ''; |
||||
|
position: absolute; |
||||
|
left: 50%; |
||||
|
top: 50%; |
||||
|
transform: translate(-50%, -50%); |
||||
|
height: 24upx; |
||||
|
width: 4upx; |
||||
|
border-radius: 2upx; |
||||
|
background-color: #9a9a9d; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.vi-unit{ |
||||
|
margin-left: 20upx; |
||||
|
font-size: 28upx; |
||||
|
color: #1a1a1a; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.vr-btns{ |
||||
|
@include centerFlex(center); |
||||
|
>view{ |
||||
|
margin: 0 20upx; |
||||
|
width: 240upx; |
||||
|
height: 88upx; |
||||
|
line-height: 84upx; |
||||
|
text-align: center; |
||||
|
border-radius: 10upx; |
||||
|
border: 2upx solid $themeColor; |
||||
|
color: #fff; |
||||
|
background-color: $themeColor; |
||||
|
.white{ |
||||
|
background-color: #fff; |
||||
|
color: $themeColor; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.vc-deductions{ |
||||
|
|
||||
|
.vd-ipt{ |
||||
|
padding: 0 68upx; |
||||
|
.vi-box{ |
||||
|
height: 88upx; |
||||
|
border-radius: 10upx; |
||||
|
border: 2upx solid #D8D8D8; |
||||
|
padding: 0 20upx; |
||||
|
@include centerFlex(space-between); |
||||
|
>input{ |
||||
|
flex-grow: 1; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
font-size: 28upx; |
||||
|
color: #1a1a1a; |
||||
|
} |
||||
|
>image{ |
||||
|
flex-shrink: 0; |
||||
|
width: 32upx; |
||||
|
height: 32upx; |
||||
|
margin-left: 20upx; |
||||
|
background-color: skyblue; |
||||
|
} |
||||
|
} |
||||
|
.vi-remark{ |
||||
|
margin-top: 20upx; |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.tip-modal{ |
||||
|
position: absolute; |
||||
|
left: 50%; |
||||
|
top: 50%; |
||||
|
transform: translate(-50%, -50%); |
||||
|
padding-top: 120upx; |
||||
|
width: 620upx; |
||||
|
height: 630upx; |
||||
|
border-radius: 10upx; |
||||
|
background-color: #fff; |
||||
|
.tm-close{ |
||||
|
position: absolute; |
||||
|
right: 30upx; |
||||
|
top: 30upx; |
||||
|
width: 34upx; |
||||
|
height: 34upx; |
||||
|
background-color: skyblue; |
||||
|
} |
||||
|
.tm-icon{ |
||||
|
margin: 0 auto 30upx; |
||||
|
display: block; |
||||
|
width: 100upx; |
||||
|
height: 100upx; |
||||
|
background-color: skyblue; |
||||
|
} |
||||
|
.tm-tit{ |
||||
|
margin-bottom: 70upx; |
||||
|
text-align: center; |
||||
|
font-size: 32upx; |
||||
|
font-weight: 500; |
||||
|
color: #333; |
||||
|
} |
||||
|
.tm-info{ |
||||
|
padding: 0 30upx; |
||||
|
@include centerFlex(center); |
||||
|
>view{ |
||||
|
>view{ |
||||
|
font-size: 28upx; |
||||
|
line-height: 48upx; |
||||
|
color: #9a9a9d; |
||||
|
@include textHide(1); |
||||
|
>text{ |
||||
|
color: #1a1a1a; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
</style> |
||||
@ -1,170 +0,0 @@ |
|||||
<template> |
|
||||
<view class="value-card-order-info"> |
|
||||
<view class="i-box vc-header"> |
|
||||
<view class="vh-name"> |
|
||||
<view>欧轩智能场馆(羽毛球永泰店)</view> |
|
||||
</view> |
|
||||
<view class="vh-info"> |
|
||||
<view class="vi-line">储值卡卡号：124646</view> |
|
||||
<view class="vi-line">手机号码：18316466456</view> |
|
||||
<view class="vi-line">储值卡余额：1000</view> |
|
||||
</view> |
|
||||
<view class="vh-btns"> |
|
||||
<view>消费记录</view> |
|
||||
<view class="red">扣费</view> |
|
||||
<view class="orange">充值</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="i-box vc-info"> |
|
||||
<view class="vc-tit">储值卡信息</view> |
|
||||
<a-line :value="'yiming'"> |
|
||||
<block slot="name">微信昵称：</block> |
|
||||
</a-line> |
|
||||
<a-line :value="'白金储值卡'"> |
|
||||
<block slot="name">储值卡名称：</block> |
|
||||
</a-line> |
|
||||
<a-line :value="'个人卡（1/1 ）'"> |
|
||||
<block slot="name">卡类型：</block> |
|
||||
</a-line> |
|
||||
<a-line :value="'至2022.08.28'"> |
|
||||
<block slot="name">有效期：</block> |
|
||||
</a-line> |
|
||||
</view> |
|
||||
|
|
||||
<view class="i-box vc-record"> |
|
||||
<view class="vc-tit">购卡记录</view> |
|
||||
<view class="vr-tit">升级 2020-05-23 13:25</view> |
|
||||
<a-line :value="'黄金储值卡'"> |
|
||||
<block slot="name">名称：</block> |
|
||||
</a-line> |
|
||||
<a-line :value="'1000元'"> |
|
||||
<block slot="name">面值：</block> |
|
||||
</a-line> |
|
||||
<a-line :value="'￥1999'"> |
|
||||
<block slot="name">售价：</block> |
|
||||
</a-line> |
|
||||
<a-line :value="'￥1000'"> |
|
||||
<block slot="name">支付金额：</block> |
|
||||
</a-line> |
|
||||
<a-line :value="'￥10（30天内有效）'"> |
|
||||
<block slot="name">赠送金额：</block> |
|
||||
</a-line> |
|
||||
<a-line :value="'小程序'"> |
|
||||
<block slot="name">途径：</block> |
|
||||
</a-line> |
|
||||
|
|
||||
<view class="vr-border"></view> |
|
||||
|
|
||||
<view class="vr-tit">升级 2020-05-23 13:25</view> |
|
||||
<a-line :value="'黄金储值卡'"> |
|
||||
<block slot="name">名称：</block> |
|
||||
</a-line> |
|
||||
<a-line :value="'1000元'"> |
|
||||
<block slot="name">面值：</block> |
|
||||
</a-line> |
|
||||
<a-line :value="'￥1999'"> |
|
||||
<block slot="name">售价：</block> |
|
||||
</a-line> |
|
||||
<a-line :value="'￥1000'"> |
|
||||
<block slot="name">支付金额：</block> |
|
||||
</a-line> |
|
||||
<a-line :value="'￥10（30天内有效）'"> |
|
||||
<block slot="name">赠送金额：</block> |
|
||||
</a-line> |
|
||||
<a-line :value="'小程序'"> |
|
||||
<block slot="name">途径：</block> |
|
||||
</a-line> |
|
||||
</view> |
|
||||
</view> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import a_line from '../../../../components/order_list/a_line/a_line.vue'; |
|
||||
export default { |
|
||||
components: { |
|
||||
'a-line': a_line, |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss"> |
|
||||
@import '~style/public.scss'; |
|
||||
.value-card-order-info{ |
|
||||
padding: 24upx; |
|
||||
>.i-box{ |
|
||||
position: relative; |
|
||||
margin: 0 auto 24upx; |
|
||||
padding: 30upx; |
|
||||
border-radius: 10upx; |
|
||||
background-color: #fff; |
|
||||
} |
|
||||
.vc-tit{ |
|
||||
margin-bottom: 20upx; |
|
||||
line-height: 40upx; |
|
||||
font-size: 28upx; |
|
||||
color: #9C9C9F; |
|
||||
} |
|
||||
.vc-header{ |
|
||||
.vh-name{ |
|
||||
padding-bottom: 26upx; |
|
||||
border-bottom: 2upx solid #D8D8D8; |
|
||||
>view{ |
|
||||
line-height: 40upx; |
|
||||
font-weight: 500; |
|
||||
font-size: 28upx; |
|
||||
color: #333; |
|
||||
@include textHide(1); |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
.vh-info{ |
|
||||
padding: 20upx 0 30upx; |
|
||||
.vi-line{ |
|
||||
line-height: 48upx; |
|
||||
font-size: 28upx; |
|
||||
color: #1a1a1a; |
|
||||
@include textHide(1); |
|
||||
} |
|
||||
} |
|
||||
.vh-btns{ |
|
||||
@include centerFlex(center); |
|
||||
>view{ |
|
||||
margin: 0 30upx; |
|
||||
width: 176upx; |
|
||||
height: 80upx; |
|
||||
border: 2upx solid #9A9A9D; |
|
||||
border-radius: 10upx; |
|
||||
text-align: center; |
|
||||
line-height: 76upx; |
|
||||
font-size: 32upx; |
|
||||
color: #9a9a9d; |
|
||||
&.red{ |
|
||||
color: #EA5061; |
|
||||
border-color: #EA5061; |
|
||||
} |
|
||||
&.orange{ |
|
||||
color: #FF873D; |
|
||||
border-color: #FF873D; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
.vc-info{ |
|
||||
margin-bottom: 24upx; |
|
||||
} |
|
||||
.vc-record{ |
|
||||
.vr-tit{ |
|
||||
line-height: 52upx; |
|
||||
font-weight: 500; |
|
||||
font-size: 28upx; |
|
||||
color: #1a1a1a; |
|
||||
} |
|
||||
.vr-border{ |
|
||||
margin: 30upx 0; |
|
||||
height: 2upx; |
|
||||
background-color: #D8D8D8; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
</style> |
|
||||
@ -0,0 +1,176 @@ |
|||||
|
<template> |
||||
|
<view class="xpense-tracker"> |
||||
|
<view class="xt-header"> |
||||
|
<view>日期</view> |
||||
|
<picker> |
||||
|
<view class="xh-picker"> |
||||
|
<input /> |
||||
|
<view></view> |
||||
|
</view> |
||||
|
</picker> |
||||
|
<image></image> |
||||
|
</view> |
||||
|
<view class="xt-list"> |
||||
|
<view class="xl-item" v-for="i in 20" :key="i"> |
||||
|
<view class="xi-header"> |
||||
|
<view class="xh-addr"> |
||||
|
<image class="xa-logo"></image> |
||||
|
<view>广州欧轩智能羽毛球馆(永泰店)</view> |
||||
|
<image class="xa-icon"></image> |
||||
|
</view> |
||||
|
<view class="xh-time">12月7日 13:25 </view> |
||||
|
</view> |
||||
|
<view class="xi-info"> |
||||
|
<view class="xi-price"> |
||||
|
<view>消费-预订场地</view> |
||||
|
<view>-100</view> |
||||
|
</view> |
||||
|
<view class="xi-amount"> |
||||
|
<view> |
||||
|
<image></image> |
||||
|
<text>yiming</text> |
||||
|
</view> |
||||
|
<view>余额 10000.09</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
|
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
@import '~style/public.scss'; |
||||
|
.xpense-tracker{ |
||||
|
padding-bottom: 24upx; |
||||
|
padding-bottom: calc( 24upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */ |
||||
|
padding-bottom: calc( 24upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */ |
||||
|
} |
||||
|
.xt-header{ |
||||
|
padding: 0 24upx; |
||||
|
height: 138upx; |
||||
|
background-color: #fff; |
||||
|
@include centerFlex(space-between); |
||||
|
>view{ |
||||
|
flex-shrink: 0; |
||||
|
font-size: 28upx; |
||||
|
color: #333; |
||||
|
} |
||||
|
.xh-picker{ |
||||
|
height: 88upx; |
||||
|
width: 548upx; |
||||
|
padding: 0 20upx; |
||||
|
border-radius: 10upx; |
||||
|
border: 2upx solid #d8d8d8; |
||||
|
@include centerFlex(space-between); |
||||
|
>input{ |
||||
|
flex-grow: 1; |
||||
|
height: 100%; |
||||
|
font-size: 28upx; |
||||
|
color: #333; |
||||
|
} |
||||
|
>view{ |
||||
|
flex-shrink: 0; |
||||
|
width: 0; |
||||
|
height: 0; |
||||
|
border-left: 14upx solid transparent; |
||||
|
border-right: 14upx solid transparent; |
||||
|
border-top: 16upx solid #cccccc; |
||||
|
} |
||||
|
} |
||||
|
>image{ |
||||
|
width: 52upx; |
||||
|
height: 52upx; |
||||
|
background-color: skyblue; |
||||
|
} |
||||
|
} |
||||
|
.xt-list{ |
||||
|
padding: 24upx; |
||||
|
.xl-item{ |
||||
|
margin-bottom: 24upx; |
||||
|
padding: 0 26upx; |
||||
|
border-radius: 10upx; |
||||
|
background-color: #fff; |
||||
|
.xi-header{ |
||||
|
padding-top: 28upx; |
||||
|
padding-bottom: 16upx; |
||||
|
border-bottom: 2upx solid #D8D8D8; |
||||
|
.xh-addr{ |
||||
|
@include centerFlex(space-between); |
||||
|
.xa-logo{ |
||||
|
flex-shrink: 0; |
||||
|
margin-right: 24upx; |
||||
|
width: 60upx; |
||||
|
height: 60upx; |
||||
|
background-color: skyblue; |
||||
|
} |
||||
|
>view{ |
||||
|
flex-grow: 1; |
||||
|
font-size: 28upx; |
||||
|
line-height: 40upx; |
||||
|
color: #1a1a1a; |
||||
|
@include textHide(1); |
||||
|
} |
||||
|
.xa-icon{ |
||||
|
flex-shrink: 0; |
||||
|
width: 32upx; |
||||
|
height: 32upx; |
||||
|
background-color: skyblue; |
||||
|
} |
||||
|
} |
||||
|
.xh-time{ |
||||
|
padding-left: 78upx; |
||||
|
font-size: 28upx; |
||||
|
line-height: 48upx; |
||||
|
color: #9a9a9d; |
||||
|
} |
||||
|
} |
||||
|
.xi-info{ |
||||
|
padding-top: 30upx; |
||||
|
padding-bottom: 30upx; |
||||
|
.xi-price{ |
||||
|
margin-bottom: 20upx; |
||||
|
@include centerFlex(space-between); |
||||
|
>view{ |
||||
|
font-size: 28upx; |
||||
|
color: #1a1a1a; |
||||
|
max-width: 50%; |
||||
|
@include textHide(1); |
||||
|
&+view{ |
||||
|
font-size: 32upx; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.xi-amount{ |
||||
|
@include centerFlex(space-between); |
||||
|
>view{ |
||||
|
max-width: 50%; |
||||
|
font-size: 26upx; |
||||
|
color: #9a9a9d; |
||||
|
@include textHide(1); |
||||
|
&:first-child{ |
||||
|
>image{ |
||||
|
vertical-align: middle; |
||||
|
margin-right: 8upx; |
||||
|
width: 28upx; |
||||
|
height: 28upx; |
||||
|
background-color: skyblue; |
||||
|
} |
||||
|
} |
||||
|
&+view{ |
||||
|
font-size: 28upx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue