yandu_map/src/views/compoents/lineDetail.vue

<template>
	<div class="bg">
		<!-- 景点详情 -->
		<div class="info" v-if="info">
			<img :src="util.showImg(info.image)" class="info-img">
			<div class="info-content">
				<div class="title text-overflow">{{info.title}}</div>
				<div class="subtitle text-overflow">营业时间：{{info.open_time}}-{{info.close_time}}</div>
				<div class="subtitle text-overflow">地址：{{info.address}}</div>
				<div class="location" @click="util.openMap(info)">
					<img src="https://static.ticket.sz-trip.com/yandu/images/map/lineLocation.png" alt="">
					导航
				</div>
			</div>
		</div>
		
		<div class="boxs">
			<div class="title">{{detail.name}}</div>
			<div class="subtitle">{{detail.points.length}}个景点</div>
			
			<!-- 线路列表 -->
			<div class="box">
				<div class="item" v-for="(item,index) in detail.points" :key="index">
					<div :class="['line',{'lineF': index == 0, 'lineE': index+1 == detail.points.length, 'lineS': index == selectIndex}]"></div>
					<div :class="['num',{'numS': index == selectIndex, 'numE': index+1 == detail.points.length}]">
						{{index == 0 ? '起' : ((index+1 == detail.points.length) ? '终' : index + 1)}}
					</div>
					<div :class="['content', {'contents': selectIndex == index}]" @click="choosePoint(item, index)">
						{{item.name}}
					</div>
				</div>
			</div>
			
			<!-- 推荐攻略 -->
			<div v-if="strategyInfo">
				<div class="title">推荐攻略</div>
				<div class="strategy-info" @click="util.gotoDetailMini(strategyInfo)">
					<img :src="util.showImg(strategyInfo.image)" class="strategy-img">
					
					<div class="strategy-content flex-between">
						<div class="strategy-title text-overflowRows">{{strategyInfo.title}}</div>
						<div class="strategy-subtitle flex-between">
							<div>
								<img :src="util.showImg(strategyInfo.author_img)" alt="">
								{{strategyInfo.author}}
							</div>
							<div>
								<img src="https://static.ticket.sz-trip.com/yandu/images/map/eye.png" alt="">
								{{strategyInfo.view}}
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				detail: {},
				selectIndex: null,
				info: null,
				strategyInfo: null
			}
		},
		mounted() {
			this.detail = JSON.parse(sessionStorage.getItem('lineDetail'))
			
			// 获取攻略详情
			this.get({
				id: this.detail.article_id
			},'/api/article/getArticleById').then(res => {
				if(res.data.id) this.strategyInfo = res.data
 			})
		},
		methods: {
			// 选中景点
			choosePoint(item,index) {
				if(this.selectIndex == index) {
					this.info = null
					this.selectIndex = null
					return;
				}
				this.selectIndex = index
				if(['ticket', 'hotel'].includes(item.goods.genre)) {
					// 景点酒店
					this.get({
						id: item.goods.scenic_id
					},'/api/scenic/getScenicById').then(res => {
						if(res.data) {
							this.info = res.data
							this.$emit('changeCenter', item.lonlat)
						}
					})
				}else if(item.goods.genre == 'food') {
					this.get({
						goods_id: item.goods.id
					},'/api/goods/getGoodDetail').then(res => {
						if(res.data) {
							this.info = res.data
							this.$emit('changeCenter', item.lonlat)
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bg {
		width: 750px;
		padding: 43px 0 96px 27px;
		position: relative;
		overflow: visible;
	}
	
	.boxs {
		max-height: 40vh;
		overflow-y: auto;
	}
	
	.title {
		font-weight: bold;
		font-size: 37px;
		color: #111111;
	}
	
	.subtitle {
		font-weight: 500;
		font-size: 24px;
		color: #666666;
		margin-top: 15px;
	}
	
	.box {
		margin-top: 49px;
		
		.item {
			display: flex;
			align-items: center;
			padding-left: 41px;
			height: 116px;
			position: relative;
			padding-bottom: 19px;
			
			.line {
				width: 0px;
				height: 100%;
				border-left: 3px dashed #71B580;
				position: absolute;
				top: 0;
				left: 64px;
			}
			
			.lineF {
				height: 50%;
				top: auto;
				bottom: 5px;
			}
			
			.lineE {
				height: 50%;
				top: 5px;
			}
			
			.num {
				width: 53px;
				height: 53px;
				line-height: 53px;
				background: #FFFFFF;
				border-radius: 50%;
				border: 2px solid #71B580;
				text-align: center;
				font-weight: bold;
				font-size: 32px;
				color: #71B580;
				position: relative;
			}
				
			.numS {
				background: #71B580;
				color: #FFFFFF;
			}
			
			.content {
				width: 597px;
				height: 97px;
				background-image: url('https://static.ticket.sz-trip.com/yandu/images/map/lineBg.png');
				background-size: 100% 100%;
				font-weight: 500;
				font-size: 28px;
				color: #333333;
				display: flex;
				align-items: center;
				padding-left: 50px;
			}
			.contents {
				background-image: url('https://static.ticket.sz-trip.com/yandu/images/map/lineBgs.png');
				color: #FFFFFF;
			}
		}
	}
	
	.info {
		width: 573px;
		height: 202px;
		background: #FFFFFF;
		box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.3);
		border-radius: 13px;
		position: absolute;
		top: -310px;
		left: 88px;
		padding: 5px;
		display: flex;
		
		.info-img {
			width: 187px;
			height: 187px;
			border-radius: 7px;
			object-fit: cover;
		}
		
		.info-content {
			padding: 7px 0 3px;
			margin-left: 15px;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			width: 344px;
			
			.title {
				font-weight: bold;
				font-size: 29px;
				color: #333333;
				width: 344px;
			}
			
			.subtitle {
				font-weight: 500;
				font-size: 23px;
				color: #666666;
				width: 344px;
				margin-top: 0;
			}
			
			.location {
				font-weight: bold;
				font-size: 23px;
				color: #71B580;
				display: flex;
				align-items: center;
				margin-left: auto;
				
				img {
					width: 32px;
					height: 32px;
					margin-right: 5px;
				}
			}
		}
	}
	
	.strategy-info {
		width: 697px;
		height: 213px;
		background: #FFFFFF;
		box-shadow: 0px 1px 16px 0px rgba(153,153,153,0.35);
		border-radius: 20px;
		margin-top: 25px;
		padding: 13px;
		display: flex;
		
		.strategy-img {
			object-fit: cover;
			width: 187px;
			height: 187px;
			border-radius: 13px;
		}
		
		.strategy-content {
			width: 455px;
			margin-left: 18px;
			flex-direction: column;
			padding: 5px 0;
			
			.strategy-title {
				font-weight: bold;
				font-size: 31px;
				color: #111111;
			}
			
			.strategy-subtitle {
				font-weight: 500;
				font-size: 27px;
				color: #888888;
				width: 100%;
				
				div {
					display: flex;
					align-items: center;
				}
				
				img {
					width: 27px;
					margin-right: 5px;
				}
				
				.strategy-userImg {
					width: 37px !important;
					height: 37px !important;
				}
			}
		}
	}
</style>