<template> <custom-title class="title-block" title="门票详情"> </custom-title> <div class="large-container"> <div class="content1"> <div class="wrap1"> <image src="../../static/zu1053@3x.png"></image> </div> <div class="wrap2">{{ticket.ticketName}}</div> </div> <div class="content2"> <image :src="ticket.ticketCoverPic"></image> </div> <div class="content3"> <display-box> <template #l1> <div class="box-left"> 门票名称 </div> </template> <template #r1> <div class="box-right"> {{ticket.ticketName}} </div> </template> <template #l2> <div class="box-left"> 预留手机号(+86) </div> </template> <template #r2> <div class="box-right"> {{ticket.phone}} </div> </template> <template #l3> <div class="box-left"> 预约时间 </div> </template> <template #r3> <div class="box-right"> {{ticket.date?dayjs(ticket.date).format('YYYY年MM月DD日'):'暂无'}} </div> </template> <template #l4> <div class="box-left"> 预约人数 </div> </template> <template #r4> <div class="box-right"> {{ticket.number}} </div> </template> </display-box> </div> <div class="content4"> </div> <div class="content5"> *参观人的身份证信息 </div> <div class="content6" v-for="item in perList"> <display-box> <template #l1> <div class="box-left"> 姓名 </div> </template> <template #r1> <div class="box-right" style="display: flex;align-items: center"> <div style="margin-right: 32rpx">{{item.userName}}</div> <div v-if="statusList.find(x=>x.value===item.status).label" style="width: 112rpx;height: 40rpx;background-color: #000;color: #fff;font-size: 20rpx;border-radius: 22rpx;display: flex;justify-content: center;align-items: center">{{statusList.find(x=>x.value===item.status).label}}</div> </div> </template> <template #l2> <div class="box-left"> 身份证号 </div> </template> <template #r2> <div class="box-right"> 192119280121 </div> </template> </display-box> </div> </div> </template> <script setup> import displayBox from '../../components/display-box/index.vue' import {ref} from "vue"; import dayjs from "dayjs"; import {getTicketPerInfo} from "@/http/apis"; const list = [{}] const statusList=ref([ { label:'', value:1 }, { label:'已退票', value:2 }, { label:'已核销', value:3 }, { label:'已过期', value:4 }, { label:'', value:5 }, { label:'盲盒', value:6 } ]) const ticket=ref(uni.getStorageSync('ticket')) const perList=ref(null) const getInfo=async ()=>{ const res= await getTicketPerInfo({ appointmentUid:ticket.value.appointmentUid }) perList.value=res.data.userInfo console.log(perList.value,'perList.value') } getInfo() </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; .content6{ margin-top: 12rpx; margin-bottom: 24rpx; } .content5{ margin-top: 24rpx; color:#F7963B ; font-size: 24rpx; } .content3{ margin-top: 42rpx; margin-bottom: 28rpx; } .content4 { height: 1rpx; width: 100%; background-image: url("../../static/zx303@3x.png"); background-size: 100%; } .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>