完善个人中心电子票

package.json

@@ -32,6 +32,7 @@
     "vconsole": "^3.15.1",
     "vue": "^3.4.15",
     "vue-cookies": "^1.8.3",
+    "vue-qr": "^4.0.9",
     "vue-router": "^4.2.5"
   },
   "devDependencies": {

pnpm-lock.yaml

@@ -53,6 +53,9 @@ dependencies:
   vue-cookies:
     specifier: ^1.8.3
     version: 1.8.3
+  vue-qr:
+    specifier: ^4.0.9
+    version: 4.0.9
   vue-router:
     specifier: ^4.2.5
     version: 4.2.5(vue@3.4.15)
@@ -3063,7 +3066,6 @@ packages:
 
   /balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
-    dev: true
 
   /binary-extensions@2.2.0:
     resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==}
@@ -3089,7 +3091,6 @@ packages:
     resolution: {integrity: sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==}
     dependencies:
       balanced-match: 1.0.2
-    dev: true
 
   /braces@3.0.2:
     resolution: {integrity: sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==}
@@ -3464,6 +3465,13 @@ packages:
       ms: 2.1.2
     dev: true
 
+  /decompress-response@6.0.0:
+    resolution: {integrity: sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==}
+    engines: {node: '>=10'}
+    dependencies:
+      mimic-response: 3.1.0
+    dev: false
+
   /deep-eql@4.1.3:
     resolution: {integrity: sha512-WaEtAOpRA1MQ0eohqZjpGD8zdI0Ovsm8mmFhaDN8dvDZzyoUMcYDnf5Y6iu7HTXxf8JDS23qWa4a+hKCDyOPzw==}
     engines: {node: '>=6'}
@@ -4294,7 +4302,6 @@ packages:
 
   /fs.realpath@1.0.0:
     resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
-    dev: true
 
   /fsevents@2.3.3:
     resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
@@ -4388,6 +4395,17 @@ packages:
       path-is-absolute: 1.0.1
     dev: true
 
+  /glob@8.1.0:
+    resolution: {integrity: sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==}
+    engines: {node: '>=12'}
+    dependencies:
+      fs.realpath: 1.0.0
+      inflight: 1.0.6
+      inherits: 2.0.4
+      minimatch: 5.1.6
+      once: 1.4.0
+    dev: false
+
   /globals@11.12.0:
     resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==}
     engines: {node: '>=4'}
@@ -4575,11 +4593,9 @@ packages:
     dependencies:
       once: 1.4.0
       wrappy: 1.0.2
-    dev: true
 
   /inherits@2.0.4:
     resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
-    dev: true
 
   /is-alphabetical@1.0.4:
     resolution: {integrity: sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg==}
@@ -4710,6 +4726,10 @@ packages:
     requiresBuild: true
     dev: true
 
+  /js-binary-schema-parser@2.0.3:
+    resolution: {integrity: sha512-xezGJmOb4lk/M1ZZLTR/jaBHQ4gG/lqQnJqdIv4721DMggsa1bDVlHXNeHYogaIEHD9vCRv0fcL4hMA+Coarkg==}
+    dev: false
+
   /js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
     dev: true
@@ -5005,6 +5025,11 @@ packages:
     engines: {node: '>=12'}
     dev: true
 
+  /mimic-response@3.1.0:
+    resolution: {integrity: sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==}
+    engines: {node: '>=10'}
+    dev: false
+
   /min-indent@1.0.1:
     resolution: {integrity: sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==}
     engines: {node: '>=4'}
@@ -5016,6 +5041,13 @@ packages:
       brace-expansion: 1.1.11
     dev: true
 
+  /minimatch@5.1.6:
+    resolution: {integrity: sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==}
+    engines: {node: '>=10'}
+    dependencies:
+      brace-expansion: 2.0.1
+    dev: false
+
   /minimatch@9.0.3:
     resolution: {integrity: sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==}
     engines: {node: '>=16 || 14 >=14.17'}
@@ -5202,7 +5234,6 @@ packages:
     resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
     dependencies:
       wrappy: 1.0.2
-    dev: true
 
   /onetime@5.1.2:
     resolution: {integrity: sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==}
