yicangzongtai_app_240321/components/zw-waterfall/zw-waterfall-item.vue

<template>
	<view class="card-item" @click="onOpen(dataVal)">
		<template v-if="dataVal">
			<view class="card-img lazy-falls-img">
				<!-- <u-image class="service-img" mode="aspectFill" :lazy-load="true"></u-image> -->
				<u-lazy-load threshold="-450" border-radius="10" :image="$getImgPath(dataVal.informationThumbnail)"
					height="313rpx" :index="`img_${dataVal.informationTypeId}`"></u-lazy-load>
			</view>
			<!-- <image  :src="dataVal.informationThumbnail" mode="aspectFill"></image> -->
			<view class="card-info-box">
				<text class="card-title zw-two-row">{{dataVal.informationTitle}}</text>
				<view class="card-info">
					<!-- <image class="card-info-icon" src="../../logo.png" mode="scaleToFill"></image> -->
					<text class="card-info-name zw-one-row">{{dataVal.informationAuthor}}</text>
					<view class="card-info-nums" v-if="dataVal.browseNum || dataVal.browseNum === 0">
						<text v-if="dataVal.collectStatus" class="card-collect is-ok iconfont_yige">&#xe8c3;</text>
						<text v-else class="card-collect iconfont_yige">&#xe8ab;</text>
						<text class="card-browse">{{getNums(dataVal.browseNum)}}</text>
					</view>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		name: "zw-waterfall-item",
		props: {
			idName: {
				type: String,
				default: "informationId"
			},
			dataVal: {
				type: Object,
				default: null
			}
		},
		data() {
			return {

			};
		},
		methods: {
			onOpen(item) {
				uni.navigateTo({
					url: `/pages/government/discoverInfo?informationId=${item[this.idName]}`
				})
			},
			getNums(num) {
				let nums = num + ''
				if (nums > 10000) {
					try {
						const w = nums.slice(0, nums.length - 4);
						const n = nums.substr(nums.length - 4);
						const s = n.slice(0, 1);
						nums = `${w}${s >= 1 ? '.' + s : ''}涓嘸
					}catch{}
				}
				return nums
			}
		}
	}
</script>

<style lang="scss">
	.card-item {
		margin-top: 20rpx;
		// width: calc(50% - 10rpx);
		width: 100%;
		// min-height: 468rpx;
		background-color: #fff;
		border-radius: 20rpx;
		overflow: hidden;

		.card-img {
			width: 100%;
			// height: 313rpx;
		}

		.card-info-box {
			width: 100%;
			// height: calc(100% - 313rpx);
			height: 175rpx;
			padding: 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.card-title {
				display: inline-block;
				width: 100%;
				font-size: 28rpx;
				line-height: 1.2;
			}
		}



		.card-info {
			width: 100%;
			// padding: 0 20rpx ;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;

			.card-info-icon {
				width: 32rpx;
				height: 32rpx;
			}

			.card-info-name {
				flex: 1;
				font-size: 24rpx;
				font-family: Microsoft YaHei, Microsoft YaHei-Regular;
				font-weight: 400;
				color: #999999;
			}

			.card-info-nums {
				flex-shrink: 0;
				display: flex;
				align-items: center;

				.card-collect {
					font-size: 28rpx;
				}

				.is-ok {
					color: red;
				}

				.card-browse {
					padding-left: 10rpx;
					font-size: 28rpx;
					font-family: Microsoft YaHei, Microsoft YaHei-Regular;
					font-weight: 400;
					color: #999999;
				}
			}
		}

	}
</style>