RiyueGorge/pages/travel/travelDetails.vue

<template>
	<view class="detailsPage">
		 <u-swiper height=900 :list="list2" 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 >
			 		￥{{goodsInfo.min_price?goodsInfo.min_price:''}}
					<!-- ¥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=30 :scrollable="false" @click="check"></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?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>
		  </view>
		<view class="navbar footer">
			<view class="kefu flex">
				<view class="" @click="gomes">
					<image src="../../static/travelD/service.png"  mode="heightFix" ></image>
					<view class="">
						客服
					</view>
				</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="heightFix" class="icon"></image>
					<view class="" >
						生成海报
					</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="">
					<image src="../../static/travelD/share2.png" mode="heightFix" class="icon"></image>
					<view class="">
						分享
					</view>
				</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">
				<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;">
				   		夕阳红康养团
				   	</view>
					<view class="" style="font-size: 28rpx;color: #333333;">
						请选择出发日期：{{choosedays}}
					</view>
				   </view>
				</view>
				<view class="day" >
					<view class="" style="font-size: 30rpx;font-weight: bold;color: #333333;">
						出发日期
					</view>
					<view class="" style="border-bottom: 1rpx solid #E3E3E3;">
						<u-tabs :list="month" @change="chooseDay" :activeStyle="{color: '#1E9F6A','font-weight': 'bold'}" :inactiveStyle="{color: 'rgba(51, 51, 51, 0.5)'}" lineColor="#1E9F6A"  :scrollable="true"></u-tabs>
					</view>
					<view class="item" >
						<view :class="dayindex==index?'day-item-active':'day-item'" v-for="item,index in days" @click="dayItem(index,item)">
							<view class="">
								{{item.start_at.slice(5,10)?item.start_at.slice(5,10):''}}
							</view>
							<view class="">
								{{item.week?item.week:''}}
							</view>
							<view class="" style="font-size: 26rpx;font-weight: 600;">
								¥{{item.min_price?item.min_price:''}}
							</view>
						</view>
						<!-- <view class="day-item">
							<view class="">
								04-21
							</view>
							<view class="">
								周三
							</view>
							<view class="" style="font-size: 26rpx;font-weight: 600;">
								¥12332
							</view>
						</view> -->
					</view>

				</view>
				<view class="navbars">
					<view class="price">
					￥12929
					</view>
					
					<view class="choose" @click="isshow = true;zindex=10070">
						选择房型
					</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="报名前必看" :content='content' showCancelButton @confirm="goadd" @cancel="cancel" confirmColor="#ffffff"></u-modal>
			</view>
		<!-- </scroll-view> -->
	</view>
</template>

<script>
	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:'*以上旅游行程在实际执行中可能会根据季节气候、自然环境等不可抗因素进行调整，购买前请知悉。 *如出发地或目的地，有疫情中等风险及以上地区的，可免费转为保留金，保留支付金额，后续预订时以实际预订金额为准。 关于夕阳团的温馨提示： 1、支付完成后，我们将在1个工作日内与您确认是否预订成功。 2、夕阳团默认2个人一个房间。需报名人数满足最低发团数后发团。为了避免造成您的损失，建议您在与客服确认发团后再购买机票。 3、此产品最少需要30人报名才可出发，最多不超过40人。我们会在出发前20天与您再次确认，如届时仍未报满规定人数，则很遗 4、此产品最少需要30人报名才可出发，最多不',
				 // 套餐内容
				 goodsInfo:{},
				 // 房间选择
				 plans:{},
				 // 
				 scrollTop:0
	        }
			
	    },
		onLoad(options) {
			console.log(options)
			this.init(options.id)
		},
		onPageScroll(e){
			// console.log(e,"<==============距离顶部的距离")
			this.scrollTop=e.scrollTop
		},
		methods:{
			init(id){
				this.$showLoadding("")
				uni.$u.http.post('/api/good/show',{good_id:id},{
					custom: {
						auth: true
					}
				}).then((res) => {
					uni.hideLoading()
					console.log(res,"套餐详情")
					this.goodsInfo=res
					this.tags=res.tags
					// console.log(res.plans,"===========出行日期============")
					let newmonth=[]
					for(let key in res.plans){
						newmonth.push({name:res.plans[key].month,days:res.plans[key].days})
						this.days=res.plans[5].days
						// console.log(res.plans[key].days,"xxxxxxxxxxxx")
					}
					this.month=newmonth
				}).catch((err) => {
					console.log( err)
				})
			},
			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
				uni.navigateTo({
					url:`/pages/travel/travelPeople?days=${JSON.stringify(this.plans)}&goodsinfo=${JSON.stringify(goodsInfo)}`
				})
			},
			// 关闭提示框
			cancel(){
				this.zindex=10075;
				this.isshow=false
			},
			// 选择当前日期
			dayItem(index,days){
				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){
				// console.log(item)
				this.days=item.days
			},
			// 切换标签
			check(item){
				// console.log(item)
				if(item.name=="行程"){
					uni.createSelectorQuery().select('.trips').boundingClientRect(data=>{//目标位置的节点：类或者id
					    uni.pageScrollTo({
					        duration: 100,//过渡时间
					        scrollTop:data.top + this.scrollTop - 50,//到达距离顶部的top值
					    })
					}).exec();
				}else if(item.name=="特色"){
					uni.createSelectorQuery().select(".duction").boundingClientRect(res=>{//目标位置的节点：类或者id
					    uni.pageScrollTo({
					    duration: 100,//过渡时间
					    scrollTop:res.top + this.scrollTop - 50,//到达距离顶部的top值
					    })
					}).exec()
				}else if(item.name=="置顶"){
					uni.pageScrollTo({
					duration: 100,//过渡时间
					scrollTop:0,//到达距离顶部的top值
					})
					
				}
				
			},
			// 生成海报
			goposter(){
				uni.navigateTo({
					url:"/pages/travel/poster"
				})
			},
			// 客服
			gomes(){
				uni.navigateTo({
					url:"/pages/customerService"
				})
			}
		}	
	}
</script>

<style lang="less">
	page{
		background-color: #f4f4f4;
	}
		.model{
			// height: 500rpx !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{
			image{
				// width: 42rpx;
				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;
			margin-right: 50rpx;
		}
	}
	.popupTop{
		padding-bottom: 24rpx;
		.image{
			margin: 20rpx 20rpx 0 0;
		}
		image{
			height: 120rpx;
			width: 200rpx;
			border-radius: 6rpx;
		}
	}
	.day{
		margin-bottom: 250rpx;
	}
	.item{
		display: flex;
	}
	.day-item-active{
		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: 39rpx 0 42rpx;
	}
	.day-item{
		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: 39rpx 0 42rpx;
	}
	.navbars{
		box-sizing: border-box;
		width: 100%;
		height: 104rpx;
		// line-height:104rpx;
		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{
		margin: auto;
	}
	}
}
</style>