Skip to content

jijin / dance-pc

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

no message

1 parent 35df1862
Inline Side-by-side
Showing 3 changed files with 134 additions and 57 deletions
src/viewsPc/booking/hotelDetail.vue
......@@ -110,6 +110,7 @@ import {useRouter} from "vue-router";
import {ref, reactive, onMounted} from "vue";
import {useRoute} from "vue-router";
import {getHotelById, getHotelRooms} from "@/apiPc/booking"
import {useStorage} from "@vueuse/core/index";
const language = useStorage('language', 0)
......
src/viewsPc/booking/hotelOrder.vue
......@@ -5,21 +5,23 @@
<div slot="header">
<div class="bg-lineg">{{ language == 0 ? '酒店预约下单' : 'Hotel booking order' }}</div>
</div>
{{room}}
<!-- {{room}}-->
<el-row class="pd20" :gutter="20">
<el-col :span="14" >
<el-col :span="14">
<div class="border-info">
<h3>{{hotelName}}</h3>
<div class="roomType">{{room.roomType}}</div>
<h3>{{ hotelName }}</h3>
<div class="roomType">{{ room.roomType }}</div>
<div class="room">
<span>{{room.bedType}}</span>
<span>{{ ' | ' + room.area}}m²</span>
<span>{{ ' | ' + room.occupantsNum}}{{ language==0?'人入住':' people' }}</span>
<span v-show="room.breakfastFlag=='1'">{{ ' | ' + room.breakfastNum}} {{ language==0?'份早餐':'breakfasts' }}</span>
<span v-show="room.breakfastFlag=='0'"> | {{ language==0?'无早餐':'No breakfast' }}</span>
<span v-show="room.bathroomFlag=='1'"> | {{ language==0?'热水洗浴':'Shower' }}</span>
<span v-show="room.windowFlag=='1'"> | {{ language==0?'有窗':'With windows' }}</span>
<span v-show="room.addBedFlag=='1'"> | {{ language==0?'允许加床':'Extra bed' }}</span>
<span>{{ room.bedType }}</span>
<span>{{ ' | ' + room.area }}m²</span>
<span>{{ ' | ' + room.occupantsNum }}{{ language == 0 ? '人入住' : ' people' }}</span>
<span v-show="room.breakfastFlag=='1'">{{ ' | ' + room.breakfastNum }} {{
language == 0 ? '份早餐' : 'breakfasts'
}}</span>
<span v-show="room.breakfastFlag=='0'"> | {{ language == 0 ? '无早餐' : 'No breakfast' }}</span>
<span v-show="room.bathroomFlag=='1'"> | {{ language == 0 ? '热水洗浴' : 'Shower' }}</span>
<span v-show="room.windowFlag=='1'"> | {{ language == 0 ? '有窗' : 'With windows' }}</span>
<span v-show="room.addBedFlag=='1'"> | {{ language == 0 ? '允许加床' : 'Extra bed' }}</span>
</div>
</div>
......@@ -30,21 +32,23 @@
<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"-->
: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?'房间数':'Rooms'">
<el-input-number v-model="form.roomNum" :min="0" :max="canOrderNum" @change="changeRoomNum" />
<div class="red" v-if="rzRange[1]" style="margin:0 8px;display: block;width: 8em;">
<span v-if="language == 0">剩余房间数:{{canOrderNum}}</span>
<span v-else>{{canOrderNum}} Remaining rooms</span>
<el-input-number v-model="form.roomNum" :min="0" :max="canOrderNum" @change="changeRoomNum"/>
<div class="red ml20" v-if="rzRange[1]">
<span v-if="language == 0">剩余房间数:{{ canOrderNum }}</span>
<span v-else>{{ canOrderNum }} Remaining rooms</span>
</div>
</el-form-item>
<el-form-item v-for="(n,index) in form.roomNum" :key="index" :label="`入住人${index+1}`">
<el-input v-model="rzUserArr[index]" placeholder="每间填一位住客姓名"/>
</el-form-item>
<el-form-item :label="language==0?'预计到店':'Expected check-in'">
<el-select v-model="form.ddDate" :placeholder="language==0?'请选择预计到店时间':'Please select the expected check-in time'">
<el-select v-model="form.ddDate"
:placeholder="language==0?'请选择预计到店时间':'Please select the expected check-in time'">
<el-option
v-for="item in ddDateArr"
:key="item.value"
......@@ -60,12 +64,12 @@
<div v-if="room.addBedFlag=='1'">
<el-form-item :label="language==0?'是否加床':'Extra bed'">
<el-radio-group v-model="form.isAddbed">
<el-radio label="1">{{ language==0?'是':'Yes' }}</el-radio>
<el-radio label="0">{{ language==0?'否':'No' }}</el-radio>
<el-radio label="1">{{ language == 0 ? '是' : 'Yes' }}</el-radio>
<el-radio label="0">{{ language == 0 ? '否' : 'No' }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item :label="language==0?'加床张数':'Extra bed num'">
<el-input-number v-model="form.addNum" :min="0" :max="1" @change="changeBed" />
<el-input-number v-model="form.addNum" :min="0" :max="1" @change="changeBed"/>
</el-form-item>
<div class="tip" v-if="form.isAddbed=='1'">*
<span v-if="language == 0">一个房间最多加一张床</span>
......@@ -78,33 +82,55 @@
<el-col :span="10">
<div class="leftboderTT">{{ language == 0 ? '订单明细' : 'Order details' }}</div>
<div class="border-rr mt20 pd20 ccitemBox">
<label> {{ language==0?'房费':'Room fee' }}
<span class="fr" v-if="language==0">{{ language==0?'¥':'€' }}{{(room.roomPrice*form.roomNum*choseRooms.length).toFixed(2)}}</span>
<span class="fr" v-else>{{ language==0?'¥':'€' }}{{(room.roomPriceEn*form.roomNum*choseRooms.length).toFixed(2)}}</span>
<label> {{ language == 0 ? '房费' : 'Room fee' }}
<span class="fr" v-if="language==0">{{
language == 0 ? '¥' : '€'
}}{{ (room.roomPrice * form.roomNum * choseRooms.length).toFixed(2) }}</span>
<span class="fr" v-else>{{
language == 0 ? '¥' : '€'
}}{{ (room.roomPriceEn * form.roomNum * choseRooms.length).toFixed(2) }}</span>
</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>
<text v-if="language==0">{{ form.roomNum }}*{{ language == 0 ? '¥' : '€' }}{{ room.roomPrice }}</text>
<text v-else>{{ form.roomNum }}*{{ language == 0 ? '¥' : '€' }}{{ room.roomPriceEn }}</text>
</div>
<label v-if="form.isAddbed=='1'">{{ language==0?'加床费':'Extra bed fee' }}
<span class="fr" v-if="language==0">{{ language==0?'¥':'€' }}{{(room.bedPrice*form.addNum*choseRooms.length).toFixed(2)}}</span>
<span class="fr" v-else>{{ language==0?'¥':'€' }}{{(room.bedPriceEn*form.addNum*choseRooms.length).toFixed(2)}}</span>
<label v-if="form.isAddbed=='1'">{{ language == 0 ? '加床费' : 'Extra bed fee' }}
<span class="fr" v-if="language==0">{{
language == 0 ? '¥' : '€'
}}{{ (room.bedPrice * form.addNum * choseRooms.length).toFixed(2) }}</span>
<span class="fr" v-else>{{
language == 0 ? '¥' : '€'
}}{{ (room.bedPriceEn * form.addNum * choseRooms.length).toFixed(2) }}</span>
</label>
<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>
<text v-if="language==0">{{ form.addNum }}*{{ language == 0 ? '¥' : '€' }}{{ room.bedPrice }}</text>
<text v-else>{{ form.addNum }}*{{ language == 0 ? '¥' : '€' }}{{ room.bedPriceEn }}</text>
</div>
<label class="bigMoney">{{ language==0?'共计':'Total' }}<span class="fr bigMoney">{{ language==0?'¥':'€' }}{{money}}</span></label>
<label class="bigMoney">{{ 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' }}：
{{ language == 0 ? '¥' : '€' }}<span class="bigMoney">{{ money }}</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>
......@@ -112,12 +138,13 @@
</template>
<script setup>
import {useRouter,useRoute} from "vue-router";
import {useRouter, useRoute} from "vue-router";
import {ref, reactive, onMounted} from "vue";
import {useStorage} from "@vueuse/core/index";
import { checkResidueRoom,newsSubmitOrderHotel } from "@/apiPc/booking"
import {checkResidueRoom, newsSubmitOrderHotel} from "@/apiPc/booking"
import dayjs from 'dayjs'
import {ElMessage} from "element-plus";
const language = useStorage('language', 0)
const router = useRouter()
const route = useRoute()
......@@ -205,7 +232,7 @@ const ddDateArr = ref([
}
])
let usedays = 0
onMounted(()=>{
onMounted(() => {
console.log(route.query)
room.value = JSON.parse(decodeURIComponent(route.query.room))
hotelName.value = route.query.hotelName
......@@ -216,6 +243,7 @@ onMounted(()=>{
room.value.hqNewStart = canOrderStart.value
}
})
function changeRoomNum(e) {
if (form.value.addNum > e) {
form.value.addNum = e
......@@ -224,9 +252,11 @@ function changeRoomNum(e) {
rzUserArr.value.length = e
countMoney()
}
function changeBed() {
countMoney()
}
function checkreRooms() {
var obj = {
ahrId: room.value.id,
......@@ -237,8 +267,9 @@ function checkreRooms() {
canOrderNum.value = res.data.useCount
})
}
function getDaysBetween(e) {
console.log('入住时间arr',e,rzRange.value)
console.log('入住时间arr', e, rzRange.value)
var d1 = Date.parse(e[0])
var d2 = Date.parse(e[1])
if (d1 == d2) {
......@@ -266,6 +297,7 @@ function getDaysBetween(e) {
choseRooms.value = dateArr;
checkreRooms()
}
function getDate(datestr) {
var temp = datestr.split("-");
if (temp[1] === '01') {
......@@ -278,8 +310,9 @@ function getDate(datestr) {
var date = new Date(temp[0], temp[1], temp[2]);
return date
}
function countMoney() {
if(language.value == 0){
if (language.value == 0) {
money.value = ((room.value.roomPrice * form.value.roomNum * usedays) + (room.value.bedPrice * form.value
.addNum * usedays)).toFixed(2)
......@@ -289,20 +322,33 @@ function countMoney() {
}
// console.log(usedays,money.value)
}
function submit() {
if (usedays == 0) {
ElMessage.error(language.value == 0 ? '入住时间跨度需大于一天' :'Check-in time must be greater than one day')
ElMessage.error(language.value == 0 ? '入住时间跨度需大于一天' : 'Check-in time must be greater than one day')
return
}
form.value.rzStart = rzRange.value[0]
form.value.rzEnd = rzRange.value[1]
let arr = []
for (var n of rzUserArr.value) {
if (n == '' || n == undefined) {
// '请填写入住人信息'
return
} else {
arr.push(n)
}
}
form.value.rzUsers = arr.toString()
form.value.activeId = room.value.activityId
form.value.ahId = room.value.hotelId
form.value.ahrId = room.value.id
form.value.orderName = hotelName.value
form.value.roomName =room.value.roomType
form.value.roomName = room.value.roomType
var str = ''
var str2 = ''
if (form.value.addNum && form.value.addNum > 0) {
......@@ -319,21 +365,37 @@ function submit() {
console.log(form.value.room)
// 提交确认
ElMessage.confirm(language.value == 0 ? '确认提交订单吗？' :'Confirm to submit the order?', {
confirmButtonText: language.value == 0 ? '确定' :'Confirm',
cancelButtonText: language.value == 0 ? '取消' :'Cancel',
ElMessage.confirm(language.value == 0 ? '确认提交订单吗？' : 'Confirm to submit the order?', {
confirmButtonText: language.value == 0 ? '确定' : 'Confirm',
cancelButtonText: language.value == 0 ? '取消' : 'Cancel',
type: 'warning'
}).then(() => {
newsSubmitOrderHotel(form.value).then(res=>{
newsSubmitOrderHotel(form.value).then(res => {
if (res.data) {
if (res.data.roomNum == -100) {
ElMessage.warning(language.value == 0 ? '剩余房间数不足' :'The remaining number of rooms is insufficient')
ElMessage.warning(language.value == 0 ? '剩余房间数不足' : 'The remaining number of rooms is insufficient')
checkreRooms()
} else {
//去付钱
}
} else {
ElMessage.warning(language.value == 0 ? '无可预定的房间' :'No rooms available to book')
ElMessage.warning(language.value == 0 ? '无可预定的房间' : 'No rooms available to book')
}
})
})
}
function pay() {
//确认付款
ElMessage.confirm(language.value == 0 ? '确认付款吗？' : 'Confirm payment?', {
confirmButtonText: language.value == 0 ? '确定' : 'Confirm',
cancelButtonText: language.value == 0 ? '取消' : 'Cancel',
type: 'warning'
}).then(() => {
newsSubmitOrderHotel(form.value).then(res => {
if (res.data) {
if (res.data.roomNum == -100) {
}
}
})
})
......@@ -341,25 +403,36 @@ function submit() {
</script>
<style scoped lang="scss">
.bigMoney{font-size: 36px!important;
font-family: DIN Alternate;
font-weight: bold;}
.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;
.border-rr {
border-radius: 5px;
border: 1px solid #DCDFE6;
}
.room {
font-weight: 400;
font-size: 14px;
color: #929AA0;}
color: #929AA0;
}
.ccitemBox {
overflow: auto;
......@@ -367,8 +440,10 @@ function submit() {
margin: 10px 0;
display: block;
min-height: 30px;
span {
color: #FF8124;font-family: DIN Alternate;
color: #FF8124;
font-family: DIN Alternate;
font-size: 24px;
}
}
......@@ -390,4 +465,8 @@ function submit() {
font-size: 13px;
}
}
.red {
color: #FF8124;
}
</style>
......
src/viewsPc/match/pay.vue
......@@ -87,8 +87,6 @@
{{ language == 0 ?'登录后查看详细报项信息':'View detailed report information after logging in' }}
</el-button>
</div>
</el-card>
<el-card class="mt20 mb20">
......@@ -308,7 +306,6 @@
<h3 class="wePrice">{{ language==0?'¥':'€' }}{{form.totalFee}}</h3>
<span v-if="language==0" class="text-danger size12">*您可以在上传汇款单完成后，与联系人进行电话确认。具体缴费结果，可以在个人中心-我的报名中查看进度</span>
<span v-else class="text-danger size12">*You can confirm with the contact person by phone after uploading the remittance form. The specific payment results can be viewed in the My Registration section of the personal center to check the progress</span>
</div>
</el-card>
</div>
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!