10 changed files with 752 additions and 3 deletions
-
18src/pages.json
-
24src/styles/iconfonts.scss
-
83src/subpackage/groupon/components/confirm_template.vue
-
31src/subpackage/groupon/components/text_line.vue
-
109src/subpackage/groupon/components/venue_info.vue
-
111src/subpackage/groupon/pages/confirm_order/ticket.vue
-
100src/subpackage/groupon/pages/confirm_order/venue.vue
-
165src/subpackage/groupon/pages/exchange_success.vue
-
109src/subpackage/groupon/pages/stadiums.vue
-
1src/uni.scss
@ -0,0 +1,83 @@ |
|||
<script setup> |
|||
import { onLoad } from '@dcloudio/uni-app'; |
|||
import { reactive, ref } from "vue"; |
|||
onLoad(() => { |
|||
|
|||
}); |
|||
|
|||
</script> |
|||
|
|||
<template> |
|||
<view class="confirm-template"> |
|||
<view class="ct-stadium"> |
|||
<view class="cs-top"> |
|||
<view class="ct-logo"></view> |
|||
<view class="ct-name">MJ体育(天空篮球从云店)</view> |
|||
</view> |
|||
<view class="cs-detail">地址：白云区从云路822号城市像素6楼（电梯5楼走到6楼）</view> |
|||
</view> |
|||
<slot></slot> |
|||
<view class="ct-fixed"> |
|||
<view class="cf-price"> |
|||
<text class="cp-txt">应付金额：</text> ¥0.00 |
|||
</view> |
|||
<view class="cf-btn">确认兑换</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<style lang="scss" scoped> |
|||
.confirm-template{ |
|||
@include isPd(132upx); |
|||
.ct-stadium{ |
|||
padding: 24upx 46upx; |
|||
background-color: #fff; |
|||
.cs-top{ |
|||
@include ctf; |
|||
.ct-logo{ |
|||
flex-shrink: 0; |
|||
margin-right: 20upx; |
|||
width: 36upx; |
|||
height: 36upx; |
|||
background: skyblue; |
|||
} |
|||
.ct-name{ |
|||
flex-grow: 1; |
|||
@include flcw(32upx, 44upx, #333, 500); |
|||
@include tHide; |
|||
} |
|||
} |
|||
.cs-detail{ |
|||
margin-top: 24upx; |
|||
@include flcw(24upx, 34upx, #9A9A9D); |
|||
} |
|||
} |
|||
.ct-fixed{ |
|||
position: fixed; |
|||
left: 0; |
|||
bottom: 0; |
|||
width: 100%; |
|||
padding: 10upx 24upx; |
|||
@include isPd(10upx); |
|||
background-color: #fff; |
|||
@include ctf; |
|||
.cf-btn{ |
|||
flex-shrink: 0; |
|||
flex-grow: 0; |
|||
margin-left: 12upx; |
|||
width: 240upx; |
|||
text-align: center; |
|||
border-radius: 20upx; |
|||
background-color: $redColor; |
|||
@include flcw(32upx, 88upx, #fff); |
|||
} |
|||
.cf-price{ |
|||
flex-grow: 1; |
|||
@include flcw(40upx, 56upx, $redColor, 500); |
|||
.cp-txt{ |
|||
@include flcw(28upx, 56upx, #333); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,31 @@ |
|||
<script setup> |
|||
const props = defineProps({ |
|||
label: { default: '' } |
|||
}) |
|||
|
|||
</script> |
|||
|
|||
<template> |
|||
<view class="text-line"> |
|||
<view class="tl-label">{{ label }}</view> |
|||
<view class="tl-value"><slot></slot></view> |
|||
</view> |
|||
</template> |
|||
|
|||
<style lang="scss" scoped> |
|||
.text-line{ |
|||
display: flex; |
|||
align-items: flex-start; |
|||
.tl-label{ |
|||
flex-grow: 0; |
|||
flex-shrink: 0; |
|||
@include flcw(26upx, 52upx, #9A9A9D); |
|||
} |
|||
.tl-value{ |
|||
flex-grow: 1; |
|||
word-break: break-all; |
|||
white-space: normal; |
|||
@include flcw(26upx, 52upx, #333); |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,109 @@ |
|||
<script setup> |
|||
import { reactive, ref } from "vue"; |
|||
import textLine from "./text_line.vue"; |
|||
const isShowSpecificTime = ref(false); |
|||
|
|||
</script> |
|||
|
|||
<template> |
|||
<slot name="title"></slot> |
|||
<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> |
|||
</template> |
|||
|
|||
<style lang="scss" scoped> |
|||
.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,111 @@ |
|||
<script setup> |
|||
import { onLoad } from '@dcloudio/uni-app'; |
|||
import { reactive, ref } from "vue"; |
|||
import confirmTemplate from "../../components/confirm_template.vue"; |
|||
import ticketItem from "../../components/ticket_item.vue"; |
|||
onLoad(() => { |
|||
|
|||
}); |
|||
|
|||
</script> |
|||
|
|||
<template> |
|||
<confirm-template> |
|||
<view class="ticket-info"> |
|||
<view class="ti-content"> |
|||
<view class="tc-tit">产品信息：</view> |
|||
<view class="tc-price"> |
|||
<view class="tp-left">单次卡</view> |
|||
<view class="tp-right">¥15</view> |
|||
</view> |
|||
<view class="tc-time"> |
|||
<view class="tt-val">有效期至：2020-10-16 15:45:20</view> |
|||
<view class="tt-val">x1</view> |
|||
</view> |
|||
<view class="tc-line"></view> |
|||
<view class="tc-ticket-info"> |
|||
<view class="tti-icon"></view> |
|||
<view class="tti-right"> |
|||
<view class="tr-txt">团购券 <text class="tt-orange">（已选1张）</text> </view> |
|||
<view class="tr-price">-¥15</view> |
|||
</view> |
|||
</view> |
|||
<ticket-item></ticket-item> |
|||
</view> |
|||
</view> |
|||
</confirm-template> |
|||
</template> |
|||
|
|||
<style lang="scss" scoped> |
|||
.ticket-info{ |
|||
padding: 24upx; |
|||
.ti-content{ |
|||
padding: 24upx; |
|||
border-radius: 20upx; |
|||
background-color: #fff; |
|||
.tc-tit{ |
|||
@include flcw(24upx, 34upx, #333); |
|||
} |
|||
.tc-price{ |
|||
margin-top: 10upx; |
|||
@include ctf(space-between); |
|||
.tp-left{ |
|||
max-width: 50%; |
|||
@include tHide; |
|||
@include flcw(32upx, 52upx, #333, 500); |
|||
} |
|||
.tp-right{ |
|||
max-width: 50%; |
|||
@include tHide; |
|||
@include flcw(32upx, 52upx, $redColor, 500); |
|||
} |
|||
} |
|||
.tc-time{ |
|||
margin-top: 4upx; |
|||
@include ctf(space-between); |
|||
.tt-val{ |
|||
@include flcw(24upx, 52upx, #9a9a9d); |
|||
@include tHide; |
|||
&+.tt-val{ |
|||
margin-left: 10upx; |
|||
flex-shrink: 0; |
|||
max-width: 30%; |
|||
} |
|||
} |
|||
} |
|||
.tc-line{ |
|||
margin-top: 16upx; |
|||
height: 1px; |
|||
background-color: #EAEAEA; |
|||
} |
|||
.tc-ticket-info{ |
|||
margin-top: 14upx; |
|||
margin-bottom: 36upx; |
|||
@include ctf; |
|||
.tti-icon{ |
|||
margin-right: 16upx; |
|||
flex-shrink: 0; |
|||
width: 40upx; |
|||
height: 40upx; |
|||
background: skyblue; |
|||
} |
|||
.tti-right{ |
|||
flex-grow: 1; |
|||
@include ctf(space-between); |
|||
.tr-txt{ |
|||
@include flcw(28upx, 40upx, #333, 500); |
|||
@include tHide; |
|||
.tt-orange{ |
|||
@include flcw(24upx, 34upx, #FF873D); |
|||
} |
|||
} |
|||
.tr-price{ |
|||
max-width: 30%; |
|||
@include flcw(24upx, 34upx, #FF873D); |
|||
@include tHide; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,100 @@ |
|||
<script setup> |
|||
import { onLoad } from '@dcloudio/uni-app'; |
|||
import { reactive, ref } from "vue"; |
|||
import confirmTemplate from "../../components/confirm_template.vue"; |
|||
import ticketItem from "../../components/ticket_item.vue"; |
|||
import venueInfo from "../../components/venue_info.vue"; |
|||
onLoad(() => { |
|||
|
|||
}); |
|||
|
|||
</script> |
|||
|
|||
<template> |
|||
<confirm-template> |
|||
<view class="venue-confirm"> |
|||
<view class="vc-box"> |
|||
<venue-info> |
|||
<template #title> |
|||
<view class="vc-title">产品信息：</view> |
|||
</template> |
|||
</venue-info> |
|||
</view> |
|||
<view class="vc-box vc-groupon"> |
|||
<view class="vc-title">团购券信息：</view> |
|||
<ticket-item></ticket-item> |
|||
<view class="vc-txt">温馨提示：团购券需一次性使用完，一经使用不退不换</view> |
|||
</view> |
|||
<view class="vc-box vc-contact"> |
|||
<view class="vc-title">*联系方式：</view> |
|||
<view class="vc-txt">为了场馆更好地为您服务，请准确填写您的联系方式</view> |
|||
<view class="vc-phone"> |
|||
<view class="vp-name">手机号码</view> |
|||
<input type="phone" class="vp-ipt" /> |
|||
</view> |
|||
</view> |
|||
<view class="vc-box vc-notice"> |
|||
<view class="vc-title">预定须知：</view> |
|||
<view class="vc-txt">*预定后离开始使用时间不足3小时前的，不可申请退款；另则可退款</view> |
|||
<view class="vc-txt">*同一订单不支持部分场次退款</view> |
|||
</view> |
|||
</view> |
|||
</confirm-template> |
|||
</template> |
|||
|
|||
<style lang="scss" scoped> |
|||
.vc-box{ |
|||
padding: 24upx; |
|||
border-radius: 20upx; |
|||
background-color: #fff; |
|||
&+.vc-box{ |
|||
margin-top: 24upx; |
|||
} |
|||
} |
|||
.vc-title{ |
|||
@include flcw(32upx, 44upx, #333, 500); |
|||
} |
|||
.vc-txt{ |
|||
@include flcw(24upx, 34upx, #666); |
|||
} |
|||
.venue-confirm{ |
|||
padding: 24upx; |
|||
.vc-groupon{ |
|||
.vc-title{ |
|||
margin-bottom: 24upx; |
|||
} |
|||
.vc-txt{ |
|||
margin-top: 12upx; |
|||
} |
|||
} |
|||
.vc-contact{ |
|||
.vc-txt{ |
|||
margin-top: 12upx; |
|||
color: #9A9A9D; |
|||
} |
|||
.vc-phone{ |
|||
margin-top: 16upx; |
|||
@include ctf; |
|||
.vp-name{ |
|||
flex-shrink: 0; |
|||
margin-right: 16upx; |
|||
@include flcw(24upx, 34upx, #333, 500); |
|||
} |
|||
.vp-ipt{ |
|||
padding: 0 24upx; |
|||
width: 252upx; |
|||
height: 64upx; |
|||
border-radius: 18upx; |
|||
background-color: #F3F3F3; |
|||
@include flcw(28upx, 40upx, #333, 500); |
|||
} |
|||
} |
|||
} |
|||
.vc-notice{ |
|||
.vc-txt{ |
|||
margin-top: 12upx; |
|||
} |
|||
} |
|||
|
|||
} |
|||
</style> |
|||
@ -0,0 +1,165 @@ |
|||
<script setup> |
|||
import { onLoad } from '@dcloudio/uni-app'; |
|||
import { reactive, ref } from "vue"; |
|||
import textLine from "../components/text_line.vue"; |
|||
onLoad(() => { |
|||
|
|||
}); |
|||
|
|||
</script> |
|||
|
|||
<template> |
|||
<view class="exchange-success"> |
|||
<view class="es-icon"></view> |
|||
<view class="es-order-btn">查看订单</view> |
|||
<view class="es-txt">兑换成功</view> |
|||
<view class="es-container"> |
|||
<view class="ec-stadium"> |
|||
<view class="es-logo"></view> |
|||
<view class="es-name">MJ体育(天空篮球从云店)</view> |
|||
</view> |
|||
<view class="ec-info"> |
|||
<text-line label="预订项目：">单次卡</text-line> |
|||
<text-line label="可用票数：">1</text-line> |
|||
<text-line label="到期时间：">2020-10-16 17:45:20</text-line> |
|||
</view> |
|||
<view class="ec-line"></view> |
|||
<view class="ec-code"> |
|||
<view class="ec-tip">点击二维码可放大查看</view> |
|||
<image class="ec-img"></image> |
|||
<view class="ec-txt"> |
|||
<view class="et-num">验证码：12253 51234</view> |
|||
<view class="et-copy">复制</view> |
|||
</view> |
|||
</view> |
|||
<view class="ec-desc"> |
|||
<view class="ed-line"> |
|||
<view class="el-icon"></view> |
|||
<view class="el-txt">仅支持<text class="green">1人1码</text>进场</view> |
|||
</view> |
|||
<view class="ed-line"> |
|||
<view class="el-icon"></view> |
|||
<view class="el-txt">截图的二维码无法正常使用，如需分享请点击“分享给朋友”</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="es-share">分享给朋友 </view> |
|||
</view> |
|||
</template> |
|||
|
|||
<style lang="scss" scoped> |
|||
.exchange-success{ |
|||
padding-top: 60upx; |
|||
@include isPd(24upx); |
|||
@include successIcon; |
|||
.es-icon{ |
|||
text-align: center; |
|||
font-family: successIcon; |
|||
font-size: 132upx; |
|||
color: #59B637; |
|||
} |
|||
.es-order-btn{ |
|||
position: fixed; |
|||
right: 0; |
|||
top: 40upx; |
|||
padding: 0 34upx; |
|||
background: #E4E4E4; |
|||
border-radius: 50upx 0 0 50upx; |
|||
@include flcw(28upx, 64upx, #666); |
|||
} |
|||
.es-txt{ |
|||
margin-top: 30upx; |
|||
text-align: center; |
|||
@include flcw(32upx, 44upx, #59B637, 500); |
|||
} |
|||
.es-container{ |
|||
padding: 24upx; |
|||
margin: 28upx auto; |
|||
width: 702upx; |
|||
border-radius: 18upx; |
|||
background-color: #fff; |
|||
.ec-stadium{ |
|||
@include ctf; |
|||
.es-logo{ |
|||
flex-shrink: 0; |
|||
margin-right: 20upx; |
|||
width: 36upx; |
|||
height: 36upx; |
|||
background: skyblue; |
|||
} |
|||
.es-name{ |
|||
flex-grow: 1; |
|||
@include flcw(32upx, 44upx, #333, 500); |
|||
@include tHide; |
|||
} |
|||
} |
|||
.ec-info{ |
|||
margin-top: 20upx; |
|||
padding: 0 50upx; |
|||
} |
|||
.ec-line{ |
|||
margin-top: 32upx; |
|||
height: 1px; |
|||
background-color: #EAEAEA; |
|||
} |
|||
.ec-code{ |
|||
margin-top: 14upx; |
|||
.ec-tip{ |
|||
text-align: center; |
|||
@include flcw(24upx, 56upx, #666); |
|||
} |
|||
.ec-img{ |
|||
box-sizing: border-box; |
|||
display: block; |
|||
margin: 0 auto; |
|||
width: 306upx; |
|||
height: 306upx; |
|||
background-color: skyblue; |
|||
} |
|||
.ec-txt{ |
|||
@include ctf(center); |
|||
.et-num{ |
|||
@include flcw(28upx, 56upx, #333); |
|||
@include tHide; |
|||
} |
|||
.et-copy{ |
|||
flex-shrink: 0; |
|||
margin-left: 16upx; |
|||
@include flcw(28upx, 56upx, #4373EC); |
|||
} |
|||
} |
|||
} |
|||
.ec-desc{ |
|||
margin-top: 16upx; |
|||
.ed-line{ |
|||
display: flex; |
|||
align-items: baseline; |
|||
@include circleExclamation; |
|||
.el-icon{ |
|||
min-width: 40upx; |
|||
flex-shrink: 0; |
|||
font-family: circleExclamation; |
|||
@include flcw(24upx, 56upx, #666); |
|||
} |
|||
.el-txt{ |
|||
@include flcw(24upx, 56upx, #666); |
|||
.green{ |
|||
color: $mColor; |
|||
} |
|||
} |
|||
|
|||
} |
|||
} |
|||
} |
|||
@include shareArrow; |
|||
.es-share{ |
|||
margin: 126upx auto 0; |
|||
width: 336upx; |
|||
text-align: center; |
|||
border-radius: 20upx; |
|||
background-color: $redColor; |
|||
font-family: shareArrow; |
|||
@include flcw(32upx, 88upx, #fff, 500); |
|||
} |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue