票务修改

 <template>
   <div>
     <div class="box">
-
       <el-card :body-style="{ padding: '0px' }" class="mt20">
         <div slot="header">
           <div class="bg-lineg">
             <div class="pl-back" @click="goBack">
               <el-icon>
-                <ArrowLeftBold/>
+                <ArrowLeftBold />
               </el-icon>
               返回
             </div>
@@ -25,20 +24,20 @@
                 <p>票档：{{ ticketForm.extJson?.ticketType?.name }}</p>
                 <p>时间：{{ ticketForm.extJson?.ticketDate.name }}</p>
                 <p>通票：{{
-                    paymentType != 3 ? '¥' : '€'
-                  }}
+                  paymentType != 3 ? '¥' : '€'
+                }}
                   {{
                     paymentType != 3 ? ticketForm.extJson?.ticketDate.price : ticketForm.extJson?.ticketDate.priceEn
                   }}
                   /1张</p>
                 <p>优惠票：{{
-                    paymentType != 3 ? '¥' : '€'
-                  }}
+                  paymentType != 3 ? '¥' : '€'
+                }}
                   {{
                     paymentType != 3 ? ticketForm.extJson?.ticketDate.rebatePrice : ticketForm.extJson?.ticketDate.rebatePriceEn
                   }}
                   /1张</p>
-
+                
                 <p class="poPrice">{{ paymentType != 3 ? '¥' : '€' }}{{ totalMoney }}</p>
               </div>
               <div>
@@ -73,69 +72,75 @@
                 </el-row>
               </div>
             </div>
-
+            
             <div class="leftboderTT">
               {{ paymentType != 3 ? '开票信息' : 'Invoice information' }}
             </div>
             <div class="border-rr mt20 pd20">
-              <el-form ref="formRef" :label-width="paymentType != 3 ?'100':'150'" :model="form" :rules="rules"
-                       class="mw500">
+              <el-form
+                ref="formRef" :label-width="paymentType != 3 ?'100':'150'" :model="form" :rules="rules"
+                class="mw500"
+              >
                 <el-form-item :label="language==0 ?'开票金额':'Amount'">
                   <span class="bigprice">{{ paymentType != 3 ? '¥' : '€' }}{{ totalMoney }}</span>
                 </el-form-item>
-
+                
                 <el-form-item :label="language==0 ?`发票形式`:'Invoice Form'" prop="invoiceForm" required>
                   <el-radio-group v-model="form.invoiceForm">
                     <el-radio value="1">{{ language == 0 ? '电子发票' : 'E-invoice' }}</el-radio>
                   </el-radio-group>
                 </el-form-item>
-
+                
                 <el-form-item :label="language==0 ?`发票类型`:'Invoice Type'" prop="invoiceType" required>
                   <el-radio-group v-model="form.invoiceType">
                     <el-radio value="0">{{ language == 0 ? '企业' : 'Company' }}</el-radio>
                     <el-radio value="1">{{ language == 0 ? '个人非企业' : 'Individual' }}</el-radio>
                   </el-radio-group>
                 </el-form-item>
-                <el-form-item v-if="form.invoiceType=='0'" :label="language==0 ?`发票抬头`:'Invoice Title'"
-                              prop="invoiceTitle"
-                              required>
-                  <el-input v-model="form.invoiceTitle"/>
+                <el-form-item
+                  v-if="form.invoiceType=='0'" :label="language==0 ?`发票抬头`:'Invoice Title'"
+                  prop="invoiceTitle"
+                  required
+                >
+                  <el-input v-model="form.invoiceTitle" />
                 </el-form-item>
-                <el-form-item v-if="form.invoiceType=='0'" :label="language==0 ?`税号`:'Duty Paragraph'"
-                              prop="invoiceTfn"
-                              required>
-                  <el-input v-model="form.invoiceTfn"/>
+                <el-form-item
+                  v-if="form.invoiceType=='0'" :label="language==0 ?`税号`:'Duty Paragraph'"
+                  prop="invoiceTfn"
+                  required
+                >
+                  <el-input v-model="form.invoiceTfn" />
                 </el-form-item>
                 <el-form-item v-if="form.invoiceForm=='1'" :label="`邮箱`" prop="invoiceEmail" required>
