From de3915db25c494efc0ad4f5156b4e0ccc6c52ec8 Mon Sep 17 00:00:00 2001
From: xingyy <373639591@qq.com>
Date: Wed, 20 Dec 2023 13:19:54 +0800
Subject: [PATCH] submit

---
 src/pages/home1/index.vue | 350 ++++++++++++++++++++++++++++++++++++++
 src/pages/index/index.vue |   4 +-
 2 files changed, 352 insertions(+), 2 deletions(-)
 create mode 100644 src/pages/home1/index.vue

diff --git a/src/pages/home1/index.vue b/src/pages/home1/index.vue
new file mode 100644
index 00000000..1155560b
--- /dev/null
+++ b/src/pages/home1/index.vue
@@ -0,0 +1,350 @@
+<template>
+  <div class="main">
+<!--    <div class="content3">
+      <div class="wrap1">
+        <image src="https://cdns.fontree.cn/fonchain-main/prod/image/1833/avatar/1d693295-c16b-4845-a02b-c052d9cf847a.png" /></div>
+      <div class="wrap2" @click="viewBlindBoxDetail">
+          <div class="wrap2_1">博物馆开馆纪念盲盒</div>
+          <div class="wrap2_2">剩余 {{allRemainingQty}}/{{allIssueQty}}</div>
+          <div class="wrap2_3">查看详情</div>
+      </div>
+    </div>
+    <div class="content1">
+      <div class="wrap1">门票名称</div>
+      <div class="wrap2">剩余数量</div>
+    </div>
+    <div class="content2">
+      <div class="wrap1" v-for="(item,index) in [...tableData,...tableData]" :key="item.id">
+        <div @click="viewImg(item)" class="wrap1_1">
+          <image :src="item.ticketImage"></image>
+        </div>
+        <div class="wrap1_2">{{item.ticketName}}</div>
+        <div class="wrap1_3" :class="item.remainingQuantity===0?['sold_out']:[]">{{item.remainingQuantity===-1?'不限':item.remainingQuantity}}/{{item.issueQuantity===-1?'不限':item.issueQuantity}}</div>
+        <div class="wrap1_4" @click="goBooking(item)"  :class="item.remainingQuantity===0?['sold_out']:[]">{{item.remainingQuantity===0?'无票':'预约'}}</div>
+      </div>
+      <div class="wrap2">
+        <image src="../../static/zu758@3x.png"></image>
+      </div>
+    </div>-->
+    <div class="content4">
+    <div class="wrap1">
+      <image src="https://cdns.fontree.cn/fonchain-main/prod/image/1833/avatar/13e8a0db-9dca-4bdf-89d5-5868ec7c96e0.png"></image>
+    </div>
+    <div class="wrap2" @click="viewBlindBoxDetail">
+      <div class="wrap2_1">
+        <div class="wrap2_1_1">博物馆开馆纪念盲盒</div>
+        <div class="wrap2_1_2">剩余 {{allRemainingQty}}/{{allIssueQty}}</div>
+      </div>
+      <div class="wrap2_2">查看详情</div>
+    </div>
+    </div>
+    <div class="attention" v-if="store.isShow">
+      <div>
+        注：港澳台游客请至现场办理门票业务！
+      </div>
+      <tm-icon name="tmicon-times-circle" color="#fff" :fontSize="24" @click="handleTips"></tm-icon>
+    </div>
+  </div>
+</template>
+<script setup>
+/* 导入区*/
+import {  ref } from "vue";
+import {ticketlist} from "@/http/apis";
+import {useMainStore} from "@/store";
+/**/
+const store=useMainStore()
+let height = ref('')
+let isShow = ref(true)
+const tableData=ref([])
+const page=ref(1)
+const pageSize=ref(9999)
+const viewImg=(item)=>{
+  uni.previewImage({
+    urls:[item.ticketImage],
+    indicator:'none'
+  })
+}
+const allIssueQty=ref(0)
+const allRemainingQty=ref(0)
+const getData=async ()=>{
+  const data={
+    "keyword": "",
+    "isMobile": 1,
+    "page": page.value,
+    "pageSize": pageSize.value
+  }
+  const res=await ticketlist(data)
+  if (res.code===200){
+    allIssueQty.value=res.data.allIssueQty
+    allRemainingQty.value=res.data.allRemainingQty
+    tableData.value=res.data.data
+  }
+}
+const goBooking=(item)=>{
+  if (item.remainingQuantity!==0){
+    uni.navigateTo({
+      url: '/pages/ticket/index'
+    })
+  }else {
+    uni.showToast({
+      title: '该门票已售罄',
+      icon: 'none',
+      duration: 1000
+    })
+  }
+  uni.setStorageSync('currentBooking',item)
+  store.currentBooking=item
+}
+const viewBlindBoxDetail=()=>{
+uni.navigateTo({
+  url: '/pages/blind-box/index'
+
+})
+}
+getData()
+const handleTips = () => {
+  store.isShow=false
+}
+</script>
+<style scoped lang="scss">
+.main {
+  height: 80vh;
+  width: 100%;
+  background-size: 100%;
+  padding: 0 32rpx 38rpx 32rpx;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  .content4{
+    margin-top: 40rpx;
+    width: 700rpx;
+    height: 576rpx;
+    border-radius: 20rpx;
+    box-sizing: border-box;
+    overflow: hidden;
+    .wrap2{
+      box-sizing: border-box;
+      padding-right: 48rpx;
+      padding-left: 48rpx;
+      justify-content: space-between;
+      background-color: #fff;
+      display: flex;
+    align-items: center;
+      width: 700rpx;
+      height: 120rpx;
+      .wrap2_2{
+        font-size: 24rpx;
+        color: #fff;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 240rpx;
+        height: 56rpx;
+        background-color: #F7963B;
+        border-radius: 20rpx;
+      }
+      .wrap2_1{
+        .wrap2_1_2{
+          font-size: 20rpx;
+          color: #F7963B;
+        }
+        .wrap2_1_1{
+          font-size: 28rpx;
+          color: #000000;
+
+        }
+
+      }
+    }
+
+    .wrap1{
+      width: 700rpx;
+      height: 456rpx;
+      image{
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+  .content3{
+    border-radius: 20rpx;
+    margin-bottom: 30rpx;
+    margin-top: 40rpx;
+    overflow: hidden;
+    display: flex;
+    .wrap2{
+      background-color: #fff;
+      width: 350rpx;
+      height: 214rpx;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      .wrap2_1{
+        margin-top: 40rpx;
+        font-size: 28rpx;
+        color: #000;
+      }
+     .wrap2_2{
+       margin-top: 8rpx;
+        font-size: 24rpx;
+        color: #F7963B;
+      }
+     .wrap2_3{
+       margin-top: 20rpx;
+       font-size: 24rpx;
+       display: flex;
+       justify-content: center;
+       align-items: center;
+       border-radius: 20rpx;
+       width: 240rpx;
+       height: 56rpx;
+       color: #fff;
+        background-color: #F7963B;
+      }
+    }
+    .wrap1{
+      width: 350rpx;
+      height: 214rpx;
+      image{
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+  .content2{
+    flex: 1;
+    overflow-y: scroll;
+    margin-top: 22rpx;
+    .wrap2{
+      margin-bottom: 68rpx;
+      margin-top: 68rpx;
+      display: flex;
+      justify-content: center;
+    image{
+      width: 587.8rpx;
+      height: 22rpx;
+    }
+    }
+    .wrap1{
+      margin-bottom: 18rpx;
+      border-radius: 20rpx;
+      background-color: #fff;
+      height: 108rpx;
+      width: 100%;
+      display: flex;
+      align-items: center;
+      overflow: hidden;
+      .wrap1_1{
+        box-sizing: border-box;
+        padding: 5rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        image{
+          width: 165rpx;
+          height: 100rpx;
+        }
+        margin-right: 18rpx;
+      }
+      .wrap1_4{
+        width: 108rpx;
+        height: 56rpx;
+        background-color: #F7963B;
+        border-radius: 20rpx;
+        display: flex;
+        color: #fff;
+        justify-content: center;
+        align-items: center;
+        &.sold_out{
+          background-color: #AFAFAF;
+        }
+      }
+      .wrap1_3{
+        color: #F7963B;
+        font-size: 24rpx;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 224rpx;
+        &.sold_out{
+          color: #AFAFAF;
+        }
+      }
+      .wrap1_2{
+        width: 140rpx;
+        height: 76rpx;
+      }
+    }
+  }
+  .content1 {
+    box-sizing: border-box;
+
+    width: 100%;
+    background: #AB2F23;
+    height: 70rpx;
+    border-radius: 20rpx;
+    display: flex;
+    align-items: center;
+    color: #FFFFFF;
+    font-size: 28rpx;
+    .wrap1 {
+      padding-right: 36rpx;
+      text-align: right;
+      width: 50%;
+      flex-shrink: 1;
+      font-size: 28rpx;
+      color: #FFFFFF;
+
+    }
+    .wrap2 {
+      padding-left: 36rpx;
+      width: 50%;
+      flex-shrink: 1;
+      font-size: 28rpx;
+      color: #FFFFFF;
+    }
+  }
+  .container {
+    overflow-y: auto;
+    height: 1120rpx;
+    box-sizing: border-box;
+    margin-top: 20rpx;
+    display: flex;
+    flex-direction: column;
+    padding-bottom: 2rpx;
+    margin-bottom: 20rpx;
+
+    .item {
+      overflow: hidden;
+      display: flex;
+      align-items: center;
+      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: 50rpx;
+    padding: 16rpx 40rpx;
+    box-sizing: border-box;
+    border-radius: 24rpx;
+    font-size: 28rpx;
+  }
+}
+</style>
diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index 1a7989a5..89970889 100644
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -2,13 +2,13 @@
  <div class="tab-index">
    <custom-title class="title-block" :title="accTitleList.find(x=>x.value===acc).title" :isBack="false">
    </custom-title>
-   <div class="ld  ld-float-ltr-in" v-show="acc===0"><home   /></div>
+   <div class="ld  ld-float-ltr-in" v-show="acc===0"><home1   /></div>
     <div v-show="acc===1" class="ld  ld-float-rtl-in"><mine  /></div>
    <self-tabbar v-model="acc"></self-tabbar>
  </div>
 </template>
 <script  setup>
-import home from '../home/index.vue'
+import home1 from '../home1/index.vue'
 import mine from '../mine/index.vue'
 import selfTabbar from '../../components/self-tabbar/index.vue'
 import {ref} from "vue";