yandu_map/src/views/LineList.vue

<template>
	<div class="bg">
		<div class="title-box">
			<div class="title-header flex-between">
				<van-icon name="arrow-left" @click="$router.go(-1)"/>
				<div>{{type ? '地图导览' : '线路推荐'}}</div>
				<div></div>
			</div>
		</div>
		<!-- 我的行程时显示添加行程 -->
		<div class="top-box flex-between" v-if="type">
			<div>我的行程</div>
			<div class="top-btn" @click="addLine">+添加</div>
		</div>
		
		<div v-if="list.length > 0">
			<div class="item" v-for="(item,index) in list" :key="index" @click="viewDetail(item)">
				<img :src="util.showImg(item.points[0].main_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.stop="delLine(item)">
				</div>
			</div>
		</div>
		
		<div class="noLine" v-else>暂无行程</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 ? 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() {
				sessionStorage.setItem('addUserLine', 1)
				this.$router.push('/')
			},
			// 删除线路
			delLine(item) {
				this.$dialog.confirm({
					title: '',
					message: '是否删除当前行程?'
				}).then(() => {
					this.post({
						line_id: item.id
					},'/api/emap/updateUserLine').then(res => {
						if(res.code == 1) {
							this.$toast('删除成功')
							this.getList()
						}
					})
				}).catch(() => {
				
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bg {
		width: 100%;
		min-height: 100vh;
		background: #F7F7F7;
		padding-top: 31px;
	}
	
	.title-box {
		height: 95px;
	}
	.title-header {
		width: 100%;
		height: 95px;
		padding: 0 27px;
		position: fixed;
		top: 0;
		left: 0;
		font-weight: bold;
		font-size: 36px;
		color: #333333;
		background: #fff;
		
		div:last-child {
			width: 20px;
		}
	}
	
	.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;
			}
		}
	}
	
	.noLine {
		text-align: center;
		color: #ccc;
		font-size: 26px;
		margin-top: 20px;
	}
</style>