yicangzongtai_app_240321/pages/home/affair - 副本.vue

<template>
	<view class="home-page">
		<!-- 政务 -->
		<view class="pages-content zw-pages-content"> 
			<roll-message ref="rollMessage" />
			<!-- 主题服务 -->
			<view class="service-box theme-service zw-interval" v-if="AggregationService">
				<view class="service-title">
					{{ AggregationService.themeVo.themeName }}
				</view>
				<view class="service-content">
					<u-row gutter="20">
						<u-col span="6" v-for="item in AggregationService.themeModuleVoList">
							<view class="service-item" @click.stop="$openPage(item)">
								<image class="service-img" :src="$getImgPath(item.moduleImage)" mode="aspectFit">
								</image>
							</view>
						</u-col>

					</u-row>
				</view>
			</view>

			<!-- 群体服务 -->
			<view class="service-box group-service zw-interval" v-if="groupService">
				<view class="service-title">
					{{ groupService.themeVo.themeName }}
				</view>
				<view class="service-content">
					<u-row gutter="20">
						<u-col span="4" v-for="item in groupService.themeModuleVoList">
							<view class="service-item" @click.stop="$openPage(item)">
								<image class="service-img" :src="$getImgPath(item.moduleImage)" mode="aspectFit">
								</image>
							</view>
						</u-col>
					</u-row>
				</view>
			</view>
		</view>

		<!-- 新闻 -->

		<view class="news-box">
			<view class="news-lable">
				<view class="news-lable-title">
					<block v-for="item in InformationLable">
						<text :class="{'active-news-lable':activeInformationLable  === item.informationTypeName}"
							@click.stop="getInformationList(item)">
							{{item.informationTypeName}}
						</text>
					</block>

				</view>
				<view class="news-lable-moer" @click.stop="openNews()">
					更多<text class="iconfont_yige">&#xe65f;</text>
				</view>
			</view>
			<view class="news-list-box"
				v-if="InformationList[activeInformationLable] && InformationList[activeInformationLable].length > 0">
				<block v-for="item in InformationList[activeInformationLable]">
					<view class="news-item" @click.stop="openNewsDetail(item.informationId)">
						<view class="news-info">
							<view class="news-title">
								{{ item.informationTitle }}
							</view>
							<view class="news-tag">
								<text>{{ item.informationTypeName }}</text>
								<text>{{ item.createTime }}</text>
							</view>
						</view>
						<image :src="$getImgPath(item.informationThumbnail)" mode="scaleToFill"></image>
					</view>
				</block>
			</view>
			<template v-else>
				<view class="empty-box">
					<EmptyDate />
				</view>
			</template>
		</view>
	</view>
</template>


