Skip to content

jijin / dance-pc

Go to a project
Toggle navigation
Toggle navigation pinning
1ceae698 by 杨炀
Options

no message

1 parent 6332eb7e
Expand all
Inline Side-by-side
Showing 7 changed files with 223 additions and 17 deletions
src/routerPc/en.js
......@@ -398,6 +398,18 @@ export const constantRoutes = [
meta: {title: 'Hotel Reservation'}
},
{
path: 'travel/:cptId',
component: () => import('@/viewsPc/booking/travel'),
name: 'travel',
meta: {title: 'Hotel Reservation'}
},
{
path: 'travel/:cptId/:hotelId',
component: () => import('@/viewsPc/booking/travelDetail'),
name: 'travelDetail',
meta: {title: 'Hotel Reservation'}
},
{
path: 'car/:cptId/:id',
component: () => import('@/viewsPc/booking/carOrder'),
name: 'carOrder',
......@@ -410,6 +422,12 @@ export const constantRoutes = [
meta: {title: 'Hotel Reservation'}
},
{
path: 'travel/:cptId/:hotelId/:roomId',
component: () => import('@/viewsPc/booking/travelOrder'),
name: 'travelOrder',
meta: {title: 'Travel Reservation'}
},
{
path: 'car/:cptId',
component: () => import('@/viewsPc/booking/car'),
name: 'car',
......
src/viewsPc/booking/travel.vue 0 → 100644
<template>
<div>
<div class="banner">
<h2>{{ language==0?'旅游服务':'Travel Service' }}</h2>
</div>
<div class="box">
<div class="searchBar">
<el-input :placeholder="language==0?'请输入关键字搜索':'Search'" v-model="query.name" class="no-border">
</el-input>
<el-button size="large" type="primary" class="btn-lineG" icon="search" @click="getList">
{{ language==0?'搜索':'Search' }}</el-button>
</div>
</div>
<div class="box" v-loading="loading">
<el-row :gutter="20">
<el-col :lg="24" :md="24" :sm="24" :xs="24" :xl="24" v-for="(h,index) in list" class="mb20">
<el-card @click="goDetail(h)">
<!-- 酒店列表-->
<el-row class="hotel" align="middle" :gutter="20">
<el-col :span="6">
<div class="imgbox">
<img class="w100" :src="fillImgUrl(h.photos?.split(',')[0])"/>
</div>
</el-col>
<el-col :span="12">
<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 esp">
<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 mt20">
<el-icon size="16" style="position: relative;top: 2px" color="#929AA0"><LocationFilled /></el-icon>
{{h.address}}
</p>
</el-col>
<el-col :span="4" class="text-right">
<div class="price">{{ language==0?'¥':'€' }}<span>{{ h.price }}</span>
<i v-if="language==0">起</i>
</div>
<el-button class="btn-lineG w200px" round type="primary" >{{ language==0?'立即预订':'Select' }} ⇀</el-button>
</el-col>
</el-row>
</el-card>
</el-col>
</el-row>
<el-empty v-show="!loading&&list.length==0" :image="`/img/order_no.png`" :image-size="228" description="" />
<div style="height: 50px"></div>
</div>
</div>
</template>
<script setup>
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 useUserStore from "@/store/modules/user";
const router = useRouter()
const route = useRoute()
const user = useUserStore().user
const useStore = useUserStore
const language= useStorage('language',0)
const query = ref({
name:''
})
const cptId = ref('')
const list = ref([])
const loading = ref(false)
onMounted(()=>{
query.value.activityId = route.params.cptId
getList()
})
function getList() {
loading.value = true
booking.getHotelList(query.value).then(res=>{
list.value = res.rows
loading.value = false
console.log(list.value)
}).catch(e=>{
loading.value = false
})
}
function goDetail(item) {
if(!user){
useStore().setVisitor()
return
}
router.push({
name:'travelDetail',
params:{
hotelId:item.hotelId,
},
query:{
id:item.id
}
})
}
</script>
<style scoped lang="scss">
.hotel{
h3{margin: 0 0 10px;}
img.w100{object-fit: cover;aspect-ratio: 16/9}
.addr{font-size: 14px;color: #929AA0;font-weight: 400;margin: 0 0 10px;}
.price{margin: 0 0 8px;
color: #FF8124;font-size: 18px;
span{font-size: 36px;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/jd_bg.png") center;display: flex;align-items: center;
justify-content: center;
img{display: block;margin:-30px auto 0;width: auto;}
color: #fff;font-style: italic;font-size: 24px;text-transform: uppercase;
h2{margin:-30px auto 0;font-weight: bold;letter-spacing: 4px;}
}
.searchBar{position: relative;top: -30px;
background: #FFFFFF;display: flex;padding: 20px;
border-radius: 10px;}
.no-border{border: none;background: #F5F7F9;
:deep(.el-input__wrapper){border: none;box-shadow: none;background: #F5F7F9;}
}
.imgbox {width: 100%;height: 100%;position: relative;
img{width: 100%;height: 100%;}
.starBox{position: absolute;bottom: 0;right: 0;background: rgba(0,0,0,0.4);padding: 10px 15px 3px;}
}
.po-r-b{}
.starBox{
border-radius: 14px 0 0 0;
img{display: inline-block;margin-right: 4px;width: 24px;}
}
.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/match/components/addWdsf.vue
......@@ -245,6 +245,14 @@ const ocrSuccess = (res) => {
}
function submitForm() {
if(!form.value.wdsfMin&&!card.value){
ElMessage.warning(language.value == 0 ? '请输入你的WDSF会员号' : 'Please fill in your WDSF MIN')
return
}
if(card.value&&!isCodeTrue.value){
ElMessage.warning(language.value == 0 ? '请验证你的WDSF会员号' : 'Please verify your WDSF MIN')
return
}
if (!form.value.passportNumber) {
ElMessage.warning(language.value == 0 ? '请输入你的证件号' : 'Please fill in your passport number')
return
......
src/viewsPc/match/components/quick-row.vue
<template>
<div style="filter: opacity(1)">
<el-row v-if="language==0" class="btnbox" justify='space-between'>
<el-col :lg="3" :md="7" :sm="11" :xs="11">
<el-row v-if="language==0" class="btnbox" justify='space-between' :gutter="15">
<el-col :lg="3" :md="6" :sm="12" :xs="12">
<div class="funcBtn" @click="popRemark(0)">
<img src="@/assets/dance/btn04.png"/>
<h4>票务预订</h4>
</div>
</el-col>
<el-col :lg="3" :md="7" :sm="11" :xs="11">
<el-col :lg="3" :md="6" :sm="12" :xs="12">
<div class="funcBtn" @click="popRemark(1)">
<img src="@/assets/dance/btn01.png"/>
<h4>酒店预订</h4>
</div>
</el-col>
<el-col :lg="3" :md="7" :sm="11" :xs="11">
<el-col :lg="3" :md="6" :sm="12" :xs="11">
<div class="funcBtn" @click="popRemark(8)">
<img src="@/assets/dance/btn08.png"/>
<h4>旅游服务</h4>
</div>
</el-col>
<el-col :lg="3" :md="6" :sm="12" :xs="11">
<div class="funcBtn" @click="popRemark(2)">
<img src="@/assets/dance/btn02.png"/>
<h4>车辆预订</h4>
</div>
</el-col>
<el-col :lg="3" :md="7" :sm="11" :xs="11">
<el-col :lg="3" :md="6" :sm="12" :xs="11">
<div class="funcBtn" @click="popRemark(6)">
<img src="@/assets/dance/btn07.png"/>
<h4>预订查询</h4>
</div>
</el-col>
<el-col :lg="3" :md="7" :sm="11" :xs="11">
<el-col :lg="3" :md="6" :sm="12" :xs="11">
<div class="funcBtn" @click="popRemark(3)">
<img src="@/assets/dance/btn03.png"/>
<h4>餐饮预订</h4>
</div>
</el-col>
<el-col :lg="3" :md="7" :sm="11" :xs="11">
<el-col :lg="3" :md="6" :sm="12" :xs="11">
<div class="funcBtn" @click="popRemark(4)">
<img src="@/assets/dance/btn05.png"/>
<h4>化妆预约</h4>
</div>
</el-col>
<el-col :lg="3" :md="7" :sm="11" :xs="11">
<el-col :lg="3" :md="6" :sm="12" :xs="11">
<div class="funcBtn" @click="popRemark(5)">
<img src="@/assets/dance/btn06.png"/>
<h4>拍照预约</h4>
</div>
</el-col>
</el-row>
<el-row v-else class="btnbox" justify='space-between'>
<el-col :lg="3" :md="7" :sm="11" :xs="11">
<el-row v-else class="btnbox enBtnbox" justify='space-between' :gutter="15">
<el-col :lg="3" :md="8" :sm="12" :xs="12">
<div class="funcBtn" @click="popRemark(0)">
<img src="@/assets/dance/btn04.png"/>
<h4>TICKET BOOKING</h4>
</div>
</el-col>
<el-col :lg="3" :md="7" :sm="11" :xs="11">
<el-col :lg="3" :md="8" :sm="12" :xs="12">
<div class="funcBtn" @click="popRemark(1)">
<img src="@/assets/dance/btn01.png"/>
<h4>HOTEL RESERVATION</h4>
</div>
</el-col>
<el-col :lg="3" :md="7" :sm="11" :xs="11">
<el-col :lg="3" :md="8" :sm="12" :xs="12">
<div class="funcBtn" @click="popRemark(8)">
<img src="@/assets/dance/btn08.png"/>
<h4>TRAVEL SERVICE</h4>
</div>
</el-col>
<el-col :lg="3" :md="8" :sm="12" :xs="12">
<div class="funcBtn" @click="popRemark(2)">
<img src="@/assets/dance/btn02.png"/>
<h4>TRANSPORTATION RESERVATION</h4>
</div>
</el-col>
<el-col :lg="3" :md="7" :sm="11" :xs="11">
<el-col :lg="3" :md="8" :sm="12" :xs="12">
<div class="funcBtn" @click="popRemark(6)">
<img src="@/assets/dance/btn07.png"/>
<h4>RESERVATION SEARCH</h4>
</div>
</el-col>
<el-col :lg="3" :md="7" :sm="11" :xs="11">
<el-col :lg="3" :md="8" :sm="12" :xs="12">
<div class="funcBtn" @click="popRemark(3)">
<img src="@/assets/dance/btn03.png"/>
<h4>DINING RESERVATION</h4>
</div>
</el-col>
<el-col :lg="3" :md="7" :sm="11" :xs="11">
<el-col :lg="3" :md="8" :sm="12" :xs="12">
<div class="funcBtn" @click="popRemark(4)">
<img src="@/assets/dance/btn05.png"/>
<h4>MAKEUP APPOINTMENT</h4>
</div>
</el-col>
<el-col :lg="3" :md="7" :sm="11" :xs="11">
<el-col :lg="3" :md="8" :sm="12" :xs="12">
<div class="funcBtn" @click="popRemark(5)">
<img src="@/assets/dance/btn06.png"/>
<h4>PHOTOGRAPHY APPOINTMENT</h4>
......@@ -146,7 +160,9 @@ function popRemark(type) {
}
})
}
if (type == 8) {
//todo 旅游
}
if (!form.value) {
building()
return
......@@ -248,4 +264,20 @@ h4 {
font-size: 13px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
}
.enBtnbox{
.funcBtn{
h4{font-size:16px;display: flex;align-items: center;width: 100%;justify-content: center;height: 36px;}
}
}
@media screen and (max-width: 1400px) {
.enBtnbox .funcBtn{
h4{font-size:14px;}
}
}
@media screen and (max-width: 1250px) {
.enBtnbox .funcBtn{
h4{font-size:12px;}
}
}
</style>
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!