3 changed files with 302 additions and 70 deletions
-
100src/subpackage/groupon/components/site/footer.vue
-
190src/subpackage/groupon/components/site/table.vue
-
76src/subpackage/groupon/pages/site_select.vue
@ -0,0 +1,100 @@ |
|||||
|
<script setup> |
||||
|
import { onLoad } from '@dcloudio/uni-app'; |
||||
|
import { reactive, ref } from 'vue'; |
||||
|
|
||||
|
onLoad(() => { |
||||
|
|
||||
|
}); |
||||
|
|
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<view class="site-footer"> |
||||
|
<view class="vsm-explain"> |
||||
|
<view class="ve-item"> |
||||
|
<view class="vi-view"></view> |
||||
|
<view class="vi-view">可预订</view> |
||||
|
</view> |
||||
|
<view class="ve-item"> |
||||
|
<view class="vi-view"></view> |
||||
|
<view class="vi-view">会员价</view> |
||||
|
</view> |
||||
|
<view class="ve-item"> |
||||
|
<view class="vi-view"></view> |
||||
|
<view class="vi-view">已售完</view> |
||||
|
</view> |
||||
|
<view class="ve-item"> |
||||
|
<view class="vi-view"></view> |
||||
|
<view class="vi-view">已选择</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="sf-submit-bar"> |
||||
|
<view class="ssb-price">¥0.00 </view> |
||||
|
<view class="ssb-btn">请选择场地</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.site-footer{ |
||||
|
background-color: #fff; |
||||
|
@include isPd(10upx); |
||||
|
.vsm-explain{ |
||||
|
height: 128upx; |
||||
|
@include ctf(center); |
||||
|
.ve-item{ |
||||
|
margin: 20upx; |
||||
|
&:nth-child(2)>.vi-view:first-child{ |
||||
|
background-color: #fff; |
||||
|
border-color: #FF873D; |
||||
|
} |
||||
|
&:nth-child(3)>.vi-view:first-child{ |
||||
|
background-color: #D7D7DD; |
||||
|
border-color: #D7D7DD; |
||||
|
} |
||||
|
&:nth-child(4)>.vi-view:first-child{ |
||||
|
background-color: $mColor; |
||||
|
} |
||||
|
>.vi-view{ |
||||
|
&:first-child{ |
||||
|
margin: 0 auto 8upx; |
||||
|
width: 40upx; |
||||
|
height: 22upx; |
||||
|
border-radius: 6upx; |
||||
|
border: 1px solid $mColor; |
||||
|
} |
||||
|
&+.vi-view{ |
||||
|
text-align: center; |
||||
|
@include flcw(28upx, 40upx, #9a9a9d); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
.sf-submit-bar{ |
||||
|
padding: 20upx 40upx 0; |
||||
|
display: flex; |
||||
|
align-items: baseline; |
||||
|
justify-content: flex-end; |
||||
|
.ssb-price{ |
||||
|
flex-grow: 1; |
||||
|
text-align: right; |
||||
|
@include flcw(38upx, 64upx, #FF873D); |
||||
|
@include tHide; |
||||
|
} |
||||
|
.ssb-btn{ |
||||
|
flex-shrink: 0; |
||||
|
margin-left: 32upx; |
||||
|
width: 290upx; |
||||
|
height: 88upx; |
||||
|
text-align: center; |
||||
|
border-radius: 44upx; |
||||
|
background-color: #FF873D; |
||||
|
@include flcw(32upx, 88upx, #fff); |
||||
|
&.un-active{ |
||||
|
background-color: #ffcfb1; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,190 @@ |
|||||
|
<script setup> |
||||
|
import { onLoad } from '@dcloudio/uni-app'; |
||||
|
import { reactive, ref, computed } from 'vue'; |
||||
|
const props = defineProps({ |
||||
|
tableData: { default: [] } |
||||
|
}) |
||||
|
const timeList = computed(_=> { |
||||
|
if(!props?.tableData?.length)return []; |
||||
|
let _items = props?.tableData?.[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(() => { |
||||
|
|
||||
|
}); |
||||
|
|
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<scroll-view class="sm-table-data" scroll-x scroll-y> |
||||
|
<view class="std-box"> |
||||
|
<!-- 左侧栏 --> |
||||
|
<view class="std-left-sticky"> |
||||
|
<view class="sls-item" v-for="(e,i) in timeList" :key="i"> |
||||
|
<view class="si-txt">{{ e || '-' }}</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<!-- 顶部栏 --> |
||||
|
<view class="std-top-sticky"> |
||||
|
<view class="sts-item" v-for="(e, i) in tableData" :key="i">{{ e.name || '-' }}</view> |
||||
|
</view> |
||||
|
<view class="std-data"> |
||||
|
<view class="sd-column" v-for="(e, i) in tableData" :key="i"> |
||||
|
<view class="sc-row" v-for="(k, j) in e.items" :key="j"> |
||||
|
<view |
||||
|
class="sr-item" |
||||
|
:class="{ |
||||
|
orange: i === 0&j%2, |
||||
|
gray: i === 1&j%3, |
||||
|
sold: i === 2&j%5, |
||||
|
}" |
||||
|
> |
||||
|
<view class="sr-sold" v-if="i === 2&j%5">已售</view> |
||||
|
<block v-else> |
||||
|
<view class="sr-price">¥60.00</view> |
||||
|
<view class="sr-del" v-if="i === 0&j%2">¥60.00</view> |
||||
|
</block> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</scroll-view> |
||||
|
</template> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.sm-table-data{ |
||||
|
position: relative; |
||||
|
height: 600upx; |
||||
|
background-color: #F2F2F7; |
||||
|
.std-box{ |
||||
|
width: fit-content; |
||||
|
padding-bottom: 60upx; |
||||
|
background-color: #F2F2F7; |
||||
|
} |
||||
|
.std-left-sticky{ |
||||
|
position: sticky; |
||||
|
left: 0; |
||||
|
float: left; |
||||
|
z-index: 5; |
||||
|
height: fit-content; |
||||
|
background-color: #F2F2F7; |
||||
|
.sls-item{ |
||||
|
position: relative; |
||||
|
width: 112upx; |
||||
|
height: 100upx; |
||||
|
border-right: 2upx solid #D8D8D8; |
||||
|
&:first-child{ |
||||
|
height: 72upx; |
||||
|
} |
||||
|
.si-txt{ |
||||
|
position: absolute; |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
|
transform: translateY(50%); |
||||
|
padding-right: 20upx; |
||||
|
width: 100%; |
||||
|
text-align: right; |
||||
|
@include flcw(24upx, 34upx, #333); |
||||
|
@include tHide; |
||||
|
} |
||||
|
&:not(:first-child){ |
||||
|
&::after{ |
||||
|
content: ''; |
||||
|
display: block; |
||||
|
width: 12upx; |
||||
|
height: 2upx; |
||||
|
position: absolute; |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
|
transform: translateY(50%); |
||||
|
background-color: #D8D8D8; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
} |
||||
|
.std-top-sticky{ |
||||
|
position: sticky; |
||||
|
top: 0; |
||||
|
z-index: 2; |
||||
|
width: fit-content; |
||||
|
white-space: nowrap; |
||||
|
font-size: 0; |
||||
|
background-color: #fff; |
||||
|
.sts-item{ |
||||
|
width: 196upx; |
||||
|
display: inline-block; |
||||
|
text-align: center; |
||||
|
overflow: hidden; |
||||
|
white-space: nowrap; |
||||
|
text-overflow: ellipsis; |
||||
|
border-bottom: 2upx solid #D8D8D8; |
||||
|
background-color: #fff; |
||||
|
@include flcw(24upx, 70upx, #333, 500); |
||||
|
} |
||||
|
} |
||||
|
.std-data{ |
||||
|
white-space: nowrap; |
||||
|
width: fit-content; |
||||
|
.sd-column{ |
||||
|
display: inline-block; |
||||
|
width: 196upx; |
||||
|
.sc-row{ |
||||
|
padding: 1px; |
||||
|
width: 100%; |
||||
|
height: 100upx; |
||||
|
.sr-item{ |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
border: 1px solid $mColor; |
||||
|
border-radius: 10upx; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
flex-wrap: wrap; |
||||
|
justify-content: center; |
||||
|
overflow: hidden; |
||||
|
background-color: #fff; |
||||
|
>view{ |
||||
|
flex-shrink: 0; |
||||
|
width: 100%; |
||||
|
padding: 0 10upx; |
||||
|
text-align: center; |
||||
|
@include tHide; |
||||
|
@include flcw(28upx, 40upx, $mColor); |
||||
|
} |
||||
|
.sr-sold{ |
||||
|
color: #9A9A9D; |
||||
|
} |
||||
|
.sr-del{ |
||||
|
@include flcw(20upx, 28upx, #9A9A9D); |
||||
|
} |
||||
|
|
||||
|
&.orange{ |
||||
|
border-color: #FF873D; |
||||
|
.sr-price{ |
||||
|
color: #FF873D; |
||||
|
} |
||||
|
} |
||||
|
&.gray{ |
||||
|
border-color: #D7D7DD; |
||||
|
color: #9A9A9D; |
||||
|
.sr-price{ |
||||
|
color: #9A9A9D; |
||||
|
} |
||||
|
} |
||||
|
&.sold{ |
||||
|
border-color: #D7D7DD; |
||||
|
background-color: #D7D7DD; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue