Skip to content

jijin / dance-pc

Go to a project
Toggle navigation
Toggle navigation pinning
136529c9 by zhangmeng
Options

化妆

1 parent 864e02a7
Inline Side-by-side
Showing 3 changed files with 282 additions and 217 deletions
src/viewsPc/booking/component/makeUpCalendar.vue
<template>
<div >
<div>
<el-calendar v-model="currentDate" :range="calendarRange">
<template #header="{date}">
<el-row style="width: 100%">
<el-col :lg="7" class="forPc">
</el-col>
<el-col :lg="7" class="forPc" />
<el-col :lg="10" class="forPc">
<el-row justify="center" align='middle'>
<!-- <div class="canBtn"><el-icon><ArrowLeftBold /></el-icon></div>-->
<el-row align="middle" justify="center">
<!-- <div class="canBtn"><el-icon><ArrowLeftBold /></el-icon></div>-->
<div class="cTitle">
<!-- <el-date-picker-->
<!-- v-model="value2"-->
<!-- type="daterange"-->
<!-- range-separator="-"-->
<!-- start-placeholder="Start date"-->
<!-- end-placeholder="End date"-->
<!-- format="YYYY-MM-DD"-->
<!-- value-format="YYYY-MM-DD"-->
<!-- size="small"-->
<!-- @change="changee"-->
<!-- />-->
<!-- <el-input readonly :value="date" type="text" size="small" style="width: 280px"></el-input>-->
{{date}}
<!-- <el-date-picker-->
<!-- v-model="value2"-->
<!-- type="daterange"-->
<!-- range-separator="-"-->
<!-- start-placeholder="Start date"-->
<!-- end-placeholder="End date"-->
<!-- format="YYYY-MM-DD"-->
<!-- value-format="YYYY-MM-DD"-->
<!-- size="small"-->
<!-- @change="changee"-->
<!-- />-->
<!-- <el-input readonly :value="date" type="text" size="small" style="width: 280px"></el-input>-->
{{ date }}
</div>
<!-- <div class="canBtn"><el-icon><ArrowRightBold /></el-icon></div>-->
<!-- <div class="canBtn"><el-icon><ArrowRightBold /></el-icon></div>-->
</el-row>
</el-col>
<el-col :lg="7" :xs="24">
<div style="text-align: right;padding-right: 10px">
<el-date-picker
v-model="currentDate1"
type="date"
placeholder="YYYY-MM-DD"
:clearable="false"
:disabled-date="disabledDateRZ"
format="YYYY-MM-DD"
placeholder="YYYY-MM-DD"
size="small"
type="date"
@change="dateChange"
:disabled-date="disabledDateRZ"
:clearable='false'
/>
</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)">
<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" >
<li v-for="n in schList" :key="n.id">
<el-row :gutter="15" align="top">
<el-col :lg="3" :sm="6" :xs="6">
<el-image style="width: 90px;height: 115px;max-width: 100%;" :src="fillImgUrl(n.photos?.split(',')[0]) "
fit="contain" />
<el-image
:src="fillImgUrl(n.photos?.split(',')[0]) " fit="contain"
style="width: 90px;height: 115px;max-width: 100%;"
/>
</el-col>
<el-col :lg="21" :sm="18" :xs="18">
<el-row class="hz-title">{{ n.name }}</el-row>
<el-row justify="space-between" class="hz-p" :gutter="15" align="middle">
<el-col :lg="5" :sm="6" :xs="24">
<div @click="hazelView(n)" class="forPc" :class="{esp_3:n.active}" >
{{ language==0?'套餐说明':'Package Description' }}:
<span style="margin-right: 20px">{{n.introduction}}</span>
</div>
<div @click="hazelView(n)" class="forWei" :class="{esp:n.active}" >
{{ language==0?'套餐说明':'Package Description' }}:
<span style="margin-right: 20px">{{n.introduction}}</span>
</div>
</el-col>
<el-col :lg="4" :sm="6" :xs="24">
<div>{{ language==0?'剩余':'' }}<span class="sign">{{ n.num-n.counts }}</span>{{language==0?'名额':'Places Remaining' }} </div>
</el-col>
<el-col :lg="5" :sm="6" :xs="24">
<div v-if="language==0" class="esp">地点:{{n.address}}</div>
<div v-else class="esp">address:{{n.addressEn}}</div>
</el-col>
<el-col :lg="4" :sm="12" :xs="12" class="zh-margin">
<span style="font-size: 24px">{{ language==0?'¥':'€'}} </span>
{{language==0?n.mealPrice:n.mealPriceEn}}
</el-col>
<el-col :lg="6" :sm="12" :xs="12" class="forPc">
<el-button :disabled="n.num-n.counts<=0||Date.now()>dayjs(currentDate).subtract(-1,'day').valueOf()"
class="btn-lineG w200px mauto" round type="primary" size="large" @click="goMatch(n)">{{ language==0?'立即预约':'Select' }} ⇀</el-button>
</el-col>
<el-col :lg="6" :sm="12" :xs="12" class="forWei">
<el-button :disabled="n.num-n.counts<=0||Date.now()>dayjs(currentDate).subtract(-1,'day').valueOf()"
class="btn-lineG forWei mt10" round type="primary" size="small" @click="goMatch(n)">{{ language==0?'立即预约':'Select' }} ⇀</el-button>
</el-col>
<el-row :gutter="15" align="middle" class="hz-p" justify="space-between">
<el-col :lg="5" :sm="6" :xs="24">
<div :class="{esp_3:n.active}" class="forPc" @click="hazelView(n)">
{{ language == 0 ? '套餐说明' : 'Package Description' }}:
<span style="margin-right: 20px">{{ n.introduction }}</span>
</div>
<div :class="{esp:n.active}" class="forWei" @click="hazelView(n)">
{{ language == 0 ? '套餐说明' : 'Package Description' }}:
<span style="margin-right: 20px">{{ n.introduction }}</span>
</div>
</el-col>
<el-col :lg="4" :sm="6" :xs="24">
<div>{{ language == 0 ? '剩余' : '' }}<span class="sign">{{
n.num - n.counts
}}</span>{{ language == 0 ? '名额' : 'Places Remaining' }}
</div>
</el-col>
<el-col :lg="5" :sm="6" :xs="24">
<div v-if="language==0" class="esp">地点:{{ n.address }}</div>
<div v-else class="esp">address:{{ n.addressEn }}</div>
</el-col>
<el-col :lg="4" :sm="12" :xs="12" class="zh-margin">
<span style="font-size: 24px">{{ language == 0 ? '¥' : '€' }} </span>
{{ language == 0 ? n.mealPrice : n.mealPriceEn }}
</el-col>
<el-col :lg="6" :sm="12" :xs="12" class="forPc">
<el-button
:disabled="n.num-n.counts<=0||Date.now()>dayjs(currentDate).subtract(-1,'day').valueOf()"
class="btn-lineG w200px mauto" round size="large" type="primary" @click="goMatch(n)"
>
{{ language == 0 ? '立即预约' : 'Select' }} ⇀
</el-button>
</el-col>
<el-col :lg="6" :sm="12" :xs="12" class="forWei">
<el-button
:disabled="n.num-n.counts<=0||Date.now()>dayjs(currentDate).subtract(-1,'day').valueOf()"
class="btn-lineG forWei mt10" round size="small" type="primary" @click="goMatch(n)"
>
{{ language == 0 ? '立即预约' : 'Select' }} ⇀
</el-button>
</el-col>
</el-row>
</el-col>
</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"/>
<el-empty
v-if="schList.length== 0"
:image="`/img/order_no.png`"
:image-size="200"
style="--el-empty-padding:0;--el-empty-description-margin-top:0"
/>
</div>
<Dailog ref="dialogRef"></Dailog>
<Dailog ref="dialogRef" />
</div>
</template>
<script setup>
import {ref,onMounted,getCurrentInstance} 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";
import useUserStore from "/@/store/modules/user";
import {getBaseInfoByActiveId} from "@/apiPc/booking";
import{ElMessageBox} from 'element-plus'
import Dailog from "/@/viewsPc/booking/component/dailog.vue";
import { ref, onMounted, getCurrentInstance } 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'
import useUserStore from '/@/store/modules/user'
import { getBaseInfoByActiveId } from '@/apiPc/booking'
import { ElMessageBox } from 'element-plus'
import Dailog from '/@/viewsPc/booking/component/dailog.vue'
const user = useUserStore().user
const language = useStorage('language', 0)
const router = useRouter()
const route=useRoute()
const route = useRoute()
const currentDate = ref(new Date())
const currentDate1 = ref(new Date())
const calendarRange = ref([dayjs(currentDate.value).toDate(),(dayjs(currentDate.value).toDate())])
const calendarRange = ref([dayjs(currentDate.value).toDate(), (dayjs(currentDate.value).toDate())])
const schList = ref([])
const loading = ref(false)
const formTime=ref()
const {proxy} = getCurrentInstance()
const formTime = ref()
const { proxy } = getCurrentInstance()
const query = ref({
lasId:route.params.id,
lasId: route.params.id
})
const value2=ref('')
const value2 = ref('')
onMounted(() => {
getBaseInfoByActiveId(route.params.cptId).then(res=>{
getBaseInfoByActiveId(route.params.cptId).then(res => {
formTime.value = res.data || null
}).catch(err=>{
}).catch(err => {
console.log(err)
formTime.value = null
}).finally(()=>{
}).finally(() => {
getData()
getScheduleList()
})
})
function getData(){
function getData() {
if (!formTime.value.mealStart) return
const toDay=dayjs(dayjs().format('YYYY-MM-DD')).valueOf()
const start=dayjs(formTime.value.mealStart).valueOf()
if(toDay<start){
currentDate.value= currentDate1.value= query.value.currentDate = dayjs(start).format('YYYY-MM-DD')
}else{
currentDate.value= currentDate1.value = query.value.currentDate = dayjs(toDay).format('YYYY-MM-DD')
const toDay = dayjs(dayjs().format('YYYY-MM-DD')).valueOf()
const start = dayjs(formTime.value.mealStart).valueOf()
if (toDay < start) {
currentDate.value = currentDate1.value = query.value.currentDate = dayjs(start).format('YYYY-MM-DD')
} else {
currentDate.value = currentDate1.value = query.value.currentDate = dayjs(toDay).format('YYYY-MM-DD')
}
calendarRange.value=[dayjs(currentDate.value).toDate(),(dayjs(currentDate.value).toDate())]
calendarRange.value = [dayjs(currentDate.value).toDate(), (dayjs(currentDate.value).toDate())]
}
function getScheduleList() {
loading.value = true
query.value.currentDate = dayjs(currentDate.value).format('YYYY-MM-DD')
if(!query.value.currentDate)return proxy.$message.error('请选择时间')
booking.getActivityMealVoListByStudioId(query.value).then(res=>{
if (!query.value.currentDate) return proxy.$message.error('请选择时间')
booking.getActivityMealVoListByStudioId(query.value).then(res => {
loading.value = false
schList.value = res.data
schList.value.forEach(item=>item.active=true)
schList.value.forEach(item => item.active = true)
})
}
function disabledDateRZ(date) {
if (formTime.value) {
const toDay=dayjs(dayjs().format('YYYY-MM-DD')).valueOf()
const start=dayjs(formTime.value.mealStart).valueOf()
const end=dayjs(formTime.value.mealEnd).valueOf()
if (toDay<start) {
return date.getTime()<start||date.getTime()>end
} else if(toDay>start&&toDay <end) {
return date.getTime()<toDay||date.getTime()>end
}else return true
const toDay = dayjs(dayjs().format('YYYY-MM-DD')).valueOf()
const start = dayjs(formTime.value.mealStart).valueOf()
const end = dayjs(formTime.value.mealEnd).valueOf()
if (toDay < start) {
return date.getTime() < start || date.getTime() > end
} else if (toDay > start && toDay < end) {
return date.getTime() < toDay || date.getTime() > end
} else return true
}
}
function selectDate(date) {
currentDate1.value= currentDate.value=dayjs(date).toDate()
currentDate1.value = currentDate.value = dayjs(date).toDate()
console.log(date)
getScheduleList()
}
function dateChange(){
currentDate.value=currentDate1.value
calendarRange.value=[dayjs(currentDate.value).toDate(),(dayjs(currentDate.value).toDate())]
function dateChange() {
currentDate.value = currentDate1.value
calendarRange.value = [dayjs(currentDate.value).toDate(), (dayjs(currentDate.value).toDate())]
getScheduleList()
}
function hazelView(n){
function hazelView(n) {
proxy.$refs['dialogRef'].open(n.details)
}
function goMatch(n) {
async function goMatch(n) {
const { data } = await getBaseInfoByActiveId(route.params.cptId)
if (data.isMealView == 0) {
return proxy.$modal.confirm(language.value == 0 ? '感谢您对本次比赛的关注，该服务暂无可预订信息，敬请期待。' : 'Thank you for your attention to this competition. The service is currently unavailable for booking. Please stay tuned.')
}
if (!user) {
useUserStore().setVisitor()
return
}
ElMessageBox.confirm(language.value==0?`你当前所预约的时间为${query.value.currentDate}是否确定？`:`Your current appointment is ${query.value.currentDate}. Are you sure?`,{type:'warning'})
ElMessageBox.confirm(language.value == 0 ? `你当前所预约的时间为${query.value.currentDate}是否确定？` : `Your current appointment is ${query.value.currentDate}. Are you sure?`, { type: 'warning' })
.then(() => {
router.push({
name: 'makeUpOrder',
......@@ -216,52 +235,52 @@ function goMatch(n) {
.catch(() => {
// catch error
})
}
</script>
<style scoped lang="scss">
.forWei{display: none}
<style lang="scss" scoped>
.forWei {
display: none
}
.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%;
......@@ -277,9 +296,10 @@ function goMatch(n) {
padding: 12px 20px;
overflow: auto;
height: 625px;
ul {
li {cursor: pointer;
li {
cursor: pointer;
background: #F6F9FE;
margin: 7px 0 7px 20px;
position: relative;
......@@ -287,11 +307,11 @@ function goMatch(n) {
border-radius: 10px;
font-weight: 500;
font-size: 15px;
label {
color: #453DEA;
margin-right: 15px;
&::before {
content: '';
background: #fff;
......@@ -307,7 +327,7 @@ function goMatch(n) {
}
}
}
li::before {
content: '';
background: linear-gradient(0deg, #8623FC, #453DEA);
......@@ -321,7 +341,7 @@ function goMatch(n) {
margin: auto;
z-index: 1;
}
li::after {
content: '';
left: -16px;
......@@ -331,7 +351,7 @@ function goMatch(n) {
position: absolute;
top: 20px
}
//li:hover {
// color: #fff;
// background: linear-gradient(-90deg, #8623FC, #453DEA);
......@@ -343,19 +363,20 @@ function goMatch(n) {
}
}
.hz-title{
.hz-title {
font-size: 20px;
font-weight: 400;
color: #000;
margin-bottom: 10px;
}
.zh-margin{
.zh-margin {
font-weight: bold;
font-size: 32px;
color: #FF8124;
}
.hz-p{
.hz-p {
font-size: 15px;
color: #4C5359;
font-weight: 400;
......@@ -367,7 +388,7 @@ function goMatch(n) {
line-height: 50px;
}
.canBtn{
.canBtn {
color: #453DEA;
border-radius: 2px;
width: 22px;
......@@ -376,25 +397,41 @@ function goMatch(n) {
text-align: center;
background-color: #fff;
margin: 0 16px -2px 16px;
cursor:pointer
cursor: pointer
}
.cTitle{
.cTitle {
color: #fff;
font-size: 20px;
font-weight: 500;
}
@media screen and (max-width: 768px) {
.forPc{display: none!important;}
.forWei{display: block}
.hz-title{font-size: 16px}
.hz-p{font-size: 12px;}
.zh-margin{font-size: 20px;
span{font-size: 16px!important;}
.forPc {
display: none !important;
}
.forWei {
display: block
}
.calendarList{padding: 0;
ul li{margin: 0}
.hz-title {
font-size: 16px
}
.hz-p {
font-size: 12px;
}
.zh-margin {
font-size: 20px;
span {
font-size: 16px !important;
}
}
.calendarList {
padding: 0;
ul li {
margin: 0
}
}
}
</style>
......
src/viewsPc/booking/makeUpDetail.vue
......@@ -5,48 +5,53 @@
<el-row>
<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>
<span v-for="(t,index) in form.label?.split('，')" v-show="index<4">{{ t }}</span>
</div>
</el-row>
<el-row class="hz-row">
<el-icon size="16" style="position: relative;top: 2px" color="#929AA0">
<OfficeBuilding/>
<el-icon color="#929AA0" size="16" style="position: relative;top: 2px">
<OfficeBuilding />
</el-icon>
{{ language==0?'成立':'Established for'}} <span class="sign">{{form.ageLimit}}</span>{{language==0?'年':'years'}} &nbsp;&nbsp;&nbsp;&nbsp; |&nbsp;&nbsp;&nbsp;&nbsp;
<el-icon size="16" style="position: relative;top: 2px" color="#929AA0">
<UserFilled/>
{{ language == 0 ? '成立' : 'Established for' }} <span
class="sign"
>{{ form.ageLimit }}</span>{{ language == 0 ? '年' : 'years' }} &nbsp;&nbsp;&nbsp;&nbsp; |&nbsp;&nbsp;&nbsp;&nbsp;
<el-icon color="#929AA0" size="16" style="position: relative;top: 2px">
<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">
<PhoneFilled/>
<span class="sign"> {{ form.dresserLimit }}</span>{{ language == 0 ? '名化妆师' : 'makeup artists' }}&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
<el-icon color="#929AA0" size="16" style="position: relative;top: 2px">
<PhoneFilled />
</el-icon>
<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/>
&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
<el-icon color="#929AA0" size="16" style="position: relative;top: 2px">
<LocationFilled />
</el-icon>
{{form.remarks}}
{{ form.remarks }}
</el-row>
<div style="display: flex">
<div style="min-width: 130px" class="title forPc">{{language==0?'工作室简介:':'Studio profile:'}}</div>
<div v-html="form.introduction"></div>
<div class="title forPc" style="min-width: 130px">{{ language == 0 ? '工作室简介:' : 'Studio profile:' }}
</div>
<div v-html="form.introduction" />
</div>
</el-card>
<div class="mt30">
<el-row :gutter="20">
<el-col :span="10">
<div class="imgbox hotelImg">
<el-image :src="form?.photosList?.[0]" fit="cover" :preview-src-list="form?.photosList"/>
<el-image :preview-src-list="form?.photosList" :src="form?.photosList?.[0]" fit="cover" />
</div>
</el-col>
<el-col :span="14">
<el-row class="h100" :gutter="20">
<el-col :span="8" class="oddmb" v-for="(p,index) in form?.photosList?.slice(1,7)">
<div class="imgbox hotelImg"><el-image :src="p" fit="cover"/></div>
<el-row :gutter="20" class="h100">
<el-col v-for="(p,index) in form?.photosList?.slice(1,7)" :span="8" class="oddmb">
<div class="imgbox hotelImg">
<el-image :src="p" fit="cover" />
</div>
</el-col>
</el-row>
</el-col>
......@@ -54,22 +59,23 @@
</div>
<br>
<el-card :body-style="{'padding':'20px 20px'}">
<MakeUpCalendar/>
<MakeUpCalendar />
</el-card>
</div>
</div>
</template>
<script setup >
import {useRouter} from "vue-router";
import {ref, reactive, onMounted} from "vue";
import {useRoute} from "vue-router";
import * as booking from "@/apiPc/booking"
import {useStorage} from "@vueuse/core/index";
import useUserStore from "@/store/modules/user";
import MakeUpCalendar from "@/viewsPc/booking/component/makeUpCalendar.vue";
import {fillImgUrl} from "/@/utils/ruoyi";
<script setup>
import { useRouter } from 'vue-router'
import { ref, reactive, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import * as booking from '@/apiPc/booking'
import { useStorage } from '@vueuse/core/index'
import useUserStore from '@/store/modules/user'
import MakeUpCalendar from '@/viewsPc/booking/component/makeUpCalendar.vue'
import { fillImgUrl } from '/@/utils/ruoyi'
const user = useUserStore().user
const language = useStorage('language', 0)
const router = useRouter()
......@@ -77,7 +83,7 @@ const route = useRoute()
const form = ref({})
const query = ref({
activityId: route.params.cptId,
id:route.params.id
id: route.params.id
})
const loading = ref(false)
onMounted(() => {
......@@ -89,8 +95,8 @@ function getData() {
booking.makeUpDetail(query.value).then(res => {
loading.value = false
form.value = res.data
form.value.photosList=[]
form.value.photos?.split(',')?.forEach(v=>{
form.value.photosList = []
form.value.photos?.split(',')?.forEach(v => {
form.value.photosList.push(fillImgUrl(v))
})
console.log(res)
......@@ -101,23 +107,23 @@ function getData() {
</script>
<style scoped lang="scss">
<style lang="scss" scoped>
.room {
background: #FAFBFD;
margin: 20px 0 0;
padding: 20px;
border: 1px solid #E5E5E5;
.name {
font-size: 20px;
margin: 0 0 10px;
}
.roomImg {
aspect-ratio: 16/9;
border-radius: 10px;
overflow: hidden;
img {
width: 100%;
object-fit: cover;
......@@ -125,17 +131,17 @@ function getData() {
height: 100%;
}
}
.price {
color: #FF8124;
font-size: 24px;
span {
font-size: 36px;
font-family: "DIN Alternate"
}
}
.bg-lineg {
margin: auto;
border-radius: 10px;
......@@ -144,7 +150,7 @@ function getData() {
font-size: 24px;
width: 66px;
cursor: pointer;
div {
background: #fff;
font-size: 13px;
......@@ -167,30 +173,30 @@ function getData() {
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;
......@@ -201,12 +207,12 @@ function getData() {
.tagbox {
margin: 15px 0;
a {
color: #AFB5B9;
font-size: 12px;
}
span {
border-radius: 13px;
font-size: 12px;
......@@ -214,22 +220,22 @@ function getData() {
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);
......@@ -249,14 +255,17 @@ function getData() {
width: 100%;
height: 100%;
position: relative;
img{object-fit: cover}
img {
object-fit: cover
}
}
.img-hover{
.img-hover {
position: absolute;
top: 0;
left: 0;
background-color: rgb(0,0,0,.5);
background-color: rgb(0, 0, 0, .5);
color: #fff;
font-size: 18px;
font-weight: 400;
......@@ -267,12 +276,24 @@ function getData() {
border-radius: 10px;
}
.hotelImg{border-radius: 10px;overflow: hidden;aspect-ratio: 16/9;
img{object-fit: cover;object-position: center;width: 100%;height: 100%;
.hotelImg {
border-radius: 10px;
overflow: hidden;
aspect-ratio: 16/9;
img {
object-fit: cover;
object-position: center;
width: 100%;
height: 100%;
}
}
.oddmb:nth-child(2){margin-bottom: 20px;}
.title{
.oddmb:nth-child(2) {
margin-bottom: 20px;
}
.title {
width: 130px;
font-weight: 500;
font-size: 18px;
......
src/viewsPc/center/myReservation.vue
......@@ -133,7 +133,7 @@
</div>
<div class="text-right">
<el-button
v-if="(b.orderType == 0||b.orderType == 5||b.orderType==1||b.orderType==2)&&b.viewStatus!=0"
v-if="(b.orderType == 0||b.orderType == 5||b.orderType==1||b.orderType==2||b.orderType==3)&&b.viewStatus!=0"
class="mb10" plain round
size="small" type="success"
@click="Rebook(b)"
......@@ -236,6 +236,19 @@ function goDetail(b) {
function Rebook(row) {
console.log(row)
if (row.orderType == 0) {
router.push({
name: 'hotelDetail',
params: {
cptId: row.activeId,
hotelId: row.hotelId
},
query: {
id: row.extId
}
})
}
if (row.orderType == 1) {
return router.push({
path: `/booking/car/${row.activeId}`
......@@ -247,19 +260,13 @@ function Rebook(row) {
path: `/booking/dinner/${row.activeId}`
})
}
if (row.orderType == 0) {
router.push({
name: 'hotelDetail',
params: {
cptId: row.activeId,
hotelId: row.hotelId
},
query: {
id: row.extId
}
// 化妆
if (row.orderType == 3) {
return router.push({
path: `/booking/makeUp/${row.activeId}/${row.extId}`
})
}
if (row.orderType == 5) {
router.push({
name: 'ticket',
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!