提交
Showing
1 changed file
with
69 additions
and
31 deletions
| ... | @@ -40,17 +40,19 @@ | ... | @@ -40,17 +40,19 @@ |
| 40 | style="width: 320px" | 40 | style="width: 320px" |
| 41 | /> | 41 | /> |
| 42 | </el-form-item> | 42 | </el-form-item> |
| 43 | <el-form-item :label="language == 0 ? '观看人' : 'Viewer'" prop="customerList"> | 43 | <el-form-item :label="language == 0 ? '观看人' : 'Viewer'" prop="message"> |
| 44 | <div class="p_box"> | 44 | <div class="p_box"> |
| 45 | <div class="people"> | 45 | <div class="people"> |
| 46 | <el-checkbox-group v-model="orderForm.customerList" @change="changeGroup"> | 46 | <el-checkbox-group v-model="orderForm.message" @change="changeGroup"> |
| 47 | <div | 47 | <div |
| 48 | v-for="(it, index) in personnelList" :key="index" class="prople_item"> | 48 | v-for="(it, index) in personnelList" :key="index" class="prople_item"> |
| 49 | <div> | 49 | <div> |
| 50 | <div class="name">{{ it.name }}</div> | 50 | <div class="name">{{ it.name }} |
| 51 | <span v-if="it.discount" class="tag_t p-right">优惠</span> | ||
| 52 | </div> | ||
| 51 | <div class="idcard">{{ it.idCard }}</div> | 53 | <div class="idcard">{{ it.idCard }}</div> |
| 52 | </div> | 54 | </div> |
| 53 | <el-checkbox :value="it.id"/> | 55 | <el-checkbox :value="it"/> |
| 54 | </div> | 56 | </div> |
| 55 | </el-checkbox-group> | 57 | </el-checkbox-group> |
| 56 | </div> | 58 | </div> |
| ... | @@ -80,8 +82,17 @@ | ... | @@ -80,8 +82,17 @@ |
| 80 | {{ languageFormat(language, "套票", "Package ticket") }} | 82 | {{ languageFormat(language, "套票", "Package ticket") }} |
| 81 | </span> | 83 | </span> |
| 82 | </div> | 84 | </div> |
| 85 | <p>通票</p> | ||
| 86 | <div class="ticket detail_top"> | ||
| 87 | {{ language == 0 ? tickType.price : tickType.priceEn }} | ||
| 88 | <span> {{ language == 0 ? '元' : 'Euro' }}</span> | ||
| 89 | {{ languageFormat(language, "票档", "Ticket file") }} | ||
| 90 | x 1 | ||
| 91 | {{ languageFormat(language, "张", "tickets") }} | ||
| 92 | </div> | ||
| 93 | <p>优惠票</p> | ||
| 83 | <div class="ticket"> | 94 | <div class="ticket"> |
| 84 | {{ tickType.price }} | 95 | {{ language == 0 ? tickType.rebatePrice : tickType.rebatePriceEn }} |
| 85 | <span> {{ language == 0 ? '元' : 'Euro' }}</span> | 96 | <span> {{ language == 0 ? '元' : 'Euro' }}</span> |
| 86 | {{ languageFormat(language, "票档", "Ticket file") }} | 97 | {{ languageFormat(language, "票档", "Ticket file") }} |
| 87 | x 1 | 98 | x 1 |
| ... | @@ -95,7 +106,7 @@ | ... | @@ -95,7 +106,7 @@ |
| 95 | <div class="price_num"> | 106 | <div class="price_num"> |
| 96 | <span>{{ language == 0 ? "¥" : "€" }}</span> | 107 | <span>{{ language == 0 ? "¥" : "€" }}</span> |
| 97 | {{ | 108 | {{ |
| 98 | language == 0 ? price.total_cn : price.total_en | 109 | language == 0 ? (price.total_cn * 1).toFixed(2) : (price.total_en * 1).toFixed(2) |
| 99 | }} | 110 | }} |
| 100 | </div> | 111 | </div> |
| 101 | </div> | 112 | </div> |
| ... | @@ -110,7 +121,7 @@ | ... | @@ -110,7 +121,7 @@ |
| 110 | </span> | 121 | </span> |
| 111 | <span class="value"> | 122 | <span class="value"> |
| 112 | <span>{{ language == 0 ? "¥" : "€" }}</span> | 123 | <span>{{ language == 0 ? "¥" : "€" }}</span> |
| 113 | {{ language == 0 ? price.total_cn : price.total_en }} | 124 | {{ language == 0 ? (price.total_cn * 1).toFixed(2) : (price.total_en * 1).toFixed(2) }} |
| 114 | </span> | 125 | </span> |
| 115 | </div> | 126 | </div> |
| 116 | <div class="pay" @click="paymentHandle"> | 127 | <div class="pay" @click="paymentHandle"> |
| ... | @@ -118,16 +129,6 @@ | ... | @@ -118,16 +129,6 @@ |
| 118 | </div> | 129 | </div> |
| 119 | </div> | 130 | </div> |
| 120 | 131 | ||
| 121 | <el-dialog | ||
| 122 | v-model="payment.showCodeDialog" | ||
| 123 | title="支付" | ||
| 124 | width="300" | ||
| 125 | @closed="payment.handleCloce()" | ||
| 126 | > | ||
| 127 | <div> | ||
| 128 | <img :src="payment.qrCodeData" alt class="qrcode"/> | ||
| 129 | </div> | ||
| 130 | </el-dialog> | ||
| 131 | </div> | 132 | </div> |
| 132 | </el-card> | 133 | </el-card> |
| 133 | 134 | ||
| ... | @@ -164,6 +165,8 @@ const props = defineProps({ | ... | @@ -164,6 +165,8 @@ const props = defineProps({ |
| 164 | }); | 165 | }); |
| 165 | const form = ref({}) | 166 | const form = ref({}) |
| 166 | const personnelList = ref([]) | 167 | const personnelList = ref([]) |
| 168 | const customerArr_q = ref([])//全票人 | ||
| 169 | const customerArr_b = ref([])//优惠票人 | ||
| 167 | const orderForm = ref({ | 170 | const orderForm = ref({ |
| 168 | activeId: route.params.activeId, | 171 | activeId: route.params.activeId, |
| 169 | atId: route.params.latId, | 172 | atId: route.params.latId, |
| ... | @@ -171,7 +174,8 @@ const orderForm = ref({ | ... | @@ -171,7 +174,8 @@ const orderForm = ref({ |
| 171 | ticketDate: null, | 174 | ticketDate: null, |
| 172 | ticketType: null, | 175 | ticketType: null, |
| 173 | phone: null, | 176 | phone: null, |
| 174 | customerList: [], | 177 | customerList: [],//人员ids列表 |
| 178 | message: [],//完整的人员列表 | ||
| 175 | num: 0, | 179 | num: 0, |
| 176 | total: null | 180 | total: null |
| 177 | }) | 181 | }) |
| ... | @@ -196,7 +200,7 @@ const rules = ref({ | ... | @@ -196,7 +200,7 @@ const rules = ref({ |
| 196 | trigger: "blur" | 200 | trigger: "blur" |
| 197 | }, | 201 | }, |
| 198 | ], | 202 | ], |
| 199 | customerList: [ | 203 | message: [ |
| 200 | { | 204 | { |
| 201 | required: true, | 205 | required: true, |
| 202 | message: languageFormat(language, "请选择观众", "Please select the audience"), | 206 | message: languageFormat(language, "请选择观众", "Please select the audience"), |
| ... | @@ -210,9 +214,37 @@ let timer = null; | ... | @@ -210,9 +214,37 @@ let timer = null; |
| 210 | 214 | ||
| 211 | customerList() | 215 | customerList() |
| 212 | 216 | ||
| 213 | function changeGroup() { | 217 | function changeGroup(e) { |
| 214 | orderForm.value.num = orderForm.value.customerList.length | 218 | // console.log(e) |
| 215 | getTicketTotal() | 219 | if (orderForm.value.message.length == 5) { |
| 220 | ElMessageBox.confirm(language.value == 0 ? '最多只能选择5个观众' : 'You can only select up to 5 audience members', { | ||
| 221 | confirmButtonText: language.value == 0 ? '确定' : 'Confirm', | ||
| 222 | cancelButtonText: language.value == 0 ? '取消' : 'Cancel', | ||
| 223 | type: 'warning' | ||
| 224 | }) | ||
| 225 | } else { | ||
| 226 | orderForm.value.num = orderForm.value.message.length | ||
| 227 | orderForm.value.customerList = orderForm.value.message.map(v => v.id) | ||
| 228 | customerArr_q.value = orderForm.value.message.filter(v => !v.discount) | ||
| 229 | customerArr_b.value = orderForm.value.message.filter(v => v.discount) | ||
| 230 | // 计算价格 | ||
| 231 | price.value = { | ||
| 232 | total_en: 0, | ||
| 233 | total_cn: 0 | ||
| 234 | } | ||
| 235 | orderForm.value.message.forEach(v => { | ||
| 236 | if (v.discount) { | ||
| 237 | price.value.total_cn += (tickType.value.rebatePrice * 1) | ||
| 238 | price.value.total_en += (tickType.value.rebatePriceEn * 1) | ||
| 239 | } else { | ||
| 240 | price.value.total_cn += (tickType.value.price * 1) | ||
| 241 | price.value.total_en += (tickType.value.priceEn * 1) | ||
| 242 | } | ||
| 243 | }) | ||
| 244 | } | ||
| 245 | console.log(orderForm.value.message) | ||
| 246 | |||
| 247 | |||
| 216 | } | 248 | } |
| 217 | 249 | ||
| 218 | // 获取人员列表 | 250 | // 获取人员列表 |
| ... | @@ -221,18 +253,13 @@ async function customerList() { | ... | @@ -221,18 +253,13 @@ async function customerList() { |
| 221 | personnelList.value = res.rows | 253 | personnelList.value = res.rows |
| 222 | } | 254 | } |
| 223 | 255 | ||
| 224 | // 获取价格 | ||
| 225 | async function getTicketTotal() { | ||
| 226 | const res = await getTicketTotalApi(orderForm.value) | ||
| 227 | price.value = res.data | ||
| 228 | orderForm.value.total = language == 0 ? price.value.total_cn : price.value.total_en | ||
| 229 | } | ||
| 230 | |||
| 231 | // 获取票档信息 | 256 | // 获取票档信息 |
| 232 | async function getTicketListType() { | 257 | async function getTicketListType() { |
| 233 | const res = await listApi({latId: orderForm.value.latId}) | 258 | const res = await listApi({latId: orderForm.value.latId}) |
| 234 | tickType.value = res.rows.find(item => item.id == orderForm.value.attId) | 259 | tickType.value = res.rows.find(item => item.id == orderForm.value.attId) |
| 235 | orderForm.value.ticketDate = JSON.stringify(tickType.value) | 260 | orderForm.value.ticketDate = JSON.stringify(tickType.value) |
| 261 | console.log(tickType.value) | ||
| 262 | |||
| 236 | } | 263 | } |
| 237 | 264 | ||
| 238 | getTicketListType() | 265 | getTicketListType() |
| ... | @@ -242,7 +269,6 @@ async function getTicketList() { | ... | @@ -242,7 +269,6 @@ async function getTicketList() { |
| 242 | const res = await getTicketListApi({activityId: route.params.activeId}) | 269 | const res = await getTicketListApi({activityId: route.params.activeId}) |
| 243 | matchType.value = res.rows.find(item => item.id == orderForm.value.atId) | 270 | matchType.value = res.rows.find(item => item.id == orderForm.value.atId) |
| 244 | orderForm.value.ticketType = JSON.stringify(matchType.value) | 271 | orderForm.value.ticketType = JSON.stringify(matchType.value) |
| 245 | |||
| 246 | } | 272 | } |
| 247 | 273 | ||
| 248 | getTicketList() | 274 | getTicketList() |
| ... | @@ -261,7 +287,11 @@ async function paymentHandle() { | ... | @@ -261,7 +287,11 @@ async function paymentHandle() { |
| 261 | cancelButtonText: language.value == 0 ? '取消' : 'Cancel', | 287 | cancelButtonText: language.value == 0 ? '取消' : 'Cancel', |
| 262 | type: 'warning' | 288 | type: 'warning' |
| 263 | }).then(async () => { | 289 | }).then(async () => { |
| 264 | const res = await submitOrderTicket(orderForm.value) | 290 | const res = await submitOrderTicket({ |
| 291 | ...orderForm.value, | ||
| 292 | message: JSON.stringify(orderForm.value.message), | ||
| 293 | total: language.value == 0 ? price.value.total_cn : price.value.total_en | ||
| 294 | }) | ||
| 265 | if (res.code == 200 && res.data.orderId > 0) { | 295 | if (res.code == 200 && res.data.orderId > 0) { |
| 266 | // 去付钱 | 296 | // 去付钱 |
| 267 | router.push({ | 297 | router.push({ |
| ... | @@ -393,6 +423,8 @@ div { | ... | @@ -393,6 +423,8 @@ div { |
| 393 | align-items: center; | 423 | align-items: center; |
| 394 | padding: 14px 0; | 424 | padding: 14px 0; |
| 395 | border-bottom: 1px solid #dcdfe6; | 425 | border-bottom: 1px solid #dcdfe6; |
| 426 | width: 100%; | ||
| 427 | position: relative; | ||
| 396 | 428 | ||
| 397 | &:last-child { | 429 | &:last-child { |
| 398 | border: none; | 430 | border: none; |
| ... | @@ -402,6 +434,12 @@ div { | ... | @@ -402,6 +434,12 @@ div { |
| 402 | font-size: 16px; | 434 | font-size: 16px; |
| 403 | color: #929aa0; | 435 | color: #929aa0; |
| 404 | margin-bottom: 20px; | 436 | margin-bottom: 20px; |
| 437 | |||
| 438 | .tag_t { | ||
| 439 | position: absolute; | ||
| 440 | right: 30px; | ||
| 441 | padding: 8px; | ||
| 442 | } | ||
| 405 | } | 443 | } |
| 406 | 444 | ||
| 407 | .idcard { | 445 | .idcard { | ... | ... |
-
Please register or sign in to post a comment