feat:增加展馆预约详情页面

src/router/index.ts

@@ -63,6 +63,12 @@ const routes = [
     //使用import可以路由懒加载，如果不使用，太多组件一起加载会造成白屏
     component: () => import('@/views/ExhibitionService/BookingTime.vue')
   },
+  {
+    path: '/booking/detail/:id',
+    name: 'bookedDetail',
+    //使用import可以路由懒加载，如果不使用，太多组件一起加载会造成白屏
+    component: () => import('@/views/ExhibitionService/booked-detail.vue')
+  },
 
   {
     path: '/booking/selectTime/bookInputInfo',

src/views/EnterNingguo/artwork.vue

@@ -82,6 +82,7 @@ onBeforeMount(() => {
   width: 100%;
   min-height: 100%;
   background: #F7F3E8;
+  overflow: auto;
 
   .search-list {
     width: 100%;

src/views/EnterNingguo/dynamic-detail.vue

@@ -71,6 +71,8 @@ onBeforeMount(async () => {
 .detail-box {
   width: 100%;
   min-height: 100%;
+  overflow: auto;
+
 
   .themb-box {
     width: 100%;

src/views/EnterNingguo/dynamic.vue

@@ -108,6 +108,8 @@ onMounted(() => {
   width: 100%;
   background: #F7F3E8;
   min-height: 100%;
+  overflow: auto;
+
 
 
   .tabs {

src/views/EnterNingguo/summarize.vue

@@ -50,6 +50,8 @@ onBeforeMount(async () => {
   width: 100%;
   height: 100%;
   background: #F7F3E8;
+  overflow: auto;
+
 
 
   .video-box {

src/views/ExhibitionService/BookingTime.vue

@@ -166,6 +166,8 @@ onBeforeMount(() => {
   font-family: 'SourceHanSansCN-Regular';
   max-width: 500px;
   position: relative;
+  overflow: auto;
+  
 
   .date-select-box {
     width: 35%;

src/views/ExhibitionService/active-detail.vue

@@ -76,6 +76,8 @@ onBeforeMount(() => {
   width: 100%;
   background: #F7F3E8;
   min-height: 100%;
+  overflow: auto;
+
 
   .themb-box {
     width: 100%;

src/views/ExhibitionService/active-info.vue

@@ -107,6 +107,8 @@ const submit = async () => {
   height: 100vh;
   padding: 20px;
   background: #F7F3E8;
+  overflow: auto;
+
 
   .page-title {
     font-size: 1.4em;

src/views/ExhibitionService/activeBooking.vue

@@ -103,6 +103,8 @@ onMounted(() => {
   width: 100%;
   background: #F7F3E8;
   min-height: 100%;
+  overflow: auto;
+
 
   .tabs {
     // height: 40px;

src/views/ExhibitionService/bookInputInfo.vue

@@ -81,6 +81,8 @@ const submit = () => {
   padding: 20px 10px;
   position: relative;
   max-width: 500px;
+  overflow: auto;
+
 
   .input-card {
     width: 100%;

src/views/ExhibitionService/booked-detail.vue

@@ -1,10 +1,126 @@
 <script setup lang='ts'>
+
+const bookedDetail = ref({} as any)
+
+onMounted(() => {
+  bookedDetail.value = {
+    bookDate: '2024-04-16',
+    bookId: '1',
+    createTime: '2024-04-16 16:46:00',
+    creatorId: null,
+    creatorName: '',
+    id: 1,
+    name: '小明',
+    pcs: 2,
+    phone: '',
+    rtf: JSON.parse('[{"bookDate":"2024-02-01","name":"小明","num":"1111111","time":"9:00-1:00","type":"身份证"},{"bookDate":"2024-02-01","name":"小明2","num":"222222","time":"9:00-1:00","type":"社保卡"}]'),
+    status: 0,
+    time: '9:00-1:00',
+    updateTime: '2024-04-16 16:46:00'
+  }
+})
 </script>
 
 <template>
-<div class=''></div>
+  <div class='detail-box'>
+    <div class="title">
+      <img src="@/assets/images/cicle.png" alt="">
+      <div class="title-content">我的预约</div>
+    </div>
+    <div class="info-box">
+      <div>参观日期：{{ bookedDetail.bookDate + ' ' + bookedDetail.time }}</div>
+      <div>当前状态：{{ bookedDetail.status === 0 ? '未验证' : '已验证' }}</div>
+    </div>
+    <div class="info-box-card" v-for="(item, index) in bookedDetail.rtf" :key="index">
+      <div>参观人姓名：{{ item.name }}</div>
+      <div>参观人电话：{{ item.phone }}</div>
+      <div>{{ item.type + '号：' + item.num }}</div>
+    </div>
+    <div class="code-box" >
+      <img src="@/assets/images/code.png" alt="">
+      <div>验证码：56717</div>
+    </div>
+  </div>
 </template>
 
 <style lang='less' scoped>
+.detail-box {
+  width: 100%;
+  height: 100%;
+  background: #F7F3E8;
+  overflow: auto;
+  padding: 40px 20px;
+  font-family: SourceHanSansCN-Regular;
+
+  .title {
+    font-size: 1.4em;
+    color: #333333;
+    font-weight: bold;
+    position: relative;
+    // line-height: 1.6em;
+    display: flex;
+    align-items: flex-end;
+    margin-bottom: 10px;
+
+    img {
+      position: absolute;
+      left: 0;
+      top: 0;
+      height: 1.6em;
+    }
+
+    .title-content {
+      // position: absolute;
+      position: relative;
+      left: 0;
+      top: 0;
+      height: 1.4em;
+      z-index: 2;
+      line-height: 1.6em;
+      color: #333333;
+      margin-top: 1%;
+      font-family: SourceHanSansCN-Bold;
+
+    }
+
+  }
+
+  .info-box {
+    margin-top: 20px;
+    color: #333333;
+    line-height: 2em;
+    font-family: SourceHanSansCN-Regular;
+  }
+
+  .info-box-card{
+    width: 100%;
+    border-radius: 10px;
+    background: url(@/assets/images/booked-card.png);
+    background-size: 100% 100%;
+    margin-top: 30px;
+    color: #F7F3E8;
+    line-height: 3em;
+    font-size: 1.1em;
+    padding: 5% 8%;
+  }
+
+  .code-box{
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin-top: 10%;
+    img{
+      width: 50%;
+      margin-bottom: 10px;
+    }
+    div {
+      width: 50%;
+      text-align: center;
+      color: #333333;
+    }
+  }
 
+}
 </style>

src/views/ExhibitionService/bookedList.vue

@@ -15,6 +15,15 @@ const goSelectTime = () => {
   })
 }
 
+const goBookedDetail = (id: number) => {
+  router.push({
+    name: 'bookedDetail',
+    params: {
+      id
+    }
+  })
+}
+
 // 获取用户授权
 const userAuthorization = () => {
   window.open('https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx2d3e0c33702e34a6&redirect_uri=https://houseoss.4dkankan.com/project/yuanDaDu/index.html&response_type=code&scope=snsapi_userinfo&connect_redirect=1#wechat_redirect')
@@ -60,7 +69,6 @@ onMounted(() => {
 
   // userAuthorization()
 
-
 })
 </script>
 
@@ -72,9 +80,10 @@ onMounted(() => {
     </div>
     <div class="no-data" v-if="bookedList.length == 0">暂无预约</div>
     <div v-else>
-      <div class="booking-card" v-for="(item, index) in bookedList" :key="index" @click="go">
+      <div class="booking-card" v-for="(item, index) in bookedList" :key="index" @click="goBookedDetail(item.id)">
         <div>参观日期：{{ `${item.bookDate} ${item.time}` }}</div>
-        <div>当前状态：<span :style="{ color: item.status == 0 ? '' : '#E3C956' }">{{ item.status == 0 ? '未验证' : '已验证' }}</span>
+        <div>当前状态：<span :style="{ color: item.status == 0 ? '' : '#E3C956' }">{{ item.status == 0 ? '未验证' : '已验证'
+            }}</span>
         </div>
         <div class="info-box">
           <div>参观人姓名：{{ item.name }}</div>
@@ -100,6 +109,8 @@ onMounted(() => {
   max-width: 500px;
   padding: 40px 20px;
   position: relative;
+  overflow: auto;
+
 
 
   .title {

src/views/SmartTour/exhibition-detail.vue

@@ -74,6 +74,8 @@ onBeforeMount(() => {
   height: 100vh;
   max-width: 500px;
   position: relative;
+  overflow: auto;
+
   .thumb-box {
     width: 100%;
     margin-bottom: 10px;

src/views/SmartTour/exhibition.vue

@@ -146,6 +146,8 @@ onBeforeMount(() => {
   width: 100%;
   height: 100vh;
   background: #F7F3E8;
+  overflow: auto;
+
 
 
   .search-box {

src/views/SmartTour/treasure-detail.vue

@@ -188,6 +188,8 @@ onBeforeMount(async () => {
   width: 100%;
   min-height: 100%;
   background: #F7F3E8;
+  overflow: auto;
+
 
   .media-box {
     width: 100%;

src/views/SmartTour/treasure.vue

@@ -157,6 +157,8 @@ onBeforeMount(() => {
   width: 100%;
   min-height: 100%;
   background: #F7F3E8;
+  overflow: auto;
+
 
 
   .content-box {

src/views/VolunteerHome/apply.vue

@@ -105,6 +105,8 @@ const submit = async () => {
   height: 100vh;
   padding: 20px;
   background: #F7F3E8;
+  overflow: auto;
+
 
   .page-title {
     font-size: 1.4em;

src/views/VolunteerHome/detail.vue

@@ -62,6 +62,9 @@ onBeforeMount(() => {
 <style lang='less' scoped>
 .detail-box {
   width: 100%;
+  height: 100%;
+  overflow: auto;
+
 
   .thumb-box {
     width: 100%;

src/views/VolunteerHome/home.vue

@@ -101,6 +101,8 @@ onBeforeMount(() => {
   width: 100%;
   background: #F7F3E8;
   min-height: 100%;
+  overflow: auto;
+
 
   .tabs {
     // height: 40px;