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="zw-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 lazy-img" @click.stop="$openPage(item)">
								<u-image class="service-img" :src="$getImgPath(item.moduleImage)" mode="aspectFit"
									:lazy-load="true"></u-image>
							</view>
						</u-col>

					</u-row>
				</view>
			</view>
			<!-- 一件事中心 -->
			<view class="zw-service-box group-service zw-interval" v-if="yijianshi && (chusheng || biye)">
				<view class="service-title">
					<text>{{ yijianshi.themeVo.themeName }}</text>
					<text class="moer-text" @click.stop="$openPage(yijianshi.themeVo.themeId , 1)">更多
						<text class="moer-icon iconfont_yige">&#xe65f;</text>
					</text>
				</view>
				<view class="service-content one-thing">
					<view class="one-thing-item" v-if="chusheng"
						:style="{'backgroundImage': `url(${chusheng.themeVo.themeInnerImage})`}">
						<view class="one-thing-title">
							<text class="zw-two-row">{{chusheng.themeVo.themeName}}</text>
						</view>
						<view class="one-thing-content">
							<view class="one-thing-type" :key="`chusheng_${index}`"
								v-for="(item , index) in chusheng.themeModuleVoList" @click.stop="$openPage(item)">
								<text class="one-thing-lable zw-one-row">{{item.moduleName}}</text>
								<text class="moer-icon iconfont_yige">&#xe65f;</text>
							</view>
						</view>
					</view>
					<view class="one-thing-item" v-if="biye"
						:style="{'backgroundImage': `url(${biye.themeVo.themeInnerImage})`}">
						<view class="one-thing-title">
							<text class="zw-two-row">{{biye.themeVo.themeName}}</text>
						</view>
						<view class="one-thing-content">
							<view class="one-thing-type" :key="`biye_${index}`"
								v-for="(item , index) in biye.themeModuleVoList" @click.stop="$openPage(item)">
								<text class="one-thing-lable zw-one-row">{{item.moduleName}}</text>
								<text class="moer-icon iconfont_yige">&#xe65f;</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 社区生活 -->
			<view class="zw-service-box group-service zw-interval" v-if="shequshenghuo">
				<view class="service-title">
					<text>{{ shequshenghuo.themeVo.themeName }}</text>
				</view>
				<view class="service-content community-content">
					<template v-if="shequshenghuo.themeModuleVoList && shequshenghuo.themeModuleVoList.length > 0">
						<view class="community-max" @click.stop="$openPage(shequshenghuo.themeModuleVoList[0])">
							<image class="community-img" :src="shequshenghuo.themeModuleVoList[0].moduleImage"
								mode="scaleToFill"></image>
						</view>
						<view class="community-box">
							<view class="community-min" @click.stop="$openPage(shequshenghuo.themeModuleVoList[1])"
								v-if="shequshenghuo.themeModuleVoList[1]">
								<image class="community-img" :src="shequshenghuo.themeModuleVoList[1].moduleImage"
									mode="scaleToFill"></image>
							</view>
							<view class="community-min" @click.stop="$openPage(shequshenghuo.themeModuleVoList[2])"
								v-if="shequshenghuo.themeModuleVoList[2]">
								<image class="community-img" :src="shequshenghuo.themeModuleVoList[2].moduleImage"
									mode="scaleToFill"></image>
							</view>
						</view>
					</template>
				</view>
			</view>
			<!-- 区县服务 -->
			<view class="zw-service-box group-service zw-interval" v-if="districtService">
				<view class="service-title">
					{{ districtService.themeVo.themeName }}
				</view>
				<view class="service-content">
					<scroll-view class="district-service" scroll-x="true">
						<div class="district-service-items">
							<block v-for="item in districtService.themeModuleVoList">
								<view class="district-service-item"
									:style="{'background-image':`url(${item.moduleImage})`}"
									@click.stop="$openPage(item)">
									<view class="district-service-name zw-one-row">
										{{item.moduleName}}
									</view>
								</view>
							</block>
						</div>
					</scroll-view>
				</view>
			</view>



			<!-- 群体服务 -->
			<view class="zw-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 lazy-img" @click.stop="$openPage(item)">
								<u-image class="service-img" :src="$getImgPath(item.moduleImage)" mode="aspectFit"
									:lazy-load="true"></u-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="onInformation(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]">
					<template v-if="activeInformationLable === '宜昌发布'">
						<view class="news-item" @click.stop="openYiChangNewsDetail(item)">
							<view class="news-info">
								<view class="news-title">
									{{ item.title }}
								</view>
								<view class="news-tag">
									<text>{{ item.author }}</text>
									<text>{{ item.published }}</text>
								</view>
							</view>
							<view class="news-img lazy-img">
								<u-image class="service-img" :src="item.coverImgUrl" mode="aspectFill"
									:lazy-load="true"></u-image>
							</view>
						</view>
					</template>
					<template v-else>
						<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>
							<view class="news-img lazy-img">
								<u-image class="service-img" :src="$getImgPath(item.informationThumbnail)"
									mode="aspectFill" :lazy-load="true"></u-image>
							</view>
						</view>
					</template>
				</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"
	import {
		getYiChangNews,
		openYiChangNews
	} from "../government/conmon.js"
	export default {
		mixins: [Mixin],
		components: {
			kongKim,
			rollMessage
		},
		data() {
			return {
				list: [],
				AggregationService: null,
				groupService: null,
				InformationLable: null,
				activeInformationLable: null,
				InformationList: {},
				districtService: null,
				shequshenghuo: null,
				yijianshi: null,
				chusheng: null,
				biye: null,
			}
		},
		onShow() {


		},
		created() {
			// 
		},
		mounted() {
			// this.initPage()
		},
		methods: {
			init() {
				this.$nextTick(() => {
					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, this.$keys.QX_FW, this.$keys.SQSH_SERVE,
					this.$keys.YIJIANSHI_SERVE, this.$keys.YIJIANSHI_CHUSHENG, this.$keys.YIJIANSHI_BIYE
				]

				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({
					informationChannel: this.$keys.information_home
				}).then(res => {
					this.InformationLable = res || null
					if (res && res.length > 0) {
						res.forEach((el, index) => {
							if (index === 0) {
								this.activeInformationLable = el.informationTypeName
							}
							this.getInformationList(el)
						})
					}
					// this.getInformationList(res[0])
				})
			},
			onInformation(item) {
				this.activeInformationLable = item.informationTypeName;
				this.getInformationList(item);
			},
			// 获取资讯列表
			getInformationList(item) {
				// this.activeInformationLable = item.informationTypeName;
				const list = this.InformationList[item.informationTypeName]
				// console.log('this.activeInformationLable', item.informationTypeName)
				// 加载过，就不加载
				if (list) {
					//  && list.length > 0
					return false
				}
				if (item.informationTypeName === "宜昌发布") {
					getYiChangNews(6).then(res => {
						// console.log('getYiChangNews = ', res)
						this.$set(this.InformationList, item.informationTypeName, res || [])
					})
				} else {
					getInformationList_Api({
						informationTypeId: item.informationTypeId
					}).then(res => {
						this.$set(this.InformationList, item.informationTypeName, res.rows || [])
					})
				}
			},

			openYiChangNewsDetail(row) {
				openYiChangNews(row)
			},

			setService(data, key, keys) {
				switch (key) {
					case this.$keys.ZW_THEME:
						// 主题服务
						this.AggregationService = data || null
						break;
					case this.$keys.ZW_GROUP:
						// 群体服务
						this.groupService = data || null
						break;
					case this.$keys.QX_FW:
						// 区县服务
						this.districtService = data || null
						break;
					case this.$keys.SQSH_SERVE:
						// 社区生活
						this.shequshenghuo = data || null
						break;
					case this.$keys.YIJIANSHI_SERVE:
						// 一件事
						this.yijianshi = data || null
						break;
					case this.$keys.YIJIANSHI_CHUSHENG:
						// 出生一件事
						this.chusheng = data || null
						break;
					case this.$keys.YIJIANSHI_BIYE:
						// 出生一件事
						this.biye = data || null
						break;






				}
			},
		}
	}
</script>


<style lang="scss" scoped>
	// @import url("~./sever.scss");
	@import './sever.scss';

	.pages-content {


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


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



		.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: 2rpx 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;

				.news-img {
					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: 2rpx;
									height: 60%;
									background-color: #999999;
								}
							}
						}
					}
				}
			}
		}

	}

	.empty-box {
		padding-top: 80rpx;
	}

	.district-service {
		width: 100%;
		height: 175rpx;
		white-space: nowrap;

		.district-service-items {
			display: flex;
			flex-direction: row;
			align-items: stretch;
		}

		.district-service-item {
			flex-shrink: 0;
			width: 175rpx;
			height: 175rpx;
			margin-right: 18rpx;
			background-size: 100% 100%;
			background-repeat: no-repeat;
			position: relative;
			overflow: hidden;
			// border-radius: 10rpx;

			&:last-child {
				margin-right: 0;
			}

			.district-service-name {
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				background-color: rgba(173, 173, 173, 0.6);
				display: flex;
				justify-content: center;
				align-items: center;
				height: 44rpx;
				font-size: 20rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #FFFFFF;
			}
		}
	}

	.one-thing {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: stretch;

		.one-thing-item {
			width: calc(50% - 10rpx);
			padding: 0 20rpx 20rpx;
			border-radius: 20rpx;
			background-repeat: no-repeat;
			background-size: 100% 100%;
			// &:nth-child(1) {
			// 	background-color: #99c8fe;
			// }

			// &:nth-child(2) {
			// 	background-color: #a0e1ff;
			// }

			.one-thing-title {
				width: 100%;
				height: 100rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #fff;
				font-size: 28rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
			}

			.one-thing-content {
				background-color: #fff;
				min-height: 234rpx;
				border-radius: 20rpx;

				.one-thing-type {
					width: 100%;
					height: 78rpx;
					padding: 0 30rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 24rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #333333;

					.one-thing-lable {
						flex: 1;
						padding-right: 10rpx;
					}

					.moer-icon {
						font-size: 24rpx;
						flex-shrink: 0;
					}
				}
			}
		}
	}

	.community-content {
		display: flex;
		justify-content: space-between;
		align-items: stretch;

		.community-max {
			width: 408rpx;
			height: 274rpx;
			flex-shrink: 0;
		}

		.community-box {
			flex: 1;
			padding-left: 15rpx;
			// flex-shrink: 0;
			// width: 212rpx; 
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.community-min {
				width: 100%;
				height: calc((274rpx - 15rpx) / 2);
			}
		}

		.community-img {
			width: 100%;
			height: 100%;
		}
	}
</style>