yandu_map/src/views/LineList.vue

<template>
	<div class="bg">
		<!-- 我的行程时显示添加行程 -->
		<div class="top-box flex-between" v-if="type">
			<div>我的行程</div>
			<div class="top-btn" @click="addLine">+添加</div>
		</div>
		
		<div class="item" v-for="(item,index) in list" :key="index" @click="viewDetail(item)">
			<img :src="util.showImg(item.image)" alt="" />
			
			<div :class="['content', {'contents': type}]">
				<div class="title">{{item.name}}</div>
				<div class="subtitle text-overflowRows" v-if="type" style="display: flex;">
					<div v-for="(tagItem, tagIndex) in item.points" :key="tagIndex">{{tagItem.name}}<span v-if="tagIndex + 1 != item.points.length">-</span></div>
				</div>
				<div class="subtitle" v-else>{{item.points.length}}个景点</div>
				<div class="subtitle" v-if="type">{{item.date}}</div>
			</div>
			
			<div class="delLine flex-center" v-if="type">
				<img src="https://static.ticket.sz-trip.com/yandu/images/map/delLine.png" alt="" @click="delLine(index)">
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				type: this.$route.query.type, // type为1时是我的行程，否则为推荐线路
			}
		},
		mounted() {
			this.getList()
		},
		methods: {
			// 根据code获取推荐线路
			getList() {
				this.post({
					type: this.$route.query.type ? 1 : '',
					code: this.$route.query.code
				},'/api/emap/getLineByCode').then(res => {
					this.list = res.data
				})
			},
			// 详情
			viewDetail(item) {
				sessionStorage.setItem('lineDetail', JSON.stringify(item))
				this.$router.push('/')
			},
			// 添加线路
			addLine() {
				this.$router.push('/')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bg {
		width: 100%;
		min-height: 100vh;
		background: #F7F7F7;
		padding-top: 31px;
	}
	
	.top-box {
		width: 697px;
		padding: 30px;
		margin: 0 auto;
		font-weight: bold;
		font-size: 40px;
		color: #000000;
		
		.top-btn {
			width: 137px;
			line-height: 60px;
			border-radius: 30px;
			border: 1px solid #CCCCCC;
			text-align: center;
			font-weight: 400;
			font-size: 27px;
			color: #000000;
		}
	}
	
	.item {
		width: 697px;
		height: 240px;
		background: #FFFFFF;
		box-shadow: 0px 1px 16px 0px rgba(153,153,153,0.35);
		border-radius: 20px;
		margin: 0 auto 33px;
		padding: 13px;
		display: flex;
		justify-content: space-between;
		
		img {
			object-fit: cover;
			width: 213px;
			height: 213px;
			border-radius: 13px;
		}
		
		.content {
			padding: 15px 0;
			width: 410px;
			
			.title {
				font-weight: bold;
				font-size: 33px;
				color: #111111;
			}
			
			.subtitle {
				margin-top: 8px;
				font-weight: 500;
				font-size: 27px;
				color: #666666;
			}
		}
		
		.contents {
			width: 340px;
		}
		
		.delLine {
			width: 50px;
			
			img {
				width: 30px;
				height: 34px;
			}
		}
	}
</style>