uni-zhihuikuangshan/components/e-link/e-link.vue

<template>
	<view>
		<view class="linksList">
			<view class="title" v-if="linksList[0].title">{{linksList[0].title}}</view>

			<view v-if="linksList[0].types == 11">
				<view class="list_11">
					<view class="item" v-for="item in linksList" :key="item.id" @click="go_page(item.linkUrl)">
						<view class="left">
							<view class="icon">
								<view class="img"
									v-if="item.imageUrl == '../../static/images/link.png' || item.imageUrl == ''">
									<uni-icons type="paperclip" size="30"></uni-icons>
								</view>
								<view class="img" v-else>
									<image :src="item.imageUrl" mode=""></image>
								</view>
							</view>
							<view class="name">{{item.linkName}}</view>
						</view>
						<view class="right">
							<uni-icons type="arrowright" size="20"></uni-icons>
						</view>
					</view>
				</view>
			</view>
			<view v-if="linksList[0].types == 12">
				<view class="list_12">
					<view class="item" v-for="item in linksList" :key="item.id" @click="go_page(item.linkUrl)">
						<view class="icon">
							<view class="img"
								v-if="item.imageUrl == '../../static/images/link.png'  || item.imageUrl == ''">
								<uni-icons type="paperclip" size="30"></uni-icons>
							</view>
							<view class="img" v-else>
								<image :src="item.imageUrl" mode=""></image>
							</view>
						</view>
						<view class="name">{{item.linkName}}</view>
					</view>
				</view>
			</view>
			<view v-if="linksList[0].types == 13">
				<view class="list_13">
					<view class="item" v-for="item in linksList" :key="item.id" @click="go_page(item.linkUrl)">
						<view class="icon">
							<view class="img"
								v-if="item.imageUrl == '../../static/images/link.png'  || item.imageUrl == ''">
								<uni-icons type="paperclip" size="30"></uni-icons>
							</view>
							<view class="img" v-else>
								<image :src="item.imageUrl" mode=""></image>
							</view>
						</view>
						<view class="name">{{item.linkName}}</view>
					</view>
				</view>
			</view>
			<view v-if="linksList[0].types == 14">
				<view class="list_14">
					<view class="item" v-for="item in linksList" :key="item.id" @click="go_page(item.linkUrl)">
						<view class="icon">
							<view class="img"
								v-if="item.imageUrl == '../../static/images/link.png'  || item.imageUrl == ''">
								<uni-icons type="paperclip" size="30"></uni-icons>
							</view>
							<view class="img" v-else>
								<image :src="item.imageUrl" mode=""></image>
							</view>
						</view>
						<view class="name">{{item.linkName}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: [
			"linksList",
			"mine_code"
		],
		data() {
			return {

			};
		},
		methods: {
			go_page(link) {
				console.log(link)
				let pageId = ""
				function GetQueryString(name) {
					var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
					var r = link.match(reg);
					if (r != null) return unescape(r[2]);
					return null;
				}
				console.log(GetQueryString("pageId"))
				if (GetQueryString("pageId")) {
					pageId = GetQueryString("pageId")
				} else {
					pageId = link.split('=')[1]
				}

				uni.navigateTo({
					url: "../../index/record/record?pageId=" + pageId + "&mine_code=" + this.mine_code,
				})
			}
		}
	}
</script>

<style lang="scss">
	.linksList {
		.title {
			line-height: 30px;
			border-left: 4px solid #009FE8;
			border-radius: 4px;
			padding-left: 10px;
			margin-bottom: 10px;
		}

		// 一行一项
		.list_11 {
			.item {
				display: flex;
				justify-content: space-between;
				align-items: center;

				padding: 10px 0;
				border-bottom: 1px solid #f4f4f4;

				.left {
					display: flex;
					align-items: center;

					.icon {
						width: 60px;
						line-height: 80rpx;
						margin-right: 10px;

						.img {
							width: 60px;
							height: 80rpx;
							line-height: 80rpx;
							text-align: center;

							image {
								width: 80rpx;
								height: 80rpx;
							}
						}
					}

					.name {
						width: 400rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}

				.right {}
			}
		}

		// 一行两项
		.list_12 {
			display: flex;
			flex-wrap: wrap;

			.item {
				width: 320rpx;
				display: flex;
				align-items: center;
				margin-left: 10rpx;
				// border-right: 1px solid #f4f4f4;
				padding-right: 10rpx;
				margin-bottom: 10px;

				.icon {
					margin-right: 30rpx;

					.img {
						image {
							width: 90rpx;
							height: 90rpx;
						}
					}
				}

				.name {
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}

			.item:nth-child(2n) {
				border-right: none;
			}
		}

		// 一行三项
		.list_13 {
			overflow: hidden;

			.item {
				float: left;
				width: 210rpx;
				text-align: center;
				margin-bottom: 10px;
				margin-right: 35rpx;

				.icon {
					width: 210rpx;

					.img {
						width: 210rpx;
						line-height: 30px;
						text-align: center;

						image {
							width: 90rpx;
							height: 90rpx;
						}
					}
				}

				.name {
					margin-top: 10rpx;

					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}

			.item:nth-child(3n) {
				margin-right: 0;
			}
		}

		// 一行四项
		.list_14 {
			overflow: hidden;

			.item {
				float: left;
				width: 175rpx;
				text-align: center;
				margin-bottom: 10px;

				.icon {
					width: 175rpx;

					.img {
						width: 175rpx;
						line-height: 30px;
						text-align: center;

						image {
							width: 50px;
							height: 50px;
						}
					}
				}

				.name {
					margin-top: 10rpx;

					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}

	}
</style>