<script>
	import Mixin from "./module/Mixin.js";
	import kongKim from "./module/kong-kim.vue"
	import rollMessage from "./module/roll-message.vue"
	import {
		getThemeModule
	} from "@/api/government.js"
	import {
		getInformation_Api,
		getInformationList_Api
	} from "./../government/conmon.js"

	export default {
		mixins: [Mixin],
		components: {
			kongKim,
			rollMessage
		},
		data() {
			return {
				list: [],
				AggregationService: null,
				groupService: null,
				InformationLable: null,
				activeInformationLable: null,
				InformationList: {}
			}
		},
		onShow() {
			 

		},
		created() {
			this.initPage()
		},
		mounted() {

		},
		methods: {
			init() {
				this.$refs.kongKimRef.init();
				this.$refs.rollMessage.init();
				this.initPage();
			},
			openNews() {
				uni.navigateTo({
					url: '/pages/news/index',
					fail: err => {
						console.log('条钻错误 = ', err)
					}
				})
			},
			openNewsDetail(informationId) {
				uni.navigateTo({
					url: `/pages/news/news_detail?informationId=${informationId}`,
					fail: err => {
						console.log('条钻错误 = ', err)
					}
				})
			},
			initPage() {


				// 获取 聚合
				// ZW_THEME: "page001", // 主题服务
				// ZW_GROUP: "page002",
				const keys = [this.$keys.ZW_THEME, this.$keys.ZW_GROUP]

				keys.forEach(el => {
					getThemeModule(el).then(res => {
						const {
							themeVo,
							themeModuleVoList
						} = res.data || {};
						if (!themeVo || !themeModuleVoList || !themeModuleVoList.length === 0) {
							throw new Error()
						} else {
							this.setService(res.data, el, keys)
						}
					}).catch(err => {
						this.setService(null, el, keys)
					})

				})


				getInformation_Api().then(res => {
					this.InformationLable = res || null
					if (this.InformationLable && this.InformationLable.length > 0) {
						this.getInformationList(this.InformationLable[0])
					}
				})
			},

			getInformationList(item) {
				this.activeInformationLable = item.informationTypeName;
				getInformationList_Api({
					informationTypeId: item.informationTypeId
				}).then(res => {
					this.$set(this.InformationList, item.informationTypeName, res.rows || [])
				})
			},

			setService(data, key, keys) {
				switch (key) {
					case keys[0]:
						// 主题服务
						this.AggregationService = data || null
						break;
					case keys[1]:
						// 群体服务
						this.groupService = data || null
						break;
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.pages-content {


		.wrap-list {
			width: 100%;
			height: 200rpx;
		}


		.zw-interval {
			border-radius: $zw-border-radius;
		}

		.service-box {
			background-color: #fff;

			.service-title {
				width: 100%;
				height: 100rpx;
				font-size: 36rpx;
				font-family: PingFang SC, PingFang SC-Bold;
				font-weight: 700;
				color: #1a1a1a;
				border-bottom: 1rpx solid $zw-border-color;
				padding: 0 30rpx;
				line-height: 100rpx;
			}

			.service-content {
				padding: 30rpx;
			}
		}

		.theme-service {

			.service-item {
				width: 300rpx;
				height: 162rpx;
				margin-bottom: 20rpx;

				&:nth-child(n+3) {
					margin-bottom: 0;
				}

				.service-img {
					width: 100%;
					height: 100%;
				}

			}


		}

		.group-service {
			.service-item {
				width: 200rpx;
				height: 236rpx;

				.service-img {
					width: 100%;
					height: 100%;
				}

			}

		}


	}

	// 新闻
	.news-box {
		width: 100%;
		margin-top: $zw-gap;
		background-color: #fff;

		.news-lable {
			width: 100%;
			height: 82rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 30rpx;
			border-bottom: 1rpx solid $zw-border-color;

			.news-lable-title {
				height: 100%;
				line-height: 82rpx;
				display: flex;
				align-items: stretch;

				text {
					margin-left: 30rpx;

					font-size: 30rpx;
					font-family: PingFang SC, PingFang SC-Regular;
					font-weight: 400;
					color: #4d4d4d;

					&:first-child {
						margin-left: 0;
					}
				}

				.active-news-lable {
					font-weight: bold;
					font-size: 34rpx;
					font-family: PingFang SC, PingFang SC-Bold;
					font-weight: 700;
					color: #1a1a1a;
					position: relative;

					&::before {
						content: '';
						position: absolute;
						max-width: 70rpx;
						left: 50%;
						bottom: 0;
						transform: translateX(-50%);
						width: 100%;
						height: 8rpx;
						background: linear-gradient(127deg, #3cb8d2 0%, #45c7d4 95%);
						border-radius: 4rpx;
					}
				}

			}

			.news-lable-moer {
				flex-shrink: 0;
				color: #808080;
				font-size: 24rpx;
			}
		}

		.news-list-box {
			width: 100%;
			padding: 0 20rpx;

			.news-item {
				padding: 40rpx 0;
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: stretch;
				border-bottom: 2rpx solid $zw-border-color;

				image {
					flex-shrink: 0;
					width: 258rpx;
					height: 163rpx;
					border-radius: 20rpx;
				}

				.news-info {
					width: calc(100% - 258rpx);
					display: flex;
					justify-content: space-between;
					flex-direction: column;
					padding-right: 40rpx;

					.news-title {
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC-Regular;
						font-weight: 400;
						text-align: left;
						color: #1a1a1a;
					}

					.news-tag {
						font-size: 24rpx;
						line-height: 1;
						font-family: PingFang SC, PingFang SC-Regular;
						font-weight: 400;
						text-align: left;
						color: #999999;

						text {
							padding-right: 10rpx;
							line-height: 1;

							&+text {
								padding-right: 0;
								padding-left: 10rpx;
								// border-left: 1rpx solid #999999;
								position: relative;

								&::before {
									content: '';
									position: absolute;
									left: 0;
									top: 50%;
									transform: translateY(-50%);
									width: 1rpx;
									height: 60%;
									background-color: #999999;
								}
							}
						}
					}
				}
			}
		}

	}

	.empty-box {
		padding-top: 80rpx;
	}
</style>