Skip to content

jijin / dance-pc

Go to a project
Toggle navigation
Toggle navigation pinning
d2bdf28e by 华明祺
Options

no message

1 parent 231f1f81
Inline Side-by-side
Showing 5 changed files with 524 additions and 432 deletions
src/apiPc/booking.js
......@@ -8,6 +8,14 @@ export function getHotelList(params) {
})
}
export function getScenicList(params) {
return request({
url: `/ota/activityScenic/getScenicList`,
method: 'get',
params: params
})
}
export function getStudioList(params) {
return request({
url: `/ota/studio/list`,
......@@ -23,6 +31,16 @@ export function getHotelById(id) {
})
}
export function getScenicById(id) {
return request({
url: `/ota/scenic/getScenicInfo`,
method: 'get',
params: {
id
}
})
}
export function getStudioById(id) {
return request({
url: `/ota/studio/${id}`,
......@@ -221,6 +239,18 @@ export function checkRoomPayByUserId(id) {
})
}
export function checkOrderPay(orderType) {
return request({
url: `/ota/norder/checkNonPayment`,
method: 'get',
params: {
orderType
}
})
}
export function submitInvoice(form) {
return request({
url: `/ota/invoice`,
......@@ -471,7 +501,7 @@ export function checkNonPayment() {
return request({
url: `/ota/norder/checkNonPayment`,
method: 'get',
params: {orderType: 5}
params: { orderType: 5 }
})
}
......@@ -507,7 +537,7 @@ export function aadCustomer(data) {
export function delCustomer(id) {
return request({
url: `/ota/customer/${id}`,
method: 'delete',
method: 'delete'
})
}
......@@ -537,3 +567,11 @@ export function getTicketOrderInfo(params) {
params
})
}
export function getGateListByLasId(params) {
return request({
url: `/ota/scenicConfig/getGateListByLasId`,
method: 'get',
params
})
}
......
src/routerPc/en.js
......@@ -6,12 +6,12 @@ import {
/* Layout */
import Layout from '@/layoutPc'
import Empty from '@/layoutPc/empty'
import NProgress from "nprogress";
import {getToken} from "@/utils/auth";
import useUserStore from "@/store/modules/user";
import {isRelogin} from "@/utils/request";
import {ElMessage} from "element-plus";
import Layout2 from "@/layoutPc/index2";
import NProgress from 'nprogress'
import { getToken } from '@/utils/auth'
import useUserStore from '@/store/modules/user'
import { isRelogin } from '@/utils/request'
import { ElMessage } from 'element-plus'
import Layout2 from '@/layoutPc/index2'
// import useUserStore from '@/store/modules/user'
/**
......@@ -64,7 +64,7 @@ export const constantRoutes = [
path: '/ticketSearch',
component: () => import('@/viewsPc/booking/ticketSearch'),
name: 'ticketSearch',
meta: {title: '票务订单查询'}
meta: { title: '票务订单查询' }
},
{
path: '/index',
......@@ -98,37 +98,37 @@ export const constantRoutes = [
path: 'wudao',
component: () => import('@/viewsPc/about/wudao'),
name: 'dangNews',
meta: {title: '舞蹈节'}
meta: { title: '舞蹈节' }
},
{
path: 'culture',
component: () => import('@/viewsPc/about/culture'),
name: 'culture',
meta: {title: '地方文化'}
meta: { title: '地方文化' }
},
{
path: 'leaderInfo/:id',
component: () => import('@/viewsPc/about/leaderInfo'),
name: 'leaderInfo',
meta: {title: '评委详情'}
meta: { title: '评委详情' }
},
{
path: 'wudaoEn',
component: () => import('@/viewsPc/about/wudao'),
name: 'dangNewsEn',
meta: {title: 'about us'}
meta: { title: 'about us' }
},
{
path: 'cultureEn',
component: () => import('@/viewsPc/about/culture_en'),
name: 'cultureEn',
meta: {title: 'culture'}
meta: { title: 'culture' }
},
{
path: 'regulations',
component: () => import('@/viewsPc/about/fileList'),
name: 'regulations',
meta: {title: 'rules and regulations'}
meta: { title: 'rules and regulations' }
}
]
},
......@@ -141,31 +141,31 @@ export const constantRoutes = [
path: 'index',
component: () => import('@/viewsPc/notice/index'),
name: 'notice',
meta: {title: 'NOTICEBOARD'}
meta: { title: 'NOTICEBOARD' }
},
{
path: 'index/list',
component: () => import('@/viewsPc/notice/list'),
name: 'noticeList',
meta: {title: '资讯列表'}
meta: { title: '资讯列表' }
},
{
path: 'index/coverlist',
component: () => import('@/viewsPc/notice/coverlist'),
name: 'coverList',
meta: {title: '图文列表'}
meta: { title: '图文列表' }
},
{
path: 'index/fileList',
component: () => import('@/viewsPc/notice/fileList'),
name: 'fileList',
meta: {title: '文件列表'}
meta: { title: '文件列表' }
},
{
path: 'index/personList',
component: () => import('@/viewsPc/notice/personList'),
name: 'personList',
meta: {title: '人员列表'}
meta: { title: '人员列表' }
}
]
},
......@@ -178,19 +178,19 @@ export const constantRoutes = [
path: 'index',
component: () => import('@/viewsPc/news/index'),
name: 'news',
meta: {title: 'NEWS'}
meta: { title: 'NEWS' }
},
{
path: 'list/:id',
component: () => import('@/viewsPc/news/list'),
name: 'newsList',
meta: {title: '新闻列表'}
meta: { title: '新闻列表' }
},
{
path: 'detail/:id',
component: () => import('@/viewsPc/news/detail'),
name: 'newsDetail',
meta: {title: '新闻详情'}
meta: { title: '新闻详情' }
}
]
},
......@@ -203,13 +203,13 @@ export const constantRoutes = [
path: 'index',
component: () => import('@/viewsPc/nationalTeam/index'),
name: 'nationalTeam',
meta: {title: '新闻'}
meta: { title: '新闻' }
},
{
path: 'index/personList',
component: () => import('@/viewsPc/nationalTeam/components/member'),
name: 'personListHasKind',
meta: {title: '人员列表'}
meta: { title: '人员列表' }
}
]
......@@ -223,7 +223,7 @@ export const constantRoutes = [
path: 'index',
component: () => import('@/viewsPc/meta/index'),
name: 'meta',
meta: {title: 'MEDIA'}
meta: { title: 'MEDIA' }
}
]
},
......@@ -236,7 +236,7 @@ export const constantRoutes = [
path: 'index',
component: () => import('@/viewsPc/saiC/index'),
name: 'saiC',
meta: {title: 'COMPETITIONS'}
meta: { title: 'COMPETITIONS' }
}
]
},
......@@ -249,7 +249,7 @@ export const constantRoutes = [
path: 'index',
component: () => import('@/viewsPc/guide/index'),
name: 'guide',
meta: {title: 'GUIDELINE'}
meta: { title: 'GUIDELINE' }
}
]
},
......@@ -262,7 +262,7 @@ export const constantRoutes = [
path: '',
component: () => import('@/viewsPc/searchList'),
name: 'searchList',
meta: {title: '搜索结果'}
meta: { title: '搜索结果' }
}
]
},
......@@ -275,25 +275,25 @@ export const constantRoutes = [
path: 'index',
component: () => import('@/viewsPc/competition/index'),
name: 'competition',
meta: {title: '竞赛服务'}
meta: { title: '竞赛服务' }
},
{
path: 'coach/:kind',
component: () => import('@/viewsPc/competition/coach'),
name: 'competitionCoach',
meta: {title: '竞赛服务'}
meta: { title: '竞赛服务' }
},
{
path: 'calendar',
component: () => import('@/viewsPc/competition/calendar'),
name: 'calendar',
meta: {title: '竞赛日程'}
meta: { title: '竞赛日程' }
},
{
path: 'domesticRanking',
component: () => import('@/viewsPc/competition/domesticRanking'),
name: 'domesticRanking',
meta: {title: '国内排名'}
meta: { title: '国内排名' }
}
]
},
......@@ -306,19 +306,19 @@ export const constantRoutes = [
path: 'list',
component: () => import('@/viewsPc/match/index'),
name: 'matchList',
meta: {title: '赛事'}
meta: { title: '赛事' }
},
{
path: 'list/:id',
component: () => import('@/viewsPc/match/detail_en'),
name: 'matchDetail',
meta: {title: '赛事详情'}
meta: { title: '赛事详情' }
},
{
path: 'list/reservationSearch',
component: () => import('@/viewsPc/match/reservationSearch.vue'),
name: 'reservationSearch',
meta: {title: '预订查询'}
meta: { title: '预订查询' }
}
]
},
......@@ -331,22 +331,22 @@ export const constantRoutes = [
path: '0',
component: () => import('@/viewsPc/register/personal'),
name: 'personalRegister',
meta: {title: 'Register'}
meta: { title: 'Register' }
}, {
path: '1',
component: () => import('@/viewsPc/register/team/team'),
name: 'teamRegister',
meta: {title: 'Register'}
meta: { title: 'Register' }
}, {
path: 'userAgreement',
component: () => import('@/viewsPc/register/userAgreement'),
name: 'userAgreement',
meta: {title: 'Register'}
meta: { title: 'Register' }
}, {
path: 'policy',
component: () => import('@/viewsPc/register/policy'),
name: 'policy',
meta: {title: 'Register'}
meta: { title: 'Register' }
}
]
},
......@@ -359,175 +359,175 @@ export const constantRoutes = [
path: 'ticket/:activeId',
component: () => import('@/viewsPc/booking/ticket/index.vue'),
name: 'ticket',
meta: {title: 'Ticket Booking'}
meta: { title: 'Ticket Booking' }
},
{
path: 'ticket/:activeId/:latId/:attId',
component: () => import('@/viewsPc/booking/ticket/confirmOrder.vue'),
name: 'confirmOrder',
meta: {title: 'confirmOrder'}
meta: { title: 'confirmOrder' }
},
{
path: 'ticket/peopleManage',
component: () => import('@/viewsPc/booking/ticket/peopleManage.vue'),
name: 'peopleManage',
meta: {title: 'peopleManage'}
meta: { title: 'peopleManage' }
},
{
path: 'ticket/addInvoice',
component: () => import('@/viewsPc/booking/ticket/addInvoice.vue'),
name: 'ticketAddInvoice',
meta: {title: 'ticketAddInvoice'}
meta: { title: 'ticketAddInvoice' }
},
{
path: 'ticket/invoiceDetail',
component: () => import('@/viewsPc/booking/ticket/invoiceDetail.vue'),
name: 'ticketInvoiceDetail',
meta: {title: 'ticketInvoiceDetail'}
meta: { title: 'ticketInvoiceDetail' }
},
{
path: 'hotel/:cptId',
component: () => import('@/viewsPc/booking/hotel'),
name: 'hotel',
meta: {title: 'Hotel Reservation'}
meta: { title: 'Hotel Reservation' }
},
{
path: 'hotel/:cptId/:hotelId',
component: () => import('@/viewsPc/booking/hotelDetail'),
name: 'hotelDetail',
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'}
meta: { title: 'Hotel Reservation' }
},
{
path: 'car/:cptId/:id',
component: () => import('@/viewsPc/booking/carOrder'),
name: 'carOrder',
meta: {title: 'Car Reservation'}
meta: { title: 'Car Reservation' }
},
{
path: 'hotel/:cptId/:hotelId/:roomId',
component: () => import('@/viewsPc/booking/hotelOrder'),
name: 'hotelOrder',
meta: {title: 'Hotel Reservation'}
},
{
path: 'travel/:cptId/:hotelId/:roomId',
component: () => import('@/viewsPc/booking/travelOrder'),
name: 'travelOrder',
meta: {title: 'Travel Reservation'}
meta: { title: 'Hotel Reservation' }
},
{
path: 'car/:cptId',
component: () => import('@/viewsPc/booking/car'),
name: 'car',
meta: {title: 'Vehicle Reservation'}
meta: { title: 'Vehicle Reservation' }
},
{
path: 'dinner/:cptId',
component: () => import('@/viewsPc/booking/dinner'),
name: 'dinner',
meta: {title: 'Dining Reservation'}
meta: { title: 'Dining Reservation' }
},
{
path: 'dinner/:cptId/:id',
component: () => import('@/viewsPc/booking/dinnerDetail'),
name: 'dinnerDetail',
meta: {title: 'Dining Reservation'}
meta: { title: 'Dining Reservation' }
},
{
path: 'dinner/:cptId/:id/:foodId',
component: () => import('@/viewsPc/booking/foodOrder'),
name: 'dinnerOrder',
meta: {title: 'Dinner Reservation'}
meta: { title: 'Dinner Reservation' }
},
{
path: 'makeUp/:cptId',
component: () => import('@/viewsPc/booking/makeUp'),
name: 'makeUp',
meta: {title: 'Makeup Appointment'}
meta: { title: 'Makeup Appointment' }
},
{
path: 'makeUp/:cptId/:id',
component: () => import('@/viewsPc/booking/makeUpDetail'),
name: 'makeUpDetail',
meta: {title: 'Makeup Appointment'}
meta: { title: 'Makeup Appointment' }
},
{
path: 'makeUp/:cptId/:id/:lasId',
component: () => import('@/viewsPc/booking/makeUpOrder.vue'),
name: 'makeUpOrder',
meta: {title: 'Makeup Reservation'}
meta: { title: 'Makeup Reservation' }
},
{
path: 'photography/:cptId',
component: () => import('@/viewsPc/booking/photography'),
name: 'photography',
meta: {title: 'Photography Appointment'}
meta: { title: 'Photography Appointment' }
},
{
path: 'photography/:cptId/:id',
component: () => import('@/viewsPc/booking/photographyDetail'),
name: 'photographyDetail',
meta: {title: 'Photography Reservation'}
meta: { title: 'Photography Reservation' }
},
{
path: 'photography/:cptId/:id/:lasId',
component: () => import('@/viewsPc/booking/photographyOrder.vue'),
name: 'photographyOrder',
meta: {title: 'Photography Appointment'}
meta: { title: 'Photography Appointment' }
},
{
path: 'pay',
component: () => import('@/viewsPc/booking/pay'),
name: 'bookingPay',
meta: {title: 'pay'}
meta: { title: 'pay' }
},
{
path: 'payticket',
component: () => import('@/viewsPc/booking/payticket'),
name: 'payticket',
meta: {title: '票务'}
meta: { title: '票务' }
},
{
path: 'payOk',
component: () => import('@/viewsPc/booking/payOk'),
name: 'bookingPayOk',
meta: {title: 'payOk'}
meta: { title: 'payOk' }
},
{
path: 'payticketOk',
component: () => import('@/viewsPc/booking/payticketOk'),
name: 'payticketOk',
meta: {title: '票务-paypal'}
meta: { title: '票务-paypal' }
},
{
path: 'invoice',
component: () => import('@/viewsPc/booking/invoicing'),
name: 'invoice',
meta: {title: '我的发票'}
meta: { title: '我的发票' }
},
{
path: 'invoiceDetail',
component: () => import('@/viewsPc/booking/invoiceDetail'),
name: 'invoiceDetail',
meta: {title: '发票详情'}
meta: { title: '发票详情' }
},
{
path: 'addInvoice',
component: () => import('@/viewsPc/booking/addInvoice'),
name: 'addInvoice',
meta: {title: '开发票'}
meta: { title: '开发票' }
},
{
path: 'travel/:cptId',
component: () => import('@/viewsPc/booking/travel'),
name: 'travel',
meta: { title: 'Hotel Reservation' }
},
{
path: 'travel/:cptId/:scenicId',
component: () => import('@/viewsPc/booking/travelDetail'),
name: 'travelDetail',
meta: { title: 'Hotel Reservation' }
},
{
path: 'travel/:cptId/:scenicId/:start',
component: () => import('@/viewsPc/booking/travelOrder'),
name: 'travelOrder',
meta: { title: 'Travel Reservation' }
}
]
},
......@@ -539,49 +539,49 @@ export const constantRoutes = [
path: 'myInfo',
component: () => import('@/viewsPc/center/myInfo'),
name: 'myInfo',
meta: {title: '个人中心'}
meta: { title: '个人中心' }
},
{
path: 'myPassword',
component: () => import('@/viewsPc/center/myPassword'),
name: 'myPassword',
meta: {title: '修改密码'}
meta: { title: '修改密码' }
},
{
path: 'myCertification',
component: () => import('@/viewsPc/center/myCertification'),
name: 'myCertification',
meta: {title: 'institutional accreditation'}
meta: { title: 'institutional accreditation' }
},
{
path: 'myMember',
component: () => import('@/viewsPc/center/myMember'),
name: 'myMember',
meta: {title: 'Player Management'}
meta: { title: 'Player Management' }
},
{
path: 'myMatch',
component: () => import('@/viewsPc/center/myMatch'),
name: 'myMatch',
meta: {title: 'My registration'}
meta: { title: 'My registration' }
},
{
path: 'myReservation',
component: () => import('@/viewsPc/center/myReservation'),
name: 'myReservation',
meta: {title: 'My reservation'}
meta: { title: 'My reservation' }
},
{
path: 'mySms',
component: () => import('@/viewsPc/center/mySms'),
name: 'mySms',
meta: {title: 'System messages'}
meta: { title: 'System messages' }
},
{
path: 'myKP',
component: () => import('@/viewsPc/center/myCanKP'),
name: 'myKP',
meta: {title: '发票管理'}
meta: { title: '发票管理' }
}
]
},
......@@ -595,71 +595,71 @@ export const constantRoutes = [
path: 'detail',
name: 'seat_detail',
component: () => import('@/viewsPc/seat/ticket-detail'),
meta: {title: '购票详情'},
meta: { title: '购票详情' },
props: route => ({
activityId: route.query.id,
activityId: route.query.id
})
},
{
path: 'seat_picker',
name: 'seat_picker',
component: () => import('@/viewsPc/seat/seat-picker'),
meta: {title: '选座'},
meta: { title: '选座' },
props: route => ({
activityId: route.query.id,
activityId: route.query.id
})
},
{
path: 'order',
name: 'seat_order',
component: () => import('@/viewsPc/seat/order-list'),
meta: {title: '我的订单'},
meta: { title: '我的订单' },
props: route => ({
activityId: route.query.id,
activityId: route.query.id
})
},
{
path: 'order_detail',
name: 'order_detail',
component: () => import('@/viewsPc/seat/order-detail'),
meta: {title: '订单详情'},
meta: { title: '订单详情' },
props: route => ({
activityId: route.query.id,
activityId: route.query.id
})
},
{
path: 'confirm_order',
name: 'confirm_order',
component: () => import('@/viewsPc/seat/confirm-order'),
meta: {title: '确认订单'},
meta: { title: '确认订单' },
props: route => ({
activityId: route.query.id,
activityId: route.query.id
})
},
{
path: 'add_watch_people',
name: 'add_watch_people',
component: () => import('@/viewsPc/seat/add-watch-people'),
meta: {title: '新增观影人'}
meta: { title: '新增观影人' }
},
{
path: 'people_manage',
name: 'people_manage',
component: () => import('@/viewsPc/seat/people-manage'),
meta: {title: '观影人管理'}
meta: { title: '观影人管理' }
},
{
path: 'payTicketOk',
component: () => import('@/viewsPc/seat/payticketOk.vue'),
name: 'payTicketOk',
meta: {title: '支付成功'}
meta: { title: '支付成功' }
},
{
path: 'payTicketLoser',
component: () => import('@/viewsPc/seat/payticketLoser.vue'),
name: 'payTicketLoser',
meta: {title: '支付失败'}
},
meta: { title: '支付失败' }
}
]
}
]
......@@ -677,59 +677,59 @@ export const constantRoutes = [
path: 'payOk',
component: () => import('@/viewsPc/match/payOk'),
name: 'payOk',
meta: {title: '支付成功'}
meta: { title: '支付成功' }
},
{
path: 'commitDone/:orderId',
component: () => import('@/viewsPc/match/commitDone'),
name: 'commitDone',
meta: {title: '提交审核'}
meta: { title: '提交审核' }
},
{
path: 'pay',
component: () => import('@/viewsPc/match/pay'),
name: 'signPay',
meta: {title: '缴费清单'}
meta: { title: '缴费清单' }
},
{
path: 'list/:id/teamSign',
component: () => import('@/viewsPc/match/teamSign'),
name: 'teamSign',
meta: {title: '团队报名'}
meta: { title: '团队报名' }
},
{
path: 'list/:id/teamSignCn',
component: () => import('@/viewsPc/match/teamSign_Cn'),
name: 'teamSignCn',
meta: {title: '团队报名-国内赛'}
meta: { title: '团队报名-国内赛' }
},
{
path: 'list/:id/chooseCoach',
component: () => import('@/viewsPc/match/chooseCoach'),
name: 'chooseCoach',
meta: {title: '选择教练/领队/其他'}
meta: { title: '选择教练/领队/其他' }
},
{
path: 'list/:id/chooseSportsman',
component: () => import('@/viewsPc/match/chooseSportsman'),
name: 'chooseSportsman',
meta: {title: '选择运动员'}
meta: { title: '选择运动员' }
},
{
path: 'list/:id/chooseProject',
component: () => import('@/viewsPc/match/chooseProject'),
name: 'chooseProject',
meta: {title: '选择参赛项目'}
meta: { title: '选择参赛项目' }
},
{
path: 'list/:id/signPreview',
component: () => import('@/viewsPc/match/signPreview'),
name: 'signPreview',
meta: {title: '提交审核'}
meta: { title: '提交审核' }
}
]
},
}
]
}
]
......@@ -742,11 +742,11 @@ const router = createRouter({
if (savedPosition) {
return savedPosition
} else {
return {top: 0}
return { top: 0 }
}
}
})
NProgress.configure({showSpinner: false})
NProgress.configure({ showSpinner: false })
router.beforeEach((to, from, next) => {
NProgress.start()
......@@ -760,7 +760,7 @@ router.beforeEach((to, from, next) => {
}).catch(err => {
useUserStore().logOut().then(() => {
ElMessage.error(err)
next({path: '/'})
next({ path: '/' })
})
})
} else {
......
src/viewsPc/booking/travel.vue
<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 class="banner">
<h2>{{ language==0?'旅游服务':'Travel Service' }}</h2>
</div>
<div class="box">
<div class="searchBar">
<el-input v-model="query.name" :placeholder="language==0?'请输入关键字搜索':'Search'" class="no-border" />
<el-button size="large" type="primary" class="btn-lineG" icon="search" @click="getList">
{{ language==0?'搜索':'Search' }}</el-button>
</div>
</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 v-loading="loading" class="box">
<el-row :gutter="20">
<el-col
v-for="(h,index) in list" :lg="24" :md="24" :sm="24" :xs="24"
:xl="24" class="mb20"
>
<el-card>
<!-- 酒店列表-->
<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.rank||0)" src="@/assets/booking/star.png">
</div>
<p class="esp addr mt20">
<el-icon size="16" style="position: relative;top: 2px" color="#929AA0">
<Clock />
</el-icon>
<span class="ml5">{{ language == 0 ? '开园时间' : 'Opening Time' }}：{{ h.startTime }} ～ {{ h.workTime }}</span>
</p>
<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" @click="goDetail(h)">{{ 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()
})
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'
function getList() {
loading.value = true
booking.getHotelList(query.value).then(res=>{
list.value = res.rows
loading.value = false
console.log(list.value)
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()
})
}).catch(e=>{
loading.value = false
})
function getList() {
loading.value = true
booking.getScenicList(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
}
function goDetail(item) {
if(!user){
useStore().setVisitor()
return
router.push({
name: 'travelDetail',
params: {
scenicId: item.scenicId
},
query: {
lasId: item.id
}
router.push({
name:'travelDetail',
params:{
hotelId:item.hotelId,
},
query:{
id:item.id
}
})
}
})
}
</script>
<style scoped lang="scss">
......
src/viewsPc/booking/travelDetail.vue
<template>
<div>
<div class="box">
<el-card class="mt30" v-loading="loading">
<el-card v-loading="loading" class="mt30">
<el-row v-if="form" class="hotel" align="middle" :gutter="20">
<!-- <el-col :span="6">-->
<!-- <img class="w100" :src="fillImgUrl(form.photos?.split(',')[0])"/>-->
......@@ -9,57 +9,56 @@
<el-col :span="language == 0?16:24">
<h3 class="esp flex">{{ form?.name }}
<el-tag class="ml10">5A</el-tag>
<div class="starBox ml20">
<img v-for="i in Number(form?.rank||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 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/>
<Clock />
</el-icon>
<span class="mr10">{{ language == 0 ? '开园时间' : 'Opening Time' }}：{{ form?.checkInTime }} ～ {{ form?.checkOutTime }}</span>
<span class="mr10">{{ language == 0 ? '开园时间' : 'Opening Time' }}：{{ form?.startTime }} ～ {{ form?.workTime }}</span>
</div>
<div class="info">
<el-icon>
<Phone/>
<Phone />
</el-icon>
<span class="mr10">{{ language == 0 ? '联系方式' : 'Contact' }}：0510-12345678</span>
<span class="mr10">{{ language == 0 ? '联系方式' : 'Contact' }}：{{ form?.contact }}</span>
</div>
<div class="info esp">
<el-icon>
<MapLocation/>
<MapLocation />
</el-icon>
<span>{{ form?.addName }}</span>
<span>{{ form?.address }}</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 :class="showAll?'':'esp_2'" @click="showAll=!showAll" v-html="form.introduction.toString()" />
</div>
</el-col>
</el-row>
<el-empty v-else :image="`/img/order_no.png`" :image-size="228" description=""/>
<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(',')"/>
<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)">
<el-col v-for="(p,index) in form?.photos?.split(',').slice(1,7)" :key="index" :span="8" class="oddmb">
<div class="imgbox hotelImg">
<el-image :src="fillImgUrl(p)" fit="cover"/>
<el-image :src="fillImgUrl(p)" fit="cover" />
</div>
</el-col>
</el-row>
......@@ -76,14 +75,13 @@
</ul>
</div>
<div>
<!-- 日期-->
<el-calendar class="mt20" v-model="currentDate" :range="calendarRange">
<!-- 日期-->
<el-calendar v-model="currentDate" class="mt20" :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'>
<el-row justify="center" align="middle">
<!-- <div class="canBtn"><el-icon><ArrowLeftBold /></el-icon></div>-->
<div class="cTitle">
<!-- <el-date-picker-->
......@@ -98,7 +96,7 @@
<!-- @change="changee"-->
<!-- />-->
<!-- <el-input readonly :value="date" type="text" size="small" style="width: 280px"></el-input>-->
{{date}}
{{ date }}
</div>
<!-- <div class="canBtn"><el-icon><ArrowRightBold /></el-icon></div>-->
</el-row>
......@@ -106,20 +104,20 @@
<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'
v-model="currentDate1"
type="date"
placeholder="YYYY-MM-DD"
format="YYYY-MM-DD"
:disabled-date="disabledDateRZ"
:clearable="false"
@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)">
<div :class="data.data.day==query.currentDate?'primaryDate date':'date'" @click="selectDate(data.data.day)">
{{ data.data.day.slice(8, 10) }}
</div>
</template>
......@@ -127,8 +125,10 @@
</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">
<el-button
style="color: #fff" :disabled="btnDisable" size="large"
class="w200px btn-lineG" :class="{'forbid':!(!hotTime[0])}" round @click="goOrder"
>
{{ language==0?'立即预订':'BOOK NOW' }}
</el-button>
</div>
......@@ -138,21 +138,21 @@
</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";
import { useRouter } from 'vue-router'
import { ref, reactive, onMounted, getCurrentInstance, computed } from 'vue'
import { useRoute } from 'vue-router'
import { dayjs } from 'element-plus'
import { getHotelById, getHotelRooms, checkRoomPayByUserId, getScenicById, checkOrderPay } 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 calendarRange = ref([dayjs(currentDate.value).toDate(), (dayjs(currentDate.value).toDate())])
const user = useUserStore().user
const useStore = useUserStore
......@@ -161,7 +161,7 @@ const router = useRouter()
const route = useRoute()
const form = ref({})
const query = ref({
hotelId: route.query.id
lasId: route.query.lasId
})
const hotTime = ref([])
const showAll = ref(false)
......@@ -170,7 +170,7 @@ const roomList = ref([])
const map = ref(null)
const formTime = ref({})
let baseHotTime;
let baseHotTime
onMounted(() => {
console.log(route.params)
......@@ -185,7 +185,6 @@ onMounted(() => {
getData()
})
})
function initTime() {
......@@ -197,13 +196,9 @@ function initTime() {
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')]
if (dayjs().isBefore(dayjs(formTime.value.scenicStart))) {
baseHotTime = [dayjs(formTime.value.scenicStart).format('YYYY-MM-DD'), dayjs(formTime.value.scenicStart).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')]
}
}
......@@ -211,92 +206,107 @@ function getDateTime() {
function getData() {
loading.value = true
getHotelById(route.params.hotelId).then(res => {
getScenicById(route.params.scenicId).then(res => {
loading.value = false
form.value = res.data
initMap()
// initMap()
}).catch(err => {
console.log(err)
})
}
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())]
}
function selectDate(date) {
currentDate1.value= currentDate.value=dayjs(date).toDate()
currentDate1.value = currentDate.value = dayjs(date).toDate()
console.log(date)
}
const btnDisable = computed(() => {
if (formTime.value.scenicStart) {
const curr = currentDate.value.valueOf()
const today = dayjs(dayjs().format('YYYY-MM-DD')).valueOf()
const start = dayjs(formTime.value.scenicStart).valueOf()
const end = dayjs(formTime.value.scenicEnd).valueOf()
if (curr >= start && curr <= end && curr >= today) {
return false
}
}
return true
})
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 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,//显示信息窗口的坐标
content: form.value.address, // 信息窗口内容
position: infoWindowLocation, // 显示信息窗口的坐标
map: map,
offset: {x: 0, y: -32}
});
infowindow.close();
offset: { x: 0, y: -32 }
})
infowindow.close()
var marker = new TMap.MultiMarker({
map: map,
//样式定义
// 样式定义
styles: {
"myStyle": new TMap.MarkerStyle({
"anchor": {x: 16, y: 32}
'myStyle': new TMap.MarkerStyle({
'anchor': { x: 16, y: 32 }
})
},
//点标记数据数组
// 点标记数据数组
geometries: [{
"id": "1", //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
'id': '1', // 点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
// "styleId": 'myStyle', //指定样式id
"position": new TMap.LatLng(form.value.latitude, form.value.longitude), //点标记坐标位置
"properties": {//自定义属性
"title": form.value.name
'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);//设置信息窗位置
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 (!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(() => {
checkOrderPay(6).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',
}
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',
name: 'myReservation'
})
})
return
......@@ -304,19 +314,16 @@ function goOrder(room) {
goNext()
})
})
}
function goNext() {
router.push({
name: 'travelOrder',
params: {
roomId: 0
start: dayjs(currentDate.value).format('YYYY-MM-DD')
},
query: {
hotelName: form.value.name,
start:currentDate.value
lasId: query.value.id
}
})
}
......@@ -335,13 +342,13 @@ function getDaysBetween() {
}
function disabledDateRZ(date) {
//判读今天大与form.value.hqStart
if (formTime.value.hqStart) {
// 判读今天大与form.value.hqStart
if (formTime.value.scenicStart) {
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()))
if (formTime.value.scenicStart < today) {
return !((date.getTime() >= dayjs(today).valueOf()) && (date.getTime() <= dayjs(formTime.value.scenicEnd).valueOf()))
} else {
return !((date.getTime() >= dayjs(formTime.value.hqStart).valueOf()) && (date.getTime() <= dayjs(formTime.value.hqEnd).valueOf()))
return !((date.getTime() >= dayjs(formTime.value.scenicStart).valueOf()) && (date.getTime() <= dayjs(formTime.value.scenicEnd).valueOf()))
}
}
// return true
......@@ -352,8 +359,8 @@ function goMap() {
// 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")
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>
......
src/viewsPc/booking/travelOrder.vue
......@@ -9,60 +9,91 @@
<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>
<el-row 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">{{ scenicItem?.name }}
<div class="starBox ml20">
<img v-for="i in Number(scenicItem?.rank||0)" src="@/assets/booking/star.png">
</div>
</h3>
<div class="info">
<el-icon>
<Clock />
</el-icon>
<span class="mr10">{{ language == 0 ? '开园时间' : 'Opening Time' }}：{{ scenicItem?.startTime }} ～ {{ scenicItem?.workTime }}</span>
</div>
<div class="info">
<el-icon>
<Phone />
</el-icon>
<span class="mr10">{{ language == 0 ? '联系方式' : 'Contact' }}：{{ scenicItem?.contact }}</span>
</div>
<div class="info esp">
<el-icon>
<MapLocation />
</el-icon>
<span>{{ scenicItem?.address }}</span>
</div>
</el-col>
</el-row>
</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 ref="formRef" v-loading="loading" :model="form" :label-width="language == 0 ?'120':'160'" :rules="rules">
<!-- :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"/>
<el-date-picker
v-model="rzRange"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
:disabled-date="disabledDateRZ"
:clearable="false"
@change="dateChange"
/>
<div class="tip" v-if="lform.travelStart">{{ language==0?'可订日期':'Available date' }}：{{ lform.travelStart.slice(0, 10) }} ~ {{ lform.travelEnd.slice(0, 10) }}</div>
<div v-if="lform.scenicStart" class="tip">{{ language==0?'可订日期':'Available date' }}：{{ lform.scenicStart.slice(0, 10) }} ~ {{ lform.scenicEnd.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)"/>
<el-form-item v-for="(n,i) in gateList" :key="i" :label="language==0? n.name:'Rooms'" required prop="roomNum">
<el-input-number v-model="n.count" :min="0" :max="n.leftNum" @change="changeRoomNum(n)" />
<div class="red ml20">
<span v-if="language == 0">剩余票数:{{ canOrderNum }}</span>
<span v-else>{{ canOrderNum }} Remaining rooms</span>
<span v-if="language == 0">剩余票数:{{ n.leftNum }}</span>
<span v-else>{{ n.leftNum }} 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>
<div v-if="language==1" class="tip">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 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">
<div v-for="(n,index) in form.personArr" class="fakeFormItem personIt">
<label>
<el-icon @click="delPerson(n,index)"><Remove /></el-icon>
游客{{index+1}}
游客{{ index+1 }}
</label>
<div class="mation">
<div>{{n.name}}</div>
身份证：{{n.idcCode}}
<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-input v-model="form.phone" />
</el-form-item>
</el-form>
......@@ -72,14 +103,14 @@
<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>
<span v-if="language==0" class="fr">{{
language == 0 ? '¥' : '€'
}}{{ ( form.roomNum * choseRooms.length).toFixed(2) }}</span>
<span v-else class="fr">{{
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">
<div v-for="(c, index) in choseRooms" v-show="form.roomNum>0" :key="index" class="ccitem">
{{ c }}
<span v-if="language==0">{{ form.roomNum }}*{{ language == 0 ? '¥' : '€' }}{{ room.roomPrice }}</span>
<span v-else>{{ form.roomNum }}*{{ language == 0 ? '¥' : '€' }}{{ room.roomPriceEn }}</span>
......@@ -87,7 +118,8 @@
<label>{{ language == 0 ? '共计' : 'Total' }}<span
class="fr bigMoney">{{ language == 0 ? '¥' : '€' }}{{ money }}</span></label>
class="fr bigMoney"
>{{ language == 0 ? '¥' : '€' }}{{ money }}</span></label>
</div>
</el-col>
......@@ -106,20 +138,20 @@
</el-col>
</el-row>
</el-card>
<div style="height: 60px;"></div>
<div style="height: 60px;" />
</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>
<el-form ref="personRef" label-width="100">
<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">
......@@ -132,19 +164,21 @@
</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 { useRouter, useRoute } from 'vue-router'
import { ref, onMounted } from 'vue'
import { useStorage } from '@vueuse/core/index'
import { getBaseInfoByActiveId, getGateListByLasId, getScenicById, newsSubmitOrderHotel } from '@/apiPc/booking'
import dayjs from 'dayjs'
import {ElMessage,ElMessageBox} from "element-plus";
import useUserStore from "@/store/modules/user";
import { ElMessage, ElMessageBox } from 'element-plus'
import useUserStore from '@/store/modules/user'
import _ from 'lodash'
const user = useUserStore().user
const language = useStorage('language', 0)
const router = useRouter()
const route = useRoute()
const room = ref({})
const hotelName = ref('')
const loading = ref(false)
const canOrderNum = ref(0)
const needPersonNum = ref(0)
const person = ref({
......@@ -153,70 +187,80 @@ const person = ref({
})
const show = ref(false)
const lform = ref({})
const scenicItem = ref({})
const form = ref({
roomNum: 0,
phone: user?.phonenumber||'',
phone: user?.phonenumber || '',
personArr: []
})
const rzRange = ref('')
const typeList = ref([
{
name: '成人票',
value: '1'
},
{
name: '儿童票',
value: '2'
},
{
name: '老年票',
value: '2'
}
])
const gateList = ref([])
const money = ref(0)
const choseRooms = ref([])
const rules = ref({
phone: { required: true, message: language.value==0? '请输入联系电话':"Please enter a contact number", trigger: 'blur' }
phone: { required: true, message: language.value == 0 ? '请输入联系电话' : 'Please enter a contact number', trigger: 'blur' }
})
let usedays = 0
const 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')
rzRange.value = route.params.start
getScenic()
initDays()
checkreRooms()
getGate()
})
function initDays() {
// 可定日期范围
getBaseInfoByActiveId(route.params.cptId).then(res=>{
lform.value = res.data
}).catch(err=>{
console.log(err)
getBaseInfoByActiveId(route.params.cptId).then(res => {
lform.value = res.data
})
}
function getScenic() {
getScenicById(route.params.scenicId).then(res => {
scenicItem.value = res.data
})
}
function getGate() {
gateList.value = []
loading.value = true
getGateListByLasId({
lasId: route.query.lasId,
scenicDate: rzRange.value
}).then(res => {
gateList.value = res.data
_.each(gateList.value, item => {
item.count = 0
item.leftNum = item.num - item.orderCount
})
}).finally(() => {
loading.value = false
})
}
function disabledDateRZ(date) {
//判读今天大与form.value.travelStart
if (lform.value.travelStart) {
// 判读今天大与form.value.travelStart
if (lform.value.scenicStart) {
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()))
if (lform.value.scenicStart < today) {
return !((date.getTime() >= dayjs(today).valueOf()) && (date.getTime() <= dayjs(lform.value.scenicEnd).valueOf()))
} else {
return !((date.getTime() >= dayjs(lform.value.travelStart).valueOf())&&(date.getTime() <= dayjs(lform.value.travelEnd).valueOf()))
return !((date.getTime() >= dayjs(lform.value.scenicStart).valueOf()) && (date.getTime() <= dayjs(lform.value.scenicEnd).valueOf()))
}
}
// return true
}
function dateChange() {
getGate()
}
function changeRoomNum(e) {
console.log(e)
countMoney()
}
function checkreRooms() {
//获取票类型 typeList
}
const showAddPerson = (item) => {
if(item){
if (item) {
person.value = item
} else {
person.value = {
......@@ -227,42 +271,41 @@ const showAddPerson = (item) => {
show.value = true
}
const addPerson = () => {
if(!person.value.name){
if (!person.value.name) {
ElMessage.warning(language.value == 0 ? '请填写姓名' : 'Please fill in the name')
return
}
if(!person.value.idcCode){
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)
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)
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){
if (!user) {
useUserStore().setReLogin()
return
}
if(!rzRange.value)return ElMessage.warning(language.value == 0 ? '请选择预订日期' : 'Please select check-in time')
if(!form.value.phone){
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){
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
}
......@@ -279,13 +322,13 @@ function submit() {
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'
orderId: res.data.orderId,
money: res.data.total,
type: 'hotel'
}
})
}
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!