submit

src/components/custom-title/index.vue

@@ -1,5 +1,8 @@
 <template>
   <div class="content2" :style="{height: `${menuButtonTop}px`}">
+    <div class="wrap2" v-if="isBack" @click="goBack">
+      <image src="../../static/tbys@3x.png"></image>
+    </div>
     <div class="wrap1" :style="{marginTop: `${titleTop}px`,height:`${titleHeight}px`}">{{title}}</div>
   </div>
 </template>
@@ -13,6 +16,11 @@ const rpxToPx=(rpx)=>{
 }
 const titleTop=ref(0)
 const titleHeight=ref(0)
+const goBack=()=>{
+  uni.navigateBack({
+    delta: 1
+  });
+}
 const   getMenuButtonBoundingClientRect=()=> {
   // #ifdef MP-WEIXIN
   const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
@@ -49,6 +57,17 @@ const back = () => {
   overflow: hidden;
   width:100vw;
   background-image: url("https://cdns.fontree.cn/fonchain-main/prod/image/1833/avatar/6f9f30f6-9383-4ae6-872c-4e6795eaa25f.png");
+  .wrap2{
+    left: 42rpx;
+    bottom: 26rpx;
+    position: absolute;
+    width: 18rpx;
+    height: 34rpx;
+    image{
+      width: 100%;
+      height: 100%;
+    }
+  }
   .wrap1{
     font-size: 34rpx;
     color: #fff;

src/main.ts

@@ -1,18 +1,18 @@
 import { createSSRApp } from "vue";
-import * as Pinia from "pinia";
 import tmui from "./tmui";
 import App from "./App.vue";
-
+import { createPinia } from 'pinia'
 import customTitle from "./components/custom-title/index.vue";
 import uniTransition from "@/components/uni-transition/uni-transition.vue";
 export function createApp() {
   const app = createSSRApp(App);
-
+  const pinia = createPinia()
+  app.use(pinia)
   app.component("customTitle", customTitle);
   app.component("uniTransition", uniTransition);
   app.use(tmui, { shareDisable: false } as Tmui.tmuiConfig);
   return {
     app,
-    Pinia,
+    pinia
   };
 }

src/pages.json

@@ -18,6 +18,18 @@
         }
       }
     },
