页面修改
Showing
6 changed files
with
126 additions
and
18 deletions
src/viewsPc/booking/component/dailog.vue
0 → 100644
| 1 | <template> | ||
| 2 | <div> | ||
| 3 | <el-dialog | ||
| 4 | v-model="show" title="详情" :close-on-click-modal="true" width="800px"> | ||
| 5 | <div v-html="content"> | ||
| 6 | </div> | ||
| 7 | </el-dialog> | ||
| 8 | </div> | ||
| 9 | </template> | ||
| 10 | |||
| 11 | <script setup> | ||
| 12 | import {ref} from 'vue' | ||
| 13 | const show=ref(false) | ||
| 14 | const content=ref() | ||
| 15 | |||
| 16 | function open(row){ | ||
| 17 | content.value=row | ||
| 18 | show.value=true | ||
| 19 | } | ||
| 20 | |||
| 21 | defineExpose({ | ||
| 22 | open | ||
| 23 | }) | ||
| 24 | </script> | ||
| 25 | |||
| 26 | <style lang="scss" scoped> | ||
| 27 | |||
| 28 | </style> |
| ... | @@ -60,15 +60,16 @@ | ... | @@ -60,15 +60,16 @@ |
| 60 | <div> | 60 | <div> |
| 61 | <el-row justify="space-between"> | 61 | <el-row justify="space-between"> |
| 62 | <el-row class="hz-p" style="flex: 1"> | 62 | <el-row class="hz-p" style="flex: 1"> |
| 63 | <el-col :span="8"> | 63 | <el-col :span="12"> |
| 64 | <div >{{ language==0?'套餐说明':'Package Description' }}: <span style="margin-right: 20px">{{n.introduction}}</span></div> | 64 | <div @click="hazelView(n)" :class="{esp_3:n.active}" >{{ language==0?'套餐说明':'Package Description' }}: <span style="margin-right: 20px">{{n.introduction}}</span></div> |
| 65 | </el-col> | 65 | </el-col> |
| 66 | 66 | ||
| 67 | <el-col :span="8"> | 67 | <el-col :span="5" style="padding-left: 20px"> |
| 68 | <div>{{ language==0?'剩余':'' }}<span class="sign">{{ n.num-n.counts }}</span>{{language==0?'名额':'Places Remaining' }} </div> | 68 | <div>{{ language==0?'剩余':'' }}<span class="sign">{{ n.num-n.counts }}</span>{{language==0?'名额':'Places Remaining' }} </div> |
| 69 | </el-col> | 69 | </el-col> |
| 70 | <el-col :span="8"> | 70 | <el-col :span="7"> |
| 71 | <div >{{n.goHome==1?language==0?'上门化妆':'Door-to-door makeup':''}}</div> | 71 | <div v-if="language==0" >地点:{{n.address}}</div> |
| 72 | <div v-else >address:{{n.addressEn}}</div> | ||
| 72 | </el-col> | 73 | </el-col> |
| 73 | </el-row> | 74 | </el-row> |
| 74 | <el-row> | 75 | <el-row> |
| ... | @@ -86,17 +87,20 @@ | ... | @@ -86,17 +87,20 @@ |
| 86 | :image="`/img/order_no.png`" | 87 | :image="`/img/order_no.png`" |
| 87 | :image-size="200"/> | 88 | :image-size="200"/> |
| 88 | </div> | 89 | </div> |
| 90 | <Dailog ref="dialogRef"></Dailog> | ||
| 89 | </div> | 91 | </div> |
| 90 | </template> | 92 | </template> |
| 91 | 93 | ||
| 92 | <script setup> | 94 | <script setup> |
| 93 | import {ref} from "vue"; | 95 | import {ref,onMounted,getCurrentInstance} from "vue"; |
| 94 | import {dayjs} from "element-plus"; | 96 | import {dayjs} from "element-plus"; |
| 95 | import {useRoute,useRouter} from 'vue-router' | 97 | import {useRoute,useRouter} from 'vue-router' |
| 96 | import * as booking from "@/apiPc/booking" | 98 | import * as booking from "@/apiPc/booking" |
| 97 | import {useStorage} from "@vueuse/core/index"; | 99 | import {useStorage} from "@vueuse/core/index"; |
| 98 | import useUserStore from "/@/store/modules/user"; | 100 | import useUserStore from "/@/store/modules/user"; |
| 99 | 101 | import {getBaseInfoByActiveId} from "@/apiPc/booking"; | |
| 102 | import{ElMessageBox} from 'element-plus' | ||
| 103 | import Dailog from "/@/viewsPc/booking/component/dailog.vue"; | ||
| 100 | const user = useUserStore().user | 104 | const user = useUserStore().user |
| 101 | const language = useStorage('language', 0) | 105 | const language = useStorage('language', 0) |
| 102 | const router = useRouter() | 106 | const router = useRouter() |
| ... | @@ -106,19 +110,45 @@ const currentDate1 = ref(new Date()) | ... | @@ -106,19 +110,45 @@ const currentDate1 = ref(new Date()) |
| 106 | const calendarRange = ref([dayjs(currentDate.value).toDate(),(dayjs(currentDate.value).toDate())]) | 110 | const calendarRange = ref([dayjs(currentDate.value).toDate(),(dayjs(currentDate.value).toDate())]) |
| 107 | const schList = ref([]) | 111 | const schList = ref([]) |
| 108 | const loading = ref(false) | 112 | const loading = ref(false) |
| 113 | const formTime=ref() | ||
| 114 | const {proxy} = getCurrentInstance() | ||
| 109 | const query = ref({ | 115 | const query = ref({ |
| 110 | lasId:route.params.id, | 116 | lasId:route.params.id, |
| 111 | }) | 117 | }) |
| 112 | const value2=ref('') | 118 | const value2=ref('') |
| 113 | 119 | ||
| 120 | onMounted(() => { | ||
| 121 | getBaseInfoByActiveId(route.params.cptId).then(res=>{ | ||
| 122 | formTime.value = res.data || null | ||
| 123 | }).catch(err=>{ | ||
| 124 | console.log(err) | ||
| 125 | formTime.value = null | ||
| 126 | }).finally(()=>{ | ||
| 127 | getData() | ||
| 128 | getScheduleList() | ||
| 129 | }) | ||
| 130 | }) | ||
| 131 | |||
| 132 | function getData(){ | ||
| 133 | if (!formTime.value.mealStart) return | ||
| 134 | const toDay=dayjs(dayjs().format('YYYY-MM-DD')).valueOf() | ||
| 135 | const start=dayjs(formTime.value.mealStart).valueOf() | ||
| 136 | if(toDay<start){ | ||
| 137 | currentDate1.value= query.value.currentDate = dayjs(start).format('YYYY-MM-DD') | ||
| 138 | |||
| 139 | }else{ | ||
| 140 | currentDate1.value = query.value.currentDate = dayjs(toDay).format('YYYY-MM-DD') | ||
| 141 | } | ||
| 142 | } | ||
| 114 | 143 | ||
| 115 | getScheduleList() | ||
| 116 | function getScheduleList() { | 144 | function getScheduleList() { |
| 117 | loading.value = true | 145 | loading.value = true |
| 118 | query.value.currentDate = dayjs(currentDate.value).format('YYYY-MM-DD') | 146 | // query.value.currentDate = dayjs(currentDate.value).format('YYYY-MM-DD') |
| 147 | if(!query.value.currentDate)return proxy.$message.error('请选择时间') | ||
| 119 | booking.getActivityMealVoListByStudioId(query.value).then(res=>{ | 148 | booking.getActivityMealVoListByStudioId(query.value).then(res=>{ |
| 120 | loading.value = false | 149 | loading.value = false |
| 121 | schList.value = res.data | 150 | schList.value = res.data |
| 151 | schList.value.forEach(item=>item.active=true) | ||
| 122 | }) | 152 | }) |
| 123 | } | 153 | } |
| 124 | function selectDate(date) { | 154 | function selectDate(date) { |
| ... | @@ -133,12 +163,18 @@ function dateChange(){ | ... | @@ -133,12 +163,18 @@ function dateChange(){ |
| 133 | getScheduleList() | 163 | getScheduleList() |
| 134 | } | 164 | } |
| 135 | 165 | ||
| 166 | function hazelView(n){ | ||
| 167 | proxy.$refs['dialogRef'].open(n.details) | ||
| 168 | } | ||
| 169 | |||
| 136 | function goMatch(n) { | 170 | function goMatch(n) { |
| 137 | if (!user) { | 171 | if (!user) { |
| 138 | useUserStore().setVisitor() | 172 | useUserStore().setVisitor() |
| 139 | return | 173 | return |
| 140 | } | 174 | } |
| 141 | 175 | ||
| 176 | ElMessageBox.confirm(language.value==0?`你当前所预约的时间为${query.value.currentDate}是否确定?`:`Your current appointment is ${query.value.currentDate}. Are you sure?`,{type:'warning'}) | ||
| 177 | .then(() => { | ||
| 142 | router.push({ | 178 | router.push({ |
| 143 | name: 'makeUpOrder', | 179 | name: 'makeUpOrder', |
| 144 | params: { | 180 | params: { |
| ... | @@ -148,12 +184,15 @@ function goMatch(n) { | ... | @@ -148,12 +184,15 @@ function goMatch(n) { |
| 148 | date: dayjs(currentDate.value).format('YYYY-MM-DD') | 184 | date: dayjs(currentDate.value).format('YYYY-MM-DD') |
| 149 | } | 185 | } |
| 150 | }) | 186 | }) |
| 187 | }) | ||
| 188 | .catch(() => { | ||
| 189 | // catch error | ||
| 190 | }) | ||
| 191 | |||
| 192 | |||
| 193 | |||
| 151 | } | 194 | } |
| 152 | 195 | ||
| 153 | // function disabledDate(e){ | ||
| 154 | // return e.getTime()<=Date.now() | ||
| 155 | // console.log(e) | ||
| 156 | // } | ||
| 157 | </script> | 196 | </script> |
| 158 | 197 | ||
| 159 | <style scoped lang="scss"> | 198 | <style scoped lang="scss"> | ... | ... |
| ... | @@ -97,6 +97,10 @@ | ... | @@ -97,6 +97,10 @@ |
| 97 | </el-col> | 97 | </el-col> |
| 98 | <el-col :span="8" v-else>{{ language==0?'无早餐':'No breakfast' }}</el-col> | 98 | <el-col :span="8" v-else>{{ language==0?'无早餐':'No breakfast' }}</el-col> |
| 99 | </el-row> | 99 | </el-row> |
| 100 | <div class="tagbox esp"> | ||
| 101 | <span v-for="(t,index) in r.label?.split(',')" v-show="index<4">{{t}}</span> | ||
| 102 | <a v-show="r.label?.split(',').length>4">{{ language==0?'更多':'MORE' }} ></a> | ||
| 103 | </div> | ||
| 100 | </el-col> | 104 | </el-col> |
| 101 | <el-col :span="3"> | 105 | <el-col :span="3"> |
| 102 | <div class="price">{{ language==0?'¥':'€' }}<span>{{language==0?r.roomPrice:r.roomPriceEn}}</span></div> | 106 | <div class="price">{{ language==0?'¥':'€' }}<span>{{language==0?r.roomPrice:r.roomPriceEn}}</span></div> | ... | ... |
| ... | @@ -46,13 +46,13 @@ | ... | @@ -46,13 +46,13 @@ |
| 46 | 46 | ||
| 47 | <div style="flex: 1"> | 47 | <div style="flex: 1"> |
| 48 | <!-- <div style="margin-bottom: 20px">预约时间 <span class="span">09:00~12:00</span> </div>--> | 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> | 49 | <div v-if="language==0" style="margin-bottom: 20px">地点 <span class="span">{{ formDatas.address}}</span></div> |
| 50 | <div v-else style="margin-bottom: 20px">Home makeup <span class="span">{{ formDatas.goHome==1?'YES':'NO' }}</span></div> | 50 | <div v-else style="margin-bottom: 20px">Address <span class="span">{{ formDatas.addressEn}}</span></div> |
| 51 | <div >{{ language==0?' 价格':"Price" }} <span class="sign">{{language==0? '¥'+formDatas.mealPrice:'€'+formDatas.mealPriceEn }}</span></div> | 51 | <div >{{ language==0?' 价格':"Price" }} <span class="sign">{{language==0? '¥'+formDatas.mealPrice:'€'+formDatas.mealPriceEn }}</span></div> |
| 52 | </div> | 52 | </div> |
| 53 | 53 | ||
| 54 | <div style="flex: 1"> | 54 | <div style="flex: 1"> |
| 55 | <div style="margin-bottom: 20px">{{ language==0?'套餐说明':"Package description" }} <span class="span">{{formDatas.introduction}}</span></div> | 55 | <div @click="hazelView(formDatas)" style="margin-bottom: 20px" :class="{esp_3:active}" class="s">{{ language==0?'套餐说明':"Package description" }} <span class="span">{{formDatas.introduction}}</span></div> |
| 56 | <!-- <div >价格 <span class="sign">{{language==0? '¥'+formDatas.mealPrice:'€'+formDatas.mealPriceEn }}</span></div>--> | 56 | <!-- <div >价格 <span class="sign">{{language==0? '¥'+formDatas.mealPrice:'€'+formDatas.mealPriceEn }}</span></div>--> |
| 57 | </div> | 57 | </div> |
| 58 | </el-row> | 58 | </el-row> |
| ... | @@ -110,6 +110,8 @@ | ... | @@ -110,6 +110,8 @@ |
| 110 | <div style="height: 60px;"></div> | 110 | <div style="height: 60px;"></div> |
| 111 | 111 | ||
| 112 | </div> | 112 | </div> |
| 113 | <Dailog ref="dialogRef"></Dailog> | ||
| 114 | |||
| 113 | </div> | 115 | </div> |
| 114 | </template> | 116 | </template> |
| 115 | 117 | ||
| ... | @@ -123,11 +125,14 @@ import dayjs from 'dayjs' | ... | @@ -123,11 +125,14 @@ import dayjs from 'dayjs' |
| 123 | import {ElMessage, ElMessageBox} from "element-plus"; | 125 | import {ElMessage, ElMessageBox} from "element-plus"; |
| 124 | import useUserStore from "@/store/modules/user"; | 126 | import useUserStore from "@/store/modules/user"; |
| 125 | import {formatDate} from "/@/utils"; | 127 | import {formatDate} from "/@/utils"; |
| 128 | import Dailog from "/@/viewsPc/booking/component/dailog.vue"; | ||
| 129 | |||
| 126 | const { proxy } = getCurrentInstance() | 130 | const { proxy } = getCurrentInstance() |
| 127 | const user = useUserStore().user | 131 | const user = useUserStore().user |
| 128 | const language = useStorage('language', 0) | 132 | const language = useStorage('language', 0) |
| 129 | const router = useRouter() | 133 | const router = useRouter() |
| 130 | const route = useRoute() | 134 | const route = useRoute() |
| 135 | const active=ref(true) | ||
| 131 | const room = ref({}) | 136 | const room = ref({}) |
| 132 | const form = ref({ | 137 | const form = ref({ |
| 133 | num: '1', | 138 | num: '1', |
| ... | @@ -275,6 +280,11 @@ function changeMaony(){ | ... | @@ -275,6 +280,11 @@ function changeMaony(){ |
| 275 | } | 280 | } |
| 276 | 281 | ||
| 277 | } | 282 | } |
| 283 | |||
| 284 | function hazelView(n){ | ||
| 285 | proxy.$refs['dialogRef'].open(n.details) | ||
| 286 | } | ||
| 287 | |||
| 278 | </script> | 288 | </script> |
| 279 | 289 | ||
| 280 | <style scoped lang="scss"> | 290 | <style scoped lang="scss"> | ... | ... |
| ... | @@ -63,10 +63,20 @@ | ... | @@ -63,10 +63,20 @@ |
| 63 | </el-col> | 63 | </el-col> |
| 64 | <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> | 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 | <span style="margin-left: 40px">{{language==0?'工作室电话':'Studio phone number' }}:{{formInfo.contact}}</span> | ||
| 66 | </el-col> | 67 | </el-col> |
| 67 | <el-col> | 68 | <el-col> |
| 68 | {{ language == 0 ?'套餐说明':'Package Description' }}:{{ formInfo.introduction}} | 69 | {{ language == 0 ?'套餐说明':'Package Description' }}:{{ formInfo.introduction}} |
| 69 | </el-col> | 70 | </el-col> |
| 71 | <el-col> | ||
| 72 | <div v-if="language == 0"> | ||
| 73 | 套餐详情: <span v-html="form.details"></span> | ||
| 74 | </div> | ||
| 75 | <div v-else> | ||
| 76 | Package details:<span v-html="form.detailsEn"></span> | ||
| 77 | </div> | ||
| 78 | <!-- {{ language == 0 ?'套餐详情':'Package details' }}:{{ language == 0?form.details:form.detailsEn}}--> | ||
| 79 | </el-col> | ||
| 70 | </el-row> | 80 | </el-row> |
| 71 | </div> | 81 | </div> |
| 72 | </div> | 82 | </div> |
| ... | @@ -174,8 +184,21 @@ | ... | @@ -174,8 +184,21 @@ |
| 174 | <el-col :lg="8" :md="12" :sm="12" :xs="24"> | 184 | <el-col :lg="8" :md="12" :sm="12" :xs="24"> |
| 175 | <div class="mb10">{{ language==0?'联系人':'Contact Person' }}:{{ form.contacts }}</div> | 185 | <div class="mb10">{{ language==0?'联系人':'Contact Person' }}:{{ form.contacts }}</div> |
| 176 | </el-col> | 186 | </el-col> |
| 177 | <el-col :lg="8" :md="12" :sm="12" :xs="24">{{ language==0?'联系方式':'Contact Phone' }}:{{ form.phone }}</el-col> | 187 | <el-col :lg=12 :md="12" :sm="12" :xs="24"> |
| 178 | <el-col :span="24" >{{ language==0?'备注':'Remarks' }}:{{ form.remarks }}</el-col> | 188 | <div class="mb10"> |
| 189 | {{ language==0?'联系方式':'Contact Phone' }}:{{ form.phone }} | ||
| 190 | </div> | ||
| 191 | </el-col> | ||
| 192 | <el-col :lg="8" :md="12" :sm="12" :xs="24" > | ||
| 193 | <div class="mb10"> | ||
| 194 | {{ language==0?'备注':'Remarks' }}:{{ form.remarks }} | ||
| 195 | </div> | ||
| 196 | </el-col> | ||
| 197 | <el-col :lg="8" :md="12" :sm="12" :xs="24" > | ||
| 198 | <div class="mb10"> | ||
| 199 | {{ language==0?'地点':'Address' }}:{{language==0? formInfo.address :formInfo.addressEn }} | ||
| 200 | </div> | ||
| 201 | </el-col> | ||
| 179 | </el-row> | 202 | </el-row> |
| 180 | <el-row v-if="type == 'photography'"> | 203 | <el-row v-if="type == 'photography'"> |
| 181 | <el-col :lg="8" :md="12" :sm="12" :xs="24"> | 204 | <el-col :lg="8" :md="12" :sm="12" :xs="24"> | ... | ... |
-
Please register or sign in to post a comment