@@ -5296,6 +5327,10 @@ packages:
       callsites: 3.1.0
     dev: true
 
+  /parenthesis@3.1.8:
+    resolution: {integrity: sha512-KF/U8tk54BgQewkJPvB4s/US3VQY68BRDpH638+7O/n58TpnwiwnOtGIOsT2/i+M78s61BBpeC83STB88d8sqw==}
+    dev: false
+
   /parse-entities@2.0.0:
     resolution: {integrity: sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ==}
     dependencies:
@@ -5785,6 +5820,18 @@ packages:
     engines: {node: '>=14'}
     dev: true
 
+  /simple-concat@1.0.1:
+    resolution: {integrity: sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q==}
+    dev: false
+
+  /simple-get@4.0.1:
+    resolution: {integrity: sha512-brv7p5WgH0jmQJr1ZDDfKDOSeWWg+OVypG99A/5vYGPqJ6pxiaHLy8nxtFjBA7oMa01ebA9gfh1uMCFqOuXxvA==}
+    dependencies:
+      decompress-response: 6.0.0
+      once: 1.4.0
+      simple-concat: 1.0.1
+    dev: false
+
   /sirv@2.0.4:
     resolution: {integrity: sha512-94Bdh3cC2PKrbgSOUqTiGPWVZeSiXfKOVZNJniWoqrWrRkB1CJzBU3NEbiTsPcYy1lDsANA/THzS+9WBiy5nfQ==}
     engines: {node: '>= 10'}
@@ -5880,6 +5927,12 @@ packages:
     engines: {node: '>=0.6.19'}
     dev: true
 
+  /string-split-by@1.0.0:
+    resolution: {integrity: sha512-KaJKY+hfpzNyet/emP81PJA9hTVSfxNLS9SFTWxdCnnW1/zOOwiV248+EfoX7IQFcBaOp4G5YE6xTJMF+pLg6A==}
+    dependencies:
+      parenthesis: 3.1.8
+    dev: false
+
   /string-width@4.2.3:
     resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
     engines: {node: '>=8'}
@@ -6639,6 +6692,15 @@ packages:
       - supports-color
     dev: true
 
+  /vue-qr@4.0.9:
+    resolution: {integrity: sha512-pAISV94T0MNEYA3NGjykUpsXRE2QfaNxlu9ZhEL6CERgqNc21hJYuP3hRVzAWfBQlgO18DPmZTbrFerJC3+Ikw==}
+    dependencies:
+      glob: 8.1.0
+      js-binary-schema-parser: 2.0.3
+      simple-get: 4.0.1
+      string-split-by: 1.0.0
+    dev: false
+
   /vue-router@4.2.5(vue@3.4.15):
     resolution: {integrity: sha512-DIUpKcyg4+PTQKfFPX88UWhlagBEBEfJ5A8XDXRJLUnZOvcpMF8o/dnL90vpVkGaPbjvXazV/rC1qBKrZlFugw==}
     peerDependencies:
@@ -6718,7 +6780,6 @@ packages:
 
   /wrappy@1.0.2:
     resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
-    dev: true
 
   /ws@8.16.0:
     resolution: {integrity: sha512-HS0c//TP7Ina87TfiPUz1rQzMhHrl/SG2guqRcTOIUYD2q8uhUdNHZYJUaQ8aTGPzCh+c6oawMKW35nFl1dxyQ==}

src/components.d.ts

@@ -10,11 +10,13 @@ declare module 'vue' {
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     VanButton: typeof import('vant/es')['Button']
+    VanCell: typeof import('vant/es')['Cell']
     VanCheckbox: typeof import('vant/es')['Checkbox']
     VanConfigProvider: typeof import('vant/es')['ConfigProvider']
     VanField: typeof import('vant/es')['Field']
     VanForm: typeof import('vant/es')['Form']
     VanIcon: typeof import('vant/es')['Icon']
+    VanNavBar: typeof import('vant/es')['NavBar']
     VanTag: typeof import('vant/es')['Tag']
   }
 }

src/typed-router.d.ts

