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