Skip to content

M
million
Commit 68cf57d3 authored by 沈良进's avatar 沈良进
Browse files
Options

接送机，包车服务

parent 7b28d2f0
Hide whitespace changes
Inline Side-by-side
Showing with 309 additions and 308 deletions
src/components/searchdata/kkday.vue
View file @ 68cf57d3
......@@ -731,9 +731,10 @@ export default {
this.$q.loading.hide();
if (res.data.resultCode == 1) {
this.PageCount = res.data.data.pageCount;
this.TotalCount = res.data.data.count;
var tempArray = res.data.data.pageData;
this.PageCount = res.data.data.List.pageCount;
this.TotalCount = res.data.data.List.count;
var tempArray = res.data.data.List.pageData;
console.log('getSearch data', tempArray)
if (tempArray && tempArray.length > 0) {
// tempArray.forEach(item => {
// if (item.imgCover && item.imgCover != "") {
......
src/css/app.scss
View file @ 68cf57d3
......@@ -99,6 +99,9 @@
.f26 {
font-size: 26px;
}
.f36 {
font-size: 36px;
}
.text-center {
text-align: center;
}
......
src/pages/detailsCar.vue
View file @ 68cf57d3
......@@ -11,12 +11,6 @@
z-index: 999;
"
class="bg-white"
v-if="
(currentHeight > navs[0].top + 100 && $q.platform.is.desktop) ||
(currentHeight > priceListHeight &&
currentHeight < navs[0].top &&
$q.platform.is.mobile)
"
:style="{ transform: stickyHeight }"
>
<div
......@@ -28,7 +22,7 @@
class="col product-price text-subtitle1 text-weight-bold"
style="text-align: left"
>
<span>CNY {{ moneyFormat(dataList.minPrice, 0) }}</span>
<span>CNY {{ moneyFormat(dataList.MinPrice, 0) }}</span>
<span class="q-ml-sm f12 text-grey-7">起</span>
</span>
<q-btn
......@@ -36,7 +30,7 @@
unelevated
class="q-px-xl"
label="選擇方案"
@click="goScrollHandler(priceListHeight)"
@click="goScrollHandler('#scheme')"
/>
</div>
</div>
......@@ -186,7 +180,7 @@
color="primary"
label="選擇方案"
unelevated
@click="goScrollHandler(priceListHeight)"
@click="goScrollHandler('#scheme')"
:class="{ 'q-mt-md full-width': $q.platform.is.desktop }"
/>
</div>
......@@ -233,7 +227,7 @@
<q-tab
v-for="(x, i) in navs"
:key="i"
@click="goScrollHandler(x.top + 20)"
@click="goScrollHandler(x.id)"
:name="x.display"
:label="x.display"
></q-tab>
......@@ -244,220 +238,259 @@
class="q-pa-lg bg-grey-3 q-mt-lg text-grey-9"
ref="pricelist"
>
<div style="max-width: 1200px; margin-left: auto; margin-right: auto">
<div
id="scheme"
style="max-width: 1200px; margin-left: auto; margin-right: auto"
>
<div class="text-h6">選擇方案</div>
<div
class="rounded-borders bg-white q-pa-md q-mt-md"
v-if="$q.platform.is.mobile"
style="
background: #fff;
padding: 20px;
border-radius: 10px;
margin-top: 20px;
"
>
<q-field
class="q-my-md"
stack-label
label="選擇日期、選項"
standout
dense
<div
class="rounded-borders bg-white q-pa-md q-mt-md"
v-if="$q.platform.is.mobile"
>
<div class="self-center full-width no-outline" tabindex="0">
{{ currentPrice.startDate }}
</div>
<q-popup-proxy ref="qDateProxy">
<calendar
class="bg-white q-pa-md"
:priceList="dataList.priceList"
@change="changeChosenDateHandler"
ref="calendar"
></calendar>
</q-popup-proxy>
</q-field>
<template v-if="currentPrice && currentPrice.startDate">
<order-preview
class="q-pa-md"
:price="currentPrice"
@reset="resetHandler"
></order-preview>
</template>
</div>
<!--方案选择区 -->
<div class="flex justify-between">
<div class="f20">
湖岩美术馆 & 爱宝乐园 包车一日游
<span class="cancel">3天前可免费取消</span>
<q-field
class="q-my-md"
stack-label
label="選擇日期、選項"
standout
dense
>
<div class="self-center full-width no-outline" tabindex="0">
{{ currentPrice.startDate }}
</div>
<q-popup-proxy ref="qDateProxy">
<calendar
class="bg-white q-pa-md"
:priceList="dataList.priceList"
@change="changeChosenDateHandler"
ref="calendar"
></calendar>
</q-popup-proxy>
</q-field>
<template v-if="currentPrice && currentPrice.startDate">
<order-preview
class="q-pa-md"
:price="currentPrice"
@reset="resetHandler"
></order-preview>
</template>
</div>
<div>
<div class="f20">CNY <span class="f14">起</span></div>
<div>最早可预订日</div>
<!--方案选择区 -->
<div class="flex justify-between">
<div class="f20 flex item-center">
湖岩美术馆 & 爱宝乐园 包车一日游
<span class="cancel">3天前可免费取消</span>
</div>
<div>
<div class="f20">
CNY {{ moneyFormat(dataList.MinPrice, 0)
}}<span class="f14">起</span>
</div>
<div>最早可预订日</div>
</div>
</div>
</div>
<div class="flex bold mr">
关于此方案
<div class="flex normal ml">
<div class="ml">3天前可免费取消</div>
<div class="flex bold mr about">
关于此方案
<div class="flex normal ml">
<div class="ml">3天前可免费取消</div>
</div>
</div>
</div>
<div>
<div class="mt mb bold f18">选择日期、选项</div>
<div class="flex">
<div style="width:50%">
<div>请选择出发日期</div>
<div>
<table class="date-table">
<thead>
<tr class="row-day">
<th class="cell-day">日</th>
<th class="cell-day">一</th>
<th class="cell-day">二</th>
<th class="cell-day">三</th>
<th class="cell-day">四</th>
<th class="cell-day">五</th>
<th class="cell-day">六</th>
</tr>
</thead>
<tbody>
<tr
class="row-date"
v-for="(item, index) in daysList"
:key="index"
>
<td
class="cell-date selectable"
v-for="(el, index) in item"
<div>
<div class="mt mb bold f18">选择日期、选项</div>
<div class="flex">
<div style="width: 50%">
<div>请选择出发日期</div>
<div>
<div class="flex justify-between f20 bold padding">
<span>{{ currentYM.str }}</span>
<div>
<i
class="iconfont iconpreviewleft"
style="font-size: 28px"
:class="{'gray': isCurrent}"
@click="handleMinus"
></i
><i
@click="handlePlus" :class="{'gray': isLast}"
class="iconfont iconpreviewright"
style="font-size: 28px"
></i>
</div>
</div>
<table class="date-table">
<thead>
<tr class="row-day">
<th class="cell-day">日</th>
<th class="cell-day">一</th>
<th class="cell-day">二</th>
<th class="cell-day">三</th>
<th class="cell-day">四</th>
<th class="cell-day">五</th>
<th class="cell-day">六</th>
</tr>
</thead>
<tbody>
<tr
class="row-date"
v-for="(item, index) in daysList"
:key="index"
>
<div v-if="el && el.disabled">
<div v-if="el" class="date-num disabled">
{{ el.day }}
<td
class="cell-date selectable"
v-for="(el, index) in item"
:key="index"
>
<div v-if="el && el.disabled">
<div v-if="el" class="date-num disabled">
{{ el.day }}
</div>
</div>
</div>
<div v-else>
<div v-if="el" class="date-num">{{ el.day }}</div>
<div v-if="el" class="price">
{{ el.price || "1566" }} 起
<div v-else>
<div v-if="el" class="date-num">{{ el.day }}</div>
<div v-if="el" class="price">
{{ el.price || "1566" }} 起
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div style="width: 40%;margin-left: 10%">
<div class="mt mb">车辆选择</div>
<div>
<q-btn class="car-tag mr" v-for="item in dataList.CarTypeList" :key="item.Id">
{{ item.CarName }}({{ item.PeopleNum }}人)
</q-btn>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="mt mb">选择辆数</div>
<div class="flex justify-between bold f18 mt mb">
<span>辆数</span>
<div style="width: 40%; margin-left: 10%">
<div class="mt mb">车辆选择</div>
<div>
<span>CNY 1,667 起/每辆</span>
<i class="iconfont iconminus"></i>
<span>1</span>
<i class="iconfont iconplus"></i>
<q-btn
class="car-tag mr"
v-for="item in dataList.CarTypeList"
:key="item.Id"
>
{{ item.CarName }}({{ item.PeopleNum }}人)
</q-btn>
</div>
<div class="mt mb">选择辆数</div>
<div class="flex justify-between bold f18 mt mb">
<span>辆数</span>
<div>
<span>CNY 1,667 起/每辆</span>
<i
class="iconfont icondingweixiao q-icon notranslate"
style="font-size: 14px; margin-right: 8px"
></i>
<i class="iconfont iconminus"></i>
<span>1</span>
<i class="iconfont iconplus"></i>
</div>
</div>
<q-separator />
<div class="flex justify-between mt mb">
<span>总金额</span>
<span class="f20">CNY 100</span>
</div>
<div class="flex flex-end">
<q-btn class="mr" label="加入购物车"></q-btn>
<q-btn label="立即订购"></q-btn>
</div>
</div>
<q-separator />
<div class="flex justify-between mt mb">
<span>总金额</span>
<span class="f20">CNY 100</span>
</div>
<div class="flex flex-end">
<q-btn class="mr" label="加入购物车"></q-btn>
<q-btn label="立即订购"></q-btn>
</div>
</div>
<div></div>
</div>
<div></div>
</div>
<div class="text-h6 q-pt-lg" v-if="$q.platform.is.mobile">
所選方案詳情
</div>
<div
class="bg-white rounded-borders q-mt-md"
v-if="dataList.priceList && dataList.priceList.length > 0"
>
<div class="q-pa-md row">
<div class="col">
<div
class="text-subtitle1 text-weight-bold row items-center"
v-if="$q.platform.is.desktop"
>
<span class="q-mr-md">行程標準出行方案</span>
<q-chip
square
color="orange"
size="sm"
text-color="grey-2"
class="text-light"
label="15天前可免費取消"
/>
</div>
<div class="text-grey f12">
<ul class="q-pl-md no-margin">
<li v-for="(x, i) in warnBuy" class="q-mt-md" :key="i">
{{ x }}
</li>
</ul>
</div>
</div>
<div class="" v-if="$q.platform.is.desktop">
<div class="row items-center">
<span class="product-price text-h6 q-mr-md"
>CNY
{{
moneyFormat(dataList.priceList[0].originalB2CPrice, 0)
}}</span
>
<q-btn
color="primary"
outline
:label="showOrderPreview ? '取消選擇' : '選擇'"
@click="showOrderPreview = !showOrderPreview"
class="q-px-lg"
/>
</div>
<div class="text-info q-mt-md text-right">
最早可預訂日期：{{ dataList.priceList[0].startDate }}
</div>
</div>
<div class="text-h6 q-pt-lg" v-if="$q.platform.is.mobile">
所選方案詳情
</div>
<div
class="q-pa-md"
style="border-top: 1px solid #eee"
v-if="showOrderPreview"
class="bg-white rounded-borders q-mt-md"
v-if="dataList.priceList && dataList.priceList.length > 0"
>
<div class="q-pa-md bg-grey-2 row items-center rounded-borders">
<div class="text-subtitle2 text-weight-bold q-mr-xl">
關於此方案
<div class="q-pa-md row">
<div class="col">
<div
class="text-subtitle1 text-weight-bold row items-center"
v-if="$q.platform.is.desktop"
>
<span class="q-mr-md">行程標準出行方案</span>
<q-chip
square
color="orange"
size="sm"
text-color="grey-2"
class="text-light"
label="15天前可免費取消"
/>
</div>
<div class="text-grey f12">
<ul class="q-pl-md no-margin">
<li v-for="(x, i) in warnBuy" class="q-mt-md" :key="i">
{{ x }}
</li>
</ul>
</div>
</div>
<div class="" v-if="$q.platform.is.desktop">
<div class="row items-center">
<span class="product-price text-h6 q-mr-md"
>CNY
{{
moneyFormat(dataList.priceList[0].originalB2CPrice, 0)
}}</span
>
<q-btn
color="primary"
outline
:label="showOrderPreview ? '取消選擇' : '選擇'"
@click="showOrderPreview = !showOrderPreview"
class="q-px-lg"
/>
</div>
<div class="text-info q-mt-md text-right">
最早可預訂日期：{{ dataList.priceList[0].startDate }}
</div>
</div>
<q-chip
class="transparent q-mr-xl no-padding"
square
icon="iconfont iconcancel"
label="15天前可免費取消"
/>
<q-chip
class="transparent q-mr-xl no-padding"
square
icon="iconfont iconroundcheck"
label="6個工作日內（不含例休假）確認"
/>
</div>
<div class="q-mt-lg row" v-if="$q.platform.is.desktop">
<div class="col">
<calendar
:priceList="dataList.priceList"
@change="changeChosenDateHandler"
ref="calendar"
></calendar>
<div
class="q-pa-md"
style="border-top: 1px solid #eee"
v-if="showOrderPreview"
>
<div class="q-pa-md bg-grey-2 row items-center rounded-borders">
<div class="text-subtitle2 text-weight-bold q-mr-xl">
關於此方案
</div>
<q-chip
class="transparent q-mr-xl no-padding"
square
icon="iconfont iconcancel"
label="15天前可免費取消"
/>
<q-chip
class="transparent q-mr-xl no-padding"
square
icon="iconfont iconroundcheck"
label="6個工作日內（不含例休假）確認"
/>
</div>
<div class="col q-ml-xl">
<order-preview
:price="currentPrice"
@reset="resetHandler"
></order-preview>
<div class="q-mt-lg row" v-if="$q.platform.is.desktop">
<div class="col">
<calendar
:priceList="dataList.priceList"
@change="changeChosenDateHandler"
ref="calendar"
></calendar>
</div>
<div class="col q-ml-xl">
<order-preview
:price="currentPrice"
@reset="resetHandler"
></order-preview>
</div>
</div>
</div>
</div>
......@@ -474,6 +507,7 @@
<div
:class="{ 'col-8': $q.platform.is.desktop, col: $q.platform.is.mobile }"
>
<div id="product">产品介绍</div>
<div
class="q-mt-md q-pb-xl"
ref="diyContext"
......@@ -482,6 +516,7 @@
v-if="dataList.feature && dataList.feature.featureHtml != ''"
></div>
<div
id="price"
class="text-h5 text-weight-bold text-left q-mt-xl"
ref="price"
:class="{
......@@ -521,6 +556,7 @@
}"
></div>
<div
id="warning"
class="text-h5 text-weight-bold text-left q-mt-xl"
ref="warning"
:class="{
......@@ -542,6 +578,7 @@
}"
></div>
<div
id="tips"
class="text-h5 text-weight-bold text-left q-mt-xl"
ref="tips"
:class="{
......@@ -563,6 +600,7 @@
}"
></div>
<div
id="cancelTips"
class="text-h5 text-weight-bold text-left q-mt-xl"
ref="cancelTips"
:class="{
......@@ -604,12 +642,7 @@
class="text-subtitle2 text-grey-6 cursor-pointer q-mb-md"
v-for="(x, i) in navs"
:key="i"
@click="goScrollHandler(x.top + 20)"
:class="{
'active-trip-module':
currentHeight >= x.top &&
(i == navs.length - 1 || currentHeight < navs[i + 1].top),
}"
@click="goScrollHandler(x.id)"
>
{{ x.display }}
</div>
......@@ -632,6 +665,9 @@ export default {
props: [],
data() {
return {
currentYM: { year: 2023, month: 2, str: "2023-02" }, // 当前年月
isCurrent: false,
isLast: false,
daysList: [],
tab: "",
searchDate: "",
......@@ -687,31 +723,31 @@ export default {
],
navs: [
{
val: "product",
id: "#product",
top: 0,
isActive: false,
display: "產品介紹",
},
{
val: "price",
id: "#price",
top: 0,
isActive: false,
display: "費用說明",
},
{
val: "warning",
id: "#warning",
top: 0,
isActive: false,
display: "購買須知",
},
{
val: "tips",
id: "#tips",
top: 0,
isActive: false,
display: "溫馨提示",
},
{
val: "cancelTips",
id: "#cancelTips",
top: 0,
isActive: false,
display: "取消政策",
......@@ -739,27 +775,6 @@ export default {
immediate: true,
deep: true,
},
currentHeight: {
handler: function (val, oldval) {
this.navs.forEach((x, i) => {
if (
x.top &&
this.currentHeight >= x.top &&
(i == this.navs.length - 1 ||
this.currentHeight < this.navs[i + 1].top)
) {
if (this.tab != x.display) {
this.tab = x.display;
return;
} else {
return;
}
}
});
},
immediate: false,
deep: true,
},
},
created() {
if (this.$route.params.id) {
......@@ -770,7 +785,6 @@ export default {
}
},
mounted() {
window.addEventListener("scroll", this.handleScroll);
if (localStorage.baseifo) {
this.TripConfig = JSON.parse(window.localStorage.getItem("baseifo"));
}
......@@ -780,55 +794,44 @@ export default {
this.getCarPriceData();
},
methods: {
getTopNum(x) {
this.days = JSON.parse(x);
},
changeTripShowHandler() {
this.$nextTick(() => {
this.navs.forEach((x) => {
x.top =
this.$refs[x.val].getBoundingClientRect().top +
this.currentHeight -
60;
console.log(x.top);
});
});
},
handleScroll(e) {
let temp = this.getScroll().top;
// if(temp-this.currentHeight>0){
// this.scrollDirection='down'
// }else{
// this.scrollDirection='up'
// }
this.stickyHeight = document.querySelector(".q-header--hidden")
? "translateY(0px)"
: "translateY(85px)";
this.currentHeight = temp;
if (
this.videoPosition > 0 &&
this.videoPosition < this.currentHeight &&
this.options.currentPage == 0 &&
!this.isPictureInPicture
) {
this.isPictureInPicture = true;
let t = document.querySelectorAll("video")[0];
try {
t.requestPictureInPicture();
} catch (error) {}
} else if (
this.videoPosition > 0 &&
this.videoPosition > this.currentHeight &&
this.options.currentPage == 0 &&
this.isPictureInPicture
) {
this.isPictureInPicture = false;
document.exitPictureInPicture();
handleMinus() {
if(this.isCurrent) return;
const { str, year, month } = this.currentYM;
if (month === 1) {
this.currentYM = {
year: year - 1,
month: 12,
str: `${year - 1}-12`,
};
} else {
this.currentYM = {
year: year,
month: month - 1,
str: `${year}-${month - 1 > 10 ? month - 1 : "0" + (month - 1)}`,
};
}
let h = document.location.hash;
if (h.indexOf("#/detail/") == -1) {
window.removeEventListener("scroll", this.handleScroll);
this.getCarPriceData();
},
handlePlus() {
if(this.isLast) return;
const { str, year, month } = this.currentYM;
if (month === 12) {
this.currentYM = {
year: year + 1,
month: 1,
str: `${year + 1}-01`,
};
} else {
this.currentYM = {
year: year,
month: month + 1,
str: `${year}-${month + 1 >= 10 ? month + 1 : "0" + (month + 1)}`,
};
}
this.getCarPriceData();
},
getTopNum(x) {
this.days = JSON.parse(x);
},
getScroll() {
return {
......@@ -844,12 +847,9 @@ export default {
0,
};
},
goScrollHandlerDay(top) {
window.scrollTo(0, top);
},
goScrollHandler(top) {
window.scrollTo(0, top);
goScrollHandler(id) {
console.log("scrollIntoView", id);
document.querySelector(id).scrollIntoView({ behavior: "smooth" });
},
slideHandler(e) {
this.options.currentPage = e.currentPage;
......@@ -937,20 +937,6 @@ export default {
this.zoomDiyContext = tw > 1 ? 1 : tw.toFixed(2);
}
setTimeout(() => {
this.navs.forEach((x) => {
x.top =
this.$refs[x.val].getBoundingClientRect().top +
this.currentHeight -
60;
});
this.priceListHeight =
this.$refs.pricelist.getBoundingClientRect().top +
this.currentHeight -
60;
this.days = [];
}, 1000);
try {
document
.querySelector("#scrollId .q-page-container")
......@@ -978,16 +964,21 @@ export default {
this.$q.loading.show();
this.apipost(
"b2c_get_GetCarSingleProductMonthPriceAll",
{ ProductId: "16", Month: "2023-02" },
{ ProductId: "16", Month: this.currentYM.str },
(r) => {
let list = [[]];
let y = 0; // 元素纵向下标
let day = 0;
if (r.data.resultCode == 1) {
let week = dayjs("2023-02-01").day();
let week = dayjs(this.currentYM.str + "-01").day();
console.log("week", week);
list[0].length = week;
const isCurrent = true;
const isCurrent =
this.currentYM.year === dayjs().year() &&
this.currentYM.month === dayjs().month() + 1;
this.isCurrent = isCurrent;
this.isLast = this.currentYM.year === dayjs().year() +1 &&
this.currentYM.month === dayjs().month() + 1;
// 如果是当前月
if (isCurrent) {
let days = dayjs(r.data.data[0].Date).date();
......@@ -1124,6 +1115,9 @@ export default {
}
</style>
<style scoped>
.gray {
color: #999;
}
.date-table {
width: 100%;
padding: 5px;
......@@ -1184,7 +1178,10 @@ export default {
color: #fff;
font-size: 12px;
}
.car-tag {
.about {
background-color: #f6f6f6;
padding: 15px 20px;
margin: 20px 0;
border-radius: 10px;
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment