Skip to content

jijin / dance-pc

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

化妆拍照

1 parent 0ac2721e
Expand all
Inline Side-by-side
Showing 14 changed files with 730 additions and 80 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/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/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!