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