赛事
Showing
2 changed files
with
338 additions
and
6 deletions
src/viewsPc/booking/carCopy.vue
0 → 100644
| 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 = [] | ... | ... |
-
Please register or sign in to post a comment