票务修改
Showing
3 changed files
with
84 additions
and
66 deletions
| 1 | <template> | 1 | <template> |
| 2 | <div> | 2 | <div> |
| 3 | <div class="box"> | 3 | <div class="box"> |
| 4 | |||
| 5 | <el-card :body-style="{ padding: '0px' }" class="mt20"> | 4 | <el-card :body-style="{ padding: '0px' }" class="mt20"> |
| 6 | <div slot="header"> | 5 | <div slot="header"> |
| 7 | <div class="bg-lineg"> | 6 | <div class="bg-lineg"> |
| 8 | <div class="pl-back" @click="goBack"> | 7 | <div class="pl-back" @click="goBack"> |
| 9 | <el-icon> | 8 | <el-icon> |
| 10 | <ArrowLeftBold/> | 9 | <ArrowLeftBold /> |
| 11 | </el-icon> | 10 | </el-icon> |
| 12 | 返回 | 11 | 返回 |
| 13 | </div> | 12 | </div> |
| ... | @@ -78,8 +77,10 @@ | ... | @@ -78,8 +77,10 @@ |
| 78 | {{ paymentType != 3 ? '开票信息' : 'Invoice information' }} | 77 | {{ paymentType != 3 ? '开票信息' : 'Invoice information' }} |
| 79 | </div> | 78 | </div> |
| 80 | <div class="border-rr mt20 pd20"> | 79 | <div class="border-rr mt20 pd20"> |
| 81 | <el-form ref="formRef" :label-width="paymentType != 3 ?'100':'150'" :model="form" :rules="rules" | 80 | <el-form |
| 82 | class="mw500"> | 81 | ref="formRef" :label-width="paymentType != 3 ?'100':'150'" :model="form" :rules="rules" |
| 82 | class="mw500" | ||
| 83 | > | ||
| 83 | <el-form-item :label="language==0 ?'开票金额':'Amount'"> | 84 | <el-form-item :label="language==0 ?'开票金额':'Amount'"> |
| 84 | <span class="bigprice">{{ paymentType != 3 ? '¥' : '€' }}{{ totalMoney }}</span> | 85 | <span class="bigprice">{{ paymentType != 3 ? '¥' : '€' }}{{ totalMoney }}</span> |
| 85 | </el-form-item> | 86 | </el-form-item> |
| ... | @@ -96,41 +97,45 @@ | ... | @@ -96,41 +97,45 @@ |
| 96 | <el-radio value="1">{{ language == 0 ? '个人非企业' : 'Individual' }}</el-radio> | 97 | <el-radio value="1">{{ language == 0 ? '个人非企业' : 'Individual' }}</el-radio> |
| 97 | </el-radio-group> | 98 | </el-radio-group> |
| 98 | </el-form-item> | 99 | </el-form-item> |
| 99 | <el-form-item v-if="form.invoiceType=='0'" :label="language==0 ?`发票抬头`:'Invoice Title'" | 100 | <el-form-item |
| 101 | v-if="form.invoiceType=='0'" :label="language==0 ?`发票抬头`:'Invoice Title'" | ||
| 100 | prop="invoiceTitle" | 102 | prop="invoiceTitle" |
| 101 | required> | 103 | required |
| 102 | <el-input v-model="form.invoiceTitle"/> | 104 | > |
| 105 | <el-input v-model="form.invoiceTitle" /> | ||
| 103 | </el-form-item> | 106 | </el-form-item> |
| 104 | <el-form-item v-if="form.invoiceType=='0'" :label="language==0 ?`税号`:'Duty Paragraph'" | 107 | <el-form-item |
| 108 | v-if="form.invoiceType=='0'" :label="language==0 ?`税号`:'Duty Paragraph'" | ||
| 105 | prop="invoiceTfn" | 109 | prop="invoiceTfn" |
| 106 | required> | 110 | required |
| 107 | <el-input v-model="form.invoiceTfn"/> | 111 | > |
| 112 | <el-input v-model="form.invoiceTfn" /> | ||
| 108 | </el-form-item> | 113 | </el-form-item> |
| 109 | <el-form-item v-if="form.invoiceForm=='1'" :label="`邮箱`" prop="invoiceEmail" required> | 114 | <el-form-item v-if="form.invoiceForm=='1'" :label="`邮箱`" prop="invoiceEmail" required> |
| 110 | <el-input v-model="form.invoiceEmail"/> | 115 | <el-input v-model="form.invoiceEmail" /> |
| 111 | </el-form-item> | 116 | </el-form-item> |
| 112 | <el-form-item label="备注" prop="remarks"> | 117 | <el-form-item label="备注" prop="remarks"> |
| 113 | <el-input v-model="form.remarks" type="textarea"/> | 118 | <el-input v-model="form.remarks" type="textarea" /> |
| 114 | </el-form-item> | 119 | </el-form-item> |
| 115 | <div v-if="form.invoiceForm=='3'&&form.invoiceType=='0'"> | 120 | <div v-if="form.invoiceForm=='3'&&form.invoiceType=='0'"> |
| 116 | <el-form-item :label="`地址`" prop="invoiceAddress" required> | 121 | <el-form-item :label="`地址`" prop="invoiceAddress" required> |
| 117 | <el-input v-model="form.invoiceAddress"/> | 122 | <el-input v-model="form.invoiceAddress" /> |
| 118 | </el-form-item> | 123 | </el-form-item> |
| 119 | <el-form-item :label="`电话`" prop="invoicePhone" required> | 124 | <el-form-item :label="`电话`" prop="invoicePhone" required> |
| 120 | <el-input v-model="form.invoicePhone"/> | 125 | <el-input v-model="form.invoicePhone" /> |
| 121 | </el-form-item> | 126 | </el-form-item> |
| 122 | <el-form-item :label="`开户行`" prop="invoiceBank" required> | 127 | <el-form-item :label="`开户行`" prop="invoiceBank" required> |
| 123 | <el-input v-model="form.invoiceBank"/> | 128 | <el-input v-model="form.invoiceBank" /> |
| 124 | </el-form-item> | 129 | </el-form-item> |
| 125 | <el-form-item :label="`账户`" prop="invoiceAccount" required> | 130 | <el-form-item :label="`账户`" prop="invoiceAccount" required> |
| 126 | <el-input v-model="form.invoiceAccount"/> | 131 | <el-input v-model="form.invoiceAccount" /> |
| 127 | </el-form-item> | 132 | </el-form-item> |
| 128 | </div> | 133 | </div> |
| 129 | </el-form> | 134 | </el-form> |
| 130 | 135 | ||
| 131 | <div v-if="remark" class="tip"> | 136 | <div v-if="remark" class="tip"> |
| 132 | <label>{{ paymentType != 3 ? '开票须知' : 'Invoice Notice' }}:</label> | 137 | <label>{{ paymentType != 3 ? '开票须知' : 'Invoice Notice' }}:</label> |
| 133 | <div v-html="remark"/> | 138 | <div v-html="remark" /> |
| 134 | </div> | 139 | </div> |
| 135 | </div> | 140 | </div> |
| 136 | </el-col> | 141 | </el-col> |
| ... | @@ -144,33 +149,33 @@ | ... | @@ -144,33 +149,33 @@ |
| 144 | </el-col> | 149 | </el-col> |
| 145 | </el-row> | 150 | </el-row> |
| 146 | </el-card> | 151 | </el-card> |
| 147 | <div style="height: 60px;"></div> | 152 | <div style="height: 60px;" /> |
| 148 | 153 | ||
| 149 | </div> | 154 | </div> |
| 150 | </div> | 155 | </div> |
| 151 | <address-list-dialog ref="dialogAddressListRef" @submit="getAddress"/> | 156 | <address-list-dialog ref="dialogAddressListRef" @submit="getAddress" /> |
| 152 | <!-- 开票须知 --> | 157 | <!-- 开票须知 --> |
| 153 | </template> | 158 | </template> |
| 154 | 159 | ||
| 155 | <script setup> | 160 | <script setup> |
| 156 | import {useRouter, useRoute} from "vue-router"; | 161 | import { useRouter, useRoute } from 'vue-router' |
| 157 | import {ref, onMounted} from "vue"; | 162 | import { ref, onMounted } from 'vue' |
| 158 | import {useStorage} from "@vueuse/core/index"; | 163 | import { useStorage } from '@vueuse/core/index' |
| 159 | import AddressListDialog from "@/viewsPc/booking/component/addressList" | 164 | import AddressListDialog from '@/viewsPc/booking/component/addressList' |
| 160 | import dayjs from 'dayjs' | 165 | import dayjs from 'dayjs' |
| 161 | import {ElMessage, ElMessageBox} from "element-plus"; | 166 | import { ElMessage, ElMessageBox } from 'element-plus' |
| 162 | import useUserStore from "@/store/modules/user"; | 167 | import useUserStore from '@/store/modules/user' |
| 163 | import {getCurrentInstance} from "@vue/runtime-core"; | 168 | import { getCurrentInstance } from '@vue/runtime-core' |
| 164 | import { | 169 | import { |
| 165 | addressList, | 170 | addressList, |
| 166 | editInvoice, | 171 | editInvoice, |
| 167 | getInvoiceDetail, | 172 | getInvoiceDetail, |
| 168 | getBaseInfoByActiveId, | 173 | getBaseInfoByActiveId, |
| 169 | getTicketOrderInfo, | 174 | getTicketOrderInfo, |
| 170 | getTicketInfoByActivityId, submitInvoice, | 175 | getTicketInfoByActivityId, submitInvoice |
| 171 | } from "@/apiPc/booking"; | 176 | } from '@/apiPc/booking' |
| 172 | 177 | ||
| 173 | const {proxy} = getCurrentInstance() | 178 | const { proxy } = getCurrentInstance() |
| 174 | const user = useUserStore().user | 179 | const user = useUserStore().user |
| 175 | const language = useStorage('language', 0) | 180 | const language = useStorage('language', 0) |
| 176 | const router = useRouter() | 181 | const router = useRouter() |
| ... | @@ -188,32 +193,32 @@ const totalMoney = ref(0) | ... | @@ -188,32 +193,32 @@ const totalMoney = ref(0) |
| 188 | const remark = ref('') | 193 | const remark = ref('') |
| 189 | const rules = ref({ | 194 | const rules = ref({ |
| 190 | invoiceType: [ | 195 | invoiceType: [ |
| 191 | {required: true, message: language.value == 0 ? '请选择发票类型' : 'Please select invoice type', trigger: 'change'} | 196 | { required: true, message: language.value == 0 ? '请选择发票类型' : 'Please select invoice type', trigger: 'change' } |
| 192 | ], | 197 | ], |
| 193 | invoiceEmail: [ | 198 | invoiceEmail: [ |
| 194 | {required: true, message: language.value == 0 ? '请输入邮箱' : 'Please enter email', trigger: 'blur'} | 199 | { required: true, message: language.value == 0 ? '请输入邮箱' : 'Please enter email', trigger: 'blur' } |
| 195 | ], | 200 | ], |
| 196 | invoiceForm: [ | 201 | invoiceForm: [ |
| 197 | {required: true, message: language.value == 0 ? '请选择发票形式' : 'Please select invoice form', trigger: 'change'} | 202 | { required: true, message: language.value == 0 ? '请选择发票形式' : 'Please select invoice form', trigger: 'change' } |
| 198 | ], | 203 | ], |
| 199 | invoiceTitle: [ | 204 | invoiceTitle: [ |
| 200 | {required: true, message: language.value == 0 ? '请输入发票抬头' : 'Please enter invoice title', trigger: 'blur'} | 205 | { required: true, message: language.value == 0 ? '请输入发票抬头' : 'Please enter invoice title', trigger: 'blur' } |
| 201 | ], | 206 | ], |
| 202 | invoiceTfn: [ | 207 | invoiceTfn: [ |
| 203 | {required: true, message: language.value == 0 ? '请输入税号' : 'Please enter TFN', trigger: 'blur'} | 208 | { required: true, message: language.value == 0 ? '请输入税号' : 'Please enter TFN', trigger: 'blur' } |
| 204 | ], | 209 | ], |
| 205 | invoiceAddress: [ | 210 | invoiceAddress: [ |
| 206 | {required: true, message: language.value == 0 ? '请输入地址' : 'Please enter address', trigger: 'blur'} | 211 | { required: true, message: language.value == 0 ? '请输入地址' : 'Please enter address', trigger: 'blur' } |
| 207 | ], | 212 | ], |
| 208 | invoicePhone: [ | 213 | invoicePhone: [ |
| 209 | {required: true, message: language.value == 0 ? '请输入电话' : 'Please enter phone', trigger: 'blur'} | 214 | { required: true, message: language.value == 0 ? '请输入电话' : 'Please enter phone', trigger: 'blur' } |
| 210 | ], | 215 | ], |
| 211 | invoiceBank: [ | 216 | invoiceBank: [ |
| 212 | {required: true, message: language.value == 0 ? '请输入开户行' : 'Please enter bank', trigger: 'blur'} | 217 | { required: true, message: language.value == 0 ? '请输入开户行' : 'Please enter bank', trigger: 'blur' } |
| 213 | ], | 218 | ], |
| 214 | invoiceAccount: [ | 219 | invoiceAccount: [ |
| 215 | {required: true, message: language.value == 0 ? '请输入账户' : 'Please enter account', trigger: 'blur'} | 220 | { required: true, message: language.value == 0 ? '请输入账户' : 'Please enter account', trigger: 'blur' } |
| 216 | ], | 221 | ] |
| 217 | }) | 222 | }) |
| 218 | const isEdit = ref(false) | 223 | const isEdit = ref(false) |
| 219 | const ticketForm = ref({}) | 224 | const ticketForm = ref({}) |
| ... | @@ -233,20 +238,20 @@ onMounted(() => { | ... | @@ -233,20 +238,20 @@ onMounted(() => { |
| 233 | isEdit.value = true | 238 | isEdit.value = true |
| 234 | getList() | 239 | getList() |
| 235 | } | 240 | } |
| 236 | // 获取票务订单信息 | 241 | // 获取票务订单信息 |
| 237 | getTickInfo() | 242 | getTickInfo() |
| 238 | }) | 243 | }) |
| 239 | 244 | ||
| 240 | // 票务订单详情 | 245 | // 票务订单详情 |
| 241 | async function getTickInfo() { | 246 | async function getTickInfo() { |
| 242 | const res = await getTicketOrderInfo({orderId: route.query.orderId}) | 247 | const res = await getTicketOrderInfo({ orderId: route.query.orderId }) |
| 243 | ticketForm.value = res.data | 248 | ticketForm.value = res.data |
| 244 | try { | 249 | try { |
| 245 | ticketForm.value.extJson = JSON.parse(ticketForm.value.extJson) | 250 | ticketForm.value.extJson = JSON.parse(ticketForm.value.extJson) |
| 246 | ticketForm.value.extJson.ticketDate = JSON.parse(ticketForm.value.extJson.ticketDate) | 251 | ticketForm.value.extJson.ticketDate = JSON.parse(ticketForm.value.extJson.ticketDate) |
| 247 | ticketForm.value.extJson.ticketType = JSON.parse(ticketForm.value.extJson.ticketType) | 252 | ticketForm.value.extJson.ticketType = JSON.parse(ticketForm.value.extJson.ticketType) |
| 248 | cptId = ticketForm.value.extJson.ticketDate.activityId | 253 | cptId = ticketForm.value.extJson.ticketDate.activityId |
| 249 | totalMoney.val = ticketForm.value.extJson.total | 254 | totalMoney.value.val = ticketForm.value.extJson.total |
| 250 | message.value = JSON.parse(ticketForm.value.extJson.message) | 255 | message.value = JSON.parse(ticketForm.value.extJson.message) |
| 251 | console.log(message.value) | 256 | console.log(message.value) |
| 252 | paymentType.value = ticketForm.value.paymentType | 257 | paymentType.value = ticketForm.value.paymentType |
| ... | @@ -261,14 +266,14 @@ async function getTickInfo() { | ... | @@ -261,14 +266,14 @@ async function getTickInfo() { |
| 261 | } | 266 | } |
| 262 | 267 | ||
| 263 | async function getDetail(activeId) { | 268 | async function getDetail(activeId) { |
| 264 | const res = await getTicketInfoByActivityId({activityId: activeId}) | 269 | const res = await getTicketInfoByActivityId({ activityId: activeId }) |
| 265 | matchForm.value = res.data | 270 | matchForm.value = res.data |
| 266 | console.log(matchForm.value) | 271 | console.log(matchForm.value) |
| 267 | } | 272 | } |
| 268 | 273 | ||
| 269 | function getList() { | 274 | function getList() { |
| 270 | getInvoiceDetail(invoiceId.value).then(res => { | 275 | getInvoiceDetail(invoiceId.value).then(res => { |
| 271 | form.value = res.data; | 276 | form.value = res.data |
| 272 | totalMoney.value = form.value.total | 277 | totalMoney.value = form.value.total |
| 273 | }) | 278 | }) |
| 274 | } | 279 | } |
| ... | @@ -313,14 +318,14 @@ function submit() { | ... | @@ -313,14 +318,14 @@ function submit() { |
| 313 | 318 | ||
| 314 | function update() { | 319 | function update() { |
| 315 | editInvoice(form.value).then(res => { | 320 | editInvoice(form.value).then(res => { |
| 316 | //返回列表 | 321 | // 返回列表 |
| 317 | backList() | 322 | backList() |
| 318 | }) | 323 | }) |
| 319 | } | 324 | } |
| 320 | 325 | ||
| 321 | function add() { | 326 | function add() { |
| 322 | submitInvoice(form.value).then(res => { | 327 | submitInvoice(form.value).then(res => { |
| 323 | //返回列表 | 328 | // 返回列表 |
| 324 | backList() | 329 | backList() |
| 325 | }) | 330 | }) |
| 326 | } | 331 | } | ... | ... |
| ... | @@ -13,20 +13,6 @@ | ... | @@ -13,20 +13,6 @@ |
| 13 | <div class="address">{{ TickForm.address }}</div> | 13 | <div class="address">{{ TickForm.address }}</div> |
| 14 | </div> | 14 | </div> |
| 15 | 15 | ||
| 16 | <div class="info"> | ||
| 17 | <div class="name">{{ TickForm2.ticketTypeName }}</div> | ||
| 18 | <div class="address"> | ||
| 19 | {{ TickForm2.stadiumName }} | | ||
| 20 | <span v-if="TickForm2.sessionType=='1000'">{{ language == 0 ? '日间场' : 'Day' }}</span> | ||
| 21 | <span v-else>{{ language == 0 ? '夜间场' : 'Night' }}</span> | ||
| 22 | | {{ TickForm2.ticketName }} | ||
| 23 | </div> | ||
| 24 | |||
| 25 | <div v-if="TickForm2.ticketType=='0'" class="address">{{ | ||
| 26 | language == 0 ? '剩余数量' : 'Remaining Quantity' | ||
| 27 | }}: {{ leftCount }} | ||
| 28 | </div> | ||
| 29 | </div> | ||
| 30 | 16 | ||
| 31 | <div class="ticket_info mb20"> | 17 | <div class="ticket_info mb20"> |
| 32 | <div class="tit_box"> | 18 | <div class="tit_box"> |
| ... | @@ -153,9 +139,25 @@ | ... | @@ -153,9 +139,25 @@ |
| 153 | </div> | 139 | </div> |
| 154 | </div> | 140 | </div> |
| 155 | </div> | 141 | </div> |
| 156 | <!-- 场馆布局图--> | 142 | <div class="rightBox"> |
| 143 | <div class="info"> | ||
| 144 | <div class="name">{{ TickForm2.ticketTypeName }}</div> | ||
| 145 | <div class="address"> | ||
| 146 | {{ TickForm2.stadiumName }} | | ||
| 147 | <span v-if="TickForm2.sessionType=='1000'">{{ language == 0 ? '日间场' : 'Day' }}</span> | ||
| 148 | <span v-else>{{ language == 0 ? '夜间场' : 'Night' }}</span> | ||
| 149 | | {{ TickForm2.ticketName }} | ||
| 150 | </div> | ||
| 151 | |||
| 152 | <div v-if="TickForm2.ticketType=='0'" class="address">{{ | ||
| 153 | language == 0 ? '剩余数量' : 'Remaining Quantity' | ||
| 154 | }}: {{ leftCount }} | ||
| 155 | </div> | ||
| 156 | </div> | ||
| 157 | </div> | ||
| 157 | 158 | ||
| 158 | <div style="margin-top: 95px"> | 159 | <!-- 场馆布局图--> |
| 160 | <div style="margin-top: 30px"> | ||
| 159 | <el-image | 161 | <el-image |
| 160 | :preview-src-list="[fillImgUrl(tickImg)]" | 162 | :preview-src-list="[fillImgUrl(tickImg)]" |
| 161 | :src="fillImgUrl(tickImg)" | 163 | :src="fillImgUrl(tickImg)" |
| ... | @@ -709,4 +711,15 @@ div { | ... | @@ -709,4 +711,15 @@ div { |
| 709 | width: 100%; | 711 | width: 100%; |
| 710 | } | 712 | } |
| 711 | } | 713 | } |
| 714 | |||
| 715 | .rightBox { | ||
| 716 | .info { | ||
| 717 | background: rgba(69, 61, 234, 0.04); | ||
| 718 | border-radius: 8px; | ||
| 719 | border: 1px solid #d3d1f6; | ||
| 720 | padding: 20px 0 28px 33px; | ||
| 721 | margin-bottom: 20px; | ||
| 722 | margin-top: 30px; | ||
| 723 | } | ||
| 724 | } | ||
| 712 | </style> | 725 | </style> | ... | ... |
| ... | @@ -183,7 +183,7 @@ | ... | @@ -183,7 +183,7 @@ |
| 183 | class="son" | 183 | class="son" |
| 184 | fit="cover" | 184 | fit="cover" |
| 185 | preview-teleported | 185 | preview-teleported |
| 186 | style="width:200px" | 186 | style="width:190px;height: 135px" |
| 187 | /> | 187 | /> |
| 188 | </div> | 188 | </div> |
| 189 | </div> | 189 | </div> |
| ... | @@ -409,8 +409,8 @@ function selectTick(v) { | ... | @@ -409,8 +409,8 @@ function selectTick(v) { |
| 409 | selectForm.value.price = v.price | 409 | selectForm.value.price = v.price |
| 410 | selectForm.value.priceEn = v.priceEn | 410 | selectForm.value.priceEn = v.priceEn |
| 411 | // console.log(v) | 411 | // console.log(v) |
| 412 | 412 | showUrl.value = v.images | |
| 413 | handleImage() | 413 | show.value = true |
| 414 | } | 414 | } |
| 415 | 415 | ||
| 416 | function toSelectSeat() { | 416 | function toSelectSeat() { |
| ... | @@ -789,7 +789,7 @@ getmatchData() | ... | @@ -789,7 +789,7 @@ getmatchData() |
| 789 | .son { | 789 | .son { |
| 790 | position: absolute; | 790 | position: absolute; |
| 791 | top: 0; | 791 | top: 0; |
| 792 | left: 30px; | 792 | left: 50px; |
| 793 | } | 793 | } |
| 794 | 794 | ||
| 795 | .remarks { | 795 | .remarks { | ... | ... |
-
Please register or sign in to post a comment