Skip to content

jijin / dance-pc

Go to a project
Toggle navigation
Toggle navigation pinning
136529c9 by zhangmeng
Options

化妆

1 parent 864e02a7
Inline Side-by-side
Showing 3 changed files with 282 additions and 217 deletions
src/viewsPc/booking/component/makeUpCalendar.vue
1 <template> 1 <template>
2 <div > 2 <div>
3 <el-calendar v-model="currentDate" :range="calendarRange"> 3 <el-calendar v-model="currentDate" :range="calendarRange">
4 <template #header="{date}"> 4 <template #header="{date}">
5 <el-row style="width: 100%"> 5 <el-row style="width: 100%">
6 <el-col :lg="7" class="forPc"> 6 <el-col :lg="7" class="forPc" />
7 </el-col>
8 <el-col :lg="10" class="forPc"> 7 <el-col :lg="10" class="forPc">
9 <el-row justify="center" align='middle'> 8 <el-row align="middle" justify="center">
10 <!-- <div class="canBtn"><el-icon><ArrowLeftBold /></el-icon></div>--> 9 <!-- <div class="canBtn"><el-icon><ArrowLeftBold /></el-icon></div>-->
11 <div class="cTitle"> 10 <div class="cTitle">
12 <!-- <el-date-picker--> 11 <!-- <el-date-picker-->
13 <!-- v-model="value2"--> 12 <!-- v-model="value2"-->
14 <!-- type="daterange"--> 13 <!-- type="daterange"-->
15 <!-- range-separator="-"--> 14 <!-- range-separator="-"-->
16 <!-- start-placeholder="Start date"--> 15 <!-- start-placeholder="Start date"-->
17 <!-- end-placeholder="End date"--> 16 <!-- end-placeholder="End date"-->
18 <!-- format="YYYY-MM-DD"--> 17 <!-- format="YYYY-MM-DD"-->
19 <!-- value-format="YYYY-MM-DD"--> 18 <!-- value-format="YYYY-MM-DD"-->
20 <!-- size="small"--> 19 <!-- size="small"-->
21 <!-- @change="changee"--> 20 <!-- @change="changee"-->
22 <!-- />--> 21 <!-- />-->
23 <!-- <el-input readonly :value="date" type="text" size="small" style="width: 280px"></el-input>--> 22 <!-- <el-input readonly :value="date" type="text" size="small" style="width: 280px"></el-input>-->
24 {{date}} 23 {{ date }}
25 </div> 24 </div>
26 <!-- <div class="canBtn"><el-icon><ArrowRightBold /></el-icon></div>--> 25 <!-- <div class="canBtn"><el-icon><ArrowRightBold /></el-icon></div>-->
27 </el-row> 26 </el-row>
28 </el-col> 27 </el-col>
29 <el-col :lg="7" :xs="24"> 28 <el-col :lg="7" :xs="24">
30 <div style="text-align: right;padding-right: 10px"> 29 <div style="text-align: right;padding-right: 10px">
31 <el-date-picker 30 <el-date-picker
32 v-model="currentDate1" 31 v-model="currentDate1"
33 type="date" 32 :clearable="false"
34 placeholder="YYYY-MM-DD" 33 :disabled-date="disabledDateRZ"
35 format="YYYY-MM-DD" 34 format="YYYY-MM-DD"
35 placeholder="YYYY-MM-DD"
36 size="small" 36 size="small"
37 type="date"
37 @change="dateChange" 38 @change="dateChange"
38 :disabled-date="disabledDateRZ"
39 :clearable='false'
40 /> 39 />
41 </div> 40 </div>
42 </el-col> 41 </el-col>
43 </el-row> 42 </el-row>
44 </template> 43 </template>
45 <template #date-cell="data"> 44 <template #date-cell="data">
46 <div :class="data.data.day==query.currentDate?'primaryDate date':'date'" @click="selectDate(data.data.day)"> 45 <div :class="data.data.day==query.currentDate?'primaryDate date':'date'" @click="selectDate(data.data.day)">
47 {{ data.data.day.slice(8, 10) }} 46 {{ data.data.day.slice(8, 10) }}
48 </div> 47 </div>
49 </template> 48 </template>
50 </el-calendar> 49 </el-calendar>
51 50
52 <div class="calendarList"> 51 <div class="calendarList">
53 <ul v-loading="loading"> 52 <ul v-loading="loading">
54 <li v-for="n in schList" :key="n.id" > 53 <li v-for="n in schList" :key="n.id">
55 <el-row :gutter="15" align="top"> 54 <el-row :gutter="15" align="top">
56 <el-col :lg="3" :sm="6" :xs="6"> 55 <el-col :lg="3" :sm="6" :xs="6">
57 <el-image style="width: 90px;height: 115px;max-width: 100%;" :src="fillImgUrl(n.photos?.split(',')[0]) " 56 <el-image
58 fit="contain" /> 57 :src="fillImgUrl(n.photos?.split(',')[0]) " fit="contain"
58 style="width: 90px;height: 115px;max-width: 100%;"
59 />
59 </el-col> 60 </el-col>
60 <el-col :lg="21" :sm="18" :xs="18"> 61 <el-col :lg="21" :sm="18" :xs="18">
61 <el-row class="hz-title">{{ n.name }}</el-row> 62 <el-row class="hz-title">{{ n.name }}</el-row>
62 <el-row justify="space-between" class="hz-p" :gutter="15" align="middle"> 63 <el-row :gutter="15" align="middle" class="hz-p" justify="space-between">
63 <el-col :lg="5" :sm="6" :xs="24"> 64 <el-col :lg="5" :sm="6" :xs="24">
64 <div @click="hazelView(n)" class="forPc" :class="{esp_3:n.active}" > 65 <div :class="{esp_3:n.active}" class="forPc" @click="hazelView(n)">
65 {{ language==0?'套餐说明':'Package Description' }}: 66 {{ language == 0 ? '套餐说明' : 'Package Description' }}:
66 <span style="margin-right: 20px">{{n.introduction}}</span> 67 <span style="margin-right: 20px">{{ n.introduction }}</span>
67 </div> 68 </div>
68 <div @click="hazelView(n)" class="forWei" :class="{esp:n.active}" > 69 <div :class="{esp:n.active}" class="forWei" @click="hazelView(n)">
69 {{ language==0?'套餐说明':'Package Description' }}: 70 {{ language == 0 ? '套餐说明' : 'Package Description' }}:
70 <span style="margin-right: 20px">{{n.introduction}}</span> 71 <span style="margin-right: 20px">{{ n.introduction }}</span>
71 </div> 72 </div>
72 </el-col> 73 </el-col>
73 74
74 <el-col :lg="4" :sm="6" :xs="24"> 75 <el-col :lg="4" :sm="6" :xs="24">
75 <div>{{ language==0?'剩余':'' }}<span class="sign">{{ n.num-n.counts }}</span>{{language==0?'名额':'Places Remaining' }} </div> 76 <div>{{ language == 0 ? '剩余' : '' }}<span class="sign">{{
76 </el-col> 77 n.num - n.counts
77 <el-col :lg="5" :sm="6" :xs="24"> 78 }}</span>{{ language == 0 ? '名额' : 'Places Remaining' }}
78 <div v-if="language==0" class="esp">地点:{{n.address}}</div> 79 </div>
79 <div v-else class="esp">address:{{n.addressEn}}</div> 80 </el-col>
80 </el-col> 81 <el-col :lg="5" :sm="6" :xs="24">
81 82 <div v-if="language==0" class="esp">地点:{{ n.address }}</div>
82 <el-col :lg="4" :sm="12" :xs="12" class="zh-margin"> 83 <div v-else class="esp">address:{{ n.addressEn }}</div>
83 <span style="font-size: 24px">{{ language==0?'¥':'€'}} </span> 84 </el-col>
84 {{language==0?n.mealPrice:n.mealPriceEn}} 85
85 </el-col> 86 <el-col :lg="4" :sm="12" :xs="12" class="zh-margin">
86 <el-col :lg="6" :sm="12" :xs="12" class="forPc"> 87 <span style="font-size: 24px">{{ language == 0 ? '¥' : '€' }} </span>
87 <el-button :disabled="n.num-n.counts<=0||Date.now()>dayjs(currentDate).subtract(-1,'day').valueOf()" 88 {{ language == 0 ? n.mealPrice : n.mealPriceEn }}
88 class="btn-lineG w200px mauto" round type="primary" size="large" @click="goMatch(n)">{{ language==0?'立即预约':'Select' }} ⇀</el-button> 89 </el-col>
89 </el-col> 90 <el-col :lg="6" :sm="12" :xs="12" class="forPc">
90 <el-col :lg="6" :sm="12" :xs="12" class="forWei"> 91 <el-button
91 <el-button :disabled="n.num-n.counts<=0||Date.now()>dayjs(currentDate).subtract(-1,'day').valueOf()" 92 :disabled="n.num-n.counts<=0||Date.now()>dayjs(currentDate).subtract(-1,'day').valueOf()"
92 class="btn-lineG forWei mt10" round type="primary" size="small" @click="goMatch(n)">{{ language==0?'立即预约':'Select' }} ⇀</el-button> 93 class="btn-lineG w200px mauto" round size="large" type="primary" @click="goMatch(n)"
93 </el-col> 94 >
95 {{ language == 0 ? '立即预约' : 'Select' }} ⇀
96 </el-button>
97 </el-col>
98 <el-col :lg="6" :sm="12" :xs="12" class="forWei">
99 <el-button
100 :disabled="n.num-n.counts<=0||Date.now()>dayjs(currentDate).subtract(-1,'day').valueOf()"
101 class="btn-lineG forWei mt10" round size="small" type="primary" @click="goMatch(n)"
102 >
103 {{ language == 0 ? '立即预约' : 'Select' }} ⇀
104 </el-button>
105 </el-col>
94 </el-row> 106 </el-row>
95 </el-col> 107 </el-col>
96 </el-row> 108 </el-row>
97 </li> 109 </li>
98 </ul> 110 </ul>
99 <el-empty v-if="schList.length== 0" 111 <el-empty
100 style="--el-empty-padding:0;--el-empty-description-margin-top:0" 112 v-if="schList.length== 0"
101 :image="`/img/order_no.png`" 113 :image="`/img/order_no.png`"
102 :image-size="200"/> 114 :image-size="200"
115 style="--el-empty-padding:0;--el-empty-description-margin-top:0"
116 />
103 </div> 117 </div>
104 <Dailog ref="dialogRef"></Dailog> 118 <Dailog ref="dialogRef" />
105 </div> 119 </div>
106 </template> 120 </template>
107 121
108 <script setup> 122 <script setup>
109 import {ref,onMounted,getCurrentInstance} from "vue"; 123 import { ref, onMounted, getCurrentInstance } from 'vue'
110 import {dayjs} from "element-plus"; 124 import { dayjs } from 'element-plus'
111 import {useRoute,useRouter} from 'vue-router' 125 import { useRoute, useRouter } from 'vue-router'
112 import * as booking from "@/apiPc/booking" 126 import * as booking from '@/apiPc/booking'
113 import {useStorage} from "@vueuse/core/index"; 127 import { useStorage } from '@vueuse/core/index'
114 import useUserStore from "/@/store/modules/user"; 128 import useUserStore from '/@/store/modules/user'
115 import {getBaseInfoByActiveId} from "@/apiPc/booking"; 129 import { getBaseInfoByActiveId } from '@/apiPc/booking'
116 import{ElMessageBox} from 'element-plus' 130 import { ElMessageBox } from 'element-plus'
117 import Dailog from "/@/viewsPc/booking/component/dailog.vue"; 131 import Dailog from '/@/viewsPc/booking/component/dailog.vue'
132
118 const user = useUserStore().user 133 const user = useUserStore().user
119 const language = useStorage('language', 0) 134 const language = useStorage('language', 0)
120 const router = useRouter() 135 const router = useRouter()
121 const route=useRoute() 136 const route = useRoute()
122 const currentDate = ref(new Date()) 137 const currentDate = ref(new Date())
123 const currentDate1 = ref(new Date()) 138 const currentDate1 = ref(new Date())
124 const calendarRange = ref([dayjs(currentDate.value).toDate(),(dayjs(currentDate.value).toDate())]) 139 const calendarRange = ref([dayjs(currentDate.value).toDate(), (dayjs(currentDate.value).toDate())])
125 const schList = ref([]) 140 const schList = ref([])
126 const loading = ref(false) 141 const loading = ref(false)
127 const formTime=ref() 142 const formTime = ref()
128 const {proxy} = getCurrentInstance() 143 const { proxy } = getCurrentInstance()
129 const query = ref({ 144 const query = ref({
130 lasId:route.params.id, 145 lasId: route.params.id
131 }) 146 })
132 const value2=ref('') 147 const value2 = ref('')
133 148
134 onMounted(() => { 149 onMounted(() => {
135 getBaseInfoByActiveId(route.params.cptId).then(res=>{ 150 getBaseInfoByActiveId(route.params.cptId).then(res => {
136 formTime.value = res.data || null 151 formTime.value = res.data || null
137 }).catch(err=>{ 152 }).catch(err => {
138 console.log(err) 153 console.log(err)
139 formTime.value = null 154 formTime.value = null
140 }).finally(()=>{ 155 }).finally(() => {
141 getData() 156 getData()
142 getScheduleList() 157 getScheduleList()
143 }) 158 })
144 }) 159 })
145 160
146 function getData(){ 161 function getData() {
147 if (!formTime.value.mealStart) return 162 if (!formTime.value.mealStart) return
148 const toDay=dayjs(dayjs().format('YYYY-MM-DD')).valueOf() 163 const toDay = dayjs(dayjs().format('YYYY-MM-DD')).valueOf()
149 const start=dayjs(formTime.value.mealStart).valueOf() 164 const start = dayjs(formTime.value.mealStart).valueOf()
150 if(toDay<start){ 165 if (toDay < start) {
151 currentDate.value= currentDate1.value= query.value.currentDate = dayjs(start).format('YYYY-MM-DD') 166 currentDate.value = currentDate1.value = query.value.currentDate = dayjs(start).format('YYYY-MM-DD')
152 }else{ 167 } else {
153 currentDate.value= currentDate1.value = query.value.currentDate = dayjs(toDay).format('YYYY-MM-DD') 168 currentDate.value = currentDate1.value = query.value.currentDate = dayjs(toDay).format('YYYY-MM-DD')
154 } 169 }
155 calendarRange.value=[dayjs(currentDate.value).toDate(),(dayjs(currentDate.value).toDate())] 170 calendarRange.value = [dayjs(currentDate.value).toDate(), (dayjs(currentDate.value).toDate())]
156 } 171 }
157 172
158 function getScheduleList() { 173 function getScheduleList() {
159 loading.value = true 174 loading.value = true
160 query.value.currentDate = dayjs(currentDate.value).format('YYYY-MM-DD') 175 query.value.currentDate = dayjs(currentDate.value).format('YYYY-MM-DD')
161 if(!query.value.currentDate)return proxy.$message.error('请选择时间') 176 if (!query.value.currentDate) return proxy.$message.error('请选择时间')
162 booking.getActivityMealVoListByStudioId(query.value).then(res=>{ 177 booking.getActivityMealVoListByStudioId(query.value).then(res => {
163 loading.value = false 178 loading.value = false
164 schList.value = res.data 179 schList.value = res.data
165 schList.value.forEach(item=>item.active=true) 180 schList.value.forEach(item => item.active = true)
166 }) 181 })
167 } 182 }
168 183
169 function disabledDateRZ(date) { 184 function disabledDateRZ(date) {
170 if (formTime.value) { 185 if (formTime.value) {
171 const toDay=dayjs(dayjs().format('YYYY-MM-DD')).valueOf() 186 const toDay = dayjs(dayjs().format('YYYY-MM-DD')).valueOf()
172 const start=dayjs(formTime.value.mealStart).valueOf() 187 const start = dayjs(formTime.value.mealStart).valueOf()
173 const end=dayjs(formTime.value.mealEnd).valueOf() 188 const end = dayjs(formTime.value.mealEnd).valueOf()
174 if (toDay<start) { 189 if (toDay < start) {
175 return date.getTime()<start||date.getTime()>end 190 return date.getTime() < start || date.getTime() > end
176 } else if(toDay>start&&toDay <end) { 191 } else if (toDay > start && toDay < end) {
177 return date.getTime()<toDay||date.getTime()>end 192 return date.getTime() < toDay || date.getTime() > end
178 }else return true 193 } else return true
179 } 194 }
180 } 195 }
181 196
182 function selectDate(date) { 197 function selectDate(date) {
183 currentDate1.value= currentDate.value=dayjs(date).toDate() 198 currentDate1.value = currentDate.value = dayjs(date).toDate()
184 console.log(date) 199 console.log(date)
185 getScheduleList() 200 getScheduleList()
186 } 201 }
187 202
188 function dateChange(){ 203 function dateChange() {
189 currentDate.value=currentDate1.value 204 currentDate.value = currentDate1.value
190 calendarRange.value=[dayjs(currentDate.value).toDate(),(dayjs(currentDate.value).toDate())] 205 calendarRange.value = [dayjs(currentDate.value).toDate(), (dayjs(currentDate.value).toDate())]
191 getScheduleList() 206 getScheduleList()
192 } 207 }
193 208
194 function hazelView(n){ 209 function hazelView(n) {
195 proxy.$refs['dialogRef'].open(n.details) 210 proxy.$refs['dialogRef'].open(n.details)
196 } 211 }
197 212
198 function goMatch(n) { 213 async function goMatch(n) {
214 const { data } = await getBaseInfoByActiveId(route.params.cptId)
215 if (data.isMealView == 0) {
216 return proxy.$modal.confirm(language.value == 0 ? '感谢您对本次比赛的关注，该服务暂无可预订信息，敬请期待。' : 'Thank you for your attention to this competition. The service is currently unavailable for booking. Please stay tuned.')
217 }
199 if (!user) { 218 if (!user) {
200 useUserStore().setVisitor() 219 useUserStore().setVisitor()
201 return 220 return
202 } 221 }
203 222
204 ElMessageBox.confirm(language.value==0?`你当前所预约的时间为${query.value.currentDate}是否确定？`:`Your current appointment is ${query.value.currentDate}. Are you sure?`,{type:'warning'}) 223 ElMessageBox.confirm(language.value == 0 ? `你当前所预约的时间为${query.value.currentDate}是否确定？` : `Your current appointment is ${query.value.currentDate}. Are you sure?`, { type: 'warning' })
205 .then(() => { 224 .then(() => {
206 router.push({ 225 router.push({
207 name: 'makeUpOrder', 226 name: 'makeUpOrder',
...@@ -216,52 +235,52 @@ function goMatch(n) { ...@@ -216,52 +235,52 @@ function goMatch(n) {
216 .catch(() => { 235 .catch(() => {
217 // catch error 236 // catch error
218 }) 237 })
219
220
221
222 } 238 }
223 239
224 </script> 240 </script>
225 241
226 <style scoped lang="scss"> 242 <style lang="scss" scoped>
227 .forWei{display: none} 243 .forWei {
244 display: none
245 }
246
228 .el-calendar { 247 .el-calendar {
229 --el-calendar-border: none; 248 --el-calendar-border: none;
230 --el-calendar-cell-width: 40px; 249 --el-calendar-cell-width: 40px;
231 text-align: center; 250 text-align: center;
232 --el-text-color-regular: #8E8D94; 251 --el-text-color-regular: #8E8D94;
233 252
234 :deep(.el-calendar__header) { 253 :deep(.el-calendar__header) {
235 justify-content: center; 254 justify-content: center;
236 padding: 0 0 10px 255 padding: 0 0 10px
237 } 256 }
238 257
239 :deep(.el-calendar__body) { 258 :deep(.el-calendar__body) {
240 border: 1px solid #F0F0F0; 259 border: 1px solid #F0F0F0;
241 padding: 0 260 padding: 0
242 } 261 }
243 262
244 :deep(.el-calendar-table .el-calendar-day) { 263 :deep(.el-calendar-table .el-calendar-day) {
245 padding: 1px; 264 padding: 1px;
246 } 265 }
247 266
248 :deep(.el-calendar-table td.is-selected) { 267 :deep(.el-calendar-table td.is-selected) {
249 background: transparent; 268 background: transparent;
250 } 269 }
251 270
252 :deep(.el-calendar__button-group) { 271 :deep(.el-calendar__button-group) {
253 display: none; 272 display: none;
254 } 273 }
255 274
256 :deep(.el-calendar-table thead th) { 275 :deep(.el-calendar-table thead th) {
257 padding: 5px 0 0 276 padding: 5px 0 0
258 } 277 }
259 278
260 .primaryDate { 279 .primaryDate {
261 color: #fff; 280 color: #fff;
262 background: linear-gradient(90deg, #8623FC, #453DEA); 281 background: linear-gradient(90deg, #8623FC, #453DEA);
263 } 282 }
264 283
265 .date { 284 .date {
266 margin: auto; 285 margin: auto;
267 border-radius: 50%; 286 border-radius: 50%;
...@@ -277,9 +296,10 @@ function goMatch(n) { ...@@ -277,9 +296,10 @@ function goMatch(n) {
277 padding: 12px 20px; 296 padding: 12px 20px;
278 overflow: auto; 297 overflow: auto;
279 height: 625px; 298 height: 625px;
280 299
281 ul { 300 ul {
282 li {cursor: pointer; 301 li {
302 cursor: pointer;
283 background: #F6F9FE; 303 background: #F6F9FE;
284 margin: 7px 0 7px 20px; 304 margin: 7px 0 7px 20px;
285 position: relative; 305 position: relative;
...@@ -287,11 +307,11 @@ function goMatch(n) { ...@@ -287,11 +307,11 @@ function goMatch(n) {
287 border-radius: 10px; 307 border-radius: 10px;
288 font-weight: 500; 308 font-weight: 500;
289 font-size: 15px; 309 font-size: 15px;
290 310
291 label { 311 label {
292 color: #453DEA; 312 color: #453DEA;
293 margin-right: 15px; 313 margin-right: 15px;
294 314
295 &::before { 315 &::before {
296 content: ''; 316 content: '';
297 background: #fff; 317 background: #fff;
...@@ -307,7 +327,7 @@ function goMatch(n) { ...@@ -307,7 +327,7 @@ function goMatch(n) {
307 } 327 }
308 } 328 }
309 } 329 }
310 330
311 li::before { 331 li::before {
312 content: ''; 332 content: '';
313 background: linear-gradient(0deg, #8623FC, #453DEA); 333 background: linear-gradient(0deg, #8623FC, #453DEA);
...@@ -321,7 +341,7 @@ function goMatch(n) { ...@@ -321,7 +341,7 @@ function goMatch(n) {
321 margin: auto; 341 margin: auto;
322 z-index: 1; 342 z-index: 1;
323 } 343 }
324 344
325 li::after { 345 li::after {
326 content: ''; 346 content: '';
327 left: -16px; 347 left: -16px;
...@@ -331,7 +351,7 @@ function goMatch(n) { ...@@ -331,7 +351,7 @@ function goMatch(n) {
331 position: absolute; 351 position: absolute;
332 top: 20px 352 top: 20px
333 } 353 }
334 354
335 //li:hover { 355 //li:hover {
336 // color: #fff; 356 // color: #fff;
337 // background: linear-gradient(-90deg, #8623FC, #453DEA); 357 // background: linear-gradient(-90deg, #8623FC, #453DEA);
...@@ -343,19 +363,20 @@ function goMatch(n) { ...@@ -343,19 +363,20 @@ function goMatch(n) {
343 } 363 }
344 } 364 }
345 365
346 .hz-title{ 366 .hz-title {
347 font-size: 20px; 367 font-size: 20px;
348 font-weight: 400; 368 font-weight: 400;
349 color: #000; 369 color: #000;
350 margin-bottom: 10px; 370 margin-bottom: 10px;
351 } 371 }
352 372
353 .zh-margin{ 373 .zh-margin {
354 font-weight: bold; 374 font-weight: bold;
355 font-size: 32px; 375 font-size: 32px;
356 color: #FF8124; 376 color: #FF8124;
357 } 377 }
358 .hz-p{ 378
379 .hz-p {
359 font-size: 15px; 380 font-size: 15px;
360 color: #4C5359; 381 color: #4C5359;
361 font-weight: 400; 382 font-weight: 400;
...@@ -367,7 +388,7 @@ function goMatch(n) { ...@@ -367,7 +388,7 @@ function goMatch(n) {
367 line-height: 50px; 388 line-height: 50px;
368 } 389 }
369 390
370 .canBtn{ 391 .canBtn {
371 color: #453DEA; 392 color: #453DEA;
372 border-radius: 2px; 393 border-radius: 2px;
373 width: 22px; 394 width: 22px;
...@@ -376,25 +397,41 @@ function goMatch(n) { ...@@ -376,25 +397,41 @@ function goMatch(n) {
376 text-align: center; 397 text-align: center;
377 background-color: #fff; 398 background-color: #fff;
378 margin: 0 16px -2px 16px; 399 margin: 0 16px -2px 16px;
379 cursor:pointer 400 cursor: pointer
380 } 401 }
381 402
382 .cTitle{ 403 .cTitle {
383 color: #fff; 404 color: #fff;
384 font-size: 20px; 405 font-size: 20px;
385 font-weight: 500; 406 font-weight: 500;
386 } 407 }
387 408
388 @media screen and (max-width: 768px) { 409 @media screen and (max-width: 768px) {
389 .forPc{display: none!important;} 410 .forPc {
390 .forWei{display: block} 411 display: none !important;
391 .hz-title{font-size: 16px} 412 }
392 .hz-p{font-size: 12px;} 413 .forWei {
393 .zh-margin{font-size: 20px; 414 display: block
394 span{font-size: 16px!important;}
395 } 415 }
396 .calendarList{padding: 0; 416 .hz-title {
397 ul li{margin: 0} 417 font-size: 16px
418 }
419 .hz-p {
420 font-size: 12px;
421 }
422 .zh-margin {
423 font-size: 20px;
424
425 span {
426 font-size: 16px !important;
427 }
428 }
429 .calendarList {
430 padding: 0;
431
432 ul li {
433 margin: 0
434 }
398 } 435 }
399 } 436 }
400 </style> 437 </style>
......
src/viewsPc/booking/makeUpDetail.vue
...@@ -5,48 +5,53 @@ ...@@ -5,48 +5,53 @@
5 <el-row> 5 <el-row>
6 <div class="zh-title">{{ form.name }}</div> 6 <div class="zh-title">{{ form.name }}</div>
7 <div class="tagbox esp"> 7 <div class="tagbox esp">
8 <span v-for="(t,index) in form.label?.split('，')" v-show="index<4">{{t}}</span> 8 <span v-for="(t,index) in form.label?.split('，')" v-show="index<4">{{ t }}</span>
9 </div> 9 </div>
10 </el-row> 10 </el-row>
11 <el-row class="hz-row"> 11 <el-row class="hz-row">
12 <el-icon size="16" style="position: relative;top: 2px" color="#929AA0"> 12 <el-icon color="#929AA0" size="16" style="position: relative;top: 2px">
13 <OfficeBuilding/> 13 <OfficeBuilding />
14 </el-icon> 14 </el-icon>
15 {{ language==0?'成立':'Established for'}} <span class="sign">{{form.ageLimit}}</span>{{language==0?'年':'years'}} &nbsp;&nbsp;&nbsp;&nbsp; |&nbsp;&nbsp;&nbsp;&nbsp; 15 {{ language == 0 ? '成立' : 'Established for' }} <span
16 <el-icon size="16" style="position: relative;top: 2px" color="#929AA0"> 16 class="sign"
17 <UserFilled/> 17 >{{ form.ageLimit }}</span>{{ language == 0 ? '年' : 'years' }} &nbsp;&nbsp;&nbsp;&nbsp; |&nbsp;&nbsp;&nbsp;&nbsp;
18 <el-icon color="#929AA0" size="16" style="position: relative;top: 2px">
19 <UserFilled />
18 </el-icon> 20 </el-icon>
19 <span class="sign"> {{ form.dresserLimit }}</span>{{language==0?'名化妆师':'makeup artists' }}&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp; 21 <span class="sign"> {{ form.dresserLimit }}</span>{{ language == 0 ? '名化妆师' : 'makeup artists' }}&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
20 <el-icon size="16" style="position: relative;top: 2px" color="#929AA0"> 22 <el-icon color="#929AA0" size="16" style="position: relative;top: 2px">
21 <PhoneFilled/> 23 <PhoneFilled />
22 </el-icon> 24 </el-icon>
23 <span style="padding-top: 2px"> 25 <span style="padding-top: 2px">
24 {{ form.contact }} 26 {{ form.contact }}
25 </span> 27 </span>
26 &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp; 28 &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
27 <el-icon size="16" style="position: relative;top: 2px" color="#929AA0"> 29 <el-icon color="#929AA0" size="16" style="position: relative;top: 2px">
28 <LocationFilled/> 30 <LocationFilled />
29 </el-icon> 31 </el-icon>
30 {{form.remarks}} 32 {{ form.remarks }}
31 </el-row> 33 </el-row>
32 34
33 <div style="display: flex"> 35 <div style="display: flex">
34 <div style="min-width: 130px" class="title forPc">{{language==0?'工作室简介:':'Studio profile:'}}</div> 36 <div class="title forPc" style="min-width: 130px">{{ language == 0 ? '工作室简介:' : 'Studio profile:' }}
35 <div v-html="form.introduction"></div> 37 </div>
38 <div v-html="form.introduction" />
36 </div> 39 </div>
37 </el-card> 40 </el-card>
38 41
39 <div class="mt30"> 42 <div class="mt30">
40 <el-row :gutter="20"> 43 <el-row :gutter="20">
41 <el-col :span="10"> 44 <el-col :span="10">
42 <div class="imgbox hotelImg"> 45 <div class="imgbox hotelImg">
43 <el-image :src="form?.photosList?.[0]" fit="cover" :preview-src-list="form?.photosList"/> 46 <el-image :preview-src-list="form?.photosList" :src="form?.photosList?.[0]" fit="cover" />
44 </div> 47 </div>
45 </el-col> 48 </el-col>
46 <el-col :span="14"> 49 <el-col :span="14">
47 <el-row class="h100" :gutter="20"> 50 <el-row :gutter="20" class="h100">
48 <el-col :span="8" class="oddmb" v-for="(p,index) in form?.photosList?.slice(1,7)"> 51 <el-col v-for="(p,index) in form?.photosList?.slice(1,7)" :span="8" class="oddmb">
49 <div class="imgbox hotelImg"><el-image :src="p" fit="cover"/></div> 52 <div class="imgbox hotelImg">
53 <el-image :src="p" fit="cover" />
54 </div>
50 </el-col> 55 </el-col>
51 </el-row> 56 </el-row>
52 </el-col> 57 </el-col>
...@@ -54,22 +59,23 @@ ...@@ -54,22 +59,23 @@
54 </div> 59 </div>
55 <br> 60 <br>
56 <el-card :body-style="{'padding':'20px 20px'}"> 61 <el-card :body-style="{'padding':'20px 20px'}">
57 <MakeUpCalendar/> 62 <MakeUpCalendar />
58 </el-card> 63 </el-card>
59 64
60 </div> 65 </div>
61 </div> 66 </div>
62 </template> 67 </template>
63 68
64 <script setup > 69 <script setup>
65 import {useRouter} from "vue-router"; 70 import { useRouter } from 'vue-router'
66 import {ref, reactive, onMounted} from "vue"; 71 import { ref, reactive, onMounted } from 'vue'
67 import {useRoute} from "vue-router"; 72 import { useRoute } from 'vue-router'
68 import * as booking from "@/apiPc/booking" 73 import * as booking from '@/apiPc/booking'
69 import {useStorage} from "@vueuse/core/index"; 74 import { useStorage } from '@vueuse/core/index'
70 import useUserStore from "@/store/modules/user"; 75 import useUserStore from '@/store/modules/user'
71 import MakeUpCalendar from "@/viewsPc/booking/component/makeUpCalendar.vue"; 76 import MakeUpCalendar from '@/viewsPc/booking/component/makeUpCalendar.vue'
72 import {fillImgUrl} from "/@/utils/ruoyi"; 77 import { fillImgUrl } from '/@/utils/ruoyi'
78
73 const user = useUserStore().user 79 const user = useUserStore().user
74 const language = useStorage('language', 0) 80 const language = useStorage('language', 0)
75 const router = useRouter() 81 const router = useRouter()
...@@ -77,7 +83,7 @@ const route = useRoute() ...@@ -77,7 +83,7 @@ const route = useRoute()
77 const form = ref({}) 83 const form = ref({})
78 const query = ref({ 84 const query = ref({
79 activityId: route.params.cptId, 85 activityId: route.params.cptId,
80 id:route.params.id 86 id: route.params.id
81 }) 87 })
82 const loading = ref(false) 88 const loading = ref(false)
83 onMounted(() => { 89 onMounted(() => {
...@@ -89,8 +95,8 @@ function getData() { ...@@ -89,8 +95,8 @@ function getData() {
89 booking.makeUpDetail(query.value).then(res => { 95 booking.makeUpDetail(query.value).then(res => {
90 loading.value = false 96 loading.value = false
91 form.value = res.data 97 form.value = res.data
92 form.value.photosList=[] 98 form.value.photosList = []
93 form.value.photos?.split(',')?.forEach(v=>{ 99 form.value.photos?.split(',')?.forEach(v => {
94 form.value.photosList.push(fillImgUrl(v)) 100 form.value.photosList.push(fillImgUrl(v))
95 }) 101 })
96 console.log(res) 102 console.log(res)
...@@ -101,23 +107,23 @@ function getData() { ...@@ -101,23 +107,23 @@ function getData() {
101 107
102 </script> 108 </script>
103 109
104 <style scoped lang="scss"> 110 <style lang="scss" scoped>
105 .room { 111 .room {
106 background: #FAFBFD; 112 background: #FAFBFD;
107 margin: 20px 0 0; 113 margin: 20px 0 0;
108 padding: 20px; 114 padding: 20px;
109 border: 1px solid #E5E5E5; 115 border: 1px solid #E5E5E5;
110 116
111 .name { 117 .name {
112 font-size: 20px; 118 font-size: 20px;
113 margin: 0 0 10px; 119 margin: 0 0 10px;
114 } 120 }
115 121
116 .roomImg { 122 .roomImg {
117 aspect-ratio: 16/9; 123 aspect-ratio: 16/9;
118 border-radius: 10px; 124 border-radius: 10px;
119 overflow: hidden; 125 overflow: hidden;
120 126
121 img { 127 img {
122 width: 100%; 128 width: 100%;
123 object-fit: cover; 129 object-fit: cover;
...@@ -125,17 +131,17 @@ function getData() { ...@@ -125,17 +131,17 @@ function getData() {
125 height: 100%; 131 height: 100%;
126 } 132 }
127 } 133 }
128 134
129 .price { 135 .price {
130 color: #FF8124; 136 color: #FF8124;
131 font-size: 24px; 137 font-size: 24px;
132 138
133 span { 139 span {
134 font-size: 36px; 140 font-size: 36px;
135 font-family: "DIN Alternate" 141 font-family: "DIN Alternate"
136 } 142 }
137 } 143 }
138 144
139 .bg-lineg { 145 .bg-lineg {
140 margin: auto; 146 margin: auto;
141 border-radius: 10px; 147 border-radius: 10px;
...@@ -144,7 +150,7 @@ function getData() { ...@@ -144,7 +150,7 @@ function getData() {
144 font-size: 24px; 150 font-size: 24px;
145 width: 66px; 151 width: 66px;
146 cursor: pointer; 152 cursor: pointer;
147 153
148 div { 154 div {
149 background: #fff; 155 background: #fff;
150 font-size: 13px; 156 font-size: 13px;
...@@ -167,30 +173,30 @@ function getData() { ...@@ -167,30 +173,30 @@ function getData() {
167 h3 { 173 h3 {
168 margin: 0 0 20px; 174 margin: 0 0 20px;
169 } 175 }
170 176
171 img.w100 { 177 img.w100 {
172 object-fit: cover; 178 object-fit: cover;
173 aspect-ratio: 16/9 179 aspect-ratio: 16/9
174 } 180 }
175 181
176 .addr { 182 .addr {
177 font-size: 16px; 183 font-size: 16px;
178 color: #929AA0; 184 color: #929AA0;
179 font-weight: 400; 185 font-weight: 400;
180 } 186 }
181 187
182 .price { 188 .price {
183 margin: 0 0 25px; 189 margin: 0 0 25px;
184 color: #FF8124; 190 color: #FF8124;
185 font-size: 18px; 191 font-size: 18px;
186 192
187 span { 193 span {
188 font-size: 24px; 194 font-size: 24px;
189 margin: 0 8px; 195 margin: 0 8px;
190 font-family: 'DINAlternate-Bold'; 196 font-family: 'DINAlternate-Bold';
191 font-weight: 600; 197 font-weight: 600;
192 } 198 }
193 199
194 i { 200 i {
195 font-style: normal; 201 font-style: normal;
196 color: #929AA0; 202 color: #929AA0;
...@@ -201,12 +207,12 @@ function getData() { ...@@ -201,12 +207,12 @@ function getData() {
201 207
202 .tagbox { 208 .tagbox {
203 margin: 15px 0; 209 margin: 15px 0;
204 210
205 a { 211 a {
206 color: #AFB5B9; 212 color: #AFB5B9;
207 font-size: 12px; 213 font-size: 12px;
208 } 214 }
209 215
210 span { 216 span {
211 border-radius: 13px; 217 border-radius: 13px;
212 font-size: 12px; 218 font-size: 12px;
...@@ -214,22 +220,22 @@ function getData() { ...@@ -214,22 +220,22 @@ function getData() {
214 margin-right: 10px; 220 margin-right: 10px;
215 font-weight: 400; 221 font-weight: 400;
216 } 222 }
217 223
218 span:nth-child(4n) { 224 span:nth-child(4n) {
219 background: rgba(50, 177, 108, 0.2); 225 background: rgba(50, 177, 108, 0.2);
220 color: rgba(50, 177, 108, 1); 226 color: rgba(50, 177, 108, 1);
221 } 227 }
222 228
223 span:nth-child(4n+1) { 229 span:nth-child(4n+1) {
224 background: rgba(243, 152, 0, 0.2); 230 background: rgba(243, 152, 0, 0.2);
225 color: rgba(243, 152, 0, 1); 231 color: rgba(243, 152, 0, 1);
226 } 232 }
227 233
228 span:nth-child(4n+2) { 234 span:nth-child(4n+2) {
229 background: rgba(0, 160, 233, 0.2); 235 background: rgba(0, 160, 233, 0.2);
230 color: rgba(0, 160, 233, 1); 236 color: rgba(0, 160, 233, 1);
231 } 237 }
232 238
233 span:nth-child(4n+3) { 239 span:nth-child(4n+3) {
234 background: rgba(247, 64, 166, 0.2); 240 background: rgba(247, 64, 166, 0.2);
235 color: rgba(247, 64, 166, 1); 241 color: rgba(247, 64, 166, 1);
...@@ -249,14 +255,17 @@ function getData() { ...@@ -249,14 +255,17 @@ function getData() {
249 width: 100%; 255 width: 100%;
250 height: 100%; 256 height: 100%;
251 position: relative; 257 position: relative;
252 img{object-fit: cover} 258
259 img {
260 object-fit: cover
261 }
253 } 262 }
254 263
255 .img-hover{ 264 .img-hover {
256 position: absolute; 265 position: absolute;
257 top: 0; 266 top: 0;
258 left: 0; 267 left: 0;
259 background-color: rgb(0,0,0,.5); 268 background-color: rgb(0, 0, 0, .5);
260 color: #fff; 269 color: #fff;
261 font-size: 18px; 270 font-size: 18px;
262 font-weight: 400; 271 font-weight: 400;
...@@ -267,12 +276,24 @@ function getData() { ...@@ -267,12 +276,24 @@ function getData() {
267 border-radius: 10px; 276 border-radius: 10px;
268 } 277 }
269 278
270 .hotelImg{border-radius: 10px;overflow: hidden;aspect-ratio: 16/9; 279 .hotelImg {
271 img{object-fit: cover;object-position: center;width: 100%;height: 100%; 280 border-radius: 10px;
281 overflow: hidden;
282 aspect-ratio: 16/9;
283
284 img {
285 object-fit: cover;
286 object-position: center;
287 width: 100%;
288 height: 100%;
272 } 289 }
273 } 290 }
274 .oddmb:nth-child(2){margin-bottom: 20px;} 291
275 .title{ 292 .oddmb:nth-child(2) {
293 margin-bottom: 20px;
294 }
295
296 .title {
276 width: 130px; 297 width: 130px;
277 font-weight: 500; 298 font-weight: 500;
278 font-size: 18px; 299 font-size: 18px;
......
src/viewsPc/center/myReservation.vue
...@@ -133,7 +133,7 @@ ...@@ -133,7 +133,7 @@
133 </div> 133 </div>
134 <div class="text-right"> 134 <div class="text-right">
135 <el-button 135 <el-button
136 v-if="(b.orderType == 0||b.orderType == 5||b.orderType==1||b.orderType==2)&&b.viewStatus!=0" 136 v-if="(b.orderType == 0||b.orderType == 5||b.orderType==1||b.orderType==2||b.orderType==3)&&b.viewStatus!=0"
137 class="mb10" plain round 137 class="mb10" plain round
138 size="small" type="success" 138 size="small" type="success"
139 @click="Rebook(b)" 139 @click="Rebook(b)"
...@@ -236,6 +236,19 @@ function goDetail(b) { ...@@ -236,6 +236,19 @@ function goDetail(b) {
236 236
237 function Rebook(row) { 237 function Rebook(row) {
238 console.log(row) 238 console.log(row)
239 if (row.orderType == 0) {
240 router.push({
241 name: 'hotelDetail',
242 params: {
243 cptId: row.activeId,
244 hotelId: row.hotelId
245 },
246 query: {
247 id: row.extId
248 }
249 })
250 }
251
239 if (row.orderType == 1) { 252 if (row.orderType == 1) {
240 return router.push({ 253 return router.push({
241 path: `/booking/car/${row.activeId}` 254 path: `/booking/car/${row.activeId}`
...@@ -247,19 +260,13 @@ function Rebook(row) { ...@@ -247,19 +260,13 @@ function Rebook(row) {
247 path: `/booking/dinner/${row.activeId}` 260 path: `/booking/dinner/${row.activeId}`
248 }) 261 })
249 } 262 }
250 263 // 化妆
251 if (row.orderType == 0) { 264 if (row.orderType == 3) {
252 router.push({ 265 return router.push({
253 name: 'hotelDetail', 266 path: `/booking/makeUp/${row.activeId}/${row.extId}`
254 params: {
255 cptId: row.activeId,
256 hotelId: row.hotelId
257 },
258 query: {
259 id: row.extId
260 }
261 }) 267 })
262 } 268 }
269
263 if (row.orderType == 5) { 270 if (row.orderType == 5) {
264 router.push({ 271 router.push({
265 name: 'ticket', 272 name: 'ticket',
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!