Commit 37f3c5c8 authored by 沈良进's avatar 沈良进

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

parents 209d7096 aaf94d58
......@@ -49,6 +49,27 @@ body {
font-family: "Noto Sans SC", 微软雅黑, "Microsoft YaHei", sans-serif !important;
font-weight: 400 !important;
}
.fz14{
font-size: 14px;
}
.fz15{
font-size: 15px;
}
.fz16{
font-size: 16px;
}
.fz17{
font-size: 17px;
}
.fz18{
font-size: 18px;
}
.fz20{
font-size: 20px;
}
.fz28{
font-size: 28px;
}
.text-middle{
display: flex;
align-items: center;
......
......@@ -20,8 +20,7 @@ Vue.prototype.domainManager = function() {
domainUrl = "http://testapi.oytour.com";
} else if (domainNameUrl.indexOf('oytour') !== -1) {
domainUrl = "http://reborn.oytour.com";
// domainUrl = 'http://192.168.10.11:8083'
domainUrl = 'http://192.168.10.206:8015' // 吴春
domainUrl = 'http://192.168.10.206:8015'
}
var obj = {
//主地址
......
<style scoped>
.card {width: 100vm;
height: 320px;
border: 1px solid #F0EFEF;
border-radius: 8px;}
</style>
<template>
<div class="card" :id="`baidu-map_${center.Id}`"></div>
</template>
<script>
export default {
props:["AddressObj"],
data() {
return {
center:{
Lng: 116.294625,
Lat: 39.961627
}
}
},
watch: {
AddressObj:{
handler(newValue,onldValue) {
this.center = newValue
},
deep:true,
immediate:true
}
},
mounted() {
this.createMap();
this.addMarker();
this.addLabel()
if(this.center.Range&&this.center.Range>0){
this.addCircle()
}
},
methods: {
createMap() {
if (!BMapGL) {
return;
}
let map = new BMapGL.Map(`baidu-map_${this.center.Id}`); // 创建地图实例
let point = new BMapGL.Point(this.center.Lng, this.center.Lat); // 创建点坐标
map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别
this.map = map;
},
addMarker() {
let icon = require(`../../assets/img/marker.png`);
var myIcon = new BMapGL.Icon(icon, new BMapGL.Size(23, 25), {
// 指定定位位置。
// 当标注显示在地图上时,其所指向的地理位置距离图标左上
// 角各偏移10像素和25像素。您可以看到在本例中该位置即是
// 图标中央下端的尖角位置。
anchor: new BMapGL.Size(10, 25),
// 设置图片偏移。
// 当您需要从一幅较大的图片中截取某部分作为标注图标时,您
// 需要指定大图的偏移位置,此做法与css sprites技术类似。
// imageOffset: new BMapGL.Size(0, 0 - 25) // 设置图片偏移
});
let point = new BMapGL.Point(this.center.Lng, this.center.Lat); // 创建点坐标
// 创建标注对象并添加到地图
var marker = new BMapGL.Marker(point, { icon: myIcon });
this.map.addOverlay(marker);
},
addLabel() {
var point = new BMapGL.Point(this.center.Lng, this.center.Lat);
var content = this.center.Address;
var label = new BMapGL.Label(content, {
// 创建文本标注
position: point, // 设置标注的地理位置
offset: new BMapGL.Size(10, -60), // 设置标注的偏移量
});
this.map.addOverlay(label); // 将标注添加到地图中
label.addEventListener("click", function () {
// alert("您点击了标注");
});
label.setStyle({
// 设置label的样式
color: "#000",
fontSize: "18px",
border: "0 solid #1E90FF",
padding: '0 5px',
borderRadius: '3px',
});
},
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});
this.map.addOverlay(circle);
}
},
}
</script>
\ No newline at end of file
......@@ -10,7 +10,21 @@
flat
/>
</div>
<div class="text-grey-6 f12 q-my-md">選擇類型</div>
<template v-if="dataList.CarType!=3">
<div class="text-grey-6 f12 q-my-md">選擇機場</div>
<div class="row wrap">
<q-btn @click="handleSelectAirport(item)"
:color="item.Id === selectedAirport?'primary':'grey-5'"
unelevated
class="car-tag mr"
v-for="item in AirportList"
:key="item.Id"
>
{{ item.AirportName }}
</q-btn>
</div>
</template>
<div class="text-grey-6 f12 q-my-md">選擇車類型</div>
<div class="row wrap">
<q-btn @click="handleSelect(item)"
:color="item.Id === selectedCar?'primary':'grey-5'"
......@@ -94,8 +108,15 @@
<span class="text-h6 text-primary product-price">CNY {{ moneyFormat(sumPrice,0) }}</span>
</div>
<div class="q-mt-md text-right">
<span class="q-mr-lg f12 text-negative" v-if="!p.startDate" >{{$q.platform.is.mobile?'請選擇上面的出行日期':'請選擇左側的出行日期'}} </span>
<q-btn color="primary" label="立即訂購" unelevated class="q-px-lg" :disable="sumPrice==0"/>
<span class="q-mr-lg f12 text-negative" v-if="!p.startDate" >
{{$q.platform.is.mobile?'請選擇上面的出行日期':'請選擇左側的出行日期'}}
</span>
<span class="q-mr-lg f12 text-negative"
v-if="(p.startDate&&!selectedCar)||(p.startDate&&dataList.CarType!=3&&!selectedAirportObj)" >
{{`請選擇上面的${dataList.CarType==3?'車類型':'機場、車類型'}`}}
</span>
<q-btn color="primary" label="立即訂購" unelevated class="q-px-lg" :disable="sumPrice==0"
@click="goUrl"/>
</div>
</div>
</div>
......@@ -103,22 +124,26 @@
<script>
export default {
props: ["price","CarTypeList","configId","Month"],
props: ["dataList","price","CarTypeList","AirportList","configId","Month"],
watch: {
price: {
handler(n, o) {
this.p = n;
console.log(n,'-----')
if(n&&n.startDate){
this.chosenObj.startDate = n.startDate;
// this.selectedCar = this.CarTypeList[0].Id
// this.selectedObj = this.CarTypeList[0]
}
this.calcMoney()
},
deep: true,
immediate: true
immediate: false
},
CarTypeList: {
handler(n, o) {
this.CarTypeList = n;
this.selectedCar = this.CarTypeList[0].Id
},
deep: true,
immediate: true
......@@ -129,9 +154,11 @@ export default {
p: {},
chosenObj: null,
sumPrice:0,
selectedCar: 0,
selectedObj: null,
priceList: [],
selectedCar: 0
selectedAirport: 0,
selectedAirportObj: null,
};
},
created() {
......@@ -140,11 +167,18 @@ export default {
this.chosenObj.startDate = this.p.startDate;
this.calcMoney()
this.getCarPriceData2()
this.selectedCar = this.CarTypeList[0].Id
// this.selectedCar = this.CarTypeList[0].Id
// this.selectedObj = this.CarTypeList[0]
}
},
methods: {
goUrl(){
this.CommonJump(
"/PickuporderForm",
{}
);
},
// 获取车的详情
getCarPriceData2() {
this.priceList = []
......@@ -158,21 +192,49 @@ export default {
},
(r) => {
if (r.data.resultCode == 1) {
let arr = []
r.data.data.forEach(x=>{
x.startDate = x.Date
x.originalB2CPrice = x.Price
x.remainNum =1
x.Count = 1
x.isSupportChildren = 1
x.safeMoney = 0
if(x.Price){
if(this.chosenObj.startDate==x.Date){
this.p.originalB2CPrice = x.Price
}
let dataObj = {
startDate: x.Date,
originalB2CPrice: x.Price,
remainNum: 1,
Count: 1,
isSupportChildren: 1,
safeMoney: 0,
}
arr.push(dataObj)
}
})
this.$emit('getPriceList',JSON.stringify(r.data.data),this.selectedCar)
const temp= JSON.parse(JSON.stringify(r.data.data))
let PriceArr = temp.filter(x=>{ return x.Price>0 })
if(PriceArr.length>0){
this.$emit('getPriceList',JSON.stringify(arr),this.selectedCar)
}else{
let dataObj = {
startDate: '',
originalB2CPrice: '',
remainNum: 0,
Count: 0,
isSupportChildren: 0,
safeMoney: 0,
}
this.priceList.push(dataObj)
this.$emit('getPriceList',JSON.stringify(this.priceList),this.selectedCar)
this.p.originalB2CPrice = 0
this.resetHandler()
}
}
},null)
},
handleSelectAirport(item){
this.selectedAirportObj = item
this.selectedAirport = item.Id
},
handleSelect(item){
this.selectedObj = item
this.selectedCar = item.Id
......@@ -186,9 +248,17 @@ export default {
remark: "",
};
},
resetHandler() {
resetHandler(type) {
if(type&&type!=1){
this.selectedCar = 0
this.selectedObj = null
this.selectedAirportObj = null
this.selectedAirport = 0
}
setTimeout(()=>{
this.p = {};
this.initModel()
},100)
this.$emit("reset");
},
changePeople(val) {},
......
<template>
<q-card flat class="q-pa-md q-mt-lg">
<div class="row items-center">
<div class="text-subtitle1 text-weight-bolder q-mb-md col">
<span>優惠券</span>
<span class="text-weight-regular q-ml-sm text-body2">(可用優惠券 0 張)</span>
</div>
<q-toggle v-model="showDisable" label="顯示不可用優惠券" style="zoom:0.8;margin-top: -24px;" v-if="isExplends"/>
<q-icon :name="isExplends?'keyboard_arrow_up':'keyboard_arrow_down'" @click="$event=>isExplends=!isExplends" size="32px" color="grey-9" class="q-ml-md cursor-pointer" style="margin-top:-10px;"/>
</div>
<div v-if="isExplends">
<div class="row q-col-gutter-md">
<div :class="filedWidth">
<div class="cursor-pointer">
<div class="coupon-head">
<div class="check-tools">
<q-checkbox v-model="chosenCouponId" :value="1" dense color="teal" />
</div>
<div class="q-pa-lg q-mt-lg">
<div class="row items-center">
<div class="text-h4 text-weight-bold text-white col">
{{ moneyFormat(500,2) }}
</div>
<div class=" f12 text-white">滿 2000 可用</div>
</div>
<div class="q-mt-sm f12" style="color:#195954">有效期至:2023.02.30</div>
</div>
</div>
<div class="q-px-lg q-py-md coupon-content">
<div class="row">
<div class="col-5">適用平台:</div>
<div class="">全平台通用</div>
</div>
<div class="row q-mt-sm">
<div class="col-5">使用品類:</div>
<div class="">多日遊行程適用</div>
</div>
</div>
</div>
</div>
<div :class="filedWidth">
<div class="unUsed">
<div class="coupon-head">
<div class="q-pa-lg q-mt-lg">
<div class="row items-center">
<div class="text-h4 text-weight-bold text-white col">
{{ moneyFormat(500,2) }}
</div>
<div class=" f12 text-white">滿 2000 可用</div>
</div>
<div class="q-mt-sm f12" style="color:#195954">有效期至:2023.02.30</div>
</div>
</div>
<div class="q-px-lg q-py-md coupon-content">
<div class="row">
<div class="col-5">適用平台:</div>
<div class="">全平台通用</div>
</div>
<div class="row q-mt-sm">
<div class="col-5">使用品類:</div>
<div class="">多日遊行程適用</div>
</div>
</div>
</div>
</div>
</div>
<div class="text-center q-mt-lg" v-if="1==2">
<p>
<img src="~assets/sad.svg" style="width: 50px" />
</p>
<p class="f12 text-grey-6">沒有找到可用優惠券</p>
</div>
</div>
</q-card>
</template>
<script>
export default {
props:["goodsInfo"],
computed: {
filedWidth() {
return {
"col-12": this.$q.screen.width < 1200,
"col-4": this.$q.screen.width >= 1200,
};
}
},
data() {
return {
showDisable:false,
isExplends:false,
chosenCouponId:false
};
},
methods: {
changeDiscountHandler(){
}
},
}
</script>
<style>
.coupon-item{
box-shadow: 0px 10px 20px 0px rgb(76 87 125 / 20%) !important;
}
.unUsed .coupon-head{
background: #DDD !important;
}
.unUsed .coupon-head *{
color:#AAA !important;
}
.coupon-head{
height: 138px;
background: #67CAC2;
position: relative;
overflow: hidden;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.coupon-head .check-tools{
position: absolute;
top:10px;
right: 10px;
}
.coupon-content{
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
background: #f9f9f9;
}
.coupon-head::before{
content: ' ';
display: inline-block;
width:30px;
height: 30px;
border-radius: 30px;
background: #FFF;
position: absolute;
top:-15px;
left: 50%;
margin-left: -15px;
}
.coupon-head::after{
content: ' ';
display: block;
position: absolute;
bottom: 0px;
left: 0;
right: 0;
height: 8px;
background-image: radial-gradient(circle, #f9f9f9, #f9f9f9 9px, #f9f9f9 9px, #f9f9f9 10px, transparent 10px, transparent);
background-size: 16px 20px;
}
</style>
\ No newline at end of file
......@@ -747,7 +747,7 @@ this.dayArray = this.dayArray.filter(item => arr.includes(item.id))
return
}
this.CommonJump(
"/detail/" + encodeURIComponent(item.id) + "/" + item.tcid,
"/detail/" + encodeURIComponent(item.id) + "/" + item.tcid + "/" + item.configId,
{}
);
},
......
<style scoped>
@import url('../../../assets/trip/block/index.css');
.fz15{
font-size: 15px;
}
.fz28{
font-size: 28px;
}
</style>
<template>
<div class="trip-box">
......
......@@ -86,7 +86,7 @@
<q-input
style="width: 150px"
@input="changePeople"
v-model="chosenObj.etCount"
v-model="chosenObj.etbzcCount"
class="col"
:class="{
'q-ml-sm q-px-none q-pl-none': $q.platform.is.desktop,
......@@ -105,7 +105,7 @@
class="q-px-none"
flat
icon="remove"
@click="addPeople('etCount', -1)"
@click="addPeople('etbzcCount', -1)"
/>
</template>
<template v-slot:append>
......@@ -115,7 +115,7 @@
class="q-px-none"
flat
icon="add"
@click="addPeople('etCount', 1)"
@click="addPeople('etbzcCount', 1)"
/>
</template>
</q-input>
......@@ -131,19 +131,19 @@
<div v-if="$q.platform.is.mobile">
<span class="text-grey-7 product-price" style="font-size: 13px">
CNY
{{ moneyFormat(p.childNeedPrice, 0) }} /每人
{{ moneyFormat(p.childNeedPrice+p.originalB2CPrice, 0) }} /每人
</span>
</div>
</div>
<div class="row items-end">
<span v-if="$q.platform.is.desktop" class="text-grey-7 product-price" style="font-size: 13px">
CNY
{{ moneyFormat( p.childNeedPrice, 0) }} /每人
{{ moneyFormat( p.childNeedPrice+p.originalB2CPrice, 0) }} /每人
</span>
<q-input
style="width: 150px"
@input="changePeople"
v-model="chosenObj.etCount"
v-model="chosenObj.etzcCount"
class="col"
:class="{
'q-ml-sm q-px-none q-pl-none': $q.platform.is.desktop,
......@@ -162,7 +162,7 @@
class="q-px-none"
flat
icon="remove"
@click="addPeople('etCount', -1)"
@click="addPeople('etzcCount', -1)"
/>
</template>
<template v-slot:append>
......@@ -172,7 +172,7 @@
class="q-px-none"
flat
icon="add"
@click="addPeople('etCount', 1)"
@click="addPeople('etzcCount', 1)"
/>
</template>
</q-input>
......@@ -357,7 +357,7 @@ export default {
yeCount: 0,
lrCount: 0,
etbzcCount: 0,
etzc: 0,
etzcCount: 0,
df: 0,
dcf: 0,
srf: 0,
......@@ -392,14 +392,14 @@ export default {
}
if (!isDf) {
if (
this.chosenObj.crCount + this.chosenObj.etCount >
this.chosenObj.crCount + this.chosenObj.etzcCount >
this.p.remainNum
) {
this.chosenObj[m] = this.chosenObj[m] - 1;
}
} else {
if (
this.chosenObj.crCount + this.chosenObj.etCount <
this.chosenObj.crCount + this.chosenObj.etzcCount <
this.chosenObj.df
) {
this.chosenObj[m] = this.chosenObj[m] - 1;
......@@ -412,7 +412,9 @@ export default {
let money =
this.p.originalB2CPrice * this.chosenObj.crCount;
money +=
(this.p.originalB2CPrice-this.p.childNoNeedPrice+this.p.babyChargePrice) * this.chosenObj.etCount;
(this.p.originalB2CPrice-this.p.childNoNeedPrice+this.p.babyChargePrice) * this.chosenObj.etbzcCount;
money +=
(this.p.originalB2CPrice+this.p.childNeedPrice+this.p.babyChargePrice) * this.chosenObj.etzcCount;
money += this.p.babyPrice * this.chosenObj.yeCount;
money += this.p.singleRoomPrice * this.chosenObj.df;
......
......@@ -190,6 +190,8 @@
tcid: 0,
teamType: 0,
isGetPriceFlight: true,
pType: 1,//类型 1 来源B2C
newConfigId: 0,//列表里的configId
},
isShow: false,
dataList: {},
......@@ -220,6 +222,9 @@
if (this.$route.params.tcid) {
this.msg.tcid = decodeURIComponent(this.$route.params.tcid)
}
if (this.$route.params.newConfigId) {
this.msg.newConfigId = decodeURIComponent(this.$route.params.newConfigId)
}
},
mounted() {
if (localStorage.baseifo) {
......
......@@ -117,7 +117,7 @@
>
<div class="col q-mr-lg">
<div class="text-h6 ellipsis-2-lines">{{ dataList.Name }}</div>
<!-- <div class="text-h6 ellipsis-2-lines">{{ dataList.Description }}</div> -->
<div class="text-grey-7 fz17 ellipsis-2-lines">{{ dataList.Description }}</div>
<div class="q-mt-md f12 text-grey-6">
<q-icon
name="iconfont icondingweixiao"
......@@ -277,9 +277,11 @@
<template v-if="currentPrice && currentPrice.startDate">
<order-preview
class="q-pa-md"
:dataList="dataList"
:configId="msg.configId"
:Month="currentYM.str"
:CarTypeList="dataList.CarTypeList"
:AirportList="dataList.AirportList"
:price="currentPrice"
@reset="resetHandler"
@getPriceList="getPriceList"
......@@ -302,12 +304,13 @@
>
<span class="q-mr-md">行程標準出行方案</span>
<q-chip
v-if="dataList.FreeCancelDay>0"
square
color="orange"
size="sm"
text-color="grey-2"
class="text-light"
label="3天前可免费取消"
:label="`${dataList.FreeCancelDay}天前可免费取消`"
/>
</div>
<!-- <div class="text-grey f12">
......@@ -349,10 +352,11 @@
關於此方案
</div>
<q-chip
v-if="dataList.FreeCancelDay>0"
class="transparent q-mr-xl no-padding"
square
icon="iconfont iconcancel"
label="3天前可免費取消"
:label="`${dataList.FreeCancelDay}天前可免费取消`"
/>
</div>
<div class="q-mt-lg row" v-if="$q.platform.is.desktop">
......@@ -365,9 +369,11 @@
</div>
<div class="col q-ml-xl">
<order-preview
:dataList="dataList"
:configId="msg.configId"
:Month="currentYM.str"
:CarTypeList="dataList.CarTypeList"
:AirportList="dataList.AirportList"
:price="currentPrice"
@reset="resetHandler"
@getPriceList="getPriceList"
......@@ -439,6 +445,60 @@
'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}"
></div>
<div
id="assemblypoint"
class="text-h5 text-weight-bold text-left q-mt-xl"
ref="assemblypoint"
:class="{
'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}"
>
接送點範圍
</div>
<div
class="q-mt-lg trip-text rounded-borders q-mb-xl"
style="border: 1px dashed var(--q-color-warning)"
:class="{
'q-mx-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}"
v-for="(x,index) in dataList.PlaceList">
<div class="q-pa-md" style="border-bottom: 1px dashed var(--q-color-warning)">
<div class="text-weight-bold text-h6">地點名稱:{{x.Name}}</div>
<div class="text-grey-9">地址:{{x.Address}}</div>
</div>
<div class="q-pa-md" :class="{
'q-mx-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}">
<componentsMap :AddressObj="x"/>
</div>
</div>
<div
id="experiencelocation"
class="text-h5 text-weight-bold text-left q-mt-xl"
ref="experiencelocation"
:class="{
'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}"
>
機場地點
</div>
<div
class="q-mt-lg trip-text rounded-borders q-mb-xl"
style="border: 1px dashed var(--q-color-warning)"
:class="{
'q-mx-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}"
v-for="(x,index) in dataList.AirportList">
<div class="q-pa-md" style="border-bottom: 1px dashed var(--q-color-warning)">
<div class="text-weight-bold text-h6">地点名称:{{x.Name}}</div>
<div class="text-grey-9">地址:{{x.Address}}</div>
</div>
<div class="q-pa-md" :class="{
'q-mx-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}">
<componentsMap :AddressObj="x"/>
</div>
</div>
<div
id="warning"
class="text-h5 text-weight-bold text-left q-mt-xl"
......@@ -544,6 +604,8 @@ import OrderPreview from "src/components/car/orderPreview.vue";
import smaple from "src/components/trip/smaple.vue";
import Trip from "src/components/trip/trip.vue";
import block from "src/components/trip/block/index";
import { date } from "quasar";
import componentsMap from "../components/car/Map.vue";
import * as dayjs from "dayjs";
export default {
props: [],
......@@ -626,6 +688,18 @@ export default {
isActive: false,
display: "購買須知",
},
{
id: "#assemblypoint",
top: 0,
isActive: false,
display: "接送點範圍",
},
{
id: "#experiencelocation",
top: 0,
isActive: false,
display: "機場地點",
},
{
id: "#tips",
top: 0,
......@@ -652,6 +726,7 @@ export default {
smaple,
Trip,
block,
componentsMap
},
watch: {
days: {
......@@ -678,6 +753,13 @@ export default {
}
},
mounted() {
const timeStamp = Date.now()
const formattedString = date.formatDate(timeStamp, 'YYYY-MM-DD')
this.currentYM = {
year: date.formatDate(timeStamp, 'YYYY'),
month: date.formatDate(timeStamp, 'MM'),
str: formattedString
}
if (localStorage.baseifo) {
this.TripConfig = JSON.parse(window.localStorage.getItem("baseifo"));
}
......@@ -842,15 +924,21 @@ export default {
},
(r) => {
if (r.data.resultCode == 1) {
let arr = []
r.data.data.forEach(x=>{
x.startDate = x.Date
x.originalB2CPrice = x.Price
x.remainNum = 1
x.Count = 1
x.isSupportChildren = 1
x.safeMoney = 0
if(x.Price){
let dataObj = {
startDate: x.Date,
originalB2CPrice: x.Price,
remainNum: 1,
Count: 1,
isSupportChildren: 1,
safeMoney: 0,
}
arr.push(dataObj)
}
})
this.priceList = JSON.parse(JSON.stringify(r.data.data))
this.priceList = JSON.parse(JSON.stringify(arr))
}
},null)
......
......@@ -621,6 +621,8 @@ export default {
tcid: 0,
teamType: 0,
isGetPriceFlight: true,
pType: 1,//类型 1 来源B2C
newConfigId: 0,//列表里的configId
},
currentPrice: {},
isShow: false,
......@@ -752,6 +754,9 @@ export default {
if (this.$route.params.tcid) {
this.msg.tcid = decodeURIComponent(this.$route.params.tcid);
}
if (this.$route.params.newConfigId) {
this.msg.newConfigId = decodeURIComponent(this.$route.params.newConfigId)
}
},
mounted() {
window.addEventListener("scroll", this.handleScroll);
......
......@@ -34,33 +34,63 @@
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,
row: $q.screen.width >= 1200 && $q.platform.is.desktop,
column: $q.screen.width < 1200 || $q.platform.is.mobile,
}"
>
<div class="col">
<q-card flat class="q-pa-md">
<div class="text-subtitle1 text-weight-bolder">訂購人資訊</div>
<q-separator color="grey-2" class="q-my-md"/>
<q-separator color="grey-2" class="q-my-md" />
<div class="row q-col-gutter-md">
<div :class="filedWidth">
<q-input standout v-model="userInfo.lastName" label="名字" :rules="[val => !!val || '請輸入名字']"/>
<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 || '請輸入姓氏']"/>
<q-input
standout
v-model="userInfo.firstName"
label="姓氏"
:rules="[(val) => !!val || '請輸入姓氏']"
/>
</div>
<div :class="filedWidth">
<q-select v-model="userInfo.country" @input="changeCountry" :options="countrys" emit-value option-label="Name" option-value="ID" map-options label="國家/地區" standout />
<q-select
v-model="userInfo.country"
@input="changeCountry"
:options="countrys"
emit-value
option-label="Name"
option-value="ID"
map-options
label="國家/地區"
standout
/>
</div>
<div :class="filedWidth">
<q-input standout v-model="userInfo.firstName" label="電話" :rules="[val => !!val || '請輸入行動電話']">
<q-input
standout
v-model="userInfo.firstName"
label="電話"
:rules="[(val) => !!val || '請輸入行動電話']"
>
<template v-slot:prepend>
<div class="text-subtitle2">+{{ userInfo.areaCode }}</div>
</template>
</q-input>
</div>
<div :class="filedWidth">
<q-input standout v-model="userInfo.mail" label="郵箱地址" :rules="[val => !!val || '請輸入郵箱地址']" />
<q-input
standout
v-model="userInfo.mail"
label="郵箱地址"
:rules="[(val) => !!val || '請輸入郵箱地址']"
/>
</div>
<div :class="filedWidth">
<q-toggle v-model="isUpdateUserInfo" label="同步更新會員資料" />
......@@ -72,10 +102,20 @@
<div class="text-subtitle1 text-weight-bolder q-mb-md">旅客資料</div>
<div class="row">
<q-img src="https://image.kkday.com/v2/image/get/s1.kkday.com/product_138437/20230217083232_t5rcO/jpg" class="rounded-borders" spinner-color="grey-3" style="width:80px;" />
<q-img
src="https://image.kkday.com/v2/image/get/s1.kkday.com/product_138437/20230217083232_t5rcO/jpg"
class="rounded-borders"
spinner-color="grey-3"
style="width: 80px"
/>
<div class="q-ml-md col">
<div class="text-subtitle1 ellipsis">【夏季限定】加拿大三日游 | 班夫&贾斯珀国家公园&哥伦比亚冰原 | 卡加利出发卡加利出发卡加利出发</div>
<div class="text-caption text-grey-6 ellipsis q-mt-sm">加拿大三日游 | 班夫&贾斯珀国家公园&哥伦比亚冰原</div>
<div class="text-subtitle1 ellipsis">
【夏季限定】加拿大三日游 | 班夫&贾斯珀国家公园&哥伦比亚冰原 |
卡加利出发卡加利出发卡加利出发
</div>
<div class="text-caption text-grey-6 ellipsis q-mt-sm">
加拿大三日游 | 班夫&贾斯珀国家公园&哥伦比亚冰原
</div>
</div>
</div>
<div class="q-mt-md row">
......@@ -85,18 +125,133 @@
</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" >成人 x 2</span>
<span class="q-mr-sm" >兒童 x 2</span>
<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>
<q-separator color="grey-2" class="q-my-md"/>
<q-separator color="grey-2" class="q-mt-md" />
<div
class="bg-grey-1 rounded-borders q-pa-md q-mt-md guest-item"
v-for="(x, i) in guests"
:key="i"
>
<div class="text-subtitle1 q-pb-md text-weight-bold">{{ x.FormatTypeName }}</div>
<div class="row q-col-gutter-md">
<div :class="filedGuestWidth">
<q-input
standout
v-model="x.FirstName"
label="本國姓"
placeholder="例:張"
:rules="[(val) => !!val || '請輸本國姓']"
/>
</div>
<div :class="filedGuestWidth">
<q-input
standout
v-model="x.LastName"
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.PassFirstName"
label="護照英文姓"
placeholder="例:ZHANG"
:rules="[(val) => !!val || '請輸護照英文姓']"
/>
</div>
<div :class="filedGuestWidth">
<q-input
standout
v-model="x.PassLastName"
label="護照英文名"
placeholder="例:SAN"
:rules="[(val) => !!val || '請輸護照英文名']"
/>
</div>
<div :class="filedGuestWidth">
<q-input
standout
v-model="x.Passport"
label="護照號"
:rules="[(val) => !!val || '請輸護照號']"
/>
</div>
<div :class="filedGuestWidth">
<q-input
standout
v-model="x.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="x.PassValidate"
@input="() => $refs.qDateProxy7.hide()"
/>
</q-popup-proxy>
</q-input>
</div>
<div :class="filedGuestWidth" v-if="x.GuestType == 1">
<q-input
standout
v-model="x.PassFirstName"
label="聯絡電話"
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>
</div>
<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></coupon>
</div>
<div
<div class="relative-position"
:class="{
'q-ml-lg': !($q.screen.width < 1200 || $q.platform.is.mobile),
'q-mt-lg': $q.screen.width < 1200 || $q.platform.is.mobile,
'q-mt-lg full-width': $q.screen.width < 1200 || $q.platform.is.mobile,
}"
>
<div
......@@ -105,68 +260,230 @@
:style="{
width:
$q.screen.width < 1200 || $q.platform.is.mobile
? '100%'
? 'unset'
: '300px',
position:$q.platform.is.mobile?'unset':'sticky',
top:$q.platform.is.mobile?'unset':'50px',
}"
>222</div>
>
<div class="text-subtitle1 text-weight-bolder">付款明細</div>
<div class="row q-mt-md">
<q-img
src="https://image.kkday.com/v2/image/get/s1.kkday.com/product_138437/20230217083232_t5rcO/jpg"
class="rounded-borders"
spinner-color="grey-3"
style="width: 80px"
/>
<div class="q-ml-md col">
<div class="text-subtitle1 ellipsis">
【夏季限定】加拿大三日游 | 班夫&贾斯珀国家公园&哥伦比亚冰原 |
卡加利出发卡加利出发卡加利出发
</div>
<div class="text-caption text-grey-6 ellipsis q-mt-sm">
加拿大三日游 | 班夫&贾斯珀国家公园&哥伦比亚冰原
</div>
</div>
</div>
<div class="q-mt-md text-grey-6">
<div class="row">
<div style="width: 80px">出發城市:</div>
<div class="q-ml-md">武漢起止</div>
</div>
<div class="row">
<div style="width: 80px">出發日期:</div>
<div class="q-ml-md">2024-02-02</div>
</div>
</div>
<q-separator color="grey-2" class="q-my-md"/>
<div class="text-grey-9">
<div class="row q-mb-sm" v-if="chosenObj.crCount>0">
<div class="col">成人佔床 x {{ chosenObj.crCount }}</div>
<div>CNY {{ moneyFormat(9999,2) }}</div>
</div>
<div class="row q-mb-sm" v-if="chosenObj.etzcCount>0">
<div class="col">兒童佔床 x {{ chosenObj.etzcCount }}</div>
<div>CNY {{ moneyFormat(9999,2) }}</div>
</div>
<div class="row q-mb-sm" v-if="chosenObj.etbzcCount>0">
<div class="col">兒童不佔床 x {{ chosenObj.etbzcCount }}</div>
<div>CNY {{ moneyFormat(9999,2) }}</div>
</div>
<div class="row q-mb-sm" v-if="chosenObj.yeCount>0">
<div class="col">嬰兒不佔床 x {{ chosenObj.yeCount }}</div>
<div>CNY {{ moneyFormat(9999,2) }}</div>
</div>
<hr style="border:none;border-top:1px dashed #EEE !important;" class="bg-transparent q-mb-sm" />
<div class="row q-mb-sm" v-if="(chosenObj.etCount)>0">
<div class="col">兒童附加費 x {{ chosenObj.etCount }}</div>
<div>CNY {{ moneyFormat(9999,2) }}</div>
</div>
<div class="row q-mb-sm" v-if="(chosenObj.df)>0">
<div class="col">單房差價 x {{ chosenObj.df }}</div>
<div>CNY {{ moneyFormat(9999,2) }}</div>
</div>
<div class="row q-mb-sm items-center" v-if="(chosenObj.df)>0">
<div class="col">總金額</div>
<div class="text-subtitle2 text-weight-bolder text-primary">CNY {{ moneyFormat(9999,2) }}</div>
</div>
<hr style="border:none;border-top:1px dashed #EEE !important;" class="bg-transparent q-mb-sm" />
<div class="row q-mb-sm items-center" v-if="(chosenObj.df)>0">
<div class="col">優惠金額</div>
<div class="text-subtitle2 text-weight-bolder text-teal">CNY - {{ moneyFormat(9999,2) }}</div>
<div class="text-grey-5">暫無優惠</div>
</div>
<div class="row q-mb-sm items-center" v-if="(chosenObj.df)>0">
<div class="col">支付金額</div>
<div class="text-h6 text-weight-bolder text-primary product-price">CNY {{ moneyFormat(9999,2) }}</div>
</div>
</div>
<div class="text-right q-mt-md">
<q-btn unelevated color="primary" label="立即支付" />
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { json } from "body-parser";
import coupon from '../../components/common/coupon.vue'
export default {
components:{
coupon
},
data() {
return {
step: 1,
userInfo:{
lastName:'',
firstName:'',
country:0,
phone:'',
areaCode:'',
mail:''
},
isUpdateUserInfo:false,
countrys:[],
areaCodes:[]
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: {
FirstName: "",
LastName: "",
Passport: "",
PassFirstName: "",
PassLastName: "",
GuestType: 0,
EnableSignRoom: false,
PassValidate: "",
FormatTypeName: "",
MobilePhone: "",
RoomType:0,
IsSignRoom:false,
Sex: 0,
},
guests: [],
disableSign:false
};
},
computed:{
filedWidth(){
computed: {
filedWidth() {
return {
'col-12': this.$q.screen.width < 1200,
'col-6':this.$q.screen.width >= 1200
}
}
"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() {
},
created() {},
mounted() {
this.initCountry()
this.initCountry();
this.initGuestHandler();
},
methods: {
initCountry(){
this.apipost(
"GetCountryInfo_post",
{},
(r) => {
this.countrys = r.data.data.countList
this.userInfo.country = this.countrys[0].ID
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;
}
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;
}
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}:`;
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}:`;
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.areaCodes = r.data.data.phoneCountList;
this.changeCountry(this.userInfo.country);
this.areaCodes.forEach((x) => {
let temp = this.countrys.find((y) => y.ID == x.ID);
x.EnName = `${temp.EnName}(${x.PhoneCode})`;
});
});
},
changeCountry(id){
this.userInfo.areaCode = this.areaCodes.find(x=>x.ID==id).PhoneCode
}
changeCountry(id) {
this.userInfo.areaCode = this.areaCodes.find((x) => x.ID == id).PhoneCode;
},
},
};
</script>
......@@ -175,13 +492,13 @@ export default {
.order-preview .q-stepper__content {
display: none !important;
}
.order-preview .q-toggle__track{
.order-preview .q-toggle__track {
height: 0.7em;
border-radius: 0.35em;
opacity: .38;
opacity: 0.38;
width: 50px;
}
.order-preview .q-toggle__thumb{
.order-preview .q-toggle__thumb {
top: 0.42em;
left: 0.45em;
width: 0.5em;
......@@ -190,13 +507,16 @@ export default {
user-select: none;
z-index: 0;
}
.order-preview .q-toggle__inner--truthy .q-toggle__thumb{
.order-preview .q-toggle__inner--truthy .q-toggle__thumb {
left: 0.94em;
}
.order-preview .q-toggle__inner{
.order-preview .q-toggle__inner {
width: 1.9em;
}
.order-preview .q-toggle__label{
.order-preview .q-toggle__label {
margin-top: 12px;
}
.guest-item:hover{
background: rgba(241,65,108,.04) !important;
}
</style>
......@@ -1275,7 +1275,9 @@
//请求参数
msg: {
ID: 0,
tcid: 0
tcid: 0,
pType: 1,//类型 1 来源B2C
newConfigId: 0,//列表里的configId
},
dataList: {},
scrollobj: null,
......@@ -1307,6 +1309,7 @@
mounted() {
this.msg.ID = this.$route.query.ID;
this.msg.tcid = this.$route.query.tcid;
this.msg.newConfigId = this.$route.query.ConfigId;
this.crtnav = 'tripLine';
this.getTrip();
......@@ -1317,6 +1320,7 @@
query: {
ID: decodeURIComponent(this.msg.ID),
tcid: decodeURIComponent(this.msg.tcid),
newConfigId: decodeURIComponent(this.msg.newConfigId)
}
});
}
......
......@@ -1010,7 +1010,9 @@
ID: 0,
tcid: 0,
isDes:0,
NewId:''
NewId:'',
pType: 1,//类型 1 来源B2C
newConfigId: 0,//列表里的configId
},
showMapType:0,
dataList: {},
......@@ -1039,13 +1041,15 @@
this.isInChina()
this.msg.ID = this.$route.query.ID;
this.msg.tcid = this.$route.query.tcid;
this.msg.newConfigId = this.$route.query.ConfigId;
//判断为pc端
if(this.$q.platform.is.desktop){
this.$router.push({
path: 'newTrip',
query: {
ID: decodeURIComponent(this.msg.ID),
tcid: decodeURIComponent(this.msg.tcid)
tcid: decodeURIComponent(this.msg.tcid),
newConfigId: decodeURIComponent(this.msg.newConfigId)
}
});
}
......
......@@ -32,12 +32,16 @@ const routes = [{
path: '/detailCar/:id',
component: () =>
import ('pages/detailsCar.vue')
}, { // 包车,接机下单
path: '/PickuporderForm',
component: () =>
import ('pages/Pickuporder/orderForm.vue')
}, { // 酒店
path: '/detailHotal/:id',
component: () =>
import ('pages/detailsHotal.vue')
}, { // 旅程
path: '/detail/:id/:tcid',
path: '/detail/:id/:tcid/:newConfigId',
component: () =>
import ('pages/detailsNew.vue')
}, {
......
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