Skip to content

杨炀 / dance-pc

Go to a project
Toggle navigation
Toggle navigation pinning
e0bb9172 by 杨炀
Options

Merge branch 'order' into dev

2 parents 08d0b03c a586c361
Expand all
Inline Side-by-side
Showing 25 changed files with 1851 additions and 106 deletions
.gitignore
...@@ -18,6 +18,7 @@ selenium-debug.log ...@@ -18,6 +18,7 @@ selenium-debug.log
18 *.njsproj 18 *.njsproj
19 *.sln 19 *.sln
20 *.local 20 *.local
21 *.zip
21 22
22 package-lock.json 23 package-lock.json
23 yarn.lock 24 yarn.lock
......
src/App.vue
...@@ -278,4 +278,40 @@ li.el-select-dropdown__item { ...@@ -278,4 +278,40 @@ li.el-select-dropdown__item {
278 @media (max-width: 800px) { 278 @media (max-width: 800px) {
279 .box{width: 96%} 279 .box{width: 96%}
280 } 280 }
281
282 .hz-tag{
283 border-radius: 13px;
284 height: 25px;
285 line-height: 25px;
286 font-size: 12px;
287 font-weight: 400;
288 padding: 0 15px;
289 }
290 .tag1{
291 background: rgba(50, 177, 108, 0.2);
292 color:rgba(50, 177, 108, 1);
293 }
294 .tag2{
295 background-color: rgba(243, 152, 0, 0.2);
296 color: #F39800;
297 }
298 .tag3{
299 background-color: rgba(0, 160, 233, 0.2);
300 color: #00A0E9;
301 }
302 .tag4{
303 background-color: rgba(247, 64, 166, 0.2);
304 color: #F740A6;
305 }
306 .hz-row{
307 font-size: 14px;
308 font-weight: 400;
309 color: #929AA0;
310 margin-bottom: 16px;
311
312 }
313 .sign{
314 color: #493CEB;
315 }
316
281 </style> 317 </style>
......
src/apiPc/booking.js
...@@ -207,3 +207,116 @@ export function delAddress(ids) { ...@@ -207,3 +207,116 @@ export function delAddress(ids) {
207 method: 'delete' 207 method: 'delete'
208 }) 208 })
209 } 209 }
210
211 export function getMakeUpList(data) {
212 return request({
213 url: `/ota/activityStudio/getStudioList`,
214 method: 'get',
215 params:data
216 })
217 }
218
219 export function makeUpDetail(data) {
220 return request({
221 url: `/ota/activityStudio/getComStudioVoById`,
222 method: 'get',
223 params:data
224 })
225 }
226
227 export function getActivityMealVoListByStudioId(data) {
228 return request({
229 url: `/ota/activityMeal/getActivityMealVoListByStudioId`,
230 method: 'get',
231 params:data
232 })
233 }
234
235 export function getMealConfList(data) {
236 return request({
237 url: `/ota/mealConfig/getMealConfList`,
238 method: 'get',
239 params:data
240 })
241 }
242
243 export function submitOrderMeal(data) {
244 return request({
245 url: `/ota/norder/submitOrderMeal`,
246 method: 'post',
247 data
248 })
249 }
250
251 export function getMealOrderInfo(data) {
252 return request({
253 url: `/ota/orderMeal/getMealOrderInfo`,
254 method: 'get',
255 params:data
256 })
257 }
258
259
260 export function getMealOrderInfoByLogex(data) {
261 return request({
262 url: `/ota/orderMeal/getMealOrderInfoByLogex`,
263 method: 'get',
264 params:data
265 })
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/assets/booking/hz_bg.png
src/assets/booking/hz_bg.png

118 KB | W: | H:

src/assets/booking/hz_bg.png

118 KB | W: | H:

src/assets/booking/hz_bg.png
src/assets/booking/hz_bg.png
src/assets/booking/hz_bg.png
src/assets/booking/hz_bg.png
  • 2-up
  • Swipe
  • Onion skin
src/permissionPc.js
...@@ -10,7 +10,6 @@ NProgress.configure({ showSpinner: false }) ...@@ -10,7 +10,6 @@ NProgress.configure({ showSpinner: false })
10 10
11 router.beforeEach((to, from, next) => { 11 router.beforeEach((to, from, next) => {
12 NProgress.start() 12 NProgress.start()
13 debugger
14 if (getToken()) { 13 if (getToken()) {
15 // 判断当前用户是否已拉取完user_info信息 14 // 判断当前用户是否已拉取完user_info信息
16 if (!useUserStore().user) { 15 if (!useUserStore().user) {
......
src/routerPc/en.js
...@@ -404,18 +404,36 @@ export const constantRoutes = [ ...@@ -404,18 +404,36 @@ export const constantRoutes = [
404 meta: { title: 'Makeup Appointment' } 404 meta: { title: 'Makeup Appointment' }
405 }, 405 },
406 { 406 {
407 path: 'makeUp/:cptId/:studioId', 407 path: 'makeUp/:cptId/:id',
408 component: () => import('@/viewsPc/booking/studioDetail'), 408 component: () => import('@/viewsPc/booking/makeUpDetail'),
409 name: 'studioDetail', 409 name: 'makeUpDetail',
410 meta: { title: 'Makeup Appointment' } 410 meta: { title: 'Makeup Appointment' }
411 }, 411 },
412 { 412 {
413 path: 'makeUp/:cptId/:id/:lasId',
414 component: () => import('@/viewsPc/booking/makeUpOrder.vue'),
415 name: 'makeUpOrder',
416 meta: { title: 'Makeup Reservation' }
417 },
418 {
413 path: 'photography/:cptId', 419 path: 'photography/:cptId',
414 component: () => import('@/viewsPc/booking/photography'), 420 component: () => import('@/viewsPc/booking/photography'),
415 name: 'photography', 421 name: 'photography',
416 meta: { title: 'Photography Appointment' } 422 meta: { title: 'Photography Appointment' }
417 }, 423 },
418 { 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 {
419 path: 'pay', 437 path: 'pay',
420 component: () => import('@/viewsPc/booking/pay'), 438 component: () => import('@/viewsPc/booking/pay'),
421 name: 'bookingPay', 439 name: 'bookingPay',
...@@ -432,12 +450,6 @@ export const constantRoutes = [ ...@@ -432,12 +450,6 @@ export const constantRoutes = [
432 component: () => import('@/viewsPc/booking/invoicing'), 450 component: () => import('@/viewsPc/booking/invoicing'),
433 name: 'invoice', 451 name: 'invoice',
434 meta: { title: '我的发票' } 452 meta: { title: '我的发票' }
435 },
436 {
437 path: 'addInvoice/:id',
438 component: () => import('@/viewsPc/booking/addInvoice'),
439 name: 'addInvoice',
440 meta: { title: '编辑发票' }
441 } 453 }
442 ] 454 ]
443 }, 455 },
......
src/viewsPc/booking/component/makeUpCalendar.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' >
10 <!-- <div class="canBtn"><el-icon><ArrowLeftBold /></el-icon></div>-->
11 <div class="cTitle">
12 <!-- <el-date-picker-->
13 <!-- v-model="value2"-->
14 <!-- type="daterange"-->
15 <!-- range-separator="-"-->
16 <!-- start-placeholder="Start date"-->
17 <!-- end-placeholder="End date"-->
18 <!-- format="YYYY-MM-DD"-->
19 <!-- value-format="YYYY-MM-DD"-->
20 <!-- size="small"-->
21 <!-- @change="changee"-->
22 <!-- />-->
23 <!-- <el-input readonly :value="date" type="text" size="small" style="width: 280px"></el-input>-->
24 {{date}}
25 </div>
26 <!-- <div class="canBtn"><el-icon><ArrowRightBold /></el-icon></div>-->
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 :disabled-date="disabledDate"
39 />
40 </div>
41 </el-col>
42 </el-row>
43 </template>
44 <template #date-cell="data">
45 <div :class="data.data.day==query.currentDate?'primaryDate date':'date'" @click="selectDate(data.data.day)">
46 {{ data.data.day.slice(8, 10) }}
47 </div>
48 </template>
49 </el-calendar>
50
51 <div class="calendarList">
52 <ul v-loading="loading">
53 <li v-for="n in schList" :key="n.id" >
54 <el-row style="width: 100%">
55 <div style="margin-right: 25px">
56 <el-image style="width: 90px;height: 115px" :src="fillImgUrl(n.photos?.split(',')[0]) " fit="cover" />
57 </div>
58 <div style="flex: 1" >
59 <div class="hz-title">{{ n.name }}</div>
60 <div>
61 <el-row justify="space-between">
62 <el-row class="hz-p" style="flex: 1">
63 <el-col :span="8">
64 <div >{{ language==0?'套餐说明':'Package Description' }}: <span style="margin-right: 20px">{{n.introduction}}</span></div>
65 </el-col>
66
67 <el-col :span="8">
68 <div>{{ language==0?'剩余':'' }}<span class="sign">{{ n.num-n.counts }}</span>{{language==0?'名额':'Places Remaining' }} </div>
69 </el-col>
70 <el-col :span="8">
71 <div >{{n.goHome==1?language==0?'上门化妆':'Door-to-door makeup':''}}</div>
72 </el-col>
73 </el-row>
74 <el-row>
75 <div class="zh-margin" style="font-size: 36px;color: #ff8124"><span style="font-size: 24px">{{ language==0?'¥':'€'}} </span> {{language==0?n.mealPrice:n.mealPriceEn}}</div>
76 <el-button :disabled="n.num-n.counts<=0||Date.now()>dayjs(currentDate).subtract(-1,'day').valueOf()" class="btn-lineG w200px" round type="primary" size="large" @click="goMatch(n)">{{ language==0?'立即预约':'Select' }} ⇀</el-button>
77 </el-row>
78 </el-row>
79 </div>
80 </div>
81 </el-row>
82 </li>
83 </ul>
84 <el-empty v-if="schList.length== 0"
85 style="--el-empty-padding:0;--el-empty-description-margin-top:0"
86 :image="`/img/order_no.png`"
87 :image-size="200"/>
88 </div>
89 </div>
90 </template>
91
92 <script setup>
93 import {ref} from "vue";
94 import {dayjs} from "element-plus";
95 import {useRoute,useRouter} from 'vue-router'
96 import * as booking from "@/apiPc/booking"
97 import {useStorage} from "@vueuse/core/index";
98 import useUserStore from "/@/store/modules/user";
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
115 getScheduleList()
116 function getScheduleList() {
117 loading.value = true
118 query.value.currentDate = dayjs(currentDate.value).format('YYYY-MM-DD')
119 booking.getActivityMealVoListByStudioId(query.value).then(res=>{
120 loading.value = false
121 schList.value = res.data
122 })
123 }
124 function selectDate(date) {
125 currentDate1.value= currentDate.value=dayjs(date).toDate()
126 console.log(date)
127 getScheduleList()
128 }
129
130 function dateChange(){
131 currentDate.value=currentDate1.value
132 calendarRange.value=[dayjs(currentDate.value).toDate(),(dayjs(currentDate.value).toDate())]
133 getScheduleList()
134 }
135
136 function goMatch(n) {
137 if (!user) {
138 useUserStore().setVisitor()
139 return
140 }
141
142 router.push({
143 name: 'makeUpOrder',
144 params: {
145 lasId: n.id
146 },
147 query: {
148 date: dayjs(currentDate.value).format('YYYY-MM-DD')
149 }
150 })
151 }
152
153 // function disabledDate(e){
154 // return e.getTime()<=Date.now()
155 // console.log(e)
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/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||Date.now()>dayjs(currentDate).subtract(-1,'day').valueOf()" class="btn-lineG w200px" round type="primary" size="large" @click="goMatch(n)">{{ 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/makeUp.vue
1 <template> 1 <template>
2 <div> 2 <div>
3 <div class="banner"> 3 <div class="banner">
4 <img src="@/assets/booking/hz_text.png"> 4 <img v-if="language==0" src="@/assets/booking/hz_text_c.png">
5 <img v-else src="@/assets/booking/hz_text_e.png">
5 </div> 6 </div>
6 <div class="box"> 7 <div class="box">
7 <div class="searchBar"> 8 <div class="searchBar">
...@@ -12,125 +13,171 @@ ...@@ -12,125 +13,171 @@
12 </div> 13 </div>
13 </div> 14 </div>
14 <div class="box" v-loading="loading"> 15 <div class="box" v-loading="loading">
15 <el-row :gutter="20" class="mb20"> 16 <el-row style="width: 100%" :gutter="20">
16 <el-col :lg="8" :md="8" :sm="12" :xs="24" v-for="(n,index) in list" :key="index"> 17 <el-col :span="8" v-for="(h,index) in list" class="mb20" >
17 <el-card class="mb20 mitem"> 18 <el-card style="position: relative;">
18 <div class="imgbox"><img/> 19 <img class="w100 hz-img" :src="fillImgUrl(h.cover)"/>
19 <span>30 个时间段可预约</span> 20 <div class="yuyue">
21 {{ h.counts }} {{ language==0?'个时间段可预约':"time slots can be reserved" }}
20 </div> 22 </div>
21 <div class="info"> 23 <div class="hz-text">{{h.name}}</div>
22 <h3>Mango美妆工作室</h3> 24 <div class="tagbox esp">
23 <div class="tagbox"> 25 <span v-for="(t,index) in h.label?.split('，')" v-show="index<4">{{t}}</span>
24 <span>专业团队</span>
25 <span>大牌化妆品</span>
26 <span>金牌化妆师</span>
27 <span>连锁</span>
28 </div> 26 </div>
29 <p class="esp"> 27 <div class="hz-row">
30 <span> 28 <el-icon size="16" style="position: relative;top: 2px" color="#929AA0"><OfficeBuilding /></el-icon>
31 <el-icon><OfficeBuilding /></el-icon> 29 {{ language==0?'成立':'Established for'}}
32 成立<i class="text-primary">6</i>年 30 <span class="sign">{{ h.ageLimit }}</span>{{language==0?'年':'years'}} |
33 </span> 31 <el-icon size="16" style="position: relative;top: 2px" color="#929AA0"><UserFilled /></el-icon><span class="sign">{{ h.dresserLimit }}</span>{{language==0?'名化妆师':'makeup artists' }}
34 <span>
35 <el-icon><User /></el-icon>
36 <i class="text-primary">12</i>名化妆师
37 </span>
38 </p>
39 <p class="esp"><el-icon><Iphone /></el-icon>
40 800-820-8820
41 </p>
42 <p class="esp"><el-icon><Location /></el-icon>
43 江苏无锡梁溪区南长街5D-601
44 </p>
45 <div class="text-center mt20">
46 <el-button @click="goDetail(n)" round type="primary" class="btn-lineG fs18 w50" size="large">
47 立即预约 &ensp; <el-icon class="rotate90_180"> <sort-down/></el-icon>
48 </el-button>
49 </div> 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 :disabled="h.counts<=0" class="btn-lineG w200px" round type="primary" size="large" @click="goDetail(h)">{{ language==0?'立即预约':'Select' }} ⇀</el-button>
50 </div> 43 </div>
51 </el-card> 44 </el-card>
52 </el-col> 45 </el-col>
53 </el-row> 46 </el-row>
54 47
48 <el-empty v-show="!loading&&list.length==0" :image="`/img/order_no.png`" :image-size="228" description="" />
49 <div style="height: 50px"></div>
55 </div> 50 </div>
56 51
57 </div> 52 </div>
58 </template> 53 </template>
59 54
60 <script setup> 55 <script setup>
61 import {getStudioList} from "@/apiPc/booking"
62 import {onMounted} from "@vue/runtime-core" 56 import {onMounted} from "@vue/runtime-core"
63 import {useRoute, useRouter} from "vue-router" 57 import * as booking from "@/apiPc/booking"
58 import {useRouter,useRoute} from "vue-router";
64 import {useStorage} from "@vueuse/core/index"; 59 import {useStorage} from "@vueuse/core/index";
65 const language= useStorage('language',0) 60 import {getMakeUpList} from "@/apiPc/booking";
66 const router = useRouter() 61 const router = useRouter()
67 const route = useRoute() 62 const route = useRoute()
68 const list = ref([{id:'0'},{id:'1'},{id:'2'},{id:'3'}]) 63 const language= useStorage('language',0)
69 const loading = ref(false)
70 const query = ref({ 64 const query = ref({
71 65 name:''
72 }) 66 })
67 const cptId = ref('')
68 const list = ref([])
69 const loading = ref(false)
73 onMounted(()=>{ 70 onMounted(()=>{
74 query.value.activityId = route.params.cptId 71 query.value.activityId = route.params.cptId
75 // getList() 72 getList()
76 }) 73 })
74
77 function getList() { 75 function getList() {
78 loading.value = true 76 loading.value = true
79 getStudioList(query.value).then(res=>{ 77 booking.getMakeUpList(query.value).then(res=>{
80 list.value = res.rows 78 list.value = res.rows
81 loading.value = false 79 loading.value = false
82 }).catch(err=>{ 80 }).catch(e=>{
83 loading.value = false 81 loading.value = false
84 }) 82 })
85 } 83 }
86 function goDetail(n) { 84 function goDetail(item) {
87 router.push({ 85 router.push({
88 name:'studioDetail', 86 name:'makeUpDetail',
89 params:{ 87 params:{
90 studioId: n.id 88 id:item.id,
91 } 89 }
92 }) 90 })
93 } 91 }
94 </script> 92 </script>
95 93
96 <style scoped lang="scss"> 94 <style scoped lang="scss">
95
97 .banner{height: 140px;background-size: cover;text-align: center; 96 .banner{height: 140px;background-size: cover;text-align: center;
98 background: url("@/assets/booking/hz_bg.png") center;display: flex;align-items: center; 97 background: url("@/assets/booking/hz_bg.png") center;display: flex;align-items: center;
99 justify-content: center; 98 justify-content: center;
100 img{display: block;margin:-30px auto 0;width: auto;} 99 img{display: block;margin:-30px auto 0;width: auto;}
101 } 100 }
102 .searchBar{position: relative;top: -30px; 101 .searchBar{position: relative;top: -30px;
103 background: #FFFFFF;display: flex;padding: 20px; 102 background: #FFFFFF;display: flex;padding: 20px;
104 border-radius: 10px;} 103 border-radius: 10px;}
105 .no-border{border: none;background: #F5F7F9; 104 .no-border{border: none;background: #F5F7F9;
106 :deep(.el-input__wrapper){border: none;box-shadow: none;background: #F5F7F9;} 105 :deep(.el-input__wrapper){border: none;box-shadow: none;background: #F5F7F9;}
107 } 106 }
108 .tagbox{margin: 15px 0; 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 height: 30px;
119 padding-right: 10px;
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
174
175 .tagbox{margin: 10px 0;
109 a{color: #AFB5B9;font-size: 12px;} 176 a{color: #AFB5B9;font-size: 12px;}
110 span{border-radius: 13px;font-size: 12px;padding: 4px 10px;margin-right:10px;font-weight: 400;} 177 span{border-radius: 13px;font-size: 12px;padding: 3px 10px;margin-right:10px;font-weight: 400;}
111 span:nth-child(4n){background: rgba(50, 177, 108, 0.2);color: rgba(50, 177, 108, 1);} 178 span:nth-child(4n){background: rgba(50, 177, 108, 0.2);color: rgba(50, 177, 108, 1);}
112 span:nth-child(4n+1){background:rgba(243, 152, 0, 0.2);color: rgba(243, 152, 0, 1);} 179 span:nth-child(4n+1){background:rgba(243, 152, 0, 0.2);color: rgba(243, 152, 0, 1);}
113 span:nth-child(4n+2){background: rgba(0, 160, 233, 0.2);color: rgba(0, 160, 233, 1);} 180 span:nth-child(4n+2){background: rgba(0, 160, 233, 0.2);color: rgba(0, 160, 233, 1);}
114 span:nth-child(4n+3){background: rgba(247, 64, 166, 0.2);color:rgba(247, 64, 166, 1);} 181 span:nth-child(4n+3){background: rgba(247, 64, 166, 0.2);color:rgba(247, 64, 166, 1);}
115 } 182 }
116 .mitem{
117 .imgbox{aspect-ratio: 16/9;background: rgba(129, 122, 234, 0.7);
118 position: relative;
119 span{position: absolute;color: #fff;font-weight: 400;bottom: 0;right: 0;
120 font-size: 14px;background: rgba(0,0,0,0.45);
121 border-radius: 16px 0 0 0;padding:4px 14px;
122 }
123 }
124 .info{
125 p{font-weight: 400;margin: 7px 0;
126 font-size: 14px;
127 color: #929AA0;
128 i{font-style: normal;}
129 }
130 span{margin-right: 10px;
131 i.text-primary{padding: 0 4px;}
132 }
133 .el-icon{position: relative;top:2px;margin-right: 4px;}
134 }
135 }
136 </style> 183 </style>
......
src/viewsPc/booking/makeUpDetail.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">{{form.ageLimit}}</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?'名化妆师':'makeup artists' }}&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.remarks}}
31 </el-row>
32 </el-card>
33
34 <div class="mt30">
35 <el-row :gutter="20">
36 <el-col :span="10">
37 <div class="imgbox hotelImg">
38 <el-image :src="form?.photosList?.[0]" fit="cover" :preview-src-list="form?.photosList"/>
39 </div>
40 </el-col>
41 <el-col :span="14">
42 <el-row class="h100" :gutter="20">
43 <el-col :span="8" class="oddmb" v-for="(p,index) in form?.photosList?.slice(1,7)">
44 <div class="imgbox hotelImg"><el-image :src="p" fit="cover"/></div>
45 </el-col>
46 </el-row>
47 </el-col>
48 </el-row>
49 </div>
50 <br>
51 <el-card :body-style="{'padding':'20px 20px'}">
52 <MakeUpCalendar/>
53 </el-card>
54
55 </div>
56 </div>
57 </template>
58
59 <script setup >
60 import {useRouter} from "vue-router";
61 import {ref, reactive, onMounted} from "vue";
62 import {useRoute} from "vue-router";
63 import * as booking from "@/apiPc/booking"
64 import {useStorage} from "@vueuse/core/index";
65 import useUserStore from "@/store/modules/user";
66 import MakeUpCalendar from "@/viewsPc/booking/component/makeUpCalendar.vue";
67 import {fillImgUrl} from "/@/utils/ruoyi";
68 const user = useUserStore().user
69 const language = useStorage('language', 0)
70 const router = useRouter()
71 const route = useRoute()
72 const form = ref({})
73 const query = ref({
74 activityId: route.params.cptId,
75 id:route.params.id
76 })
77 const loading = ref(false)
78 onMounted(() => {
79 getData()
80 })
81
82 function getData() {
83 loading.value = true
84 booking.makeUpDetail(query.value).then(res => {
85 loading.value = false
86 form.value = res.data
87 form.value.photosList=[]
88 form.value.photos?.split(',')?.forEach(v=>{
89 form.value.photosList.push(fillImgUrl(v))
90 })
91 console.log(res)
92 }).catch(err => {
93 console.log(err)
94 })
95 }
96
97 </script>
98
99 <style scoped lang="scss">
100 .room {
101 background: #FAFBFD;
102 margin: 20px 0 0;
103 padding: 20px;
104 border: 1px solid #E5E5E5;
105
106 .name {
107 font-size: 20px;
108 margin: 0 0 10px;
109 }
110
111 .roomImg {
112 aspect-ratio: 16/9;
113 border-radius: 10px;
114 overflow: hidden;
115
116 img {
117 width: 100%;
118 object-fit: cover;
119 object-position: center;
120 height: 100%;
121 }
122 }
123
124 .price {
125 color: #FF8124;
126 font-size: 24px;
127
128 span {
129 font-size: 36px;
130 font-family: "DIN Alternate"
131 }
132 }
133
134 .bg-lineg {
135 margin: auto;
136 border-radius: 10px;
137 text-align: center;
138 padding: 7px 2px 2px;
139 font-size: 24px;
140 width: 66px;
141 cursor: pointer;
142
143 div {
144 background: #fff;
145 font-size: 13px;
146 border-radius: 20px;
147 padding: 0 10px;
148 color: #453DEA;
149 font-weight: 500;
150 }
151 }
152 }
153
154 .zh-title {
155 font-size: 24px;
156 font-weight: 500;
157 margin-right: 25px;
158 }
159
160
161 .hotel {
162 h3 {
163 margin: 0 0 20px;
164 }
165
166 img.w100 {
167 object-fit: cover;
168 aspect-ratio: 16/9
169 }
170
171 .addr {
172 font-size: 16px;
173 color: #929AA0;
174 font-weight: 400;
175 }
176
177 .price {
178 margin: 0 0 25px;
179 color: #FF8124;
180 font-size: 18px;
181
182 span {
183 font-size: 24px;
184 margin: 0 8px;
185 font-family: 'DINAlternate-Bold';
186 font-weight: 600;
187 }
188
189 i {
190 font-style: normal;
191 color: #929AA0;
192 }
193 }
194 }
195
196
197 .tagbox {
198 margin: 15px 0;
199
200 a {
201 color: #AFB5B9;
202 font-size: 12px;
203 }
204
205 span {
206 border-radius: 13px;
207 font-size: 12px;
208 padding: 4px 10px;
209 margin-right: 10px;
210 font-weight: 400;
211 }
212
213 span:nth-child(4n) {
214 background: rgba(50, 177, 108, 0.2);
215 color: rgba(50, 177, 108, 1);
216 }
217
218 span:nth-child(4n+1) {
219 background: rgba(243, 152, 0, 0.2);
220 color: rgba(243, 152, 0, 1);
221 }
222
223 span:nth-child(4n+2) {
224 background: rgba(0, 160, 233, 0.2);
225 color: rgba(0, 160, 233, 1);
226 }
227
228 span:nth-child(4n+3) {
229 background: rgba(247, 64, 166, 0.2);
230 color: rgba(247, 64, 166, 1);
231 }
232 }
233
234 .sign {
235 padding-top: 2px;
236 }
237
238 .img-header {
239 height: 270px;
240 }
241
242 .card {
243 padding: 10px;
244 width: 100%;
245 height: 100%;
246 position: relative;
247 img{object-fit: cover}
248 }
249
250 .img-hover{
251 position: absolute;
252 top: 0;
253 left: 0;
254 background-color: rgb(0,0,0,.5);
255 color: #fff;
256 font-size: 18px;
257 font-weight: 400;
258 width: 100%;
259 height: 100%;
260 line-height: 115px;
261 text-align: center;
262 border-radius: 10px;
263 }
264
265 .hotelImg{border-radius: 10px;overflow: hidden;aspect-ratio: 16/9;
266 img{object-fit: cover;object-position: center;width: 100%;height: 100%;
267 }
268 }
269 .oddmb:nth-child(2){margin-bottom: 20px;}
270 </style>
src/viewsPc/booking/pay.vue
...@@ -27,7 +27,6 @@ ...@@ -27,7 +27,6 @@
27 </el-row> 27 </el-row>
28 </div> 28 </div>
29 </div> 29 </div>
30
31 <div v-if="type == 'car'"> 30 <div v-if="type == 'car'">
32 <div class="leftboderTT">{{ language == 0 ? '路线信息' : 'Car Information' }}</div> 31 <div class="leftboderTT">{{ language == 0 ? '路线信息' : 'Car Information' }}</div>
33 <div class="border-info mt20"> 32 <div class="border-info mt20">
...@@ -53,7 +52,42 @@ ...@@ -53,7 +52,42 @@
53 </el-row> 52 </el-row>
54 </div> 53 </div>
55 </div> 54 </div>
56 55 <div v-if="type == 'makeUp'">
56 <div class="leftboderTT">{{ language == 0 ? '化妆信息' : 'Hotel Information' }}</div>
57 <div class="border-info mt20">
58 <h3>{{ formInfo.studioName }}</h3>
59 <el-row>
60 <el-col>
61 {{ language == 0 ?'地址':'Address' }}：
62 <span >{{ formInfo.remarks }} </span>
63 </el-col>
64 <el-col>
65 {{ language == 0 ?'套餐':'Package' }}：{{ formInfo.mealName }} <span style="margin-left: 40px">{{ language==0?'价格':'Price' }}</span><span class="price">{{language==0? '￥'+formInfo.mealPrice:'€'+ formInfo.mealPriceEn}}</span>
66 </el-col>
67 <el-col>
68 {{ language == 0 ?'套餐说明':'Package Description' }}：{{ formInfo.introduction}}
69 </el-col>
70 </el-row>
71 </div>
72 </div>
73 <div v-if="type == 'photography'">
74 <div class="leftboderTT">{{ language == 0 ? '拍摄信息' : 'Shooting Information' }}</div>
75 <div class="border-info mt20">
76 <h3>{{ formInfo.shootName }}</h3>
77 <el-row>
78 <el-col>
79 {{ language == 0 ?'地址':'Address' }}：
80 <span >{{ formInfo.remarks }} </span>
81 </el-col>
82 <el-col>
83 {{ language == 0 ?'套餐':'Package' }}：{{ formInfo.photoName }} <span style="margin-left: 40px">{{ language==0?'价格':'Price' }}</span><span class="price">{{language==0? '￥'+formInfo.photoPrice:'€'+ formInfo.photoPriceEn}}</span>
84 </el-col>
85 <el-col>
86 {{ language == 0 ?'套餐说明':'Package Description' }}：{{ formInfo.introduction}}
87 </el-col>
88 </el-row>
89 </div>
90 </div>
57 91
58 <div class="leftboderTT">{{ language == 0 ? '预订信息' : 'Booking information' }}</div> 92 <div class="leftboderTT">{{ language == 0 ? '预订信息' : 'Booking information' }}</div>
59 93
...@@ -127,6 +161,37 @@ ...@@ -127,6 +161,37 @@
127 <el-col :lg="8" :md="12" :sm="12" :xs="24">{{ language==0?'联系方式':'Contact Phone' }}：{{ form.phone }}</el-col> 161 <el-col :lg="8" :md="12" :sm="12" :xs="24">{{ language==0?'联系方式':'Contact Phone' }}：{{ form.phone }}</el-col>
128 <el-col :span="24" >{{ language==0?'备注':'Remarks' }}：{{ form.remarks || '-' }}</el-col> 162 <el-col :span="24" >{{ language==0?'备注':'Remarks' }}：{{ form.remarks || '-' }}</el-col>
129 </el-row> 163 </el-row>
164 <el-row v-if="type == 'makeUp'">
165 <el-col :lg="8" :md="12" :sm="12" :xs="24">
166 <div class="mb10">{{ language==0?'化妆时间':'Makeup time' }}：
167 <!-- {{ dayjs(form.dcStart).format('YYYY-MM-DD') +'&nbsp;' }} ~ {{dayjs(form.dcStart).format('YYYY-MM-DD') +'&nbsp;'}}-->
168 {{ dayjs(form.dcStart).format('YYYY-MM-DD') +'&nbsp;'+ form.nameStart }} ~ {{dayjs(form.dcStart).format('YYYY-MM-DD') +'&nbsp;'+form.nameEnd}}
169 </div>
170 </el-col>
171 <el-col :lg="12" :md="12" :sm="12" :xs="24">
172 <div class="mb10">{{ language==0?'预约数':'Number of appointments' }}：{{ form.num }} </div>
173 </el-col>
174 <el-col :lg="8" :md="12" :sm="12" :xs="24">
175 <div class="mb10">{{ language==0?'联系人':'Contact Person' }}：{{ form.contacts }}</div>
176 </el-col>
177 <el-col :lg="8" :md="12" :sm="12" :xs="24">{{ language==0?'联系方式':'Contact Phone' }}：{{ form.phone }}</el-col>
178 <el-col :span="24" >{{ language==0?'备注':'Remarks' }}：{{ form.remarks }}</el-col>
179 </el-row>
180 <el-row v-if="type == 'photography'">
181 <el-col :lg="8" :md="12" :sm="12" :xs="24">
182 <div class="mb10">{{ language==0?'拍摄时间':'Makeup time' }}：
183 {{ dayjs(form.dcStart).format('YYYY-MM-DD') +'&nbsp;'+ form.nameStart }} ~ {{dayjs(form.dcStart).format('YYYY-MM-DD') +'&nbsp;'+form.nameEnd}}
184 </div>
185 </el-col>
186 <el-col :lg="12" :md="12" :sm="12" :xs="24">
187 <div class="mb10">{{ language==0?'预约数':'Number of appointments' }}：{{ form.num }} </div>
188 </el-col>
189 <el-col :lg="8" :md="12" :sm="12" :xs="24">
190 <div class="mb10">{{ language==0?'联系人':'Contact Person' }}：{{ form.contacts }}</div>
191 </el-col>
192 <el-col :lg="8" :md="12" :sm="12" :xs="24">{{ language==0?'联系方式':'Contact Phone' }}：{{ form.phone }}</el-col>
193 <el-col :span="24" >{{ language==0?'备注':'Remarks' }}：{{ form.remarks }}</el-col>
194 </el-row>
130 </div> 195 </div>
131 196
132 <el-row justify="space-between" align="middle"> 197 <el-row justify="space-between" align="middle">
...@@ -169,7 +234,7 @@ ...@@ -169,7 +234,7 @@
169 234
170 <div class="leftboderTT">{{ language == 0 ? '选择支付方式' : 'Choose payment method' }}</div> 235 <div class="leftboderTT">{{ language == 0 ? '选择支付方式' : 'Choose payment method' }}</div>
171 <div class="mt20"> 236 <div class="mt20">
172 <el-radio-group v-model="payType"> 237 <el-radio-group v-model="payType" >
173 <el-radio value="2" v-if="language==0" border> 238 <el-radio value="2" v-if="language==0" border>
174 <!-- 微信--> 239 <!-- 微信-->
175 <svg t="1709002960407" class="icon" viewBox="0 0 3152 1024" version="1.1" 240 <svg t="1709002960407" class="icon" viewBox="0 0 3152 1024" version="1.1"
...@@ -298,7 +363,14 @@ import useUserStore from "@/store/modules/user"; ...@@ -298,7 +363,14 @@ import useUserStore from "@/store/modules/user";
298 import FileUpload from "@/components/FileUpload"; 363 import FileUpload from "@/components/FileUpload";
299 import {useStorage} from "@vueuse/core/index"; 364 import {useStorage} from "@vueuse/core/index";
300 import {ElMessage} from "element-plus"; 365 import {ElMessage} from "element-plus";
301 import {cancelOrder, cancelOrder2, getCarBilldetailbyId, getFoodBilldetailbyId} from "@/apiPc/booking"; 366 import {
367 cancelOrder,
368 cancelOrder2,
369 getCarBilldetailbyId,
370 getFoodBilldetailbyId,
371 getMealOrderInfoByLogex, getPhotoOrderInfo, getPhotoOrderInfoByLogex
372 } from "@/apiPc/booking";
373 import dayjs from 'dayjs'
302 import {delPerson} from "@/api/exam/person"; 374 import {delPerson} from "@/api/exam/person";
303 375
304 const isLogin = ref(false) 376 const isLogin = ref(false)
...@@ -306,13 +378,12 @@ const language = useStorage('language', 0) ...@@ -306,13 +378,12 @@ const language = useStorage('language', 0)
306 const totalFee = ref('') 378 const totalFee = ref('')
307 const wePayCodeUrl = ref('') 379 const wePayCodeUrl = ref('')
308 const form = ref({}) 380 const form = ref({})
381 const formInfo=ref({})
309 const type = ref('') 382 const type = ref('')
310 const errorBox = ref(false) 383 const errorBox = ref(false)
311 const hideconfirmbtn = ref(false) 384 const hideconfirmbtn = ref(false)
312 385
313 const user = useUserStore().user 386 const user = useUserStore().user
314 console.log(route.query.orderId)
315 // 1763462073870237698
316 if (useUserStore().user) { 387 if (useUserStore().user) {
317 isLogin.value = true 388 isLogin.value = true
318 } 389 }
...@@ -336,8 +407,15 @@ onMounted(() => { ...@@ -336,8 +407,15 @@ onMounted(() => {
336 case '2': 407 case '2':
337 type.value = 'food' 408 type.value = 'food'
338 break 409 break
410 case '3':
411 type.value = 'makeUp'
412 break
413 case '4':
414 type.value = 'photography'
415 break
339 } 416 }
340 } 417 }
418
341 getData() 419 getData()
342 }) 420 })
343 421
...@@ -384,6 +462,16 @@ function getData() { ...@@ -384,6 +462,16 @@ function getData() {
384 errorBox.value = true 462 errorBox.value = true
385 }) 463 })
386 } 464 }
465 if(type.value=='makeUp') {
466 MakeUpOrder()
467 // MakeUpIno()
468 }
469 if(type.value=='photography') {
470 photographyOrder()
471 // photographyInfo()
472 }
473
474 console.log(payType.value)
387 } 475 }
388 476
389 function goHome() { 477 function goHome() {
...@@ -411,6 +499,29 @@ let handle; ...@@ -411,6 +499,29 @@ let handle;
411 499
412 function startforGetData() { 500 function startforGetData() {
413 handle = setTimeout(() => { 501 handle = setTimeout(() => {
502 if (type.value=='photography'){
503 photographyOrder().then(res=>{
504 if (form.value.payDate) {
505 if (handle) {
506 clearTimeout(handle)
507 handle = null
508 }
509 } else {
510 startforGetData()
511 }
512 })
513 }else if(type.value=='makeUp'){
514 MakeUpOrder().then(res=>{
515 if (form.value.payDate) {
516 if (handle) {
517 clearTimeout(handle)
518 handle = null
519 }
520 } else {
521 startforGetData()
522 }
523 })
524 }else{
414 getData().then( res => { 525 getData().then( res => {
415 if (form.value.payDate) { 526 if (form.value.payDate) {
416 if (handle) { 527 if (handle) {
...@@ -421,6 +532,7 @@ function startforGetData() { ...@@ -421,6 +532,7 @@ function startforGetData() {
421 startforGetData() 532 startforGetData()
422 } 533 }
423 }) 534 })
535 }
424 }, 2000) 536 }, 2000)
425 } 537 }
426 538
...@@ -428,6 +540,52 @@ function showLogin() { ...@@ -428,6 +540,52 @@ function showLogin() {
428 useUserStore().setReLogin() 540 useUserStore().setReLogin()
429 } 541 }
430 542
543
544 function MakeUpOrder(){
545 return booking.getMealOrderInfo({orderId: orderId.value}).then(res => {
546 form.value=res.data
547 totalFee.value=language.value==0?form.value.total:form.value.totalEn
548 MakeUpIno()
549 console.log(res)
550 }).catch(err => {
551 console.log(err)
552 errorBox.value = true
553 })
554 }
555
556 function MakeUpIno(){
557 booking.getMealOrderInfoByLogex({asmId: form.value.asmId}).then(res=>{
558 formInfo.value=res.data
559 console.log(res)
560 })
561 .catch((e) => {
562 console.log(e)
563 errorBox.value = true
564 })
565 }
566
567
568 function photographyOrder(){
569 return booking.getPhotoOrderInfo({orderId: orderId.value}).then(res => {
570 form.value=res.data
571 totalFee.value=language.value==0?form.value.total:form.value.totalEn
572 photographyInfo()
573 }).catch(err => {
574 console.log(err)
575 errorBox.value = true
576 })
577 }
578
579 function photographyInfo(){
580 booking.getPhotoOrderInfoByLogex({aspId: form.value.aspId}).then(res=>{
581 formInfo.value=res.data
582 })
583 // .catch((e) => {
584 // console.log(e)
585 // errorBox.value = true
586 // })
587 }
588
431 const cancel = () => { 589 const cancel = () => {
432 //取消订单 590 //取消订单
433 proxy.$modal.confirm(language.value == 0 ? '确定取消订单吗 ?' :`Are you sure to cancel the order?`).then(() => { 591 proxy.$modal.confirm(language.value == 0 ? '确定取消订单吗 ?' :`Are you sure to cancel the order?`).then(() => {
...@@ -451,6 +609,8 @@ const unsubscribe = () => { ...@@ -451,6 +609,8 @@ const unsubscribe = () => {
451 }) 609 })
452 }) 610 })
453 } 611 }
612
613
454 </script> 614 </script>
455 615
456 <style scoped lang="scss"> 616 <style scoped lang="scss">
...@@ -606,4 +766,8 @@ const unsubscribe = () => { ...@@ -606,4 +766,8 @@ const unsubscribe = () => {
606 font-size: 16px; 766 font-size: 16px;
607 margin-top: 10px 767 margin-top: 10px
608 } 768 }
769
770 .price{
771 color:orange;
772 }
609 </style> 773 </style>
......
src/viewsPc/booking/photography.vue
1 <template> 1 <template>
2 <div> 2 <div>
3 <div class="banner">
4 <img v-if="language==0" src="@/assets/booking/pz_text1.png">
5 <img v-else src="@/assets/booking/pz_text2.png">
6 </div>
3 <div class="box"> 7 <div class="box">
4 <el-card class="mt30"></el-card> 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 :disabled="h.counts<=0" 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
48 <el-empty v-show="!loading&&list.length==0" :image="`/img/order_no.png`" :image-size="228" description="" />
49 <div style="height: 50px"></div>
6 </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 height: 30px;
119 padding-right: 10px;
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">{{form.ageLimit}}</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.remarks}}
31 </el-row>
32 </el-card>
33 <div class="mt30">
34 <el-row :gutter="20">
35 <el-col :span="10">
36 <div class="imgbox hotelImg">
37 <el-image :src="form?.photosList?.[0]" fit="cover" :preview-src-list="form?.photosList"/>
38 </div>
39 </el-col>
40 <el-col :span="14">
41 <el-row class="h100" :gutter="20">
42 <el-col :span="8" class="oddmb" v-for="(p,index) in form?.photosList?.slice(1,7)">
43 <div class="imgbox hotelImg"><el-image :src="p" fit="cover"/></div>
44 </el-col>
45 </el-row>
46 </el-col>
47 </el-row>
48 </div>
49 <br>
50
51 <el-card :body-style="{'padding':'20px 20px'}">
52 <PhotoGraphyCalendar/>
53 </el-card>
54 </div>
55 </div>
56 </template>
57
58 <script setup >
59 import {useRouter} from "vue-router";
60 import {ref, reactive, onMounted} from "vue";
61 import {useRoute} from "vue-router";
62 import * as booking from "@/apiPc/booking"
63 import {useStorage} from "@vueuse/core/index";
64 import useUserStore from "@/store/modules/user";
65 import PhotoGraphyCalendar from "@/viewsPc/booking/component/photoGraphyCalendar.vue";
66 import {fillImgUrl} from "/@/utils/ruoyi";
67 const user = useUserStore().user
68 const language = useStorage('language', 0)
69 const router = useRouter()
70 const route = useRoute()
71 const form = ref({})
72 const query = ref({
73 activityId: route.params.cptId,
74 id:route.params.id
75 })
76 const loading = ref(false)
77 const map = ref(null)
78 onMounted(() => {
79 getData()
80 })
81
82 function getData() {
83 loading.value = true
84 booking.getComShootVoById(query.value).then(res => {
85 loading.value = false
86 form.value = res.data
87 form.value.photosList=[]
88 form.value.photos.split(',').forEach(v=>{
89 form.value.photosList.push(fillImgUrl(v))
90 })
91 }).catch(err => {
92 console.log(err)
93 })
94
95 }
96
97 </script>
98
99 <style scoped lang="scss">
100 .room {
101 background: #FAFBFD;
102 margin: 20px 0 0;
103 padding: 20px;
104 border: 1px solid #E5E5E5;
105
106 .name {
107 font-size: 20px;
108 margin: 0 0 10px;
109 }
110
111 .roomImg {
112 aspect-ratio: 16/9;
113 border-radius: 10px;
114 overflow: hidden;
115
116 img {
117 width: 100%;
118 object-fit: cover;
119 object-position: center;
120 height: 100%;
121 }
122 }
123
124 .price {
125 color: #FF8124;
126 font-size: 24px;
127
128 span {
129 font-size: 36px;
130 font-family: "DIN Alternate"
131 }
132 }
133
134 .bg-lineg {
135 margin: auto;
136 border-radius: 10px;
137 text-align: center;
138 padding: 7px 2px 2px;
139 font-size: 24px;
140 width: 66px;
141 cursor: pointer;
142
143 div {
144 background: #fff;
145 font-size: 13px;
146 border-radius: 20px;
147 padding: 0 10px;
148 color: #453DEA;
149 font-weight: 500;
150 }
151 }
152 }
153
154 .zh-title {
155 font-size: 24px;
156 font-weight: 500;
157 margin-right: 25px;
158 }
159
160
161 .hotel {
162 h3 {
163 margin: 0 0 20px;
164 }
165
166 img.w100 {
167 object-fit: cover;
168 aspect-ratio: 16/9
169 }
170
171 .addr {
172 font-size: 16px;
173 color: #929AA0;
174 font-weight: 400;
175 }
176
177 .price {
178 margin: 0 0 25px;
179 color: #FF8124;
180 font-size: 18px;
181
182 span {
183 font-size: 24px;
184 margin: 0 8px;
185 font-family: 'DINAlternate-Bold';
186 font-weight: 600;
187 }
188
189 i {
190 font-style: normal;
191 color: #929AA0;
192 }
193 }
194 }
195
196
197 .tagbox {
198 margin: 15px 0;
199
200 a {
201 color: #AFB5B9;
202 font-size: 12px;
203 }
204
205 span {
206 border-radius: 13px;
207 font-size: 12px;
208 padding: 4px 10px;
209 margin-right: 10px;
210 font-weight: 400;
211 }
212
213 span:nth-child(4n) {
214 background: rgba(50, 177, 108, 0.2);
215 color: rgba(50, 177, 108, 1);
216 }
217
218 span:nth-child(4n+1) {
219 background: rgba(243, 152, 0, 0.2);
220 color: rgba(243, 152, 0, 1);
221 }
222
223 span:nth-child(4n+2) {
224 background: rgba(0, 160, 233, 0.2);
225 color: rgba(0, 160, 233, 1);
226 }
227
228 span:nth-child(4n+3) {
229 background: rgba(247, 64, 166, 0.2);
230 color: rgba(247, 64, 166, 1);
231 }
232 }
233
234 .mapBox {
235 position: relative;
236 overflow: hidden;
237 height: 200px;
238
239 #map {
240 position: relative;
241 left: -70px;
242 width: calc(100% + 160px);
243 }
244 }
245
246 .sign {
247 padding-top: 2px;
248 }
249
250 .img-header {
251 height: 270px;
252 }
253
254 .card {
255 padding: 10px;
256 width: 100%;
257 height: 100%;
258 position: relative;
259 img{object-fit: cover}
260 }
261
262 .img-hover{
263 position: absolute;
264 top: 0;
265 left: 0;
266 background-color: rgb(0,0,0,.5);
267 color: #fff;
268 font-size: 18px;
269 font-weight: 400;
270 width: 100%;
271 height: 100%;
272 line-height: 115px;
273 text-align: center;
274 border-radius: 10px;
275
276 //display: none;
277 }
278 .hotelImg{border-radius: 10px;overflow: hidden;aspect-ratio: 16/9;
279 img{object-fit: cover;object-position: center;width: 100%;height: 100%;
280 }
281 }
282 .oddmb:nth-child(2){margin-bottom: 20px;}
283 </style>
src/viewsPc/center/myReservation.vue
...@@ -15,6 +15,8 @@ ...@@ -15,6 +15,8 @@
15 <label class="blueTag" v-if="b.orderType == 0"> {{ language==0?'酒店':'HOTEL' }} </label> 15 <label class="blueTag" v-if="b.orderType == 0"> {{ language==0?'酒店':'HOTEL' }} </label>
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>
19 <label class="orangeTag" v-if="b.orderType == 4"> {{ language==0?'拍摄':'Shooting ' }} </label>
18 <span>{{ language==0?'订单编号：':'No.' }} {{ b.id }}</span> 20 <span>{{ language==0?'订单编号：':'No.' }} {{ b.id }}</span>
19 </div> 21 </div>
20 22
...@@ -35,7 +37,6 @@ ...@@ -35,7 +37,6 @@
35 <h3 class="name">{{b.name}}</h3> 37 <h3 class="name">{{b.name}}</h3>
36 <p v-if="language==0">{{b.messageObj?.roomStayDate}}</p> 38 <p v-if="language==0">{{b.messageObj?.roomStayDate}}</p>
37 <p v-else>{{b.messageObj?.roomStayDate.replace('共',' total ').replace('晚',' days')}}</p> 39 <p v-else>{{b.messageObj?.roomStayDate.replace('共',' total ').replace('晚',' days')}}</p>
38
39 <p>{{b.messageObj?.roomInfo}}</p> 40 <p>{{b.messageObj?.roomInfo}}</p>
40 41
41 </div> 42 </div>
...@@ -57,6 +58,12 @@ ...@@ -57,6 +58,12 @@
57 <p>{{language==0?'配送日期':'Delivery Date'}}：{{b.extJsonObj.dcEnd }} ~ {{b.extJsonObj.dcEnd}}</p> 58 <p>{{language==0?'配送日期':'Delivery Date'}}：{{b.extJsonObj.dcEnd }} ~ {{b.extJsonObj.dcEnd}}</p>
58 59
59 </div> 60 </div>
61 <div v-if="b.orderType==3 ||b.orderType == 4">
62 <h3 class="name">{{b.name}}</h3>
63 <p >
64 {{dayjs(b.deliveryTime).format('YYYY-MM-DD')+' '+b.extJsonObj.timePeriod?.split('-')[0]+'-'+dayjs(b.deliveryTime).format('YYYY-MM-DD')+' '+b.extJsonObj.timePeriod?.split('-')[1] }}
65 </p>
66 </div>
60 </el-col> 67 </el-col>
61 <el-col :lg="6"> 68 <el-col :lg="6">
62 <div v-if="b.orderType == 0"> 69 <div v-if="b.orderType == 0">
...@@ -67,6 +74,9 @@ ...@@ -67,6 +74,9 @@
67 </div> 74 </div>
68 <div v-if="b.orderType == 2"> 75 <div v-if="b.orderType == 2">
69 </div> 76 </div>
77 <div v-if="b.orderType == 3||b.orderType == 4">
78 <p>{{ b.extJsonObj.packageName }}</p>
79 </div>
70 </el-col> 80 </el-col>
71 <el-col :lg="4" class="text-center"> 81 <el-col :lg="4" class="text-center">
72 <span class="text-warning"> {{ language==0?'¥':'€' }} 82 <span class="text-warning"> {{ language==0?'¥':'€' }}
...@@ -76,8 +86,7 @@ ...@@ -76,8 +86,7 @@
76 86
77 <el-col :lg="4" > 87 <el-col :lg="4" >
78 <div class="text-right mb20 text-danger"> 88 <div class="text-right mb20 text-danger">
79 <el-countdown value-style="color:#E60012;font-size:16px;" v-if="b.status == '0'&&(b.surplus!='0,0'&&b.surplus!='0')" format="mm:ss" 89 <el-countdown value-style="color:#E60012;font-size:16px;" v-if="b.status == '0'&&(b.surplus!='0,0'&&b.surplus!='0')" format="mm:ss" :value="b.countdown" @finish="finish(b)"/>
80 :value="b.countdown" @finish="finish(b)"/>
81 </div> 90 </div>
82 91
83 <div class="text-right"> 92 <div class="text-right">
...@@ -102,6 +111,7 @@ import {onMounted} from "@vue/runtime-core"; ...@@ -102,6 +111,7 @@ import {onMounted} from "@vue/runtime-core";
102 import {useStorage} from "@vueuse/core/index"; 111 import {useStorage} from "@vueuse/core/index";
103 import {newbilllist} from "@/apiPc/common"; 112 import {newbilllist} from "@/apiPc/common";
104 import useUserStore from "@/store/modules/user"; 113 import useUserStore from "@/store/modules/user";
114 import dayjs from 'dayjs'
105 const router = useRouter() 115 const router = useRouter()
106 const language= useStorage('language',0) 116 const language= useStorage('language',0)
107 const list = ref([]) 117 const list = ref([])
...@@ -118,13 +128,14 @@ function getList() { ...@@ -118,13 +128,14 @@ function getList() {
118 newbilllist({createById:user.userId}).then(res=>{ 128 newbilllist({createById:user.userId}).then(res=>{
119 list.value = res.rows 129 list.value = res.rows
120 for (var b of list.value) { 130 for (var b of list.value) {
121 b.messageObj = JSON.parse(b.message) 131 b.messageObj = JSON.parse(b.message) || {}
122 b.extJsonObj = JSON.parse(b.extJson) || {} 132 b.extJsonObj = JSON.parse(b.extJson) || {}
123 if(b.surplus&&b.status == '0'&&(b.surplus!='0,0'&&b.surplus!='0')){ 133 if(b.surplus&&b.status == '0'&&(b.surplus!='0,0'&&b.surplus!='0')){
124 b.countdown = Date.now() + Number((b.surplus.split(',')[0]*60 + b.surplus.split(',')[1])*10) 134 b.countdown = Date.now() + Number((b.surplus.split(',')[0]*60 + b.surplus.split(',')[1])*10)
125 console.log(b.countdown) 135 console.log(b.countdown)
126 } 136 }
127 } 137 }
138 console.log(list.value)
128 }) 139 })
129 } 140 }
130 function goDetail(b) { 141 function goDetail(b) {
......
src/viewsPc/components/homeQuick.vue
...@@ -101,7 +101,7 @@ function popRemark(type){ ...@@ -101,7 +101,7 @@ function popRemark(type){
101 building() 101 building()
102 return 102 return
103 } 103 }
104 if((form.value.isJdView == 0&&type=='1') || (form.value.isCarView == 0&&type=='2') || (form.value.isFoodView == 0&&type=='3') || type=='0' || type=='4' || type=='5'){ 104 if((form.value.isJdView == 0&&type=='1') || (form.value.isCarView == 0&&type=='2') || (form.value.isFoodView == 0&&type=='3') || type=='0' || (form.value.isMealView == 0&&type=='4') || (type=='5'&&form.value.isPhotoView == 0)){
105 building() 105 building()
106 return 106 return
107 } 107 }
...@@ -137,8 +137,6 @@ function goBooking(n) { ...@@ -137,8 +137,6 @@ function goBooking(n) {
137 break; 137 break;
138 case 5: 138 case 5:
139 //拍照 139 //拍照
140 building()
141
142 router.push({path: `/booking/photography/${props.matchId}`}) 140 router.push({path: `/booking/photography/${props.matchId}`})
143 break; 141 break;
144 } 142 }
......
src/viewsPc/match/chooseProject.vue
...@@ -38,7 +38,10 @@ ...@@ -38,7 +38,10 @@
38 <div class="text-center mt20"> 38 <div class="text-center mt20">
39 <el-button type="primary" plain @click="switchPerson">{{language==0?'切换':'Switch'}}</el-button> 39 <el-button type="primary" plain @click="switchPerson">{{language==0?'切换':'Switch'}}</el-button>
40 </div> 40 </div>
41 41 <div class="tip">
42 <span v-if="language==0">*如果您参加个人项目，或给其它组合/选手进行报名，请点击切换按钮重新选择人员</span>
43 <span v-else>*If you are participating in an individual event, or if you are signing up for another group/competitor, please click the Switch button to re-select the team.</span>
44 </div>
42 </div> 45 </div>
43 </div> 46 </div>
44 </el-col> 47 </el-col>
......
src/viewsPc/match/components/quick-row.vue
...@@ -77,7 +77,6 @@ ...@@ -77,7 +77,6 @@
77 </el-col> 77 </el-col>
78 </el-row> 78 </el-row>
79 </div> 79 </div>
80
81 <order-remark ref="orderRemarkRef" @submit="goBooking"/> 80 <order-remark ref="orderRemarkRef" @submit="goBooking"/>
82 </template> 81 </template>
83 82
...@@ -119,16 +118,19 @@ function popRemark(type){ ...@@ -119,16 +118,19 @@ function popRemark(type){
119 building() 118 building()
120 return 119 return
121 } 120 }
122 if((form.value.isJdView == 0&&type=='1') || (form.value.isCarView == 0&&type=='2') || (form.value.isFoodView == 0&&type=='3') || type=='0' || type=='4' || type=='5'){ 121
122 if((form.value.isJdView == 0&&type=='1') || (form.value.isCarView == 0&&type=='2') || (form.value.isFoodView == 0&&type=='3') || type=='0' || (form.value.isMealView == 0&&type=='4') || (type=='5'&&form.value.isPhotoView == 0)){
123 building() 123 building()
124 return 124 return
125 } 125 }
126
126 const params = { 127 const params = {
127 matchId: props.matchId, 128 matchId: props.matchId,
128 title: language.value == 0 ?'预订说明':'Booking Instructions', 129 title: language.value == 0 ?'预订说明':'Booking Instructions',
129 type: type 130 type: type
130 } 131 }
131 proxy.$refs['orderRemarkRef'].open(params) 132 proxy.$refs['orderRemarkRef'].open(params)
133
132 } 134 }
133 function goBooking(n) { 135 function goBooking(n) {
134 switch (n) { 136 switch (n) {
...@@ -151,12 +153,10 @@ function goBooking(n) { ...@@ -151,12 +153,10 @@ function goBooking(n) {
151 break; 153 break;
152 case 4: 154 case 4:
153 //化妆 155 //化妆
154 building()
155 router.push({path: `/booking/makeup/${props.matchId}`}) 156 router.push({path: `/booking/makeup/${props.matchId}`})
156 break; 157 break;
157 case 5: 158 case 5:
158 //拍照 159 //拍照
159 building()
160 router.push({path: `/booking/photography/${props.matchId}`}) 160 router.push({path: `/booking/photography/${props.matchId}`})
161 break; 161 break;
162 } 162 }
......
src/viewsPc/match/teamSign.vue
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
23 </el-form-item> 23 </el-form-item>
24 </el-col> 24 </el-col>
25 <el-col :lg="10"> 25 <el-col :lg="10">
26 <el-form-item :label="language==0?'代表国家/地区':'Representing'"> 26 <el-form-item :label="language==0?'代表国家/地区':'Representing'" required>
27 <el-select filterable v-model="form.countryId" @change="changeCountryId" 27 <el-select filterable v-model="form.countryId" @change="changeCountryId"
28 :disabled="form.type!='4'"> 28 :disabled="form.type!='4'">
29 <!-- <el-option v-for="item in countryList" :key="item.id" :label="language==0?item.name:item.enName" :value="item.id"/>--> 29 <!-- <el-option v-for="item in countryList" :key="item.id" :label="language==0?item.name:item.enName" :value="item.id"/>-->
......
src/viewsPc/match/teamSign_Cn.vue
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
26 <el-form-item :label="language==0?'参赛队名称':'Name of participating team'" required prop="abreviations"> 26 <el-form-item :label="language==0?'参赛队名称':'Name of participating team'" required prop="abreviations">
27 <el-input type="text" v-model="form.abreviations" :placeholder="language==0?'请输入内容':''"/> 27 <el-input type="text" v-model="form.abreviations" :placeholder="language==0?'请输入内容':''"/>
28 </el-form-item> 28 </el-form-item>
29 <el-form-item :label="language==0?'团体名称':'Team Name'" prop="name"> 29 <el-form-item :label="language==0?'团体名称':'Team Name'" prop="name" required>
30 <el-input v-model="form.name" :placeholder="language==0?'请输入团体名称':''" /> 30 <el-input v-model="form.name" :placeholder="language==0?'请输入团体名称':''" />
31 </el-form-item> 31 </el-form-item>
32 <el-form-item :label="language==0?'所属国家/地区':'Country'" required> 32 <el-form-item :label="language==0?'所属国家/地区':'Country'" required>
......
vite.config.js
...@@ -82,7 +82,7 @@ export default defineConfig(({ mode, command }) => { ...@@ -82,7 +82,7 @@ export default defineConfig(({ mode, command }) => {
82 rewrite: (p) => p.replace(/^\/dev-api\/ztx-webSite/, '') 82 rewrite: (p) => p.replace(/^\/dev-api\/ztx-webSite/, '')
83 }, 83 },
84 '/dev-api': { 84 '/dev-api': {
85 target: 'http://192.168.1.131:8081/', 85 target: 'http://192.168.1.118:8081/',
86 // target: 'https://dance.itechtop.cn/stage-api', 86 // target: 'https://dance.itechtop.cn/stage-api',
87 // target: 'https://wdsfwuxicenter.com/stage-api', 87 // target: 'https://wdsfwuxicenter.com/stage-api',
88 changeOrigin: true, 88 changeOrigin: true,
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!