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

<template>
  <div class="container">
    <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 class="content7" style="margin-bottom: 60rpx">
        <display-box>
          <template #l1>
            <div class="box-left">
              文物概览概览

            </div>
          </template>
          <template #r1>
            <!-- 右侧内容或模板 -->
          </template>
          <template #l2>
            <div class="box-left">
              文物藏品精华

            </div>
          </template>
          <template #r2>
            <!-- 右侧内容或模板 -->
          </template>
          <template #l3>
            <div class="box-left">
              文化深度

            </div>
          </template>
          <template #r3>
            <!-- 右侧内容或模板 -->
          </template>
          <template #l4>
            <div class="box-left">
              文物年份

            </div>
          </template>
          <template #r4>
            <!-- 右侧内容或模板 -->
          </template>
          <template #l5>
            <div class="box-left">
              文物起源

            </div>
          </template>
          <template #r5>
            <!-- 右侧内容或模板 -->
          </template>
          <template #l6>
            <div class="box-left">
              文物描述

            </div>
          </template>
          <template #r6>
            <!-- 右侧内容或模板 -->
          </template>
          <template #l7>
            <div class="box-left">
              文化价值

            </div>
          </template>
          <template #r7>
            <!-- 右侧内容或模板 -->
          </template>
          <template #l8>
            <div class="box-left">
              保存状态

            </div>
          </template>
          <template #r8>
            <!-- 右侧内容或模板 -->
          </template>
          <template #l9>
            <div class="box-left">
              展品故事

            </div>
          </template>
          <template #r9>
            <!-- 右侧内容或模板 -->
          </template>
          <template #l10>
            <div class="box-left">
              制作时代

            </div>
          </template>
          <template #r10>
            <!-- 右侧内容或模板 -->
          </template>
          <template #l11>
            <div class="box-left">
              艺术流派

            </div>
          </template>
          <template #r11>
            <!-- 右侧内容或模板 -->
          </template>
          <template #l12>
            <div class="box-left">
              获取途径

            </div>
          </template>
          <template #r12>
            <!-- 右侧内容或模板 -->
          </template>
          <template #l13>
            <div class="box-left">
              展览历程

            </div>
          </template>
          <template #r13>
          </template>
          <template #l14>
            <div class="box-left">
              文物级别分类


            </div>
          </template>
          <template #r14>
          </template>
          <template #l15>
            <div class="box-left">
              互动体验编码



            </div>
          </template>
          <template #r15>
          </template>
          <template #l16>
            <div class="box-left">
              安全保护措施

            </div>
          </template>
          <template #r16>
          </template>
          <template #l17>
            <div class="box-left">
              数字化档案编号

            </div>
          </template>
          <template #r17>
          </template>
          <template #l18>
            <div class="box-left">
              权属证明区块链记录

            </div>
          </template>
          <template #r18>
          </template>
          <template #l19>
            <div class="box-left">
              区块链高度

            </div>
          </template>
          <template #r19>
          </template>
          <template #l20>
            <div class="box-left">
              Hash
            </div>
          </template>
          <template #r20>
          </template>
          <template #l21>
            <div class="box-left">
              交易hash

            </div>
          </template>
          <template #r21>
          </template>
          <template #l22>
            <div class="box-left">
              虚拟收藏认证

            </div>
          </template>
          <template #r22>
          </template>
          <template #l23>
            <div class="box-left">
              区块链技术应用

            </div>
          </template>
          <template #r23>
          </template>
          <template #l24>
            <div class="box-left">
              物品元数据哈希值
            </div>
          </template>
          <template #r24>
          </template>
          <template #l25>
            <div class="box-left">
              登记交易哈希值

            </div>
          </template>
          <template #r25>
          </template>
        </display-box>
      </div>
    </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">
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.box-left{
  font-size: 24rpx;
  color: #000;
}
.box-right{
  font-size: 24rpx;
  color: #72665F;
}
.large-container {
  overflow-y: auto;
  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>