Skip to content

jijin / dance-pc

Go to a project
Toggle navigation
Toggle navigation pinning
2696ddab by 华明祺
Options

no message

1 parent 94d02189
Inline Side-by-side
Showing 4 changed files with 296 additions and 181 deletions
src/viewsPc/booking/hotelDetail.vue
...@@ -18,12 +18,16 @@ ...@@ -18,12 +18,16 @@
18 <a v-show="form?.label?.split('，').length>4">{{ language == 0 ? '更多' : 'MORE' }} ></a> 18 <a v-show="form?.label?.split('，').length>4">{{ language == 0 ? '更多' : 'MORE' }} ></a>
19 </div> 19 </div>
20 <div class="info"> 20 <div class="info">
21 <el-icon><Clock /></el-icon> 21 <el-icon>
22 <Clock/>
23 </el-icon>
22 <span class="mr10">{{ language == 0 ? '入住时间' : 'Check-in' }}：{{ form?.checkInTime }}</span> 24 <span class="mr10">{{ language == 0 ? '入住时间' : 'Check-in' }}：{{ form?.checkInTime }}</span>
23 <span>{{ language == 0 ? '离店时间' : 'Check-out' }}：{{ form?.checkOutTime }}</span> 25 <span>{{ language == 0 ? '离店时间' : 'Check-out' }}：{{ form?.checkOutTime }}</span>
24 </div> 26 </div>
25 <div class="info esp"> 27 <div class="info esp">
26 <el-icon><MapLocation /></el-icon> 28 <el-icon>
29 <MapLocation/>
30 </el-icon>
27 <span>{{ form?.addName }}</span> 31 <span>{{ form?.addName }}</span>
28 </div> 32 </div>
29 <div v-if="form?.introduction" class="info pointer"> 33 <div v-if="form?.introduction" class="info pointer">
...@@ -43,13 +47,16 @@ ...@@ -43,13 +47,16 @@
43 <el-row :gutter="20"> 47 <el-row :gutter="20">
44 <el-col :span="10"> 48 <el-col :span="10">
45 <div class="imgbox hotelImg"> 49 <div class="imgbox hotelImg">
46 <el-image :src="fillImgUrl(form?.photos?.split(',')[0])" fit="cover" :preview-src-list="form?.photos?.split(',')"/> 50 <el-image :src="fillImgUrl(form?.photos?.split(',')[0])" fit="cover"
51 :preview-src-list="form?.photos?.split(',')"/>
47 </div> 52 </div>
48 </el-col> 53 </el-col>
49 <el-col :span="14"> 54 <el-col :span="14">
50 <el-row class="h100" :gutter="20"> 55 <el-row class="h100" :gutter="20">
51 <el-col :span="8" class="oddmb" v-for="(p,index) in form?.photos?.split(',').slice(1,7)"> 56 <el-col :span="8" class="oddmb" v-for="(p,index) in form?.photos?.split(',').slice(1,7)">
52 <div class="imgbox hotelImg"><el-image :src="fillImgUrl(p)" fit="cover"/></div> 57 <div class="imgbox hotelImg">
58 <el-image :src="fillImgUrl(p)" fit="cover"/>
59 </div>
53 </el-col> 60 </el-col>
54 </el-row> 61 </el-row>
55 </el-col> 62 </el-col>
...@@ -61,22 +68,24 @@ ...@@ -61,22 +68,24 @@
61 <ul> 68 <ul>
62 <li> 69 <li>
63 {{ language == 0 ? '房型选择' : 'Available Rooms' }} 70 {{ language == 0 ? '房型选择' : 'Available Rooms' }}
64 <span style="margin-left: 100px"> 71 <span style="margin-left: 100px" @click="initTime">
65 <el-date-picker 72 <el-date-picker
66 @change="getDaysBetween" 73 @change="getDaysBetween"
67 v-model="hotTime" 74 v-model="hotTime"
68 type="daterange" 75 type="daterange"
69 :disabled-date="disabledDateRZ" 76 :disabled-date="disabledDateRZ"
70 :placeholder="language==0?'选择日期':'Select date'" 77 :placeholder="language==0?'选择日期':'Select date'"
71 format="YYYY-MM-DD" 78 format="YYYY-MM-DD"
72 :clearable="false" 79 :clearable="false"
73 value-format="YYYY-MM-DD"/> 80 value-format="YYYY-MM-DD"
81 />
74 </span> 82 </span>
75 </li> 83 </li>
76 </ul> 84 </ul>
77 </div> 85 </div>
78 <div> 86 <div>
79 <div v-for="(r,index) in roomList" :key="index" class="room" v-show="language==0?r.roomPrice>0:r.roomPriceEn>0"> 87 <div v-for="(r,index) in roomList" :key="index" class="room"
88 v-show="language==0?r.roomPrice>0:r.roomPriceEn>0">
80 <el-row :gutter="30" align="middle"> 89 <el-row :gutter="30" align="middle">
81 <el-col :span="4"> 90 <el-col :span="4">
82 <div class="roomImg"> 91 <div class="roomImg">
...@@ -87,34 +96,37 @@ ...@@ -87,34 +96,37 @@
87 <h3 class="name">{{ r.roomType }}</h3> 96 <h3 class="name">{{ r.roomType }}</h3>
88 <el-row :gutter="10"> 97 <el-row :gutter="10">
89 <el-col :span="8">{{ r.area }}m²</el-col> 98 <el-col :span="8">{{ r.area }}m²</el-col>
90 <el-col :span="8" v-show="r.windowFlag==1"> {{ language==0?'有窗':'With windows' }}</el-col> 99 <el-col :span="8" v-show="r.windowFlag==1"> {{ language == 0 ? '有窗' : 'With windows' }}</el-col>
91 <el-col :span="8" v-show="r.windowFlag==0"> {{ language==0?'无窗':'Windowless' }}</el-col> 100 <el-col :span="8" v-show="r.windowFlag==0"> {{ language == 0 ? '无窗' : 'Windowless' }}</el-col>
92 <el-col :span="8" v-show="r.bathroomFlag==1"> {{ language==0?'热水洗浴':'Shower' }}</el-col> 101 <el-col :span="8" v-show="r.bathroomFlag==1"> {{ language == 0 ? '热水洗浴' : 'Shower' }}</el-col>
93 <!-- <text v-show="r.bathroomFlag==0"> </text> --> 102 <!-- <text v-show="r.bathroomFlag==0"> </text> -->
94 <el-col :span="8" v-show="r.addBedFlag==1"> {{ language==0?'允许加床':'Extra bed' }} </el-col> 103 <el-col :span="8" v-show="r.addBedFlag==1"> {{ language == 0 ? '允许加床' : 'Extra bed' }}</el-col>
95 <el-col :span="8" v-if="r.breakfastNum&&r.breakfastNum > '0'"> 104 <el-col :span="8" v-if="r.breakfastNum&&r.breakfastNum > '0'">
96 {{ r.breakfastNum }}{{ language==0?'份早餐':' breakfasts' }} 105 {{ r.breakfastNum }}{{ language == 0 ? '份早餐' : ' breakfasts' }}
97 </el-col> 106 </el-col>
98 <el-col :span="8" v-else>{{ language==0?'无早餐':'No breakfast' }}</el-col> 107 <el-col :span="8" v-else>{{ language == 0 ? '无早餐' : 'No breakfast' }}</el-col>
99 </el-row> 108 </el-row>
100 </el-col> 109 </el-col>
101 <el-col :span="3"> 110 <el-col :span="3">
102 <div class="price">{{ language==0?'¥':'€' }}<span>{{language==0?r.roomPrice:r.roomPriceEn}}</span></div> 111 <div class="price">{{
112 language == 0 ? '¥' : '€'
113 }}<span>{{ language == 0 ? r.roomPrice : r.roomPriceEn }}</span></div>
103 </el-col> 114 </el-col>
104 <el-col :span="3"> 115 <el-col :span="3">
105 <el-button v-if="language==0" :disabled="r.useCount<=0" :class="{'forbid':r.useCount<=0}" @click="goOrder(r)" class="bg-lineg button"> 116 <el-button v-if="language==0" :disabled="r.useCount<=0" :class="{'forbid':r.useCount<=0}"
106 订 117 @click="goOrder(r)" class="bg-lineg button">
107 <div>{{ language==0?'在线付':'Online' }}</div> 118 订
108 </el-button> 119 <div>{{ language == 0 ? '在线付' : 'Online' }}</div>
109 120 </el-button>
110 121 <el-button v-else style="color: #fff" :disabled="!r.useCount && !hotTime" class="btn-lineG w100"
111 <el-button v-else style="color: #fff" :disabled="!r.useCount" class="btn-lineG w100" :class="{'forbid':!r.useCount}" round type="pri mary" @click="goOrder(r)">Select</el-button> 122 :class="{'forbid':(!r.useCount && !hotTime)}" round type="pri mary" @click="goOrder(r)">Select
112 <!-- <div class="text-center text-primary mt10 fontsize14 pointer" v-if="language == 0">--> 123 </el-button>
113 <!-- 剩余 {{(r.roomCount - (r.useCount||0)).toFixed()}} 间--> 124 <!-- <div class="text-center text-primary mt10 fontsize14 pointer" v-if="language == 0">-->
114 <!-- </div>--> 125 <!-- 剩余 {{(r.roomCount - (r.useCount||0)).toFixed()}} 间-->
115 <!-- <div class="text-center text-primary mt10 fontsize14" v-else>--> 126 <!-- </div>-->
116 <!-- {{(r.roomCount - (r.useCount||0)).toFixed()}} Remaining rooms--> 127 <!-- <div class="text-center text-primary mt10 fontsize14" v-else>-->
117 <!-- </div>--> 128 <!-- {{(r.roomCount - (r.useCount||0)).toFixed()}} Remaining rooms-->
129 <!-- </div>-->
118 </el-col> 130 </el-col>
119 </el-row> 131 </el-row>
120 </div> 132 </div>
...@@ -126,18 +138,20 @@ ...@@ -126,18 +138,20 @@
126 </div> 138 </div>
127 </template> 139 </template>
128 140
129 <script setup > 141 <script setup>
130 import {useRouter} from "vue-router"; 142 import {useRouter} from "vue-router";
131 import {ref, reactive, onMounted,getCurrentInstance} from "vue"; 143 import {ref, reactive, onMounted, getCurrentInstance} from "vue";
132 import {useRoute} from "vue-router"; 144 import {useRoute} from "vue-router";
133 import {dayjs} from 'element-plus' 145 import {dayjs} from 'element-plus'
134 import {getHotelById, getHotelRooms,checkRoomPayByUserId} from "@/apiPc/booking" 146 import {getHotelById, getHotelRooms, checkRoomPayByUserId} from "@/apiPc/booking"
135 import {getBaseInfoByActiveId} from "@/apiPc/booking"; 147 import {getBaseInfoByActiveId} from "@/apiPc/booking";
136 const { proxy } = getCurrentInstance() 148
149 const {proxy} = getCurrentInstance()
137 150
138 import {useStorage} from "@vueuse/core/index"; 151 import {useStorage} from "@vueuse/core/index";
139 import useUserStore from "@/store/modules/user"; 152 import useUserStore from "@/store/modules/user";
140 import {ElMessageBox} from "element-plus"; 153 import {ElMessageBox} from "element-plus";
154
141 const user = useUserStore().user 155 const user = useUserStore().user
142 const useStore = useUserStore 156 const useStore = useUserStore
143 const language = useStorage('language', 0) 157 const language = useStorage('language', 0)
...@@ -147,20 +161,23 @@ const form = ref({}) ...@@ -147,20 +161,23 @@ const form = ref({})
147 const query = ref({ 161 const query = ref({
148 hotelId: route.query.id 162 hotelId: route.query.id
149 }) 163 })
150 const hotTime=ref([]) 164 const hotTime = ref([])
151 const showAll = ref(false) 165 const showAll = ref(false)
152 const loading = ref(false) 166 const loading = ref(false)
153 const roomList = ref([]) 167 const roomList = ref([])
154 const map = ref(null) 168 const map = ref(null)
155 const formTime=ref({}) 169 const formTime = ref({})
170
171 let baseHotTime;
172
156 onMounted(() => { 173 onMounted(() => {
157 console.log(route.params) 174 console.log(route.params)
158 getBaseInfoByActiveId(route.params.cptId).then(res=>{ 175 getBaseInfoByActiveId(route.params.cptId).then(res => {
159 formTime.value = res.data || null 176 formTime.value = res.data || null
160 }).catch(err=>{ 177 }).catch(err => {
161 console.log(err) 178 console.log(err)
162 formTime.value = null 179 formTime.value = null
163 }).finally(()=>{ 180 }).finally(() => {
164 console.log(formTime.value) 181 console.log(formTime.value)
165 getDateTime() 182 getDateTime()
166 183
...@@ -169,14 +186,22 @@ onMounted(() => { ...@@ -169,14 +186,22 @@ onMounted(() => {
169 186
170 }) 187 })
171 188
172 function getDateTime(){ 189 function initTime() {
173 if (formTime.value){ 190 if (!hotTime.value[0]) {
174 if (dayjs().isBefore(dayjs(formTime.value.hqStart))){ 191 hotTime.value = baseHotTime
175 hotTime.value[0]=dayjs(formTime.value.hqStart).format('YYYY-MM-DD') 192 }
176 hotTime.value[1]=dayjs(formTime.value.hqStart).add(1,'day').format('YYYY-MM-DD') 193 }
177 } else{ 194
178 hotTime.value[0]=dayjs().format('YYYY-MM-DD') 195 function getDateTime() {
179 hotTime.value[1]=dayjs().add(1,'day').format('YYYY-MM-DD') 196 if (formTime.value) {
197 if (dayjs().isBefore(dayjs(formTime.value.hqStart))) {
198 // hotTime.value[0]=dayjs(formTime.value.hqStart).format('YYYY-MM-DD')
199 // hotTime.value[1]=dayjs(formTime.value.hqStart).add(1,'day').format('YYYY-MM-DD')
200 baseHotTime = [dayjs(formTime.value.hqStart).format('YYYY-MM-DD'), dayjs(formTime.value.hqStart).add(1, 'day').format('YYYY-MM-DD')]
201 } else {
202 // hotTime.value[0]=dayjs().format('YYYY-MM-DD')
203 // hotTime.value[1]=dayjs().add(1,'day').format('YYYY-MM-DD')
204 baseHotTime = [dayjs().format('YYYY-MM-DD'), dayjs().add(1, 'day').format('YYYY-MM-DD')]
180 } 205 }
181 } 206 }
182 } 207 }
...@@ -191,8 +216,8 @@ function getData() { ...@@ -191,8 +216,8 @@ function getData() {
191 console.log(err) 216 console.log(err)
192 }) 217 })
193 query.value.hotelId = route.query.id 218 query.value.hotelId = route.query.id
194 query.value.rzStart=hotTime.value?hotTime.value[0]:null 219 query.value.rzStart = hotTime.value ? hotTime.value[0] : null
195 query.value.rzEnd=hotTime.value?hotTime.value[1]:null 220 query.value.rzEnd = hotTime.value ? hotTime.value[1] : null
196 getHotelRooms(query.value).then(res => { 221 getHotelRooms(query.value).then(res => {
197 roomList.value = res.rows 222 roomList.value = res.rows
198 console.log(roomList.value) 223 console.log(roomList.value)
...@@ -242,23 +267,26 @@ function initMap() { ...@@ -242,23 +267,26 @@ function initMap() {
242 } 267 }
243 268
244 function goOrder(room) { 269 function goOrder(room) {
245 ElMessageBox.confirm(language.value == 0 ? '你当前选择的入住时间为'+hotTime.value[0]+'至'+hotTime.value[1]+'，是否确定？':'Your current check-in time is'+hotTime.value[0]+'~'+hotTime.value[1]+'Are you sure?',{type:'warning'}).then({ 270 if(!hotTime.value[0]){
271 proxy.$modal.msgError(language.value == 0 ?'请先选择入住日期':'Please choose the date of check-in first')
272 return
273 }
246 274
247 }).then(()=>{ 275 ElMessageBox.confirm(language.value == 0 ? '你当前选择的入住时间为' + hotTime.value[0] + '至' + hotTime.value[1] + '，是否确定？' : 'Your current check-in time is' + hotTime.value[0] + '~' + hotTime.value[1] + 'Are you sure?', {type: 'warning'}).then({}).then(() => {
248 checkRoomPayByUserId(room.hotelId).then(res=>{ 276 checkRoomPayByUserId(room.hotelId).then(res => {
249 if(res.data == -100){ 277 if (res.data == -100) {
250 ElMessageBox.confirm( 278 ElMessageBox.confirm(
251 language.value == 0 ?'你有未支付的酒店订单，是否前往个人中心查看':'You already have an unpaid hotel order, do you want to go to the personal center to check it?', 279 language.value == 0 ? '你有未支付的酒店订单，是否前往个人中心查看' : 'You already have an unpaid hotel order, do you want to go to the personal center to check it?',
252 language.value==0?'提示':'Warning', 280 language.value == 0 ? '提示' : 'Warning',
253 { 281 {
254 confirmButtonText: language.value==1?'Go My Reservation ':'前往我的预订', 282 confirmButtonText: language.value == 1 ? 'Go My Reservation ' : '前往我的预订',
255 // cancelButtonText: language.value==1?'Continue to book':'继续预订', 283 // cancelButtonText: language.value==1?'Continue to book':'继续预订',
256 type: 'warning', 284 type: 'warning',
257 } 285 }
258 ).then((res) => { 286 ).then((res) => {
259 console.log(res) 287 console.log(res)
260 router.push({ 288 router.push({
261 name:'myReservation', 289 name: 'myReservation',
262 }) 290 })
263 }) 291 })
264 // .catch((res) => { 292 // .catch((res) => {
...@@ -272,32 +300,32 @@ function goOrder(room) { ...@@ -272,32 +300,32 @@ function goOrder(room) {
272 }) 300 })
273 301
274 302
275
276 } 303 }
304
277 function goNext(room) { 305 function goNext(room) {
278 router.push({ 306 router.push({
279 name:'hotelOrder', 307 name: 'hotelOrder',
280 params:{ 308 params: {
281 roomId:room.id 309 roomId: room.id
282 }, 310 },
283 query:{ 311 query: {
284 room:encodeURIComponent(JSON.stringify(room)), 312 room: encodeURIComponent(JSON.stringify(room)),
285 hotelName:form.value.name, 313 hotelName: form.value.name,
286 checkInTime:form.value.checkInTime, 314 checkInTime: form.value.checkInTime,
287 start:hotTime.value[0], 315 start: hotTime.value[0],
288 end:hotTime.value[1], 316 end: hotTime.value[1],
289 } 317 }
290 }) 318 })
291 } 319 }
292 320
293 function getDaysBetween(){ 321 function getDaysBetween() {
294 if (hotTime.value && hotTime.value.length==2){ 322 if (hotTime.value && hotTime.value.length == 2) {
295 const d1=dayjs(hotTime.value[0]).format('YYYY-MM-DD') 323 const d1 = dayjs(hotTime.value[0]).format('YYYY-MM-DD')
296 const d2=dayjs(hotTime.value[1]).format('YYYY-MM-DD') 324 const d2 = dayjs(hotTime.value[1]).format('YYYY-MM-DD')
297 if (d1==d2){ 325 if (d1 == d2) {
298 getDateTime() 326 getDateTime()
299 return proxy.$modal.msgError(language.value==0?'入住时间跨度需要大于一天':'The duration of the stay must be more than one day.') 327 return proxy.$modal.msgError(language.value == 0 ? '入住时间跨度需要大于一天' : 'The duration of the stay must be more than one day.')
300 }else{ 328 } else {
301 getData() 329 getData()
302 } 330 }
303 } 331 }
...@@ -308,9 +336,9 @@ function disabledDateRZ(date) { ...@@ -308,9 +336,9 @@ function disabledDateRZ(date) {
308 if (formTime.value.hqStart) { 336 if (formTime.value.hqStart) {
309 const today = dayjs().format('YYYY-MM-DD') 337 const today = dayjs().format('YYYY-MM-DD')
310 if (formTime.value.hqStart < today) { 338 if (formTime.value.hqStart < today) {
311 return !((date.getTime() >= dayjs(today).valueOf())&&(date.getTime() <= dayjs(formTime.value.hqEnd).valueOf())) 339 return !((date.getTime() >= dayjs(today).valueOf()) && (date.getTime() <= dayjs(formTime.value.hqEnd).valueOf()))
312 } else { 340 } else {
313 return !((date.getTime() >= dayjs(formTime.value.hqStart).valueOf())&&(date.getTime() <= dayjs(formTime.value.hqEnd).valueOf())) 341 return !((date.getTime() >= dayjs(formTime.value.hqStart).valueOf()) && (date.getTime() <= dayjs(formTime.value.hqEnd).valueOf()))
314 } 342 }
315 } 343 }
316 // return true 344 // return true
...@@ -318,10 +346,10 @@ function disabledDateRZ(date) { ...@@ -318,10 +346,10 @@ function disabledDateRZ(date) {
318 346
319 function goMap() { 347 function goMap() {
320 return 348 return
321 // var tencentMapUrl = "https://map.qq.com/"; 349 // var tencentMapUrl = "https://map.qq.com/";
322 // window.location.href = tencentMapUrl; 350 // window.location.href = tencentMapUrl;
323 var url = `https://map.qq.com/?type=gcj02&lat=${form.value.latitude}&lng=${form.value.longitude}` 351 var url = `https://map.qq.com/?type=gcj02&lat=${form.value.latitude}&lng=${form.value.longitude}`
324 var mapUrl_tx = "http://apis.map.qq.com/uri/v1/marker?marker=coord:"+form.value.latitude+","+form.value.longitude+"&referer=yellowpage"; 352 var mapUrl_tx = "http://apis.map.qq.com/uri/v1/marker?marker=coord:" + form.value.latitude + "," + form.value.longitude + "&referer=yellowpage";
325 window.open(url, "_blank") 353 window.open(url, "_blank")
326 } 354 }
327 355
...@@ -329,19 +357,56 @@ function goMap() { ...@@ -329,19 +357,56 @@ function goMap() {
329 357
330 <style scoped lang="scss"> 358 <style scoped lang="scss">
331 .room { 359 .room {
332 background: #FAFBFD;margin: 20px 0 0;padding: 20px; 360 background: #FAFBFD;
361 margin: 20px 0 0;
362 padding: 20px;
333 border: 1px solid #E5E5E5; 363 border: 1px solid #E5E5E5;
334 .name{font-size: 20px;margin: 0 0 10px;} 364
335 .roomImg{aspect-ratio: 16/9;border-radius: 10px;overflow: hidden; 365 .name {
336 img{width: 100%;object-fit: cover;object-position: center;height: 100%;} 366 font-size: 20px;
367 margin: 0 0 10px;
337 } 368 }
338 .price{color: #FF8124;font-size: 24px; 369
339 span{font-size: 36px;font-family: "DIN Alternate"} 370 .roomImg {
371 aspect-ratio: 16/9;
372 border-radius: 10px;
373 overflow: hidden;
374
375 img {
376 width: 100%;
377 object-fit: cover;
378 object-position: center;
379 height: 100%;
380 }
340 } 381 }
341 .bg-lineg{margin: auto;border-radius: 10px;text-align: center;padding: 7px 2px 2px; 382
342 font-size: 24px;width:66px;cursor: pointer; 383 .price {
343 div{background: #fff;font-size: 13px;border-radius: 20px;padding: 0 10px; 384 color: #FF8124;
344 color: #453DEA;font-weight: 500;} 385 font-size: 24px;
386
387 span {
388 font-size: 36px;
389 font-family: "DIN Alternate"
390 }
391 }
392
393 .bg-lineg {
394 margin: auto;
395 border-radius: 10px;
396 text-align: center;
397 padding: 7px 2px 2px;
398 font-size: 24px;
399 width: 66px;
400 cursor: pointer;
401
402 div {
403 background: #fff;
404 font-size: 13px;
405 border-radius: 20px;
406 padding: 0 10px;
407 color: #453DEA;
408 font-weight: 500;
409 }
345 } 410 }
346 } 411 }
347 412
...@@ -379,14 +444,17 @@ function goMap() { ...@@ -379,14 +444,17 @@ function goMap() {
379 } 444 }
380 } 445 }
381 } 446 }
447
382 :deep(.button) { 448 :deep(.button) {
383 display: block; 449 display: block;
384 height: 55px; 450 height: 55px;
385 width: auto; 451 width: auto;
386 color: #fff; 452 color: #fff;
387 span{ 453
454 span {
388 display: block !important; 455 display: block !important;
389 div{ 456
457 div {
390 margin-top: 3px; 458 margin-top: 3px;
391 } 459 }
392 } 460 }
...@@ -449,26 +517,45 @@ function goMap() { ...@@ -449,26 +517,45 @@ function goMap() {
449 } 517 }
450 } 518 }
451 519
452 .hotelImg{border-radius: 10px;overflow: hidden;aspect-ratio: 16/9; 520 .hotelImg {
453 img{object-fit: cover;object-position: center;width: 100%;height: 100%; 521 border-radius: 10px;
522 overflow: hidden;
523 aspect-ratio: 16/9;
524
525 img {
526 object-fit: cover;
527 object-position: center;
528 width: 100%;
529 height: 100%;
454 } 530 }
455 } 531 }
456 .info{font-weight: 400; 532
533 .info {
534 font-weight: 400;
457 font-size: 14px; 535 font-size: 14px;
458 color: #929AA0; 536 color: #929AA0;
459 .el-icon{margin-right: 5px;} 537
538 .el-icon {
539 margin-right: 5px;
540 }
460 } 541 }
461 .oddmb:nth-child(2){margin-bottom: 20px;} 542
462 .forbid{ 543 .oddmb:nth-child(2) {
463 cursor:not-allowed !important; 544 margin-bottom: 20px;
545 }
546
547 .forbid {
548 cursor: not-allowed !important;
464 color: #a8abb2 !important; 549 color: #a8abb2 !important;
465 //filter:grayscale(1); 550 //filter:grayscale(1);
466 background: #fff; 551 background: #fff;
467 div{ 552
553 div {
468 color: #a8abb2 !important; 554 color: #a8abb2 !important;
469 } 555 }
470 } 556 }
471 .forbid:hover{ 557
472 box-shadow:none; 558 .forbid:hover {
559 box-shadow: none;
473 } 560 }
474 </style> 561 </style>
......
src/viewsPc/components/masterClass.vue
...@@ -6,22 +6,22 @@ ...@@ -6,22 +6,22 @@
6 > 6 >
7 <div class="boxInvitation pd20"> 7 <div class="boxInvitation pd20">
8 <el-steps :active="activeStep" align-center class="mb20"> 8 <el-steps :active="activeStep" align-center class="mb20">
9 <el-step :title="language==0?'报名须知':'Notice'" /> 9 <el-step :title="language==0?'报名须知':'Notice'"/>
10 <el-step :title="language==0?'填写信息':'Information'" /> 10 <el-step :title="language==0?'填写信息':'Information'"/>
11 <el-step :title="language==0?'选择课程':'Courses'" /> 11 <el-step :title="language==0?'选择课程':'Courses'"/>
12 </el-steps> 12 </el-steps>
13 <div v-if="activeStep==0"> 13 <div v-if="activeStep==0">
14 <div class="mb60 xzRich" style="max-height: 50vh;overflow: auto"> 14 <div class="mb60 xzRich" style="max-height: 50vh;overflow: auto">
15 <div v-if="language==0" style="width: 300px;margin: auto"><br/> 15 <div v-if="language==0" style="width: 300px;margin: auto"><br/>
16 培训地点：无锡君来世尊酒店<br/> 16 培训地点：无锡君来世尊酒店<br/>
17 详细地址：江苏省 无锡市 滨湖区 和风路111号<br/> 17 详细地址：江苏省 无锡市 滨湖区 和风路111号<br/>
18 报到时间：2024年7月14日13:30 -17:00<br/> 18 报到时间：2024年7月14日13:30 -17:00<br/>
19 联系人：蒋璐<br/> 19 联系人：蒋璐<br/>
20 联系电话：15961580050<br/> 20 联系电话：15961580050<br/>
21 </div> 21 </div>
22 <div v-else style="width: 400px;margin: auto"><br/> 22 <div v-else style="width: 400px;margin: auto"><br/>
23 <!-- The age limit for Youth Session: Born between 1st Jan, 2006 and 31st Dec., 2009.<br/>--> 23 <!-- The age limit for Youth Session: Born between 1st Jan, 2006 and 31st Dec., 2009.<br/>-->
24 <!-- The age limit for Juvenile Session: Born after 1 Jan., 2010.<br/>--> 24 <!-- The age limit for Juvenile Session: Born after 1 Jan., 2010.<br/>-->
25 Training Camp venue：Worldhotel Grand Juna Wuxi<br/> 25 Training Camp venue：Worldhotel Grand Juna Wuxi<br/>
26 Address：No.111 Hefeng Road, Binhu District, Wuxi, Jiangsu<br/> 26 Address：No.111 Hefeng Road, Binhu District, Wuxi, Jiangsu<br/>
27 Check-in：From 13:30 to 17:00 on July 14, 2024.<br/> 27 Check-in：From 13:30 to 17:00 on July 14, 2024.<br/>
...@@ -30,12 +30,17 @@ ...@@ -30,12 +30,17 @@
30 </div> 30 </div>
31 </div> 31 </div>
32 <div class="text-center"> 32 <div class="text-center">
33 <el-button type="primary" v-if="courseList.length>0" class="btn-lineG" round @click="setActive(1)">{{ language == 0 ? '下一步' : 'NEXT' }}</el-button> 33 <el-button type="primary" v-if="courseList.length>0" class="btn-lineG" round @click="setActive(1)">
34 <el-button type="primary" class="btn-lineG" round v-else @click="close">{{language==0?'暂无可报课程':'No courses available for reporting'}}</el-button> 34 {{ language == 0 ? '下一步' : 'NEXT' }}
35 </el-button>
36 <el-button type="primary" class="btn-lineG" round v-else @click="close">
37 {{ language == 0 ? '暂无可报课程' : 'No courses available for reporting' }}
38 </el-button>
35 </div> 39 </div>
36 </div> 40 </div>
37 <div v-if="activeStep==1"> 41 <div v-if="activeStep==1">
38 <el-form :model="form" :rules="rules" ref="iformRef" label-position="right" :label-width="language==0?'80px':'150px'"> 42 <el-form :model="form" :rules="rules" ref="iformRef" label-position="right"
43 :label-width="language==0?'80px':'160px'">
39 <el-form-item :label="language==0?'姓名':'Name'" required prop="name"> 44 <el-form-item :label="language==0?'姓名':'Name'" required prop="name">
40 <el-input v-model="form.name"/> 45 <el-input v-model="form.name"/>
41 </el-form-item> 46 </el-form-item>
...@@ -58,36 +63,41 @@ ...@@ -58,36 +63,41 @@
58 type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" 63 type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
59 /> 64 />
60 </el-form-item> 65 </el-form-item>
66 <el-form-item :label="language==0?'手机号':'Phone number'" required prop="phone">
67 <el-input v-model="form.phone"/>
68 </el-form-item>
61 <el-form-item :label="language==0?'邮箱':'Email'" required prop="email"> 69 <el-form-item :label="language==0?'邮箱':'Email'" required prop="email">
62 <el-input v-model="form.email" type="email"/> 70 <el-input v-model="form.email" type="email"/>
63 </el-form-item> 71 </el-form-item>
64 <el-form-item :label="language==0?'证件号':'ID No.'" required prop="passportNo"> 72 <el-form-item :label="language==0?'证件号':'National license No.'" required prop="passportNo">
65 <el-input v-model="form.passportNo" @blur="checkCard"/> 73 <el-input v-model="form.passportNo" @blur="checkCard"/>
66 </el-form-item> 74 </el-form-item>
67 <el-form-item :label="language==0?'有效证件':'Passport Copy'" required prop="passportCopy"> 75 <el-form-item :label="language==0?'有效证件':'Passport Copy'" required prop="passportCopy">
68 <image-upload v-model="form.passportCopy" :limit="1" :is-show-tip="false" 76 <image-upload v-model="form.passportCopy" :limit="1" :is-show-tip="false"
69 :button-text="language==0?'上传':'Upload'"/> 77 :button-text="language==0?'上传':'Upload'"/>
70 </el-form-item> 78 </el-form-item>
71 <!-- <el-form-item :label="language==0?'抵达日期':'Date of Arrival'" required prop="arrival">--> 79 <!-- <el-form-item :label="language==0?'抵达日期':'Date of Arrival'" required prop="arrival">-->
72 <!-- <el-date-picker--> 80 <!-- <el-date-picker-->
73 <!-- v-model="form.arrival" placeholder="YYYY-MM-DD"--> 81 <!-- v-model="form.arrival" placeholder="YYYY-MM-DD"-->
74 <!-- style="width: 100%;"--> 82 <!-- style="width: 100%;"-->
75 <!-- type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"--> 83 <!-- type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"-->
76 <!-- />--> 84 <!-- />-->
77 <!-- </el-form-item>--> 85 <!-- </el-form-item>-->
78 <!-- <el-form-item :label="language==0?'出发日期':'Date of Departure'" required prop="departure">--> 86 <!-- <el-form-item :label="language==0?'出发日期':'Date of Departure'" required prop="departure">-->
79 <!-- <el-date-picker--> 87 <!-- <el-date-picker-->
80 <!-- v-model="form.departure"--> 88 <!-- v-model="form.departure"-->
81 <!-- style="width: 100%;" placeholder="YYYY-MM-DD"--> 89 <!-- style="width: 100%;" placeholder="YYYY-MM-DD"-->
82 <!-- type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"--> 90 <!-- type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"-->
83 <!-- />--> 91 <!-- />-->
84 <!-- </el-form-item>--> 92 <!-- </el-form-item>-->
85 <el-form-item :label="language==0?'备注':'Remark '"> 93 <el-form-item :label="language==0?'备注':'Remark '">
86 <el-input type="textarea" v-model="form.remark" rows="3"/> 94 <el-input type="textarea" v-model="form.remark" rows="3"/>
87 </el-form-item> 95 </el-form-item>
88 96
89 <div class="text-center"> 97 <div class="text-center">
90 <el-button size="large" @click="setActive(0)" round plain type="primary">{{ language == 0 ? '上一步' : 'PREV' }}</el-button> 98 <el-button size="large" @click="setActive(0)" round plain type="primary">
99 {{ language == 0 ? '上一步' : 'PREV' }}
100 </el-button>
91 <el-button type="primary" size="large" @click="checkApplyCourse(2)" round class="btn-lineG"> 101 <el-button type="primary" size="large" @click="checkApplyCourse(2)" round class="btn-lineG">
92 {{ language == 0 ? '下一步' : 'NEXT' }} 102 {{ language == 0 ? '下一步' : 'NEXT' }}
93 </el-button> 103 </el-button>
...@@ -99,41 +109,49 @@ ...@@ -99,41 +109,49 @@
99 <img class="mauto" src="@/assets/dance/ok.png"/> 109 <img class="mauto" src="@/assets/dance/ok.png"/>
100 <h2 class="text-center">{{ language == 0 ? '申请已提交' : 'Submitted successfully' }}</h2> 110 <h2 class="text-center">{{ language == 0 ? '申请已提交' : 'Submitted successfully' }}</h2>
101 <h4 class="text-center" v-if="language == 0"> 111 <h4 class="text-center" v-if="language == 0">
102 我们已收到您的申请，并将尽快处理。请耐心等待。 112 我们已收到您的申请，请在7月14日到无锡报到。
103 </h4> 113 </h4>
104 <h4 v-else> 114 <h4 v-else>
105 Your application has been received,<br/> 115 Your application has been received,
106 and we will process it as soon as possible.
107 <br/> 116 <br/>
108 Please be patient while waiting. 117 Please register in Wuxi on July 14.
109 </h4> 118 </h4>
110 </div> 119 </div>
111 <div v-else> 120 <div v-else>
112 <div class="tip text-danger mb20" v-if="language==0">*选择参加的课程（最少一项，最多两项）</div> 121 <div class="tip text-danger mb20" v-if="language==0">*选择参加的课程（最少一项，最多两项）</div>
113 <div class="tip text-danger mb20" v-else>*Select the courses to enroll in (at least one, no more than two)</div> 122 <div class="tip text-danger mb20" v-else>*Select the courses to enroll in (at least one, no more than two)
123 </div>
114 <el-checkbox-group size="large" v-model="form.courseId" @change="courseChange"> 124 <el-checkbox-group size="large" v-model="form.courseId" @change="courseChange">
115 <div v-for="c in courseList" class="mb20"> 125 <div v-for="c in courseList" class="mb20">
116 <el-checkbox :value="c.id" border class="w100" :disabled="(form.courseId?.length>=2&&form.courseId.indexOf(c.id)==-1)||disChoose||(form.nationality==240&&c.viewStateCn == 0)||(form.nationality!=240&&c.viewStateEn == 0)"> 126 <el-checkbox :value="c.id" border class="w100"
127 :disabled="(form.courseId?.length>=2&&form.courseId.indexOf(c.id)==-1)||disChoose||(form.nationality==240&&c.viewStateCn == 0)||(form.nationality!=240&&c.viewStateEn == 0)">
117 <div v-if="language==0" style="display: flex"> 128 <div v-if="language==0" style="display: flex">
118 <div> {{c.name}}{{c.name.indexOf('青年')>-1?'(年龄在15岁~18岁)':'(年龄在14岁以下)'}}</div> 129 <div> {{ c.name }}{{ c.name.indexOf('青年') > -1 ? '(年龄在15岁~18岁)' : '(年龄在14岁以下)' }}</div>
119 </div> 130 </div>
120 <div v-else> 131 <div v-else>
121 <div> {{c.nameEn}}{{c.nameEn.indexOf('Youth')>-1?'(Between the age 15 and 18)':'(Under the age of 14)'}} </div> 132 <div>
133 {{ c.nameEn }}{{ c.nameEn.indexOf('Youth') > -1 ? '(Between the age 15 and 18)' : '(Under the age of 14)' }}
134 </div>
122 </div> 135 </div>
123 136
124 <el-tag class="ml20" v-if="(form.nationality==240&&c.viewStateCn == 0)||(form.nationality!=240&&c.viewStateEn == 0)" type="danger" effect="dark">{{language == 0 ?'已报满':'Already full'}}</el-tag> 137 <el-tag class="ml20"
138 v-if="(form.nationality==240&&c.viewStateCn == 0)||(form.nationality!=240&&c.viewStateEn == 0)"
139 type="danger" effect="dark">{{ language == 0 ? '已报满' : 'Already full' }}
140 </el-tag>
125 </el-checkbox> 141 </el-checkbox>
126 </div> 142 </div>
127 </el-checkbox-group> 143 </el-checkbox-group>
128 144
129 145
130 <div class="text-center"> 146 <div class="text-center">
131 <el-button size="large" @click="setActive(1)" round plain type="primary">{{ language == 0 ? '上一步' : 'PREV' }}</el-button> 147 <el-button size="large" @click="setActive(1)" round plain type="primary">
132 <el-button type="primary" v-if="!disChoose" size="large" @click="submit" round class="btn-lineG w200px"> 148 {{ language == 0 ? '上一步' : 'PREV' }}
133 {{ language == 0 ? '提交' : 'SUBMIT' }} 149 </el-button>
134 </el-button> 150 <el-button type="primary" v-if="!disChoose" size="large" @click="submit" round class="btn-lineG w200px">
151 {{ language == 0 ? '提交' : 'SUBMIT' }}
152 </el-button>
135 153
136 </div> 154 </div>
137 155
138 </div> 156 </div>
139 </div> 157 </div>
...@@ -153,9 +171,7 @@ import {masterClassList, getByCard, submitMasterApply, getMasterApply, delByCard ...@@ -153,9 +171,7 @@ import {masterClassList, getByCard, submitMasterApply, getMasterApply, delByCard
153 171
154 const {proxy} = getCurrentInstance() 172 const {proxy} = getCurrentInstance()
155 const language = useStorage('language', 0) 173 const language = useStorage('language', 0)
156 const form = ref({ 174 const form = ref({})
157 gender:'0'
158 })
159 const show = ref(false) 175 const show = ref(false)
160 const showR = ref(false) 176 const showR = ref(false)
161 const disChoose = ref(false) 177 const disChoose = ref(false)
...@@ -178,7 +194,7 @@ const rules = ref( ...@@ -178,7 +194,7 @@ const rules = ref(
178 const open = (params) => { 194 const open = (params) => {
179 console.log(params) 195 console.log(params)
180 show.value = true 196 show.value = true
181 title.value = language.value==0?'亚洲青少年体育舞蹈公益课':'Asian Youth DanceSport Training Camp' 197 title.value = language.value == 0 ? '亚洲青少年体育舞蹈公益课' : 'Asian Youth DanceSport Training Camp'
182 cptId.value = params.cptId 198 cptId.value = params.cptId
183 getCourse() 199 getCourse()
184 } 200 }
...@@ -196,24 +212,28 @@ watch(show, (value) => { ...@@ -196,24 +212,28 @@ watch(show, (value) => {
196 // proxy.$refs['dialogRef'].clearValidate() 212 // proxy.$refs['dialogRef'].clearValidate()
197 }) 213 })
198 }) 214 })
215
199 function getCourse() { 216 function getCourse() {
200 // '1777256058082189313' 217 // '1777256058082189313'
201 masterClassList({cptId:cptId.value}).then(res=>{ 218 masterClassList({cptId: cptId.value}).then(res => {
202 courseList.value = res.data 219 courseList.value = res.data
203 }) 220 })
204 } 221 }
222
205 function setActive(n) { 223 function setActive(n) {
206 activeStep.value = n 224 activeStep.value = n
207 } 225 }
208 function courseChange(e){ 226
209 console.log('已选',e) 227 function courseChange(e) {
228 console.log('已选', e)
210 } 229 }
230
211 function checkApplyCourse(n) { 231 function checkApplyCourse(n) {
212 getMasterApply({card:form.value.passportNo}).then(res=>{ 232 getMasterApply({card: form.value.passportNo}).then(res => {
213 if(res.data?.length>0){ 233 if (res.data?.length > 0) {
214 form.value.courseId = [] 234 form.value.courseId = []
215 for(var n of res.data){ 235 for (var n of res.data) {
216 form.value.courseId.push(n.itemId) 236 form.value.courseId.push(n.itemId)
217 } 237 }
218 ElMessageBox.confirm( 238 ElMessageBox.confirm(
219 language.value == 0 ? '您已提交过信息，是否更新？' : 'You have submitted the information, do you want to update?', 239 language.value == 0 ? '您已提交过信息，是否更新？' : 'You have submitted the information, do you want to update?',
...@@ -221,14 +241,14 @@ function checkApplyCourse(n) { ...@@ -221,14 +241,14 @@ function checkApplyCourse(n) {
221 confirmButtonText: language.value == 0 ? '是' : 'Confirm', 241 confirmButtonText: language.value == 0 ? '是' : 'Confirm',
222 cancelButtonText: language.value == 0 ? '否' : 'Cancel', 242 cancelButtonText: language.value == 0 ? '否' : 'Cancel',
223 type: 'warning' 243 type: 'warning'
224 }).then(()=>{ 244 }).then(() => {
225 //删除原记录 245 //删除原记录
226 delByCard(form.value.passportNo).then(res=>{ 246 delByCard(form.value.passportNo).then(res => {
227 form.value.courseId = [] 247 form.value.courseId = []
228 disChoose.value = false 248 disChoose.value = false
229 to2() 249 to2()
230 }) 250 })
231 }).catch(()=>{ 251 }).catch(() => {
232 disChoose.value = true 252 disChoose.value = true
233 to2() 253 to2()
234 }) 254 })
...@@ -238,6 +258,7 @@ function checkApplyCourse(n) { ...@@ -238,6 +258,7 @@ function checkApplyCourse(n) {
238 }) 258 })
239 259
240 } 260 }
261
241 function to2() { 262 function to2() {
242 proxy.$refs.iformRef.validate(valid => { 263 proxy.$refs.iformRef.validate(valid => {
243 if (form.value.email.indexOf('@') == -1) { 264 if (form.value.email.indexOf('@') == -1) {
...@@ -256,14 +277,15 @@ function to2() { ...@@ -256,14 +277,15 @@ function to2() {
256 277
257 278
258 function checkCard() { 279 function checkCard() {
259 getByCard({card:form.value.passportNo}).then(res=>{ 280 getByCard({card: form.value.passportNo}).then(res => {
260 if(res.data){ 281 if (res.data) {
261 form.value = res.data 282 form.value = res.data
262 } else { 283 } else {
263 form.value.courseId = [] 284 form.value.courseId = []
264 } 285 }
265 }) 286 })
266 } 287 }
288
267 getCountryList() 289 getCountryList()
268 290
269 function getCountryList() { 291 function getCountryList() {
...@@ -296,29 +318,35 @@ const submit = () => { ...@@ -296,29 +318,35 @@ const submit = () => {
296 form.value.itemIds = form.value.courseId.toString() 318 form.value.itemIds = form.value.courseId.toString()
297 delete form.value.courseId 319 delete form.value.courseId
298 submitMasterApply(form.value).then((res) => { 320 submitMasterApply(form.value).then((res) => {
299 ElMessage.success(language.value == 0 ?'提交成功':'Successfully!') 321 ElMessage.success(language.value == 0 ? '提交成功' : 'Successfully!')
300 showR.value = true 322 showR.value = true
301 }).catch(()=>{ 323 }).catch(() => {
302 324
303 }) 325 })
304 }) 326 })
305 } 327 }
306 const conti = () => { 328 const conti = () => {
307 showR.value = false 329 showR.value = false
308 form.value = { 330 form.value = {}
309 gender: '0'
310 }
311 } 331 }
312 const close = () =>{ 332 const close = () => {
313 show.value = false 333 show.value = false
314 } 334 }
315 </script> 335 </script>
316 336
317 <style scoped> 337 <style scoped>
318 .xzRich{line-height: 2;font-size: 14px;} 338 .xzRich {
339 line-height: 2;
340 font-size: 14px;
341 }
342
319 .boxInvitation { 343 .boxInvitation {
320 width: 90%; 344 width: 90%;
321 margin: auto 345 margin: auto
322 } 346 }
323 h4{font-size: 15px;line-height: 1.6;} 347
348 h4 {
349 font-size: 15px;
350 line-height: 1.6;
351 }
324 </style> 352 </style>
......
src/viewsPc/index.vue
...@@ -94,7 +94,7 @@ ...@@ -94,7 +94,7 @@
94 </el-icon> 94 </el-icon>
95 </a> 95 </a>
96 <!-- <el-button type="primary" @click="popMaster">青少年公益课</el-button>--> 96 <!-- <el-button type="primary" @click="popMaster">青少年公益课</el-button>-->
97 <a class="zn-btn ml20 btn-q" @click="popMaster">青少年公益课</a> 97 <a class="zn-btn ml20 btn-q" @click="popMaster">青少年公益课报名</a>
98 </div> 98 </div>
99 </el-col> 99 </el-col>
100 <el-col :sm="24" :lg="14"> 100 <el-col :sm="24" :lg="14">
......
src/viewsPc/index_en.vue
...@@ -90,7 +90,7 @@ ...@@ -90,7 +90,7 @@
90 GUIDELINE 90 GUIDELINE
91 <el-icon><download /></el-icon> 91 <el-icon><download /></el-icon>
92 </a> 92 </a>
93 <a class="zn-btn ml20 btn-q " @click="popMaster">Junior &Youth Camp <el-icon><Edit /></el-icon> 93 <a class="zn-btn ml20 btn-q " @click="popMaster">Junior &Youth Camp REGISTER<el-icon><Edit /></el-icon>
94 </a> 94 </a>
95 </div> 95 </div>
96 96
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!