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 409 additions and 18 deletions
src/routerPc/en.js
...@@ -313,6 +313,12 @@ export const constantRoutes = [ ...@@ -313,6 +313,12 @@ export const constantRoutes = [
313 component: () => import('@/viewsPc/match/detail_en'), 313 component: () => import('@/viewsPc/match/detail_en'),
314 name: 'matchDetail', 314 name: 'matchDetail',
315 meta: {title: '赛事详情'} 315 meta: {title: '赛事详情'}
316 },
317 {
318 path: 'list/reservationSearch',
319 component: () => import('@/viewsPc/match/reservationSearch.vue'),
320 name: 'reservationSearch',
321 meta: {title: '预约查询'}
316 } 322 }
317 ] 323 ]
318 }, 324 },
......
src/viewsPc/match/components/airportPickupTable.vue 0 → 100644
1 <template>
2 <div class="collapsebox">
3 <div class="pd20">
4 <div class="fr mb20">
5 <el-input
6 v-model.trim="query.projectName"
7 :placeholder="language==0?'请输入邮箱或联系方式':'Please enter email or contact information' "
8 :prefix-icon="Search"
9 clearable
10 size="small"
11 @change="getList"/>
12 </div>
13 <el-table :data="list" border>
14 <el-table-column :label="language==0?'序号':'Serial'" :min-width="language==0?60:80" align="center"
15 type="index"/>
16 <el-table-column :label="language==0?'服务类型':'Type Of Service'" align="center" min-width="150"
17 prop="name"></el-table-column>
18 <el-table-column :label="language==0?'联系人':'Contacts'" align="center" prop="danceType" width="110">
19 </el-table-column>
20 <el-table-column :label="language==0?'联系方式':'Contact Way'" align="center" prop="danceTypeDetailStr"
21 width="120">
22 </el-table-column>
23 <el-table-column :label="language==0?'抵达时间':'Time Of Arrival'" align="center" width="140">
24 <template #default="{row}">
25 <span v-if="row.playTypeStr">{{ row.playTypeStr }}</span>
26 <span v-else>{{ row.playType }}</span>
27 </template>
28 </el-table-column>
29 <el-table-column :label="language==0?'人数':'Number Of People'" :min-width="isNational?120:240" align="center">
30 <template #default="{row}">
31 </template>
32 </el-table-column>
33 <el-table-column :label="language==0?'航班 / 车次':'Flight / train number'" align="center" width="160">
34 <template #default="{row}">
35 <div class="text-primary">{{ language == 0 ? '¥' : '€' }}{{ row.serviceFee }}</div>
36 </template>
37 </el-table-column>
38 <el-table-column :label="language==0?'机场 / 火车站':'Airport / Train station'" align="center" width="160">
39 <template #default="{row}">
40 <div class="text-primary">{{ language == 0 ? '¥' : '€' }}{{ row.serviceFee }}</div>
41 </template>
42 </el-table-column>
43 <el-table-column :label="language==0?'航站楼':'Terminal'" align="center" width="160">
44 <template #default="{row}">
45 <div class="text-primary">{{ language == 0 ? '¥' : '€' }}{{ row.serviceFee }}</div>
46 </template>
47 </el-table-column>
48 <el-table-column :label="language==0?'目的地/出发地':'Destination / Place Of Departure'" align="center"
49 width="260">
50 <template #default="{row}">
51 <div class="text-primary">{{ language == 0 ? '¥' : '€' }}{{ row.serviceFee }}</div>
52 </template>
53 </el-table-column>
54 </el-table>
55 <PaginationPc
56 v-show="total>0"
57 v-model:limit="query.pageSize"
58 v-model:page="query.pageNum"
59 :total="total"
60 @pagination="getList"
61 />
62 </div>
63 </div>
64 </template>
65
66 <script setup>
67 import {Search} from "@element-plus/icons-vue";
68 import {useStorage} from "@vueuse/core/index"
69 import {getProjectByCptId} from "@/apiPc/match";
70 import PaginationPc from "@/components/PaginationPc";
71
72 const language = useStorage('language', 0)
73 const list = ref([])
74 const total = ref(0)
75 const query = ref({
76 projectName: '',
77 pageSize: 10,
78 pageNum: 1
79 })
80 const props = defineProps({
81 matchId: {
82 type: String,
83 required: false
84 },
85 isNational: {
86 type: Boolean,
87 required: false,
88 default: false
89 },
90 })
91
92 function getList() {
93 getProjectByCptId(props.matchId, query.value).then(res => {
94 list.value = res.rows
95 total.value = res.total
96 })
97 }
98 </script>
99
100 <style lang="scss" scoped>
101 .table {
102 width: 100%;
103 border-left: 1px solid #e1e1e1;
104 border-top: 1px solid #e1e1e1;
105
106 th {
107 background: #eee;
108 padding: 6px 10px;
109 text-transform: uppercase;
110 border-right: 1px solid #e1e1e1;
111 border-bottom: 1px solid #e1e1e1;
112 font-size: 15px;
113 }
114
115 td {
116 padding: 6px 10px;
117 border-right: 1px solid #e1e1e1;
118 font-size: 15px;
119 border-bottom: 1px solid #e1e1e1;
120 vertical-align: middle;
121 text-align: center;
122
123 span {
124 margin-right: 10px
125 }
126
127 span::after {
128 content: ','
129 }
130
131 span:last-child::after {
132 content: ''
133 }
134 }
135 }
136 </style>
src/viewsPc/match/components/hotTable.vue 0 → 100644
1 <template>
2 <div class="collapsebox">
3 <div class="pd20">
4 <div class="fr mb20">
5 <el-input
6 v-model.trim="query.projectName"
7 :placeholder="language==0?'请输入邮箱或联系方式':'Please enter email or contact information'"
8 :prefix-icon="Search"
9 clearable
10 size="small"
11 @change="getList"/>
12 </div>
13 <el-table :data="list" border>
14 <el-table-column :label="language==0?'序号':'Serial'" :min-width="language==0?60:80" align="center"
15 type="index"/>
16 <el-table-column :label="language==0?'酒店名称':'Hotel Name'" align="center" min-width="150"
17 prop="name"></el-table-column>
18 <el-table-column :label="language==0?'联系人':'Contacts'" align="center" prop="danceType" width="110">
19 </el-table-column>
20 <el-table-column :label="language==0?'联系方式':'Contact Way'" align="center" prop="danceTypeDetailStr"
21 width="120">
22 </el-table-column>
23
24 <el-table-column :label="language==0?'预留日期':'Reservation Date'" align="center">
25 <template #default="{row}">
26 <span v-if="row.playTypeStr">{{ row.playTypeStr }}</span>
27 <span v-else>{{ row.playType }}</span>
28 </template>
29 </el-table-column>
30 <el-table-column :label="language==0?'房型':'Room Type'" :min-width="isNational?120:240" align="center">
31 <template #default="{row}">
32 <div v-if="isNational">
33 <span v-if="row.ageGroup == '0'">{{ language == 0 ? '不限制' : 'Unlimited' }}</span>
34 <span v-if="row.ageGroup == '1'">Juvenile I</span>
35 <span v-if="row.ageGroup == '2'">Juvenile II</span>
36 <span v-if="row.ageGroup == '3'">Juv1& II (comb.)</span>
37 <span v-if="row.ageGroup == '4'">Junior I</span>
38 <span v-if="row.ageGroup == '5'">Junior II</span>
39 <span v-if="row.ageGroup == '6'">Juv I & II (comb.)</span>
40 <span v-if="row.ageGroup == '7'">
41 <span v-if="row.danceType=='Breaking'">2006-01-01 {{
42 language == 0 ? '至' : '~'
43 }} 2010-12-31</span>
44 <span v-else>Youth</span>
45 </span>
46 <span v-if="row.ageGroup == '8'">Under 21</span>
47 <span v-if="row.ageGroup == '9'">Adult</span>
48 <span v-if="row.ageGroup == '10'">Senior I</span>
49 <span v-if="row.ageGroup == '11'">Senior II</span>
50 <span v-if="row.ageGroup == '12'">Senior III</span>
51 <span v-if="row.ageGroup == '13'">Senior IV</span>
52 <span v-if="row.ageGroup == '14'">Senior V</span>
53 </div>
54 <div v-else>
55 <div>{{ row.birthPeriod.replace(',', language == 0 ? ' 至 ' : ' to ') }}</div>
56 <div v-if="row.birthPeriodSecond">
57 {{ row.birthPeriodSecond?.replace(',', language == 0 ? ' 至 ' : ' to ') }}
58 </div>
59 <div v-if="row.birthPeriodThird">
60 {{ row.birthPeriodThird?.replace(',', language == 0 ? ' 至 ' : ' to ') }}
61 </div>
62 <div v-if="row.birthPeriodFourth">
63 {{ row.birthPeriodFourth?.replace(',', language == 0 ? ' 至 ' : ' to ') }}
64 </div>
65 <div v-if="row.birthPeriodFifth">
66 {{ row.birthPeriodFifth?.replace(',', language == 0 ? ' 至 ' : ' to ') }}
67 </div>
68 <div v-if="row.birthPeriodSixth">
69 {{ row.birthPeriodSixth?.replace(',', language == 0 ? ' 至 ' : ' to ') }}
70 </div>
71 </div>
72 </template>
73 </el-table-column>
74 <el-table-column :label="language==0?'数量':'Quantity'" align="center" width="160">
75 <template #default="{row}">
76 <div class="text-primary">{{ language == 0 ? '¥' : '€' }}{{ row.serviceFee }}</div>
77 </template>
78 </el-table-column>
79 <el-table-column :label="language==0?'状态':'State'" align="center" width="160">
80 <template #default="{row}">
81 <div class="text-primary">{{ language == 0 ? '¥' : '€' }}{{ row.serviceFee }}</div>
82 </template>
83 </el-table-column>
84 </el-table>
85 <PaginationPc
86 v-show="total>0"
87 v-model:limit="query.pageSize"
88 v-model:page="query.pageNum"
89 :total="total"
90 @pagination="getList"
91 />
92 </div>
93 </div>
94 </template>
95
96 <script setup>
97 import {Search} from "@element-plus/icons-vue";
98 import {useStorage} from "@vueuse/core/index"
99 import {getProjectByCptId} from "@/apiPc/match";
100 import PaginationPc from "@/components/PaginationPc";
101
102 const language = useStorage('language', 0)
103 const list = ref([])
104 const total = ref(0)
105 const query = ref({
106 projectName: '',
107 pageSize: 10,
108 pageNum: 1
109 })
110 const props = defineProps({
111 matchId: {
112 type: String,
113 required: false
114 },
115 isNational: {
116 type: Boolean,
117 required: false,
118 default: false
119 },
120 })
121
122 function getList() {
123 getProjectByCptId(props.matchId, query.value).then(res => {
124 list.value = res.rows
125 total.value = res.total
126 })
127 }
128 </script>
129
130 <style lang="scss" scoped>
131 .table {
132 width: 100%;
133 border-left: 1px solid #e1e1e1;
134 border-top: 1px solid #e1e1e1;
135
136 th {
137 background: #eee;
138 padding: 6px 10px;
139 text-transform: uppercase;
140 border-right: 1px solid #e1e1e1;
141 border-bottom: 1px solid #e1e1e1;
142 font-size: 15px;
143 }
144
145 td {
146 padding: 6px 10px;
147 border-right: 1px solid #e1e1e1;
148 font-size: 15px;
149 border-bottom: 1px solid #e1e1e1;
150 vertical-align: middle;
151 text-align: center;
152
153 span {
154 margin-right: 10px
155 }
156
157 span::after {
158 content: ','
159 }
160
161 span:last-child::after {
162 content: ''
163 }
164 }
165 }
166 </style>
src/viewsPc/match/components/quick-row.vue
1 <template> 1 <template>
2 <div style="filter: opacity(1)"> 2 <div style="filter: opacity(1)">
3 <el-row :gutter="14" v-if="language==0"> 3 <el-row v-if="language==0" :gutter="14" class="btnbox">
4 <el-col :lg="4" :md="8" :sm="12" :xs="12"> 4 <el-col :lg="4" :md="8" :sm="12" :xs="12">
5 <div class="funcBtn" @click="popRemark(0)"> 5 <div class="funcBtn" @click="popRemark(0)">
6 <img src="@/assets/dance/btn04.png"/> 6 <img src="@/assets/dance/btn04.png"/>
...@@ -20,6 +20,12 @@ ...@@ -20,6 +20,12 @@
20 </div> 20 </div>
21 </el-col> 21 </el-col>
22 <el-col :lg="4" :md="8" :sm="12" :xs="12"> 22 <el-col :lg="4" :md="8" :sm="12" :xs="12">
23 <div class="funcBtn" @click="popRemark(6)">
24 <img src="@/assets/dance/btn04.png"/>
25 <h4>预订查询</h4>
26 </div>
27 </el-col>
28 <el-col :lg="4" :md="8" :sm="12" :xs="12">
23 <div class="funcBtn" @click="popRemark(3)"> 29 <div class="funcBtn" @click="popRemark(3)">
24 <img src="@/assets/dance/btn03.png"/> 30 <img src="@/assets/dance/btn03.png"/>
25 <h4>餐饮预订</h4> 31 <h4>餐饮预订</h4>
...@@ -38,7 +44,7 @@ ...@@ -38,7 +44,7 @@
38 </div> 44 </div>
39 </el-col> 45 </el-col>
40 </el-row> 46 </el-row>
41 <el-row :gutter="14" v-else> 47 <el-row v-else :gutter="14" class="btnbox">
42 <el-col :lg="4" :md="8" :sm="12" :xs="12"> 48 <el-col :lg="4" :md="8" :sm="12" :xs="12">
43 <div class="funcBtn" @click="popRemark(0)"> 49 <div class="funcBtn" @click="popRemark(0)">
44 <img src="@/assets/dance/btn04.png"/> 50 <img src="@/assets/dance/btn04.png"/>
...@@ -58,6 +64,12 @@ ...@@ -58,6 +64,12 @@
58 </div> 64 </div>
59 </el-col> 65 </el-col>
60 <el-col :lg="4" :md="8" :sm="12" :xs="12"> 66 <el-col :lg="4" :md="8" :sm="12" :xs="12">
67 <div class="funcBtn" @click="popRemark(6)">
68 <img src="@/assets/dance/btn04.png"/>
69 <h4>RESERVATION SEARCH</h4>
70 </div>
71 </el-col>
72 <el-col :lg="4" :md="8" :sm="12" :xs="12">
61 <div class="funcBtn" @click="popRemark(3)"> 73 <div class="funcBtn" @click="popRemark(3)">
62 <img src="@/assets/dance/btn03.png"/> 74 <img src="@/assets/dance/btn03.png"/>
63 <h4>DINING RESERVATION</h4> 75 <h4>DINING RESERVATION</h4>
...@@ -79,10 +91,10 @@ ...@@ -79,10 +91,10 @@
79 </div> 91 </div>
80 <order-remark ref="orderRemarkRef" @submit="goBooking"/> 92 <order-remark ref="orderRemarkRef" @submit="goBooking"/>
81 93
82 <!-- <div class="fixedKP" @click="addInvoice">--> 94 <!-- <div class="fixedKP" @click="addInvoice">-->
83 <!-- <img src="@/assets/img/kp.svg"/>--> 95 <!-- <img src="@/assets/img/kp.svg"/>-->
84 <!-- 开票--> 96 <!-- 开票-->
85 <!-- </div>--> 97 <!-- </div>-->
86 </template> 98 </template>
87 99
88 <script setup> 100 <script setup>
...@@ -122,7 +134,7 @@ onMounted(() => { ...@@ -122,7 +134,7 @@ onMounted(() => {
122 134
123 function building() { 135 function building() {
124 ElMessage.warning(language.value == 0 ? '感谢您对本次比赛的关注，该服务暂无可预订信息，敬请期待。' : 'Thank you for your attention to this competition. The service is currently unavailable for booking. Please stay tuned.') 136 ElMessage.warning(language.value == 0 ? '感谢您对本次比赛的关注，该服务暂无可预订信息，敬请期待。' : 'Thank you for your attention to this competition. The service is currently unavailable for booking. Please stay tuned.')
125 return 137
126 } 138 }
127 139
128 function popRemark(type) { 140 function popRemark(type) {
...@@ -135,13 +147,20 @@ function popRemark(type) { ...@@ -135,13 +147,20 @@ function popRemark(type) {
135 || (form.value.isCarView == 0 && type == '2') 147 || (form.value.isCarView == 0 && type == '2')
136 || (form.value.isFoodView == 0 && type == '3') 148 || (form.value.isFoodView == 0 && type == '3')
137 || (form.value.isMealView == 0 && type == '4') 149 || (form.value.isMealView == 0 && type == '4')
138 || (form.value.isPhotoView == 0&&type == '5') 150 || (form.value.isPhotoView == 0 && type == '5')
139 || (form.value.isTicket==0 &type == '0') 151 || (form.value.isTicket == 0 && type == '0')
140 ) 152 ) {
141 {
142 building() 153 building()
143 return 154 return
144 } 155 }
156 if (type == 6) {
157 return router.push({
158 path: '/match/list/reservationSearch',
159 query: {
160 matchId: props.matchId,
161 }
162 })
163 }
145 164
146 const params = { 165 const params = {
147 matchId: props.matchId, 166 matchId: props.matchId,
...@@ -184,7 +203,7 @@ function goBooking(n) { ...@@ -184,7 +203,7 @@ function goBooking(n) {
184 } 203 }
185 } 204 }
186 205
187 function addInvoice(){ 206 function addInvoice() {
188 router.push({ 207 router.push({
189 name: 'invoice', 208 name: 'invoice',
190 query: { 209 query: {
...@@ -194,15 +213,38 @@ function addInvoice(){ ...@@ -194,15 +213,38 @@ function addInvoice(){
194 } 213 }
195 </script> 214 </script>
196 215
197 <style scoped lang="scss"> 216 <style lang="scss" scoped>
198 h4 { 217 h4 {
199 padding: 0 10px; 218 padding: 0 10px;
200 } 219 }
201 .fixedKP{position: fixed;background: linear-gradient(-90deg, #8623FC, #453DEA);left: 0; 220
202 top:450px;cursor: pointer; 221 .btnbox {
203 color: #fff;border-radius: 50%;width: 60px;height: 60px;text-align: center; 222 .el-col-lg-4 {
204 img{width: 26px;height: 26px;display: block;margin:10px auto 0px;} 223 max-width: 14.28%;
224 flex: 0 0 14.28%;
225 }
226 }
227
228 .fixedKP {
229 position: fixed;
230 background: linear-gradient(-90deg, #8623FC, #453DEA);
231 left: 0;
232 top: 450px;
233 cursor: pointer;
234 color: #fff;
235 border-radius: 50%;
236 width: 60px;
237 height: 60px;
238 text-align: center;
239
240 img {
241 width: 26px;
242 height: 26px;
243 display: block;
244 margin: 10px auto 0px;
245 }
246
205 font-size: 13px; 247 font-size: 13px;
206 box-shadow: 0 0 10px rgba(0,0,0,0.6); 248 box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
207 } 249 }
208 </style> 250 </style>
......
src/viewsPc/match/reservationSearch.vue 0 → 100644
1 <template>
2 <div class="box mb20">
3 <el-card :body-style="{'padding':'0'}">
4 <div class="lineHead">
5 <ul>
6 <li v-for="(l,i) in menu" :key="l.name" :class="active==i?'active':''" @click="changeMenu(l,i)">
7 {{ language == 0 ? l.cn : l.en }}
8 </li>
9 </ul>
10 </div>
11
12 <HotTable v-if="active==0"/>
13 <AirportPickupTable v-if="active==1"/>
14 </el-card>
15
16 </div>
17 </template>
18 <script lang="ts" setup>
19 import {useStorage} from "@vueuse/core/index";
20 import HotTable from '@/viewsPc/match/components/hotTable.vue'
21 import AirportPickupTable from '@/viewsPc/match/components/airportPickupTable.vue'
22
23 const language = useStorage('language', 0)
24 const active = ref(0)
25 const menu = ref([
26 {cn: '酒店预订查询', active: 0, en: 'Hotel reservation Enquiries'},
27 {cn: '接送机预订查询', active: 1, en: 'Transfer reservation inquiry'}
28 ])
29
30
31 function changeMenu(v, i) {
32 active.value = i
33 }
34 </script>
35
36 <style lang="scss" scoped>
37 .box {
38 width: 1600px;
39 margin-top: 40px;
40 }
41 </style>
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!