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">
				<view class="uni-column">
					<image mode="aspectFit" class="pathimg2" :src="item.pathImg" @click="onPathImgClick(item, 'path')">
					</image>
					<text v-if="item.pathName != ''" class="pathName2">{{item.pathName}}</text>
				</view>
				<view class="uni-column">
					<image mode="aspectFit" class="navimg" :src="item.navImg" @click="onPathImgClick(item, 'nav')">
					</image>
					<text class="navtext">起点导航</text>
				</view>
			</view>
			<view v-if="item.type == 4" class="path-nav uni-column">
				<view class="uni-column">
					<image mode="aspectFit" class="pathimg3" :src="item.pathImg" @click="onPathImgClick(item, 'path')">
					</image>
					<text class="pathName" v-html="item.pathName"></text>
				</view>
				<view class="uni-column">
					<image mode="aspectFit" class="navimg2" :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>
	
	<uni-popup ref="alertDialog" type="dialog">
		<uni-popup-dialog type="warn" cancelText="取消" confirmText="确定" title="提示" :content="alertDialog.content"
			@confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
	</uni-popup>
</template>

<script>
	import tools from '/common/tools';

	export default {
		name: "my-pathList",
		props: {
			pathList: {},	// type  1: 比赛路线  2: 导航到指定地点  3: 比赛路线 + 导航
			mcState: 0, // 赛事/活动状态 0: 未开始  1: 进行中  2: 已结束
			selectedPath: 0, // 用户已选择的路线(ocaId)
			showLine: false, // 是否显示线条
			style: "",
			isNewUser: false // 是否新用户
		},
		emits: ['onPathClick', 'onNewUserPathClick'],
		data() {
			return {
				navPoint: {},
				alertDialog: {
					content: "",
					data: null
				}
			};
		},
		computed: {
			pathListLen() {
				return Object.keys(this.pathList).length;
			}
		},
		mounted() {
		},
		methods: {
			onPathImgClick(item, type = '') {
				// console.log("onPathImgClick");
				//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) {
					if (this.selectedPath > 0 && this.selectedPath != item.path.ocaId) {
						this.alertDialog.content = "该路线与您之前选择的不一致，确定要更换路线吗？"
						this.alertDialog.data = item;
						this.$refs.alertDialog.open();
					} else {
						this.startGame(item);
					}
				} 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}`;
				tools.appAction(url);
			},
			dialogConfirm() {
				const item = this.alertDialog.data;
				this.startGame(item);
			},
			dialogClose() {
			},
			startGame(item) {
				if (this.isNewUser) {
					this.$emit('onNewUserPathClick', item);
				} else {
					this.to_detail(item);
				}
			},
			to_detail(item) {
				const url = `action://to_detail/?id=${item.path.ocaId}&matchType=${item.path.mcType}`;
				tools.appAction(url);
				this.$emit('onPathClick', item);
			},
		}
	}
</script>

<style scoped>
	.pathimg {
		width: 127px;
		height: 115px;
	}

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

	.pathimg3 {
		width: 141px;
		height: 141px;
	}
	
	.pathName {
		text-align: center;
		font-weight: 500;
		color: #383838;
		font-size: 16px;
		line-height: 36px;
		font-family: Source Han Sans CN;
	}
	
	.pathName2 {
		width: 100px;
		text-align: center;
		font-weight: 500;
		color: #CE0202;
		font-size: 10px;
		font-family: Source Han Sans CN;
		/* white-space: nowrap; */
		/* overflow: hidden; */
	}
	
	.navimg {
		width: 30px;
		height: 30px;
	}

	.navimg2 {
		width: 44px;
		height: 65px;
		margin-top: 20px;
	}
	
	.navtext {
		font-weight: 500;
		/* color: #aaaaaa; */
		color: #CE0202;
		font-size: 10px;
		font-family: Source Han Sans CN;
		white-space: nowrap;
	}
	
	.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>