-                  <el-input v-model="form.invoiceEmail"/>
+                  <el-input v-model="form.invoiceEmail" />
                 </el-form-item>
                 <el-form-item label="备注" prop="remarks">
-                  <el-input v-model="form.remarks" type="textarea"/>
+                  <el-input v-model="form.remarks" type="textarea" />
                 </el-form-item>
                 <div v-if="form.invoiceForm=='3'&&form.invoiceType=='0'">
                   <el-form-item :label="`地址`" prop="invoiceAddress" required>
-                    <el-input v-model="form.invoiceAddress"/>
+                    <el-input v-model="form.invoiceAddress" />
                   </el-form-item>
                   <el-form-item :label="`电话`" prop="invoicePhone" required>
-                    <el-input v-model="form.invoicePhone"/>
+                    <el-input v-model="form.invoicePhone" />
                   </el-form-item>
                   <el-form-item :label="`开户行`" prop="invoiceBank" required>
-                    <el-input v-model="form.invoiceBank"/>
+                    <el-input v-model="form.invoiceBank" />
                   </el-form-item>
                   <el-form-item :label="`账户`" prop="invoiceAccount" required>
-                    <el-input v-model="form.invoiceAccount"/>
+                    <el-input v-model="form.invoiceAccount" />
                   </el-form-item>
                 </div>
               </el-form>
-
+              
               <div v-if="remark" class="tip">
                 <label>{{ paymentType != 3 ? '开票须知' : 'Invoice Notice' }}:</label>
-                <div v-html="remark"/>
+                <div v-html="remark" />
               </div>
             </div>
           </el-col>
         </el-row>
-
+        
         <el-row align="middle" class="pd20" justify="center">
           <el-col :span="12" class="text-center">
             <el-button class="btn-lineG w200px" round size="large" type="primary" @click="submit">
@@ -144,33 +149,33 @@
           </el-col>
         </el-row>
       </el-card>
-      <div style="height: 60px;"></div>
-
+      <div style="height: 60px;" />
+    
     </div>
   </div>
-  <address-list-dialog ref="dialogAddressListRef" @submit="getAddress"/>
+  <address-list-dialog ref="dialogAddressListRef" @submit="getAddress" />
   <!-- 开票须知 -->
 </template>
 
 <script setup>
-import {useRouter, useRoute} from "vue-router";
-import {ref, onMounted} from "vue";
-import {useStorage} from "@vueuse/core/index";
-import AddressListDialog from "@/viewsPc/booking/component/addressList"
+import { useRouter, useRoute } from 'vue-router'
+import { ref, onMounted } from 'vue'
+import { useStorage } from '@vueuse/core/index'
+import AddressListDialog from '@/viewsPc/booking/component/addressList'
 import dayjs from 'dayjs'
-import {ElMessage, ElMessageBox} from "element-plus";
-import useUserStore from "@/store/modules/user";
-import {getCurrentInstance} from "@vue/runtime-core";
+import { ElMessage, ElMessageBox } from 'element-plus'
+import useUserStore from '@/store/modules/user'
+import { getCurrentInstance } from '@vue/runtime-core'
 import {
   addressList,
   editInvoice,
   getInvoiceDetail,
   getBaseInfoByActiveId,
   getTicketOrderInfo,
-  getTicketInfoByActivityId, submitInvoice,
-} from "@/apiPc/booking";
+  getTicketInfoByActivityId, submitInvoice
+} from '@/apiPc/booking'
 
-const {proxy} = getCurrentInstance()
+const { proxy } = getCurrentInstance()
 const user = useUserStore().user
 const language = useStorage('language', 0)
 const router = useRouter()
