yicangzongtai_app_240321/pages/government/discovery.vue

<template>
	<view class="">
		<navbar :config="config" backColor="#999999"></navbar>
		<view class="itemBox">
			<view class="itemBox_title">
				<image src="/static/czd/discovery_tag.png" mode=""></image>
				身边人
			</view>
			<image class="itemBox_banner" :src="banner.moduleImage" mode="" @click="$openPage(banner)"></image>
		</view>
		<view class="itemBox" v-if="liveList.length>0">
			<view class="itemBox_title">
				<image src="/static/czd/discovery_tag.png" mode=""></image>
				身边景
			</view>
			<view class="itemBox_videos">
				<view v-for="(v,i) in liveList" :key="i" @click="goLive(v)">
					<image class="itemBox_videos_img" :src="v.livePicture" mode=""></image>
					<image class="itemBox_videos_switch" src="/static/czd/discovery_switch.png" mode=""></image>
					<view class="itemBox_videos_title">{{v.liveTitle}}</view>
				</view>
			</view>
		</view>
		<view class="itemBox">
			<view class="itemBox_title">
				<image src="/static/czd/discovery_tag.png" mode=""></image>
				身边剧
			</view>
			<view class="itemBox_videos">
				<view v-for="(v,i) in 6" :key="i">
					<image class="itemBox_videos_img" src="/static/czd/banner_tc.png" mode=""></image>
					<view class="itemBox_videos_type">独播</view>
					<view class="itemBox_videos_title1">大唐狄公案大唐狄公案大唐狄公案</view>
					<view class="itemBox_videos_tig">周一围寻真相破...</view>
				</view>
			</view>
		</view>
		<!-- :style="{'top':navHeight + 'px' , 'height':tabsHeight+'rpx','paddingBottom':'30rpx'}" -->
		<u-sticky :offset-top="navHeight">
			<view class="tabs-box">
				<!-- <view class="tab-item" v-for="item in tabs" @click.stop="onChange(item)">
				{{ item}}
			</view> -->
			<view class="tabs-box_title">
				<image src="/static/czd/discovery_tag.png" mode=""></image>
				<text>身边事</text>
			</view>
				<u-tabs class="utabs" :list="tabs" active-color="#3CBACF" bar-width="60" bg-color="transparent"
					height="80" is-scroll :current="tabIndex" @change="onChange"></u-tabs>
			</view>
		</u-sticky>
		<!-- <view class="" :style="{'width':'100%', 'height': tabsHeight + 'rpx' }" /> -->

		<view class="fx-kong-kim" v-if="tabIndex === 0 && KongKim && KongKim.length > 0">
			<block v-for="(item , index) in KongKim">
				<view class="kong-kim" :style="{backgroundImage: `url(${item.icon})` }" :key="`fx_KongKim_${index}`"
					@click.stop=" $openPage(item)">
					{{item.name}}
				</view>
			</block>
		</view>

		<view class="card-box">
			<!-- <zw-waterfall :list="tabs[0].list || []"></zw-waterfall> -->
			<template v-if="tabs && tabs.length > 0">
				<block v-for="(t , i ) in tabs">
					<u-waterfall v-show="tabIndex === i" v-model="tabs[i].list">
						<template v-slot:left="{leftList}">
							<view class="card-left-item" v-for="(item, index) in leftList" :key="`left_${index}`">
								<discovery :data-val="item" />
							</view>
						</template>
						<template v-slot:right="{rightList}">
							<view class="card-right-item" v-for="(item, index) in rightList" :key="`right_${index}`">
								<discovery :data-val="item" />
							</view>
						</template>
					</u-waterfall>
				</block>
			</template>
		</view>
		<loadMore v-if="tabs[tabIndex].list.length > 0 || tabs[tabIndex].loadingStatus === 'loading' "
			:status="tabs[tabIndex].loadingStatus">
		</loadMore>

		<view class="empty-data"
			v-if="(!tabs[tabIndex].list || tabs[tabIndex].list.length===0) && tabs[tabIndex].loadingStatus=== 'noMore' ">
			<EmptyDate />
		</view>
	</view>
</template>

