Skip to content

jijin / dance-pc

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

no message

1 parent 6332eb7e
Inline Side-by-side
Showing 7 changed files with 1212 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/booking/travelDetail.vue 0 → 100644
<template>
<div>
<div class="box">
<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="language == 0?16:24">
<h3 class="esp flex">{{ form?.name }}
<el-tag class="ml10">5A</el-tag>
</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 class="info">
<el-icon>
<Clock/>
</el-icon>
<span class="mr10">{{ language == 0 ? '开园时间' : 'Opening Time' }}：{{ form?.checkInTime }} ～ {{ form?.checkOutTime }}</span>
</div>
<div class="info">
<el-icon>
<Phone/>
</el-icon>
<span class="mr10">{{ language == 0 ? '联系方式' : 'Contact' }}：0510-12345678</span>
</div>
<div class="info esp">
<el-icon>
<MapLocation/>
</el-icon>
<span>{{ form?.addName }}</span>
</div>
<div v-if="form?.introduction" class="info pointer">
<div :class="showAll?'':'esp_2'" @click="showAll=!showAll" v-html="form.introduction.toString()"></div>
</div>
</el-col>
<el-col :span="8" class="text-right" v-if="language == 0">
<div class="mapBox" @click="goMap">
<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 :span="10">
<div class="imgbox hotelImg">
<el-image :src="fillImgUrl(form?.photos?.split(',')[0])" fit="cover"
:preview-src-list="form?.photos?.split(',')"/>
</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?.photos?.split(',').slice(1,7)">
<div class="imgbox hotelImg">
<el-image :src="fillImgUrl(p)" fit="cover"/>
</div>
</el-col>
</el-row>
</el-col>
</el-row>
</div>
<el-card class="mt30 mb60">
<div class="lineHead">
<ul>
<li>
{{ language == 0 ? '选择日期' : 'tickets type' }}
</li>
</ul>
</div>
<div>
<!-- 日期-->
<el-calendar class="mt20" v-model="currentDate" :range="calendarRange">
<template #header="{date}">
<el-row style="width: 100%">
<el-col :lg="7" class="forPc">
</el-col>
<el-col :lg="10" class="forPc">
<el-row justify="center" align='middle'>
<!-- <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}}
</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"
format="YYYY-MM-DD"
@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)">
{{ data.data.day.slice(8, 10) }}
</div>
</template>
</el-calendar>
</div>
<div class="text-center mt30">
<el-button style="color: #fff" :disabled="!hotTime" size="large"
class="w200px btn-lineG" :class="{'forbid':!(!hotTime[0])}" round @click="goOrder">
{{ language==0?'立即预订':'BOOK NOW' }}
</el-button>
</div>
</el-card>
</div>
</div>
</template>
<script setup>
import {useRouter} from "vue-router";
import {ref, reactive, onMounted, getCurrentInstance} from "vue";
import {useRoute} from "vue-router";
import {dayjs} from 'element-plus'
import {getHotelById, getHotelRooms, checkRoomPayByUserId} from "@/apiPc/booking"
import {getBaseInfoByActiveId} from "@/apiPc/booking";
const {proxy} = getCurrentInstance()
import {useStorage} from "@vueuse/core/index";
import useUserStore from "@/store/modules/user";
import {ElMessageBox} from "element-plus";
const currentDate = ref(new Date())
const currentDate1 = ref(new Date())
const calendarRange = ref([dayjs(currentDate.value).toDate(),(dayjs(currentDate.value).toDate())])
const user = useUserStore().user
const useStore = useUserStore
const language = useStorage('language', 0)
const router = useRouter()
const route = useRoute()
const form = ref({})
const query = ref({
hotelId: route.query.id
})
const hotTime = ref([])
const showAll = ref(false)
const loading = ref(false)
const roomList = ref([])
const map = ref(null)
const formTime = ref({})
let baseHotTime;
onMounted(() => {
console.log(route.params)
getBaseInfoByActiveId(route.params.cptId).then(res => {
formTime.value = res.data || null
}).catch(err => {
console.log(err)
formTime.value = null
}).finally(() => {
console.log(formTime.value)
getDateTime()
getData()
})
})
function initTime() {
if (!hotTime.value[0]) {
hotTime.value = baseHotTime
getRoomList()
}
}
function getDateTime() {
if (formTime.value) {
if (dayjs().isBefore(dayjs(formTime.value.hqStart))) {
// hotTime.value[0]=dayjs(formTime.value.hqStart).format('YYYY-MM-DD')
// hotTime.value[1]=dayjs(formTime.value.hqStart).add(1,'day').format('YYYY-MM-DD')
baseHotTime = [dayjs(formTime.value.hqStart).format('YYYY-MM-DD'), dayjs(formTime.value.hqStart).add(1, 'day').format('YYYY-MM-DD')]
} else {
// hotTime.value[0]=dayjs().format('YYYY-MM-DD')
// hotTime.value[1]=dayjs().add(1,'day').format('YYYY-MM-DD')
baseHotTime = [dayjs().format('YYYY-MM-DD'), dayjs().add(1, 'day').format('YYYY-MM-DD')]
}
}
}
function getData() {
loading.value = true
getHotelById(route.params.hotelId).then(res => {
loading.value = false
form.value = res.data
initMap()
}).catch(err => {
console.log(err)
})
}
function dateChange(){
currentDate.value=currentDate1.value
calendarRange.value=[dayjs(currentDate.value).toDate(),(dayjs(currentDate.value).toDate())]
}
function selectDate(date) {
currentDate1.value= currentDate.value=dayjs(date).toDate()
console.log(date)
}
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(!hotTime.value){
proxy.$modal.msgError(language.value == 0 ?'请先选择出发日期':'Please choose the date of check-in first')
return
}
if(room.useCount<=0){
ElMessageBox.confirm(language.value == 0 ? `您当前选择的日期是${hotTime.value[0]}至 ${hotTime.value[1]}，该时间段暂无可预订房间，请选择其他日期` :
`You currently select the check-in date of ${hotTime.value[0]} to ${hotTime.value[1]}, there is no room available for booking at this time period, please choose another date`, {type: 'warning'}).then({
})
return
}
ElMessageBox.confirm(language.value == 0 ? `你当前选择的出行日期为${dayjs(currentDate.value).format('YYYY-MM-DD')}是否确定？` : `Your current check-in time is ${dayjs(currentDate.value).format('YYYY-MM-DD')} Are you sure?`, {type: 'warning'}).then({}).then(() => {
checkRoomPayByUserId(room.hotelId).then(res => {
if (res.data == -100) {
ElMessageBox.confirm(
language.value == 0 ? '你有未支付的旅游预订，是否前往个人中心查看' : 'You already have an unpaid travel order, do you want to go to the personal center to check it?',
language.value == 0 ? '提示' : 'Warning',
{
confirmButtonText: language.value == 1 ? 'Go My Reservation ' : '前往我的预订',
// cancelButtonText: language.value==1?'Continue to book':'继续预订',
type: 'warning',
}
).then((res) => {
console.log(res)
router.push({
name: 'myReservation',
})
})
return
}
goNext()
})
})
}
function goNext() {
router.push({
name: 'travelOrder',
params: {
roomId: 0
},
query: {
hotelName: form.value.name,
start:currentDate.value
}
})
}
function getDaysBetween() {
if (hotTime.value && hotTime.value.length == 2) {
const d1 = dayjs(hotTime.value[0]).format('YYYY-MM-DD')
const d2 = dayjs(hotTime.value[1]).format('YYYY-MM-DD')
if (d1 == d2) {
getDateTime()
return proxy.$modal.msgError(language.value == 0 ? '入住时间跨度需要大于一天' : 'The duration of the stay must be more than one day.')
} else {
getRoomList()
}
}
}
function disabledDateRZ(date) {
//判读今天大与form.value.hqStart
if (formTime.value.hqStart) {
const today = dayjs().format('YYYY-MM-DD')
if (formTime.value.hqStart < today) {
return !((date.getTime() >= dayjs(today).valueOf()) && (date.getTime() <= dayjs(formTime.value.hqEnd).valueOf()))
} else {
return !((date.getTime() >= dayjs(formTime.value.hqStart).valueOf()) && (date.getTime() <= dayjs(formTime.value.hqEnd).valueOf()))
}
}
// return true
}
function goMap() {
return
// var tencentMapUrl = "https://map.qq.com/";
// window.location.href = tencentMapUrl;
var url = `https://map.qq.com/?type=gcj02&lat=${form.value.latitude}&lng=${form.value.longitude}`
var mapUrl_tx = "http://apis.map.qq.com/uri/v1/marker?marker=coord:" + form.value.latitude + "," + form.value.longitude + "&referer=yellowpage";
window.open(url, "_blank")
}
</script>
<style scoped lang="scss">
.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;
object-position: center;
height: 100%;
}
}
.price {
color: #FF8124;
font-size: 24px;
span {
font-size: 36px;
font-family: "DIN Alternate"
}
}
.bg-lineg {
margin: auto;
border-radius: 10px;
text-align: center;
padding: 7px 2px 2px;
font-size: 24px;
width: 66px;
cursor: pointer;
div {
background: #fff;
font-size: 13px;
border-radius: 20px;
padding: 0 10px;
color: #453DEA;
font-weight: 500;
}
}
}
.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;
}
}
}
:deep(.button) {
display: block;
height: 55px;
width: auto;
color: #fff;
span {
display: block !important;
div {
margin-top: 3px;
}
}
}
.starBox {
img {
display: inline-block;
margin-right: 4px
}
}
.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);
}
}
.mapBox {
position: relative;
overflow: hidden;
height: 200px;
#map {
position: relative;
left: -70px;
width: calc(100% + 160px);
}
}
.hotelImg {
border-radius: 10px;
overflow: hidden;
aspect-ratio: 16/9;
img {
object-fit: cover;
object-position: center;
width: 100%;
height: 100%;
}
}
.info {
font-weight: 400;
font-size: 14px;
color: #929AA0;
.el-icon {
margin-right: 5px;
}
}
.oddmb:nth-child(2) {
margin-bottom: 20px;
}
.forbid {
cursor: not-allowed !important;
filter:grayscale(0.4);opacity: 0.7;
}
.forbid:hover {
box-shadow: none;
}
.lineHead{display: flex;justify-content: space-between;}
.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;
}
}
</style>
src/viewsPc/booking/travelOrder.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 ? '旅游服务下单' : 'Hotel booking order' }}</div>
</div>
<!-- {{room}}-->
<el-row class="pd20" :gutter="20">
<el-col :span="14">
<div class="border-info">
<h3>{{ hotelName }}</h3>
<div class="roomType">{{ room.roomType }}</div>
<div class="room">
<span>{{ room.bedType }}</span>
</div>
</div>
<div class="leftboderTT">{{ language == 0 ? '预约信息' : 'Reservation information' }}</div>
<div class="border-rr mt20 pd20">
<el-form :model="form" :label-width="language == 0 ?'120':'160'" :rules="rules" ref="formRef">
<!-- :disabled-date="disabledDateRZ"-->
<el-form-item :label="language==0?'选择日期':'Date'" required>
<el-date-picker v-model="rzRange"
format="YYYY-MM-DD" :clearable="false"
value-format="YYYY-MM-DD"/>
<div class="tip" v-if="lform.travelStart">{{ language==0?'可订日期':'Available date' }}：{{ lform.travelStart.slice(0, 10) }} ~ {{ lform.travelEnd.slice(0, 10) }}</div>
<!-- :picker-options="pickerOptions"-->
</el-form-item>
<el-form-item :label="language==0? n.name:'Rooms'" required prop="roomNum" v-for="n in typeList">
<el-input-number v-model="n.num" :min="0" :max="canOrderNum" @change="changeRoomNum(n)"/>
<div class="red ml20">
<span v-if="language == 0">剩余票数:{{ canOrderNum }}</span>
<span v-else>{{ canOrderNum }} Remaining rooms</span>
</div>
<div class="tip" v-if="language==1">If you need to make a hotel reservation, please fill in the full names of all required persons when booking the hotel. (For two or more people, please use ',')</div>
</el-form-item>
<div class="fakeFormItem">
<label>需填写{{ needPersonNum }}位游客</label>
<div>
<div v-show="needPersonNum > form.personArr.length">还需填写{{needPersonNum-form.personArr.length}}位游客</div>
<div>
<el-button plain type="primary" @click="showAddPerson">新增出行人</el-button>
</div>
</div>
</div>
<div v-show="form.personArr.length>0">
<div class="fakeFormItem personIt" v-for="(n,index) in form.personArr">
<label>
<el-icon @click="delPerson(n,index)"><Remove /></el-icon>
游客{{index+1}}
</label>
<div class="mation">
<div>{{n.name}}</div>
身份证：{{n.idcCode}}
</div>
<el-icon @click="showAddPerson(n)"><Edit /></el-icon>
</div>
</div>
<el-form-item :label="language==0?'联系手机':'Contact phone'" required prop="phone">
<el-input v-model="form.phone"/>
</el-form-item>
</el-form>
</div>
</el-col>
<el-col :span="10">
<div class="leftboderTT">{{ language == 0 ? '订单明细' : 'Order details' }}</div>
<div class="border-rr mt20 pd20 ccitemBox">
<label> {{ language == 0 ? '基本费用' : 'Room fee' }}
<span class="fr" v-if="language==0">{{
language == 0 ? '¥' : '€'
}}{{ ( form.roomNum * choseRooms.length).toFixed(2) }}</span>
<span class="fr" v-else>{{
language == 0 ? '¥' : '€'
}}{{ ( form.roomNum * choseRooms.length).toFixed(2) }}</span>
</label>
<div class="ccitem" v-for="(c, index) in choseRooms" :key="index" v-show="form.roomNum>0">
{{ c }}
<span v-if="language==0">{{ form.roomNum }}*{{ language == 0 ? '¥' : '€' }}{{ room.roomPrice }}</span>
<span v-else>{{ form.roomNum }}*{{ language == 0 ? '¥' : '€' }}{{ room.roomPriceEn }}</span>
</div>
<label>{{ language == 0 ? '共计' : 'Total' }}<span
class="fr bigMoney">{{ language == 0 ? '¥' : '€' }}{{ money }}</span></label>
</div>
</el-col>
</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>
<el-dialog v-model="show" title="出行人信息" width="500px" center>
<div>
<el-form label-width="100" ref="personRef">
<el-form-item label="姓名">
<el-input v-model="person.name" placeholder="请与证件姓名一致"/>
</el-form-item>
<el-form-item label="证件号">
<el-input v-model="person.idcCode" placeholder="请填写身份证号"/>
</el-form-item>
</el-form>
</div>
<template #footer>
<div class="dialog-footer">
<el-button @click="show = false">取 消</el-button>
<el-button type="primary" @click="addPerson">完成</el-button>
</div>
</template>
</el-dialog>
</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 needPersonNum = ref(0)
const person = ref({
name: '',
idcCode: ''
})
const show = ref(false)
const lform = ref({})
const form = ref({
roomNum: 0,
phone: user?.phonenumber||'',
personArr: []
})
const rzRange = ref('')
const typeList = ref([
{
name: '成人票',
value: '1'
},
{
name: '儿童票',
value: '2'
},
{
name: '老年票',
value: '2'
}
])
const money = ref(0)
const choseRooms = ref([])
const rules = ref({
phone: { required: true, message: language.value==0? '请输入联系电话':"Please enter a contact number", trigger: 'blur' }
})
let usedays = 0
onMounted(() => {
console.log(route.query)
hotelName.value = route.query.hotelName
money.value = 0
rzRange.value = dayjs(route.query.start).format('YYYY-MM-DD')
initDays()
checkreRooms()
})
function initDays() {
// 可定日期范围
getBaseInfoByActiveId(route.params.cptId).then(res=>{
lform.value = res.data
}).catch(err=>{
console.log(err)
})
}
function disabledDateRZ(date) {
//判读今天大与form.value.travelStart
if (lform.value.travelStart) {
const today = dayjs().format('YYYY-MM-DD')
if (lform.value.travelStart < today) {
return !((date.getTime() >= dayjs(today).valueOf())&&(date.getTime() <= dayjs(lform.value.travelEnd).valueOf()))
} else {
return !((date.getTime() >= dayjs(lform.value.travelStart).valueOf())&&(date.getTime() <= dayjs(lform.value.travelEnd).valueOf()))
}
}
// return true
}
function changeRoomNum(e) {
console.log(e)
countMoney()
}
function checkreRooms() {
//获取票类型 typeList
}
const showAddPerson = (item) => {
if(item){
person.value = item
} else {
person.value = {
name: '',
idcCode: ''
}
}
show.value = true
}
const addPerson = () => {
if(!person.value.name){
ElMessage.warning(language.value == 0 ? '请填写姓名' : 'Please fill in the name')
return
}
if(!person.value.idcCode){
ElMessage.warning(language.value == 0 ? '请填写身份证号' : 'Please fill in the ID number')
return
}
form.value.personArr.push(person.value)
show.value = false
}
const delPerson = (item,index) => {
form.value.personArr.splice(index,1)
}
function countMoney() {
if (language.value == 0) {
money.value = ((form.value.roomNum * usedays) + ( form.value.addNum * usedays)).toFixed(2)
} else {
money.value = ((form.value.roomNum * usedays) + (form.value.addNum * usedays)).toFixed(2)
}
if (money.value == 'NaN') money.value = 0.00
}
function submit() {
if(!user){
useUserStore().setReLogin()
return
}
if(!rzRange.value)return ElMessage.warning(language.value == 0 ? '请选择预订日期' : 'Please select check-in time')
if(!form.value.phone){
ElMessage.warning(language.value == 0 ? '请填写手机号' : 'Please fill in the phone number')
return
}
if(form.value.personArr.length!=needPersonNum.value){
ElMessage.warning(language.value == 0 ? '出行人数与票数不匹配' : 'The number of people travelling does not match the number of rooms')
return
}
// 提交确认
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'
}
})
}
}
})
})
}
</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;
}
.border-rr {
border-radius: 5px;
border: 1px solid #DCDFE6;
}
.room {
font-weight: 400;
font-size: 14px;
color: #929AA0;
}
.ccitemBox {
overflow: auto;
label {
margin: 10px 0;
display: block;
min-height: 30px;
span {
color: #FF8124;
font-family: DIN Alternate;
font-size: 24px;
}
}
}
.ccitem {
display: flex;
justify-content: space-between;
font-size: 15px;
color: #666;
margin: 5px 0 10px;
label {
font-size: 16px;
color: #000;
}
span {
font-size: 13px;
}
}
.red {
color: #FF8124;
}
.fakeFormItem {
display: flex;
padding: 10px 0;
label{ height: 32px; font-size: var(--el-form-label-font-size); width: 120px;
color: var(--el-text-color-regular); padding: 0 12px 0 0;
line-height: 32px;flex: 0 0 auto;
display: inline-flex;
justify-content: flex-end;
align-items: center;gap: 10px;}
}
.tip{font-size: 14px;color: #666;padding: 0 10px;}
.personIt{display: flex;align-items: center;
.mation{width: 200px;font-size: 12px;
div{font-size: 14px;}
}
}
</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!