submit

src/http/apis.js

@@ -79,3 +79,9 @@ export const getQrCode= (data) => {
         responseType: 'arraybuffer'
     })
 }
+export const getTicketPerInfo= (data) => {
+    return uniReq.post({
+        url: '/api/smart/appointment/get/ticket/info',
+        data
+    })
+}

src/pages/mine/index.vue

@@ -43,8 +43,7 @@
     <div class="content3"></div>
     <div class="content4" :style="{color:currentTab===0?'#EB783C':'#72665F'}">{{currentTab===0?'·我未使用的票务':'·历史预约门票'}}</div>
     <div class="content5">
-      <div class="wrap1"  :class="[`status${item.status}`]" v-for="(item,index) in tabList?.tickets" :key="item.appointmentUid">
-
+      <div class="wrap1" @click="goDetail(item)"  :class="[`status${item.status}`]" v-for="(item,index) in tabList?.tickets" :key="item.appointmentUid">
       <div class="wrap1_5">
         <image :src="item.ticketCoverPic"></image>
       </div>
@@ -117,6 +116,12 @@ const statusList=ref([
     value:6
   }
 ])
+const goDetail=(item)=>{
+  uni.setStorageSync('ticket',item)
+  uni.navigateTo({
+    url: '/pages/ticket-details/index'
+  })
+}
 const getData=async ()=>{
   const res =await  unusedTickets()
   if (res.code===200){

src/pages/ticket-details/index.vue

@@ -6,11 +6,11 @@
       <div class="wrap1">
         <image src="../../static/zu1053@3x.png"></image>
       </div>
-      <div class="wrap2">门票系统的某个场馆</div>
+      <div class="wrap2">{{ticket.ticketName}}</div>
     </div>
     <div class="content2">
       <image
-          src="https://cdns.fontree.cn/fonchain-main/prod/image/1833/avatar/2ec9fcae-55af-4ccd-8e92-6848282101bb.png"></image>
+          :src="ticket.ticketCoverPic"></image>
     </div>
     <div class="content3">
       <display-box>
@@ -21,7 +21,7 @@
         </template>
         <template #r1>
           <div class="box-right">
-            首都博物馆门票
+            {{ticket.ticketName}}
           </div>
         </template>
         <template #l2>
@@ -31,7 +31,7 @@
         </template>
         <template #r2>
           <div class="box-right">
-            192119280121
+            {{ticket.phone}}
           </div>
         </template>
         <template #l3>
@@ -41,7 +41,7 @@
         </template>
         <template #r3>
           <div class="box-right">
-            2023年12月16日
+            {{dayjs(ticket.date).format('YYYY年MM月DD日')}}
           </div>
         </template>
         <template #l4>
@@ -51,7 +51,7 @@
         </template>
         <template #r4>
           <div class="box-right">
-            2
+            {{ticket.number}}
           </div>
         </template>
       </display-box>
@@ -61,7 +61,7 @@
     <div class="content5">
       *参观人的身份证信息
     </div>
-    <div class="content6">
+    <div class="content6" v-for="item in perList">
       <display-box>
         <template #l1>
           <div class="box-left">
@@ -70,13 +70,13 @@
         </template>
         <template #r1>
           <div class="box-right" style="display: flex;align-items: center">
-            <div style="margin-right: 32rpx">陈X</div>
-            <div style="width: 112rpx;height: 40rpx;background-color: #000;color: #fff;font-size: 20rpx;border-radius: 22rpx;display: flex;justify-content: center;align-items: center">已过期</div>
+            <div style="margin-right: 32rpx">{{item.userName}}</div>
+            <div v-if="statusList.find(x=>x.value===item.status).label" style="width: 112rpx;height: 40rpx;background-color: #000;color: #fff;font-size: 20rpx;border-radius: 22rpx;display: flex;justify-content: center;align-items: center">{{statusList.find(x=>x.value===item.status).label}}</div>
           </div>
         </template>
         <template #l2>
           <div class="box-left">
-            预留手机号(+86)
+            身份证号
           </div>
         </template>
         <template #r2>
@@ -84,33 +84,52 @@
             192119280121
           </div>
         </template>
-        <template #l3>
-          <div class="box-left">
-            预约时间
-          </div>
-        </template>
-        <template #r3>
-          <div class="box-right">
-            2023年12月16日
-          </div>
-        </template>
-        <template #l4>
-          <div class="box-left">
-            预约人数
-          </div>
-        </template>
-        <template #r4>
-          <div class="box-right">
-            2
-          </div>
-        </template>
       </display-box>
     </div>
   </div>
 </template>
 <script setup>
 import displayBox from '../../components/display-box/index.vue'
+import {ref} from "vue";
+import dayjs from "dayjs";
+import {getTicketPerInfo} from "@/http/apis";
 const list = [{}]
+const statusList=ref([
+  {
+    label:'',
+    value:1
+  },
+  {
+    label:'已退票',
+    value:2
+  },
+  {
+    label:'已核销',
+    value:3
+  },
+  {
+    label:'已过期',
+    value:4
+  },
+  {
+    label:'',
+    value:5
+  },
+  {
+    label:'盲盒',
+    value:6
+  }
+])
+const ticket=ref(uni.getStorageSync('ticket'))
+const perList=ref(null)
+const getInfo=async ()=>{
+ const res= await getTicketPerInfo({
+    appointmentUid:ticket.value.appointmentUid
+  })
+  perList.value=res.data.userInfo
+  console.log(perList.value,'perList.value')
+}
+getInfo()
 </script>
 <style scoped lang="scss">
 .box-left{
@@ -126,6 +145,10 @@ const list = [{}]
   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;
+  .content6{
+    margin-top: 12rpx;
+    margin-bottom: 24rpx;
+  }
   .content5{
     margin-top: 24rpx;
     color:#F7963B ;