Skip to content

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

no message

parent a8cb8872
Hide whitespace changes
Inline Side-by-side
Showing with 850 additions and 871 deletions
src/components/car/orderPreview.vue
View file @ 606c1009
...@@ -201,13 +201,27 @@ export default { ...@@ -201,13 +201,27 @@ export default {
methods: { methods: {
goOrderHandler(){ goOrderHandler(){
let order = { let order = {
CarId: this.selectedCarObj.Id, key: null,
AirportId: this.selectedAirportObj?this.selectedAirportObj.Id:'', CarObj: this.selectedCarObj,
startDate: this.p.startDate, AirportObj: {
originalB2CPrice: this.p.originalB2CPrice, Address: this.selectedAirportObj?this.selectedAirportObj.Address:'',
orderInfo: this.chosenObj, AirportId: this.selectedAirportObj?this.selectedAirportObj.AirportId:'',
AirportName: this.selectedAirportObj?this.selectedAirportObj.AirportName:'',
Id: this.selectedAirportObj?this.selectedAirportObj.Id:'',
Name: this.selectedAirportObj?this.selectedAirportObj.Name:''
},
calculationAmount: this.p,
calculationNum: this.chosenObj,
sumPrice: this.sumPrice, sumPrice: this.sumPrice,
Id: this.dataList.Id, details: {
Name: this.dataList.Name,
Description: this.dataList.Description,
videoStr: this.dataList.videoStr,
imgCover: this.dataList.imgCover,
CarType: this.dataList.CarType,
Id: this.dataList.Id,
CurrencyCode: this.dataList.CurrencyCode,
},
onCarObj: { onCarObj: {
Address: this.onCarObj?this.onCarObj.Address:'', Address: this.onCarObj?this.onCarObj.Address:'',
Name: this.onCarObj?this.onCarObj.Name:'', Name: this.onCarObj?this.onCarObj.Name:'',
...@@ -224,13 +238,8 @@ export default { ...@@ -224,13 +238,8 @@ export default {
}, },
} }
let key = this.$md5(JSON.stringify(order)) let key = this.$md5(JSON.stringify(order))
let pickuporderCars = localStorage.getItem('pickuporderCars') order.key = key
pickuporderCars = pickuporderCars?JSON.parse(pickuporderCars):[] localStorage.setItem("pickuporderCars",JSON.stringify(order))
pickuporderCars.push({
key,
order
})
localStorage.setItem("pickuporderCars",JSON.stringify(pickuporderCars))
this.CommonJump('/PickuporderForm/'+key, {}); this.CommonJump('/PickuporderForm/'+key, {});
}, },
// 获取车的详情 // 获取车的详情
......
src/pages/Pickuporder/orderForm.vue
View file @ 606c1009
<template> <template>
<div class="content-page order-preview"> <div class="content-page order-preview">
<q-stepper <q-stepper
v-model="step" v-model="step"
ref="stepper" ref="stepper"
color="primary" color="primary"
inactive-color="grey-5 " inactive-color="grey-5 "
class="bg-transparent" class="bg-transparent"
flat flat
animated animated
> >
<q-step <q-step
:name="1" :name="1"
title="確認訂單" title="確認訂單"
icon="settings" icon="settings"
:done="step > 1" :done="step > 1"
></q-step> ></q-step>
<q-step <q-step
:name="2" :name="2"
title="付款" title="付款"
icon="iconfont iconPayment-1" icon="iconfont iconPayment-1"
:done="step > 2" :done="step > 2"
></q-step> ></q-step>
<q-step <q-step
:name="3" :name="3"
title="訂購完成" title="訂購完成"
icon="iconfont iconicon_finish_R" icon="iconfont iconicon_finish_R"
:done="step == 3" :done="step == 3"
></q-step> ></q-step>
</q-stepper> </q-stepper>
<div <div
class="row q-pa-md" class="row q-pa-md"
style="min-width: 375px; margin: 0 auto" style="min-width: 375px; margin: 0 auto"
:class="{ :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-card flat class="q-pa-md"> <q-card flat class="q-pa-md">
<div class="text-subtitle1 text-weight-bolder" ref="baseUserInfoTitle">訂購人資訊</div> <div class="text-subtitle1 text-weight-bolder" ref="baseUserInfoTitle">訂購人資訊</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="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.mail"
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" ref="passengerInformation">旅客資料</div>
<div class="row">
<vue-core-video-players
v-if="details.videoStr"
ref="video"
:src="details.videoStr"
:title="details.title"
:muted="true"
:autoplay="false"
@play="playHandler"
@pause="pauseHandler"
@seeked="seekedChangeHandler"
@timeupdate="timeChangeHandler"
logo="../statics/img/transparent_logo.png"
:loop="false"
id="trip_video"
class="rounded-borders"
style="width: 80px"
/>
<q-img
v-else
:src="details?details.imgCover[0]:'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.Name}}
</div>
<div class="text-caption text-grey-6 ellipsis q-mt-sm">
{{details.Description}}
</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>{{calculationAmount.startDate}}</span>
</div>
<div class="text-grey-9 q-ml-md">
<q-icon name="iconfont iconjiaotong" size="20px" class="q-mr-sm" />
<span class="q-mr-sm" v-if="chosenObj.Count > 0"
>{{CarObj.CarName}} x {{ chosenObj.Count }}辆 </span
>
<span class="q-mr-sm"
>({{CarObj.PeopleNum}}人/辆)</span
>
</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"
>
<div class="text-subtitle1 q-pb-md text-weight-bold"></div>
<div class="row q-col-gutter-md"> <div class="row q-col-gutter-md">
<div :class="filedWidth"> <div :class="filedGuestWidth">
<q-select <q-input
v-model="userInfo.country"
@input="changeCountry"
:options="countrys"
emit-value
option-label="Name"
option-value="ID"
map-options
label="國家/地區"
standout standout
v-model="parameters.SurName"
label="本國姓"
placeholder="例：張"
:rules="[(val) => !!val || '請輸本國姓']"
ref="SurName"
/> />
</div> </div>
<div :class="filedWidth"> <div :class="filedGuestWidth">
<q-input <q-input
standout standout
v-model="userInfo.mail" v-model="parameters.Name"
label="郵箱地址" label="本國名"
:rules="[(val) => /^[a-zA-Z0-9]+([-_.][A-Za-zd]+)*@([a-zA-Z0-9]+[-.])+[A-Za-zd]{2,5}$/.test(val) || '請輸入正確的郵箱地址']" placeholder="例：三"
ref="mail" :rules="[(val) => !!val || '請輸本國名']"
ref="Name"
/> />
</div> </div>
</div> <div :class="filedGuestWidth">
</q-card> <q-input
standout
<q-card flat class="q-pa-md q-mt-lg" v-if="details"> v-model="parameters.ContactWay"
<div class="text-subtitle1 text-weight-bolder q-mb-md" ref="passengerInformation">旅客資料</div> label="联络方式"
placeholder="例：WeChat"
<div class="row"> :rules="[(val) => !!val || '請輸联络方式']"
<vue-core-video-players ref="ContactWay"
v-if="details.videoStr" mask="X"
ref="video" reverse-fill-mask
:src="details.videoStr"
:title="details.title"
:muted="true"
:autoplay="false"
@play="playHandler"
@pause="pauseHandler"
@seeked="seekedChangeHandler"
@timeupdate="timeChangeHandler"
logo="../statics/img/transparent_logo.png"
:loop="false"
id="trip_video"
class="rounded-borders"
style="width: 80px"
/>
<q-img
v-else
:src="details?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"
style="width: 80px"
/>
<div class="q-ml-md col">
<div class="text-subtitle1 ellipsis">
{{details.Name}}
</div>
<div class="text-caption text-grey-6 ellipsis q-mt-sm">
{{details.Description}}
</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>{{OrderDate.startDate}}</span>
</div>
<div class="text-grey-9 q-ml-md" v-if="chosenObj.Count > 0&&CarObj">
<q-icon name="iconfont iconjiaotong" size="20px" class="q-mr-sm" />
<span class="q-mr-sm"
>{{CarObj.CarName}} x {{ chosenObj.Count }}辆 </span
> >
<span class="q-mr-sm" </q-input>
>({{CarObj.PeopleNum}}人/辆)</span </div>
<div :class="filedGuestWidth">
<q-input
standout
v-model="parameters.Mobile"
label="電話"
:rules="[(val) => !!val && val.length == 11 || '請輸正確電話']"
ref="Mobile"
mask="#"
reverse-fill-mask
> >
<template v-slot:prepend>
<div class="text-subtitle2">+{{ userInfo.areaCode }}</div>
</template>
</q-input>
</div>
<div :class="filedGuestWidth">
<div class="row items-center q-mt-md">
<span>選擇性別：</span>
<q-radio
v-model="parameters.Sex"
dense
:val="1"
label="男"
class="q-mr-lg"
/>
<q-radio v-model="parameters.Sex" dense :val="2" label="女" />
</div>
</div> </div>
</div> </div>
</div>
<template v-if="details.CarType!=3">
<div class="text-subtitle1 text-weight-bolder q-my-md">{{details.CarType==1?'抵達':'起飛'}} 班机資料</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"
...@@ -129,230 +200,193 @@ ...@@ -129,230 +200,193 @@
<div :class="filedGuestWidth"> <div :class="filedGuestWidth">
<q-input <q-input
standout standout
v-model="parameters.SurName" v-model="parameters.AirportTerminal"
label="本國姓" label="航廈"
placeholder="例：張" placeholder="例：航廈"
:rules="[(val) => !!val || '請輸本國姓']" :rules="[(val) => !!val || '請輸航廈']"
ref="SurName" ref="AirportTerminal"
/> readonly>
<q-popup-proxy :offset="[0, 10]" ref="qDateProxy7">
<q-input type="textarea" dense standout autofocus
v-model="parameters.AirportTerminal" placeholder="請輸航廈" />
</q-popup-proxy>
</q-input>
</div> </div>
<div :class="filedGuestWidth"> <div :class="filedGuestWidth">
<q-input <q-input
standout standout
v-model="parameters.Name" v-model="parameters.AirLine"
label="本國名" label="航空公司"
placeholder="例：三" placeholder=""
:rules="[(val) => !!val || '請輸本國名']" :rules="[(val) => !!val || '請輸航空公司名稱']"
ref="Name" ref="AirLine"
/> readonly>
<q-popup-proxy :offset="[0, 10]" ref="qDateProxy8">
<q-input type="textarea" dense standout autofocus
v-model="parameters.AirLine" placeholder="請輸航空公司名稱" />
</q-popup-proxy>
</q-input>
</div> </div>
<div :class="filedGuestWidth"> <div :class="filedGuestWidth">
<q-input <q-input
standout standout
v-model="parameters.ContactWay" v-model="parameters.FlightNumber"
label="联络方式" label="航班編號"
placeholder="例：WeChat" placeholder="例：CA123"
:rules="[(val) => !!val || '請輸联络方式']" :rules="[(val) => !!val || '請輸航班編號']"
ref="ContactWay" ref="FlightNumber"
mask="X" mask="X"
reverse-fill-mask reverse-fill-mask
>
</q-input>
</div>
<div :class="filedGuestWidth">
<q-input
standout
v-model="parameters.Mobile"
label="電話"
:rules="[(val) => !!val && val.length == 11 || '請輸正確電話']"
ref="Mobile"
mask="#"
reverse-fill-mask
>
<template v-slot:prepend>
<div class="text-subtitle2">+{{ userInfo.areaCode }}</div>
</template>
</q-input>
</div>
<div :class="filedGuestWidth">
<div class="row items-center q-mt-md">
<span>選擇性別：</span>
<q-radio
v-model="parameters.Sex"
dense
:val="1"
label="男"
class="q-mr-lg"
/> />
<q-radio v-model="parameters.Sex" dense :val="2" label="女" />
</div>
</div>
</div>
</div>
<template v-if="details.CarType!=3">
<div class="text-subtitle1 text-weight-bolder q-my-md">{{details.CarType==1?'抵達':'起飛'}} 班机資料</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.AirportTerminal"
label="航廈"
placeholder="例：航廈"
:rules="[(val) => !!val || '請輸航廈']"
ref="AirportTerminal"
readonly>
<q-popup-proxy :offset="[0, 10]" ref="qDateProxy7">
<q-input type="textarea" dense standout autofocus
v-model="parameters.AirportTerminal" placeholder="請輸航廈" />
</q-popup-proxy>
</q-input>
</div>
<div :class="filedGuestWidth">
<q-input
standout
v-model="parameters.AirLine"
label="航空公司"
placeholder=""
:rules="[(val) => !!val || '請輸航空公司名稱']"
ref="AirLine"
readonly>
<q-popup-proxy :offset="[0, 10]" ref="qDateProxy8">
<q-input type="textarea" dense standout autofocus
v-model="parameters.AirLine" placeholder="請輸航空公司名稱" />
</q-popup-proxy>
</q-input>
</div>
<div :class="filedGuestWidth">
<q-input
standout
v-model="parameters.FlightNumber"
label="航班編號"
placeholder="例：CA123"
:rules="[(val) => !!val || '請輸航班編號']"
ref="FlightNumber"
mask="X"
reverse-fill-mask
/>
</div>
<div :class="filedGuestWidth">
<q-input
class="q-pb-md"
standout
:value="!flightTime?'':parameters.FlightTime"
:label="`航班${details.CarType==1?'抵達':'起飛'}時間`"
:rules="[(val) => !!val || `請选航班${details.CarType==1?'抵達':'起飛'}時間`]"
ref="FlightTime"
>
<template v-slot:append>
<q-icon name="event" class="cursor-pointer"></q-icon>
</template>
<q-popup-proxy :offset="[0, 0]" ref="qDateProxy1">
<div class="row">
<!-- <q-date
mask="YYYY-MM-DD HH:mm"
:title="$t('search_date_begin')"
subtitle="選擇"
v-model="parameters.FlightTime"
:options="optionsFn"
/>
<div class="q-px-sm"></div> -->
<q-time format24h v-model="flightTime" mask="HH:mm"
@input="getTime(1)"/>
</div>
</q-popup-proxy>
</q-input>
</div>
</div> </div>
</div>
</template>
<div class="text-subtitle1 text-weight-bolder q-my-md">
{{details.CarType==1?'接机':details.CarType==2?'送机':'包车'}}資料
</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"> <div :class="filedGuestWidth">
<q-input <q-input
class="q-pb-md"
standout standout
v-model="!getBusTime?'':parameters.OrderDate" :value="!flightTime?'':parameters.FlightTime"
label="接駁日期" :label="`航班${details.CarType==1?'抵達':'起飛'}時間`"
:rules="[(val) => !!val || '請选接駁日期']" :rules="[(val) => !!val || `請选航班${details.CarType==1?'抵達':'起飛'}時間`]"
ref="OrderDate" ref="FlightTime"
> >
<template v-slot:append> <template v-slot:append>
<q-icon name="event" class="cursor-pointer"></q-icon> <q-icon name="event" class="cursor-pointer"></q-icon>
</template> </template>
<q-popup-proxy :offset="[0, 0]" ref="qDateProxy2"> <q-popup-proxy :offset="[0, 0]" ref="qDateProxy1">
<div class="row"> <div class="row">
<q-time format24h v-model="getBusTime" mask="HH:mm" <!-- <q-date
@input="getTime(2)"/> mask="YYYY-MM-DD HH:mm"
:title="$t('search_date_begin')"
subtitle="選擇"
v-model="parameters.FlightTime"
:options="optionsFn"
/>
<div class="q-px-sm"></div> -->
<q-time format24h v-model="flightTime" mask="HH:mm"
@input="getTime(1)"/>
</div> </div>
</q-popup-proxy> </q-popup-proxy>
</q-input> </q-input>
</div> </div>
<div :class="filedGuestWidth" v-if="details.CarType!=1"> </div>
<q-input </div>
standout </template>
v-model="parameters.GetonAddress"
label="上車地點" <div class="text-subtitle1 text-weight-bolder q-my-md">
placeholder="" {{details.CarType==1?'接机':details.CarType==2?'送机':'包车'}}資料
:rules="[(val) => !!val || '請輸上車地點供司機參考']" </div>
ref="GetonAddress" <q-separator color="grey-2" class="q-mt-md" />
readonly> <div
<template v-slot:append> class="bg-grey-1 rounded-borders q-pa-md q-mt-md guest-item"
<!-- <q-icon name="iconfont iconaddress" size="20px" class="q-mr-sm" @click="getAddress(1)"/> --> >
</template> <div class="text-subtitle1 q-pb-md text-weight-bold"></div>
<q-popup-proxy :offset="[0, 10]" ref="qDateProxy5"> <div class="row q-col-gutter-md">
<q-input type="textarea" dense standout autofocus <div :class="filedGuestWidth">
v-model="parameters.GetonAddress" placeholder="請輸上車地點供司機參考" />
</q-popup-proxy>
</q-input>
</div>
<div :class="filedGuestWidth" v-if="details.CarType!=2">
<q-input <q-input
standout standout
v-model="parameters.GetoffAddress" v-model="!getBusTime?'':parameters.OrderDate"
label="下車地點" label="接駁日期"
:rules="[(val) => !!val || '請选接駁日期']"
ref="OrderDate"
>
<template v-slot:append>
<q-icon name="event" class="cursor-pointer"></q-icon>
</template>
<q-popup-proxy :offset="[0, 0]" ref="qDateProxy2">
<div class="row">
<q-time format24h v-model="getBusTime" mask="HH:mm"
@input="getTime(2)"/>
</div>
</q-popup-proxy>
</q-input>
</div>
<div :class="filedGuestWidth" v-if="details.CarType!=1">
<q-input
standout
v-model="parameters.GetonAddress"
label="上車地點"
placeholder="" placeholder=""
:rules="[(val) => !!val || '請輸下車地點供司機參考']" :rules="[(val) => !!val || '請輸上車地點供司機參考']"
ref="GetoffAddress" ref="GetonAddress"
readonly> readonly>
<template v-slot:append> <template v-slot:append>
<!-- <q-icon name="iconfont iconaddress" size="20px" class="q-mr-sm" @click="getAddress(2)"/> --> <!-- <q-icon name="iconfont iconaddress" size="20px" class="q-mr-sm" @click="getAddress(1)"/> -->
</template> </template>
<q-popup-proxy :offset="[0, 10]" ref="qDateProxy6"> <q-popup-proxy :offset="[0, 10]" ref="qDateProxy5">
<q-input type="textarea" dense standout autofocus <q-input type="textarea" dense standout autofocus
v-model="parameters.GetoffAddress" placeholder="請輸下車地點供司機參考" /> v-model="parameters.GetonAddress" placeholder="請輸上車地點供司機參考" />
</q-popup-proxy> </q-popup-proxy>
</q-input> </q-input>
</div>
</div> </div>
<div :class="filedGuestWidth" v-if="details.CarType!=2">
<q-input
standout
v-model="parameters.GetoffAddress"
label="下車地點"
placeholder=""
:rules="[(val) => !!val || '請輸下車地點供司機參考']"
ref="GetoffAddress"
readonly>
<template v-slot:append>
<!-- <q-icon name="iconfont iconaddress" size="20px" class="q-mr-sm" @click="getAddress(2)"/> -->
</template>
<q-popup-proxy :offset="[0, 10]" ref="qDateProxy6">
<q-input type="textarea" dense standout autofocus
v-model="parameters.GetoffAddress" placeholder="請輸下車地點供司機參考" />
</q-popup-proxy>
</q-input>
</div>
</div> </div>
<div class="text-subtitle1 text-weight-bolder q-my-md">乘客資料</div> </div>
<q-separator color="grey-2" class="q-mt-md" /> <div class="text-subtitle1 text-weight-bolder q-my-md">乘客資料</div>
<div <q-separator color="grey-2" class="q-mt-md" />
class="bg-grey-1 rounded-borders q-pa-md q-mt-md guest-item" <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="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.ManNum"
label="成人數(18-99岁)"
@input="getNum"
:rules="[(val) => !!val || '請輸成人數']"
ref="ManNum"
mask="#"
reverse-fill-mask
/>
</div>
<div :class="filedGuestWidth">
<q-input
standout
v-model="parameters.ChildNum"
label="兒童數(3-17岁)"
@input="getNum"
mask="#"
reverse-fill-mask
/>
</div>
<div :class="filedGuestWidth">
<q-input
standout
v-model="parameters.BabyNum"
label="嬰幼兒數(0-2岁)"
@input="getNum"
mask="#"
reverse-fill-mask
/>
</div>
</div>
<template v-if="details.CarType!=3">
<div class="text-subtitle1 q-py-md text-weight-bold">行李数量</div>
<div class="row q-col-gutter-md"> <div class="row q-col-gutter-md">
<div :class="filedGuestWidth"> <div :class="filedGuestWidth">
<q-input <q-input
standout standout
v-model="parameters.ManNum" v-model="parameters.HandLuggageNum"
label="成人數(18-99岁)" label="手提行李"
@input="getNum"
:rules="[(val) => !!val || '請輸成人數']"
ref="ManNum"
mask="#" mask="#"
reverse-fill-mask reverse-fill-mask
/> />
...@@ -360,605 +394,541 @@ ...@@ -360,605 +394,541 @@
<div :class="filedGuestWidth"> <div :class="filedGuestWidth">
<q-input <q-input
standout standout
v-model="parameters.ChildNum" v-model="parameters.RegisteredLuggageNum"
label="兒童數(3-17岁)" label="托运行李"
@input="getNum"
mask="#"
reverse-fill-mask
/>
</div>
<div :class="filedGuestWidth">
<q-input
standout
v-model="parameters.BabyNum"
label="嬰幼兒數(0-2岁)"
@input="getNum"
mask="#" mask="#"
reverse-fill-mask reverse-fill-mask
/> />
</div> </div>
</div> </div>
<template v-if="details.CarType!=3"> </template>
<div class="text-subtitle1 q-py-md text-weight-bold">行李数量</div> </div>
<div class="row q-col-gutter-md"> <div class="text-subtitle1 q-my-md text-weight-bold">特殊需求備註：</div>
<div :class="filedGuestWidth"> <q-input standout v-model="parameters.Remark" input-style="height:170px;" type="textarea" placeholder="此欄位僅限資料備註。不在商品規範內的個人需求，不保證提供" maxlength="200" counter />
<q-input </q-card>
standout </div>
v-model="parameters.HandLuggageNum" <div class="relative-position" v-if="details"
label="手提行李" :class="{
mask="#" 'q-ml-lg': !($q.screen.width < 1200 || $q.platform.is.mobile),
reverse-fill-mask 'q-mt-lg full-width': $q.screen.width < 1200 || $q.platform.is.mobile,
/> }"
</div> >
<div :class="filedGuestWidth"> <div
<q-input class="rounded-borders bg-white q-pa-md"
standout style="width: 300px"
v-model="parameters.RegisteredLuggageNum" :style="{
label="托运行李" width:
mask="#" $q.screen.width < 1200 || $q.platform.is.mobile
reverse-fill-mask ? 'unset'
/> : '300px',
</div> position:$q.platform.is.mobile?'unset':'sticky',
top:$q.platform.is.mobile?'unset':'50px',
</div>
</template>
</div>
<div class="text-subtitle1 q-my-md text-weight-bold">特殊需求備註：</div>
<q-input standout v-model="parameters.Remark" input-style="height:170px;" type="textarea" placeholder="此欄位僅限資料備註。不在商品規範內的個人需求，不保證提供" maxlength="200" counter />
</q-card>
</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 <div class="text-subtitle1 text-weight-bolder">付款明細</div>
class="rounded-borders bg-white q-pa-md" <div class="row q-mt-md">
style="width: 300px" <vue-core-video-players
:style="{ v-if="details.videoStr"
width: ref="video"
$q.screen.width < 1200 || $q.platform.is.mobile :src="details.videoStr"
? 'unset' :title="details.title"
: '300px', :muted="true"
position:$q.platform.is.mobile?'unset':'sticky', :autoplay="false"
top:$q.platform.is.mobile?'unset':'50px', @play="playHandler"
}" @pause="pauseHandler"
> @seeked="seekedChangeHandler"
<div class="text-subtitle1 text-weight-bolder">付款明細</div> @timeupdate="timeChangeHandler"
<div class="row q-mt-md"> logo="../statics/img/transparent_logo.png"
<vue-core-video-players :loop="false"
v-if="details.videoStr" id="trip_video"
ref="video" class="rounded-borders"
:src="details.videoStr" style="width: 80px"
:title="details.title" />
:muted="true" <q-img
:autoplay="false" v-else
@play="playHandler" :src="details?details.imgCover[0]:'https://image.kkday.com/v2/image/get/s1.kkday.com/product_138437/20230217083232_t5rcO/jpg'"
@pause="pauseHandler" class="rounded-borders"
@seeked="seekedChangeHandler" spinner-color="grey-3"
@timeupdate="timeChangeHandler" style="width: 80px"
logo="../statics/img/transparent_logo.png" />
:loop="false" <div class="q-ml-md col">
id="trip_video" <div class="text-subtitle1 ellipsis">
class="rounded-borders" {{details.Name}}
style="width: 80px"
/>
<q-img
v-else
:src="details?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"
style="width: 80px"
/>
<div class="q-ml-md col">
<div class="text-subtitle1 ellipsis">
{{details.Name}}
</div>
<div class="text-caption text-grey-6 ellipsis q-mt-sm">
{{details.Description}}
</div>
</div> </div>
</div> <div class="text-caption text-grey-6 ellipsis q-mt-sm">
<div class="q-mt-md text-grey-6"> {{details.Description}}
<div class="row q-pb-xs no-wrap" v-if="AirportObj&&AirportObj.Name">
<div style="width: 80px">{{details.CarType==1?'接':'送'}}機機場：</div>
<div class="q-ml-md ellipsis-2-lines">{{AirportObj.Name}}</div>
</div>
<div class="row q-pb-xs no-wrap" v-if="parameters.GetonAddress">
<div style="width: 80px">上車點：</div>
<div class="q-ml-md ellipsis-2-lines">{{parameters.GetonAddress}}</div>
</div>
<div class="row q-pb-xs no-wrap" v-if="parameters.GetoffAddress">
<div style="width: 80px">下車點：</div>
<div class="q-ml-md ellipsis-2-lines">{{parameters.GetoffAddress}}</div>
</div>
<div class="row">
<div style="width: 80px">
<!-- 出發日期： -->
接駁日期：</div>
<div class="q-ml-md">
{{parameters.OrderDate}}
</div>
</div> </div>
</div> </div>
<q-separator color="grey-2" class="q-my-md"/> </div>
<div class="text-grey-9"> <div class="q-mt-md text-grey-6">
<div class="row q-mb-sm" v-if="chosenObj.Count>0&&CarObj"> <div class="row q-pb-xs no-wrap" v-if="AirportObj&&AirportObj.Name">
<div class="col">{{CarObj.CarName}} x {{ chosenObj.Count }}</div> <div style="width: 80px">{{details.CarType==1?'接':'送'}}機機場：</div>
<div>{{details.CurrencyCode}} {{ moneyFormat(OrderDate.originalB2CPrice,2) }}</div> <div class="q-ml-md ellipsis-2-lines">{{AirportObj.Name}}</div>
</div> </div>
<!-- <hr style="border:none;border-top:1px dashed #EEE !important;" class="bg-transparent q-mb-sm" /> <div class="row q-pb-xs no-wrap" v-if="parameters.GetonAddress">
<div class="row q-mb-sm items-center" v-if="(chosenObj.Count)>0"> <div style="width: 80px">上車點：</div>
<div class="col">總金額</div> <div class="q-ml-md ellipsis-2-lines">{{parameters.GetonAddress}}</div>
<div class="text-subtitle2 text-weight-bolder text-primary">{{details.CurrencyCode}} {{ moneyFormat(OrderDate.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="chosenObj.Count>0">
<div class="col">支付金額</div>
<div class="text-h6 text-weight-bolder text-primary product-price">{{details.CurrencyCode}} {{ moneyFormat(OrderDate.sumPrice,2) }}</div>
</div>
</div> </div>
<div class="text-right q-mt-md" v-if="step!=3"> <div class="row q-pb-xs no-wrap" v-if="parameters.GetoffAddress">
<q-btn v-if="step!=3" unelevated color="primary" <div style="width: 80px">下車點：</div>
:loading="loading" :label="step!=3?'立即支付':'已支付'" @click="submit()" <div class="q-ml-md ellipsis-2-lines">{{parameters.GetoffAddress}}</div>
:disable="step!=3&&loading"/> </div>
<q-btn v-else unelevated color="primary" label=""/> <div class="row">
<div style="width: 80px">
<!-- 出發日期： -->
接駁日期：</div>
<div class="q-ml-md">
{{parameters.OrderDate}}
<!-- {{calculationAmount.startDate}} -->
</div>
</div> </div>
</div> </div>
</div> <q-separator color="grey-2" class="q-my-md"/>
</div> <div class="text-grey-9">
<q-dialog v-model="isShowDialog"> <div class="row q-mb-sm" v-if="chosenObj.Count>0">
<q-card class="q-pa-lg" :style="{'width':$q.platform.is.desktop?'100%':'500px'}"> <div class="col">{{CarObj.CarName}} x {{ chosenObj.Count }}</div>
<div class="text-h6Detail"> <div>{{details.CurrencyCode}} {{ moneyFormat(sumPrice,2) }}</div>
<span>乘客{{onoffbus==1?'上':'下'}}車範圍</span> </div>
<i class="iconfont iconbaseline-close-px" @click="isShowDialog=false"></i> <!-- <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="(chosenObj.Count)>0">
<div class="col">總金額</div>
<div class="text-subtitle2 text-weight-bolder text-primary">{{details.CurrencyCode}} {{ 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="chosenObj.Count>0">
<div class="col">支付金額</div>
<div class="text-h6 text-weight-bolder text-primary product-price">{{details.CurrencyCode}} {{ moneyFormat(sumPrice,2) }}</div>
</div>
</div> </div>
<q-separator /> <div class="text-right q-mt-md" v-if="step!=3">
<div style="max-height: 600px;padding:20px 0" class="scroll"> <q-btn v-if="step!=3" unelevated color="primary"
<componentsMap :AddressObj="onCarObj"/> :loading="loading" :label="step!=3?'立即支付':'已支付'" @click="submit()"
:disable="step!=3&&loading"/>
<q-btn v-else unelevated color="primary" label=""/>
</div> </div>
</q-card>
</q-dialog> </div>
<div v-if="!orderKey || orderKey == ''" class="text-center q-my-xl">
<none-data
iconType="order"
title="沒有找到您的訂單信息哦"
subtitle="趕緊去挑選心儀的旅遊產品吧,三秒後自動跳轉到首頁"
></none-data>
</div> </div>
<auth></auth>
</div> </div>
</template> <q-dialog v-model="isShowDialog">
<q-card class="q-pa-lg" :style="{'width':$q.platform.is.desktop?'100%':'500px'}">
<script> <div class="text-h6Detail">
import NoneData from "src/components/common/noneData.vue"; <span>乘客{{onoffbus==1?'上':'下'}}車範圍</span>
import auth from "src/components/common/auth.vue"; <i class="iconfont iconbaseline-close-px" @click="isShowDialog=false"></i>
import { date } from 'quasar' </div>
import { json } from "body-parser"; <q-separator />
import coupon from '../../components/common/coupon.vue' <div style="max-height: 600px;padding:20px 0" class="scroll">
import componentsMap from "../../components/car/Map.vue"; <componentsMap :AddressObj="onCarObj"/>
export default { </div>
components:{ </q-card>
coupon, </q-dialog>
componentsMap, <div v-if="!orderKey || orderKey == ''" class="text-center q-my-xl">
NoneData, <none-data
auth iconType="order"
}, title="沒有找到您的訂單信息哦"
data() { subtitle="趕緊去挑選心儀的旅遊產品吧,三秒後自動跳轉到首頁"
return { ></none-data>
order: null, </div>
orderKey: "", <auth></auth>
isRangeClick: true, </div>
isShowDialog: false, </template>
AddressObj: null,
onCarObj: null,//上车范围 <script>
unCarObj: null,//下车范围 import NoneData from "src/components/common/noneData.vue";
onCarId: null,//上车范围 import auth from "src/components/common/auth.vue";
unCarId: null,//下车范围 import { date } from 'quasar'
CarObj: null,//车型 import { json } from "body-parser";
AirportObj: null,//机场 import coupon from '../../components/common/coupon.vue'
CarId: null,//车型 import componentsMap from "../../components/car/Map.vue";
AirportId: null,//机场 export default {
startDate: null, components:{
calculationNum: null,//数量 coupon,
sumPrice: null,//总价 componentsMap,
details: null,//产品详情 NoneData,
options: { auth
currentPage: 0, },
speed: 300, data() {
itemAnimation: true, return {
centeredSlides: true, orderKey: "",
thresholdDistance: 100, isRangeClick: true,
thresholdTime: 300, isShowDialog: false,
loopedSlides: 2, AddressObj: null,
slidesToScroll: 1, onCarObj: null,//上车范围
loop: true, unCarObj: null,//下车范围
}, CarObj: null,//车型
OrderDate: null,//接收产品相关信息 AirportObj: null,//机场
step: 1, calculationAmount: null,//日期
userInfo: { calculationNum: null,//数量
lastName: "", sumPrice: null,//总价
firstName: "", details: null,//产品详情
country: 0, options: {
phone: "", currentPage: 0,
areaCode: "", speed: 300,
mail: "", itemAnimation: true,
}, centeredSlides: true,
chosenObj: {}, thresholdDistance: 100,
isUpdateUserInfo: false, thresholdTime: 300,
countrys: [], loopedSlides: 2,
areaCodes: [], slidesToScroll: 1,
loading: false, loop: true,
parameters: {
OrderId: 0,
OrderType: 0,
OrderDate:'',//预定日期
Unit_Price: '',//单价
Num: '',//数量
Money: 0.0,
Sex: 1,//1男2女
SurName: '',//姓
Name: '',//名
Remark: '',
AirportId: '',
AirportTerminal: '',//航厦
AirLine: '',//航空公司名称
FlightNumber: '',//航班号
FlightTime: '',//航班时间
GetonAddress: '',//上车点
GetoffAddress: '',//下车点
ManNum: null,//成人数
ChildNum: null,//儿童数
BabyNum: null,//婴儿数
HandLuggageNum: null,//手提行李数量
RegisteredLuggageNum: null,//托运行李数量
ContactWay: '',//联络方式 WeChat
Mobile:'',//电话
ProductId: '',
CarId: '',//产品类型ID
pType: 1,//类型 1来源B2C
},
flightTime: null,//航班起飞抵达时间
getBusTime: null,//预约车时间
TotalPeople: 0,//总人数
onoffbus: 1,//1 上车 2下车
ErpOrderId: 0,//erp订单Id
};
},
computed: {
filedWidth() {
return {
"col-12": this.$q.screen.width < 1200,
"col-6": this.$q.screen.width >= 1200,
};
}, },
filedGuestWidth() { OrderDate: null,//接收产品相关信息
return { step: 1,
"col-12": this.$q.screen.width < 1200, userInfo: {
"col-4": this.$q.screen.width >= 1200, lastName: "",
}; firstName: "",
country: 0,
phone: "",
areaCode: "",
mail: "",
}, },
chosenObj: {},
isUpdateUserInfo: false,
countrys: [],
areaCodes: [],
loading: false,
parameters: {
OrderId: 0,
OrderType: 0,
OrderDate:'',//预定日期
Unit_Price: '',//单价
Num: '',//数量
Money: 0.0,
Sex: 1,//1男2女
SurName: '',//姓
Name: '',//名
Remark: '',
AirportId: '',
AirportTerminal: '',//航厦
AirLine: '',//航空公司名称
FlightNumber: '',//航班号
FlightTime: '',//航班时间
GetonAddress: '',//上车点
GetoffAddress: '',//下车点
ManNum: null,//成人数
ChildNum: null,//儿童数
BabyNum: null,//婴儿数
HandLuggageNum: null,//手提行李数量
RegisteredLuggageNum: null,//托运行李数量
ContactWay: '',//联络方式 WeChat
Mobile:'',//电话
ProductId: '',
CarId: '',//产品类型ID
pType: 1,//类型 1来源B2C
},
flightTime: null,//航班起飞抵达时间
getBusTime: null,//预约车时间
TotalPeople: 0,//总人数
onoffbus: 1,//1 上车 2下车
ErpOrderId: 0,//erp订单Id
};
},
computed: {
filedWidth() {
return {
"col-12": this.$q.screen.width < 1200,
"col-6": this.$q.screen.width >= 1200,
};
}, },
created() {}, filedGuestWidth() {
mounted() { return {
if(this.checkParamsHandler()){ "col-12": this.$q.screen.width < 1200,
this.getCarData() "col-4": this.$q.screen.width >= 1200,
} };
this.initCountry();
this.initGuestHandler();
}, },
methods: { },
// 获取商品详情 created() {},
getCarData() { mounted() {
this.$q.loading.show(); this.checkParamsHandler()
this.apipost( this.initCountry();
"b2c_get_GetCarSingleProductDetail", this.initGuestHandler();
{ ProductId: this.parameters.ProductId }, },
(r) => { methods: {
this.$q.loading.hide(); checkParamsHandler() {
if (r.data.resultCode == 1) { try {
this.details = r.data.data; if (this.$route.params && this.$route.params.id) {
this.CarObj = this.details.CarTypeList.find((x) => this.OrderDate.CarId == x.Id); let key = this.$route.params.id;
if(this.details.CarType!=3){ let pickuporderCars = localStorage.getItem("pickuporderCars");
this.AirportObj = this.details.AirportList.find((x) => this.OrderDate.AirportId == x.Id); let OrderDate = pickuporderCars ? JSON.parse(pickuporderCars) : null;
this.parameters.AirportId = this.OrderDate.AirportId if (OrderDate) {
this.parameters.FlightTime = this.OrderDate.startDate this.CarObj = OrderDate.CarObj,//车型
} this.AirportObj = OrderDate.AirportObj,//机场
this.parameters.OrderType = this.details.CarType this.calculationAmount = OrderDate.calculationAmount,//日期
} else { this.chosenObj = OrderDate.calculationNum,//数量
this.$q.notify({ this.sumPrice = OrderDate.sumPrice,//总金额
type: "negative", this.details = OrderDate.details//产品详情
message: r.data.message, this.onCarObj = OrderDate.onCarObj//上车范围
position: "top", this.unCarObj = OrderDate.unCarObj//下车范围
timeout: 2000, // 以毫秒为单位; 0意味着没有超时 this.parameters.ProductId = this.details.Id
}); this.parameters.OrderDate = this.calculationAmount.startDate
if(this.details.CarType!=3){
this.parameters.AirportId = this.AirportObj.Id
this.parameters.FlightTime = this.calculationAmount.startDate
} }
this.parameters.CarId = this.CarObj.Id
}, this.parameters.OrderType = this.details.CarType
null this.parameters.Unit_Price = this.calculationAmount.originalB2CPrice
); this.parameters.Num = this.chosenObj.Count
}, this.parameters.Money = this.sumPrice
checkParamsHandler() { if (OrderDate) {
try { this.orderKey = key;
if (this.$route.params && this.$route.params.id) {
let key = this.$route.params.id;
console.log(key,'99999')
let pickuporderCars = localStorage.getItem("pickuporderCars");
pickuporderCars = pickuporderCars ? JSON.parse(pickuporderCars) : [];
if (pickuporderCars.length > 0) {
this.order = pickuporderCars.find((x) => x.key == key);
if (this.order) {
this.orderKey = key;
this.chosenObj = this.order.order.orderInfo;
this.OrderDate = this.order.order
this.parameters.ProductId = this.order.order.Id
this.parameters.OrderDate = this.OrderDate.startDate
this.parameters.Unit_Price = OrderDate.originalB2CPrice
this.parameters.Num = this.OrderDate.chosenObj.Count
this.parameters.Money = this.OrderDate.sumPrice
this.onCarObj = this.OrderDate.onCarObj//上车范围
this.unCarObj = this.OrderDate.unCarObj//下车范围
}
} }
} }
} catch (error) {
console.log(error);
} }
if (this.orderKey == "") { } catch (error) {
setTimeout(() => { console.log(error);
}
if (this.orderKey == "") {
setTimeout(() => {
}, 3000); }, 3000);
} }
return this.orderKey != ""; return this.orderKey != "";
}, },
submit(){ submit(){
let flag = false let flag = false
this.$refs.mail.validate() this.$refs.mail.validate()
this.$refs.SurName.validate() this.$refs.SurName.validate()
this.$refs.Name.validate() this.$refs.Name.validate()
this.$refs.ContactWay.validate() this.$refs.ContactWay.validate()
this.$refs.Mobile.validate() this.$refs.Mobile.validate()
this.$refs.OrderDate.validate() this.$refs.OrderDate.validate()
this.$refs.ManNum.validate() this.$refs.ManNum.validate()
if(this.details.CarType!=3){ if(this.details.CarType!=3){
this.$refs.AirportTerminal.validate() this.$refs.AirportTerminal.validate()
this.$refs.AirLine.validate() this.$refs.AirLine.validate()
this.$refs.FlightNumber.validate() this.$refs.FlightNumber.validate()
this.$refs.FlightTime.validate() this.$refs.FlightTime.validate()
if(this.details.CarType!=1){ if(this.details.CarType!=1){
this.$refs.GetonAddress.validate()
flag = !this.$refs.SurName.hasError&& !this.$refs.Name.hasError&& !this.$refs.ContactWay.hasError
&& !this.$refs.Mobile.hasError&& !this.$refs.OrderDate.hasError&& !this.$refs.ManNum.hasError
&& !this.$refs.AirportTerminal.hasError&& !this.$refs.AirLine.hasError&& !this.$refs.FlightNumber.hasError
&& !this.$refs.FlightTime.hasError&& !this.$refs.GetonAddress.hasError&& !this.$refs.mail.hasError
}else{
this.$refs.GetoffAddress.validate()
flag = !this.$refs.SurName.hasError&& !this.$refs.Name.hasError&& !this.$refs.ContactWay.hasError
&& !this.$refs.Mobile.hasError&& !this.$refs.OrderDate.hasError&& !this.$refs.ManNum.hasError
&& !this.$refs.AirportTerminal.hasError&& !this.$refs.AirLine.hasError&& !this.$refs.FlightNumber.hasError
&& !this.$refs.FlightTime.hasError&& !this.$refs.GetoffAddress.hasError&& !this.$refs.mail.hasError
}
}else{
this.$refs.GetonAddress.validate() this.$refs.GetonAddress.validate()
flag = !this.$refs.SurName.hasError&& !this.$refs.Name.hasError&& !this.$refs.ContactWay.hasError
&& !this.$refs.Mobile.hasError&& !this.$refs.OrderDate.hasError&& !this.$refs.ManNum.hasError
&& !this.$refs.AirportTerminal.hasError&& !this.$refs.AirLine.hasError&& !this.$refs.FlightNumber.hasError
&& !this.$refs.FlightTime.hasError&& !this.$refs.GetonAddress.hasError&& !this.$refs.mail.hasError
}else{
this.$refs.GetoffAddress.validate() this.$refs.GetoffAddress.validate()
flag = !this.$refs.SurName.hasError&& !this.$refs.Name.hasError&& !this.$refs.ContactWay.hasError flag = !this.$refs.SurName.hasError&& !this.$refs.Name.hasError&& !this.$refs.ContactWay.hasError
&& !this.$refs.Mobile.hasError&& !this.$refs.OrderDate.hasError&& !this.$refs.ManNum.hasError && !this.$refs.Mobile.hasError&& !this.$refs.OrderDate.hasError&& !this.$refs.ManNum.hasError
&& !this.$refs.GetonAddress.hasError&& !this.$refs.GetoffAddress.hasError&& !this.$refs.mail.hasError && !this.$refs.AirportTerminal.hasError&& !this.$refs.AirLine.hasError&& !this.$refs.FlightNumber.hasError
&& !this.$refs.FlightTime.hasError&& !this.$refs.GetoffAddress.hasError&& !this.$refs.mail.hasError
} }
if(!flag) return this.goScrollToForm('baseUserInfoTitle') }else{
console.log(this.parameters,'------') this.$refs.GetonAddress.validate()
this.SetCarOrder() this.$refs.GetoffAddress.validate()
}, flag = !this.$refs.SurName.hasError&& !this.$refs.Name.hasError&& !this.$refs.ContactWay.hasError
goScrollToForm(formName){ && !this.$refs.Mobile.hasError&& !this.$refs.OrderDate.hasError&& !this.$refs.ManNum.hasError
let temp=this.$refs[formName] && !this.$refs.GetonAddress.hasError&& !this.$refs.GetoffAddress.hasError&& !this.$refs.mail.hasError
let formObj = temp instanceof Array ? temp[0] : temp }
window.scrollTo(0,formObj.offsetTop) if(!flag) return this.goScrollToForm('baseUserInfoTitle')
}, this.SetCarOrder()
SetCarOrder(){ },
this.loading = true goScrollToForm(formName){
this.apipost( let temp=this.$refs[formName]
"CarSingle_post_SetTYCarOrder", let formObj = temp instanceof Array ? temp[0] : temp
this.parameters, window.scrollTo(0,formObj.offsetTop)
(r) => { },
// this.$refs.myform.resetValidation() SetCarOrder(){
if (r.data.resultCode == 1) { this.loading = true
this.step = 2 this.apipost(
let ErpOrderId = r.data.data.Id "CarSingle_post_SetTYCarOrder",
this.AddOrderInfo(ErpOrderId) this.parameters,
}else{ (r) => {
this.$q.notify({ // this.$refs.myform.resetValidation()
type: "negative", if (r.data.resultCode == 1) {
message: r.data.message, this.step = 2
position: "top", let ErpOrderId = r.data.data.Id
timeout: 2000, this.AddOrderInfo(ErpOrderId)
}); }else{
this.loading = false this.$q.notify({
} type: "negative",
}) message: r.data.message,
}, position: "top",
AddOrderInfo(ErpOrderId){ timeout: 2000,
let GoodsType = null });
//13接机 14送机 12包车
if(this.parameters.OrderType==1){
GoodsType = 13
}else if(this.parameters.OrderType==2){
GoodsType = 14
}else if(this.parameters.OrderType==3){
GoodsType = 12
}
this.apipost(
"AddOrderInfo_post",
{
SurName: this.parameters.SurName,
Name: this.parameters.Name,
ContactNumber: this.parameters.Mobile,// 联系电话
Mailbox: this.userInfo.mail,//邮箱
GoodsId: this.parameters.ProductId,//商品id
GoodsName: this.details.Name,//商品名称
GoodsPic: this.details.ImageList[0],//商品图片
GoodsType: GoodsType,//商品类型（见枚举） 12包车 13 接机 14送机
OrderMake: this.parameters.OrderDate,//订单摘要（例如出行时间）
TotalPrice: this.parameters.Money,//总价格
PreferentialPrice: 0,// 优惠总金额
ErpOrderId: ErpOrderId,//erp订单id
Country: this.userInfo.country,//国家id
PlatformTax: 0,//平台税金默认0
Income: 0,//已收默认0
Refund: 0,//退款金额默认0
OrderSource: this.parameters.pType
},
(r) => {
if (r.data.resultCode == 1) {
this.step = 3
this.$q.notify({
color: "green-4",
textColor: "white",
icon: "cloud_done",
message: "訂單提交成功",
position:'center',
});
}else{
this.$q.notify({
type: "negative",
message: r.data.message,
position: "top",
timeout: 2000,
});
}
this.loading = false this.loading = false
}) }
}, })
// 航班起飞抵达时间 },
getTime(type){ AddOrderInfo(ErpOrderId){
// 1航班时间 2预约时间 let GoodsType = null
this.onoffbus = type //13接机 14送机 12包车
if(type==1){ if(this.parameters.OrderType==1){
this.parameters.FlightTime = this.OrderDate.startDate+' '+this.flightTime GoodsType = 13
this.$refs.qDateProxy1.hide() }else if(this.parameters.OrderType==2){
}else if(type==2){ GoodsType = 14
this.parameters.OrderDate = this.OrderDate.startDate+' '+this.getBusTime }else if(this.parameters.OrderType==3){
this.$refs.qDateProxy2.hide() GoodsType = 12
} }
this.apipost(
}, "AddOrderInfo_post",
optionsFn(cd) { {
return ( SurName: this.parameters.SurName,
cd >= Name: this.parameters.Name,
date.formatDate(date.addToDate(new Date(), { days: 0 }), "YYYY/MM/DD") ContactNumber: this.parameters.Mobile,// 联系电话
); Mailbox: this.userInfo.mail,//邮箱
}, GoodsId: this.parameters.ProductId,//商品id
// 地图上选址 GoodsName: this.details.Name,//商品名称
getAddress(type){ GoodsPic: this.details.imgCover[0],//商品图片
if(type==1){ GoodsType: GoodsType,//商品类型（见枚举）
this.AddressObj = this.onCarObj OrderMake: this.parameters.OrderDate,//订单摘要（例如出行时间）
}else{ TotalPrice: this.parameters.Money,//总价格
this.AddressObj = this.unCarObj PreferentialPrice: 0,// 优惠总金额
} ErpOrderId: ErpOrderId,//erp订单id
this.isShowDialog = true Country: this.userInfo.country,//国家id
}, PlatformTax: 0,//平台税金默认0
// 计算人数 Income: 0,//已收默认0
getNum(){ Refund: 0,//退款金额默认0
this.TotalPeople = this.parameters.ManNum+this.parameters.ChildNum+this.parameters.BabyNum OrderSource: this.parameters.pType
}, },
// 音频 (r) => {
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() {
},
// 初始化国家
initCountry() {
this.apipost("GetCountryInfo_post", {}, (r) => {
if (r.data.resultCode == 1) { if (r.data.resultCode == 1) {
this.countrys = r.data.data.countList; this.step = 3
this.userInfo.country = this.countrys[0].ID; this.$q.notify({
color: "green-4",
this.areaCodes = r.data.data.phoneCountList; textColor: "white",
this.changeCountry(this.userInfo.country); icon: "cloud_done",
this.areaCodes.forEach((x) => { message: "訂單提交成功",
let temp = this.countrys.find((y) => y.ID == x.ID); position:'center',
x.EnName = `${temp.EnName}(${x.PhoneCode})`; });
}else{
this.$q.notify({
type: "negative",
message: r.data.message,
position: "top",
timeout: 2000,
}); });
} }
}); this.loading = false
}, })
changeCountry(id) { },
this.userInfo.areaCode = this.areaCodes.find((x) => x.ID == id).PhoneCode; // 航班起飞抵达时间
}, getTime(type){
// 1航班时间 2预约时间
this.onoffbus = type
if(type==1){
this.parameters.FlightTime = this.calculationAmount.startDate+' '+this.flightTime
this.$refs.qDateProxy1.hide()
}else if(type==2){
this.parameters.OrderDate = this.calculationAmount.startDate+' '+this.getBusTime
this.$refs.qDateProxy2.hide()
}
},
optionsFn(cd) {
return (
cd >=
date.formatDate(date.addToDate(new Date(), { days: 0 }), "YYYY/MM/DD")
);
}, },
}; // 地图上选址
</script> getAddress(type){
if(type==1){
this.AddressObj = this.onCarObj
}else{
this.AddressObj = this.unCarObj
}
this.isShowDialog = true
},
// 计算人数
getNum(){
this.TotalPeople = this.parameters.ManNum+this.parameters.ChildNum+this.parameters.BabyNum
},
// 音频
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() {
},
// 初始化国家
initCountry() {
this.apipost("GetCountryInfo_post", {}, (r) => {
if (r.data.resultCode == 1) {
this.countrys = r.data.data.countList;
this.userInfo.country = this.countrys[0].ID;
<style> this.areaCodes = r.data.data.phoneCountList;
.order-preview .q-stepper__content { this.changeCountry(this.userInfo.country);
display: none !important; this.areaCodes.forEach((x) => {
} let temp = this.countrys.find((y) => y.ID == x.ID);
.order-preview .q-toggle__track { x.EnName = `${temp.EnName}(${x.PhoneCode})`;
height: 0.7em; });
border-radius: 0.35em; }
opacity: 0.38; });
width: 50px; },
} changeCountry(id) {
.order-preview .q-toggle__thumb { this.userInfo.areaCode = this.areaCodes.find((x) => x.ID == id).PhoneCode;
top: 0.42em; },
left: 0.45em; },
width: 0.5em; };
height: 0.5em; </script>
transition: left 0.22s ease-in-out;
user-select: none; <style>
z-index: 0; .order-preview .q-stepper__content {
} display: none !important;
.order-preview .q-toggle__inner--truthy .q-toggle__thumb { }
left: 0.94em; .order-preview .q-toggle__track {
} height: 0.7em;
.order-preview .q-toggle__inner { border-radius: 0.35em;
width: 1.9em; opacity: 0.38;
} width: 50px;
.order-preview .q-toggle__label { }
margin-top: 12px; .order-preview .q-toggle__thumb {
} top: 0.42em;
.guest-item:hover{ left: 0.45em;
background: rgba(241,65,108,.04) !important; width: 0.5em;
} height: 0.5em;
.text-h6Detail { transition: left 0.22s ease-in-out;
text-align: center; user-select: none;
font-size: 18px; z-index: 0;
color: #333; }
font-weight: 700; .order-preview .q-toggle__inner--truthy .q-toggle__thumb {
position: relative; left: 0.94em;
width:100%; }
height:50px; .order-preview .q-toggle__inner {
} width: 1.9em;
.text-h6Detail i { }
position: absolute; .order-preview .q-toggle__label {
right:20px; margin-top: 12px;
top:10px; }
cursor: pointer; .guest-item:hover{
font-size:23px; background: rgba(241,65,108,.04) !important;
} }
</style> .text-h6Detail {
text-align: center;
\ No newline at end of file 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