fix

src/components/display-box/index.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="content2">
+    <div class="wrap1" v-for="item in result">
+      <div class="wrap1_1">
+        <slot  :name="Object.keys(item).find(x=>x.includes('l'))"></slot>
+      </div>
+      <div class="wrap1_2">
+        <slot  :name="Object.keys(item).find(x=>x.includes('r'))"></slot>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup >
+import {useSlots,ref} from 'vue'
+const slots = useSlots();
+const groupObjectsByNumberKeys=(obj)=> {
+  const grouped = {};
+  for (const key in obj) {
+    const numericPart = key.slice(1);
+    if (!grouped[numericPart]) {
+      grouped[numericPart] = {};
+    }
+    grouped[numericPart][key] = obj[key];
+  }
+  return Object.values(grouped);
+}
+const result = ref(groupObjectsByNumberKeys(slots))
+</script>
+
+
+
+<style scoped lang="scss">
+.content2{
+  margin-top: 38rpx;
+  background-color: #fff;
+  border-radius: 20rpx;
+  padding-left: 18rpx;
+  padding-right: 32rpx;
+  .wrap1{
+    padding-left: 14rpx;
+    padding-top: 26rpx;
+    padding-bottom: 22rpx;
+    border-bottom: 1rpx solid #E4EAF1;;
+    display: flex;
+    .wrap1_2{
+      padding-left: 36rpx;
+      font-size: 24rpx;
+      color: #939393;
+    }
+    .wrap1_1{
+      display: flex;
+      align-items: center;
+      width: 192rpx;
+      border-right: 1rpx solid #E4EAF1;
+      .wrap1_1_1{
+        font-size: 24rpx;
+        color: #626262;
+        margin-right: 12rpx;
+      }
+      .wrap1_1_2{
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 16rpx;
+        color: #fff;
+        width: 80rpx;
+        height: 28rpx;
+        background-color:#FFCD5C ;
+        border-radius: 24rpx;
+
+      }
+    }
+
+  }
+}
+</style>

src/http/init.ts

@@ -1,5 +1,4 @@
 import {uniFetch} from "@/http/main";
