Skip to content

jijin / dance-pc

Go to a project
Toggle navigation
Toggle navigation pinning
01c8ae36 by zhangmeng
Options

票务

1 parent 0de836b9
Inline Side-by-side
Showing 3 changed files with 189 additions and 138 deletions
src/viewsPc/booking/ticket/confirmOrder.vue
<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">
......@@ -11,7 +12,7 @@
<div class="name">{{ TickForm.name }}</div>
<div class="address">{{ TickForm.address }}</div>
</div>
<div class="info">
<div class="name">{{ TickForm2.ticketTypeName }}</div>
<div class="address">
......@@ -20,67 +21,76 @@
<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 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>
</div>
<div class="form">
<el-form ref="formRef" :model="orderForm" :rules="rules" label-width="140px">
<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>
</div>
<el-form-item
:label="language == 0 ? '联系人' : 'contact person'" prop="contacts"
:label="language == 0 ? '联系人' : 'contact person'" prop="contacts"
>
<el-input
v-model="orderForm.contacts"
:placeholder=" language == 0 ? '请输入联系人' : 'Please enter the contact person'"
style="width: 320px"
v-model="orderForm.contacts"
:placeholder=" language == 0 ? '请输入联系人' : 'Please enter the contact person'"
style="width: 320px"
/>
</el-form-item>
<el-form-item
:label="language == 0 ? '联系电话' : 'contact phone'" prop="phone"
:label="language == 0 ? '联系电话' : 'contact phone'" prop="phone"
>
<el-input
v-model="orderForm.phone"
:placeholder=" language == 0 ? '请输入联系电话' : 'Please enter the contact phone number'"
style="width: 320px"
v-model="orderForm.phone"
:placeholder=" language == 0 ? '请输入联系电话' : 'Please enter the contact phone number'"
style="width: 320px"
/>
</el-form-item>
<el-form-item :label="language == 0 ? '观看人' : 'Viewer'" prop="customerIds">
......@@ -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>
......@@ -109,21 +119,21 @@
</div>
</div>
</el-col>
<el-col :lg="8" class="right">
<div class="tit_box">
<div class="line"/>
<div class="line" />
<div class="txt">
{{ languageFormat(language, "订单明细", "Order summary") }}
</div>
</div>
<div class="detail">
<div class="detail_top">
<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()
......@@ -232,7 +251,7 @@ onMounted(() => {
tickImg.value = route.query.tickImg
customerList()
getDetail()
getActivityTypeVoById({
id: route.params.latstId
}).then((res) => {
......@@ -270,12 +289,12 @@ function changeGroup(e) {
}).then(res => {
if (res.data.length > 0) {
const names = _.map(res.data, (d) => d.name).join(',')
ElMessage({
message: language.value == 0 ? `${names} 已购买该票` : 'The user has purchased the ticket',
type: 'error'
})
_.each(res.data, (d) => {
_.remove(orderForm.value.customerIds, (c) => c == d.id)
_.find(personnelList.value, (p) => p.id == d.id).disabled = true
......@@ -297,7 +316,7 @@ async function paymentHandle() {
useStore().setVisitor()
return
}
if (TickForm2.value.ticketType == '1') {
if (currSeat.value.length == 0) {
ElMessage({
......@@ -314,14 +333,14 @@ async function paymentHandle() {
return
}
}
await formRef.value.validate()
await ElMessageBox.confirm(language.value == 0 ? '确认提交订单吗？' : 'Confirm to submit the order?', {
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) => {
......@@ -337,7 +356,7 @@ async function paymentHandle() {
seatNo: tempSeat.seatNo
})
})
const res = await submitOrderTicket({
activeId: orderForm.value.activeId,
orderName: TickForm2.value.ticketTypeName,
......@@ -384,13 +403,13 @@ async function paymentHandle() {
} catch (e) {
ElMessage.error(language.value == 0 ? '下单失败,' : 'Order failure')
} finally {
}
})
}
async function getDetail() {
const res = await getTicketInfoByActivityId({activityId: orderForm.value.activeId})
const res = await getTicketInfoByActivityId({ activityId: orderForm.value.activeId })
TickForm.value = res.data
}
......@@ -402,7 +421,11 @@ function addPeopl() {
}
const showImg = () => {
}
function handelUp() {
router.go(-1)
}
</script>
......@@ -428,7 +451,7 @@ div {
//padding: 20px 0;
width: 1200px;
margin: 20px auto;
.tag_t {
padding: 1px 10px;
font-weight: 400;
......@@ -438,7 +461,7 @@ div {
border: 1px solid #453dea;
margin-left: 5px;
}
.title {
padding: 11px;
text-align: center;
......@@ -446,18 +469,18 @@ div {
font-size: 18px;
color: #ffffff;
}
.content {
background-color: #fff;
}
.line {
width: 4px;
height: 18px;
background: linear-gradient(180deg, #493ceb 0%, #8623fc 100%);
border-radius: 4px;
}
.left {
.info {
background: rgba(69, 61, 234, 0.04);
......@@ -465,54 +488,54 @@ div {
border: 1px solid #d3d1f6;
padding: 20px 0 28px 33px;
margin-bottom: 20px;
.name {
font-weight: 500;
font-size: 18px;
color: #000000;
margin-bottom: 20px;
}
.address {
font-weight: 400;
font-size: 14px;
color: #929aa0;
}
}
.ticket_info {
.tit_box {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 14px;
.txt {
font-weight: bold;
font-size: 16px;
color: #493ceb;
}
}
.form {
min-height: 464px;
padding: 20px 60px;
border-radius: 5px;
border: 1px solid #dcdfe6;
.p_box {
display: flex;
width: 100%;
gap: 10px;
max-width: 400px;
.people {
width: 100%;
background: #fbfcfd;
border-radius: 2px;
border: 1px solid #dcdfe6;
padding: 0 14px;
.prople_item {
display: flex;
justify-content: space-between;
......@@ -521,30 +544,30 @@ div {
border-bottom: 1px solid #dcdfe6;
width: 100%;
position: relative;
&:last-child {
border: none;
}
.name {
font-size: 16px;
//color: #929aa0;
margin-bottom: 20px;
.tag_t {
position: absolute;
right: 30px;
padding: 8px;
}
}
.idcard {
font-size: 10px;
color: #929aa0;
}
}
}
.btn {
width: 90px;
height: 40px;
......@@ -563,30 +586,30 @@ div {
}
}
}
.right {
.tit_box {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 20px;
.txt {
font-weight: bold;
font-size: 16px;
color: #493ceb;
}
}
.detail {
padding: 15px 26px;
border-radius: 5px;
border: 1px solid #dcdfe6;
.detail_top {
padding-bottom: 13px;
border-bottom: 1px solid #dcdfe6;
.time {
font-weight: 500;
font-size: 20px;
......@@ -594,13 +617,13 @@ div {
line-height: 25px;
margin-bottom: 8px;
}
.ticket {
font-size: 16px;
color: #2d373f;
}
}
.detail_center {
margin-top: 14px;
display: flex;
......@@ -608,26 +631,26 @@ div {
padding-bottom: 13px;
border-bottom: 1px solid #dcdfe6;
gap: 8px;
.ticket {
font-size: 16px;
color: #2d373f;
}
}
.detail_b {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 16px;
.sum_txt {
font-weight: 600;
font-size: 18px;
color: #2d373f;
line-height: 25px;
}
.price_num {
font-weight: 600;
font-size: 36px;
......@@ -637,7 +660,7 @@ div {
}
}
}
.footer {
display: flex;
justify-content: space-between;
......@@ -647,20 +670,20 @@ div {
box-shadow: 0px 0px 46px 0px rgba(1, 16, 64, 0.08);
margin-top: 9px;
padding: 0 30px;
.label {
font-size: 16px;
color: #7b7f83;
line-height: 22px;
}
.value {
font-size: 22px;
color: #ff8124;
line-height: 30px;
font-weight: 600;
}
.pay {
width: 200px;
height: 40px;
......@@ -677,6 +700,16 @@ div {
}
}
.father {
position: relative;
}
.son {
position: absolute;
left: 10px;
cursor: pointer
}
@media screen and (max-width: 768px) {
.container {
width: 100%;
......
src/viewsPc/booking/ticket/index.vue
......@@ -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">
......@@ -37,11 +37,11 @@
<div class="address">
{{ triggerLanguage(language, "地址", "Location") }}：{{ matchForm.address }}
</div>
<div v-if="timeData>0">
<!-- 倒计时-->
<p class="countDownTitle">
<span v-if="language==0">售票倒计时</span>
<span v-else>TICKET COUNTDOWN</span>
......@@ -60,7 +60,7 @@
</van-count-down>
</div>
<div v-else>
<!-- 票档 -->
<div class="select_item_box">
<div class="label">
......@@ -83,7 +83,7 @@
</div>
</div>
</div>
<!-- 场馆 -->
<div class="select_item_box">
<div class="label">
......@@ -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'
......@@ -116,7 +116,7 @@
</div>
</div>
</div>
<!-- 场次 -->
<div class="select_item_box">
<div class="label">
......@@ -140,11 +140,11 @@
<span v-else>{{
language == 0 ? '夜间场' : 'Night'
}}</span>
<!-- {{ key=='1000'?'日间场':'夜间场' }}-->
<!-- {{ key=='1000'?'日间场':'夜间场' }}-->
</div>
</div>
</div>
<!-- 票型 -->
<div class="select_item_box">
<div class="label">
......@@ -177,8 +177,8 @@
</div>
</div>
</div>
<!-- 价格 -->
<div class="select_item_box">
<div class="label">
......@@ -205,7 +205,7 @@
{{ matchForm.ticketRemark }}
</div>
</div>
<div
v-if="endTime<=0" class="btn" style="margin-left: 40px;opacity: 0.5;cursor: not-allowed;margin-top: 10px"
@click="toSelectClosed"
......@@ -219,20 +219,23 @@
triggerLanguage(language, "立即购票", "Buy tickets now")
}}
</div>
</div>
</div>
</div>
<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" />
<el-dialog v-model="show" title="" width="1000px">
<div>
<img :src="fillImgUrl(showUrl)" alt="" style="width: 100%">
......@@ -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) {
......@@ -339,7 +344,7 @@ async function getTicketListType() {
const res = await getActivityTypeVoListByLatsId({ latsId: selectForm.value.latsId })
tickList.value = res.data
selectForm.value.sessionType = Object.keys(res.data)[0]
currTick.value = tickList.value[selectForm.value.sessionType][0]
selectForm.value.latstId = currTick.value?.id
selectForm.value.price = currTick.value?.price
......@@ -354,7 +359,7 @@ function select(v) {
selectForm.value.id = null
selectForm.value.price = '--'
selectForm.value.priceEn = '--'
getVenueList()
}
......@@ -366,13 +371,13 @@ function selectVenue(v) {
selectForm.value.id = null
selectForm.value.price = '--'
selectForm.value.priceEn = '--'
getTicketListType()
}
function selectSessionType(key) {
selectForm.value.sessionType = key
currTick.value = tickList.value[selectForm.value.sessionType][0]
selectForm.value.latstId = currTick.value?.id
selectForm.value.price = currTick.value?.price
......@@ -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>
......@@ -453,18 +472,17 @@ function toSelectClosed() {
display: flex;
padding: 19px;
margin-top: 26px;
.cover_img {
width: 390px;
height: 517px;
width: 500px;
object-fit: fill;
margin-right: 36px;
}
.info {
padding-top: 12px;
width: 100%;
.title {
font-weight: bold;
font-size: 28px;
......@@ -472,7 +490,7 @@ function toSelectClosed() {
line-height: 1.6;
margin-bottom: 15px;
}
.time {
font-weight: 600;
font-size: 16px;
......@@ -480,7 +498,7 @@ function toSelectClosed() {
line-height: 24px;
margin-bottom: 16px;
}
.address {
font-weight: 600;
font-size: 16px;
......@@ -488,15 +506,15 @@ function toSelectClosed() {
line-height: 24px;
margin-bottom: 15px;
}
.select_item_box {
display: flex;
margin-bottom: 10px;
&:last-child {
margin-bottom: 0;
}
.label {
font-weight: 600;
font-size: 16px;
......@@ -505,18 +523,18 @@ function toSelectClosed() {
margin-right: 12px;
flex-shrink: 0;
}
.forbid {
opacity: 0.5 !important;
cursor: not-allowed !important;
}
.select_item {
display: flex;
flex-wrap: wrap;
gap: 10px;
user-select: none;
.tag_t {
padding: 1px 15px;
font-weight: 400;
......@@ -526,7 +544,7 @@ function toSelectClosed() {
border: 1px solid #453dea;
margin-left: 5px;
}
.tag {
display: flex;
padding: 12px 18px;
......@@ -537,7 +555,7 @@ function toSelectClosed() {
color: #4a4a4a;
cursor: pointer;
}
.tagActive {
display: flex;
padding: 12px 18px;
......@@ -548,14 +566,14 @@ function toSelectClosed() {
color: #493ceb;
cursor: pointer;
}
.tao {
border: 1px solid #493ceb;
font-size: 14px;
color: #493ceb;
margin-left: 10px;
}
.tagDisabled {
padding: 12px 18px;
background: #878787;
......@@ -567,7 +585,7 @@ function toSelectClosed() {
}
}
}
.btn {
width: 175px;
height: 40px;
......@@ -587,7 +605,7 @@ function toSelectClosed() {
padding: 50px;
margin-top: 30px;
margin-bottom: 30px;
.title {
padding: 20px 30px;
background: linear-gradient(270deg, #493ceb 0%, #8623fc 100%);
......@@ -597,15 +615,15 @@ function toSelectClosed() {
line-height: 30px;
margin-bottom: 30px;
}
.rich_content {
margin-top: 30px;
:deep(img) {
width: 100% !important;
height: auto !important;
}
}
}
......@@ -623,44 +641,44 @@ function toSelectClosed() {
height: 160px;
margin-right: 15px;
}
.info {
padding: 0;
.title {
font-size: 14px;
margin: 0;
}
.time, .address, .label, .tip {
font-size: 12px;
}
.title, .time, .address, .tip, .select_item_box {
margin-bottom: 3px;
}
.select_item_box {
.label {
font-size: 12px;
}
.select_item .tag {
padding: 2px 10px;
font-size: 12px;
}
.select_item .tagActive {
padding: 2px 10px;
font-size: 12px;
}
.select_item .tagDisabled {
padding: 2px 10px;
font-size: 12px;
}
}
.btn {
display: inline-block;
margin: 10px 0 0;
......@@ -678,8 +696,8 @@ function toSelectClosed() {
.bottom {
padding: 0
}
}
.countDownTitle {
......
vite.config.js
......@@ -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,
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!