submit

src/pages/index/index.vue

@@ -19,7 +19,7 @@ onLoad((option)=>{
   }
 })
 const accTitleList=[{title:'首都博物馆东馆',value:0},{title:'智慧门票',value:1}]
-const acc=ref(0)
+const acc=ref(1)
 </script>
 <style lang="scss" scoped>
 .tab-index{

src/pages/mine/index.vue

@@ -31,20 +31,20 @@
     </div>
     <div class="content2">
       <div class="wrap1" :class="currentTab===0?['active']:[]"  @click="switchOptions(0)">
-        <div class="wrap1_1">2</div>
+        <div class="wrap1_1">{{tabList?.unusedNumber}}</div>
         <div class="wrap1_2">未使用门票</div>
       </div>
       <div class="wrap2"></div>
       <div class="wrap3" :class="currentTab===1?['active']:[]" @click="switchOptions(1)">
-        <div class="wrap1_1">3</div>
+        <div class="wrap1_1">{{tabList?.historyNumber}}</div>
         <div class="wrap1_2">历史门票</div>
       </div>
     </div>
     <div class="content3"></div>
     <div class="content4">·历史预约门票</div>
     <div class="content5">
-        <div class="wrap1">
+        <div class="wrap1" :style="{backgroundImage: item.ticketCoverPic}" v-for="(item,index) in tabList?.tickets">
-          <div class="wrap1_1 verified">已核销</div>
+          <div class="wrap1_1" :class="[`status${item.status}`]">{{statusList.find(x=>x.value===item.status).label}}</div>
           <div class="wrap1_2">
             <div class="wrap1_2_1">首都博物馆门票</div>
             <div class="wrap1_2_2">预约场馆:首都博物馆</div>
@@ -55,18 +55,6 @@
             <image src="../../static/zu762@3x.png" alt=""/>
           </div>
         </div>
-      <div class="wrap1">
-        <div class="wrap1_1 verified">已核销</div>
-        <div class="wrap1_2">
-          <div class="wrap1_2_1">首都博物馆门票</div>
-          <div class="wrap1_2_2">预约场馆:首都博物馆</div>
-          <div class="wrap1_2_2">预约日期:2023.12.30</div>
-          <div class="wrap1_2_2">预约类型:1</div>
-        </div>
-        <div class="wrap1_3" @click="goViewVenues">
-          <image src="../../static/zu762@3x.png" alt=""/>
-        </div>
-      </div>
     </div>
   </div>
 </template>
@@ -81,6 +69,36 @@ const userInfo = ref(uni.getStorageSync('userInfo') ?? {})
 onShow(() => {
   show.value = true
 })
+const tabList=ref(null)
+const statusList=ref([
+  {
+    label:'正常',
+    value:1
+  },
+  {
+    label:'已退票',
+    value:2
+  },
+  {
+    label:'已核销',
+    value:3
+  },
+  {
+    label:'已过期',
+    value:4
+  },
+  {
+    label:'未到时间',
+    value:5
+  }
+])
+const getData=async ()=>{
+  const res =await  unusedTickets()
+  if (res.code===200){
+    tabList.value=res.data
+  }
+}
+getData()
 const switchOptions=async (num)=>{
   let res
   if (num===0){
@@ -88,6 +106,10 @@ const switchOptions=async (num)=>{
   }else if (num===1){
     res=await  historicalTickets()
   }
+  if (res.code===200){
+    tabList.value=res.data
+  }
+  console.log( tabList.value,' tabList.value')
   console.log(res,'res')
 
   currentTab.value=num
@@ -112,21 +134,22 @@ const goSetUp = () => {
 <style scoped lang="scss">
 .large-container {
   overflow: hidden;
-
+  display: flex;
+  flex-direction: column;
   background-size: 100%;
   height: 80vh;
   padding: 0rpx 32rpx 0 32rpx;
 
   .content5 {
     margin-top: 14rpx;
-
+    flex-grow: 1;
+    overflow-y: auto;
     .wrap1 {
       position: relative;
       width: 686rpx;
       height: 210rpx;
       background-image: url("https://cdns.fontree.cn/fonchain-main/prod/image/1833/avatar/156dd8fa-e56d-4208-bc15-58eb273c146f.png");
       background-size: 100%;
-
       .wrap1_3 {
         bottom: 18rpx;
         right: 16rpx;
@@ -175,8 +198,15 @@ const goSetUp = () => {
         height: 40rpx;
         border-radius: 22rpx;
         font-size: 20rpx;
-
+        &.status2 {
-        &.verified {
+          background-color: #fff;
+          color: #FF5C62;
+        }
+        &.status4 {
+          background-color: #000000;
+          color: #fff;
+        }
+        &.status3 {
           background-color: #fff;
           color: #72665F;
         }
@@ -198,9 +228,10 @@ const goSetUp = () => {
     background-size: 100%;
   }
   .content2 {
+    flex-shrink: 0;
     margin-top: 34rpx;
     width: 686rpx;
-    height: 134rpx;
+    height: 134rpx!important;
     display: flex;
     background-color: #fff;
     border-radius: 40rpx;