票务修改

 <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>
@@ -78,8 +77,10 @@
               {{ 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>
@@ -96,41 +97,45 @@
                     <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'"
+                <el-form-item
+                  v-if="form.invoiceType=='0'" :label="language==0 ?`发票抬头`:'Invoice Title'"
                   prop="invoiceTitle"
-                              required>
-                  <el-input v-model="form.invoiceTitle"/>
+                  required
+                >
+                  <el-input v-model="form.invoiceTitle" />
                 </el-form-item>
-                <el-form-item v-if="form.invoiceType=='0'" :label="language==0 ?`税号`:'Duty Paragraph'"
+                <el-form-item
+                  v-if="form.invoiceType=='0'" :label="language==0 ?`税号`:'Duty Paragraph'"
                   prop="invoiceTfn"
-                              required>
-                  <el-input v-model="form.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>
@@ -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
@@ -261,14 +266,14 @@ async function getTickInfo() {
 }
 
 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()
   })
 }

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