Merge branch 'order' into dev
Showing
25 changed files
with
2661 additions
and
133 deletions
| ... | @@ -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> | ... | ... |
| ... | @@ -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/pz_bg.png
0 → 100644
20.8 KB
src/assets/booking/pz_text1.png
0 → 100644
3.48 KB
src/assets/booking/pz_text2.png
0 → 100644
3.09 KB
| ... | @@ -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) { | ... | ... |
| ... | @@ -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 | }, | ... | ... |
| 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> |
| 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 | <!--<!– <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 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> |
| 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 | </div> | 5 | <img v-else src="@/assets/booking/hz_text_e.png"> |
| 6 | <div class="box"> | ||
| 7 | <div class="searchBar"> | ||
| 8 | <el-input :placeholder="language==0?'请输入关键字搜索':'Search'" v-model="query.name" class="no-border"> | ||
| 9 | </el-input> | ||
| 10 | <el-button size="large" type="primary" class="btn-lineG" icon="search" @click="getList"> | ||
| 11 | {{ language==0?'搜索':'Search' }}</el-button> | ||
| 12 | </div> | 6 | </div> |
| 13 | </div> | 7 | <div class="box"> |
| 14 | <div class="box" v-loading="loading"> | 8 | <div class="searchBar"> |
| 15 | <el-row :gutter="20" class="mb20"> | 9 | <el-input :placeholder="language==0?'请输入关键字搜索':'Search'" v-model="query.name" class="no-border"> |
| 16 | <el-col :lg="8" :md="8" :sm="12" :xs="24" v-for="(n,index) in list" :key="index"> | 10 | </el-input> |
| 17 | <el-card class="mb20 mitem"> | 11 | <el-button size="large" type="primary" class="btn-lineG" icon="search" @click="getList"> |
| 18 | <div class="imgbox"><img/> | 12 | {{ language==0?'搜索':'Search' }}</el-button> |
| 19 | <span>30 个时间段可预约</span> | 13 | </div> |
| 20 | </div> | 14 | </div> |
| 21 | <div class="info"> | 15 | <div class="box" v-loading="loading"> |
| 22 | <h3>Mango美妆工作室</h3> | 16 | <el-row style="width: 100%" :gutter="20"> |
| 23 | <div class="tagbox"> | 17 | <el-col :span="8" v-for="(h,index) in list" class="mb20" > |
| 24 | <span>专业团队</span> | 18 | <el-card style="position: relative;"> |
| 25 | <span>大牌化妆品</span> | 19 | <img class="w100 hz-img" :src="fillImgUrl(h.cover)"/> |
| 26 | <span>金牌化妆师</span> | 20 | <div class="yuyue"> |
| 27 | <span>连锁</span> | 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?'名化妆师':'makeup artists' }} | ||
| 28 | </div> | 32 | </div> |
| 29 | <p class="esp"> | 33 | <div class="hz-row"> |
| 30 | <span> | 34 | <el-icon size="16" style="position: relative;top: 2px" color="#929AA0"><PhoneFilled /></el-icon> |
| 31 | <el-icon><OfficeBuilding /></el-icon> | 35 | {{ h.contact }} |
| 32 | 成立<i class="text-primary">6</i>年 | ||
| 33 | </span> | ||
| 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 | 立即预约   <el-icon class="rotate90_180"> <sort-down/></el-icon> | ||
| 48 | </el-button> | ||
| 49 | </div> | 36 | </div> |
| 50 | </div> | 37 | <div class="hz-row"> |
| 51 | </el-card> | 38 | <el-icon size="16" style="position: relative;top: 2px" color="#929AA0"><LocationFilled /></el-icon> |
| 52 | </el-col> | 39 | {{h.remarks}} |
| 53 | </el-row> | 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> | ||
| 54 | 47 | ||
| 55 | </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> | ||
| 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;} |
| 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; | ||
| 107 | } | 137 | } |
| 108 | .tagbox{margin: 15px 0; | 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'}} | | ||
| 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' }} | | ||
| 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 | | | ||
| 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/makeUpOrder.vue
0 → 100644
| 1 | <template> | ||
| 2 | <div> | ||
| 3 | <div class="box"> | ||
| 4 | <el-card :body-style="{ padding: '0px' }" class="mt20"> | ||
| 5 | <div slot="header"> | ||
| 6 | <div class="bg-lineg">{{ language == 0 ? '化妆预约下单' : 'Make Up booking order' }}</div> | ||
| 7 | </div> | ||
| 8 | |||
| 9 | <el-card> | ||
| 10 | <div class='order-header'> | ||
| 11 | <div class="title"> | ||
| 12 | {{formData.name }} | ||
| 13 | </div> | ||
| 14 | <el-row class="hz-row" > | ||
| 15 | <el-icon size="16" style="position: relative;top: 2px" color="#929AA0"> | ||
| 16 | <OfficeBuilding/> | ||
| 17 | </el-icon> | ||
| 18 | {{ language==0?'成立':'Established for'}} <span class="sign" style="padding-top: 2px">6</span>{{language==0?'年':'years'}} | | ||
| 19 | <el-icon size="16" style="position: relative;top: 2px" color="#929AA0"> | ||
| 20 | <UserFilled/> | ||
| 21 | </el-icon> | ||
| 22 | <span class="sign" style="padding-top: 2px"> {{ formData.dresserLimit }}</span>{{language==0?'名化妆师':'makeup artists' }} | | ||
| 23 | <el-icon size="16" style="position: relative;top: 2px" color="#929AA0"> | ||
| 24 | <PhoneFilled/> | ||
| 25 | </el-icon> | ||
| 26 | <span style="padding-top: 2px"> | ||
| 27 | {{ formData.contact }} | ||
| 28 | </span> | ||
| 29 | | | ||
| 30 | <el-icon size="16" style="position: relative;top: 2px" color="#929AA0"> | ||
| 31 | <LocationFilled/> | ||
| 32 | </el-icon> | ||
| 33 | {{formData.remarks}} | ||
| 34 | |||
| 35 | </el-row> | ||
| 36 | <hr style="border:1px solid #D3D1F6 "> | ||
| 37 | <el-row class="table"> | ||
| 38 | <div style="margin-right: 50px"> | ||
| 39 | <el-image style="width:55px;height: 70px " :src="fillImgUrl(formDatas.photos?.split(',')[0]) " fit="cover" /> | ||
| 40 | </div> | ||
| 41 | <el-row style="flex: 1"> | ||
| 42 | <div style="flex: 1"> | ||
| 43 | <div style="margin-bottom: 20px;">{{ language==0?'预约日期':"Appointment date" }} <span class="span">{{route.query.date}}</span></div> | ||
| 44 | <div>{{ language==0?'套餐名称':"Package name" }} <span class="span">{{ formDatas.name }}</span></div> | ||
| 45 | </div> | ||
| 46 | |||
| 47 | <div style="flex: 1"> | ||
| 48 | <!-- <div style="margin-bottom: 20px">预约时间 <span class="span">09:00~12:00</span> </div>--> | ||
| 49 | <div v-if="language==0" style="margin-bottom: 20px">上门化妆 <span class="span">{{ formDatas.goHome==1?'是':'否' }}</span></div> | ||
| 50 | <div v-else style="margin-bottom: 20px">Home makeup <span class="span">{{ formDatas.goHome==1?'YES':'NO' }}</span></div> | ||
| 51 | <div >{{ language==0?' 价格':"Price" }} <span class="sign">{{language==0? '￥'+formDatas.mealPrice:'€'+formDatas.mealPriceEn }}</span></div> | ||
| 52 | </div> | ||
| 53 | |||
| 54 | <div style="flex: 1"> | ||
| 55 | <div style="margin-bottom: 20px">{{ language==0?'套餐说明':"Package description" }} <span class="span">{{formDatas.introduction}}</span></div> | ||
| 56 | <!-- <div >价格 <span class="sign">{{language==0? '￥'+formDatas.mealPrice:'€'+formDatas.mealPriceEn }}</span></div>--> | ||
| 57 | </div> | ||
| 58 | </el-row> | ||
| 59 | </el-row> | ||
| 60 | </div> | ||
| 61 | <br> | ||
| 62 | <div class="yu">{{ language==0?'预约时间':'Appointment time' }}</div> | ||
| 63 | <el-row style="width: 100%" > | ||
| 64 | <el-button v-for="v in radioList" @click="handleRadio(v)" :disabled="v.num-v.counts<=0" class="radioBox" :class="{'radioBoxbg':v.flag}"> | ||
| 65 | <div> | ||
| 66 | <div>{{ v.nameStart }}-{{ v.nameEnd }}</div> | ||
| 67 | <div v-if="language==0">(剩余: <span class="sing">{{ v.num-v.counts }}</span> 个)</div> | ||
| 68 | <div v-else>(Remaining: <span class="sing">{{ v.num-v.counts }}</span> )</div> | ||
| 69 | </div> | ||
| 70 | </el-button> | ||
| 71 | </el-row> | ||
| 72 | <br> | ||
| 73 | <div class="yu">{{ language==0?'预约信息':"Reservation information" }}</div> | ||
| 74 | <br> | ||
| 75 | <div class="form-order"> | ||
| 76 | <el-form :model="form" style="width: 800px" :label-width="language==0?'140px':'200px'" :rules="rules" ref="formRef"> | ||
| 77 | <el-form-item :label="language==0?'预约数量':'Number Of Reservations'" required prop="num"> | ||
| 78 | <el-input-number style="width: 100%" v-model.trim="form.num" :min="1" :max="10" @change="changNum"/> | ||
| 79 | </el-form-item> | ||
| 80 | <el-form-item :label="language==0?'预约联系人':'Contacts'" required prop="contacts"> | ||
| 81 | <el-input v-model.trim="form.contacts" :min="1" :max="10" /> | ||
| 82 | </el-form-item> | ||
| 83 | <el-form-item :label="language==0?'联系电话':'Contact Number'" required prop="phone"> | ||
| 84 | <el-input v-model.trim="form.phone" :min="1" :max="13" /> | ||
| 85 | </el-form-item> | ||
| 86 | <el-form-item :label="language==0?'备注':'Remarks'" prop="remarks"> | ||
| 87 | <el-input type="textarea" :rows="3" v-model.trim="form.remarks" :min="1" :max="10" /> | ||
| 88 | </el-form-item> | ||
| 89 | </el-form> | ||
| 90 | </div> | ||
| 91 | </el-card> | ||
| 92 | </el-card> | ||
| 93 | |||
| 94 | <el-card class="mt30"> | ||
| 95 | <el-row justify="space-between" align="middle"> | ||
| 96 | <el-col :span="12"> | ||
| 97 | <label>{{ language == 0 ? '共计金额' : 'Total' }}： | ||
| 98 | <span class=" text-warning"> {{ language == 0 ? '¥' : '€' }}<span class="bigMoney">{{ | ||
| 99 | money | ||
| 100 | }}</span></span> | ||
| 101 | </label> | ||
| 102 | </el-col> | ||
| 103 | <el-col :span="12" class="text-right"> | ||
| 104 | <el-button type="primary" class="btn-lineG w200px" size="large" round @click="submit"> | ||
| 105 | {{ language == 0 ? '确认付款' : 'Book Now' }} | ||
| 106 | </el-button> | ||
| 107 | </el-col> | ||
| 108 | </el-row> | ||
| 109 | </el-card> | ||
| 110 | <div style="height: 60px;"></div> | ||
| 111 | |||
| 112 | </div> | ||
| 113 | </div> | ||
| 114 | </template> | ||
| 115 | |||
| 116 | <script setup> | ||
| 117 | import {useRouter, useRoute} from "vue-router"; | ||
| 118 | import {ref, reactive, onMounted,getCurrentInstance} from "vue"; | ||
| 119 | import {useStorage} from "@vueuse/core/index"; | ||
| 120 | import {checkResidueRoom, getBaseInfoByActiveId, newsSubmitOrderHotel, submitOrderMeal} from "@/apiPc/booking" | ||
| 121 | import * as booking from "@/apiPc/booking" | ||
| 122 | import dayjs from 'dayjs' | ||
| 123 | import {ElMessage, ElMessageBox} from "element-plus"; | ||
| 124 | import useUserStore from "@/store/modules/user"; | ||
| 125 | import {formatDate} from "/@/utils"; | ||
| 126 | const { proxy } = getCurrentInstance() | ||
| 127 | const user = useUserStore().user | ||
| 128 | const language = useStorage('language', 0) | ||
| 129 | const router = useRouter() | ||
| 130 | const route = useRoute() | ||
| 131 | const room = ref({}) | ||
| 132 | const form = ref({ | ||
| 133 | num: '1', | ||
| 134 | roomNum: 0, | ||
| 135 | addNum: 0, | ||
| 136 | ddDate: '14:00', | ||
| 137 | phone: user?.phonenumber || '', | ||
| 138 | }) | ||
| 139 | const formData=ref({}) | ||
| 140 | const formDatas=ref({}) | ||
| 141 | const timeVal=ref(null) | ||
| 142 | const money = ref(0) | ||
| 143 | const rules = ref({ | ||
| 144 | num: [ | ||
| 145 | { required: true, message: language.value==0?'预约数量不能为空':"The number of reservations cannot be empty", trigger: 'blur' }, | ||
| 146 | ], | ||
| 147 | contacts: [ | ||
| 148 | { required: true, message:language.value==0?'请输入预约联系人':'Please enter an appointment contact', trigger: 'blur' }, | ||
| 149 | ], | ||
| 150 | phone: [ | ||
| 151 | { required: true, message: language.value==0? '请输入联系电话':"Please enter a contact number", trigger: 'blur' }, | ||
| 152 | ], | ||
| 153 | |||
| 154 | }) | ||
| 155 | const radioList=ref([]) | ||
| 156 | |||
| 157 | onMounted(() => { | ||
| 158 | console.log(route.query) | ||
| 159 | getData() | ||
| 160 | getRadioList() | ||
| 161 | }) | ||
| 162 | |||
| 163 | function getData() { | ||
| 164 | booking.makeUpDetail({ activityId: route.params.cptId, | ||
| 165 | id:route.params.id}).then(res => { | ||
| 166 | formData.value = res.data | ||
| 167 | }).catch(err => { | ||
| 168 | console.log(err) | ||
| 169 | }) | ||
| 170 | } | ||
| 171 | |||
| 172 | getScheduleList() | ||
| 173 | function getScheduleList() { | ||
| 174 | booking.getActivityMealVoListByStudioId({lasId:route.params.id,lasmId:route.params.lasId}).then(res=>{ | ||
| 175 | formDatas.value={} | ||
| 176 | res.data.forEach(v=>{ | ||
| 177 | if (v.id==route.params.lasId) formDatas.value=v | ||
| 178 | }) | ||
| 179 | console.log(formDatas.value) | ||
| 180 | }) | ||
| 181 | } | ||
| 182 | |||
| 183 | function getRadioList(){ | ||
| 184 | booking.getMealConfList({ lasmId:route.params.lasId,currentDate:route.query.date}).then(res => { | ||
| 185 | radioList.value = res.data | ||
| 186 | radioList.value.forEach(item=>{ | ||
| 187 | item.flag=false | ||
| 188 | }) | ||
| 189 | console.log(radioList.value) | ||
| 190 | }).catch(err => { | ||
| 191 | console.log(err) | ||
| 192 | }) | ||
| 193 | timeVal.value={} | ||
| 194 | } | ||
| 195 | |||
| 196 | function submit() { | ||
| 197 | if (!user) { | ||
| 198 | useUserStore().setVisitor() | ||
| 199 | return | ||
| 200 | } | ||
| 201 | |||
| 202 | if (!timeVal.value.id)return proxy.$modal.msgError( language.value==0?'请选择预约时间!':"Please select an appointment time!" ) | ||
| 203 | proxy.$refs['formRef'].validate(valid=>{ | ||
| 204 | if (valid){ | ||
| 205 | form.value.total=money.value | ||
| 206 | form.value.orderName=formData.value.name | ||
| 207 | form.value.dcStart=route.query.date | ||
| 208 | form.value.activeId=route.params.cptId | ||
| 209 | form.value.asId=route.params.id | ||
| 210 | form.value.asmId=route.params.lasId | ||
| 211 | form.value.asmcId=timeVal.value.id | ||
| 212 | form.value.packageName=formDatas.value.name | ||
| 213 | form.value.timePeriod= timeVal.value.nameStart+'-'+timeVal.value.nameEnd | ||
| 214 | console.log(form.value) | ||
| 215 | // 提交确认 | ||
| 216 | ElMessageBox.confirm(language.value == 0 ? '确认提交订单吗？' : 'Confirm to submit the order?', { | ||
| 217 | confirmButtonText: language.value == 0 ? '确定' : 'Confirm', | ||
| 218 | cancelButtonText: language.value == 0 ? '取消' : 'Cancel', | ||
| 219 | type: 'warning' | ||
| 220 | }).then(() => { | ||
| 221 | booking.submitOrderMeal(form.value).then(res => { | ||
| 222 | if (res.data) { | ||
| 223 | if (res.data.orderId <0||res.data.total<0) { | ||
| 224 | ElMessage.warning(language.value == 0 ? '订单库存数量不足!' : 'The order stock quantity is insufficient!') | ||
| 225 | getRadioList() | ||
| 226 | } else { | ||
| 227 | //去付钱 | ||
| 228 | router.push({ | ||
| 229 | name: 'bookingPay', | ||
| 230 | query: { | ||
| 231 | orderId: res.data.orderId, | ||
| 232 | money: res.data.total, | ||
| 233 | type: 'makeUp' | ||
| 234 | } | ||
| 235 | }) | ||
| 236 | } | ||
| 237 | } else { | ||
| 238 | ElMessage.warning(language.value == 0 ? '无可预订的时间' : 'No booking time available') | ||
| 239 | } | ||
| 240 | }).catch(err => { | ||
| 241 | ElMessage.warning(language.value == 0 ? '无可预订的时间' : 'No booking time available') | ||
| 242 | }) | ||
| 243 | }) | ||
| 244 | |||
| 245 | }else { | ||
| 246 | return proxy.$message.warning(language.value == 0 ? '请填写完整信息' : 'Please fill in the complete information') | ||
| 247 | } | ||
| 248 | }) | ||
| 249 | } | ||
| 250 | |||
| 251 | function handleRadio(v){ | ||
| 252 | timeVal.value=null | ||
| 253 | radioList.value.forEach(t=>{ | ||
| 254 | if(v.id==t.id){ | ||
| 255 | t.flag=true | ||
| 256 | v.flag =true | ||
| 257 | timeVal.value=v | ||
| 258 | changeMaony() | ||
| 259 | }else{ | ||
| 260 | t.flag=false | ||
| 261 | } | ||
| 262 | }) | ||
| 263 | } | ||
| 264 | |||
| 265 | function changNum (){ | ||
| 266 | changeMaony() | ||
| 267 | } | ||
| 268 | function changeMaony(){ | ||
| 269 | if(timeVal.value&&form.value.num){ | ||
| 270 | if (language.value==0){ | ||
| 271 | money.value= formDatas.value.mealPrice * form.value.num | ||
| 272 | }else{ | ||
| 273 | money.value= formDatas.value.mealPriceEn * form.value.num | ||
| 274 | } | ||
| 275 | } | ||
| 276 | |||
| 277 | } | ||
| 278 | </script> | ||
| 279 | |||
| 280 | <style scoped lang="scss"> | ||
| 281 | .bigMoney { | ||
| 282 | font-size: 36px !important; | ||
| 283 | font-family: 'DIN Alternate'; | ||
| 284 | font-weight: bold; | ||
| 285 | } | ||
| 286 | |||
| 287 | .bg-lineg { | ||
| 288 | height: 40px; | ||
| 289 | line-height: 40px; | ||
| 290 | font-size: 18px; | ||
| 291 | text-align: center; | ||
| 292 | } | ||
| 293 | |||
| 294 | .leftboderTT { | ||
| 295 | font-weight: 600; | ||
| 296 | font-size: 16px; | ||
| 297 | color: #453DEA; | ||
| 298 | } | ||
| 299 | |||
| 300 | .order-header{ | ||
| 301 | padding:22px 33px 0 22px; | ||
| 302 | border: 1px solid #453DEA; | ||
| 303 | background-color: rgba(69,61,234,0.04); | ||
| 304 | .title{ | ||
| 305 | font-weight: 500; | ||
| 306 | font-size: 24px; | ||
| 307 | color: #000000; | ||
| 308 | margin-bottom: 10px; | ||
| 309 | } | ||
| 310 | |||
| 311 | } | ||
| 312 | |||
| 313 | .border-rr { | ||
| 314 | border-radius: 5px; | ||
| 315 | border: 1px solid #DCDFE6; | ||
| 316 | } | ||
| 317 | |||
| 318 | .ccitemBox { | ||
| 319 | overflow: auto; | ||
| 320 | |||
| 321 | label { | ||
| 322 | margin: 10px 0; | ||
| 323 | display: block; | ||
| 324 | min-height: 30px; | ||
| 325 | |||
| 326 | span { | ||
| 327 | color: #FF8124; | ||
| 328 | font-family: DIN Alternate; | ||
| 329 | font-size: 24px; | ||
| 330 | } | ||
| 331 | } | ||
| 332 | } | ||
| 333 | |||
| 334 | |||
| 335 | |||
| 336 | .red { | ||
| 337 | color: #FF8124; | ||
| 338 | } | ||
| 339 | |||
| 340 | .tip { | ||
| 341 | font-size: 14px; | ||
| 342 | color: #666; | ||
| 343 | padding: 0 10px; | ||
| 344 | } | ||
| 345 | .form-order{ | ||
| 346 | border: 1px solid #DCDFE6; | ||
| 347 | padding: 23px 0; | ||
| 348 | } | ||
| 349 | |||
| 350 | .yu{ | ||
| 351 | font-size: 16px; | ||
| 352 | color: #453DEA; | ||
| 353 | border-left: 8px solid #453DEA; | ||
| 354 | padding-left: 10px; | ||
| 355 | font-weight: 600; | ||
| 356 | } | ||
| 357 | |||
| 358 | .table{ | ||
| 359 | font-size: 14px; | ||
| 360 | color: #000; | ||
| 361 | font-weight: 400; | ||
| 362 | padding: 19px 0; | ||
| 363 | .span{ | ||
| 364 | color: #4C5359; | ||
| 365 | } | ||
| 366 | } | ||
| 367 | |||
| 368 | .radioBox{ | ||
| 369 | border: 1px dashed #acacac; | ||
| 370 | height: 60px; | ||
| 371 | width: 156px; | ||
| 372 | text-align: center; | ||
| 373 | line-height: 29px; | ||
| 374 | margin: 10px; | ||
| 375 | padding: 0; | ||
| 376 | span{ | ||
| 377 | width: 100%; | ||
| 378 | height: 100%; | ||
| 379 | } | ||
| 380 | } | ||
| 381 | .radioBoxbg{ | ||
| 382 | background-color: #ecebfc; | ||
| 383 | border: 1px solid #453DEA; | ||
| 384 | color:#453DEA; | ||
| 385 | |||
| 386 | } | ||
| 387 | |||
| 388 | .sing{ | ||
| 389 | color:#453DEA; | ||
| 390 | } | ||
| 391 | |||
| 392 | </style> |
| ... | @@ -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') +' ' }} ~ {{dayjs(form.dcStart).format('YYYY-MM-DD') +' '}}--> | ||
| 168 | {{ dayjs(form.dcStart).format('YYYY-MM-DD') +' '+ form.nameStart }} ~ {{dayjs(form.dcStart).format('YYYY-MM-DD') +' '+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') +' '+ form.nameStart }} ~ {{dayjs(form.dcStart).format('YYYY-MM-DD') +' '+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,16 +499,40 @@ let handle; | ... | @@ -411,16 +499,40 @@ let handle; |
| 411 | 499 | ||
| 412 | function startforGetData() { | 500 | function startforGetData() { |
| 413 | handle = setTimeout(() => { | 501 | handle = setTimeout(() => { |
| 414 | getData().then( res => { | 502 | if (type.value=='photography'){ |
| 415 | if (form.value.payDate) { | 503 | photographyOrder().then(res=>{ |
| 416 | if (handle) { | 504 | if (form.value.payDate) { |
| 417 | clearTimeout(handle) | 505 | if (handle) { |
| 418 | handle = null | 506 | clearTimeout(handle) |
| 507 | handle = null | ||
| 508 | } | ||
| 509 | } else { | ||
| 510 | startforGetData() | ||
| 419 | } | 511 | } |
| 420 | } else { | 512 | }) |
| 421 | startforGetData() | 513 | }else if(type.value=='makeUp'){ |
| 422 | } | 514 | MakeUpOrder().then(res=>{ |
| 423 | }) | 515 | if (form.value.payDate) { |
| 516 | if (handle) { | ||
| 517 | clearTimeout(handle) | ||
| 518 | handle = null | ||
| 519 | } | ||
| 520 | } else { | ||
| 521 | startforGetData() | ||
| 522 | } | ||
| 523 | }) | ||
| 524 | }else{ | ||
| 525 | getData().then( res => { | ||
| 526 | if (form.value.payDate) { | ||
| 527 | if (handle) { | ||
| 528 | clearTimeout(handle) | ||
| 529 | handle = null | ||
| 530 | } | ||
| 531 | } else { | ||
| 532 | startforGetData() | ||
| 533 | } | ||
| 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> | ... | ... |
| 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 :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 | ||
| 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 | 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'}} | | ||
| 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' }} | | ||
| 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 | | | ||
| 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/booking/photographyOrder.vue
0 → 100644
| 1 | <template> | ||
| 2 | <div> | ||
| 3 | <div class="box"> | ||
| 4 | <el-card :body-style="{ padding: '0px' }" class="mt20"> | ||
| 5 | <div slot="header"> | ||
| 6 | <div class="bg-lineg">{{ language == 0 ? '摄影预约下单' : 'Photography booking order' }}</div> | ||
| 7 | </div> | ||
| 8 | <el-card> | ||
| 9 | <div class='order-header'> | ||
| 10 | <div class="title"> | ||
| 11 | {{formData.name }} | ||
| 12 | </div> | ||
| 13 | <el-row class="hz-row" > | ||
| 14 | <el-icon size="16" style="position: relative;top: 2px" color="#929AA0"> | ||
| 15 | <OfficeBuilding/> | ||
| 16 | </el-icon> | ||
| 17 | {{ language==0?'成立':'Established for'}} <span class="sign" style="padding-top: 2px">6</span>{{language==0?'年':'years'}} | | ||
| 18 | <el-icon size="16" style="position: relative;top: 2px" color="#929AA0"> | ||
| 19 | <UserFilled/> | ||
| 20 | </el-icon> | ||
| 21 | <span class="sign" style="padding-top: 2px"> {{ formData.dresserLimit }}</span>{{language==0?'名化妆师':'makeup artists' }} | | ||
| 22 | <el-icon size="16" style="position: relative;top: 2px" color="#929AA0"> | ||
| 23 | <PhoneFilled/> | ||
| 24 | </el-icon> | ||
| 25 | <span style="padding-top: 2px"> | ||
| 26 | {{ formData.contact }} | ||
| 27 | </span> | ||
| 28 | | | ||
| 29 | <el-icon size="16" style="position: relative;top: 2px" color="#929AA0"> | ||
| 30 | <LocationFilled/> | ||
| 31 | </el-icon> | ||
| 32 | {{formData.remarks}} | ||
| 33 | |||
| 34 | </el-row> | ||
| 35 | <hr style="border:1px solid #D3D1F6 "> | ||
| 36 | <el-row class="table"> | ||
| 37 | <div style="margin-right: 50px"> | ||
| 38 | <el-image style="width:55px;height: 70px " :src="fillImgUrl(formDatas.photos?.split(',')[0]) " fit="cover" /> | ||
| 39 | </div> | ||
| 40 | <el-row style="flex: 1"> | ||
| 41 | <div style="flex: 1"> | ||
| 42 | <div style="margin-bottom: 20px;">{{ language==0?'预约日期':"Appointment date" }} <span class="span">{{route.query.date}}</span></div> | ||
| 43 | <div>{{ language==0?'套餐名称':"Package name" }} <span class="span">{{ formDatas.name }}</span></div> | ||
| 44 | </div> | ||
| 45 | |||
| 46 | <div style="flex: 1"> | ||
| 47 | <!-- <div style="margin-bottom: 20px">预约时间 <span class="span">09:00~12:00</span> </div>--> | ||
| 48 | <div v-if="language==0" style="margin-bottom: 20px;">上门摄影 <span class="span">{{ formDatas.goHome==1?'是':'否' }}</span></div> | ||
| 49 | <div v-else style="margin-bottom: 20px;">Door-to-door photography <span class="span">{{ formDatas.goHome==1?'YES':'NO' }}</span></div> | ||
| 50 | <div >{{ language==0?'价格':"Price" }} <span class="sign">{{language==0? '￥'+formDatas.photoPrice:'€'+formDatas.photoPriceEn }}</span></div> | ||
| 51 | </div> | ||
| 52 | |||
| 53 | <div style="flex: 1"> | ||
| 54 | <div style="margin-bottom: 20px">{{ language==0?'套餐说明':"Package description" }} <span class="span">{{formDatas.introduction}}</span></div> | ||
| 55 | <!-- <div >价格 <span class="sign">{{language==0? '￥'+formDatas.photoPrice:'€'+formDatas.photoPriceEn }}</span></div>--> | ||
| 56 | </div> | ||
| 57 | </el-row> | ||
| 58 | </el-row> | ||
| 59 | </div> | ||
| 60 | <br> | ||
| 61 | <div class="yu">{{ language==0?'预约时间':'Appointment time' }}</div> | ||
| 62 | <el-row style="width: 100%" > | ||
| 63 | <el-button v-for="v in radioList" @click="handleRadio(v)" :disabled="v.num-v.counts<=0" class="radioBox" :class="{'radioBoxbg':v.flag}"> | ||
| 64 | <div> | ||
| 65 | <div>{{ v.nameStart }}-{{ v.nameEnd }}</div> | ||
| 66 | <div v-if="language==0">(剩余: <span class="sing">{{ v.num-v.counts }}</span> 个)</div> | ||
| 67 | <div v-else>(Remaining: <span class="sing">{{ v.num-v.counts }}</span> )</div> | ||
| 68 | </div> | ||
| 69 | </el-button> | ||
| 70 | </el-row> | ||
| 71 | <br> | ||
| 72 | <div class="yu">{{ language==0?'预约信息':"Reservation information" }}</div> | ||
| 73 | <br> | ||
| 74 | <div class="form-order"> | ||
| 75 | <el-form :model="form" style="width: 800px" :label-width="language==0?'140px':'200px'" :rules="rules" ref="formRef"> | ||
| 76 | <el-form-item :label="language==0?'预约数量':'Number Of Reservations'" required prop="num"> | ||
| 77 | <el-input-number style="width: 100%" v-model.trim="form.num" :min="1" :max="10" @change="changNum"/> | ||
| 78 | </el-form-item> | ||
| 79 | <el-form-item :label="language==0?'预约联系人':'Contacts'" required prop="contacts"> | ||
| 80 | <el-input v-model.trim="form.contacts" :min="1" :max="10" /> | ||
| 81 | </el-form-item> | ||
| 82 | <el-form-item :label="language==0?'联系电话':'Contact Number'" required prop="phone"> | ||
| 83 | <el-input v-model.trim="form.phone" :min="1" :max="13" /> | ||
| 84 | </el-form-item> | ||
| 85 | <el-form-item :label="language==0?'备注':'Remarks'" prop="remarks"> | ||
| 86 | <el-input type="textarea" :rows="3" v-model.trim="form.remarks" :min="1" :max="10" /> | ||
| 87 | </el-form-item> | ||
| 88 | </el-form> | ||
| 89 | </div> | ||
| 90 | </el-card> | ||
| 91 | </el-card> | ||
| 92 | |||
| 93 | <el-card class="mt30"> | ||
| 94 | <el-row justify="space-between" align="middle"> | ||
| 95 | <el-col :span="12"> | ||
| 96 | <label>{{ language == 0 ? '共计金额' : 'Total' }}： | ||
| 97 | <span class=" text-warning"> {{ language == 0 ? '¥' : '€' }}<span class="bigMoney">{{ | ||
| 98 | money | ||
| 99 | }}</span></span> | ||
| 100 | </label> | ||
| 101 | </el-col> | ||
| 102 | <el-col :span="12" class="text-right"> | ||
| 103 | <el-button type="primary" class="btn-lineG w200px" size="large" round @click="submit"> | ||
| 104 | {{ language == 0 ? '确认付款' : 'Book Now' }} | ||
| 105 | </el-button> | ||
| 106 | </el-col> | ||
| 107 | </el-row> | ||
| 108 | </el-card> | ||
| 109 | <div style="height: 60px;"></div> | ||
| 110 | </div> | ||
| 111 | </div> | ||
| 112 | </template> | ||
| 113 | |||
| 114 | <script setup> | ||
| 115 | import {useRouter, useRoute} from "vue-router"; | ||
| 116 | import {ref, reactive, onMounted,getCurrentInstance} from "vue"; | ||
| 117 | import {useStorage} from "@vueuse/core/index"; | ||
| 118 | import * as booking from "@/apiPc/booking" | ||
| 119 | import dayjs from 'dayjs' | ||
| 120 | import {ElMessage, ElMessageBox} from "element-plus"; | ||
| 121 | import useUserStore from "@/store/modules/user"; | ||
| 122 | import {formatDate} from "/@/utils"; | ||
| 123 | import {submitOrderPhoto} from "@/apiPc/booking"; | ||
| 124 | const { proxy } = getCurrentInstance() | ||
| 125 | const user = useUserStore().user | ||
| 126 | const language = useStorage('language', 0) | ||
| 127 | const router = useRouter() | ||
| 128 | const route = useRoute() | ||
| 129 | const form = ref({ | ||
| 130 | num: '1', | ||
| 131 | roomNum: 0, | ||
| 132 | addNum: 0, | ||
| 133 | ddDate: '14:00', | ||
| 134 | phone: user?.phonenumber || '', | ||
| 135 | }) | ||
| 136 | const formData=ref({}) | ||
| 137 | const formDatas=ref({}) | ||
| 138 | const timeVal=ref(null) | ||
| 139 | const money = ref(0) | ||
| 140 | const rules = ref({ | ||
| 141 | num: [ | ||
| 142 | { required: true, message: language.value==0?'预约数量不能为空':"The number of reservations cannot be empty", trigger: 'blur' }, | ||
| 143 | ], | ||
| 144 | contacts: [ | ||
| 145 | { required: true, message:language.value==0?'请输入预约联系人':'Please enter an appointment contact', trigger: 'blur' }, | ||
| 146 | ], | ||
| 147 | phone: [ | ||
| 148 | { required: true, message: language.value==0? '请输入联系电话':"Please enter a contact number", trigger: 'blur' }, | ||
| 149 | ], | ||
| 150 | }) | ||
| 151 | const radioList=ref([]) | ||
| 152 | |||
| 153 | onMounted(() => { | ||
| 154 | console.log(route.query) | ||
| 155 | getData() | ||
| 156 | getRadioList() | ||
| 157 | getScheduleList() | ||
| 158 | |||
| 159 | }) | ||
| 160 | |||
| 161 | function getData() { | ||
| 162 | booking.getComShootVoById({ activityId: route.params.cptId, | ||
| 163 | id:route.params.id}).then(res => { | ||
| 164 | formData.value = res.data | ||
| 165 | }).catch(err => { | ||
| 166 | console.log(err) | ||
| 167 | }) | ||
| 168 | } | ||
| 169 | |||
| 170 | function getScheduleList() { | ||
| 171 | booking.getActivityPhotoVoListByShootId({lasId:route.params.id,laspId:route.params.lasId}).then(res=>{ | ||
| 172 | formDatas.value={} | ||
| 173 | res.data.forEach(v=>{ | ||
| 174 | if (v.id==route.params.lasId) formDatas.value=v | ||
| 175 | }) | ||
| 176 | console.log(formDatas.value) | ||
| 177 | }) | ||
| 178 | } | ||
| 179 | |||
| 180 | function getRadioList(){ | ||
| 181 | booking.getPhotoConfList({ laspId:route.params.lasId,currentDate:route.query.date}).then(res => { | ||
| 182 | radioList.value = res.data | ||
| 183 | radioList.value.forEach(item=>{ | ||
| 184 | item.flag=false | ||
| 185 | }) | ||
| 186 | console.log(radioList.value) | ||
| 187 | }).catch(err => { | ||
| 188 | console.log(err) | ||
| 189 | }) | ||
| 190 | timeVal.value={} | ||
| 191 | } | ||
| 192 | |||
| 193 | function submit() { | ||
| 194 | if (!user) { | ||
| 195 | useUserStore().setVisitor() | ||
| 196 | return | ||
| 197 | } | ||
| 198 | |||
| 199 | if (!timeVal.value.id)return proxy.$modal.msgError('请选择预约时间!', ) | ||
| 200 | |||
| 201 | proxy.$refs['formRef'].validate(valid=>{ | ||
| 202 | if (valid){ | ||
| 203 | form.value.total=money.value | ||
| 204 | form.value.orderName=formData.value.name | ||
| 205 | form.value.dcStart=route.query.date | ||
| 206 | form.value.activeId=route.params.cptId | ||
| 207 | form.value.asId=route.params.id | ||
| 208 | form.value.aspId=route.params.lasId | ||
| 209 | form.value.aspcId=timeVal.value.id | ||
| 210 | form.value.packageName=formDatas.value.name | ||
| 211 | form.value.timePeriod= timeVal.value.nameStart+'-'+timeVal.value.nameEnd | ||
| 212 | console.log(form.value) | ||
| 213 | // 提交确认 | ||
| 214 | ElMessageBox.confirm(language.value == 0 ? '确认提交订单吗？' : 'Confirm to submit the order?', { | ||
| 215 | confirmButtonText: language.value == 0 ? '确定' : 'Confirm', | ||
| 216 | cancelButtonText: language.value == 0 ? '取消' : 'Cancel', | ||
| 217 | type: 'warning' | ||
| 218 | }).then(() => { | ||
| 219 | booking.submitOrderPhoto(form.value).then(res => { | ||
| 220 | if (res.data) { | ||
| 221 | if (res.data.orderId <0||res.data.total<0) { | ||
| 222 | ElMessage.warning(language.value == 0 ? '订单库存数量不足!' : 'The order stock quantity is insufficient!') | ||
| 223 | getRadioList() | ||
| 224 | } else { | ||
| 225 | //去付钱 | ||
| 226 | router.push({ | ||
| 227 | name: 'bookingPay', | ||
| 228 | query: { | ||
| 229 | orderId: res.data.orderId, | ||
| 230 | money: res.data.total, | ||
| 231 | type: 'photography' | ||
| 232 | } | ||
| 233 | }) | ||
| 234 | } | ||
| 235 | } else { | ||
| 236 | ElMessage.warning(language.value == 0 ? '无可预订的时间' : 'No booking time available') | ||
| 237 | } | ||
| 238 | }).catch(err => { | ||
| 239 | ElMessage.warning(language.value == 0 ? '无可预订的时间' : 'No booking time available') | ||
| 240 | }) | ||
| 241 | }) | ||
| 242 | |||
| 243 | }else { | ||
| 244 | return proxy.$message.warning(language.value == 0 ? '请填写完整信息' : 'Please fill in the complete information') | ||
| 245 | } | ||
| 246 | }) | ||
| 247 | } | ||
| 248 | |||
| 249 | |||
| 250 | function handleRadio(v){ | ||
| 251 | timeVal.value=null | ||
| 252 | radioList.value.forEach(t=>{ | ||
| 253 | if(v.id==t.id){ | ||
| 254 | t.flag=true | ||
| 255 | v.flag =true | ||
| 256 | timeVal.value=v | ||
| 257 | changeMaony() | ||
| 258 | }else{ | ||
| 259 | t.flag=false | ||
| 260 | } | ||
| 261 | }) | ||
| 262 | } | ||
| 263 | |||
| 264 | function changNum (){ | ||
| 265 | changeMaony() | ||
| 266 | } | ||
| 267 | function changeMaony(){ | ||
| 268 | if(timeVal.value&&form.value.num){ | ||
| 269 | if (language.value==0){ | ||
| 270 | money.value= formDatas.value.photoPrice * form.value.num | ||
| 271 | }else{ | ||
| 272 | money.value= formDatas.value.photoPriceEn * form.value.num | ||
| 273 | } | ||
| 274 | } | ||
| 275 | |||
| 276 | } | ||
| 277 | </script> | ||
| 278 | |||
| 279 | <style scoped lang="scss"> | ||
| 280 | .bigMoney { | ||
| 281 | font-size: 36px !important; | ||
| 282 | font-family: 'DIN Alternate'; | ||
| 283 | font-weight: bold; | ||
| 284 | } | ||
| 285 | |||
| 286 | .bg-lineg { | ||
| 287 | height: 40px; | ||
| 288 | line-height: 40px; | ||
| 289 | font-size: 18px; | ||
| 290 | text-align: center; | ||
| 291 | } | ||
| 292 | |||
| 293 | .leftboderTT { | ||
| 294 | font-weight: 600; | ||
| 295 | font-size: 16px; | ||
| 296 | color: #453DEA; | ||
| 297 | } | ||
| 298 | |||
| 299 | .order-header{ | ||
| 300 | padding:22px 33px 0 22px; | ||
| 301 | border: 1px solid #453DEA; | ||
| 302 | background-color: rgba(69,61,234,0.04); | ||
| 303 | .title{ | ||
| 304 | font-weight: 500; | ||
| 305 | font-size: 24px; | ||
| 306 | color: #000000; | ||
| 307 | margin-bottom: 10px; | ||
| 308 | } | ||
| 309 | |||
| 310 | } | ||
| 311 | |||
| 312 | .border-rr { | ||
| 313 | border-radius: 5px; | ||
| 314 | border: 1px solid #DCDFE6; | ||
| 315 | } | ||
| 316 | |||
| 317 | //.ccitemBox { | ||
| 318 | // overflow: auto; | ||
| 319 | // | ||
| 320 | // label { | ||
| 321 | // margin: 10px 0; | ||
| 322 | // display: block; | ||
| 323 | // min-height: 30px; | ||
| 324 | // | ||
| 325 | // span { | ||
| 326 | // color: #FF8124; | ||
| 327 | // font-family: DIN Alternate; | ||
| 328 | // font-size: 24px; | ||
| 329 | // } | ||
| 330 | // } | ||
| 331 | //} | ||
| 332 | |||
| 333 | |||
| 334 | |||
| 335 | .red { | ||
| 336 | color: #FF8124; | ||
| 337 | } | ||
| 338 | |||
| 339 | .tip { | ||
| 340 | font-size: 14px; | ||
| 341 | color: #666; | ||
| 342 | padding: 0 10px; | ||
| 343 | } | ||
| 344 | .form-order{ | ||
| 345 | border: 1px solid #DCDFE6; | ||
| 346 | padding: 23px 0; | ||
| 347 | } | ||
| 348 | |||
| 349 | .yu{ | ||
| 350 | font-size: 16px; | ||
| 351 | color: #453DEA; | ||
| 352 | border-left: 8px solid #453DEA; | ||
| 353 | padding-left: 10px; | ||
| 354 | font-weight: 600; | ||
| 355 | } | ||
| 356 | |||
| 357 | .table{ | ||
| 358 | font-size: 14px; | ||
| 359 | color: #000; | ||
| 360 | font-weight: 400; | ||
| 361 | padding: 19px 0; | ||
| 362 | .span{ | ||
| 363 | color: #4C5359; | ||
| 364 | } | ||
| 365 | } | ||
| 366 | |||
| 367 | .radioBox{ | ||
| 368 | border: 1px dashed #acacac; | ||
| 369 | height: 60px; | ||
| 370 | width: 156px; | ||
| 371 | text-align: center; | ||
| 372 | line-height: 29px; | ||
| 373 | margin: 10px; | ||
| 374 | padding: 0; | ||
| 375 | span{ | ||
| 376 | width: 100%; | ||
| 377 | height: 100%; | ||
| 378 | } | ||
| 379 | } | ||
| 380 | .radioBoxbg{ | ||
| 381 | background-color: #ecebfc; | ||
| 382 | border: 1px solid #453DEA; | ||
| 383 | color:#453DEA; | ||
| 384 | |||
| 385 | } | ||
| 386 | |||
| 387 | .sing{ | ||
| 388 | color:#453DEA; | ||
| 389 | } | ||
| 390 | |||
| 391 | </style> |
| ... | @@ -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) { | ... | ... |
| ... | @@ -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 | } | ... | ... |
| ... | @@ -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> | ... | ... |
| ... | @@ -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 | } | ... | ... |
| ... | @@ -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"/>--> | ... | ... |
| ... | @@ -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> | ... | ... |
| ... | @@ -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, | ... | ... |
-
Please register or sign in to post a comment