Skip to content

M
million
Commit 12e9dbf5 authored by 罗超's avatar 罗超
Browse files
Options

Merge branch 'master' of http://gitlab.oytour.com/viitto/million 

# Conflicts:
#	src/components/trip/orderPreview.vue
#	src/layouts/HomeLayout.vue
parents 5b6d0781 035d558d
Hide whitespace changes
Inline Side-by-side
Showing with 3696 additions and 501 deletions
src/assets/json/countries.json 0 → 100644
View file @ 12e9dbf5
This source diff could not be displayed because it is too large. You can view the blob instead.
src/components/car/Map.vue
View file @ 12e9dbf5
...@@ -7,7 +7,9 @@ ...@@ -7,7 +7,9 @@
border-radius: 8px;} border-radius: 8px;}
</style> </style>
<template> <template>
<div>
<div class="card" :id="`baidu-map_${center.Id}`"></div> <div class="card" :id="`baidu-map_${center.Id}`"></div>
</div>
</template> </template>
<script> <script>
export default { export default {
...@@ -17,7 +19,8 @@ ...@@ -17,7 +19,8 @@
center:{ center:{
Lng: 116.294625, Lng: 116.294625,
Lat: 39.961627 Lat: 39.961627
} },
keywords: ''
} }
}, },
watch: { watch: {
...@@ -27,6 +30,11 @@ ...@@ -27,6 +30,11 @@
}, },
deep:true, deep:true,
immediate:true immediate:true
},
keywords:{
handler(newValue,onldValue) {
this.getLocalSearch()
},
} }
}, },
mounted() { mounted() {
...@@ -74,7 +82,7 @@ ...@@ -74,7 +82,7 @@
offset: new BMapGL.Size(10, -60), // 设置标注的偏移量 offset: new BMapGL.Size(10, -60), // 设置标注的偏移量
}); });
this.map.addOverlay(label); // 将标注添加到地图中 this.map.addOverlay(label); // 将标注添加到地图中
label.addEventListener("click", function () { label.addEventListener("click", function (e) {
// alert("您点击了标注"); // alert("您点击了标注");
}); });
label.setStyle({ label.setStyle({
...@@ -90,7 +98,12 @@ ...@@ -90,7 +98,12 @@
var mPoint = new BMapGL.Point(this.center.Lng, this.center.Lat); var mPoint = new BMapGL.Point(this.center.Lng, this.center.Lat);
var circle = new BMapGL.Circle(mPoint,this.center.Range,{fillColor:"blue", strokeWeight: 1 ,fillOpacity: 0.3, strokeOpacity: 0.3}); var circle = new BMapGL.Circle(mPoint,this.center.Range,{fillColor:"blue", strokeWeight: 1 ,fillOpacity: 0.3, strokeOpacity: 0.3});
this.map.addOverlay(circle); this.map.addOverlay(circle);
} },
getLocalSearch(){
var mPoint = new BMapGL.Point(this.center.Lng, this.center.Lat);
var local = new BMapGL.LocalSearch(this.map, {renderOptions: {map: this.map, autoViewport: false}});
local.searchNearby(this.keywords,mPoint,this.center.Range);
},
}, },
} }
</script> </script>
src/components/car/orderPreview.vue
View file @ 12e9dbf5
...@@ -13,8 +13,8 @@ ...@@ -13,8 +13,8 @@
<template v-if="dataList.CarType!=3"> <template v-if="dataList.CarType!=3">
<div class="text-grey-6 f12 q-my-md">選擇機場</div> <div class="text-grey-6 f12 q-my-md">選擇機場</div>
<div class="row wrap"> <div class="row wrap">
<q-btn @click="handleSelectAirport(item)" <q-btn @click="handleSelect(item,1)"
:color="item.Id === selectedAirport?'primary':'grey-5'" :color="selectedAirportObj&&item.Id === selectedAirportObj.Id?'primary':'grey-5'"
unelevated unelevated
class="car-tag mr" class="car-tag mr"
v-for="item in AirportList" v-for="item in AirportList"
...@@ -24,10 +24,42 @@ ...@@ -24,10 +24,42 @@
</q-btn> </q-btn>
</div> </div>
</template> </template>
<div class="row">
<div v-if="dataList.CarType!=1">
<div class="text-grey-6 f12 q-my-md">選擇上車範圍</div>
<div class="row wrap">
<q-btn @click="handleSelect(item,3)"
:color="onCarObj&&item.Id === onCarObj.Id?'primary':'grey-5'"
unelevated
class="car-tag mr"
v-for="item in PlaceList"
:key="item.Id"
>
{{ item.Name }}({{ item.Range }}m)
</q-btn>
</div>
</div>
<div v-if="dataList.CarType!=2">
<div class="text-grey-6 f12 q-my-md">選擇下車範圍</div>
<div class="row wrap">
<q-btn @click="handleSelect(item,4)"
:color="unCarObj&&item.Id === unCarObj.Id?'primary':'grey-5'"
unelevated
class="car-tag mr"
v-for="item in PlaceList"
:key="item.Id"
>
{{ item.Name }}({{ item.Range }}m)
</q-btn>
</div>
</div>
</div>
<div class="text-grey-6 f12 q-my-md">選擇車類型</div> <div class="text-grey-6 f12 q-my-md">選擇車類型</div>
<div class="row wrap"> <div class="row wrap">
<q-btn @click="handleSelect(item)" <q-btn @click="handleSelect(item,2)"
:color="item.Id === selectedCar?'primary':'grey-5'" :color="selectedCarObj&&item.Id === selectedCarObj.Id?'primary':'grey-5'"
unelevated unelevated
class="car-tag mr" class="car-tag mr"
v-for="item in CarTypeList" v-for="item in CarTypeList"
...@@ -39,9 +71,9 @@ ...@@ -39,9 +71,9 @@
<div class="text-grey-6 f12 q-my-md">選擇數量</div> <div class="text-grey-6 f12 q-my-md">選擇數量</div>
<div class="row items-end"> <div class="row items-end">
<div class="col" :class="{'column':$q.platform.is.mobile}"> <div class="col" :class="{'column':$q.platform.is.mobile}">
<div v-if="selectedObj"> <div v-if="selectedCarObj">
<span class="text-subtitle2 text-weight-bold">{{selectedObj.CarName}}</span> <span class="text-subtitle2 text-weight-bold">{{selectedCarObj.CarName}}</span>
<span class="text-grey-6 f12 q-ml-sm"></span>({{ selectedObj.PeopleNum }}人+{{ selectedObj.PeopleNum }}行李)</span> <span class="text-grey-6 f12 q-ml-sm"></span>({{ selectedCarObj.PeopleNum }}人/辆)</span>
</div> </div>
<div v-if="$q.platform.is.mobile"> <div v-if="$q.platform.is.mobile">
<span class="text-grey-7 product-price" style="font-size: 13px"> <span class="text-grey-7 product-price" style="font-size: 13px">
...@@ -90,17 +122,6 @@ ...@@ -90,17 +122,6 @@
</q-input> </q-input>
</div> </div>
</div> </div>
<div class="text-grey-6 f12 q-mt-mb" v-if="p.isSupportChildren == 2">
本團只支持成人出遊
</div>
<div
v-if="p.safeMoney > 0"
class="q-pt-md q-mt-md row items-center"
style="border-top: 1px dashed #eee"
>
<div class="text-grey-6 f12 col">保險服務費</div>
<div class="product-money f12">CNY {{ p.safeMoney }}/每人</div>
</div>
</div> </div>
<div class="q-mt-md q-pt-md" style="border-top: 1px dashed #eee"> <div class="q-mt-md q-pt-md" style="border-top: 1px dashed #eee">
<div class="row items-center"> <div class="row items-center">
...@@ -112,10 +133,17 @@ ...@@ -112,10 +133,17 @@
{{$q.platform.is.mobile?'請選擇上面的出行日期':'請選擇左側的出行日期'}} {{$q.platform.is.mobile?'請選擇上面的出行日期':'請選擇左側的出行日期'}}
</span> </span>
<span class="q-mr-lg f12 text-negative" <span class="q-mr-lg f12 text-negative"
v-if="(p.startDate&&!selectedCar)||(p.startDate&&dataList.CarType!=3&&!selectedAirportObj)" > v-if="(p.startDate&&!selectedCarObj)
{{`請選擇上面的${dataList.CarType==3?'車類型':'機場、車類型'}`}} ||(p.startDate&&dataList.CarType==1&&(!selectedAirportObj||!unCarObj))
||(p.startDate&&dataList.CarType==2&&(!selectedAirportObj||!onCarObj))
||(p.startDate&&dataList.CarType==3&&(!onCarObj||!unCarObj))" >
{{`請選擇上面的${dataList.CarType==3?'車類型、上車下車點':dataList.CarType==1?'機場、車類型、下車點':'機場、車類型、上車點'}`}}
</span> </span>
<q-btn color="primary" label="立即訂購" unelevated class="q-px-lg" :disable="sumPrice==0" <q-btn color="primary" label="立即訂購" unelevated class="q-px-lg"
:disable="sumPrice==0||!selectedCarObj
||(dataList.CarType!=3&&!selectedAirportObj)
||(dataList.CarType==1&&!unCarObj)||(dataList.CarType==2&&!onCarObj)
||(dataList.CarType==3&&(!onCarObj||!unCarObj))"
@click="goUrl"/> @click="goUrl"/>
</div> </div>
</div> </div>
...@@ -124,7 +152,7 @@ ...@@ -124,7 +152,7 @@
<script> <script>
export default { export default {
props: ["dataList","price","CarTypeList","AirportList","configId","Month"], props: ["dataList","PlaceList","price","CarTypeList","AirportList","configId","Month"],
watch: { watch: {
price: { price: {
handler(n, o) { handler(n, o) {
...@@ -132,7 +160,7 @@ export default { ...@@ -132,7 +160,7 @@ export default {
if(n&&n.startDate){ if(n&&n.startDate){
this.chosenObj.startDate = n.startDate; this.chosenObj.startDate = n.startDate;
// this.selectedCar = this.CarTypeList[0].Id // this.selectedCar = this.CarTypeList[0].Id
// this.selectedObj = this.CarTypeList[0] // this.selectedCarObj = this.CarTypeList[0]
} }
this.calcMoney() this.calcMoney()
...@@ -154,11 +182,11 @@ export default { ...@@ -154,11 +182,11 @@ export default {
p: {}, p: {},
chosenObj: null, chosenObj: null,
sumPrice:0, sumPrice:0,
selectedCar: 0, selectedCarObj: null,
selectedObj: null,
priceList: [], priceList: [],
selectedAirport: 0,
selectedAirportObj: null, selectedAirportObj: null,
onCarObj: null,
unCarObj: null,
}; };
}, },
created() { created() {
...@@ -167,16 +195,59 @@ export default { ...@@ -167,16 +195,59 @@ export default {
this.chosenObj.startDate = this.p.startDate; this.chosenObj.startDate = this.p.startDate;
this.calcMoney() this.calcMoney()
this.getCarPriceData2() this.getCarPriceData2()
// this.selectedCar = this.CarTypeList[0].Id
// this.selectedObj = this.CarTypeList[0]
} }
}, },
methods: { methods: {
goUrl(){ goUrl(){
let OrderDate = {
CarObj: this.selectedCarObj,
AirportObj: {
Address: this.selectedAirportObj?this.selectedAirportObj.Address:'',
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,
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,
},
onCarObj: {
Address: this.onCarObj?this.onCarObj.Address:'',
Name: this.onCarObj?this.onCarObj.Name:'',
Lat: this.onCarObj?this.onCarObj.Lat:'',
Lng: this.onCarObj?this.onCarObj.Lng:'',
Range: this.onCarObj?this.onCarObj.Range:'',
},
unCarObj: {
Address: this.unCarObj?this.unCarObj.Address:'',
Name: this.unCarObj?this.unCarObj.Name:'',
Lat: this.unCarObj?this.unCarObj.Lat:'',
Lng: this.unCarObj?this.unCarObj.Lng:'',
Range: this.unCarObj?this.unCarObj.Range:''
},
}
// console.log(OrderDate,'========')
// return
this.CommonJump( this.CommonJump(
"/PickuporderForm", "/PickuporderForm",
{} {
OrderDate: encodeURIComponent(JSON.stringify(OrderDate)),
// CarObj: JSON.stringify(this.selectedCarObj),
// AirportObj: JSON.stringify(this.selectedAirportObj),
// calculationAmount: JSON.stringify(this.p),
// calculationNum: JSON.stringify(this.chosenObj),
// sumPrice: JSON.stringify(this.sumPrice),
// details: JSON.stringify(this.dataList)
}
); );
}, },
// 获取车的详情 // 获取车的详情
...@@ -188,7 +259,7 @@ export default { ...@@ -188,7 +259,7 @@ export default {
ProductId: this.configId, ProductId: this.configId,
Month: this.Month, Month: this.Month,
AirportId: '', AirportId: '',
CarTypeId: this.selectedCar CarTypeId: this.selectedCarObj.Id
}, },
(r) => { (r) => {
if (r.data.resultCode == 1) { if (r.data.resultCode == 1) {
...@@ -212,7 +283,7 @@ export default { ...@@ -212,7 +283,7 @@ export default {
const temp= JSON.parse(JSON.stringify(r.data.data)) const temp= JSON.parse(JSON.stringify(r.data.data))
let PriceArr = temp.filter(x=>{ return x.Price>0 }) let PriceArr = temp.filter(x=>{ return x.Price>0 })
if(PriceArr.length>0){ if(PriceArr.length>0){
this.$emit('getPriceList',JSON.stringify(arr),this.selectedCar) this.$emit('getPriceList',JSON.stringify(arr),this.selectedCarObj.Id)
}else{ }else{
let dataObj = { let dataObj = {
startDate: '', startDate: '',
...@@ -223,7 +294,7 @@ export default { ...@@ -223,7 +294,7 @@ export default {
safeMoney: 0, safeMoney: 0,
} }
this.priceList.push(dataObj) this.priceList.push(dataObj)
this.$emit('getPriceList',JSON.stringify(this.priceList),this.selectedCar) this.$emit('getPriceList',JSON.stringify(this.priceList),this.selectedCarObj.Id)
this.p.originalB2CPrice = 0 this.p.originalB2CPrice = 0
this.resetHandler() this.resetHandler()
} }
...@@ -233,12 +304,19 @@ export default { ...@@ -233,12 +304,19 @@ export default {
}, },
handleSelectAirport(item){ handleSelectAirport(item){
this.selectedAirportObj = item this.selectedAirportObj = item
this.selectedAirport = item.Id
}, },
handleSelect(item){ handleSelect(item,type){
this.selectedObj = item if(type==1){
this.selectedCar = item.Id this.selectedAirportObj = item
this.getCarPriceData2() }else if(type==2){
this.selectedCarObj = item
this.getCarPriceData2()
}else if(type==3){
this.onCarObj = item
}else if(type==4){
this.unCarObj = item
}
}, },
initModel() { initModel() {
this.sumPrice=0 this.sumPrice=0
...@@ -250,10 +328,10 @@ export default { ...@@ -250,10 +328,10 @@ export default {
}, },
resetHandler(type) { resetHandler(type) {
if(type&&type!=1){ if(type&&type!=1){
this.selectedCar = 0 this.selectedCarObj = null
this.selectedObj = null
this.selectedAirportObj = null this.selectedAirportObj = null
this.selectedAirport = 0 this.onCarObj = null
this.unCarObj = null
} }
setTimeout(()=>{ setTimeout(()=>{
this.p = {}; this.p = {};
......
src/css/app.scss
View file @ 12e9dbf5
...@@ -127,4 +127,7 @@ ...@@ -127,4 +127,7 @@
} }
.primary { .primary {
color: $primary; color: $primary;
}
.white {
color: #fff;
} }
\ No newline at end of file
src/layouts/HomeLayout.vue
View file @ 12e9dbf5
...@@ -30,11 +30,11 @@ ...@@ -30,11 +30,11 @@
<hor-big-one :base-data="baseinfo" :dataList="dataList" ref="webhead"></hor-big-one> <hor-big-one :base-data="baseinfo" :dataList="dataList" ref="webhead"></hor-big-one>
<!-- <hor-big-two v-if="headType==2" :base-data="baseinfo" ref="webhead"></hor-big-two> --> <!-- <hor-big-two v-if="headType==2" :base-data="baseinfo" ref="webhead"></hor-big-two> -->
<q-page-container> <q-page-container>
<!-- <div class="flex" v-if="showUserInfo" style="width: 1200px; margin: 0 auto"> <div class="flex justify-between" v-if="showUserInfo" style="width: 1200px; margin: 0 auto">
<navs></navs> <navs></navs>
<router-view /> <router-view />
</div> --> </div>
<router-view/> <router-view v-else />
</q-page-container> </q-page-container>
<div class="goBackTop bg-primary" :class="{'showGoback':isShowTop}" @click="hangleGoUp"> <div class="goBackTop bg-primary" :class="{'showGoback':isShowTop}" @click="hangleGoUp">
<i class="iconfont iconarrow-top"></i> <i class="iconfont iconarrow-top"></i>
...@@ -62,7 +62,7 @@ import Navs from 'src/pages/usercenter/components/navs.vue'; ...@@ -62,7 +62,7 @@ import Navs from 'src/pages/usercenter/components/navs.vue';
}, },
data() { data() {
return { return {
showUserInfo: true, showUserInfo: false,
leftDrawerOpen: false, leftDrawerOpen: false,
baseinfo: { baseinfo: {
logo: "", logo: "",
...@@ -83,7 +83,13 @@ import Navs from 'src/pages/usercenter/components/navs.vue'; ...@@ -83,7 +83,13 @@ import Navs from 'src/pages/usercenter/components/navs.vue';
isShowTop: false isShowTop: false
}; };
}, },
watch: {
'$route': function() {
this.showUserInfo = Boolean(this.$route.meta.isUserCenter)
}
},
created() { created() {
this.showUserInfo = Boolean(this.$route.meta.isUserCenter)
var nowDay = this.formatDate2(new Date()); var nowDay = this.formatDate2(new Date());
this.ToDay = nowDay.CYear + "-" + nowDay.CMonth + "-" + nowDay.CDay; this.ToDay = nowDay.CYear + "-" + nowDay.CMonth + "-" + nowDay.CDay;
this.$root.$on('change-head-style', param => { this.$root.$on('change-head-style', param => {
......
src/pages/Pickuporder/orderForm.vue
View file @ 12e9dbf5
...@@ -43,22 +43,6 @@ ...@@ -43,22 +43,6 @@
<div class="text-subtitle1 text-weight-bolder">訂購人資訊</div> <div class="text-subtitle1 text-weight-bolder">訂購人資訊</div>
<q-separator color="grey-2" class="q-my-md" /> <q-separator color="grey-2" class="q-my-md" />
<div class="row q-col-gutter-md"> <div class="row q-col-gutter-md">
<div :class="filedWidth">
<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"> <div :class="filedWidth">
<q-select <q-select
v-model="userInfo.country" v-model="userInfo.country"
...@@ -74,62 +58,78 @@ ...@@ -74,62 +58,78 @@
</div> </div>
<div :class="filedWidth"> <div :class="filedWidth">
<q-input <q-input
standout standout
v-model="userInfo.firstName" v-model="parameters.Mobile"
label="電話" label="電話"
:rules="[(val) => !!val || '請輸入行動電話']" :rules="[(val) => !!val && val.length == 11 || '請輸正確電話']"
ref="Mobile"
> >
<template v-slot:prepend> <template v-slot:prepend>
<div class="text-subtitle2">+{{ userInfo.areaCode }}</div> <div class="text-subtitle2">+{{ userInfo.areaCode }}</div>
</template> </template>
</q-input> </q-input>
</div> </div>
<div :class="filedWidth"> <div :class="filedWidth">
<q-input <q-input
standout standout
v-model="userInfo.mail" v-model="userInfo.mail"
label="郵箱地址" label="郵箱地址"
:rules="[(val) => !!val || '請輸入郵箱地址']" :rules="[(val) => !!val || '請輸入郵箱地址']"
ref="mail"
/> />
</div> </div>
<div :class="filedWidth">
<q-toggle v-model="isUpdateUserInfo" label="同步更新會員資料" />
</div>
</div> </div>
</q-card> </q-card>
<q-card flat class="q-pa-md q-mt-lg"> <q-card flat class="q-pa-md q-mt-lg" v-if="details">
<div class="text-subtitle1 text-weight-bolder q-mb-md">旅客資料</div> <div class="text-subtitle1 text-weight-bolder q-mb-md">旅客資料</div>
<div class="row"> <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 <q-img
src="https://image.kkday.com/v2/image/get/s1.kkday.com/product_138437/20230217083232_t5rcO/jpg" 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" class="rounded-borders"
spinner-color="grey-3" spinner-color="grey-3"
style="width: 80px" style="width: 80px"
/> />
<div class="q-ml-md col"> <div class="q-ml-md col">
<div class="text-subtitle1 ellipsis"> <div class="text-subtitle1 ellipsis">
【夏季限定】加拿大三日游 | 班夫&贾斯珀国家公园&哥伦比亚冰原 | {{details.Name}}
卡加利出发卡加利出发卡加利出发
</div> </div>
<div class="text-caption text-grey-6 ellipsis q-mt-sm"> <div class="text-caption text-grey-6 ellipsis q-mt-sm">
加拿大三日游 | 班夫&贾斯珀国家公园&哥伦比亚冰原 {{details.Description}}
</div> </div>
</div> </div>
</div> </div>
<div class="q-mt-md row"> <div class="q-mt-md row">
<div class="text-grey-9"> <div class="text-grey-9">
<q-icon name="iconfont iconrili" size="20px" class="q-mr-sm" /> <q-icon name="iconfont iconrili" size="20px" class="q-mr-sm" />
<span>2023-02-27</span> <span>{{calculationAmount.startDate}}</span>
</div> </div>
<div class="text-grey-9 q-ml-md"> <div class="text-grey-9 q-ml-md">
<q-icon name="iconfont iconjiaotong" size="20px" class="q-mr-sm" /> <q-icon name="iconfont iconjiaotong" size="20px" class="q-mr-sm" />
<span class="q-mr-sm" v-if="chosenObj.Count > 0" <span class="q-mr-sm" v-if="chosenObj.Count > 0"
>豪华车 x {{ chosenObj.Count }} (4人+{{chosenObj.Count}}行李)</span >{{CarObj.CarName}} x {{ chosenObj.Count }}辆 </span
> >
<span class="q-mr-sm" <span class="q-mr-sm"
></span >({{CarObj.PeopleNum}}人/辆)</span
> >
</div> </div>
</div> </div>
...@@ -146,6 +146,7 @@ ...@@ -146,6 +146,7 @@
label="本國姓" label="本國姓"
placeholder="例：張" placeholder="例：張"
:rules="[(val) => !!val || '請輸本國姓']" :rules="[(val) => !!val || '請輸本國姓']"
ref="SurName"
/> />
</div> </div>
<div :class="filedGuestWidth"> <div :class="filedGuestWidth">
...@@ -155,9 +156,34 @@ ...@@ -155,9 +156,34 @@
label="本國名" label="本國名"
placeholder="例：三" placeholder="例：三"
:rules="[(val) => !!val || '請輸本國名']" :rules="[(val) => !!val || '請輸本國名']"
ref="Name"
/> />
</div> </div>
<div :class="filedGuestWidth"> <div :class="filedGuestWidth">
<q-input
standout
v-model="parameters.ContactWay"
label="联络方式"
placeholder="例：WeChat"
:rules="[(val) => !!val || '請輸联络方式']"
ref="ContactWay"
>
</q-input>
</div>
<div :class="filedGuestWidth">
<q-input
standout
v-model="parameters.Mobile"
label="電話"
:rules="[(val) => !!val && val.length == 11 || '請輸正確電話']"
ref="Mobile"
>
<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"> <div class="row items-center q-mt-md">
<span>選擇性別：</span> <span>選擇性別：</span>
<q-radio <q-radio
...@@ -167,122 +193,84 @@ ...@@ -167,122 +193,84 @@
label="男" label="男"
class="q-mr-lg" class="q-mr-lg"
/> />
<q-radio v-model="guests.Sex" dense :val="2" label="女" /> <q-radio v-model="parameters.Sex" dense :val="2" label="女" />
</div> </div>
</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> </div>
<div class="text-subtitle1 text-weight-bolder q-my-md">抵达 班机資料</div> <template v-if="details.CarType!=3">
<q-separator color="grey-2" class="q-mt-md" /> <div class="text-subtitle1 text-weight-bolder q-my-md">{{details.CarType==1?'抵達':'起飛'}} 班机資料</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="row q-col-gutter-md"> <div class="text-subtitle1 q-pb-md text-weight-bold"></div>
<div :class="filedGuestWidth"> <div class="row q-col-gutter-md">
<q-input <div :class="filedGuestWidth">
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 <q-input
standout standout
v-model="parameters.FlightNumber" v-model="parameters.AirportTerminal"
label="航班編號" label="航廈"
placeholder="例：CA123" placeholder="例：航廈"
:rules="[(val) => !!val || '請輸航班編號']" :rules="[(val) => !!val || '請輸航廈']"
ref="AirportTerminal"
/> />
</div> </div>
<div :class="filedGuestWidth"> <div :class="filedGuestWidth">
<q-input <q-input
class="q-pb-md"
standout standout
v-model="parameters.FlightTime" v-model="parameters.AirLine"
label="航班抵达时间" label="航空公司"
readonly placeholder=""
> :rules="[(val) => !!val || '請輸航空公司名稱']"
<template v-slot:append> ref="AirLine"
<q-icon name="event" class="cursor-pointer"></q-icon> />
</template> </div>
<q-popup-proxy :offset="[0, 0]" ref="qDateProxy7"> <div :class="filedGuestWidth">
<div class="row"> <q-input
<q-date standout
mask="YYYY-MM-DD HH:mm" v-model="parameters.FlightNumber"
:title="$t('search_date_begin')" label="航班編號"
subtitle="選擇" placeholder="例：CA123"
v-model="parameters.FlightTime" :rules="[(val) => !!val || '請輸航班編號']"
/> ref="FlightNumber"
<div class="q-px-sm"></div> />
<q-time v-model="flightTime" mask="YYYY-MM-DD HH:mm" </div>
@input="() => $refs.qDateProxy7.hide()"/> <div :class="filedGuestWidth">
</div> <q-input
</q-popup-proxy> class="q-pb-md"
</q-input> 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> </div>
</template>
<div class="text-subtitle1 text-weight-bolder q-my-md">
{{details.CarType==1?'接机':details.CarType==2?'送机':'包车'}}資料
</div> </div>
<div class="text-subtitle1 text-weight-bolder q-my-md">接送資料</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"
...@@ -292,37 +280,45 @@ ...@@ -292,37 +280,45 @@
<div :class="filedGuestWidth"> <div :class="filedGuestWidth">
<q-input <q-input
standout standout
v-model="parameters.OrderDate" v-model="!getBusTime?'':parameters.OrderDate"
label="接駁日期" label="接駁日期"
readonly :rules="[(val) => !!val || '請选接駁日期']"
disable ref="OrderDate"
> >
<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">
<div class="row">
<q-time format24h v-model="getBusTime" mask="HH:mm"
@input="getTime(2)"/>
</div>
</q-popup-proxy>
</q-input> </q-input>
</div> </div>
<div :class="filedGuestWidth"> <div :class="filedGuestWidth" v-if="details.CarType!=1">
<q-input <q-input
standout standout
v-model="parameters.GetonAddress" v-model="parameters.GetonAddress"
label="上車地點" label="上車地點"
placeholder="" placeholder=""
:rules="[(val) => !!val || '請輸上車地點和地址供司機參考']"> :rules="[(val) => !!val || '請輸上車地點和地址供司機參考']"
ref="GetonAddress">
<template v-slot:append> <template v-slot:append>
<q-icon name="iconfont iconaddress" size="20px" class="q-mr-sm" /> <q-icon name="iconfont iconaddress" size="20px" class="q-mr-sm" @click="getAddress(1)"/>
</template> </template>
</q-input> </q-input>
</div> </div>
<div :class="filedGuestWidth"> <div :class="filedGuestWidth" v-if="details.CarType!=2">
<q-input <q-input
standout standout
v-model="parameters.GetoffAddress" v-model="parameters.GetoffAddress"
label="下車地點" label="下車地點"
placeholder="" placeholder=""
:rules="[(val) => !!val || '請輸下車地點和地址供司機參考']"> :rules="[(val) => !!val || '請輸下車地點和地址供司機參考']"
ref="GetoffAddress">
<template v-slot:append> <template v-slot:append>
<q-icon name="iconfont iconaddress" size="20px" class="q-mr-sm" /> <q-icon name="iconfont iconaddress" size="20px" class="q-mr-sm" @click="getAddress(2)"/>
</template> </template>
</q-input> </q-input>
</div> </div>
...@@ -342,6 +338,9 @@ ...@@ -342,6 +338,9 @@
standout standout
v-model="parameters.ManNum" v-model="parameters.ManNum"
label="成人數(18-99岁)" label="成人數(18-99岁)"
@input="getNum"
:rules="[(val) => !!val || '請輸成人數']"
ref="ManNum"
/> />
</div> </div>
<div :class="filedGuestWidth"> <div :class="filedGuestWidth">
...@@ -350,6 +349,7 @@ ...@@ -350,6 +349,7 @@
standout standout
v-model="parameters.ChildNum" v-model="parameters.ChildNum"
label="兒童數(3-17岁)" label="兒童數(3-17岁)"
@input="getNum"
/> />
</div> </div>
<div :class="filedGuestWidth"> <div :class="filedGuestWidth">
...@@ -358,76 +358,39 @@ ...@@ -358,76 +358,39 @@
standout standout
v-model="parameters.BabyNum" v-model="parameters.BabyNum"
label="嬰幼兒數(0-2岁)" label="嬰幼兒數(0-2岁)"
@input="getNum"
/> />
</div> </div>
</div> </div>
<div class="text-subtitle1 q-py-md text-weight-bold">行李数量</div> <template v-if="details.CarType!=3">
<div class="row q-col-gutter-md"> <div class="text-subtitle1 q-py-md text-weight-bold">行李数量</div>
<div :class="filedGuestWidth"> <div class="row q-col-gutter-md">
<q-input <div :class="filedGuestWidth">
type="Number" <q-input
standout type="Number"
v-model="parameters.HandLuggageNum" standout
label="手提行李" v-model="parameters.HandLuggageNum"
/> label="手提行李"
</div> />
<div :class="filedGuestWidth"> </div>
<q-input <div :class="filedGuestWidth">
type="Number" <q-input
standout type="Number"
v-model="parameters.RegisteredLuggageNum" standout
label="托运行李" v-model="parameters.RegisteredLuggageNum"
/> label="托运行李"
</div> />
</div>
</div>
</div> </div>
<div class="text-subtitle1 text-weight-bolder q-my-md">旅遊期間聯絡方式</div> </template>
<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>
<div class="text-subtitle1 q-my-md text-weight-bold">特殊需求備註：</div> <div class="text-subtitle1 q-my-md text-weight-bold">特殊需求備註：</div>
<q-input standout v-model="parameters.remark" input-style="height:170px;" type="textarea" placeholder="此欄位僅限資料備註。不在商品規範內的個人需求，不保證提供" maxlength="200" counter /> <q-input standout v-model="parameters.Remark" input-style="height:170px;" type="textarea" placeholder="此欄位僅限資料備註。不在商品規範內的個人需求，不保證提供" maxlength="200" counter />
</q-card> </q-card>
<coupon></coupon>
</div> </div>
<div class="relative-position" <div class="relative-position" v-if="details"
:class="{ :class="{
'q-ml-lg': !($q.screen.width < 1200 || $q.platform.is.mobile), 'q-ml-lg': !($q.screen.width < 1200 || $q.platform.is.mobile),
'q-mt-lg full-width': $q.screen.width < 1200 || $q.platform.is.mobile, 'q-mt-lg full-width': $q.screen.width < 1200 || $q.platform.is.mobile,
...@@ -447,73 +410,139 @@ ...@@ -447,73 +410,139 @@
> >
<div class="text-subtitle1 text-weight-bolder">付款明細</div> <div class="text-subtitle1 text-weight-bolder">付款明細</div>
<div class="row q-mt-md"> <div class="row q-mt-md">
<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 <q-img
src="https://image.kkday.com/v2/image/get/s1.kkday.com/product_138437/20230217083232_t5rcO/jpg" 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" class="rounded-borders"
spinner-color="grey-3" spinner-color="grey-3"
style="width: 80px" style="width: 80px"
/> />
<div class="q-ml-md col"> <div class="q-ml-md col">
<div class="text-subtitle1 ellipsis"> <div class="text-subtitle1 ellipsis">
【夏季限定】加拿大三日游 | 班夫&贾斯珀国家公园&哥伦比亚冰原 | {{details.Name}}
卡加利出发卡加利出发卡加利出发
</div> </div>
<div class="text-caption text-grey-6 ellipsis q-mt-sm"> <div class="text-caption text-grey-6 ellipsis q-mt-sm">
加拿大三日游 | 班夫&贾斯珀国家公园&哥伦比亚冰原 {{details.Description}}
</div> </div>
</div> </div>
</div> </div>
<div class="q-mt-md text-grey-6"> <div class="q-mt-md text-grey-6">
<div class="row"> <div class="row q-pb-xs" v-if="AirportObj&&AirportObj.Name">
<div style="width: 80px">出發城市：</div> <div style="width: 80px">{{details.CarType==1?'接':'送'}}機機場：</div>
<div class="q-ml-md">武漢起止</div> <div class="q-ml-md ellipsis-2-lines">{{AirportObj.Name}}</div>
</div>
<div class="row q-pb-xs" 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" v-if="parameters.GetoffAddress">
<div style="width: 80px">下車點：</div>
<div class="q-ml-md ellipsis-2-lines">{{parameters.GetoffAddress}}</div>
</div> </div>
<div class="row"> <div class="row">
<div style="width: 80px">出發日期：</div> <div style="width: 80px">
<div class="q-ml-md">2024-02-02</div> <!-- 出發日期： -->
接駁日期：</div>
<div class="q-ml-md">
{{parameters.OrderDate}}
<!-- {{calculationAmount.startDate}} -->
</div>
</div> </div>
</div> </div>
<q-separator color="grey-2" class="q-my-md"/> <q-separator color="grey-2" class="q-my-md"/>
<div class="text-grey-9"> <div class="text-grey-9">
<div class="row q-mb-sm" v-if="chosenObj.Count>0"> <div class="row q-mb-sm" v-if="chosenObj.Count>0">
<div class="col">豪华车 x {{ chosenObj.Count }}</div> <div class="col">{{CarObj.CarName}} x {{ chosenObj.Count }}</div>
<div>CNY {{ moneyFormat(9999,2) }}</div> <div>CNY {{ moneyFormat(sumPrice,2) }}</div>
</div> </div>
<hr style="border:none;border-top:1px dashed #EEE !important;" class="bg-transparent q-mb-sm" /> <!-- <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="row q-mb-sm items-center" v-if="(chosenObj.Count)>0">
<div class="col">總金額</div> <div class="col">總金額</div>
<div class="text-subtitle2 text-weight-bolder text-primary">CNY {{ moneyFormat(9999,2) }}</div> <div class="text-subtitle2 text-weight-bolder text-primary">CNY {{ moneyFormat(sumPrice,2) }}</div>
</div> </div> -->
<hr style="border:none;border-top:1px dashed #EEE !important;" class="bg-transparent q-mb-sm" /> <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="row q-mb-sm items-center" v-if="chosenObj.Count>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="col">支付金額</div>
<div class="text-h6 text-weight-bolder text-primary product-price">CNY {{ moneyFormat(9999,2) }}</div> <div class="text-h6 text-weight-bolder text-primary product-price">CNY {{ moneyFormat(sumPrice,2) }}</div>
</div> </div>
</div> </div>
<div class="text-right q-mt-md"> <div class="text-right q-mt-md" v-if="step!=3">
<q-btn unelevated color="primary" label="立即支付" /> <q-btn v-if="step!=3" unelevated color="primary"
:loading="loading" :label="step!=3?'立即支付':'已支付'" @click="submit()"
:disable="step!=3&&loading"/>
<q-btn v-else unelevated color="primary" label=""/>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<q-dialog v-model="isShowDialog">
<q-card class="q-pa-lg" :style="{'width':$q.platform.is.desktop?'100%':'500px'}">
<div class="text-h6Detail">
<span>乘客{{onoffbus==1?'上':'下'}}車範圍</span>
<i class="iconfont iconbaseline-close-px" @click="isShowDialog=false"></i>
</div>
<q-separator />
<div style="max-height: 600px;padding:20px 0" class="scroll">
<componentsMap :AddressObj="onCarObj"/>
</div>
</q-card>
</q-dialog>
</div> </div>
</template> </template>
<script> <script>
import { date } from 'quasar'
import { json } from "body-parser"; import { json } from "body-parser";
import coupon from '../../components/common/coupon.vue' import coupon from '../../components/common/coupon.vue'
import componentsMap from "../../components/car/Map.vue";
export default { export default {
components:{ components:{
coupon coupon,
componentsMap
}, },
data() { data() {
return { return {
isRangeClick: true,
isShowDialog: false,
AddressObj: null,
onCarObj: null,//上车范围
unCarObj: null,//下车范围
CarObj: null,//车型
AirportObj: null,//机场
calculationAmount: null,//日期
calculationNum: null,//数量
sumPrice: null,//总价
details: null,//产品详情
options: {
currentPage: 0,
speed: 300,
itemAnimation: true,
centeredSlides: true,
thresholdDistance: 100,
thresholdTime: 300,
loopedSlides: 2,
slidesToScroll: 1,
loop: true,
},
OrderDate: null,//接收产品相关信息
step: 1, step: 1,
userInfo: { userInfo: {
lastName: "", lastName: "",
...@@ -523,52 +552,11 @@ ...@@ -523,52 +552,11 @@
areaCode: "", areaCode: "",
mail: "", mail: "",
}, },
chosenObj: { 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, isUpdateUserInfo: false,
countrys: [], countrys: [],
areaCodes: [], areaCodes: [],
guest: { loading: false,
FirstName: "",
LastName: "",
Passport: "",
PassFirstName: "",
PassLastName: "",
GuestType: 0,
EnableSignRoom: false,
PassValidate: "",
FormatTypeName: "",
MobilePhone: "",
RoomType:0,
IsSignRoom:false,
Sex: 0,
},
guests: [],
disableSign:false,
parameters: { parameters: {
OrderId: 0, OrderId: 0,
OrderType: 0, OrderType: 0,
...@@ -576,7 +564,7 @@ ...@@ -576,7 +564,7 @@
Unit_Price: '',//单价 Unit_Price: '',//单价
Num: '',//数量 Num: '',//数量
Money: 0.0, Money: 0.0,
Sex: '1',//1男2女 Sex: 1,//1男2女
SurName: '',//姓 SurName: '',//姓
Name: '',//名 Name: '',//名
Remark: '', Remark: '',
...@@ -596,13 +584,13 @@ ...@@ -596,13 +584,13 @@
Mobile:'',//电话 Mobile:'',//电话
ProductId: '', ProductId: '',
CarId: '',//产品类型ID CarId: '',//产品类型ID
PassFirstName: '',//英文姓 pType: 1,//类型 1来源B2C
PassLastName: '',//英文名
Passport: '',//护照
PassValidate: '',
}, },
flightTime: null,//航班起飞抵达时间 flightTime: null,//航班起飞抵达时间
getBusTime: null,//预约车时间 getBusTime: null,//预约车时间
TotalPeople: 0,//总人数
onoffbus: 1,//1 上车 2下车
ErpOrderId: 0,//erp订单Id
}; };
}, },
computed: { computed: {
...@@ -621,17 +609,187 @@ ...@@ -621,17 +609,187 @@
}, },
created() {}, created() {},
mounted() { mounted() {
if(this.$route.query.OrderDate){
let obj = decodeURIComponent(this.$route.query.OrderDate)
let OrderDate = JSON.parse(obj)
this.CarObj = OrderDate.CarObj,//车型
this.AirportObj = OrderDate.AirportObj,//机场
this.calculationAmount = OrderDate.calculationAmount,//日期
this.chosenObj = OrderDate.calculationNum,//数量
this.sumPrice = OrderDate.sumPrice,//总金额
this.details = OrderDate.details//产品详情
this.onCarObj = OrderDate.onCarObj//上车范围
this.unCarObj = OrderDate.unCarObj//下车范围
}
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
this.parameters.Unit_Price = this.calculationAmount.originalB2CPrice
this.parameters.Num = this.chosenObj.Count
this.parameters.Money = this.sumPrice
this.initCountry(); this.initCountry();
this.initGuestHandler(); this.initGuestHandler();
}, },
methods: { methods: {
changeRoomHandler(){ submit(){
let currentSign = this.guests.filter(x=> x.IsSignRoom) let flag = false
this.disableSign=currentSign==this.chosenObj.df
this.$refs.mail.validate()
this.$refs.SurName.validate()
this.$refs.Name.validate()
this.$refs.ContactWay.validate()
this.$refs.Mobile.validate()
this.$refs.OrderDate.validate()
this.$refs.ManNum.validate()
if(this.details.CarType!=3){
this.$refs.AirportTerminal.validate()
this.$refs.AirLine.validate()
this.$refs.FlightNumber.validate()
this.$refs.FlightTime.validate()
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.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.GetonAddress.hasError&& !this.$refs.GetoffAddress.hasError&& !this.$refs.mail.hasError
}
if(!flag) return
this.SetCarOrder()
},
SetCarOrder(){
this.loading = true
this.apipost(
"CarSingle_post_SetTYCarOrder",
this.parameters,
(r) => {
// this.$refs.myform.resetValidation()
if (r.data.resultCode == 1) {
this.step = 2
let ErpOrderId = r.data.data.Id
this.AddOrderInfo(ErpOrderId)
}else{
this.$q.notify({
type: "negative",
message: r.data.message,
position: "top",
timeout: 2000,
});
this.loading = false
}
})
},
AddOrderInfo(ErpOrderId){
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.imgCover[0],//商品图片
GoodsType: this.parameters.OrderType,//商品类型（见枚举）
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
}else{
this.$q.notify({
type: "negative",
message: r.data.message,
position: "top",
timeout: 2000,
});
}
this.loading = false
})
},
// 航班起飞抵达时间
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")
);
},
// 地图上选址
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() { initGuestHandler() {
}, },
// 初始化国家
initCountry() { initCountry() {
this.apipost("GetCountryInfo_post", {}, (r) => { this.apipost("GetCountryInfo_post", {}, (r) => {
this.countrys = r.data.data.countList; this.countrys = r.data.data.countList;
...@@ -683,5 +841,21 @@ ...@@ -683,5 +841,21 @@
.guest-item:hover{ .guest-item:hover{
background: rgba(241,65,108,.04) !important; background: rgba(241,65,108,.04) !important;
} }
.text-h6Detail {
text-align: center;
font-size: 18px;
color: #333;
font-weight: 700;
position: relative;
width:100%;
height:50px;
}
.text-h6Detail i {
position: absolute;
right:20px;
top:10px;
cursor: pointer;
font-size:23px;
}
</style> </style>
\ No newline at end of file
src/pages/detailsCar.vue
View file @ 12e9dbf5
...@@ -180,6 +180,7 @@ ...@@ -180,6 +180,7 @@
color="primary" color="primary"
label="選擇方案" label="選擇方案"
unelevated unelevated
:disable="priceList.length>0?false:true"
@click="goScrollHandler('#scheme')" @click="goScrollHandler('#scheme')"
:class="{ 'q-mt-md full-width': $q.platform.is.desktop }" :class="{ 'q-mt-md full-width': $q.platform.is.desktop }"
/> />
...@@ -280,6 +281,7 @@ ...@@ -280,6 +281,7 @@
:dataList="dataList" :dataList="dataList"
:configId="msg.configId" :configId="msg.configId"
:Month="currentYM.str" :Month="currentYM.str"
:PlaceList="dataList.PlaceList"
:CarTypeList="dataList.CarTypeList" :CarTypeList="dataList.CarTypeList"
:AirportList="dataList.AirportList" :AirportList="dataList.AirportList"
:price="currentPrice" :price="currentPrice"
...@@ -372,6 +374,7 @@ ...@@ -372,6 +374,7 @@
:dataList="dataList" :dataList="dataList"
:configId="msg.configId" :configId="msg.configId"
:Month="currentYM.str" :Month="currentYM.str"
:PlaceList="dataList.PlaceList"
:CarTypeList="dataList.CarTypeList" :CarTypeList="dataList.CarTypeList"
:AirportList="dataList.AirportList" :AirportList="dataList.AirportList"
:price="currentPrice" :price="currentPrice"
......
src/pages/detailsNew.vue
View file @ 12e9dbf5
...@@ -190,6 +190,7 @@ ...@@ -190,6 +190,7 @@
color="primary" color="primary"
label="選擇方案" label="選擇方案"
unelevated unelevated
:disable="dataList.priceList.length>0?false:true"
@click="goScrollHandler(priceListHeight)" @click="goScrollHandler(priceListHeight)"
:class="{ 'q-mt-md full-width': $q.platform.is.desktop }" :class="{ 'q-mt-md full-width': $q.platform.is.desktop }"
/> />
......
src/pages/usercenter/components/navs.vue
View file @ 12e9dbf5
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
<img class="avatar" v-if="LoginUser.photo" :src="LoginUser.photo" /> <img class="avatar" v-if="LoginUser.photo" :src="LoginUser.photo" />
<img class="avatar" v-else src="../../../assets/img/avatar.png" /> <img class="avatar" v-else src="../../../assets/img/avatar.png" />
</div> </div>
<div class="text-primary text-center q-mt-sm">个人信息</div> <div class="text-primary text-center q-mt-sm cursor-pointer" @click="navigateTo('/setUserInfo')">个人信息</div>
<div class="q-mt-xl q-pb-lg"> <div class="q-mt-xl q-pb-lg">
<div <div
class="nav-item flex justify-between items-center cursor-pointer" class="nav-item flex justify-between items-center cursor-pointer"
...@@ -106,7 +106,7 @@ export default { ...@@ -106,7 +106,7 @@ export default {
}, },
{ {
icon: "", icon: "",
key: "/setUserInfo", key: "/setInfo",
label: "账户设置", label: "账户设置",
number: "", number: "",
}, },
......
src/pages/usercenter/coupon.vue
View file @ 12e9dbf5
...@@ -15,84 +15,97 @@ ...@@ -15,84 +15,97 @@
padding: 0 35px; padding: 0 35px;
line-height: 42px; line-height: 42px;
} }
::v-deep .q-field__control { .bg-blue {
height: 40px; background: #70b1fa;
border-radius: 8px 8px 0 0;
.use {
color: #67cac2;
}
}
.bg-red {
background: #ee727d;
border-radius: 8px 8px 0 0;
.use {
color: #6F242B;
}
}
.bg-yellow {
background: #f2c16b;
border-radius: 8px 8px 0 0;
.use {
color: #8A5D10;
}
}
.bg-green {
background: #67cac2;
border-radius: 8px 8px 0 0;
.use {
color: #195954 ;
}
}
.card {
margin: 10px;
width: 201px;
height: 310px;
background: #f9f9f9;
border-radius: 8px;
}
.nav-item {
width: 100px;
margin: 0 10px;
text-align: center;
}
.border-bottom {
width: 20px;
height: 4px;
border-radius: 2px;
background-color: $primary;
margin: -8px auto 0 auto;
} }
.title { .img {
margin-top: 20px; width: 201px;
margin-bottom: 10px; margin-bottom: -6px;
} }
</style> </style>
<template> <template>
<div class="content q-ma-lg bg-white"> <div class="content q-ma-lg bg-white">
<div class="q-ma-lg"> <div class="q-ma-lg">
<div class="tips">密碼管理</div> <div class="tips flex">
<div> <div
<div> @click="changeCouponType(item)"
<div class="q-mt-lg q-mb-sm"> class="nav-item cursor-pointer"
设置密码（8 - 20个字符，须至少包含1个数字、1个字母及1个特殊符号） v-for="item in ['可使用', '已使用', '已过期']"
</div> :key="item"
<div class="text-grey-6">高强度密码能提高账号安全性</div> >
<q-input {{ item }}
class="form-item" <div :class="selectedKey === item ? 'border-bottom' : ''"></div>
v-model="form.firstName"
outlined
placeholder="姓"
ref="firstName"
:rules="[(val) => val !== '' || '请输入姓氏']"
></q-input>
<q-input
class="form-item"
v-model="form.firstName"
outlined
placeholder="姓"
ref="firstName"
:rules="[(val) => val !== '' || '请输入姓氏']"
></q-input>
<div>
<q-btn color="primary" unelevated label="确认" @click="submit" />
</div>
</div> </div>
</div> </div>
</div> <div class="flex flex-wrap">
<div class="card" v-for="item in 10" :key="item">
<div class="q-ma-lg"> <div class="bg-blue">
<div class="tips">通知偏好設置</div> <div class="white text-center f16 q-pt-sm">CYN</div>
<div> <div class="white text-center f26">10</div>
<div> <div class="white text-center">
<div class="q-mt-lg q-mb-sm">優惠及更新信息</div> <span>限用品類：</span><span>滿2000可用</span>
<div class="text-grey-6"> </div>
抢先获取印象最新优惠活动、优惠码、折扣信息及最新动向 <div class="use text-center q-pb-sm">
<span>限用品類：</span><span>滿2000可用</span>
</div>
<img class="img" src="../../assets/img/coupon.png">
</div> </div>
<q-checkbox>电子邮件</q-checkbox> <div class="q-pa-sm">
<q-checkbox>短信</q-checkbox> <div class="q-my-sm">
</div> <span class="text-grey-6">限用品類：</span><span>滿2000可用</span>
<div> </div>
<div>消息提醒</div> <div class="q-my-sm">
<div class="text-grey-6"> <span class="text-grey-6">限用品類：</span><span>滿2000可用</span>
获取购物车内活动及支付状态、评价提醒、推荐好友获取优惠等信息 </div>
<div class="flex flex-center q-mt-xl">
<q-btn color="primary" unelevated outline label="立即使用"></q-btn>
</div>
</div> </div>
<q-checkbox>电子邮件</q-checkbox>
<q-checkbox>短信</q-checkbox>
</div> </div>
<div>
<div>賬戶通知</div>
<div class="text-grey-6">
接收重要通知，如订单摘要、凭证及活动取消
</div>
<q-checkbox>电子邮件</q-checkbox>
<q-checkbox>短信</q-checkbox>
</div>
<div>
<q-btn
color="primary"
unelevated
label="更改偏好設置"
@click="submit"
/>
</div>
<div class="tips q-mt-lg">註銷賬戶</div>
<div class="q-mt-sm">删除您的Klook客路帐户及个人数据</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -101,6 +114,7 @@ ...@@ -101,6 +114,7 @@
export default { export default {
data() { data() {
return { return {
selectedKey: "可使用",
form: { form: {
lastName: "", lastName: "",
firstName: "", firstName: "",
...@@ -111,6 +125,9 @@ export default { ...@@ -111,6 +125,9 @@ export default {
}; };
}, },
methods: { methods: {
changeCouponType(item) {
this.selectedKey = item;
},
submit() { submit() {
const verifyArr = ["fastName", "lastName"]; const verifyArr = ["fastName", "lastName"];
verifyArr.forEach((item) => { verifyArr.forEach((item) => {
......
src/pages/usercenter/order.vue
View file @ 12e9dbf5
...@@ -7,8 +7,25 @@ ...@@ -7,8 +7,25 @@
.content { .content {
width: 900px; width: 900px;
} }
.title {
margin-top: 20px;
margin-bottom: 10px;
}
.card {
margin: 10px;
background: #FFFFFF;
border: 1px solid #EEEEEE;
border-radius: 8px;
}
.card-title {
height: 37px;
height: 37px;
padding: 0 20px;
line-height: 37px;
background: #f5f5f5;
border-radius: 8px 8px 0px 0px;
}
.tips { .tips {
width: 100%;
height: 42px; height: 42px;
background: #f5f5f5; background: #f5f5f5;
border-radius: 8px; border-radius: 8px;
...@@ -18,81 +35,115 @@ ...@@ -18,81 +35,115 @@
::v-deep .q-field__control { ::v-deep .q-field__control {
height: 40px; height: 40px;
} }
::v-deep .q-field--auto-height .q-field__control {
min-height: 40px;
}
::v-deep .q-field__marginal {
height: 40px;
}
.title { .title {
margin-top: 20px; margin-top: 20px;
margin-bottom: 10px; margin-bottom: 10px;
} }
.phone {
margin-left: 100px;
}
.name {
width: 300px;
}
.user-name {
width: 120px;
}
.pay-info {
width: 120px;
}
.order-info {
width: 120px;
}
.order-action {
width: 120px;
}
.nav-item {
width: 100px;
margin: 0 10px;
text-align: center;
}
.border-bottom {
width: 20px;
height: 4px;
border-radius: 2px;
background-color: $primary;
margin: -8px auto 0 auto;
}
</style> </style>
<template> <template>
<div class="content q-ma-lg bg-white"> <div class="content q-ma-lg bg-white">
<div class="q-ma-lg"> <div class="flex justify-between">
<div class="tips">密碼管理</div>
<div> <div>
<div> <q-input
<div class="q-mt-lg q-mb-sm"> ref="lastName"
设置密码（8 - 20个字符，须至少包含1个数字、1个字母及1个特殊符号） class="form-item"
</div> placeholder="名字（需與旅遊證件一致）"
<div class="text-grey-6">高强度密码能提高账号安全性</div> v-model="form.lastName"
<q-input outlined
class="form-item" :rules="[(val) => val !== '' || '请输入名字']"
v-model="form.firstName" ></q-input>
outlined
placeholder="姓"
ref="firstName"
:rules="[(val) => val !== '' || '请输入姓氏']"
></q-input>
<q-input
class="form-item"
v-model="form.firstName"
outlined
placeholder="姓"
ref="firstName"
:rules="[(val) => val !== '' || '请输入姓氏']"
></q-input>
<div>
<q-btn color="primary" unelevated label="确认" @click="submit" />
</div>
</div>
</div> </div>
</div>
<div class="q-ma-lg">
<div class="tips">通知偏好設置</div>
<div> <div>
<div> <q-select
<div class="q-mt-lg q-mb-sm">優惠及更新信息</div> square
<div class="text-grey-6"> outlined
抢先获取印象最新优惠活动、优惠码、折扣信息及最新动向 class="form-item"
</div> v-model="model"
<q-checkbox>电子邮件</q-checkbox> :options="options"
<q-checkbox>短信</q-checkbox> placeholder="Filled"
></q-select>
</div>
</div>
<div class="tips flex">
<div
@click="changeCouponType(item)"
class="nav-item cursor-pointer"
v-for="item in ['全部', '待付款', '待出行', '已完成', '已取消']"
:key="item"
>
{{ item }}
<div :class="selectedKey === item ? 'border-bottom' : ''"></div>
</div> </div>
<div> </div>
<div>消息提醒</div> <div>
<div class="text-grey-6"> <div class="card">
获取购物车内活动及支付状态、评价提醒、推荐好友获取优惠等信息 <div class="flex card-title justify-between">
<div class="flex">
<span>订单号</span>
<span class="phone">联系客服</span>
</div> </div>
<q-checkbox>电子邮件</q-checkbox> <span>2023-02-23 14:31:52</span>
<q-checkbox>短信</q-checkbox>
</div> </div>
<div> <div class="flex q-py-sm">
<div>賬戶通知</div> <img src="../../assets/img/avatar.png" />
<div class="text-grey-6"> <div class="name">
接收重要通知，如订单摘要、凭证及活动取消 <div>
【限量300张·售完即止】2023客路春季踏青
卡（春季特惠不约可退+广东省内周边9大路
</div>
<div>xl</div>
</div>
<div class="user-name">王然</div>
<div class="pay-info">
<div>CNY1188.00</div>
<div>在線支付</div>
</div>
<div class="order-info">
<div>等待收貨</div>
<div>订单详情</div>
</div>
<div class="order-action">
<div>确认收货</div>
<div>取消订单</div>
<div>查看發票</div>
</div> </div>
<q-checkbox>电子邮件</q-checkbox>
<q-checkbox>短信</q-checkbox>
</div>
<div>
<q-btn
color="primary"
unelevated
label="更改偏好設置"
@click="submit"
/>
</div> </div>
<div class="tips q-mt-lg">註銷賬戶</div>
<div class="q-mt-sm">删除您的Klook客路帐户及个人数据</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -101,6 +152,7 @@ ...@@ -101,6 +152,7 @@
export default { export default {
data() { data() {
return { return {
selectedKey: "全部",
form: { form: {
lastName: "", lastName: "",
firstName: "", firstName: "",
...@@ -111,6 +163,9 @@ export default { ...@@ -111,6 +163,9 @@ export default {
}; };
}, },
methods: { methods: {
changeCouponType(item) {
this.selectedKey = item;
},
submit() { submit() {
const verifyArr = ["fastName", "lastName"]; const verifyArr = ["fastName", "lastName"];
verifyArr.forEach((item) => { verifyArr.forEach((item) => {
......
src/pages/usercenter/setUserInfo.vue
View file @ 12e9dbf5
...@@ -17,6 +17,15 @@ ...@@ -17,6 +17,15 @@
::v-deep .q-field__control { ::v-deep .q-field__control {
height: 40px; height: 40px;
} }
::v-deep .q-field--auto-height .q-field__control {
min-height: 40px;
}
::v-deep .q-field__marginal {
height: 40px;
}
::v-deep .q-field--auto-height .q-field__native {
min-height: 40px;
}
.title { .title {
margin-top: 20px; margin-top: 20px;
margin-bottom: 10px; margin-bottom: 10px;
...@@ -30,28 +39,29 @@ ...@@ -30,28 +39,29 @@
> >
</div> </div>
<div> <div>
<form @submit.prevent.stop="submit" class="q-gutter-md">
<div> <div>
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<div class="title">姓</div> <div class="title">姓</div>
<q-input <q-input
class="form-item" class="form-item"
v-model="form.firstName" v-model="form.Surname"
outlined outlined
placeholder="姓" placeholder="姓"
ref="firstName" ref="Surname"
:rules="[(val) => val !== '' || '请输入姓氏']" :rules="[(val) => !!val || '请输入姓氏']"
></q-input> ></q-input>
</div> </div>
<div class="col"> <div class="col">
<div class="title">名</div> <div class="title">名</div>
<q-input <q-input
ref="lastName" ref="Name"
class="form-item" class="form-item"
placeholder="名" placeholder="名"
v-model="form.lastName" v-model="form.Name"
outlined outlined
:rules="[(val) => val !== '' || '请输入名字']" :rules="[(val) => !!val || '请输入名字']"
></q-input> ></q-input>
</div> </div>
</div> </div>
...@@ -60,76 +70,130 @@ ...@@ -60,76 +70,130 @@
<div class="title">姓氏（需與旅遊證件一致）</div> <div class="title">姓氏（需與旅遊證件一致）</div>
<q-input <q-input
class="form-item" class="form-item"
v-model="form.firstName" v-model="form.EnName"
outlined outlined
placeholder="姓氏（需與旅遊證件一致）" placeholder="姓氏（需與旅遊證件一致）"
ref="firstName" ref="EnName"
:rules="[(val) => val !== '' || '请输入姓氏']" :rules="[(val) => !!val || '请输入姓氏（需與旅遊證件一致）']"
></q-input> ></q-input>
</div> </div>
<div class="col"> <div class="col">
<div class="title">名字（需與旅遊證件一致）</div> <div class="title">名字（需與旅遊證件一致）</div>
<q-input <q-input
ref="lastName" ref="EnSurname"
class="form-item" class="form-item"
placeholder="名字（需與旅遊證件一致）" placeholder="名字（需與旅遊證件一致）"
v-model="form.lastName" v-model="form.EnSurname"
outlined outlined
:rules="[(val) => val !== '' || '请输入名字']" :rules="[(val) => !!val || '请输入名字（需與旅遊證件一致）']"
></q-input> ></q-input>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<div class="title">居住國家/地區</div> <div class="title">居住國家/地區</div>
<q-select filled v-model="model" :options="options" label="Filled" /> <q-select
ref="Country"
square
outlined
option-value="ID"
option-label="Name"
class="form-item"
v-model="form.Country"
:options="countList"
placeholder="Filled"
:rules="[(val) => Boolean(val) || '请选择居住國家/地區']"
/>
</div> </div>
<div class="col"> <div class="col">
<div class="title">稱謂</div> <div class="title">稱謂</div>
<q-select filled v-model="model" :options="options" label="Filled" /> <q-select
ref="Appellation"
square
outlined
class="form-item"
option-value="ID"
option-label="Name"
v-model="form.Appellation"
:options="AppellationList"
placeholder="Filled"
:rules="[(val) => Boolean(val) || '请选择稱謂']"
/>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<div class="title">國家/地區代碼</div> <div class="title">國家/地區代碼</div>
<q-select filled v-model="model" :options="options" label="Filled" /> <q-select
ref="PhoneCountry"
square
outlined
option-value="ID"
option-label="PhoneCode"
class="form-item"
v-model="form.PhoneCountry"
:options="phoneCountList"
placeholder="Filled"
:rules="[(val) => Boolean(val) || '请选择國家/地區代碼']"
/>
</div> </div>
<div class="col"> <div class="col">
<div class="title">電話（首次需驗證）</div> <div class="title">電話（首次需驗證）</div>
<q-input <q-input
ref="lastName" ref="Moblie"
class="form-item" class="form-item"
placeholder="名字（需與旅遊證件一致）" placeholder="電話（首次需驗證）"
v-model="form.lastName" v-model="form.Moblie"
outlined outlined
:rules="[(val) => val !== '' || '请输入名字']" :rules="[(val) => !!val || '请输入電話（首次需驗證）']"
></q-input> ></q-input>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<div class="title">出生日期</div><q-date <div class="title">出生日期</div>
v-model="date" <q-input
minimal ref="BirthDate"
/> class="form-item"
placeholder="出生日期"
v-model="form.BirthDate"
outlined
mask="date"
:rules="[(val) => !!val || '请选择出生日期']"
>
<template v-slot:append>
<q-icon name="event" class="cursor-pointer">
<q-popup-proxy ref="qS1DateProxy">
<q-date
mask="YYYY-MM-DD"
:title="$t('search_date_begin')"
subtitle="選擇"
v-model="form.BirthDate"
@input="() => $refs.qS1DateProxy.hide()"
/>
</q-popup-proxy>
</q-icon>
</template>
</q-input>
</div> </div>
<div class="col"> <div class="col">
<div class="title">電子郵件（接收订单确认邮件）</div> <div class="title">電子郵件（接收订单确认邮件）</div>
<q-input <q-input
ref="lastName" ref="Mailbox"
class="form-item" class="form-item"
placeholder="名字（需與旅遊證件一致）" placeholder="電子郵件（接收订单确认邮件）"
v-model="form.lastName" v-model="form.Mailbox"
outlined outlined
:rules="[(val) => val !== '' || '请输入名字']" :rules="[(val) => !!val || '请输入電子郵件（接收订单确认邮件）']"
></q-input> ></q-input>
</div> </div>
</div> </div>
<div> <div>
<q-btn color="primary" unelevated label="保存" @click="submit" /> <q-btn color="primary" type="submit" unelevated label="保存" />
</div> </div>
</div> </div>
</form>
</div> </div>
</div> </div>
</template> </template>
...@@ -138,28 +202,145 @@ export default { ...@@ -138,28 +202,145 @@ export default {
data() { data() {
return { return {
form: { form: {
lastName: "", Surname: "",
firstName: "", Name: "",
BirthDate: "",
Appellation: "",
EnName: "",
EnSurname: "",
Country: "",
Moblie: "",
}, },
model: '', model: "",
date: '', date: "",
options: [] phoneCountList: [],
countList: [],
AppellationList: [],
}; };
}, },
mounted() {
this.userInfo = JSON.parse(window.localStorage.getItem("b2bUser"));
console.log("getUserInfo", this.userInfo);
this.getUserInfo();
this.getCountryInfo();
this.GetAppellationEnum();
},
methods: { methods: {
getCountryInfo() {
this.apipost(
"GetCountryInfo_post",
{},
(res) => {
if (res.data.resultCode == 1) {
const { phoneCountList, countList } = res.data.data;
this.countList = countList;
this.phoneCountList = phoneCountList;
} else {
// this.$notify(res.data.message);
this.$q.notify({
type: "negative",
message: res.data.message,
position: "top",
timeout: 2000, // 以毫秒为单位; 0意味着没有超时
});
}
},
null
);
},
GetAppellationEnum() {
this.apipost(
"GetAppellationEnum_post",
{},
(res) => {
if (res.data.resultCode == 1) {
this.AppellationList = res.data.data;
} else {
// this.$notify(res.data.message);
this.$q.notify({
type: "negative",
message: res.data.message,
position: "top",
timeout: 2000, // 以毫秒为单位; 0意味着没有超时
});
}
},
null
);
},
getUserInfo() {
this.apipost(
"GetCustomerInfo_post",
{
Id: this.userInfo?.id,
},
(res) => {
if (res.data.resultCode == 1) {
this.form = res.data.data;
} else {
// this.$notify(res.data.message);
this.$q.notify({
type: "negative",
message: res.data.message,
position: "top",
timeout: 2000, // 以毫秒为单位; 0意味着没有超时
});
}
},
null
);
},
submitUserInfo() {
let params = {...this.form}
params.Appellation = params.Appellation.ID
params.Country = params.Country.ID
params.PhoneCountry = params.PhoneCountry.ID
this.apipost(
"UpdateUserInfo_post",
params,
(res) => {
if (res.data.resultCode == 1) {
this.$q.notify({
type: "positive",
message: res.data.message,
position: "top",
timeout: 2000, // 以毫秒为单位; 0意味着没有超时
});
} else {
// this.$notify(res.data.message);
this.$q.notify({
type: "negative",
message: res.data.message,
position: "top",
timeout: 2000, // 以毫秒为单位; 0意味着没有超时
});
}
},
null
) ;
},
submit() { submit() {
const verifyArr = ['fastName', 'lastName']; this.formHasError = false;
const verifyArr = ["Surname", "Name", "BirthDate", "Appellation", "EnName", "EnSurname", "Country", "Moblie"];
verifyArr.forEach((item) => { verifyArr.forEach((item) => {
console.log('this.$refs[item]', this, item, this.$refs[item])
this.$refs[item].validate(); this.$refs[item].validate();
}); });
// this.$refs.Surname.validate();
// this.$refs.Name.validate();
// this.$refs.BirthDate.validate();
verifyArr.forEach((item) => { verifyArr.forEach((item) => {
if (item.$refs[item].hasError) { console.log('item', item)
if (this.$refs[item].hasError) {
console.log('item', item)
this.formHasError = true; this.formHasError = true;
} }
}); });
if ((this.formHasError = true)) { console.log('this.formHasError', this.formHasError, this.form)
if (this.formHasError) {
return; return;
} }
this.submitUserInfo();
}, },
}, },
}; };
......
src/pages/usercenter/setUsersList.vue
View file @ 12e9dbf5
...@@ -25,8 +25,8 @@ ...@@ -25,8 +25,8 @@
<template> <template>
<div class="content q-ma-lg bg-white q-pa-lg"> <div class="content q-ma-lg bg-white q-pa-lg">
<div class="tips"> <div class="tips">
個人信息<span class="text-grey-6" 出行人<span class="text-grey-6"
>(以下信息仅用于帮助你在支付时自动填写你的个人资料，你的信息将会安全地被印象保存且不会公开)</span >共計 3人，最多新增20人(含本人)</span
> >
</div> </div>
<div> <div>
......
src/router/routes.js
View file @ 12e9dbf5
...@@ -51,74 +51,94 @@ const routes = [{ ...@@ -51,74 +51,94 @@ const routes = [{
}, },
{ {
path: '/account', //用户信息 path: '/account', //用户信息
meta: {isUserCenter: true},
component: () => component: () =>
import ('pages/usercenter/account.vue') import ('pages/usercenter/account.vue')
}, },
{ {
path: '/demandlist', //需求单列表 path: '/demandlist', //需求单列表
meta: {isUserCenter: true},
component: () => component: () =>
import ('pages/usercenter/demandlist.vue') import ('pages/usercenter/demandlist.vue')
}, },
{ {
path: '/demandinfo/:id', //需求单详情 path: '/demandinfo/:id', //需求单详情
meta: {isUserCenter: true},
component: () => component: () =>
import ('pages/usercenter/demandinfo.vue') import ('pages/usercenter/demandinfo.vue')
}, },
{ {
path: '/orderlist', //订单列表 path: '/orderlist', //订单列表
meta: {isUserCenter: true},
component: () => component: () =>
import ('pages/usercenter/orderlist.vue') import ('pages/usercenter/orderlist.vue')
}, },
{ {
path: '/orderinfo/:id', //订单详情 path: '/orderinfo/:id', //订单详情
meta: {isUserCenter: true},
component: () => component: () =>
import ('pages/usercenter/orderinfo.vue') import ('pages/usercenter/orderinfo.vue')
}, },
{ {
path: '/passengerList/:id', //旅客名单 path: '/passengerList/:id', //旅客名单
meta: {isUserCenter: true},
component: () => component: () =>
import ('pages/usercenter/passengerList.vue') import ('pages/usercenter/passengerList.vue')
}, },
{ {
path: '/register', //用户注册 path: '/register', //用户注册
meta: {isUserCenter: true},
component: () => component: () =>
import ('pages/usercenter/register.vue') import ('pages/usercenter/register.vue')
}, },
{ {
path: '/loginInfo', //账户设置 path: '/loginInfo', //账户设置
meta: {isUserCenter: true},
component: () => component: () =>
import ('pages/usercenter/loginInfo.vue') import ('pages/usercenter/loginInfo.vue')
}, },
{ {
path: '/setAddress', //地址管理 path: '/setAddress', //地址管理
meta: {isUserCenter: true},
component: () => component: () =>
import ('pages/usercenter/setAddress.vue') import ('pages/usercenter/setAddress.vue')
}, },
{ {
path: '/setInfo', //账户设置 path: '/setInfo', //账户设置
meta: {isUserCenter: true},
component: () => component: () =>
import ('pages/usercenter/setInfo.vue') import ('pages/usercenter/setInfo.vue')
}, },
{ {
path: '/setUserInfo', //用户信息 path: '/setUserInfo', //用户信息
meta: {isUserCenter: true},
component: () => component: () =>
import ('pages/usercenter/setUserInfo.vue') import ('pages/usercenter/setUserInfo.vue')
}, },
{ {
path: '/coupon', //优惠券 path: '/coupon', //优惠券
meta: {isUserCenter: true},
component: () => component: () =>
import ('pages/usercenter/coupon.vue') import ('pages/usercenter/coupon.vue')
}, },
{ {
path: '/order', //用户订单 path: '/order', //用户订单
meta: {isUserCenter: true},
component: () => component: () =>
import ('pages/usercenter/order.vue') import ('pages/usercenter/order.vue')
}, },
{ {
path: '/setUsersList', //用户订单 path: '/setUsersList', //用户订单
meta: {isUserCenter: true},
component: () => component: () =>
import ('pages/usercenter/setUsersList.vue') import ('pages/usercenter/setUsersList.vue')
}, },
{
path: '/payInfo', //支付管理
meta: {isUserCenter: true},
component: () =>
import ('pages/usercenter/payInfo.vue')
},
{ {
path: '/customer/:id', //自定义页面 path: '/customer/:id', //自定义页面
component: () => component: () =>
......
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