uni-ticket-system/src/pages/ticket-details/index.vue

<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">
            {{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-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>