票务

 <template>
   <el-card class="container">
     <div v-loading="loading">
-      <div class="title">
+      <div class="title father">
         {{ languageFormat(language, "订单确认", "Order confirmation") }}
+        <span class="son" @click="handelUp">上一步</span>
       </div>
       <div class="content pd20">
         <el-row gutter="20">
@@ -21,12 +22,15 @@
                 ｜ {{ TickForm2.ticketName }}
               </div>
               
-              <div v-if="TickForm2.ticketType=='0'" class="address">{{ language==0?'剩余数量':'Remaining Quantity' }}： {{ leftCount }}</div>
+              <div v-if="TickForm2.ticketType=='0'" class="address">{{
+                language == 0 ? '剩余数量' : 'Remaining Quantity'
+              }}： {{ leftCount }}
+              </div>
             </div>
             
             <div class="ticket_info mb20">
               <div class="tit_box">
-                <div class="line"/>
+                <div class="line" />
                 <div class="txt">
                   {{ languageFormat(language, "订票信息", "Ticket Info") }}
                 </div>
@@ -37,30 +41,36 @@
                   <div v-if="TickForm2.ticketType == '1'">
                     <el-form-item :label="language == 0 ? '桌号' : 'Table'">
                       
-                      <el-popover placement="right" :width="400" trigger="hover">
+                      <el-popover :width="400" placement="right" trigger="hover">
                         <template #reference>
                           <div class="text-primary underline pointer" @click="showImg">
                             {{ language == 0 ? '查看区域布局' : ' View Area Layout' }}
                           </div>
                         </template>
-                        <el-image :src="fillImgUrl(tickImg)" style="width: 100%;"
-                                  :preview-src-list="[fillImgUrl(tickImg)]"/>
+                        <el-image
+                          :preview-src-list="[fillImgUrl(tickImg)]" :src="fillImgUrl(tickImg)"
+                          style="width: 100%;"
+                        />
                       </el-popover>
                       
                       
                       <el-radio-group v-model="currDesk">
-                        <el-radio-button v-for="(it, index) in deskList" :key="index" :label="it.deskNo" :value="it"
-                                         :disabled="it.status!=0"/>
+                        <el-radio-button
+                          v-for="(it, index) in deskList" :key="index" :disabled="it.status!=0" :label="it.deskNo"
+                          :value="it"
+                        />
                       </el-radio-group>
                     </el-form-item>
                     <el-form-item :label="language == 0 ? '座位号' : 'Seat'">
                       <el-checkbox-group v-model="currSeat">
-                        <el-checkbox-button v-for="(it, index) in currDesk?.seatList" :key="index" :label="it.seatNo"
-                                            :value="it" :disabled="it.status!=0"/>
+                        <el-checkbox-button
+                          v-for="(it, index) in currDesk?.seatList" :key="index" :disabled="it.status!=0"
+                          :label="it.seatNo" :value="it"
+                        />
                       </el-checkbox-group>
                     </el-form-item>
                     <el-form-item :label="language == 0 ?'已选座位号':'Selected Seat'">
-                      <el-tag class="mr10" v-for="(s,index) in currSeat" :key="s.id" closable @close="delSeat(s,index)">
+                      <el-tag v-for="(s,index) in currSeat" :key="s.id" class="mr10" closable @close="delSeat(s,index)">
                         {{ s.deskNo }} - {{ s.seatNo }}
                       </el-tag>
                     </el-form-item>
@@ -96,7 +106,7 @@
                               </div>
                               <div class="idcard">{{ it.idCard }}</div>
                             </div>
-                            <el-checkbox :value="it.id" :disabled="!!it.disabled"/>
+                            <el-checkbox :disabled="!!it.disabled" :value="it.id" />
                           </div>
                         </el-checkbox-group>
                       </div>
@@ -112,7 +122,7 @@
           
           <el-col :lg="8" class="right">
             <div class="tit_box">
-              <div class="line"/>
+              <div class="line" />
               <div class="txt">
                 {{ languageFormat(language, "订单明细", "Order summary") }}
               </div>
@@ -123,7 +133,7 @@
                 <div class="time">
                   {{ language == 0 ? '票价' : 'Cost Ticket' }}
                 </div>
-                <p/>
+                <p />
                 <div class="ticket">
                   {{ language == 0 ? TickForm2.price : TickForm2.priceEn }}
                   <span> {{ language == 0 ? '元' : 'Euro' }}</span>
@@ -143,6 +153,15 @@
                 </div>
               </div>
             </div>
+            <!--            场馆布局图-->
+            
+            <div style="margin-top: 95px">
+              <el-image
+                :preview-src-list="[fillImgUrl(tickImg)]"
+                :src="fillImgUrl(tickImg)"
+                style="width: 100%;"
+              />
+            </div>
           </el-col>
         </el-row>
       </div>
@@ -166,7 +185,7 @@
 </template>
 
 <script setup>
