Skip to content

杨炀 / dance-pc

Go to a project
Toggle navigation
Toggle navigation pinning
d9a84b21 by zhangmeng
Options

化妆拍照

1 parent 0ac2721e
Inline Side-by-side
Showing 14 changed files with 1526 additions and 299 deletions
src/apiPc/booking.js
...@@ -264,3 +264,59 @@ export function getMealOrderInfoByLogex(data) { ...@@ -264,3 +264,59 @@ export function getMealOrderInfoByLogex(data) {
264 params:data 264 params:data
265 }) 265 })
266 } 266 }
267
268 export function getShootList(data) {
269 return request({
270 url: `/ota/activityShoot/getShootList`,
271 method: 'get',
272 params:data
273 })
274 }
275
276 export function getComShootVoById(data) {
277 return request({
278 url: `/ota/activityShoot/getComShootVoById`,
279 method: 'get',
280 params:data
281 })
282 }
283
284 export function getActivityPhotoVoListByShootId(data) {
285 return request({
286 url: `/ota/activityPhoto/getActivityPhotoVoListByShootId`,
287 method: 'get',
288 params:data
289 })
290 }
291
292 export function getPhotoConfList(data) {
293 return request({
294 url: `/ota/photoConfig/getPhotoConfList`,
295 method: 'get',
296 params:data
297 })
298 }
299
300 export function submitOrderPhoto(data) {
301 return request({
302 url: `/ota/norder/submitOrderPhoto`,
303 method: 'post',
304 data
305 })
306 }
307
308 export function getPhotoOrderInfo(data) {
309 return request({
310 url: `/ota/orderPhoto/getPhotoOrderInfo`,
311 method: 'get',
312 params:data
313 })
314 }
315
316 export function getPhotoOrderInfoByLogex(data) {
317 return request({
318 url: `/ota/orderPhoto/getPhotoOrderInfoByLogex`,
319 method: 'get',
320 params:data
321 })
322 }
......
src/routerPc/en.js
...@@ -422,6 +422,18 @@ export const constantRoutes = [ ...@@ -422,6 +422,18 @@ export const constantRoutes = [
422 meta: { title: 'Photography Appointment' } 422 meta: { title: 'Photography Appointment' }
423 }, 423 },
424 { 424 {
425 path: 'photography/:cptId/:id',
426 component: () => import('@/viewsPc/booking/photographyDetail'),
427 name: 'photographyDetail',
428 meta: { title: 'Photography Reservation' }
429 },
430 {
431 path: 'photography/:cptId/:id/:lasId',
432 component: () => import('@/viewsPc/booking/photographyOrder.vue'),
433 name: 'photographyOrder',
434 meta: { title: 'Photography Appointment' }
435 },
436 {
425 path: 'pay', 437 path: 'pay',
426 component: () => import('@/viewsPc/booking/pay'), 438 component: () => import('@/viewsPc/booking/pay'),
427 name: 'bookingPay', 439 name: 'bookingPay',
......
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="{data}"> 4 <template #header="{date}">
5 <el-row style="width: 100%"> 5 <el-row style="width: 100%">
6 <el-col :span="7"> 6 <el-col :span="7">
7 {{data}}
8 </el-col> 7 </el-col>
9 <el-col :span="10"> 8 <el-col :span="10">
10 <el-row justify="center" align='middle' > 9 <el-row justify="center" align='middle' >
11 <div class="canBtn"><el-icon><ArrowLeftBold /></el-icon></div> 10 <!-- <div class="canBtn"><el-icon><ArrowLeftBold /></el-icon></div>-->
12 <div> 11 <div class="cTitle">
13 <!-- <el-date-picker--> 12 <!-- <el-date-picker-->
14 <!-- v-model="value2"--> 13 <!-- v-model="value2"-->
15 <!-- type="daterange"--> 14 <!-- type="daterange"-->
...@@ -21,9 +20,10 @@ ...@@ -21,9 +20,10 @@
21 <!-- size="small"--> 20 <!-- size="small"-->
22 <!-- @change="changee"--> 21 <!-- @change="changee"-->
23 <!-- />--> 22 <!-- />-->
24 <el-input readonly v-model="value2" type="text" size="small" style="width: 280px"></el-input> 23 <!-- <el-input readonly :value="date" type="text" size="small" style="width: 280px"></el-input>-->
24 {{date}}
25 </div> 25 </div>
26 <div class="canBtn"><el-icon><ArrowRightBold /></el-icon></div> 26 <!-- <div class="canBtn"><el-icon><ArrowRightBold /></el-icon></div>-->
27 </el-row> 27 </el-row>
28 </el-col> 28 </el-col>
29 <el-col :span="7"> 29 <el-col :span="7">
...@@ -35,6 +35,7 @@ ...@@ -35,6 +35,7 @@
35 format="YYYY-MM-DD" 35 format="YYYY-MM-DD"
36 size="small" 36 size="small"
37 @change="dateChange" 37 @change="dateChange"
38 :disabled-date="disabledDate"
38 /> 39 />
39 </div> 40 </div>
40 </el-col> 41 </el-col>
...@@ -108,7 +109,6 @@ const loading = ref(false) ...@@ -108,7 +109,6 @@ const loading = ref(false)
108 const query = ref({ 109 const query = ref({
109 lasId:route.params.id, 110 lasId:route.params.id,
110 }) 111 })
111 const value1=ref('')
112 const value2=ref('') 112 const value2=ref('')
113 113
114 114
...@@ -131,8 +131,6 @@ function dateChange(){ ...@@ -131,8 +131,6 @@ function dateChange(){
131 currentDate.value=currentDate1.value 131 currentDate.value=currentDate1.value
132 calendarRange.value=[dayjs(currentDate.value).toDate(),(dayjs(currentDate.value).toDate())] 132 calendarRange.value=[dayjs(currentDate.value).toDate(),(dayjs(currentDate.value).toDate())]
133 getScheduleList() 133 getScheduleList()
134 console.log(currentDate.value)
135 console.log(currentDate1.value)
136 } 134 }
137 135
138 function goMatch(n) { 136 function goMatch(n) {
...@@ -146,14 +144,15 @@ function goMatch(n) { ...@@ -146,14 +144,15 @@ function goMatch(n) {
146 params: { 144 params: {
147 lasId: n.id 145 lasId: n.id
148 }, 146 },
149 // query: { 147 query: {
150 // matchId: n.cptId 148 date: dayjs(currentDate.value).format('YYYY-MM-DD')
151 // } 149 }
152 }) 150 })
153 } 151 }
154 152
155 function changee(){ 153 function disabledDate(e){
156 console.log(value2.value) 154 return e.getTime()<=Date.now()
155 console.log(e)
157 } 156 }
158 </script> 157 </script>
159 158
...@@ -313,4 +312,10 @@ function changee(){ ...@@ -313,4 +312,10 @@ function changee(){
313 margin: 0 16px -2px 16px; 312 margin: 0 16px -2px 16px;
314 cursor:pointer 313 cursor:pointer
315 } 314 }
315
316 .cTitle{
317 color: #fff;
318 font-size: 20px;
319 font-weight: 500;
320 }
316 </style> 321 </style>
......
src/viewsPc/booking/component/photoGraphyCalendar.vue 0 → 100644
1 <template>
2 <div >
3 <el-calendar v-model="currentDate" :range="calendarRange">
4 <template #header="{date}">
5 <el-row style="width: 100%">
6 <el-col :span="7">
7 </el-col>
8 <el-col :span="10">
9 <el-row justify="center" align='middle' class="cTitle">
10 <!-- <div class="canBtn"><el-icon><ArrowLeftBold /></el-icon></div>-->
11 <!-- <div>-->
12 <!--&lt;!&ndash; <el-date-picker&ndash;&gt;-->
13 <!--&lt;!&ndash; v-model="value2"&ndash;&gt;-->
14 <!--&lt;!&ndash; type="daterange"&ndash;&gt;-->
15 <!--&lt;!&ndash; range-separator="-"&ndash;&gt;-->
16 <!--&lt;!&ndash; start-placeholder="Start date"&ndash;&gt;-->
17 <!--&lt;!&ndash; end-placeholder="End date"&ndash;&gt;-->
18 <!--&lt;!&ndash; format="YYYY-MM-DD"&ndash;&gt;-->
19 <!--&lt;!&ndash; value-format="YYYY-MM-DD"&ndash;&gt;-->
20 <!--&lt;!&ndash; size="small"&ndash;&gt;-->
21 <!--&lt;!&ndash; @change="changee"&ndash;&gt;-->
22 <!--&lt;!&ndash; />&ndash;&gt;-->
23 <!-- <el-input readonly v-model="value2" type="text" size="small" style="width: 280px"></el-input>-->
24 <!-- </div>-->
25 <!-- <div class="canBtn"><el-icon><ArrowRightBold /></el-icon></div>-->
26 {{date}}
27 </el-row>
28 </el-col>
29 <el-col :span="7">
30 <div style="text-align: right;padding-right: 10px">
31 <el-date-picker
32 v-model="currentDate1"
33 type="date"
34 placeholder="YYYY-MM-DD"
35 format="YYYY-MM-DD"
36 size="small"
37 @change="dateChange"
38 />
39 </div>
40 </el-col>
41 </el-row>
42 </template>
43 <template #date-cell="data">
44 <div :class="data.data.day==query.currentDate?'primaryDate date':'date'" @click="selectDate(data.data.day)">
45 {{ data.data.day.slice(8, 10) }}
46 </div>
47 </template>
48 </el-calendar>
49
50 <div class="calendarList">
51 <ul v-loading="loading">
52 <li v-for="n in schList" :key="n.id" @click="goMatch(n)">
53 <el-row style="width: 100%">
54 <div style="margin-right: 25px">
55 <el-image style="width: 90px;height: 115px" :src="fillImgUrl(n.photos?.split(',')[0]) " fit="cover" />
56 </div>
57 <div style="flex: 1" >
58 <div class="hz-title">{{ n.name }}</div>
59 <div>
60 <el-row justify="space-between">
61 <el-row class="hz-p" style="flex: 1">
62 <el-col :span="8">
63 <div >{{ language==0?'套餐说明':'Package Description' }}: <span style="margin-right: 20px">{{n.introduction}}</span></div>
64 </el-col>
65
66 <el-col :span="8">
67 <div>{{ language==0?'剩余':'' }}<span class="sign">{{ n.num-n.counts }}</span>{{language==0?'名额':'Places Remaining' }} </div>
68 </el-col>
69 <el-col :span="8">
70 <div >{{n.goHome==1?language==0?'上门拍照':'Door-to-door photo':''}}</div>
71 </el-col>
72 </el-row>
73 <el-row>
74 <div class="zh-margin" style="font-size: 36px;color: #ff8124"><span style="font-size: 24px">{{ language==0?'¥':'€'}} </span> {{language==0?n.photoPrice:n.photoPriceEn}}</div>
75 <el-button :disabled="n.num-n.counts<=0" class="btn-lineG w200px" round type="primary" size="large">{{ language==0?'立即预约':'Select' }} ⇀</el-button>
76 </el-row>
77 </el-row>
78 </div>
79 </div>
80 </el-row>
81 </li>
82 </ul>
83 <el-empty v-if="schList.length== 0"
84 style="--el-empty-padding:0;--el-empty-description-margin-top:0"
85 :image="`/img/order_no.png`"
86 :image-size="200"/>
87 </div>
88 </div>
89 </template>
90
91 <script setup>
92 import {ref} from "vue";
93 import {dayjs} from "element-plus";
94 import {useRoute,useRouter} from 'vue-router'
95 import * as booking from "@/apiPc/booking"
96 import {useStorage} from "@vueuse/core/index";
97 import useUserStore from "/@/store/modules/user";
98 import {getActivityPhotoVoListByShootId} from "@/apiPc/booking";
99
100 const user = useUserStore().user
101 const language = useStorage('language', 0)
102 const router = useRouter()
103 const route=useRoute()
104 const currentDate = ref(new Date())
105 const currentDate1 = ref(new Date())
106 const calendarRange = ref([dayjs(currentDate.value).toDate(),(dayjs(currentDate.value).toDate())])
107 const schList = ref([])
108 const loading = ref(false)
109 const query = ref({
110 lasId:route.params.id,
111 })
112 const value2=ref('')
113
114 getScheduleList()
115 function getScheduleList() {
116 loading.value = true
117 query.value.currentDate = dayjs(currentDate.value).format('YYYY-MM-DD')
118 booking.getActivityPhotoVoListByShootId(query.value).then(res=>{
119 loading.value = false
120 schList.value = res.data
121 })
122 }
123 function selectDate(date) {
124 currentDate1.value= currentDate.value=dayjs(date).toDate()
125 console.log(date)
126 getScheduleList()
127 }
128
129 function dateChange(){
130 currentDate.value=currentDate1.value
131 calendarRange.value=[dayjs(currentDate.value).toDate(),(dayjs(currentDate.value).toDate())]
132 getScheduleList()
133 console.log(currentDate.value)
134 console.log(currentDate1.value)
135 }
136
137 function goMatch(n) {
138 if (!user) {
139 useUserStore().setVisitor()
140 return
141 }
142
143 router.push({
144 name: 'photographyOrder',
145 params: {
146 lasId: n.id
147 },
148 query: {
149 date: dayjs(currentDate.value).format('YYYY-MM-DD')
150 }
151 })
152 }
153
154 function changee(){
155 console.log(value2.value)
156 }
157 </script>
158
159 <style scoped lang="scss">
160 .el-calendar {
161 --el-calendar-border: none;
162 --el-calendar-cell-width: 40px;
163 text-align: center;
164 --el-text-color-regular: #8E8D94;
165
166 :deep(.el-calendar__header) {
167 justify-content: center;
168 padding: 0 0 10px
169 }
170
171 :deep(.el-calendar__body) {
172 border: 1px solid #F0F0F0;
173 padding: 0
174 }
175
176 :deep(.el-calendar-table .el-calendar-day) {
177 padding: 1px;
178 }
179
180 :deep(.el-calendar-table td.is-selected) {
181 background: transparent;
182 }
183
184 :deep(.el-calendar__button-group) {
185 display: none;
186 }
187
188 :deep(.el-calendar-table thead th) {
189 padding: 5px 0 0
190 }
191
192 .primaryDate {
193 color: #fff;
194 background: linear-gradient(90deg, #8623FC, #453DEA);
195 }
196
197 .date {
198 margin: auto;
199 border-radius: 50%;
200 width: 30px;
201 height: 30px;
202 line-height: 30px;
203 font-weight: bold;
204 }
205 }
206
207 .calendarList {
208 border: 1px solid #F0F0F0;
209 padding: 12px 20px;
210 overflow: auto;
211 height: 625px;
212
213 ul {
214 li {cursor: pointer;
215 background: #F6F9FE;
216 margin: 7px 0 7px 20px;
217 position: relative;
218 padding: 13px;
219 border-radius: 10px;
220 font-weight: 500;
221 font-size: 15px;
222
223 label {
224 color: #453DEA;
225 margin-right: 15px;
226
227 &::before {
228 content: '';
229 background: #fff;
230 left: -17px;
231 top: 0px;
232 bottom: 0;
233 margin: auto;
234 border-radius: 50%;
235 width: 2px;
236 height: 2px;
237 position: absolute;
238 z-index: 1
239 }
240 }
241 }
242
243 li::before {
244 content: '';
245 background: linear-gradient(0deg, #8623FC, #453DEA);
246 border-radius: 50%;
247 width: 8px;
248 height: 8px;
249 position: absolute;
250 left: -20px;
251 top: 0;
252 bottom: 0;
253 margin: auto;
254 z-index: 1;
255 }
256
257 li::after {
258 content: '';
259 left: -16px;
260 width: 1px;
261 height: 100%;
262 background: #EBEBEB;
263 position: absolute;
264 top: 20px
265 }
266
267 //li:hover {
268 // color: #fff;
269 // background: linear-gradient(-90deg, #8623FC, #453DEA);
270 //
271 // label {
272 // color: #fff;
273 // }
274 //}
275 }
276 }
277
278 .hz-title{
279 font-size: 20px;
280 font-weight: 400;
281 color: #000;
282 margin-top:20px;
283 margin-bottom: 10px;
284 }
285
286 .zh-margin{
287 font-weight: bold;
288 font-size: 36px;
289 color: #FF8124;
290 margin-right: 30px;
291 }
292 .hz-p{
293 font-size: 16px;
294 color: #4C5359;
295 font-weight: 400;
296 }
297
298 :deep(.el-calendar__header) {
299 background: linear-gradient(90deg, #8623FC, #453DEA);
300 height: 50px;
301 line-height: 50px;
302 }
303
304 .canBtn{
305 color: #453DEA;
306 border-radius: 2px;
307 width: 22px;
308 height: 22px;
309 line-height: 26px;
310 text-align: center;
311 background-color: #fff;
312 margin: 0 16px -2px 16px;
313 cursor:pointer
314 }
315
316 .cTitle{
317 color: #fff;
318 font-size: 20px;
319 font-weight: 500;
320 }
321 </style>
src/viewsPc/booking/makeUpDetail.vue
...@@ -31,62 +31,77 @@ ...@@ -31,62 +31,77 @@
31 </el-row> 31 </el-row>
32 </el-card> 32 </el-card>
33 <br> 33 <br>
34 <el-row justify='space-between'> 34 <!-- <el-row justify='space-between'>-->
35 <div class="img-header" style="width: 40%"> 35 <!-- <div class="img-header" style="width: 40%">-->
36 <div class="card"> 36 <!-- <div class="card">-->
37 <el-image style="width: 100%" :src="fillImgUrl(form.photos)?.split(',')[0]" fit="none" :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(',')"/>-->
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 <el-image :src="fillImgUrl(form.photos)?.split(',')[0] " fit="cover" :preview-src-list="form?.photos?.split(',')"/> 44 <!-- <el-image :src="fillImgUrl(form.photos)?.split(',')[0] " fit="cover" :preview-src-list="form?.photos?.split(',')"/>-->
45 </div> 45 <!-- </div>-->
46 </el-col> 46 <!-- </el-col>-->
47 <el-col :span="12"> 47 <!-- <el-col :span="12">-->
48 <div class="card"> 48 <!-- <div class="card">-->
49 <el-image :src="fillImgUrl(form.photos)?.split(',')[0] " fit="cover" :preview-src-list="form?.photos?.split(',')"/> 49 <!-- <el-image :src="fillImgUrl(form.photos)?.split(',')[0] " fit="cover" :preview-src-list="form?.photos?.split(',')"/>-->
50 </div> 50 <!-- </div>-->
51 </el-col> 51 <!-- </el-col>-->
52 </el-row> 52 <!-- </el-row>-->
53 <div style="height: 50%;"> 53 <!-- <div style="height: 50%;">-->
54 <div class="card"> 54 <!-- <div class="card">-->
55 <el-image :src="fillImgUrl(form.photos)?.split(',')[0] " fit="cover" :preview-src-list="form?.photos?.split(',')"/> 55 <!-- <el-image :src="fillImgUrl(form.photos)?.split(',')[0] " fit="cover" :preview-src-list="form?.photos?.split(',')"/>-->
56 </div> 56 <!-- </div>-->
57 </div> 57 <!-- </div>-->
58 58
59 </div> 59 <!-- </div>-->
60 <div class="img-header" style="width: 20%"> 60 <!-- <div class="img-header" style="width: 20%">-->
61 <div class="card"> 61 <!-- <div class="card">-->
62 <el-image :src="fillImgUrl(form.photos)?.split(',')[0] " fit="cover" :preview-src-list="form?.photos?.split(',')"/> 62 <!-- <el-image :src="fillImgUrl(form.photos)?.split(',')[0] " fit="cover" :preview-src-list="form?.photos?.split(',')"/>-->
63 </div> 63 <!-- </div>-->
64 </div> 64 <!-- </div>-->
65 <div class="img-header" style="width: 20%"> 65 <!-- <div class="img-header" style="width: 20%">-->
66 <el-row style="height: 50%"> 66 <!-- <el-row style="height: 50%">-->
67 <el-col :lg="12" :md="8" :sm="12" :xs="24" > 67 <!-- <el-col :lg="12" :md="8" :sm="12" :xs="24" >-->
68 <div class="card"> 68 <!-- <div class="card">-->
69 <el-image :src="fillImgUrl(form.photos)?.split(',')[0] " fit="cover" :preview-src-list="form?.photos?.split(',')"/> 69 <!-- <el-image :src="fillImgUrl(form.photos)?.split(',')[0] " fit="cover" :preview-src-list="form?.photos?.split(',')"/>-->
70 </div> 70 <!-- </div>-->
71 </el-col> 71 <!-- </el-col>-->
72 <el-col :span="12"> 72 <!-- <el-col :span="12">-->
73 <div class="card"> 73 <!-- <div class="card">-->
74 <el-image :src="fillImgUrl(form.photos)?.split(',')[0] " fit="cover" :preview-src-list="form?.photos?.split(',')"/> 74 <!-- <el-image :src="fillImgUrl(form.photos)?.split(',')[0] " fit="cover" :preview-src-list="form?.photos?.split(',')"/>-->
75 </div>
76 </el-col>
77 </el-row>
78 <div style="height: 50%;">
79 <div class="card">
80 <el-image :src="fillImgUrl(form.photos)?.split(',')[0] " fit="cover" :preview-src-list="form?.photos?.split(',')"/>
81 <!-- <div class="img-hover">-->
82 <!-- 查看相册 (12) >-->
83 <!-- </div>--> 75 <!-- </div>-->
76 <!-- </el-col>-->
77 <!-- </el-row>-->
78 <!-- <div style="height: 50%;">-->
79 <!-- <div class="card">-->
80 <!-- <el-image :src="fillImgUrl(form.photos)?.split(',')[0] " fit="cover" :preview-src-list="form?.photos?.split(',')"/>-->
81 <!--&lt;!&ndash; <div class="img-hover">&ndash;&gt;-->
82 <!--&lt;!&ndash; 查看相册 (12) >&ndash;&gt;-->
83 <!--&lt;!&ndash; </div>&ndash;&gt;-->
84 <!-- </div>-->
85 <!-- </div>-->
86 <!-- </div>-->
87 <!-- </el-row>-->
88
89 <div class="mt30">
90 <el-row :gutter="20">
91 <el-col :span="10">
92 <div class="imgbox hotelImg">
93 <el-image :src="form?.photosList?.[0]" fit="cover" :preview-src-list="form?.photosList"/>
84 </div> 94 </div>
85 </div> 95 </el-col>
86 </div> 96 <el-col :span="14">
87 </el-row> 97 <el-row class="h100" :gutter="20">
88 <br> 98 <el-col :span="8" class="oddmb" v-for="(p,index) in form?.photosList?.slice(1,7)">
89 <br> 99 <div class="imgbox hotelImg"><el-image :src="p" fit="cover"/></div>
100 </el-col>
101 </el-row>
102 </el-col>
103 </el-row>
104 </div>
90 <br> 105 <br>
91 <el-card :body-style="{'padding':'20px 20px'}"> 106 <el-card :body-style="{'padding':'20px 20px'}">
92 <MakeUpCalendar></MakeUpCalendar> 107 <MakeUpCalendar></MakeUpCalendar>
...@@ -106,6 +121,7 @@ import * as booking from "@/apiPc/booking" ...@@ -106,6 +121,7 @@ import * as booking from "@/apiPc/booking"
106 import {useStorage} from "@vueuse/core/index"; 121 import {useStorage} from "@vueuse/core/index";
107 import useUserStore from "@/store/modules/user"; 122 import useUserStore from "@/store/modules/user";
108 import MakeUpCalendar from "@/viewsPc/booking/component/makeUpCalendar.vue"; 123 import MakeUpCalendar from "@/viewsPc/booking/component/makeUpCalendar.vue";
124 import {fillImgUrl} from "/@/utils/ruoyi";
109 const user = useUserStore().user 125 const user = useUserStore().user
110 const language = useStorage('language', 0) 126 const language = useStorage('language', 0)
111 const router = useRouter() 127 const router = useRouter()
...@@ -127,6 +143,11 @@ function getData() { ...@@ -127,6 +143,11 @@ function getData() {
127 booking.makeUpDetail(query.value).then(res => { 143 booking.makeUpDetail(query.value).then(res => {
128 loading.value = false 144 loading.value = false
129 form.value = res.data 145 form.value = res.data
146 form.value.photosList=[]
147 form.value.photos?.split(',')?.forEach(v=>{
148 form.value.photosList.push(fillImgUrl(v))
149 })
150 console.log(form.value)
130 // console.log(res) 151 // console.log(res)
131 }).catch(err => { 152 }).catch(err => {
132 console.log(err) 153 console.log(err)
...@@ -378,5 +399,9 @@ function getData() { ...@@ -378,5 +399,9 @@ function getData() {
378 //display: none; 399 //display: none;
379 } 400 }
380 401
381 402 .hotelImg{border-radius: 10px;overflow: hidden;aspect-ratio: 16/9;
403 img{object-fit: cover;object-position: center;width: 100%;height: 100%;
404 }
405 }
406 .oddmb:nth-child(2){margin-bottom: 20px;}
382 </style> 407 </style>
......
src/viewsPc/booking/makeUpOrder.vue
...@@ -40,18 +40,19 @@ ...@@ -40,18 +40,19 @@
40 </div> 40 </div>
41 <el-row style="flex: 1"> 41 <el-row style="flex: 1">
42 <div style="flex: 1"> 42 <div style="flex: 1">
43 <div style="margin-bottom: 20px;">预约日期&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="span">2024.03.11</span></div> 43 <div style="margin-bottom: 20px;">预约日期&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="span">{{route.query.date}}</span></div>
44 <div>套餐名称&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="span">{{ formDatas.name }}</span></div> 44 <div>套餐名称&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="span">{{ formDatas.name }}</span></div>
45 </div> 45 </div>
46 46
47 <div style="flex: 1"> 47 <div style="flex: 1">
48 <div style="margin-bottom: 20px">预约时间&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="span">09:00~12:00</span> </div> 48 <!-- <div style="margin-bottom: 20px">预约时间&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="span">09:00~12:00</span> </div>-->
49 <div>上门化妆 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="span">{{ formDatas.goHome==1?'是':'否' }}</span></div> 49 <div style="margin-bottom: 20px">上门化妆 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="span">{{ formDatas.goHome==1?'是':'否' }}</span></div>
50 <div >价格&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="sign">{{language==0? '￥'+formDatas.mealPrice:'€'+formDatas.mealPriceEn }}</span></div>
50 </div> 51 </div>
51 52
52 <div style="flex: 1"> 53 <div style="flex: 1">
53 <div style="margin-bottom: 20px">套餐说明&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="span">{{formDatas.introduction}}</span></div> 54 <div style="margin-bottom: 20px">套餐说明&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="span">{{formDatas.introduction}}</span></div>
54 <div >价格&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="sign">{{language==0? '￥'+formDatas.mealPrice:'€'+formDatas.mealPriceEn }}</span></div> 55 <!-- <div >价格&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="sign">{{language==0? '￥'+formDatas.mealPrice:'€'+formDatas.mealPriceEn }}</span></div>-->
55 </div> 56 </div>
56 </el-row> 57 </el-row>
57 </el-row> 58 </el-row>
...@@ -87,132 +88,6 @@ ...@@ -87,132 +88,6 @@
87 </div> 88 </div>
88 </el-card> 89 </el-card>
89 90
90 <!-- {{room}}-->
91 <!-- <el-row class="pd20" >-->
92
93 <!--&lt;!&ndash; <el-col :span="14">&ndash;&gt;-->
94 <!--&lt;!&ndash; <div class="border-info">&ndash;&gt;-->
95 <!--&lt;!&ndash; <h3>{{ hotelName }}</h3>&ndash;&gt;-->
96 <!--&lt;!&ndash; <div class="roomType">{{ room.roomType }}</div>&ndash;&gt;-->
97 <!--&lt;!&ndash; <div class="room">&ndash;&gt;-->
98 <!--&lt;!&ndash; <span>{{ room.bedType }}</span>&ndash;&gt;-->
99 <!--&lt;!&ndash; <span>{{ ' | ' + room.area }}m²</span>&ndash;&gt;-->
100 <!--&lt;!&ndash; <span>{{ ' | ' + room.occupantsNum }}{{ language == 0 ? '人入住' : ' people' }}</span>&ndash;&gt;-->
101 <!--&lt;!&ndash; <span v-show="room.breakfastFlag=='1'">{{ ' | ' + room.breakfastNum }} {{
102 &ndash;&gt;-- >
103 < !-- &lt; ! & ndash; language == 0 ? '份早餐' : 'breakfasts' & ndash;&gt;-- >
104 < !-- &lt; ! & ndash;
105 }}</span>&ndash;&gt;-->
106 <!--&lt;!&ndash; <span v-show="room.breakfastFlag=='0'"> | {{ language == 0 ? '无早餐' : 'No breakfast' }}</span>&ndash;&gt;-->
107 <!--&lt;!&ndash; <span v-show="room.bathroomFlag=='1'"> | {{ language == 0 ? '热水洗浴' : 'Shower' }}</span>&ndash;&gt;-->
108 <!--&lt;!&ndash; <span v-show="room.windowFlag=='1'"> | {{ language == 0 ? '有窗' : 'With windows' }}</span>&ndash;&gt;-->
109 <!--&lt;!&ndash; <span v-show="room.addBedFlag=='1'"> | {{ language == 0 ? '允许加床' : 'Extra bed' }}</span>&ndash;&gt;-->
110 <!--&lt;!&ndash; </div>&ndash;&gt;-->
111 <!--&lt;!&ndash; </div>&ndash;&gt;-->
112
113 <!--&lt;!&ndash; <div class="leftboderTT">{{ language == 0 ? '预约信息' : 'Reservation information' }}</div>&ndash;&gt;-->
114 <!--&lt;!&ndash; <div class="border-rr mt20 pd20">&ndash;&gt;-->
115 <!--&lt;!&ndash; <el-form :model="form" :label-width="language == 0 ?'100':'160'" :rules="rules" ref="formRef">&ndash;&gt;-->
116 <!--&lt;!&ndash; <el-form-item :label="language==0?'入住日期':'Check-in date'" required>&ndash;&gt;-->
117
118 <!--&lt;!&ndash; <el-date-picker @change="getDaysBetween"&ndash;&gt;-->
119 <!--&lt;!&ndash; v-model="rzRange"&ndash;&gt;-->
120 <!--&lt;!&ndash; type="daterange" :disabled-date="disabledDateRZ"&ndash;&gt;-->
121 <!--&lt;!&ndash; :placeholder="language==0?'选择日期':'Select date'" format="YYYY-MM-DD"&ndash;&gt;-->
122 <!--&lt;!&ndash; value-format="YYYY-MM-DD"/>&ndash;&gt;-->
123 <!--&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;-->
124
125 <!--&lt;!&ndash; &lt;!&ndash; :picker-options="pickerOptions"&ndash;&gt;&ndash;&gt;-->
126 <!--&lt;!&ndash; </el-form-item>&ndash;&gt;-->
127 <!--&lt;!&ndash; <el-form-item :label="language==0?'房间数':'Rooms'" required prop="roomNum">&ndash;&gt;-->
128 <!--&lt;!&ndash; <el-input-number v-model="form.roomNum" :min="0" :max="canOrderNum" @change="changeRoomNum"/>&ndash;&gt;-->
129 <!--&lt;!&ndash; <div class="red ml20" v-if="rzRange[1]">&ndash;&gt;-->
130 <!--&lt;!&ndash; <span v-if="language == 0">剩余房间数:{{ canOrderNum }}</span>&ndash;&gt;-->
131 <!--&lt;!&ndash; <span v-else>{{ canOrderNum }} Remaining rooms</span>&ndash;&gt;-->
132 <!--&lt;!&ndash; </div>&ndash;&gt;-->
133 <!--&lt;!&ndash; </el-form-item>&ndash;&gt;-->
134 <!--&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;-->
135 <!--&lt;!&ndash; <el-input v-model="rzUserArr[index]" :placeholder="language==0?'每间填一位住客姓名':'Each room fill in one name of the guest'"/>&ndash;&gt;-->
136 <!--&lt;!&ndash; </el-form-item>&ndash;&gt;-->
137 <!--&lt;!&ndash; <el-form-item :label="language==0?'预计到店':'Expected check-in'" required>&ndash;&gt;-->
138 <!--&lt;!&ndash; <el-select v-model="form.ddDate"&ndash;&gt;-->
139 <!--&lt;!&ndash; :placeholder="language==0?'请选择预计到店时间':'Please select the expected check-in time'">&ndash;&gt;-->
140 <!--&lt;!&ndash; <el-option&ndash;&gt;-->
141 <!--&lt;!&ndash; v-for="item in ddDateArr"&ndash;&gt;-->
142 <!--&lt;!&ndash; :key="item.value"&ndash;&gt;-->
143 <!--&lt;!&ndash; :label="item.label"&ndash;&gt;-->
144 <!--&lt;!&ndash; :value="item.value"&ndash;&gt;-->
145 <!--&lt;!&ndash; />&ndash;&gt;-->
146 <!--&lt;!&ndash; </el-select>&ndash;&gt;-->
147 <!--&lt;!&ndash; </el-form-item>&ndash;&gt;-->
148 <!--&lt;!&ndash; <el-form-item :label="language==0?'联系电话':'Contact phone'" required prop="phone">&ndash;&gt;-->
149 <!--&lt;!&ndash; <el-input v-model="form.phone"/>&ndash;&gt;-->
150 <!--&lt;!&ndash; </el-form-item>&ndash;&gt;-->
151
152 <!--&lt;!&ndash; <div v-if="room.addBedFlag=='1'">&ndash;&gt;-->
153 <!--&lt;!&ndash; <el-form-item :label="language==0?'是否加床':'Extra bed'" required>&ndash;&gt;-->
154 <!--&lt;!&ndash; <el-radio-group v-model="form.isAddbed" @change="changeAddBed">&ndash;&gt;-->
155 <!--&lt;!&ndash; <el-radio value="1">{{ language == 0 ? '是' : 'Yes' }}</el-radio>&ndash;&gt;-->
156 <!--&lt;!&ndash; <el-radio value="0">{{ language == 0 ? '否' : 'No' }}</el-radio>&ndash;&gt;-->
157 <!--&lt;!&ndash; </el-radio-group>&ndash;&gt;-->
158 <!--&lt;!&ndash; </el-form-item>&ndash;&gt;-->
159 <!--&lt;!&ndash; <el-form-item v-if="form.isAddbed=='1'" :label="language==0?'加床张数':'Extra bed num'" required>&ndash;&gt;-->
160 <!--&lt;!&ndash; <el-input-number v-model="form.addNum" :min="0" :max="form.roomNum" @change="changeBed"/>&ndash;&gt;-->
161
162 <!--&lt;!&ndash; <div class="tip" v-if="form.isAddbed=='1'">*&ndash;&gt;-->
163 <!--&lt;!&ndash; <span v-if="language == 0">一个房间最多加一张床</span>&ndash;&gt;-->
164 <!--&lt;!&ndash; <span v-else>A room can only add one bed</span>&ndash;&gt;-->
165 <!--&lt;!&ndash; </div>&ndash;&gt;-->
166 <!--&lt;!&ndash; </el-form-item>&ndash;&gt;-->
167 <!--&lt;!&ndash; </div>&ndash;&gt;-->
168 <!--&lt;!&ndash; </el-form>&ndash;&gt;-->
169 <!--&lt;!&ndash; </div>&ndash;&gt;-->
170 <!--&lt;!&ndash; </el-col>&ndash;&gt;-->
171 <!--&lt;!&ndash; <el-col :span="10">&ndash;&gt;-->
172 <!--&lt;!&ndash; <div class="leftboderTT">{{ language == 0 ? '订单明细' : 'Order details' }}</div>&ndash;&gt;-->
173 <!--&lt;!&ndash; <div class="border-rr mt20 pd20 ccitemBox">&ndash;&gt;-->
174 <!--&lt;!&ndash; <label> {{ language == 0 ? '房费' : 'Room fee' }}&ndash;&gt;-->
175 <!--&lt;!&ndash; <span class="fr" v-if="language==0">{{
176 &ndash;&gt;-- >
177 < !-- &lt; ! & ndash; language == 0 ? '¥' : '€' & ndash;&gt;-- >
178 < !-- &lt; ! & ndash;
179 }}{{ (room.roomPrice * form.roomNum * choseRooms.length).toFixed(2) }}</span>&ndash;&gt;-->
180 <!--&lt;!&ndash; <span class="fr" v-else>{{
181 &ndash;&gt;-- >
182 < !-- &lt; ! & ndash; language == 0 ? '¥' : '€' & ndash;&gt;-- >
183 < !-- &lt; ! & ndash;
184 }}{{ (room.roomPriceEn * form.roomNum * choseRooms.length).toFixed(2) }}</span>&ndash;&gt;-->
185 <!--&lt;!&ndash; </label>&ndash;&gt;-->
186 <!--&lt;!&ndash; <div class="ccitem" v-for="(c, index) in choseRooms" :key="index" v-show="form.roomNum>0">&ndash;&gt;-->
187 <!--&lt;!&ndash; {{ c }}&ndash;&gt;-->
188 <!--&lt;!&ndash; <span v-if="language==0">{{ form.roomNum }}*{{ language == 0 ? '¥' : '€' }}{{ room.roomPrice }}</span>&ndash;&gt;-->
189 <!--&lt;!&ndash; <span v-else>{{ form.roomNum }}*{{ language == 0 ? '¥' : '€' }}{{ room.roomPriceEn }}</span>&ndash;&gt;-->
190 <!--&lt;!&ndash; </div>&ndash;&gt;-->
191
192 <!--&lt;!&ndash; <label v-if="form.isAddbed=='1'&&form.addNum>0">{{ language == 0 ? '加床费' : 'Extra bed fee' }}&ndash;&gt;-->
193 <!--&lt;!&ndash; <span class="fr" v-if="language==0">{{
194 &ndash;&gt;-- >
195 < !-- &lt; ! & ndash; language == 0 ? '¥' : '€' & ndash;&gt;-- >
196 < !-- &lt; ! & ndash;
197 }}{{ (room.bedPrice * form.addNum * choseRooms.length).toFixed(2) }}</span>&ndash;&gt;-->
198 <!--&lt;!&ndash; <span class="fr" v-else>{{
199 &ndash;&gt;-- >
200 < !-- &lt; ! & ndash; language == 0 ? '¥' : '€' & ndash;&gt;-- >
201 < !-- &lt; ! & ndash;
202 }}{{ (room.bedPriceEn * form.addNum * choseRooms.length).toFixed(2) }}</span>&ndash;&gt;-->
203 <!--&lt;!&ndash; </label>&ndash;&gt;-->
204
205 <!--&lt;!&ndash; <div v-if="form.isAddbed=='1'&&form.addNum>0" class="ccitem" v-for="(c, index) in choseRooms" :key="index">&ndash;&gt;-->
206 <!--&lt;!&ndash; {{ c }}&ndash;&gt;-->
207 <!--&lt;!&ndash; <span>{{ form.addNum }}*{{ language == 0 ? '¥' : '€' }}{{ language == 0 ?room.bedPrice:room.bedPriceEn}}</span>&ndash;&gt;-->
208 <!--&lt;!&ndash; </div>&ndash;&gt;-->
209
210 <!--&lt;!&ndash; <label>{{ language == 0 ? '共计' : 'Total' }}<span&ndash;&gt;-->
211 <!--&lt;!&ndash; class="fr bigMoney">{{ language == 0 ? '¥' : '€' }}{{ money }}</span></label>&ndash;&gt;-->
212
213 <!--&lt;!&ndash; </div>&ndash;&gt;-->
214 <!--&lt;!&ndash; </el-col>&ndash;&gt;-->
215 <!-- </el-row>-->
216 </el-card> 91 </el-card>
217 92
218 <el-card class="mt30"> 93 <el-card class="mt30">
...@@ -253,8 +128,6 @@ const language = useStorage('language', 0) ...@@ -253,8 +128,6 @@ const language = useStorage('language', 0)
253 const router = useRouter() 128 const router = useRouter()
254 const route = useRoute() 129 const route = useRoute()
255 const room = ref({}) 130 const room = ref({})
256 const hotelName = ref('')
257 const canOrderNum = ref(0)
258 const lform = ref({}) 131 const lform = ref({})
259 const form = ref({ 132 const form = ref({
260 num: '1', 133 num: '1',
...@@ -266,92 +139,7 @@ const form = ref({ ...@@ -266,92 +139,7 @@ const form = ref({
266 const formData=ref({}) 139 const formData=ref({})
267 const formDatas=ref({}) 140 const formDatas=ref({})
268 const timeVal=ref(null) 141 const timeVal=ref(null)
269 const rzRange = ref([])
270 const rzUserArr = ref([])
271 const money = ref(0) 142 const money = ref(0)
272 const choseRooms = ref([])
273 const ddDateArr = ref([
274 {
275 value: '07:00',
276 label: '07:00'
277 },
278 {
279 value: '08:00',
280 label: '08:00'
281 },
282 {
283 value: '09:00',
284 label: '09:00'
285 },
286 {
287 value: '10:00',
288 label: '10:00'
289 },
290 {
291 value: '11:00',
292 label: '11:00'
293 },
294 {
295 value: '12:00',
296 label: '12:00'
297 },
298 {
299 value: '13:00',
300 label: '13:00'
301 },
302 {
303 value: '14:00',
304 label: '14:00'
305 },
306 {
307 value: '15:00',
308 label: '15:00'
309 },
310 {
311 value: '16:00',
312 label: '16:00'
313 },
314 {
315 value: '17:00',
316 label: '17:00'
317 },
318 {
319 value: '18:00',
320 label: '18:00'
321 },
322 {
323 value: '19:00',
324 label: '19:00'
325 },
326 {
327 value: '20:00',
328 label: '20:00'
329 },
330 {
331 value: '21:00',
332 label: '21:00'
333 },
334 {
335 value: '22:00',
336 label: '22:00'
337 },
338 {
339 value: '23:00',
340 label: '23:00'
341 },
342 {
343 value: '00:00',
344 label: '00:00'
345 },
346 {
347 value: '01:00',
348 label: '01:00'
349 },
350 {
351 value: '02:00',
352 label: '02:00'
353 }
354 ])
355 const rules = ref({ 143 const rules = ref({
356 num: [ 144 num: [
357 { required: true, message: '预约数量不能为空', trigger: 'blur' }, 145 { required: true, message: '预约数量不能为空', trigger: 'blur' },
...@@ -365,7 +153,6 @@ const rules = ref({ ...@@ -365,7 +153,6 @@ const rules = ref({
365 153
366 }) 154 })
367 const radioList=ref([]) 155 const radioList=ref([])
368 let usedays = 0
369 156
370 onMounted(() => { 157 onMounted(() => {
371 console.log(route.query) 158 console.log(route.query)
...@@ -448,7 +235,7 @@ function submit() { ...@@ -448,7 +235,7 @@ function submit() {
448 if (valid){ 235 if (valid){
449 form.value.total=money.value 236 form.value.total=money.value
450 form.value.orderName=formData.value.name 237 form.value.orderName=formData.value.name
451 form.value.dcStart='2024-05-29' 238 form.value.dcStart=route.query.date
452 form.value.activeId=route.params.cptId 239 form.value.activeId=route.params.cptId
453 form.value.asId=route.params.id 240 form.value.asId=route.params.id
454 form.value.asmId=route.params.lasId 241 form.value.asmId=route.params.lasId
......
src/viewsPc/booking/pay.vue
...@@ -71,6 +71,25 @@ ...@@ -71,6 +71,25 @@
71 </el-row> 71 </el-row>
72 </div> 72 </div>
73 </div> 73 </div>
74 <div v-if="type == 'photography'">
75 <div class="leftboderTT">{{ language == 0 ? '拍摄信息' : 'Shooting Information' }}</div>
76 <div class="border-info mt20">
77 <h3>{{ formInfo.shootName }}</h3>
78 <el-row>
79 <el-col>
80 {{ language == 0 ?'地址':'Address' }}：
81 <span >{{ formInfo.remarks }} </span>
82 {{ form.address }}
83 </el-col>
84 <el-col>
85 {{ language == 0 ?'套餐':'Package' }}：{{ formInfo.photoName }} <span style="margin-left: 40px">{{ language==0?'价格':'Price' }}</span><span class="price">{{language==0? '￥'+formInfo.photoPrice:'€'+ formInfo.photoPriceEn}}</span>
86 </el-col>
87 <el-col>
88 {{ language == 0 ?'套餐说明':'Package Description' }}：{{ formInfo.introduction}}
89 </el-col>
90 </el-row>
91 </div>
92 </div>
74 93
75 <div class="leftboderTT">{{ language == 0 ? '预订信息' : 'Booking information' }}</div> 94 <div class="leftboderTT">{{ language == 0 ? '预订信息' : 'Booking information' }}</div>
76 95
...@@ -147,7 +166,22 @@ ...@@ -147,7 +166,22 @@
147 <el-row v-if="type == 'makeUp'"> 166 <el-row v-if="type == 'makeUp'">
148 <el-col :lg="8" :md="12" :sm="12" :xs="24"> 167 <el-col :lg="8" :md="12" :sm="12" :xs="24">
149 <div class="mb10">{{ language==0?'化妆时间':'Makeup time' }}： 168 <div class="mb10">{{ language==0?'化妆时间':'Makeup time' }}：
150 <!-- {{ dayjs(form.dcStart).format('YYYY-MM-DD') +'&nbsp;' }} ~ {{dayjs(form.dcStart).format('YYYY-MM-DD') +'&nbsp;'}}--> 169 <!-- {{ dayjs(form.dcStart).format('YYYY-MM-DD') +'&nbsp;' }} ~ {{dayjs(form.dcStart).format('YYYY-MM-DD') +'&nbsp;'}}-->
170 {{ dayjs(form.dcStart).format('YYYY-MM-DD') +'&nbsp;'+ form.nameStart }} ~ {{dayjs(form.dcStart).format('YYYY-MM-DD') +'&nbsp;'+form.nameEnd}}
171 </div>
172 </el-col>
173 <el-col :lg="12" :md="12" :sm="12" :xs="24">
174 <div class="mb10">{{ language==0?'预约数':'Number of appointments' }}：{{ form.num }} </div>
175 </el-col>
176 <el-col :lg="8" :md="12" :sm="12" :xs="24">
177 <div class="mb10">{{ language==0?'联系人':'Contact Person' }}：{{ form.contacts }}</div>
178 </el-col>
179 <el-col :lg="8" :md="12" :sm="12" :xs="24">{{ language==0?'联系方式':'Contact Phone' }}：{{ form.phone }}</el-col>
180 <el-col :span="24" >{{ language==0?'备注':'Remarks' }}：{{ form.remarks }}</el-col>
181 </el-row>
182 <el-row v-if="type == 'photography'">
183 <el-col :lg="8" :md="12" :sm="12" :xs="24">
184 <div class="mb10">{{ language==0?'拍摄时间':'Makeup time' }}：
151 {{ dayjs(form.dcStart).format('YYYY-MM-DD') +'&nbsp;'+ form.nameStart }} ~ {{dayjs(form.dcStart).format('YYYY-MM-DD') +'&nbsp;'+form.nameEnd}} 185 {{ dayjs(form.dcStart).format('YYYY-MM-DD') +'&nbsp;'+ form.nameStart }} ~ {{dayjs(form.dcStart).format('YYYY-MM-DD') +'&nbsp;'+form.nameEnd}}
152 </div> 186 </div>
153 </el-col> 187 </el-col>
...@@ -336,7 +370,7 @@ import { ...@@ -336,7 +370,7 @@ import {
336 cancelOrder2, 370 cancelOrder2,
337 getCarBilldetailbyId, 371 getCarBilldetailbyId,
338 getFoodBilldetailbyId, 372 getFoodBilldetailbyId,
339 getMealOrderInfoByLogex 373 getMealOrderInfoByLogex, getPhotoOrderInfo, getPhotoOrderInfoByLogex
340 } from "@/apiPc/booking"; 374 } from "@/apiPc/booking";
341 import dayjs from 'dayjs' 375 import dayjs from 'dayjs'
342 import {delPerson} from "@/api/exam/person"; 376 import {delPerson} from "@/api/exam/person";
...@@ -379,6 +413,9 @@ onMounted(() => { ...@@ -379,6 +413,9 @@ onMounted(() => {
379 case '3': 413 case '3':
380 type.value = 'makeUp' 414 type.value = 'makeUp'
381 break 415 break
416 case '4':
417 type.value = 'photography'
418 break
382 } 419 }
383 } 420 }
384 421
...@@ -432,6 +469,10 @@ function getData() { ...@@ -432,6 +469,10 @@ function getData() {
432 MakeUpOrder() 469 MakeUpOrder()
433 MakeUpIno() 470 MakeUpIno()
434 } 471 }
472 if(type.value=='photography') {
473 photographyOrder()
474 photographyInfo()
475 }
435 476
436 console.log(payType.value) 477 console.log(payType.value)
437 } 478 }
...@@ -499,6 +540,28 @@ function MakeUpIno(){ ...@@ -499,6 +540,28 @@ function MakeUpIno(){
499 errorBox.value = true 540 errorBox.value = true
500 }) 541 })
501 } 542 }
543
544
545 function photographyOrder(){
546 booking.getPhotoOrderInfo({orderId: orderId.value}).then(res => {
547 form.value=res.data
548 totalFee.value=language.value==0?form.value.total:form.value.totalEn
549 }).catch(err => {
550 console.log(err)
551 errorBox.value = true
552 })
553 }
554
555 function photographyInfo(){
556 booking.getPhotoOrderInfoByLogex({orderId: orderId.value}).then(res=>{
557 formInfo.value=res.data
558 })
559 // .catch((e) => {
560 // console.log(e)
561 // errorBox.value = true
562 // })
563 }
564
502 const cancel = () => { 565 const cancel = () => {
503 //取消订单 566 //取消订单
504 proxy.$modal.confirm(language.value == 0 ? '确定取消订单吗 ?' :`Are you sure to cancel the order?`).then(() => { 567 proxy.$modal.confirm(language.value == 0 ? '确定取消订单吗 ?' :`Are you sure to cancel the order?`).then(() => {
......
src/viewsPc/booking/photography.vue
1 <template> 1 <template>
2 <div> 2 <div>
3 <div class="box"> 3 <div class="banner">
4 <el-card class="mt30"></el-card> 4 <img v-if="language==0" src="@/assets/booking/pz_text1.png">
5 <img v-else src="@/assets/booking/pz_text2.png">
6 </div>
7 <div class="box">
8 <div class="searchBar">
9 <el-input :placeholder="language==0?'请输入关键字搜索':'Search'" v-model="query.name" class="no-border">
10 </el-input>
11 <el-button size="large" type="primary" class="btn-lineG" icon="search" @click="getList">
12 {{ language==0?'搜索':'Search' }}</el-button>
13 </div>
14 </div>
15 <div class="box" v-loading="loading">
16 <el-row style="width: 100%" :gutter="20">
17 <el-col :span="8" v-for="(h,index) in list" class="mb20" >
18 <el-card style="position: relative;">
19 <img class="w100 hz-img" :src="fillImgUrl(h.cover)"/>
20 <div class="yuyue">
21 {{ h.counts }} {{ language==0?'个时间段可预约':"time slots can be reserved" }}
22 </div>
23 <div class="hz-text">{{h.name}}</div>
24 <div class="tagbox esp">
25 <span v-for="(t,index) in h.label?.split('，')" v-show="index<4">{{t}}</span>
26 </div>
27 <div class="hz-row">
28 <el-icon size="16" style="position: relative;top: 2px" color="#929AA0"><OfficeBuilding /></el-icon>
29 {{ language==0?'成立':'Established for'}}
30 <span class="sign">{{ h.ageLimit }}</span>{{language==0?'年':'years'}} |
31 <el-icon size="16" style="position: relative;top: 2px" color="#929AA0"><UserFilled /></el-icon><span class="sign">{{ h.dresserLimit }}</span>{{language==0?'名摄影师':'Photographers' }}
32 </div>
33 <div class="hz-row">
34 <el-icon size="16" style="position: relative;top: 2px" color="#929AA0"><PhoneFilled /></el-icon>
35 {{ h.contact }}
36 </div>
37 <div class="hz-row">
38 <el-icon size="16" style="position: relative;top: 2px" color="#929AA0"><LocationFilled /></el-icon>
39 {{h.remarks}}
40 </div>
41 <div style="text-align: center">
42 <el-button class="btn-lineG w200px" round type="primary" size="large" @click="goDetail(h)">{{ language==0?'立即预约':'Select' }} ⇀</el-button>
43 </div>
44 </el-card>
45 </el-col>
46 </el-row>
5 47
6 </div> 48 <el-empty v-show="!loading&&list.length==0" :image="`/img/order_no.png`" :image-size="228" description="" />
49 <div style="height: 50px"></div>
50 </div>
7 51
8 </div> 52 </div>
9 </template> 53 </template>
10 54
11 <script setup> 55 <script setup>
56 import {onMounted} from "@vue/runtime-core"
57 import * as booking from "@/apiPc/booking"
58 import {useRouter,useRoute} from "vue-router";
59 import {useStorage} from "@vueuse/core/index";
60 import {getMakeUpList, getShootList} from "@/apiPc/booking";
61 const router = useRouter()
62 const route = useRoute()
63 const language= useStorage('language',0)
64 const query = ref({
65 name:''
66 })
67 const cptId = ref('')
68 const list = ref([])
69 const loading = ref(false)
70 onMounted(()=>{
71 query.value.activityId = route.params.cptId
72 getList()
73 })
12 74
75 function getList() {
76 loading.value = true
77 booking.getShootList(query.value).then(res=>{
78 list.value = res.rows
79 loading.value = false
80 }).catch(e=>{
81 loading.value = false
82 })
83 }
84 function goDetail(item) {
85 router.push({
86 name:'photographyDetail',
87 params:{
88 id:item.id,
89 }
90 })
91 }
13 </script> 92 </script>
14 93
15 <style scoped> 94 <style scoped lang="scss">
95
96 .banner{height: 140px;background-size: cover;text-align: center;
97 background: url("@/assets/booking/pz_bg.png") center;display: flex;align-items: center;
98 justify-content: center;
99 img{display: block;margin:-30px auto 0;width: auto;}
100 }
101 .searchBar{position: relative;top: -30px;
102 background: #FFFFFF;display: flex;padding: 20px;
103 border-radius: 10px;}
104 .no-border{border: none;background: #F5F7F9;
105 :deep(.el-input__wrapper){border: none;box-shadow: none;background: #F5F7F9;}
106 }
107
108 .hz-img{
109 height: 218px;
110 width: 100%;
111 border-radius: 2px;
112 border: 0;
113 margin-bottom: 20px;
114 object-fit: cover;
115 }
116
117 .yuyue{
118 width: 150px;
119 height: 30px;
120 background: #000000;
121 border-radius: 20px 0px 0px 2px;
122 padding-left: 15px;
123 opacity: 0.45;
124 color: #fff;
125 font-size: 14px;
126 line-height: 30px;
127 position: absolute;
128 top: 207px;
129 right:21px;
130 }
131
132 .hz-text{
133 font-size: 20px;
134 font-weight: 500;
135 color: #000;
136 margin-bottom: 8px;
137 }
138
139 //.hz-tag{
140 // border-radius: 13px;
141 // height: 25px;
142 // line-height: 25px;
143 // font-size: 12px;
144 // font-weight: 400;
145 // padding: 0 15px;
146 //}
147 //.tag1{
148 // background: rgba(50, 177, 108, 0.2);
149 // color:rgba(50, 177, 108, 1);
150 //}
151 //.tag2{
152 // background-color: rgba(243, 152, 0, 0.2);
153 // color: #F39800;
154 //}
155 //.tag3{
156 // background-color: rgba(0, 160, 233, 0.2);
157 // color: #00A0E9;
158 //}
159 //.tag4{
160 // background-color: rgba(247, 64, 166, 0.2);
161 // color: #F740A6;
162 //}
163 //
164 //.hz-row{
165 // font-size: 14px;
166 // font-weight: 400;
167 // color: #929AA0;
168 // margin-bottom: 16px;
169 // .sign{
170 // color: #493CEB;
171 // }
172 //}
173
16 174
175 .tagbox{margin: 10px 0;
176 a{color: #AFB5B9;font-size: 12px;}
177 span{border-radius: 13px;font-size: 12px;padding: 3px 10px;margin-right:10px;font-weight: 400;}
178 span:nth-child(4n){background: rgba(50, 177, 108, 0.2);color: rgba(50, 177, 108, 1);}
179 span:nth-child(4n+1){background:rgba(243, 152, 0, 0.2);color: rgba(243, 152, 0, 1);}
180 span:nth-child(4n+2){background: rgba(0, 160, 233, 0.2);color: rgba(0, 160, 233, 1);}
181 span:nth-child(4n+3){background: rgba(247, 64, 166, 0.2);color:rgba(247, 64, 166, 1);}
182 }
17 </style> 183 </style>
......
src/viewsPc/booking/photographyDetail.vue 0 → 100644
1 <template>
2 <div>
3 <div class="box">
4 <el-card>
5 <el-row>
6 <div class="zh-title">{{ form.name }}</div>
7 <div class="tagbox esp">
8 <span v-for="(t,index) in form.label?.split('，')" v-show="index<4">{{t}}</span>
9 </div>
10 </el-row>
11 <el-row class="hz-row">
12 <el-icon size="16" style="position: relative;top: 2px" color="#929AA0">
13 <OfficeBuilding/>
14 </el-icon>
15 {{ language==0?'成立':'Established for'}} <span class="sign">6</span>{{language==0?'年':'years'}} &nbsp;&nbsp;&nbsp;&nbsp; |&nbsp;&nbsp;&nbsp;&nbsp;
16 <el-icon size="16" style="position: relative;top: 2px" color="#929AA0">
17 <UserFilled/>
18 </el-icon>
19 <span class="sign"> {{ form.dresserLimit }}</span>{{language==0?'名摄影师':'Photographers' }}&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
20 <el-icon size="16" style="position: relative;top: 2px" color="#929AA0">
21 <PhoneFilled/>
22 </el-icon>
23 <span style="padding-top: 2px">
24 {{ form.contact }}
25 </span>
26 &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
27 <el-icon size="16" style="position: relative;top: 2px" color="#929AA0">
28 <LocationFilled/>
29 </el-icon>
30 {{form.rearks}}
31 </el-row>
32 </el-card>
33 <br>
34 <!-- <el-row justify='space-between'>-->
35 <!-- <div class="img-header" style="width: 40%">-->
36 <!-- <div class="card">-->
37 <!-- <el-image style="width: 100%" :src="fillImgUrl(form.photos)?.split(',')[0]" fit="none" :preview-src-list="form.photosList"/>-->
38 <!-- </div>-->
39 <!-- </div>-->
40 <!-- <div class="img-header" style="width: 20%">-->
41 <!-- <el-row style="height: 50%;">-->
42 <!-- <el-col :span="12">-->
43 <!-- <div class="card">-->
44 <!-- <el-image :src="fillImgUrl(form.photos)?.split(',')[0] " fit="cover" :preview-src-list="form?.photos?.split(',')"/>-->
45 <!-- </div>-->
46 <!-- </el-col>-->
47 <!-- <el-col :span="12">-->
48 <!-- <div class="card">-->
49 <!-- <el-image :src="fillImgUrl(form.photos)?.split(',')[0] " fit="cover" :preview-src-list="form?.photos?.split(',')"/>-->
50 <!-- </div>-->
51 <!-- </el-col>-->
52 <!-- </el-row>-->
53 <!-- <div style="height: 50%;">-->
54 <!-- <div class="card">-->
55 <!-- <el-image :src="fillImgUrl(form.photos)?.split(',')[0] " fit="cover" :preview-src-list="form?.photos?.split(',')"/>-->
56 <!-- </div>-->
57 <!-- </div>-->
58
59 <!-- </div>-->
60 <!-- <div class="img-header" style="width: 20%">-->
61 <!-- <div class="card">-->
62 <!-- <el-image :src="fillImgUrl(form.photos)?.split(',')[0] " fit="cover" :preview-src-list="form?.photos?.split(',')"/>-->
63 <!-- </div>-->
64 <!-- </div>-->
65 <!-- <div class="img-header" style="width: 20%">-->
66 <!-- <el-row style="height: 50%">-->
67 <!-- <el-col :lg="12" :md="8" :sm="12" :xs="24" >-->
68 <!-- <div class="card">-->
69 <!-- <el-image :src="fillImgUrl(form.photos)?.split(',')[0] " fit="cover" :preview-src-list="form?.photos?.split(',')"/>-->
70 <!-- </div>-->
71 <!-- </el-col>-->
72 <!-- <el-col :span="12">-->
73 <!-- <div class="card">-->
74 <!-- <el-image :src="fillImgUrl(form.photos)?.split(',')[0] " fit="cover" :preview-src-list="form?.photos?.split(',')"/>-->
75 <!-- </div>-->
76 <!-- </el-col>-->
77 <!-- </el-row>-->
78 <!-- <div style="height: 50%;">-->
79 <!-- <div class="card">-->
80 <!-- <el-image :src="fillImgUrl(form.photos)?.split(',')[0] " fit="cover" :preview-src-list="form?.photos?.split(',')"/>-->
81 <!-- </div>-->
82 <!-- </div>-->
83 <!-- </div>-->
84 <!-- </el-row>-->
85
86 <div class="mt30">
87 <el-row :gutter="20">
88 <el-col :span="10">
89 <div class="imgbox hotelImg">
90 <el-image :src="form?.photosList?.[0]" fit="cover" :preview-src-list="form?.photosList"/>
91 </div>
92 </el-col>
93 <el-col :span="14">
94 <el-row class="h100" :gutter="20">
95 <el-col :span="8" class="oddmb" v-for="(p,index) in form?.photosList?.slice(1,7)">
96 <div class="imgbox hotelImg"><el-image :src="p" fit="cover"/></div>
97 </el-col>
98 </el-row>
99 </el-col>
100 </el-row>
101 </div>
102 <br>
103
104 <el-card :body-style="{'padding':'20px 20px'}">
105 <PhotoGraphyCalendar></PhotoGraphyCalendar>
106 </el-card>
107 </div>
108 </div>
109 </template>
110
111 <script setup >
112 import {useRouter} from "vue-router";
113 import {ref, reactive, onMounted} from "vue";
114 import {useRoute} from "vue-router";
115 import {getComShootVoById, getHotelById, getHotelRooms, getShootList} from "@/apiPc/booking"
116 import * as booking from "@/apiPc/booking"
117 import {useStorage} from "@vueuse/core/index";
118 import useUserStore from "@/store/modules/user";
119 import PhotoGraphyCalendar from "@/viewsPc/booking/component/photoGraphyCalendar.vue";
120 import {fillImgUrl} from "/@/utils/ruoyi";
121 const user = useUserStore().user
122 const language = useStorage('language', 0)
123 const router = useRouter()
124 const route = useRoute()
125 const form = ref({})
126 const query = ref({
127 activityId: route.params.cptId,
128 shootId:route.params.id
129 })
130 const loading = ref(false)
131 const roomList = ref([])
132 const map = ref(null)
133 onMounted(() => {
134 getData()
135 })
136
137 function getData() {
138 loading.value = true
139 booking.getComShootVoById(query.value).then(res => {
140 loading.value = false
141 form.value = res.data
142 form.value.photosList=[]
143 form.value.photos.split(',').forEach(v=>{
144 form.value.photosList.push(fillImgUrl(v))
145 })
146 }).catch(err => {
147 console.log(err)
148 })
149 // query.value.hotelId = route.query.id
150 // getHotelRooms(query.value).then(res => {
151 // roomList.value = res.rows
152 // })
153 }
154
155 // function initMap() {
156 // const TMap = null
157 // var center = new TMap.LatLng(form.value.latitude, form.value.longitude);//设置中心点坐标'
158 // var map = new TMap.Map("map", {
159 // center: center,//设置地图中心点坐标
160 // zoom: 17, //设置地图缩放级别
161 // });
162 // var infoWindowLocation = new TMap.LatLng(form.value.latitude, form.value.longitude);//创建一个坐标
163 // //创建InfoWindow实例，并进行初始化
164 // var infowindow = new TMap.InfoWindow({
165 // content: form.value.address, //信息窗口内容
166 // position: infoWindowLocation,//显示信息窗口的坐标
167 // map: map,
168 // offset: {x: 0, y: -32}
169 // });
170 // infowindow.close();
171 // var marker = new TMap.MultiMarker({
172 // map: map,
173 // //样式定义
174 // styles: {
175 // "myStyle": new TMap.MarkerStyle({
176 // "anchor": {x: 16, y: 32}
177 // })
178 // },
179 // //点标记数据数组
180 // geometries: [{
181 // "id": "1", //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
182 // // "styleId": 'myStyle', //指定样式id
183 // "position": new TMap.LatLng(form.value.latitude, form.value.longitude), //点标记坐标位置
184 // "properties": {//自定义属性
185 // "title": form.value.name
186 // }
187 // }
188 // ]
189 // })
190 // marker.on("click", function (evt) {
191 // //设置infoWindow
192 // infowindow.open(); //打开信息窗
193 // infowindow.setPosition(evt.geometry.position);//设置信息窗位置
194 // })
195 // }
196
197 // function goOrder(room) {
198 // if (!user) {
199 // useUserStore().setReLogin()
200 // return
201 // }
202 // router.push({
203 // name: 'hotelOrder',
204 // params: {
205 // roomId: room.id
206 // },
207 // query: {
208 // room: encodeURIComponent(JSON.stringify(room)),
209 // hotelName: form.value.name,
210 // checkInTime: form.value.checkInTime
211 // }
212 // })
213 // }
214 </script>
215
216 <style scoped lang="scss">
217 .room {
218 background: #FAFBFD;
219 margin: 20px 0 0;
220 padding: 20px;
221 border: 1px solid #E5E5E5;
222
223 .name {
224 font-size: 20px;
225 margin: 0 0 10px;
226 }
227
228 .roomImg {
229 aspect-ratio: 16/9;
230 border-radius: 10px;
231 overflow: hidden;
232
233 img {
234 width: 100%;
235 object-fit: cover;
236 object-position: center;
237 height: 100%;
238 }
239 }
240
241 .price {
242 color: #FF8124;
243 font-size: 24px;
244
245 span {
246 font-size: 36px;
247 font-family: "DIN Alternate"
248 }
249 }
250
251 .bg-lineg {
252 margin: auto;
253 border-radius: 10px;
254 text-align: center;
255 padding: 7px 2px 2px;
256 font-size: 24px;
257 width: 66px;
258 cursor: pointer;
259
260 div {
261 background: #fff;
262 font-size: 13px;
263 border-radius: 20px;
264 padding: 0 10px;
265 color: #453DEA;
266 font-weight: 500;
267 }
268 }
269 }
270
271 .zh-title {
272 font-size: 24px;
273 font-weight: 500;
274 margin-right: 25px;
275 }
276
277
278 .hotel {
279 h3 {
280 margin: 0 0 20px;
281 }
282
283 img.w100 {
284 object-fit: cover;
285 aspect-ratio: 16/9
286 }
287
288 .addr {
289 font-size: 16px;
290 color: #929AA0;
291 font-weight: 400;
292 }
293
294 .price {
295 margin: 0 0 25px;
296 color: #FF8124;
297 font-size: 18px;
298
299 span {
300 font-size: 24px;
301 margin: 0 8px;
302 font-family: 'DINAlternate-Bold';
303 font-weight: 600;
304 }
305
306 i {
307 font-style: normal;
308 color: #929AA0;
309 }
310 }
311 }
312
313
314 .tagbox {
315 margin: 15px 0;
316
317 a {
318 color: #AFB5B9;
319 font-size: 12px;
320 }
321
322 span {
323 border-radius: 13px;
324 font-size: 12px;
325 padding: 4px 10px;
326 margin-right: 10px;
327 font-weight: 400;
328 }
329
330 span:nth-child(4n) {
331 background: rgba(50, 177, 108, 0.2);
332 color: rgba(50, 177, 108, 1);
333 }
334
335 span:nth-child(4n+1) {
336 background: rgba(243, 152, 0, 0.2);
337 color: rgba(243, 152, 0, 1);
338 }
339
340 span:nth-child(4n+2) {
341 background: rgba(0, 160, 233, 0.2);
342 color: rgba(0, 160, 233, 1);
343 }
344
345 span:nth-child(4n+3) {
346 background: rgba(247, 64, 166, 0.2);
347 color: rgba(247, 64, 166, 1);
348 }
349 }
350
351 .mapBox {
352 position: relative;
353 overflow: hidden;
354 height: 200px;
355
356 #map {
357 position: relative;
358 left: -70px;
359 width: calc(100% + 160px);
360 }
361 }
362
363 .sign {
364 padding-top: 2px;
365 }
366
367 .img-header {
368 height: 270px;
369 }
370
371 .card {
372 padding: 10px;
373 width: 100%;
374 height: 100%;
375 position: relative;
376 img{object-fit: cover}
377 }
378
379 .img-hover{
380 position: absolute;
381 top: 0;
382 left: 0;
383 background-color: rgb(0,0,0,.5);
384 color: #fff;
385 font-size: 18px;
386 font-weight: 400;
387 width: 100%;
388 height: 100%;
389 line-height: 115px;
390 text-align: center;
391 border-radius: 10px;
392
393 //display: none;
394 }
395 .hotelImg{border-radius: 10px;overflow: hidden;aspect-ratio: 16/9;
396 img{object-fit: cover;object-position: center;width: 100%;height: 100%;
397 }
398 }
399 .oddmb:nth-child(2){margin-bottom: 20px;}
400 </style>
src/viewsPc/booking/photographyOrder.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 ? '摄影预约下单' : 'Photography booking order' }}</div>
7 </div>
8 <el-card>
9 <div class='order-header'>
10 <div class="title">
11 {{formData.name }}
12 </div>
13 <el-row class="hz-row" >
14 <el-icon size="16" style="position: relative;top: 2px" color="#929AA0">
15 <OfficeBuilding/>
16 </el-icon>
17 {{ language==0?'成立':'Established for'}} <span class="sign" style="padding-top: 2px">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">
19 <UserFilled/>
20 </el-icon>
21 <span class="sign" style="padding-top: 2px"> {{ formData.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">
23 <PhoneFilled/>
24 </el-icon>
25 <span style="padding-top: 2px">
26 {{ formData.contact }}
27 </span>
28 &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
29 <el-icon size="16" style="position: relative;top: 2px" color="#929AA0">
30 <LocationFilled/>
31 </el-icon>
32 {{formData.rearks}}
33
34 </el-row>
35 <hr style="border:1px solid #D3D1F6 ">
36 <el-row class="table">
37 <div style="margin-right: 50px">
38 <el-image style="width:55px;height: 70px " :src="fillImgUrl(formDatas.photos?.split(',')[0]) " fit="cover" />
39 </div>
40 <el-row style="flex: 1">
41 <div style="flex: 1">
42 <div style="margin-bottom: 20px;">预约日期&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="span">{{route.query.date}}</span></div>
43 <div>套餐名称&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="span">{{ formDatas.name }}</span></div>
44 </div>
45
46 <div style="flex: 1">
47 <!-- <div style="margin-bottom: 20px">预约时间&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="span">09:00~12:00</span> </div>-->
48 <div style="margin-bottom: 20px;">上门摄影 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="span">{{ formDatas.goHome==1?'是':'否' }}</span></div>
49 <div >价格&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="sign">{{language==0? '￥'+formDatas.photoPrice:'€'+formDatas.photoPriceEn }}</span></div>
50 </div>
51
52 <div style="flex: 1">
53 <div style="margin-bottom: 20px">套餐说明&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="span">{{formDatas.introduction}}</span></div>
54 <!-- <div >价格&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="sign">{{language==0? '￥'+formDatas.photoPrice:'€'+formDatas.photoPriceEn }}</span></div>-->
55 </div>
56 </el-row>
57 </el-row>
58 </div>
59 <br>
60 <div class="yu">预约时间</div>
61 <el-row style="width: 100%" >
62 <el-button v-for="v in radioList" @click="handleRadio(v)" :disabled="v.num-v.counts<=0" class="radioBox" :class="{'radioBoxbg':v.flag}">
63 <div>
64 <div>{{ v.nameStart }}-{{ v.nameEnd }}</div>
65 <div>(剩余: <span class="sing">{{ v.num-v.counts }}</span> 个)</div>
66 </div>
67 </el-button>
68 </el-row>
69 <br>
70 <div class="yu">预约信息</div>
71 <br>
72 <div class="form-order">
73 <el-form :model="form" style="width: 800px" :label-width="language==0?'140px':'200px'" :rules="rules" ref="formRef">
74 <el-form-item :label="language==0?'预约数量':'Number Of Reservations'" required prop="num">
75 <el-input-number style="width: 100%" v-model.trim="form.num" :min="1" :max="10" @change="changNum"/>
76 </el-form-item>
77 <el-form-item :label="language==0?'预约联系人':'Appointment Contact'" required prop="contacts">
78 <el-input v-model.trim="form.contacts" :min="1" :max="10" />
79 </el-form-item>
80 <el-form-item :label="language==0?'联系电话':'Contact Number'" required prop="phone">
81 <el-input v-model.trim="form.phone" :min="1" :max="13" />
82 </el-form-item>
83 <el-form-item :label="language==0?'备注':'Remarks'" prop="remarks">
84 <el-input type="textarea" :rows="3" v-model.trim="form.remarks" :min="1" :max="10" />
85 </el-form-item>
86 </el-form>
87 </div>
88 </el-card>
89 </el-card>
90
91 <el-card class="mt30">
92 <el-row justify="space-between" align="middle">
93 <el-col :span="12">
94 <label>{{ language == 0 ? '共计金额' : 'Total' }}：
95 <span class=" text-warning"> {{ language == 0 ? '¥' : '€' }}<span class="bigMoney">{{
96 money
97 }}</span></span>
98 </label>
99 </el-col>
100 <el-col :span="12" class="text-right">
101 <el-button type="primary" class="btn-lineG w200px" size="large" round @click="submit">
102 {{ language == 0 ? '确认付款' : 'Book Now' }}
103 </el-button>
104 </el-col>
105 </el-row>
106 </el-card>
107 <div style="height: 60px;"></div>
108
109 </div>
110 </div>
111 </template>
112
113 <script setup>
114 import {useRouter, useRoute} from "vue-router";
115 import {ref, reactive, onMounted,getCurrentInstance} from "vue";
116 import {useStorage} from "@vueuse/core/index";
117 import * as booking from "@/apiPc/booking"
118 import dayjs from 'dayjs'
119 import {ElMessage, ElMessageBox} from "element-plus";
120 import useUserStore from "@/store/modules/user";
121 import {formatDate} from "/@/utils";
122 import {submitOrderPhoto} from "@/apiPc/booking";
123 const { proxy } = getCurrentInstance()
124 const user = useUserStore().user
125 const language = useStorage('language', 0)
126 const router = useRouter()
127 const route = useRoute()
128 const form = ref({
129 num: '1',
130 roomNum: 0,
131 addNum: 0,
132 ddDate: '14:00',
133 phone: user?.phonenumber || '',
134 })
135 const formData=ref({})
136 const formDatas=ref({})
137 const timeVal=ref(null)
138 const money = ref(0)
139 const rules = ref({
140 num: [
141 { required: true, message: '预约数量不能为空', trigger: 'blur' },
142 ],
143 contacts: [
144 { required: true, message: '请输入预约联系人', trigger: 'blur' },
145 ],
146 phoned: [
147 { required: true, message: '请输入联系电话', trigger: 'change' },
148 ],
149
150 })
151 const radioList=ref([])
152
153 onMounted(() => {
154 console.log(route.query)
155 getData()
156 getRadioList()
157 getScheduleList()
158
159 })
160
161 function getData() {
162 booking.getComShootVoById({ activityId: route.params.cptId,
163 shootId:route.params.id}).then(res => {
164 formData.value = res.data
165 }).catch(err => {
166 console.log(err)
167 })
168 }
169
170 function getScheduleList() {
171 booking.getActivityPhotoVoListByShootId({lasId:route.params.id,laspId:route.params.lasId}).then(res=>{
172 formDatas.value={}
173 res.data.forEach(v=>{
174 if (v.id==route.params.lasId) formDatas.value=v
175 })
176 console.log(formDatas.value)
177 })
178 }
179
180 function getRadioList(){
181 booking.getPhotoConfList({ laspId:route.params.lasId}).then(res => {
182 radioList.value = res.data
183 radioList.value.forEach(item=>{
184 item.flag=false
185 })
186 console.log(radioList.value)
187 }).catch(err => {
188 console.log(err)
189 })
190 }
191
192 function submit() {
193 if (!user) {
194 useUserStore().setVisitor()
195 return
196 }
197
198 if (!timeVal.value)return proxy.$modal.msgError('请选择预约时间!', )
199
200 proxy.$refs['formRef'].validate(valid=>{
201 if (valid){
202 form.value.total=money.value
203 form.value.orderName=formData.value.name
204 form.value.dcStart=route.query.date
205 form.value.activeId=route.params.cptId
206 form.value.asId=route.params.id
207 form.value.aspId=route.params.lasId
208 form.value.aspcId=timeVal.value.id
209 form.value.packageName=formDatas.value.name
210 form.value.timePeriod= timeVal.value.nameStart+'-'+timeVal.value.nameEnd
211 console.log(form.value)
212 // 提交确认
213 ElMessageBox.confirm(language.value == 0 ? '确认提交订单吗？' : 'Confirm to submit the order?', {
214 confirmButtonText: language.value == 0 ? '确定' : 'Confirm',
215 cancelButtonText: language.value == 0 ? '取消' : 'Cancel',
216 type: 'warning'
217 }).then(() => {
218 booking.submitOrderPhoto(form.value).then(res => {
219 if (res.data) {
220 if (res.data.roomNum == -100) {
221 ElMessage.warning(language.value == 0 ? '预定时间不足' : 'The remaining number of rooms is insufficient')
222 getRadioList()
223 } else {
224 //去付钱
225 router.push({
226 name: 'bookingPay',
227 query: {
228 orderId: res.data.orderId,
229 money: res.data.total,
230 type: 'photography'
231 }
232 })
233 }
234 } else {
235 ElMessage.warning(language.value == 0 ? '无可预订的时间' : 'No rooms available to book')
236 }
237 }).catch(err => {
238 ElMessage.warning(language.value == 0 ? '无可预订的时间' : 'No rooms available to book')
239 })
240 })
241
242 }else {
243 return proxy.$message.warning(language.value == 0 ? '请填写完整信息' : 'Please fill in the complete information')
244 }
245 })
246 }
247
248
249 function handleRadio(v){
250 timeVal.value=null
251 radioList.value.forEach(t=>{
252 if(v.id==t.id){
253 t.flag=true
254 v.flag =true
255 timeVal.value=v
256 changeMaony()
257 }else{
258 t.flag=false
259 }
260 })
261 }
262
263 function changNum (){
264 changeMaony()
265 }
266 function changeMaony(){
267 if(timeVal.value&&form.value.num){
268 if (language.value==0){
269 money.value= formDatas.value.photoPrice * form.value.num
270 }else{
271 money.value= formDatas.value.photoPriceEn * form.value.num
272 }
273 }
274
275 }
276 </script>
277
278 <style scoped lang="scss">
279 .bigMoney {
280 font-size: 36px !important;
281 font-family: 'DIN Alternate';
282 font-weight: bold;
283 }
284
285 .bg-lineg {
286 height: 40px;
287 line-height: 40px;
288 font-size: 18px;
289 text-align: center;
290 }
291
292 .leftboderTT {
293 font-weight: 600;
294 font-size: 16px;
295 color: #453DEA;
296 }
297
298 .order-header{
299 padding:22px 33px 0 22px;
300 border: 1px solid #453DEA;
301 background-color: rgba(69,61,234,0.04);
302 .title{
303 font-weight: 500;
304 font-size: 24px;
305 color: #000000;
306 margin-bottom: 10px;
307 }
308
309 }
310
311 .border-rr {
312 border-radius: 5px;
313 border: 1px solid #DCDFE6;
314 }
315
316 .ccitemBox {
317 overflow: auto;
318
319 label {
320 margin: 10px 0;
321 display: block;
322 min-height: 30px;
323
324 span {
325 color: #FF8124;
326 font-family: DIN Alternate;
327 font-size: 24px;
328 }
329 }
330 }
331
332
333
334 .red {
335 color: #FF8124;
336 }
337
338 .tip {
339 font-size: 14px;
340 color: #666;
341 padding: 0 10px;
342 }
343 .form-order{
344 border: 1px solid #DCDFE6;
345 padding: 23px 0;
346 }
347
348 .yu{
349 font-size: 16px;
350 color: #453DEA;
351 border-left: 8px solid #453DEA;
352 padding-left: 10px;
353 font-weight: 600;
354 }
355
356 .table{
357 font-size: 14px;
358 color: #000;
359 font-weight: 400;
360 padding: 19px 0;
361 .span{
362 color: #4C5359;
363 }
364 }
365
366 .radioBox{
367 border: 1px dashed #acacac;
368 height: 60px;
369 width: 156px;
370 text-align: center;
371 line-height: 29px;
372 margin: 10px;
373 padding: 0;
374 span{
375 width: 100%;
376 height: 100%;
377 }
378 }
379 .radioBoxbg{
380 background-color: #ecebfc;
381 border: 1px solid #453DEA;
382 color:#453DEA;
383
384 }
385
386 .sing{
387 color:#453DEA;
388 }
389
390 </style>
src/viewsPc/center/myReservation.vue
...@@ -16,6 +16,7 @@ ...@@ -16,6 +16,7 @@
16 <label class="purpleTag" v-if="b.orderType == 1"> {{ language==0?'车辆':'TRANSPORTATION' }} </label> 16 <label class="purpleTag" v-if="b.orderType == 1"> {{ language==0?'车辆':'TRANSPORTATION' }} </label>
17 <label class="orangeTag" v-if="b.orderType == 2"> {{ language==0?'餐饮':'DINING' }} </label> 17 <label class="orangeTag" v-if="b.orderType == 2"> {{ language==0?'餐饮':'DINING' }} </label>
18 <label class="orangeTag" v-if="b.orderType == 3"> {{ language==0?'化妆':'MakeUp' }} </label> 18 <label class="orangeTag" v-if="b.orderType == 3"> {{ language==0?'化妆':'MakeUp' }} </label>
19 <label class="orangeTag" v-if="b.orderType == 4"> {{ language==0?'拍摄':'Shooting ' }} </label>
19 20
20 <span>{{ language==0?'订单编号：':'No.' }} {{ b.id }}</span> 21 <span>{{ language==0?'订单编号：':'No.' }} {{ b.id }}</span>
21 </div> 22 </div>
...@@ -59,7 +60,7 @@ ...@@ -59,7 +60,7 @@
59 <p>{{language==0?'配送日期':'Delivery Date'}}：{{b.extJsonObj.dcEnd }} ~ {{b.extJsonObj.dcEnd}}</p> 60 <p>{{language==0?'配送日期':'Delivery Date'}}：{{b.extJsonObj.dcEnd }} ~ {{b.extJsonObj.dcEnd}}</p>
60 61
61 </div> 62 </div>
62 <div v-if="b.orderType==3"> 63 <div v-if="b.orderType==3 ||b.orderType == 4">
63 <h3 class="name">{{b.name}}</h3> 64 <h3 class="name">{{b.name}}</h3>
64 <p v-if="language==0"> 65 <p v-if="language==0">
65 {{dayjs(b.deliveryTime).format('YYYY-MM-DD')+' '+b.extJsonObj.timePeriod?.split('-')[0]+'-'+dayjs(b.deliveryTime).format('YYYY-MM-DD')+' '+b.extJsonObj.timePeriod?.split('-')[1] }} 66 {{dayjs(b.deliveryTime).format('YYYY-MM-DD')+' '+b.extJsonObj.timePeriod?.split('-')[0]+'-'+dayjs(b.deliveryTime).format('YYYY-MM-DD')+' '+b.extJsonObj.timePeriod?.split('-')[1] }}
...@@ -75,7 +76,7 @@ ...@@ -75,7 +76,7 @@
75 </div> 76 </div>
76 <div v-if="b.orderType == 2"> 77 <div v-if="b.orderType == 2">
77 </div> 78 </div>
78 <div v-if="b.orderType == 3"> 79 <div v-if="b.orderType == 3||b.orderType == 4">
79 <p>{{ b.extJsonObj.packageName }}</p> 80 <p>{{ b.extJsonObj.packageName }}</p>
80 </div> 81 </div>
81 </el-col> 82 </el-col>
...@@ -137,6 +138,7 @@ function getList() { ...@@ -137,6 +138,7 @@ function getList() {
137 b.countdown = Date.now() + a+c 138 b.countdown = Date.now() + a+c
138 } 139 }
139 } 140 }
141 console.log(list.value)
140 }) 142 })
141 } 143 }
142 function goDetail(b) { 144 function goDetail(b) {
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!