Skip to content

jijin / dance-pc

Go to a project
Toggle navigation
Toggle navigation pinning
db50ac0d by 杨炀
Options

no message

1 parent 2bcae8ef
Inline Side-by-side
Showing 14 changed files with 1389 additions and 163 deletions
src/apiPc/booking.js
......@@ -41,6 +41,20 @@ export function getRoomBilldetailbyId(params) {
params: params
})
}
export function getCarBilldetailbyId(params) {
return request({
url: `/ota/norder/getOrderByOrderId`,
method: 'get',
params: params
})
}
export function getFoodBilldetailbyId(params) {
return request({
url: `/ota/orderFood/getFoodOrderInfoByOrder`,
method: 'get',
params: params
})
}
export function getActivityCarList(params) {
return request({
url: `/ota/activityVehicle/wxList`,
......@@ -48,3 +62,45 @@ export function getActivityCarList(params) {
params: params
})
}
export function submitOrderCar(data) {
return request({
url: `/ota/norder/submitOrderCar`,
method: 'post',
data: data
})
}
export function getActivityRestaurantList(params) {
return request({
url: `/ota/activityRestaurant/list`,
method: 'get',
params: params
})
}
export function getMenuById(params) {
return request({
url: `/ota/activityFood/list`,
method: 'get',
params: params
})
}
export function submitOrderFood(form) {
return request({
url: `/ota/norder/submitOrderFood`,
method: 'post',
data: form
})
}
export function createWePay(data) {
return request({
url: `/ota/norder/wxPay`,
method: 'post',
data:data
})
}
export function createPalPay(data) {
return request({
url: `/ota/norder/palPay`,
method: 'post',
data:data
})
}
......
src/assets/styles/ruoyi.scss
......@@ -7,7 +7,7 @@
.popo{position: absolute;left: 0;}
.no-pointer { pointer-events: none }
.blur20 { filter: blur(20px) }
.m0{margin: 0;}
.flex{display: flex;}
.text-gray{color: #999}
......@@ -262,7 +262,7 @@ img{display: block;}
}
.text-warning {
color: #f8ac59;
color: #FF8124;
}
.text-danger {
......@@ -1488,3 +1488,19 @@ img{display: block;}
transform: translateY(5px)
}
}
.w40px{width: 40px}
.plr20{padding: 0 20px}
.mlr20{margin: 0 20px}
.jcc{justify-content: center!important;}
.jcb{justify-content: space-between!important;}
.aic{align-items: center;}
.br10{border-radius: 10px;overflow: hidden}
.w150px{width: 150px}
h3.afterLine{
color: var(--el-color-primary);position: relative;font-size: 16px;
&::after{
content: '';position: absolute;background: #DCDFE6;
height: 1px;width: calc(100% - 4em - 20px);right: 0px;
top:0;bottom: 0;margin: auto;
}
}
......
src/routerPc/en.js
......@@ -386,6 +386,18 @@ export const constantRoutes = [
meta: { title: 'Dining Reservation' }
},
{
path: 'dinner/:cptId/:id',
component: () => import('@/viewsPc/booking/dinnerDetail'),
name: 'dinnerDetail',
meta: { title: 'Dining Reservation' }
},
{
path: 'dinner/:cptId/:id/:foodId',
component: () => import('@/viewsPc/booking/foodOrder'),
name: 'dinnerOrder',
meta: { title: 'Dinner Reservation' }
},
{
path: 'makeUp/:cptId',
component: () => import('@/viewsPc/booking/makeUp'),
name: 'makeUp',
......@@ -402,6 +414,12 @@ export const constantRoutes = [
component: () => import('@/viewsPc/booking/pay'),
name: 'bookingPay',
meta: { title: 'pay' }
},
{
path: 'payOk',
component: () => import('@/viewsPc/booking/payOk'),
name: 'bookingPayOk',
meta: { title: 'payOk' }
}
]
},
......
src/viewsPc/booking/car.vue
......@@ -56,7 +56,19 @@
</el-row>
</el-col>
<el-col :span="3">
<div class="price">{{ language==0?'¥':'€' }}<span>{{language==0?r.inPrice:r.inPriceEn}}</span>起</div>
<div class="price" v-if="language==0">¥
<span v-if="r.outPrice&&r.inPrice">{{Number(r.inPrice) > Number(r.outPrice)?r.outPrice:r.inPrice}}</span>
<span v-else-if="r.inPrice>0">{{r.inPrice}}</span>
<span v-else>{{r.outPrice}}</span>
起
</div>
<div class="price" v-else>
€
<span v-if="r.outPriceEn&&r.inPriceEn">{{(Number(r.inPriceEn)||0) > Number(r.outPriceEn)?r.outPriceEn:r.inPriceEn}}</span>
<span v-else-if="r.inPriceEn>0">{{r.inPriceEn}}</span>
<span v-else>{{r.outPriceEn}}</span>
</div>
</el-col>
<el-col :span="3">
<el-button class="btn-lineG w100" round type="primary" @click="goOrder(h,r)">{{ language==0?'我要预定':'Select' }}</el-button>
......@@ -64,7 +76,7 @@
</el-row>
</div>
<el-empty v-if="list.length == 0" :image="`/img/order_no.png`" :image-size="228" description=""/>
<el-empty v-if="h.carVoList.length == 0" :image="`/img/order_no.png`" :image-size="228" description=""/>
</div>
</el-collapse-item>
......@@ -83,7 +95,8 @@ 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 {getActivityCarList} from "@/apiPc/booking";
import useUserStore from "@/store/modules/user";
const user = useUserStore().user
const router = useRouter()
const route = useRoute()
const language= useStorage('language',0)
......@@ -109,6 +122,10 @@ function getList() {
})
}
function goOrder(item,car) {
if(!user){
useUserStore().setReLogin()
return
}
router.push({
name:'carOrder',
params:{
......@@ -123,8 +140,7 @@ function goOrder(item,car) {
</script>
<style scoped lang="scss">
.w40px{width: 40px}
.plr20{padding: 0 20px}
.hotel{margin-bottom: 20px;cursor: pointer;
.index{display: flex;font-weight: 500;padding-left: 20px;
font-size: 18px;align-items: center;
......
src/viewsPc/booking/carOrder.vue
<template>
<div>
<div class="box">
<el-card class="mt30">
<div class="flex">
<p class="esp">{{car.checkIn}}</p>
<img src="@/assets/booking/wf.png"/>
<p class="esp text-right">{{car.checkOut}}</p>
<div>
<div class="box">
<el-card :body-style="{ padding: '0px' }" class="mt20">
<div slot="header">
<div class="bg-lineg uppercase">{{
language == 0 ? '车辆预约下单' : 'TRANSPORTATION RESERVATION order'
}}
</div>
</el-card>
<el-card class="mt30 mb60">
<div class="lineHead">
<ul>
<li>{{ language == 0 ? '车型选择' : 'Available Cars' }}</li>
</ul>
</div>
<div>
<div v-for="(r,index) in list" :key="index" class="room">
<el-row :gutter="30" align="middle">
<el-col :span="4">
<div class="roomImg">
<img :src="fillImgUrl(r.photo?.split(',')[0])">
</div>
</el-col>
<el-col :span="14">
<h3 class="name">{{ r.roomType }}</h3>
<el-row :gutter="10">
<el-col :span="8">{{ r.area }}m²</el-col>
<el-col :span="8" v-show="r.windowFlag==1"> {{ language==0?'有窗':'With windows' }}</el-col>
<el-col :span="8" v-show="r.windowFlag==0"> {{ language==0?'无窗':'Windowless' }}</el-col>
<el-col :span="8" v-show="r.bathroomFlag==1"> {{ language==0?'热水洗浴':'Shower' }}</el-col>
<!-- <text v-show="r.bathroomFlag==0"> </text> -->
<el-col :span="8" v-show="r.addBedFlag==1"> {{ language==0?'允许加床':'Extra bed' }} </el-col>
<el-col :span="8" v-if="r.breakfastNum&&r.breakfastNum > '0'">
{{ r.breakfastNum }}{{ language==0?'份早餐':' breakfasts' }}
</el-col>
<el-col :span="8" v-else>{{ language==0?'无早餐':'No breakfast' }}</el-col>
</el-row>
</el-col>
<el-col :span="3">
<div class="price">{{ language==0?'¥':'€' }}<span>{{language==0?r.roomPrice:r.roomPriceEn}}</span></div>
</el-col>
<el-col :span="3">
<div class="bg-lineg" v-if="language==0" @click="goOrder(r)">
订
<div>{{ language==0?'在线付':'Online' }}</div>
</div>
<el-row class="pd20" :gutter="20">
<el-col :span="14">
<div class="border-info">
<div class="flex aic">
<h3 class="esp">{{ item.checkIn }}</h3>
<img class="w40px mlr20 " style="height: 40px;" src="@/assets/booking/wf.png"/>
<h3 class="esp">{{ item.checkOut }}</h3>
</div>
<div class="flex">
<img class="w150px br10 as16_9" :src="fillImgUrl(car.photos?.split(',')[0])"/>
<div class="ml20">
<div class="roomType">{{ car.carType }}</div>
<div class="tagbox">
<span class="tag">{{ car.carColor }}</span>
<span class="tag" v-show="car.checkOut==1">可送车</span>
<span class="tag" v-show="car.checkIn==1">可接车</span>
</div>
<el-button v-else class="btn-lineG w100" round type="primary" @click="goOrder(r)">Select</el-button>
<div class="text-center text-primary mt10 fontsize14 pointer" v-if="language == 0">
剩余 {{(r.roomCount - (r.useCount||0)).toFixed()}} 间
<div class="room">
<span>{{ language == 0 ? '座位数' : 'Seats' }}: {{ car.carSeat }}</span>
<span> | {{
language == 0 ? '运营时间' : 'Servers Time'
}}: {{ car.operStart }} ~ {{ car.operEnd }}</span>
</div>
<div class="text-center text-primary mt10 fontsize14" v-else>
{{(r.roomCount - (r.useCount||0)).toFixed()}} Remaining rooms
</div>
</el-col>
</el-row>
</div>
</div>
</div>
<el-empty v-if="list.length == 0" :image="`/img/order_no.png`" :image-size="228" description=""/>
</div>
</el-card>
</div>
<div class="leftboderTT">{{ language == 0 ? '预约信息' : 'Reservation information' }}</div>
<div class="border-rr mt20 pd20">
<el-form :model="form" :label-width="language == 0 ?'120':'150'" :rules="rules" ref="formRef">
<el-form-item :label="language==0?'车辆数量':'cars'" required prop="num">
<el-input-number v-model="form.num" :min="1" @change="changecarNum"/>
</el-form-item>
<el-form-item :label="language==0?'是否接送':'use Type'" required prop="useType">
<el-checkbox-group v-model="form.useType" @change="changeUseType">
<el-checkbox value="0" v-if="car.checkIn == 1">
{{ language == 0 ? '接站' : 'Pick up' }}
</el-checkbox>
<el-checkbox value="1" v-if="car.checkOut == 1">{{ language == 0 ? '送站' : 'Drop off' }}
</el-checkbox>
</el-checkbox-group>
</el-form-item>
<div v-show="form.useType?.indexOf('0')> -1">
<h3 class="afterLine">接站信息</h3>
<el-form-item :label="language==0?'用车日期':'Date'" required>
<el-date-picker v-model="date1"
type="date"
:placeholder="language==0?'选择日期':'Select date'" format="YYYY-MM-DD"
value-format="YYYY-MM-DD"/>
<!-- :picker-options="pickerOptions"-->
</el-form-item>
<el-form-item :label="language==0?'用车时间':'Time'" required>
<el-time-picker
v-model="revTime1" :start="car.operStart" :end="car.operEnd"
placeholder="Arbitrary time" format="HH:mm" value-format="HH:mm" @change="bindTimeChange"
/>
</el-form-item>
<el-form-item :label="language==0?'联系人':'Contacts'" required>
<el-input type="text" v-model="form.pickUpBo.contacts"/>
</el-form-item>
<el-form-item :label="language==0?'联系电话':'Phone'" required>
<el-input type="text" v-model="form.pickUpBo.phone"/>
</el-form-item>
<el-form-item label="人数" required>
<el-input type="text" v-model="form.pickUpBo.count"/>
</el-form-item>
<el-form-item label="航班/火车班次" required>
<el-input type="text" v-model="form.pickUpBo.no"/>
</el-form-item>
<el-form-item label="接机/接站地点" required>
<el-input type="text" v-model="form.pickUpBo.noAddress"/>
</el-form-item>
<el-form-item label="送达地点" required>
<el-input type="text" v-model="form.pickUpBo.deliveryAddress"/>
</el-form-item>
<el-form-item :label="language==0?'备注':'Remarks'">
<el-input type="textarea" rows="3" v-model="form.pickUpBo.remarks"/>
</el-form-item>
</div>
<div v-show="form.useType?.indexOf('1')> -1">
<h3 class="afterLine">送站信息</h3>
<el-form-item :label="language==0?'用车日期':'Date'" required>
<el-date-picker v-model="date2"
type="date"
:placeholder="language==0?'选择日期':'Select date'" format="YYYY-MM-DD"
value-format="YYYY-MM-DD"/>
<!-- :picker-options="pickerOptions"-->
</el-form-item>
<el-form-item :label="language==0?'用车时间':'Time'" required>
<el-time-picker
v-model="revTime2" :start="car.operStart" :end="car.operEnd"
placeholder="Arbitrary time" format="HH:mm" value-format="HH:mm" @change="bindTimeChange2"
/>
</el-form-item>
<el-form-item :label="language==0?'联系人':'Contacts'" required>
<el-input type="text" v-model="form.dropOffBo.contacts"/>
</el-form-item>
<el-form-item :label="language==0?'联系电话':'Phone'" required>
<el-input type="text" v-model="form.dropOffBo.phone"/>
</el-form-item>
<el-form-item label="人数" required>
<el-input type="text" v-model="form.dropOffBo.count"/>
</el-form-item>
<el-form-item label="送达地点" required>
<el-input type="text" v-model="form.dropOffBo.deliveryAddress"/>
</el-form-item>
<el-form-item :label="language==0?'备注':'Remarks'">
<el-input type="textarea" rows="3" v-model="form.dropOffBo.remarks"/>
</el-form-item>
</div>
</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 v-show="form.useType.indexOf('0')>-1"> {{ language == 0 ? '接站车辆费' : 'Room fee' }}
<span class="fr">{{language == 0 ? '¥' : '€'}}{{form.pickUpBo.total}}</span>
</label>
<div v-show="form.useType.indexOf('0')>-1" class="ccitem">
{{ car.name }}
<span >{{form.num}} *{{ language == 0 ? '¥' : '€' }}{{ car.inPrice }}</span>
</div>
<label v-show="form.useType.indexOf('1')>-1">{{ language == 0 ? '送站车辆费' : 'Extra bed fee' }}
<span class="fr">{{language == 0 ? '¥' : '€'}}{{ form.dropOffBo.total }}</span>
</label>
<div v-show="form.useType.indexOf('1')>-1" class="ccitem">
{{ car.name }}
<span>{{ form.num }}*{{ language == 0 ? '¥' : '€' }}{{ car.outPrice }}</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" @click="submit" round :loading="payLoading">确认付款</el-button>
</el-col>
</el-row>
</el-card>
<div style="height: 60px;"></div>
</div>
</div>
</template>
<script setup>
import {useRouter} from "vue-router";
import {useRouter, useRoute} from "vue-router";
import {ref, reactive, onMounted} from "vue";
import {useRoute} from "vue-router";
import {useStorage} from "@vueuse/core/index";
import {checkResidueRoom, newsSubmitOrderHotel, submitOrderCar} from "@/apiPc/booking"
import dayjs from 'dayjs'
import {ElMessage, ElMessageBox} from "element-plus";
import useUserStore from "@/store/modules/user";
const payLoading = ref(false)
const user = useUserStore().user
const language = useStorage('language', 0)
const router = useRouter()
const route = useRoute()
const form = ref({})
const item = ref({})
const car = ref({})
const query = ref({
id: route.query.id
const revTime1 = ref('')
const revTime2 = ref('')
const date1 = ref('')
const date2 = ref('')
const form = ref({
num: 1,
pickUpBo: {
carsList:[],
total: 0
},
dropOffBo: {
carsList:[],
total: 0
},
useType: []
})
const loading = ref(false)
const list = ref([])
onMounted(()=>{
car.value = JSON.parse(decodeURIComponent(route.query.detail))
list.value = car.value.carVoList
const rzRange = ref([])
const rzUserArr = ref([])
const money = ref(0)
const choseRooms = ref([])
const rules = ref({})
onMounted(() => {
item.value = JSON.parse(decodeURIComponent(route.query.item))
car.value = JSON.parse(decodeURIComponent(route.query.car))
money.value = 0
console.log(item.value, car.value)
})
function changeUseType(e) {
console.log(form.value.useType)
changecarNum()
}
function changecarNum(e) {
var m1 = 0
var m2 = 0
if (form.value.useType.indexOf('0') > -1) {
m1 = form.value.num * car.value.inPrice
}
if (form.value.useType.indexOf('1') > -1) {
m2 = form.value.num * car.value.outPrice
}
form.value.pickUpBo.total = m1.toFixed(2)
form.value.dropOffBo.total = m2.toFixed(2)
console.log(form.value.num, m1, m2)
money.value = (m1 + m2).toFixed(2)
}
function bindTimeChange(e) {
revTime1.value = e
console.log(e)
}
function bindTimeChange2(e) {
revTime2.value = e
}
function submit() {
if (!user) {
useUserStore().setReLogin()
return
}
if (money.value == 0) {
ElMessage.error(language.value == 0 ? '请选择接站/送站' : 'Please select pickup/drop off')
return
}
// 提交确认
ElMessageBox.confirm(language.value == 0 ? '确认提交订单吗？' : 'Confirm to submit the order?', {
confirmButtonText: language.value == 0 ? '确定' : 'Confirm',
cancelButtonText: language.value == 0 ? '取消' : 'Cancel',
type: 'warning'
}).then(() => {
pushFrom()
})
}
function pushFrom() {
payLoading.value = true
var obj = {
avcId: car.value.id,
num: form.value.num,
price: car.value.inPrice,
carSeat: car.value.carSeat,
carColor: car.value.carColor,
typeName: "接站",
name: car.value.carType,
checkIn: car.value.checkIn,
checkOut: car.value.checkOut,
total: (form.value.num * car.value.inPrice).toFixed(2)
}
var obj2 = {
avcId: car.value.id,
num: form.value.num,
price: car.value.outPrice,
carSeat: car.value.carSeat,
carColor: car.value.carColor,
typeName: "送站",
name: car.value.carType,
checkIn: car.value.checkIn,
checkOut: car.value.checkOut,
total: (form.value.num * car.value.outPrice).toFixed(2)
}
if (form.value.useType.indexOf('0') > -1) {
form.value.pickUpBo.carsList.push(obj)
form.value.pickUpBo.revTime = date1.value + ' ' + revTime1.value
}
if (form.value.useType.indexOf('1') > -1) {
form.value.dropOffBo.carsList.push(obj2)
form.value.dropOffBo.revTime = date2.value + ' ' + revTime2.value
}
form.value.activeId = item.value.activityId
form.value.lavId = item.value.id
form.value.checkIn = item.value.checkIn
form.value.checkOut = item.value.checkOut
submitOrderCar(form.value).then(res=>{
payLoading.value = false
if (res.data && res.data.total != -100) {
router.push({
name: 'bookingPay',
query: {
orderId:res.data.orderId,
money:res.data.total,
type:'car'
}
})
} else {
ElMessage.warning(language.value == 0 ? '下单失败,稍后重试' : 'Order failed, please try again later')
}
})
}
</script>
<style scoped>
<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;
font-weight: 600;
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;
}
.tip {
font-size: 14px;
color: #666;
padding: 0 10px;
}
.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);
}
}
</style>
......
src/viewsPc/booking/dinner.vue
......@@ -5,9 +5,9 @@
</div>
<div class="box">
<div class="searchBar">
<el-input placeholder="请输入关键字搜索" v-model="query.name" class="no-border">
<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">搜索</el-button>
<el-button size="large" type="primary" class="btn-lineG" icon="search">{{ language==0?'搜索':'Search' }}</el-button>
</div>
</div>
......@@ -15,19 +15,19 @@
<el-row :gutter="20">
<el-col :span="12" v-for="(h,index) in list" class="mb20">
<el-card>
<!-- 酒店列表-->
<el-row class="hotel" align="middle">
<el-row class="hotel" align="middle" :gutter="20">
<el-col :span="12">
<img/>
<img class="w100" :src="fillImgUrl(h.photos?.split(',')[0])"/>
</el-col>
<el-col :span="12">
<h3>{{h.name}}</h3>
<p>
<el-icon><LocationFilled /></el-icon>
{{h.address}}
<h3 class="esp m0">{{h.name}}</h3>
<p class="esp_2 addr">
<el-icon color="#929AA0"><LocationFilled /></el-icon>
{{h.addName}}
</p>
<div class="price">¥<span>450</span><i>起</i></div>
<el-button class="btn-lineG" round type="primary" size="large">立即预约 ⇀</el-button>
<div class="price mb20" v-if="language==0"><i class="text-warning">¥</i><span class="text-warning">{{ h.price }}</span>起</div>
<div class="price mb20" v-else><i class="text-warning">€</i><span class="text-warning">{{ h.price }}</span>start</div>
<el-button class="btn-lineG" round type="primary" size="large" @click="goDetail(h)">{{ language==0?'立即预约':'Select' }} ⇀</el-button>
</el-col>
</el-row>
......@@ -43,6 +43,11 @@
<script setup>
import {onMounted} from "@vue/runtime-core"
import * as booking from "@/apiPc/booking"
const router = useRouter()
const language = useStorage('language', 0)
import {getActivityRestaurantList} from "@/apiPc/booking";
import {useRouter} from "vue-router";
import {useStorage} from "@vueuse/core/index";
const query = ref({
name:''
})
......@@ -52,10 +57,22 @@ onMounted(()=>{
})
function getList() {
booking.getHotelList(query.value).then(res=>{
booking.getActivityRestaurantList(query.value).then(res=>{
list.value = res.rows
})
}
function goDetail(n) {
router.push({
name:'dinnerDetail',
params:{
id:n.id,
},
query:{
detail:encodeURIComponent(JSON.stringify(n))
}
})
}
</script>
<style scoped lang="scss">
......@@ -71,4 +88,13 @@ function getList() {
.no-border{border: none;background: #F5F7F9;
:deep(.el-input__wrapper){border: none;box-shadow: none;background: #F5F7F9;}
}
.addr{font-weight: 400;
font-size: 16px;
color: #929AA0;}
.price{font-weight: 400;
font-size: 18px;
color: #929AA0;
i{font-size: 24px;font-style: normal;}
span{font-weight: 600;font-size: 36px;font-family: "DIN Alternate";margin:0 6px;}
}
</style>
......
src/viewsPc/booking/dinnerDetail.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="16">
<h3 class="esp flex">{{ form?.name }}
</h3>
<p class="esp addr">
<el-icon size="16" style="position: relative;top: 2px" color="#929AA0">
<LocationFilled/>
</el-icon>
{{ form?.addName }}
</p>
</el-col>
</el-row>
<el-empty v-else :image="`/img/order_no.png`" :image-size="228" description=""/>
</el-card>
<div class="mt30">
<el-row :gutter="20">
<el-col v-for="(p,index) in form?.photos?.split(',')" :span="index==0?12:6">
<div class="imgbox hotelImg">
<img :src="fillImgUrl(p)">
</div>
</el-col>
</el-row>
</div>
<el-card class="mt30 mb60">
<div class="lineHead">
<ul>
<li>{{ language == 0 ? '餐饮选择' : 'Available Set meal' }}</li>
</ul>
</div>
<div>
<div v-for="(r,index) in roomList" :key="index" class="room">
<el-row :gutter="30" align="middle">
<el-col :span="4">
<div class="roomImg">
<el-image fit="cover" :preview-src-list="r.photosList" :src="fillImgUrl(r.photos?.split(',')[0])"/>
</div>
</el-col>
<el-col :span="14">
<h3 class="name">{{ r.name }}<span class="text-primary">({{ r.categoryName }})</span></h3>
<el-row :gutter="10">
<el-col :span="24">
<p>{{ language==0?'配送时间':'Delivery time' }}：{{ r.psStart }}~{{ r.psEnd }}</p>
<p>{{ language==0?'配送地址':'Delivery address' }}：{{ r.address }}</p>
</el-col>
</el-row>
</el-col>
<el-col :span="3">
<div class="price">{{
language == 0 ? '¥' : '€'
}}<span>{{ language == 0 ? r.foodPrice : r.foodPriceEn }}</span></div>
</el-col>
<el-col :span="3">
<el-button class="btn-lineG w100" round type="primary" @click="goOrder(r)">
{{ language == 0 ? '我要预订' : 'Select' }}
</el-button>
</el-col>
</el-row>
</div>
<el-empty v-if="roomList.length == 0" :image="`/img/order_no.png`" :image-size="228" description=""/>
</div>
</el-card>
</div>
</div>
</template>
<script setup>
import {useRouter} from "vue-router";
import {ref, reactive, onMounted} from "vue";
import {useRoute} from "vue-router";
import {getHotelById, getMenuById} from "@/apiPc/booking"
import {useStorage} from "@vueuse/core/index";
import useUserStore from "@/store/modules/user";
import {fillImgUrl} from "@/utils/ruoyi";
const user = useUserStore().user
const language = useStorage('language', 0)
const router = useRouter()
const route = useRoute()
const form = ref({})
const query = ref({
larId: route.query.id
})
const loading = ref(false)
const roomList = ref([])
const map = ref(null)
onMounted(() => {
form.value = JSON.parse(decodeURIComponent(route.query.detail))
getData()
})
function getData() {
loading.value = true
query.value.hotelId = route.query.id
getMenuById(query.value).then(res => {
loading.value = false
roomList.value = res.rows
for (let m of roomList.value) {
var arr = []
m.photosList = []
arr = m.photos?.split(',')
for (var a of arr){
m.photosList.push(fillImgUrl(a))
}
m.num = 0
if (m.category == 0) {
m.categoryName = language.value == 0 ? '早餐' : 'Breakfast'
} else if (m.category == 1) {
m.categoryName = language.value == 0 ? '午餐' : 'Lunch'
} else {
m.categoryName = language.value == 0 ? '晚餐' : 'Dinner'
}
}
})
}
function goOrder(n) {
if (!user) {
useUserStore().setReLogin()
return
}
router.push({
name: 'dinnerOrder',
params: {
foodId: n.id
},
query: {
food: encodeURIComponent(JSON.stringify(n)),
restaurant: encodeURIComponent(JSON.stringify(form.value)),
}
})
}
</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;
span {
font-weight: 400;
padding: 0 10px;
font-size: 16px;
}
}
.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;
}
}
}
.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%;
}
}
</style>
src/viewsPc/booking/foodOrder.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 ? '餐饮预约下单' : 'Food booking order' }}</div>
</div>
<!-- {{room}}-->
<el-row class="pd20" :gutter="20">
<el-col :span="14">
<div class="border-info">
<h3>{{ restaurant.name }}</h3>
<div class="room">
<span>{{ restaurant.address }}</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 ?'100':'150'" :rules="rules" ref="formRef">
<el-form-item :label="food.name" required prop="num">
<el-input-number v-model="form.num" :min="1" @change="changeNum"/>
</el-form-item>
<el-form-item :label="language==0?'订餐周期':'Check-in date'" required>
<el-date-picker @change="getDaysBetween"
v-model="rzRange"
type="daterange"
:placeholder="language==0?'选择日期':'Select date'" format="YYYY-MM-DD"
value-format="YYYY-MM-DD"/>
<!-- :picker-options="pickerOptions"-->
</el-form-item>
<el-form-item :label="`联系人`" required>
<el-input v-model="form.contacts"/>
</el-form-item>
<el-form-item :label="language==0?'联系电话':'Contact phone'" required prop="phone">
<el-input v-model="form.phone"/>
</el-form-item>
<el-form-item :label="language==0?'送餐时间':'Contact phone'" required prop="phone">
<div style="line-height: 36px;">{{food.psStart}} - {{food.psEnd}}</div>
</el-form-item>
<el-form-item label="配送地址">
<div style="line-height: 36px;">{{food.address}}</div>
</el-form-item>
<el-form-item>
<div class="tip">
*如预定多天的餐饮，将分多天进行配送。<br/>
*每日送餐时间只配送当日预定的餐饮。
</div>
</el-form-item>
<el-form-item :label="language==0?'备注':'Remarks'">
<el-input type="textarea" rows="3" v-model="form.remarks"/>
</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> {{food.name }}</label>
<div class="ccitem" v-for="(c, index) in choseDays" :key="index">
{{ c }}
<span>{{ form.num }}*{{ language == 0 ? '¥' : '€' }}{{ language == 0 ?food.foodPrice:food.foodPriceEn }}</span>
</div>
<label>{{ language == 0 ? '共计' : 'Total' }}<span
class="fr bigMoney">{{ language == 0 ? '¥' : '€' }}{{ form.total }}</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">{{ form.total }}</span></span>
</label>
</el-col>
<el-col :span="12" class="text-right">
<el-button type="primary" class="btn-lineG" @click="submit">确认付款</el-button>
</el-col>
</el-row>
</el-card>
<div style="height: 60px;"></div>
</div>
</div>
</template>
<script setup>
import {useRouter, useRoute} from "vue-router";
import {ref, reactive, onMounted} from "vue";
import {useStorage} from "@vueuse/core/index";
import {checkResidueRoom, newsSubmitOrderHotel, submitOrderFood} 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 food = ref({})
const restaurant = ref({})
const canOrderStart = ref('')
const canOrderNum = ref(0)
const form = ref({
num: 1,
phone: user.phonenumber||'',
})
const rzRange = ref([])
const rzUserArr = ref([])
const money = ref(0)
const choseDays = ref([])
const rules = ref({})
let usedays = 0
onMounted(() => {
food.value = JSON.parse(decodeURIComponent(route.query.food))
restaurant.value = JSON.parse(decodeURIComponent(route.query.restaurant))
if(language.value == 0){
form.value.total = food.value.foodPrice
} else {
form.value.total = food.value.foodPriceEn
}
console.log(food.value,restaurant.value)
const today = dayjs()
canOrderStart.value = today
if (food.value.hqNewStart < canOrderStart.value) {
food.value.hqNewStart = canOrderStart.value
}
})
function changeNum() {
let moneyAll = 0
if(language.value == 0){
moneyAll = food.value.foodPrice * form.value.num * usedays
} else {
moneyAll = food.value.foodPriceEn * form.value.num * usedays
}
form.value.total = moneyAll.toFixed(2)
}
function getDaysBetween(e) {
var d1 = Date.parse(rzRange.value[0])
var d2 = Date.parse(rzRange.value[1])
if (d1 > d2) {
usedays = 1
return
}
if (d1 == d2) {
usedays = 1
} else {
var days = (d2 - d1) / (1 * 24 * 60 * 60 * 1000);
usedays = days + 1
}
changeNum()
var startTime = getDate(rzRange.value[0]);
var endTime = getDate(rzRange.value[1]);
var dateArr = [];
while ((endTime.getTime() - startTime.getTime()) > 0) {
var year = startTime.getFullYear();
var month = (startTime.getMonth() + 1).toString().length === 1 ? "0" + (parseInt(startTime.getMonth()
.toString(), 10) + 1) : (startTime.getMonth() + 1);
var day = startTime.getDate().toString().length === 1 ? "0" + startTime.getDate() : startTime.getDate();
dateArr.push(year + "-" + month + "-" + day);
startTime.setDate(startTime.getDate() + 1);
}
dateArr.push(rzRange.value[1])
choseDays.value = dateArr;
}
function getDate(datestr) {
var temp = datestr.split("-");
if (temp[1] === '01') {
temp[0] = parseInt(temp[0], 10) - 1;
temp[1] = '12';
} else {
temp[1] = parseInt(temp[1], 10) - 1;
}
//new Date()的月份入参实际都是当前值-1
var date = new Date(temp[0], temp[1], temp[2]);
return date
}
function submit() {
if(!user){
useUserStore().setReLogin()
return
}
if(rzRange.value.length>0){
form.value.dcStart = rzRange.value[0]
form.value.dcEnd = rzRange.value[1]
}
form.value.foodsList = []
var obj = {
arfId: food.value.id,
name: food.value.name,
categoryName: food.value.categoryName,
category: food.value.category,
num: form.value.num,
price:food.value.foodPrice
}
form.value.foodsList.push(obj)
form.value.activeId = restaurant.value.activityId
form.value.larId = restaurant.value.id
// 提交确认
ElMessageBox.confirm(language.value == 0 ? '确认提交订单吗？' : 'Confirm to submit the order?', {
confirmButtonText: language.value == 0 ? '确定' : 'Confirm',
cancelButtonText: language.value == 0 ? '取消' : 'Cancel',
type: 'warning'
}).then(() => {
submitOrderFood(form.value).then(res => {
if (res.data) {
if (res.data.total == -100) {
ElMessage.warning(language.value == 0 ? '挤爆了,请稍后下单' : 'Too many people, please order later')
} else {
//去付钱
router.push({
name: 'bookingPay',
query: {
orderId:res.data.orderId,
money:res.data.total,
type:'food'
}
})
}
} else {
ElMessage.warning(language.value == 0 ? '挤爆了,请稍后下单' : 'Too many people, please order later')
}
})
})
}
</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;
}
.tip{font-size: 14px;color: #666;padding: 0 10px;}
</style>
src/viewsPc/booking/hotelOrder.vue
......@@ -93,8 +93,8 @@
</label>
<div class="ccitem" v-for="(c, index) in choseRooms" :key="index">
{{ c }}
<text v-if="language==0">{{ form.roomNum }}*{{ language == 0 ? '¥' : '€' }}{{ room.roomPrice }}</text>
<text v-else>{{ form.roomNum }}*{{ language == 0 ? '¥' : '€' }}{{ room.roomPriceEn }}</text>
<span v-if="language==0">{{ form.roomNum }}*{{ language == 0 ? '¥' : '€' }}{{ room.roomPrice }}</span>
<span v-else>{{ form.roomNum }}*{{ language == 0 ? '¥' : '€' }}{{ room.roomPriceEn }}</span>
</div>
<label v-if="form.isAddbed=='1'">{{ language == 0 ? '加床费' : 'Extra bed fee' }}
......@@ -108,11 +108,11 @@
<div v-if="form.isAddbed=='1'" class="ccitem" v-for="(c, index) in choseRooms" :key="index">
{{ c }}
<text v-if="language==0">{{ form.addNum }}*{{ language == 0 ? '¥' : '€' }}{{ room.bedPrice }}</text>
<text v-else>{{ form.addNum }}*{{ language == 0 ? '¥' : '€' }}{{ room.bedPriceEn }}</text>
<span v-if="language==0">{{ form.addNum }}*{{ language == 0 ? '¥' : '€' }}{{ room.bedPrice }}</span>
<span v-else>{{ form.addNum }}*{{ language == 0 ? '¥' : '€' }}{{ room.bedPriceEn }}</span>
</div>
<label class="bigMoney">{{ language == 0 ? '共计' : 'Total' }}<span
<label>{{ language == 0 ? '共计' : 'Total' }}<span
class="fr bigMoney">{{ language == 0 ? '¥' : '€' }}{{ money }}</span></label>
</div>
......@@ -124,7 +124,7 @@
<el-row justify="space-between" align="middle">
<el-col :span="12">
<label>{{ language == 0 ? '共计金额' : 'Total' }}：
{{ language == 0 ? '¥' : '€' }}<span class="bigMoney">{{ money }}</span>
<span class=" text-warning"> {{ language == 0 ? '¥' : '€' }}<span class="bigMoney">{{ money }}</span></span>
</label>
</el-col>
<el-col :span="12" class="text-right">
......@@ -392,7 +392,8 @@ function submit() {
name: 'bookingPay',
query: {
orderId:res.data.orderId,
money:res.data.total
money:res.data.total,
type:'hotel'
}
})
}
......
src/viewsPc/booking/pay.vue
......@@ -7,46 +7,87 @@
</div>
<div v-if="isLogin">
<div class="pd20">
<div class="leftboderTT">{{ language == 0 ? '酒店信息' : 'Hotel Infomation' }}</div>
<div class="border-info mt20">
<h3>{{ form.hotelName }}</h3>
<el-row>
<el-col>
地址：{{ form.provinceName }} {{ form.cityName }} {{ form.areaName }} {{ form.address }}
</el-col>
<el-col>
入住信息：{{ form.messageObj?.roomStayDate }}
</el-col>
<el-col>
房间信息：{{ form.messageObj?.roomName }} ｜ {{ form.roomNum }} 间
</el-col>
</el-row>
<div v-if="type == 'hotel'">
<div class="leftboderTT">{{ language == 0 ? '酒店信息' : 'Hotel Information' }}</div>
<div class="border-info mt20">
<h3>{{ form.hotelName }}</h3>
<el-row>
<el-col>
{{ language == 0 ?'地址':'Address' }}：{{ form.provinceName }} {{ form.cityName }} {{ form.areaName }} {{ form.address }}
</el-col>
<el-col>
入住信息：{{ form.messageObj?.roomStayDate }}
</el-col>
<el-col>
房间信息：{{ form.messageObj?.roomName }} ｜ {{ form.roomNum }} 间
</el-col>
</el-row>
</div>
</div>
<div class="leftboderTT">{{ language == 0 ? '预订信息' : 'Hotel Infomation' }}</div>
<div v-if="type == 'car'">
<div class="leftboderTT">{{ language == 0 ? '车辆信息' : 'Car Information' }}</div>
</div>
<div v-if="type == 'food'">
<div class="leftboderTT">{{ language == 0 ? '饭店信息' : 'Restaurant Information' }}</div>
<div class="border-info mt20">
<h3>{{ form.name }}</h3>
<p>{{ language == 0 ?'地址':'Address' }}：{{form.address}}</p>
</div>
</div>
<div class="leftboderTT">{{ language == 0 ? '预订信息' : 'Booking information' }}</div>
<div class="border-info mt20">
<el-row>
<el-row v-if="type == 'hotel'">
<el-col :lg="8" :md="12" :sm="12" :xs="24">
<div>入住人：{{ form.rzUsers }}</div>
</el-col>
<el-col :lg="8" :md="12" :sm="12" :xs="24">联系方式：{{ form.phone }}</el-col>
<el-col :lg="8" :md="12" :sm="12" :xs="24"></el-col>
</el-row>
<el-row v-if="type == 'car'">
<el-col :lg="12" :md="12" :sm="12" :xs="24">
接站信息
</el-col>
<el-col :lg="12" :md="12" :sm="12" :xs="24">
送站信息
</el-col>
</el-row>
<el-row v-if="type == 'food'">
<el-col :lg="8" :md="12" :sm="12" :xs="24">
<div v-for="f in form.messageObj?.foodsList">
<span v-if="f.category==0">{{language==0?'早餐':'Breakfast'}}</span>
<span v-if="f.category==1">{{language==0?'午餐':'Lunch'}}</span>
<span v-if="f.category==2">{{language==0?'晚餐':'Dinner'}}</span>
： {{f.name}} * {{f.num}} {{language==0?'份':'box'}}
</div>
</el-col>
<el-col :lg="8" :md="12" :sm="12" :xs="24">
<div>{{ language==0?'送餐时间':'Delivery Time' }}：{{ form.deliveryTime }}</div>
</el-col>
<el-col :lg="8" :md="12" :sm="12" :xs="24">
<div class="mb10">{{ language==0?'送餐地址':'Delivery Address' }}：{{ form.address }}</div>
</el-col>
<el-col :lg="8" :md="12" :sm="12" :xs="24">
<div>{{ language==0?'联系人':'Contact Person' }}：{{ form.contacts }}</div>
</el-col>
<el-col :lg="8" :md="12" :sm="12" :xs="24">{{ language==0?'联系方式':'Contact Phone' }}：{{ form.phone }}</el-col>
</el-row>
</div>
<el-row justify="end">
<el-col :lg="12" :xs="24">
<div class="text-right">
<div class="item"><label>{{ language == 0 ? '费用总计' : 'Total Cost' }}：</label>
<span class="size26 wePrice">{{ language == 0 ? '¥' : '€' }}{{ form.total }}</span>
<span class="size26 wePrice text-warning">{{ language == 0 ? '¥' : '€' }}{{ form.total }}</span>
</div>
</div>
</el-col>
</el-row>
</div>
</div>
<div v-else class="pd20 skeletonBox">
<el-skeleton :rows="8"/>
......@@ -78,7 +119,7 @@
<div class="leftboderTT">{{ language == 0 ? '选择支付方式' : 'Choose payment method' }}</div>
<div class="mt20">
<el-radio-group v-model="payType">
<el-radio label="2" v-if="language==0" border>
<el-radio value="2" v-if="language==0" border>
<!-- 微信-->
<svg t="1709002960407" class="icon" viewBox="0 0 3152 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="24747" width="94" height="40">
......@@ -90,8 +131,8 @@
fill="#595757" p-id="24749"></path>
</svg>
</el-radio>
<el-radio label="3" v-if="language==1" border>
<!-- paypal-->
<el-radio value="3" v-if="language==1" border>
<!--paypal-->
<svg t="1709002828937" class="icon" viewBox="0 0 4220 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="22654" width="94" height="40">
<path
......@@ -149,10 +190,10 @@
<el-button v-if="!hideconfirmbtn" type="primary" @click="goPay" round class="btn-lineG w200px">
{{ language == 0 ? '确定' : 'Submit' }}
</el-button>
<el-button round @click="unsubscribe" v-if="form.viewStatus == '5'"> 退订</el-button>
<el-button link class="underline" @click="cancel" v-if="form.viewStatus == '0'" disabled> 取消订单</el-button>
<el-button round @click="unsubscribe" v-if="form.viewStatus == '5'">{{ language==0?'退订':'Unsubscribe' }}</el-button>
<el-button link class="underline" @click="cancel" v-if="form.viewStatus == '0'" disabled>
{{ language==0?'取消订单':'Cancel Order' }}
</el-button>
</el-col>
</el-row>
</div>
......@@ -167,12 +208,8 @@
</div>
</div>
</el-card>
</div>
<div class="box" v-if="errorBox">
<el-result
icon="error"
......@@ -195,7 +232,6 @@ import {getCurrentInstance, ref} from 'vue'
import {onMounted} from "@vue/runtime-core"
import {useRoute, useRouter} from "vue-router"
import * as booking from "@/apiPc/booking"
import * as match from "@/apiPc/match"
import MatchInfoRow from "@/viewsPc/match/components/matchInfo-row";
const {proxy} = getCurrentInstance()
......@@ -212,19 +248,20 @@ import useUserStore from "@/store/modules/user";
import FileUpload from "@/components/FileUpload";
import {useStorage} from "@vueuse/core/index";
import {ElMessage} from "element-plus";
import {getCarBilldetailbyId, getFoodBilldetailbyId} from "@/apiPc/booking";
const isLogin = ref(false)
const language = useStorage('language', 0)
const totalFee = ref('')
const wePayCodeUrl = ref('')
const form = ref({})
const type = ref('')
const errorBox = ref(false)
const hideconfirmbtn = ref(false)
const user = useUserStore().user
console.log(route.query.orderId)
// 1763462073870237698
getData()
if (useUserStore().user) {
isLogin.value = true
}
......@@ -234,19 +271,59 @@ onMounted(() => {
} else {
payType.value = '3'
}
if(route.query.type){
type.value = route.query.type
}
if(route.query.orderType){
switch (route.query.orderType){
case '0':
type.value = 'hotel'
break
case '1':
type.value = 'car'
break
case '2':
type.value = 'food'
break
}
}
getData()
})
function getData() {
return booking.getRoomBilldetailbyId({orderId: orderId.value}).then(res => {
totalFee.value = res.data.total
form.value = res.data
form.value.messageObj = JSON.parse(form.value.message)
form.value.extJsonObj = JSON.parse(form.value.extJson)
matchId.value = form.value.extJsonObj?.activeId
}).catch(err => {
console.log(err)
errorBox.value = true
})
if(type.value=='car') {
booking.getCarBilldetailbyId({orderId: orderId.value}).then(res => {
totalFee.value = res.data.total
form.value = res.data
form.value.messageObj = JSON.parse(form.value.message)
form.value.extJsonObj = JSON.parse(form.value.extJson)
}).catch(err => {
console.log(err)
errorBox.value = true
})
}
if(type.value=='food') {
booking.getFoodBilldetailbyId({orderId: orderId.value}).then(res => {
totalFee.value = res.data.total
form.value = res.data
form.value.messageObj = JSON.parse(form.value.message)
form.value.extJsonObj = JSON.parse(form.value.extJson)
console.log(form.value)
})
}
if(type.value=='hotel') {
booking.getRoomBilldetailbyId({orderId: orderId.value}).then(res => {
totalFee.value = res.data.total
form.value = res.data
form.value.messageObj = JSON.parse(form.value.message)
form.value.extJsonObj = JSON.parse(form.value.extJson)
matchId.value = form.value.extJsonObj?.activeId
}).catch(err => {
console.log(err)
errorBox.value = true
})
}
}
function goHome() {
......@@ -255,14 +332,14 @@ function goHome() {
function goPay() {
if (payType.value == '2') {
match.createWePay({orderId: orderId.value}).then(res => {
booking.createWePay({orderId: orderId.value}).then(res => {
wePayCodeUrl.value = res.data
hideconfirmbtn.value = true
startforGetData()
})
}
if (payType.value == '3') {
match.createPalPay({orderId: orderId.value}).then(res => {
booking.createPalPay({orderId: orderId.value}).then(res => {
if (res.data) {
location.href = res.data
}
......
src/viewsPc/booking/payOk.vue 0 → 100644
<template>
<div>
<div class="box">
<el-card class="mb60 mt30" v-loading="loading">
<div class="text-center mt30">
<el-icon color="#32B16C" size="80">
<SuccessFilled/>
</el-icon>
<p class="text-success mb20">{{ language == 0 ? '支付成功' : 'successfully!' }}</p>
<el-button type="primary" class="btn-lineG mb60" @click="goBillDetail" round>
{{ language == 0 ? '返回订单详情' : 'Return order details' }}
</el-button>
</div>
</el-card>
</div>
</div>
</template>
<script setup>
import {ref} from "vue";
import {useRoute, useRouter} from "vue-router";
import {onMounted} from "@vue/runtime-core";
import {callbackPalPay} from "@/apiPc/match";
import {useStorage} from "@vueuse/core/index";
const route = useRoute()
const router = useRouter()
const language= useStorage('language',0)
const orderId = ref(route.query.orderId)
const loading = ref(false)
onMounted(() => {
var code = decodeURIComponent(orderId.value)
console.log(code)
loading.value = true
callbackPalPay(code).then(res => {
loading.value = false
})
})
function goBillDetail() {
router.push({
name: 'bookingPay',
query: {
orderId: route.query.orderId
}
})
}
</script>
<style scoped lang="scss">
</style>
src/viewsPc/center/myReservation.vue
......@@ -12,8 +12,8 @@
<div v-for="b in list" class="item">
<div class="title">
<label class="blueTag" v-if="b.orderType == 0"> {{ language==0?'酒店':'HOTEL' }} </label>
<label class="blueTag" v-if="b.orderType == 1"> {{ language==0?'车辆':'TRANSPORTATION' }} </label>
<label class="blueTag" v-if="b.orderType == 2"> {{ language==0?'餐饮':'DINING' }} </label>
<label class="purpleTag" v-if="b.orderType == 1"> {{ language==0?'车辆':'TRANSPORTATION' }} </label>
<label class="orangeTag" v-if="b.orderType == 2"> {{ language==0?'餐饮':'DINING' }} </label>
{{ language==0?'订单编号：':'No.' }} {{ b.id }}
</div>
<div class="status-po">
......@@ -31,23 +31,30 @@
<p>{{b.messageObj?.roomName}}</p>
<p>{{b.messageObj?.roomInfo}}</p>
<el-row justify="space-between">
<el-col :lg="8">
<span class="bigMoney"> {{ language==0?'¥':'€' }} {{b.total}}</span>
</el-col>
<el-col :lg="8">
<div class="text-right">
<el-button class="mb10" plain round type="primary" @click="goDetail(b)">
{{ language==0?'详情':'Detail' }}</el-button>
<el-button v-if="b.status == '0'&&(b.surplus!='0,0'&&b.surplus!='0')" @click="goDetail(b)"
class="mb10" plain round type="primary" >
{{ language==0?'支付':'Pay' }}</el-button>
</div>
</el-col>
</el-row>
</div>
<!-- {{b}}-->
<div class="bbody" v-if="b.orderType == 1">
<h3 class="name">{{b.name}}</h3>
<div v-for="(car,index) in b.messageObj.carsList" :key="index">
<div v-if="car.num>0">{{car.name}}：{{car.num}} 辆</div>
</div>
<div>{{b.handleDate}}</div>
</div>
<el-row justify="space-between">
<el-col :lg="8">
<span class="bigMoney"> {{ language==0?'¥':'€' }} {{b.total}}</span>
</el-col>
<el-col :lg="8">
<div class="text-right">
<el-button class="mb10" plain round type="primary" @click="goDetail(b)">
{{ language==0?'详情':'Detail' }}</el-button>
<el-button v-if="b.status == '0'&&(b.surplus!='0,0'&&b.surplus!='0')" @click="goDetail(b)"
class="mb10" plain round type="primary" >
{{ language==0?'支付':'Pay' }}</el-button>
</div>
</el-col>
</el-row>
</div>
</div>
......@@ -79,7 +86,8 @@ function goDetail(b) {
router.push({
name: 'bookingPay',
query: {
orderId: b.id
orderId: b.id,
orderType: b.orderType
}
})
}
......
src/viewsPc/components/homeQuick.vue
......@@ -68,8 +68,8 @@ const props = defineProps({
})
const language= useStorage('language',0)
function goBooking(n) {
ElMessage.warning(language.value==0?'建设中,敬请期待':'Building！')
return
// ElMessage.warning(language.value==0?'建设中,敬请期待':'Building！')
// return
switch (n) {
case 0:
// 票务
......@@ -85,7 +85,7 @@ function goBooking(n) {
break;
case 3:
//餐饮
router.push({path: `/booking/dining/${props.matchId}`})
router.push({path: `/booking/dinner/${props.matchId}`})
break;
case 4:
//化妆
......
src/viewsPc/match/components/quick-row.vue
......@@ -114,7 +114,7 @@ function goBooking(n) {
break;
case 3:
//餐饮
router.push({path: `/booking/dining/${props.matchId}`})
router.push({path: `/booking/dinner/${props.matchId}`})
break;
case 4:
//化妆
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!