-import {ref, computed, onMounted} from 'vue'
+import { ref, computed, onMounted } from 'vue'
 import {
   customerListApi,
   submitOrderTicket,
@@ -176,12 +195,12 @@ import {
   checkPurchasedCustomers,
   getDeskInfo
 } from '@/apiPc/booking'
-import {ElMessage, ElMessageBox} from 'element-plus'
-import {languageFormat} from '@/viewsPc/seat/utils/language.js'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { languageFormat } from '@/viewsPc/seat/utils/language.js'
 import useUserStore from '/@/store/modules/user'
-import {useStorage} from '@vueuse/core/index'
+import { useStorage } from '@vueuse/core/index'
 import _ from 'lodash'
-import {useRoute, useRouter} from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 
 const useStore = useUserStore()
 
@@ -321,7 +340,7 @@ async function paymentHandle() {
     confirmButtonText: language.value == 0 ? '确定' : 'Confirm',
     cancelButtonText: language.value == 0 ? '取消' : 'Cancel',
     type: 'warning'
-  }).then(async () => {
+  }).then(async() => {
     try {
       const orderCustomerList = []
       _.each(orderForm.value.customerIds, (id, index) => {
@@ -390,7 +409,7 @@ async function paymentHandle() {
 }
 
 async function getDetail() {
-  const res = await getTicketInfoByActivityId({activityId: orderForm.value.activeId})
+  const res = await getTicketInfoByActivityId({ activityId: orderForm.value.activeId })
   TickForm.value = res.data
 }
 
@@ -404,6 +423,10 @@ function addPeopl() {
 const showImg = () => {
   
 }
+
+function handelUp() {
+  router.go(-1)
+}
 </script>
 
 
@@ -677,6 +700,16 @@ div {
   }
 }
 
+.father {
+  position: relative;
+}
+
+.son {
+  position: absolute;
+  left: 10px;
+  cursor: pointer
+}
+
 @media screen and (max-width: 768px) {
   .container {
     width: 100%;

@@ -2,7 +2,7 @@
   <div>
     <!-- top -->
     <div class="container top">
-      <img :src="fillImgUrl(matchForm.ticketImg)" class="cover_img">
+      <img :src="fillImgUrl(matchForm.ticketImg)" alt="" class="cover_img">
       <div class="info">
         <div class="title">{{ matchForm.name }}</div>
         <div class="time">
@@ -93,7 +93,7 @@
               <span
                 v-if="currVenue?.images"
                 style="color: #493ceb;cursor:pointer;font-weight:600;font-size: 14px"
-                @click="showUrl=currVenue.images; show=true"
+                @click="handleImage"
               > <span style="color: red;font-size: 18px">*</span>
                 {{
                   language == 0 ? '点击查看场馆布局' : 'View Venue Layout'
@@ -140,7 +140,7 @@
                 <span v-else>{{
                   language == 0 ? '夜间场' : 'Night'
                 }}</span>
-<!--                {{ key=='1000'?'日间场':'夜间场' }}-->
+                <!--                {{ key=='1000'?'日间场':'夜间场' }}-->
               </div>
             </div>
           </div>
@@ -227,8 +227,11 @@
     
     <div class="container bottom">
       <div style="display: flex">
-        <div :class="{'bg':active==1}" class="buBg" @click="active=1">{{ language==0?'购票说明':'Notice' }}</div>
-        <div :class="{'bg' :active==2}" class="buBg" @click="active=2">{{ language==0?'购票须知':'Instructions' }}</div>
+        <div :class="{'bg':active==1}" class="buBg" @click="active=1">{{ language == 0 ? '购票说明' : 'Notice' }}</div>
+        <div :class="{'bg' :active==2}" class="buBg" @click="active=2">{{
+          language == 0 ? '购票须知' : 'Instructions'
+        }}
+        </div>
       </div>
       <div v-show="active==1" class="rich_content" v-html="matchForm.ticketDes" />
       <div v-show="active==2" class="rich_content" v-html="matchForm.ticketNotice" />
@@ -250,7 +253,8 @@ import {
   getTicketListApi,
   checkNonPayment,
   getStadiumList,
-  getActivityTypeVoListByLatsId
+  getActivityTypeVoListByLatsId,
+  getBaseInfoByActiveId
 } from '@/apiPc/booking'
 
 import { dayjs } from 'element-plus'
@@ -290,6 +294,7 @@ const venueList = ref([])
 const tickList = ref([])
 const currVenue = ref(null)
 const currTick = ref(null)
+const matchData = ref({})
 
 watch(show, (val) => {
   if (!val) {
@@ -418,6 +423,20 @@ function toSelectClosed() {
     type: 'warning'
   })
 }
+
+async function getmatchData() {
+  const res = await getBaseInfoByActiveId(route.params.activeId)
+  matchData.value = res.data
+  console.log(res)
+}
+
+function handleImage() {
+  // ticketImg
+  showUrl.value = matchData.value.ticketLayout
+  show.value = true
+}
+
+getmatchData()
 </script>
 
 <style lang="scss" scoped>
@@ -455,8 +474,7 @@ function toSelectClosed() {
   margin-top: 26px;
   
   .cover_img {
-    width: 390px;
-    height: 517px;
+    width: 500px;
     object-fit: fill;
     margin-right: 36px;
   }

@@ -81,8 +81,8 @@ export default defineConfig(({ mode, command }) => {
           rewrite: (p) => p.replace(/^\/dev-api\/ztx-webSite/, '')
         },
         '/dev-api': {
-          target: 'http://192.168.1.118:8081/',
-          // target: 'http://192.168.1.130:8081',
+          // target: 'http://192.168.1.118:8081/',
+          target: 'http://192.168.1.118:8081',
           // target: 'https://jijin.wtwuxicenter.com/stage-api',
           // target: 'https://wdsfwuxicenter.com/stage-api/',
           changeOrigin: true,