4 changed files with 461 additions and 3 deletions
-
18src/pages.json
-
86src/subpackage/order/pages/club_rental/detail/detail.vue
-
176src/subpackage/order/pages/curriculum/detail/detail.vue
-
180src/subpackage/order/pages/spectacular_monent/detail/detail.vue
@ -0,0 +1,86 @@ |
|||
<template> |
|||
<view class="club-rental"> |
|||
<view class="cr-header cr-box"> |
|||
<view class="ch-stadium"> |
|||
<image></image> |
|||
<view>欧轩智能场馆(羽毛球永泰店)</view> |
|||
</view> |
|||
<view class="ch-user"> |
|||
<view class="cu-line"> |
|||
<view><text>手机号码：</text>18316535486</view> |
|||
<view>退款完成</view> |
|||
</view> |
|||
<view class="cu-line"> |
|||
<view><text>用户昵称：</text></view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="cr-rent-info cr-box"> |
|||
|
|||
</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'; |
|||
.cr-box{ |
|||
padding: 30upx; |
|||
margin-bottom: 24upx; |
|||
background-color: #fff; |
|||
} |
|||
.club-rental{ |
|||
.cr-header{ |
|||
.ch-stadium{ |
|||
@include centerFlex(flex-start); |
|||
>image{ |
|||
flex-shrink: 0; |
|||
margin-right: 14upx; |
|||
width: 40upx; |
|||
height: 40upx; |
|||
background-color: skyblue; |
|||
} |
|||
>view{ |
|||
font-size: 28upx; |
|||
line-height: 40upx; |
|||
color: #1a1a1a; |
|||
@include textHide(1); |
|||
} |
|||
} |
|||
.ch-user{ |
|||
padding-top: 24upx; |
|||
margin-top: 26upx; |
|||
border-top: 2upx solid #D8D8D8; |
|||
.cu-line{ |
|||
@include centerFlex(space-between); |
|||
>view{ |
|||
font-size: 28upx; |
|||
line-height: 40upx; |
|||
&:first-child{ |
|||
flex-grow: 1; |
|||
color: #1a1a1a; |
|||
>text{ |
|||
color: #9C9C9F; |
|||
} |
|||
} |
|||
&+view{ |
|||
flex-shrink: 0; |
|||
color: #EA5061; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.cr-rent-info{ |
|||
|
|||
} |
|||
} |
|||
</style> |
|||
@ -1,18 +1,192 @@ |
|||
<template> |
|||
<view class="curriculum-info"> |
|||
<view class="ci-box ci-user"> |
|||
<view class="cu-stadium"> |
|||
<view>欧轩智能场馆(永泰店)</view> |
|||
<view>进行中</view> |
|||
</view> |
|||
<view class="cu-line">手机号码：18316553478</view> |
|||
<view class="cu-line">用户昵称：yiming</view> |
|||
<view class="cu-line">学员信息：梁小姐（女）</view> |
|||
</view> |
|||
|
|||
<view class="ci-box ci-info"> |
|||
<view class="ci-tit">课程信息</view> |
|||
<view class="ci-course-name">课程名称：羽毛球杀球训练（私教课）</view> |
|||
<a-line :value="'私教课 x1'"> |
|||
<block slot="name">课程类型：</block> |
|||
</a-line> |
|||
<a-line :value="'￥2000'"> |
|||
<block slot="name">课程价格：</block> |
|||
</a-line> |
|||
<a-line :value="'14'"> |
|||
<block slot="name">总课时：</block> |
|||
</a-line> |
|||
<a-line :value="'10'"> |
|||
<block slot="name">购买课时：</block> |
|||
</a-line> |
|||
<a-line :value="'4'"> |
|||
<block slot="name">赠送课时：</block> |
|||
</a-line> |
|||
<a-line :value="'至2022.06.02'"> |
|||
<block slot="name">课时时长：</block> |
|||
</a-line> |
|||
<a-line :value="'2小时/节'"> |
|||
<block slot="name">课程价格：</block> |
|||
</a-line> |
|||
<a-line :value="'一级教练'"> |
|||
<block slot="name">上课教练：</block> |
|||
</a-line> |
|||
<a-line :value="''"> |
|||
<block slot="name">课程内容：</block> |
|||
</a-line> |
|||
<a-line :value="'是（不含场地费用）'"> |
|||
<block slot="name">上课是否需要场地：</block> |
|||
</a-line> |
|||
</view> |
|||
|
|||
<view class="ci-box pay-info"> |
|||
<view class="pi-line"> |
|||
<view class="pl-key">金额小计</view><view class="pl-value">¥6</view> |
|||
</view> |
|||
<view class="pi-line"> |
|||
<view class="pl-key">积分抵扣</view><view class="pl-value">¥6</view> |
|||
</view> |
|||
<view class="pi-line"> |
|||
<view class="pl-key">折扣金额</view><view class="pl-value">-¥0</view> |
|||
</view> |
|||
<view class="pi-line"> |
|||
<view class="pl-key">优惠券优惠</view><view class="pl-value">-¥1</view> |
|||
</view> |
|||
<view class="pi-total"> |
|||
<text>合计支付：</text>￥5 |
|||
</view> |
|||
</view> |
|||
|
|||
|
|||
|
|||
<view class="ci-box payment-info"> |
|||
<view class="ci-tit">支付信息</view> |
|||
<a-line :value="'2020-08-22 08:12:25'"> |
|||
<block slot="name">下单时间：</block> |
|||
</a-line> |
|||
<a-line :value="'sc20 0822 0815 6894'"> |
|||
<block slot="name">订单编号：</block> |
|||
</a-line> |
|||
<a-line :value="'2020-08-22 08:12:25'"> |
|||
<block slot="name">支付时间：</block> |
|||
</a-line> |
|||
<a-line :value="'微信支付'"> |
|||
<block slot="name">支付方式：</block> |
|||
</a-line> |
|||
<a-line :value="'425864656562'"> |
|||
<block slot="name">交易流水：</block> |
|||
</a-line> |
|||
<a-line :value="'tk345647657568679'"> |
|||
<block slot="name">退款单号：</block> |
|||
</a-line> |
|||
<a-line :value="'2020-08-23 08:12:25'"> |
|||
<block slot="name">退款时间：</block> |
|||
</a-line> |
|||
<a-line :value="'¥60'"> |
|||
<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'; |
|||
.curriculum-info{ |
|||
padding: 24upx; |
|||
.ci-box{ |
|||
margin-bottom: 24upx; |
|||
padding: 30upx; |
|||
border-radius: 10upx; |
|||
background-color: #fff; |
|||
|
|||
} |
|||
.ci-user{ |
|||
.cu-stadium{ |
|||
margin-bottom: 24upx; |
|||
@include centerFlex(space-between); |
|||
>view{ |
|||
&:first-child{ |
|||
line-height: 44upx; |
|||
font-size: 32upx; |
|||
color: #333; |
|||
@include textHide(1); |
|||
} |
|||
&+view{ |
|||
flex-shrink: 0; |
|||
font-size: 28upx; |
|||
line-height: 40upx; |
|||
color: $themeColor; |
|||
} |
|||
} |
|||
} |
|||
.cu-line{ |
|||
line-height: 48upx; |
|||
font-size: 28upx; |
|||
color: #333; |
|||
@include textHide(1); |
|||
} |
|||
} |
|||
.ci-tit{ |
|||
margin-bottom: 20upx; |
|||
line-height: 40upx; |
|||
font-size: 28upx; |
|||
color: #9c9c9f; |
|||
} |
|||
.ci-info{ |
|||
.ci-course-name{ |
|||
line-height: 52upx; |
|||
font-weight: 500; |
|||
font-size: 28upx; |
|||
color: #1a1a1a; |
|||
@include textHide(1); |
|||
} |
|||
} |
|||
} |
|||
.pay-info{ |
|||
.pi-line{ |
|||
margin-bottom: 24upx; |
|||
@include centerFlex(space-between); |
|||
.pl-key{ |
|||
flex-shrink: 0; |
|||
line-height: 40upx; |
|||
font-size: 28upx; |
|||
color: #1a1a1a; |
|||
} |
|||
.pl-value{ |
|||
font-size: 24upx; |
|||
line-height: 34upx; |
|||
color: #1a1a1a; |
|||
@include textHide(1); |
|||
} |
|||
} |
|||
.pi-total{ |
|||
text-align: right; |
|||
font-size: 32upx; |
|||
font-weight: 500; |
|||
color: #1a1a1a; |
|||
@include textHide(1); |
|||
>text{ |
|||
font-size: 28upx; |
|||
font-weight: 400; |
|||
color: #9a9a9d; |
|||
} |
|||
} |
|||
} |
|||
|
|||
</style> |
|||
@ -0,0 +1,180 @@ |
|||
<template> |
|||
<view class="spectacular-monent-order"> |
|||
<view class="smo-header smo-box"> |
|||
<view class="sh-address"> |
|||
<image></image> |
|||
<view>欧轩智能场馆(羽毛球永泰店)</view> |
|||
</view> |
|||
<view class="sh-line"> |
|||
<view><text>手机号码：</text>18316535486</view> |
|||
<view>生效中</view> |
|||
</view> |
|||
<view class="sh-line"> |
|||
<view><text>用户昵称：</text>yiming</view> |
|||
</view> |
|||
</view> |
|||
<view class="smo-info smo-box"> |
|||
<view class="smo-tit">高光时刻信息</view> |
|||
<a-line :value="'下载'"> |
|||
<block slot="name">产品名称：</block> |
|||
</a-line> |
|||
<a-line :value="'1号半场'"> |
|||
<block slot="name">场地：</block> |
|||
</a-line> |
|||
<a-line :value="'2021/08/02 16:00至2021/08/02 18:00'"> |
|||
<block slot="name">时间：</block> |
|||
</a-line> |
|||
<a-line :value="'￥6.8 '"> |
|||
<block slot="name">价格：</block> |
|||
</a-line> |
|||
<view class="si-border"></view> |
|||
<view class="si-price-info"> |
|||
<view class="spi-line"> |
|||
<view>积分抵扣</view> |
|||
<view>-¥0.5</view> |
|||
</view> |
|||
<view class="spi-line"> |
|||
<view>折扣金额</view> |
|||
<view>-¥0</view> |
|||
</view> |
|||
<view class="spi-line"> |
|||
<view>优惠券优惠</view> |
|||
<view>-¥0</view> |
|||
</view> |
|||
<view class="spi-total"> |
|||
<text>合计支付：</text>￥3.3 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="smo-box"> |
|||
<view class="smo-tit">支付详情</view> |
|||
<a-line :value="'sc20 0822 0815 6894'"> |
|||
<block slot="name">订单编号：</block> |
|||
</a-line> |
|||
<a-line :value="'微信支付'"> |
|||
<block slot="name">支付方式：</block> |
|||
</a-line> |
|||
<a-line :value="'2020-08-22 10:12:25'"> |
|||
<block slot="name">支付时间：</block> |
|||
</a-line> |
|||
<a-line :value="'202009181255364564612622'"> |
|||
<block slot="name">交易流水号：</block> |
|||
</a-line> |
|||
<a-line :value="'k20201112456556'"> |
|||
<block slot="name">退款单号：</block> |
|||
</a-line> |
|||
<a-line :value="'2020-08-23 10:12:25'"> |
|||
<block slot="name">退款时间：</block> |
|||
</a-line> |
|||
<a-line :value="'¥60'"> |
|||
<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'; |
|||
.smo-box{ |
|||
padding: 30upx; |
|||
margin-bottom: 24upx; |
|||
background-color: #fff; |
|||
} |
|||
.spectacular-monent-order{ |
|||
.smo-header{ |
|||
.sh-address{ |
|||
margin-bottom: 23upx; |
|||
padding: 30upx 0; |
|||
border-bottom: 2upx solid #D8D8D8; |
|||
@include centerFlex(flex-start); |
|||
>image{ |
|||
flex-shrink: 0; |
|||
margin-right: 14upx; |
|||
width: 40upx; |
|||
height: 40upx; |
|||
background-color: skyblue; |
|||
} |
|||
>view{ |
|||
line-height: 40upx; |
|||
color: #1a1a1a; |
|||
font-size: 28upx; |
|||
@include textHide(1); |
|||
} |
|||
} |
|||
.sh-line{ |
|||
@include centerFlex(space-between); |
|||
>view{ |
|||
line-height: 48upx; |
|||
font-size: 28upx; |
|||
&:first-child{ |
|||
flex-grow: 1; |
|||
color: #1a1a1a; |
|||
@include textHide(1); |
|||
>text{ |
|||
color: #9C9C9F; |
|||
} |
|||
} |
|||
&+view{ |
|||
flex-shrink: 0; |
|||
color: $themeColor; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.smo-tit{ |
|||
margin-bottom: 28upx; |
|||
line-height: 44upx; |
|||
font-weight: 500; |
|||
font-size: 32upx; |
|||
color: #1a1a1a; |
|||
} |
|||
.smo-info{ |
|||
|
|||
.si-border{ |
|||
margin: 20upx 0 30upx; |
|||
height: 2upx; |
|||
background-color: #D8D8D8; |
|||
} |
|||
.si-price-info{ |
|||
.spi-line{ |
|||
margin-bottom: 30upx; |
|||
@include centerFlex(space-between); |
|||
>view{ |
|||
color: #1a1a1a; |
|||
&:first-child{ |
|||
flex-shrink: 0; |
|||
font-size: 28upx; |
|||
} |
|||
&+view{ |
|||
font-size: 24upx; |
|||
@include textHide(1); |
|||
} |
|||
} |
|||
} |
|||
.spi-total{ |
|||
text-align: right; |
|||
font-size: 32upx; |
|||
font-weight: 500; |
|||
color: #1a1a1a; |
|||
@include textHide(1); |
|||
>text{ |
|||
font-size: 28upx; |
|||
font-weight: 400; |
|||
color: #9a9a9d; |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue