tongli_WeChat/subPackages/line/detail.vue

<template>
	<view class="bg">
		<view class="swipe-box">
			<swiper class="swiper" :autoplay="true" :interval="3000" :duration="1000" circular indicator-color="rgba(255,255,255,.5)"
				indicator-active-color="#fff" @change="swiperChange">
				<swiper-item v-for="(item, index) in info.list_images.split(',')" :key="item.id">
					<view class="swiper-item">
						<image class="item-img" :src="showImg(item)" ></image>
					</view>
				</swiper-item>
			</swiper>
			
			<!-- <view class="collect" @click.stop="collect()">
				<image src="https://tongli.sz-trip.com/uploads/20240829/9dbb80cafe8375bd6d5c96fccb617962.png" v-if="info.is_collect"></image>
				<image src="https://tongli.sz-trip.com/uploads/20240826/564af778708591f5de29174d3b14bbff.png" v-else></image>
			</view> -->
		</view>
		
		<view class="top-box">
			<view class="top-price">{{info.low_money / 100}}</view>
			<view class="top-title">{{info.title}}</view>
		</view>
		
		<view class="scroll-all-box" id="menus" v-if="info">
			<view :class="'scroll-menus' + (fixed ? ' fixed-menus' : '')">
				<view :class="'scroll-menu-item' + (type == 1 ? ' active' : '')" @click="changeMenu(1)">费用说明</view>
				<view :class="'scroll-menu-item' + (type == 2 ? ' active' : '')" @click="changeMenu(2)">预定须知</view>
				<view :class="'scroll-menu-item' + (type == 3 ? ' active' : '')" @click="changeMenu(3)">产品详情</view>
			</view>
			<view style="height: 85rpx" v-if="fixed"></view>
			<view class="info-box" id="box1">
				<view class="info-title">费用说明</view>
				<view class="info-content" v-html="formateRichText(info.price_content)"></view>
			</view>
			<view class="info-box" id="box2">
				<view class="info-title">预定须知</view>
				<view class="info-content" v-html="formateRichText(info.reserve_content)"></view>
			</view>
			<view class="info-box" id="box3">
			    <view class="info-title">产品详情</view>
				<view class="info-content" v-html="formateRichText(info.special_content)"></view>
			</view>
		</view>
		
		<view class="fixed-bottom">
		    <view class="flex-between">
		    	<button id="contact" open-type="contact" bindcontact="handleContact" session-from="sessionFrom">
		    		<view class="flex-column">
		    			<img src="https://static.ticket.sz-trip.com/dongtai/images/index/kefu.png" alt="" />
		    			客服
		    		</view>
		    	</button>
		    </view>
		    <view class="btn" @tap="order">立即购买</view>
		</view>
	</view>
</template>

