Skip to content

jijin / dance-pc

Go to a project
Toggle navigation
Toggle navigation pinning
2f50b3a5 by zhangmeng
Options

预订查询

1 parent 3fa14c0a
Inline Side-by-side
Showing 5 changed files with 412 additions and 21 deletions
src/routerPc/en.js
......@@ -313,6 +313,12 @@ export const constantRoutes = [
component: () => import('@/viewsPc/match/detail_en'),
name: 'matchDetail',
meta: {title: '赛事详情'}
},
{
path: 'list/reservationSearch',
component: () => import('@/viewsPc/match/reservationSearch.vue'),
name: 'reservationSearch',
meta: {title: '预约查询'}
}
]
},
......
src/viewsPc/match/components/airportPickupTable.vue 0 → 100644
<template>
<div class="collapsebox">
<div class="pd20">
<div class="fr mb20">
<el-input
v-model.trim="query.projectName"
:placeholder="language==0?'请输入邮箱或联系方式':'Please enter email or contact information' "
:prefix-icon="Search"
clearable
size="small"
@change="getList"/>
</div>
<el-table :data="list" border>
<el-table-column :label="language==0?'序号':'Serial'" :min-width="language==0?60:80" align="center"
type="index"/>
<el-table-column :label="language==0?'服务类型':'Type Of Service'" align="center" min-width="150"
prop="name"></el-table-column>
<el-table-column :label="language==0?'联系人':'Contacts'" align="center" prop="danceType" width="110">
</el-table-column>
<el-table-column :label="language==0?'联系方式':'Contact Way'" align="center" prop="danceTypeDetailStr"
width="120">
</el-table-column>
<el-table-column :label="language==0?'抵达时间':'Time Of Arrival'" align="center" width="140">
<template #default="{row}">
<span v-if="row.playTypeStr">{{ row.playTypeStr }}</span>
<span v-else>{{ row.playType }}</span>
</template>
</el-table-column>
<el-table-column :label="language==0?'人数':'Number Of People'" :min-width="isNational?120:240" align="center">
<template #default="{row}">
</template>
</el-table-column>
<el-table-column :label="language==0?'航班 / 车次':'Flight / train number'" align="center" width="160">
<template #default="{row}">
<div class="text-primary">{{ language == 0 ? '¥' : '€' }}{{ row.serviceFee }}</div>
</template>
</el-table-column>
<el-table-column :label="language==0?'机场 / 火车站':'Airport / Train station'" align="center" width="160">
<template #default="{row}">
<div class="text-primary">{{ language == 0 ? '¥' : '€' }}{{ row.serviceFee }}</div>
</template>
</el-table-column>
<el-table-column :label="language==0?'航站楼':'Terminal'" align="center" width="160">
<template #default="{row}">
<div class="text-primary">{{ language == 0 ? '¥' : '€' }}{{ row.serviceFee }}</div>
</template>
</el-table-column>
<el-table-column :label="language==0?'目的地/出发地':'Destination / Place Of Departure'" align="center"
width="260">
<template #default="{row}">
<div class="text-primary">{{ language == 0 ? '¥' : '€' }}{{ row.serviceFee }}</div>
</template>
</el-table-column>
</el-table>
<PaginationPc
v-show="total>0"
v-model:limit="query.pageSize"
v-model:page="query.pageNum"
:total="total"
@pagination="getList"
/>
</div>
</div>
</template>
<script setup>
import {Search} from "@element-plus/icons-vue";
import {useStorage} from "@vueuse/core/index"
import {getProjectByCptId} from "@/apiPc/match";
import PaginationPc from "@/components/PaginationPc";
const language = useStorage('language', 0)
const list = ref([])
const total = ref(0)
const query = ref({
projectName: '',
pageSize: 10,
pageNum: 1
})
const props = defineProps({
matchId: {
type: String,
required: false
},
isNational: {
type: Boolean,
required: false,
default: false
},
})
function getList() {
getProjectByCptId(props.matchId, query.value).then(res => {
list.value = res.rows
total.value = res.total
})
}
</script>
<style lang="scss" scoped>
.table {
width: 100%;
border-left: 1px solid #e1e1e1;
border-top: 1px solid #e1e1e1;
th {
background: #eee;
padding: 6px 10px;
text-transform: uppercase;
border-right: 1px solid #e1e1e1;
border-bottom: 1px solid #e1e1e1;
font-size: 15px;
}
td {
padding: 6px 10px;
border-right: 1px solid #e1e1e1;
font-size: 15px;
border-bottom: 1px solid #e1e1e1;
vertical-align: middle;
text-align: center;
span {
margin-right: 10px
}
span::after {
content: ','
}
span:last-child::after {
content: ''
}
}
}
</style>
src/viewsPc/match/components/hotTable.vue 0 → 100644
<template>
<div class="collapsebox">
<div class="pd20">
<div class="fr mb20">
<el-input
v-model.trim="query.projectName"
:placeholder="language==0?'请输入邮箱或联系方式':'Please enter email or contact information'"
:prefix-icon="Search"
clearable
size="small"
@change="getList"/>
</div>
<el-table :data="list" border>
<el-table-column :label="language==0?'序号':'Serial'" :min-width="language==0?60:80" align="center"
type="index"/>
<el-table-column :label="language==0?'酒店名称':'Hotel Name'" align="center" min-width="150"
prop="name"></el-table-column>
<el-table-column :label="language==0?'联系人':'Contacts'" align="center" prop="danceType" width="110">
</el-table-column>
<el-table-column :label="language==0?'联系方式':'Contact Way'" align="center" prop="danceTypeDetailStr"
width="120">
</el-table-column>
<el-table-column :label="language==0?'预留日期':'Reservation Date'" align="center">
<template #default="{row}">
<span v-if="row.playTypeStr">{{ row.playTypeStr }}</span>
<span v-else>{{ row.playType }}</span>
</template>
</el-table-column>
<el-table-column :label="language==0?'房型':'Room Type'" :min-width="isNational?120:240" align="center">
<template #default="{row}">
<div v-if="isNational">
<span v-if="row.ageGroup == '0'">{{ language == 0 ? '不限制' : 'Unlimited' }}</span>
<span v-if="row.ageGroup == '1'">Juvenile I</span>
<span v-if="row.ageGroup == '2'">Juvenile II</span>
<span v-if="row.ageGroup == '3'">Juv1& II (comb.)</span>
<span v-if="row.ageGroup == '4'">Junior I</span>
<span v-if="row.ageGroup == '5'">Junior II</span>
<span v-if="row.ageGroup == '6'">Juv I & II (comb.)</span>
<span v-if="row.ageGroup == '7'">
<span v-if="row.danceType=='Breaking'">2006-01-01 {{
language == 0 ? '至' : '~'
}} 2010-12-31</span>
<span v-else>Youth</span>
</span>
<span v-if="row.ageGroup == '8'">Under 21</span>
<span v-if="row.ageGroup == '9'">Adult</span>
<span v-if="row.ageGroup == '10'">Senior I</span>
<span v-if="row.ageGroup == '11'">Senior II</span>
<span v-if="row.ageGroup == '12'">Senior III</span>
<span v-if="row.ageGroup == '13'">Senior IV</span>
<span v-if="row.ageGroup == '14'">Senior V</span>
</div>
<div v-else>
<div>{{ row.birthPeriod.replace(',', language == 0 ? ' 至 ' : ' to ') }}</div>
<div v-if="row.birthPeriodSecond">
{{ row.birthPeriodSecond?.replace(',', language == 0 ? ' 至 ' : ' to ') }}
</div>
<div v-if="row.birthPeriodThird">
{{ row.birthPeriodThird?.replace(',', language == 0 ? ' 至 ' : ' to ') }}
</div>
<div v-if="row.birthPeriodFourth">
{{ row.birthPeriodFourth?.replace(',', language == 0 ? ' 至 ' : ' to ') }}
</div>
<div v-if="row.birthPeriodFifth">
{{ row.birthPeriodFifth?.replace(',', language == 0 ? ' 至 ' : ' to ') }}
</div>
<div v-if="row.birthPeriodSixth">
{{ row.birthPeriodSixth?.replace(',', language == 0 ? ' 至 ' : ' to ') }}
</div>
</div>
</template>
</el-table-column>
<el-table-column :label="language==0?'数量':'Quantity'" align="center" width="160">
<template #default="{row}">
<div class="text-primary">{{ language == 0 ? '¥' : '€' }}{{ row.serviceFee }}</div>
</template>
</el-table-column>
<el-table-column :label="language==0?'状态':'State'" align="center" width="160">
<template #default="{row}">
<div class="text-primary">{{ language == 0 ? '¥' : '€' }}{{ row.serviceFee }}</div>
</template>
</el-table-column>
</el-table>
<PaginationPc
v-show="total>0"
v-model:limit="query.pageSize"
v-model:page="query.pageNum"
:total="total"
@pagination="getList"
/>
</div>
</div>
</template>
<script setup>
import {Search} from "@element-plus/icons-vue";
import {useStorage} from "@vueuse/core/index"
import {getProjectByCptId} from "@/apiPc/match";
import PaginationPc from "@/components/PaginationPc";
const language = useStorage('language', 0)
const list = ref([])
const total = ref(0)
const query = ref({
projectName: '',
pageSize: 10,
pageNum: 1
})
const props = defineProps({
matchId: {
type: String,
required: false
},
isNational: {
type: Boolean,
required: false,
default: false
},
})
function getList() {
getProjectByCptId(props.matchId, query.value).then(res => {
list.value = res.rows
total.value = res.total
})
}
</script>
<style lang="scss" scoped>
.table {
width: 100%;
border-left: 1px solid #e1e1e1;
border-top: 1px solid #e1e1e1;
th {
background: #eee;
padding: 6px 10px;
text-transform: uppercase;
border-right: 1px solid #e1e1e1;
border-bottom: 1px solid #e1e1e1;
font-size: 15px;
}
td {
padding: 6px 10px;
border-right: 1px solid #e1e1e1;
font-size: 15px;
border-bottom: 1px solid #e1e1e1;
vertical-align: middle;
text-align: center;
span {
margin-right: 10px
}
span::after {
content: ','
}
span:last-child::after {
content: ''
}
}
}
</style>
src/viewsPc/match/components/quick-row.vue
<template>
<div style="filter: opacity(1)">
<el-row :gutter="14" v-if="language==0">
<el-row v-if="language==0" :gutter="14" class="btnbox">
<el-col :lg="4" :md="8" :sm="12" :xs="12">
<div class="funcBtn" @click="popRemark(0)">
<img src="@/assets/dance/btn04.png"/>
......@@ -20,6 +20,12 @@
</div>
</el-col>
<el-col :lg="4" :md="8" :sm="12" :xs="12">
<div class="funcBtn" @click="popRemark(6)">
<img src="@/assets/dance/btn04.png"/>
<h4>预订查询</h4>
</div>
</el-col>
<el-col :lg="4" :md="8" :sm="12" :xs="12">
<div class="funcBtn" @click="popRemark(3)">
<img src="@/assets/dance/btn03.png"/>
<h4>餐饮预订</h4>
......@@ -38,7 +44,7 @@
</div>
</el-col>
</el-row>
<el-row :gutter="14" v-else>
<el-row v-else :gutter="14" class="btnbox">
<el-col :lg="4" :md="8" :sm="12" :xs="12">
<div class="funcBtn" @click="popRemark(0)">
<img src="@/assets/dance/btn04.png"/>
......@@ -58,6 +64,12 @@
</div>
</el-col>
<el-col :lg="4" :md="8" :sm="12" :xs="12">
<div class="funcBtn" @click="popRemark(6)">
<img src="@/assets/dance/btn04.png"/>
<h4>RESERVATION SEARCH</h4>
</div>
</el-col>
<el-col :lg="4" :md="8" :sm="12" :xs="12">
<div class="funcBtn" @click="popRemark(3)">
<img src="@/assets/dance/btn03.png"/>
<h4>DINING RESERVATION</h4>
......@@ -79,10 +91,10 @@
</div>
<order-remark ref="orderRemarkRef" @submit="goBooking"/>
<!-- <div class="fixedKP" @click="addInvoice">-->
<!-- <img src="@/assets/img/kp.svg"/>-->
<!-- 开票-->
<!-- </div>-->
<!-- <div class="fixedKP" @click="addInvoice">-->
<!-- <img src="@/assets/img/kp.svg"/>-->
<!-- 开票-->
<!-- </div>-->
</template>
<script setup>
......@@ -122,7 +134,7 @@ onMounted(() => {
function building() {
ElMessage.warning(language.value == 0 ? '感谢您对本次比赛的关注，该服务暂无可预订信息，敬请期待。' : 'Thank you for your attention to this competition. The service is currently unavailable for booking. Please stay tuned.')
return
}
function popRemark(type) {
......@@ -132,16 +144,23 @@ function popRemark(type) {
}
if ((form.value.isJdView == 0 && type == '1')
|| (form.value.isCarView == 0 && type == '2')
|| (form.value.isFoodView == 0 && type == '3')
|| (form.value.isMealView == 0 && type == '4')
|| (form.value.isPhotoView == 0&&type == '5')
|| (form.value.isTicket==0 &type == '0')
)
{
|| (form.value.isCarView == 0 && type == '2')
|| (form.value.isFoodView == 0 && type == '3')
|| (form.value.isMealView == 0 && type == '4')
|| (form.value.isPhotoView == 0 && type == '5')
|| (form.value.isTicket == 0 && type == '0')
) {
building()
return
}
if (type == 6) {
return router.push({
path: '/match/list/reservationSearch',
query: {
matchId: props.matchId,
}
})
}
const params = {
matchId: props.matchId,
......@@ -184,7 +203,7 @@ function goBooking(n) {
}
}
function addInvoice(){
function addInvoice() {
router.push({
name: 'invoice',
query: {
......@@ -194,15 +213,38 @@ function addInvoice(){
}
</script>
<style scoped lang="scss">
<style lang="scss" scoped>
h4 {
padding: 0 10px;
}
.fixedKP{position: fixed;background: linear-gradient(-90deg, #8623FC, #453DEA);left: 0;
top:450px;cursor: pointer;
color: #fff;border-radius: 50%;width: 60px;height: 60px;text-align: center;
img{width: 26px;height: 26px;display: block;margin:10px auto 0px;}
.btnbox {
.el-col-lg-4 {
max-width: 14.28%;
flex: 0 0 14.28%;
}
}
.fixedKP {
position: fixed;
background: linear-gradient(-90deg, #8623FC, #453DEA);
left: 0;
top: 450px;
cursor: pointer;
color: #fff;
border-radius: 50%;
width: 60px;
height: 60px;
text-align: center;
img {
width: 26px;
height: 26px;
display: block;
margin: 10px auto 0px;
}
font-size: 13px;
box-shadow: 0 0 10px rgba(0,0,0,0.6);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
}
</style>
......
src/viewsPc/match/reservationSearch.vue 0 → 100644
<template>
<div class="box mb20">
<el-card :body-style="{'padding':'0'}">
<div class="lineHead">
<ul>
<li v-for="(l,i) in menu" :key="l.name" :class="active==i?'active':''" @click="changeMenu(l,i)">
{{ language == 0 ? l.cn : l.en }}
</li>
</ul>
</div>
<HotTable v-if="active==0"/>
<AirportPickupTable v-if="active==1"/>
</el-card>
</div>
</template>
<script lang="ts" setup>
import {useStorage} from "@vueuse/core/index";
import HotTable from '@/viewsPc/match/components/hotTable.vue'
import AirportPickupTable from '@/viewsPc/match/components/airportPickupTable.vue'
const language = useStorage('language', 0)
const active = ref(0)
const menu = ref([
{cn: '酒店预订查询', active: 0, en: 'Hotel reservation Enquiries'},
{cn: '接送机预订查询', active: 1, en: 'Transfer reservation inquiry'}
])
function changeMenu(v, i) {
active.value = i
}
</script>
<style lang="scss" scoped>
.box {
width: 1600px;
margin-top: 40px;
}
</style>
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!