Skip to content

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

no message

parent 17b4be7e
Hide whitespace changes
Inline Side-by-side
Showing with 688 additions and 1 deletion
src/components/car/orderPreview.vue
View file @ ce93232f
......@@ -41,7 +41,7 @@
<div class="col" :class="{'column':$q.platform.is.mobile}">
<div v-if="selectedObj">
<span class="text-subtitle2 text-weight-bold">{{selectedObj.CarName}}</span>
<span class="text-grey-6 f12 q-ml-sm"></span>({{ selectedObj.PeopleNum }}人)</span>
<span class="text-grey-6 f12 q-ml-sm"></span>({{ selectedObj.PeopleNum }}人+{{ selectedObj.PeopleNum }}行李)</span>
</div>
<div v-if="$q.platform.is.mobile">
<span class="text-grey-7 product-price" style="font-size: 13px">
......
src/pages/Pickuporder/orderForm.vue 0 → 100644
View file @ ce93232f
<template>
<div class="content-page order-preview">
<q-stepper
v-model="step"
ref="stepper"
color="primary"
inactive-color="grey-5 "
class="bg-transparent"
flat
animated
>
<q-step
:name="1"
title="確認訂單"
icon="settings"
:done="step > 1"
></q-step>
<q-step
:name="2"
title="付款"
icon="iconfont iconPayment-1"
:done="step > 2"
></q-step>
<q-step
:name="3"
title="訂購完成"
icon="iconfont iconicon_finish_R"
:done="step == 3"
></q-step>
</q-stepper>
<div
class="row q-pa-md"
style="min-width: 375px; margin: 0 auto"
:class="{
row: $q.screen.width >= 1200 && $q.platform.is.desktop,
column: $q.screen.width < 1200 || $q.platform.is.mobile,
}"
>
<div class="col">
<q-card flat class="q-pa-md">
<div class="text-subtitle1 text-weight-bolder">訂購人資訊</div>
<q-separator color="grey-2" class="q-my-md" />
<div class="row q-col-gutter-md">
<div :class="filedWidth">
<q-input
standout
v-model="userInfo.lastName"
label="名字"
:rules="[(val) => !!val || '請輸入名字']"
/>
</div>
<div :class="filedWidth">
<q-input
standout
v-model="userInfo.firstName"
label="姓氏"
:rules="[(val) => !!val || '請輸入姓氏']"
/>
</div>
<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.firstName"
label="電話"
:rules="[(val) => !!val || '請輸入行動電話']"
>
<template v-slot:prepend>
<div class="text-subtitle2">+{{ userInfo.areaCode }}</div>
</template>
</q-input>
</div>
<div :class="filedWidth">
<q-input
standout
v-model="userInfo.mail"
label="郵箱地址"
:rules="[(val) => !!val || '請輸入郵箱地址']"
/>
</div>
<div :class="filedWidth">
<q-toggle v-model="isUpdateUserInfo" label="同步更新會員資料" />
</div>
</div>
</q-card>
<q-card flat class="q-pa-md q-mt-lg">
<div class="text-subtitle1 text-weight-bolder q-mb-md">旅客資料</div>
<div class="row">
<q-img
src="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">
【夏季限定】加拿大三日游 | 班夫&贾斯珀国家公园&哥伦比亚冰原 |
卡加利出发卡加利出发卡加利出发
</div>
<div class="text-caption text-grey-6 ellipsis q-mt-sm">
加拿大三日游 | 班夫&贾斯珀国家公园&哥伦比亚冰原
</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>2023-02-27</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"
>豪华车 x {{ chosenObj.Count }} (4人+{{chosenObj.Count}}行李)</span
>
<span class="q-mr-sm"
></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="filedGuestWidth">
<q-input
standout
v-model="parameters.SurName"
label="本國姓"
placeholder="例：張"
:rules="[(val) => !!val || '請輸本國姓']"
/>
</div>
<div :class="filedGuestWidth">
<q-input
standout
v-model="parameters.Name"
label="本國名"
placeholder="例：三"
:rules="[(val) => !!val || '請輸本國名']"
/>
</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="guests.Sex" dense :val="2" label="女" />
</div>
</div>
<div :class="filedGuestWidth">
<q-input
standout
v-model="parameters.PassFirstName"
label="護照英文姓"
placeholder="例：ZHANG"
:rules="[(val) => !!val || '請輸護照英文姓']"
/>
</div>
<div :class="filedGuestWidth">
<q-input
standout
v-model="parameters.PassLastName"
label="護照英文名"
placeholder="例：SAN"
:rules="[(val) => !!val || '請輸護照英文名']"
/>
</div>
<div :class="filedGuestWidth">
<q-input
standout
v-model="parameters.Passport"
label="護照號"
:rules="[(val) => !!val || '請輸護照號']"
/>
</div>
<div :class="filedGuestWidth">
<q-input
class="q-pb-md"
standout
v-model="parameters.PassValidate"
label="護照有效期"
readonly
>
<template v-slot:append>
<q-icon name="event" class="cursor-pointer"></q-icon>
</template>
<q-popup-proxy :offset="[0, 0]" ref="qDateProxy7">
<q-date
mask="YYYY-MM-DD"
:title="$t('search_date_begin')"
subtitle="選擇"
v-model="parameters.PassValidate"
@input="() => $refs.qDateProxy7.hide()"
/>
</q-popup-proxy>
</q-input>
</div>
</div>
</div>
<div class="text-subtitle1 text-weight-bolder q-my-md">抵达 班机資料</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 || '請輸航廈']"
/>
</div>
<div :class="filedGuestWidth">
<q-input
standout
v-model="parameters.AirLine"
label="航空公司"
placeholder=""
:rules="[(val) => !!val || '請輸航空公司名稱']"
/>
</div>
<div :class="filedGuestWidth">
<q-input
standout
v-model="parameters.FlightNumber"
label="航班編號"
placeholder="例：CA123"
:rules="[(val) => !!val || '請輸航班編號']"
/>
</div>
<div :class="filedGuestWidth">
<q-input
class="q-pb-md"
standout
v-model="parameters.FlightTime"
label="航班抵达时间"
readonly
>
<template v-slot:append>
<q-icon name="event" class="cursor-pointer"></q-icon>
</template>
<q-popup-proxy :offset="[0, 0]" ref="qDateProxy7">
<div class="row">
<q-date
mask="YYYY-MM-DD HH:mm"
:title="$t('search_date_begin')"
subtitle="選擇"
v-model="parameters.FlightTime"
/>
<div class="q-px-sm"></div>
<q-time v-model="flightTime" mask="YYYY-MM-DD HH:mm"
@input="() => $refs.qDateProxy7.hide()"/>
</div>
</q-popup-proxy>
</q-input>
</div>
</div>
</div>
<div class="text-subtitle1 text-weight-bolder q-my-md">接送資料</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.OrderDate"
label="接駁日期"
readonly
disable
>
<template v-slot:append>
<q-icon name="event" class="cursor-pointer"></q-icon>
</template>
</q-input>
</div>
<div :class="filedGuestWidth">
<q-input
standout
v-model="parameters.GetonAddress"
label="上車地點"
placeholder=""
:rules="[(val) => !!val || '請輸上車地點和地址供司機參考']">
<template v-slot:append>
<q-icon name="iconfont iconaddress" size="20px" class="q-mr-sm" />
</template>
</q-input>
</div>
<div :class="filedGuestWidth">
<q-input
standout
v-model="parameters.GetoffAddress"
label="下車地點"
placeholder=""
:rules="[(val) => !!val || '請輸下車地點和地址供司機參考']">
<template v-slot:append>
<q-icon name="iconfont iconaddress" size="20px" class="q-mr-sm" />
</template>
</q-input>
</div>
</div>
</div>
<div class="text-subtitle1 text-weight-bolder q-my-md">乘客資料</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
type="Number"
standout
v-model="parameters.ManNum"
label="成人數(18-99岁)"
/>
</div>
<div :class="filedGuestWidth">
<q-input
type="Number"
standout
v-model="parameters.ChildNum"
label="兒童數(3-17岁)"
/>
</div>
<div :class="filedGuestWidth">
<q-input
type="Number"
standout
v-model="parameters.BabyNum"
label="嬰幼兒數(0-2岁)"
/>
</div>
</div>
<div class="text-subtitle1 q-py-md text-weight-bold">行李数量</div>
<div class="row q-col-gutter-md">
<div :class="filedGuestWidth">
<q-input
type="Number"
standout
v-model="parameters.HandLuggageNum"
label="手提行李"
/>
</div>
<div :class="filedGuestWidth">
<q-input
type="Number"
standout
v-model="parameters.RegisteredLuggageNum"
label="托运行李"
/>
</div>
</div>
</div>
<div class="text-subtitle1 text-weight-bolder q-my-md">旅遊期間聯絡方式</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.Name"
label="名字"
:rules="[(val) => !!val || '請輸入名字']"
/>
</div>
<div :class="filedGuestWidth">
<q-input
standout
v-model="parameters.SurName"
label="姓氏"
:rules="[(val) => !!val || '請輸入姓氏']"
/>
</div>
<div :class="filedGuestWidth">
<q-input
standout
v-model="parameters.Mobile"
label="電話"
:rules="[(val) => !!val || '請輸入行動電話']"
>
<template v-slot:prepend>
<div class="text-subtitle2">+{{ userInfo.areaCode }}</div>
</template>
</q-input>
</div>
</div>
</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>
<coupon></coupon>
</div>
<div class="relative-position"
:class="{
'q-ml-lg': !($q.screen.width < 1200 || $q.platform.is.mobile),
'q-mt-lg full-width': $q.screen.width < 1200 || $q.platform.is.mobile,
}"
>
<div
class="rounded-borders bg-white q-pa-md"
style="width: 300px"
:style="{
width:
$q.screen.width < 1200 || $q.platform.is.mobile
? 'unset'
: '300px',
position:$q.platform.is.mobile?'unset':'sticky',
top:$q.platform.is.mobile?'unset':'50px',
}"
>
<div class="text-subtitle1 text-weight-bolder">付款明細</div>
<div class="row q-mt-md">
<q-img
src="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">
【夏季限定】加拿大三日游 | 班夫&贾斯珀国家公园&哥伦比亚冰原 |
卡加利出发卡加利出发卡加利出发
</div>
<div class="text-caption text-grey-6 ellipsis q-mt-sm">
加拿大三日游 | 班夫&贾斯珀国家公园&哥伦比亚冰原
</div>
</div>
</div>
<div class="q-mt-md text-grey-6">
<div class="row">
<div style="width: 80px">出發城市：</div>
<div class="q-ml-md">武漢起止</div>
</div>
<div class="row">
<div style="width: 80px">出發日期：</div>
<div class="q-ml-md">2024-02-02</div>
</div>
</div>
<q-separator color="grey-2" class="q-my-md"/>
<div class="text-grey-9">
<div class="row q-mb-sm" v-if="chosenObj.Count>0">
<div class="col">豪华车 x {{ chosenObj.Count }}</div>
<div>CNY {{ moneyFormat(9999,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.df)>0">
<div class="col">總金額</div>
<div class="text-subtitle2 text-weight-bolder text-primary">CNY {{ moneyFormat(9999,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.df)>0">
<div class="col">優惠金額</div>
<div class="text-subtitle2 text-weight-bolder text-teal">CNY - {{ moneyFormat(9999,2) }}</div>
<div class="text-grey-5">暫無優惠</div>
</div>
<div class="row q-mb-sm items-center" v-if="(chosenObj.df)>0">
<div class="col">支付金額</div>
<div class="text-h6 text-weight-bolder text-primary product-price">CNY {{ moneyFormat(9999,2) }}</div>
</div>
</div>
<div class="text-right q-mt-md">
<q-btn unelevated color="primary" label="立即支付" />
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { json } from "body-parser";
import coupon from '../../components/common/coupon.vue'
export default {
components:{
coupon
},
data() {
return {
step: 1,
userInfo: {
lastName: "",
firstName: "",
country: 0,
phone: "",
areaCode: "",
mail: "",
},
chosenObj: {
startDate: "",
Count: 4,
etCount: 6,
yeCount: 0,
lrCount: 0,
etbzcCount: 4,
etzcCount: 2,
df: 1,
dcf: 0,
srf: 0,
isUnico: false,
unicoDep: {
city: null,
date: null,
price: 0,
isSup: -2,
},
unicoArr: {
city: null,
date: null,
price: 0,
isSup: -2,
},
remark: "",
},
isUpdateUserInfo: false,
countrys: [],
areaCodes: [],
guest: {
FirstName: "",
LastName: "",
Passport: "",
PassFirstName: "",
PassLastName: "",
GuestType: 0,
EnableSignRoom: false,
PassValidate: "",
FormatTypeName: "",
MobilePhone: "",
RoomType:0,
IsSignRoom:false,
Sex: 0,
},
guests: [],
disableSign: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
PassFirstName: '',//英文姓
PassLastName: '',//英文名
Passport: '',//护照
PassValidate: '',
},
flightTime: null,//航班起飞抵达时间
getBusTime: null,//预约车时间
};
},
computed: {
filedWidth() {
return {
"col-12": this.$q.screen.width < 1200,
"col-6": this.$q.screen.width >= 1200,
};
},
filedGuestWidth() {
return {
"col-12": this.$q.screen.width < 1200,
"col-4": this.$q.screen.width >= 1200,
};
},
},
created() {},
mounted() {
this.initCountry();
this.initGuestHandler();
},
methods: {
changeRoomHandler(){
let currentSign = this.guests.filter(x=> x.IsSignRoom)
this.disableSign=currentSign==this.chosenObj.df
},
initGuestHandler() {
},
initCountry() {
this.apipost("GetCountryInfo_post", {}, (r) => {
this.countrys = r.data.data.countList;
this.userInfo.country = this.countrys[0].ID;
this.areaCodes = r.data.data.phoneCountList;
this.changeCountry(this.userInfo.country);
this.areaCodes.forEach((x) => {
let temp = this.countrys.find((y) => y.ID == x.ID);
x.EnName = `${temp.EnName}(${x.PhoneCode})`;
});
});
},
changeCountry(id) {
this.userInfo.areaCode = this.areaCodes.find((x) => x.ID == id).PhoneCode;
},
},
};
</script>
<style>
.order-preview .q-stepper__content {
display: none !important;
}
.order-preview .q-toggle__track {
height: 0.7em;
border-radius: 0.35em;
opacity: 0.38;
width: 50px;
}
.order-preview .q-toggle__thumb {
top: 0.42em;
left: 0.45em;
width: 0.5em;
height: 0.5em;
transition: left 0.22s ease-in-out;
user-select: none;
z-index: 0;
}
.order-preview .q-toggle__inner--truthy .q-toggle__thumb {
left: 0.94em;
}
.order-preview .q-toggle__inner {
width: 1.9em;
}
.order-preview .q-toggle__label {
margin-top: 12px;
}
.guest-item:hover{
background: rgba(241,65,108,.04) !important;
}
</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