ryx/pages/travel/travelDetails.vue

<template>
	<view class="detailsPage">
		<u-swiper height=900 :list="picture" keyName="image" showTitle :autoplay="false" circular autoplay></u-swiper>
		<view class="details">
			<view class="title flex-item">
				<view class="">
					{{goodsInfo.name?goodsInfo.name:''}}
					<!-- 深林康养 -->
				</view>
				<view>
					￥{{minprice}}
					<!-- ¥300 -->
				</view>
			</view>

			<view class="describe">
				{{goodsInfo.subtitle?goodsInfo.subtitle:''}}
				<!-- 夏日的森林，雨水充沛了山林，鲜花盛放，溪水潺潺。漫步于自然之中，感受清新的空气，放空心灵，沉醉于山雾之中，感受不同于城市的静谧与轻松 -->
			</view>
			<view class="flex">
				<view class="tags" v-for="item in tags">
					{{item}}
				</view>
				<!-- <view class="tags">
					康养
				</view> -->
			</view>
		</view>

		<view class="detailsContent">
			<u-sticky bgColor="#fff">
				<view class="" style="box-shadow: 0px 2rpx 8rpx 0px rgba(0, 0, 0, 0.06);">

					<u-tabs :list="list1" :activeStyle="{color: '#1E9F6A','font-weight': 'bold'}"
						:inactiveStyle="{color: 'rgba(51, 51, 51, 0.5)'}" lineColor="#1E9F6A" lineWidth=50
						:scrollable="false" @click="check" :current="active"></u-tabs>

				</view>
			</u-sticky>
			<view class="detailsList">

				<!-- {{goodsInfo.description}} -->
				<view class="duction list-item">
					<u-icon name="tags" size="50" color="#1E9F6A"></u-icon>
					<view style="margin-left: 20rpx;">套餐特色</view>
				</view>
				<u-parse :content="goodsInfo.description"></u-parse>

				<view class="trips list-item">
					<u-icon name="calendar" size="50" color="#1E9F6A"></u-icon>
					<view style="margin-left: 20rpx;">行程简介</view>
				</view>
				<view style="margin: 20rpx 0;" v-for="item,index in goodsInfo.trips" :key="index">
					<view style="color:#1E9F6A;margin: 20rpx 0;">
						Day{{item.day?item.day:''}}
					</view>
					<u-parse :content="item.content"></u-parse>
				</view>
				<view class="charge list-item">
					<u-icon name="edit-pen" size="50" color="#1E9F6A"></u-icon>
					<view style="margin-left: 20rpx;">费用详情</view>
				</view>
				<u-parse :content="goodsInfo.cost_description"></u-parse>
				<view class="notice list-item">
					<u-icon name="bookmark" size="50" color="#1E9F6A"></u-icon>
					<view style="margin-left: 20rpx;">须知说明</view>
				</view>
				<u-parse :content="goodsInfo.instruction"></u-parse>
			</view>
		</view>
		<!-- <view class="" style="padding-top: 100rpx;width: 100%;"></view> -->

		<view class="navbar footer">
			<view class="kefu flex">
				<view class="">
					<button open-type="contact"
						style="background-color: transparent;border-style:none;border:0;padding: 0;line-height: 30rpx;">
						<image src="../../static/travelD/service.png" mode="aspectFit"></image>
						<view class="" style="font-size: 20rpx;color: rgba(255, 255, 255, 0.8);">
							客服
						</view>
					</button>

				</view>
				<view style="height: 50rpx;width: 1px;background-color:rgba(255, 255, 255, 0.5);margin:0 40rpx;"></view>
			</view>

			<view class="kefu haibao flex" @click="share=true">
				<view class="" @click="goposter">
					<image src="../../static/travelD/share.png" mode="aspectFit" class="icon"></image>
					<view class="" style="padding-top: 0rpx;">
						生成海报
					</view>
				</view>
				<view style="height: 50rpx;width: 1px;background-color:rgba(255, 255, 255, 0.5);margin:0 40rpx;"></view>
			</view>
			<view class="kefu wxin flex">
				<view class="">
					<button open-type="share"
						style="background-color: transparent;border-style:none;border:0;padding: 0;line-height: 30rpx;">
						<image src="../../static/travelD/share2.png" mode="aspectFit" class="icon"></image>
						<view class="" style="margin-top: 0rpx;font-size: 20rpx;color: rgba(255, 255, 255, 0.8);">
							分享
						</view>
					</button>
				</view>
				<view style="height: 50rpx;width: 1px;background-color:rgba(255, 255, 255, 0.5);margin:0 40rpx;"></view>
			</view>
			<view class="want" @click="open">
				我要报名
			</view>
		</view>

		<u-popup :show="show" mode="bottom" @close="close" @open="open" closeIconPos
			:customStyle="{padding:'30rpx',borderRadius:'0px 56rpx 0px 0px'}" :zIndex="zindex"
			:safeAreaInsetBottom="true">
			<view class="flex popupTop">
				<view class="image">
					<image :src="goodsInfo.cover_picture"></image>
				</view>
				<view class="">
					<view class="" style="font-size: 36rpx;font-weight: 600;color: #333333;margin-bottom: 18rpx;">
						{{goodsInfo.name?goodsInfo.name:''}}
					</view>
					<view class="" style="font-size: 28rpx;color: #333333;">
						{{choosedays?'已选':'请选择出发日期'}}：{{choosedays}}
					</view>

				</view>
			</view>
			<view class="day">
				<view class="" style="font-size: 30rpx;font-weight: bold;color: #333333;">
					出发日期
				</view>
				<view class="" style="">
					<u-tabs :list="month" @change="chooseDay" :activeStyle="{color: '#1E9F6A','font-weight': 'bold'}"
						:inactiveStyle="{color: 'rgba(51, 51, 51, 0.5)'}" lineColor="#1E9F6A" :scrollable="true"
						:key="index" lineWidth="48" lineHeight="4">
					</u-tabs>
				</view>

				<view class="item">
					<view class="more" v-if="days.length==0">暂无房型</view>
					<view :class="dayindex==index?'day-item-active':'day-item'" v-for="item,index in days"
						@click="dayItem(index,item)">
						<view>
							<view class="txtgray">
								{{item.start_at.slice(5,10)?item.start_at.slice(5,10):''}}
							</view>
							<view class="txtgray">
								{{item.week?item.week:''}}
							</view>
						</view>

						<view class="" style="font-size: 26rpx;font-weight: 600;">
							¥{{item.min_price}}
						</view>
					</view>
				</view>

			</view>
			<view class="navbars" @click="openShow()">
				<view class="price">
					￥{{price}}
				</view>

				<view class="choose">
					选择房型
				</view>
			</view>
		</u-popup>

		<!-- 模态框 -->
		<!-- <view class="model">
				<u-modal :show="isshow" title="报名前必看" :content='content' showCancelButton @confirm="goadd" @cancel="cancel" confirmColor="#ffffff"></u-modal>
		</view> -->


		<!-- <scroll-view  scroll-y="true"  style="height: 90vh;"   scroll-with-animation="true"> -->
		<view class="model">
			<u-modal :show="isshow" title="报名前必看" showCancelButton @confirm="goadd" @cancel="cancel"
				confirmColor="#ffffff" style="margin-left: 0;padding-left: 22rpx;">
				<view style="height: 560rpx;overflow: auto;">
					<u-parse :content="content"></u-parse>
				</view>

			</u-modal>
		</view>
		<!-- </scroll-view> -->
	</view>
</template>

<script>
	let that
	export default {
		data() {
			return {
				share: false,
				// 标签
				tags: [],
				// 出行时间
				days: [],
				// 选择状态
				dayindex: -1,
				choosedays: '',
				list2: [{
					image: "https:\/\/t38.9026.com\/uploads\/golf\/images\/2022-05-31\/20220531739250.png",
				}, {
					image: "https:\/\/t38.9026.com\/uploads\/golf\/images\/2022-05-31\/20220531739250.png",

				}, {
					image: "https:\/\/t38.9026.com\/uploads\/golf\/images\/2022-05-31\/20220531739250.png",

				}],
				list1: [{
						name: '特色'
					},
					{
						name: '行程'
					},
					{
						name: '费用'
					},
					{
						name: '须知'
					},
					{
						name: '置顶'
					}
				],
				month: [],
				// 弹出层
				show: false,
				// 层级
				zindex: 10075,
				// 模态框
				isshow: false,
				// 模态框内容
				content: "",
				// 套餐内容
				goodsInfo: {},
				// 房间选择
				plans: {},
				// 
				scrollTop: 0,
				price: 0,
				picture: [],
				active: 0,
				tab1top:'',
				 tab2top:'',
				 tab3top:'',
				tab4top:'',
				tab4bottom:'',
				cancelScroll:false,
			}

		},
		onLoad(options) {
			that = this
			if (options.id) {
				this.init(options.id)
			}
			let data = uni.getStorageSync("data")
			this.content = data[3].value
		},
		onShow() {
			this.initvist()


		},
		computed: {
			minprice() {
				let pr = 0
				if (this.goodsInfo.min_price) {
					pr = this.goodsInfo.min_price
				}
				return pr
			}
		},
		onPageScroll(e) {
			// console.log(e,"<==============距离顶部的距离")
			this.scrollTop = e.scrollTop
			this.handleScroll()
		},
		// #ifdef MP
		onShareAppMessage(s = false) {
			return this.$shareAppMessage({
				title: that.goodsInfo.name,
				imageUrl: "",
				path: "/pages/travel/travelDetails?id=" + this.id,

			});
		},
		// #endif
		methods: {
			initvist() {
				let curPage = getCurrentPages();
				let route = curPage[curPage.length - 1].route; //获取当前页面的路由
				let code = uni.getStorageSync("code")
				let obj = {
					page: route,
					code: code
				}
				if (code) {
					uni.$u.http.post('/api/visit/add', obj, {
						custom: {
							auth: true
						}
					}).then((res) => {}).catch((err) => {})
				}
			},
			init(id) {
				this.$showLoadding("加载中")
				uni.$u.http.post('/api/good/show', {
					good_id: id
				}, {
					custom: {
						auth: true
					}
				}).then((res) => {
					uni.hideLoading();
					this.goodsInfo = res
					this.tags = res.tags
					this.picture = JSON.parse(res.picture)
					let newmonth = []
					for (let key in res.plans) {
						newmonth.push({
							name: res.plans[key].month,
							days: res.plans[key].days
						})
					}
					this.month = newmonth
					this.days = newmonth[0].days
				}).catch((err) => {
					console.log(err)
				})
			},
			openShow() {
				if (this.dayindex >= 0) {
					this.isshow = true
				} else {
					if (this.days.length > 0) {
						uni.showModal({
							title: "提示",
							content: "请选择出发日期"
						})
					} else {
						uni.showModal({
							title: "提示",
							content: "暂无房型"
						})
					}

					return
				}
			},
			load() {
				this.$refs.uReadMore.init();
			},
			open() {
				this.show = true
				// console.log('open');
			},
			// 关闭popup
			close() {
				this.show = false
				// console.log('close');
			},
			// 添加出行人
			goadd() {
				this.isshow = false
				console.log(this.plans)
				let goodsInfo = {}
				goodsInfo.cover_picture = this.goodsInfo.cover_picture
				goodsInfo.name = this.goodsInfo.name
				goodsInfo.id = this.goodsInfo.id
				goodsInfo.subtitle = this.goodsInfo.subtitle
				goodsInfo.cohabit = this.goodsInfo.cohabit
				// uni.navigateTo({
				// 	url:`/pages/travel/travelPeople?days=${JSON.stringify(this.plans)}&goodsinfo=${JSON.stringify(goodsInfo)}`
				// })
				let obj = {
					days: this.plans,
					goodsinfo: goodsInfo
				}
				uni.navigateTo({
					url: "/pages/travel/travelPeople?obj=" + encodeURIComponent(JSON.stringify(obj))
				})
			},
			// 关闭提示框
			cancel() {
				this.zindex = 10075;
				this.isshow = false
			},
			// 选择当前日期
			dayItem(index, days) {
				this.price = days.min_price
				this.plans = days
				console.log(index, days)
				let start = days.start_at.slice(0, 10)
				let end = days.end_at.slice(0, 10)
				this.choosedays = `${start}~${end}`
				this.dayindex = index

			},
			// 选择日期
			chooseDay(item, index) {
				this.days = item.days
			},
			// 切换标签
			check(item) {
				// console.log(item)
				if (item.name == "行程") {
					uni.createSelectorQuery().select('.trips').boundingClientRect(data => { //目标位置的节点：类或者id
						uni.pageScrollTo({
							duration: 200, //过渡时间
							scrollTop: data.top + this.scrollTop - 50, //到达距离顶部的top值
						})
					}).exec();
				} else if (item.name == "特色") {
					uni.createSelectorQuery().select(".duction").boundingClientRect(res => { //目标位置的节点：类或者id
						uni.pageScrollTo({
							duration: 200, //过渡时间
							scrollTop: res.top + this.scrollTop - 50, //到达距离顶部的top值
						})
						console.log( res.top + this.scrollTop - 50,996555)
					}).exec()
				} else if (item.name == "费用") {
					uni.createSelectorQuery().select(".charge").boundingClientRect(res => { //目标位置的节点：类或者id
						uni.pageScrollTo({
							duration: 200, //过渡时间
							scrollTop: res.top + this.scrollTop - 50, //到达距离顶部的top值
						})
					}).exec()
				} else if (item.name == "须知") {
					uni.createSelectorQuery().select(".notice").boundingClientRect(res => { //目标位置的节点：类或者id
						uni.pageScrollTo({
							duration: 200, //过渡时间
							scrollTop: res.top + this.scrollTop - 50, //到达距离顶部的top值
						})
					}).exec()
				} else if (item.name == "置顶") {
					uni.pageScrollTo({
						duration: 200, //过渡时间
						scrollTop: 0, //到达距离顶部的top值
					})

				}
				 this.cancelScroll = true;
				            setTimeout(() =>{
				                this.cancelScroll = null;
				            },500);

			},
			handleScroll() {

				if (this.cancelScroll) {
					return;
				}
				
				// this.$refs 获取的是节点 不是数组
				uni.createSelectorQuery().select('.trips').boundingClientRect(data => { //目标位置的节点：类或者id
					that.tab1top = data.top-50 //到达距离顶部的top值
				}).exec();
				uni.createSelectorQuery().select('.duction').boundingClientRect(data => { //目标位置的节点：类或者id
				 that.tab2top = data.top-50 //到达距离顶部的top值
				}).exec();
				uni.createSelectorQuery().select('.charge').boundingClientRect(data => { //目标位置的节点：类或者id
					that.tab3top = data.top-50//到达距离顶部的top值
					console.log(that.tab3top)
				}).exec();
				uni.createSelectorQuery().select('.notice').boundingClientRect(data => { //目标位置的节点：类或者id
					 that.tab4top = data.top-50 //到达距离顶部的top值
					  that.tab4bottom= data.bottom-50 //到达距离顶部的top值
				}).exec();
				// let tab2top = this.$refs['duction'][0].getBoundingClientRect().top;
				// let tab3top = this.$refs['charge'][0].getBoundingClientRect().top;
				// let tab4top = this.$refs['notice'][0].getBoundingClientRect().top;
				// console.log(document.documentElement.scrollTop, '页面滚出');

				// 86是怎么算的？也可以是0，小于0就是滚出去；（内容超出自己的高度，才会有滚动）
				// 第一个tab的滚动的距离
				if ( this.tab1top>0) {
					this.active = 0;
				}

				// 第二个tab的滚动的距离
				else if ( this.tab3top>0&&this.tab2top<0) {
					this.active = 1;
				}
				// 第三个tab的滚动的距离
				else if (this.tab3top<0&&this.tab2top<0&&this.tab4top>0) {
					this.active = 2;
				}

				else if ( this.tab4top<0&&this.tab4bottom<0) {
					this.active = 3;
				}
			},


			// 生成海报
			goposter() {
				uni.navigateTo({
					url: "/pages/travel/poster?goodsInfo=" + encodeURIComponent(JSON.stringify(this.goodsInfo))
				})
			},
			// 客服
			gomes() {
				uni.navigateTo({
					url: "/pages/customerService"
				})
			}
		}
	}