<script>
	import {
		getAPPList,
		getDiscover,
		newsClassify,
		getInformationFindPage,
		getThemeModule
	} from "@/api/government.js";
	import {
		getYiChangNews,
		openYiChangNews
	} from "../government/conmon.js"
	let app = getApp();
	export default {
		data() {
			return {
				tabsHeight: 100,
				config: {
					back: false,
					title: '发现',
					color: '#fff',
					// backgroundColor: [1, '#fff'],
					backgroundColor: 'transparent',
					statusBarFontColor: '#fff'
				},
				tabs: [{
					list: []
				}],
				KongKim: [],
				allLoading: false,
				tabIndex: 0,
				dataList: [],
				pageSize: 10,
				waterfallKey: 1,
				banner:{},
				liveList:[],
				navHeight:0
			}
		},
		onLoad() {
			const {
				statusBarHeight,
				navHeight
			} = app.globalData;
			// #ifdef APP
			this.navHeight = 2*(statusBarHeight + navHeight-10);
			// #endif
			// let data = uni.getStorageSync('discoveryPage');
			// if (data) {
			// 	this.tabs[0].list = data.rows
			// }
			this.init();
			this.getTheme();
		},
		onShow() {

		},
		onReachBottom() {
			if (this.tabs[this.tabIndex].loadingStatus === "more") {
				this.getPage(this.tabIndex);
			}
		},
		onPullDownRefresh() {
			this.init();
		},
		methods: {
			setKeys() {
				return new Date().getTime() + Math.random();
			},
			init(tag) {
				this.pageNum = 0;
				this.tabs = [{
					name: '推荐',
					list: this.tabs[0].list,
					pageNum: 0,
					key: this.setKeys(),
					loadingStatus: '', //more|loading|noMore
				}];
				this.tabIndex = 0;
				this.getKongKim();
				this.getLabel(tag);
				this.getLiveList();
			},
			getLiveList(){
					this.$yghttp.get('/live/liveInfo/list').then(res => {
						this.liveList = res.data;
					})
			},
			goLive(item){
				uni.navigateTo({
					url:"/pages/government/live?liveId="+item.liveId
				})
			},
			getKongKim() {
				getAPPList(this.$keys.FX_KONGKIM).then(res => {
					this.KongKim = res.data || []
				}).catch(() => {})

			},
			getLabel(tag) {
				newsClassify({
					informationChannel: this.$keys.information_discover
				}).then(res => {
					const data = res.data || [];
					const tabs = data.map((el, index) => {
						el.name = el.informationTypeName;
						el.list = index == 0 ? this.tabs[0].list : [];
						el.pageNum = 0;
						el.loadingStatus = '';
						el.key = this.setKeys()
						return el;
					});
					this.tabs = this.tabs.concat(tabs);
					let obj = {
						name: '宜昌发布',
						list: [],
						pageNum: 0,
						loadingStatus: ""
					}
					this.tabs.splice(1, 0, obj);
					this.tabs.forEach((el, index) => {
						this.getPage(index)
					})
				})
			},
			getTheme() {
				getThemeModule('discovery_Page').then(res => {
					this.banner = res.data.themeModuleVoList&&res.data.themeModuleVoList.length>0?res.data.themeModuleVoList[0]:{};
				});
			},
			getPage(tabIndex) {
				if (this.tabs[tabIndex].pageNum <= 0) {
					this.tabs[tabIndex].pageNum = 0;
					// this.tabs[tabIndex].list = [];
					this.tabs[tabIndex].loadingStatus = '';
				}
				if (this.tabs[tabIndex].loadingStatus === 'noMore' || this.tabs[tabIndex].loadingStatus === 'loading') {
					return
				};
				this.allLoading = true;
				this.$nextTick(() => {
					this.tabs[tabIndex].loadingStatus = 'loading';
					this.tabs[tabIndex].pageNum++;
					const parms = {
						pageNum: this.tabs[tabIndex].pageNum,
						pageSize: this.pageSize
					}
					if (this.tabs[tabIndex].hasOwnProperty('informationTypeId')) {
						parms.informationTypeId = this.tabs[tabIndex].informationTypeId
					}
					setTimeout(() => {
						// let apiFun=tabIndex==1?getYiChangNews:getInformationFindPage
						if (tabIndex != 1) {
							getInformationFindPage(parms).then(res => {
								try {
									if (res.code === 200) {
										if (this.tabs[tabIndex].pageNum <= 0) {
											this.tabs[tabIndex].list = [];
										}
										const arr = this.tabs[tabIndex].list.concat(res.rows ||
									[]);
										this.$set(this.tabs[tabIndex], 'list', arr)
									};
								} catch (e) {}

								this.$forceUpdate()
								this.tabs[tabIndex].loadingStatus = this.$mUtil.pagination(res
									.total,
									this.tabs[tabIndex].pageNum, this.pageSize)
							}).catch(err => {
								this.tabs[tabIndex].pageNum--;
								this.tabs[tabIndex].loadingStatus = 'noMore';
							}).finally(() => {
								// this.status = 'noMore'
								this.allLoading = false;
								uni.stopPullDownRefresh();
							})
						} else {
							getYiChangNews(this.pageSize, this.tabs[1].pageNum, true).then(res => {
								try {
									if (this.tabs[tabIndex].pageNum <= 0) {
										this.tabs[tabIndex].list = [];
									}
									const arr = this.tabs[tabIndex].list.concat(res.data || []);
									this.$set(this.tabs[tabIndex], 'list', arr)
								} catch (e) {}

								this.$forceUpdate()
								this.tabs[tabIndex].loadingStatus = this.$mUtil.pagination(res
									.total,
									this.tabs[tabIndex].pageNum, this.pageSize)
							}).catch(err => {
								this.tabs[tabIndex].pageNum--;
								this.tabs[tabIndex].loadingStatus = 'noMore';
							}).finally(() => {
								// this.status = 'noMore'
								this.allLoading = false;
								uni.stopPullDownRefresh();
							})
						}
					}, 500)
				})
			},
			onChange(e) {
				this.tabIndex = e;
				if (this.tabs[e].pageNum >= 1) return;
				this.getPage(this.tabIndex);
			}
		}
	}
