submit

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/pages.json

@@ -15,6 +15,16 @@
 			}
 		}
 		},
+		{
+			"path": "pages/ticket-details/index",
+			"style": {
+				"navigationBarTitleText": "",
+				"enablePullDownRefresh": false,
+				"app-plus": {
+					"titleNView": false // 禁用原生导航
+				}
+			}
+		},
 		{
 			"path": "pages/login/index",
 			"style": {

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>