CjyTravel/subPageB/Homestay/homestaydetail/homestaydetail.vue

<template>
	<view class="v-pages-bg bgcolor p-b-24">
		<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="item" mode="widthFix"></image>
			</swiper-item>
		</swiper>
		<!-- 详情头部 -->
		<view class="v-card detail container-fluid m-t--80">
			<view class="v-detail-name">
				<view class="text">{{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">免费停车</text><text class="item">机器人服务</text></view>
			<view class="v-detail-address m-t-12 row flex-align-center" bindtap="showMap">
				<view class="sec_name_unit">
					<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 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.hotelInfo"></view>
		</view>
		<!-- 底部预定 -->
		<view class="v-order-bottom">
			<view class="btn" @click="bookIt">预定</view>
		</view>
		<f-login></f-login>
	</view>
</template>

<script>
	import uParse from '@/components/gaoyia-parse/parse.vue'
	import calendar from '@/components/dc-calendar/dc-calendar.vue'
	import {
		mapState,
		mapMutations
	} from "vuex";
	export default {
		components: {
			uParse,
			calendar
		},
		data() {
			return {
				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() {
			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);

			var dicday = uni.getStorageSync('入离日期');
			if (dicday) {
				this.startDate = dicday.startDate;
				this.endDate = dicday.endDate;
			}
			this.infoData = dicday
			this.newdate();

			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, null).then((res) => {
					this.info = res.data
					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) => {
					console.log('asdfasdf====', this.userInfo)


					var data = {
						mobile: this.userInfo.phone,
						openid: this.userInfo.openid,

						hotelId: this.info.id,
						hotelName: this.info.hotelName
					};

					const parame = {
						...this.info.hotelBedInfoVos[0], //民宿整套
						...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
			},
			// 隐藏选择器
			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>
	@import url("/subPageB/static/css/scenicdetial.css");

	.slide-image {
		width: 100%;
	}

	.calendar {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: ;
		z-index: 999;
	}
</style>