Skip to content

M
million
Commit b2f20ed0 authored by 黄奎's avatar 黄奎
Browse files
Options

11

parent 0c8b6b81
Hide whitespace changes
Inline Side-by-side
Showing with 773 additions and 910 deletions
src/pages/didaHotel/orderForm.vue
View file @ b2f20ed0
<template> <template>
<div class="content-page order-preview"> <div class="content-page order-preview">
<q-stepper <q-stepper v-model="step" ref="stepper" color="primary" inactive-color="grey-5 " class="bg-transparent" flat
v-model="step" animated>
ref="stepper" <q-step :name="1" title="確認訂單" icon="settings" :done="step > 1"></q-step>
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 <q-step :name="2" title="付款" icon="iconfont iconPayment-1" :done="step > 2"></q-step>
:name="2"
title="付款"
icon="iconfont iconPayment-1"
:done="step > 2"
></q-step>
<q-step <q-step :name="3" title="訂購完成" icon="iconfont iconicon_finish_R" :done="step == 3"></q-step>
:name="3"
title="訂購完成"
icon="iconfont iconicon_finish_R"
:done="step == 3"
></q-step>
</q-stepper> </q-stepper>
<div <div class="row q-pa-md" style="min-width: 375px; margin: 0 auto" :class="{
class="row q-pa-md"
style="min-width: 375px; margin: 0 auto"
:class="{
row: $q.screen.width >= 1200 && $q.platform.is.desktop, row: $q.screen.width >= 1200 && $q.platform.is.desktop,
column: $q.screen.width < 1200 || $q.platform.is.mobile, column: $q.screen.width < 1200 || $q.platform.is.mobile,
}" }">
>
<div class="col"> <div class="col">
<q-form ref="baseUserInfo"> <q-form ref="baseUserInfo">
<q-card flat class="q-pa-md"> <q-card flat class="q-pa-md">
<div class="text-subtitle1 text-weight-bolder">訂購人資訊</div> <div class="text-subtitle1 text-weight-bolder">訂購人資訊</div>
<q-separator color="grey-2" class="q-my-md" /> <q-separator color="grey-2" class="q-my-md" />
<div class="row q-col-gutter-md"> <div class="row q-col-gutter-md">
<div :class="filedWidth"> <div :class="filedWidth">
<q-select <q-select v-model="userInfo.Country" @input="changeCountry" :options="countrys" emit-value
v-model="userInfo.Country" option-label="Name" option-value="ID" map-options label="國家/地區" standout />
@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 v-if="details.imageList&&details.imageList.length"
:src="details.imageList&&details.imageList.length?details.imageList[0]:'https://image.kkday.com/v2/image/get/s1.kkday.com/product_138437/20230217083232_t5rcO/jpg'"
class="rounded-borders"
spinner-color="grey-3"
spinner-size="20px"
style="width: 80px; height: 80px"
/>
<q-img v-else
src="../../assets/img/errImg.png"
class="rounded-borders"
spinner-color="grey-3"
spinner-size="20px"
style="width: 80px;"
/>
<div class="q-ml-md col">
<div class="text-subtitle1 ellipsis">
{{OrderDate.detail.Name_CN}}
</div> </div>
<div class="text-caption text-grey-6 ellipsis q-mt-sm"> <div :class="filedWidth">
{{OrderDate.detail.Address_CN}} <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>
</div> </div>
</div> </q-card>
<div class="q-mt-md row">
<div class="text-grey-9"> <q-card flat class="q-pa-md q-mt-lg" v-if="details">
<q-icon name="iconfont iconrili" size="20px" class="q-mr-sm" /> <div class="text-subtitle1 text-weight-bolder q-mb-md">旅客資料</div>
<span>{{msg.CheckInDate}}至{{msg.CheckOutDate}}</span> <div class="row">
<q-img v-if="details.imageList&&details.imageList.length"
:src="details.imageList&&details.imageList.length?details.imageList[0]:'https://image.kkday.com/v2/image/get/s1.kkday.com/product_138437/20230217083232_t5rcO/jpg'"
class="rounded-borders" spinner-color="grey-3" spinner-size="20px" style="width: 80px; height: 80px" />
<q-img v-else src="../../assets/img/errImg.png" class="rounded-borders" spinner-color="grey-3"
spinner-size="20px" style="width: 80px;" />
<div class="q-ml-md col">
<div class="text-subtitle1 ellipsis">
{{OrderDate.detail.Name_CN}}
</div>
<div class="text-caption text-grey-6 ellipsis q-mt-sm">
{{OrderDate.detail.Address_CN}}
</div>
</div>
</div> </div>
<span class="text-grey-9 q-ml-sm"> <div class="q-mt-md row">
<q-icon name="iconfont icontime" size="20px" class="q-mr-xs q-ml-sm" /> <div class="text-grey-9">
<span class="q-mr-sm"> <q-icon name="iconfont iconrili" size="20px" class="q-mr-sm" />
住宿時間 {{OrderDate.liveNvm}} 晚 <span>{{msg.CheckInDate}}至{{msg.CheckOutDate}}</span>
</span> </div>
</span> <span class="text-grey-9 q-ml-sm">
<span class="text-grey-9" v-if="msg.roomOptionCd"> <q-icon name="iconfont icontime" size="20px" class="q-mr-xs q-ml-sm" />
( <span class="q-mr-sm">
<span class="fz15 text-weight-bold"> 住宿時間 {{OrderDate.liveNvm}} 晚
{{ msg.roomOptionCd.RoomName_CN }} </span>
</span> </span>
<span class="fz13 text-grey-6 q-ml-sm" v-if="roomRateDetails.RatePlanList && roomRateDetails.RatePlanList.length > 0"> <span class="text-grey-9" v-if="msg.roomOptionCd">
{{ getRoomType(roomRateDetails.RatePlanList[0].BedType) }} (
<template v-for="( itemp, indexp ) in roomRateDetails.RatePlanList[0].PriceList"> <span class="fz15 text-weight-bold">
<template v-if="!indexp"> {{ msg.roomOptionCd.RoomName_CN }}
{{getMealtype(itemp.MealType)}} </span>
<span class="fz13 text-grey-6 q-ml-sm"
v-if="roomRateDetails.RatePlanList && roomRateDetails.RatePlanList.length > 0">
{{ getRoomType(roomRateDetails.RatePlanList[0].BedType) }}
<template v-for="( itemp, indexp ) in roomRateDetails.RatePlanList[0].PriceList">
<template v-if="!indexp">
{{getMealtype(itemp.MealType)}}
<template v-if="itemp.MealAmount>0"> <template v-if="itemp.MealAmount>0">
×{{itemp.MealAmount}}份 ×{{itemp.MealAmount}}份
</template> </template>
</template>
</template> </template>
</template> </span>
)
</span> </span>
) <span class="text-grey-9">
</span> <q-icon name="iconfont jinggao1" size="20px" /><span>
<span class="text-grey-9"> <template v-if="roomRateDetails&&roomRateDetails.RatePlanList.length">
<q-icon name="iconfont jinggao1" size="20px"/><span> <template v-for="(item, index) in roomRateDetails.RatePlanList">
<template v-if="roomRateDetails&&roomRateDetails.RatePlanList.length"> 僅剩{{item.InventoryCount}}間
<template v-for="(item, index) in roomRateDetails.RatePlanList"> </template>
僅剩{{item.InventoryCount}}間
</template> </template>
</template> </span>
</span> <span class="q-mr-sm"></span>
<span class="q-mr-sm"></span> <q-icon name="iconfont iconpeople" size="20px" class="q-mr-xs q-ml-sm" />
<q-icon name="iconfont iconpeople" size="20px" class="q-mr-xs q-ml-sm" /> <span class="q-mr-sm">
<span class="q-mr-sm"> 成人 {{numberOfAdults}}<span class="q-pl-sm">兒童 {{numberOfChildren}}</span>
成人 {{numberOfAdults}}<span class="q-pl-sm">兒童 {{numberOfChildren}}</span> </span>
</span> </span>
</span> </div>
</div> <div class="rounded-borders bg-blue-1 q-px-md q-py-sm q-mt-sm column">
<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-orange-6 q-pb-xs">超过13岁视为成人处理</span> <span class="text-green-6">预定成功后房间将为您整晚保留</span>
<span class="text-green-6">预定成功后房间将为您整晚保留</span>
<span class="text-red-6 q-pt-xs" v-if=" <span class="text-red-6 q-pt-xs" v-if="
roomRateDetails.CancellationPolicyList && roomRateDetails.CancellationPolicyList &&
roomRateDetails.CancellationPolicyList.length > 0 roomRateDetails.CancellationPolicyList.length > 0
...@@ -161,60 +114,34 @@ ...@@ -161,60 +114,34 @@
</span> </span>
</span> </span>
</span> </span>
</div> </div>
<q-separator color="grey-2" class="q-mt-md" /> <q-separator color="grey-2" class="q-mt-md" />
<div <div class="bg-grey-1 rounded-borders q-pa-md q-mt-md guest-item">
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="text-subtitle1 q-pb-md text-weight-bold"></div> <div :class="filedGuestWidth">
<div class="row q-col-gutter-md"> <q-input standout v-model="parameters.guestLastName" label="本國姓" placeholder="例：張"
<div :class="filedGuestWidth"> :rules="[(val) => !!val || '請輸本國姓']" ref="SurName" />
<q-input </div>
standout <div :class="filedGuestWidth">
v-model="parameters.guestLastName" <q-input standout v-model="parameters.guestFirstName" label="本國名" placeholder="例：三"
label="本國姓" :rules="[(val) => !!val || '請輸本國名']" ref="Name" />
placeholder="例：張" </div>
:rules="[(val) => !!val || '請輸本國姓']" <div :class="filedGuestWidth">
ref="SurName" <q-input standout v-model="parameters.guestPhoneNumber" label="電話"
/> :rules="[(val) => !!val || '請輸正確電話']" ref="Mobile" mask="#" reverse-fill-mask>
</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> <template v-slot:prepend>
<div class="text-subtitle2">+{{ userInfo.areaCode }}</div> <div class="text-subtitle2">+{{ userInfo.areaCode }}</div>
</template> </template>
</q-input> </q-input>
</div> </div>
<div :class="filedGuestWidth"> <div :class="filedGuestWidth">
<q-input <q-input standout v-model="parameters.guestAddress" label="當前地址" :rules="[(val) => !!val || '請輸當前地址']"
standout ref="guestAddress"></q-input>
v-model="parameters.guestAddress" </div>
label="當前地址" <!-- <div :class="filedGuestWidth">
:rules="[(val) => !!val || '請輸當前地址']"
ref="guestAddress"
></q-input>
</div>
<!-- <div :class="filedGuestWidth">
<q-input <q-input
class="q-pb-md" class="q-pb-md"
standout standout
...@@ -235,101 +162,59 @@ ...@@ -235,101 +162,59 @@
</q-popup-proxy> </q-popup-proxy>
</q-input> </q-input>
</div> --> </div> -->
</div>
</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"
v-for="(x,i) in parameters.GuestList"
:key="i"
>
<div class="text-subtitle1 q-pb-md text-weight-bold">
房間{{ x.RoomNum }}
</div>
<div class="row q-col-gutter-md" v-for="(y,index) in x.GuestInfo"
:class="[index!=x.GuestInfo.length-1?'q-mb-md':'']">
<div :class="filedGuestWidth">
<q-input
standout
v-model="y.LastName"
label="英文姓"
placeholder=""
mask="A"
reverse-fill-mask
:ref="`guest${i}_${index}Male`"
/>
</div> </div>
<div :class="filedGuestWidth"> </div>
<q-input <q-separator color="grey-2" class="q-mt-md" />
standout <div class="bg-grey-1 rounded-borders q-pa-md q-mt-md guest-item" v-for="(x,i) in parameters.GuestList"
v-model="y.FirstName" :key="i">
label="英文名" <div class="text-subtitle1 q-pb-md text-weight-bold">
placeholder="" 房間{{ x.RoomNum }}
mask="A"
reverse-fill-mask
:ref="`guest${i}_${index}Female`"
/>
</div> </div>
<div :class="filedGuestWidth"> <div class="row q-col-gutter-md" v-for="(y,index) in x.GuestInfo"
<q-input :class="[index!=x.GuestInfo.length-1?'q-mb-md':'']">
standout <div :class="filedGuestWidth">
v-model="y.Age" <q-input standout v-model="y.LastName" label="英文姓" placeholder="" mask="A" reverse-fill-mask
label="年龄(兒童必填)" :ref="`guest${i}_${index}Male`" />
placeholder="" </div>
mask="#" <div :class="filedGuestWidth">
reverse-fill-mask <q-input standout v-model="y.FirstName" label="英文名" placeholder="" mask="A" reverse-fill-mask
:disable="!y.isChild?true:false" :ref="`guest${i}_${index}Female`" />
/> </div>
<!-- :rules="[(val) => !!val || '請輸儿童數']" --> <div :class="filedGuestWidth">
<q-input standout v-model="y.Age" label="年龄(兒童必填)" placeholder="" mask="#" reverse-fill-mask
:disable="!y.isChild?true:false" />
<!-- :rules="[(val) => !!val || '請輸儿童數']" -->
</div>
</div> </div>
</div> </div>
</div> <div class="text-subtitle1 q-my-md text-weight-bold">特殊需求備註：</div>
<div class="text-subtitle1 q-my-md text-weight-bold">特殊需求備註：</div> <q-input standout v-model="parameters.guestRequest" input-style="height:170px;" type="textarea"
<q-input standout v-model="parameters.guestRequest" input-style="height:170px;" type="textarea" placeholder="此欄位僅限資料備註。不在商品規範內的個人需求，不保證提供" maxlength="200" counter /> placeholder="此欄位僅限資料備註。不在商品規範內的個人需求，不保證提供" maxlength="200" counter />
</q-card> </q-card>
</q-form> </q-form>
<coupon <coupon v-if="sumPrice>0" :product-type="productType" :current-price="sumPrice" @change="changeDiscountHandler">
v-if="sumPrice>0" </coupon>
:product-type="productType"
:current-price="sumPrice"
@change="changeDiscountHandler"
></coupon>
</div> </div>
<div class="relative-position" v-if="details" <div class="relative-position" v-if="details" :class="{
:class="{
'q-ml-lg': !($q.screen.width < 1200 || $q.platform.is.mobile), 'q-ml-lg': !($q.screen.width < 1200 || $q.platform.is.mobile),
'q-mt-lg full-width': $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="{
<div
class="rounded-borders bg-white q-pa-md"
style="width: 300px"
:style="{
width: width:
$q.screen.width < 1200 || $q.platform.is.mobile $q.screen.width < 1200 || $q.platform.is.mobile
? 'unset' ? 'unset'
: '300px', : '300px',
position:$q.platform.is.mobile?'unset':'sticky', position:$q.platform.is.mobile?'unset':'sticky',
top:$q.platform.is.mobile?'unset':'50px', top:$q.platform.is.mobile?'unset':'50px',
}" }">
>
<div class="text-subtitle1 text-weight-bolder">付款明細</div> <div class="text-subtitle1 text-weight-bolder">付款明細</div>
<div class="row q-mt-md"> <div class="row q-mt-md">
<q-img v-if="details&&details.imageList.length" <q-img v-if="details&&details.imageList.length"
:src="details.imageList&&details.imageList.length?details.imageList[0]:'https://image.kkday.com/v2/image/get/s1.kkday.com/product_138437/20230217083232_t5rcO/jpg'" :src="details.imageList&&details.imageList.length?details.imageList[0]:'https://image.kkday.com/v2/image/get/s1.kkday.com/product_138437/20230217083232_t5rcO/jpg'"
class="rounded-borders" class="rounded-borders" spinner-color="grey-3" style="width: 80px" />
spinner-color="grey-3" <q-img v-else src="../../assets/img/errImg.png" class="rounded-borders" spinner-color="grey-3"
style="width: 80px" spinner-size="20px" style="width: 80px;" />
/>
<q-img v-else
src="../../assets/img/errImg.png"
class="rounded-borders"
spinner-color="grey-3"
spinner-size="20px"
style="width: 80px;"
/>
<div class="q-ml-md col"> <div class="q-ml-md col">
<div class="text-subtitle1 ellipsis"> <div class="text-subtitle1 ellipsis">
{{OrderDate.detail.Name_CN}} {{OrderDate.detail.Name_CN}}
...@@ -340,37 +225,34 @@ ...@@ -340,37 +225,34 @@
</div> </div>
</div> </div>
<!-- v-if="details.roomRateDetails" --> <!-- v-if="details.roomRateDetails" -->
<div class="q-mt-md text-grey-6" > <div class="q-mt-md text-grey-6">
<div class="row"> <div class="row">
<div style="width: 80px"> <div style="width: 80px">
入住時間： 入住時間：
</div> </div>
<div class="q-ml-md"> <div class="q-ml-md">
{{msg.CheckInDate}} {{OrderDate.liveNvm}} 晚 {{msg.CheckInDate}} {{OrderDate.liveNvm}} 晚
</div> </div>
</div> </div>
</div> </div>
<q-separator color="grey-2" class="q-my-md"/> <q-separator color="grey-2" class="q-my-md" />
<div class="text-grey-9"> <div class="text-grey-9">
<template v-for="(x,i) in parameters.GuestList"> <template v-for="(x,i) in parameters.GuestList">
<div class="row justify-between q-mb-sm"> <div class="row justify-between q-mb-sm">
<span>房間{{ x.RoomNum }}</span> <span>房間{{ x.RoomNum }}</span>
<span>1間 * {{ OrderDate.liveNvm }}晚 * {{DanWei}}{{ Price }}</span> <span>1間 * {{ OrderDate.liveNvm }}晚 * {{DanWei}}{{ Price }}</span>
</div> </div>
<template v-for="y in x.GuestInfo"> <template v-for="y in x.GuestInfo">
<div class="row q-mb-sm" v-if="y.LastName!=''||y.FirstName!=''"> <div class="row q-mb-sm" v-if="y.LastName!=''||y.FirstName!=''">
<div class="col">{{y.LastName}} {{ y.FirstName }}</div> <div class="col">{{y.LastName}} {{ y.FirstName }}</div>
<div> <div>
<span>1成人</span> <span>1成人</span>
<span v-if="y.numberOfChildren">1兒童 </span> <span v-if="y.numberOfChildren">1兒童 </span>
</div>
</div> </div>
</template> </div>
</template>
</template> </template>
<hr <hr style="border: none; border-top: 1px dashed #eee !important" class="bg-transparent q-mb-sm" />
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="row q-mb-sm items-center">
<div class="col">總金額</div> <div class="col">總金額</div>
<div class="text-subtitle2 text-weight-bolder text-primary"> <div class="text-subtitle2 text-weight-bolder text-primary">
...@@ -396,269 +278,267 @@ ...@@ -396,269 +278,267 @@
</div> </div>
</div> </div>
<div class="text-right q-mt-md" v-if="step!=3"> <div class="text-right q-mt-md" v-if="step!=3">
<q-btn v-if="step!=3" unelevated color="primary" <q-btn v-if="step!=3" unelevated color="primary" :loading="loading" :label="step!=3?'立即支付':'已支付'"
:loading="loading" :label="step!=3?'立即支付':'已支付'" @click="submit()" @click="submit()" :disable="step!=3&&loading" />
:disable="step!=3&&loading"/> <q-btn v-else unelevated color="primary" label="" />
<q-btn v-else unelevated color="primary" label=""/>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div v-if="!orderKey || orderKey == ''" class="text-center q-my-xl"> <div v-if="!orderKey || orderKey == ''" class="text-center q-my-xl">
<none-data <none-data iconType="order" title="沒有找到您的訂單信息哦" subtitle="趕緊去挑選心儀的旅遊產品吧,三秒後自動跳轉到首頁"></none-data>
iconType="order"
title="沒有找到您的訂單信息哦"
subtitle="趕緊去挑選心儀的旅遊產品吧,三秒後自動跳轉到首頁"
></none-data>
</div> </div>
<auth></auth> <auth></auth>
</div> </div>
</template> </template>
<script> <script>
import NoneData from "src/components/common/noneData.vue"; import NoneData from "src/components/common/noneData.vue";
import auth from "src/components/common/auth.vue"; import auth from "src/components/common/auth.vue";
import { date } from 'quasar' import {
import { json } from "body-parser"; date
import coupon from 'src/components/common/coupon.vue' } from 'quasar'
import ProductTypeEnum from "src/utils/producttypeenum"; import {
json
} from "body-parser";
import coupon from 'src/components/common/coupon.vue'
import ProductTypeEnum from "src/utils/producttypeenum";
export default { export default {
components:{ components: {
coupon, coupon,
NoneData, NoneData,
auth auth
},
data() {
return {
CouponIds: [],
productType: 8,
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:{
sort: 1,
displayFrom: 1,
CheckInDate: "",
CheckOutDate: "",
searchroomGroup: [],
ratePlanID: "",
imgUrl: "",
RoomCount: 1,
ChildCount: 0,
AdultCount: 1,
OccupancyDetails: [],
hotelId: 0
},
JapanIncrease: null,
numberOfAdults: 0,
numberOfChildren: 0,
roomRateDetails: [],
CheckInDateH: '',
CheckInDateQ: '',
price: 0,
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: {
EmployeeIdStr: "",
CheckInDate: "",
RatePlanID: "",
CheckOutDate: "",
RoomCount: "",
guestLastName: "",
guestFirstName: "",
guestAddress: "",
guestPhoneNumber: "",
guestEmail: "",
BookingID: "",
HotelName: "",
HotelPic: "",
GuestList: [],
TotalPrice: 0,
CustomerPayMoney: 0,
DiscountMoney: 0,
OrderSource: 2,
OrderForm: 1,
//备注
guestRequest: "",
hotelId: '',
roomType: 0,
RoomName:"",//房型名称
},
TotalPeople: 0,//总人数
HotelRoomTypes: [],//道旅床类型
HotelMealTypes: [],//道旅餐食类型
DanWei: '',//单位
};
},
computed: {
filedWidth() {
return {
"col-12": this.$q.screen.width < 1200,
"col-6": this.$q.screen.width >= 1200,
};
}, },
filedGuestWidth() { data() {
return { return {
"col-12": this.$q.screen.width < 1200, CouponIds: [],
"col-4": this.$q.screen.width >= 1200, productType: 9, //道旅酒店
}; sumPrice: 0, //总金额
}, order: null, //订单信息
}, orderKey: "",
created() {}, optionObj: null, //类型
mounted() { details: null, //产品详情
if(this.checkParamsHandler()){ options: { //音频控件
this.getData() currentPage: 0,
} speed: 300,
itemAnimation: true,
this.getdidaBedType() centeredSlides: true,
this.getdidaMealType() thresholdDistance: 100,
this.getUserInfoHandler() thresholdTime: 300,
}, loopedSlides: 2,
methods: { slidesToScroll: 1,
//获取道旅床类型列表 loop: true,
getdidaBedType() {
this.apipost(
"dmc_post_GetDidaBedTypeBaseInfo",
this.hotelMsg,
res => {
this.loading = false;
if (res.data.resultCode == 1) {
this.HotelRoomTypes = res.data.data;
}
}, },
null OrderDate: null, //接收产品相关信息
); step: 1,
}, userInfo: {
//获取道旅餐食类型 Country: 0,
getdidaMealType() { areaCode: "",
this.apipost( Mailbox: "",
"dmc_post_GetDidaMealType", Mobile: "",
this.hotelMsg, FullName: ""
res => {
this.loading = false;
if (res.data.resultCode == 1) {
this.HotelMealTypes = res.data.data;
}
}, },
null countrys: [],
); areaCodes: [],
}, loading: false,
//获取房型 msg: {
getRoomType(roomtypeId) { sort: 1,
let roomtypeName = ""; displayFrom: 1,
if (roomtypeId > 0) { CheckInDate: "",
this.HotelRoomTypes.forEach(item => { CheckOutDate: "",
if (item.ID == roomtypeId) { searchroomGroup: [],
roomtypeName = item.Name_CN; ratePlanID: "",
} imgUrl: "",
}); RoomCount: 1,
} ChildCount: 0,
return roomtypeName; AdultCount: 1,
OccupancyDetails: [],
hotelId: 0
},
JapanIncrease: null,
numberOfAdults: 0,
numberOfChildren: 0,
roomRateDetails: [],
CheckInDateH: '',
CheckInDateQ: '',
price: 0,
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: {
EmployeeIdStr: "",
CheckInDate: "",
RatePlanID: "",
CheckOutDate: "",
RoomCount: "",
guestLastName: "",
guestFirstName: "",
guestAddress: "",
guestPhoneNumber: "",
guestEmail: "",
BookingID: "",
HotelName: "",
HotelPic: "",
GuestList: [],
TotalPrice: 0,
CustomerPayMoney: 0,
DiscountMoney: 0,
OrderSource: 4,
OrderForm: 1,
//备注
guestRequest: "",
hotelId: '',
roomType: 0,
RoomName: "", //房型名称
},
TotalPeople: 0, //总人数
HotelRoomTypes: [], //道旅床类型
HotelMealTypes: [], //道旅餐食类型
DanWei: '', //单位
};
}, },
//获取餐型 computed: {
getMealtype(mealtypeId) { filedWidth() {
let mealtypeName = ""; return {
if (mealtypeId > 0) { "col-12": this.$q.screen.width < 1200,
this.HotelMealTypes.forEach((item) => { "col-6": this.$q.screen.width >= 1200,
if (item.ID == mealtypeId) { };
mealtypeName = item.Name_CN; },
} filedGuestWidth() {
}); return {
} "col-12": this.$q.screen.width < 1200,
return mealtypeName; "col-4": this.$q.screen.width >= 1200,
};
},
}, },
changeDiscountHandler(coupon) { created() {},
if (coupon) { mounted() {
this.parameters.DiscountMoney = coupon.discountMoney; if (this.checkParamsHandler()) {
this.CouponIds = [coupon.couponId]; this.getData()
this.parameters.CouponAllotIds = this.CouponIds.join(",")
} else {
this.parameters.DiscountMoney = 0;
this.CouponIds = [];
this.parameters.CouponAllotIds = ''
} }
this.parameters.totalChargeableRateInfo = this.sumPrice - this.parameters.DiscountMoney
this.$forceUpdate(); this.getdidaBedType()
}, this.getdidaMealType()
//通过日期得到周几 this.getUserInfoHandler()
getWeek() {
let CheckInDate = new Date(this.params.CheckInDate).getDay();
let CheckOutDate = new Date(this.params.CheckOutDate).getDay();
this.checkInWeek = this.WeekList[CheckInDate];
this.checkOutWeek = this.WeekList[CheckOutDate];
},
//通过日期得到周几
getWeekD(dateTime) {
let dt = new Date(dateTime);
let year = dt.getFullYear();
let month = (dt.getMonth() + 1).toString().padStart(2, "0");
let date = (dt.getDate()).toString().padStart(2, "0");
return month + "-" + date + "(" + this.WeekList[dt.getDay()] + ")";
},
//日期格式化
getformatDateStr(value) {
var dt = new Date(value);
let year = dt.getFullYear();
let month = (dt.getMonth() + 1).toString().padStart(2, "0");
let date = (dt.getDate()).toString().padStart(2, "0");
return year + "-" + month + "-" + date;
},
getPrice(price) {
return Math.ceil(price);
}, },
// 获取商品详情 methods: {
getData() { //获取道旅床类型列表
this.$q.loading.show(); getdidaBedType() {
this.apipost( this.apipost(
"dmc_post_GetDiDaPriceConfirm", "dmc_post_GetDidaBedTypeBaseInfo",
this.msg, this.hotelMsg,
(res) => { res => {
this.$q.loading.hide(); this.loading = false;
if (res.data.resultCode == 1) { if (res.data.resultCode == 1) {
this.HotelRoomTypes = res.data.data;
}
},
null
);
},
//获取道旅餐食类型
getdidaMealType() {
this.apipost(
"dmc_post_GetDidaMealType",
this.hotelMsg,
res => {
this.loading = false;
if (res.data.resultCode == 1) {
this.HotelMealTypes = res.data.data;
}
},
null
);
},
//获取房型
getRoomType(roomtypeId) {
let roomtypeName = "";
if (roomtypeId > 0) {
this.HotelRoomTypes.forEach(item => {
if (item.ID == roomtypeId) {
roomtypeName = item.Name_CN;
}
});
}
return roomtypeName;
},
//获取餐型
getMealtype(mealtypeId) {
let mealtypeName = "";
if (mealtypeId > 0) {
this.HotelMealTypes.forEach((item) => {
if (item.ID == mealtypeId) {
mealtypeName = item.Name_CN;
}
});
}
return mealtypeName;
},
changeDiscountHandler(coupon) {
if (coupon) {
this.parameters.DiscountMoney = coupon.discountMoney;
this.CouponIds = [coupon.couponId];
this.parameters.CouponAllotIds = this.CouponIds.join(",")
} else {
this.parameters.DiscountMoney = 0;
this.CouponIds = [];
this.parameters.CouponAllotIds = ''
}
this.parameters.totalChargeableRateInfo = this.sumPrice - this.parameters.DiscountMoney
this.$forceUpdate();
},
//通过日期得到周几
getWeek() {
let CheckInDate = new Date(this.params.CheckInDate).getDay();
let CheckOutDate = new Date(this.params.CheckOutDate).getDay();
this.checkInWeek = this.WeekList[CheckInDate];
this.checkOutWeek = this.WeekList[CheckOutDate];
},
//通过日期得到周几
getWeekD(dateTime) {
let dt = new Date(dateTime);
let year = dt.getFullYear();
let month = (dt.getMonth() + 1).toString().padStart(2, "0");
let date = (dt.getDate()).toString().padStart(2, "0");
return month + "-" + date + "(" + this.WeekList[dt.getDay()] + ")";
},
//日期格式化
getformatDateStr(value) {
var dt = new Date(value);
let year = dt.getFullYear();
let month = (dt.getMonth() + 1).toString().padStart(2, "0");
let date = (dt.getDate()).toString().padStart(2, "0");
return year + "-" + month + "-" + date;
},
getPrice(price) {
return Math.ceil(price);
},
// 获取商品详情
getData() {
this.$q.loading.show();
this.apipost(
"dmc_post_GetDiDaPriceConfirm",
this.msg,
(res) => {
this.$q.loading.hide();
if (res.data.resultCode == 1) {
this.dataList = res.data.data.PriceDetails; this.dataList = res.data.data.PriceDetails;
this.roomRateDetails = res.data.data.PriceDetails.HotelList[0]; this.roomRateDetails = res.data.data.PriceDetails.HotelList[0];
this.parameters.BookingID = res.data.data.PriceDetails.ReferenceNo; this.parameters.BookingID = res.data.data.PriceDetails.ReferenceNo;
// this.parameters.CheckInDate = res.data.data.PriceDetails.CheckInDate;
this.parameters.TotalPrice = this.roomRateDetails.TotalPrice; this.parameters.TotalPrice = this.roomRateDetails.TotalPrice;
this.parameters.RoomCount = this.msg.RoomCount; this.parameters.RoomCount = this.msg.RoomCount;
this.DanWei = res.data.data.PriceDetails.HotelList[0].RatePlanList[0].Currency; this.DanWei = res.data.data.PriceDetails.HotelList[0].RatePlanList[0].Currency;
...@@ -679,362 +559,356 @@ export default { ...@@ -679,362 +559,356 @@ export default {
this.sumPrice = 0 this.sumPrice = 0
this.roomRateDetails.RatePlanList[0].PriceList.forEach((item) => { this.roomRateDetails.RatePlanList[0].PriceList.forEach((item) => {
this.sumPrice+= (this.parameters.GuestList.length*Number(item.Price)) this.sumPrice += (this.parameters.GuestList.length * Number(item.Price))
this.Price = Number(item.Price) this.Price = Number(item.Price)
}) })
} else { } else {
this.$message.error(res.data.message) this.$message.error(res.data.message)
this.CommonJump(`/detailHotalDida/${this.msg.hotelId}/${this.OrderDate.MinPrice}/${encodeURIComponent(this.msg.CheckInDate)}/${encodeURIComponent(this.msg.CheckOutDate)}`, this.CommonJump(
{orderKey:this.orderKey}); `/detailHotalDida/${this.msg.hotelId}/${this.OrderDate.MinPrice}/${encodeURIComponent(this.msg.CheckInDate)}/${encodeURIComponent(this.msg.CheckOutDate)}`, {
} orderKey: this.orderKey
});
}, }
null
);
},
checkParamsHandler() {
try {
if (this.$route.params && this.$route.params.id) {
let key = this.$route.params.id;
let pickuporderHotal = localStorage.getItem("pickuporderHotalDida");
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 = {
...this.msg,
...this.OrderDate.msg
}
this.numberOfAdults = 0
this.numberOfChildren = 0,
this.msg.roomOptionCd = this.OrderDate.roomOptionCd
this.parameters.roomOptionCd = this.OrderDate.roomOptionCd
this.parameters.hotelId = this.msg.hotelId
this.parameters.CheckOutDate = this.msg.CheckOutDate
this.parameters.CheckInDate = this.msg.CheckInDate
this.parameters.RatePlanID = this.msg.ratePlanID
this.parameters.HotelName = this.OrderDate.detail.Name_CN
this.parameters.HotelPic = this.OrderDate.detail.images[0]
this.parameters.RoomName = this.msg.roomOptionCd.RoomName_CN
this.parameters.GuestList = [] },
this.msg.searchroomGroup.forEach((x,index)=>{ null
this.numberOfAdults+=Number(x.numberOfAdults) );
this.numberOfChildren+=Number(x.numberOfChildren) },
var guestInfoList = []; checkParamsHandler() {
let allprople = x.numberOfAdults + x.numberOfChildren try {
for (let i = 0; i < allprople; i++) { if (this.$route.params && this.$route.params.id) {
let obj = { let key = this.$route.params.id;
LastName: "", let pickuporderHotal = localStorage.getItem("pickuporderHotalDida");
FirstName: "",
Age: i<x.numberOfAdults?'':x.ChildAgeDetails, pickuporderHotal = pickuporderHotal ? JSON.parse(pickuporderHotal) : [];
isChild: i<x.numberOfAdults?false:true
}; if (pickuporderHotal.length > 0) {
guestInfoList.push(obj); this.order = pickuporderHotal.find((x) => x.key == key);
if (this.order) {
this.orderKey = key;
this.OrderDate = this.order.order
this.msg = {
...this.msg,
...this.OrderDate.msg
} }
var obj = {
RoomNum: index + 1, this.numberOfAdults = 0
numberOfAdults: x.numberOfAdults, this.numberOfChildren = 0,
numberOfChildren: x.numberOfChildren, this.msg.roomOptionCd = this.OrderDate.roomOptionCd
GuestInfo: guestInfoList this.parameters.roomOptionCd = this.OrderDate.roomOptionCd
}; this.parameters.hotelId = this.msg.hotelId
this.parameters.GuestList.push(obj); this.parameters.CheckOutDate = this.msg.CheckOutDate
}) this.parameters.CheckInDate = this.msg.CheckInDate
this.parameters.RatePlanID = this.msg.ratePlanID
this.parameters.HotelName = this.OrderDate.detail.Name_CN
this.parameters.HotelPic = this.OrderDate.detail.images[0]
this.parameters.RoomName = this.msg.roomOptionCd.RoomName_CN
this.parameters.GuestList = []
this.msg.searchroomGroup.forEach((x, index) => {
this.numberOfAdults += Number(x.numberOfAdults)
this.numberOfChildren += Number(x.numberOfChildren)
var guestInfoList = [];
let allprople = x.numberOfAdults + x.numberOfChildren
for (let i = 0; i < allprople; i++) {
let obj = {
LastName: "",
FirstName: "",
Age: i < x.numberOfAdults ? '' : x.ChildAgeDetails,
isChild: i < x.numberOfAdults ? false : true
};
guestInfoList.push(obj);
}
var obj = {
RoomNum: index + 1,
numberOfAdults: x.numberOfAdults,
numberOfChildren: x.numberOfChildren,
GuestInfo: guestInfoList
};
this.parameters.GuestList.push(obj);
})
}
} }
} }
} catch (error) {
console.log(error);
} }
} catch (error) { if (this.orderKey == "") {
console.log(error); setTimeout(() => {
}
if (this.orderKey == "") {
setTimeout(() => {
}, 3000); }, 3000);
} }
return this.orderKey != ""; return this.orderKey != "";
}, },
async submit() { async submit() {
//判断选择的人数与入住人数 //判断选择的人数与入住人数
let Count1=0 let Count1 = 0
let roomGroup = this.parameters.GuestList let roomGroup = this.parameters.GuestList
roomGroup.forEach(x=>{ roomGroup.forEach(x => {
Count1+= Number(x.numberOfAdults)+Number(x.numberOfChildren) Count1 += Number(x.numberOfAdults) + Number(x.numberOfChildren)
}) })
let Count2=this.numberOfChildren?this.numberOfChildren:0; let Count2 = this.numberOfChildren ? this.numberOfChildren : 0;
Count2+= Number(this.numberOfAdults); Count2 += Number(this.numberOfAdults);
if(Count1!=Count2){ if (Count1 != Count2) {
this.$message.error('入住人數與總入住數不匹配'); this.$message.error('入住人數與總入住數不匹配');
return; return;
}
for (let i = 0; i < roomGroup.length; i++) {
if(!roomGroup[i].numberOfAdults){
this.$message.error('一個房間至少入住一人');
return;
} }
} for (let i = 0; i < roomGroup.length; i++) {
if (!roomGroup[i].numberOfAdults) {
this.parameters.CustomerId = this.userInfo.Id; this.$message.error('一個房間至少入住一人');
this.parameters.EmployeeIdStr = this.userInfo.Id;//`${this.userInfo.Surname?this.userInfo.Surname:''}${this.userInfo.Name?this.userInfo.Name:' '}`
this.$refs.mail.validate()
this.$refs.SurName.validate()
this.$refs.Name.validate()
this.$refs.Mobile.validate()
this.$refs.guestAddress.validate()
// this.$refs.CheckInDate.validate()
this.parameters.guestEmail = this.userInfo.Mailbox
for (let i = 0; i < this.parameters.GuestList.length; i++) {
let GuestList = this.parameters.GuestList[i]
for (let j = 0; j < GuestList.GuestInfo.length; j++) {
let GuestInfo = GuestList.GuestInfo[j]
if(GuestInfo.LastName==''||GuestInfo.FirstName==''){
this.$message.error('請填寫姓或名');
return; return;
} }
} }
}
this.parameters.CustomerId = this.userInfo.Id;
this.parameters.EmployeeIdStr = this.userInfo.Id;
let flag = true this.$refs.mail.validate()
flag = await this.formValidateHandler('baseUserInfo') this.$refs.SurName.validate()
if(!flag){ this.$refs.Name.validate()
let errorObj = this.$refs.baseUserInfo.getValidationComponents().find(x=>x.innerError) this.$refs.Mobile.validate()
window.scrollTo(0,errorObj.$el.offsetTop) this.$refs.guestAddress.validate()
}else{ this.parameters.guestEmail = this.userInfo.Mailbox
this.SetCarOrder()
} for (let i = 0; i < this.parameters.GuestList.length; i++) {
}, let GuestList = this.parameters.GuestList[i]
async formValidateHandler(formName){ for (let j = 0; j < GuestList.GuestInfo.length; j++) {
let temp=this.$refs[formName] let GuestInfo = GuestList.GuestInfo[j]
let formObj = temp instanceof Array ? temp[0] : temp if (GuestInfo.LastName == '' || GuestInfo.FirstName == '') {
return formObj.validate() this.$message.error('請填寫姓或名');
}, return;
SetCarOrder(){ }
this.loading = true
this.apipost(
"dmc_post_GetDiDaBookingConfirm",
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){
let Name = this.parameters.guestLastName+this.parameters.guestFirstName
this.apipost(
"AddOrderInfo_post",
{
SurName: this.parameters.guestLastName?this.parameters.guestLastName:this.userInfo.Surname,
Name: this.parameters.guestFirstName?this.parameters.guestFirstName:this.userInfo.Name,
ContactNumber: this.parameters.guestPhoneNumber?this.parameters.guestPhoneNumber:this.userInfo.Mobile,// 联系电话
Mailbox: this.parameters.guestEmail?this.parameters.guestEmail:this.userInfo.Mailbox,//邮箱
GoodsId: this.parameters.hotelId,//商品id
GoodsName: this.OrderDate.detail.Name_CN,//商品名称
GoodsPic: this.OrderDate.detail.images[0],//商品图片
GoodsType: this.productType,
OrderMake: this.parameters.CheckInDate,//订单摘要（例如出行时间）
TotalPrice: this.parameters.TotalPrice,//总价格
PreferentialPrice: this.parameters.DiscountMoney,// 优惠总金额
ErpOrderId: ErpOrderId,//erp订单id
Country: this.userInfo.Country,//国家id
PlatformTax: 0,//平台税金默认0
Income: 0,//已收默认0
Refund: 0,//退款金额默认0
DOrderType: 1,//1直客订单
},
(r) => {
if (r.data.resultCode == 1) {
this.step = 3
this.$message.success("訂單創建成功")
this.goPayHandler(r.data.data)
}else{
this.CommonJump("/order?type=1", {});
this.$message.error(r.data.message)
} }
this.loading = false }
}) let flag = true
}, flag = await this.formValidateHandler('baseUserInfo')
goPayHandler(pay){ if (!flag) {
let pickuporderScenTickets = localStorage.getItem("pickuporderScenTickets"); let errorObj = this.$refs.baseUserInfo.getValidationComponents().find(x => x.innerError)
pickuporderScenTickets = pickuporderScenTickets ? JSON.parse(pickuporderScenTickets) : []; window.scrollTo(0, errorObj.$el.offsetTop)
let i = pickuporderScenTickets.findIndex((x) => x.key == this.orderKey); } else {
if (i >= 0) { this.AddOrderInfo()
pickuporderScenTickets.splice(i, 1); }
localStorage.setItem("pickuporderScenTickets", JSON.stringify(pickuporderScenTickets)); },
} async formValidateHandler(formName) {
this.CommonJump("/pay/" + pay.OrderNo, {}); let temp = this.$refs[formName]
}, let formObj = temp instanceof Array ? temp[0] : temp
optionsFn(cd) { return formObj.validate()
return ( },
cd >= AddOrderInfo() {
date.formatDate(date.addToDate(new Date(), { days: 0 }), "YYYY/MM/DD") this.loading = true;
); this.apipost(
}, "AddOrderInfo_post", {
// 音频 SurName: this.parameters.guestLastName ? this.parameters.guestLastName : this.userInfo.Surname,
slideHandler(e) { Name: this.parameters.guestFirstName ? this.parameters.guestFirstName : this.userInfo.Name,
this.options.currentPage = e.currentPage; ContactNumber: this.parameters.guestPhoneNumber ? this.parameters.guestPhoneNumber : this.userInfo
if ( .Mobile, // 联系电话
e.currentPage != 0 && Mailbox: this.parameters.guestEmail ? this.parameters.guestEmail : this.userInfo.Mailbox, //邮箱
this.$refs.video && GoodsId: this.parameters.hotelId, //商品id
this.$refs.video.isPlaying GoodsName: this.OrderDate.detail.Name_CN, //商品名称
) { GoodsPic: this.OrderDate.detail.images[0], //商品图片
this.$refs.video.pause(); GoodsType: this.productType,
} OrderMake: this.parameters.CheckInDate, //订单摘要（例如出行时间）
}, TotalPrice: this.parameters.TotalPrice, //总价格
playHandler(e) {}, PreferentialPrice: this.parameters.DiscountMoney, // 优惠总金额
pauseHandler(e) {}, ErpOrderId: 0, //erp订单id
timeChangeHandler(e) { Country: this.userInfo.Country, //国家id
PlatformTax: 0, //平台税金默认0
Income: 0, //已收默认0
Refund: 0, //退款金额默认0
DOrderType: 1, //1直客订单
DiDaHotelParams: this.parameters,
},
(r) => {
if (r.data.resultCode == 1) {
this.step = 3
this.$message.success("訂單創建成功")
this.goPayHandler(r.data.data)
} else {
this.CommonJump("/order?type=1", {});
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) {
}, },
// //
seekedChangeHandler(e) { seekedChangeHandler(e) {
}, },
//获取餐 //获取餐
getMealType(meals) { getMealType(meals) {
if (meals != "") { if (meals != "") {
let mealType = meals.split(","); let mealType = meals.split(",");
if (mealType[0] == 0 && mealType[2] == 0) { if (mealType[0] == 0 && mealType[2] == 0) {
return "无餐"; return "无餐";
} }
if (mealType[0] == 1 && mealType[2] == 1) { if (mealType[0] == 1 && mealType[2] == 1) {
return "含早晚餐"; return "含早晚餐";
}
if (mealType[0] == 1 && mealType[2] == 0) {
return "含早餐";
}
if (mealType[0] == 0 && mealType[2] == 1) {
return "含晚餐";
}
} }
if (mealType[0] == 1 && mealType[2] == 0) { },
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;
} }
if (mealType[0] == 0 && mealType[2] == 1) { return gradeType;
return "含晚餐"; },
// 获取当前用户信息
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) {
this.parameters.guestEmail = r.data.data.Moblie
this.userInfo.Mobile = r.data.data.Moblie
}
} else {
this.$user.userInfo = null;
}
this.initCountry();
});
} }
} },
}, // 初始化国家
//获取房型 initCountry() {
getGradeType(type) { this.apipost("GetCountryInfo_post", {}, (r) => {
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) { if (r.data.resultCode == 1) {
this.userInfo = r.data.data; this.countrys = r.data.data.countList;
if(r.data.data.Moblie){ this.userInfo.Country = this.countrys[0].ID;
this.parameters.guestEmail = r.data.data.Moblie this.areaCodes = r.data.data.phoneCountList;
this.userInfo.Mobile = r.data.data.Moblie this.changeCountry(this.userInfo.Country);
} this.areaCodes.forEach((x) => {
} else { let temp = this.countrys.find((y) => y.ID == x.ID);
this.$user.userInfo = null; x.EnName = `${temp.EnName}(${x.PhoneCode})`;
});
} }
this.initCountry();
}); });
} },
}, changeCountry(id) {
// 初始化国家 this.userInfo.areaCode = this.areaCodes.find((x) => x.ID == id).PhoneCode;
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> </script>
<style> <style>
.order-preview .q-stepper__content { .order-preview .q-stepper__content {
display: none !important; display: none !important;
} }
.order-preview .q-toggle__track {
height: 0.7em; .order-preview .q-toggle__track {
border-radius: 0.35em; height: 0.7em;
opacity: 0.38; border-radius: 0.35em;
width: 50px; opacity: 0.38;
} width: 50px;
.order-preview .q-toggle__thumb { }
top: 0.42em;
left: 0.45em; .order-preview .q-toggle__thumb {
width: 0.5em; top: 0.42em;
height: 0.5em; left: 0.45em;
transition: left 0.22s ease-in-out; width: 0.5em;
user-select: none; height: 0.5em;
z-index: 0; transition: left 0.22s ease-in-out;
} user-select: none;
.order-preview .q-toggle__inner--truthy .q-toggle__thumb { z-index: 0;
left: 0.94em; }
}
.order-preview .q-toggle__inner { .order-preview .q-toggle__inner--truthy .q-toggle__thumb {
width: 1.9em; left: 0.94em;
} }
.order-preview .q-toggle__label {
margin-top: 12px; .order-preview .q-toggle__inner {
} width: 1.9em;
.guest-item:hover{ }
background: rgba(241,65,108,.04) !important;
} .order-preview .q-toggle__label {
.text-h6Detail { margin-top: 12px;
text-align: center; }
font-size: 18px;
color: #333; .guest-item:hover {
font-weight: 700; background: rgba(241, 65, 108, .04) !important;
position: relative; }
width:100%;
height:50px; .text-h6Detail {
} text-align: center;
.text-h6Detail i { font-size: 18px;
position: absolute; color: #333;
right:20px; font-weight: 700;
top:10px; position: relative;
cursor: pointer; width: 100%;
font-size:23px; height: 50px;
} }
.text-h6Detail i {
position: absolute;
right: 20px;
top: 10px;
cursor: pointer;
font-size: 23px;
}
</style> </style>
src/pages/usercenter/order/hotelPriceDetail.vue
View file @ b2f20ed0
...@@ -2,85 +2,74 @@ ...@@ -2,85 +2,74 @@
</style> </style>
<template> <template>
<div> <div>
<div class="row q-mb-sm items-center"> <div class="row q-mb-sm items-center">
<div class="q-mr-lg">總金額</div> <div class="q-mr-lg">總金額</div>
<div class="text-subtitle2 text-weight-bolder "> <div class="text-subtitle2 text-weight-bolder ">
CNY {{ moneyFormat(sumPrice, 2) }} CNY {{ moneyFormat(sumPrice, 2) }}
</div> </div>
</div>
<div class="row q-mb-sm items-center">
<div class="q-mr-lg">優惠金額</div>
<div
class="text-subtitle2 text-weight-bolder text-teal"
v-if="DiscountMoney > 0"
>
CNY - {{ moneyFormat(DiscountMoney, 2) }}
</div>
<div class="text-grey-5" v-else>暫無優惠</div>
</div>
<!-- <div class="row q-mb-sm items-center">
<div class="q-mr-lg">支付金額</div>
<div class="text-h6 text-weight-bolder product-price">
CNY {{ moneyFormat(TotalPrice, 2) }}
</div>
</div> -->
</div> </div>
<div class="row q-mb-sm items-center">
<div class="q-mr-lg">優惠金額</div>
<div class="text-subtitle2 text-weight-bolder text-teal" v-if="DiscountMoney > 0">
CNY - {{ moneyFormat(DiscountMoney, 2) }}
</div>
<div class="text-grey-5" v-else>暫無優惠</div>
</div>
</div>
</template> </template>
<script> <script>
export default { export default {
props: { props: {
orderInfo: { orderInfo: {
type: Object, type: Object,
default: () => ({}) default: () => ({})
} }
}, },
data() { data() {
return { return {
details: null, details: null,
sumPrice: 0,//总金额 sumPrice: 0, //总金额
DiscountMoney: 0,//优惠金额 DiscountMoney: 0, //优惠金额
TotalPrice: 0, // 支付金額 TotalPrice: 0, // 支付金額
} }
}, },
mounted() { mounted() {
this.getGroupData() this.getGroupData()
}, },
methods: { methods: {
// 获取团的详情 // 获取团的详情
getGroupData() { getGroupData() {
// this.$q.loading.show(); if (!this.orderInfo.ErpOrderId) return this.sumPrice = this.orderInfo.TotalPrice
if(!this.orderInfo.ErpOrderId) return this.sumPrice = this.orderInfo.TotalPrice this.apipost(
this.apipost( "dmc_post_GetThirdHotelOrder", {
"dmc_post_GetThirdHotelOrder", OrderID: this.orderInfo.ErpOrderId
{ OrderID: this.orderInfo.ErpOrderId }, },
(r) => { (r) => {
if (r.data.resultCode == 1) { if (r.data.resultCode == 1) {
this.dataList = r.data.data; this.dataList = r.data.data;
const {DiscountMoney,TotalPrice} = r.data.data; const {
// sumPrice: 0,//总金额 DiscountMoney,
// DiscountMoney: 0,//优惠金额 TotalPrice
// TotalPrice: 0, // 支付金額 } = r.data.data;
// MailingState: '',//邮寄状态 1自取 2邮寄
this.TotalPrice = TotalPrice; this.TotalPrice = TotalPrice;
this.DiscountMoney = DiscountMoney this.DiscountMoney = DiscountMoney
this.sumPrice = TotalPrice + DiscountMoney this.sumPrice = TotalPrice + DiscountMoney
// this.sumPrice = this.moneyFormat(this.sumPrice, 2)
// this.TotalPrice = this.moneyFormat(this.TotalPrice, 2) } else {
// this.DiscountMoney = this.moneyFormat(this.DiscountMoney, 2) this.$q.notify({
} else { type: "negative",
this.$q.notify({ message: r.data.message,
type: "negative", position: "top",
message: r.data.message, timeout: 2000, // 以毫秒为单位; 0意味着没有超时
position: "top", });
timeout: 2000, // 以毫秒为单位; 0意味着没有超时 }
}); },
} null
// this.$q.loading.hide(); );
}, },
null
);
},
} }
} }
</script>
\ No newline at end of file </script>
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