</script>

<style lang="less">
	page {
		background-color: #f4f4f4;
	}

	._div {
		margin-left: 0 !important;
		padding-left: 22rpx !important;
	}

	.txtgray {
		color: #666666;
	}

	.model {
		height: 50rpx !important;
	}

	.detailsPage {
		width: 100%;

		.flex {
			display: flex;
			align-items: center;
		}

		.flex-item {
			display: flex;
			justify-content: space-between;
			margin: 10rpx 0;
		}

		.details {
			background-color: #fff;
			padding: 40rpx 30rpx 40rpx;
			margin: 24rpx 0;
			font-family: PingFang-SC-Medium, PingFang-SC;

			.title {
				color: #333333;
				font-size: 34rpx;
				font-weight: 600;
				margin-bottom: 24rpx;
			}

			.describe {
				font-size: 28rpx;
				color: #666666;
				margin-bottom: 40rpx;
			}

			.tags {
				font-size: 26rpx;
				color: #1E9F6A;
				height: 56rpx;
				padding: 0 28rpx;
				line-height: 56rpx;
				background: rgba(30, 159, 106, 0.06);
				margin-right: 24rpx;
			}
		}

		.detailsContent {
			background-color: #fff;
			margin-bottom: 160rpx;
			height: 100%;

			.detailsList {
				padding: 20rpx;
			}

			.list-item {
				display: flex;
				align-items: center;
				color: #1E9F6A;
				font-size: 36rpx;
			}
		}

		.navbar {
			background: #1E9F6A;
			border-radius: 16rpx 16rpx 0px 0px;
			color: #ffffff;
			display: flex;
			bottom: 0;
			left: 0;
			position: fixed;
			width: 100%;
			padding: 16rpx 40rpx;
			box-sizing: border-box;
			z-index: 10000;

			.kefu {

				// width: 44rpx;
				button::after {
					border: none;
				}

				image {
					width: 44rpx;
					height: 44rpx;
				}

				font-size: 20rpx;
				color: rgba(255, 255, 255, 0.8);
				text-align: center;

			}

			.haibao {
				image {
					// width: 42rpx;
					height: 38rpx;
				}
			}

			.wxin {
				image {
					// width: 42rpx;
					height: 42rpx;
				}
			}

			.want {
				display: flex;
				flex: 1;
				align-items: center;
				justify-content: center;
				// padding-right: 50rpx;
				font-size: 32rpx;
				font-weight: bold;
			}
		}

		.popupTop {
			padding-bottom: 24rpx;
			color: #333333;

			.image {
				margin: 20rpx 20rpx 0 0;
			}

			image {
				height: 120rpx;
				width: 180rpx;
				border-radius: 6rpx;
			}
		}

		.day {
			// height: 200rpx;
			margin-bottom: 180rpx;
		}

		.item {
			margin-top: -6rpx;
			border-top: 1rpx solid #E3E3E3;
			display: flex;
			overflow: auto;
			// flex-wrap: nowrap;
		}

		.day-item-active {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			width: 120rpx;
			height: 164rpx;
			border-radius: 0px 32rpx 0px 32rpx;
			background: rgba(30, 159, 106, 0.1);
			border: 1px solid #1E9F6A;
			font-size: 22rpx;
			color: #333333;
			// text-align: center;
			margin: 56rpx 24rpx 0 0;
			box-sizing: border-box;
			padding: 18rpx 20rpx 18rpx 20rpx;
		}

		.day-item {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			width: 122rpx;
			height: 166rpx;
			background: #F4F4F4;
			border-radius: 0px 32rpx 0px 32rpx;
			font-size: 22rpx;
			color: #333333;
			// text-align: center;
			margin: 56rpx 24rpx 0 0;
			box-sizing: border-box;
			padding: 18rpx 20rpx 18rpx 20rpx;
		}

		.navbars {
			box-sizing: border-box;
			width: 100%;
			height: 104rpx;
			// line-height:104rpx;
			display: flex;
			align-items: center;
			padding: 28rpx 0;
			background: #1E9F6A;
			border-radius: 16rpx 16rpx 0px 0px;
			color: #ffffff;
			display: flex;
			bottom: 0;
			left: 0;
			position: fixed;

			.price {
				border-right: 1px solid #ffffff;
				padding: 0 64rpx 0 30rpx;
			}

			.choose {
				font-size: 35rpx;
				margin: auto;
			}
		}
	}
</style>