08fc48dc by zhangmeng

赛事

1 parent 9d79024e
1 <template>
2 <div>
3 <div class="banner">
4 <img v-if="language==0" src="@/assets/booking/cl_text_c.png">
5 <img v-else src="@/assets/booking/cl_text_e.png">
6 </div>
7 <div class="box">
8 <div class="searchBar">
9 <el-input v-model="query.name" :placeholder="language==0?'请输入关键字搜索':'Search'" class="no-border">
10 </el-input>
11 <el-button class="btn-lineG" icon="search" size="large" type="primary" @click="getList">
12 {{ language == 0 ? '搜索' : 'Search' }}
13 </el-button>
14 </div>
15 </div>
16 <div v-loading="loading" class="box">
17 <div v-for="(h,index) in list" :key="index" class="routeItem">
18 <el-row :gutter="20" align="middle" class="w100">
19 <el-col :lg="2" :sm="6">
20 <div class="index">{{ language == 0 ? '路线' : 'Route' }}{{ index + 1 }}
21 </div>
22 </el-col>
23 <el-col :lg="6" >
24 <p class="esp text-center">{{ h.checkIn }}</p>
25 </el-col>
26 <el-col :lg="4" :sm="6" class="text-center">
27 <img class="mauto w40px" src="@/assets/booking/wf.png"/>
28 </el-col>
29 <el-col :lg="6" >
30 <p class="esp text-center">{{ h.checkOut }}</p>
31 </el-col>
32 <el-col :lg="3" :sm="12">
33 <div v-if="language==0" class="price">
34 ¥
35 <span>{{ h.upPrice }}</span>
36 </div>
37 <div v-else class="price">
38
39 <span>{{ h.upPriceEn }}</span>
40 </div>
41
42 </el-col>
43 <el-col :lg="3" :sm="12">
44 <el-button class="btn-lineG w100" round type="primary" @click="goOrder(h)">
45 {{ language == 0 ? '我要预订' : 'Select' }}
46 </el-button>
47 </el-col>
48 </el-row>
49 </div>
50
51 <el-empty v-show="!loading&&list.length==0" :image="`/img/order_no.png`" :image-size="228" description=""/>
52 <div style="height: 50px"></div>
53 </div>
54
55 </div>
56 </template>
57
58 <script setup>
59 import {onMounted} from "@vue/runtime-core"
60 import * as booking from "@/apiPc/booking"
61 import {useRouter, useRoute} from "vue-router";
62 import {useStorage} from "@vueuse/core/index";
63 import useUserStore from "@/store/modules/user";
64
65 const user = useUserStore().user
66 const router = useRouter()
67 const route = useRoute()
68 const language = useStorage('language', 0)
69 const query = ref({
70 name: ''
71 })
72 const activeName = ref(0)
73 const cptId = ref('')
74 const list = ref([])
75 const loading = ref(false)
76 onMounted(() => {
77 query.value.activityId = route.params.cptId
78 // if (language.value==0)
79 getList()
80 })
81
82 function getList() {
83 // if (language.value!=0)return
84 loading.value = true
85 booking.getActivityCarList(query.value).then(res => {
86 list.value = res.rows
87 loading.value = false
88 }).catch(e => {
89 loading.value = false
90 })
91 }
92
93 function goOrder(item, car) {
94 if (!user) {
95 useUserStore().setReLogin()
96 return
97 }
98 router.push({
99 name: 'carOrder',
100 params: {
101 id: item.id,
102 },
103 query: {
104 item: encodeURIComponent(JSON.stringify(item))
105 }
106 })
107 }
108 </script>
109
110 <style lang="scss" scoped>
111
112 .hotel {
113 margin-bottom: 20px;
114 cursor: pointer;
115
116 .index {
117 display: flex;
118 font-weight: 500;
119 padding-left: 20px;
120 font-size: 18px;
121 align-items: center;
122
123 img {
124 margin-left: 15px;
125 }
126 }
127
128 p {
129 font-weight: 500;
130 font-size: 24px;
131 color: #000000;
132 }
133
134 &:hover .el-card {
135 box-shadow: 0 0 10px #aaa;
136 }
137 }
138
139 .hotel:nth-child(7n) .index {
140 color: #009E96;
141 }
142
143 .hotel:nth-child(7n+1) .index {
144 color: #FF8124;
145 }
146
147 .hotel:nth-child(7n+2) .index {
148 color: #E4007F;
149 }
150
151 .hotel:nth-child(7n+3) .index {
152 color: #0068B7;
153 }
154
155 .hotel:nth-child(7n+4) .index {
156 color: #32B16C;
157 }
158
159 .hotel:nth-child(7n+5) .index {
160 color: #920783;
161 }
162
163 .hotel:nth-child(7n+6) .index {
164 color: #00B7EE;
165 }
166
167 .banner {
168 height: 140px;
169 background-size: cover;
170 text-align: center;
171 background: url("@/assets/booking/cl_bg.png") center;
172 display: flex;
173 align-items: center;
174 justify-content: center;
175
176 img {
177 display: block;
178 margin: -30px auto 0;
179 width: auto;
180 }
181 }
182
183 .searchBar {
184 position: relative;
185 top: -30px;
186 background: #FFFFFF;
187 display: flex;
188 padding: 20px;
189 border-radius: 10px;
190 }
191
192 .no-border {
193 border: none;
194 background: #F5F7F9;
195
196 :deep(.el-input__wrapper) {
197 border: none;
198 box-shadow: none;
199 background: #F5F7F9;
200 }
201 }
202
203 .starBox {
204 img {
205 display: inline-block;
206 margin-right: 4px
207 }
208 }
209
210 .tagbox {
211 margin: 15px 0;
212
213 a {
214 color: #AFB5B9;
215 font-size: 12px;
216 }
217
218 span {
219 border-radius: 13px;
220 font-size: 12px;
221 padding: 4px 10px;
222 margin-right: 10px;
223 font-weight: 400;
224 }
225
226 span:nth-child(4n) {
227 background: rgba(50, 177, 108, 0.2);
228 color: rgba(50, 177, 108, 1);
229 }
230
231 span:nth-child(4n+1) {
232 background: rgba(243, 152, 0, 0.2);
233 color: rgba(243, 152, 0, 1);
234 }
235
236 span:nth-child(4n+2) {
237 background: rgba(0, 160, 233, 0.2);
238 color: rgba(0, 160, 233, 1);
239 }
240
241 span:nth-child(4n+3) {
242 background: rgba(247, 64, 166, 0.2);
243 color: rgba(247, 64, 166, 1);
244 }
245 }
246
247 .name.flex {
248 align-items: center;
249 }
250
251 .name .tagbox {
252 margin: 0 0 0 15px;
253 }
254
255 .room {
256 background: #FAFBFD;
257 margin: 20px 0 0;
258 padding: 20px;
259 border: 1px solid #E5E5E5;
260
261 .name {
262 font-size: 20px;
263 margin: 0 0 10px;
264 }
265
266 .roomImg {
267 aspect-ratio: 16/9;
268 border-radius: 10px;
269 overflow: hidden;
270
271 img {
272 width: 100%;
273 object-fit: cover;
274 object-position: center;
275 height: 100%;
276 }
277 }
278
279
280
281 .bg-lineg {
282 margin: auto;
283 border-radius: 10px;
284 text-align: center;
285 padding: 7px 2px 2px;
286 font-size: 24px;
287 width: 66px;
288 cursor: pointer;
289
290 div {
291 background: #fff;
292 font-size: 13px;
293 border-radius: 20px;
294 padding: 0 10px;
295 color: #453DEA;
296 font-weight: 500;
297 }
298 }
299 }
300 .routeItem{background: #fff;border-radius: 10px;margin: 0 0 20px;padding: 10px 20px;box-shadow: 0 0 6px #eee;
301 .price {
302 color: #FF8124;
303 font-size: 24px;
304
305 span {
306 font-size: 36px;
307 font-family: "DIN Alternate"
308 }
309 }
310 }
311 </style>
...@@ -36,8 +36,8 @@ ...@@ -36,8 +36,8 @@
36 @change="changechoosed" 36 @change="changechoosed"
37 > 37 >
38 <el-option 38 <el-option
39 v-for="c in athletesList" :key="c.id" :disabled="c.disabled||c.ocrFlag==0" :label="c.realName" 39 v-for="c in athletesList" :key="c.id" :label="c.realName"
40 :value="c.id" 40 :value="c.id" @click="handelOption(c.id)"
41 > 41 >
42 <div class="flexOption" style="width: 100%"> 42 <div class="flexOption" style="width: 100%">
43 {{ c.realName }} 43 {{ c.realName }}
...@@ -334,10 +334,11 @@ const insuranceFlag = ref() ...@@ -334,10 +334,11 @@ const insuranceFlag = ref()
334 const insuranceAgreement = ref() 334 const insuranceAgreement = ref()
335 335
336 let signInfoType = null 336 let signInfoType = null
337
337 onMounted(() => { 338 onMounted(() => {
338 signType.value = route.query.signType || 1 339 signType.value = route.query.signType || 1
339 getSignInfoList()
340 getMatch(matchId.value) 340 getMatch(matchId.value)
341 getSignInfoList()
341 getMySignInfo() 342 getMySignInfo()
342 getAthletesList() 343 getAthletesList()
343 // openTour.value = true 344 // openTour.value = true
...@@ -347,14 +348,16 @@ function getAthletesList() { ...@@ -347,14 +348,16 @@ function getAthletesList() {
347 // athletesList.value 348 // athletesList.value
348 match.getGroupPersonList({ label: '0' }, groupId.value).then(res => { 349 match.getGroupPersonList({ label: '0' }, groupId.value).then(res => {
349 athletesList.value = res.rows 350 athletesList.value = res.rows
351
350 if (!isNational.value) { 352 if (!isNational.value) {
351 for (const ath of athletesList.value) { 353 for (const ath of athletesList.value) {
352 if (!ath.phone) { 354 if (isNational.value && !ath.phone) {
353 ath.disabled = true 355 ath.disabled = true
354 } else { 356 } else {
355 ath.disabled = false 357 ath.disabled = false
356 } 358 }
357 } 359 }
360 console.log(athletesList.value)
358 } 361 }
359 }) 362 })
360 } 363 }
...@@ -521,17 +524,35 @@ function chooseSportman() { ...@@ -521,17 +524,35 @@ function chooseSportman() {
521 proxy.$refs['dialogAllSportsmanListRef'].open(params) 524 proxy.$refs['dialogAllSportsmanListRef'].open(params)
522 } 525 }
523 526
527 function handelOption(id) {
528 const flag = choosedchoosed.value.some(v => v == id)
529 if (flag) {
530 const ocr = athletesList.value.find(v => v.id === id) || {}
531 if (ocr.disabled || ocr.ocrFlag == 0) {
532 choosedchoosed.value = choosedchoosed.value.filter(v => v != id)
533 return proxy.$modal.confirm(
534 language.value == 0
535 ? '请到选手管理完善信息'
536 : 'You can complete athletes details through [Athlete Manage')
537 }
538 }
539
540 getProjectList()
541 }
542
543
524 function changechoosed(e) { 544 function changechoosed(e) {
525 choosed2List.value = [] 545 choosed2List.value = []
526 for (var c of athletesList.value) { 546 for (const c of athletesList.value) {
527 if (choosedchoosed.value.indexOf(c.id) > -1) { 547 if (choosedchoosed.value.indexOf(c.id) > -1) {
528 choosed2List.value.push(c) 548 choosed2List.value.push(c)
529 } 549 }
530 } 550 }
531 getProjectList() 551 // getProjectList()
532 } 552 }
533 553
534 function getProjectList() { 554 function getProjectList() {
555 console.log(choosedchoosed.value)
535 projectIds.value = [] 556 projectIds.value = []
536 if (choosedchoosed.value.length == 0) { 557 if (choosedchoosed.value.length == 0) {
537 projectList.value = [] 558 projectList.value = []
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!