+    {
+      "path": "pages/blind-box/index",
+      "style": {
+
+        "navigationStyle": "custom",
+        "navigationBarTitleText": "",
+        "enablePullDownRefresh": false,
+        "app-plus": {
+          "titleNView": false // 禁用原生导航
+        }
+      }
+    },
 	{
 		"path": "pages/home/index",
 		"style": {

src/pages/blind-box/index.vue

@@ -0,0 +1,108 @@
+<template>
+<div class="container">
+  <custom-title class="title-block" title="博物馆盲盒">
+  </custom-title>
+  <div class="main">
+    <div class="content1">
+      <div class="wrap1">
+        <image src="https://cdns.fontree.cn/fonchain-main/prod/image/1833/avatar/78a61919-6e1e-4b5d-96cc-1ecd94c00236.png"></image>
+      </div>
+      <div class="wrap2">博物馆开馆纪念盲盒</div>
+    </div>
+    <div class="content2">
+      <image src="https://cdns.fontree.cn/fonchain-main/prod/image/1833/avatar/76216159-e5a9-49ef-a6b3-6043924243e7.png"></image>
+    </div>
+    <div class="content3">领取兑换</div>
+    <div class="content4"></div>
+    <div class="content5">
+      <div class="wrap1" v-for="item in imgList" :key="item.url">
+        <image :src="item.url"></image>
+      </div>
+    </div>
+  </div>
+</div>
+</template>
+<script setup>
+import {ref} from 'vue'
+const imgList=ref([{url:'https://cdns.fontree.cn/fonchain-main/prod/image/1833/avatar/8395f322-b677-4f24-a13d-b79474c09d35.png'},{url:'https://cdns.fontree.cn/fonchain-main/prod/image/1833/avatar/8395f322-b677-4f24-a13d-b79474c09d35.png'}])
+</script>
+<style scoped lang="scss">
+.container{
+    display: flex;
+  flex-direction: column;
+  height: 100vh;
+  .main{
+    overflow-y: auto;
+    box-sizing: border-box;
+    padding: 32rpx 42rpx 0 42rpx;
+    width: 100vw;
+    flex: 1;
+    background-image: url('https://cdns.fontree.cn/fonchain-main/prod/image/1833/avatar/16968647-fc99-46fe-b95c-620c55b7646f.png');
+    background-size: 100%;
+    .content5{
+      margin-bottom: 90rpx;
+      margin-top: 20rpx;
+      width: 100%;
+      .wrap1{
+        margin-bottom: 20rpx;
+        width: 100%;
+        height:454rpx;
+        image{
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+    }
+    .content4 {
+      margin-top: 42rpx;
+      height: 1rpx;
+      width: 100%;
+      background-image: url("../../static/zx303@3x.png");
+      background-size: 100%;
+    }
+    .content3{
+      margin-top: 20rpx;
+      font-size: 24rpx;
+      color: #fff;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border-radius: 24rpx;
+      background-color: #B1292E;
+      width: 100%;
+      height: 82rpx;
+    }
+    .content2{
+      margin-top: 12rpx;
+      width: 100%;
+      image{
+        width: 100%;
+      }
+    }
+    .content1{
+      box-sizing: border-box;
+      background-image: url("https://cdns.fontree.cn/fonchain-main/prod/image/1833/avatar/793bc6e0-ba68-4085-b3e3-cbc8890c07af.png");
+      width: 100%;
+      height: 60rpx;
+      background-size: 100%;
+      display: flex;
+      align-items: center;
+      padding-left: 20rpx;
+      .wrap2{
+    font-size: 32rpx;
+        color: #fff;
+      }
+        .wrap1{
+          margin-right: 12rpx;
+          width: 39.75rpx;
+          height: 39.75rpx;
+          image{
+            width: 100%;
+            height: 100%;
+          }
+        }
+    }
+  }
+}
+</style>

src/pages/home/index.vue

@@ -1,6 +1,15 @@
 <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">剩余 23/20000</div>
+          <div class="wrap2_3">查看详情</div>
+      </div>
+    </div>
     <div class="content1">
       <div class="wrap1">门票名称</div>
       <div class="wrap2">剩余数量</div>
@@ -11,14 +20,14 @@
           <image :src="'../../static/112121@3x.png'"></image>
         </div>
         <div class="wrap1_2">首都博物馆门票</div>
-        <div class="wrap1_3">1023/20000</div>
+        <div class="wrap1_3">{{item.remainingQuantity===-1?'不限':item.remainingQuantity}}/{{item.issueQuantity===-1?'不限':item.issueQuantity}}</div>
         <div class="wrap1_4">预约</div>
       </div>
       <div class="wrap2">
         <image src="../../static/zu758@3x.png"></image>
       </div>
     </div>
-    <div class="attention" v-if="isShow">
+    <div class="attention" v-if="store.isShow">
       <div>
         注：港澳台游客请至现场办理门票业务！
       </div>
@@ -27,8 +36,12 @@
   </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([])
@@ -46,9 +59,14 @@ const getData=async ()=>{
     tableData.value=res.data.data
   }
 }
+const viewBlindBoxDetail=()=>{
+uni.navigateTo({
+  url: '/pages/blind-box/index'
+})
+}
 getData()
 const handleTips = () => {
-  isShow.value = false
+  store.isShow=false
 }
 </script>
 <style scoped lang="scss">
@@ -60,6 +78,51 @@ const handleTips = () => {
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
+  .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;
@@ -122,7 +185,7 @@ const handleTips = () => {
   }
   .content1 {
     box-sizing: border-box;
-    margin-top: 20rpx;
+
     width: 100%;
     background: #AB2F23;
     height: 70rpx;
@@ -148,7 +211,6 @@ const handleTips = () => {
       color: #FFFFFF;
     }
   }
-
   .container {
     overflow-y: auto;
     height: 1120rpx;
@@ -185,7 +247,7 @@ const handleTips = () => {
     background: #761C1F;
     height: 68rpx;
     color: #FFFFFF;
-    bottom: 150rpx;
+    bottom: 50rpx;
     padding: 16rpx 40rpx;
     box-sizing: border-box;
     border-radius: 24rpx;

src/pages/mine/index.vue

@@ -171,10 +171,9 @@ const goSetUp = () => {
     margin-top: 38rpx;
     height: 1rpx;
     width: 100%;
-    background-image: url("../../static/zx303@3x (1).png");
+    background-image: url("../../static/zx303@3x.png");
     background-size: 100%;
   }
-
   .content2 {
     margin-top: 34rpx;
     width: 686rpx;
@@ -183,7 +182,6 @@ const goSetUp = () => {
     background-color: #fff;
     border-radius: 40rpx;
     align-items: center;
-
     .wrap1 {
       border-radius: 30rpx;
       margin-left: 28rpx;

src/store/index.js

@@ -0,0 +1,10 @@
+import {defineStore} from 'pinia'
+import {ref} from 'vue'
+
+export const useMainStore = defineStore('main', () => {
+        const titleHeight = ref('')
+        const tabHeight = ref('')
+        const isShow = ref(true)
+        return {titleHeight, tabHeight, isShow}
+    }
+)