Skip to content

M
million
Commit b29a2fea authored by 吴春's avatar 吴春
Browse files
Options

1

parent 1e0b3bfa
Hide whitespace changes
Inline Side-by-side
Showing with 1124 additions and 83 deletions
src/components/car/Map.vue
View file @ b29a2fea
......@@ -27,6 +27,7 @@
AddressObj:{
handler(newValue,onldValue) {
this.center = newValue
console.log(" this.center", this.center);
},
deep:true,
immediate:true
......@@ -47,45 +48,63 @@
},
methods: {
createMap() {
if (!BMapGL) {
return;
if (this.map) {
this.map.clearOverlays()
}
let map = new BMapGL.Map(`baidu-map_${this.center.Id}`); // 创建地图实例
let point = new BMapGL.Point(this.center.Lng, this.center.Lat); // 创建点坐标
let map = new BMap.Map(`baidu-map_${this.center.Id}`); // 创建地图实例
let point = new BMap.Point(this.center.Lng, this.center.Lat); // 创建点坐标
map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
map.enableScrollWheelZoom(true);
var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
map.addControl(scaleCtrl);
var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件//开启鼠标滚轮缩放
map.addControl(zoomCtrl);
// var scaleCtrl = new BMap.ScaleControl(); // 添加比例尺控件
// map.addControl(scaleCtrl);
// var zoomCtrl = new BMap.ZoomControl(); // 添加缩放控件//开启鼠标滚轮缩放
// map.addControl(zoomCtrl);
var marker = new BMap.Marker(point); //标记点
// var label = new BMap.Label(this.center.Name, {
// offset: new BMap.Size(0, 28)
// }); //标签
// label.setStyle({
// color: "#FFF",
// fontSize: "10px",
// height: "24px",
// lineHeight: "20px",
// padding: "2px 5px",
// border: "1px solid rgba(230, 0, 0, 0.7)",
// background: "rgba(230, 0, 0, 0.7)",
// fontWeight: "bold",
// transform: 'translateX(-50%)',
// fontFamily: "微软雅黑"
// })
// marker.setLabel(label)
map.addOverlay(marker);
this.map = map;
},
addMarker() {
let icon = require(`../../assets/img/marker.png`);
var myIcon = new BMapGL.Icon(icon, new BMapGL.Size(23, 25), {
var myIcon = new BMap.Icon(icon, new BMap.Size(23, 25), {
// 指定定位位置。
// 当标注显示在地图上时，其所指向的地理位置距离图标左上
// 角各偏移10像素和25像素。您可以看到在本例中该位置即是
// 图标中央下端的尖角位置。
anchor: new BMapGL.Size(10, 25),
anchor: new BMap.Size(10, 25),
// 设置图片偏移。
// 当您需要从一幅较大的图片中截取某部分作为标注图标时，您
// 需要指定大图的偏移位置，此做法与css sprites技术类似。
// imageOffset: new BMapGL.Size(0, 0 - 25) // 设置图片偏移
});
let point = new BMapGL.Point(this.center.Lng, this.center.Lat); // 创建点坐标
let point = new BMap.Point(this.center.Lng, this.center.Lat); // 创建点坐标
// 创建标注对象并添加到地图
var marker = new BMapGL.Marker(point, { icon: myIcon });
var marker = new BMap.Marker(point, { icon: myIcon });
this.map.addOverlay(marker);
},
addLabel() {
var point = new BMapGL.Point(this.center.Lng, this.center.Lat);
var point = new BMap.Point(this.center.Lng, this.center.Lat);
var content = this.center.Address;
var label = new BMapGL.Label(content, {
var label = new BMap.Label(content, {
// 创建文本标注
position: point, // 设置标注的地理位置
offset: new BMapGL.Size(10, -60), // 设置标注的偏移量
offset: new BMap.Size(10, -60), // 设置标注的偏移量
});
this.map.addOverlay(label); // 将标注添加到地图中
label.addEventListener("click", function (e) {
......@@ -101,18 +120,18 @@
});
},
addCircle(){
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 mPoint = new BMap.Point(this.center.Lng, this.center.Lat);
var circle = new BMap.Circle(mPoint,this.center.Range,{fillColor:"blue", strokeWeight: 1 ,fillOpacity: 0.3, strokeOpacity: 0.3});
this.map.addOverlay(circle);
let getNeSw = circle.getBounds()
var mPoint1 = new BMapGL.Point(getNeSw.ne.lng,getNeSw.ne.lat)
var mPoint2 = new BMapGL.Point(getNeSw.sw.lng,getNeSw.sw.lat)
var mPoint1 = new BMap.Point(getNeSw.ne.lng,getNeSw.ne.lat)
var mPoint2 = new BMap.Point(getNeSw.sw.lng,getNeSw.sw.lat)
let points=[mPoint1,mPoint2]
this.map.centerAndZoom(mPoint, this.map.getViewport(points).zoom+1);
},
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}});
var mPoint = new BMap.Point(this.center.Lng, this.center.Lat);
var local = new BMap.LocalSearch(this.map, {renderOptions: {map: this.map, autoViewport: false}});
local.searchNearby(this.keywords,mPoint,this.center.Range);
},
......
src/components/planeticket/kkday.vue
View file @ b29a2fea
......@@ -127,8 +127,8 @@
<q-card flat class="rounded-borders q-py-md q-mt-lg">
<div class="text-subtitle1 text-weight-bold q-mx-md">行程類型</div>
<div class="q-gutter-sm" style=" display: inline-flex; justify-content: space-around;">
<q-radio v-model="msg.TicketType" val="1" label="往返" :dense="true" style="margin-left:1.5rem;"/>
<q-radio v-model="msg.TicketType" val="2" label="单程" :dense="true" style="margin-left:2rem;"/>
<q-radio @input="handleTicked" v-model="msg.TicketType" val="1" label="往返" :dense="true" style="margin-left:1.5rem;"/>
<q-radio @input="handleTicked" v-model="msg.TicketType" val="2" label="单程" :dense="true" style="margin-left:2rem;"/>
</div>
</q-card>
......@@ -271,7 +271,7 @@
:class="$q.platform.is.desktop ? 'row q-mb-md' : 'colmuns q-ma-md'"
v-for="(x, i) in DataList" :key="i" >
<template v-if="x.AirlineUrl&&x.AirlineUrl.length>0">
<!-- <template v-if="x.AirlineUrl&&x.AirlineUrl.length>0">
<q-img
:src="x.AirlineUrl"
:ratio="1"
......@@ -290,67 +290,92 @@
:width="$q.platform.is.desktop ? '272px' : ''"
:height="$q.platform.is.desktop ? '' : '200px'"
class="bg-grey-3" />
</template>
<div class="q-pa-md col column">
<!-- <div class="text-subtitle1 text-weight-bold text-grey-9" @click="GotoDetails(x)">
{{ x.AirLineName }}
</div> -->
</template> -->
<div class="q-pa-md col column" @click="GotoDetails(x)">
<div class="col" v-for="(item, index) in x.FlightList" >
<div class="row items-center f12 text-grey-6 q-mt-md">
<q-chip dense color="orange" text-color="white" style="height:40px;font-size:12px;">
<div style=" writing-mode: vertical-lr; transform: rotate(0deg);">{{item.FlightSubType==1?'去&nbsp;程':'回&nbsp;程'}}</div> </q-chip>
<div outline color="secondary" >
<div style="display: flex;">
<div style="margin-right:10px;">
{{item.dName}}
<q-space />
{{item.Departure_time}}
</div>
<div>
<template v-if="item.FlightSubType==1&&x.DepartureTime">
<template v-if="x.DepartureTime.Days>0"><span>{{x.DepartureTime.Days}}h&nbsp;</span></template>
<template v-if="x.DepartureTime.Hours>0"><span> {{x.DepartureTime.Hours}}m&nbsp;</span></template>
<template v-if="x.DepartureTime.Minutes>0"> <span> {{x.DepartureTime.Minutes}}s&nbsp;</span></template>
<template v-if="item.StopType==2">经停</template>
</template>
<template v-else-if="item.FlightSubType==3&&x.ArrivalTime">
<template v-if="x.ArrivalTime.Days>0"><span>{{x.ArrivalTime.Days}}h&nbsp;</span></template>
<template v-if="x.ArrivalTime.Hours>0"><span> {{x.ArrivalTime.Hours}}m&nbsp;</span></template>
<template v-if="x.ArrivalTime.Minutes>0"> <span> {{x.ArrivalTime.Minutes}}s&nbsp;</span></template>
</template>
<q-separator color="orange" inset style="margin-left:0px !important; margin-right:0px !important;" />
<q-space />
<!-- 启程 -->
<div class="col" v-for="(item, index) in x.FlightList" :style="(x.StartTripNum-1)==index?'margin-bottom:15px':''">
<div class="row items-center f12 text-grey-6 q-mt-md" >
<q-chip dense color="orange" text-color="white" style="height:40px;font-size:12px;">
<div style=" writing-mode: vertical-lr; transform: rotate(0deg);">{{item.FlightSubType==1?'去&nbsp;程':'回&nbsp;程'}}</div> </q-chip>
<div outline color="secondary" >
<div style="display: flex;">
<div style="margin-right:20px;margin-left:5px;">
{{item.dName}}
<q-space />
<div style="color:#333;"> {{item.FlightDate}} {{item.Departure_time}}</div>
</div>
<div style="margin-right:20px;min-width:100px;width:auto;">
<div style="text-align:center;">
{{item.Flight_number}}
<!-- +{{item.Span_days}} -->
</div>
<q-separator color="orange" inset style="margin-left:0px !important; margin-right:0px !important;" />
<q-space />
<div >
<div style="margin-left: 5px;float: left;"> {{item.DepartureName}}</div>
<!-- <div style="text-align:center;margin:0px 5px;">
<template v-if="item.FlightSubType==1&&x.DepartureTime">
<template v-if="x.DepartureTime.Days>0"><span>{{x.DepartureTime.Days}}h&nbsp;</span></template>
<template v-if="x.DepartureTime.Hours>0"><span> {{x.DepartureTime.Hours}}m&nbsp;</span></template>
<template v-if="x.DepartureTime.Minutes>0"> <span> {{x.DepartureTime.Minutes}}s&nbsp;</span></template>
<template v-if="item.StopType==2">经停</template>
</template>
<template v-else-if="item.FlightSubType==3&&x.ArrivalTime">
<template v-if="x.ArrivalTime.Days>0"><span>{{x.ArrivalTime.Days}}h&nbsp;</span></template>
<template v-if="x.ArrivalTime.Hours>0"><span> {{x.ArrivalTime.Hours}}m&nbsp;</span></template>
<template v-if="x.ArrivalTime.Minutes>0"> <span> {{x.ArrivalTime.Minutes}}s&nbsp;</span></template>
</template>
</div> -->
<div style="margin-right: 5px;float: right;">{{item.ArrivalCityName}}</div>
</div>
</div>
<div style="margin-left:10px;">
{{item.aName}}
<q-space />
{{item.Arrival_time}}
</div>
{{item.DepartureCountry}} {{item.ArrivalCountry}}
</div>
</div>
<div style="margin-left:10px;">
{{item.aName}}
<q-space />
{{item.Arrival_time}}
</div>
</div>
</div>
</div>
<q-space />
</div>
<q-space />
</div>
<div class="row items-end" @click="GotoDetails(x)">
<!-- <q-icon
size="12px"
name="iconfont iconigw-l-date-trade"
class="q-mr-sm"
></q-icon>
<q-badge outline color="secondary" :label="x.FlightDate" /> -->
<div class="row items-end" >
<div class="col f12">
<span>起飞时间：</span>
<span class="text-primary text-weight-bold q-pr-sm q-mr-sm" style="border-right: 1px solid #efefef" >{{ x.FlightDate }} {{x.WeekDayStr}}</span>
<!-- <span>起飞时间：</span>
<span class="text-primary text-weight-bold q-pr-sm q-mr-sm" style="border-right: 1px solid #efefef" >{{ x.FlightDate }} {{x.WeekDayStr}}</span> -->
<span class="text-primary text-weight-bold q-pr-sm q-mr-sm" style="border-right: 1px solid #efefef" >
<template v-if="x.AirlineUrl&&x.AirlineUrl.length>0">
<q-img
rounded
:src="x.AirlineUrl"
:ratio="1"
spinner-color="grey"
spinner-size="20px"
:width="$q.platform.is.desktop ? '27px' : ''"
:height="$q.platform.is.desktop ? '' : '20px'"
class="bg-grey-3"
style="border-radius:50%;"
/>
</template>
<template v-else>
<q-img
rounded
:ratio="1"
spinner-color="grey"
spinner-size="20px"
:width="$q.platform.is.desktop ? '27px' : ''"
:height="$q.platform.is.desktop ? '' : '20px'"
class="bg-grey-3" style="border-radius:50%;" />
</template>
{{ x.AirLineName }} </span>
<span>剩餘空位：</span>
<span class="text-secondary text-weight-bold" >{{ x.B2BSellNum }}</span>
</div>
......@@ -361,8 +386,7 @@
</div>
</div>
</div>
<div
v-else-if="!$q.loading.isActive &&DataList&& DataList.length == 0"
<div v-else-if="!$q.loading.isActive &&DataList&& DataList.length == 0"
class="text-center q-mt-xl"
>
<div class="text-center inline-block">
......@@ -902,7 +926,7 @@ export default {
},
GotoDetails(item) {
this.CommonJump('/detailsProduct/' + encodeURIComponent(item.id)+ "/" + item.configId,{}, "blank");
this.CommonJump('/planeticketOrder/' + encodeURIComponent(item.TCID),{}, "blank");
},
SwitchTCID(obj,i,index) {
if(this.DataList&&this.DataList.length>0){
......
src/index.template.html
View file @ b29a2fea
......@@ -19,7 +19,16 @@
<link rel="icon" type="image/ico" href="statics/icons/favicon.ico">
<!-- <script async defer crossorigin="anonymous" src="https://connect.facebook.net/zh_CN/sdk.js#xfbml=1&version=v7.0" nonce="bDrSmWhp"></script> -->
<!-- <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=OBd2bhrqKUSbQGpniCZ996suti9YG7Bc"></script> -->
<script src="https://api.map.baidu.com/api?type=webgl&v=2.0&ak=OBd2bhrqKUSbQGpniCZ996suti9YG7Bc"></script>
<!--HK 2024-08-15 新加(避免提示为商用授权) Start-->
<script type="text/javascript" src="//api.map.baidu.com/api?key=&v=1.1&services=true&s=1"></script>
<script type="text/javascript" src="https://api.map.baidu.com/getscript?v=2.0&ak=&services=&t=20240731110958"></script>
<!--
<script charset="utf8" src="https://dlswbr.baidu.com/heicha/mw/abclite-2063-s.original.js?_=9975"></script>
<script type="text/javascript" src="https://api.map.baidu.com/getscript?v=1.1&ak=&services=true&t=20130716024058"></script>
<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&s=1"></script>
-->
<!--HK 2024-08-15 新加 End -->
<script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
<script>
function countryCb(r) {
......@@ -30,7 +39,7 @@
}, 1000);
} else {
loadScriptString('https://api.map.baidu.com/api?type=webgl&v=2.0&ak=OBd2bhrqKUSbQGpniCZ996suti9YG7Bc')
// loadScriptString('https://api.map.baidu.com/api?type=webgl&v=3.0&ak=L5Qw0GlbbCIMwgR4Uug3ogM40Imkd3CV')
}
}
......
src/pages/line/planeticketOrder.vue 0 → 100644
View file @ b29a2fea
<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,
}"
v-if="orderKey && orderKey != '' && trip "
>
<div class="col">
<q-card flat class="q-pa-md">
<div
class="text-subtitle1 text-weight-bolder"
ref="baseUserInfoTitle"
>
訂購人資訊
</div>
<q-separator color="grey-2" class="q-my-md" />
<q-form ref="baseUserInfo">
<div class="row q-col-gutter-md">
<div :class="filedWidth">
<q-input
standout
v-model="userInfo.Name"
label="名字"
ref="name"
:rules="[(val) => !!val || '請輸入名字']"
/>
</div>
<div :class="filedWidth">
<q-input
standout
v-model="userInfo.Surname"
ref="surname"
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.Moblie"
label="電話"
mask="#"
reverse-fill-mask
ref="mobile"
:rules="[(val) => !!val || '請輸入行動電話']"
>
<template v-slot:prepend>
<div class="text-subtitle2">
{{ userInfo.PhoneCountryStr }}
</div>
</template>
</q-input>
</div>
<div :class="filedWidth">
<q-input
standout
v-model="userInfo.Mailbox"
label="郵箱地址"
ref="mailbox"
:rules="[
(val) =>
/^[a-zA-Z0-9]+([-_.][A-Za-zd]+)*@([a-zA-Z0-9]+[-.])+[A-Za-zd]{2,5}$/.test(
val
) || '請輸入正確的郵箱地址',
]"
/>
</div>
<div :class="filedWidth">
<q-toggle v-model="isUpdateUserInfo" label="同步更新會員資料" />
</div>
</div>
</q-form>
</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="trip.FlightList[0].AlImage"
class="rounded-borders"
spinner-color="grey-3"
style="width: 80px"
/>
<div class="q-ml-md col">
<div class="text-subtitle1 ellipsis">
{{ trip.FlightList[0].AlName }}
</div>
<!-- <div class="text-caption text-grey-6 ellipsis q-mt-sm">
{{ trip.ltName }}
</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>{{ price.startDate }}</span>
</div>
<div class="text-grey-9 q-ml-md">
<q-icon name="iconfont iconpeople" size="20px" class="q-mr-sm" />
<span class="q-mr-sm" v-if="chosenObj.crCount > 0"
>成人 x {{ chosenObj.crCount }}</span
>
<span class="q-mr-sm" v-if="chosenObj.etzcCount"
>兒童占床 x {{ chosenObj.etzcCount }}</span
>
<span class="q-mr-sm" v-if="chosenObj.etbzcCount"
>兒童不占床 x {{ chosenObj.etbzcCount }}</span
>
<span class="q-mr-sm" v-if="chosenObj.yeCount"
>婴儿 x {{ chosenObj.yeCount }}</span
>
<span class="q-mr-sm" v-if="chosenObj.df"
>单房间 x {{ chosenObj.df }}</span
>
</div> -->
</div>
<div class="text-right">
<q-toggle v-model="isCreateGuest" label="是否預填旅客信息" />
</div>
<q-separator color="grey-2" class="q-mt-md" />
<template v-if="isCreateGuest">
<div
class="bg-grey-1 rounded-borders q-pa-md q-mt-md guest-item"
v-for="(x, i) in guests"
:key="i"
:ref="`guest${i}Title`"
>
<div class="text-subtitle1 q-pb-md text-weight-bold">
{{ x.FormatTypeName }}
</div>
<q-form :ref="`guest${i}`">
<div class="row q-col-gutter-md">
<div :class="filedGuestWidth">
<q-input
standout
v-model="x.SurName"
label="本國姓"
placeholder="例：張"
:rules="[(val) => !!val || '請輸本國姓']"
/>
</div>
<div :class="filedGuestWidth">
<q-input
standout
v-model="x.Name"
label="本國名"
placeholder="例：三"
:rules="[(val) => !!val || '請輸本國名']"
/>
</div>
<div :class="filedGuestWidth">
<div class="row items-center q-mt-md">
<span>選擇性別：</span>
<q-radio
v-model="x.Sex"
dense
:val="1"
label="男"
class="q-mr-lg"
/>
<q-radio v-model="x.Sex" dense :val="2" label="女" />
</div>
</div>
<div :class="filedGuestWidth">
<q-input
standout
v-model="x.ESurName"
label="護照英文姓"
placeholder="例：ZHANG"
mask="A"
reverse-fill-mask
:rules="[(val) => !!val || '請輸護照英文姓']"
/>
</div>
<div :class="filedGuestWidth">
<q-input
standout
v-model="x.EName"
label="護照英文名"
placeholder="例：SAN"
mask="A"
reverse-fill-mask
:rules="[(val) => !!val || '請輸護照英文名']"
/>
</div>
<div :class="filedGuestWidth">
<q-input
standout
v-model="x.PassportNo"
label="護照號"
mask="X"
reverse-fill-mask
:rules="[(val) => !!val || '請輸護照號']"
/>
</div>
<div :class="filedGuestWidth">
<q-input
standout
v-model="x.PassportExpiry"
label="護照有效期"
readonly
:rules="[(val) => !!val || '請選擇護照有效期']"
>
<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="x.PassportExpiry"
/>
</q-popup-proxy>
</q-input>
</div>
<div :class="filedGuestWidth">
<q-input
standout
v-model="x.Birthday"
label="出生日期"
readonly
:rules="[(val) => !!val || '請選擇旅客出生日期']"
>
<template v-slot:append>
<q-icon name="event" class="cursor-pointer"></q-icon>
</template>
<q-popup-proxy :offset="[0, 0]" ref="qDateProxy8">
<q-date
mask="YYYY-MM-DD"
:title="$t('search_date_begin')"
subtitle="選擇"
v-model="x.Birthday"
/>
</q-popup-proxy>
</q-input>
</div>
<div :class="filedGuestWidth" v-if="x.GuestType == 1">
<q-input
standout
v-model="x.MobilePhone"
label="聯絡電話"
mask=""
reverse-fill-mask
placeholder="格式：國家區號+號碼，例如：+81 25xxxx"
/>
</div>
<div :class="filedGuestWidth" v-if="x.EnableSignRoom">
<q-toggle
v-model="x.IsSignRoom"
:disable="disableSign && !x.IsSignRoom"
@input="changeRoomHandler"
label="入住單房"
/>
</div>
</div>
</q-form>
</div>
</template>
<div class="text-subtitle1 q-my-md text-weight-bold">
特殊需求備註：
</div>
<q-input
standout
v-model="chosenObj.remark"
input-style="height:170px;"
type="textarea"
placeholder="此欄位僅限資料備註。不在商品規範內的個人需求，不保證提供"
maxlength="200"
counter
/>
</q-card>
<coupon
v-if="price && price.tcid"
:product-type="productType"
:current-price="sumPrice"
@change="changeDiscountHandler"
></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="trip.FlightList[0].AlImage"
class="rounded-borders"
spinner-color="grey-3"
style="width: 80px"
/>
<div class="q-ml-md col">
<div class="text-subtitle1 ellipsis">
{{ trip.FlightList[0].AlName }}
</div>
<!-- <div class="text-caption text-grey-6 ellipsis q-mt-sm">
{{ trip.ltName }}
</div> -->
</div>
</div>
<div class="q-mt-md text-grey-6">
<div class="row" v-if="(unionCity&&unionCity.cityName)||(trip&&trip.startCityName)">
<div style="width: 80px">出發城市：</div>
<div class="q-ml-md">
<!-- {{ unionCity ? unionCity.cityName : trip.startCityName }}起止 -->
</div>
</div>
<div class="row">
<div style="width: 80px">出發日期：</div>
<div class="q-ml-md">
<!-- {{
unionCity && unionCity.goFlight
? unionCity.goFlight.startDate
: price.startDate
}} -->
</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.crCount > 0">
<div class="col">成人佔床 x {{ chosenObj.crCount }}</div>
<div>CNY {{ moneyFormat(price.originalB2CPrice, 2) }}</div>
</div>
<div class="row q-mb-sm" v-if="chosenObj.etzcCount > 0">
<div class="col">兒童佔床 x {{ chosenObj.etzcCount }}</div>
<div>
CNY
{{
moneyFormat(price.originalB2CPrice + price.childNeedPrice, 2)
}}
</div>
</div>
<div class="row q-mb-sm" v-if="chosenObj.etbzcCount > 0">
<div class="col">兒童不佔床 x {{ chosenObj.etbzcCount }}</div>
<div>
CNY
{{
moneyFormat(
price.originalB2CPrice - price.childNoNeedPrice,
2
)
}}
</div>
</div>
<div class="row q-mb-sm" v-if="chosenObj.yeCount > 0">
<div class="col">嬰兒不佔床 x {{ chosenObj.yeCount }}</div>
<div>CNY {{ moneyFormat(price.babyPrice, 2) }}</div>
</div>
<div v-if="price.safeMoney > 0">
<hr
style="border: none; border-top: 1px dashed #eee !important"
class="bg-transparent q-mb-sm"
/>
<div class="row q-mb-sm" v-if="price.safeMoney > 0">
<div class="col">保險費 x {{ price.safeMoney }}/人</div>
<div>
CNY
{{
moneyFormat(
price.safeMoney *
(chosenObj.crCount +
chosenObj.etCount +
chosenObj.yeCount),
2
)
}}
</div>
</div>
</div>
<hr
style="border: none; border-top: 1px dashed #eee !important"
class="bg-transparent q-mb-sm"
/>
<div class="row q-mb-sm" v-if="chosenObj.etCount > 0">
<div class="col">兒童附加費 x {{ chosenObj.etCount }}</div>
<div>CNY {{ moneyFormat(price.babyChargePrice, 2) }}</div>
</div>
<div class="row q-mb-sm" v-if="chosenObj.df > 0">
<div class="col">單房差價 x {{ chosenObj.df }}</div>
<div>CNY {{ moneyFormat(price.singleRoomPrice, 2) }}</div>
</div>
<div class="row q-mb-sm items-center">
<div class="col">總金額</div>
<div class="text-subtitle2 text-weight-bolder text-primary">
CNY {{ 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">
<div class="col">優惠金額</div>
<div
class="text-subtitle2 text-weight-bolder text-teal"
v-if="price.discountPrice > 0"
>
CNY - {{ moneyFormat(price.discountPrice, 2) }}
</div>
<div class="text-grey-5" v-else>暫無優惠</div>
</div>
<div class="row q-mb-sm items-center">
<div class="col">支付金額</div>
<div
class="text-h6 text-weight-bolder text-primary product-price"
>
CNY {{ moneyFormat(sumPrice - price.discountPrice, 2) }}
</div>
</div>
</div>
<div class="text-right q-mt-md">
<q-btn
unelevated
color="primary"
label="立即支付"
:loading="submiting"
@click="submitHandler"
/>
</div>
</div>
</div>
</div>
<div v-if="!orderKey || orderKey == ''" class="text-center q-my-xl">
<none-data
iconType="order"
title="沒有找到您的訂單信息哦"
subtitle="趕緊去挑選心儀的旅遊產品吧,三秒後自動跳轉到首頁"
></none-data>
</div>
<auth></auth>
</div>
</template>
<script>
import coupon from "../../components/common/coupon.vue";
import NoneData from "src/components/common/noneData.vue";
import auth from "src/components/common/auth.vue";
import { date } from "quasar";
import ProductTypeEnum from "../../utils/producttypeenum";
import EnumHelper from "../../utils/enumhelper";
export default {
components: {
coupon,
NoneData,
auth,
},
data() {
return {
step: 1,
userInfo: {
lastName: "",
firstName: "",
country: 0,
phone: "",
areaCode: "",
mail: "",
},
chosenObj: {
startDate: "",
crCount: 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: {
Id: 0,
TCID: 0,
OrderId: 0,
VisaPlanId: 0,
SurName: "",
Name: "",
PassportNo: "",
ESurName: "",
EName: "",
GuestType: 0,
EnableSignRoom: false,
PassportExpiry: "",
FormatTypeName: "",
MobilePhone: "",
RoomType: 0,
IsSignRoom: false,
Sex: 1,
IdCard: "",
PassportIssued: "",
Purpose: "观光",
IsBed: 1,
IsNeedAirticket: 2,
IsNeedSafe: 1,
IsVisaFree: 2,
IssuingAuthority: 2,
IsCriminalRecord: 2,
IsDepartureRecord: 2,
IsHightSchool: 2,
IsB2B: 1,
Birthday: "",
},
guests: [],
disableSign: false,
orderKey: "",
order: {},
trip: null,
price: null,
unionCity: null,
sumPrice: 0,
submiting: false,
CouponIds: [],
productType: 0,
isCreateGuest:false
};
},
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() {
this.getTripData();
if (this.checkParamsHandler()) {
this.initGuestHandler()
this.getUserInfoHandler();
}
},
mounted() {
},
methods: {
async submitHandler() {
this.submiting = true;
let flag = true;
flag = await this.formValidateHandler("baseUserInfo");
if (!flag) {
this.goScrollToForm("baseUserInfoTitle");
} else {
if(this.isCreateGuest){
for (let i = 0; i < this.guests.length; i++) {
flag = await this.formValidateHandler("guest" + i);
if (!flag) {
this.goScrollToForm(`guest${i}Title`);
break;
}
}
}
if (flag) {
this.submitOrderHandler();
//this.submitB2COrderHandler(81192)
return;
}
}
this.submiting = false;
},
submitOrderHandler() {
let msg = {
OrderId: 0,
TCID: this.order.order.tcid,
CustomerId: 0,
ManNum: 0,//成人
BabyNum: 0,//婴儿
GuestNum:0,//总人数
YSeatNum:0,//经济舱
FSeatNum:0,//头等舱
ESeatNum:0,//商务舱
Unit_Price:0,
PreferPrice:0,
GuestList:[],//旅客信息
PlaceOrderFrom:2,//下单平台默认2
EnterID:0,
OrderSource: 3,
};
this.apipost(
"sellorder_post_SetOrderInfoForAirTicket",
msg,
(res) => {
if (res.data.resultCode == 1) {
if (this.isUpdateUserInfo) {
this.setUserInfoHandler();
}
if (this.isCreateGuest) {
this.uploadGuests(0, res.data.data.OrderId);
} else {
this.submitB2COrderHandler(res.data.data.OrderId);
}
} else {
this.$message.error(res.data.message);
this.submiting = false;
}
},
(err) => {
this.submiting = false;
}
);
},
uploadGuests(i, orderId) {
let currentGuest = this.guests[i];
currentGuest.OrderId = orderId;
currentGuest.TCID = this.order.order.tcid;
this.apipost(
"sellorder_post_SetTravelGuestInfo_V2",
currentGuest,
(r) => {
console.log(r);
if (i < this.guests.length - 1) {
i++;
this.uploadGuests(i, orderId);
} else {
this.submitB2COrderHandler(orderId);
}
}
);
},
submitB2COrderHandler(orderId) {
let guestInfo = `成人x${this.chosenObj.crCount}; `;
let msg = {
SurName: this.userInfo.Surname,
Name: this.userInfo.Name,
ContactNumber:
this.userInfo.PhoneCountryStr + " " + this.userInfo.Moblie,
Mailbox: this.userInfo.Mailbox,
GoodsId: this.order.order.tcid,
GoodsName: this.trip.title,
GoodsPic: this.trip.imgCover[0].Url,
GoodsType: this.productType,
OrderMake: `${
this.unionCity && this.unionCity.goFlight
? this.unionCity.goFlight.startDate
: this.price.startDate
}從${
this.unionCity ? this.unionCity.cityName : this.trip.startCityName
}出發 ${guestInfo}`,
TotalPrice: this.sumPrice,
PreferentialPrice: this.price.discountPrice,
ErpOrderId: orderId,
Country: this.userInfo.Country,
PlatformTax: 0,
Income: 0,
Refund: 0,
};
this.apipost("AddOrderInfo_post", msg, (r) => {
if (r.data.resultCode == 1) {
this.$message.success("訂單創建成功");
this.goPayHandler(r.data.data);
} else {
this.$message.error(r.data.message);
}
});
},
getProductTypeHandler() {
return (
this.price.teamType == 0
? ProductTypeEnum.TEAM_TRIP
: this.price.teamType == 2
? ProductTypeEnum.ONE_DAY
: ProductTypeEnum.UNIT_TRIP
).value;
},
goPayHandler(pay) {
let lineCars = localStorage.getItem("lineCars");
lineCars = lineCars ? JSON.parse(lineCars) : [];
let i = lineCars.findIndex((x) => x.key == this.orderKey);
if (i >= 0) {
lineCars.splice(i, 1);
localStorage.setItem("lineCars", JSON.stringify(lineCars));
}
this.CommonJump("/pay/" + pay.OrderNo, {});
},
GUID() {
return "xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx".replace(/[xy]/g, function (c) {
var r = (Math.random() * 16) | 0,
v = c == "x" ? r : (r & 0x3) | 0x8;
return v.toString(16);
});
},
async formValidateHandler(formName) {
let temp = this.$refs[formName];
let formObj = temp instanceof Array ? temp[0] : temp;
return formObj.validate();
},
goScrollToForm(formName) {
let temp = this.$refs[formName];
let formObj = temp instanceof Array ? temp[0] : temp;
window.scrollTo(0, formObj.offsetTop);
},
checkParamsHandler() {
try {
if (this.$route.params && this.$route.params.id) {
let key = this.$route.params.id;
this.orderKey = key;
}
} catch (error) {
console.log(error);
}
if (this.orderKey == "") {
setTimeout(() => {
location.href = location.origin;
}, 3000);
}
return this.orderKey != "";
},
changeDiscountHandler(coupon) {
if (coupon) {
this.price.discountPrice = coupon.discountMoney;
this.CouponIds = [coupon.couponId];
} else {
this.price.discountPrice = 0;
this.CouponIds = [];
}
console.log(this.price);
this.calcMoney();
this.$forceUpdate();
},
calcMoney() {
let money = this.price.originalB2CPrice * this.chosenObj.crCount;
this.price.discountPrice = this.price.discountPrice
? this.price.discountPrice
: 0;
money +=
(this.price.originalB2CPrice -
this.price.childNoNeedPrice +
this.price.babyChargePrice) *
this.chosenObj.etbzcCount;
money +=
(this.price.originalB2CPrice +
this.price.childNeedPrice +
this.price.babyChargePrice) *
this.chosenObj.etzcCount;
money += this.price.babyPrice * this.chosenObj.yeCount;
money += this.price.singleRoomPrice * this.chosenObj.df;
let sumCount = this.chosenObj.crCount + this.chosenObj.etCount;
//money += this.price.visaPrice * sumCount;
money += this.price.safeMoney * sumCount;
money += this.price.otherPrice * sumCount;
this.sumPrice = money;
},
changeRoomHandler() {
let currentSign = this.guests.filter((x) => x.IsSignRoom);
this.disableSign = currentSign == this.chosenObj.df;
},
initGuestHandler() {
for (let i = 0; i < this.chosenObj.crCount; i++) {
let obj = JSON.parse(JSON.stringify(this.guest));
obj.GuestType = 1;
obj.FormatTypeName = `成人 ${i + 1}：`;
if (this.chosenObj.df > 0) {
obj.EnableSignRoom = true;
}
obj.IsBed = 1;
obj.IdCard = this.GUID();
this.guests.push(obj);
}
for (let i = 0; i < this.chosenObj.etzcCount; i++) {
let obj = JSON.parse(JSON.stringify(this.guest));
obj.GuestType = 2;
obj.FormatTypeName = `儿童占床 ${i + 1}：`;
if (this.chosenObj.df > 0) {
obj.EnableSignRoom = true;
}
obj.IsBed = 1;
obj.IdCard = this.GUID();
this.guests.push(obj);
}
for (let i = 0; i < this.chosenObj.etbzcCount; i++) {
let obj = JSON.parse(JSON.stringify(this.guest));
obj.GuestType = 3;
obj.FormatTypeName = `儿童不占床 ${i + 1}：`;
obj.IsBed = 0;
obj.IdCard = this.GUID();
this.guests.push(obj);
}
for (let i = 0; i < this.chosenObj.yeCount; i++) {
let obj = JSON.parse(JSON.stringify(this.guest));
obj.GuestType = 4;
obj.FormatTypeName = `婴儿 ${i + 1}：`;
obj.IsBed = 0;
obj.IdCard = this.GUID();
this.guests.push(obj);
}
},
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})`;
});
this.userInfo.Country =
this.userInfo.Country == 0
? this.countrys[0].ID
: this.userInfo.Country;
this.changeCountry(this.userInfo.Country);
});
},
changeCountry(id) {
this.userInfo.PhoneCountry = this.areaCodes.find(
(x) => x.ID == id
).PhoneCode;
this.userInfo.PhoneCountryStr = "+" + this.userInfo.PhoneCountry;
},
getUserInfoHandler() {
let u = this.$user.userInfo;
if (u) {
this.apipost("GetCustomerInfo_post", { Id: u.id }, (r) => {
if (r.data.resultCode == 1) {
console.log(r.data.data);
this.userInfo = r.data.data;
} else {
this.$user.userInfo = null;
}
this.initCountry();
});
}
},
setUserInfoHandler() {
this.apipost("UpdateUserInfo_post", this.userInfo, (r) => {});
},
getTripData() {
this.$q.loading.show();
let tcid=0;
var tcidStr =this.$route.params.id;
if (tcidStr) { tcid=tcidStr;}
let msg = {
TCID: tcid,
};
this.apipost(
"AirTicket_get_GetTicketDetails",
msg,
(r) => {
if (r.data.resultCode == 1) {
this.trip = r.data.data;
console.log("this.trip",this.trip);
} else {
// this.$q.notify({
// type: "negative",
// message: r.data.message,
// position: "top",
// timeout: 2000, // 以毫秒为单位; 0意味着没有超时
// });
}
this.$q.loading.hide();
},
null
);
},
},
};
</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, 0.04) !important;
}
</style>
src/router/routes.js
View file @ b29a2fea
......@@ -197,6 +197,12 @@ const routes = [{
component: () =>
import ('pages/line/orderPreview.vue')
},
{
path: '/planeticketOrder/:id?', //机票订单确认
meta: { title: '订单确认' },
component: () =>
import ('pages/line/planeticketOrder.vue')
},
{
path: '/pay/:id?', //自定义页面
meta: { title: '订单支付' },
......
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