页面完成

package.json

@@ -49,8 +49,8 @@
         "@dcloudio/uni-mp-xhs": "3.0.0-3090820231124001",
         "@dcloudio/uni-quickapp-webview": "3.0.0-3090820231124001",
         "@xingyy/uni-fetch": "^1.0.2",
+        "dayjs": "^1.11.10",
         "echarts": "5.4.2",
-        "node-sass": "^9.0.0",
         "pinia": " 2.0.33",
         "sass": "^1.69.5",
         "sass-loader": "^13.3.2",

src/pages.json

@@ -1,74 +1,88 @@
 {
-	"easycom": {
+  "easycom": {
-		"autoscan": true,
+    "autoscan": true,
-		"custom": {
+    "custom": {
-			"^tm-(.*)": "@/tmui/components/tm-$1/tm-$1.vue"
+      "^tm-(.*)": "@/tmui/components/tm-$1/tm-$1.vue"
-		}
+    }
-	},
+  },
-	"pages": [{
+  "pages": [
-			"path": "pages/index/index",
+	{
+		"path": "pages/home/index",
 		"style": {
+			"navigationStyle": "custom",
 			"navigationBarTitleText": "",
 			"enablePullDownRefresh": false,
 			"app-plus": {
 				"titleNView": false // 禁用原生导航
 			}
 		}
-		},
-		{
-			"path": "pages/ticket/index",
-			"style": {
-				"navigationStyle": "custom",
-				"navigationBarTitleText": "",
-				"enablePullDownRefresh": false,
-				"app-plus": {
-					"titleNView": false // 禁用原生导航
-				}
-			}
-		},
-		{
-			"path": "pages/login/index",
-			"style": {
-				"navigationBarTitleText": "",
-				"enablePullDownRefresh": false,
-				"app-plus": {
-					"titleNView": false // 禁用原生导航
-				}
-			}
-		},
-		{
-			"path": "pages/setup/index",
-			"style": {
-				"navigationBarTitleText": "",
-				"enablePullDownRefresh": false,
-				"app-plus": {
-					"titleNView": false // 禁用原生导航
-				}
-			}
-		},
-		{
-			"path": "pages/view-venues/index",
-			"style": {
-				"navigationBarTitleText": "",
-				"enablePullDownRefresh": false,
-				"app-plus": {
-					"titleNView": false // 禁用原生导航
-				}
-			}
-		}
-	],
-	"globalStyle": {
-		"navigationBarTextStyle": "black",
-		"navigationBarTitleText": "uni-app",
-		"navigationBarBackgroundColor": "#FFFFFF",
-		"backgroundColor": "#FFFFFF"
 	},
-	"condition": {
+    {
-		"current": 0,
+      "path": "pages/index/index",
-		"list": [{
+      "style": {
-			"name": "",
+        "navigationBarTitleText": "",
-			"path": "",
+        "enablePullDownRefresh": false,
-			"query": ""
+        "app-plus": {
-		}]
+          "titleNView": false // 禁用原生导航
-	}
+        }
+      }
+    },
+    {
+      "path": "pages/ticket/index",
+      "style": {
+        "navigationStyle": "custom",
+        "navigationBarTitleText": "",
+        "enablePullDownRefresh": false,
+        "app-plus": {
+          "titleNView": false // 禁用原生导航
+        }
+      }
+    },
+    {
+      "path": "pages/login/index",
+      "style": {
+        "navigationBarTitleText": "",
+        "enablePullDownRefresh": false,
+        "app-plus": {
+          "titleNView": false // 禁用原生导航
+        }
+      }
+    },
+    {
+      "path": "pages/setup/index",
+      "style": {
+        "navigationBarTitleText": "",
+        "enablePullDownRefresh": false,
+        "app-plus": {
+          "titleNView": false // 禁用原生导航
+        }
+      }
+    },
+    {
+      "path": "pages/view-venues/index",
+      "style": {
+        "navigationBarTitleText": "",
+        "enablePullDownRefresh": false,
+        "app-plus": {
+          "titleNView": false // 禁用原生导航
+        }
+      }
+    }
+  ],
+  "globalStyle": {
+    "navigationBarTextStyle": "black",
+    "navigationBarTitleText": "uni-app",
+    "navigationBarBackgroundColor": "#FFFFFF",
+    "backgroundColor": "#FFFFFF"
+  },
+  "condition": {
+    "current": 0,
+    "list": [
+      {
+        "name": "",
+        "path": "",
+        "query": ""
+      }
+    ]
+  }
 }

src/pages/home/index.vue

@@ -1,23 +1,85 @@
 <template>
   <div class="main">
-    <div class="header">
+    <title class="title-block" title="首都博物馆东馆" :isBack="false">
-      <div>门票名称</div>
+    </title>
-      <div>剩余数量</div>
+    <div :style="{ height }" class="box">
-    </div>
+      <div class="header">
-    <div class="container">
+        <div>门票名称</div>
-      <div class="item">
+        <div>剩余数量</div>
-        <image src="@/static/logo.png" mode="scaleToFill" style="width: 174rpx;height: 108rpx;" />
+      </div>
-        <div class="detail">
+      <div class="container">
-          <div style="width: 140rpx;">首都博物馆门票</div>
+
-          <div>1023/20000</div>
+        <div class="item">
-          <tm-button color="#F7963B" :width="108" :height="56">预约</tm-button>
+          <image src="@/static/logo.png" mode="scaleToFill" style="width: 174rpx;height: 108rpx;" />
+          <div class="detail">
+            <div style="width: 140rpx;">首都博物馆门票</div>
+            <div>1023/20000</div>
+            <tm-button color="#F7963B" :width="108" :height="56">预约</tm-button>
+          </div>
+        </div>
+        <div class="item">
+          <image src="@/static/logo.png" mode="scaleToFill" style="width: 174rpx;height: 108rpx;" />
+          <div class="detail">
+            <div style="width: 140rpx;">首都博物馆门票</div>
+            <div>1023/20000</div>
+            <tm-button color="#F7963B" :width="108" :height="56">预约</tm-button>
+          </div>
+        </div>
+        <div class="item">
+          <image src="@/static/logo.png" mode="scaleToFill" style="width: 174rpx;height: 108rpx;" />
+          <div class="detail">
+            <div style="width: 140rpx;">首都博物馆门票</div>
+            <div>1023/20000</div>
+            <tm-button color="#F7963B" :width="108" :height="56">预约</tm-button>
+          </div>
+        </div>
+        <div class="item">
+          <image src="@/static/logo.png" mode="scaleToFill" style="width: 174rpx;height: 108rpx;" />
+          <div class="detail">
+            <div style="width: 140rpx;">首都博物馆门票</div>
+            <div>1023/20000</div>
+            <tm-button color="#F7963B" :width="108" :height="56">预约</tm-button>
+          </div>
+        </div>
+        <div class="item">
+          <image src="@/static/logo.png" mode="scaleToFill" style="width: 174rpx;height: 108rpx;" />
+          <div class="detail">
+            <div style="width: 140rpx;">首都博物馆门票</div>
+            <div>1023/20000</div>
+            <tm-button color="#F7963B" :width="108" :height="56">预约</tm-button>
+          </div>
+        </div>
+        <div class="item">
+          <image src="@/static/logo.png" mode="scaleToFill" style="width: 174rpx;height: 108rpx;" />
+          <div class="detail">
+            <div style="width: 140rpx;">首都博物馆门票</div>
+            <div>1023/20000</div>
+            <tm-button color="#F7963B" :width="108" :height="56">预约</tm-button>
+          </div>
         </div>
       </div>
-
+      <div class="attention" v-if="isShow">
+        <div>
+          注：港澳台游客请至现场办理门票业务！
+        </div>
+        <tm-icon name="tmicon-times-circle" color="#fff" :fontSize="24" @click="handleTips"></tm-icon>
+      </div>
     </div>
   </div>
 </template>
 <script setup>
+import { onMounted, ref } from "vue";
+let height = ref('')
+let isShow = ref(true)
+onMounted(() => {
+  uni.createSelectorQuery().select('.title-block').boundingClientRect(data => {
+    let res = uni.getSystemInfoSync();
+    height.value = res.windowHeight - data.bottom + 'px';
+  }).exec()
+})
+const handleTips = () => {
+  isShow.value = false
+}
 </script>
 <style scoped lang="scss">
 .main {
@@ -25,47 +87,73 @@
   width: 100%;
   background-image: url('https://cdns.fontree.cn/fonchain-main/prod/image/1833/avatar/16968647-fc99-46fe-b95c-620c55b7646f.png');
   background-size: 100%;
-  padding: 38rpx 32rpx;
+  padding: 0 32rpx 38rpx 32rpx;
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
 
-  .header {
+  .box {
     width: 100%;
-    background: #AB2F23;
-    height: 70rpx;
-    border-radius: 20rpx;
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
-    color: #FFFFFF;
-    font-size: 28rpx;
-  }
-
-  .container {
-    box-sizing: border-box;
-    flex: 1;
-    overflow-y: auto;
-    margin-top: 20rpx;
     display: flex;
     flex-direction: column;
-    padding-bottom: 2rpx;
+    box-sizing: border-box;
 
-    .item {
+    .header {
-      display: flex;
+      margin-top: 20rpx;
-      align-items: center;
+      width: 100%;
-      background: #FFFFFF;
+      background: #AB2F23;
+      height: 70rpx;
       border-radius: 20rpx;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+      color: #FFFFFF;
+      font-size: 28rpx;
+    }
+
+    .container {
+      overflow-y: auto;
+      height: 100%;
+      box-sizing: border-box;
+      margin-top: 20rpx;
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      padding-bottom: 2rpx;
       margin-bottom: 20rpx;
 
-      .detail {
+      .item {
-        flex: 1;
-        margin-left: 18rpx;
         display: flex;
         align-items: center;
-        justify-content: space-around;
+        background: #FFFFFF;
+        border-radius: 20rpx;
+        margin-bottom: 20rpx;
+
+        .detail {
+          flex: 1;
+          margin-left: 18rpx;
+          display: flex;
+          align-items: center;
+          justify-content: space-around;
+        }
       }
     }
+
+    .attention {
+      width: 664rpx;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      position: fixed;
+      background: #761C1F;
+      height: 68rpx;
+      color: #FFFFFF;
+      bottom: 20rpx;
+      padding: 16rpx 40rpx;
+      box-sizing: border-box;
+      border-radius: 24rpx;
+      font-size: 28rpx;
+    }
   }
 }
 </style>

src/pages/ticket/index.vue

@@ -80,8 +80,9 @@
                     </div>
                 </div>
             </div>
-            <tm-button @click="reservation" color="#000000" :width="436" :height="60" :round="25">预约</tm-button>
+            <tm-button @click="reservation" color="#000000" :width="436" :height="60" :round="25"
-            <select-day :show.sync="show"></select-day>
+                style="margin-top: 20rpx !important;">预约</tm-button>
+            <select-day v-model:show="show"></select-day>
         </div>
     </div>
 </template>
@@ -160,7 +161,7 @@ const reservation = () => {
     }
 }
 const showHandle = () => {
-    show.value = false
+    show.value = true
 }
 </script>
 

src/pages/ticket/select-day/index.vue

@@ -1,12 +1,82 @@
 <template>
     <div>
-        <tm-drawer placement="bottom" okText='确认' v-model:show="show" @close="close">
+        <tm-drawer placement="bottom" okText='确认' :show="show" :height="1054" :hideHeader=true>
+            <div class="container">
+                <tm-icon name="tmicon-times-circle" color="#ccc" class="icon-close" @click="close"></tm-icon>
+                <div class="title">请选择参观日期</div>
+                <tm-divider color="#868686"></tm-divider>
+                <div>当前年月日：{{ currentDate }}</div>
+                <tm-divider color="#868686"></tm-divider>
+                <div class="date-box">
+                    <div class="date-box-item" v-for="(item, index) in dateList" :key="index">
+                        <div :class="[index === currentIndex ? 'active' : '', 'date-box-item-day']"
+                            @click="chooseDatehandle($event, item.date, index)">
+                            <div :style="{ fontSize: '30rpx', fontWeight: '600' }">{{ item.date }}日·周{{
+                                dayChineseMap[item.week] }}
+                            </div>
+                            <div style="font-size: 22rpx;">*可预约</div>
+                        </div>
+                        <div style="font-size: 30rpx;color:#F7963B ;">{{ dayjs().format('MM-DD') + '日' == item.date
+                            ? '今日' : '明天' }}</div>
+                    </div>
+
+                    <div class="more-date" @click="changeMoreDate">
+                        <div style="font-size: 30rpx;width: 100rpx;">选择更多日期</div>
+                        <div>
+                            <tm-icon name="tmicon-angle-right" :fontSize="26" color="#fff"></tm-icon>
+                        </div>
+                    </div>
+                </div>
+                <tm-divider color="#868686"></tm-divider>
+                <div class="title">请选择参观日期</div>
+                <div class="time-box">
+                    <div class="time-box-item">
+                        <div :style="{ fontWeight: '600' }">08:00入场</div>
+                        <div :style="{ fontSize: '22rpx', }">*不可选</div>
+                    </div>
+                    <div class="time-box-item">
+                        <div :style="{ fontWeight: '600' }">08:00入场</div>
+                        <div :style="{ fontSize: '22rpx', }">*不可选</div>
+                    </div>
+                    <div class="time-box-item">
+                        <div :style="{ fontWeight: '600' }">08:00入场</div>
+                        <div :style="{ fontSize: '22rpx', }">*不可选</div>
+                    </div>
+                    <div class="time-box-item">
+                        <div :style="{ fontWeight: '600' }">08:00入场</div>
+                        <div :style="{ fontSize: '22rpx', }">*不可选</div>
+                    </div>
+                    <div class="time-box-item">
+                        <div :style="{ fontWeight: '600' }">08:00入场</div>
+                        <div :style="{ fontSize: '22rpx', }">*不可选</div>
+                    </div>
+                    <div class="time-box-item">
+                        <div :style="{ fontWeight: '600' }">08:00入场</div>
+                        <div :style="{ fontSize: '22rpx', }">*不可选</div>
+                    </div>
+                </div>
+                <tm-divider color="#868686"></tm-divider>
+                <div class="tips">
+                    <div>*参观当日需要携带游客本人身份证件</div>
+                    <div> *入馆时间：</div>
+                    <div>
+                        工作日08:30-18:00、节假日/双休09:00-20:00（具体时间以景区为准）
+                    </div>
+                </div>
+                <tm-divider color="#868686"></tm-divider>
+                <div style="margin: auto;">
+                    <tm-button color="#000000" :width="436" :height="60" :round="25">确定</tm-button>
+                </div>
+                <tm-calendar format="YYYY-MM-DD" @confirm="comfirmCal" color="#F7963B" v-model:show="isMoreDate" update:show
+                    :start="[dayjs()]" :end="[endDate]"></tm-calendar>
+            </div>
         </tm-drawer>
     </div>
 </template>
 
 <script setup>
-import { defineProps, onMounted, defineEmits, watch } from 'vue'
+import { defineProps, ref, defineEmits, watch, onMounted, computed } from 'vue'
+import dayjs from 'dayjs'
 const props = defineProps({
     show: {
         type: Boolean,
@@ -15,11 +85,143 @@ const props = defineProps({
 })
 
 const emits = defineEmits(["update:show"]);
-
+let currentIndex = ref(-1)
-
+let currentDate = ref('')
+let isMoreDate = ref(false)
+const dayChineseMap = ['日', '一', '二', '三', '四', '五', '六'];
+let dateList = ref([
+    {
+        date: dayjs().format('MM-DD'),
+        week: dayjs().day(),
+    },
+    {
+        date: dayjs().add(1, 'day').format('MM-DD'),
+        week: dayjs().add(1, 'day').day(),
+    }
+])
+const chooseDatehandle = (e, date, index) => {
+    currentDate.value = dayjs().year() + '-' + date
+    currentIndex.value = index
+}
 const close = () => {
     emits("update:show", false);
 }
+const changeMoreDate = () => {
+    isMoreDate.value = true
+}
+const endDate = computed(() => {
+    const lastDayOfMonth = dayjs().endOf('month');
+    const year = lastDayOfMonth.year();
+    const month = lastDayOfMonth.month() + 1;
+    const date = lastDayOfMonth.date();
+    return dayjs(year + '-' + month + '-' + date).add(2, 'month');
+});
+const comfirmCal = (date) => {
+    currentDate.value = date[0].split('/').join('-')
+}
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.container {
+    display: flex;
+    flex-direction: column;
+    padding: 30rpx 32rpx;
+    box-sizing: border-box;
+
+    .icon-close {
+        position: absolute;
+        right: 20rpx;
+        top: 20rpx;
+    }
+
+    .title {
+        font-size: 36rpx;
+    }
+
+    .date-box {
+        width: 100%;
+        display: flex;
+        margin: 20rpx 0;
+
+        .date-box-item {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+
+
+            .date-box-item-day {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: center;
+                margin-right: 20rpx;
+                height: 100rpx;
+                border-radius: 32rpx;
+                border: 1px solid #F7963B;
+                padding: 20rpx 18rpx;
+                box-sizing: border-box;
+                width: 240rpx;
+            }
+
+            .active {
+                background: #F7963B;
+                color: #fff;
+            }
+        }
+
+        .more-date {
+            display: flex;
+            padding: 20rpx 18rpx;
+            align-items: center;
+            justify-content: start;
+            height: 100rpx;
+            box-sizing: border-box;
+            border-radius: 32rpx;
+            color: #fff;
+            background-color: #F7963B;
+        }
+    }
+
+    .time-box::-webkit-scrollbar {
+        display: none;
+        /* 对于Webkit浏览器 */
+    }
+
+    .time-box {
+        width: 100%;
+        display: flex;
+        overflow-x: auto;
+        margin-top: 20rpx;
+        box-sizing: border-box;
+        -ms-overflow-style: none;
+        /* 对于IE和Edge */
+        scrollbar-width: none;
+        margin-bottom: 20rpx;
+
+        /* 对于Firefox */
+        .time-box-item {
+            flex-shrink: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-direction: column;
+            font-size: 30rpx;
+            padding: 20rpx;
+            margin-right: 20rpx;
+            border-radius: 32rpx;
+            border: 1rpx solid #F7963B;
+            width: 188rpx;
+            height: 114rpx;
+            box-sizing: border-box;
+        }
+    }
+
+    .tips {
+        display: flex;
+        flex-direction: column;
+        color: #B29E92;
+        font-size: 26rpx;
+    }
+}
+</style>