13 changed files with 737 additions and 351 deletions
-
40package.json
-
5src/manifest.json
-
11src/pages.json
-
292src/pages/order/detail.vue
-
43src/styles/iconfonts.scss
-
99src/subpackage/order/components/detail/contact.vue
-
97src/subpackage/order/components/detail/goods.vue
-
0src/subpackage/order/components/detail/text_line.vue
-
118src/subpackage/order/components/detail/venue.vue
-
97src/subpackage/order/components/detail/verify.vue
-
212src/subpackage/order/pages/detail.vue
-
4vite.config.js
@ -1,292 +0,0 @@ |
|||||
<script setup> |
|
||||
import { onLoad } from '@dcloudio/uni-app'; |
|
||||
import { reactive, ref } from "vue"; |
|
||||
import textLine from "./modules/text_line.vue"; |
|
||||
const isShowSpecificTime = ref(false); |
|
||||
onLoad(() => { |
|
||||
|
|
||||
}); |
|
||||
|
|
||||
</script> |
|
||||
|
|
||||
<template> |
|
||||
<view class="order-detail"> |
|
||||
<view class="od-box od-header"> |
|
||||
<view class="oh-stadium"> |
|
||||
<image class="os-logo"></image> |
|
||||
<view class="os-name">MJ体育(天空篮球从云店)</view> |
|
||||
<view class="os-status">已核销</view> |
|
||||
</view> |
|
||||
<view class="oh-line">订单编号：123456789012</view> |
|
||||
<view class="oh-line">创建时间：2019-06-06 12:00:06</view> |
|
||||
</view> |
|
||||
<!-- 场次信息 --> |
|
||||
<view class="od-box od-venue-info"> |
|
||||
<view class="od-title">场次信息</view> |
|
||||
<text-line label="预定项目：">羽毛球</text-line> |
|
||||
<text-line label="预定日期：">2019年05月17日(周五)</text-line> |
|
||||
<view class="soi-booking-info"> |
|
||||
<view class="sbi-name">预定场次：</view> |
|
||||
<view class="sbi-time-range"> |
|
||||
<block v-for="(e, i) in 3" :key=i> |
|
||||
<view class="str-item">{{ e.name || '几号馆' }} {{ e.time || '时间段' }}</view> |
|
||||
</block> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="vmm-line" v-if='isShowSpecificTime'> |
|
||||
<view>具体场次：</view> |
|
||||
<view> |
|
||||
<view v-for="(e,i) in 3" :key="i">{{ 'venue_name' }} {{ 'duration' }} ({{ 0 }}元)</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="soi-fold-btn" @click="isShowSpecificTime = !isShowSpecificTime"> |
|
||||
<view class="sfb-txt">{{ isShowSpecificTime ? '收起' : '查看具体场次' }}</view> |
|
||||
<text class="sfb-icon" :class="[ isShowSpecificTime ? 'rotate' :'' ]"></text> |
|
||||
</view> |
|
||||
<view class="vvm-total"> |
|
||||
<view>小计（共{{0}}场）</view> |
|
||||
<view>￥{{ 0}}</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
<!-- 二维码 --> |
|
||||
<view class="od-box od-code"> |
|
||||
<image class="oc-code-img"></image> |
|
||||
<view class="oc-tip">点击二维码可放大查看</view> |
|
||||
</view> |
|
||||
<!-- 支付信息 --> |
|
||||
<view class="od-box od-payment"> |
|
||||
<view class="od-title">支付信息</view> |
|
||||
<text-line label="支付方式：">抖音支付</text-line> |
|
||||
<text-line label="支付时间：">2019年6月18日 10:30:40</text-line> |
|
||||
<text-line label="交易号：">3532463457445848657</text-line> |
|
||||
</view> |
|
||||
<!-- 抖音商品信息 --> |
|
||||
<view class="od-box od-goods"> |
|
||||
<view class="og-title">抖音商品信息</view> |
|
||||
<view class="og-info"> |
|
||||
<image class="oi-pic"></image> |
|
||||
<view class="oi-desc"> |
|
||||
<view class="od-name">羽毛球订场200元代金券【欧轩运营】</view> |
|
||||
<view class="od-price">¥ 9.9</view> |
|
||||
</view> |
|
||||
<text class="oi-icon"></text> |
|
||||
</view> |
|
||||
<view class="og-bottom"> |
|
||||
<view class="ob-lines"> |
|
||||
<view class="ol-item"> |
|
||||
<text-line label="订单编号：">3107858392102658852</text-line> |
|
||||
</view> |
|
||||
<view class="ol-item"> |
|
||||
<text-line label="核销券码：">3107858392102658852</text-line> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="ob-status">已核销</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
|
|
||||
</view> |
|
||||
</template> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.order-detail{ |
|
||||
padding: 24upx; |
|
||||
.od-box{ |
|
||||
background-color: #fff; |
|
||||
border-radius: 20upx; |
|
||||
&+ .od-box{ |
|
||||
margin-top: 24upx; |
|
||||
} |
|
||||
} |
|
||||
.od-title{ |
|
||||
@include flcw(28upx, 40upx, #9A9A9D); |
|
||||
} |
|
||||
.od-header{ |
|
||||
padding: 28upx 28upx 32upx; |
|
||||
.oh-stadium{ |
|
||||
margin-bottom: 14upx; |
|
||||
@include ctf; |
|
||||
.os-logo{ |
|
||||
flex-shrink: 0; |
|
||||
margin-right: 10upx; |
|
||||
width: 34upx; |
|
||||
height: 34upx; |
|
||||
background: skyblue; |
|
||||
} |
|
||||
.os-name{ |
|
||||
flex-grow: 1; |
|
||||
@include flcw(28upx, 40upx, #333, 500); |
|
||||
@include tHide; |
|
||||
} |
|
||||
.os-status{ |
|
||||
flex-shrink: 0; |
|
||||
margin-left: 10upx; |
|
||||
max-width: 160upx; |
|
||||
@include tHide; |
|
||||
@include flcw(28upx, 40upx, $mColor); |
|
||||
} |
|
||||
} |
|
||||
.oh-line{ |
|
||||
@include flcw(24upx, 34upx, #9A9A9D); |
|
||||
@include tHide; |
|
||||
} |
|
||||
} |
|
||||
.od-code{ |
|
||||
padding-top: 26upx; |
|
||||
font-size: 0; |
|
||||
.oc-code-img{ |
|
||||
display: block; |
|
||||
margin: 0 auto; |
|
||||
width: 278upx; |
|
||||
height: 278upx; |
|
||||
background: skyblue; |
|
||||
} |
|
||||
.oc-tip{ |
|
||||
text-align: center; |
|
||||
@include flcw(24upx, 56upx, #666666); |
|
||||
} |
|
||||
} |
|
||||
.od-goods{ |
|
||||
padding: 28upx 16upx 30upx 28upx; |
|
||||
.og-title{ |
|
||||
@include flcw(28upx, 40upx, #333, 500); |
|
||||
} |
|
||||
.og-info{ |
|
||||
margin-top: 24upx; |
|
||||
@include ctf; |
|
||||
.oi-pic{ |
|
||||
flex-shrink: 0; |
|
||||
margin-right: 24upx; |
|
||||
width: 136upx; |
|
||||
height: 136upx; |
|
||||
background: skyblue; |
|
||||
} |
|
||||
.oi-desc{ |
|
||||
flex-grow: 1; |
|
||||
align-self: stretch; |
|
||||
display: flex; |
|
||||
flex-wrap: wrap; |
|
||||
flex-direction: column; |
|
||||
justify-content: space-between; |
|
||||
.od-name{ |
|
||||
@include flcw(26upx, 36upx, #333, 500); |
|
||||
@include tHide(2); |
|
||||
} |
|
||||
.od-price{ |
|
||||
@include flcw(26upx, 36upx, #333, 500); |
|
||||
@include tHide; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
@include rightArrow; |
|
||||
.oi-icon{ |
|
||||
margin-left: 20upx; |
|
||||
flex-shrink: 0; |
|
||||
font-size: 40upx; |
|
||||
font-family: rightArrow; |
|
||||
color: #333; |
|
||||
} |
|
||||
} |
|
||||
.og-bottom{ |
|
||||
margin-top: 36upx; |
|
||||
@include ctf(space-between); |
|
||||
.ob-lines{ |
|
||||
flex-grow: 1; |
|
||||
.ol-item + .ol-item{ |
|
||||
margin-top: 24upx; |
|
||||
} |
|
||||
} |
|
||||
.ob-status{ |
|
||||
flex-shrink: 0; |
|
||||
margin-left: 10upx; |
|
||||
max-width: 160upx; |
|
||||
@include flcw(28upx, 40upx, $mColor); |
|
||||
@include tHide; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
.od-payment{ |
|
||||
padding: 30upx; |
|
||||
.od-title{ |
|
||||
margin-bottom: 20upx; |
|
||||
} |
|
||||
} |
|
||||
.od-venue-info{ |
|
||||
padding: 30upx; |
|
||||
.od-title{ |
|
||||
margin-bottom: 20upx; |
|
||||
} |
|
||||
.soi-booking-info{ |
|
||||
display: flex; |
|
||||
.sbi-name{ |
|
||||
flex-shrink: 0; |
|
||||
flex-grow: 0; |
|
||||
@include flcw(28upx, 52upx, #9A9A9D); |
|
||||
} |
|
||||
.sbi-time-range{ |
|
||||
flex-grow: 1; |
|
||||
display: flex; |
|
||||
flex-wrap: wrap; |
|
||||
.str-item{ |
|
||||
flex-shrink: 0; |
|
||||
margin-right: 12upx; |
|
||||
max-width: 500upx; |
|
||||
@include flcw(28upx, 52upx, #333); |
|
||||
@include tHide; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
.vmm-line{ |
|
||||
display: flex; |
|
||||
>view{ |
|
||||
font-size: 28upx; |
|
||||
line-height: 52upx; |
|
||||
&:first-child{ |
|
||||
flex-shrink: 0; |
|
||||
color: #9a9a9d; |
|
||||
} |
|
||||
&+view{ |
|
||||
flex-grow: 1; |
|
||||
>view{ |
|
||||
width: 100%; |
|
||||
@include flcw(28upx, 52upx, #333); |
|
||||
@include tHide; |
|
||||
|
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
.soi-fold-btn{ |
|
||||
padding-bottom: 20upx; |
|
||||
margin: 20upx auto 0; |
|
||||
@include ctf(center); |
|
||||
.sfb-txt{ |
|
||||
margin-right: 12upx; |
|
||||
flex-grow: 0; |
|
||||
flex-shrink: 0; |
|
||||
@include flcw(24upx, 34upx, #9a9a9d); |
|
||||
} |
|
||||
@include rightArrow; |
|
||||
.sfb-icon{ |
|
||||
flex-shrink: 0; |
|
||||
font-family: rightArrow; |
|
||||
font-size: 20upx; |
|
||||
color: #9A9A9D; |
|
||||
&.rotate{ |
|
||||
transform: rotateZ(-90deg); |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
.vvm-total{ |
|
||||
margin-top: 16upx; |
|
||||
padding-top: 28upx; |
|
||||
border-top: 1px solid #D8D8D8; |
|
||||
@include ctf(space-between); |
|
||||
>view{ |
|
||||
max-width: 50%; |
|
||||
@include tHide; |
|
||||
@include flcw(28upx, 40upx, #333); |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -0,0 +1,99 @@ |
|||||
|
<script setup> |
||||
|
import { onLoad } from '@dcloudio/uni-app'; |
||||
|
import { reactive, ref } from "vue"; |
||||
|
onLoad(() => { |
||||
|
|
||||
|
}); |
||||
|
|
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<view class="detail-contact"> |
||||
|
<view class="dc-left"> |
||||
|
<view class="dl-line"> |
||||
|
<view class="dl-icon"></view> |
||||
|
<view class="dl-txt">周一、周日09:05-12:00，14:30-24；周二、周四、周五...</view> |
||||
|
</view> |
||||
|
<view class="dl-line"> |
||||
|
<view class="dl-icon"></view> |
||||
|
<view class="dl-txt">白云区从云路822号城市像素6楼（电梯5楼走到6楼）></view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="dc-line"></view> |
||||
|
<view class="dc-right"> |
||||
|
<view class="dr-icons"> |
||||
|
<view class="di-item"></view> |
||||
|
<view class="di-item"></view> |
||||
|
</view> |
||||
|
<view class="dr-txt">距离23m</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.detail-contact{ |
||||
|
padding: 30upx; |
||||
|
@include ctf(space-between); |
||||
|
.dc-left{ |
||||
|
flex-grow: 1; |
||||
|
.dl-line{ |
||||
|
display: flex; |
||||
|
&+ .dl-line{ |
||||
|
margin-top: 16upx; |
||||
|
} |
||||
|
@include locationIcon; |
||||
|
@include clockIcon; |
||||
|
.dl-icon{ |
||||
|
margin-right: 12upx; |
||||
|
flex-shrink: 0; |
||||
|
flex-grow: 0; |
||||
|
width: 34upx; |
||||
|
height: 34upx; |
||||
|
font-family: locationIcon, clockIcon; |
||||
|
font-size: 28upx; |
||||
|
color: #9A9A9D; |
||||
|
} |
||||
|
.dl-txt{ |
||||
|
@include flcw(24upx, 34upx, #9A9A9D); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.dc-line{ |
||||
|
align-self: stretch; |
||||
|
margin-left: 30upx; |
||||
|
margin-right: 12upx; |
||||
|
flex-shrink: 0; |
||||
|
flex-grow: 0; |
||||
|
width: 1px; |
||||
|
background: #EAEAEA; |
||||
|
} |
||||
|
.dc-right{ |
||||
|
flex-shrink: 0; |
||||
|
flex-grow: 0; |
||||
|
width: 136upx; |
||||
|
.dr-icons{ |
||||
|
@include ctf(center); |
||||
|
@include phoneIcon; |
||||
|
@include navigationIcon; |
||||
|
.di-item{ |
||||
|
margin: 0 12upx; |
||||
|
width: 36upx; |
||||
|
height: 36upx; |
||||
|
text-align: center; |
||||
|
line-height: 36upx; |
||||
|
border-radius: 50%; |
||||
|
font-family: phoneIcon, navigationIcon; |
||||
|
font-size: 24upx; |
||||
|
background-color: rgba($color: $mColor, $alpha: .05); |
||||
|
color: $mColor; |
||||
|
} |
||||
|
} |
||||
|
.dr-txt{ |
||||
|
margin-top: 18upx; |
||||
|
text-align: center; |
||||
|
@include flcw(24upx, 34upx, #9A9A9D); |
||||
|
@include tHide; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,97 @@ |
|||||
|
<script setup> |
||||
|
import { onLoad } from '@dcloudio/uni-app'; |
||||
|
import { reactive, ref } from "vue"; |
||||
|
import textLine from "./text_line.vue"; |
||||
|
onLoad(() => { |
||||
|
|
||||
|
}); |
||||
|
|
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<!-- 抖音商品信息 --> |
||||
|
<view class="od-goods"> |
||||
|
<view class="og-title">抖音商品信息</view> |
||||
|
<view class="og-info"> |
||||
|
<image class="oi-pic"></image> |
||||
|
<view class="oi-desc"> |
||||
|
<view class="od-name">羽毛球订场200元代金券【欧轩运营】</view> |
||||
|
<view class="od-price">¥ 9.9</view> |
||||
|
</view> |
||||
|
<text class="oi-icon"></text> |
||||
|
</view> |
||||
|
<view class="og-bottom"> |
||||
|
<view class="ob-lines"> |
||||
|
<view class="ol-item"> |
||||
|
<text-line label="订单编号：">3107858392102658852</text-line> |
||||
|
</view> |
||||
|
<view class="ol-item"> |
||||
|
<text-line label="核销券码：">3107858392102658852</text-line> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="ob-status">已核销</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.od-goods{ |
||||
|
padding: 28upx 16upx 30upx 28upx; |
||||
|
.og-title{ |
||||
|
@include flcw(28upx, 40upx, #333, 500); |
||||
|
} |
||||
|
.og-info{ |
||||
|
margin-top: 24upx; |
||||
|
@include ctf; |
||||
|
.oi-pic{ |
||||
|
flex-shrink: 0; |
||||
|
margin-right: 24upx; |
||||
|
width: 136upx; |
||||
|
height: 136upx; |
||||
|
background: skyblue; |
||||
|
} |
||||
|
.oi-desc{ |
||||
|
flex-grow: 1; |
||||
|
align-self: stretch; |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
flex-direction: column; |
||||
|
justify-content: space-between; |
||||
|
.od-name{ |
||||
|
@include flcw(26upx, 36upx, #333, 500); |
||||
|
@include tHide(2); |
||||
|
} |
||||
|
.od-price{ |
||||
|
@include flcw(26upx, 36upx, #333, 500); |
||||
|
@include tHide; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@include rightArrow; |
||||
|
.oi-icon{ |
||||
|
margin-left: 20upx; |
||||
|
flex-shrink: 0; |
||||
|
font-size: 40upx; |
||||
|
font-family: rightArrow; |
||||
|
color: #333; |
||||
|
} |
||||
|
} |
||||
|
.og-bottom{ |
||||
|
margin-top: 36upx; |
||||
|
@include ctf(space-between); |
||||
|
.ob-lines{ |
||||
|
flex-grow: 1; |
||||
|
.ol-item + .ol-item{ |
||||
|
margin-top: 24upx; |
||||
|
} |
||||
|
} |
||||
|
.ob-status{ |
||||
|
flex-shrink: 0; |
||||
|
margin-left: 10upx; |
||||
|
max-width: 160upx; |
||||
|
@include flcw(28upx, 40upx, $mColor); |
||||
|
@include tHide; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,118 @@ |
|||||
|
<script setup> |
||||
|
import { reactive, ref } from "vue"; |
||||
|
import textLine from "./text_line.vue"; |
||||
|
const isShowSpecificTime = ref(false); |
||||
|
|
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<view class="detail-venue-info"> |
||||
|
<view class="od-title">场次信息</view> |
||||
|
<text-line label="预定项目：">羽毛球</text-line> |
||||
|
<text-line label="预定日期：">2019年05月17日(周五)</text-line> |
||||
|
<view class="soi-booking-info"> |
||||
|
<view class="sbi-name">预定场次：</view> |
||||
|
<view class="sbi-time-range"> |
||||
|
<block v-for="(e, i) in 3" :key=i> |
||||
|
<view class="str-item">{{ e.name || '几号馆' }} {{ e.time || '时间段' }}</view> |
||||
|
</block> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="vmm-line" v-if='isShowSpecificTime'> |
||||
|
<view>具体场次：</view> |
||||
|
<view> |
||||
|
<view v-for="(e,i) in 3" :key="i">{{ 'venue_name' }} {{ 'duration' }} ({{ 0 }}元)</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="soi-fold-btn" @click="isShowSpecificTime = !isShowSpecificTime"> |
||||
|
<view class="sfb-txt">{{ isShowSpecificTime ? '收起' : '查看具体场次' }}</view> |
||||
|
<text class="sfb-icon" :class="[ isShowSpecificTime ? 'rotate' :'' ]"></text> |
||||
|
</view> |
||||
|
<view class="vvm-total"> |
||||
|
<view>小计（共{{0}}场）</view> |
||||
|
<view>￥{{ 0}}</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.detail-venue-info{ |
||||
|
padding: 30upx; |
||||
|
.od-title{ |
||||
|
margin-bottom: 20upx; |
||||
|
@include flcw(28upx, 40upx, #9A9A9D); |
||||
|
} |
||||
|
.soi-booking-info{ |
||||
|
display: flex; |
||||
|
.sbi-name{ |
||||
|
flex-shrink: 0; |
||||
|
flex-grow: 0; |
||||
|
@include flcw(28upx, 52upx, #9A9A9D); |
||||
|
} |
||||
|
.sbi-time-range{ |
||||
|
flex-grow: 1; |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
.str-item{ |
||||
|
flex-shrink: 0; |
||||
|
margin-right: 12upx; |
||||
|
max-width: 500upx; |
||||
|
@include flcw(28upx, 52upx, #333); |
||||
|
@include tHide; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.vmm-line{ |
||||
|
display: flex; |
||||
|
>view{ |
||||
|
font-size: 28upx; |
||||
|
line-height: 52upx; |
||||
|
&:first-child{ |
||||
|
flex-shrink: 0; |
||||
|
color: #9a9a9d; |
||||
|
} |
||||
|
&+view{ |
||||
|
flex-grow: 1; |
||||
|
>view{ |
||||
|
width: 100%; |
||||
|
@include flcw(28upx, 52upx, #333); |
||||
|
@include tHide; |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.soi-fold-btn{ |
||||
|
padding-bottom: 20upx; |
||||
|
margin: 20upx auto 0; |
||||
|
@include ctf(center); |
||||
|
.sfb-txt{ |
||||
|
margin-right: 12upx; |
||||
|
flex-grow: 0; |
||||
|
flex-shrink: 0; |
||||
|
@include flcw(24upx, 34upx, #9a9a9d); |
||||
|
} |
||||
|
@include rightArrow; |
||||
|
.sfb-icon{ |
||||
|
flex-shrink: 0; |
||||
|
font-family: rightArrow; |
||||
|
font-size: 20upx; |
||||
|
color: #9A9A9D; |
||||
|
&.rotate{ |
||||
|
transform: rotateZ(-90deg); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.vvm-total{ |
||||
|
margin-top: 16upx; |
||||
|
padding-top: 28upx; |
||||
|
border-top: 1px solid #D8D8D8; |
||||
|
@include ctf(space-between); |
||||
|
>view{ |
||||
|
max-width: 50%; |
||||
|
@include tHide; |
||||
|
@include flcw(28upx, 40upx, #333); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,97 @@ |
|||||
|
<script setup> |
||||
|
import { onLoad } from '@dcloudio/uni-app'; |
||||
|
import { reactive, ref } from "vue"; |
||||
|
import textLine from "./text_line.vue"; |
||||
|
onLoad(() => { |
||||
|
|
||||
|
}); |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<view class="detail-verify"> |
||||
|
<view class="dv-tit">验证信息</view> |
||||
|
<text-line label="使用日期">2020-12-25（周五）</text-line> |
||||
|
<view class="dv-codes"> |
||||
|
<view class="dc-item" :class="{ gray: i === 1 }" v-for="i in 2" :key="i"> |
||||
|
<view class="di-status">待使用</view> |
||||
|
<view class="di-bottom"> |
||||
|
<view class="db-code">验证码 12234 45455 </view> |
||||
|
<view class="db-txt-btn">查看个人入场码 </view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="vci-share-bar"> |
||||
|
<text class="vsb-add-icon"></text> |
||||
|
<text class="vv-text">分享给好友领取入场码</text> |
||||
|
<text class="vsb-arrow"></text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
@include rightArrow; |
||||
|
.detail-verify{ |
||||
|
padding: 30upx; |
||||
|
.dv-tit{ |
||||
|
@include flcw(28upx, 40upx, #9A9A9D); |
||||
|
} |
||||
|
.dv-codes{ |
||||
|
margin-top: 18upx; |
||||
|
.dc-item{ |
||||
|
padding: 20upx; |
||||
|
background-color: rgba($color: $mColor, $alpha: .1); |
||||
|
&.gray{ |
||||
|
background-color: rgba($color: #9A9A9D, $alpha: .1); |
||||
|
} |
||||
|
&+.dc-item{ |
||||
|
margin-top: 12upx; |
||||
|
} |
||||
|
.di-status{ |
||||
|
@include flcw(28upx, 40upx, $mColor, 500); |
||||
|
} |
||||
|
.di-bottom{ |
||||
|
margin-top: 22upx; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: baseline; |
||||
|
.db-code{ |
||||
|
@include flcw(30upx, 42upx, #1A1A1A); |
||||
|
@include tHide; |
||||
|
} |
||||
|
.db-txt-btn{ |
||||
|
flex-shrink: 0; |
||||
|
font-family: rightArrow; |
||||
|
@include flcw(24upx, 34upx, #9A9A9D); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.vci-share-bar{ |
||||
|
margin-top: 16upx; |
||||
|
padding: 40upx 10upx 20upx; |
||||
|
border-top: 1px solid #D8D8D8; |
||||
|
@include ctf; |
||||
|
@include addFriend; |
||||
|
.vsb-add-icon{ |
||||
|
flex-grow: 0; |
||||
|
flex-shrink: 0; |
||||
|
margin-right: 20upx; |
||||
|
font-size: 40upx; |
||||
|
font-family: addFriend; |
||||
|
color: $mColor; |
||||
|
} |
||||
|
.vv-text{ |
||||
|
flex-grow: 1; |
||||
|
@include flcw(28upx, 40upx, #333); |
||||
|
} |
||||
|
.vsb-arrow{ |
||||
|
flex-grow: 0; |
||||
|
flex-shrink: 0; |
||||
|
margin-left: 20upx; |
||||
|
font-size: 28upx; |
||||
|
font-family: rightArrow; |
||||
|
color: #9a9a9d; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,212 @@ |
|||||
|
<script setup> |
||||
|
import { onLoad } from '@dcloudio/uni-app'; |
||||
|
import { reactive, ref } from "vue"; |
||||
|
import textLine from "../components/detail/text_line.vue"; |
||||
|
import detailVenueInfo from "../components/detail/venue.vue"; |
||||
|
import detailGoods from "../components/detail/goods.vue"; |
||||
|
import detailVerify from "../components/detail/verify.vue"; |
||||
|
import detailContact from "../components/detail/contact.vue"; |
||||
|
onLoad(() => { |
||||
|
|
||||
|
}); |
||||
|
|
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<view class="order-detail"> |
||||
|
<view class="od-box od-header"> |
||||
|
<view class="oh-stadium"> |
||||
|
<image class="os-logo"></image> |
||||
|
<view class="os-name">MJ体育(天空篮球从云店)</view> |
||||
|
<view class="os-status">已核销</view> |
||||
|
</view> |
||||
|
<view class="oh-line">订单编号：123456789012</view> |
||||
|
<view class="oh-line">创建时间：2019-06-06 12:00:06</view> |
||||
|
</view> |
||||
|
<view class="od-box od-product"> |
||||
|
<view class="od-title">产品信息</view> |
||||
|
<text-line label="预定项目：">羽毛球</text-line> |
||||
|
<text-line label="数量：">1</text-line> |
||||
|
<text-line label="类型：">llasd</text-line> |
||||
|
<view class="op-bottom"> |
||||
|
<view class="op-val">小计</view> |
||||
|
<view class="op-val">¥300</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="od-box od-total"> |
||||
|
<view class="ot-line"> |
||||
|
<view class="ol-val">金额小计</view> |
||||
|
<view class="ol-val">￥300</view> |
||||
|
</view> |
||||
|
<view class="ot-line"> |
||||
|
<view class="ol-val">团购券抵扣</view> |
||||
|
<view class="ol-val">￥300</view> |
||||
|
</view> |
||||
|
<view class="ot-amount"><text class="oa-txt">合计支付：</text>￥0.00</view> |
||||
|
</view> |
||||
|
<view class="od-box"> |
||||
|
<!-- 联系方式/地址 --> |
||||
|
<detail-contact></detail-contact> |
||||
|
</view> |
||||
|
<view class="od-box"> |
||||
|
<!-- 验证信息 --> |
||||
|
<detail-verify></detail-verify> |
||||
|
</view> |
||||
|
<view class="od-box"> |
||||
|
<!-- 场次信息 --> |
||||
|
<detail-venue-info></detail-venue-info> |
||||
|
</view> |
||||
|
<view class="od-box od-code"> |
||||
|
<!-- 二维码 --> |
||||
|
<image class="oc-code-img"></image> |
||||
|
<view class="oc-tip">点击二维码可放大查看</view> |
||||
|
</view> |
||||
|
<view class="od-box od-payment"> |
||||
|
<!-- 支付信息 --> |
||||
|
<view class="od-title">支付信息</view> |
||||
|
<text-line label="支付方式：">抖音支付</text-line> |
||||
|
<text-line label="支付时间：">2019年6月18日 10:30:40</text-line> |
||||
|
<text-line label="交易号：">3532463457445848657</text-line> |
||||
|
</view> |
||||
|
<view class="od-box"> |
||||
|
<!-- 抖音商品信息 --> |
||||
|
<detail-goods></detail-goods> |
||||
|
</view> |
||||
|
<view class="od-fixed"> |
||||
|
<view class="of-refund">申请退款</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.order-detail{ |
||||
|
padding: 24upx; |
||||
|
@include isPd(140upx); |
||||
|
.od-box{ |
||||
|
background-color: #fff; |
||||
|
border-radius: 20upx; |
||||
|
&+ .od-box{ |
||||
|
margin-top: 24upx; |
||||
|
} |
||||
|
} |
||||
|
.od-title{ |
||||
|
@include flcw(28upx, 40upx, #9A9A9D); |
||||
|
} |
||||
|
.od-header{ |
||||
|
padding: 28upx 28upx 32upx; |
||||
|
.oh-stadium{ |
||||
|
margin-bottom: 14upx; |
||||
|
@include ctf; |
||||
|
.os-logo{ |
||||
|
flex-shrink: 0; |
||||
|
margin-right: 10upx; |
||||
|
width: 34upx; |
||||
|
height: 34upx; |
||||
|
background: skyblue; |
||||
|
} |
||||
|
.os-name{ |
||||
|
flex-grow: 1; |
||||
|
@include flcw(28upx, 40upx, #333, 500); |
||||
|
@include tHide; |
||||
|
} |
||||
|
.os-status{ |
||||
|
flex-shrink: 0; |
||||
|
margin-left: 10upx; |
||||
|
max-width: 160upx; |
||||
|
@include tHide; |
||||
|
@include flcw(28upx, 40upx, $mColor); |
||||
|
} |
||||
|
} |
||||
|
.oh-line{ |
||||
|
@include flcw(24upx, 34upx, #9A9A9D); |
||||
|
@include tHide; |
||||
|
} |
||||
|
} |
||||
|
.od-code{ |
||||
|
padding-top: 26upx; |
||||
|
font-size: 0; |
||||
|
.oc-code-img{ |
||||
|
display: block; |
||||
|
margin: 0 auto; |
||||
|
width: 278upx; |
||||
|
height: 278upx; |
||||
|
background: skyblue; |
||||
|
} |
||||
|
.oc-tip{ |
||||
|
text-align: center; |
||||
|
@include flcw(24upx, 56upx, #666666); |
||||
|
} |
||||
|
} |
||||
|
.od-payment{ |
||||
|
padding: 30upx; |
||||
|
.od-title{ |
||||
|
margin-bottom: 20upx; |
||||
|
} |
||||
|
} |
||||
|
.od-total{ |
||||
|
padding: 30upx; |
||||
|
.ot-line{ |
||||
|
@include ctf(space-between); |
||||
|
.ol-val{ |
||||
|
@include flcw(24upx, 60upx, #333); |
||||
|
&:first-child{ |
||||
|
margin-right: 20upx; |
||||
|
flex-shrink: 0; |
||||
|
} |
||||
|
&+.ol-val{ |
||||
|
@include tHide; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.ot-amount{ |
||||
|
margin-top: 30upx; |
||||
|
text-align: right; |
||||
|
@include flcw(28upx, 50upx, #FF873D, 500); |
||||
|
@include tHide; |
||||
|
.oa-txt{ |
||||
|
@include flcw(28upx, 50upx, #333333, 400); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.od-product{ |
||||
|
padding: 30upx; |
||||
|
.od-title{ |
||||
|
margin-bottom: 20upx; |
||||
|
} |
||||
|
.op-bottom{ |
||||
|
padding-top: 24upx; |
||||
|
margin-top: 18upx; |
||||
|
border-top: 1px solid #D8D8D8; |
||||
|
@include ctf(space-between); |
||||
|
.op-val{ |
||||
|
@include flcw(24upx, 40upx, #333); |
||||
|
&:first-child{ |
||||
|
margin-right: 20upx; |
||||
|
flex-shrink: 0; |
||||
|
} |
||||
|
&+.op-val{ |
||||
|
@include tHide; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.od-fixed{ |
||||
|
position: fixed; |
||||
|
left: 0; |
||||
|
bottom: 0; |
||||
|
width: 100%; |
||||
|
padding: 18upx 24upx; |
||||
|
background: #fff; |
||||
|
@include isPd(18upx); |
||||
|
.of-refund{ |
||||
|
margin-left: auto; |
||||
|
margin-right: 0; |
||||
|
width: 168upx; |
||||
|
text-align: center; |
||||
|
border-radius: 72upx; |
||||
|
border: 2upx solid $mColor; |
||||
|
@include flcw(28upx, 68upx, $mColor); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue