From d7acca68e02711a40da8f480de4825cc6ef67c4e Mon Sep 17 00:00:00 2001
From: "liujw155@outlook.com" <liujw155@outlook.com>
Date: Fri, 6 Jun 2025 18:24:33 +0800
Subject: [PATCH] add style

---
 src/subpackage/groupon/components/site/footer.vue | 100 ++++++++++++
 src/subpackage/groupon/components/site/table.vue  | 190 ++++++++++++++++++++++
 src/subpackage/groupon/pages/site_select.vue      |  82 ++--------
 3 files changed, 302 insertions(+), 70 deletions(-)
 create mode 100644 src/subpackage/groupon/components/site/footer.vue
 create mode 100644 src/subpackage/groupon/components/site/table.vue

diff --git a/src/subpackage/groupon/components/site/footer.vue b/src/subpackage/groupon/components/site/footer.vue
new file mode 100644
index 0000000..541eee3
--- /dev/null
+++ b/src/subpackage/groupon/components/site/footer.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>
\ No newline at end of file
diff --git a/src/subpackage/groupon/components/site/table.vue b/src/subpackage/groupon/components/site/table.vue
new file mode 100644
index 0000000..33a14ae
--- /dev/null
+++ b/src/subpackage/groupon/components/site/table.vue
@@ -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>
\ No newline at end of file
diff --git a/src/subpackage/groupon/pages/site_select.vue b/src/subpackage/groupon/pages/site_select.vue
index ad4f0b5..75c3322 100644
--- a/src/subpackage/groupon/pages/site_select.vue
+++ b/src/subpackage/groupon/pages/site_select.vue
@@ -2,15 +2,10 @@
 import { onLoad } from '@dcloudio/uni-app';
 import { reactive, ref, computed } from 'vue';
 import { stadiumBookList } from "@/api";
+import siteTable from "../components/site/table.vue";
+import siteFooter from "../components/site/footer.vue";
 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,
@@ -56,18 +51,10 @@ onLoad(() => {
                 <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>
+        <site-table :table-data="siteData"></site-table>
+    </view>
+    <view class="ss-footer">
+        <site-footer></site-footer>
     </view>
   </view>
 </template>
@@ -188,56 +175,11 @@ onLoad(() => {
             }
         }
     }
-    .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);
-                }
-            }
-            
-        }
-    }
+}
+.ss-footer{
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    width: 100%;
 }
 </style>
\ No newline at end of file