You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
380 lines
11 KiB
380 lines
11 KiB
<template>
|
|
<view class="v-pages-bg bgcolor p-b-60">
|
|
<swiper :autoplay="autoplay" class="lh-swiper" :duration="duration" :indicator-dots="indicatorDots"
|
|
:interval="interval">
|
|
<swiper-item v-for="(item,index) in pic_list" :key="index">
|
|
<image class="slide-image" :src="rootPath+item" mode="aspectFill"></image>
|
|
</swiper-item>
|
|
</swiper>
|
|
<!-- 详情头部 -->
|
|
<view class="v-card detail container-fluid m-t--80">
|
|
<view class="v-detail-name">
|
|
<view class="text inline-block">{{info.hotelName}}</view>
|
|
<text class="level hotel m-l-20">{{info.hlevel}}</text>
|
|
</view>
|
|
<view class="v-detail-tip m-t-12"><text class="item" v-for="cell in info.facilities">{{cell}}</text></view>
|
|
<view class="v-detail-address m-t-12 row flex-align-center" bindtap="showMap">
|
|
<view class="sec_name_unit col">
|
|
<view class="cot_adr" style="margin-right: 20rpx;">{{info.addressInfo}}</view>
|
|
<!-- <view class="cot_gap">距西部长青温泉谷750米 </view> -->
|
|
</view>
|
|
<view class="sec_btn_box row flex-align-center">
|
|
<view class="sec_item map" @click="daohang">
|
|
<view class="icon"></view>
|
|
<view class="text">地图</view>
|
|
</view>
|
|
<view class="sec_item tel" @click="callPhone(info.serviceNumber)">
|
|
<view class="icon"></view>
|
|
<view class="text">电话</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 日期显示 -->
|
|
<view class="v-card detail small container-fluid m-t-24 row flex-align-center" @click="showCalendar()">
|
|
<view class="v-detail-date row col flex-align-center">
|
|
<view class="start"><text class="date">{{infoData.startDate1}}</text><text class="text">入住</text></view>
|
|
<image class="arraw" src="https://eluyou.ailuquan.cn/upload/image/2024/mapIcon/daolan/v-icon-arraw.png"
|
|
mode="widthFix"></image>
|
|
<view class="end"><text class="date">{{infoData.endDate1}}</text><text class="text">离店</text></view>
|
|
</view>
|
|
<view class="v-hotel-date-total">共{{infoData.dayNum}}晚</view>
|
|
</view>
|
|
<!-- 日期选择 -->
|
|
<view class="calendar" v-if="isCalendarShow">
|
|
<calendar ref="calendar" @cancel="cancel" :startDate="startDate" :height="height" :endDate="endDate"
|
|
@selectDate="selectDate" :limit="limit" :bottom1="bottom1" :yimanArray="yimanArray" />
|
|
</view>
|
|
|
|
<!-- 民宿整套流程，无需房间列表
|
|
<view class="v-card detail small container-fluid m-t-24">
|
|
<view class="v-card-list">
|
|
<view class="v-card-list-item row" v-for="(item,index) in info.hotelBedInfoVos" :key="item.id">
|
|
<view class="item_img">
|
|
<image class="img" :src="item.hotelPhoto" mode="aspectFill"></image>
|
|
</view>
|
|
<view class="item_content col">
|
|
<view class="name">{{item.houseName}}</view>
|
|
<view class="desc m-t-12">{{item.hotelInfo}}</view>
|
|
<view class="tip m-t-12">需等待商家确认</view>
|
|
</view>
|
|
<view class="ticket-tips row flex-justify-center flex-align-center">
|
|
|
|
<view class="ticket-price"><span class="m-danwei">¥</span>{{item.housePrice}}</view>
|
|
<view class="btn-box">
|
|
<view class="m-btn m-l-24" hover-class="m-btn-hover" @click="bookIt(item)">预定</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view> -->
|
|
|
|
<view class="v-card detail small container-fluid m-t-24" v-if="info&&info.hotelBedInfoVos.length>0">
|
|
<view class="v-pages-list" style="padding: 0;">
|
|
<view class="list_item row" v-for="(item,index) in info.hotelBedInfoVos" :key="item.id">
|
|
<view class="item_image hotel">
|
|
<image class="img" :src="item.hotelPhoto" mode="aspectFill"></image>
|
|
</view>
|
|
<view class="item_content col">
|
|
<view class="content-name">{{item.houseName}}</view>
|
|
<view class="v-order-tip">
|
|
<text v-if="item.guest">{{item.guest}}人入住</text>
|
|
<text class="m-l-10" v-if="item.houseArea">{{item.houseArea}}㎡</text>
|
|
</view>
|
|
<view class="content-wait m-t-12">需等待商家确认</view>
|
|
</view>
|
|
<view class="item-price row flex-align-center">
|
|
<text class="num_pr">¥</text><text class="num_jd">{{item.housePrice}}</text>
|
|
<text class="num_qi">起</text>
|
|
<view class="btn m-l-24" @click="bookIt(item)">预定</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 介绍 -->
|
|
<view class="v-card detail container-fluid m-t-24">
|
|
<view class="v-detail-title">
|
|
<view class="text"><text>预定说明</text></view>
|
|
</view>
|
|
<view class="v-detail-content m-t-24" v-html="info.hreservation"></view>
|
|
</view>
|
|
<!-- 介绍 -->
|
|
<view class="v-card detail container-fluid m-t-24">
|
|
<view class="v-detail-title">
|
|
<view class="text"><text>民宿介绍</text></view>
|
|
</view>
|
|
<view class="v-detail-content m-t-24">
|
|
<u-parse :content="info.hcontent" v-if="info" />
|
|
</view>
|
|
</view>
|
|
<f-login></f-login>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import uParse from '@/uni_modules/uview-ui/components/u-parse/u-parse.vue'
|
|
import calendar from '@/subPageB/components/dc-calendar/dc-calendar.vue'
|
|
import {
|
|
mapState,
|
|
mapMutations
|
|
} from "vuex";
|
|
export default {
|
|
components: {
|
|
uParse,
|
|
calendar
|
|
},
|
|
data() {
|
|
return {
|
|
rootPath: this.$config.ROOTPATH,
|
|
indicatorDots: false,
|
|
autoplay: true,
|
|
interval: 3000,
|
|
duration: 500,
|
|
|
|
pic_url: this.$config.ROOTPATH,
|
|
pic_list: [],
|
|
info: {},
|
|
|
|
param: {
|
|
page: 1,
|
|
noData: !1,
|
|
loading: !1,
|
|
finished: !1
|
|
},
|
|
|
|
isCalendarShow: false,
|
|
startDate: '', //开始日期2022-01-26
|
|
endDate: '', //结束日期 2022-01-29
|
|
height: 600, //日历容器高度
|
|
limit: 2, //展示月份数量
|
|
bottom1: 0,
|
|
yimanArray: [],
|
|
dicdes: {
|
|
price: 1
|
|
}, //传过来的订单数据
|
|
type: 0, //1是进入订单 0是返回
|
|
infoData: {}
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState(["PrimaryColor", "userInfo"])
|
|
},
|
|
onUnload() {
|
|
this.newdate()
|
|
uni.setStorageSync('满房日期显示', 0)
|
|
},
|
|
onLoad: function(options) {
|
|
this.guid = options.guid;
|
|
this.detailInfo(options.guid);
|
|
//日历
|
|
let sys = uni.getSystemInfoSync();
|
|
if (sys.statusBarHeight >= 44) {
|
|
// this.height = sys.windowHeight - 34;
|
|
this.bottom1 = 34;
|
|
} else {
|
|
// this.height = sys.windowHeight;
|
|
}
|
|
|
|
// console.log(sys);
|
|
this.newdate();
|
|
var dicday = uni.getStorageSync('入离日期');
|
|
if (dicday) {
|
|
this.startDate = dicday.startDate;
|
|
this.endDate = dicday.endDate;
|
|
}
|
|
this.infoData = dicday
|
|
|
|
|
|
this.type = 1;
|
|
// this.dicdes = JSON.parse(e.dic);
|
|
uni.setStorageSync('满房日期显示', 1)
|
|
},
|
|
methods: {
|
|
detailInfo(id) {
|
|
var data = {
|
|
hotelId: id,
|
|
};
|
|
this.$Request.get(this.$config.getHomestayDetail, data, null, null, false, true).then((res) => {
|
|
this.info = res.data
|
|
this.info.facilities = this.info.facilities.split(",")
|
|
this.pic_list = this.info.hotelPhoto.split(",")
|
|
});
|
|
},
|
|
daohang() {
|
|
uni.openLocation({
|
|
latitude: Number(this.info.lat),
|
|
longitude: Number(this.info.lng),
|
|
name: this.info.hotelName,
|
|
address: this.info.addressInfo,
|
|
complete: function(result) {
|
|
console.log(result);
|
|
},
|
|
});
|
|
// #ifdef H5
|
|
if (this.$wechat.isWechat()) {
|
|
var mapParam = {
|
|
latitude: this.info.lat,
|
|
longitude: this.info.lng,
|
|
scale: 18,
|
|
name: this.info.hotelName,
|
|
address: this.info.addressInfo,
|
|
};
|
|
this.$util.openLocation(mapParam);
|
|
return;
|
|
}
|
|
window.location.href =
|
|
"https://uri.amap.com/navigation?from=" +
|
|
this.$param.clng +
|
|
"," +
|
|
this.$param.clat +
|
|
",我的位置&to=" +
|
|
this.info.lng +
|
|
"," +
|
|
this.info.lat +
|
|
"," +
|
|
this.info.addressInfo +
|
|
"&mode=walk&src=sjz_uniapp&callnative=1";
|
|
// #endif
|
|
},
|
|
|
|
bookIt(val) {
|
|
this.judgeLogin((resa) => {
|
|
|
|
var data = {
|
|
mobile: this.userInfo.phone,
|
|
openid: this.userInfo.openid,
|
|
|
|
hotelId: this.info.id,
|
|
hotelName: this.info.hotelName
|
|
};
|
|
|
|
const parame = {
|
|
...val, //民宿整套
|
|
...data,
|
|
...this.infoData
|
|
}
|
|
|
|
const ticket = encodeURIComponent(JSON.stringify(parame));
|
|
|
|
uni.navigateTo({
|
|
url: "/subPageC/bookHomestay/bookHomestay?ticket=" + ticket
|
|
});
|
|
});
|
|
// this.judgeLogin((resa) => {});
|
|
},
|
|
|
|
callPhone: function(tel) {
|
|
uni.makePhoneCall({
|
|
phoneNumber: tel
|
|
})
|
|
},
|
|
|
|
//========取房间满房日期
|
|
gethttpurl(id) {
|
|
this.yimanArray = ['2022-03-25', '2022-04-10'];
|
|
this.isCalendarShow = true;
|
|
uni.hideLoading();
|
|
},
|
|
|
|
// 展示选择器
|
|
showCalendar() {
|
|
console.log("==============")
|
|
this.isCalendarShow = true
|
|
var dicday = uni.getStorageSync('入离日期');
|
|
if (dicday) {
|
|
this.startDate = dicday.startDate;
|
|
this.endDate = dicday.endDate;
|
|
} else {
|
|
this.newdate();
|
|
}
|
|
},
|
|
// 隐藏选择器
|
|
cancel() {
|
|
this.isCalendarShow = false
|
|
},
|
|
// 获取传参
|
|
selectDate(data) {
|
|
this.infoData = data
|
|
console.log('拿到传参', data)
|
|
uni.setStorageSync('入离日期', data);
|
|
this.cancel()
|
|
},
|
|
// 获取当日的 年-月-日
|
|
newdate() {
|
|
let date = new Date()
|
|
let year = date.getFullYear()
|
|
let month = date.getMonth() + 1
|
|
let week = date.getDay()
|
|
let day = date.getDate()
|
|
var days = new Date(year, month, 0).getDate(); //总共多少天
|
|
// console.log(days,day);
|
|
month = month < 10 ? '0' + month : month
|
|
day = day < 10 ? '0' + day : day
|
|
let today = `${year}-${month}-${day}`;
|
|
let todayend = `${year}-${month}-${day}`;
|
|
let today1 = `${month}月${day}日`;
|
|
let today1end = `${month}月${day}日`;
|
|
//加年
|
|
if (month == 12 && parseInt(day) == parseInt(days)) {
|
|
|
|
let day01 = '01';
|
|
let month01 = '01';
|
|
let year01 = parseInt(year) + 1;
|
|
todayend = `${year01}-${month01}-${day01}`;
|
|
today1end = `${year01}年${month01}月${day01}日`;
|
|
} else if (parseInt(day) == parseInt(days)) {
|
|
//加月
|
|
let day01 = '01';
|
|
let month01 = parseInt(month) + 1;
|
|
month01 = month01 < 10 ? '0' + month01 : month01
|
|
todayend = `${year}-${month01}-${day01}`;
|
|
today1end = `${month01}月${day01}日`;
|
|
|
|
} else {
|
|
//加天数
|
|
let day01 = parseInt(day) + 1;
|
|
day01 = day01 < 10 ? '0' + day01 : day01
|
|
todayend = `${year}-${month}-${day01}`;
|
|
today1end = `${month}月${day01}日`;
|
|
}
|
|
|
|
let dicday = {
|
|
startDate: today,
|
|
endDate: todayend,
|
|
startDate1: today1,
|
|
endDate1: today1end,
|
|
dayNum: '1'
|
|
}
|
|
|
|
this.startDate = dicday.startDate;
|
|
this.endDate = dicday.endDate;
|
|
uni.setStorageSync('入离日期', dicday);
|
|
// console.log(this.dicday);
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.lh-swiper {
|
|
height: 400rpx;
|
|
}
|
|
|
|
.slide-image {
|
|
width: 100%;
|
|
}
|
|
|
|
.calendar {
|
|
position: fixed;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 999;
|
|
}
|
|
.v-pages-list{
|
|
.list_item{margin-top: 0;margin-bottom: 0;}
|
|
.list_item:not(:last-child){ margin-bottom: 24rpx;}
|
|
}
|
|
</style> |