<script>
	const device = uni.getSystemInfoSync();
	const ratio = device.windowWidth / 750;
	export default {
		data() {
			return {
				id: null,
				swiperCurrent: 1,
				info: {list_images:''},
				top: 0,
				fixed: false,
				type: 0,
				down: false,
			}
		},
		onShow() {
		},
		onLoad(options) {
			this.id = options.id;
			this.getInfo();
			let rect = uni.getMenuButtonBoundingClientRect();
			this.top = (rect.top - device.statusBarHeight) * 2 + rect.height + device.statusBarHeight;
		},
		onPageScroll(e){
			let query = uni.createSelectorQuery()
				query.select("#menus").boundingClientRect(res => {
			　　　　if(res.top < 0){
						this.fixed = true
					}else{
						this.fixed = false
					}
				}).exec()
				
				if (this.down) {
					return
				}else{
					this.down = true
					for(let i = 1; i < 4; i++) {
						query.select("#box" + i).boundingClientRect(res => {
							if(res.top < 0) {
								this.type = i
							}
						}).exec()
					}
					this.down = false
				}
		},
		methods: {
			swiperChange (e) {
				this.swiperCurrent = e.detail.current+1
			},
			// 获取信息
			getInfo() {
				this.Post({goods_id: this.id},'/api/goods/getGoodDetail').then(res => {
					if (res.data.flag == 0) {
						uni.showToast({title: '商品不存在或已下架',icon: 'none'})
						setTimeout(() => {this.goBack()}, 2000)
					}
					res.data.goods_new_tag = (res.data.goods_new_tag ? res.data.goods_new_tag.split(',') : []).splice(0, 2);
					this.info = res.data;
				});
			},
			changeMenu(e) {
				this.down = true
			    let index = e;
				let that = this
			    const query = uni.createSelectorQuery(); //创建节点查询器
			    query.select('#box' + index).boundingClientRect(); //选择toViewid获取位置信息
			    query.selectViewport().scrollOffset(); //获取页面查询位置的
			    query.exec(function (res) {
			        let scrollTop = res[0].top + res[1].scrollTop - 110 * ratio - that.top;
			        uni.pageScrollTo({
			            scrollTop: scrollTop + 4,
			            duration: 0
			        });
			        that.type = index
					setTimeout(()=>{
						that.down = false
					},1000)
			    });
			},
			// 收藏
			collect() {
				this.Post({type: 6,id: this.id},'/api/scenic/collect').then(res => {
					if (res) {
						uni.showToast({title: res.msg,icon: 'none'});
						this.info.is_collect = !this.info.is_collect
					}
				});
			},
			// 去下单
			order() {
				uni.navigateTo({
					url: "/subPackages/line/order?id=" + this.info.id
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	*{
		box-sizing: border-box;
	}
	.bg{
		min-height: 100vh;
		background: #F7F7F7;
		padding-bottom: 200rpx;
	}
	
	.swipe-box {
		height: 413rpx;
		position: relative;
		
		.collect{
			position: absolute;
			width: 51rpx;
			height: 51rpx;
			right: 36rpx;
			top: 36rpx;
			font-size: 23rpx;
			background: rgba(0, 0, 0, 0.5);
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			image{
				width: 36rpx;
				height: 36rpx;
			}
		}
	}
	
	.swiper {
		height: 413rpx;
		position: relative;
	
		.swiper-item {
			width: 100%;
			height: 413rpx;
	
			.item-img {
				width: 750rpx;
				height: 413rpx;
			}
		}
	}
	
	.top-box {
		width: 697rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		position: relative;
		margin: -30rpx auto 0;
		padding: 27rpx 42rpx 37rpx;
		
		.top-price {
			font-weight: bold;
			font-size: 40rpx;
			color: #F02A2A;
		}
		.top-price::before {
			font-size: 32rpx;
			content: '￥';
		}
		.top-price::after {
			font-size: 24rpx;
			color: rgba(102, 102, 102, 1);
			content: '起';
		}
		
		.top-title {
			font-weight: bold;
			font-size: 31rpx;
			color: #000000;
			margin-top: 15rpx;
		}
	}
	
	.scroll-all-box {
		margin: 24rpx 0;
	
		.scroll-menus {
		    padding: 0 40rpx;
		    display: flex;
		    justify-content: space-between;
		    align-items: center;
		    font-size: 29rpx;
		    color: #333;
		    height: 84rpx;
		    border-bottom: 1rpx solid #d9d9d9;
			
			.scroll-menu-item {
			    position: relative;
			    line-height: 84rpx;
			}
			
			.scroll-menu-item.active::after {
			    content: '1';
			    font-size: 0;
			    display: block;
			    position: absolute;
			    width: 46rpx;
			    height: 6rpx;
			    border-radius: 3rpx;
			    background: #515150;
			    left: 50%;
			    margin-left: -23rpx;
			    bottom: 0rpx;
			}
		}
		
		.fixed-menus {
		    position: fixed;
			top: 0;
		    left: 0;
		    right: 0;
		    background: white;
		    z-index: 1;
		}
		
		.info-box {
		    padding: 20rpx 40rpx;
			
			.info-title {
			    font-size: 35rpx;
			    font-weight: bold;
			    color: #000;
			}
			
			.info-content {
				width: 697rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				padding: 22rpx 14rpx;
				margin-top: 20rpx;
			}
		}
	}
	
	.fixed-bottom {
		width: 750rpx;
		height: 152rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(6,0,1,0.1);
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 26rpx 0 48rpx;
		box-sizing: border-box;
		font-size: 23rpx;
		font-family: PingFangSC;
		font-weight: 400;
		color: #666666;
		
		img {
			width: 48rpx;
			height: 48rpx;
		}
		
		.btn {
			width: 254rpx;
			height: 77rpx;
			background: #C3282E;
			border-radius: 39rpx;
			text-align: center;
			line-height: 77rpx;
			font-size: 32rpx;
			font-family: PingFangSC;
			font-weight: 500;
			color: #FFFFFF;
		}
	}
	
	#contact {
		-webkit-tap-highlight-color: transparent;
		background-color: rgba(0, 0, 0, 0);
		border-radius: 0;
		box-sizing: border-box;
		color: transparent;
		cursor: pointer;
		display: inline-block;
		font-size: 0;
		line-height: 35rpx;
		margin-left: 0;
		margin-right: 0;
		overflow: hidden;
		padding-left: 0;
		padding-right: 0;
		position: relative;
		text-align: center;
		text-decoration: none;
		border: transparent 0px solid;
		font-size: 23rpx;
		font-family: PingFangSC;
		font-weight: 400;
		color: #666666;
	}
	
	button::after {
		border: none;
		background-color: rgba(0, 0, 0, 0);
	}
</style>