@@ -0,0 +1,146 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-vue-router. ‼️ DO NOT MODIFY THIS FILE ‼️
+// It's recommended to commit this file.
+// Make sure to add this file to your tsconfig.json file as an "includes" or "files" entry.
+
+/// <reference types="unplugin-vue-router/client" />
+
+import type {
+  // type safe route locations
+  RouteLocationTypedList,
+  RouteLocationResolvedTypedList,
+  RouteLocationNormalizedTypedList,
+  RouteLocationNormalizedLoadedTypedList,
+  RouteLocationAsString,
+  RouteLocationAsRelativeTypedList,
+  RouteLocationAsPathTypedList,
+
+  // helper types
+  // route definitions
+  RouteRecordInfo,
+  ParamValue,
+  ParamValueOneOrMore,
+  ParamValueZeroOrMore,
+  ParamValueZeroOrOne,
+
+  // vue-router extensions
+  _RouterTyped,
+  RouterLinkTyped,
+  RouterLinkPropsTyped,
+  NavigationGuard,
+  UseLinkFnTyped,
+
+  // data fetching
+  _DataLoader,
+  _DefineLoaderOptions,
+} from 'unplugin-vue-router/types'
+
+declare module 'vue-router/auto/routes' {
+  export interface RouteNamedMap {
+  export interface RouteNamedMap {
+    '//': RouteRecordInfo<'//', '/', Record<never, never>, Record<never, never>>,
+  }  '/signUp/': RouteRecordInfo<'/signUp/', '/signUp', Record<never, never>, Record<never, never>>,
+    '/signUp/components/FormItem': RouteRecordInfo<'/signUp/components/FormItem', '/signUp/components/FormItem', Record<never, never>, Record<never, never>>,
+    '/signUp/components/SignForm': RouteRecordInfo<'/signUp/components/SignForm', '/signUp/components/SignForm', Record<never, never>, Record<never, never>>,
+    '/user/': RouteRecordInfo<'/user/', '/user', Record<never, never>, Record<never, never>>,
+  }
+}
+
+declare module 'vue-router/auto' {
+  import type { RouteNamedMap } from 'vue-router/auto/routes'
+
+  export type RouterTyped = _RouterTyped<RouteNamedMap>
+
+  /**
+   * Type safe version of `RouteLocationNormalized` (the type of `to` and `from` in navigation guards).
+   * Allows passing the name of the route to be passed as a generic.
+   */
+  export type RouteLocationNormalized<Name extends keyof RouteNamedMap = keyof RouteNamedMap> = RouteLocationNormalizedTypedList<RouteNamedMap>[Name]
+
+  /**
+   * Type safe version of `RouteLocationNormalizedLoaded` (the return type of `useRoute()`).
+   * Allows passing the name of the route to be passed as a generic.
+   */
+  export type RouteLocationNormalizedLoaded<Name extends keyof RouteNamedMap = keyof RouteNamedMap> = RouteLocationNormalizedLoadedTypedList<RouteNamedMap>[Name]
+
+  /**
+   * Type safe version of `RouteLocationResolved` (the returned route of `router.resolve()`).
+   * Allows passing the name of the route to be passed as a generic.
+   */
+  export type RouteLocationResolved<Name extends keyof RouteNamedMap = keyof RouteNamedMap> = RouteLocationResolvedTypedList<RouteNamedMap>[Name]
+
+  /**
+   * Type safe version of `RouteLocation` . Allows passing the name of the route to be passed as a generic.
+   */
+  export type RouteLocation<Name extends keyof RouteNamedMap = keyof RouteNamedMap> = RouteLocationTypedList<RouteNamedMap>[Name]
+
+  /**
+   * Type safe version of `RouteLocationRaw` . Allows passing the name of the route to be passed as a generic.
+   */
+  export type RouteLocationRaw<Name extends keyof RouteNamedMap = keyof RouteNamedMap> =
+    | RouteLocationAsString<RouteNamedMap>
+    | RouteLocationAsRelativeTypedList<RouteNamedMap>[Name]
+    | RouteLocationAsPathTypedList<RouteNamedMap>[Name]
+
+  /**
+   * Generate a type safe params for a route location. Requires the name of the route to be passed as a generic.
+   */
+  export type RouteParams<Name extends keyof RouteNamedMap> = RouteNamedMap[Name]['params']
+  /**
+   * Generate a type safe raw params for a route location. Requires the name of the route to be passed as a generic.
+   */
+  export type RouteParamsRaw<Name extends keyof RouteNamedMap> = RouteNamedMap[Name]['paramsRaw']
+
+  export function useRouter(): RouterTyped
+  export function useRoute<Name extends keyof RouteNamedMap = keyof RouteNamedMap>(name?: Name): RouteLocationNormalizedLoadedTypedList<RouteNamedMap>[Name]
+
+  export const useLink: UseLinkFnTyped<RouteNamedMap>
+
+  export function onBeforeRouteLeave(guard: NavigationGuard<RouteNamedMap>): void
+  export function onBeforeRouteUpdate(guard: NavigationGuard<RouteNamedMap>): void
+
+  export const RouterLink: RouterLinkTyped<RouteNamedMap>
+  export const RouterLinkProps: RouterLinkPropsTyped<RouteNamedMap>
+
+  // Experimental Data Fetching
+
+  export function defineLoader<
+    P extends Promise<any>,
+    Name extends keyof RouteNamedMap = keyof RouteNamedMap,
+    isLazy extends boolean = false,
+  >(
+    name: Name,
+    loader: (route: RouteLocationNormalizedLoaded<Name>) => P,
+    options?: _DefineLoaderOptions<isLazy>,
+  ): _DataLoader<Awaited<P>, isLazy>
+  export function defineLoader<
+    P extends Promise<any>,
+    isLazy extends boolean = false,
+  >(
+    loader: (route: RouteLocationNormalizedLoaded) => P,
+    options?: _DefineLoaderOptions<isLazy>,
+  ): _DataLoader<Awaited<P>, isLazy>
+
+  export {
+    _definePage as definePage,
+    _HasDataLoaderMeta as HasDataLoaderMeta,
+    _setupDataFetchingGuard as setupDataFetchingGuard,
+    _stopDataFetchingScope as stopDataFetchingScope,
+  } from 'unplugin-vue-router/runtime'
+}
+
+declare module 'vue-router' {
+  import type { RouteNamedMap } from 'vue-router/auto/routes'
+
+  export interface TypesConfig {
+    beforeRouteUpdate: NavigationGuard<RouteNamedMap>
+    beforeRouteLeave: NavigationGuard<RouteNamedMap>
+
+    $route: RouteLocationNormalizedLoadedTypedList<RouteNamedMap>[keyof RouteNamedMap]
+    $router: _RouterTyped<RouteNamedMap>
+
+    RouterLink: RouterLinkTyped<RouteNamedMap>
+  }
+}

