Skip to content

B
bigwood
Commit 7343b5b3 authored by 黄奎's avatar 黄奎
Browse files
Options

1

parent 169a3ba8
Show whitespace changes
Inline Side-by-side
Showing with 981 additions and 0 deletions
src/pages/scattered/didaHotelSure.vue 0 → 100644
View file @ 7343b5b3
<template>
<div class="commonSure">
<div :class="{'q-pa-lg':$q.platform.is.desktop,'q-pa-md':$q.platform.is.mobile}" style="shadow: 0px 0px 50px 0px rgba(82, 63, 105, 0.15);margin: auto;" :style="{'width':$q.platform.is.desktop?'70vw':'100vw','min-width':$q.platform.is.desktop?'866px':'100vw',}">
<div class="bg-white rounded-border q-mb-md q-px-lg q-py-md">
<div class="row items-center text-orange-6">
<q-btn class="bg-orange-6 text-white" round size="sm" icon="person" />
<span class="fz18 q-pl-lg">{{$t('v101.scatteredOrder.prompt1')}}</span>
</div>
<div class="row no-wrap items-center text-green-6 q-mt-xs q-pt-sm">
<q-btn class="bg-green-6 text-white" round size="sm" icon="wallet" />
<span class="fz18 q-pl-lg">{{$t('v101.scatteredOrder.prompt2')}}</span>
</div>
</div>
<div class="col bg-white rounded-border q-mb-md q-pa-lg" :class="{'row':$q.platform.is.desktop,'column':$q.platform.is.mobile}">
<q-img v-if="params.imgUrl" :class="{'col-1 q-mr-lg':$q.platform.is.desktop,'col-12 q-mb-sm':$q.platform.is.mobile}" :src="params.imgUrl" style="height: auto;display: inline-block;" :style="{'height':$q.platform.is.mobile?'150px':'auto'}" spinner-color="drk" spinner-size="20px" heigth="100%" mode="cover" :ratio="1"/>
<div class="col column q-pl-xs">
<div class="text-red fz18 text-weight-bold">{{roomRateDetails.HotelName}}</div>
<div class="q-pt-xs">
<q-icon class="text-grey-13 q-mr-xs" name="place" size="xs"></q-icon>
<span class="col fz14 text-weight-bold text-blick">{{dataList.address}}</span>
</div>
<div v-if="roomRateDetails.RatePlanList&&roomRateDetails.RatePlanList.length>0" v-for="(item,index) in roomRateDetails.RatePlanList" :key="index" v-loading="loading">
<div class="q-pt-xs">
<span class="text-grey-6 q-pr-lg">{{$t('v101.scatteredOrder.chuangxing')}}</span>
<span class="text-grey-9 q-pr-lg">
{{getRoomType(item.BedType)}}
</span>
</div>
<div class="q-pt-xs">
<span class="text-grey-6 q-pr-lg">{{$t('v103.scheduledTripDetails.itineraryDetails.canshi')}}</span>
<span class="text-grey-9">
{{item.BreakfastType==1?"不含早":"含早"}}
</span>
</div>
<div class="q-pt-xs">
<span class="text-grey-6 q-pr-lg">{{$t('v101.scatteredOrder.jiagejihua')}}</span>
<span class="text-grey-9">
{{item.RatePlanName}}
</span>
</div>
<div class="q-pt-xs">
<span class="text-grey-6 q-pr-lg">{{$t('v101.scatteredOrder.baojiaqueren')}}</span>
<span class="text-grey-9">
<template v-if="item.IsOnRequest==true">{{$t('v101.scatteredOrder.shi')}}</template>
<template v-if="item.IsOnRequest==false">{{$t('v101.scatteredOrder.fou')}}</template>
</span>
</div>
</div>
</div>
<div class="col row items-end q-pl-lg" :class="{'justify-end':$q.platform.is.mobile}">
<div class="column">
<div class="text-green-6 fz20 text-weight-bold q-pb-sm" :class="{'row justify-end':$q.platform.is.mobile}"><span>{{$t('v101.scatteredOrder.orderamount')}}</span></div>
<div :class="{'row justify-end':$q.platform.is.mobile}">
<div class="row justify-between">
<div class="q-pt-xs row no-wrap items-center" v-if="roomRateDetails.TotalSupplement
>0">
<span class="text-grey-10">{{$t('v101.scatteredOrder.youhui')}}</span>
<span class="text-red fz18 q-pl-xs">{{roomRateDetails.TotalSupplement}}</span>
</div>
<div class="q-pt-xs row no-wrap items-center" :class="{'q-pl-lg':$q.platform.is.mobile}">
<span class="text-grey-10">{{$t('v101.scatteredOrder.shifu')}}</span>
<span class="text-h5 text-red text-weight-bold q-pl-xs">{{roomRateDetails.TotalPrice}}</span>
</div>
<div class="q-pt-xs row items-center" v-if="sureMsg.DiscountMoney==0">
<span> </span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col column bg-white rounded-border q-mb-md">
<div class="bg-light-blue-1 q-py-md q-px-lg fz14 rounded-borders row items-center text-weight-bold">
{{$t('v101.scatteredOrder.yudinxinx')}}
</div>
<div class="q-pa-lg column">
<div class="row items-center q-mb-md">
<span class="text-grey-6" :class="{'HotelSure-textMobile':$q.platform.is.mobile}">{{$t('v101.scatteredOrder.chuangxing')}}</span>
<div v-if="roomRateDetails.RatePlanList&&roomRateDetails.RatePlanList.length>0" v-for="(item,index) in roomRateDetails.RatePlanList" :key="index" v-loading="loading" :class="{'q-pl-lg':$q.platform.is.desktop}">
<span class="q-pr-lg">
{{getRoomType(item.BedType)}}
</span>
</div>
</div>
<div class="row items-center q-mb-md">
<span class="text-grey-6" :class="{'HotelSure-textMobile':$q.platform.is.mobile}">{{$t('v101.scatteredOrder.ruzhurenshu')}}</span>
<div :class="{'q-pl-lg':$q.platform.is.desktop}">
<span>{{$t('v101.scatteredOrder.chengren')}} {{auditNum}} {{$t('v101.scatteredOrder.ren')}}</span>
<span class="q-pl-lg" v-if="childNum>0">{{$t('v101.scatteredOrder.ertong')}} {{childNum}} {{$t('v101.scatteredOrder.ren')}}</span>
<span class="q-pl-lg" v-if="isBaoChild">{{$t('v101.scatteredOrder.noertong')}}</span>
</div>
</div>
<div class="row items-center q-mb-md">
<span class="text-grey-6" :class="{'HotelSure-textMobile':$q.platform.is.mobile}">{{$t('v101.scatteredOrder.ruzhuriqi')}}</span>
<div class="col" :class="{'row no-wrap q-pl-lg':$q.platform.is.desktop,'column':$q.platform.is.mobile}">
<div class="row items-center" :class="{'q-pb-md':$q.platform.is.mobile}">
<q-field stack-label :label="$t('v101.scatteredOrder.ruzhushijian')" standout class="col-2" style="min-width: 200px" dense>
<div class="self-center full-width no-outline" tabindex="0">
{{params.CheckInDate}}
</div>
<q-popup-proxy :offset="[0, 10]" ref="qDateProxy">
<q-date v-model="params.CheckInDate" mask="YYYY/MM/DD" :options="optionsFnStar" @update:model-value="dateRangeHandler"></q-date>
</q-popup-proxy>
</q-field>
<span class="q-ml-md">{{checkInWeek}}</span>
<div class="q-ml-sm text-grey-6">
<span v-if="roomRateDetails.roomOptions&&roomRateDetails.roomOptions.checkIinStartTime">{{roomRateDetails.roomOptions.checkIinStartTime}}</span>
<span class="q-ml-sm">{{$t('v101.scatteredOrder.zhihou')}}</span>
</div>
</div>
<div class="row items-center q-px-md desktop-only"><q-separator class="q-px-sm bg-dark"/></div>
<div class="row items-center">
<q-field stack-label :label="$t('v101.scatteredOrder.ruzhushijian')" standout class="col-2" style="min-width: 200px" dense>
<div class="self-center full-width no-outline" tabindex="0">
{{params.CheckOutDate}}
</div>
<q-popup-proxy :offset="[0, 10]" ref="qDateProxy2">
<q-date v-model="params.CheckOutDate" mask="YYYY/MM/DD" :options="optionsFnEnd" @update:model-value="dateRangeHandler2"></q-date>
</q-popup-proxy>
</q-field>
<span class="q-ml-md">{{checkOutWeek}}</span>
<div class="q-ml-sm text-grey-6">
<span v-if="roomRateDetails.roomOptions&&roomRateDetails.roomOptions.finalCheckInTime">{{roomRateDetails.roomOptions.finalCheckInTime}}</span>
<span class="q-ml-sm">{{$t('v101.scatteredOrder.zhiqian')}}</span>
</div>
</div>
</div>
</div>
<div v-if="roomRateDetails.RatePlanList&&roomRateDetails.RatePlanList.length>0" v-for="(item,index) in roomRateDetails.RatePlanList" :key="index" v-loading="loading">
<div class="row items-center q-mb-md">
<span class="text-grey-6" :class="{'HotelSure-textMobile':$q.platform.is.mobile}">{{$t('v101.scatteredOrder.fangjianshuliang')}}</span>
<div class="row items-center" :class="{'q-pl-lg':$q.platform.is.desktop}">
<span>{{item.RoomOccupancy
.RoomNum}}</span>
<div class="relative-position q-ml-md">
<q-icon class="absolute text-orange-6" style="left: 0;top: 1px;width: inherit;" name="information" size="18px"></q-icon>
<span class="q-pl-lg">
{{$t('v101.scatteredOrder.jinsheng')}}
<span class="text-orange">{{item.InventoryCount}}</span>
{{$t('v101.scatteredOrder.jian')}}
</span>
</div>
</div>
</div>
<div class="row no-wrap">
<span class="text-grey-6 row" :class="{'HotelSure-textMobile':$q.platform.is.mobile}">{{$t('v101.scatteredOrder.fangfeiqingkuang')}}</span>
<div class="col row wrap" :class="{'q-pl-lg':$q.platform.is.desktop}">
<template v-if="item.PriceList&&item.PriceList.length>0">
<q-card flatv class="row no-wrap items-end q-px-md q-pb-sm q-mr-md q-mb-md" v-for="subItem in item.PriceList">
<div class="text-grey-9">{{getformatDateStr(subItem.StayDate)}}</div>
<div class="q-ml-lg row items-end">
<span>{{item.Currency}}</span>
<span class="text-red text-weight-bold fz18 q-px-xs">
<span class="relative-position" style="top:3px">{{subItem.Price}}</span>
</span>
<span class="text-grey-6">/{{$t('v101.scatteredOrder.wan')}}</span>
</div>
</q-card>
</template>
</div>
</div>
</div>
</div>
</div>
<div class="col column bg-white rounded-border q-mb-md">
<div class="bg-light-blue-1 q-py-md q-px-lg fz14 rounded-borders row items-center justify-between">
<span class="text-weight-bold">{{$t('v101.scatteredOrder.ruzhuxinxi')}}</span>
<span class="relative-position text-orange-6">
<q-icon class="absolute text-orange-6" style="left: 0;top: 1px;width: inherit;" name="information" size="18px"></q-icon>
<span class="q-pl-lg">{{$t('v101.scatteredOrder.ruzhuxinxi1')}}</span>
</span>
</div>
<div class="q-px-lg q-py-lg">
<q-form
dense
class="row wrap"
>
<div class="row" :class="{'col-6':$q.platform.is.desktop,'col-12':$q.platform.is.mobile}">
<span class="" :class="{'HotelSure-text q-px-lg':$q.platform.is.desktop,'HotelSure-textMobile q-pr-sm':$q.platform.is.mobile}"><span class="text-red">*</span> {{$t('v101.scatteredOrder.yudinren')}}</span>
<div class="col row justify-between">
<div class="col-6">
<q-input
dense
size="xs"
filled
v-model="sureMsg.guestLastName"
:label="$t('v101.scatteredOrder.xin')+'('+$t('v101.scatteredOrder.yingwen')+')'"
hint=""
lazy-rules
:rules="[ val => val && val.length > 0 || ' ']"
ref="guestLastName"
/>
</div>
<div class="col-6">
<q-input
class="q-pl-lg"
dense
size="xs"
filled
v-model="sureMsg.guestFirstName"
:label="$t('v101.scatteredOrder.ming')+'('+$t('v101.scatteredOrder.yingwen')+')'"
hint=""
lazy-rules
:rules="[ val => val && val.length > 0 || ' ']"
ref="guestFirstName"
/>
</div>
</div>
</div>
<div class="row" :class="{'col-6':$q.platform.is.desktop,'col-12':$q.platform.is.mobile}">
<span class="" :class="{'HotelSure-text q-px-lg':$q.platform.is.desktop,'HotelSure-textMobile q-pr-sm':$q.platform.is.mobile}"><span class="text-red">*</span> {{$t('v101.scatteredOrder.dangqiandizhi')}}</span>
<q-input
class="col"
dense
size="xs"
filled
v-model="sureMsg.guestAddress"
:label="$t('v101.scatteredOrder.dangqiandizhi')"
hint=""
lazy-rules
:rules="[ val => val && val.length > 0 || ' ']"
ref="guestAddress"
/>
</div>
<div class="row" :class="{'col-6':$q.platform.is.desktop,'col-12':$q.platform.is.mobile}">
<span class="" :class="{'HotelSure-text q-px-lg':$q.platform.is.desktop,'HotelSure-textMobile q-pr-sm':$q.platform.is.mobile}"><span class="text-red">*</span> {{$t('v101.scatteredOrder.Email')}}</span>
<q-input
class="col"
dense
size="xs"
filled
v-model="sureMsg.guestEmail"
:label="$t('v101.scatteredOrder.Email')"
hint=""
lazy-rules
:rules="[(val:any, rules:any) => rules.email(val) || ' ']"
ref="guestEmail"
/>
</div>
<div class="row" :class="{'col-6':$q.platform.is.desktop,'col-12':$q.platform.is.mobile}">
<span class="" :class="{'HotelSure-text q-px-lg':$q.platform.is.desktop,'HotelSure-textMobile q-pr-sm':$q.platform.is.mobile}"><span class="text-red">*</span> {{$t('v101.scatteredOrder.dianhua')}}</span>
<q-input
class="col"
dense
size="xs"
filled
v-model="sureMsg.guestPhoneNumber"
:label="$t('v101.scatteredOrder.dianhua')"
type="Number"
hint=""
lazy-rules
:rules="[ val => val && val.length == 11 || ' ']"
ref="guestPhoneNumber"
/>
</div>
<div class="col-12 row">
<div class="row" :class="{'col-6':$q.platform.is.desktop,'col-12':$q.platform.is.mobile}">
<span class="" :class="{'HotelSure-text q-px-lg':$q.platform.is.desktop,'HotelSure-textMobile q-pr-sm':$q.platform.is.mobile}"><span class="text-red"></span> {{$t('v101.scatteredOrder.kehuxuqiu')}}</span>
<q-input
class="col"
dense
size="xs"
filled
autogrow
type="textarea"
v-model="sureMsg.guestRequest"
:label="$t('v101.scatteredOrder.kehuxuqiu')"
hint=""
lazy-rules
/>
</div>
</div>
<div class="col-12 row">
<div class="row q-mb-md" :class="{'col-6':$q.platform.is.desktop,'col-12':$q.platform.is.mobile}" v-for="item in sureMsg.roomGroup">
<span class="" :class="{'HotelSure-text q-px-lg':$q.platform.is.desktop,'HotelSure-textMobile q-pr-sm':$q.platform.is.mobile}"><span class="text-red">*</span>
{{$t('v101.scatteredOrder.fangjian')}}
{{item.roomCount}}
</span>
<div class="col row">
<div class="col-4 row">
<q-select class="col" v-model="item.roomMaleCount" dense :options="adultList" emit-value map-options :label="$t('v101.scatteredOrder.chengrennan')" standout @update:model-value="setPeopleNum"/>
</div>
<div class="col-4 row" :class="{'q-pl-lg':$q.platform.is.desktop,'q-pl-xs':$q.platform.is.mobile}">
<q-select class="col" v-model="item.roomFemaleCount" dense :options="adultList" emit-value map-options :label="$t('v101.scatteredOrder.chengrennv')" standout @update:model-value="setPeopleNum"/>
</div>
<div class="col-4 row" :class="{'q-pl-lg':$q.platform.is.desktop,'q-pl-xs':$q.platform.is.mobile}">
<q-select class="col" v-model="item.roomChildCount" dense :options="childrenList" emit-value map-options :label="$t('v101.scatteredOrder.ertongshu')" standout @update:model-value="setPeopleNum"/>
</div>
</div>
</div>
</div>
<div class="column text-red" :class="{'q-pl-lg':$q.platform.is.desktop}">
<div v-if="(dataList.cancellationPeriod1==-1||dataList.cancellationPeriod1==0)&&(dataList.cancellationType1==1||dataList.cancellationType1==2)">
<template v-if="dataList.cancellationPeriod1==-1">{{$t('v101.scatteredOrder.quxiao1')}},</template>
<template v-if="dataList.cancellationPeriod1==0">{{$t('v101.scatteredOrder.quxiao2')}},</template>
<template v-if="dataList.cancellationType1==1">{{$t('v101.scatteredOrder.shouxufei')}}: {{dataList.cancellation1}}%</template>
<template v-if="dataList.cancellationType1==2">{{$t('v101.scatteredOrder.shouxufei')}}: {{dataList.cancellation1}}</template>
</div>
<div v-if="(dataList.cancellationPeriod2==-1||dataList.cancellationPeriod2==0)&&(dataList.cancellationType2==1||dataList.cancellationType2==2)">
<template v-if="dataList.cancellationPeriod2==-1">{{$t('v101.scatteredOrder.quxiao1')}},</template>
<template v-if="dataList.cancellationPeriod2==0">{{$t('v101.scatteredOrder.quxiao2')}},</template>
<template v-if="dataList.cancellationType2==1">{{$t('v101.scatteredOrder.shouxufei')}}: {{dataList.cancellation2}}%</template>
<template v-if="dataList.cancellationType2==2">{{$t('v101.scatteredOrder.shouxufei')}}: {{dataList.cancellation2}}</template>
</div>
<div v-if="(dataList.cancellationPeriod3==-1||dataList.cancellationPeriod3==0)&&(dataList.cancellationType3==1||dataList.cancellationType3==2)">
<template v-if="dataList.cancellationPeriod3==-1">{{$t('v101.scatteredOrder.quxiao1')}},</template>
<template v-if="dataList.cancellationPeriod3==0">{{$t('v101.scatteredOrder.quxiao2')}},</template>
<template v-if="dataList.cancellationType3==1">{{$t('v101.scatteredOrder.shouxufei')}}: {{dataList.cancellation3}}%</template>
<template v-if="dataList.cancellationType3==2">{{$t('v101.scatteredOrder.shouxufei')}}: {{dataList.cancellation3}}</template>
</div>
</div>
</q-form>
</div>
</div><template v-if="$q.platform.is.desktop">
</template>
<div v-if="isLoginB2B" class="col column bg-white rounded-border q-mb-md">
<div class="bg-light-blue-1 q-py-md q-px-lg fz14 rounded-borders row items-center justify-between">
<span class="text-weight-bold">{{$t('v101.scatteredOrder.youhuixingxi')}} </span>
</div>
<div class="q-px-lg q-py-lg">
<div class="fz16 text-weight-bold q-mb-sm">{{$t('v101.scatteredOrder.youhuiquanduihuan')}}</div>
<div class="row">
<div class="col-3 column">
<q-input
dense
size="xs"
filled
v-model="ActivateCode"
label=""
hint=""
lazy-rules
/>
</div>
<div class="q-ml-lg"><q-btn class="q-px-lg q-py-sm" color="primary" dense unelevated :label="$t('v101.scatteredOrder.duihuan')" :loading="CodeLoading" @click="GetCode"/></div>
</div>
<div class="column">
<span class="fz16 text-weight-bold q-pb-md">{{$t('v101.scatteredOrder.youhuiquanshiyong')}}</span>
<span>{{$t('v101.scatteredOrder.nokeyongyouhuiquan')}}</span>
</div>
</div>
<!-- 优惠券 -->
<div class="Yhq column" v-if="!isLoginB2B">
<p class="pfR text-dark q-pl-lg">{{$t('v101.scatteredOrder.youhuiquanshiyong')}}</p>
<ul class="yhqUl">
<p v-if="!Verification.length || Verification[0].ApplyState !== 1" class="_trip_xiangqing_tips">{{$t('v101.scatteredOrder.jinxing1')}} <span @click="goShenqing">{{$t('v101.scatteredOrder.jinxing2')}}</span>{{$t('v101.scatteredOrder.jinxing3')}}</p>
<li v-for="(item,index) in UserCanUseCouponList" :class="{'blue':item.couponsType===1,'_active':item.active,'disab': !Platfrom(item.fromPlatform)|| !Verification.length || Verification[0].ApplyState !== 1}" @click="!Platfrom(item.fromPlatform) || !Verification.length || Verification[0].ApplyState !== 1 ? '' : clickCoupon(item)" :key="index+5000" class="sawtooth">
<div class="yhqImg">
<img v-if="item.fromPlatform=='1'" src="../../assets/images/yhq/app.png" alt="">
<img v-if="item.fromPlatform=='2'" src="../../assets/images/yhq/xcx.png" alt="">
<img v-if="item.fromPlatform=='3'" src="../../assets/images/yhq/pc.png" alt="">
</div>
<span class="kdj">
<span v-if="item.overlapUse==1">{{$t('v101.scatteredOrder.kediejia')}}</span>
<span v-else>{{$t('v101.scatteredOrder.nodiejia')}}</span>
</span>
<p style="margin-top:10px">
<span v-if="item.couponsType==1">円<span>{{item.denomination}}</span></span>
<span v-else>{{item.denomination}}{{$t('v101.scatteredOrder.zhe')}}</span>
</p>
<p style="font-size:14px">{{$t('v101.scatteredOrder.man')}}{{item.useCondition}}{{$t('v101.scatteredOrder.shiyong')}}</p>
<p style="font-size:12px;color:#4C58A4;margin-top:6px">
{{$t('v101.scatteredOrder.youxiaoqi')}}：{{item.effectDate | YMD}}-{{item.expirationDate | YMD}}
</p>
<div v-if="Platfrom(item.fromPlatform)" class="_choice_box">
<span v-if="!item.active"></span>
<span v-else class="iconfont icon-xuanzhong2"></span>
</div>
</li>
<div v-if="UserCanUseCouponList.length==0" class="_no_coupon">
<p>{{$t('v101.scatteredOrder.nokeyongyouhuiquan')}}</p>
</div>
</ul>
</div>
</div>
<div class="col row q-mb-md">
<q-btn class="col-12 bg-blue rounded-border text-white q-py-sm" :label="$t('v101.scatteredOrder.xiadan')" :loading="submLoading" @click="submitForm"/>
</div>
</div>
</div>
</template>
<script lang="ts">
import Store from '../../store'
import svgIcon from '../../components/global/svg-icon.vue'
import { defineComponent, ref, reactive, toRef, toRefs, provide, onMounted, inject, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import { DirtionmaryHelper } from '../../config/dictionary'
import { date } from 'quasar'
import message from '../../utils/message'
import { moneyFormat, dateDiffer } from '../../utils/tools'
import DidaService from "../../api/didahotel"
import { currentRouter } from 'src/router'
import { HotelRate,HotelArea, useHotel } from '../../utils/hotelRate'
import { isPhone, validatAlphabetsName } from '../../utils/validate'
import { ApiResult } from 'src/@types/enumHelper'
export default defineComponent({
components: { svgIcon },
props: {
HotelRow: {
type: Object,
require: false
},
hotelInfor: {
type: Object,
require: false
}
},
emits:['close'],
setup(props, context) {
const { t } = useI18n()
const qDateProxy = ref(null) as any
const qDateProxy2 = ref(null) as any
const qDateProxy3 = ref(null) as any
const guestLastName = ref(null) as any
const guestFirstName = ref(null) as any
const guestAddress = ref(null) as any
const guestEmail = ref(null) as any
const guestPhoneNumber = ref(null) as any
const data = reactive({
isShowTime: true,
isLoginB2B: false,
Verification:'',
CouponIds: '',
CodeLoading: false,
UserCanUseCouponList: [] as Array<any>,
CouponList: [] as Array<any>,
ActivateCode: '',//兑换码
params:{
// hotelId:'',
sort:1,
displayFrom:1,
CheckInDate:'',
CheckOutDate:'',
searchroomGroup:[],
ratePlanID: '',
imgUrl: '',
RoomCount:1,
ChildCount:0,
AdultCount:1,
OccupancyDetails:[]
},
getParamsMsg:{} as any,
urlParamsMsg:{} as any,
adultList: [] as Array<Number>,//成人下拉
childrenList: [] as Array<Number>,//儿童下拉
numberOfAdults: 0,
numberOfChildren: 0,
submLoading: false,
loading: false,
dateRange: '' as any,//当前日期
dateRange2: '' as any,//当前日期
roomRateDetails: {} as any,
HotelRoomTypes: [] as Array<HotelArea>,//散客房间类型
dataList: {} as any,
//确认MSG参数
sureMsg:{
dataId:'',
hotelId:'',
RatePlanID:"",
totalRoomCount:'',
CheckInDate:'',
checkInTime:'',
CheckOutDate:'',
roomOptionCd:'',
totalChargeableRateInfo:'',
totalPriceJapanese:'',
roomGroup:[] as Array<any>,
guestLastName:'',
guestFirstName:'',
guestAddress:'',
guestPhoneNumber:'',
guestEmail:'',
//备注
guestRequest:'',
CustomerId:0,
HotelName:'',
HotelPic:'',
EmployeeIdStr:'',
OldTotalPrice:0,
CustomerPayMoney:0,
DiscountMoney:0,
OrderSource:2,
OrderForm:1,
},
ischeckInTimeSure: false,
auditNum:0,
childNum:0,
TotalChildCount:0,//孩子能否报入
chekedChildCount:0,//选了的儿童数
isBaoChild: false,
SettlementPrice : 0,
price: 0,
pickerBeginDateBefore:'',//入住时间前可选范围
pickerBeginDateAfter:'',//入住时间后可选范围
RoomTypeList: [] as Array<HotelArea>,//房间等级
scatteredRoomTypeList: [] as Array<HotelArea>,//散客房间类型
WeekList: [] as Array<HotelArea>,//周一至周日
checkInWeek: '',//周一至周日
checkOutWeek: '',
})
for(let i=0;i<21;i++){
data.adultList.push(i)
data.childrenList.push(i)
}
data.getParamsMsg = JSON.parse(localStorage.getItem(DirtionmaryHelper.SCATTERED_DiDaHOTEL_DATE))
console.log("data.getParamsMsg ",data.getParamsMsg );
data.params.CheckInDate = data.getParamsMsg.CheckInDate
data.params.CheckOutDate = data.getParamsMsg.CheckOutDate
data.params.searchroomGroup = data.getParamsMsg.searchroomGroup
data.params.imgUrl = data.getParamsMsg.imgUrl
data.urlParamsMsg = currentRouter.currentRoute._value.params
data.auditNum = data.getParamsMsg.auditNum
data.childNum = data.getParamsMsg.childNum
data.RoomTypeList = useHotel.getHotelRoomType()
data.scatteredRoomTypeList = useHotel.getHotelScatRoom()
data.WeekList = useHotel.getHotelWeek()
if(data.params.searchroomGroup&&data.params.searchroomGroup!=null){
let roomGroupLen= data.params.searchroomGroup.length
for(var i=0;i<roomGroupLen;i++){
var obj = {
roomCount:i+1,
roomMaleCount:0,
roomFemaleCount:0,
roomChildCount:0,
roomInfantCount:0,
rateGroup:[]
}
data.sureMsg.roomGroup.push(obj);
}
}
const methods = {
// 提交下单
submitForm () {
if(data.submLoading) return
let flag = false
guestLastName.value.validate()
guestFirstName.value.validate()
guestAddress.value.validate()
guestEmail.value.validate()
guestPhoneNumber.value.validate()
flag = !guestLastName.value.hasError && !guestFirstName.value.hasError && !guestAddress.value.hasError && !guestEmail.value.hasError && !guestPhoneNumber.value.hasError
if(!data.sureMsg.checkInTime) return data.ischeckInTimeSure = true
if(validatAlphabetsName(data.sureMsg.guestLastName)==false) return message.errorMsg(t('v101.scatteredOrder.xin')+t('v101.scatteredOrder.qingshuru')+t('v101.scatteredOrder.yingwen'))
if(validatAlphabetsName(data.sureMsg.guestFirstName)==false) return message.errorMsg(t('v101.scatteredOrder.ming'+t('v101.scatteredOrder.qingshuru')+t('v101.scatteredOrder.yingwen')))
if(isPhone(data.sureMsg.guestPhoneNumber)==false) return message.errorMsg(t('v101.scatteredOrder.qingshuru')+t('v101.scatteredOrder.zhengque')+t('v101.scatteredOrder.dianhua'))
if(!flag) return
data.sureMsg.hotelId = data.urlParamsMsg.hotelId;
data.sureMsg.CheckInDate = data.params.CheckInDate;
data.sureMsg.totalRoomCount = data.params.searchroomGroup.length;
data.sureMsg.CheckOutDate = data.params.CheckOutDate;
data.sureMsg.roomOptionCd = data.params.roomOptionCd;
data.sureMsg.HotelName = data.dataList.hotelName;
data.sureMsg.HotelPic = data.params.imgUrl;
//判断选择的人数与入住人数
let Count1=0
data.sureMsg.roomGroup.forEach(x=>{
Count1+=x.roomMaleCount+x.roomFemaleCount+x.roomChildCount
})
let Count2=0;
Count2=data.auditNum+data.childNum;
if(Count1!=Count2){
message.errorMsg(t('v101.scatteredOrder.Errorruzhushu'))
return;
}
data.dataList.roomGroup.forEach(x=>{
data.sureMsg.roomGroup.forEach(j=>{
if(Object.prototype.toString.call(x.rateGroup) == '[object Object]'){
j.rateGroup.push(x.rateGroup);
}else{
j.rateGroup=x.rateGroup
}
})
})
let CustomerId
if (Store.state && Store.state.user?.userDetail) {
CustomerId = Store.state.user?.userDetail?.customerId
data.sureMsg.CustomerId=CustomerId
}
data.submLoading = true
let param = Object.assign(data.sureMsg)
HotelService.GetDiDaPriceConfirm(param)
.then(r => {
data.submLoading = false
if (r.data.resultCode == ApiResult.SUCCESS) {
console.log("确认酒店接口数据",r.data.data);
localStorage.removeItem(DirtionmaryHelper.SCATTERED_HOTEL_ORDER_MSG)
message.successMsg(`${t('v101.scatteredOrder.xiadanSuccess')}`)
let num =0;
data.sureMsg.roomGroup.forEach(x=>{
num+=parseInt(x.roomFemaleCount)+parseInt(x.roomMaleCount)+parseInt(x.roomChildCount)
})
let msg = {
RB_Branch_id:r.data.data.RB_Branch_id,
costType:r.data.data.costType,
orderId:r.data.data.orderId,
bookingNumber:r.data.data.parmResult.bookingNumber,
bookMoney:data.SettlementPrice,
CancelTime:r.data.data.CancelTime,
hotelName:r.data.data.parmResult.hotelName,
totalPnumber:num
}
localStorage.setItem(DirtionmaryHelper.SCATTERED_HOTEL_ORDER_MSG,JSON.stringify(msg))
} else {
message.errorMsg(r.data.message)
}
})
.catch(e => {
message.errorMsg(e.message)
data.submLoading = false
})
},
//设置房间里面成人数改变总成人数和儿童数
setPeopleNum() {
// data.auditNum = 0;
// data.childNum = 0;
// search.searchroomGroup.forEach(x => {
// data.auditNum += (x.roomMaleCount+x.roomFemaleCount);
// data.childNum += x.roomChildCount;
// })
// if (data.auditNum == null || data.auditNum == undefined) {
// data.auditNum = 1
// }
// if (data.childNum == null || data.childNum == undefined) {
// data.childNum = 1
// }
},
//通过日期得到周几
getWeek(){
let CheckInDate = new Date(data.params.CheckInDate).getDay();
let CheckOutDate = new Date(data.params.CheckOutDate).getDay();
switch(CheckInDate){
case 0:
data.checkInWeek=data.WeekList[6].name
break;
case 1:
data.checkInWeek=data.WeekList[0].name
break;
case 2:
data.checkInWeek=data.WeekList[1].name
break;
case 3:
data.checkInWeek=data.WeekList[2].name
break;
case 4:
data.checkInWeek=data.WeekList[3].name
break;
case 5:
data.checkInWeek=data.WeekList[4].name
break;
case 6:
data.checkInWeek=data.WeekList[5].name
break;
}
switch(CheckOutDate){
case 0:
data.checkOutWeek=data.WeekList[6].name
break;
case 1:
data.checkOutWeek=data.WeekList[0].name
break;
case 2:
data.checkOutWeek=data.WeekList[1].name
break;
case 3:
data.checkOutWeek=data.WeekList[2].name
break;
case 4:
data.checkOutWeek=data.WeekList[3].name
break;
case 5:
data.checkOutWeek=data.WeekList[4].name
break;
case 6:
data.checkOutWeek=data.WeekList[5].name
break;
}
},
//日期格式化
getformatDateStr(value){
var dt = new Date(value);
let year = dt.getFullYear();
let month = (dt.getMonth()+1).toString().padStart(2,'0');
let date = (dt.getDate()+1).toString().padStart(2,'0');
return year+"-"+month+"-"+date;
},
optionsFnStar(cd: any) {
return cd <= date.formatDate(date.addToDate(new Date(), { days: 9 }), 'YYYY/MM/DD')
},
optionsFnEnd(cd: any) {
return cd >= date.formatDate(date.addToDate(new Date(), { days: 9 }), 'YYYY/MM/DD')
},
dateRangeHandler(e: any) {
if (qDateProxy.value) qDateProxy.value.hide()
methods.initHotel()
},
dateRangeHandler2(e: any) {
if (qDateProxy2.value) qDateProxy2.value.hide()
methods.initHotel()
},
dateRangeHandler3(e: any) {
if (qDateProxy3.value) qDateProxy3.value.hide()
},
initHotel() {
methods.getWeek()
data.loading = true
let param = Object.assign(data.params,data.urlParamsMsg)
DidaService.GetDiDaPriceConfirm(param)
.then(r => {
if (r.data.resultCode == ApiResult.SUCCESS) {
data.dataList = r.data.data.PriceDetails;
console.log("道旅酒店确认",r.data.data);
data.roomRateDetails = r.data.data.PriceDetails.HotelList[0]
console.log("道旅酒店",r.data.data.PriceDetails.HotelList[0]);
data.sureMsg.checkInTime = r.data.data.PriceDetails.CheckInDate
if(Object.prototype.toString.call(data.dataList.HotelList) == '[object Object]'){
let arr = [];
arr.push(data.dataList.HotelList);
data.dataList.HotelList=arr;
}
data.TotalChildCount = 0;
let rateGrouoLen = 0;
}
data.loading = false
}).catch(e => {
data.loading = false
message.errorMsg(e.message)
})
},
clickCoupon(item){
let list = [];
if (!item.active) { // 是否选中
if(item.denomination>data.SettlementPrice){
message.errorMsg(t('v101.scatteredOrder.notiaojian'))
return;
}
if (item.overlapUse === 1) { // 1允许叠加使用
data.CouponList.forEach(x=>{
if (x.overlapUse === 1 && x.couponsType === item.couponsType) { // 优惠券列表筛选出允许叠加并且type相同的
list.push(x)
}
})
item.active = !item.active
data.UserCanUseCouponList = list
} else { // 不允许叠加使用
data.CouponList.forEach(x=>{ // 筛选掉其他
if (x.id === item.id) {
list.push(x)
}
})
item.active = !item.active
data.UserCanUseCouponList = list
}
} else {
item.active = !item.active
if (data.UserCanUseCouponList.length===1) { // 取消优惠券选中状态 之前直选择了一个优惠券
data.UserCanUseCouponList = data.CouponList
} else { //... 之前选择了多个优惠券 循环判断是否已全部取消
let num = 0
data.UserCanUseCouponList.forEach(x=>{
if (x.active)
num +=1
})
if (num===0) {
data.CouponList.forEach(x=>{
x.active = false
})
data.UserCanUseCouponList = this.CouponList
}
}
}
if (data.UserCanUseCouponList.length>0) {
let CouponIds = ''
let CouponMoney = 0
let CouponSale = 1
let type = 0
data.UserCanUseCouponList.forEach(x=>{
if (x.active) {
type = x.couponsType
CouponIds = CouponIds + x.id + ','
if (x.couponsType === 1) {
CouponMoney = CouponMoney + x.denomination
} else {
CouponSale = CouponSale * (x.denomination/10)
}
}
})
data.CouponIds = CouponIds
if (type === 1) {
data.SettlementPrice = data.price - CouponMoney
} else if (type === 2) {
data.SettlementPrice = data.price * CouponSale
} else if (type === 0) {
data.SettlementPrice = data.price
}
} else {
data.SettlementPrice = data.price
}
// this.SettlementPrice=parseInt(this.SettlementPrice).toFixed(2);
let allmonney=data.price - data.SettlementPrice;
data.sureMsg.DiscountMoney = (data.price - data.SettlementPrice).toFixed(2);
data.CouponIds=data.CouponIds.substring(0,data.CouponIds.length-1)
data.sureMsg.CouponAllotIds=data.CouponIds;
},
goShenqing () {
let dom = document.querySelector("#blankLink")
dom.href=`http://${window.location.host}/#/PsSystem/${1}`
dom.click()
},
//获取道旅床类型列表
getdidaBedType() {
DidaService.GetDidaBedType({}).then((res) => {
if (res.data.resultCode == 1) {
data.HotelRoomTypes = res.data.data;
}
});
},
// 兑换优惠券
GetCode(){
if(data.CodeLoading) return
if(!data.ActivateCode) return
let msg={
ActivateCode:data.ActivateCode
};
data.CodeLoading = true
let param = Object.assign(msg)
HotelService.updateUseCouponBycod(param)
.then(r => {
data.CodeLoading = false
if (r.data.resultCode == ApiResult.SUCCESS) {
message.successMsg(`${t('v101.scatteredOrder.duihuanSuccess')}`)
methods.getUserCanUseCouponList();
}else{
message.errorMsg(r.message)
}
}).catch(e => {
data.CodeLoading = false
message.errorMsg(e.message)
})
},
//获取房型
getRoomType(roomtypeId) {
let roomtypeName = "";
if (roomtypeId>0) {
data.HotelRoomTypes.forEach((item) => {
if (item.ID == roomtypeId) {
roomtypeName=item.Name_CN;
}
});
}
return roomtypeName;
},
// 获取优惠券
getUserCanUseCouponList(){
let msg={
lineId:0,
lineteamId:0,
CouponsUseScope:10,
};
let param = Object.assign(msg)
HotelService.getUserCanUseCouponList(param)
.then(r => {
if (r.data.resultCode == ApiResult.SUCCESS) {
data.CouponList=res.data.data;
data.CouponList.forEach(item=>{
item.active=false;
})
methods.filterCoupon();
}
}).catch(e => {
data.loading = false
message.errorMsg(e.message)
})
},
filterCoupon() {
let list = []
data.CouponList.forEach(x=>{
if (data.price>x.useCondition) {
x.active = false
list.push(x);
}
})
data.UserCanUseCouponList = list;
},
}
onMounted(()=>{
methods.getdidaBedType()
methods.initHotel()
})
return { ...toRefs(data), ...methods,qDateProxy,qDateProxy2,qDateProxy3,guestLastName,guestFirstName,guestAddress,guestEmail,guestPhoneNumber }
}
})
</script>
<style>
.HotelSure-text{
width: 145px;
}
.HotelSure-textMobile{
width: 80px;
}
.ischeckInTimeSure .q-field__control{
border: 1px solid red;
}
.commonSure .yhqUl{
padding:0 20px;
margin:20px 0;
}
.commonSure .icon-xuanzhong2{
color: #31AA21;
}
.commonSure .sawtooth:hover {
cursor: pointer;
}
.commonSure .yhqUl .blue{
background-color: #8794E2;
}
.commonSure .yhqUl .blue:hover{
background-color: #6776D2;
}
.commonSure .yhqUl .blue ._time{
color: #4C58A4 !important;
}
.commonSure .yhqUl ._active{
background-color: #D9A24D;
}
.commonSure .yhqUl .blue._active{
background-color: #6776D2;
}
.commonSure ._trip_xiangqing_tips{
color: red !important;
font-size: 14px !important;
}
.commonSure ._trip_xiangqing_tips span{
color: #3965B0;
cursor: pointer;
}
.commonSure .yhqImg{
position: absolute;
right: 80px;
top: 10px;
width: 50px;
height: 50px;
}
.commonSure .yhqImg img{
width: 100%;
height: 100%;
display: block;
}
.commonSure .yhqUl .disab{
background-color: #7d7d7d !important;
}
</style>
\ No newline at end of file
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