Skip to content

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

酒店详情页编写

parent f91bbce8
Hide whitespace changes
Inline Side-by-side
Showing with 163 additions and 65 deletions
src/components/numberInputStep.vue
View file @ 4d1ff4d6
......@@ -9,9 +9,41 @@
</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>
<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>
......@@ -48,7 +80,11 @@ export default {
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/pages/city/cityDetail.vue
View file @ 4d1ff4d6
......@@ -83,11 +83,21 @@
<template>
<div class="back">
<div v-if="detail" class="wapper">
<q-breadcrumbs gutter="none">
<q-breadcrumbs-el label="Home" />
<q-breadcrumbs-el label="Components" />
<q-breadcrumbs-el label="Breadcrumbs" />
</q-breadcrumbs>
<div class="row items-center q-pt-md q-mb-lg">
<q-breadcrumbs
class="col f12 no-wrap q-mr-md"
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>
<!-- <div class="text-grey-6 f12">Product No. # {{ dataList.id }}</div> -->
</div>
<div class="flex relative">
<div class="absolute name">{{detail.AreaName}}</div>
......
src/pages/detailsHotal.vue
View file @ 4d1ff4d6
......@@ -234,20 +234,20 @@
style="max-width: 1200px; margin-left: auto; margin-right: auto"
>
<div class="text-h6">選擇方案</div>
<div class="flex room-item">
<!-- <div class="flex room-item"> -->
<!-- 房型左侧 -->
<div class="mr">
<!-- <div class="mr">
<img
class="room-img"
src="https://imgfile.oytour.com/Upload/DMC/202110131151571540000000139.jpeg"
/>
<div class="f18 bold">房型标题</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>
<span class="f16 bold">含早餐</span
......@@ -266,9 +266,9 @@
<div v-for="item in 4" :key="item">
购房{{ item }}: 注意事项{{ item }}
</div>
</div>
</div>
</div>
</div> -->
<!-- </div> -->
<!-- </div> -->
<div
style="
background: #fff;
......@@ -277,7 +277,7 @@
margin-top: 20px;
"
>
<div
<!-- <div
class="rounded-borders bg-white q-pa-md q-mt-md"
v-if="$q.platform.is.mobile"
>
......@@ -307,9 +307,9 @@
@reset="resetHandler"
></order-preview>
</template>
</div>
</div> -->
<!--方案选择区 -->
<select-room></select-room>
<select-room :detail="dataList"></select-room>
<div class="text-h6 q-pt-lg" v-if="$q.platform.is.mobile">
所選方案詳情
</div>
......@@ -317,7 +317,7 @@
class="bg-white rounded-borders q-mt-md"
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="text-subtitle1 text-weight-bold row items-center"
......@@ -361,13 +361,13 @@
最早可預訂日期：{{ dataList.priceList[0].startDate }}
</div>
</div>
</div>
</div> -->
<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="q-pa-md bg-grey-2 row items-center rounded-borders">
<div class="text-subtitle2 text-weight-bold q-mr-xl">
關於此方案
</div>
......@@ -383,7 +383,7 @@
icon="iconfont iconroundcheck"
label="6個工作日內（不含例休假）確認"
/>
</div>
</div> -->
<div class="q-mt-lg row" v-if="$q.platform.is.desktop">
<div class="col">
<calendar
......@@ -433,17 +433,22 @@
'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}" id="product">产品介绍</div>
<div
class="q-mt-md q-pb-xl"
class="q-mt-md"
ref="diyContext"
:style="{ zoom: zoomDiyContext }"
v-html="dataList.Descriptions"
></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 v-for="el in item.list" :key="el.ID">{{el.Content}}</div>
<div style="width: 25%; padding: 10px" v-for="el in item.list" :key="el.ID">{{el.Content}}</div>
</template>
</div>
<div
<!-- <div
id="price"
class="text-h5 text-weight-bold text-left q-mt-xl"
ref="price"
......@@ -482,7 +487,7 @@
:class="{
'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}"
></div>
></div> -->
<div
id="warning"
class="text-h5 text-weight-bold text-left q-mt-xl"
......@@ -672,11 +677,17 @@ export default {
display: "產品介紹",
},
{
id: "#price",
id: "#server",
top: 0,
isActive: false,
display: "費用說明",
display: "服务设施",
},
// {
// id: "#price",
// top: 0,
// isActive: false,
// display: "費用說明",
// },
{
id: "#warning",
top: 0,
......
src/pages/hotel/selectRoom.vue
View file @ 4d1ff4d6
......@@ -61,44 +61,49 @@
<div>
<div class="flex justify-between">
<div class="f20 flex item-center">
湖岩美术馆 & 爱宝乐园 包车一日游
<span class="cancel">3天前可免费取消</span>
{{detail.Name}}
<!-- <span class="cancel">3天前可免费取消</span> -->
</div>
<div>
<div class="f20">
CNY {{ moneyFormat(detail.MinPrice, 0)
<div class="f20 text-right">
CNY {{ moneyFormat(minPrice, 0)
}}<span class="f14">起</span>
</div>
<div>最早可预订日</div>
<div>最早可预订日{{startDate}}</div>
</div>
</div>
<div class="flex bold mr about">
<!-- <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>请选择出发日期</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>
<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">
......@@ -145,29 +150,33 @@
<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> -->
<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>预计<span class="blue">{{item.room}}</span>间房</span>
<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 100</span>
<span class="f20">CNY {{allPrice}}</span>
</div>
<div>
<div>仅剩 10 间已选 17 人 16 间</div>
<div>超出现有的库存预定，我们会即时与酒店协商，请保证收讯通畅</div>
<div>仅剩 {{hotelInfor.RemainingInventory}} 间已选 {{sumPeople}} 人 {{total}} 间</div>
<div v-if="total > hotelInfor.RemainingInventory">超出现有的库存预定，我们会即时与酒店协商，请保证收讯通畅</div>
</div>
<div class="flex flex-end">
<q-btn class="mr" label="加入购物车"></q-btn>
<q-btn label="立即订购"></q-btn>
<!-- <q-btn
color="primary"
unelevated class="mr" label="加入购物车"></q-btn> -->
<q-btn
color="primary"
unelevated label="立即订购"></q-btn>
</div>
</div>
</div>
......@@ -188,6 +197,12 @@ export default {
components: {numberInputStep},
data() {
return {
minPrice: 0,
startDate: '',
total: 0, // 总的房间数
sumPeople: 0, //总的人
allPrice: 0, // 总价
allNumber: 0, // 剩余房间数
hotelInfor: {},
selectDateStr: '',
daysList: [],
......@@ -209,6 +224,7 @@ export default {
},
handleValueChange(item, event) {
console.log('handleValueChange', item, event)
item.PeopleNumber = event
this.calculateNum()
},
handleMinus() {
......@@ -289,9 +305,12 @@ export default {
}
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) {
......@@ -315,9 +334,28 @@ export default {
},
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 = ['', '本房型不同的酒店入住人数限制不同，系统默认该房型只能入住一人', '', '', '']
......@@ -345,16 +383,19 @@ export default {
detailList.push(dataMsg)
}
})
console.log('detailList', detailList)
this.roomList = detailList
},
// 计算房间数量
calculateNum() {
this.total = 0
this.sumPeople = 0
this.parameters.DetailList.forEach(item => {
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
})
},
}
......
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