@@ -188,32 +193,32 @@ const totalMoney = ref(0)
 const remark = ref('')
 const rules = ref({
   invoiceType: [
-    {required: true, message: language.value == 0 ? '请选择发票类型' : 'Please select invoice type', trigger: 'change'}
+    { required: true, message: language.value == 0 ? '请选择发票类型' : 'Please select invoice type', trigger: 'change' }
   ],
   invoiceEmail: [
-    {required: true, message: language.value == 0 ? '请输入邮箱' : 'Please enter email', trigger: 'blur'}
+    { required: true, message: language.value == 0 ? '请输入邮箱' : 'Please enter email', trigger: 'blur' }
   ],
   invoiceForm: [
-    {required: true, message: language.value == 0 ? '请选择发票形式' : 'Please select invoice form', trigger: 'change'}
+    { required: true, message: language.value == 0 ? '请选择发票形式' : 'Please select invoice form', trigger: 'change' }
   ],
   invoiceTitle: [
-    {required: true, message: language.value == 0 ? '请输入发票抬头' : 'Please enter invoice title', trigger: 'blur'}
+    { required: true, message: language.value == 0 ? '请输入发票抬头' : 'Please enter invoice title', trigger: 'blur' }
   ],
   invoiceTfn: [
-    {required: true, message: language.value == 0 ? '请输入税号' : 'Please enter TFN', trigger: 'blur'}
+    { required: true, message: language.value == 0 ? '请输入税号' : 'Please enter TFN', trigger: 'blur' }
   ],
   invoiceAddress: [
-    {required: true, message: language.value == 0 ? '请输入地址' : 'Please enter address', trigger: 'blur'}
+    { required: true, message: language.value == 0 ? '请输入地址' : 'Please enter address', trigger: 'blur' }
   ],
   invoicePhone: [
-    {required: true, message: language.value == 0 ? '请输入电话' : 'Please enter phone', trigger: 'blur'}
+    { required: true, message: language.value == 0 ? '请输入电话' : 'Please enter phone', trigger: 'blur' }
   ],
   invoiceBank: [
-    {required: true, message: language.value == 0 ? '请输入开户行' : 'Please enter bank', trigger: 'blur'}
+    { required: true, message: language.value == 0 ? '请输入开户行' : 'Please enter bank', trigger: 'blur' }
   ],
   invoiceAccount: [
-    {required: true, message: language.value == 0 ? '请输入账户' : 'Please enter account', trigger: 'blur'}
-  ],
+    { required: true, message: language.value == 0 ? '请输入账户' : 'Please enter account', trigger: 'blur' }
+  ]
 })
 const isEdit = ref(false)
 const ticketForm = ref({})