-
 const fetch = new uniFetch({
     baseUrl: 'https://warehouse.szjixun.cn',
     interceptors: {

src/http/main.ts

@@ -1,5 +1,3 @@
-import {config} from "@/tmui/components/tm-message/interface";
-
 type HttpMethod =
     | "GET"
     | 'get'
@@ -84,7 +82,6 @@ class uniFetch {
     }
 
     private handleResponse(response: any): any {
-        // 执行响应拦截器（如果有）
         if (this.interceptors.response) {
             response = this.interceptors.response(response);
         }

src/pages/ticket-details/index.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="large-container">
+    <div class="content1">
+      <div class="wrap1">
+        <image src="../../static/zu1053@3x.png"></image>
+      </div>
+      <div class="wrap2">门票系统的某个场馆</div>
+    </div>
+    <div class="content2">
+      <image
+          src="https://cdns.fontree.cn/fonchain-main/prod/image/1833/avatar/2ec9fcae-55af-4ccd-8e92-6848282101bb.png"></image>
+    </div>
+    <display-box>
+      <template #l1>
+        <div class="box-left">
+          门票名称
+        </div>
+      </template>
+      <template #r1>
+        <div class="box-right">
+          首都博物馆门票
+        </div>
+      </template>
+      <template #l2>
+        <div class="box-left">
+          预留手机号(+86)
+        </div>
+      </template>
+      <template #r2>
+        <div class="box-right">
+          192119280121
+        </div>
+      </template>
+    </display-box>
+  </div>
+</template>
+<script setup>
+import displayBox from '../../components/display-box/index.vue'
+const list = [{}]
+</script>
+<style scoped lang="scss">
+.box-left{
+  font-size: 24rpx;
+  color: #000;
+}
+.box-right{
+  font-size: 24rpx;
+  color: #72665F;
+}
+.large-container {
+  flex-grow: 1;
+  background-image: url('https://cdns.fontree.cn/fonchain-main/prod/image/1833/avatar/16968647-fc99-46fe-b95c-620c55b7646f.png');
+  background-size: 100%;
+  padding: 32rpx 42rpx 0 42rpx;
+
+  .content2 {
+    margin-top: 12rpx;
+    width: 100%;
+
+    image {
+      width: 100%;
+      height: 354rpx;
+    }
+  }
+
+  .content1 {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 60rpx;
+    background-image: url("https://cdns.fontree.cn/fonchain-main/prod/image/1833/avatar/72db012a-0443-4977-956a-f9b20c6faa29.png");
+    background-size: 100%;
+
+    .wrap2 {
+      font-size: 32rpx;
+      color: #fff;
+    }
+
+    .wrap1 {
+      margin-right: 10rpx;
+      margin-left: 18rpx;
+
+      image {
+        width: 21.18rpx;
+        height: 29rpx;
+      }
+    }
+  }
+}
+</style>

src/pages/ticket/card/index.vue

@@ -1,53 +0,0 @@
-<template>
-    <div class="card">
-        <div class="card-item">
-            <div class="card-name">
-                姓名
-            </div>
-            <div style="margin-left: 20rpx; color: #000000;">
-                <input type="text" v-model="visitors.name" />
-            </div>
-        </div>
-        <tm-divider realColor></tm-divider>
-        <div class="card-name">
-            <div class="card-name">身份证号</div>
-            <div>
-                <input v-model="visitors.id" type="idcard" />
-            </div>
-        </div>
-    </div>
-</template>
-
-<script setup>
-import { ref, reactive } from 'vue';
-let visitorsList = ref([])
-let visitors = reactive({
-    name: '',
-    id: ''
-})
-</script>
-
-<style scoped lang="scss">
-.card {
-    margin-top: 20rpx;
-    width: 690rpx;
-    height: 190rpx;
-    background-color: #fff;
-    border-radius: 24rpx;
-    padding: 32rpx;
-    display: flex;
-    flex-direction: column;
-    box-sizing: border-box;
-    color: black;
-
-    .card-item {
-        display: flex;
-        align-items: center;
-    }
-
-    .card-name {
-        width: 200rpx;
-        border-right: 1rpx solid #BBC5E0;
-    }
-}
-</style>

src/pages/ticket/index.vue

@@ -47,8 +47,8 @@
                     <div class="name" style="color: #000000;border-right:1rpx solid #BBC5E0;">选择时间</div>
                     <div class="time">
                         <span style="width: 300rpx;">2023年12月16日</span>
-                        <div style="display: flex;align-items: center;">
+                        <div style="display: flex;align-items: center;" @click="showHandle">
-                            选择
+                            <span>选择</span>
                             <tm-icon name="tmicon-angle-right" :font-size="24"></tm-icon>
                         </div>
                     </div>
@@ -59,13 +59,29 @@
                     <div style="margin-left: 20rpx;" class="stepper">
                         <div style="color: #B29E92;font-size: 24rpx">*单次最多可预约10人</div>
                         <div>
-                            <tm-stepper v-model="reactive.num" color="#ef952e" bgColor="primary" circular :defaultValue="0"
+                            <tm-stepper v-model="formData.num" color="#ef952e" bgColor="primary" circular :defaultValue="0"
-                                :max="10" :height="40" :width="160" class="itme-stepper"></tm-stepper>
+                                :max="10" :height="40" :width="160" @change="changeNum"></tm-stepper>
                         </div>
                     </div>
                 </div>
             </div>
-            <Card></Card>
+            <div v-for="(item, index) in visitorsList" class="card" :key="index">
+                <div class="card-item">
+                    <div class="name">姓名</div>
+                    <div style="margin-left: 20rpx; color: #000000;">
+                        <input type="text" v-model="item.name" />
+                    </div>
+                </div>
+                <tm-divider realColor></tm-divider>
+                <div class="card-item">
+                    <div class="name">身份证号</div>
+                    <div style="margin-left: 20rpx; color: #000000;">
+                        <input type="idcard" v-model="item.idCard" />
+                    </div>
+                </div>
+            </div>
+            <tm-button @click="reservation" color="#000000" :width="436" :height="60" :round="25">预约</tm-button>
+            <select-day :show.sync="show"></select-day>
         </div>
     </div>
 </template>
@@ -73,18 +89,22 @@
 <script setup>
 import { onMounted, ref, reactive, watch } from "vue";
 import { useTimer } from '@/tmui/tool/useFun/useTimer'
-import Card from "./card/index"
+import selectDay from './select-day/index'
 const { start, stop, formattedTime, status, restart, timeObj, times, change } = useTimer({
     totalTime: 10, unit: 'ss', format: 'ss秒'
 });
 let height = ref(0)
 let code = ref('获取验证码')
 let isCode = ref(true)
+let show = ref(false)
 const formData = reactive({
     phone: '',
     code: '',
     num: 0
 })
+let visitorsList = ref([])
+const msg = ref(null)
+
 onMounted(() => {
     uni.createSelectorQuery().select('.title-block').boundingClientRect(data => {
         let res = uni.getSystemInfoSync();
@@ -99,15 +119,49 @@ const sendCode = () => {
     }
 }
 watch(times, (newValue) => {
-    console.log(newValue)
     if (newValue === 0) {
         code.value = '重新获取';
         isCode.value = true;
         stop()
     }
 })
+const changeNum = (value) => {
+    formData.num = value
+}
+watch(() => formData.num, (newValue, oldValue) => {
+    console.log(newValue, oldValue)
+    if (newValue > oldValue) {
+        for (let i = 0; i < newValue - oldValue; i++) {
+            visitorsList.value.push({
+                name: '',
+                idCard: ''
+            })
+        }
+    }
+    if (newValue < oldValue) {
+        visitorsList.value.splice(-(oldValue - newValue))
+    }
+})
 
-
+const reservation = () => {
+    console.log(visitorsList.value)
+    const result = visitorsList.value.filter((item) => item.name && item.idCard)
+    if (result.map((item) => item.idCard).some((n, index, arr) => arr.indexOf(n) !== index)) {
+        return uni.showToast({
+            title: '身份证不能重复',
+            icon: "error",
+        });
+    }
+    if (Object.values(formData).some((item) => !item)) {
+        return uni.showToast({
+            title: '信息填写完整',
+            icon: "error",
+        });
+    }
+}
+const showHandle = () => {
+    show.value = false
+}
 </script>
 
 <style lang="scss" scoped>
@@ -142,6 +196,30 @@ watch(times, (newValue) => {
             color: #fff;
         }
 
+        .card {
+            margin-top: 20rpx;
+            width: 100%;
+            height: 190rpx;
+            background-color: #fff;
+            border-radius: 24rpx;
+            padding: 32rpx;
+            display: flex;
+            flex-direction: column;
+            box-sizing: border-box;
+            color: black;
+
+            .card-item {
+                display: flex;
+                align-items: center;
+            }
+
+            .name {
+                width: 200rpx;
+                border-right: 1rpx solid #BBC5E0;
+            }
+
+        }
+
         .title-detail {
             margin-top: 20rpx;
             width: 100%;

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

@@ -0,0 +1,25 @@
+<template>
+    <div>
+        <tm-drawer placement="bottom" okText='确认' v-model:show="show" @close="close">
+        </tm-drawer>
+    </div>
+</template>
+
+<script setup>
+import { defineProps, onMounted, defineEmits, watch } from 'vue'
+const props = defineProps({
+    show: {
+        type: Boolean,
+        default: false
+    }
+})
+
+const emits = defineEmits(["update:show"]);
+
+
+const close = () => {
+    emits("update:show", false);
+}
+</script>
+
+<style lang="scss" scoped></style>