Skip to content

杨炀 / dance-pc

Go to a project
Toggle navigation
Toggle navigation pinning
73dc0e6e by zhangmeng
Options

化妆

1 parent 85059f20
Inline Side-by-side
Showing 6 changed files with 1115 additions and 295 deletions
src/apiPc/booking.js
...@@ -207,3 +207,27 @@ export function delAddress(ids) { ...@@ -207,3 +207,27 @@ export function delAddress(ids) {
207 method: 'delete' 207 method: 'delete'
208 }) 208 })
209 } 209 }
210
211 export function getMakeUpList(data) {
212 return request({
213 url: `/ota/activityStudio/getStudioList`,
214 method: 'get',
215 params:data
216 })
217 }
218
219 export function makeUpDetail(data) {
220 return request({
221 url: `/ota/activityStudio/getComStudioVoById`,
222 method: 'get',
223 params:data
224 })
225 }
226
227 export function getMealConfList(data) {
228 return request({
229 url: `/ota/mealConfig/getMealConfList`,
230 method: 'get',
231 params:data
232 })
233 }
......
src/routerPc/en.js
...@@ -410,6 +410,12 @@ export const constantRoutes = [ ...@@ -410,6 +410,12 @@ export const constantRoutes = [
410 meta: { title: 'Makeup Appointment' } 410 meta: { title: 'Makeup Appointment' }
411 }, 411 },
412 { 412 {
413 path: 'makeUp/:cptId/:id/:orderId',
414 component: () => import('@/viewsPc/booking/makeUpOrder.vue'),
415 name: 'makeUpOrder',
416 meta: { title: 'Makeup Reservation' }
417 },
418 {
413 path: 'photography/:cptId', 419 path: 'photography/:cptId',
414 component: () => import('@/viewsPc/booking/photography'), 420 component: () => import('@/viewsPc/booking/photography'),
415 name: 'photography', 421 name: 'photography',
......
src/viewsPc/booking/component/makeUpCalendar.vue 0 → 100644
1 <template>
2 <div >
3 <el-calendar v-model="currentDate" :range="calendarRange">
4 <template #header="{data}">
5 <el-row style="width: 100%">
6 <el-col :span="7">
7 {{data}}
8 </el-col>
9 <el-col :span="10">
10 <el-row justify="center" align='middle' >
11 <div class="canBtn"><el-icon><ArrowLeftBold /></el-icon></div>
12 <div>
13 <el-date-picker
14 v-model="value2"
15 type="datetimerange"
16 range-separator="-"
17 start-placeholder="Start date"
18 end-placeholder="End date"
19 size="small"
20 />
21 </div>
22 <div class="canBtn"><el-icon><ArrowRightBold /></el-icon></div>
23 </el-row>
24 </el-col>
25 <el-col :span="7">
26 <div style="text-align: right;padding-right: 10px">
27 <el-date-picker
28 v-model="currentDate"
29 type="datetime"
30 placeholder="YYYY-MM-DD"
31 size="small"
32 @change="dateChange"
33 />
34 </div>
35 </el-col>
36 </el-row>
37 </template>
38 <template #date-cell="data">
39 <div :class="data.data.day==query.currentDate?'primaryDate date':'date'" @click="selectDate(data.data.day)">
40 {{ data.data.day.slice(8, 10) }}
41 </div>
42 </template>
43 </el-calendar>
44
45 <div class="calendarList">
46 <ul v-loading="loading">
47 <li v-for="n in schList" :key="n.id" @click="goMatch(n)">
48 <el-row style="width: 100%">
49 <div style="margin-right: 25px">
50 <el-image style="width: 90px;height: 115px" src="@/assets/dance/banner.png" fit="cover" />
51 </div>
52 <div style="flex: 1" >
53 <div class="hz-title">A套餐</div>
54 <div>
55 <el-row justify="space-between">
56 <el-row class="hz-p">
57 <div style="margin-right: 80px">项目: <span style="margin-right: 20px">发型x1</span> <span>化妆x1</span> </div>
58 <div style="margin-right: 80px">服务: 化妆x1 </div>
59 <div>剩余 <span class="sign">6</span>名额 </div>
60 </el-row>
61 <el-row>
62 <div class="zh-margin" style="font-size: 36px;color: #ff8124"><span style="font-size: 24px">￥ </span> 120</div>
63 <el-button class="btn-lineG w200px" round type="primary" size="large">{{ language==0?'立即预约':'Select' }} ⇀</el-button>
64 </el-row>
65 </el-row>
66 </div>
67 </div>
68 </el-row>
69 </li>
70 </ul>
71 <el-empty v-if="schList.length== 0"
72 style="--el-empty-padding:0;--el-empty-description-margin-top:0"
73 :image="`/img/order_no.png`"
74 :image-size="200"/>
75 </div>
76 </div>
77 </template>
78
79 <script setup>
80 import {ref} from "vue";
81 import {dayjs} from "element-plus";
82 import {useRoute,useRouter} from 'vue-router'
83 import * as booking from "@/apiPc/booking"
84 import {useStorage} from "@vueuse/core/index";
85 const language = useStorage('language', 0)
86 const router = useRouter()
87 const route=useRoute()
88 const currentDate = ref(new Date())
89 const calendarRange = ref([dayjs('2024-07-17').toDate(), dayjs('2024-07-17').toDate()])
90 const schList = ref([])
91 const loading = ref(false)
92 const query = ref({
93 currentDate: dayjs(new Date()).format('YYYY-MM-DD') ,
94 // id:route.params.id
95 })
96 const value1=ref('')
97 const value2=ref('')
98
99
100 getScheduleList()
101 function getScheduleList() {
102 loading.value = true
103 // query.value.currentDate = dayjs(query.value.currentDate).format('YYYY-MM-DD')
104 booking.getMealConfList(query.value).then(res=>{
105 loading.value = false
106 schList.value = res.data
107 })
108 }
109 function selectDate(date) {
110 console.log(dayjs(date).format('YYYY-MM-DD'))
111 query.value.currentDate = dayjs(date).format('YYYY-MM-DD')
112 console.log(currentDate.value)
113 getScheduleList()
114 }
115
116 function dateChange(){
117 query.value.currentDate = dayjs(currentDate.value).format('YYYY-MM-DD')
118 getScheduleList()
119 }
120 function goMatch(n) {
121 router.push({
122 name: 'makeUpOrder',
123 params: {
124 orderId: n.cptId
125 },
126 query: {
127 matchId: n.cptId
128 }
129 })
130 }
131 </script>
132
133 <style scoped lang="scss">
134 .el-calendar {
135 --el-calendar-border: none;
136 --el-calendar-cell-width: 40px;
137 text-align: center;
138 --el-text-color-regular: #8E8D94;
139
140 :deep(.el-calendar__header) {
141 justify-content: center;
142 padding: 0 0 10px
143 }
144
145 :deep(.el-calendar__body) {
146 border: 1px solid #F0F0F0;
147 padding: 0
148 }
149
150 :deep(.el-calendar-table .el-calendar-day) {
151 padding: 1px;
152 }
153
154 :deep(.el-calendar-table td.is-selected) {
155 background: transparent;
156 }
157
158 :deep(.el-calendar__button-group) {
159 display: none;
160 }
161
162 :deep(.el-calendar-table thead th) {
163 padding: 5px 0 0
164 }
165
166 .primaryDate {
167 color: #fff;
168 background: linear-gradient(90deg, #8623FC, #453DEA);
169 }
170
171 .date {
172 margin: auto;
173 border-radius: 50%;
174 width: 30px;
175 height: 30px;
176 line-height: 30px;
177 font-weight: bold;
178 }
179 }
180
181 .calendarList {
182 border: 1px solid #F0F0F0;
183 padding: 12px 20px;
184 overflow: auto;
185 height: 625px;
186
187 ul {
188 li {cursor: pointer;
189 background: #F6F9FE;
190 margin: 7px 0 7px 20px;
191 position: relative;
192 padding: 13px;
193 border-radius: 10px;
194 font-weight: 500;
195 font-size: 15px;
196
197 label {
198 color: #453DEA;
199 margin-right: 15px;
200
201 &::before {
202 content: '';
203 background: #fff;
204 left: -17px;
205 top: 0px;
206 bottom: 0;
207 margin: auto;
208 border-radius: 50%;
209 width: 2px;
210 height: 2px;
211 position: absolute;
212 z-index: 1
213 }
214 }
215 }
216
217 li::before {
218 content: '';
219 background: linear-gradient(0deg, #8623FC, #453DEA);
220 border-radius: 50%;
221 width: 8px;
222 height: 8px;
223 position: absolute;
224 left: -20px;
225 top: 0;
226 bottom: 0;
227 margin: auto;
228 z-index: 1;
229 }
230
231 li::after {
232 content: '';
233 left: -16px;
234 width: 1px;
235 height: 100%;
236 background: #EBEBEB;
237 position: absolute;
238 top: 20px
239 }
240
241 //li:hover {
242 // color: #fff;
243 // background: linear-gradient(-90deg, #8623FC, #453DEA);
244 //
245 // label {
246 // color: #fff;
247 // }
248 //}
249 }
250 }
251
252 .hz-title{
253 font-size: 20px;
254 font-weight: 400;
255 color: #000;
256 margin-top:20px;
257 margin-bottom: 10px;
258 }
259
260 .zh-margin{
261 font-weight: bold;
262 font-size: 36px;
263 color: #FF8124;
264 margin-right: 30px;
265 }
266 .hz-p{
267 font-size: 16px;
268 color: #4C5359;
269 font-weight: 400;
270 }
271
272 :deep(.el-calendar__header) {
273 background: linear-gradient(90deg, #8623FC, #453DEA);
274 height: 50px;
275 line-height: 50px;
276 }
277
278 .canBtn{
279 color: #453DEA;
280 border-radius: 2px;
281 width: 22px;
282 height: 22px;
283 line-height: 26px;
284 text-align: center;
285 background-color: #fff;
286 margin: 0 16px 5px 16px;
287 cursor:pointer
288 }
289 </style>
src/viewsPc/booking/makeUp.vue
...@@ -13,65 +13,37 @@ ...@@ -13,65 +13,37 @@
13 </div> 13 </div>
14 <div class="box" v-loading="loading"> 14 <div class="box" v-loading="loading">
15 <el-row style="width: 100%" :gutter="20"> 15 <el-row style="width: 100%" :gutter="20">
16 <el-col :span="8" v-for="(h,index) in list" class="mb20" @click="goDetail(h)"> 16 <el-col :span="8" v-for="(h,index) in list" class="mb20" >
17 <el-card style="position: relative;"> 17 <el-card style="position: relative;">
18 <img class="w100 hz-img" :src="fillImgUrl(h.photos?.split(',')[0])"/> 18 <img class="w100 hz-img" :src="fillImgUrl(h.cover)"/>
19 <div class="yuyue"> 19 <div class="yuyue">
20 30 个时间段可预约 20 {{ h.counts }} {{ language==0?'个时间段可预约':"time slots can be reserved" }}
21 </div>
22 <div class="hz-text">{{h.name}}</div>
23 <div class="tagbox esp">
24 <span v-for="(t,index) in h.label?.split('，')" v-show="index<4">{{t}}</span>
21 </div> 25 </div>
22 <div class="hz-text">MANGO美妆工作室</div>
23 <el-row style="width: 100%;margin-bottom: 10px" :gutter="5" justify='space-between'>
24 <div class="hz-tag tag1">专业团体</div>
25 <div class="hz-tag tag2">金牌化妆师</div>
26 <div class="hz-tag tag3">大牌化妆品</div>
27 <div class="hz-tag tag4">连锁</div>
28 </el-row>
29 <div class="hz-row"> 26 <div class="hz-row">
30 <el-icon size="16" style="position: relative;top: 2px" color="#929AA0"><LocationFilled /></el-icon> 27 <el-icon size="16" style="position: relative;top: 2px" color="#929AA0"><OfficeBuilding /></el-icon>
31 成立 <span class="sign">6</span>年 | 28 {{ language==0?'成立':'Established for'}}
32 <el-icon size="16" style="position: relative;top: 2px" color="#929AA0"><LocationFilled /></el-icon><span class="sign">12</span>名化妆师 29 <span class="sign">{{ h.ageLimit }}</span>{{language==0?'年':'years'}} |
30 <el-icon size="16" style="position: relative;top: 2px" color="#929AA0"><UserFilled /></el-icon><span class="sign">{{ h.dresserLimit }}</span>{{language==0?'名化妆师':'makeup artists' }}
33 </div> 31 </div>
34 <div class="hz-row"> 32 <div class="hz-row">
35 <el-icon size="16" style="position: relative;top: 2px" color="#929AA0"><LocationFilled /></el-icon> 33 <el-icon size="16" style="position: relative;top: 2px" color="#929AA0"><PhoneFilled /></el-icon>
36 1535652837 34 {{ h.contact }}
37 </div> 35 </div>
38 <div class="hz-row"> 36 <div class="hz-row">
39 <el-icon size="16" style="position: relative;top: 2px" color="#929AA0"><LocationFilled /></el-icon> 37 <el-icon size="16" style="position: relative;top: 2px" color="#929AA0"><LocationFilled /></el-icon>
40 {{h.address}} 38 {{h.remarks}}
41 </div> 39 </div>
42 <div style="text-align: center"> 40 <div style="text-align: center">
43 <el-button class="btn-lineG w200px" round type="primary" size="large">{{ language==0?'立即预约':'Select' }} ⇀</el-button> 41 <el-button class="btn-lineG w200px" round type="primary" size="large" @click="goDetail(h)">{{ language==0?'立即预约':'Select' }} ⇀</el-button>
44 </div> 42 </div>
45 </el-card> 43 </el-card>
46 </el-col> 44 </el-col>
47 </el-row> 45 </el-row>
48 46
49 <!-- <el-card v-for="(h,index) in list" class="mb20" @click="goDetail(h)">-->
50 <!-- &lt;!&ndash; 酒店列表&ndash;&gt;-->
51 <!-- <el-row class="hotel" align="middle" :gutter="20">-->
52 <!-- <el-col :span="6">-->
53 <!-- <img class="w100" :src="fillImgUrl(h.photos?.split(',')[0])"/>-->
54 <!-- </el-col>-->
55 <!-- <el-col :span="10">-->
56 <!-- <h3 class="esp">{{h.name}}</h3>-->
57 <!-- <div class="starBox">-->
58 <!-- <img v-for="i in Number(h.starLevel||0)" src="@/assets/booking/star.png">-->
59 <!-- </div>-->
60 <!-- <div class="tagbox">-->
61 <!-- <span v-for="(t,index) in h.label?.split('，')" v-show="index<4">{{t}}</span>-->
62 <!-- <a v-show="h.label?.split('，').length>4">{{ language==0?'更多':'MORE' }} ></a>-->
63 <!-- </div>-->
64 <!-- <p class="esp addr">-->
65 <!-- <el-icon size="16" style="position: relative;top: 2px" color="#929AA0"><LocationFilled /></el-icon>-->
66 <!-- {{h.address}}-->
67 <!-- </p>-->
68 <!-- </el-col>-->
69 <!-- <el-col :span="8" class="text-right">-->
70 <!-- <div class="price">¥<span>{{ h.price }}</span><i v-if="language==0">起</i></div>-->
71 <!-- <el-button class="btn-lineG w200px" round type="primary" size="large">{{ language==0?'立即预约':'Select' }} ⇀</el-button>-->
72 <!-- </el-col>-->
73 <!-- </el-row>-->
74 <!-- </el-card>-->
75 <el-empty v-show="!loading&&list.length==0" :image="`/img/order_no.png`" :image-size="228" description="" /> 47 <el-empty v-show="!loading&&list.length==0" :image="`/img/order_no.png`" :image-size="228" description="" />
76 <div style="height: 50px"></div> 48 <div style="height: 50px"></div>
77 </div> 49 </div>
...@@ -84,6 +56,7 @@ import {onMounted} from "@vue/runtime-core" ...@@ -84,6 +56,7 @@ import {onMounted} from "@vue/runtime-core"
84 import * as booking from "@/apiPc/booking" 56 import * as booking from "@/apiPc/booking"
85 import {useRouter,useRoute} from "vue-router"; 57 import {useRouter,useRoute} from "vue-router";
86 import {useStorage} from "@vueuse/core/index"; 58 import {useStorage} from "@vueuse/core/index";
59 import {getMakeUpList} from "@/apiPc/booking";
87 const router = useRouter() 60 const router = useRouter()
88 const route = useRoute() 61 const route = useRoute()
89 const language= useStorage('language',0) 62 const language= useStorage('language',0)
...@@ -100,7 +73,7 @@ onMounted(()=>{ ...@@ -100,7 +73,7 @@ onMounted(()=>{
100 73
101 function getList() { 74 function getList() {
102 loading.value = true 75 loading.value = true
103 booking.getHotelList(query.value).then(res=>{ 76 booking.getMakeUpList(query.value).then(res=>{
104 list.value = res.rows 77 list.value = res.rows
105 loading.value = false 78 loading.value = false
106 }).catch(e=>{ 79 }).catch(e=>{
...@@ -112,26 +85,13 @@ function goDetail(item) { ...@@ -112,26 +85,13 @@ function goDetail(item) {
112 name:'makeUpDetail', 85 name:'makeUpDetail',
113 params:{ 86 params:{
114 id:item.id, 87 id:item.id,
115 },
116 query:{
117 id:item.id
118 } 88 }
119
120 }) 89 })
121 } 90 }
122 </script> 91 </script>
123 92
124 <style scoped lang="scss"> 93 <style scoped lang="scss">
125 .hotel{ 94
126 h3{margin: 0 0 20px;}
127 img.w100{object-fit: cover;aspect-ratio: 16/9}
128 .addr{font-size: 16px;color: #929AA0;font-weight: 400;}
129 .price{margin: 0 0 25px;
130 color: #FF8124;font-size: 18px;
131 span{font-size: 24px;margin: 0 8px;font-family: 'DINAlternate-Bold';font-weight: 600;}
132 i{font-style: normal;color: #929AA0;}
133 }
134 }
135 .banner{height: 140px;background-size: cover;text-align: center; 95 .banner{height: 140px;background-size: cover;text-align: center;
136 background: url("@/assets/booking/hz_bg.png") center;display: flex;align-items: center; 96 background: url("@/assets/booking/hz_bg.png") center;display: flex;align-items: center;
137 justify-content: center; 97 justify-content: center;
...@@ -143,15 +103,14 @@ function goDetail(item) { ...@@ -143,15 +103,14 @@ function goDetail(item) {
143 .no-border{border: none;background: #F5F7F9; 103 .no-border{border: none;background: #F5F7F9;
144 :deep(.el-input__wrapper){border: none;box-shadow: none;background: #F5F7F9;} 104 :deep(.el-input__wrapper){border: none;box-shadow: none;background: #F5F7F9;}
145 } 105 }
146 .starBox{ 106
147 img{display: inline-block;margin-right: 4px}
148 }
149 .hz-img{ 107 .hz-img{
150 height: 218px; 108 height: 218px;
151 width: 100%; 109 width: 100%;
152 border-radius: 2px; 110 border-radius: 2px;
153 border: 0; 111 border: 0;
154 margin-bottom: 20px; 112 margin-bottom: 20px;
113 object-fit: cover;
155 } 114 }
156 115
157 .yuyue{ 116 .yuyue{
...@@ -212,12 +171,12 @@ function goDetail(item) { ...@@ -212,12 +171,12 @@ function goDetail(item) {
212 //} 171 //}
213 172
214 173
215 //.tagbox{margin: 15px 0; 174 .tagbox{margin: 10px 0;
216 // a{color: #AFB5B9;font-size: 12px;} 175 a{color: #AFB5B9;font-size: 12px;}
217 // span{border-radius: 13px;font-size: 12px;padding: 4px 10px;margin-right:10px;font-weight: 400;} 176 span{border-radius: 13px;font-size: 12px;padding: 3px 10px;margin-right:10px;font-weight: 400;}
218 // span:nth-child(4n){background: rgba(50, 177, 108, 0.2);color: rgba(50, 177, 108, 1);} 177 span:nth-child(4n){background: rgba(50, 177, 108, 0.2);color: rgba(50, 177, 108, 1);}
219 // span:nth-child(4n+1){background:rgba(243, 152, 0, 0.2);color: rgba(243, 152, 0, 1);} 178 span:nth-child(4n+1){background:rgba(243, 152, 0, 0.2);color: rgba(243, 152, 0, 1);}
220 // span:nth-child(4n+2){background: rgba(0, 160, 233, 0.2);color: rgba(0, 160, 233, 1);} 179 span:nth-child(4n+2){background: rgba(0, 160, 233, 0.2);color: rgba(0, 160, 233, 1);}
221 // span:nth-child(4n+3){background: rgba(247, 64, 166, 0.2);color:rgba(247, 64, 166, 1);} 180 span:nth-child(4n+3){background: rgba(247, 64, 166, 0.2);color:rgba(247, 64, 166, 1);}
222 //} 181 }
223 </style> 182 </style>
......
src/viewsPc/booking/makeUpDetail.vue
...@@ -3,298 +3,199 @@ ...@@ -3,298 +3,199 @@
3 <div class="box"> 3 <div class="box">
4 <el-card> 4 <el-card>
5 <el-row> 5 <el-row>
6 <div class="zh-title">Mango美妆工作室</div> 6 <div class="zh-title">{{ form.name }}</div>
7 <div class="hz-tag tag1">专业团体</div> 7 <div class="tagbox esp">
8 <div class="hz-tag tag2">金牌化妆师</div> 8 <span v-for="(t,index) in form.label?.split('，')" v-show="index<4">{{t}}</span>
9 <div class="hz-tag tag3">大牌化妆品</div> 9 </div>
10 <div class="hz-tag tag4">连锁</div>
11 </el-row> 10 </el-row>
12 <br>
13 <el-row class="hz-row"> 11 <el-row class="hz-row">
14 <el-icon size="16" style="position: relative;top: 2px" color="#929AA0"> 12 <el-icon size="16" style="position: relative;top: 2px" color="#929AA0">
15 <LocationFilled/> 13 <OfficeBuilding/>
16 </el-icon> 14 </el-icon>
17 成立 <span class="sign">6</span>年 | 15 {{ language==0?'成立':'Established for'}} <span class="sign">6</span>{{language==0?'年':'years'}} &nbsp;&nbsp;&nbsp;&nbsp; |&nbsp;&nbsp;&nbsp;&nbsp;
18 <el-icon size="16" style="position: relative;top: 2px" color="#929AA0"> 16 <el-icon size="16" style="position: relative;top: 2px" color="#929AA0">
19 <LocationFilled/> 17 <UserFilled/>
20 </el-icon> 18 </el-icon>
21 名化妆师 | 19 <span class="sign"> {{ form.dresserLimit }}</span>{{language==0?'名化妆师':'makeup artists' }}&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
22 <el-icon size="16" style="position: relative;top: 2px" color="#929AA0"> 20 <el-icon size="16" style="position: relative;top: 2px" color="#929AA0">
23 <LocationFilled/> 21 <PhoneFilled/>
24 </el-icon> 22 </el-icon>
25 <span class="sign">12</span>名化妆师 | 23 <span style="padding-top: 2px">
24 {{ form.contact }}
25 </span>
26 &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
26 <el-icon size="16" style="position: relative;top: 2px" color="#929AA0"> 27 <el-icon size="16" style="position: relative;top: 2px" color="#929AA0">
27 <LocationFilled/> 28 <LocationFilled/>
28 </el-icon> 29 </el-icon>
29 <span class="sign">12</span>名化妆师 30 {{form.rearks}}
30 </el-row> 31 </el-row>
31 </el-card> 32 </el-card>
32 <br> 33 <br>
33 <el-row justify='space-between' style="padding: 10px"> 34 <el-row justify='space-between'>
34 <div class="img-header" style="width: 40%"> 35 <div class="img-header" style="width: 40%">
35 <div class="card"> 36 <div class="card">
36 <el-image src="@/assets/dance/banner.png" fit="cover" :preview-src-list="form?.photos?.split(',')"/> 37 <el-image style="width: 100%" :src="fillImgUrl(form.photos)?.split(',')[0]" fit="none" :preview-src-list="form?.photos?.split(',')"/>
37 <!-- <img src="@/assets/dance/banner.png" alt="">-->
38 </div> 38 </div>
39 </div> 39 </div>
40 <div class="img-header" style="width: 20%"> 40 <div class="img-header" style="width: 20%">
41 <el-row style="height: 50%;"> 41 <el-row style="height: 50%;">
42 <el-col :span="12"> 42 <el-col :span="12">
43 <div class="card"> 43 <div class="card">
44 <img src="@/assets/dance/banner.png" alt=""> 44 <el-image :src="fillImgUrl(form.photos)?.split(',')[0] " fit="cover" :preview-src-list="form?.photos?.split(',')"/>
45
46 </div> 45 </div>
47 </el-col> 46 </el-col>
48 <el-col :span="12"> 47 <el-col :span="12">
49 <div class="card"> 48 <div class="card">
50 <img src="@/assets/dance/banner.png" alt=""> 49 <el-image :src="fillImgUrl(form.photos)?.split(',')[0] " fit="cover" :preview-src-list="form?.photos?.split(',')"/>
51 </div> 50 </div>
52 </el-col> 51 </el-col>
53 </el-row> 52 </el-row>
54 <div style="height: 50%;"> 53 <div style="height: 50%;">
55 <div class="card"> 54 <div class="card">
56 <img src="@/assets/dance/banner.png" alt=""> 55 <el-image :src="fillImgUrl(form.photos)?.split(',')[0] " fit="cover" :preview-src-list="form?.photos?.split(',')"/>
57 </div> 56 </div>
58 </div> 57 </div>
59 58
60 </div> 59 </div>
61 <div class="img-header" style="width: 20%"> 60 <div class="img-header" style="width: 20%">
62 <div class="card"> 61 <div class="card">
63 <img src="@/assets/dance/banner.png" alt=""> 62 <el-image :src="fillImgUrl(form.photos)?.split(',')[0] " fit="cover" :preview-src-list="form?.photos?.split(',')"/>
64 </div> 63 </div>
65 </div> 64 </div>
66 <div class="img-header" style="width: 20%"> 65 <div class="img-header" style="width: 20%">
67 <el-row style="height: 50%"> 66 <el-row style="height: 50%">
68 <el-col :lg="12" :md="8" :sm="12" :xs="24" > 67 <el-col :lg="12" :md="8" :sm="12" :xs="24" >
69 <div class="card"> 68 <div class="card">
70 <img src="@/assets/dance/banner.png" alt=""> 69 <el-image :src="fillImgUrl(form.photos)?.split(',')[0] " fit="cover" :preview-src-list="form?.photos?.split(',')"/>
71 </div> 70 </div>
72 </el-col> 71 </el-col>
73 <el-col :span="12"> 72 <el-col :span="12">
74 <div class="card"> 73 <div class="card">
75 <img src="@/assets/dance/banner.png" alt=""> 74 <el-image :src="fillImgUrl(form.photos)?.split(',')[0] " fit="cover" :preview-src-list="form?.photos?.split(',')"/>
76 </div> 75 </div>
77 </el-col> 76 </el-col>
78 </el-row> 77 </el-row>
79 <div style="height: 50%;"> 78 <div style="height: 50%;">
80 <div class="card"> 79 <div class="card">
81 <img src="@/assets/dance/banner.png" style="width: 100%;height: 100%" alt=""> 80 <el-image :src="fillImgUrl(form.photos)?.split(',')[0] " fit="cover" :preview-src-list="form?.photos?.split(',')"/>
82 <div class="img-hover"> 81 <!-- <div class="img-hover">-->
83 查看相册 (12) > 82 <!-- 查看相册 (12) >-->
84 </div> 83 <!-- </div>-->
85 </div> 84 </div>
86 </div> 85 </div>
87 </div> 86 </div>
88 </el-row> 87 </el-row>
89 <br> 88 <br>
89 <br>
90 <br>
90 <el-card :body-style="{'padding':'20px 20px'}"> 91 <el-card :body-style="{'padding':'20px 20px'}">
91 <home-calendar/> 92 <MakeUpCalendar></MakeUpCalendar>
92 </el-card> 93 </el-card>
93 <el-card class="mt30" v-loading="loading">
94 <el-row v-if="form" class="hotel" align="middle" :gutter="20">
95 <!-- <el-col :span="6">-->
96 <!-- <img class="w100" :src="fillImgUrl(form.photos?.split(',')[0])"/>-->
97 <!-- </el-col>-->
98 <el-col :span="16">
99 <h3 class="esp flex">{{ form?.name }}
100 <div class="starBox">
101 <img v-for="i in Number(form?.starLevel||0)" src="@/assets/booking/star.png">
102 </div>
103 </h3>
104 94
105 <div class="tagbox">
106 <span v-for="(t,index) in form?.label?.split('，')" v-show="index<4">{{ t }}</span>
107 <a v-show="form?.label?.split('，').length>4">{{ language == 0 ? '更多' : 'MORE' }} ></a>
108 </div>
109 <div>
110 <el-icon></el-icon>
111 <span class="mr10">{{ language == 0 ? '入住时间' : 'Check-in' }}：{{ form?.checkInTime }}</span>
112 <span>{{ language == 0 ? '离店时间' : 'Check-out' }}：{{ form?.checkOutTime }}</span>
113 </div>
114 <div v-if="form?.introduction" class="flex esp">
115 <el-icon></el-icon>
116 {{ language == 0 ? '酒店简介' : 'Introduction' }}：<span v-html="form.introduction.toString()"></span>
117 </div>
118 <!-- <p class="esp addr">-->
119 <!-- <el-icon size="16" style="position: relative;top: 2px" color="#929AA0"><LocationFilled /></el-icon>-->
120 <!-- {{form?.address}}-->
121 <!-- </p>-->
122 </el-col>
123 <el-col :span="8" class="text-right">
124 <div class="mapBox">
125 <div id="map"></div>
126 </div>
127 </el-col>
128 </el-row>
129 <el-empty v-else :image="`/img/order_no.png`" :image-size="228" description=""/>
130 </el-card>
131
132 <!-- <div class="mt30">-->
133 <!-- <el-row :gutter="20">-->
134 <!-- <el-col v-for="(p,index) in form?.photos?.split(',')" :span="index==0?12:6">-->
135 <!-- <div class="imgbox hotelImg">-->
136 <!-- <img :src="fillImgUrl(p)">-->
137 <!-- </div>-->
138 <!-- </el-col>-->
139 <!-- </el-row>-->
140 <!-- </div>-->
141
142 <!-- <el-card class="mt30 mb60">-->
143 <!-- <div class="lineHead">-->
144 <!-- <ul>-->
145 <!-- <li>{{ language == 0 ? '房型选择' : 'Available Rooms' }}</li>-->
146 <!-- </ul>-->
147 <!-- </div>-->
148 <!-- <div>-->
149 <!-- <div v-for="(r,index) in roomList" :key="index" class="room">-->
150 <!-- <el-row :gutter="30" align="middle">-->
151 <!-- <el-col :span="4">-->
152 <!-- <div class="roomImg">-->
153 <!-- <img :src="fillImgUrl(r.photo?.split(',')[0])">-->
154 <!-- </div>-->
155 <!-- </el-col>-->
156 <!-- <el-col :span="14">-->
157 <!-- <h3 class="name">{{ r.roomType }}</h3>-->
158 <!-- <el-row :gutter="10">-->
159 <!-- <el-col :span="8">{{ r.area }}m²</el-col>-->
160 <!-- <el-col :span="8" v-show="r.windowFlag==1"> {{ language == 0 ? '有窗' : 'With windows' }}</el-col>-->
161 <!-- <el-col :span="8" v-show="r.windowFlag==0"> {{ language == 0 ? '无窗' : 'Windowless' }}</el-col>-->
162 <!-- <el-col :span="8" v-show="r.bathroomFlag==1"> {{ language == 0 ? '热水洗浴' : 'Shower' }}</el-col>-->
163 <!-- &lt;!&ndash; <text v-show="r.bathroomFlag==0"> </text> &ndash;&gt;-->
164 <!-- <el-col :span="8" v-show="r.addBedFlag==1"> {{ language == 0 ? '允许加床' : 'Extra bed' }}</el-col>-->
165 <!-- <el-col :span="8" v-if="r.breakfastNum&&r.breakfastNum > '0'">-->
166 <!-- {{ r.breakfastNum }}{{ language == 0 ? '份早餐' : ' breakfasts' }}-->
167 <!-- </el-col>-->
168 <!-- <el-col :span="8" v-else>{{ language == 0 ? '无早餐' : 'No breakfast' }}</el-col>-->
169 <!-- </el-row>-->
170 <!-- </el-col>-->
171 <!-- <el-col :span="3">-->
172 <!-- <div class="price">{{-->
173 <!-- language == 0 ? '¥' : '€'-->
174 <!-- }}<span>{{ language == 0 ? r.roomPrice : r.roomPriceEn }}</span></div>-->
175 <!-- </el-col>-->
176 <!-- <el-col :span="3">-->
177 <!-- <div class="bg-lineg" v-if="language==0" @click="goOrder(r)">-->
178 <!-- 订-->
179 <!-- <div>{{ language == 0 ? '在线付' : 'Online' }}</div>-->
180 <!-- </div>-->
181 <!-- <el-button v-else class="btn-lineG w100" round type="primary" @click="goOrder(r)">Select</el-button>-->
182 <!-- &lt;!&ndash; <div class="text-center text-primary mt10 fontsize14 pointer" v-if="language == 0">&ndash;&gt;-->
183 <!-- &lt;!&ndash; 剩余 {{(r.roomCount - (r.useCount||0)).toFixed()}} 间&ndash;&gt;-->
184 <!-- &lt;!&ndash; </div>&ndash;&gt;-->
185 <!-- &lt;!&ndash; <div class="text-center text-primary mt10 fontsize14" v-else>&ndash;&gt;-->
186 <!-- &lt;!&ndash; {{(r.roomCount - (r.useCount||0)).toFixed()}} Remaining rooms&ndash;&gt;-->
187 <!-- &lt;!&ndash; </div>&ndash;&gt;-->
188 <!-- </el-col>-->
189 <!-- </el-row>-->
190 <!-- </div>-->
191 95
192 <!-- <el-empty v-if="roomList.length == 0" :image="`/img/order_no.png`" :image-size="228" description=""/>-->
193 <!-- </div>-->
194 <!-- </el-card>-->
195 </div> 96 </div>
196 </div> 97 </div>
197 </template> 98 </template>
198 99
199 <script setup lang="ts"> 100 <script setup >
200 import {useRouter} from "vue-router"; 101 import {useRouter} from "vue-router";
201 import {ref, reactive, onMounted} from "vue"; 102 import {ref, reactive, onMounted} from "vue";
202 import {useRoute} from "vue-router"; 103 import {useRoute} from "vue-router";
203 import {getHotelById, getHotelRooms} from "@/apiPc/booking" 104 import {getHotelById, getHotelRooms} from "@/apiPc/booking"
204 105 import * as booking from "@/apiPc/booking"
205 import {useStorage} from "@vueuse/core/index"; 106 import {useStorage} from "@vueuse/core/index";
206 import useUserStore from "@/store/modules/user"; 107 import useUserStore from "@/store/modules/user";
207 import HomeCalendar from "/@/viewsPc/components/homeCalendar.vue"; 108 import MakeUpCalendar from "@/viewsPc/booking/component/makeUpCalendar.vue";
208
209 const user = useUserStore().user 109 const user = useUserStore().user
210 const language = useStorage('language', 0) 110 const language = useStorage('language', 0)
211 const router = useRouter() 111 const router = useRouter()
212 const route = useRoute() 112 const route = useRoute()
213 const form = ref({}) 113 const form = ref({})
214 const query = ref({ 114 const query = ref({
215 hotelId: route.query.id 115 activityId: route.params.cptId,
116 studioId:route.params.id
216 }) 117 })
217 const loading = ref(false) 118 const loading = ref(false)
218 const roomList = ref([]) 119 const roomList = ref([])
219 const map = ref(null) 120 const map = ref(null)
220 onMounted(() => { 121 onMounted(() => {
221 // getData() 122 getData()
222 }) 123 })
223 124
224 function getData() { 125 function getData() {
225 loading.value = true 126 loading.value = true
226 getHotelById(route.params.hotelId).then(res => { 127 booking.makeUpDetail(query.value).then(res => {
227 loading.value = false 128 loading.value = false
228 form.value = res.data 129 form.value = res.data
229 initMap() 130 // console.log(res)
230 }).catch(err => { 131 }).catch(err => {
231 console.log(err) 132 console.log(err)
232 }) 133 })
233 query.value.hotelId = route.query.id 134 // query.value.hotelId = route.query.id
234 getHotelRooms(query.value).then(res => { 135 // getHotelRooms(query.value).then(res => {
235 roomList.value = res.rows 136 // roomList.value = res.rows
236 }) 137 // })
237 }
238
239 function initMap() {
240 const TMap = (window as any).TMap
241 var center = new TMap.LatLng(form.value.latitude, form.value.longitude);//设置中心点坐标'
242 var map = new TMap.Map("map", {
243 center: center,//设置地图中心点坐标
244 zoom: 17, //设置地图缩放级别
245 });
246 var infoWindowLocation = new TMap.LatLng(form.value.latitude, form.value.longitude);//创建一个坐标
247 //创建InfoWindow实例，并进行初始化
248 var infowindow = new TMap.InfoWindow({
249 content: form.value.address, //信息窗口内容
250 position: infoWindowLocation,//显示信息窗口的坐标
251 map: map,
252 offset: {x: 0, y: -32}
253 });
254 infowindow.close();
255 var marker = new TMap.MultiMarker({
256 map: map,
257 //样式定义
258 styles: {
259 "myStyle": new TMap.MarkerStyle({
260 "anchor": {x: 16, y: 32}
261 })
262 },
263 //点标记数据数组
264 geometries: [{
265 "id": "1", //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
266 // "styleId": 'myStyle', //指定样式id
267 "position": new TMap.LatLng(form.value.latitude, form.value.longitude), //点标记坐标位置
268 "properties": {//自定义属性
269 "title": form.value.name
270 }
271 }
272 ]
273 })
274 marker.on("click", function (evt) {
275 //设置infoWindow
276 infowindow.open(); //打开信息窗
277 infowindow.setPosition(evt.geometry.position);//设置信息窗位置
278 })
279 } 138 }
280 139
281 function goOrder(room) { 140 // function initMap() {
282 if (!user) { 141 // const TMap = null
283 useUserStore().setReLogin() 142 // var center = new TMap.LatLng(form.value.latitude, form.value.longitude);//设置中心点坐标'
284 return 143 // var map = new TMap.Map("map", {
285 } 144 // center: center,//设置地图中心点坐标
286 router.push({ 145 // zoom: 17, //设置地图缩放级别
287 name: 'hotelOrder', 146 // });
288 params: { 147 // var infoWindowLocation = new TMap.LatLng(form.value.latitude, form.value.longitude);//创建一个坐标
289 roomId: room.id 148 // //创建InfoWindow实例，并进行初始化
290 }, 149 // var infowindow = new TMap.InfoWindow({
291 query: { 150 // content: form.value.address, //信息窗口内容
292 room: encodeURIComponent(JSON.stringify(room)), 151 // position: infoWindowLocation,//显示信息窗口的坐标
293 hotelName: form.value.name, 152 // map: map,
294 checkInTime: form.value.checkInTime 153 // offset: {x: 0, y: -32}
295 } 154 // });
296 }) 155 // infowindow.close();
297 } 156 // var marker = new TMap.MultiMarker({
157 // map: map,
158 // //样式定义
159 // styles: {
160 // "myStyle": new TMap.MarkerStyle({
161 // "anchor": {x: 16, y: 32}
162 // })
163 // },
164 // //点标记数据数组
165 // geometries: [{
166 // "id": "1", //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
167 // // "styleId": 'myStyle', //指定样式id
168 // "position": new TMap.LatLng(form.value.latitude, form.value.longitude), //点标记坐标位置
169 // "properties": {//自定义属性
170 // "title": form.value.name
171 // }
172 // }
173 // ]
174 // })
175 // marker.on("click", function (evt) {
176 // //设置infoWindow
177 // infowindow.open(); //打开信息窗
178 // infowindow.setPosition(evt.geometry.position);//设置信息窗位置
179 // })
180 // }
181
182 // function goOrder(room) {
183 // if (!user) {
184 // useUserStore().setReLogin()
185 // return
186 // }
187 // router.push({
188 // name: 'hotelOrder',
189 // params: {
190 // roomId: room.id
191 // },
192 // query: {
193 // room: encodeURIComponent(JSON.stringify(room)),
194 // hotelName: form.value.name,
195 // checkInTime: form.value.checkInTime
196 // }
197 // })
198 // }
298 </script> 199 </script>
299 200
300 <style scoped lang="scss"> 201 <style scoped lang="scss">
...@@ -394,12 +295,6 @@ function goOrder(room) { ...@@ -394,12 +295,6 @@ function goOrder(room) {
394 } 295 }
395 } 296 }
396 297
397 .starBox {
398 img {
399 display: inline-block;
400 margin-right: 4px
401 }
402 }
403 298
404 .tagbox { 299 .tagbox {
405 margin: 15px 0; 300 margin: 15px 0;
...@@ -450,33 +345,12 @@ function goOrder(room) { ...@@ -450,33 +345,12 @@ function goOrder(room) {
450 } 345 }
451 } 346 }
452 347
453 .hotelImg {
454 border-radius: 10px;
455 overflow: hidden;
456 aspect-ratio: 16/9;
457
458 img {
459 object-fit: cover;
460 object-position: center;
461 width: 100%;
462 height: 100%;
463 }
464
465 }
466
467 .sign { 348 .sign {
468 padding-top: 2px; 349 padding-top: 2px;
469 } 350 }
470 351
471 .img-header { 352 .img-header {
472 height: 270px; 353 height: 270px;
473
474 img {
475 border-radius: 10px;
476 width: 100%;
477 height: 100%;
478 }
479
480 } 354 }
481 355
482 .card { 356 .card {
......
src/viewsPc/booking/makeUpOrder.vue 0 → 100644
1 <template>
2 <div>
3 <div class="box">
4 <el-card :body-style="{ padding: '0px' }" class="mt20">
5 <div slot="header">
6 <div class="bg-lineg">{{ language == 0 ? '化妆预约下单' : 'Make Up booking order' }}</div>
7 </div>
8
9 <el-card>
10 <div class='order-header'>
11 <div class="title">
12 Mango 美妆工作室
13 </div>
14 <el-row class="hz-row" >
15 <el-icon size="16" style="position: relative;top: 2px" color="#929AA0">
16 <LocationFilled/>
17 </el-icon>
18 成立 6 年 |
19 <el-icon size="16" style="position: relative;top: 2px" color="#929AA0">
20 <LocationFilled/>
21 </el-icon>
22 12 名化妆师 |
23 <el-icon size="16" style="position: relative;top: 2px" color="#929AA0">
24 <LocationFilled/>
25 </el-icon>
26 1535891241234 |
27 <el-icon size="16" style="position: relative;top: 2px" color="#929AA0">
28 <LocationFilled/>
29 </el-icon>
30 江苏省1412341234
31
32 </el-row>
33 <hr>
34 <el-row class="table">
35 <div style="margin-right: 50px">
36 <el-image style="width:55px;height: 70px " src="" fit="cover" />
37 </div>
38 <el-row style="flex: 1">
39 <div style="flex: 1">
40 <div style="margin-bottom: 20px;">预约日期&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="span">2024.03.11</span></div>
41 <div>套餐名称&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="span">A套餐</span></div>
42 </div>
43
44 <div style="flex: 1">
45 <div style="margin-bottom: 20px">预约时间&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="span">09:00~12:00</span> </div>
46 <div>服务&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="span">上门化妆</span></div>
47 </div>
48
49 <div style="flex: 1">
50 <div style="margin-bottom: 20px">化妆项目&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="span">化妆x1 发型x1</span></div>
51 <div >价格&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="sign">￥450</span></div>
52 </div>
53 </el-row>
54 </el-row>
55 </div>
56 <br>
57 <div class="yu">预约信息</div>
58 <br>
59 <div class="form-order">
60 <el-form :model="form" style="width: 600px" :label-width="language==0?'140px':'160px'" :rules="rules" ref="formRef">
61 <el-form-item :label="language==0?'预约时间':'Appointment Time'" required>
62 <el-date-picker
63 @change="getDaysBetween"
64 v-model="rzRange"
65 type="daterange"
66 :disabled-date="disabledDateRZ"
67 :placeholder="language==0?'选择日期':'Select date'" format="YYYY-MM-DD"
68 value-format="YYYY-MM-DD"/>
69 </el-form-item>
70 <el-form-item :label="language==0?'预约数量':'Appointment Time'" required>
71 <el-input-number v-model="form.number" :min="1" :max="10" label="描述文字"/>
72 </el-form-item>
73 <el-form-item :label="language==0?'预约联系人':'Appointment Time'" required>
74 <el-input v-model="form.number" :min="1" :max="10" label="描述文字"/>
75 </el-form-item>
76 <el-form-item :label="language==0?'联系电话':'Appointment Time'" required>
77 <el-input v-model="form.number" :min="1" :max="10" label="描述文字"/>
78 </el-form-item>
79 <el-form-item :label="language==0?'备注':'Appointment Time'" required>
80 <el-input type="textarea" :rows="3" v-model="form.number" :min="1" :max="10" label="描述文字"/>
81 </el-form-item>
82 </el-form>
83 </div>
84 </el-card>
85
86 <!-- {{room}}-->
87 <!-- <el-row class="pd20" >-->
88
89 <!--&lt;!&ndash; <el-col :span="14">&ndash;&gt;-->
90 <!--&lt;!&ndash; <div class="border-info">&ndash;&gt;-->
91 <!--&lt;!&ndash; <h3>{{ hotelName }}</h3>&ndash;&gt;-->
92 <!--&lt;!&ndash; <div class="roomType">{{ room.roomType }}</div>&ndash;&gt;-->
93 <!--&lt;!&ndash; <div class="room">&ndash;&gt;-->
94 <!--&lt;!&ndash; <span>{{ room.bedType }}</span>&ndash;&gt;-->
95 <!--&lt;!&ndash; <span>{{ ' | ' + room.area }}m²</span>&ndash;&gt;-->
96 <!--&lt;!&ndash; <span>{{ ' | ' + room.occupantsNum }}{{ language == 0 ? '人入住' : ' people' }}</span>&ndash;&gt;-->
97 <!--&lt;!&ndash; <span v-show="room.breakfastFlag=='1'">{{ ' | ' + room.breakfastNum }} {{
98 &ndash;&gt;-- >
99 < !-- &lt; ! & ndash; language == 0 ? '份早餐' : 'breakfasts' & ndash;&gt;-- >
100 < !-- &lt; ! & ndash;
101 }}</span>&ndash;&gt;-->
102 <!--&lt;!&ndash; <span v-show="room.breakfastFlag=='0'"> | {{ language == 0 ? '无早餐' : 'No breakfast' }}</span>&ndash;&gt;-->
103 <!--&lt;!&ndash; <span v-show="room.bathroomFlag=='1'"> | {{ language == 0 ? '热水洗浴' : 'Shower' }}</span>&ndash;&gt;-->
104 <!--&lt;!&ndash; <span v-show="room.windowFlag=='1'"> | {{ language == 0 ? '有窗' : 'With windows' }}</span>&ndash;&gt;-->
105 <!--&lt;!&ndash; <span v-show="room.addBedFlag=='1'"> | {{ language == 0 ? '允许加床' : 'Extra bed' }}</span>&ndash;&gt;-->
106 <!--&lt;!&ndash; </div>&ndash;&gt;-->
107 <!--&lt;!&ndash; </div>&ndash;&gt;-->
108
109 <!--&lt;!&ndash; <div class="leftboderTT">{{ language == 0 ? '预约信息' : 'Reservation information' }}</div>&ndash;&gt;-->
110 <!--&lt;!&ndash; <div class="border-rr mt20 pd20">&ndash;&gt;-->
111 <!--&lt;!&ndash; <el-form :model="form" :label-width="language == 0 ?'100':'160'" :rules="rules" ref="formRef">&ndash;&gt;-->
112 <!--&lt;!&ndash; <el-form-item :label="language==0?'入住日期':'Check-in date'" required>&ndash;&gt;-->
113
114 <!--&lt;!&ndash; <el-date-picker @change="getDaysBetween"&ndash;&gt;-->
115 <!--&lt;!&ndash; v-model="rzRange"&ndash;&gt;-->
116 <!--&lt;!&ndash; type="daterange" :disabled-date="disabledDateRZ"&ndash;&gt;-->
117 <!--&lt;!&ndash; :placeholder="language==0?'选择日期':'Select date'" format="YYYY-MM-DD"&ndash;&gt;-->
118 <!--&lt;!&ndash; value-format="YYYY-MM-DD"/>&ndash;&gt;-->
119 <!--&lt;!&ndash; <div class="tip" v-if="lform.hqStart">{{ language==0?'可订日期':'Available date' }}：{{ lform.hqStart.slice(0, 10) }} ~ {{ lform.hqEnd.slice(0, 10) }}</div>&ndash;&gt;-->
120
121 <!--&lt;!&ndash; &lt;!&ndash; :picker-options="pickerOptions"&ndash;&gt;&ndash;&gt;-->
122 <!--&lt;!&ndash; </el-form-item>&ndash;&gt;-->
123 <!--&lt;!&ndash; <el-form-item :label="language==0?'房间数':'Rooms'" required prop="roomNum">&ndash;&gt;-->
124 <!--&lt;!&ndash; <el-input-number v-model="form.roomNum" :min="0" :max="canOrderNum" @change="changeRoomNum"/>&ndash;&gt;-->
125 <!--&lt;!&ndash; <div class="red ml20" v-if="rzRange[1]">&ndash;&gt;-->
126 <!--&lt;!&ndash; <span v-if="language == 0">剩余房间数:{{ canOrderNum }}</span>&ndash;&gt;-->
127 <!--&lt;!&ndash; <span v-else>{{ canOrderNum }} Remaining rooms</span>&ndash;&gt;-->
128 <!--&lt;!&ndash; </div>&ndash;&gt;-->
129 <!--&lt;!&ndash; </el-form-item>&ndash;&gt;-->
130 <!--&lt;!&ndash; <el-form-item v-for="(n,index) in form.roomNum" :key="index" :label="language==1?`Name${index+1}`:`入住人${index+1}`" required>&ndash;&gt;-->
131 <!--&lt;!&ndash; <el-input v-model="rzUserArr[index]" :placeholder="language==0?'每间填一位住客姓名':'Each room fill in one name of the guest'"/>&ndash;&gt;-->
132 <!--&lt;!&ndash; </el-form-item>&ndash;&gt;-->
133 <!--&lt;!&ndash; <el-form-item :label="language==0?'预计到店':'Expected check-in'" required>&ndash;&gt;-->
134 <!--&lt;!&ndash; <el-select v-model="form.ddDate"&ndash;&gt;-->
135 <!--&lt;!&ndash; :placeholder="language==0?'请选择预计到店时间':'Please select the expected check-in time'">&ndash;&gt;-->
136 <!--&lt;!&ndash; <el-option&ndash;&gt;-->
137 <!--&lt;!&ndash; v-for="item in ddDateArr"&ndash;&gt;-->
138 <!--&lt;!&ndash; :key="item.value"&ndash;&gt;-->
139 <!--&lt;!&ndash; :label="item.label"&ndash;&gt;-->
140 <!--&lt;!&ndash; :value="item.value"&ndash;&gt;-->
141 <!--&lt;!&ndash; />&ndash;&gt;-->
142 <!--&lt;!&ndash; </el-select>&ndash;&gt;-->
143 <!--&lt;!&ndash; </el-form-item>&ndash;&gt;-->
144 <!--&lt;!&ndash; <el-form-item :label="language==0?'联系电话':'Contact phone'" required prop="phone">&ndash;&gt;-->
145 <!--&lt;!&ndash; <el-input v-model="form.phone"/>&ndash;&gt;-->
146 <!--&lt;!&ndash; </el-form-item>&ndash;&gt;-->
147
148 <!--&lt;!&ndash; <div v-if="room.addBedFlag=='1'">&ndash;&gt;-->
149 <!--&lt;!&ndash; <el-form-item :label="language==0?'是否加床':'Extra bed'" required>&ndash;&gt;-->
150 <!--&lt;!&ndash; <el-radio-group v-model="form.isAddbed" @change="changeAddBed">&ndash;&gt;-->
151 <!--&lt;!&ndash; <el-radio value="1">{{ language == 0 ? '是' : 'Yes' }}</el-radio>&ndash;&gt;-->
152 <!--&lt;!&ndash; <el-radio value="0">{{ language == 0 ? '否' : 'No' }}</el-radio>&ndash;&gt;-->
153 <!--&lt;!&ndash; </el-radio-group>&ndash;&gt;-->
154 <!--&lt;!&ndash; </el-form-item>&ndash;&gt;-->
155 <!--&lt;!&ndash; <el-form-item v-if="form.isAddbed=='1'" :label="language==0?'加床张数':'Extra bed num'" required>&ndash;&gt;-->
156 <!--&lt;!&ndash; <el-input-number v-model="form.addNum" :min="0" :max="form.roomNum" @change="changeBed"/>&ndash;&gt;-->
157
158 <!--&lt;!&ndash; <div class="tip" v-if="form.isAddbed=='1'">*&ndash;&gt;-->
159 <!--&lt;!&ndash; <span v-if="language == 0">一个房间最多加一张床</span>&ndash;&gt;-->
160 <!--&lt;!&ndash; <span v-else>A room can only add one bed</span>&ndash;&gt;-->
161 <!--&lt;!&ndash; </div>&ndash;&gt;-->
162 <!--&lt;!&ndash; </el-form-item>&ndash;&gt;-->
163 <!--&lt;!&ndash; </div>&ndash;&gt;-->
164 <!--&lt;!&ndash; </el-form>&ndash;&gt;-->
165 <!--&lt;!&ndash; </div>&ndash;&gt;-->
166 <!--&lt;!&ndash; </el-col>&ndash;&gt;-->
167 <!--&lt;!&ndash; <el-col :span="10">&ndash;&gt;-->
168 <!--&lt;!&ndash; <div class="leftboderTT">{{ language == 0 ? '订单明细' : 'Order details' }}</div>&ndash;&gt;-->
169 <!--&lt;!&ndash; <div class="border-rr mt20 pd20 ccitemBox">&ndash;&gt;-->
170 <!--&lt;!&ndash; <label> {{ language == 0 ? '房费' : 'Room fee' }}&ndash;&gt;-->
171 <!--&lt;!&ndash; <span class="fr" v-if="language==0">{{
172 &ndash;&gt;-- >
173 < !-- &lt; ! & ndash; language == 0 ? '¥' : '€' & ndash;&gt;-- >
174 < !-- &lt; ! & ndash;
175 }}{{ (room.roomPrice * form.roomNum * choseRooms.length).toFixed(2) }}</span>&ndash;&gt;-->
176 <!--&lt;!&ndash; <span class="fr" v-else>{{
177 &ndash;&gt;-- >
178 < !-- &lt; ! & ndash; language == 0 ? '¥' : '€' & ndash;&gt;-- >
179 < !-- &lt; ! & ndash;
180 }}{{ (room.roomPriceEn * form.roomNum * choseRooms.length).toFixed(2) }}</span>&ndash;&gt;-->
181 <!--&lt;!&ndash; </label>&ndash;&gt;-->
182 <!--&lt;!&ndash; <div class="ccitem" v-for="(c, index) in choseRooms" :key="index" v-show="form.roomNum>0">&ndash;&gt;-->
183 <!--&lt;!&ndash; {{ c }}&ndash;&gt;-->
184 <!--&lt;!&ndash; <span v-if="language==0">{{ form.roomNum }}*{{ language == 0 ? '¥' : '€' }}{{ room.roomPrice }}</span>&ndash;&gt;-->
185 <!--&lt;!&ndash; <span v-else>{{ form.roomNum }}*{{ language == 0 ? '¥' : '€' }}{{ room.roomPriceEn }}</span>&ndash;&gt;-->
186 <!--&lt;!&ndash; </div>&ndash;&gt;-->
187
188 <!--&lt;!&ndash; <label v-if="form.isAddbed=='1'&&form.addNum>0">{{ language == 0 ? '加床费' : 'Extra bed fee' }}&ndash;&gt;-->
189 <!--&lt;!&ndash; <span class="fr" v-if="language==0">{{
190 &ndash;&gt;-- >
191 < !-- &lt; ! & ndash; language == 0 ? '¥' : '€' & ndash;&gt;-- >
192 < !-- &lt; ! & ndash;
193 }}{{ (room.bedPrice * form.addNum * choseRooms.length).toFixed(2) }}</span>&ndash;&gt;-->
194 <!--&lt;!&ndash; <span class="fr" v-else>{{
195 &ndash;&gt;-- >
196 < !-- &lt; ! & ndash; language == 0 ? '¥' : '€' & ndash;&gt;-- >
197 < !-- &lt; ! & ndash;
198 }}{{ (room.bedPriceEn * form.addNum * choseRooms.length).toFixed(2) }}</span>&ndash;&gt;-->
199 <!--&lt;!&ndash; </label>&ndash;&gt;-->
200
201 <!--&lt;!&ndash; <div v-if="form.isAddbed=='1'&&form.addNum>0" class="ccitem" v-for="(c, index) in choseRooms" :key="index">&ndash;&gt;-->
202 <!--&lt;!&ndash; {{ c }}&ndash;&gt;-->
203 <!--&lt;!&ndash; <span>{{ form.addNum }}*{{ language == 0 ? '¥' : '€' }}{{ language == 0 ?room.bedPrice:room.bedPriceEn}}</span>&ndash;&gt;-->
204 <!--&lt;!&ndash; </div>&ndash;&gt;-->
205
206 <!--&lt;!&ndash; <label>{{ language == 0 ? '共计' : 'Total' }}<span&ndash;&gt;-->
207 <!--&lt;!&ndash; class="fr bigMoney">{{ language == 0 ? '¥' : '€' }}{{ money }}</span></label>&ndash;&gt;-->
208
209 <!--&lt;!&ndash; </div>&ndash;&gt;-->
210 <!--&lt;!&ndash; </el-col>&ndash;&gt;-->
211 <!-- </el-row>-->
212 </el-card>
213
214 <el-card class="mt30">
215 <el-row justify="space-between" align="middle">
216 <el-col :span="12">
217 <label>{{ language == 0 ? '共计金额' : 'Total' }}：
218 <span class=" text-warning"> {{ language == 0 ? '¥' : '€' }}<span class="bigMoney">{{
219 money
220 }}</span></span>
221 </label>
222 </el-col>
223 <el-col :span="12" class="text-right">
224 <el-button type="primary" class="btn-lineG w200px" size="large" round @click="submit">
225 {{ language == 0 ? '确认付款' : 'Book Now' }}
226 </el-button>
227 </el-col>
228 </el-row>
229 </el-card>
230 <div style="height: 60px;"></div>
231
232 </div>
233 </div>
234 </template>
235
236 <script setup>
237 import {useRouter, useRoute} from "vue-router";
238 import {ref, reactive, onMounted} from "vue";
239 import {useStorage} from "@vueuse/core/index";
240 import {checkResidueRoom, getBaseInfoByActiveId, newsSubmitOrderHotel} from "@/apiPc/booking"
241 import dayjs from 'dayjs'
242 import {ElMessage, ElMessageBox} from "element-plus";
243 import useUserStore from "@/store/modules/user";
244
245 const user = useUserStore().user
246 const language = useStorage('language', 0)
247 const router = useRouter()
248 const route = useRoute()
249 const room = ref({})
250 const hotelName = ref('')
251 const canOrderNum = ref(0)
252 const lform = ref({})
253 const form = ref({
254 isAddbed: '0',
255 roomNum: 0,
256 addNum: 0,
257 ddDate: '14:00',
258 phone: user?.phonenumber || '',
259 })
260 const rzRange = ref([])
261 const rzUserArr = ref([])
262 const money = ref(0)
263 const choseRooms = ref([])
264 const ddDateArr = ref([
265 {
266 value: '07:00',
267 label: '07:00'
268 },
269 {
270 value: '08:00',
271 label: '08:00'
272 },
273 {
274 value: '09:00',
275 label: '09:00'
276 },
277 {
278 value: '10:00',
279 label: '10:00'
280 },
281 {
282 value: '11:00',
283 label: '11:00'
284 },
285 {
286 value: '12:00',
287 label: '12:00'
288 },
289 {
290 value: '13:00',
291 label: '13:00'
292 },
293 {
294 value: '14:00',
295 label: '14:00'
296 },
297 {
298 value: '15:00',
299 label: '15:00'
300 },
301 {
302 value: '16:00',
303 label: '16:00'
304 },
305 {
306 value: '17:00',
307 label: '17:00'
308 },
309 {
310 value: '18:00',
311 label: '18:00'
312 },
313 {
314 value: '19:00',
315 label: '19:00'
316 },
317 {
318 value: '20:00',
319 label: '20:00'
320 },
321 {
322 value: '21:00',
323 label: '21:00'
324 },
325 {
326 value: '22:00',
327 label: '22:00'
328 },
329 {
330 value: '23:00',
331 label: '23:00'
332 },
333 {
334 value: '00:00',
335 label: '00:00'
336 },
337 {
338 value: '01:00',
339 label: '01:00'
340 },
341 {
342 value: '02:00',
343 label: '02:00'
344 }
345 ])
346 const rules = ref({})
347
348 let usedays = 0
349 onMounted(() => {
350 console.log(route.query)
351 room.value = JSON.parse(decodeURIComponent(route.query.room))
352 console.log(room.value)
353 hotelName.value = route.query.hotelName
354 money.value = 0
355 // initDays()
356 })
357
358 function initDays() {
359 getBaseInfoByActiveId(route.params.cptId).then(res => {
360 lform.value = res.data
361 // if(lform.value.hqStart){
362 // const today = dayjs()
363 // if(lform.value.hqStart.slice(0,10)<today.format('YYYY-MM-DD')){
364 // lform.value.hqStart = today.format('YYYY-MM-DD')
365 // }
366 // rzRange.value = [lform.value.hqStart.slice(0,10),lform.value.hqEnd.slice(0,10)]
367 // getDaysBetween(rzRange.value)
368 // }
369 // console.log(rzRange.value,lform.value.hqStart)
370 }).catch(err => {
371 console.log(err)
372 })
373 }
374
375 function disabledDateRZ(date) {
376 //判读今天大与form.value.hqStart
377 if (lform.value.hqStart) {
378 const today = dayjs().format('YYYY-MM-DD')
379 if (lform.value.hqStart < today) {
380 return !((date.getTime() >= dayjs(today).valueOf()) && (date.getTime() <= dayjs(lform.value.hqEnd).valueOf()))
381 } else {
382 return !((date.getTime() >= dayjs(lform.value.hqStart).valueOf()) && (date.getTime() <= dayjs(lform.value.hqEnd).valueOf()))
383 }
384 }
385 return true
386 }
387
388 function changeRoomNum(e) {
389 if (form.value.addNum > e) {
390 form.value.addNum = e
391 }
392 console.log(e)
393 rzUserArr.value.length = e
394 countMoney()
395 }
396
397 function changeAddBed(e) {
398 if (e == '0') {
399 form.value.addNum = 0
400 }
401 changeBed()
402 }
403
404 function changeBed() {
405 countMoney()
406 }
407
408 function checkreRooms() {
409 var obj = {
410 ahrId: room.value.id,
411 rzStart: rzRange.value[0],
412 rzEnd: rzRange.value[1]
413 }
414 checkResidueRoom(obj).then(res => {
415 canOrderNum.value = res.data.useCount
416 })
417 }
418
419 function getDaysBetween(e) {
420 console.log('入住时间arr', e, rzRange.value)
421 var d1 = Date.parse(e[0])
422 var d2 = Date.parse(e[1])
423 if (d1 == d2) {
424 usedays = 0
425 ElMessage.error(language == 0 ? '入住时间跨度需大于一天' : 'The duration of the stay must be more than one day.')
426 // console.trace()
427 rzRange.value = []
428 return
429 } else {
430 var days = (d2 - d1) / (1 * 24 * 60 * 60 * 1000);
431 usedays = days
432 }
433 countMoney()
434 var startTime = getDate(rzRange.value[0]);
435 var endTime = getDate(rzRange.value[1]);
436 var dateArr = [];
437 while ((endTime.getTime() - startTime.getTime()) > 0) {
438 var year = startTime.getFullYear();
439 var month = (startTime.getMonth() + 1).toString().length === 1 ? "0" + (parseInt(startTime.getMonth()
440 .toString(), 10) + 1) : (startTime.getMonth() + 1);
441 var day = startTime.getDate().toString().length === 1 ? "0" + startTime.getDate() : startTime.getDate();
442 dateArr.push(year + "-" + month + "-" + day);
443 startTime.setDate(startTime.getDate() + 1);
444 }
445 choseRooms.value = dateArr;
446 checkreRooms()
447 }
448
449 function getDate(datestr) {
450 var temp = datestr.split("-");
451 if (temp[1] === '01') {
452 temp[0] = parseInt(temp[0], 10) - 1;
453 temp[1] = '12';
454 } else {
455 temp[1] = parseInt(temp[1], 10) - 1;
456 }
457 //new Date()的月份入参实际都是当前值-1
458 var date = new Date(temp[0], temp[1], temp[2]);
459 return date
460 }
461
462 function countMoney() {
463 if (language.value == 0) {
464 money.value = ((room.value.roomPrice * form.value.roomNum * usedays) + (room.value.bedPrice * form.value
465 .addNum * usedays)).toFixed(2)
466
467 } else {
468 money.value = ((room.value.roomPriceEn * form.value.roomNum * usedays) + (room.value.bedPriceEn * form.value
469 .addNum * usedays)).toFixed(2)
470 }
471 // console.log(usedays,money.value)
472 }
473
474 function submit() {
475 if (!user) {
476 useUserStore().setReLogin()
477 return
478 }
479
480 if (usedays == 0) {
481 ElMessage.warning(language.value == 0 ? '入住时间跨度需大于一天' : 'Check-in time must be greater than one day')
482 return
483 }
484 if (form.value.roomNum == 0) {
485 ElMessage.warning(language.value == 0 ? '请选择房间数量' : 'Please select the number of rooms')
486 return
487 }
488 if (!form.value.phone) {
489 ElMessage.warning(language.value == 0 ? '请填写手机号' : 'Please fill in the phone number')
490 return
491 }
492 form.value.rzStart = rzRange.value[0]
493 form.value.rzEnd = rzRange.value[1]
494
495
496 let arr = []
497 for (var n of rzUserArr.value) {
498 if (n == '' || n == undefined) {
499
500 // '请填写入住人信息'
501 ElMessage.warning(language.value == 0 ? '请填写入住人信息' : 'Please fill in the check-in information')
502
503 return
504 } else {
505 arr.push(n)
506 }
507 }
508 form.value.rzUsers = arr.toString()
509 form.value.activeId = room.value.activityId
510 form.value.ahId = room.value.hotelId
511 form.value.ahrId = room.value.id
512 form.value.orderName = hotelName.value
513 form.value.roomName = room.value.roomType
514 form.value.roomPhoto = room.value.photo
515 var str = ''
516 var str2 = ''
517 if (language.value == 0) {
518 if (form.value.addNum && form.value.addNum > 0) {
519 str = `加床${form.value.addNum}张`
520 } else {
521 str = `未加床`
522 }
523 if (room.value.breakfastNum && room.value.breakfastNum > 0) {
524 str2 = `${room.value.breakfastNum}份早餐`
525 } else {
526 str2 = `无早餐`
527 }
528 form.value.room = `${form.value.roomNum} 间 · ${usedays}晚 · ${str} · ${str2}`
529 console.log(form.value.room)
530 }
531 if (language.value == 1) {
532 if (form.value.addNum && form.value.addNum > 0) {
533 str = `have ${form.value.addNum} extra bed`
534 } else {
535 str = `No extra bed`
536 }
537 if (room.value.breakfastNum && room.value.breakfastNum > 0) {
538 str2 = `${room.value.breakfastNum} breakfast`
539 } else {
540 str2 = `No breakfast`
541 }
542 form.value.room = `${form.value.roomNum} rooms · ${usedays} night·${str}·${str2}`
543 console.log(form.value.room)
544 }
545
546
547 // 提交确认
548 ElMessageBox.confirm(language.value == 0 ? '确认提交订单吗？' : 'Confirm to submit the order?', {
549 confirmButtonText: language.value == 0 ? '确定' : 'Confirm',
550 cancelButtonText: language.value == 0 ? '取消' : 'Cancel',
551 type: 'warning'
552 }).then(() => {
553 newsSubmitOrderHotel(form.value).then(res => {
554 if (res.data) {
555 if (res.data.roomNum == -100) {
556 ElMessage.warning(language.value == 0 ? '剩余房间数不足' : 'The remaining number of rooms is insufficient')
557 checkreRooms()
558 } else {
559 //去付钱
560 router.push({
561 name: 'bookingPay',
562 query: {
563 orderId: res.data.orderId,
564 money: res.data.total,
565 type: 'hotel'
566 }
567 })
568 }
569 } else {
570 ElMessage.warning(language.value == 0 ? '无可预订的房间' : 'No rooms available to book')
571 }
572 }).catch(err => {
573 ElMessage.warning(language.value == 0 ? '无可预订的房间' : 'No rooms available to book')
574 })
575 })
576 }
577
578 </script>
579
580 <style scoped lang="scss">
581 .bigMoney {
582 font-size: 36px !important;
583 font-family: 'DIN Alternate';
584 font-weight: bold;
585 }
586
587 .bg-lineg {
588 height: 40px;
589 line-height: 40px;
590 font-size: 18px;
591 text-align: center;
592 }
593
594 .leftboderTT {
595 font-weight: 600;
596 font-size: 16px;
597 color: #453DEA;
598 }
599
600 .order-header{
601 padding:22px 33px 0 22px;
602 border: 1px solid #453DEA;
603 background-color: rgba(69,61,234,0.04);
604 .title{
605 font-weight: 500;
606 font-size: 24px;
607 color: #000000;
608 margin-bottom: 10px;
609 }
610
611 }
612
613 .border-rr {
614 border-radius: 5px;
615 border: 1px solid #DCDFE6;
616 }
617
618 .ccitemBox {
619 overflow: auto;
620
621 label {
622 margin: 10px 0;
623 display: block;
624 min-height: 30px;
625
626 span {
627 color: #FF8124;
628 font-family: DIN Alternate;
629 font-size: 24px;
630 }
631 }
632 }
633
634
635
636 .red {
637 color: #FF8124;
638 }
639
640 .tip {
641 font-size: 14px;
642 color: #666;
643 padding: 0 10px;
644 }
645 .form-order{
646 border: 1px solid #DCDFE6;
647 padding: 23px 0;
648 }
649
650 .yu{
651 font-size: 16px;
652 color: #453DEA;
653 border-left: 8px solid #453DEA;
654 padding-left: 10px;
655 font-weight: 600;
656 }
657
658 .table{
659 font-size: 14px;
660 color: #000;
661 font-weight: 400;
662 padding: 19px 0;
663 .span{
664 color: #4C5359;
665 }
666 }
667
668 </style>
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!