Skip to content

M
million
Commit cf506914 authored by youjie's avatar youjie
Browse files
Options

no message

parent b0ee96fd
Hide whitespace changes
Inline Side-by-side
Showing with 1409 additions and 0 deletions
src/components/hotal/RoomCard.vue 0 → 100644
View file @ cf506914
<template>
<div>
<div class="text-subtitle2 text-weight-bold">選擇房間類型、選項</div>
<div class="text-grey-6 f12 q-my-md">請選擇出房間類型</div>
<div class="rounded-borders">
<div class="non-selectable">
<div class="row wrap">
<div class="relative q-pa-xs cursor-pointer"
:class="{'col-4':prices.length>2,'col':prices.length<3}"
v-for="(item,index) in prices" :key="index">
<div class="rounded-borders overflow-hidden column "
:style="{'border': chooseObj&&item.id==chooseObj.id?'':'1px solid #eee'}"
:class="{'bg-grey-1 ':chooseObj&&item.id!=chooseObj.id,
'bg-primary shadow-24':chooseObj&&item.id==chooseObj.id}"
@click="chosenDateHandler(item)">
<q-img :src="item.roomImageURL"
:ratio="16/9" style="width: 100%;"/>
<div class="column q-pt-xs q-pb-sm q-px-sm">
<span class="fz15 text-weight-bold"
:class="{'text-white':chooseObj&&item.id==chooseObj.id}">
<span v-if="item.roomType==1">{{getGradeType(item.gradeType)}}单人间</span>
<span v-if="item.roomType==2">{{getGradeType(item.gradeType)}}双人间</span>
<span v-if="item.roomType==3">{{getGradeType(item.gradeType)}}大床房</span>
<span v-if="item.roomType==4">{{getGradeType(item.gradeType)}}三人间</span>
<span v-if="item.roomType==5">{{getGradeType(item.gradeType)}}四人间</span>
<span v-if="item.roomType==6">{{getGradeType(item.gradeType)}}日式房</span>
<span v-if="item.roomType==7">{{getGradeType(item.gradeType)}}日式+西式混合房</span>
<span v-if="item.roomType==8">{{getGradeType(item.gradeType)}}大床房（小型）</span>
<span v-if="(item.roomType==9||item.roomType=='')&&item.gradeType==''">未知房型</span>
</span>
<span class="fz13"
:class="{'text-grey-6 ':chooseObj&&item.id!=chooseObj.id,
'text-grey-2':chooseObj&&item.id==chooseObj.id}">
<span v-if="item.smoking==0">禁烟, </span>
<span v-if="item.smoking==1">可吸烟, </span>
<span v-if="item.withBath==0">无浴室</span>
<span v-if="item.withBath==1">有浴室</span>
</span>
</div>
</div>
<div class="absolute" style="right: 10px;bottom: 65px;">
<span class="text-white f12 q-px-sm row items-center"
style="background: rgba(23,23,23,.5);border-radius: 30px;"
@click.stop="showImageHandler(item.roomImageURL,item.images)">
<q-icon class="q-pl-xs" name="images"></q-icon>
<span>{{item.images.length}}</span>
</span>
</div>
</div>
</div>
</div>
</div>
<q-dialog class="no-padding" v-model="showImagePriview"
v-if="images && images.length > 0">
<image-preview :current="currentImage" :images="images"></image-preview>
</q-dialog>
</div>
</template>
<script>
import { date } from "quasar";
import ImagePreview from 'src/components/common/ImagePreview.vue'
export default {
components: {ImagePreview},
props: ["priceList"],
data() {
return {
images: [],
currentImage:0,
showImagePriview: false,
chooseObj:null
};
},
watch: {
priceList: {
handler(newVal, oldValue) {
this.prices = newVal;
this.init();
},
deep: true, // 深度监听
},
},
created() {
this.prices = this.priceList;
},
methods: {
init() {
this.chooseObj = null
},
chosenDateHandler(item) {
this.chooseObj = item
this.$emit("change", item);
},
showImageHandler(url,img) {
this.images = img
this.currentImage = url
this.showImagePriview = true
},
//获取房型
getGradeType(type) {
let gradeType = "";
switch (parseInt(type)) {
case 1:
gradeType = "标准";
break;
case 2:
gradeType = "普通";
break;
case 3:
gradeType = "经济";
break;
case 4:
gradeType = "精品";
break;
case 5:
gradeType = "豪华";
break;
case 6:
gradeType = "套房";
break;
}
return gradeType;
},
reset() {
this.chooseObj = "";
},
},
};
</script>
<style>
.hover-date:hover {
background: #eee;
}
</style>
\ No newline at end of file
src/components/hotal/orderPreview.vue 0 → 100644
View file @ cf506914
<template>
<div class="column full-height">
<div class="col">
<div class="text-right" v-if="$q.platform.is.desktop">
<q-btn
color="primary"
icon="refresh"
label="全部重選"
@click="resetHandler"
flat
/>
</div>
<template v-if="p">
<div class="text-grey-6 f12 q-my-md">選擇類型</div>
<div class="row wrap">
<div v-for="(x,i) in p.roomOptions" :key="i">
<q-chip size="14px" clickable @click="handleSelect(x)"
:text-color="selectedObj&&selectedObj.id==x.id?'white':'dark'"
:color="selectedObj&&selectedObj.id==x.id?'primary':'grey-3'" square>{{getMealType(x.meals)}}</q-chip>
</div>
</div>
</template>
<div class="text-grey-6 f12 q-my-md">選擇數量</div>
<div class="row items-end">
<div class="col" :class="{'column':$q.platform.is.mobile}">
<div>
<span class="text-subtitle2 text-weight-bold">{{ selectedObj?getMealType(selectedObj.meals):''}}</span>
<span class="text-grey-6 f12 q-ml-sm"></span></span>
</div>
<div v-if="$q.platform.is.mobile">
<span class="text-grey-7 product-price" style="font-size: 13px">
CNY {{ selectedObj?getPrice2(selectedObj.chargeableRateInfoPerPersonForANightBySetCurrency):0 }} /人均
</span>
</div>
</div>
<div class="row items-end">
<span v-if="$q.platform.is.desktop" class="text-grey-7 product-price" style="font-size: 13px">
CNY {{selectedObj? getPrice2(selectedObj.chargeableRateInfoPerPersonForANightBySetCurrency):0 }} /人均
</span>
<q-input
style="width: 150px"
@input="changePeople"
v-model="chosenObj.Count"
class="col"
:class="{
'q-ml-sm q-px-none q-pl-none': $q.platform.is.desktop,
}"
mask="#"
reverse-fill-mask
dense
standout
readonly
>
<template v-slot:prepend>
<q-btn
color="primary"
size="sm"
class="q-px-none"
flat
icon="remove"
@click="addPeople('Count', -1)"
/>
</template>
<template v-slot:append>
<q-btn
color="primary"
size="sm"
class="q-px-none"
flat
icon="add"
@click="addPeople('Count', 1)"
/>
</template>
</q-input>
</div>
</div>
</div>
<div class="q-mt-md q-pt-md" style="border-top: 1px dashed #eee">
<div class="row items-center">
<span class="text-subtitle2 text-grey-6 col">總金額</span>
<span class="text-h6 text-primary product-price">CNY {{ moneyFormat(sumPrice,0) }}</span>
</div>
<div class="q-mt-md text-right"
:class="{'row wrap justify-end items-start':$q.platform.is.mobile}">
<span :class="{'col-12 q-mb-sm':$q.platform.is.mobile}">
<span class="f12 text-negative" v-if="!p"
:class="{'q-mr-lg':$q.platform.is.desktop}">
{{$q.platform.is.mobile?'請選擇上面的房間類型':'請選擇左側的房間類型'}}
</span>
<span class="f12 text-negative"
:class="{'q-mr-lg':$q.platform.is.desktop}"
v-if="!selectedObj&&p" >
{{`請選擇上面的類型`}}
</span>
</span>
<q-btn color="primary" label="立即訂購" unelevated class="q-px-lg"
:disable="sumPrice==0"
@click="goOrderHandler"/>
</div>
</div>
</div>
</template>
<script>
import { date } from "quasar";
export default {
props: ["SimilarList","msg","price","JapanIncrease","liveNvm"],
watch: {
price: {
handler(n, o) {
this.p = n;
this.p.roomOptions.forEach(x => {
if(this.selectedObj&&this.getMealType(x.meals)==this.getMealType(this.selectedObj.meals)){
this.selectedObj = x
}
});
this.calcMoney()
},
deep: true,
immediate: false
},
JapanIncrease: {
handler(n, o) {
this.JapanIncrease = n;
},
deep: true,
immediate: true
},
},
data() {
return {
p: null,
chosenObj: null,
sumPrice:0,
selectedObj: null,
};
},
created() {
this.initModel();
},
methods: {
goOrderHandler(){
let order = {
msg: JSON.stringify(this.msg),
// hotelId: this.msg.hotelId,
// arrivalDate: this.msg.arrivalDate,
// departureDate: this.msg.departureDate,
// roomGroup: this.msg.searchroomGroup,
liveNvm: this.liveNvm,
id: this.p.id,
selectedObjId: this.selectedObj.id,
chosenObj: this.chosenObj,
sumPrice: this.sumPrice
}
let key = this.$md5(JSON.stringify(order))
let pickuporderHotal = localStorage.getItem('pickuporderHotal')
pickuporderHotal = pickuporderHotal?JSON.parse(pickuporderHotal):[]
pickuporderHotal.push({
key,
order
})
localStorage.setItem("pickuporderHotal",JSON.stringify(pickuporderHotal))
this.CommonJump('/HotalForm/'+key, {});
},
handleSelect(item){
this.selectedObj = item
setTimeout(()=>{
this.calcMoney()
},100)
},
initModel() {
this.sumPrice=0
this.chosenObj = {
startDate: "",
Count: 1,
remark: "",
};
},
resetHandler() {
this.selectedObj = null
setTimeout(()=>{
this.p = null;
this.initModel()
},100)
this.$emit("reset");
},
changePeople(val) {},
addPeople(m, i, isDf = false) {
this.chosenObj[m] = parseInt(this.chosenObj[m]) + i;
if(m!='Count'){
this.chosenObj[m] = this.chosenObj[m] < 0 ? 0 : this.chosenObj[m]++;
}else{
this.chosenObj[m] = this.chosenObj[m] < 1 ? 1 : this.chosenObj[m]++;
}
this.calcMoney()
},
calcMoney() {
if (!this.selectedObj) return;
let money = this.getPrice2(this.selectedObj.chargeableRateInfoPerPersonForANightBySetCurrency) * this.chosenObj.Count;
this.sumPrice = money;
},
//获取餐
getMealType(meals) {
if (meals != "") {
let mealType = meals.split(",");
if (mealType[0] == 0 && mealType[2] == 0) {
return "无餐";
}
if (mealType[0] == 1 && mealType[2] == 1) {
return "含早晚餐";
}
if (mealType[0] == 1 && mealType[2] == 0) {
return "含早餐";
}
if (mealType[0] == 0 && mealType[2] == 1) {
return "含晚餐";
}
}
},
//获取价格
getPrice(price) {
return Math.ceil(price / this.JapanIncrease)*(this.auditNum+this.childNum)*this.DateDiff(this.SimilarMsg.arrivalDate,this.SimilarMsg.departureDate);
},
getPrice2(price){
return Math.ceil(price / this.JapanIncrease)
},
},
};
</script>
<style></style>
src/pages/hotel/orderForm.vue 0 → 100644
View file @ cf506914
<template>
<div class="content-page order-preview">
<q-stepper
v-model="step"
ref="stepper"
color="primary"
inactive-color="grey-5 "
class="bg-transparent"
flat
animated
>
<q-step
:name="1"
title="確認訂單"
icon="settings"
:done="step > 1"
></q-step>
<q-step
:name="2"
title="付款"
icon="iconfont iconPayment-1"
:done="step > 2"
></q-step>
<q-step
:name="3"
title="訂購完成"
icon="iconfont iconicon_finish_R"
:done="step == 3"
></q-step>
</q-stepper>
<div
class="row q-pa-md"
style="min-width: 375px; margin: 0 auto"
:class="{
row: $q.screen.width >= 1200 && $q.platform.is.desktop,
column: $q.screen.width < 1200 || $q.platform.is.mobile,
}"
>
<div class="col">
<q-form ref="baseUserInfo">
<q-card flat class="q-pa-md">
<div class="text-subtitle1 text-weight-bolder">訂購人資訊</div>
<q-separator color="grey-2" class="q-my-md" />
<div class="row q-col-gutter-md">
<div :class="filedWidth">
<q-select
v-model="userInfo.Country"
@input="changeCountry"
:options="countrys"
emit-value
option-label="Name"
option-value="ID"
map-options
label="國家/地區"
standout
/>
</div>
<div :class="filedWidth">
<q-input
standout
v-model="userInfo.Mailbox"
label="郵箱地址"
:rules="[(val) => /^[a-zA-Z0-9]+([-_.][A-Za-zd]+)*@([a-zA-Z0-9]+[-.])+[A-Za-zd]{2,5}$/.test(val) || '請輸入正確的郵箱地址']"
ref="mail"
/>
</div>
</div>
</q-card>
<q-card flat class="q-pa-md q-mt-lg" v-if="details">
<div class="text-subtitle1 text-weight-bolder q-mb-md">旅客資料</div>
<div class="row">
<q-img
:src="roomRateDetails?roomRateDetails[0].roomImageURL:'https://image.kkday.com/v2/image/get/s1.kkday.com/product_138437/20230217083232_t5rcO/jpg'"
class="rounded-borders"
spinner-color="grey-3"
style="width: 80px"
/>
<div class="q-ml-md col">
<div class="text-subtitle1 ellipsis">
{{details.hotelName}}
</div>
<div class="text-caption text-grey-6 ellipsis q-mt-sm">
{{details.access}}
</div>
</div>
</div>
<div class="q-mt-md row">
<div class="text-grey-9">
<q-icon name="iconfont iconrili" size="20px" class="q-mr-sm" />
<span>{{msg.arrivalDate}}至{{msg.departureDate}}</span>
</div>
<template v-for="x in roomRateDetails">
<template v-if="x.checked">
<template v-for="y in x.roomOptions">
<div class="text-grey-9 q-ml-md" v-if="y.checked">
<q-icon name="iconfont iconcanpinhui-xican" size="17px" class="q-mr-sm" />
<span class="q-mr-sm">{{getMealType(y.meals)}} x {{ y.Count }}间 </span
>
</div>
</template>
<div class="row items-center">(
<span class="fz15 text-weight-bold">
<span v-if="x.roomType==1">{{getGradeType(x.gradeType)}}单人间</span>
<span v-if="x.roomType==2">{{getGradeType(x.gradeType)}}双人间</span>
<span v-if="x.roomType==3">{{getGradeType(x.gradeType)}}大床房</span>
<span v-if="x.roomType==4">{{getGradeType(x.gradeType)}}三人间</span>
<span v-if="x.roomType==5">{{getGradeType(x.gradeType)}}四人间</span>
<span v-if="x.roomType==6">{{getGradeType(x.gradeType)}}日式房</span>
<span v-if="x.roomType==7">{{getGradeType(x.gradeType)}}日式+西式混合房</span>
<span v-if="x.roomType==8">{{getGradeType(x.gradeType)}}大床房（小型）</span>
<span v-if="(x.roomType==9||x.roomType=='')&&x.gradeType==''">未知房型</span>
</span>
<span class="fz13 text-grey-6 q-ml-sm">
<span v-if="x.smoking==0">禁烟, </span>
<span v-if="x.smoking==1">可吸烟, </span>
<span v-if="x.withBath==0">无浴室</span>
<span v-if="x.withBath==1">有浴室</span>
</span>
)
</div>
</template>
</template>
<div class="text-grey-9 q-ml-sm">
<q-icon name="iconfont icontime" size="20px" class="q-mr-xs q-ml-sm" />
<span class="q-mr-sm">
住宿時間 {{OrderDate.liveNvm}} 晚
</span>
<span class="q-mr-sm"></span>
<q-icon name="iconfont iconpeople" size="20px" class="q-mr-xs q-ml-sm" />
<span class="q-mr-sm">
成人 {{numberOfAdults}}<span class="q-pl-sm">儿童 {{numberOfChildren}}</span>
</span>
</div>
</div>
<div class="rounded-borders bg-blue-1 q-px-md q-py-sm q-mt-sm column">
<span class="text-orange-6 q-pb-xs">超过13岁视为成人处理</span>
<span class="text-green-6">预定成功后房间将为您整晚保留</span>
<span v-if="(details.cancellationPeriod1==-1||details.cancellationPeriod1==0)&&(details.cancellationType1==1||details.cancellationType1==2)">
<template v-if="details.cancellationPeriod1==-1">没有通知取消，</template>
<template v-if="details.cancellationPeriod1==0">入住当日取消，</template>
<template v-if="details.cancellationType1==1">手续费：{{details.cancellation1}}%</template>
<template v-if="details.cancellationType1==2">手续费：{{details.cancellation1}}</template>
</span>
<span v-if="(details.cancellationPeriod2==-1||details.cancellationPeriod2==0)&&(details.cancellationType2==1||details.cancellationType2==2)">
<template v-if="details.cancellationPeriod2==-1">没有通知取消，</template>
<template v-if="details.cancellationPeriod2==0">入住当日取消，</template>
<template v-if="details.cancellationType2==1">手续费：{{details.cancellation2}}%</template>
<template v-if="details.cancellationType2==2">手续费：{{details.cancellation2}}</template>
</span>
<span v-if="(details.cancellationPeriod3==-1||details.cancellationPeriod3==0)&&(details.cancellationType3==1||details.cancellationType3==2)">
<template v-if="details.cancellationPeriod3==-1">没有通知取消，</template>
<template v-if="details.cancellationPeriod3==0">入住当日取消，</template>
<template v-if="details.cancellationType3==1">手续费：{{details.cancellation3}}%</template>
<template v-if="details.cancellationType3==2">手续费：{{details.cancellation3}}</template>
</span>
</div>
<q-separator color="grey-2" class="q-mt-md" />
<div
class="bg-grey-1 rounded-borders q-pa-md q-mt-md guest-item"
>
<div class="text-subtitle1 q-pb-md text-weight-bold"></div>
<div class="row q-col-gutter-md">
<div :class="filedGuestWidth">
<q-input
standout
v-model="parameters.guestLastName"
label="本國姓"
placeholder="例：張"
:rules="[(val) => !!val || '請輸本國姓']"
ref="SurName"
/>
</div>
<div :class="filedGuestWidth">
<q-input
standout
v-model="parameters.guestFirstName"
label="本國名"
placeholder="例：三"
:rules="[(val) => !!val || '請輸本國名']"
ref="Name"
/>
</div>
<div :class="filedGuestWidth">
<q-input
standout
v-model="parameters.guestPhoneNumber"
label="電話"
:rules="[(val) => !!val || '請輸正確電話']"
ref="Mobile"
mask="#"
reverse-fill-mask
>
<template v-slot:prepend>
<div class="text-subtitle2">+{{ userInfo.areaCode }}</div>
</template>
</q-input>
</div>
<div :class="filedGuestWidth">
<q-input
standout
v-model="parameters.guestAddress"
label="当前地址"
:rules="[(val) => !!val || '請輸当前地址']"
ref="guestAddress"
></q-input>
</div>
<div :class="filedGuestWidth">
<q-input
class="q-pb-md"
standout
:value="parameters.checkInTime"
label="入住時間"
:rules="[(val) => !!val || `請选入住時間`]"
ref="checkInTime"
readonly
>
<template v-slot:append>
<q-icon name="event" class="cursor-pointer"></q-icon>
</template>
<q-popup-proxy :offset="[0, 0]" ref="qDateProxy">
<div class="row">
<q-time format24h v-model="parameters.checkInTime" mask="HH:mm"
@input="()=>$refs.qDateProxy.hide()"/>
</div>
</q-popup-proxy>
</q-input>
</div>
</div>
</div>
<q-separator color="grey-2" class="q-mt-md" />
<template>
<div
class="bg-grey-1 rounded-borders q-pa-md q-mt-md guest-item"
v-for="(x,index) in parameters.roomGroup"
:key="index"
>
<div class="text-subtitle1 q-pb-md text-weight-bold">
房間{{ index+1 }}
</div>
<div class="row q-col-gutter-md">
<div :class="filedGuestWidth">
<q-input
standout
v-model="x.roomMaleCount"
label="成人男"
placeholder=""
mask="#"
reverse-fill-mask
/>
<!-- :ref="`guest${i}Male`" :rules="[(val) => !!val || '請輸成人數']"-->
</div>
<div :class="filedGuestWidth">
<q-input
standout
v-model="x.roomFemaleCount"
label="成人女"
placeholder=""
mask="#"
reverse-fill-mask
/>
<!-- :ref="`guest${i}Female`" :rules="[(val) => !!val || '請輸成人女數']"-->
</div>
<div :class="filedGuestWidth">
<q-input
standout
v-model="x.roomChildCount"
label="儿童"
placeholder=""
mask="#"
reverse-fill-mask
:rules="[(val) => !!val || '請輸儿童數']"
/>
</div>
</div>
</div>
</template>
<div class="text-subtitle1 q-my-md text-weight-bold">特殊需求備註：</div>
<q-input standout v-model="parameters.guestRequest" input-style="height:170px;" type="textarea" placeholder="此欄位僅限資料備註。不在商品規範內的個人需求，不保證提供" maxlength="200" counter />
</q-card>
</q-form>
<coupon
v-if="!sumPrice"
:product-type="productType"
:current-price="sumPrice"
@change="changeDiscountHandler"
></coupon>
</div>
<div class="relative-position" v-if="details"
:class="{
'q-ml-lg': !($q.screen.width < 1200 || $q.platform.is.mobile),
'q-mt-lg full-width': $q.screen.width < 1200 || $q.platform.is.mobile,
}"
>
<div
class="rounded-borders bg-white q-pa-md"
style="width: 300px"
:style="{
width:
$q.screen.width < 1200 || $q.platform.is.mobile
? 'unset'
: '300px',
position:$q.platform.is.mobile?'unset':'sticky',
top:$q.platform.is.mobile?'unset':'50px',
}"
>
<div class="text-subtitle1 text-weight-bolder">付款明細</div>
<div class="row q-mt-md">
<q-img
:src="roomRateDetails?roomRateDetails[0].roomImageURL:'https://image.kkday.com/v2/image/get/s1.kkday.com/product_138437/20230217083232_t5rcO/jpg'"
class="rounded-borders"
spinner-color="grey-3"
style="width: 80px"
/>
<div class="q-ml-md col">
<div class="text-subtitle1 ellipsis">
{{details.hotelName}}
</div>
<div class="text-caption text-grey-6 ellipsis q-mt-sm">
{{details.access}}
</div>
</div>
</div>
<div class="q-mt-md text-grey-6">
<div class="row">
<div style="width: 80px">
入住时间：</div>
<div class="q-ml-md">
{{parameters.arrivalDate}}
<template v-for="(x,i) in roomRateDetails">
<template v-if="x.checked">
<template v-for="y in x.roomOptions">
<template v-if="y.checked">{{y['check-inStartTime']}} 之后</template>
</template>
</template>
</template>
</br>
<template v-for="(x,i) in roomRateDetails">
<template v-if="x.checked">
<template v-for="y in x.roomOptions">
<template v-if="y.checked">{{y.checkInTime+' '+y['finalCheck-outTime']}} 之前</template>
</template>
</template>
</template>
</div>
</div>
</div>
<q-separator color="grey-2" class="q-my-md"/>
<div class="text-grey-9">
<template v-for="(x,i) in roomRateDetails">
<template v-if="x.checked">
<template v-for="y in x.roomOptions">
<div class="row q-mb-sm" v-if="y.checked">
<div class="col">{{getMealType(y.meals)}} x {{ y.Count }}间</div>
<div>CNY {{ getPrice2(y.chargeableRateInfoPerPersonForANightBySetCurrency) }}</div>
</div>
</template>
</template>
</template>
<hr
style="border: none; border-top: 1px dashed #eee !important"
class="bg-transparent q-mb-sm"
/>
<div class="row q-mb-sm items-center">
<div class="col">總金額</div>
<div class="text-subtitle2 text-weight-bolder text-primary">
CNY {{ moneyFormat(sumPrice, 2) }}
</div>
</div>
<hr style="border:none;border-top:1px dashed #EEE !important;" class="bg-transparent q-mb-sm" />
<div class="row q-mb-sm items-center" v-if="parameters.DiscountsMoney > 0">
<div class="col">優惠金額</div>
<div
class="text-subtitle2 text-weight-bolder text-teal"
v-if="parameters.DiscountsMoney > 0"
>
CNY - {{ moneyFormat(parameters.DiscountsMoney, 2) }}
</div>
<div class="text-grey-5" v-else>暫無優惠</div>
</div>
<div class="row q-mb-sm items-center">
<div class="col">支付金額</div>
<div class="text-h6 text-weight-bolder text-primary product-price">
CNY {{ moneyFormat(parameters.totalChargeableRateInfo, 2) }}
</div>
</div>
</div>
<div class="text-right q-mt-md" v-if="step!=3">
<q-btn v-if="step!=3" unelevated color="primary"
:loading="loading" :label="step!=3?'立即支付':'已支付'" @click="submit()"
:disable="step!=3&&loading"/>
<q-btn v-else unelevated color="primary" label=""/>
</div>
</div>
</div>
</div>
<div v-if="!orderKey || orderKey == ''" class="text-center q-my-xl">
<none-data
iconType="order"
title="沒有找到您的訂單信息哦"
subtitle="趕緊去挑選心儀的旅遊產品吧,三秒後自動跳轉到首頁"
></none-data>
</div>
<auth></auth>
</div>
</template>
<script>
import NoneData from "src/components/common/noneData.vue";
import auth from "src/components/common/auth.vue";
import { date } from 'quasar'
import { json } from "body-parser";
import coupon from 'src/components/common/coupon.vue'
import ProductTypeEnum from "src/utils/producttypeenum";
import componentsMap from "src/components/car/Map.vue";
export default {
components:{
coupon,
componentsMap,
NoneData,
auth
},
data() {
return {
CouponIds: [],
productType: 4,
sumPrice: 0,//总金额
order: null,//订单信息
orderKey: "",
optionObj: null,//类型
details: null,//产品详情
options: {//音频控件
currentPage: 0,
speed: 300,
itemAnimation: true,
centeredSlides: true,
thresholdDistance: 100,
thresholdTime: 300,
loopedSlides: 2,
slidesToScroll: 1,
loop: true,
},
OrderDate: null,//接收产品相关信息
step: 1,
userInfo: {
Country: 0,
areaCode: "",
Mailbox: "",
Mobile: "",
FullName: ""
},
countrys: [],
areaCodes: [],
loading: false,
msg:null,
JapanIncrease: null,
numberOfAdults: 0,
numberOfChildren: 0,
roomRateDetails: [],
guest: {
roomCount: 0,//房间编号
roomMaleCount:0,
roomFemaleCount:0,
roomChildCount:0,
roomInfantCount:0,
rateGroup:[]
},
chekedChildCount: 0,
TotalChildCount: 0,
isBaoChild: true,
isShowTime: true,
price: 0,
SettlementPrice: 0,
parameters: {
dataId:'',//订单id
hotelId:'',//酒店id
totalRoomCount:'',//使用客房总数
arrivalDate:'',//开始时间
checkInTime:'',//入住时间
departureDate:'',//结束时间
roomOptionCd:'',//房间计划CD
totalChargeableRateInfo:'',//合计费用
guestRequestAppendix: 0,//费用合计（日元）
totalPriceJapanese:'',//日元合计费用
comment: '',//评论
roomGroup:[],//每天住宿的费用明细
guestLastName:'',//姓
guestFirstName:'',//名
guestAddress:'',//住宿代表地址
guestPhoneNumber:'',//住宿代表电话
guestEmail:'',//住宿代表Email
//备注
guestRequest:'',
CustomerId:0,
HotelName:'',//酒店名称
HotelPic:'',//酒店图片
EmployeeIdStr:'',
OldTotalPrice:0,
CustomerPayMoney:0,
DiscountMoney:0,//优惠
OrderSource: 3,//类型 1 来源内部 2 来源B2B 3 来源B2C
OrderForm:1,
DiscountsMoney: 0//优惠
},
TotalPeople: 0,//总人数
};
},
computed: {
filedWidth() {
return {
"col-12": this.$q.screen.width < 1200,
"col-6": this.$q.screen.width >= 1200,
};
},
filedGuestWidth() {
return {
"col-12": this.$q.screen.width < 1200,
"col-4": this.$q.screen.width >= 1200,
};
},
},
created() {},
mounted() {
if(this.checkParamsHandler()){
this.getData()
}
this.initGuestHandler();
this.getUserInfoHandler()
},
methods: {
changeDiscountHandler(coupon) {
if (coupon) {
this.parameters.DiscountsMoney = coupon.discountMoney;
this.CouponIds = [coupon.couponId];
this.parameters.DiscountsIds = this.CouponIds.join(",")
} else {
this.parameters.DiscountsMoney = 0;
this.CouponIds = [];
this.parameters.DiscountsIds = ''
}
this.parameters.totalChargeableRateInfo = this.sumPrice - this.parameters.DiscountsMoney
this.$forceUpdate();
},
// 获取商品详情
getData() {
this.$q.loading.show();
this.apipost(
"dmc_post_Get_GetJAPAN_RoomsList",
this.msg,
(r) => {
this.$q.loading.hide();
if (r.data.resultCode == 1) {
this.details = r.data.data;
this.parameters.HotelName = this.details.hotelName
if (
Object.prototype.toString.call(r.data.data.roomRateDetails) ==
"[object Object]"
) {
this.roomRateDetails.push(r.data.data.roomRateDetails);
} else {
this.roomRateDetails = r.data.data.roomRateDetails;
}
let arrList = function(arr){
arr.forEach(item=>{
item.images=[]
item.id=null
item.checked =false
})
}
arrList(this.roomRateDetails)
this.roomRateDetails.forEach((x,index) => {
let List = function(arr){
arr.forEach(item=>{
item.checked =false
item.Count = 1
item.checkInTime = ''
})
}
List(x.roomOptions)
x.images = []
x.images.push(x.roomImageURL)
for (let i = 0; i < 4; i++) {
if(x.roomOptions[`planPictureURL${(i+1)}`] && x.roomOptions[`planPictureURL${(i+1)}`].length>0){
x.images.push(x.roomOptions[`planPictureURL${(i+1)}`])
}
}
if (
Object.prototype.toString.call(x.roomOptions) ==
"[object Object]"
) {
let arr = [];
arr.push(x.roomOptions);
x.roomOptions = arr;
}
});
this.roomRateDetails.forEach((x,k)=>{
if((k+1)===this.OrderDate.id){
x.checked = true
x.roomOptions.forEach((y,index)=>{
if((index+1)===this.OrderDate.selectedObjId){
y.checked = true
y.Count = this.OrderDate.chosenObj.Count
y.checkInTime = date.formatDate(date.addToDate(new Date(this.parameters.arrivalDate), { days: 1 }), 'YYYY-MM-DD')
this.parameters.roomOptionCd = y.roomOptionCd
}
})
}
})
this.parameters.HotelPic = this.roomRateDetails[0].roomImageURL
this.JapanIncrease = r.data.data.JapanIncrease
this.TotalChildCount = 0;
let rateGrouoLen = 0;
this.details.searchRoomGroup.forEach(x=>{
if(Object.prototype.toString.call(x.rateGroup) == '[object Object]'){
let arr = [];
arr.push(x.rateGroup);
x.rateGroup= arr;
}
let tt = 0;
let tt2 = 0;
let AdultTotalPrice = 0;
let childToTalPrice = 0;
let AdultCount = 0;
let childCount = 0;
let AdultJapanPrice = 0;
let ChildJapanPrice = 0;
let AdultJapanCount = 0;
let childJapanCount = 0;
//原始成人
let oldAount=0;
let childAount=0;
let oldAuditPrice=0;
let oldChildPrice=0;
this.TotalChildCount+=x.roomChildCount*x.rateGroup.length;
rateGrouoLen+= x.rateGroup.length;
this.chekedChildCount = this.childNum*rateGrouoLen;
if(this.TotalChildCount<this.chekedChildCount){
this.isBaoChild=true;
}
//无价格 只有房间价格
let onlyRoomPrice=0;
let onlyJanpnase=0;
x.rateGroup.forEach(z=>{
if(z.perAdultRateBySetCurrency){
z.oldAuditPrice = z.perAdultRateBySetCurrency;
z.oldchildPrice = z.perChildRateBySetCurrency;
z.perAdultRateBySetCurrency = Math.ceil(z.perAdultRateBySetCurrency/this.details.JapanIncrease);
z.perChildRateBySetCurrency = Math.ceil(z.perChildRateBySetCurrency/this.details.JapanIncrease);
if(x.roomAdultCount>0){
AdultTotalPrice+=parseFloat(z.perAdultRateBySetCurrency);
oldAuditPrice+=parseFloat(z.oldAuditPrice);
AdultJapanPrice+=parseFloat(z.perAdultRate);
}
if(x.roomChildCount>0){
childToTalPrice+=parseFloat(z.perChildRateBySetCurrency);
oldChildPrice+=parseFloat(z.oldchildPrice);
ChildJapanPrice+=parseFloat(z.perChildRate);
}
}
if(z.totalPerRoomRateBySetCurrency){
z.totalPerRoomRateBySetCurrency = Math.ceil(z.totalPerRoomRateBySetCurrency/this.details.JapanIncrease);
onlyRoomPrice+=parseFloat(z.totalPerRoomRateBySetCurrency);
onlyJanpnase+=parseFloat(z.totalPerRoomRate);
}
})
AdultCount+=AdultTotalPrice*x.roomAdultCount;
childCount+=childToTalPrice*x.roomChildCount;
// AdultCount+=AdultTotalPrice;
// childCount+=childToTalPrice;
oldAount+=oldAuditPrice;
childAount+=childAount;
this.parameters.totalChargeableRateInfo += parseFloat(AdultCount+childCount+onlyRoomPrice);
this.parameters.OldTotalPrice+=parseFloat(oldAount+childAount+onlyRoomPrice);
AdultJapanCount+=AdultJapanPrice*x.roomAdultCount;
childJapanCount+=ChildJapanPrice*x.roomChildCount;
this.SettlementPrice=this.parameters.totalChargeableRateInfo;
this.SettlementPrice=this.parameters.totalChargeableRateInfo;
this.price=this.parameters.totalChargeableRateInfo;
// AdultJapanCount+=AdultJapanPrice;
// childJapanCount+=ChildJapanPrice;
this.parameters.totalPriceJapanese += parseFloat(AdultJapanCount+childJapanCount+onlyJanpnase);
if (this.isShowTime&&!this.isLoginB2B) {
this.getUserCanUseCouponList();
}
})
} else {
this.$message.error(r.data.message)
}
},
null
);
},
checkParamsHandler() {
try {
if (this.$route.params && this.$route.params.id) {
let key = this.$route.params.id;
let pickuporderHotal = localStorage.getItem("pickuporderHotal");
pickuporderHotal = pickuporderHotal ? JSON.parse(pickuporderHotal) : [];
if (pickuporderHotal.length > 0) {
this.order = pickuporderHotal.find((x) => x.key == key);
if (this.order) {
this.orderKey = key;
this.OrderDate = this.order.order
this.msg = JSON.parse(this.OrderDate.msg)
this.sumPrice = this.OrderDate.sumPrice
this.parameters.arrivalDate = this.msg.arrivalDate
this.parameters.departureDate = this.msg.departureDate
this.parameters.totalRoomCount = this.msg.searchroomGroup.length
for(let i=0;i<this.parameters.totalRoomCount;i++){
this.parameters.roomGroup.push(JSON.parse(JSON.stringify(this.guest)))
}
this.sumPrice = this.OrderDate.sumPrice
this.parameters.totalChargeableRateInfo = this.OrderDate.sumPrice
this.numberOfAdults = 0,
this.numberOfChildren = 0,
this.msg.searchroomGroup.forEach(x=>{
this.numberOfAdults+=x.numberOfAdults
this.numberOfChildren+=x.numberOfChildren
})
}
}
}
} catch (error) {
console.log(error);
}
if (this.orderKey == "") {
setTimeout(() => {
}, 3000);
}
return this.orderKey != "";
},
async submit() {
this.parameters.CustomerId = this.userInfo.Id;
this.parameters.EmployeeIdStr = this.userInfo.Surname+this.userInfo.Name
console.log(this.parameters,'-----')
return
this.$refs.mail.validate()
this.$refs.SurName.validate()
this.$refs.Name.validate()
this.$refs.Mobile.validate()
this.$refs.guestAddress.validate()
this.$refs.checkInTime.validate()
this.parameters.guestEmail = this.userInfo.Mailbox
// for (let i = 0; i < this.parameters.roomGroup.length; i++) {
// this.$refs[`guest${i}Male`][0].validate()
// this.$refs[`guest${i}Female`][0].validate()
// }
let roomMaleCount = 0
let roomFemaleCount = 0
let roomChildCount = 0
let roomTotal = 0
let CountTotal = Number(this.numberOfAdults)+Number(this.numberOfChildren)
this.parameters.roomGroup.forEach(x=>{
roomMaleCount += x.roomMaleCount
roomFemaleCount += x.roomFemaleCount
roomChildCount += x.roomChildCount
roomTotal = Number(roomMaleCount) + Number(roomFemaleCount) + Number(roomChildCount)
})
if(Number(roomTotal)!=Number(CountTotal)){
this.$message.warn(`房間入住總人數不能大於且小於${CountTotal}`)
return
}
let flag = true
flag = await this.formValidateHandler('baseUserInfo')
if(!flag){
let errorObj = this.$refs.baseUserInfo.getValidationComponents().find(x=>x.innerError)
window.scrollTo(0,errorObj.$el.offsetTop)
}else{
this.SetCarOrder()
}
},
async formValidateHandler(formName){
let temp=this.$refs[formName]
let formObj = temp instanceof Array ? temp[0] : temp
return formObj.validate()
},
SetCarOrder(){
console.log(this.parameters,'====')
return
this.loading = true
this.apipost(
"dmc_post_Get_GetJAPAN_HotelBooking",
this.parameters,
(r) => {
if (r.data.resultCode == 1) {
this.step = 2
let ErpOrderId = r.data.data.Id
this.AddOrderInfo(ErpOrderId)
}else{
this.$message.error(r.data.message)
this.loading = false
}
})
},
AddOrderInfo(ErpOrderId){
this.apipost(
"AddOrderInfo_post",
{
SurName: this.parameters.Name?this.parameters.Name:this.userInfo.FullName,
Name: '',
ContactNumber: this.userInfo.Mobile,// 联系电话
Mailbox: this.userInfo.Mailbox,//邮箱
GoodsId: this.parameters.CouponsId,//商品id
GoodsName: this.details.Name,//商品名称
GoodsPic: this.roomRateDetails[0].roomImageURL,//商品图片
GoodsType: this.productType,
OrderMake: this.parameters.UseDate,//订单摘要（例如出行时间）
TotalPrice: this.parameters.totalChargeableRateInfo,//总价格
PreferentialPrice: this.parameters.DiscountsMoney,// 优惠总金额
ErpOrderId: ErpOrderId,//erp订单id
Country: this.userInfo.Country,//国家id
PlatformTax: 0,//平台税金默认0
Income: 0,//已收默认0
Refund: 0,//退款金额默认0
},
(r) => {
if (r.data.resultCode == 1) {
this.step = 3
this.$message.success("訂單創建成功")
this.goPayHandler(r.data.data)
}else{
this.$message.error(r.data.message)
}
this.loading = false
})
},
goPayHandler(pay){
let pickuporderScenTickets = localStorage.getItem("pickuporderScenTickets");
pickuporderScenTickets = pickuporderScenTickets ? JSON.parse(pickuporderScenTickets) : [];
let i = pickuporderScenTickets.findIndex((x) => x.key == this.orderKey);
if (i >= 0) {
pickuporderScenTickets.splice(i, 1);
localStorage.setItem("pickuporderScenTickets", JSON.stringify(pickuporderScenTickets));
}
this.CommonJump("/pay/" + pay.OrderNo, {});
},
optionsFn(cd) {
return (
cd >=
date.formatDate(date.addToDate(new Date(), { days: 0 }), "YYYY/MM/DD")
);
},
// 音频
slideHandler(e) {
this.options.currentPage = e.currentPage;
if (
e.currentPage != 0 &&
this.$refs.video &&
this.$refs.video.isPlaying
) {
this.$refs.video.pause();
}
},
playHandler(e) {},
pauseHandler(e) {},
timeChangeHandler(e) {
//console.log(e)
},
//
seekedChangeHandler(e) {
//console.log(e)
},
initGuestHandler() {
},
//获取价格
getPrice(price) {
//(chargeableRateInfoPerPersonForANightBySetCurrency/0.9975)*入住天数*入住人数
//天数
return Math.ceil(price / this.JapanIncrease)*(this.auditNum+this.childNum)*this.DateDiff(this.SimilarMsg.arrivalDate,this.SimilarMsg.departureDate);
},
getPrice2(price){
return Math.ceil(price / this.JapanIncrease)
},
//获取餐
getMealType(meals) {
if (meals != "") {
let mealType = meals.split(",");
if (mealType[0] == 0 && mealType[2] == 0) {
return "无餐";
}
if (mealType[0] == 1 && mealType[2] == 1) {
return "含早晚餐";
}
if (mealType[0] == 1 && mealType[2] == 0) {
return "含早餐";
}
if (mealType[0] == 0 && mealType[2] == 1) {
return "含晚餐";
}
}
},
//获取房型
getGradeType(type) {
let gradeType = "";
switch (parseInt(type)) {
case 1:
gradeType = "标准";
break;
case 2:
gradeType = "普通";
break;
case 3:
gradeType = "经济";
break;
case 4:
gradeType = "精品";
break;
case 5:
gradeType = "豪华";
break;
case 6:
gradeType = "套房";
break;
}
return gradeType;
},
// 获取当前用户信息
getUserInfoHandler() {
let u = this.$user.userInfo;
if (u) {
this.apipost("GetCustomerInfo_post", { Id: u.id }, (r) => {
if (r.data.resultCode == 1) {
this.userInfo = r.data.data;
if(r.data.data.Moblie){
if(this.parameters.MailingState!=4){
this.parameters.Mobile = r.data.data.Moblie
}
this.userInfo.Mobile = r.data.data.Moblie
}
} else {
this.$user.userInfo = null;
}
this.initCountry();
});
}
},
// 初始化国家
initCountry() {
this.apipost("GetCountryInfo_post", {}, (r) => {
if (r.data.resultCode == 1) {
this.countrys = r.data.data.countList;
this.userInfo.Country = this.countrys[0].ID;
this.areaCodes = r.data.data.phoneCountList;
this.changeCountry(this.userInfo.Country);
this.areaCodes.forEach((x) => {
let temp = this.countrys.find((y) => y.ID == x.ID);
x.EnName = `${temp.EnName}(${x.PhoneCode})`;
});
}
});
},
changeCountry(id) {
this.userInfo.areaCode = this.areaCodes.find((x) => x.ID == id).PhoneCode;
},
},
};
</script>
<style>
.order-preview .q-stepper__content {
display: none !important;
}
.order-preview .q-toggle__track {
height: 0.7em;
border-radius: 0.35em;
opacity: 0.38;
width: 50px;
}
.order-preview .q-toggle__thumb {
top: 0.42em;
left: 0.45em;
width: 0.5em;
height: 0.5em;
transition: left 0.22s ease-in-out;
user-select: none;
z-index: 0;
}
.order-preview .q-toggle__inner--truthy .q-toggle__thumb {
left: 0.94em;
}
.order-preview .q-toggle__inner {
width: 1.9em;
}
.order-preview .q-toggle__label {
margin-top: 12px;
}
.guest-item:hover{
background: rgba(241,65,108,.04) !important;
}
.text-h6Detail {
text-align: center;
font-size: 18px;
color: #333;
font-weight: 700;
position: relative;
width:100%;
height:50px;
}
.text-h6Detail i {
position: absolute;
right:20px;
top:10px;
cursor: pointer;
font-size:23px;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment