7 changed files with 307 additions and 142 deletions
-
1src/api/index.js
-
11src/pages.json
-
18src/pages/tem.vue
-
33src/subpackage/groupon/pages/confirm_order/venue.vue
-
243src/subpackage/groupon/pages/site_select.vue
-
118src/subpackage/order/components/detail/venue.vue
-
25src/subpackage/order/pages/detail.vue
@ -1,18 +0,0 @@ |
|||||
<script setup> |
|
||||
import { onLoad } from '@dcloudio/uni-app'; |
|
||||
import { reactive, ref } from "vue"; |
|
||||
onLoad(() => { |
|
||||
|
|
||||
}); |
|
||||
|
|
||||
</script> |
|
||||
|
|
||||
<template> |
|
||||
<view> |
|
||||
|
|
||||
</view> |
|
||||
</template> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
|
|
||||
</style> |
|
||||
@ -0,0 +1,243 @@ |
|||||
|
<script setup> |
||||
|
import { onLoad } from '@dcloudio/uni-app'; |
||||
|
import { reactive, ref, computed } from 'vue'; |
||||
|
import { stadiumBookList } from "@/api"; |
||||
|
const siteData = ref([]); |
||||
|
const timeList = computed(_=> { |
||||
|
let _items = siteData?.value?.[0]?.items ?? [], _tempArr; |
||||
|
_tempArr = _items.reduce((_arr, val)=>_arr.concat(val.time.split('-')), []); |
||||
|
// 去重前减掉最后一位，去重后再补上 |
||||
|
// 00:00-00:30 && 23:00-00:00 ，这两个时间段去重后少一个节点 |
||||
|
return [...new Set(_tempArr.splice(0, _tempArr.length-2)), _tempArr[_tempArr.length-1]]; |
||||
|
|
||||
|
}) |
||||
|
onLoad(() => { |
||||
|
stadiumBookList({ data: { |
||||
|
stadium_id: 167, |
||||
|
date: `2025-06-06`, |
||||
|
type_key: `631284d5-aed4-11ea-a89a-7085c2772a68`, |
||||
|
rule_type: 0, |
||||
|
brand_id: 63, |
||||
|
app_id: `wxc141a743225e7885`, |
||||
|
token: `dbce2d0c-ce5d-11ef-9e0f-5254005df464`, |
||||
|
enable_show_terminal: 1, |
||||
|
from_platform: `weixin`, |
||||
|
} }) |
||||
|
.then(res=>{ |
||||
|
siteData.value = res; |
||||
|
}) |
||||
|
}); |
||||
|
|
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<view class="site-select"> |
||||
|
<view class="ss-header"> |
||||
|
<view class="sh-stadium"> |
||||
|
<view class="ss-logo"></view> |
||||
|
<view class="ss-name">MJ体育(天空篮球从云店)</view> |
||||
|
</view> |
||||
|
<view class="sh-bottom"> |
||||
|
<picker class="sb-classify"> |
||||
|
<view class="sc-txt">羽毛球</view> |
||||
|
<view class="sc-icon"></view> |
||||
|
</picker> |
||||
|
<view class="sb-desc"> |
||||
|
<view class="sd-txt">1号+2号或3号+4号为一个全场，</view> |
||||
|
<view class="sd-arrow-cover"><text></text></view> |
||||
|
<view class="sd-full-txt" v-if="false">1号+2号或3号+4号为一个全场，</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="ss-main"> |
||||
|
<scroll-view class="sm-dates" scroll-x> |
||||
|
<view class="sd-item" :class="{ active: i === 1 }" v-for="i in 20" :key="i"> |
||||
|
<view class="si-week">今天</view> |
||||
|
<view class="si-day">6月10日</view> |
||||
|
</view> |
||||
|
</scroll-view> |
||||
|
<scroll-view class="sm-site-data" scroll-x scroll-y> |
||||
|
<!-- 得左边栏先渲染，占据当前ele的宽度，后续渲染元素都会跟随。 float和sticky关键--> |
||||
|
<view class="ssd-left-sticky"> |
||||
|
<view class="sls-item" v-for="(e,i) in timeList" :key="i"> |
||||
|
<view class="si-txt">{{ e || '-'}}</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="ssd-top-sticky"> |
||||
|
<view class="sts-item" v-for="(e, i) in siteData" :key="i">{{ e?.name ?? '-' }}</view> |
||||
|
</view> |
||||
|
|
||||
|
</scroll-view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
@include rightArrow; |
||||
|
.site-select{ |
||||
|
|
||||
|
} |
||||
|
.ss-header{ |
||||
|
padding: 24upx; |
||||
|
.sh-stadium{ |
||||
|
@include ctf; |
||||
|
.ss-logo{ |
||||
|
flex-shrink: 0; |
||||
|
margin-right: 20upx; |
||||
|
width: 36upx; |
||||
|
height: 36upx; |
||||
|
background: skyblue; |
||||
|
} |
||||
|
.ss-name{ |
||||
|
flex-grow: 1; |
||||
|
@include flcw(32upx, 44upx, #333, 500); |
||||
|
@include tHide; |
||||
|
} |
||||
|
} |
||||
|
.sh-bottom{ |
||||
|
margin-top: 38upx; |
||||
|
@include ctf(space-between); |
||||
|
.sb-classify{ |
||||
|
@include ctf; |
||||
|
.sc-txt{ |
||||
|
max-width: 220upx; |
||||
|
@include flcw(36upx, 50upx, #333, 500); |
||||
|
@include tHide; |
||||
|
} |
||||
|
.sc-icon{ |
||||
|
margin-left: 10upx; |
||||
|
font-family: rightArrow; |
||||
|
transform: rotateZ(90deg); |
||||
|
@include flcw(36upx, 50upx, #333, 500); |
||||
|
} |
||||
|
} |
||||
|
.sb-desc{ |
||||
|
position: relative; |
||||
|
.sd-txt{ |
||||
|
max-width: 346upx; |
||||
|
@include flcw(24upx, 34upx, #9B9B9B); |
||||
|
@include tHide; |
||||
|
} |
||||
|
.sd-arrow-cover{ |
||||
|
position: absolute; |
||||
|
right: 0; |
||||
|
top: 0; |
||||
|
padding-right: 8upx; |
||||
|
height: 34upx; |
||||
|
width: 76upx; |
||||
|
background-image: linear-gradient(270deg, #FFFFFF 50%, rgba(255,255,255,0.00) 99%); |
||||
|
text-align: right; |
||||
|
@include flcw(24upx, 34upx, #9B9B9B); |
||||
|
>text{ |
||||
|
display: inline-block; |
||||
|
font-family: rightArrow; |
||||
|
transform: rotateZ(90deg); |
||||
|
} |
||||
|
} |
||||
|
.sd-full-txt{ |
||||
|
position: absolute; |
||||
|
right: 0upx; |
||||
|
top: calc(100% + 10upx); |
||||
|
width: 462upx; |
||||
|
max-height: 300upx; |
||||
|
overflow-y: scroll; |
||||
|
z-index: 30; |
||||
|
padding: 22upx; |
||||
|
border-radius: 6upx; |
||||
|
background-color: #fff; |
||||
|
box-shadow: 0 0 8upx 0 #002c2229; |
||||
|
@include flcw(24upx, 40upx, #333); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.ss-main{ |
||||
|
.sm-dates{ |
||||
|
background-color: #fff; |
||||
|
border-bottom: 1px solid #D8D8D8; |
||||
|
white-space: nowrap; |
||||
|
.sd-item{ |
||||
|
display: inline-block; |
||||
|
position: relative; |
||||
|
padding: 30upx 20upx 0; |
||||
|
height: 136upx; |
||||
|
&.active{ |
||||
|
&::after{ |
||||
|
content: ''; |
||||
|
position: absolute; |
||||
|
left: 50%; |
||||
|
bottom: 0; |
||||
|
transform: translateX(-50%); |
||||
|
width: 70%; |
||||
|
height: 10upx; |
||||
|
border-radius: 6upx; |
||||
|
background-color: $mColor; |
||||
|
} |
||||
|
.si-week, .si-day{ |
||||
|
color: $mColor; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
} |
||||
|
.si-week{ |
||||
|
text-align: center; |
||||
|
@include flcw(32upx, 44upx, #9A9A9D); |
||||
|
} |
||||
|
.si-day{ |
||||
|
text-align: center; |
||||
|
@include flcw(24upx, 34upx, #9A9A9D); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.sm-site-data{ |
||||
|
position: relative; |
||||
|
height: 500upx; |
||||
|
.ssd-top-sticky{ |
||||
|
position: sticky; |
||||
|
top: 0; |
||||
|
z-index: 2; |
||||
|
width: fit-content; |
||||
|
white-space: nowrap; |
||||
|
background-color: #ff0; |
||||
|
font-size: 0; |
||||
|
.sts-item{ |
||||
|
width: 196upx; |
||||
|
display: inline-block; |
||||
|
text-align: center; |
||||
|
overflow: hidden; |
||||
|
white-space: nowrap; |
||||
|
text-overflow: ellipsis; |
||||
|
border-bottom: 1px solid #D8D8D8; |
||||
|
@include flcw(24upx, 70upx, #333, 500); |
||||
|
} |
||||
|
} |
||||
|
.ssd-left-sticky{ |
||||
|
position: sticky; |
||||
|
left: 0; |
||||
|
top: 0; |
||||
|
float: left; |
||||
|
background-color: rgba($color: pink, $alpha: .7); |
||||
|
z-index: 5; |
||||
|
height: fit-content; |
||||
|
.sls-item{ |
||||
|
position: relative; |
||||
|
width: 112upx; |
||||
|
height: 100upx; |
||||
|
background-color: #fff; |
||||
|
border-right: 2upx solid #D8D8D8; |
||||
|
.si-txt{ |
||||
|
position: absolute; |
||||
|
right: 0upx; |
||||
|
bottom: -36upx; |
||||
|
z-index: 1; |
||||
|
padding-right: 16upx; |
||||
|
width: 100%; |
||||
|
text-align: right; |
||||
|
@include tHide(1); |
||||
|
@include flcw(24upx, 100upx, #333); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -1,118 +0,0 @@ |
|||||
<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> |
|
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue