mobile_h5/card/components/my-pathList/my-pathList.vue

<template>
	<view class="main-path uni-row" :style="style ? style : 'justify-content: space-evenly;'" v-for="num of pathListLen" :key="'row-' + num">
		<template v-for="(item, index) in pathList['row'+ num]" :key="'row-' + num + '-' + index">
			<view v-if="item.type == 1 || item.type == 2">
				<image mode="aspectFit" class="pathimg" :src="item.img" @click="onPathImgClick(item)">
				</image>
			</view>
			<view v-if="item.type == 3" class="path-nav uni-row uni-aie">
				<image mode="aspectFit" class="pathimg2" :src="item.pathImg" @click="onPathImgClick(item, 'path')">
				</image>
				<view class="uni-column">
					<image mode="aspectFit" class="navimg" :src="item.navImg" @click="onPathImgClick(item, 'nav')"></image>
					<text class="navtext">（导航）</text>
				</view>
			</view>
		</template>
		<view v-if="showLine && num < pathListLen" class="line"></view>
	</view>
</template>

<script>
	import tools from '/common/tools';
	
	export default {
		name:"my-pathList",
		props: {
			pathList: {},
			mcState: 0, // 赛事/活动状态 0: 未开始  1: 进行中  2: 已结束
			showLine: false	,// 是否显示线条
			style: ""
		},
		data() {
			return {
				navPoint: {},
			};
		},
		computed: {
			pathListLen() {
				return Object.keys(this.pathList).length;
			}
		},
		methods: {
			onPathImgClick(item, type='') {
				//item.type 1: 比赛路线  2: 导航到指定地点
				if (item.type == 1) {
					this.dealPathClick(item);
				} else if (item.type == 2) {
					this.dealNavClick(item);
				} else if (item.type == 3) {
					if (type == 'path') {
						this.dealPathClick(item);
					} else if (type == 'nav') {
						this.dealNavClick(item);
					}
				}
			},
			dealPathClick(item) {
				// 赛事/活动状态 0: 未开始  1: 进行中  2: 已结束
				if (this.mcState == 1) {
					const url = `action://to_detail/?id=${item.path.ocaId}&matchType=${item.path.mcType}`;
					// window.location.href = url;
					tools.appAction(url);
				} else if (this.mcState == 0) {
					uni.showToast({
						title: '比赛尚未开始',
						icon: 'none',
						duration: 3000
					});
				} else if (this.mcState == 2) {
					uni.showToast({
						title: '比赛已结束',
						icon: 'none',
						duration: 3000
					});
				}
			},
			dealNavClick(item) {
				this.navPoint = item.point;
				// this.$refs.mypopupmap.popupOpen();
				
				const url =
					`action://to_map_app?title=${this.navPoint.name}&latitude=${this.navPoint.latitude}&longitude=${this.navPoint.longitude}`;
				// window.location.href = url;
				tools.appAction(url);
			}
		}
	}
</script>

<style scoped>

	.pathimg {
		width: 127px;
		height: 115px;
	}

	.pathimg2 {
		width: 106px;
		height: 80px;
	}

	.navimg {
		width: 25px;
		height: 25px;
	}

	.navtext {
		font-weight: 500;
		color: #aaaaaa;
		font-size: 10px;
		font-family: Source Han Sans CN;
	}

	.main-path {
		width: 90%;
		margin-top: 10px;
		margin-bottom: 10px;
		flex-wrap: wrap;
		/* justify-content: flex-start; */
		/* justify-content: space-evenly; */
	}
	
	.path-nav {
		width: 50%;
		justify-content: center;
	}
	
	.line {
		width: 100%;
		height: 0px;
		margin: 20px 5% 0 5%;
		border: 1px dashed;
		border-color: #c6c6c6;
	}
	
</style>