Skip to content

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

酒店优化

parent 5542524b
Show whitespace changes
Inline Side-by-side
Showing with 438 additions and 294 deletions
src/components/numberInputStep.vue 0 → 100644
View file @ f91bbce8
<style scoped>
.icon-size {
font-size: 20px;
}
.number {
width: 60px;
text-align: center;
}
</style>
<template>
<div>
<i class="iconfont iconminus icon-size" @click="minusClick"></i>
<span class="number">{{value}}</span>
<i class="iconfont iconplus icon-size" @click="plusClick"></i>
</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)
}
}
},
}
</script>
\ No newline at end of file
src/pages/detailsHotal.vue
View file @ f91bbce8
......@@ -124,14 +124,15 @@
size="16px"
class="q-mr-sm"
/>
<span
<!-- <span
>日本 -
<span v-for="(x, i) in citys" :key="i">
<span class="cursor-pointer">{{ x }} </span>
<span v-if="i + 1 != citys.length" class="q-mr-sm">,</span>
</span>
</span>
</span> -->
<span>{{dataList.Address}}</span>
</div>
<div class="flex">
<div
......@@ -218,11 +219,11 @@
></q-tab>
</q-tabs>
</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-des></hotel-des>
<hotel-map></hotel-map>
</div>
</div> -->
<div
v-if="dataList"
class="q-pa-lg bg-grey-3 q-mt-lg text-grey-9"
......@@ -308,128 +309,7 @@
</template>
</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 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>
<select-room></select-room>
<div class="text-h6 q-pt-lg" v-if="$q.platform.is.mobile">
所選方案詳情
</div>
......@@ -524,7 +404,7 @@
</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
id="comment"
class="text-h5 text-weight-bold text-left q-mt-xl mb"
......@@ -536,7 +416,7 @@
评价
</div>
<comments></comments>
</div>
</div> -->
<div
v-if="dataList"
......@@ -547,14 +427,22 @@
<div
:class="{ 'col-8': $q.platform.is.desktop, col: $q.platform.is.mobile }"
>
<div id="product">产品介绍</div>
<div
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 q-pb-xl"
ref="diyContext"
:style="{ zoom: zoomDiyContext }"
v-html="dataList.feature.featureHtml"
v-if="dataList.feature && dataList.feature.featureHtml != ''"
v-html="dataList.Descriptions"
></div>
<div>
<template v-for="item in dataList.FacilityServices">
<div v-for="el in item.list" :key="el.ID">{{el.Content}}</div>
</template>
</div>
<div
id="price"
class="text-h5 text-weight-bold text-left q-mt-xl"
......@@ -704,7 +592,7 @@ import hotelStar from "./hotel/hotelStar.vue";
import hotelMap from "./hotel/hotelMap.vue";
import hotelDes from "./hotel/hotelDes.vue";
import comments from "./hotel/comments.vue";
import * as dayjs from "dayjs";
import selectRoom from './hotel/selectRoom.vue';
export default {
props: [],
components: {
......@@ -719,14 +607,11 @@ export default {
hotelMap,
hotelDes,
comments,
selectRoom
},
data() {
return {
selectedCar: "",
currentYM: { year: 2023, month: 2, str: "2023-02" }, // 当前年月
isCurrent: false,
isLast: false,
daysList: [],
tab: "",
searchDate: "",
clickDate: "",
......@@ -841,7 +726,6 @@ export default {
}
window.addEventListener("scroll", this.menu);
this.getData();
this.getPriceData();
},
beforeDestroy() {
document.getElementsByTagName("body")[0].style = "";
......@@ -854,42 +738,6 @@ export default {
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) {
this.days = JSON.parse(x);
},
......@@ -956,6 +804,7 @@ export default {
if (r.data.resultCode == 1) {
console.log("getData", r);
this.dataList = r.data.data;
this.dataList.FacilityServices = JSON.parse(this.dataList.FacilityServices)
this.dataList.imgCover = this.dataList.ImageList;
this.isShow = true;
......@@ -1020,75 +869,6 @@ export default {
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() {
this.scroll =
document.documentElement.scrollTop || document.body.scrollTop;
......@@ -1188,58 +968,6 @@ export default {
.gray {
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 {
background-color: #ef7a70;
margin-left: 10px;
......
src/pages/hotel/selectRoom.vue 0 → 100644
View file @ f91bbce8
<style lang="scss" scoped>
.select-day {
background: $primary;
color: #fff;
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">
湖岩美术馆 & 爱宝乐园 包车一日游
<span class="cancel">3天前可免费取消</span>
</div>
<div>
<div class="f20">
CNY {{ moneyFormat(detail.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-if="el" @click="handleSelectDay(el)" :class="{'select-day': selectDateStr === el.DateStr}">
<div class="date-num">{{ el.day }}</div>
<div 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>注意：以下计费与报价均是按照人数进行计费</div>
<!-- <div class="mt mb">选择辆数</div> -->
<div v-for="item in roomList" :key="item.id" class="flex bold f18 mt mb">
<span>{{item.label}}</span>
<div class="flex">
<span>CNY{{item.price}}</span>
<!-- <i class="iconfont iconminus"></i>
<span>1</span>
<i class="iconfont iconplus"></i> -->
<number-input-step :defaultValue="item.value" @input="handleValueChange(item, $event)"></number-input-step>
<span>预计<span class="blue">{{item.room}}</span>间房</span>
</div>
</div>
<q-separator />
<div class="flex justify-between mt mb">
<span>总金额</span>
<span class="f20">CNY 100</span>
</div>
<div>
<div>仅剩 10 间已选 17 人 16 间</div>
<div>超出现有的库存预定，我们会即时与酒店协商，请保证收讯通畅</div>
</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>
</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 {
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)
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) {
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
);
},
// 组装可选房间
setList() {
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)
}
})
this.roomList = detailList
},
// 计算房间数量
calculateNum() {
this.total = 0
this.sumPeople = 0
this.parameters.DetailList.forEach(item => {
item.Number = Math.ceil(parseFloat(item.PeopleNumber) / parseFloat(item.LimitGuestNum))
this.total += item.Number
this.sumPeople += parseInt(item.PeopleNumber)
})
},
}
}
</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