</script>
<style>
	page {
		/* background-color: #F9F9F9; */
		background: #fff;
		padding-bottom: 30rpx;
	}
</style>
<style lang="scss" scoped>
	/deep/.hx-navbar__fixed {
		background: linear-gradient(180deg, #68d1be, #41b8cd);
	}

	.itemBox {
		padding: 40rpx 30rpx 0rpx;

		.itemBox_title {
			display: flex;
			font-size: 34rpx;
			font-weight: 600;
			color: #1A1A1A;

			>image {
				width: 16rpx;
				height: 50rpx;
				margin-right: 10rpx;
			}
		}

		.itemBox_banner {
			width: 690rpx;
			height: 200rpx;
			margin-top: 20rpx;
			border-radius: 16rpx;
		}

		.itemBox_videos {
			display: flex;
			flex-wrap: wrap;
			margin-top: 20rpx;
			border-radius: 16rpx;
			overflow: hidden;

			>view {
				position: relative;
				margin-right: 20rpx;
				margin-bottom: 10rpx;

				&:nth-child(3n) {
					margin-right: 0 !important;
				}

				.itemBox_videos_img {
					width: 217rpx;
					height: 316rpx;
					border-radius: 16rpx;
				}

				.itemBox_videos_switch {
					width: 98rpx;
					height: 98rpx;
					position: absolute;
					top: 50%;
					left: 50%;
					margin-left: -22.5%;
					margin-top: -22.5%;
				}

				.itemBox_videos_title {
					width: 100%;
					font-size: 28rpx;
					color: #FFFFFF;
					text-align: center;
					position: absolute;
					bottom: 30rpx;
					left: 0;
				}

				.itemBox_videos_type {
					width: 82rpx;
					height: 41rpx;
					opacity: 0.9;
					background: #20c24a;
					border-radius: 0rpx 16rpx 0rpx 16rpx;
					font-size: 22rpx;
					color: #FFFFFF;
					text-align: center;
					line-height: 41rpx;
					position: absolute;
					top: 0;
					right: 0;
				}

				.itemBox_videos_title1 {
					width: 217rpx;
					font-size: 28rpx;
					color: #141414;
					font-weight: 500;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				.itemBox_videos_tig {
					width: 217rpx;
					font-size: 26rpx;
					color: #808080;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}
		}
	}

	.tabs-box {
		width: 100%;
		// position: fixed;
		// left: 0;
		// right: 0;
		// z-index: 1;
		display: flex;
		flex-direction: row;
		// padding: 0 30rpx;
		background-color: #fff;
		border-bottom: 1px solid #e6e6e6;
		font-size: 0;
		align-items: center;
		padding: 0 30rpx;
		.tabs-box_title{
			display: flex;
			align-items: center;
			padding-right: 20rpx;
			>image {
				width: 16rpx;
				height: 50rpx;
				margin-right: 10px;
			}
			
			>text {
				font-size: 17px;
				font-weight: 600;
				color: #52C3C6;
			}
		}

		.utabs {
			width: calc(100% - 170rpx);
		}

		.tab-item {
			// width: 104rpx;
			padding: 0 22rpx;
			height: 100%;
			display: flex;
			align-items: center;
			font-size: 36rpx;
			margin-left: 40rpx;
			font-size: 30rpx;
			font-family: Microsoft YaHei, Microsoft YaHei-Regular;
			font-weight: 400;
			color: #999999;

			&:first-child {
				margin-left: 0;
				position: relative;
				color: #3CBACF;
				font-family: Microsoft YaHei, Microsoft YaHei-Bold;
				font-weight: 700;

				&::before {
					content: '';
					position: absolute;
					left: 50%;
					transform: translateX(-50%);
					bottom: 0;
					right: 0;
					width: 50%;
					height: 6rpx;
					border-radius: 3rpx;
					background-color: #3CBACF;
				}
			}
		}
	}

	.card-box {
		padding: 0 20rpx;
		background: linear-gradient(180deg,#ffffff, #f5f5f5);
		margin-top: 10rpx;
		/deep/ .u-column {
			width: 50%;
		}

		// display: flex;
		// flex-direction: row;
		// justify-content: space-between;
		// align-items: stretch;
		// flex-wrap: wrap;
		.card-left-item {
			padding-right: 10rpx;
		}

		.card-right-item {
			padding-left: 10rpx;
		}

	}



	.fx-kong-kim {
		width: 100%;
		display: flex;
		align-items: stretch;
		flex-wrap: wrap;
		padding: 20rpx;

		.kong-kim {
			flex-shrink: 0;
			width: calc((100% - 40rpx) / 3);
			height: 106rpx;
			background-repeat: no-repeat;
			background-size: 100% 100%;
			margin: 0 20rpx 10rpx 0;
			display: flex;
			justify-content: center;
			align-items: center;

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

	/deep/ .u-tab-bar {
		bottom: -6rpx;
	}
	/deep/ .u-tab-item{
		margin-top: 10rpx;
	}
</style>