src/views/signUp/components/FormItem.vue

@@ -6,6 +6,10 @@ defineProps({
     type: Object as PropType<any>,
     required: true,
   },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
 })
 
 const form = defineModel({
@@ -22,6 +26,7 @@ const form = defineModel({
       v-model="form[item.paramsName]"
       :name="item.name"
       :label="item.name"
+      :disabled="disabled"
       :placeholder="`请输入${item.name}`"
       :rules="[{ required: true, message: `请输入${item.name}` }]"
     />

src/views/signUp/components/SignForm.vue

@@ -5,10 +5,18 @@ import FormItem from './FormItem.vue'
 import { getSignUpFormConfig, signUp, smsSend } from '@/api/mice'
 import useUserStore from '@/stores/modules/user'
 
+defineProps({
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+})
+
 const form = defineModel({
   type: Object as PropType<any>,
   required: true,
 })
+
 const userStore = useUserStore()
 const miceLink = getUrlMiceLink()
 
@@ -42,16 +50,11 @@ async function sendSmsHandler() {
 
 <template>
   <van-form :required="true" class="bg-white py-4" @submit="onSubmit">
-    <FormItem v-for="(item, index) in formConfigs" :key="index" v-model="form" :item="item" />
+    <FormItem v-for="(item, index) in formConfigs" :key="index" v-model="form" :disabled="disabled" :item="item" />
 
+    <div v-if="!disabled">
       <!-- 验证码 -->
-    <van-field
+      <van-field v-model="form.verifyCode" center clearable label="短信验证码" placeholder="请输入短信验证码">
-      v-model="form.verifyCode"
-      center
-      clearable
-      label="短信验证码"
-      placeholder="请输入短信验证码"
-    >
         <template #button>
           <van-button size="small" type="primary" @click="sendSmsHandler">
             发送验证码
@@ -72,5 +75,6 @@ async function sendSmsHandler() {
           提交
         </van-button>
       </div>
+    </div>
   </van-form>
 </template>

src/views/signUp/index.vue

@@ -7,7 +7,6 @@ const userStore = useUserStore()
 
 const router = useRouter()
 
-const formConfigs = ref<any[]>([])
 const form = ref({})
 const userIsApply = ref(false)
 
@@ -39,6 +38,6 @@ onMounted(() => {
       src="https://sn202108-1305501521.cos.ap-shanghai.myqcloud.com/202401162355044675902.jpg"
       alt=""
     >
-    <SignForm v-model="form" :form-configs="formConfigs" />
+    <SignForm v-model="form" />
   </div>
 </template>

src/views/user/index.vue

@@ -1,7 +1,11 @@
 <script setup lang="ts">
+import vueQr from 'vue-qr/src/packages/vue-qr.vue'
+import useMiceStore from '@/stores/modules/mice'
 import useUserStore from '@/stores/modules/user'
+import SignForm from '@/views/signUp/components/SignForm.vue'
 
 const userStore = useUserStore()
+const miceStore = useMiceStore()
 
 const userApplyInfo = ref<any>({})
 
@@ -14,7 +18,114 @@ onMounted(() => {
 
 <template>
   <div>
-    个人中心
+    <van-nav-bar
-    {{ userApplyInfo }}
+      title="个人中心" left-text="返回"
+      left-arrow
+      @click-left="$router.back()"
+    />
+    <van-cell v-if="userApplyInfo.auditStatus !== 1" title="报名状态" :value="userApplyInfo.auditStatus === 2 ? '审核不通过' : '审核中'" />
+
+    <!-- 电子票 -->
+
+    <!-- 报名字段信息 -->
+    <div class="card">
+      <SignForm v-if="userApplyInfo.auditStatus === 2" v-model="userApplyInfo" :disabled="true" />
+      <SignForm v-else-if="userApplyInfo.auditStatus === 3" v-model="userApplyInfo" :disabled="true" />
+      <div v-else class="ticket-wrapper">
+        <div class="ticket-header van-hairline--bottom">
+          {{ miceStore.miceInfo.miceName }}
+        </div>
+        <!-- 展示字段 -->
+        <div class="ticket-field">
+          <div class="field-item">
+            <div class="field-label">
+              姓名
+            </div>
+            <div class="field-value">
+              {{ userApplyInfo.name }}
+            </div>
+          </div>
+          <div class="field-item">
+            <div class="field-label">
+              手机号
+            </div>
+            <div class="field-value">
+              {{ userApplyInfo.phone }}
+            </div>
+          </div>
+        </div>
+
+        <!-- 电子票 -->
+        <div class="ticket-qrcode">
+          <span>签到二维码</span>
+          <vue-qr :text="userApplyInfo.code" />
+          <div class="tips">
+            出示二维码，签到更方便
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
+
+<style scoped lang="less">
+.card {
+  margin-top: 10px;
+  background-color: #fff;
+  border-radius: 10px;
+  width: 96%;
+  margin-left: 2%;
+}
+
+.ticket-wrapper {
+  border-radius: 10px;
+  overflow: hidden;
+  .ticket-header {
+    height: 75px;
+    // background-color: #1989FA;
+    // color: white;
+    text-align: center;
+    line-height: 75px;
+    font-weight: 700;
+    font-size: 18px;
+  }
+  .ticket-field {
+    padding: 20px;
+    .field-item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 2px 0;
+      .field-label {
+        font-size: 13px;
+        color: #333;
+      }
+      .field-value {
+        font-size: 13px;
+        color: #666;
+      }
+    }
+  }
+
+  .ticket-qrcode {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 20px;
+    .qrcode {
+      width: 100px;
+      height: 100px;
+      margin-bottom: 10px;
+    }
+    span {
+      font-size: 12px;
+      color: #666;
+    }
+    .tips {
+      font-size: 12px;
+      color: #666;
+    }
+  }
+
+}
+</style>