yicangzongtai_app_240321/pages/home/module/kong-kim.vue

<template>
	<view :class="{'skeleton-box':skeletonLoading}" style="width: 100%;" :style="{'backgroundColor':bgColor}">
		<template v-if="type == 1">
			<view class="zw-kong-kim kong-kim">
				<block v-for="(item , index) in kongLimList || Nums">
					<view class="kong-kim-item" @click.stop="openKongKim(item)">
						<view class="">
							<image class="kong-kim-img skeleton-fillet" :src="item.icon" mode="aspectFit" />
						</view>
						<text class="kong-kim-text zw-one-row skeleton-fillet">{{item.name}}</text>
					</view>
				</block>
			</view>
		</template>
		<template v-if="type == 2">
			<view class="sh-kong-kim">
				<!-- <view class="kong-kim ">
					<block v-for="item in kongLimList_big || bigNum">
						<view class="kong-kim-item kong-kim-big" @click.stop="openKongKim(item)">
							<image class="kong-kim-img skeleton-fillet" :src="item.icon" mode="aspectFit" />
							<text class="kong-kim-text  zw-one-row skeleton-fillet">{{item.name}}</text>
						</view>
					</block>
				</view> -->
				<view class="kong-kim">
					<block v-for="(item , index) in kongLimList || Nums">
						<view class="kong-kim-item" @click.stop="openKongKim(item)">
							<image class="kong-kim-img skeleton-fillet" :src="item.icon" mode="aspectFit" />
							<text class="kong-kim-text zw-one-row skeleton-fillet">{{item.name}}</text>
						</view>
					</block>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	import {
		getAPPList
	} from "@/api/government.js"
	export default {
		props: {
			bgColor: {
				type: String,
				default: 'transparent'
			},
			type: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				skeletonLoading: true,
				kongLimList: null,
				kongLimList_big: null,
				bigNum: 5,
				Nums: 10,
			}
		},

		methods: {
			init() {
				this.getKongKim()
			},
			getKongKim() {
				const keyword = this.type === 1 ? this.$keys.ZW_KONGKIM : this.$keys.SH_KONGKIM;
				getAPPList(keyword).then(res => {
					this.setVal(res.data);
				}).catch(() => {
					this.setVal();
				})

			},
			setVal(data) {
				setTimeout(() => {
					const val = data || []
					this.kongLimList = val || []
					// if (this.type === 1) {
					// 	this.kongLimList = val || []
					// }
					// if (this.type === 2) {
					// 	this.kongLimList_big = [];
					// 	this.kongLimList = [];
					// 	val.forEach((el, index) => {
					// 		if (index < 5) {
					// 			this.kongLimList_big.push(el)
					// 		} else {
					// 			this.kongLimList.push(el)
					// 		}
					// 	})
					// }
					this.skeletonLoading = false;
					this.$forceUpdate()
				}, this.skeletonLoading ? this.$skeletonTime : 0)
			},
			openKongKim(item) {
				this.$openPage(item)
			},
			openMore() {
				uni.navigateTo({
					url: `/pages/government/more-app`
				});
			}
		},
		watch: {
			type: {
				handler: function(newType, oldType) {
					if (newType !== oldType && [1, 2].includes(newType)) this.getKongKim(newType)
				},
				immediate: true
			},
			skeletonLoading: {
				handler: function(newLoading, oldLoading) {
					if (!newLoading) {
						this.bigNum = this.Nums = 0;
					} else {
						this.bigNum = 5;
						this.Nums = 10;
					}
				},
				immediate: true
			}
		}
	}
</script>

<style lang="scss" scoped>
	$padd: 30rpx;


	.kong-kim {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: stretch;
		padding: $padd 0 0;

		.kong-kim-item {
			width: calc((100% - 60rpx) / 5);
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin: 0 15rpx $padd 0;

			&:nth-child(5n) {
				margin-right: 0;
			}

			.kong-kim-text {
				width: 100%;
				height: 33rpx;
				font-size: 24rpx;
				line-height: 33rpx;
				font-family: PingFang SC, PingFang SC-Light;
				font-weight: 300;
				text-align: center;
				color: #373737;

			}
		}
	}

	.kong-kim-img {

		background-size: 100% 100%;
		background-position: center;
		background-repeat: no-repeat;

		.kong-kim-bg-img {
			width: 100%;
			height: 100%;
		}
	}

	.zw-kong-kim {
		.kong-kim-img {
			width: 86rpx;
			height: 86rpx;
		}

		.kong-kim-text {
			margin-top: 10rpx;
		}
	}

	.sh-kong-kim {
		.kong-kim-img {
			width: 71rpx;
			height: 71rpx;
		}

		.kong-kim-big {
			margin-bottom: 0;

			.kong-kim-text {
				margin-top: 10rpx;
			}

			.kong-kim-img {
				width: 104rpx;
				height: 104rpx;
			}
		}
	}
</style>