Skip to content

M
million
Commit 61ee8d43 authored by 罗超's avatar 罗超
Browse files
Options

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

# Conflicts:
#	src/pages/city/cityDetail.vue
#	src/pages/detailsNew.vue
parents 4ec7134c 57a1e419
Show whitespace changes
Inline Side-by-side
Showing with 851 additions and 513 deletions
src/components/car/orderPreview.vue 0 → 100644
View file @ 61ee8d43
<template>
<div class="column full-height">
<div class="col">
<div class="text-right">
<q-btn
color="primary"
icon="refresh"
label="全部重選"
@click="resetHandler"
flat
/>
</div>
<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'"
unelevated
class="car-tag mr"
v-for="item in CarTypeList"
:key="item.Id"
>
{{ item.CarName }}({{ item.PeopleNum }}人)
</q-btn>
</div>
<div class="text-grey-6 f12 q-my-md">選擇數量</div>
<div class="row items-end">
<div class="col" :class="{'column':$q.platform.is.mobile}">
<div v-if="selectedObj">
<span class="text-subtitle2 text-weight-bold">{{selectedObj.CarName}}</span>
<span class="text-grey-6 f12 q-ml-sm"></span>({{ selectedObj.PeopleNum }}人)</span>
</div>
<div v-if="$q.platform.is.mobile">
<span class="text-grey-7 product-price" style="font-size: 13px">
CNY {{ moneyFormat(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.originalB2CPrice, 0) }} /每辆
</span>
<q-input
style="width: 150px"
@input="changePeople"
v-model="chosenObj.Count"
class="col"
:class="{
'q-ml-sm q-px-none q-pl-none': $q.platform.is.desktop,
}"
mask="#"
reverse-fill-mask
dense
standout
readonly
>
<template v-slot:prepend>
<q-btn
color="primary"
size="sm"
class="q-px-none"
flat
icon="remove"
@click="addPeople('Count', -1)"
/>
</template>
<template v-slot:append>
<q-btn
color="primary"
size="sm"
class="q-px-none"
flat
icon="add"
@click="addPeople('Count', 1)"
/>
</template>
</q-input>
</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 class="q-mt-md q-pt-md" style="border-top: 1px dashed #eee">
<div class="row items-center">
<span class="text-subtitle2 text-grey-6 col">總金額</span>
<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"/>
</div>
</div>
</div>
</template>
<script>
export default {
props: ["price","CarTypeList","configId","Month"],
watch: {
price: {
handler(n, o) {
this.p = n;
console.log(n,'-----')
this.chosenObj.startDate = n.startDate;
this.calcMoney()
},
deep: true,
immediate: true
},
CarTypeList: {
handler(n, o) {
this.CarTypeList = n;
this.selectedCar = this.CarTypeList[0].Id
},
deep: true,
immediate: true
},
},
data() {
return {
p: {},
chosenObj: null,
sumPrice:0,
selectedObj: null,
priceList: [],
selectedCar: 0
};
},
created() {
this.initModel();
if(this.p.startDate){
this.chosenObj.startDate = this.p.startDate;
this.calcMoney()
this.getCarPriceData2()
this.selectedCar = this.CarTypeList[0].Id
}
},
methods: {
// 获取车的详情
getCarPriceData2() {
this.priceList = []
this.apipost(
"b2c_get_GetCarSingleProductMonthPrice",
{
ProductId: this.configId,
Month: this.Month,
AirportId: '',
CarTypeId: this.selectedCar
},
(r) => {
if (r.data.resultCode == 1) {
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
this.p.originalB2CPrice = x.Price
})
this.$emit('getPriceList',JSON.stringify(r.data.data),this.selectedCar)
}
},null)
},
handleSelect(item){
this.selectedObj = item
this.selectedCar = item.Id
this.getCarPriceData2()
},
initModel() {
this.sumPrice=0
this.chosenObj = {
startDate: "",
Count: 1,
remark: "",
};
},
resetHandler() {
this.p = {};
this.initModel()
this.$emit("reset");
},
changePeople(val) {},
addPeople(m, i, isDf = false) {
this.chosenObj[m] = parseInt(this.chosenObj[m]) + i;
if(m!='Count'){
this.chosenObj[m] = this.chosenObj[m] < 0 ? 0 : this.chosenObj[m]++;
}else{
this.chosenObj[m] = this.chosenObj[m] < 1 ? 1 : this.chosenObj[m]++;
}
this.calcMoney()
},
calcMoney() {
if (!this.p) return;
let money = this.p.originalB2CPrice * this.chosenObj.Count;
this.sumPrice = money;
},
},
};
</script>
<style></style>
src/components/numberInputStep.vue 0 → 100644
View file @ 61ee8d43
<style scoped>
.icon-size {
font-size: 20px;
}
.number {
width: 60px;
text-align: center;
}
</style>
<template>
<div>
<q-input
style="width: 150px"
@input="changePeople"
v-model="value"
class="col"
:class="{
'q-ml-sm q-px-none q-pl-none': $q.platform.is.desktop,
}"
mask="#"
reverse-fill-mask
dense
standout
readonly
>
<template v-slot:prepend>
<q-btn
color="primary"
size="sm"
class="q-px-none"
flat
icon="remove"
@click="minusClick"
/>
</template>
<template v-slot:append>
<q-btn
color="primary"
size="sm"
class="q-px-none"
flat
icon="add"
@click="plusClick"
/>
</template>
</q-input>
</div>
</template>
<script>
export default {
props: {
min: {
default: undefined,
},
max: {
default: undefined,
},
defaultValue: {
require: true,
default: 0,
},
step: {
default: 1,
},
},
data() {
return {
value: this.defaultValue
}
},
methods: {
minusClick() {
if(this.min === undefined || this.value > this.min) {
this.value-= this.step
this.$emit('input', this.value)
}
},
plusClick() {
if(this.max === undefined || this.value < this.max) {
this.value+= this.step
this.$emit('input', this.value)
}
},
changePeople(val) {
this.value+= val
this.$emit('input', this.value)
},
},
}
</script>
\ No newline at end of file
src/components/trip/calendar.vue
View file @ 61ee8d43
...@@ -108,7 +108,7 @@ export default { ...@@ -108,7 +108,7 @@ export default {
}, },
watch: { watch: {
priceList: { priceList: {
handler(oldValue, newVal) { handler(newVal, oldValue) {
this.prices = newVal; this.prices = newVal;
this.init(); this.init();
}, },
...@@ -126,8 +126,8 @@ export default { ...@@ -126,8 +126,8 @@ export default {
new Date(this.prices[0].startDate), new Date(this.prices[0].startDate),
"YYYY/MM" "YYYY/MM"
); );
this.currentMonth = let current = this.months.findIndex((x) => x.monthValue == firstMonth)
this.months.findIndex((x) => x.monthValue == firstMonth) ?? 0; this.currentMonth = current>-1?current:0;
this.changeMonthHandler(); this.changeMonthHandler();
}, },
createChosenDateHandler() { createChosenDateHandler() {
......
src/components/trip/orderPreview.vue
View file @ 61ee8d43
...@@ -330,6 +330,7 @@ export default { ...@@ -330,6 +330,7 @@ export default {
this.calcMoney() this.calcMoney()
}, },
deep: true, deep: true,
immediate: true,
}, },
}, },
data() { data() {
......
src/components/trip/tripView/calendar.vue
View file @ 61ee8d43
...@@ -72,7 +72,7 @@ export default { ...@@ -72,7 +72,7 @@ export default {
x.title = y.childItem.title; x.title = y.childItem.title;
} else if (y.type == 1) { } else if (y.type == 1) {
y.subtitle = y.subtitle =
y.childItem.subTraffic[0].startTime + y.childItem.subTraffic.length>0&&y.childItem.subTraffic[0].startTime +
" - " + " - " +
y.childItem.subTraffic[y.childItem.subTraffic.length - 1] y.childItem.subTraffic[y.childItem.subTraffic.length - 1]
.endTime; .endTime;
...@@ -109,7 +109,7 @@ export default { ...@@ -109,7 +109,7 @@ export default {
} }
}, },
formatTraffice(tras) { formatTraffice(tras) {
let txt = "從" + tras[0].startCityName; let txt = "從" + tras.length>0&&tras[0].startCityName;
tras.forEach((z, i) => { tras.forEach((z, i) => {
if (i > 0) { if (i > 0) {
txt = "；再"; txt = "；再";
......
src/components/trip/tripView/list.vue
View file @ 61ee8d43
...@@ -336,7 +336,7 @@ export default { ...@@ -336,7 +336,7 @@ export default {
x.title = y.childItem.title; x.title = y.childItem.title;
} else if (y.type == 1) { } else if (y.type == 1) {
y.subtitle = y.subtitle =
y.childItem.subTraffic[0].startTime + y.childItem.subTraffic.length>0&&y.childItem.subTraffic[0].startTime +
" - " + " - " +
y.childItem.subTraffic[y.childItem.subTraffic.length - 1] y.childItem.subTraffic[y.childItem.subTraffic.length - 1]
.endTime; .endTime;
...@@ -352,7 +352,7 @@ export default { ...@@ -352,7 +352,7 @@ export default {
} }
}, },
formatTraffice(tras) { formatTraffice(tras) {
let txt = "從" + tras[0].startCityName; let txt = "從" + tras.length>0&&tras[0].startCityName;
tras.forEach((z, i) => { tras.forEach((z, i) => {
if (i > 0) { if (i > 0) {
txt = "；再"; txt = "；再";
......
src/pages/city/cityDetail.vue
View file @ 61ee8d43
...@@ -82,12 +82,22 @@ ...@@ -82,12 +82,22 @@
</style> </style>
<template> <template>
<div class="back"> <div class="back">
<div v-if="detail" class="wapper q-pt-md"> <div v-if="detail" class="wapper">
<q-breadcrumbs gutter="none" class=" q-mb-md"> <div class="row items-center q-pt-md q-mb-lg">
<q-breadcrumbs-el label="Home" /> <q-breadcrumbs
<q-breadcrumbs-el label="Components" /> class="col f12 no-wrap q-mr-md"
<q-breadcrumbs-el label="Breadcrumbs" /> style="font-size: 13px"
>
<q-breadcrumbs-el
icon="home"
label="首頁"
class="cursor-pointer"
@click="CommonJump('/index', {})"
/>
<q-breadcrumbs-el :label="detail.AreaName" class="cursor-pointer" />
</q-breadcrumbs> </q-breadcrumbs>
<!-- <div class="text-grey-6 f12">Product No. # {{ dataList.id }}</div> -->
</div>
<div class="flex relative"> <div class="flex relative">
<div class="absolute name">{{detail.AreaName}}</div> <div class="absolute name">{{detail.AreaName}}</div>
......
src/pages/detailsCar.vue
View file @ 61ee8d43
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
class="col product-price text-subtitle1 text-weight-bold" class="col product-price text-subtitle1 text-weight-bold"
style="text-align: left" style="text-align: left"
> >
<span>CNY {{ moneyFormat(dataList.MinPrice, 0) }}</span> <span v-if="dataList&&dataList.MinPrice">CNY {{ moneyFormat(dataList.MinPrice, 0) }}</span>
<span class="q-ml-sm f12 text-grey-7">起</span> <span class="q-ml-sm f12 text-grey-7">起</span>
</span> </span>
<q-btn <q-btn
...@@ -117,7 +117,7 @@ ...@@ -117,7 +117,7 @@
> >
<div class="col q-mr-lg"> <div class="col q-mr-lg">
<div class="text-h6 ellipsis-2-lines">{{ dataList.Name }}</div> <div class="text-h6 ellipsis-2-lines">{{ dataList.Name }}</div>
<div class="text-h6 ellipsis-2-lines">{{ dataList.Description }}</div> <!-- <div class="text-h6 ellipsis-2-lines">{{ dataList.Description }}</div> -->
<div class="q-mt-md f12 text-grey-6"> <div class="q-mt-md f12 text-grey-6">
<q-icon <q-icon
name="iconfont icondingweixiao" name="iconfont icondingweixiao"
...@@ -157,7 +157,7 @@ ...@@ -157,7 +157,7 @@
class="transparent q-mr-xl no-padding" class="transparent q-mr-xl no-padding"
square square
icon="iconfont iconcancel" icon="iconfont iconcancel"
label="15天前可免費取消" label="3天前可免費取消"
/> />
</div> </div>
</div> </div>
...@@ -268,7 +268,7 @@ ...@@ -268,7 +268,7 @@
<q-popup-proxy ref="qDateProxy"> <q-popup-proxy ref="qDateProxy">
<calendar <calendar
class="bg-white q-pa-md" class="bg-white q-pa-md"
:priceList="dataList.priceList" :priceList="priceList"
@change="changeChosenDateHandler" @change="changeChosenDateHandler"
ref="calendar" ref="calendar"
></calendar> ></calendar>
...@@ -277,139 +277,22 @@ ...@@ -277,139 +277,22 @@
<template v-if="currentPrice && currentPrice.startDate"> <template v-if="currentPrice && currentPrice.startDate">
<order-preview <order-preview
class="q-pa-md" class="q-pa-md"
:configId="msg.configId"
:Month="currentYM.str"
:CarTypeList="dataList.CarTypeList"
:price="currentPrice" :price="currentPrice"
@reset="resetHandler" @reset="resetHandler"
@getPriceList="getPriceList"
></order-preview> ></order-preview>
</template> </template>
</div> </div>
<!--方案选择区 --> <!--方案选择区 -->
<div class="flex justify-between"> <!-- <div class="text-h6 q-pt-lg" v-if="$q.platform.is.mobile">
<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 class="flex bold mr about">
关于此方案
<div class="flex normal ml">
<div class="ml">3天前可免费取消</div>
</div>
</div>
<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"
>
<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 v-else>
<div v-if="el" class="date-num">{{ el.day }}</div>
<div v-if="el" class="price">
{{ el.price || "1566" }} 起
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div style="width: 40%; margin-left: 10%">
<div class="mt mb">车辆选择</div>
<div>
<q-btn @click="handleSelect(item.Id)"
class="car-tag mr"
:class="{'car-select': item.Id === selectedCar}"
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>
</div>
<div></div>
</div>
<div class="text-h6 q-pt-lg" v-if="$q.platform.is.mobile">
所選方案詳情 所選方案詳情
</div> </div> -->
<div <div
class="bg-white rounded-borders q-mt-md" class="bg-white rounded-borders q-mt-md"
v-if="dataList.priceList && dataList.priceList.length > 0" v-if="priceList && priceList.length > 0"
> >
<div class="q-pa-md row"> <div class="q-pa-md row">
<div class="col"> <div class="col">
...@@ -424,23 +307,23 @@ ...@@ -424,23 +307,23 @@
size="sm" size="sm"
text-color="grey-2" text-color="grey-2"
class="text-light" class="text-light"
label="15天前可免費取消" label="3天前可免费取消"
/> />
</div> </div>
<div class="text-grey f12"> <!-- <div class="text-grey f12">
<ul class="q-pl-md no-margin"> <ul class="q-pl-md no-margin">
<li v-for="(x, i) in warnBuy" class="q-mt-md" :key="i"> <li v-for="(x, i) in warnBuy" class="q-mt-md" :key="i">
{{ x }} {{ x }}
</li> </li>
</ul> </ul>
</div> </div> -->
</div> </div>
<div class="" v-if="$q.platform.is.desktop"> <div class="" v-if="$q.platform.is.desktop">
<div class="row items-center"> <div class="row items-center">
<span class="product-price text-h6 q-mr-md" <span class="product-price text-h6 q-mr-md"
>CNY >CNY
{{ {{
moneyFormat(dataList.priceList[0].originalB2CPrice, 0) moneyFormat(priceList[0].originalB2CPrice, 0)
}}</span }}</span
> >
<q-btn <q-btn
...@@ -452,7 +335,7 @@ ...@@ -452,7 +335,7 @@
/> />
</div> </div>
<div class="text-info q-mt-md text-right"> <div class="text-info q-mt-md text-right">
最早可預訂日期：{{ dataList.priceList[0].startDate }} 最早可預訂日期：{{ priceList[0].startDate }}
</div> </div>
</div> </div>
</div> </div>
...@@ -469,27 +352,25 @@ ...@@ -469,27 +352,25 @@
class="transparent q-mr-xl no-padding" class="transparent q-mr-xl no-padding"
square square
icon="iconfont iconcancel" icon="iconfont iconcancel"
label="15天前可免費取消" label="3天前可免費取消"
/>
<q-chip
class="transparent q-mr-xl no-padding"
square
icon="iconfont iconroundcheck"
label="6個工作日內（不含例休假）確認"
/> />
</div> </div>
<div class="q-mt-lg row" v-if="$q.platform.is.desktop"> <div class="q-mt-lg row" v-if="$q.platform.is.desktop">
<div class="col"> <div class="col">
<calendar <calendar
:priceList="dataList.priceList" :priceList="priceList"
@change="changeChosenDateHandler" @change="changeChosenDateHandler"
ref="calendar" ref="calendar"
></calendar> ></calendar>
</div> </div>
<div class="col q-ml-xl"> <div class="col q-ml-xl">
<order-preview <order-preview
:configId="msg.configId"
:Month="currentYM.str"
:CarTypeList="dataList.CarTypeList"
:price="currentPrice" :price="currentPrice"
@reset="resetHandler" @reset="resetHandler"
@getPriceList="getPriceList"
></order-preview> ></order-preview>
</div> </div>
</div> </div>
...@@ -508,7 +389,9 @@ ...@@ -508,7 +389,9 @@
<div <div
:class="{ 'col-8': $q.platform.is.desktop, col: $q.platform.is.mobile }" :class="{ 'col-8': $q.platform.is.desktop, col: $q.platform.is.mobile }"
> >
<div id="product">产品介绍</div> <div id="product" :class="{
'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}">產品介紹</div>
<div <div
class="q-mt-md q-pb-xl" class="q-mt-md q-pb-xl"
ref="diyContext" ref="diyContext"
...@@ -657,7 +540,7 @@ ...@@ -657,7 +540,7 @@
<script> <script>
import { slider, slideritem } from "vue-concise-slider"; import { slider, slideritem } from "vue-concise-slider";
import calendar from "../components/trip/calendar.vue"; import calendar from "../components/trip/calendar.vue";
import OrderPreview from "src/components/trip/orderPreview.vue"; import OrderPreview from "src/components/car/orderPreview.vue";
import smaple from "src/components/trip/smaple.vue"; import smaple from "src/components/trip/smaple.vue";
import Trip from "src/components/trip/trip.vue"; import Trip from "src/components/trip/trip.vue";
import block from "src/components/trip/block/index"; import block from "src/components/trip/block/index";
...@@ -666,6 +549,7 @@ export default { ...@@ -666,6 +549,7 @@ export default {
props: [], props: [],
data() { data() {
return { return {
priceList: [],
selectedCar: '', selectedCar: '',
currentYM: { year: 2023, month: 2, str: "2023-02" }, // 当前年月 currentYM: { year: 2023, month: 2, str: "2023-02" }, // 当前年月
isCurrent: false, isCurrent: false,
...@@ -777,6 +661,13 @@ export default { ...@@ -777,6 +661,13 @@ export default {
immediate: true, immediate: true,
deep: true, deep: true,
}, },
priceList: {
handler: function (val, oldval) {
this.priceList = val;
},
immediate: true,
deep: true,
},
}, },
created() { created() {
if (this.$route.params.id) { if (this.$route.params.id) {
...@@ -793,52 +684,17 @@ export default { ...@@ -793,52 +684,17 @@ export default {
// this.getData(); // this.getData();
window.addEventListener("scroll", this.menu); window.addEventListener("scroll", this.menu);
this.getCarData(); this.getCarData();
this.getCarPriceData(); // this.getCarPriceData();
}, },
methods: { methods: {
handleSelect(id) { getPriceList(Arr,id){
this.priceList = JSON.parse(Arr)
if(this.selectedCar === id) { if(this.selectedCar === id) {
this.selectedCar = '' this.selectedCar = ''
} else { } else {
this.selectedCar = id this.selectedCar = id
} }
}, },
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)}`,
};
}
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) { getTopNum(x) {
this.days = JSON.parse(x); this.days = JSON.parse(x);
}, },
...@@ -886,7 +742,9 @@ export default { ...@@ -886,7 +742,9 @@ export default {
changeChosenDateHandler(val) { changeChosenDateHandler(val) {
val.price.version = new Date().getTime(); val.price.version = new Date().getTime();
this.currentPrice = JSON.parse(JSON.stringify(val.price)); this.currentPrice = JSON.parse(JSON.stringify(val.price));
if(this.$q.platform.is.mobile){
this.$refs.qDateProxy.hide(); this.$refs.qDateProxy.hide();
}
}, },
showDialog() { showDialog() {
this.isShowDialog = true; this.isShowDialog = true;
...@@ -900,10 +758,11 @@ export default { ...@@ -900,10 +758,11 @@ export default {
this.$q.loading.show(); this.$q.loading.show();
this.apipost( this.apipost(
"b2c_get_GetCarSingleProductDetail", "b2c_get_GetCarSingleProductDetail",
{ ProductId: "16" }, { ProductId: this.msg.configId },
(r) => { (r) => {
if (r.data.resultCode == 1) { if (r.data.resultCode == 1) {
this.dataList = r.data.data; this.dataList = r.data.data;
this.selectedCar = this.dataList.CarTypeList[0].Id
this.dataList.imgCover = this.dataList.ImageList; this.dataList.imgCover = this.dataList.ImageList;
this.isShow = true; this.isShow = true;
...@@ -922,6 +781,7 @@ export default { ...@@ -922,6 +781,7 @@ export default {
}); });
} }
this.$nextTick(() => { this.$nextTick(() => {
this.getCarPriceData2()
if ( if (
this.dataList.feature && this.dataList.feature &&
this.dataList.feature.featureHtml != "" this.dataList.feature.featureHtml != ""
...@@ -955,6 +815,7 @@ export default { ...@@ -955,6 +815,7 @@ export default {
// console.log('异常信息', error) // console.log('异常信息', error)
} }
}); });
} else { } else {
this.$q.notify({ this.$q.notify({
type: "negative", type: "negative",
...@@ -969,11 +830,36 @@ export default { ...@@ -969,11 +830,36 @@ export default {
); );
}, },
// 获取车的详情 // 获取车的详情
getCarPriceData2() {
this.priceList = []
this.apipost(
"b2c_get_GetCarSingleProductMonthPrice",
{
ProductId: this.msg.configId,
Month: this.currentYM.str,
AirportId: '',
CarTypeId: this.selectedCar
},
(r) => {
if (r.data.resultCode == 1) {
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
})
this.priceList = JSON.parse(JSON.stringify(r.data.data))
}
},null)
},
getCarPriceData() { getCarPriceData() {
this.$q.loading.show(); this.$q.loading.show();
this.apipost( this.apipost(
"b2c_get_GetCarSingleProductMonthPriceAll", "b2c_get_GetCarSingleProductMonthPriceAll",
{ ProductId: "16", Month: this.currentYM.str }, { ProductId: this.msg.configId, Month: this.currentYM.str },
(r) => { (r) => {
let list = [[]]; let list = [[]];
let y = 0; // 元素纵向下标 let y = 0; // 元素纵向下标
......
src/pages/detailsHotal.vue
View file @ 61ee8d43
...@@ -124,14 +124,15 @@ ...@@ -124,14 +124,15 @@
size="16px" size="16px"
class="q-mr-sm" class="q-mr-sm"
/> />
<span <!-- <span
>日本 - >日本 -
<span v-for="(x, i) in citys" :key="i"> <span v-for="(x, i) in citys" :key="i">
<span class="cursor-pointer">{{ x }} </span> <span class="cursor-pointer">{{ x }} </span>
<span v-if="i + 1 != citys.length" class="q-mr-sm">,</span> <span v-if="i + 1 != citys.length" class="q-mr-sm">,</span>
</span> </span>
</span> </span> -->
<span>{{dataList.Address}}</span>
</div> </div>
<div class="flex"> <div class="flex">
<div <div
...@@ -218,11 +219,11 @@ ...@@ -218,11 +219,11 @@
></q-tab> ></q-tab>
</q-tabs> </q-tabs>
</div> </div>
<div class="flex justify-between q-mx-auto" style="max-width: 1200px"> <!-- <div class="flex justify-between q-mx-auto" style="max-width: 1200px">
<hotel-star></hotel-star> <hotel-star></hotel-star>
<hotel-des></hotel-des> <hotel-des></hotel-des>
<hotel-map></hotel-map> <hotel-map></hotel-map>
</div> </div> -->
<div <div
v-if="dataList" v-if="dataList"
class="q-pa-lg bg-grey-3 q-mt-lg text-grey-9" class="q-pa-lg bg-grey-3 q-mt-lg text-grey-9"
...@@ -233,20 +234,20 @@ ...@@ -233,20 +234,20 @@
style="max-width: 1200px; margin-left: auto; margin-right: auto" style="max-width: 1200px; margin-left: auto; margin-right: auto"
> >
<div class="text-h6">選擇方案</div> <div class="text-h6">選擇方案</div>
<div class="flex room-item"> <!-- <div class="flex room-item"> -->
<!-- 房型左侧 --> <!-- 房型左侧 -->
<div class="mr"> <!-- <div class="mr">
<img <img
class="room-img" class="room-img"
src="https://imgfile.oytour.com/Upload/DMC/202110131151571540000000139.jpeg" src="https://imgfile.oytour.com/Upload/DMC/202110131151571540000000139.jpeg"
/> />
<div class="f18 bold">房型标题</div> <div class="f18 bold">房型标题</div>
<div>房型描述</div> <div>房型描述</div>
</div> </div> -->
<!-- 房型右侧 --> <!-- 房型右侧 -->
<div class="ml col-grow"> <!-- <div class="ml col-grow"> -->
<!-- 房型规格 --> <!-- 房型规格 -->
<div class="flex justify-between"> <!-- <div class="flex justify-between">
<div> <div>
<div> <div>
<span class="f16 bold">含早餐</span <span class="f16 bold">含早餐</span
...@@ -265,9 +266,9 @@ ...@@ -265,9 +266,9 @@
<div v-for="item in 4" :key="item"> <div v-for="item in 4" :key="item">
购房{{ item }}: 注意事项{{ item }} 购房{{ item }}: 注意事项{{ item }}
</div> </div>
</div> </div> -->
</div> <!-- </div> -->
</div> <!-- </div> -->
<div <div
style=" style="
background: #fff; background: #fff;
...@@ -276,7 +277,7 @@ ...@@ -276,7 +277,7 @@
margin-top: 20px; margin-top: 20px;
" "
> >
<div <!-- <div
class="rounded-borders bg-white q-pa-md q-mt-md" class="rounded-borders bg-white q-pa-md q-mt-md"
v-if="$q.platform.is.mobile" v-if="$q.platform.is.mobile"
> >
...@@ -306,130 +307,9 @@ ...@@ -306,130 +307,9 @@
@reset="resetHandler" @reset="resetHandler"
></order-preview> ></order-preview>
</template> </template>
</div> </div> -->
<!--方案选择区 --> <!--方案选择区 -->
<div class="flex justify-between"> <select-room :detail="dataList"></select-room>
<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 class="flex bold mr about">
关于此方案
<div class="flex normal ml">
<div class="ml">3天前可免费取消</div>
</div>
</div>
<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"
>
<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 v-else>
<div v-if="el" class="date-num">{{ el.day }}</div>
<div v-if="el" class="price">
{{ el.price || "1566" }} 起
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div style="width: 40%; margin-left: 10%">
<div class="mt mb">车辆选择</div>
<div>
<q-btn
@click="handleSelect(item.Id)"
class="car-tag mr"
:class="{ 'car-select': item.Id === selectedCar }"
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>
</div>
<div></div>
</div>
<div class="text-h6 q-pt-lg" v-if="$q.platform.is.mobile"> <div class="text-h6 q-pt-lg" v-if="$q.platform.is.mobile">
所選方案詳情 所選方案詳情
</div> </div>
...@@ -437,7 +317,7 @@ ...@@ -437,7 +317,7 @@
class="bg-white rounded-borders q-mt-md" class="bg-white rounded-borders q-mt-md"
v-if="dataList.priceList && dataList.priceList.length > 0" v-if="dataList.priceList && dataList.priceList.length > 0"
> >
<div class="q-pa-md row"> <!-- <div class="q-pa-md row">
<div class="col"> <div class="col">
<div <div
class="text-subtitle1 text-weight-bold row items-center" class="text-subtitle1 text-weight-bold row items-center"
...@@ -481,13 +361,13 @@ ...@@ -481,13 +361,13 @@
最早可預訂日期：{{ dataList.priceList[0].startDate }} 最早可預訂日期：{{ dataList.priceList[0].startDate }}
</div> </div>
</div> </div>
</div> </div> -->
<div <div
class="q-pa-md" class="q-pa-md"
style="border-top: 1px solid #eee" style="border-top: 1px solid #eee"
v-if="showOrderPreview" v-if="showOrderPreview"
> >
<div class="q-pa-md bg-grey-2 row items-center rounded-borders"> <!-- <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="text-subtitle2 text-weight-bold q-mr-xl">
關於此方案 關於此方案
</div> </div>
...@@ -503,7 +383,7 @@ ...@@ -503,7 +383,7 @@
icon="iconfont iconroundcheck" icon="iconfont iconroundcheck"
label="6個工作日內（不含例休假）確認" label="6個工作日內（不含例休假）確認"
/> />
</div> </div> -->
<div class="q-mt-lg row" v-if="$q.platform.is.desktop"> <div class="q-mt-lg row" v-if="$q.platform.is.desktop">
<div class="col"> <div class="col">
<calendar <calendar
...@@ -524,7 +404,7 @@ ...@@ -524,7 +404,7 @@
</div> </div>
</div> </div>
</div> </div>
<div style="max-width: 1200px; margin-left: auto; margin-right: auto"> <!-- <div style="max-width: 1200px; margin-left: auto; margin-right: auto">
<div <div
id="comment" id="comment"
class="text-h5 text-weight-bold text-left q-mt-xl mb" class="text-h5 text-weight-bold text-left q-mt-xl mb"
...@@ -536,7 +416,7 @@ ...@@ -536,7 +416,7 @@
评价 评价
</div> </div>
<comments></comments> <comments></comments>
</div> </div> -->
<div <div
v-if="dataList" v-if="dataList"
...@@ -547,15 +427,28 @@ ...@@ -547,15 +427,28 @@
<div <div
:class="{ 'col-8': $q.platform.is.desktop, col: $q.platform.is.mobile }" :class="{ 'col-8': $q.platform.is.desktop, col: $q.platform.is.mobile }"
> >
<div id="product">产品介绍</div>
<div <div
class="q-mt-md q-pb-xl" class="text-h5 text-weight-bold text-left q-mt-xl"
:class="{
'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}" id="product">产品介绍</div>
<div
class="q-mt-md"
ref="diyContext" ref="diyContext"
:style="{ zoom: zoomDiyContext }" :style="{ zoom: zoomDiyContext }"
v-html="dataList.feature.featureHtml" v-html="dataList.Descriptions"
v-if="dataList.feature && dataList.feature.featureHtml != ''"
></div> ></div>
<div <div id="server"
class="text-h5 text-weight-bold text-left q-mt-xl"
:class="{
'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}">服务设施</div>
<div class="q-mt-sm flex flex-wrap">
<template v-for="item in dataList.FacilityServices">
<div style="width: 25%; padding: 10px" v-for="el in item.list" :key="el.ID">{{el.Content}}</div>
</template>
</div>
<!-- <div
id="price" id="price"
class="text-h5 text-weight-bold text-left q-mt-xl" class="text-h5 text-weight-bold text-left q-mt-xl"
ref="price" ref="price"
...@@ -594,7 +487,7 @@ ...@@ -594,7 +487,7 @@
:class="{ :class="{
'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile, 'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}" }"
></div> ></div> -->
<div <div
id="warning" id="warning"
class="text-h5 text-weight-bold text-left q-mt-xl" class="text-h5 text-weight-bold text-left q-mt-xl"
...@@ -704,7 +597,7 @@ import hotelStar from "./hotel/hotelStar.vue"; ...@@ -704,7 +597,7 @@ import hotelStar from "./hotel/hotelStar.vue";
import hotelMap from "./hotel/hotelMap.vue"; import hotelMap from "./hotel/hotelMap.vue";
import hotelDes from "./hotel/hotelDes.vue"; import hotelDes from "./hotel/hotelDes.vue";
import comments from "./hotel/comments.vue"; import comments from "./hotel/comments.vue";
import * as dayjs from "dayjs"; import selectRoom from './hotel/selectRoom.vue';
export default { export default {
props: [], props: [],
components: { components: {
...@@ -719,14 +612,11 @@ export default { ...@@ -719,14 +612,11 @@ export default {
hotelMap, hotelMap,
hotelDes, hotelDes,
comments, comments,
selectRoom
}, },
data() { data() {
return { return {
selectedCar: "", selectedCar: "",
currentYM: { year: 2023, month: 2, str: "2023-02" }, // 当前年月
isCurrent: false,
isLast: false,
daysList: [],
tab: "", tab: "",
searchDate: "", searchDate: "",
clickDate: "", clickDate: "",
...@@ -787,11 +677,17 @@ export default { ...@@ -787,11 +677,17 @@ export default {
display: "產品介紹", display: "產品介紹",
}, },
{ {
id: "#price", id: "#server",
top: 0, top: 0,
isActive: false, isActive: false,
display: "費用說明", display: "服务设施",
}, },
// {
// id: "#price",
// top: 0,
// isActive: false,
// display: "費用說明",
// },
{ {
id: "#warning", id: "#warning",
top: 0, top: 0,
...@@ -841,7 +737,6 @@ export default { ...@@ -841,7 +737,6 @@ export default {
} }
window.addEventListener("scroll", this.menu); window.addEventListener("scroll", this.menu);
this.getData(); this.getData();
this.getPriceData();
}, },
beforeDestroy() { beforeDestroy() {
document.getElementsByTagName("body")[0].style = ""; document.getElementsByTagName("body")[0].style = "";
...@@ -854,42 +749,6 @@ export default { ...@@ -854,42 +749,6 @@ export default {
this.selectedCar = id; this.selectedCar = id;
} }
}, },
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)}`,
};
}
this.getPriceData();
},
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.getPriceData();
},
getTopNum(x) { getTopNum(x) {
this.days = JSON.parse(x); this.days = JSON.parse(x);
}, },
...@@ -956,6 +815,7 @@ export default { ...@@ -956,6 +815,7 @@ export default {
if (r.data.resultCode == 1) { if (r.data.resultCode == 1) {
console.log("getData", r); console.log("getData", r);
this.dataList = r.data.data; this.dataList = r.data.data;
this.dataList.FacilityServices = JSON.parse(this.dataList.FacilityServices)
this.dataList.imgCover = this.dataList.ImageList; this.dataList.imgCover = this.dataList.ImageList;
this.isShow = true; this.isShow = true;
...@@ -1020,75 +880,6 @@ export default { ...@@ -1020,75 +880,6 @@ export default {
null null
); );
}, },
getPriceData() {
this.$q.loading.show();
this.apipost(
"b2c_get_GetHotelMonthPrice",
{
HotelId: decodeURIComponent(this.$route.params.id),
Month: this.currentYM.str,
},
(r) => {
let list = [[]];
let y = 0; // 元素纵向下标
let day = 0;
if (r.data.resultCode == 1) {
let week = dayjs(this.currentYM.str + "-01").day();
console.log("week", week);
list[0].length = week;
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;
let days = dayjs(r.data.data[0].Date).date();
// 如果是当前月
if (isCurrent) {
day = days;
for (let i = 1; i <= days; i++) {
list[y].push({
day: i,
disabled: true,
});
week++;
if (week === 7) {
week = 0;
y++;
list[y] = [];
}
}
}
r.data.data.forEach((item, index) => {
if (!isCurrent || index >= days) {
list[y].push({
...item,
day: ++day,
});
week++;
if (week === 7) {
week = 0;
y++;
list[y] = [];
}
}
});
this.daysList = list;
console.log("list", list);
} else {
this.$q.notify({
type: "negative",
message: r.data.message,
position: "top",
timeout: 2000, // 以毫秒为单位; 0意味着没有超时
});
}
this.$q.loading.hide();
},
null
);
},
menu() { menu() {
this.scroll = this.scroll =
document.documentElement.scrollTop || document.body.scrollTop; document.documentElement.scrollTop || document.body.scrollTop;
...@@ -1188,58 +979,6 @@ export default { ...@@ -1188,58 +979,6 @@ export default {
.gray { .gray {
color: #999; color: #999;
} }
.date-table {
width: 100%;
padding: 5px;
border-collapse: separate;
table-layout: fixed;
}
.cell-day {
padding: 10px 0 20px;
text-align: center;
color: #666;
font-weight: 700;
}
.cell-date.selectable {
cursor: pointer;
}
.cell-date {
position: relative;
padding: 8px 4px;
border-radius: 6px;
text-align: center;
vertical-align: baseline;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.cell-date .date-num {
font-size: 1.6rem;
font-weight: 700;
}
.disabled {
color: #666;
}
.option-booking .cell-date .price {
min-height: 20px;
color: #666;
font-size: 1.2rem;
}
.cell-date.selected.selected-end {
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
position: relative;
}
.cell-date.selected.selected-start {
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
.cell-date.selected.selected-end,
.cell-date.selected.selected-start {
color: #fff;
background-color: #26bdc9;
}
.cancel { .cancel {
background-color: #ef7a70; background-color: #ef7a70;
margin-left: 10px; margin-left: 10px;
......
src/pages/detailsNew.vue
View file @ 61ee8d43
...@@ -760,7 +760,7 @@ export default { ...@@ -760,7 +760,7 @@ export default {
} }
this.getData(); this.getData();
window.addEventListener("scroll", this.menu); window.addEventListener("scroll", this.menu);
//this.getCarData(); // this.getCarData();
}, },
methods: { methods: {
getTopNum(x) { getTopNum(x) {
...@@ -786,7 +786,7 @@ export default { ...@@ -786,7 +786,7 @@ export default {
// } // }
this.stickyHeight = document.querySelector(".q-header--hidden") this.stickyHeight = document.querySelector(".q-header--hidden")
? "translateY(0px)" ? "translateY(0px)"
: "translateY(50px)"; : "translateY(45px)";
this.currentHeight = temp; this.currentHeight = temp;
if ( if (
this.videoPosition > 0 && this.videoPosition > 0 &&
...@@ -860,7 +860,9 @@ export default { ...@@ -860,7 +860,9 @@ export default {
changeChosenDateHandler(val) { changeChosenDateHandler(val) {
val.price.version = new Date().getTime(); val.price.version = new Date().getTime();
this.currentPrice = JSON.parse(JSON.stringify(val.price)); this.currentPrice = JSON.parse(JSON.stringify(val.price));
if(this.$q.platform.is.mobile){
this.$refs.qDateProxy.hide(); this.$refs.qDateProxy.hide();
}
}, },
showDialog() { showDialog() {
this.isShowDialog = true; this.isShowDialog = true;
......
src/pages/hotel/selectRoom.vue 0 → 100644
View file @ 61ee8d43
<style lang="scss" scoped>
.select-day {
background: $primary;
color: #fff !important;
border-radius: 8px;
}
.date-table {
width: 100%;
padding: 5px;
border-collapse: separate;
table-layout: fixed;
}
.cell-day {
padding: 10px 0 20px;
text-align: center;
color: #666;
font-weight: 700;
}
.cell-date.selectable {
cursor: pointer;
}
.cell-date {
position: relative;
padding: 8px 4px;
border-radius: 6px;
text-align: center;
vertical-align: baseline;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
// .cell-date .date-num {
// font-size: 1.6rem;
// font-weight: 700;
// }
// .disabled {
// color: #666;
// }
// .option-booking .cell-date .price {
// min-height: 20px;
// color: #666;
// font-size: 1.2rem;
// }
// .cell-date.selected.selected-end {
// border-top-right-radius: 6px;
// border-bottom-right-radius: 6px;
// position: relative;
// }
// .cell-date.selected.selected-start {
// border-top-left-radius: 6px;
// border-bottom-left-radius: 6px;
// }
// .cell-date.selected.selected-end,
// .cell-date.selected.selected-start {
// color: #fff;
// background-color: #26bdc9;
// }
</style>
<template>
<div>
<div class="flex justify-between">
<div class="f20 flex item-center">
{{detail.Name}}
<!-- <span class="cancel">3天前可免费取消</span> -->
</div>
<div>
<div class="f20 text-right">
CNY {{ moneyFormat(minPrice, 0)
}}<span class="f14">起</span>
</div>
<div>最早可预订日<span class="q-ml-sm">{{startDate}}</span></div>
</div>
</div>
<!-- <div class="flex bold mr about">
关于此方案
<div class="flex normal ml">
<div class="ml">3天前可免费取消</div>
</div>
</div> -->
<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>
<q-btn
color="primary"
round
icon="iconfont iconpreviewleft"
flat
@click="handleMinus"
class="q-mr-sm"
:disable="isCurrent"
/>
<q-btn
color="primary"
round
icon="iconfont iconpreviewright"
flat
@click="handlePlus"
:disable="isLast"
/>
</div>
</div>
<table class="date-table">
<thead>
<tr class="row-day">
<th v-for="item in ['日','一','二','三','四','五','六']" :key="item" class="col text-weight-bold text-center">{{item}}</th>
</tr>
</thead>
<tbody>
<tr
class="row-date"
v-for="(item, index) in daysList"
:key="index"
>
<td
class="text-center text-weight-bold cell-date selectable"
v-for="(el, index) in item"
:key="index"
>
<div style="padding: 8px 4px;" v-if="el && el.disabled">
<div v-if="el" class="text-grey-6 disabled">
{{ el.day }}
</div>
</div>
<div style="padding: 8px 4px;" class=" text-grey-9" v-else-if="el" @click="handleSelectDay(el)" :class="{'select-day': selectDateStr === el.DateStr}">
<div>{{ el.day }}</div>
<div class="q-mt-sm f12">
{{ el.price }} 起
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div style="width: 40%; margin-left: 10%">
<div class="mt mb">房间选择</div>
<div>注意：以下计费与报价均是按照人数进行计费</div>
<!-- <div class="mt mb">选择辆数</div> -->
<div class="mt pt" v-for="item in roomList" :key="item.id">
<div class="flex justify-between bold f18 mt mb items-center">
<span>{{item.RoomName}}</span>
<div class="flex items-center">
<span>CNY{{item.UPriceFormat}}</span>
<number-input-step :defaultValue="item.value" @input="handleValueChange(item, $event)"></number-input-step>
<span class="ml f14 normal">预计<span class="primary">{{item.Number}}</span>间房</span>
</div>
</div>
<div v-if="item.Tips" class="f12 mb grey">{{item.Tips}}</div>
</div>
<q-separator />
<div class="flex justify-between mt mb">
<span>总金额</span>
<span class="f20">CNY {{allPrice}}</span>
</div>
<div>
<div>仅剩 {{hotelInfor.RemainingInventory}} 间已选 {{sumPeople}} 人 {{total}} 间</div>
<div v-if="total > hotelInfor.RemainingInventory">超出现有的库存预定，我们会即时与酒店协商，请保证收讯通畅</div>
</div>
<div class="flex flex-end">
<!-- <q-btn
color="primary"
unelevated class="mr" label="加入购物车"></q-btn> -->
<q-btn
color="primary"
unelevated label="立即订购"></q-btn>
</div>
</div>
</div>
<div></div>
</div>
</div>
</template>
<script>
import numberInputStep from 'src/components/numberInputStep.vue';
import * as dayjs from "dayjs";
export default {
props: {
detail: {
type: Object,
default: () => ({})
}
},
components: {numberInputStep},
data() {
return {
minPrice: 0,
startDate: '',
total: 0, // 总的房间数
sumPeople: 0, //总的人
allPrice: 0, // 总价
allNumber: 0, // 剩余房间数
hotelInfor: {},
selectDateStr: '',
daysList: [],
isLast: false,
isCurrent: false,
roomList: [],
currentYM: { year: 2023, month: 2, str: "2023-02" }, // 当前年月
}
},
mounted() {
this.getPriceData();
},
methods: {
handleSelectDay(day) {
this.selectDateStr = day.DateStr
this.hotelInfor = day
console.log('DateStr handleSelectDay', day)
this.setList()
},
handleValueChange(item, event) {
console.log('handleValueChange', item, event)
item.PeopleNumber = event
this.calculateNum()
},
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)}`,
};
}
this.getPriceData();
},
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.getPriceData();
},
getPriceData() {
this.$q.loading.show();
this.apipost(
"b2c_get_GetHotelMonthPrice",
{
HotelId: decodeURIComponent(this.$route.params.id),
Month: this.currentYM.str,
},
(r) => {
let list = [[]];
let y = 0; // 元素纵向下标
let day = 0;
if (r.data.resultCode == 1) {
let week = dayjs(this.currentYM.str + "-01").day();
console.log("week", week);
list[0].length = week;
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;
let days = dayjs(r.data.data[0].Date).date();
// 如果是当前月
if (isCurrent) {
day = days;
for (let i = 1; i <= days; i++) {
list[y].push({
day: i,
disabled: true,
});
week++;
if (week === 7) {
week = 0;
y++;
list[y] = [];
}
}
}
r.data.data.forEach((item, index) => {
if (!isCurrent || index >= days) {
const {min, disabled} = this.getMinPrice(item)
list[y].push({
...item,
day: ++day,
price: min,
disabled: disabled
});
week++;
if (week === 7) {
week = 0;
y++;
list[y] = [];
}
}
});
this.daysList = list;
console.log("list", list);
} else {
this.$q.notify({
type: "negative",
message: r.data.message,
position: "top",
timeout: 2000, // 以毫秒为单位; 0意味着没有超时
});
}
this.$q.loading.hide();
},
null
);
},
getMinPrice(day) {
let roomTyps = ['CostPrice', 'BidroomPrice', 'SingleroomPrice', 'AddBedPrice', 'GuideRoomPrice']
let arr = []
// console.log('day min', day.PriceList[0][roomTyps])
roomTyps.forEach(item => {
if(day.PriceList[0][item]) {
arr.push(day.PriceList[0][item])
}
})
if(!this.startDate && arr.length) {
this.startDate = day.DateStr
this.minPrice = Math.min(...arr)
}
return {
min: Math.min(...arr),
disabled: !arr.length
}
},
// 组装可选房间
setList() {
let detailList = []
let roomTyps = ['CostPrice', 'BidroomPrice', 'SingleroomPrice', 'AddBedPrice', 'GuideRoomPrice']
let roomLangs = ['标准间', '大床房', '自然单间', '三人间', '司机间']
let tips = ['', '本房型不同的酒店入住人数限制不同，系统默认该房型只能入住一人', '', '', '']
let limitGuestNum = [2, 1, 1, 3, 1]
let tempPrice = this.hotelInfor.PriceList[0]
let hotel = this.hotelInfor
roomTyps.forEach((x, i) => {
if (tempPrice[x] > 0) {
let dataMsg = {
HotelId: this.detail.HotelId,
Date: hotel.DateStr,
RoomType: i + 1,
RoomName: roomLangs[i],
Unit_Price: tempPrice[x],
UPriceFormat: this.moneyFormat(tempPrice[x]),
LimitGuestNum: limitGuestNum[i],
Tips: tips[i],
Number: 0,
PeopleNumber: 0,
Destription: '',
TaxesPrice: tempPrice.TaxesPrice,
PriceInTangTax: tempPrice.PriceInTangTax,
HotelName: this.detail.HotelName
}
detailList.push(dataMsg)
}
})
console.log('detailList', detailList)
this.roomList = detailList
},
// 计算房间数量
calculateNum() {
this.total = 0
this.sumPeople = 0
this.allPrice = 0
this.roomList.forEach(item => {
item.Number = Math.ceil(parseFloat(item.PeopleNumber) / parseFloat(item.LimitGuestNum))
this.total += item.Number
this.sumPeople += parseInt(item.PeopleNumber)
this.allPrice += item.PeopleNumber * item.Unit_Price
})
},
}
}
</script>
\ 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