@@ -233,20 +238,20 @@ onMounted(() => {
     isEdit.value = true
     getList()
   }
-// 获取票务订单信息
+  // 获取票务订单信息
   getTickInfo()
 })
 
 // 票务订单详情
 async function getTickInfo() {
-  const res = await getTicketOrderInfo({orderId: route.query.orderId})
+  const res = await getTicketOrderInfo({ orderId: route.query.orderId })
   ticketForm.value = res.data
   try {
     ticketForm.value.extJson = JSON.parse(ticketForm.value.extJson)
     ticketForm.value.extJson.ticketDate = JSON.parse(ticketForm.value.extJson.ticketDate)
     ticketForm.value.extJson.ticketType = JSON.parse(ticketForm.value.extJson.ticketType)
     cptId = ticketForm.value.extJson.ticketDate.activityId
-    totalMoney.val = ticketForm.value.extJson.total
+    totalMoney.value.val = ticketForm.value.extJson.total
     message.value = JSON.parse(ticketForm.value.extJson.message)
     console.log(message.value)
     paymentType.value = ticketForm.value.paymentType
@@ -256,19 +261,19 @@ async function getTickInfo() {
   } catch (e) {
     console.log(e)
   } finally {
-
+    
   }
 }
 
 async function getDetail(activeId) {
-  const res = await getTicketInfoByActivityId({activityId: activeId})
+  const res = await getTicketInfoByActivityId({ activityId: activeId })
   matchForm.value = res.data
   console.log(matchForm.value)
 }
 
 function getList() {
   getInvoiceDetail(invoiceId.value).then(res => {
-    form.value = res.data;
+    form.value = res.data
     totalMoney.value = form.value.total
   })
 }
@@ -313,14 +318,14 @@ function submit() {
 
 function update() {
   editInvoice(form.value).then(res => {
-    //返回列表
+    // 返回列表
     backList()
   })
 }
 
 function add() {
   submitInvoice(form.value).then(res => {
-    //返回列表
+    // 返回列表
     backList()
   })
 }
@@ -365,7 +370,7 @@ function goBack() {
 
 .border-info {
   position: relative;
-
+  
   & > label {
     position: absolute;
     right: 0;
@@ -375,7 +380,7 @@ function goBack() {
     padding: 5px 15px;
     font-size: 14px;
   }
-
+  
   .poPrice {
     position: absolute;
     bottom: 0px;
@@ -430,12 +435,12 @@ function goBack() {
 
 .ccitemBox {
   overflow: auto;
-
+  
   label {
     margin: 10px 0;
     display: block;
     min-height: 30px;
-
+    
     span {
       color: #FF8124;
       font-family: DIN Alternate;
@@ -450,12 +455,12 @@ function goBack() {
   font-size: 15px;
   color: #666;
   margin: 5px 0 10px;
-
+  
   label {
     font-size: 16px;
     color: #000;
   }
-
+  
   span {
     font-size: 13px;
   }

@@ -13,20 +13,6 @@
               <div class="address">{{ TickForm.address }}</div>
             </div>
             
-            <div class="info">
-              <div class="name">{{ TickForm2.ticketTypeName }}</div>
-              <div class="address">
-                {{ TickForm2.stadiumName }} ｜
-                <span v-if="TickForm2.sessionType=='1000'">{{ language == 0 ? '日间场' : 'Day' }}</span>
-                <span v-else>{{ language == 0 ? '夜间场' : 'Night' }}</span>
-                ｜ {{ TickForm2.ticketName }}
-              </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">
@@ -153,9 +139,25 @@
                 </div>
               </div>
             </div>
-            <!--            场馆布局图-->
+            <div class="rightBox">
+              <div class="info">
+                <div class="name">{{ TickForm2.ticketTypeName }}</div>
+                <div class="address">
+                  {{ TickForm2.stadiumName }} ｜
+                  <span v-if="TickForm2.sessionType=='1000'">{{ language == 0 ? '日间场' : 'Day' }}</span>
+                  <span v-else>{{ language == 0 ? '夜间场' : 'Night' }}</span>
+                  ｜ {{ TickForm2.ticketName }}
+                </div>
+                
+                <div v-if="TickForm2.ticketType=='0'" class="address">{{
+                  language == 0 ? '剩余数量' : 'Remaining Quantity'
+                }}： {{ leftCount }}
+                </div>
+              </div>
+            </div>
             
-            <div style="margin-top: 95px">
+            <!--            场馆布局图-->
+            <div style="margin-top: 30px">
               <el-image
                 :preview-src-list="[fillImgUrl(tickImg)]"
                 :src="fillImgUrl(tickImg)"
@@ -709,4 +711,15 @@ div {
     width: 100%;
   }
 }
+
+.rightBox {
+  .info {
+    background: rgba(69, 61, 234, 0.04);
+    border-radius: 8px;
+    border: 1px solid #d3d1f6;
+    padding: 20px 0 28px 33px;
+    margin-bottom: 20px;
+    margin-top: 30px;
+  }
+}
 </style>

@@ -183,7 +183,7 @@
                   class="son"
                   fit="cover"
                   preview-teleported
-                  style="width:200px"
+                  style="width:190px;height: 135px"
                 />
               </div>
             </div>
@@ -409,8 +409,8 @@ function selectTick(v) {
   selectForm.value.price = v.price
   selectForm.value.priceEn = v.priceEn
   // console.log(v)
-  
-  handleImage()
+  showUrl.value = v.images
+  show.value = true
 }
 
 function toSelectSeat() {
@@ -789,7 +789,7 @@ getmatchData()
 .son {
   position: absolute;
   top: 0;
-  left: 30px;
+  left: 50px;
 }
 
 .remarks {