Skip to content

杨炀 / dance-pc

Go to a project
Toggle navigation
Toggle navigation pinning
73dc0e6e by zhangmeng
Options

化妆

1 parent 85059f20
Inline Side-by-side
Showing 6 changed files with 1115 additions and 295 deletions
src/apiPc/booking.js
......@@ -207,3 +207,27 @@ export function delAddress(ids) {
method: 'delete'
})
}
export function getMakeUpList(data) {
return request({
url: `/ota/activityStudio/getStudioList`,
method: 'get',
params:data
})
}
export function makeUpDetail(data) {
return request({
url: `/ota/activityStudio/getComStudioVoById`,
method: 'get',
params:data
})
}
export function getMealConfList(data) {
return request({
url: `/ota/mealConfig/getMealConfList`,
method: 'get',
params:data
})
}
......
src/routerPc/en.js
......@@ -410,6 +410,12 @@ export const constantRoutes = [
meta: { title: 'Makeup Appointment' }
},
{
path: 'makeUp/:cptId/:id/:orderId',
component: () => import('@/viewsPc/booking/makeUpOrder.vue'),
name: 'makeUpOrder',
meta: { title: 'Makeup Reservation' }
},
{
path: 'photography/:cptId',
component: () => import('@/viewsPc/booking/photography'),
name: 'photography',
......
src/viewsPc/booking/component/makeUpCalendar.vue 0 → 100644
<template>
<div >
<el-calendar v-model="currentDate" :range="calendarRange">
<template #header="{data}">
<el-row style="width: 100%">
<el-col :span="7">
{{data}}
</el-col>
<el-col :span="10">
<el-row justify="center" align='middle' >
<div class="canBtn"><el-icon><ArrowLeftBold /></el-icon></div>
<div>
<el-date-picker
v-model="value2"
type="datetimerange"
range-separator="-"
start-placeholder="Start date"
end-placeholder="End date"
size="small"
/>
</div>
<div class="canBtn"><el-icon><ArrowRightBold /></el-icon></div>
</el-row>
</el-col>
<el-col :span="7">
<div style="text-align: right;padding-right: 10px">
<el-date-picker
v-model="currentDate"
type="datetime"
placeholder="YYYY-MM-DD"
size="small"
@change="dateChange"
/>
</div>
</el-col>
</el-row>
</template>
<template #date-cell="data">
<div :class="data.data.day==query.currentDate?'primaryDate date':'date'" @click="selectDate(data.data.day)">
{{ data.data.day.slice(8, 10) }}
</div>
</template>
</el-calendar>
<div class="calendarList">
<ul v-loading="loading">
<li v-for="n in schList" :key="n.id" @click="goMatch(n)">
<el-row style="width: 100%">
<div style="margin-right: 25px">
<el-image style="width: 90px;height: 115px" src="@/assets/dance/banner.png" fit="cover" />
</div>
<div style="flex: 1" >
<div class="hz-title">A套餐</div>
<div>
<el-row justify="space-between">
<el-row class="hz-p">
<div style="margin-right: 80px">项目: <span style="margin-right: 20px">发型x1</span> <span>化妆x1</span> </div>
<div style="margin-right: 80px">服务: 化妆x1 </div>
<div>剩余 <span class="sign">6</span>名额 </div>
</el-row>
<el-row>
<div class="zh-margin" style="font-size: 36px;color: #ff8124"><span style="font-size: 24px">￥ </span> 120</div>
<el-button class="btn-lineG w200px" round type="primary" size="large">{{ language==0?'立即预约':'Select' }} ⇀</el-button>
</el-row>
</el-row>
</div>
</div>
</el-row>
</li>
</ul>
<el-empty v-if="schList.length== 0"
style="--el-empty-padding:0;--el-empty-description-margin-top:0"
:image="`/img/order_no.png`"
:image-size="200"/>
</div>
</div>
</template>
<script setup>
import {ref} from "vue";
import {dayjs} from "element-plus";
import {useRoute,useRouter} from 'vue-router'
import * as booking from "@/apiPc/booking"
import {useStorage} from "@vueuse/core/index";
const language = useStorage('language', 0)
const router = useRouter()
const route=useRoute()
const currentDate = ref(new Date())
const calendarRange = ref([dayjs('2024-07-17').toDate(), dayjs('2024-07-17').toDate()])
const schList = ref([])
const loading = ref(false)
const query = ref({
currentDate: dayjs(new Date()).format('YYYY-MM-DD') ,
// id:route.params.id
})
const value1=ref('')
const value2=ref('')
getScheduleList()
function getScheduleList() {
loading.value = true
// query.value.currentDate = dayjs(query.value.currentDate).format('YYYY-MM-DD')
booking.getMealConfList(query.value).then(res=>{
loading.value = false
schList.value = res.data
})
}
function selectDate(date) {
console.log(dayjs(date).format('YYYY-MM-DD'))
query.value.currentDate = dayjs(date).format('YYYY-MM-DD')
console.log(currentDate.value)
getScheduleList()
}
function dateChange(){
query.value.currentDate = dayjs(currentDate.value).format('YYYY-MM-DD')
getScheduleList()
}
function goMatch(n) {
router.push({
name: 'makeUpOrder',
params: {
orderId: n.cptId
},
query: {
matchId: n.cptId
}
})
}
</script>
<style scoped lang="scss">
.el-calendar {
--el-calendar-border: none;
--el-calendar-cell-width: 40px;
text-align: center;
--el-text-color-regular: #8E8D94;
:deep(.el-calendar__header) {
justify-content: center;
padding: 0 0 10px
}
:deep(.el-calendar__body) {
border: 1px solid #F0F0F0;
padding: 0
}
:deep(.el-calendar-table .el-calendar-day) {
padding: 1px;
}
:deep(.el-calendar-table td.is-selected) {
background: transparent;
}
:deep(.el-calendar__button-group) {
display: none;
}
:deep(.el-calendar-table thead th) {
padding: 5px 0 0
}
.primaryDate {
color: #fff;
background: linear-gradient(90deg, #8623FC, #453DEA);
}
.date {
margin: auto;
border-radius: 50%;
width: 30px;
height: 30px;
line-height: 30px;
font-weight: bold;
}
}
.calendarList {
border: 1px solid #F0F0F0;
padding: 12px 20px;
overflow: auto;
height: 625px;
ul {
li {cursor: pointer;
background: #F6F9FE;
margin: 7px 0 7px 20px;
position: relative;
padding: 13px;
border-radius: 10px;
font-weight: 500;
font-size: 15px;
label {
color: #453DEA;
margin-right: 15px;
&::before {
content: '';
background: #fff;
left: -17px;
top: 0px;
bottom: 0;
margin: auto;
border-radius: 50%;
width: 2px;
height: 2px;
position: absolute;
z-index: 1
}
}
}
li::before {
content: '';
background: linear-gradient(0deg, #8623FC, #453DEA);
border-radius: 50%;
width: 8px;
height: 8px;
position: absolute;
left: -20px;
top: 0;
bottom: 0;
margin: auto;
z-index: 1;
}
li::after {
content: '';
left: -16px;
width: 1px;
height: 100%;
background: #EBEBEB;
position: absolute;
top: 20px
}
//li:hover {
// color: #fff;
// background: linear-gradient(-90deg, #8623FC, #453DEA);
//
// label {
// color: #fff;
// }
//}
}
}
.hz-title{
font-size: 20px;
font-weight: 400;
color: #000;
margin-top:20px;
margin-bottom: 10px;
}
.zh-margin{
font-weight: bold;
font-size: 36px;
color: #FF8124;
margin-right: 30px;
}
.hz-p{
font-size: 16px;
color: #4C5359;
font-weight: 400;
}
:deep(.el-calendar__header) {
background: linear-gradient(90deg, #8623FC, #453DEA);
height: 50px;
line-height: 50px;
}
.canBtn{
color: #453DEA;
border-radius: 2px;
width: 22px;
height: 22px;
line-height: 26px;
text-align: center;
background-color: #fff;
margin: 0 16px 5px 16px;
cursor:pointer
}
</style>
src/viewsPc/booking/makeUp.vue
......@@ -13,65 +13,37 @@
</div>
<div class="box" v-loading="loading">
<el-row style="width: 100%" :gutter="20">
<el-col :span="8" v-for="(h,index) in list" class="mb20" @click="goDetail(h)">
<el-col :span="8" v-for="(h,index) in list" class="mb20" >
<el-card style="position: relative;">
<img class="w100 hz-img" :src="fillImgUrl(h.photos?.split(',')[0])"/>
<img class="w100 hz-img" :src="fillImgUrl(h.cover)"/>
<div class="yuyue">
30 个时间段可预约
{{ h.counts }} {{ language==0?'个时间段可预约':"time slots can be reserved" }}
</div>
<div class="hz-text">MANGO美妆工作室</div>
<el-row style="width: 100%;margin-bottom: 10px" :gutter="5" justify='space-between'>
<div class="hz-tag tag1">专业团体</div>
<div class="hz-tag tag2">金牌化妆师</div>
<div class="hz-tag tag3">大牌化妆品</div>
<div class="hz-tag tag4">连锁</div>
</el-row>
<div class="hz-text">{{h.name}}</div>
<div class="tagbox esp">
<span v-for="(t,index) in h.label?.split('，')" v-show="index<4">{{t}}</span>
</div>
<div class="hz-row">
<el-icon size="16" style="position: relative;top: 2px" color="#929AA0"><LocationFilled /></el-icon>
成立 <span class="sign">6</span>年 |
<el-icon size="16" style="position: relative;top: 2px" color="#929AA0"><LocationFilled /></el-icon><span class="sign">12</span>名化妆师
<el-icon size="16" style="position: relative;top: 2px" color="#929AA0"><OfficeBuilding /></el-icon>
{{ language==0?'成立':'Established for'}}
<span class="sign">{{ h.ageLimit }}</span>{{language==0?'年':'years'}} |
<el-icon size="16" style="position: relative;top: 2px" color="#929AA0"><UserFilled /></el-icon><span class="sign">{{ h.dresserLimit }}</span>{{language==0?'名化妆师':'makeup artists' }}
</div>
<div class="hz-row">
<el-icon size="16" style="position: relative;top: 2px" color="#929AA0"><LocationFilled /></el-icon>
1535652837
<el-icon size="16" style="position: relative;top: 2px" color="#929AA0"><PhoneFilled /></el-icon>
{{ h.contact }}
</div>
<div class="hz-row">
<el-icon size="16" style="position: relative;top: 2px" color="#929AA0"><LocationFilled /></el-icon>
{{h.address}}
{{h.remarks}}
</div>
<div style="text-align: center">
<el-button class="btn-lineG w200px" round type="primary" size="large">{{ language==0?'立即预约':'Select' }} ⇀</el-button>
<el-button class="btn-lineG w200px" round type="primary" size="large" @click="goDetail(h)">{{ language==0?'立即预约':'Select' }} ⇀</el-button>
</div>
</el-card>
</el-col>
</el-row>
<!-- <el-card v-for="(h,index) in list" class="mb20" @click="goDetail(h)">-->
<!-- &lt;!&ndash; 酒店列表&ndash;&gt;-->
<!-- <el-row class="hotel" align="middle" :gutter="20">-->
<!-- <el-col :span="6">-->
<!-- <img class="w100" :src="fillImgUrl(h.photos?.split(',')[0])"/>-->
<!-- </el-col>-->
<!-- <el-col :span="10">-->
<!-- <h3 class="esp">{{h.name}}</h3>-->
<!-- <div class="starBox">-->
<!-- <img v-for="i in Number(h.starLevel||0)" src="@/assets/booking/star.png">-->
<!-- </div>-->
<!-- <div class="tagbox">-->
<!-- <span v-for="(t,index) in h.label?.split('，')" v-show="index<4">{{t}}</span>-->
<!-- <a v-show="h.label?.split('，').length>4">{{ language==0?'更多':'MORE' }} ></a>-->
<!-- </div>-->
<!-- <p class="esp addr">-->
<!-- <el-icon size="16" style="position: relative;top: 2px" color="#929AA0"><LocationFilled /></el-icon>-->
<!-- {{h.address}}-->
<!-- </p>-->
<!-- </el-col>-->
<!-- <el-col :span="8" class="text-right">-->
<!-- <div class="price">¥<span>{{ h.price }}</span><i v-if="language==0">起</i></div>-->
<!-- <el-button class="btn-lineG w200px" round type="primary" size="large">{{ language==0?'立即预约':'Select' }} ⇀</el-button>-->
<!-- </el-col>-->
<!-- </el-row>-->
<!-- </el-card>-->
<el-empty v-show="!loading&&list.length==0" :image="`/img/order_no.png`" :image-size="228" description="" />
<div style="height: 50px"></div>
</div>
......@@ -84,6 +56,7 @@ import {onMounted} from "@vue/runtime-core"
import * as booking from "@/apiPc/booking"
import {useRouter,useRoute} from "vue-router";
import {useStorage} from "@vueuse/core/index";
import {getMakeUpList} from "@/apiPc/booking";
const router = useRouter()
const route = useRoute()
const language= useStorage('language',0)
......@@ -100,7 +73,7 @@ onMounted(()=>{
function getList() {
loading.value = true
booking.getHotelList(query.value).then(res=>{
booking.getMakeUpList(query.value).then(res=>{
list.value = res.rows
loading.value = false
}).catch(e=>{
......@@ -112,26 +85,13 @@ function goDetail(item) {
name:'makeUpDetail',
params:{
id:item.id,
},
query:{
id:item.id
}
})
}
</script>
<style scoped lang="scss">
.hotel{
h3{margin: 0 0 20px;}
img.w100{object-fit: cover;aspect-ratio: 16/9}
.addr{font-size: 16px;color: #929AA0;font-weight: 400;}
.price{margin: 0 0 25px;
color: #FF8124;font-size: 18px;
span{font-size: 24px;margin: 0 8px;font-family: 'DINAlternate-Bold';font-weight: 600;}
i{font-style: normal;color: #929AA0;}
}
}
.banner{height: 140px;background-size: cover;text-align: center;
background: url("@/assets/booking/hz_bg.png") center;display: flex;align-items: center;
justify-content: center;
......@@ -143,15 +103,14 @@ function goDetail(item) {
.no-border{border: none;background: #F5F7F9;
:deep(.el-input__wrapper){border: none;box-shadow: none;background: #F5F7F9;}
}
.starBox{
img{display: inline-block;margin-right: 4px}
}
.hz-img{
height: 218px;
width: 100%;
border-radius: 2px;
border: 0;
margin-bottom: 20px;
object-fit: cover;
}
.yuyue{
......@@ -212,12 +171,12 @@ function goDetail(item) {
//}
//.tagbox{margin: 15px 0;
// a{color: #AFB5B9;font-size: 12px;}
// span{border-radius: 13px;font-size: 12px;padding: 4px 10px;margin-right:10px;font-weight: 400;}
// span:nth-child(4n){background: rgba(50, 177, 108, 0.2);color: rgba(50, 177, 108, 1);}
// span:nth-child(4n+1){background:rgba(243, 152, 0, 0.2);color: rgba(243, 152, 0, 1);}
// span:nth-child(4n+2){background: rgba(0, 160, 233, 0.2);color: rgba(0, 160, 233, 1);}
// span:nth-child(4n+3){background: rgba(247, 64, 166, 0.2);color:rgba(247, 64, 166, 1);}
//}
.tagbox{margin: 10px 0;
a{color: #AFB5B9;font-size: 12px;}
span{border-radius: 13px;font-size: 12px;padding: 3px 10px;margin-right:10px;font-weight: 400;}
span:nth-child(4n){background: rgba(50, 177, 108, 0.2);color: rgba(50, 177, 108, 1);}
span:nth-child(4n+1){background:rgba(243, 152, 0, 0.2);color: rgba(243, 152, 0, 1);}
span:nth-child(4n+2){background: rgba(0, 160, 233, 0.2);color: rgba(0, 160, 233, 1);}
span:nth-child(4n+3){background: rgba(247, 64, 166, 0.2);color:rgba(247, 64, 166, 1);}
}
</style>
......
src/viewsPc/booking/makeUpDetail.vue
......@@ -3,298 +3,199 @@
<div class="box">
<el-card>
<el-row>
<div class="zh-title">Mango美妆工作室</div>
<div class="hz-tag tag1">专业团体</div>
<div class="hz-tag tag2">金牌化妆师</div>
<div class="hz-tag tag3">大牌化妆品</div>
<div class="hz-tag tag4">连锁</div>
<div class="zh-title">{{ form.name }}</div>
<div class="tagbox esp">
<span v-for="(t,index) in form.label?.split('，')" v-show="index<4">{{t}}</span>
</div>
</el-row>
<br>
<el-row class="hz-row">
<el-icon size="16" style="position: relative;top: 2px" color="#929AA0">
<LocationFilled/>
<OfficeBuilding/>
</el-icon>
成立 <span class="sign">6</span>年 |
{{ language==0?'成立':'Established for'}} <span class="sign">6</span>{{language==0?'年':'years'}} &nbsp;&nbsp;&nbsp;&nbsp; |&nbsp;&nbsp;&nbsp;&nbsp;
<el-icon size="16" style="position: relative;top: 2px" color="#929AA0">
<LocationFilled/>
<UserFilled/>
</el-icon>
名化妆师 |
<span class="sign"> {{ form.dresserLimit }}</span>{{language==0?'名化妆师':'makeup artists' }}&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
<el-icon size="16" style="position: relative;top: 2px" color="#929AA0">
<LocationFilled/>
<PhoneFilled/>
</el-icon>
<span class="sign">12</span>名化妆师 |
<span style="padding-top: 2px">
{{ form.contact }}
</span>
&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
<el-icon size="16" style="position: relative;top: 2px" color="#929AA0">
<LocationFilled/>
</el-icon>
<span class="sign">12</span>名化妆师
{{form.rearks}}
</el-row>
</el-card>
<br>
<el-row justify='space-between' style="padding: 10px">
<el-row justify='space-between'>
<div class="img-header" style="width: 40%">
<div class="card">
<el-image src="@/assets/dance/banner.png" fit="cover" :preview-src-list="form?.photos?.split(',')"/>
<!-- <img src="@/assets/dance/banner.png" alt="">-->
<el-image style="width: 100%" :src="fillImgUrl(form.photos)?.split(',')[0]" fit="none" :preview-src-list="form?.photos?.split(',')"/>
</div>
</div>
<div class="img-header" style="width: 20%">
<el-row style="height: 50%;">
<el-col :span="12">
<div class="card">
<img src="@/assets/dance/banner.png" alt="">
<el-image :src="fillImgUrl(form.photos)?.split(',')[0] " fit="cover" :preview-src-list="form?.photos?.split(',')"/>
</div>
</el-col>
<el-col :span="12">
<div class="card">
<img src="@/assets/dance/banner.png" alt="">
<el-image :src="fillImgUrl(form.photos)?.split(',')[0] " fit="cover" :preview-src-list="form?.photos?.split(',')"/>
</div>
</el-col>
</el-row>
<div style="height: 50%;">
<div class="card">
<img src="@/assets/dance/banner.png" alt="">
<el-image :src="fillImgUrl(form.photos)?.split(',')[0] " fit="cover" :preview-src-list="form?.photos?.split(',')"/>
</div>
</div>
</div>
<div class="img-header" style="width: 20%">
<div class="card">
<img src="@/assets/dance/banner.png" alt="">
<el-image :src="fillImgUrl(form.photos)?.split(',')[0] " fit="cover" :preview-src-list="form?.photos?.split(',')"/>
</div>
</div>
<div class="img-header" style="width: 20%">
<el-row style="height: 50%">
<el-col :lg="12" :md="8" :sm="12" :xs="24" >
<div class="card">
<img src="@/assets/dance/banner.png" alt="">
<el-image :src="fillImgUrl(form.photos)?.split(',')[0] " fit="cover" :preview-src-list="form?.photos?.split(',')"/>
</div>
</el-col>
<el-col :span="12">
<div class="card">
<img src="@/assets/dance/banner.png" alt="">
<el-image :src="fillImgUrl(form.photos)?.split(',')[0] " fit="cover" :preview-src-list="form?.photos?.split(',')"/>
</div>
</el-col>
</el-row>
<div style="height: 50%;">
<div class="card">
<img src="@/assets/dance/banner.png" style="width: 100%;height: 100%" alt="">
<div class="img-hover">
查看相册 (12) >
</div>
<el-image :src="fillImgUrl(form.photos)?.split(',')[0] " fit="cover" :preview-src-list="form?.photos?.split(',')"/>
<!-- <div class="img-hover">-->
<!-- 查看相册 (12) >-->
<!-- </div>-->
</div>
</div>
</div>
</el-row>
<br>
<br>
<br>
<el-card :body-style="{'padding':'20px 20px'}">
<home-calendar/>
<MakeUpCalendar></MakeUpCalendar>
</el-card>
<el-card class="mt30" v-loading="loading">
<el-row v-if="form" class="hotel" align="middle" :gutter="20">
<!-- <el-col :span="6">-->
<!-- <img class="w100" :src="fillImgUrl(form.photos?.split(',')[0])"/>-->
<!-- </el-col>-->
<el-col :span="16">
<h3 class="esp flex">{{ form?.name }}
<div class="starBox">
<img v-for="i in Number(form?.starLevel||0)" src="@/assets/booking/star.png">
</div>
</h3>
<div class="tagbox">
<span v-for="(t,index) in form?.label?.split('，')" v-show="index<4">{{ t }}</span>
<a v-show="form?.label?.split('，').length>4">{{ language == 0 ? '更多' : 'MORE' }} ></a>
</div>
<div>
<el-icon></el-icon>
<span class="mr10">{{ language == 0 ? '入住时间' : 'Check-in' }}：{{ form?.checkInTime }}</span>
<span>{{ language == 0 ? '离店时间' : 'Check-out' }}：{{ form?.checkOutTime }}</span>
</div>
<div v-if="form?.introduction" class="flex esp">
<el-icon></el-icon>
{{ language == 0 ? '酒店简介' : 'Introduction' }}：<span v-html="form.introduction.toString()"></span>
</div>
<!-- <p class="esp addr">-->
<!-- <el-icon size="16" style="position: relative;top: 2px" color="#929AA0"><LocationFilled /></el-icon>-->
<!-- {{form?.address}}-->
<!-- </p>-->
</el-col>
<el-col :span="8" class="text-right">
<div class="mapBox">
<div id="map"></div>
</div>
</el-col>
</el-row>
<el-empty v-else :image="`/img/order_no.png`" :image-size="228" description=""/>
</el-card>
<!-- <div class="mt30">-->
<!-- <el-row :gutter="20">-->
<!-- <el-col v-for="(p,index) in form?.photos?.split(',')" :span="index==0?12:6">-->
<!-- <div class="imgbox hotelImg">-->
<!-- <img :src="fillImgUrl(p)">-->
<!-- </div>-->
<!-- </el-col>-->
<!-- </el-row>-->
<!-- </div>-->
<!-- <el-card class="mt30 mb60">-->
<!-- <div class="lineHead">-->
<!-- <ul>-->
<!-- <li>{{ language == 0 ? '房型选择' : 'Available Rooms' }}</li>-->
<!-- </ul>-->
<!-- </div>-->
<!-- <div>-->
<!-- <div v-for="(r,index) in roomList" :key="index" class="room">-->
<!-- <el-row :gutter="30" align="middle">-->
<!-- <el-col :span="4">-->
<!-- <div class="roomImg">-->
<!-- <img :src="fillImgUrl(r.photo?.split(',')[0])">-->
<!-- </div>-->
<!-- </el-col>-->
<!-- <el-col :span="14">-->
<!-- <h3 class="name">{{ r.roomType }}</h3>-->
<!-- <el-row :gutter="10">-->
<!-- <el-col :span="8">{{ r.area }}m²</el-col>-->
<!-- <el-col :span="8" v-show="r.windowFlag==1"> {{ language == 0 ? '有窗' : 'With windows' }}</el-col>-->
<!-- <el-col :span="8" v-show="r.windowFlag==0"> {{ language == 0 ? '无窗' : 'Windowless' }}</el-col>-->
<!-- <el-col :span="8" v-show="r.bathroomFlag==1"> {{ language == 0 ? '热水洗浴' : 'Shower' }}</el-col>-->
<!-- &lt;!&ndash; <text v-show="r.bathroomFlag==0"> </text> &ndash;&gt;-->
<!-- <el-col :span="8" v-show="r.addBedFlag==1"> {{ language == 0 ? '允许加床' : 'Extra bed' }}</el-col>-->
<!-- <el-col :span="8" v-if="r.breakfastNum&&r.breakfastNum > '0'">-->
<!-- {{ r.breakfastNum }}{{ language == 0 ? '份早餐' : ' breakfasts' }}-->
<!-- </el-col>-->
<!-- <el-col :span="8" v-else>{{ language == 0 ? '无早餐' : 'No breakfast' }}</el-col>-->
<!-- </el-row>-->
<!-- </el-col>-->
<!-- <el-col :span="3">-->
<!-- <div class="price">{{-->
<!-- language == 0 ? '¥' : '€'-->
<!-- }}<span>{{ language == 0 ? r.roomPrice : r.roomPriceEn }}</span></div>-->
<!-- </el-col>-->
<!-- <el-col :span="3">-->
<!-- <div class="bg-lineg" v-if="language==0" @click="goOrder(r)">-->
<!-- 订-->
<!-- <div>{{ language == 0 ? '在线付' : 'Online' }}</div>-->
<!-- </div>-->
<!-- <el-button v-else class="btn-lineG w100" round type="primary" @click="goOrder(r)">Select</el-button>-->
<!-- &lt;!&ndash; <div class="text-center text-primary mt10 fontsize14 pointer" v-if="language == 0">&ndash;&gt;-->
<!-- &lt;!&ndash; 剩余 {{(r.roomCount - (r.useCount||0)).toFixed()}} 间&ndash;&gt;-->
<!-- &lt;!&ndash; </div>&ndash;&gt;-->
<!-- &lt;!&ndash; <div class="text-center text-primary mt10 fontsize14" v-else>&ndash;&gt;-->
<!-- &lt;!&ndash; {{(r.roomCount - (r.useCount||0)).toFixed()}} Remaining rooms&ndash;&gt;-->
<!-- &lt;!&ndash; </div>&ndash;&gt;-->
<!-- </el-col>-->
<!-- </el-row>-->
<!-- </div>-->
<!-- <el-empty v-if="roomList.length == 0" :image="`/img/order_no.png`" :image-size="228" description=""/>-->
<!-- </div>-->
<!-- </el-card>-->
</div>
</div>
</template>
<script setup lang="ts">
<script setup >
import {useRouter} from "vue-router";
import {ref, reactive, onMounted} from "vue";
import {useRoute} from "vue-router";
import {getHotelById, getHotelRooms} from "@/apiPc/booking"
import * as booking from "@/apiPc/booking"
import {useStorage} from "@vueuse/core/index";
import useUserStore from "@/store/modules/user";
import HomeCalendar from "/@/viewsPc/components/homeCalendar.vue";
import MakeUpCalendar from "@/viewsPc/booking/component/makeUpCalendar.vue";
const user = useUserStore().user
const language = useStorage('language', 0)
const router = useRouter()
const route = useRoute()
const form = ref({})
const query = ref({
hotelId: route.query.id
activityId: route.params.cptId,
studioId:route.params.id
})
const loading = ref(false)
const roomList = ref([])
const map = ref(null)
onMounted(() => {
// getData()
getData()
})
function getData() {
loading.value = true
getHotelById(route.params.hotelId).then(res => {
booking.makeUpDetail(query.value).then(res => {
loading.value = false
form.value = res.data
initMap()
// console.log(res)
}).catch(err => {
console.log(err)
})
query.value.hotelId = route.query.id
getHotelRooms(query.value).then(res => {
roomList.value = res.rows
})
// query.value.hotelId = route.query.id
// getHotelRooms(query.value).then(res => {
// roomList.value = res.rows
// })
}
function initMap() {
const TMap = (window as any).TMap
var center = new TMap.LatLng(form.value.latitude, form.value.longitude);//设置中心点坐标'
var map = new TMap.Map("map", {
center: center,//设置地图中心点坐标
zoom: 17, //设置地图缩放级别
});
var infoWindowLocation = new TMap.LatLng(form.value.latitude, form.value.longitude);//创建一个坐标
//创建InfoWindow实例，并进行初始化
var infowindow = new TMap.InfoWindow({
content: form.value.address, //信息窗口内容
position: infoWindowLocation,//显示信息窗口的坐标
map: map,
offset: {x: 0, y: -32}
});
infowindow.close();
var marker = new TMap.MultiMarker({
map: map,
//样式定义
styles: {
"myStyle": new TMap.MarkerStyle({
"anchor": {x: 16, y: 32}
})
},
//点标记数据数组
geometries: [{
"id": "1", //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
// "styleId": 'myStyle', //指定样式id
"position": new TMap.LatLng(form.value.latitude, form.value.longitude), //点标记坐标位置
"properties": {//自定义属性
"title": form.value.name
}
}
]
})
marker.on("click", function (evt) {
//设置infoWindow
infowindow.open(); //打开信息窗
infowindow.setPosition(evt.geometry.position);//设置信息窗位置
})
}
function goOrder(room) {
if (!user) {
useUserStore().setReLogin()
return
}
router.push({
name: 'hotelOrder',
params: {
roomId: room.id
},
query: {
room: encodeURIComponent(JSON.stringify(room)),
hotelName: form.value.name,
checkInTime: form.value.checkInTime
}
})
}
// function initMap() {
// const TMap = null
// var center = new TMap.LatLng(form.value.latitude, form.value.longitude);//设置中心点坐标'
// var map = new TMap.Map("map", {
// center: center,//设置地图中心点坐标
// zoom: 17, //设置地图缩放级别
// });
// var infoWindowLocation = new TMap.LatLng(form.value.latitude, form.value.longitude);//创建一个坐标
// //创建InfoWindow实例，并进行初始化
// var infowindow = new TMap.InfoWindow({
// content: form.value.address, //信息窗口内容
// position: infoWindowLocation,//显示信息窗口的坐标
// map: map,
// offset: {x: 0, y: -32}
// });
// infowindow.close();
// var marker = new TMap.MultiMarker({
// map: map,
// //样式定义
// styles: {
// "myStyle": new TMap.MarkerStyle({
// "anchor": {x: 16, y: 32}
// })
// },
// //点标记数据数组
// geometries: [{
// "id": "1", //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
// // "styleId": 'myStyle', //指定样式id
// "position": new TMap.LatLng(form.value.latitude, form.value.longitude), //点标记坐标位置
// "properties": {//自定义属性
// "title": form.value.name
// }
// }
// ]
// })
// marker.on("click", function (evt) {
// //设置infoWindow
// infowindow.open(); //打开信息窗
// infowindow.setPosition(evt.geometry.position);//设置信息窗位置
// })
// }
// function goOrder(room) {
// if (!user) {
// useUserStore().setReLogin()
// return
// }
// router.push({
// name: 'hotelOrder',
// params: {
// roomId: room.id
// },
// query: {
// room: encodeURIComponent(JSON.stringify(room)),
// hotelName: form.value.name,
// checkInTime: form.value.checkInTime
// }
// })
// }
</script>
<style scoped lang="scss">
......@@ -394,12 +295,6 @@ function goOrder(room) {
}
}
.starBox {
img {
display: inline-block;
margin-right: 4px
}
}
.tagbox {
margin: 15px 0;
......@@ -450,33 +345,12 @@ function goOrder(room) {
}
}
.hotelImg {
border-radius: 10px;
overflow: hidden;
aspect-ratio: 16/9;
img {
object-fit: cover;
object-position: center;
width: 100%;
height: 100%;
}
}
.sign {
padding-top: 2px;
}
.img-header {
height: 270px;
img {
border-radius: 10px;
width: 100%;
height: 100%;
}
}
.card {
......
src/viewsPc/booking/makeUpOrder.vue 0 → 100644
<template>
<div>
<div class="box">
<el-card :body-style="{ padding: '0px' }" class="mt20">
<div slot="header">
<div class="bg-lineg">{{ language == 0 ? '化妆预约下单' : 'Make Up booking order' }}</div>
</div>
<el-card>
<div class='order-header'>
<div class="title">
Mango 美妆工作室
</div>
<el-row class="hz-row" >
<el-icon size="16" style="position: relative;top: 2px" color="#929AA0">
<LocationFilled/>
</el-icon>
成立 6 年 |
<el-icon size="16" style="position: relative;top: 2px" color="#929AA0">
<LocationFilled/>
</el-icon>
12 名化妆师 |
<el-icon size="16" style="position: relative;top: 2px" color="#929AA0">
<LocationFilled/>
</el-icon>
1535891241234 |
<el-icon size="16" style="position: relative;top: 2px" color="#929AA0">
<LocationFilled/>
</el-icon>
江苏省1412341234
</el-row>
<hr>
<el-row class="table">
<div style="margin-right: 50px">
<el-image style="width:55px;height: 70px " src="" fit="cover" />
</div>
<el-row style="flex: 1">
<div style="flex: 1">
<div style="margin-bottom: 20px;">预约日期&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="span">2024.03.11</span></div>
<div>套餐名称&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="span">A套餐</span></div>
</div>
<div style="flex: 1">
<div style="margin-bottom: 20px">预约时间&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="span">09:00~12:00</span> </div>
<div>服务&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="span">上门化妆</span></div>
</div>
<div style="flex: 1">
<div style="margin-bottom: 20px">化妆项目&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="span">化妆x1 发型x1</span></div>
<div >价格&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="sign">￥450</span></div>
</div>
</el-row>
</el-row>
</div>
<br>
<div class="yu">预约信息</div>
<br>
<div class="form-order">
<el-form :model="form" style="width: 600px" :label-width="language==0?'140px':'160px'" :rules="rules" ref="formRef">
<el-form-item :label="language==0?'预约时间':'Appointment Time'" required>
<el-date-picker
@change="getDaysBetween"
v-model="rzRange"
type="daterange"
:disabled-date="disabledDateRZ"
:placeholder="language==0?'选择日期':'Select date'" format="YYYY-MM-DD"
value-format="YYYY-MM-DD"/>
</el-form-item>
<el-form-item :label="language==0?'预约数量':'Appointment Time'" required>
<el-input-number v-model="form.number" :min="1" :max="10" label="描述文字"/>
</el-form-item>
<el-form-item :label="language==0?'预约联系人':'Appointment Time'" required>
<el-input v-model="form.number" :min="1" :max="10" label="描述文字"/>
</el-form-item>
<el-form-item :label="language==0?'联系电话':'Appointment Time'" required>
<el-input v-model="form.number" :min="1" :max="10" label="描述文字"/>
</el-form-item>
<el-form-item :label="language==0?'备注':'Appointment Time'" required>
<el-input type="textarea" :rows="3" v-model="form.number" :min="1" :max="10" label="描述文字"/>
</el-form-item>
</el-form>
</div>
</el-card>
<!-- {{room}}-->
<!-- <el-row class="pd20" >-->
<!--&lt;!&ndash; <el-col :span="14">&ndash;&gt;-->
<!--&lt;!&ndash; <div class="border-info">&ndash;&gt;-->
<!--&lt;!&ndash; <h3>{{ hotelName }}</h3>&ndash;&gt;-->
<!--&lt;!&ndash; <div class="roomType">{{ room.roomType }}</div>&ndash;&gt;-->
<!--&lt;!&ndash; <div class="room">&ndash;&gt;-->
<!--&lt;!&ndash; <span>{{ room.bedType }}</span>&ndash;&gt;-->
<!--&lt;!&ndash; <span>{{ ' | ' + room.area }}m²</span>&ndash;&gt;-->
<!--&lt;!&ndash; <span>{{ ' | ' + room.occupantsNum }}{{ language == 0 ? '人入住' : ' people' }}</span>&ndash;&gt;-->
<!--&lt;!&ndash; <span v-show="room.breakfastFlag=='1'">{{ ' | ' + room.breakfastNum }} {{
&ndash;&gt;-- >
< !-- &lt; ! & ndash; language == 0 ? '份早餐' : 'breakfasts' & ndash;&gt;-- >
< !-- &lt; ! & ndash;
}}</span>&ndash;&gt;-->
<!--&lt;!&ndash; <span v-show="room.breakfastFlag=='0'"> | {{ language == 0 ? '无早餐' : 'No breakfast' }}</span>&ndash;&gt;-->
<!--&lt;!&ndash; <span v-show="room.bathroomFlag=='1'"> | {{ language == 0 ? '热水洗浴' : 'Shower' }}</span>&ndash;&gt;-->
<!--&lt;!&ndash; <span v-show="room.windowFlag=='1'"> | {{ language == 0 ? '有窗' : 'With windows' }}</span>&ndash;&gt;-->
<!--&lt;!&ndash; <span v-show="room.addBedFlag=='1'"> | {{ language == 0 ? '允许加床' : 'Extra bed' }}</span>&ndash;&gt;-->
<!--&lt;!&ndash; </div>&ndash;&gt;-->
<!--&lt;!&ndash; </div>&ndash;&gt;-->
<!--&lt;!&ndash; <div class="leftboderTT">{{ language == 0 ? '预约信息' : 'Reservation information' }}</div>&ndash;&gt;-->
<!--&lt;!&ndash; <div class="border-rr mt20 pd20">&ndash;&gt;-->
<!--&lt;!&ndash; <el-form :model="form" :label-width="language == 0 ?'100':'160'" :rules="rules" ref="formRef">&ndash;&gt;-->
<!--&lt;!&ndash; <el-form-item :label="language==0?'入住日期':'Check-in date'" required>&ndash;&gt;-->
<!--&lt;!&ndash; <el-date-picker @change="getDaysBetween"&ndash;&gt;-->
<!--&lt;!&ndash; v-model="rzRange"&ndash;&gt;-->
<!--&lt;!&ndash; type="daterange" :disabled-date="disabledDateRZ"&ndash;&gt;-->
<!--&lt;!&ndash; :placeholder="language==0?'选择日期':'Select date'" format="YYYY-MM-DD"&ndash;&gt;-->
<!--&lt;!&ndash; value-format="YYYY-MM-DD"/>&ndash;&gt;-->
<!--&lt;!&ndash; <div class="tip" v-if="lform.hqStart">{{ language==0?'可订日期':'Available date' }}：{{ lform.hqStart.slice(0, 10) }} ~ {{ lform.hqEnd.slice(0, 10) }}</div>&ndash;&gt;-->
<!--&lt;!&ndash; &lt;!&ndash; :picker-options="pickerOptions"&ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash; </el-form-item>&ndash;&gt;-->
<!--&lt;!&ndash; <el-form-item :label="language==0?'房间数':'Rooms'" required prop="roomNum">&ndash;&gt;-->
<!--&lt;!&ndash; <el-input-number v-model="form.roomNum" :min="0" :max="canOrderNum" @change="changeRoomNum"/>&ndash;&gt;-->
<!--&lt;!&ndash; <div class="red ml20" v-if="rzRange[1]">&ndash;&gt;-->
<!--&lt;!&ndash; <span v-if="language == 0">剩余房间数:{{ canOrderNum }}</span>&ndash;&gt;-->
<!--&lt;!&ndash; <span v-else>{{ canOrderNum }} Remaining rooms</span>&ndash;&gt;-->
<!--&lt;!&ndash; </div>&ndash;&gt;-->
<!--&lt;!&ndash; </el-form-item>&ndash;&gt;-->
<!--&lt;!&ndash; <el-form-item v-for="(n,index) in form.roomNum" :key="index" :label="language==1?`Name${index+1}`:`入住人${index+1}`" required>&ndash;&gt;-->
<!--&lt;!&ndash; <el-input v-model="rzUserArr[index]" :placeholder="language==0?'每间填一位住客姓名':'Each room fill in one name of the guest'"/>&ndash;&gt;-->
<!--&lt;!&ndash; </el-form-item>&ndash;&gt;-->
<!--&lt;!&ndash; <el-form-item :label="language==0?'预计到店':'Expected check-in'" required>&ndash;&gt;-->
<!--&lt;!&ndash; <el-select v-model="form.ddDate"&ndash;&gt;-->
<!--&lt;!&ndash; :placeholder="language==0?'请选择预计到店时间':'Please select the expected check-in time'">&ndash;&gt;-->
<!--&lt;!&ndash; <el-option&ndash;&gt;-->
<!--&lt;!&ndash; v-for="item in ddDateArr"&ndash;&gt;-->
<!--&lt;!&ndash; :key="item.value"&ndash;&gt;-->
<!--&lt;!&ndash; :label="item.label"&ndash;&gt;-->
<!--&lt;!&ndash; :value="item.value"&ndash;&gt;-->
<!--&lt;!&ndash; />&ndash;&gt;-->
<!--&lt;!&ndash; </el-select>&ndash;&gt;-->
<!--&lt;!&ndash; </el-form-item>&ndash;&gt;-->
<!--&lt;!&ndash; <el-form-item :label="language==0?'联系电话':'Contact phone'" required prop="phone">&ndash;&gt;-->
<!--&lt;!&ndash; <el-input v-model="form.phone"/>&ndash;&gt;-->
<!--&lt;!&ndash; </el-form-item>&ndash;&gt;-->
<!--&lt;!&ndash; <div v-if="room.addBedFlag=='1'">&ndash;&gt;-->
<!--&lt;!&ndash; <el-form-item :label="language==0?'是否加床':'Extra bed'" required>&ndash;&gt;-->
<!--&lt;!&ndash; <el-radio-group v-model="form.isAddbed" @change="changeAddBed">&ndash;&gt;-->
<!--&lt;!&ndash; <el-radio value="1">{{ language == 0 ? '是' : 'Yes' }}</el-radio>&ndash;&gt;-->
<!--&lt;!&ndash; <el-radio value="0">{{ language == 0 ? '否' : 'No' }}</el-radio>&ndash;&gt;-->
<!--&lt;!&ndash; </el-radio-group>&ndash;&gt;-->
<!--&lt;!&ndash; </el-form-item>&ndash;&gt;-->
<!--&lt;!&ndash; <el-form-item v-if="form.isAddbed=='1'" :label="language==0?'加床张数':'Extra bed num'" required>&ndash;&gt;-->
<!--&lt;!&ndash; <el-input-number v-model="form.addNum" :min="0" :max="form.roomNum" @change="changeBed"/>&ndash;&gt;-->
<!--&lt;!&ndash; <div class="tip" v-if="form.isAddbed=='1'">*&ndash;&gt;-->
<!--&lt;!&ndash; <span v-if="language == 0">一个房间最多加一张床</span>&ndash;&gt;-->
<!--&lt;!&ndash; <span v-else>A room can only add one bed</span>&ndash;&gt;-->
<!--&lt;!&ndash; </div>&ndash;&gt;-->
<!--&lt;!&ndash; </el-form-item>&ndash;&gt;-->
<!--&lt;!&ndash; </div>&ndash;&gt;-->
<!--&lt;!&ndash; </el-form>&ndash;&gt;-->
<!--&lt;!&ndash; </div>&ndash;&gt;-->
<!--&lt;!&ndash; </el-col>&ndash;&gt;-->
<!--&lt;!&ndash; <el-col :span="10">&ndash;&gt;-->
<!--&lt;!&ndash; <div class="leftboderTT">{{ language == 0 ? '订单明细' : 'Order details' }}</div>&ndash;&gt;-->
<!--&lt;!&ndash; <div class="border-rr mt20 pd20 ccitemBox">&ndash;&gt;-->
<!--&lt;!&ndash; <label> {{ language == 0 ? '房费' : 'Room fee' }}&ndash;&gt;-->
<!--&lt;!&ndash; <span class="fr" v-if="language==0">{{
&ndash;&gt;-- >
< !-- &lt; ! & ndash; language == 0 ? '¥' : '€' & ndash;&gt;-- >
< !-- &lt; ! & ndash;
}}{{ (room.roomPrice * form.roomNum * choseRooms.length).toFixed(2) }}</span>&ndash;&gt;-->
<!--&lt;!&ndash; <span class="fr" v-else>{{
&ndash;&gt;-- >
< !-- &lt; ! & ndash; language == 0 ? '¥' : '€' & ndash;&gt;-- >
< !-- &lt; ! & ndash;
}}{{ (room.roomPriceEn * form.roomNum * choseRooms.length).toFixed(2) }}</span>&ndash;&gt;-->
<!--&lt;!&ndash; </label>&ndash;&gt;-->
<!--&lt;!&ndash; <div class="ccitem" v-for="(c, index) in choseRooms" :key="index" v-show="form.roomNum>0">&ndash;&gt;-->
<!--&lt;!&ndash; {{ c }}&ndash;&gt;-->
<!--&lt;!&ndash; <span v-if="language==0">{{ form.roomNum }}*{{ language == 0 ? '¥' : '€' }}{{ room.roomPrice }}</span>&ndash;&gt;-->
<!--&lt;!&ndash; <span v-else>{{ form.roomNum }}*{{ language == 0 ? '¥' : '€' }}{{ room.roomPriceEn }}</span>&ndash;&gt;-->
<!--&lt;!&ndash; </div>&ndash;&gt;-->
<!--&lt;!&ndash; <label v-if="form.isAddbed=='1'&&form.addNum>0">{{ language == 0 ? '加床费' : 'Extra bed fee' }}&ndash;&gt;-->
<!--&lt;!&ndash; <span class="fr" v-if="language==0">{{
&ndash;&gt;-- >
< !-- &lt; ! & ndash; language == 0 ? '¥' : '€' & ndash;&gt;-- >
< !-- &lt; ! & ndash;
}}{{ (room.bedPrice * form.addNum * choseRooms.length).toFixed(2) }}</span>&ndash;&gt;-->
<!--&lt;!&ndash; <span class="fr" v-else>{{
&ndash;&gt;-- >
< !-- &lt; ! & ndash; language == 0 ? '¥' : '€' & ndash;&gt;-- >
< !-- &lt; ! & ndash;
}}{{ (room.bedPriceEn * form.addNum * choseRooms.length).toFixed(2) }}</span>&ndash;&gt;-->
<!--&lt;!&ndash; </label>&ndash;&gt;-->
<!--&lt;!&ndash; <div v-if="form.isAddbed=='1'&&form.addNum>0" class="ccitem" v-for="(c, index) in choseRooms" :key="index">&ndash;&gt;-->
<!--&lt;!&ndash; {{ c }}&ndash;&gt;-->
<!--&lt;!&ndash; <span>{{ form.addNum }}*{{ language == 0 ? '¥' : '€' }}{{ language == 0 ?room.bedPrice:room.bedPriceEn}}</span>&ndash;&gt;-->
<!--&lt;!&ndash; </div>&ndash;&gt;-->
<!--&lt;!&ndash; <label>{{ language == 0 ? '共计' : 'Total' }}<span&ndash;&gt;-->
<!--&lt;!&ndash; class="fr bigMoney">{{ language == 0 ? '¥' : '€' }}{{ money }}</span></label>&ndash;&gt;-->
<!--&lt;!&ndash; </div>&ndash;&gt;-->
<!--&lt;!&ndash; </el-col>&ndash;&gt;-->
<!-- </el-row>-->
</el-card>
<el-card class="mt30">
<el-row justify="space-between" align="middle">
<el-col :span="12">
<label>{{ language == 0 ? '共计金额' : 'Total' }}：
<span class=" text-warning"> {{ language == 0 ? '¥' : '€' }}<span class="bigMoney">{{
money
}}</span></span>
</label>
</el-col>
<el-col :span="12" class="text-right">
<el-button type="primary" class="btn-lineG w200px" size="large" round @click="submit">
{{ language == 0 ? '确认付款' : 'Book Now' }}
</el-button>
</el-col>
</el-row>
</el-card>
<div style="height: 60px;"></div>
</div>
</div>
</template>
<script setup>
import {useRouter, useRoute} from "vue-router";
import {ref, reactive, onMounted} from "vue";
import {useStorage} from "@vueuse/core/index";
import {checkResidueRoom, getBaseInfoByActiveId, newsSubmitOrderHotel} from "@/apiPc/booking"
import dayjs from 'dayjs'
import {ElMessage, ElMessageBox} from "element-plus";
import useUserStore from "@/store/modules/user";
const user = useUserStore().user
const language = useStorage('language', 0)
const router = useRouter()
const route = useRoute()
const room = ref({})
const hotelName = ref('')
const canOrderNum = ref(0)
const lform = ref({})
const form = ref({
isAddbed: '0',
roomNum: 0,
addNum: 0,
ddDate: '14:00',
phone: user?.phonenumber || '',
})
const rzRange = ref([])
const rzUserArr = ref([])
const money = ref(0)
const choseRooms = ref([])
const ddDateArr = ref([
{
value: '07:00',
label: '07:00'
},
{
value: '08:00',
label: '08:00'
},
{
value: '09:00',
label: '09:00'
},
{
value: '10:00',
label: '10:00'
},
{
value: '11:00',
label: '11:00'
},
{
value: '12:00',
label: '12:00'
},
{
value: '13:00',
label: '13:00'
},
{
value: '14:00',
label: '14:00'
},
{
value: '15:00',
label: '15:00'
},
{
value: '16:00',
label: '16:00'
},
{
value: '17:00',
label: '17:00'
},
{
value: '18:00',
label: '18:00'
},
{
value: '19:00',
label: '19:00'
},
{
value: '20:00',
label: '20:00'
},
{
value: '21:00',
label: '21:00'
},
{
value: '22:00',
label: '22:00'
},
{
value: '23:00',
label: '23:00'
},
{
value: '00:00',
label: '00:00'
},
{
value: '01:00',
label: '01:00'
},
{
value: '02:00',
label: '02:00'
}
])
const rules = ref({})
let usedays = 0
onMounted(() => {
console.log(route.query)
room.value = JSON.parse(decodeURIComponent(route.query.room))
console.log(room.value)
hotelName.value = route.query.hotelName
money.value = 0
// initDays()
})
function initDays() {
getBaseInfoByActiveId(route.params.cptId).then(res => {
lform.value = res.data
// if(lform.value.hqStart){
// const today = dayjs()
// if(lform.value.hqStart.slice(0,10)<today.format('YYYY-MM-DD')){
// lform.value.hqStart = today.format('YYYY-MM-DD')
// }
// rzRange.value = [lform.value.hqStart.slice(0,10),lform.value.hqEnd.slice(0,10)]
// getDaysBetween(rzRange.value)
// }
// console.log(rzRange.value,lform.value.hqStart)
}).catch(err => {
console.log(err)
})
}
function disabledDateRZ(date) {
//判读今天大与form.value.hqStart
if (lform.value.hqStart) {
const today = dayjs().format('YYYY-MM-DD')
if (lform.value.hqStart < today) {
return !((date.getTime() >= dayjs(today).valueOf()) && (date.getTime() <= dayjs(lform.value.hqEnd).valueOf()))
} else {
return !((date.getTime() >= dayjs(lform.value.hqStart).valueOf()) && (date.getTime() <= dayjs(lform.value.hqEnd).valueOf()))
}
}
return true
}
function changeRoomNum(e) {
if (form.value.addNum > e) {
form.value.addNum = e
}
console.log(e)
rzUserArr.value.length = e
countMoney()
}
function changeAddBed(e) {
if (e == '0') {
form.value.addNum = 0
}
changeBed()
}
function changeBed() {
countMoney()
}
function checkreRooms() {
var obj = {
ahrId: room.value.id,
rzStart: rzRange.value[0],
rzEnd: rzRange.value[1]
}
checkResidueRoom(obj).then(res => {
canOrderNum.value = res.data.useCount
})
}
function getDaysBetween(e) {
console.log('入住时间arr', e, rzRange.value)
var d1 = Date.parse(e[0])
var d2 = Date.parse(e[1])
if (d1 == d2) {
usedays = 0
ElMessage.error(language == 0 ? '入住时间跨度需大于一天' : 'The duration of the stay must be more than one day.')
// console.trace()
rzRange.value = []
return
} else {
var days = (d2 - d1) / (1 * 24 * 60 * 60 * 1000);
usedays = days
}
countMoney()
var startTime = getDate(rzRange.value[0]);
var endTime = getDate(rzRange.value[1]);
var dateArr = [];
while ((endTime.getTime() - startTime.getTime()) > 0) {
var year = startTime.getFullYear();
var month = (startTime.getMonth() + 1).toString().length === 1 ? "0" + (parseInt(startTime.getMonth()
.toString(), 10) + 1) : (startTime.getMonth() + 1);
var day = startTime.getDate().toString().length === 1 ? "0" + startTime.getDate() : startTime.getDate();
dateArr.push(year + "-" + month + "-" + day);
startTime.setDate(startTime.getDate() + 1);
}
choseRooms.value = dateArr;
checkreRooms()
}
function getDate(datestr) {
var temp = datestr.split("-");
if (temp[1] === '01') {
temp[0] = parseInt(temp[0], 10) - 1;
temp[1] = '12';
} else {
temp[1] = parseInt(temp[1], 10) - 1;
}
//new Date()的月份入参实际都是当前值-1
var date = new Date(temp[0], temp[1], temp[2]);
return date
}
function countMoney() {
if (language.value == 0) {
money.value = ((room.value.roomPrice * form.value.roomNum * usedays) + (room.value.bedPrice * form.value
.addNum * usedays)).toFixed(2)
} else {
money.value = ((room.value.roomPriceEn * form.value.roomNum * usedays) + (room.value.bedPriceEn * form.value
.addNum * usedays)).toFixed(2)
}
// console.log(usedays,money.value)
}
function submit() {
if (!user) {
useUserStore().setReLogin()
return
}
if (usedays == 0) {
ElMessage.warning(language.value == 0 ? '入住时间跨度需大于一天' : 'Check-in time must be greater than one day')
return
}
if (form.value.roomNum == 0) {
ElMessage.warning(language.value == 0 ? '请选择房间数量' : 'Please select the number of rooms')
return
}
if (!form.value.phone) {
ElMessage.warning(language.value == 0 ? '请填写手机号' : 'Please fill in the phone number')
return
}
form.value.rzStart = rzRange.value[0]
form.value.rzEnd = rzRange.value[1]
let arr = []
for (var n of rzUserArr.value) {
if (n == '' || n == undefined) {
// '请填写入住人信息'
ElMessage.warning(language.value == 0 ? '请填写入住人信息' : 'Please fill in the check-in information')
return
} else {
arr.push(n)
}
}
form.value.rzUsers = arr.toString()
form.value.activeId = room.value.activityId
form.value.ahId = room.value.hotelId
form.value.ahrId = room.value.id
form.value.orderName = hotelName.value
form.value.roomName = room.value.roomType
form.value.roomPhoto = room.value.photo
var str = ''
var str2 = ''
if (language.value == 0) {
if (form.value.addNum && form.value.addNum > 0) {
str = `加床${form.value.addNum}张`
} else {
str = `未加床`
}
if (room.value.breakfastNum && room.value.breakfastNum > 0) {
str2 = `${room.value.breakfastNum}份早餐`
} else {
str2 = `无早餐`
}
form.value.room = `${form.value.roomNum} 间 · ${usedays}晚 · ${str} · ${str2}`
console.log(form.value.room)
}
if (language.value == 1) {
if (form.value.addNum && form.value.addNum > 0) {
str = `have ${form.value.addNum} extra bed`
} else {
str = `No extra bed`
}
if (room.value.breakfastNum && room.value.breakfastNum > 0) {
str2 = `${room.value.breakfastNum} breakfast`
} else {
str2 = `No breakfast`
}
form.value.room = `${form.value.roomNum} rooms · ${usedays} night·${str}·${str2}`
console.log(form.value.room)
}
// 提交确认
ElMessageBox.confirm(language.value == 0 ? '确认提交订单吗？' : 'Confirm to submit the order?', {
confirmButtonText: language.value == 0 ? '确定' : 'Confirm',
cancelButtonText: language.value == 0 ? '取消' : 'Cancel',
type: 'warning'
}).then(() => {
newsSubmitOrderHotel(form.value).then(res => {
if (res.data) {
if (res.data.roomNum == -100) {
ElMessage.warning(language.value == 0 ? '剩余房间数不足' : 'The remaining number of rooms is insufficient')
checkreRooms()
} else {
//去付钱
router.push({
name: 'bookingPay',
query: {
orderId: res.data.orderId,
money: res.data.total,
type: 'hotel'
}
})
}
} else {
ElMessage.warning(language.value == 0 ? '无可预订的房间' : 'No rooms available to book')
}
}).catch(err => {
ElMessage.warning(language.value == 0 ? '无可预订的房间' : 'No rooms available to book')
})
})
}
</script>
<style scoped lang="scss">
.bigMoney {
font-size: 36px !important;
font-family: 'DIN Alternate';
font-weight: bold;
}
.bg-lineg {
height: 40px;
line-height: 40px;
font-size: 18px;
text-align: center;
}
.leftboderTT {
font-weight: 600;
font-size: 16px;
color: #453DEA;
}
.order-header{
padding:22px 33px 0 22px;
border: 1px solid #453DEA;
background-color: rgba(69,61,234,0.04);
.title{
font-weight: 500;
font-size: 24px;
color: #000000;
margin-bottom: 10px;
}
}
.border-rr {
border-radius: 5px;
border: 1px solid #DCDFE6;
}
.ccitemBox {
overflow: auto;
label {
margin: 10px 0;
display: block;
min-height: 30px;
span {
color: #FF8124;
font-family: DIN Alternate;
font-size: 24px;
}
}
}
.red {
color: #FF8124;
}
.tip {
font-size: 14px;
color: #666;
padding: 0 10px;
}
.form-order{
border: 1px solid #DCDFE6;
padding: 23px 0;
}
.yu{
font-size: 16px;
color: #453DEA;
border-left: 8px solid #453DEA;
padding-left: 10px;
font-weight: 600;
}
.table{
font-size: 14px;
color: #000;
font-weight: 400;
padding: 19px 0;
.span{
color: #4C5359;
}
}
</style>
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!