Skip to content

jijin / dance-pc

Go to a project
Toggle navigation
Toggle navigation pinning
7a7eddcf by zhangmeng
Options

旅游

1 parent b693f3f5
Inline Side-by-side
Showing 5 changed files with 1259 additions and 522 deletions
src/apiPc/booking.js
...@@ -697,4 +697,16 @@ export function getVehicleMa1p(params) { // activityId ...@@ -697,4 +697,16 @@ export function getVehicleMa1p(params) { // activityId
697 }) 697 })
698 } 698 }
699 699
700 // 旅游
701
702 export function getGateListByLasId(params) { // scenicDate,lasId
703 return request({
704 url: `/ota/scenicConfig/getGateListByLasId`,
705 method: 'get',
706 params
707 })
708 }
709
710 // 旅游
711
700 712
......
src/viewsPc/booking/travelDetail.vue
1 <template> 1 <template>
2 <div> 2 <div>
3 <div class="box"> 3 <!-- top -->
4 <el-card v-loading="loading" class="mt30"> 4 <div class="container top">
5 <el-row v-if="form" class="hotel" align="middle" :gutter="20"> 5 <img :src="fillImgUrl(travel.cover)" alt="" class="cover_img">
6 <!-- <el-col :span="6">--> 6 <div class="info">
7 <!-- <img class="w100" :src="fillImgUrl(form.photos?.split(',')[0])"/>--> 7 <div class="title">{{ travel.name }}</div>
8 <!-- </el-col>--> 8 <div class="select_item_box">
9 <el-col :span="language == 0?16:24"> 9 <div class="label">
10 <h3 class="esp flex">{{ form?.name }} 10 {{ triggerLanguage(language, "时间", "Event Date & Time") }} :
11 11 </div>
12 <div class="starBox ml20"> 12 </div>
13 <img v-for="i in Number(form?.rank||0)" src="@/assets/booking/star.png"> 13 <div class="select_item_box">
14 <div class="select_item">
15 <div
16 v-for="(v, index) in travel.dateList"
17 :key="index"
18 :class="[
19 v== selectForm.scenicDate ? 'tagActive' : 'tag',
20 ]"
21 @click="select(v)"
22 >
23 {{ v }}
24 </div>
25 </div>
26 </div>
27
28 <div>
29 <!-- 成人票 -->
30 <br>
31 <div v-for="v in ticketList" v-show="v.leftNum!=0" :key="v.id">
32 <div class="select_item_box">
33 <div class="label ticket">
34 {{ v.name }} :
35 </div>
36 <div class="rowBox">
37 <span class="titleTick">
38 {{
39 triggerLanguage(language, v.price, v.priceEn)
40 }}
41 {{
42 triggerLanguage(language, '￥/人', '€/person')
43 }}
44 </span>
45 <el-input-number
46 v-model="v.count" :max="v.leftNum" :min="0" :precision="0" class="inputNumber"
47 @change="countTotal"
48 />
49 <i class="residue">{{ language == 0 ? '剩余票数' : 'Remaining votes' }}{{ v.leftNum }}</i>
14 </div> 50 </div>
15 </h3>
16
17 <!-- <div class="tagbox">-->
18 <!-- <span v-for="(t,index) in form?.label?.split('，')" v-show="index<4">{{ t }}</span>-->
19 <!-- <a v-show="form?.label?.split('，').length>4">{{ language == 0 ? '更多' : 'MORE' }} ></a>-->
20 <!-- </div>-->
21 <div class="info">
22 <el-icon>
23 <Clock />
24 </el-icon>
25 <span class="mr10">{{ language == 0 ? '开园时间' : 'Opening Time' }}：{{ form?.startTime }} ～ {{ form?.workTime }}</span>
26 </div> 51 </div>
27 <div class="info"> 52 </div>
28 <el-icon> 53
29 <Phone /> 54 <!-- 价格 -->
30 </el-icon> 55 <div class="select_item_box">
31 <span class="mr10">{{ language == 0 ? '联系方式' : 'Contact' }}：{{ form?.contact }}</span> 56 <div class="label">
57 {{ triggerLanguage(language, '价格', "Price") }} :
32 </div> 58 </div>
33 <div class="info esp"> 59 </div>
34 <el-icon> 60 <div class="select_item_box">
35 <MapLocation /> 61 <div class="select_item">
36 </el-icon> 62 <div class="tagActive" style="min-width: 80px">
37 <span>{{ form?.address }}</span> 63 {{ language == 0 ? '￥' : '€' }} {{ language == 0 ? selectForm.price : selectForm.priceEn }}
64 </div>
38 </div> 65 </div>
39 <div v-if="form?.introduction" class="info pointer"> 66 </div>
40 <div :class="showAll?'':'esp_2'" @click="showAll=!showAll" v-html="form.introduction.toString()" /> 67 <!-- 购票备注-->
68 <div v-if="matchForm.ticketRemark" class="select_item_box">
69 <div class="label">
70 {{
71 triggerLanguage(language, '购票备注', "Ticket Purchase Note")
72 }} :
41 </div> 73 </div>
42 </el-col> 74 </div>
43 </el-row> 75 <div v-if="matchForm.ticketRemark" class="select_item_box">
44 <el-empty v-else :image="`/img/order_no.png`" :image-size="228" description="" /> 76 <div class="select_item">
45 </el-card> 77 {{ matchForm.ticketRemark }}
46
47 <div class="mt30">
48 <el-row :gutter="20">
49 <el-col :span="10">
50 <div class="imgbox hotelImg">
51 <el-image
52 :src="fillImgUrl(form?.photos?.split(',')[0])" fit="cover"
53 :preview-src-list="form?.photos?.split(',')"
54 />
55 </div> 78 </div>
56 </el-col> 79 </div>
57 <el-col :span="14"> 80
58 <el-row class="h100" :gutter="20"> 81 <div
59 <el-col v-for="(p,index) in form?.photos?.split(',').slice(1,7)" :key="index" :span="8" class="oddmb"> 82 v-if="endTime<=0" class="btn" style="margin-left: 40px;opacity: 0.5;cursor: not-allowed;margin-top: 10px"
60 <div class="imgbox hotelImg"> 83 @click="toSelectClosed"
61 <el-image :src="fillImgUrl(p)" fit="cover" /> 84 >
62 </div> 85 {{
63 </el-col> 86 triggerLanguage(language, "售票结束", "Sale closed")
64 </el-row> 87 }}
65 </el-col> 88 </div>
66 </el-row> 89 <div v-else class="btn" style="margin-left: 40px;margin-top: 10px" @click="toSelectSeat()">
90 {{
91 triggerLanguage(language, "立即购票", "Buy tickets now")
92 }}
93 </div>
94
95 </div>
96
67 </div> 97 </div>
68 98 </div>
69 <el-card class="mt30 mb60"> 99
70 <div class="lineHead"> 100 <div class="container bottom">
71 <ul> 101 <div style="display: flex">
72 <li> 102 <div :class="{'bg':active==1}" class="buBg" @click="active=1">{{ language == 0 ? '购票说明' : 'Notice' }}</div>
73 {{ language == 0 ? '选择日期' : 'tickets type' }} 103 <div :class="{'bg' :active==2}" class="buBg" @click="active=2">{{
74 </li> 104 language == 0 ? '购票须知' : 'Instructions'
75 </ul> 105 }}
76 </div> 106 </div>
107 </div>
108 <div v-show="active==1" class="rich_content" v-html="travel.descriptions" />
109 <div v-show="active==2" class="rich_content" v-html="travel.notice" />
110
111 <el-dialog v-model="show" title="" width="1000px">
77 <div> 112 <div>
78 <!-- 日期--> 113 <img :src="fillImgUrl(showUrl)" alt="" style="width: 100%">
79 <el-calendar v-model="currentDate" class="mt20" :range="calendarRange">
80 <template #header="{date}">
81 <el-row style="width: 100%">
82 <el-col :lg="7" class="forPc" />
83 <el-col :lg="10" class="forPc">
84 <el-row justify="center" align="middle">
85 <!-- <div class="canBtn"><el-icon><ArrowLeftBold /></el-icon></div>-->
86 <div class="cTitle">
87 <!-- <el-date-picker-->
88 <!-- v-model="value2"-->
89 <!-- type="daterange"-->
90 <!-- range-separator="-"-->
91 <!-- start-placeholder="Start date"-->
92 <!-- end-placeholder="End date"-->
93 <!-- format="YYYY-MM-DD"-->
94 <!-- value-format="YYYY-MM-DD"-->
95 <!-- size="small"-->
96 <!-- @change="changee"-->
97 <!-- />-->
98 <!-- <el-input readonly :value="date" type="text" size="small" style="width: 280px"></el-input>-->
99 {{ date }}
100 </div>
101 <!-- <div class="canBtn"><el-icon><ArrowRightBold /></el-icon></div>-->
102 </el-row>
103 </el-col>
104 <el-col :lg="7" :xs="24">
105 <div style="text-align: right;padding-right: 10px">
106 <el-date-picker
107 v-model="currentDate1"
108 type="date"
109 placeholder="YYYY-MM-DD"
110 format="YYYY-MM-DD"
111 :disabled-date="disabledDateRZ"
112 :clearable="false"
113 @change="dateChange"
114 />
115 </div>
116 </el-col>
117 </el-row>
118 </template>
119 <template #date-cell="data">
120 <div :class="data.data.day==query.currentDate?'primaryDate date':'date'" @click="selectDate(data.data.day)">
121 {{ data.data.day.slice(8, 10) }}
122 </div>
123 </template>
124 </el-calendar>
125 </div> 114 </div>
126 115 </el-dialog>
127 <div class="text-center mt30">
128 <el-button
129 style="color: #fff" size="large"
130 class="w200px btn-lineG" :class="{'forbid':!(!hotTime[0])}" round @click="goOrder"
131 >
132 <span v-if="btnDisable">{{ language==0?'不在预定时间内':'OUT OF ORDER TIME' }}</span>
133 <span v-else>{{ language==0?'立即预订':'BOOK NOW' }}</span>
134 </el-button>
135 </div>
136 </el-card>
137 </div> 116 </div>
138 </div> 117 </div>
139 </template> 118 </template>
140 119
120
141 <script setup> 121 <script setup>
142 import { useRouter } from 'vue-router' 122 import { ref, computed, onMounted } from 'vue'
143 import { ref, onMounted, computed } from 'vue' 123 import * as booking from '@/apiPc/booking'
144 import { useRoute } from 'vue-router'
145 import { dayjs } from 'element-plus'
146 import { getScenicById, checkOrderPay } from '@/apiPc/booking'
147 import { getBaseInfoByActiveId } from '@/apiPc/booking'
148 124
149 import { useStorage } from '@vueuse/core/index'
150 import { ElMessageBox } from 'element-plus' 125 import { ElMessageBox } from 'element-plus'
151 const currentDate = ref(new Date()) 126 import { fillImgUrl } from '/@/utils/ruoyi'
152 const currentDate1 = ref(new Date()) 127 import useUserStore from '/@/store/modules/user'
153 const calendarRange = ref([dayjs(currentDate.value).toDate(), (dayjs(currentDate.value).toDate())]) 128 import { triggerLanguage } from '@/utils/ruoyi'
129 import { useStorage } from '@vueuse/core/index'
130 import { useRoute, useRouter } from 'vue-router'
131 import { getCurrentInstance } from '@vue/runtime-core'
154 132
155 const language = useStorage('language', 0) 133 const language = useStorage('language', 0)
156 const router = useRouter() 134 const useStore = useUserStore()
135 const user = computed(() => useUserStore().user)
157 const route = useRoute() 136 const route = useRoute()
158 const form = ref({}) 137 const router = useRouter()
159 const query = ref({ 138 const show = ref(false)
160 lasId: route.query.lasId 139 const showUrl = ref('')
140 const activeId = ref(route.params.activeId)
141 const active = ref(1)
142
143 const timeData = ref()
144 const endTime = ref()
145 const matchForm = ref({})
146 const selectForm = ref({
147 latsId: null,
148 scenicDate: '',
149 price: '--',
150 priceEn: '--'
161 }) 151 })
162 const hotTime = ref([]) 152
163 const showAll = ref(false) 153 const { proxy } = getCurrentInstance()
164 const loading = ref(false) 154 const travel = ref({})
165 const formTime = ref({}) 155 const ticketList = ref([])
166 156
167 onMounted(() => { 157 onMounted(() => {
168 getBaseInfoByActiveId(route.params.cptId).then(res => { 158 getLogexScenicVoById()
169 formTime.value = res.data || null
170 }).catch(err => {
171 console.log(err)
172 formTime.value = null
173 }).finally(() => {
174 console.log(formTime.value)
175 getData()
176 })
177 }) 159 })
178 160
179 function getData() { 161 async function getLogexScenicVoById() {
180 loading.value = true 162 const res = await booking.getLogexScenicVoById({ id: activeId.value })
181 getScenicById(route.params.scenicId).then(res => { 163 travel.value = res.data
182 loading.value = false 164 selectForm.value.latsId = travel.value.id
183 form.value = res.data 165 if (travel.value.dateList && travel.value.dateList.length > 0) {
184 // initMap() 166 selectForm.value.scenicDate = travel.value.dateList[0]
185 }).catch(err => { 167 await getGateListByLasId()
186 console.log(err) 168 }
187 })
188 } 169 }
189 function dateChange() { 170
190 currentDate.value = currentDate1.value 171 async function getGateListByLasId() {
191 calendarRange.value = [dayjs(currentDate.value).toDate(), (dayjs(currentDate.value).toDate())] 172 const res = await booking.getGateListByLasId({
173 latsId: selectForm.value.latsId,
174 scenicDate: selectForm.value.scenicDate
175 })
176 ticketList.value = res.data
177 for (const v of ticketList.value) {
178 v.leftNum = v.num - v.orderCount
179 v.count = 0
180 }
192 } 181 }
193 182
194 function selectDate(date) { 183 function select(v) {
195 query.value.currentDate = date 184 selectForm.value.scenicDate = v
196 currentDate1.value = currentDate.value = dayjs(date).toDate() 185 selectForm.value.price = '--'
197 console.log(date) 186 selectForm.value.priceEn = '--'
187 getGateListByLasId()
198 } 188 }
199 189
200 const btnDisable = computed(() => { 190 function countTotal() {
201 if (formTime.value.scenicStart) { 191 let price = 0
202 const curr = currentDate.value.valueOf() 192 let priceEn = 0
203 const today = dayjs(dayjs().format('YYYY-MM-DD')).valueOf() 193 for (const val of ticketList.value) {
204 const start = dayjs(formTime.value.scenicStart).valueOf() 194 if (val.count > 0) {
205 const end = dayjs(formTime.value.scenicEnd).valueOf() 195 price += val.price * val.count
206 if (curr >= start && curr <= end && curr >= today) { 196 priceEn += val.priceEn * val.count
207 return false 197 val.personArr = [...new Array(val.count).fill({
198 customerId: '',
199 name: '',
200 idcType: '',
201 idCard: ''
202 })]
208 } 203 }
209 } 204 }
210 return true 205 selectForm.value.price = price
211 }) 206 selectForm.value.priceEn = priceEn
212 207 }
213 208
214 function goOrder() { 209 async function toSelectSeat() {
215 if(btnDisable.value){ 210 if (!user.value) {
211 useStore.setVisitor()
216 return 212 return
217 } 213 }
218 ElMessageBox.confirm(language.value == 0 ? `你当前选择的出行日期为${dayjs(currentDate.value).format('YYYY-MM-DD')}是否确定？` : `Your current check-in time is ${dayjs(currentDate.value).format('YYYY-MM-DD')} Are you sure?`, { type: 'warning' }).then({}).then(() => { 214
219 checkOrderPay(6).then(res => { 215 if (!selectForm.value.scenicDate) {
220 if (res.data == -100) { 216 await proxy.$modal.confirm(language.value == 0 ? '请选择日期' : 'Please select a date')
221 ElMessageBox.confirm( 217 return
222 language.value == 0 ? '你有未支付的旅游预订，是否前往个人中心查看' : 'You already have an unpaid travel order, do you want to go to the personal center to check it?', 218 }
223 language.value == 0 ? '提示' : 'Warning', 219 if (!selectForm.value.price == '--' || selectForm.value.price == '--') {
224 { 220 await proxy.$modal.confirm(language.value == 0 ? '请选择购票数量' : 'Please select the number of tickets to purchase')
225 confirmButtonText: language.value == 1 ? 'Go My Reservation ' : '前往我的预订', 221 return
226 // cancelButtonText: language.value==1?'Continue to book':'继续预订', 222 }
227 type: 'warning' 223 await checkOrderPay()
228 } 224 }
229 ).then((res) => { 225
230 console.log(res) 226 async function checkOrderPay() {
231 router.push({ 227 const res = await booking.checkOrderPay(8)
232 name: 'myReservation' 228 if (res.data == -100) {
233 }) 229 await proxy.$modal.confirm(language.value == 0 ? '你有未支付的旅游预订，是否前往个人中心查看?' : 'You already have an unpaid travel order, do you want to go to the personal center to check it?')
234 }) 230 await router.push({
235 return 231 name: 'myReservation'
236 }
237 goNext()
238 }) 232 })
239 }) 233 } else {
234 goNext()
235 }
240 } 236 }
241 237
242 function goNext() { 238 function goNext() {
243 router.push({ 239 router.push({
244 name: 'travelOrder', 240 name: 'travelOrder',
245 params: { 241 params: {
246 start: dayjs(currentDate.value).format('YYYY-MM-DD') 242 start: selectForm.value.scenicDate
247 }, 243 },
248 query: { 244 query: {
249 lasId: query.value.lasId 245 lasId: selectForm.value.latsId,
246 item: encodeURIComponent(JSON.stringify(ticketList.value))
250 } 247 }
251 }) 248 })
252 } 249 }
253 250
254 function disabledDateRZ(date) { 251 function toSelectClosed() {
255 // 判读今天大与form.value.hqStart 252 ElMessageBox.confirm(language.value == 0 ? '售票结束' : 'Sale closed', language.value == 0 ? '提示' : 'Tips', {
256 if (formTime.value.scenicStart) { 253 confirmButtonText: language.value == 0 ? '确定' : 'OK',
257 const today = dayjs().format('YYYY-MM-DD') 254 cancelButtonText: language.value == 0 ? '取消' : 'Cancel',
258 if (formTime.value.scenicStart < today) { 255 type: 'warning'
259 return !((date.getTime() >= dayjs(today).valueOf()) && (date.getTime() <= dayjs(formTime.value.scenicEnd).valueOf())) 256 })
260 } else {
261 return !((date.getTime() >= dayjs(formTime.value.scenicStart).valueOf()) && (date.getTime() <= dayjs(formTime.value.scenicEnd).valueOf()))
262 }
263 }
264 } 257 }
265 258
266 </script>
267
268 <style scoped lang="scss">
269 .room {
270 background: #FAFBFD;
271 margin: 20px 0 0;
272 padding: 20px;
273 border: 1px solid #E5E5E5;
274
275 .name {
276 font-size: 20px;
277 margin: 0 0 10px;
278 }
279
280 .roomImg {
281 aspect-ratio: 16/9;
282 border-radius: 10px;
283 overflow: hidden;
284 259
285 img { 260 </script>
286 width: 100%;
287 object-fit: cover;
288 object-position: center;
289 height: 100%;
290 }
291 }
292
293 .price {
294 color: #FF8124;
295 font-size: 24px;
296 261
297 span { 262 <style lang="scss" scoped>
298 font-size: 36px; 263 .forWei {
299 font-family: "DIN Alternate" 264 display: none
300 } 265 }
301 }
302 266
303 .bg-lineg { 267 .buBg {
304 margin: auto; 268 cursor: pointer;
305 border-radius: 10px; 269 font-size: 18px;
306 text-align: center; 270 padding: 8px 13px;
307 padding: 7px 2px 2px; 271 border-radius: 5px;
308 font-size: 24px; 272 margin-right: 10px;
309 width: 66px;
310 cursor: pointer;
311
312 div {
313 background: #fff;
314 font-size: 13px;
315 border-radius: 20px;
316 padding: 0 10px;
317 color: #453DEA;
318 font-weight: 500;
319 }
320 }
321 } 273 }
322 274
323 .hotel { 275 .bg {
324 h3 { 276 background: linear-gradient(270deg, #493ceb 0%, #8623fc 100%);
325 margin: 0 0 20px; 277 color: #fff;
326 } 278 }
327 279
328 img.w100 { 280 .container {
329 object-fit: cover; 281 width: 1200px;
330 aspect-ratio: 16/9 282 margin: 0 auto;
331 } 283 background-color: #fff;
284 box-shadow: 0 0 46px 0 rgba(1, 16, 64, 0.08);
285 border-radius: 8px;
286 box-sizing: border-box;
287 font-family: SourceHanSansCN, SourceHanSansCN;
288 padding-bottom: 20px;
289 }
332 290
333 .addr { 291 .top {
334 font-size: 16px; 292 display: flex;
335 color: #929AA0; 293 padding: 19px;
336 font-weight: 400; 294 margin-top: 26px;
295
296 .cover_img {
297 width: 500px;
298 object-fit: fill;
299 margin-right: 36px;
337 } 300 }
338 301
339 .price { 302 .info {
340 margin: 0 0 25px; 303 padding-top: 12px;
341 color: #FF8124; 304 width: 100%;
342 font-size: 18px; 305
343 306 .title {
344 span { 307 font-weight: bold;
345 font-size: 24px; 308 font-size: 28px;
346 margin: 0 8px; 309 color: #000000;
347 font-family: 'DINAlternate-Bold'; 310 line-height: 1.6;
311 margin-bottom: 15px;
312 }
313
314 .time {
348 font-weight: 600; 315 font-weight: 600;
316 font-size: 16px;
317 color: #000;
318 line-height: 24px;
319 margin-bottom: 16px;
349 } 320 }
350 321
351 i { 322 .address {
352 font-style: normal; 323 font-weight: 600;
353 color: #929AA0; 324 font-size: 16px;
325 color: #000;
326 line-height: 24px;
327 margin-bottom: 15px;
354 } 328 }
355 } 329
356 } 330 .select_item_box {
357 331 display: flex;
358 :deep(.button) { 332 margin-bottom: 10px;
359 display: block; 333
360 height: 55px; 334 &:last-child {
361 width: auto; 335 margin-bottom: 0;
362 color: #fff; 336 }
363 337
364 span { 338 .label {
365 display: block !important; 339 font-weight: 600;
366 340 font-size: 16px;
367 div { 341 color: #000;
368 margin-top: 3px; 342 line-height: 24px;
343 margin-right: 12px;
344 flex-shrink: 0;
345 }
346
347 .ticket {
348 height: 40px;
349 line-height: 40px;
350 width: 100px;
351 }
352
353 .rowBox {
354 display: flex;
355
356 .titleTick {
357 color: #493ceb;
358 cursor: pointer;
359 font-weight: 600;
360 font-size: 18px;
361 margin-right: 30px;
362 height: 40px;
363 line-height: 40px;
364 width: 180px;
365 //text-align: center;
366 }
367
368 .inputNumber {
369 height: 35px;
370 margin: 2.5px;
371 }
372
373 .residue {
374 height: 40px;
375 line-height: 40px;
376 font-size: 14px;
377 color: orange;
378 margin-left: 10px;
379 }
380
381 }
382
383 .forbid {
384 opacity: 0.5 !important;
385 cursor: not-allowed !important;
386 }
387
388 .select_item {
389 display: flex;
390 flex-wrap: wrap;
391 gap: 10px;
392 user-select: none;
393
394 .tag_t {
395 padding: 1px 15px;
396 font-weight: 400;
397 font-size: 14px;
398 color: #493ceb;
399 border-radius: 6px;
400 border: 1px solid #453dea;
401 margin-left: 5px;
402 }
403
404 .tag {
405 display: flex;
406 padding: 12px 18px;
407 background: #eeeeee;
408 border-radius: 4px;
409 border: 1px solid #29343c;
410 font-size: 14px;
411 color: #4a4a4a;
412 cursor: pointer;
413 }
414
415 .tagActive {
416 display: flex;
417 padding: 12px 18px;
418 background: #fff;
419 border-radius: 4px;
420 border: 1px solid #493ceb;
421 font-size: 14px;
422 color: #493ceb;
423 cursor: pointer;
424 }
425
426 .tao {
427 border: 1px solid #493ceb;
428 font-size: 14px;
429 color: #493ceb;
430 margin-left: 10px;
431 }
432
433 .tagDisabled {
434 padding: 12px 18px;
435 background: #878787;
436 border-radius: 4px;
437 border: 1px solid #29343c;
438 font-size: 14px;
439 color: #4a4a4a;
440 cursor: no-drop;
441 }
442 }
443 }
444
445 .btn {
446 width: 175px;
447 height: 40px;
448 background: linear-gradient(270deg, #493ceb 0%, #8623fc 100%);
449 border-radius: 20px;
450 line-height: 40px;
451 text-align: center;
452 font-weight: 500;
453 font-size: 16px;
454 color: #ffffff;
455 cursor: pointer;
369 } 456 }
370 }
371
372 }
373
374 .starBox {
375 img {
376 display: inline-block;
377 margin-right: 4px
378 } 457 }
379 } 458 }
380 459
381 .tagbox { 460 .bottom {
382 margin: 15px 0; 461 padding: 50px;
383 462 margin-top: 30px;
384 a { 463 margin-bottom: 30px;
385 color: #AFB5B9; 464
386 font-size: 12px; 465 .title {
466 padding: 20px 30px;
467 background: linear-gradient(270deg, #493ceb 0%, #8623fc 100%);
468 font-weight: bold;
469 font-size: 20px;
470 color: #ffffff;
471 line-height: 30px;
472 margin-bottom: 30px;
387 } 473 }
388 474
389 span { 475 .rich_content {
390 border-radius: 13px; 476 margin-top: 30px;
391 font-size: 12px; 477
392 padding: 4px 10px; 478 :deep(img) {
393 margin-right: 10px; 479 width: 100% !important;
394 font-weight: 400; 480 height: auto !important;
481 }
482
395 } 483 }
484 }
396 485
397 span:nth-child(4n) { 486 @media screen and (max-width: 768px) {
398 background: rgba(50, 177, 108, 0.2); 487 .container {
399 color: rgba(50, 177, 108, 1); 488 width: 100%;
400 } 489 }
401 490 .forWei {
402 span:nth-child(4n+1) { 491 display: block
403 background: rgba(243, 152, 0, 0.2);
404 color: rgba(243, 152, 0, 1);
405 } 492 }
406 493 .top {
407 span:nth-child(4n+2) { 494 //transform: scale(0.5);transform-origin: left top;
408 background: rgba(0, 160, 233, 0.2); 495 .cover_img {
409 color: rgba(0, 160, 233, 1); 496 width: 120px;
497 height: 160px;
498 margin-right: 15px;
499 }
500
501 .info {
502 padding: 0;
503
504 .title {
505 font-size: 14px;
506 margin: 0;
507 }
508
509 .time, .address, .label, .tip {
510 font-size: 12px;
511 }
512
513 .title, .time, .address, .tip, .select_item_box {
514 margin-bottom: 3px;
515 }
516
517 .select_item_box {
518 .label {
519 font-size: 12px;
520 }
521
522 .select_item .tag {
523 padding: 2px 10px;
524 font-size: 12px;
525 }
526
527 .select_item .tagActive {
528 padding: 2px 10px;
529 font-size: 12px;
530 }
531
532 .select_item .tagDisabled {
533 padding: 2px 10px;
534 font-size: 12px;
535 }
536 }
537
538 .btn {
539 display: inline-block;
540 margin: 10px 0 0;
541 background: linear-gradient(270deg, #493ceb 0%, #8623fc 100%);
542 border-radius: 20px;
543 line-height: 40px;
544 text-align: center;
545 font-weight: 500;
546 font-size: 16px;
547 color: #ffffff;
548 cursor: pointer;
549 }
550 }
410 } 551 }
411 552 .bottom {
412 span:nth-child(4n+3) { 553 padding: 0
413 background: rgba(247, 64, 166, 0.2);
414 color: rgba(247, 64, 166, 1);
415 } 554 }
555
556
416 } 557 }
417 558
418 .mapBox { 559 .countDownTitle {
560 text-align: center;
561 color: #000;
419 position: relative; 562 position: relative;
420 overflow: hidden; 563 width: 100%;
421 height: 200px; 564 left: 0;
422 565 font-size: 28px;
423 #map {
424 position: relative;
425 left: -70px;
426 width: calc(100% + 160px);
427 }
428 }
429
430 .hotelImg {
431 border-radius: 10px;
432 overflow: hidden;
433 aspect-ratio: 16/9;
434
435 img {
436 object-fit: cover;
437 object-position: center;
438 width: 100%;
439 height: 100%;
440 }
441 } 566 }
442 567
443 .info { 568 .countDownTitle span {
444 font-weight: 400; 569 background: #fff;
445 font-size: 14px; 570 padding: 0 10px;
446 color: #929AA0; 571 position: relative;
447 572 z-index: 1;
448 .el-icon {
449 margin-right: 5px;
450 }
451 } 573 }
452 574
453 .oddmb:nth-child(2) { 575 .countDownTitle::after {
454 margin-bottom: 20px; 576 position: absolute;
577 background: #ccc;
578 height: 1px;
579 content: '';
580 top: 0;
581 bottom: 0;
582 margin: auto;
583 width: 100%;
584 left: 0;
455 } 585 }
456 586
457 .forbid { 587 .van-count-down {
458 cursor: not-allowed !important; 588 text-align: center;
459 filter:grayscale(0.4);opacity: 0.7; 589 margin: 20px 0;
590 display: flex;
591 justify-content: center;
460 } 592 }
461 593
462 .forbid:hover { 594 .colon {
463 box-shadow: none; 595 display: inline-block;
596 font-size: 20px;
597 height: 110px;
598 line-height: 110px;
599 margin: 0 8px;
600 color: #7B7F83;
464 } 601 }
465 602
466 .lineHead{display: flex;justify-content: space-between;} 603 .block {
467 .el-calendar { 604 display: inline-block;
468 --el-calendar-border: none; 605 opacity: 0.7;
469 --el-calendar-cell-width: 40px; 606 width: 100px;
607 height: 110px;
608 line-height: 110px;
609 color: #fff;
610 font-size: 35px;
611 font-weight: bold;
612 border-radius: 10px;
613 background: url(@/assets/img/djs_bg.png) left;
614 background-size: 100% 100%;
470 text-align: center; 615 text-align: center;
471 --el-text-color-regular: #8E8D94;
472
473 :deep(.el-calendar__header) {
474 justify-content: center;
475 padding: 0 0 10px
476 }
477
478 :deep(.el-calendar__body) {
479 border: 1px solid #F0F0F0;
480 padding: 0
481 }
482
483 :deep(.el-calendar-table .el-calendar-day) {
484 padding: 1px;
485 }
486
487 :deep(.el-calendar-table td.is-selected) {
488 background: transparent;
489 }
490
491 :deep(.el-calendar__button-group) {
492 display: none;
493 }
494
495 :deep(.el-calendar-table thead th) {
496 padding: 5px 0 0
497 }
498
499 .primaryDate {
500 color: #fff;
501 background: linear-gradient(90deg, #8623FC, #453DEA);
502 }
503
504 .date {
505 margin: auto;
506 border-radius: 50%;
507 width: 30px;
508 height: 30px;
509 line-height: 30px;
510 font-weight: bold;
511 }
512 } 616 }
513 617
618
514 </style> 619 </style>
......
src/viewsPc/booking/travelDetailOld.vue 0 → 100644
1 <template>
2 <div>
3 <div class="box">
4 <el-card v-loading="loading" class="mt30">
5 <el-row v-if="form" :gutter="20" align="middle" class="hotel">
6 <!-- <el-col :span="6">-->
7 <!-- <img class="w100" :src="fillImgUrl(form.photos?.split(',')[0])"/>-->
8 <!-- </el-col>-->
9 <el-col :span="language == 0?16:24">
10 <h3 class="esp flex">{{ form?.name }}
11
12 <div class="starBox ml20">
13 <img v-for="i in Number(form?.rank||0)" src="@/assets/booking/star.png">
14 </div>
15 </h3>
16
17 <!-- <div class="tagbox">-->
18 <!-- <span v-for="(t,index) in form?.label?.split('，')" v-show="index<4">{{ t }}</span>-->
19 <!-- <a v-show="form?.label?.split('，').length>4">{{ language == 0 ? '更多' : 'MORE' }} ></a>-->
20 <!-- </div>-->
21 <div class="info">
22 <el-icon>
23 <Clock />
24 </el-icon>
25 <span class="mr10">{{ language == 0 ? '开园时间' : 'Opening Time' }}：{{
26 form?.startTime
27 }} ～ {{ form?.workTime }}</span>
28 </div>
29 <div class="info">
30 <el-icon>
31 <Phone />
32 </el-icon>
33 <span class="mr10">{{ language == 0 ? '联系方式' : 'Contact' }}：{{ form?.contact }}</span>
34 </div>
35 <div class="info esp">
36 <el-icon>
37 <MapLocation />
38 </el-icon>
39 <span>{{ form?.address }}</span>
40 </div>
41 <div v-if="form?.introduction" class="info pointer">
42 <div :class="showAll?'':'esp_2'" @click="showAll=!showAll" v-html="form.introduction.toString()" />
43 </div>
44 </el-col>
45 </el-row>
46 <el-empty v-else :image="`/img/order_no.png`" :image-size="228" description="" />
47 </el-card>
48
49 <div class="mt30">
50 <el-row :gutter="20">
51 <el-col :span="10">
52 <div class="imgbox hotelImg">
53 <el-image
54 :preview-src-list="form?.photos?.split(',')" :src="fillImgUrl(form?.photos?.split(',')[0])"
55 fit="cover"
56 />
57 </div>
58 </el-col>
59 <el-col :span="14">
60 <el-row :gutter="20" class="h100">
61 <el-col v-for="(p,index) in form?.photos?.split(',').slice(1,7)" :key="index" :span="8" class="oddmb">
62 <div class="imgbox hotelImg">
63 <el-image :src="fillImgUrl(p)" fit="cover" />
64 </div>
65 </el-col>
66 </el-row>
67 </el-col>
68 </el-row>
69 </div>
70
71 <el-card class="mt30 mb60">
72 <div class="lineHead">
73 <ul>
74 <li>
75 {{ language == 0 ? '选择日期' : 'tickets type' }}
76 </li>
77 </ul>
78 </div>
79 <div>
80 <!-- 日期-->
81 <el-calendar v-model="currentDate" :range="calendarRange" class="mt20">
82 <template #header="{date}">
83 <el-row style="width: 100%">
84 <el-col :lg="7" class="forPc" />
85 <el-col :lg="10" class="forPc">
86 <el-row align="middle" justify="center">
87 <!-- <div class="canBtn"><el-icon><ArrowLeftBold /></el-icon></div>-->
88 <div class="cTitle">
89 <!-- <el-date-picker-->
90 <!-- v-model="value2"-->
91 <!-- type="daterange"-->
92 <!-- range-separator="-"-->
93 <!-- start-placeholder="Start date"-->
94 <!-- end-placeholder="End date"-->
95 <!-- format="YYYY-MM-DD"-->
96 <!-- value-format="YYYY-MM-DD"-->
97 <!-- size="small"-->
98 <!-- @change="changee"-->
99 <!-- />-->
100 <!-- <el-input readonly :value="date" type="text" size="small" style="width: 280px"></el-input>-->
101 {{ date }}
102 </div>
103 <!-- <div class="canBtn"><el-icon><ArrowRightBold /></el-icon></div>-->
104 </el-row>
105 </el-col>
106 <el-col :lg="7" :xs="24">
107 <div style="text-align: right;padding-right: 10px">
108 <el-date-picker
109 v-model="currentDate1"
110 :clearable="false"
111 :disabled-date="disabledDateRZ"
112 format="YYYY-MM-DD"
113 placeholder="YYYY-MM-DD"
114 type="date"
115 @change="dateChange"
116 />
117 </div>
118 </el-col>
119 </el-row>
120 </template>
121 <template #date-cell="data">
122 <div
123 :class="data.data.day==query.currentDate?'primaryDate date':'date'"
124 @click="selectDate(data.data.day)"
125 >
126 {{ data.data.day.slice(8, 10) }}
127 </div>
128 </template>
129 </el-calendar>
130 </div>
131
132 <div class="text-center mt30">
133 <el-button
134 :class="{'forbid':!(!hotTime[0])}" class="w200px btn-lineG"
135 round size="large" style="color: #fff" @click="goOrder"
136 >
137 <span v-if="btnDisable">{{ language == 0 ? '不在预定时间内' : 'OUT OF ORDER TIME' }}</span>
138 <span v-else>{{ language == 0 ? '立即预订' : 'BOOK NOW' }}</span>
139 </el-button>
140 </div>
141 </el-card>
142 </div>
143 </div>
144 </template>
145
146 <script setup>
147 import { useRouter } from 'vue-router'
148 import { ref, onMounted, computed } from 'vue'
149 import { useRoute } from 'vue-router'
150 import { dayjs } from 'element-plus'
151 import { getScenicById, checkOrderPay } from '@/apiPc/booking'
152 import { getBaseInfoByActiveId } from '@/apiPc/booking'
153
154 import { useStorage } from '@vueuse/core/index'
155 import { ElMessageBox } from 'element-plus'
156
157 const currentDate = ref(new Date())
158 const currentDate1 = ref(new Date())
159 const calendarRange = ref([dayjs(currentDate.value).toDate(), (dayjs(currentDate.value).toDate())])
160
161 const language = useStorage('language', 0)
162 const router = useRouter()
163 const route = useRoute()
164 const form = ref({})
165 const query = ref({
166 lasId: route.query.lasId
167 })
168 const hotTime = ref([])
169 const showAll = ref(false)
170 const loading = ref(false)
171 const formTime = ref({})
172
173 onMounted(() => {
174 getBaseInfoByActiveId(route.params.cptId).then(res => {
175 formTime.value = res.data || null
176 }).catch(err => {
177 console.log(err)
178 formTime.value = null
179 }).finally(() => {
180 console.log(formTime.value)
181 getData()
182 })
183 })
184
185 function getData() {
186 loading.value = true
187 getScenicById(route.params.scenicId).then(res => {
188 loading.value = false
189 form.value = res.data
190 // initMap()
191 }).catch(err => {
192 console.log(err)
193 })
194 }
195
196 function dateChange() {
197 currentDate.value = currentDate1.value
198 calendarRange.value = [dayjs(currentDate.value).toDate(), (dayjs(currentDate.value).toDate())]
199 }
200
201 function selectDate(date) {
202 query.value.currentDate = date
203 currentDate1.value = currentDate.value = dayjs(date).toDate()
204 console.log(date)
205 }
206
207 const btnDisable = computed(() => {
208 if (formTime.value.scenicStart) {
209 const curr = currentDate.value.valueOf()
210 const today = dayjs(dayjs().format('YYYY-MM-DD')).valueOf()
211 const start = dayjs(formTime.value.scenicStart).valueOf()
212 const end = dayjs(formTime.value.scenicEnd).valueOf()
213 if (curr >= start && curr <= end && curr >= today) {
214 return false
215 }
216 }
217 return true
218 })
219
220
221 function goOrder() {
222 if (btnDisable.value) {
223 return
224 }
225 ElMessageBox.confirm(language.value == 0 ? `你当前选择的出行日期为${dayjs(currentDate.value).format('YYYY-MM-DD')}是否确定？` : `Your current check-in time is ${dayjs(currentDate.value).format('YYYY-MM-DD')} Are you sure?`, { type: 'warning' }).then({}).then(() => {
226 checkOrderPay(6).then(res => {
227 if (res.data == -100) {
228 ElMessageBox.confirm(
229 language.value == 0 ? '你有未支付的旅游预订，是否前往个人中心查看' : 'You already have an unpaid travel order, do you want to go to the personal center to check it?',
230 language.value == 0 ? '提示' : 'Warning',
231 {
232 confirmButtonText: language.value == 1 ? 'Go My Reservation ' : '前往我的预订',
233 // cancelButtonText: language.value==1?'Continue to book':'继续预订',
234 type: 'warning'
235 }
236 ).then((res) => {
237 console.log(res)
238 router.push({
239 name: 'myReservation'
240 })
241 })
242 return
243 }
244 goNext()
245 })
246 })
247 }
248
249 function goNext() {
250 router.push({
251 name: 'travelOrder',
252 params: {
253 start: dayjs(currentDate.value).format('YYYY-MM-DD')
254 },
255 query: {
256 lasId: query.value.lasId
257 }
258 })
259 }
260
261 function disabledDateRZ(date) {
262 // 判读今天大与form.value.hqStart
263 if (formTime.value.scenicStart) {
264 const today = dayjs().format('YYYY-MM-DD')
265 if (formTime.value.scenicStart < today) {
266 return !((date.getTime() >= dayjs(today).valueOf()) && (date.getTime() <= dayjs(formTime.value.scenicEnd).valueOf()))
267 } else {
268 return !((date.getTime() >= dayjs(formTime.value.scenicStart).valueOf()) && (date.getTime() <= dayjs(formTime.value.scenicEnd).valueOf()))
269 }
270 }
271 }
272
273 </script>
274
275 <style lang="scss" scoped>
276 .room {
277 background: #FAFBFD;
278 margin: 20px 0 0;
279 padding: 20px;
280 border: 1px solid #E5E5E5;
281
282 .name {
283 font-size: 20px;
284 margin: 0 0 10px;
285 }
286
287 .roomImg {
288 aspect-ratio: 16/9;
289 border-radius: 10px;
290 overflow: hidden;
291
292 img {
293 width: 100%;
294 object-fit: cover;
295 object-position: center;
296 height: 100%;
297 }
298 }
299
300 .price {
301 color: #FF8124;
302 font-size: 24px;
303
304 span {
305 font-size: 36px;
306 font-family: "DIN Alternate"
307 }
308 }
309
310 .bg-lineg {
311 margin: auto;
312 border-radius: 10px;
313 text-align: center;
314 padding: 7px 2px 2px;
315 font-size: 24px;
316 width: 66px;
317 cursor: pointer;
318
319 div {
320 background: #fff;
321 font-size: 13px;
322 border-radius: 20px;
323 padding: 0 10px;
324 color: #453DEA;
325 font-weight: 500;
326 }
327 }
328 }
329
330 .hotel {
331 h3 {
332 margin: 0 0 20px;
333 }
334
335 img.w100 {
336 object-fit: cover;
337 aspect-ratio: 16/9
338 }
339
340 .addr {
341 font-size: 16px;
342 color: #929AA0;
343 font-weight: 400;
344 }
345
346 .price {
347 margin: 0 0 25px;
348 color: #FF8124;
349 font-size: 18px;
350
351 span {
352 font-size: 24px;
353 margin: 0 8px;
354 font-family: 'DINAlternate-Bold';
355 font-weight: 600;
356 }
357
358 i {
359 font-style: normal;
360 color: #929AA0;
361 }
362 }
363 }
364
365 :deep(.button) {
366 display: block;
367 height: 55px;
368 width: auto;
369 color: #fff;
370
371 span {
372 display: block !important;
373
374 div {
375 margin-top: 3px;
376 }
377 }
378
379 }
380
381 .starBox {
382 img {
383 display: inline-block;
384 margin-right: 4px
385 }
386 }
387
388 .tagbox {
389 margin: 15px 0;
390
391 a {
392 color: #AFB5B9;
393 font-size: 12px;
394 }
395
396 span {
397 border-radius: 13px;
398 font-size: 12px;
399 padding: 4px 10px;
400 margin-right: 10px;
401 font-weight: 400;
402 }
403
404 span:nth-child(4n) {
405 background: rgba(50, 177, 108, 0.2);
406 color: rgba(50, 177, 108, 1);
407 }
408
409 span:nth-child(4n+1) {
410 background: rgba(243, 152, 0, 0.2);
411 color: rgba(243, 152, 0, 1);
412 }
413
414 span:nth-child(4n+2) {
415 background: rgba(0, 160, 233, 0.2);
416 color: rgba(0, 160, 233, 1);
417 }
418
419 span:nth-child(4n+3) {
420 background: rgba(247, 64, 166, 0.2);
421 color: rgba(247, 64, 166, 1);
422 }
423 }
424
425 .mapBox {
426 position: relative;
427 overflow: hidden;
428 height: 200px;
429
430 #map {
431 position: relative;
432 left: -70px;
433 width: calc(100% + 160px);
434 }
435 }
436
437 .hotelImg {
438 border-radius: 10px;
439 overflow: hidden;
440 aspect-ratio: 16/9;
441
442 img {
443 object-fit: cover;
444 object-position: center;
445 width: 100%;
446 height: 100%;
447 }
448 }
449
450 .info {
451 font-weight: 400;
452 font-size: 14px;
453 color: #929AA0;
454
455 .el-icon {
456 margin-right: 5px;
457 }
458 }
459
460 .oddmb:nth-child(2) {
461 margin-bottom: 20px;
462 }
463
464 .forbid {
465 cursor: not-allowed !important;
466 filter: grayscale(0.4);
467 opacity: 0.7;
468 }
469
470 .forbid:hover {
471 box-shadow: none;
472 }
473
474 .lineHead {
475 display: flex;
476 justify-content: space-between;
477 }
478
479 .el-calendar {
480 --el-calendar-border: none;
481 --el-calendar-cell-width: 40px;
482 text-align: center;
483 --el-text-color-regular: #8E8D94;
484
485 :deep(.el-calendar__header) {
486 justify-content: center;
487 padding: 0 0 10px
488 }
489
490 :deep(.el-calendar__body) {
491 border: 1px solid #F0F0F0;
492 padding: 0
493 }
494
495 :deep(.el-calendar-table .el-calendar-day) {
496 padding: 1px;
497 }
498
499 :deep(.el-calendar-table td.is-selected) {
500 background: transparent;
501 }
502
503 :deep(.el-calendar__button-group) {
504 display: none;
505 }
506
507 :deep(.el-calendar-table thead th) {
508 padding: 5px 0 0
509 }
510
511 .primaryDate {
512 color: #fff;
513 background: linear-gradient(90deg, #8623FC, #453DEA);
514 }
515
516 .date {
517 margin: auto;
518 border-radius: 50%;
519 width: 30px;
520 height: 30px;
521 line-height: 30px;
522 font-weight: bold;
523 }
524 }
525
526 </style>
src/viewsPc/booking/travelOrder.vue
...@@ -3,26 +3,27 @@ ...@@ -3,26 +3,27 @@
3 <div class="box"> 3 <div class="box">
4 <el-card :body-style="{ padding: '0px' }" class="mt20"> 4 <el-card :body-style="{ padding: '0px' }" class="mt20">
5 <div slot="header"> 5 <div slot="header">
6 <div class="bg-lineg">{{ language == 0 ? '旅游服务下单' : 'Hotel booking order' }}</div> 6 <div class="bg-lineg father">{{ language == 0 ? '旅游服务下单' : 'Hotel booking order' }}
7 <sapn class="son" @click="handleGo">{{ language == 0 ? '上一步' : 'Back go' }}</sapn>
8 </div>
7 </div> 9 </div>
8 <!-- {{room}}--> 10 <!-- {{room}}-->
9 <el-row class="pd20" :gutter="20"> 11 <el-row :gutter="20" class="pd20">
10 <el-col :span="14"> 12 <el-col :span="14">
11 <div class="border-info"> 13 <div class="border-info">
12 <el-row class="hotel" align="middle" :gutter="20"> 14 <el-row :gutter="20" align="middle" class="hote ">
13 <!-- <el-col :span="6">-->
14 <!-- <img class="w100" :src="fillImgUrl(form.photos?.split(',')[0])"/>-->
15 <!-- </el-col>-->
16 <el-col :span="language == 0?16:24"> 15 <el-col :span="language == 0?16:24">
17 <h3 class="esp flex">{{ scenicItem?.name }} 16 <h3 class="esp flex">{{ scenicItem?.name }}
18 17
19 <el-tag effect="dark" class="ml20">{{ scenicItem?.rank||0 }}A</el-tag> 18 <el-tag class="ml20" effect="dark">{{ scenicItem?.rank || 0 }}A</el-tag>
20 </h3> 19 </h3>
21 <div class="info"> 20 <div class="info">
22 <el-icon> 21 <el-icon>
23 <Clock /> 22 <Clock />
24 </el-icon> 23 </el-icon>
25 <span class="mr10">{{ language == 0 ? '开园时间' : 'Opening Time' }}：{{ scenicItem?.startTime }} ～ {{ scenicItem?.workTime }}</span> 24 <span class="mr10">{{ language == 0 ? '开园时间' : 'Opening Time' }}：{{ scenicItem?.startTime }} ～ {{
25 scenicItem?.workTime
26 }}</span>
26 </div> 27 </div>
27 <div class="info"> 28 <div class="info">
28 <el-icon> 29 <el-icon>
...@@ -39,115 +40,135 @@ ...@@ -39,115 +40,135 @@
39 </el-col> 40 </el-col>
40 </el-row> 41 </el-row>
41 </div> 42 </div>
42 43
43 <div class="leftboderTT">{{ language == 0 ? '预约信息' : 'Reservation information' }}</div> 44 <div class="leftboderTT">{{ language == 0 ? '预约信息' : 'Reservation information' }}</div>
44 <div class="border-rr mt20 pd20"> 45 <div class="border-rr mt20 pd20">
45 <el-form ref="formRef" v-loading="loading" :model="form" :label-width="language == 0 ?'120':'160'" :rules="rules"> 46 <el-form
46 <!-- :disabled-date="disabledDateRZ"--> 47 ref="formRef" v-loading="loading" :label-width="language == 0 ?'120':'160'" :model="form"
47 <el-form-item :label="language==0?'选择日期':'Date'" required> 48 :rules="rules"
48 <el-date-picker 49 >
49 v-model="rzRange" 50 <!-- &lt;!&ndash; :disabled-date="disabledDateRZ"&ndash;&gt;-->
50 format="YYYY-MM-DD" 51 <!-- <el-form-item :label="language==0?'选择日期':'Date'" required>-->
51 value-format="YYYY-MM-DD" 52 <!-- <el-date-picker-->
52 :disabled-date="disabledDateRZ" 53 <!-- v-model="rzRange"-->
53 :clearable="false" 54 <!-- :clearable="false"-->
54 @change="dateChange" 55 <!-- :disabled-date="disabledDateRZ"-->
55 /> 56 <!-- format="YYYY-MM-DD"-->
56 57 <!-- value-format="YYYY-MM-DD"-->
57 <div v-if="lform.scenicStart" class="tip">{{ language==0?'可订日期':'Available date' }}：{{ lform.scenicStart.slice(0, 10) }} ~ {{ lform.scenicEnd.slice(0, 10) }}</div> 58 <!-- @change="dateChange"-->
58 59 <!-- />-->
59 <!-- :picker-options="pickerOptions"--> 60 <!-- -->
60 </el-form-item> 61 <!-- <div v-if="lform.scenicStart" class="tip">{{-->
61 <el-form-item v-for="(n,i) in gateList" :key="i" :label="language==0? n.name:n.name" prop="count"> 62 <!-- language == 0 ? '可订日期' : 'Available date'-->
62 <el-input-number v-model="n.count" :min="0" :max="n.leftNum" @change="changeNum(n)" /> 63 <!-- }}：{{ lform.scenicStart.slice(0, 10) }} ~ {{ lform.scenicEnd.slice(0, 10) }}-->
63 <el-popover placement="top-start"> 64 <!-- </div>-->
64 <template #reference> 65 <!-- -->
65 <el-icon class="ml20"><Warning /></el-icon> 66 <!-- &lt;!&ndash; :picker-options="pickerOptions"&ndash;&gt;-->
66 </template> 67 <!-- </el-form-item>-->
67 <div v-html="n.details"></div> 68 <!-- <el-form-item v-for="(n,i) in gateList" :key="i" :label="language==0? n.name:n.name" prop="count">-->
68 </el-popover> 69 <!-- <el-input-number v-model="n.count" :max="n.leftNum" :min="0" @change="changeNum(n)" />-->
69 <div class="red ml20"> 70 <!-- <el-popover placement="top-start">-->
70 <span v-if="language == 0">单价: ¥{{ n.price }}</span> 71 <!-- <template #reference>-->
71 <span v-else>€ {{ n.priceEn }} / Ticket</span> 72 <!-- <el-icon class="ml20">-->
72 </div> 73 <!-- <Warning />-->
73 <div class="red ml20"> 74 <!-- </el-icon>-->
74 <span v-if="language == 0">剩余票数:{{ n.leftNum }}</span> 75 <!-- </template>-->
75 <span v-else>{{ n.leftNum }} sheet remaining </span> 76 <!-- <div v-html="n.details" />-->
76 </div> 77 <!-- </el-popover>-->
77 78 <!-- <div class="red ml20">-->
78 </el-form-item> 79 <!-- <span v-if="language == 0">单价: ¥{{ n.price }}</span>-->
79 80 <!-- <span v-else>€ {{ n.priceEn }} / Ticket</span>-->
81 <!-- </div>-->
82 <!-- <div class="red ml20">-->
83 <!-- <span v-if="language == 0">剩余票数:{{ n.leftNum }}</span>-->
84 <!-- <span v-else>{{ n.leftNum }} sheet remaining </span>-->
85 <!-- </div>-->
86 <!-- -->
87 <!-- </el-form-item>-->
88 <!-- -->
80 <div v-if="needPersonNum>0" class="fakeFormItem"> 89 <div v-if="needPersonNum>0" class="fakeFormItem">
81 <label v-if="language == 0">需填写{{ needPersonNum }}位游客</label> 90 <label v-if="language == 0">需填写{{ needPersonNum }}位游客</label>
82 <label v-else>Need {{ needPersonNum }} visitors</label> 91 <label v-else>Need {{ needPersonNum }} visitors</label>
83 <div> 92 <div>
84 <label class="text-warning" v-show="needPersonNum > hasPersonNum && language==0"> 93 <label v-show="needPersonNum > hasPersonNum && language==0" class="text-warning">
85 还需填写{{ needPersonNum-hasPersonNum }}位游客 94 还需填写{{ needPersonNum - hasPersonNum }}位游客
86 </label> 95 </label>
87 </div> 96 </div>
88 </div> 97 </div>
89 <div v-for="(n,i) in gateList" :key="i"> 98 <div v-for="(n,i) in gateList" :key="i">
90 <div v-for="(p,j) in n.personArr" :key="j" class="fakeFormItem personIt"> 99 <div v-for="(p,j) in n.personArr" :key="j" class="fakeFormItem personIt">
91 <label> 100 <label>
92 <el-icon @click="delPerson(n,j)"><Remove /></el-icon> 101 <!-- <el-icon @click="delPerson(n,j)">-->
93 {{ n.name }}{{ j+1 }} 102 <!-- <Remove />-->
103 <!-- </el-icon>-->
104 {{ n.name }}{{ j + 1 }}
94 </label> 105 </label>
95 <div v-if="p.name" class="mation"> 106 <div v-if="p.name" class="mation">
96 <div>{{ p.name }}</div> 107 <div>{{ p.name }}</div>
97 <span v-if="p.idcType==0">{{language==0?'身份证':'ID number'}}</span> 108 <span v-if="p.idcType==0">{{ language == 0 ? '身份证' : 'ID number' }}</span>
98 <span v-if="p.idcType==1">{{language==0?'护照':'Passport'}}</span> 109 <span v-if="p.idcType==1">{{ language == 0 ? '护照' : 'Passport' }}</span>
99 <span v-if="p.idcType==2">{{language==0?'其他':'Other'}}</span> 110 <span v-if="p.idcType==2">{{ language == 0 ? '其他' : 'Other' }}</span>
100 ：{{ p.idCard }} 111 ：{{ p.idCard }}
101 </div> 112 </div>
102 <el-icon @click="showAddPerson(n, j,p)" color="#453DEA"><Edit /></el-icon> 113 <el-icon color="#453DEA" @click="showAddPerson(n, j,p)">
114 <Edit />
115 </el-icon>
103 </div> 116 </div>
104 </div> 117 </div>
105 118
106 <el-form-item :label="language==0?'联系人':'Contact'" required prop="contacts"> 119 <el-form-item :label="language==0?'联系人':'Contact'" prop="contacts">
107 <el-input v-model="form.contacts" /> 120 <el-input v-model="form.contacts" />
108 </el-form-item> 121 </el-form-item>
109 <el-form-item :label="language==0?'联系手机':'Contact phone'" required prop="phone"> 122 <el-form-item :label="language==0?'联系手机':'Contact phone'" prop="phone" required>
110 <el-input v-model="form.phone" /> 123 <el-input v-model="form.phone" />
111 </el-form-item> 124 </el-form-item>
112 125
113 </el-form> 126 </el-form>
114 </div> 127 </div>
115 </el-col> 128 </el-col>
116 <el-col :span="10"> 129 <el-col :span="10">
117 <div class="leftboderTT">{{ language == 0 ? '订单明细' : 'Order details' }}</div> 130 <div class="leftboderTT">{{ language == 0 ? '订单明细' : 'Order details' }}</div>
118 <div class="border-rr mt20 pd20 ccitemBox"> 131 <div class="border-rr mt20 pd20 ccitemBox">
119 132
120 <div v-for="(c, index) in gateList" v-show="c.count>0" :key="index" class="ccitem"> 133 <div v-for="(c, index) in gateList" v-show="c.count>0" :key="index" class="ccitem">
121
122 {{ c.name }} 134 {{ c.name }}
123 <span v-if="language==0">{{ c.count }} * {{ '¥' }}{{ c.price }}</span> 135 <span v-if="language==0">
124 <span v-else>{{ c.count }} * {{ '€' }} {{ c.priceEn }}</span> 136 {{ c.count }} * {{ '¥' }}{{ c.price }}
137 </span>
138 <span v-else>{{ c.count }} * {{ '€' }} {{ c.priceEn }}
139 </span>
125 </div> 140 </div>
126 141
127 <label>{{ language == 0 ? '共计' : 'Total' }}<span 142 <label>{{ language == 0 ? '共计' : 'Total' }}
128 class="fr bigMoney" 143 <span class="fr bigMoney">
129 >{{ language == 0 ? '¥' : '€' }} {{ money }}</span></label> 144 {{ language == 0 ? '¥' : '€' }} {{ money }}
130 145 </span>
146 </label>
147
131 </div> 148 </div>
132 </el-col> 149 </el-col>
133 </el-row> 150 </el-row>
134 </el-card> 151 </el-card>
135 152
136 <el-card class="mt30"> 153 <el-card class="mt30">
137 <el-row justify="space-between" align="middle"> 154 <el-row align="middle" justify="space-between">
138 <el-col :span="12"> 155 <el-col :span="12">
139 <label>{{ language == 0 ? '共计金额' : 'Total' }}： 156 <label>{{ language == 0 ? '共计金额' : 'Total' }}：
140 <span class=" text-warning"> {{ language == 0 ? '¥' : '€' }}<span class="bigMoney">{{ money }}</span></span> 157 <span class=" text-warning"> {{ language == 0 ? '¥' : '€' }}<span class="bigMoney">{{
158 money
159 }}</span></span>
141 </label> 160 </label>
142 </el-col> 161 </el-col>
143 <el-col :span="12" class="text-right"> 162 <el-col :span="12" class="text-right">
144 <el-button type="primary" class="btn-lineG w200px" size="large" round @click="submit">{{ language == 0 ?'确认付款':'Book Now' }}</el-button> 163 <el-button class="btn-lineG w200px" round size="large" type="primary" @click="submit">
164 {{ language == 0 ? '确认付款' : 'Book Now' }}
165 </el-button>
145 </el-col> 166 </el-col>
146 </el-row> 167 </el-row>
147 </el-card> 168 </el-card>
148 <div style="height: 60px;" /> 169 <div style="height: 60px;" />
149 </div> 170 </div>
150 171
151 <choose-person ref="choosePersonRef" @add-person="addPerson" /> 172 <choose-person ref="choosePersonRef" @add-person="addPerson" />
152 </div> 173 </div>
153 </template> 174 </template>
...@@ -187,29 +208,53 @@ const rzRange = ref('') ...@@ -187,29 +208,53 @@ const rzRange = ref('')
187 const gateList = ref([]) 208 const gateList = ref([])
188 const money = ref(0) 209 const money = ref(0)
189 const choosePersonRef = ref([]) 210 const choosePersonRef = ref([])
211 const ticketList = ref([])
212
190 const rules = ref({ 213 const rules = ref({
191 phone: { required: true, message: language.value == 0 ? '请输入联系电话' : 'Please enter a contact number', trigger: 'blur' } 214 phone: {
215 required: true,
216 message: language.value == 0 ? '请输入联系电话' : 'Please enter a contact number',
217 trigger: 'blur'
218 },
219 contacts: {
220 required: true,
221 message: language.value == 0 ? '请输入联人' : 'Please enter a contact',
222 trigger: 'blur'
223 }
192 }) 224 })
193 225
226
194 onMounted(() => { 227 onMounted(() => {
195 money.value = 0 228 money.value = 0
196 rzRange.value = route.params.start 229 rzRange.value = route.params.start
197 230 gateList.value = ticketList.value = JSON.parse(decodeURIComponent(route.query.item))
231 console.log(gateList.value)
198 getScenic() 232 getScenic()
199 initDays() 233 countMoney()
200 getGate() 234 checkPersonNum()
235 // changeNum()
236 // initDays()
237 // getGate()
201 }) 238 })
239
202 function initDays() { 240 function initDays() {
203 // 可定日期范围 241 // 可定日期范围
204 getBaseInfoByActiveId(route.params.cptId).then(res => { 242 getBaseInfoByActiveId(route.params.cptId).then(res => {
205 lform.value = res.data 243 lform.value = res.data
206 }) 244 })
207 } 245 }
246
247 function getTotal() {
248 // get
249 }
250
251
208 function getScenic() { 252 function getScenic() {
209 getScenicById(route.params.scenicId).then(res => { 253 getScenicById(route.params.scenicId).then(res => {
210 scenicItem.value = res.data 254 scenicItem.value = res.data
211 }) 255 })
212 } 256 }
257
213 function getGate() { 258 function getGate() {
214 gateList.value = [] 259 gateList.value = []
215 loading.value = true 260 loading.value = true
...@@ -259,9 +304,14 @@ const checkPersonNum = () => { ...@@ -259,9 +304,14 @@ const checkPersonNum = () => {
259 }) 304 })
260 } 305 }
261 306
307 function getCountInfo() {
308 // get
309 }
310
311
262 function changeNum(e) { 312 function changeNum(e) {
263 checkPersonNum() 313 checkPersonNum()
264 314
265 if (e.personArr.length < e.count) { 315 if (e.personArr.length < e.count) {
266 e.personArr.push({ 316 e.personArr.push({
267 customerId: '', 317 customerId: '',
...@@ -272,7 +322,7 @@ function changeNum(e) { ...@@ -272,7 +322,7 @@ function changeNum(e) {
272 } else if (e.personArr.length > e.count) { 322 } else if (e.personArr.length > e.count) {
273 e.personArr.splice(e.count) 323 e.personArr.splice(e.count)
274 } 324 }
275 325
276 countMoney() 326 countMoney()
277 } 327 }
278 328
...@@ -285,8 +335,8 @@ const showAddPerson = (item, index, person) => { ...@@ -285,8 +335,8 @@ const showAddPerson = (item, index, person) => {
285 } 335 }
286 }) 336 })
287 }) 337 })
288 338
289 339
290 choosePersonRef.value.open({ 340 choosePersonRef.value.open({
291 gateId: item.id, 341 gateId: item.id,
292 gateType: item.gateType, 342 gateType: item.gateType,
...@@ -303,13 +353,13 @@ const addPerson = (item) => { ...@@ -303,13 +353,13 @@ const addPerson = (item) => {
303 idcType: item.idcType, 353 idcType: item.idcType,
304 idCard: item.idCard 354 idCard: item.idCard
305 } 355 }
306 356
307 checkPersonNum() 357 checkPersonNum()
308 } 358 }
309 const delPerson = (item, index) => { 359 const delPerson = (item, index) => {
310 item.personArr.splice(index, 1) 360 item.personArr.splice(index, 1)
311 item.count-- 361 item.count--
312 362
313 checkPersonNum() 363 checkPersonNum()
314 countMoney() 364 countMoney()
315 } 365 }
...@@ -329,6 +379,10 @@ function submit() { ...@@ -329,6 +379,10 @@ function submit() {
329 useUserStore().setReLogin() 379 useUserStore().setReLogin()
330 return 380 return
331 } 381 }
382 if (!form.value.contacts) {
383 ElMessage.warning(language.value == 0 ? '请填写联系人' : 'Please fill in the contact person.')
384 return
385 }
332 if (!form.value.phone) { 386 if (!form.value.phone) {
333 ElMessage.warning(language.value == 0 ? '请填写手机号' : 'Please fill in the phone number') 387 ElMessage.warning(language.value == 0 ? '请填写手机号' : 'Please fill in the phone number')
334 return 388 return
...@@ -337,7 +391,7 @@ function submit() { ...@@ -337,7 +391,7 @@ function submit() {
337 ElMessage.warning(language.value == 0 ? '出行人数与票数不匹配' : 'The number of people travelling does not match the number of rooms') 391 ElMessage.warning(language.value == 0 ? '出行人数与票数不匹配' : 'The number of people travelling does not match the number of rooms')
338 return 392 return
339 } 393 }
340 394
341 // 提交确认 395 // 提交确认
342 ElMessageBox.confirm(language.value == 0 ? '确认提交订单吗？' : 'Confirm to submit the order?', { 396 ElMessageBox.confirm(language.value == 0 ? '确认提交订单吗？' : 'Confirm to submit the order?', {
343 confirmButtonText: language.value == 0 ? '确定' : 'Confirm', 397 confirmButtonText: language.value == 0 ? '确定' : 'Confirm',
...@@ -348,7 +402,7 @@ function submit() { ...@@ -348,7 +402,7 @@ function submit() {
348 form.value.asId = route.query.lasId 402 form.value.asId = route.query.lasId
349 form.value.orderName = scenicItem.value.name 403 form.value.orderName = scenicItem.value.name
350 form.value.dcStart = rzRange.value 404 form.value.dcStart = rzRange.value
351 405
352 const personArr = [] 406 const personArr = []
353 _.each(gateList.value, (item) => { 407 _.each(gateList.value, (item) => {
354 if (item.count > 0) { 408 if (item.count > 0) {
...@@ -371,7 +425,7 @@ function submit() { ...@@ -371,7 +425,7 @@ function submit() {
371 } 425 }
372 }) 426 })
373 form.value.touristList = personArr 427 form.value.touristList = personArr
374 428
375 submitOrderScenic(form.value).then(res => { 429 submitOrderScenic(form.value).then(res => {
376 if (res.data) { 430 if (res.data) {
377 if (res.data.orderId == -400) { 431 if (res.data.orderId == -400) {
...@@ -394,9 +448,13 @@ function submit() { ...@@ -394,9 +448,13 @@ function submit() {
394 }) 448 })
395 } 449 }
396 450
451 function handleGo() {
452 router.go(-1)
453 }
454
397 </script> 455 </script>
398 456
399 <style scoped lang="scss"> 457 <style lang="scss" scoped>
400 .bigMoney { 458 .bigMoney {
401 font-size: 36px !important; 459 font-size: 36px !important;
402 font-family: 'DIN Alternate'; 460 font-family: 'DIN Alternate';
...@@ -429,12 +487,12 @@ function submit() { ...@@ -429,12 +487,12 @@ function submit() {
429 487
430 .ccitemBox { 488 .ccitemBox {
431 overflow: auto; 489 overflow: auto;
432 490
433 label { 491 label {
434 margin: 10px 0; 492 margin: 10px 0;
435 display: block; 493 display: block;
436 min-height: 30px; 494 min-height: 30px;
437 495
438 span { 496 span {
439 color: #FF8124; 497 color: #FF8124;
440 font-family: DIN Alternate; 498 font-family: DIN Alternate;
...@@ -449,12 +507,12 @@ function submit() { ...@@ -449,12 +507,12 @@ function submit() {
449 font-size: 15px; 507 font-size: 15px;
450 color: #666; 508 color: #666;
451 margin: 5px 0 10px; 509 margin: 5px 0 10px;
452 510
453 label { 511 label {
454 font-size: 16px; 512 font-size: 16px;
455 color: #000; 513 color: #000;
456 } 514 }
457 515
458 span { 516 span {
459 font-size: 13px; 517 font-size: 13px;
460 } 518 }
...@@ -463,20 +521,56 @@ function submit() { ...@@ -463,20 +521,56 @@ function submit() {
463 .red { 521 .red {
464 color: #FF8124; 522 color: #FF8124;
465 } 523 }
524
466 .fakeFormItem { 525 .fakeFormItem {
467 display: flex; 526 display: flex;
468 padding: 10px 0; 527 padding: 10px 0;
469 label{ height: 32px; font-size: var(--el-form-label-font-size); width: 120px; 528
470 color: var(--el-text-color-regular); padding: 0 12px 0 0; 529 label {
471 line-height: 32px;flex: 0 0 auto; 530 height: 32px;
531 font-size: var(--el-form-label-font-size);
532 width: 120px;
533 color: var(--el-text-color-regular);
534 padding: 0 12px 0 0;
535 line-height: 32px;
536 flex: 0 0 auto;
472 display: inline-flex; 537 display: inline-flex;
473 justify-content: flex-end; 538 justify-content: flex-end;
474 align-items: center;gap: 10px;white-space: nowrap;} 539 align-items: center;
540 gap: 10px;
541 white-space: nowrap;
542 }
543 }
544
545 .tip {
546 font-size: 14px;
547 color: #666;
548 padding: 0 10px;
475 } 549 }
476 .tip{font-size: 14px;color: #666;padding: 0 10px;} 550
477 .personIt{display: flex;align-items: center; 551 .personIt {
478 .mation{width: 200px;font-size: 12px; 552 display: flex;
479 div{font-size: 14px;} 553 align-items: center;
554
555 .mation {
556 width: 200px;
557 font-size: 12px;
558
559 div {
560 font-size: 14px;
561 }
480 } 562 }
481 } 563 }
564
565 .father {
566 position: relative;
567
568 }
569
570 .son {
571 position: absolute;
572 left: 10px;
573 cursor: pointer;
574 }
575
482 </style> 576 </style>
......
src/viewsPc/components/homeQuick.vue
...@@ -172,7 +172,7 @@ function goBooking(n) { ...@@ -172,7 +172,7 @@ function goBooking(n) {
172 router.push({ path: `/booking/photography/${props.matchId}` }) 172 router.push({ path: `/booking/photography/${props.matchId}` })
173 break 173 break
174 case 8: 174 case 8:
175 // 酒店 175 // 旅游
176 router.push({ path: `/booking/travel/${props.matchId}` }) 176 router.push({ path: `/booking/travel/${props.matchId}` })
177 break 177 break
178 } 178 }
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!