From 37f96fa3fe78eadfc90323aa2f7fa6b2c7236487 Mon Sep 17 00:00:00 2001
From: "liujw155@outlook.com" <liujw155@outlook.com>
Date: Thu, 5 Jun 2025 18:24:16 +0800
Subject: [PATCH] add style

---
 src/api/index.js                                   |   1 +
 src/pages.json                                     |  11 +-
 src/pages/tem.vue                                  |  18 --
 .../groupon/pages/confirm_order/venue.vue          |  33 +++
 src/subpackage/groupon/pages/site_select.vue       | 243 +++++++++++++++++++++
 src/subpackage/order/components/detail/venue.vue   | 118 ----------
 src/subpackage/order/pages/detail.vue              |  25 ++-
 7 files changed, 307 insertions(+), 142 deletions(-)
 delete mode 100644 src/pages/tem.vue
 create mode 100644 src/subpackage/groupon/pages/site_select.vue
 delete mode 100644 src/subpackage/order/components/detail/venue.vue

diff --git a/src/api/index.js b/src/api/index.js
index a190c86..b3e1835 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -3,3 +3,4 @@ import server from './server';
 // 公共
 export const login = params => server.post({ url: '/Admino/AdminUser/login', ...params }); // 登录
 export const stadiumFind = params => server.post({ url: '/stadium/find', ...params }); // 登录
+export const stadiumBookList = params => server.post({ url: '/stadium/book/list', ...params }); // 订场列表
diff --git a/src/pages.json b/src/pages.json
index 86449b8..d7b8c81 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -20,7 +20,10 @@
 				{
 					"path": "pages/detail",
 					"style": {
-						"navigationBarTitleText": "订单详情"
+						"navigationBarTitleText": "订单详情",
+						"componentPlaceholder": {
+							"venue-info-async": "view"
+						}
 					}
 				}
 			]
@@ -29,6 +32,12 @@
 			"root": "subpackage/groupon",
 			"pages": [
 				{
+					"path": "pages/site_select",
+					"style": {
+						"navigationBarTitleText": "选择场次"
+					}
+				},
+				{
 					"path": "pages/exchange_success",
 					"style": {
 						"navigationBarTitleText": "兑换成功"
diff --git a/src/pages/tem.vue b/src/pages/tem.vue
deleted file mode 100644
index ab8b525..0000000
--- a/src/pages/tem.vue
+++ /dev/null
@@ -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>
diff --git a/src/subpackage/groupon/pages/confirm_order/venue.vue b/src/subpackage/groupon/pages/confirm_order/venue.vue
index 4b4189a..40c9c6a 100644
--- a/src/subpackage/groupon/pages/confirm_order/venue.vue
+++ b/src/subpackage/groupon/pages/confirm_order/venue.vue
@@ -20,6 +20,13 @@ onLoad(() => {
                     </template>
                 </venue-info>
             </view>
+            <view class="vc-box vc-groupon-show">
+                <view class="tti-icon"></view>
+                <view class="tti-right">
+                    <view class="tr-txt">团购券 <text class="tt-orange">（已选1张）</text> </view>
+                    <view class="tr-price">团购券抵扣6小时，-¥600.00</view>
+                </view>
+            </view>
             <view class="vc-box vc-groupon">
                 <view class="vc-title">团购券信息：</view>
                 <ticket-item></ticket-item>
@@ -59,6 +66,32 @@ onLoad(() => {
     }
     .venue-confirm{
         padding: 24upx;
+        .vc-groupon-show{
+            @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: 60%;
+                    @include flcw(24upx, 34upx, #FF873D);
+                    @include tHide;
+                }
+            }
+        }
         .vc-groupon{
             .vc-title{
                 margin-bottom: 24upx;
diff --git a/src/subpackage/groupon/pages/site_select.vue b/src/subpackage/groupon/pages/site_select.vue
new file mode 100644
index 0000000..ad4f0b5
--- /dev/null
+++ b/src/subpackage/groupon/pages/site_select.vue
@@ -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">&#xe695;</view>
+            </picker>
+            <view class="sb-desc">
+                <view class="sd-txt">1号+2号或3号+4号为一个全场，</view>
+                <view class="sd-arrow-cover"><text>&#xe695;</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>
\ No newline at end of file
diff --git a/src/subpackage/order/components/detail/venue.vue b/src/subpackage/order/components/detail/venue.vue
deleted file mode 100644
index 0ab3e6f..0000000
--- a/src/subpackage/order/components/detail/venue.vue
+++ /dev/null
@@ -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' :'' ]">&#xe695;</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>
diff --git a/src/subpackage/order/pages/detail.vue b/src/subpackage/order/pages/detail.vue
index bdbad55..3c7f0da 100644
--- a/src/subpackage/order/pages/detail.vue
+++ b/src/subpackage/order/pages/detail.vue
@@ -2,10 +2,10 @@
 import { onLoad } from '@dcloudio/uni-app';
 import { reactive, ref } from "vue";
 import textLine from "../components/detail/text_line.vue";
-import detailVenueInfo from "../components/detail/venue.vue";
 import detailGoods from "../components/detail/goods.vue";
 import detailVerify from "../components/detail/verify.vue";
 import detailContact from "../components/detail/contact.vue";
+import venueInfoAsync from "@/subpackage/groupon/components/venue_info.vue";
 onLoad(() => {
     
 });
@@ -23,6 +23,14 @@ onLoad(() => {
             <view class="oh-line">订单编号：123456789012</view>
             <view class="oh-line">创建时间：2019-06-06  12:00:06</view>
         </view>
+        <view class="od-box od-venue-info">
+            <!-- 场次信息 -->
+            <venue-info-async>
+                <template #title>
+                    <view class="od-title">场次信息</view>
+                </template>
+            </venue-info-async>
+        </view>
         <view class="od-box od-product">
             <view class="od-title">产品信息</view>
             <text-line label="预定项目：">羽毛球</text-line>
@@ -52,10 +60,7 @@ onLoad(() => {
             <!-- 验证信息 -->
             <detail-verify></detail-verify>
         </view>
-        <view class="od-box">
-            <!-- 场次信息 -->
-            <detail-venue-info></detail-venue-info>
-        </view>
+        
         <view class="od-box od-code">
             <!-- 二维码 -->
             <image class="oc-code-img"></image>
@@ -190,6 +195,16 @@ onLoad(() => {
             }
         }
     }
+    .od-venue-info{
+        padding: 30upx;
+        .od-title{
+            &::after{
+                content: '';
+                display: block;
+                height: 20upx;
+            }
+        }
+    }
     .od-fixed{
         position: fixed;
         left: 0;