horzi_rai_wxa/pages/reportForm/reportForm.vue

<template>
	<view class="reportForm-container">
		<!-- tabs -->
		<!-- tabs -->
		<view class="index-fixed">
			<view class="index-header">
				<input type="text" placeholder="搜索您想要的报告" placeholder-class="sea_ipt_placeholder" class="sea_ipt"
					v-model="searchTxt" disabled @click="goSearch" />
				<icon type="search" size="15" class="search_ico" />
			</view>
			<view class="tab-cont">
				<scroll-view scroll-x="true" scroll-with-animation class="scroll-tab" :scroll-into-view="'_'+tabIndex">
					<block v-for="(item, index) in tabBars" :key="item.ChartPermissionId">
						<view :id="'_'+index" class="scroll-tab-item"
							:class="{ active: tabAct_id === item.ChartPermissionId }"
							@click.stop="toggleTab(item,index)">
							{{item.PermissionName}}
							<image src="@/static/img/border_act.png" mode="" class="border_act"
								v-if="tabAct_id === item.ChartPermissionId"></image>
						</view>
					</block>
				</scroll-view>

			</view>
			<view class="lucency" v-if="tabBars.length>6"></view>
		</view>
		<!-- 内容 -->
		<view class="strategy" v-if="strategyIndex==4">
			<view class="tab-cont-two">
				<scroll-view scroll-x="true" scroll-with-animation class="scroll-tab-tow">
					<block v-for="(item, index) in tabBarsTow" :key="item.CategoryId">
						<view :id="'_'+index" class="scroll-tab-item"
							:class="{ active: tabAct_idTwo == item.CategoryId }" @click.stop="toggleTabTwo(item,index)">
							{{item.MatchTypeName}}
							<text class="reg-text" v-if="item.IsRed"></text>
						</view>
					</block>
				</scroll-view>
			</view>
			<view class="row">

			</view>
			<!-- 子组件 -->
			<strategy :strategyIndexTwo="strategyIndexTwo" :pageNumFather='pageNumFather' :matchTypeName="matchTypeName"
				:tabAct_idTwo="tabAct_idTwo" :isNum="isNum" :isSwitchover="isSwitchover" @hideIsred="hideIsred" />
		</view>
		<!-- </view> -->
		<view class="industrial_eport_one" v-else>
			<!-- 行业报告 -->
			<view class="industry" v-if="tradeList">
				<view style="height: 20rpx;"></view>
				<view class="industry-top">
					<view class="img-top-box">
						<image src="@/static/img/industry-ico.png"></image>
						<text>行业综述</text>
					</view>
					<view>

					</view>
				</view>
				<view class="industry-box" @click="isClickHandle(item.CategoryId)" v-for="item in tradeList"
					:key="item.CategoryId">
					<view class="box-left">
						{{item.MatchTypeName}}
						<text v-if="item.IsRed"></text>
					</view>
					<view class="box-right">
						<text>{{item.UpdateTime}}更新</text>
						<u-icon name="arrow-right" color="#BDBDBD" size="34"></u-icon>
					</view>
				</view>
			</view>
			<!-- 产业报告 -->
			<view class="industry">
				<view style="height: 12rpx;" v-if="!tradeList"></view>
				<view class="industry-top industry-sticky">
					<view class="img-top-box">
						<image src="@/static/img/property_ico.png" style="height: 50rpx;"></image>
						<text class="text-sub">细分产业</text>
					</view>
					<van-dropdown-menu active-color="#333333">
						<van-dropdown-item id="menuItem" @open="isscroll" :title="overallArrangementName">
							<view class="menu-items-tow">
								<view class="items-tow" @click="pitchClick(item,index)" v-for="(item,index) in pitchOn"
									:key="item.id">
									<view>
										<u-icon v-show="pitchOnId==item.id" name="checkbox-mark" color="#2C83FF"
											size="24"></u-icon>
									</view>
									<text :class="pitchOnId==item.id?'items-act':''">{{item.name}}</text>
								</view>
							</view>
							<view class="menu-dashed">

							</view>
							<view class="menu-items">
								<view class="menu-items-box" @click="overallBtn(index,item)"
									v-for="(item,index) in overallArrangement" :key="item.id">
									<view class="items-box">
										<u-icon v-show="item.isShow" name="checkbox-mark" color="#2C83FF" size="24">
										</u-icon>
									</view>
									<text>{{item.name}}</text>
								</view>
							</view>
							<view class="replacement-box">
								<view class="replacement">
									<text @click="replacementBtn" class="replacement-box">重置</text>
									<text @click="replacementConfirm">确定</text>
								</view>
							</view>
						</van-dropdown-item>
					</van-dropdown-menu>
				</view>
				<!-- 需要循环的地方 -->
				<view class="forindustry" v-for="item in industryList" :key="item.IndustrialManagementId">
					<!-- 火锅底料这个位置 -->
					<view class="industry-box industry-content">
						<view class="industry-box-left">
							<image src="@/static/img/top_ico.png" v-if="item.IsTop"
								@click="isOverhead(item.IndustrialManagementId)"></image>
							<image src="@/static/img/top_no_ico.png" v-else
								@click="isOverhead(item.IndustrialManagementId)"></image>
						</view>
						<view class="industry-box-right" @click="goIndustryReport(item.IndustrialManagementId)">
							<view class="ndustry-box-read">
								<text>{{item.IndustryName}}</text>
								<text v-if="item.IsRed" class="read"></text>
							</view>
							<view class="ndustry-box-arrow">
								<text class="ndustry-box-text">{{item.UpdateTime}}更新</text>
								<u-icon name="arrow-right" color="#BDBDBD" size="34"></u-icon>
							</view>
						</view>
					</view>
					<view class="content-box" v-if="item.IndustrialSubjectList.length>6">
						<u-read-more :toggle="true" :show-height="item.IndustrialSubjectList.length>6 ? 140 :150"
							:shadow-style="shadowStyle" close-text="展开" color="#D1D1D1">
							<view class="read-more">
								<view v-for="val in item.IndustrialSubjectList" :key="val.IndustrialSubjectId"
									@click="goIndustryReport(item.IndustrialManagementId)" class="text-box">
									{{val.SubjectName}}
								</view>
							</view>
						</u-read-more>
					</view>
					<view class="content-box" v-else @click="goIndustryReport(item.IndustrialManagementId)">
						<view class="read-more">
							<view v-for="val in item.IndustrialSubjectList" :key="val.IndustrialSubjectId"
								class="text-box">{{val.SubjectName}}</view>
						</view>
					</view>
				</view>
				<u-loadmore :status="status" icon-type="flower" :load-text="loadText" margin-top="20"
					v-if="totalPage>1" />
			</view>
		</view>
	</view>
</template>

<script>
	import strategy from "./components/strategy.vue"
	import {
		Throttle
	} from '@/config/util.js'
	import {
		Reports
	} from '@/config/api.js'
	let app = getApp()
	export default {
		components: {
			strategy
		},
		data() {
			return {
				tabAct_id: null,
				tabAct_idTwo: null,
				tabBars: [],
				pageNumFather: null,
				shadowStyle: {
					backgroundImage: "none"
				},
				tabBarsTow: [],
				pitchOn: [{
					name: '按最近更新排序',
					id: 'NewTime'
				}, {
					name: '按推荐关注排序',
					id: 'Recommend',
				}],
				pitchOnId: 'NewTime',
				//pitchOnName: '按最近更新排序',
				isNum: 1,
				strategyIndex: null,
				strategyIndexTwo: 0,
				isSwitchover: 1,
				tradeList: [],
				OrderColumn: '',
				industryList: [],
				loadText: {
					loadmore: '上拉加载更多',
					loading: '加载中',
					nomore: '已经到底了'
				},
				refresh: false, //正在下拉
				page_no: 1,
				pageSize: 10,
				status: 'loadmore',
				haveData: true,
				totalPage: '',
				matchTypeName: '',
				overallArrangement: [{
					name: '新布局产业',
					id: '1',
					isShow: false
				}, {
					name: '深度研究产业',
					id: '2',
					isShow: false
				}, ],
				overallArrangementId: '',
				overallArrangementName: '按最近更新排序',
				isScrollShow: false
			}
		},
		onLoad(option) {
			this.tabAct_id = option.tab || null
			if (option.tabs !== 'null' && option.tabs) {
				this.strategyIndex = 4
				this.tabAct_idTwo = option.tabs
			}
			this.getClassify()
		},
		computed: {},
		watch: {
			//监听tabs的变化
			tabAct_id: {
				handler() {
					if (this.strategyIndex == 4) {
						this.getstrategyAll()
					} else {
						this.tabAct_idTwo = null
					}
					if (this.tabAct_id) {
						this.OrderColumn = 'NewTime'
						this.pitchOnId = 'NewTime'
						this.overallArrangementName = '按最近更新排序'
						this.overallArrangementId = '' //待完善
						//this.pitchOnName = '按最近更新排序'
						this.page_no = 1;
						this.refresh = true;
						this.getIndustryList()
						this.getTradeList()
					}
					if (this.isScrollShow) {
						this.selectComponent('#menuItem').toggle(false);
						//this.selectComponent('#menuPitch').toggle(false);
						this.isScrollShow = false
					}
					this.overallArrangement.forEach(key => key.isShow = false)
				},
				immediate: true
			}
		},
		methods: {
			//获取一级事件
			getClassify() {
				Reports.getClassify().then(res => {
					this.tabBars = res.Data.List
					if (!this.tabAct_id) {
						this.tabAct_id = res.Data.List[0].ChartPermissionId
					}

				})
			},
			//获取二级事件
			getstrategyAll() {
				Reports.getstrategyAll().then(res => {
					this.tabBarsTow = res.Data.List
					if (!this.tabAct_idTwo) {
						this.tabAct_idTwo = res.Data.List[0].CategoryId
					}
					this.matchTypeName = res.Data.List[0].MatchTypeName
				})
			},
			//tabs切换事件
			toggleTab(item, index) {
				this.strategyIndex = index
				if (this.tabAct_id !== item.ChartPermissionId) {
					this.tabAct_id = item.ChartPermissionId;
					this.pageNum = 1;
					uni.pageScrollTo({
						scrollTop: 0,
						duration: 0,
					});
				}
			},
			//tabs切换二级事件
			toggleTabTwo(item, index) {
				this.matchTypeName = item.MatchTypeName
				this.strategyIndexTwo = index
				if (this.tabAct_idTwo !== item.CategoryId) {
					this.tabAct_idTwo = item.CategoryId;
					this.pageNum = 1;
					uni.pageScrollTo({
						scrollTop: 0,
						duration: 0,
					});
				}
			},
			//点击产业报告的筛选条件
			pitchClick(item) {
				this.pitchOnName = item.name
				this.OrderColumn = item.id
				if (this.pitchOnId !== item.id) {
					this.pitchOnId = item.id;
				}
			},
			//获取报告所有品种接口
			getTradeList() {
				Reports.getTradeList({
					ChartPermissionId: this.tabAct_id
				}).then(res => {
					if (res.Ret == 200) {
						if (res.Data.List) {
							this.tradeList = res.Data.List
						} else {
							this.tradeList = null
						}
					}
				})
			},
			//获取产业报告所有品种接口
			getIndustryList() {
				Reports.getIndustryList({
					ChartPermissionId: this.tabAct_id,
					OrderColumn: this.OrderColumn,
					PageSize: this.pageSize,
					CurrentIndex: this.page_no,
					IsNewLabel: this.overallArrangementId.includes(1) ? '1' : '0',
					IsDeepLabel: this.overallArrangementId.includes(2) ? '1' : '0'
				}).then(res => {
					// this.industryList=res.Data.List
					this.status = this.page_no < res.Data.Paging.Pages ? 'loadmore' : 'nomore';
					this.totalPage = res.Data.Paging.Pages; //总页数
					if (this.page_no === 1) {
						this.industryList = res.Data.List || [];
						this.haveData = this.industryList.length ? true : false
						if (this.refresh) {
							uni.stopPullDownRefresh();
							this.refresh = false;
						}
					} else {
						this.industryList = this.industryList.concat(res.Data.List)
					}

				})
			},
			//跳转季度策略
			isClickHandle(id) {
				uni.navigateTo({
					url: '/pages/industrialReport/industrialReport?id=' + id
				});
			},
			//跳转产业报告
			goIndustryReport(id) {
				uni.navigateTo({
					url: '/pages/IndustryReport/IndustryReport?id=' + id
				});
			},

			//点击顶置的图标
			isOverhead(id) {
				Reports.postToptt({
					IndustrialManagementId: id
				}).then(res => {
					if (res.Ret === 200) {
						this.page_no = 1;
						this.refresh = true;
						this.industryList = []
						this.getIndustryList()
						uni.showToast({
							title: res.Msg,
							duration: 2000
						});
					}
				})
			},
			hideIsred(is) {
				this.tabBarsTow[this.strategyIndexTwo].IsRed = is
			},
			/* 新布局产业选项*/
			overallBtn(index, item) {
				this.overallArrangement.forEach(key => {
					if (key.id == item.id) {
						key.isShow = !key.isShow
					}
				})

			},
			/* 新布局产业选项确定按钮 */
			replacementConfirm() {
				const arr = []
				this.overallArrangement.forEach(key => {
					if (key.isShow) {
						arr.push(key.id)
					}
				})
				this.overallArrangementId = arr.join(',')
				this.overallArrangementName = this.pitchOnName
				this.page_no = 1;
				this.status = 'loadmore'
				this.getIndustryList()
				this.selectComponent('#menuItem').toggle();
			},
			/* 新布局产业选项重置按钮 */
			replacementBtn() {
				this.overallArrangement.forEach(key => key.isShow = false)
				this.overallArrangementName = '按最近排序更新'
			},
			/* 判断页面滚动 */
			isscroll() {
				this.isScrollShow = true
			},
			/* 搜索 */
			goSearch() {
				this.$store.dispatch('checkHandle').then(res => {
					app.globalData.isAuth = res.IsAuth;
					app.globalData.isBind = res.IsBind;
					if ((!res.IsAuth) && (!res.IsBind)) { //已授权已绑定
						uni.navigateTo({
							url: '/pages/reportSearch/reportSearch',
						});
					} else if (res.IsAuth) { //未授权
						uni.navigateTo({
							url: '/pages/authGuide/authGuide'
						})
					} else if (res.IsBind && !res.IsAuth) { //已授权未绑定
						uni.navigateTo({
							url: '/pages/login/login'
						})
					}
				})
			},
		},
		/* 触底 */
		onReachBottom: Throttle(function() {
			this.isNum++
			if (this.status === 'nomore') return;
			this.status = 'loading';
			this.page_no++;
			this.getIndustryList()
		}),
		/* 下拉刷新 */
		onPullDownRefresh: Throttle(function() {
			if (this.strategyIndex == 4) {
				this.pageNumFather = 1
			} else {
				this.industryList = []
				this.pageNumFather = null
				this.page_no = 1;
				this.refresh = true;
				this.getIndustryList()
				this.getTradeList()
			}
			wx.stopPullDownRefresh();
		}),
		onShow() {
			if (this.tabAct_id) {
				this.getTradeList()
			}

		},
		/**
		 * 用户点击分享
		 */
		onShareAppMessage: function(res) {
			console.log(this.tabAct_id);
			return {
				title: "报告",
				path: '/pages/reportForm/reportForm?tab=' + this.tabAct_id + '&tabs=' + this.tabAct_idTwo,
				success: (res) => {},
				fail: (err) => {}
			}
		},
		/**
		 *监听页面滚动
		 */
		onPageScroll() {
			if (this.isScrollShow) {
				this.selectComponent('#menuItem').toggle(false);
				//this.selectComponent('#menuPitch').toggle(false);
				this.isScrollShow = false
			}

		}
	}
</script>

<style scoped lang="scss">
	.reportForm-container {
		background-color: #f6f6f6;
		height: 100vh;

		.index-fixed {
			width: 750rpx;
			position: fixed;
			left: 0;
			top: 0;
			z-index: 999;

			.index-header {
				background-color: #fff;
				padding: 32rpx 34rpx;
				position: relative;

				.sea_ipt_placeholder {
					color: #8D8D8D;
					opacity: 0.7;
				}

				.sea_ipt {
					width: 100%;
					height: 70rpx;
					font-size: 30rpx;
					color: #707070;
					background-color: #F6F6F6;
					padding: 0 34rpx 0 70rpx;
					border-radius: 70rpx;
					border: 1rpx solid #E5E5E5;
				}

				.search_ico {
					display: block;
					position: absolute;
					color: #8D8D8D;
					left: 60rpx;
					top: 50%;
					z-index: 100;
					transform: translateY(-50%);
				}
			}

			.tab-cont {
				padding: 0 26rpx;
				background-color: #fff;
				font-size: 32rpx;

				.scroll-tab {
					width: 100%;
					white-space: nowrap;
				}

				.scroll-tab-item {
					// flex-grow: 1;
					text-align: center;
					display: inline-block;
					padding: 0 8rpx 30rpx 8rpx;
					margin-right: 70rpx;
					border-bottom: 8rpx solid transparent;
					position: relative;

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

					&.active {
						border-bottom: none;
						color: #2C83FF;
						font-weight: 700;
					}

					.border_act {
						width: 100%;
						height: 8rpx;
						position: absolute;
						bottom: 0;
						left: 0;
					}
				}
			}
		}

		.forindustry {
			margin-bottom: 10rpx;
		}

		.industrial_eport_one {
			padding-top: 180rpx;
			background-color: #f6f6f6;
			padding-bottom: 10rpx;
		}

		.strategy {
			margin-top: 20rpx;
			height: 65rpx;
			line-height: 65rpx;
			background-color: #fff;

			.row {
				width: 100%;
				height: 170rpx;
				background-color: #f6f6f6;
			}

			.tab-cont-two {
				position: fixed;
				top: 210rpx;
				left: 0;
				width: 100%;
				z-index: 99;
				height: 100rpx;
				background-color: #fff;
				padding: 0 30rpx;

				.scroll-tab-tow {
					padding-top: 20rpx;
					width: 100%;
					white-space: nowrap;

					.scroll-tab-item {
						position: relative;
						display: inline-block;
						height: 54rpx;
						line-height: 54rpx;
						padding: 0 23rpx;
						background: #F7F7F7;
						border-radius: 27px;
						color: #999999;
						margin-right: 46rpx;

						.reg-text {
							position: absolute;
							top: -6rpx;
							right: -8rpx;
							width: 14rpx;
							height: 14rpx;
							background-color: #FF0000;
							border-radius: 50%;
						}
					}

					.active {
						color: #FFFFFF !important;
						background-color: #2C83FF !important;
					}
				}
			}
		}

		.industry {
			margin-top: 20rpx;

			.industry-sticky {
				position: sticky;
				top: 210rpx;
				z-index: 99;
			}

			.industry-top {
				display: flex;
				justify-content: space-between;
				background-color: #fff;
				height: 90rpx;
				padding: 0 30rpx;
				color: #333333;
				font-weight: 700;
				font-size: 32rpx;
				line-height: 90rpx;
				overflow: hidden;

				.img-top-box {
					display: flex;
					align-items: center;

					image {
						width: 44rpx;
						height: 44rpx;
						margin-right: 16rpx;
					}
				}

				.menu-items {
					background-color: #F8F8FA;
					display: flex;
					padding: 0rpx 30rpx 20rpx;

					.menu-items-box {
						flex: 1;
						display: flex;
						font-size: 28rpx;
						font-weight: 400;

						.items-box {
							width: 40rpx;
						}
					}
				}

				.menu-dashed {
					margin: 0 auto;
					width: 682rpx;
					border-bottom: 3rpx dashed #999999;
				}

				.menu-items-tow {
					display: flex;
					padding: 30rpx 30rpx 20rpx;
					font-size: 28rpx;
					color: #333333;
					font-weight: 400;
					background-color: #F8F8FA;

					.items-tow {
						display: flex;
						flex: 100%;

						view {
							width: 40rpx;
						}
					}

					.items-act {
						font-weight: bold;
					}
				}

				.replacement-box {
					background-color: #F8F8FA;
				}

				.replacement {
					margin: 0rpx 30rpx 20rpx;
					display: flex;
					background-color: #2C83FF;
					opacity: 1;
					height: 60rpx;
					line-height: 58rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #FFFFFF;
					border-radius: 30rpx;

					text {
						flex: 1;
						text-align: center;

					}

					.replacement-box {
						border: 1rpx solid #2C83FF;
						opacity: 1;
						color: #2C83FF;
						background: #FFFFFF;
						border-radius: 28rpx 0rpx 28rpx 28rpx;
					}
				}
			}

			.industry-box {
				margin-top: 5rpx;
				background-color: #fff;
				height: 90rpx;
				line-height: 90rpx;
				padding: 0 30rpx;
				display: flex;
				justify-content: space-between;
				color: #000000;
				font-size: 30rpx;

				.box-left {
					position: relative;
					// width: 150rpx;
					padding-right: 30rpx;
					height: 90rpx;

					text {
						position: absolute;
						top: 20rpx;
						right: 5rpx;
						width: 14rpx;
						height: 14rpx;
						background-color: #f00;
						border-radius: 50%;
					}

				}

				.box-right {
					color: #999999;
					font-size: 26rpx;
					// width: 45%;
					display: flex;
					justify-content: flex-end;
					// justify-content: space-between;
					text-align: right;
					align-items: right;

					u-icon {
						padding-left: 15rpx;
					}
				}
			}

			.industry-content {
				padding-left: 40rpx;
				vertical-align: middle;
				display: flex;
				margin-bottom: 3rpx;

				image {
					padding-right: 20rpx;
					width: 24rpx;
					height: 30rpx;
				}

				.industry-box-left {
					width: 48rpx;

					image {
						vertical-align: middle;
						margin-top: -8rpx;
						padding: 5rpx 20rpx 5rpx 0;
					}
				}

				.industry-box-right {
					width: 100%;
					display: flex;
					justify-content: space-between;

					.ndustry-box-read {
						position: relative;

						.read {
							position: absolute;
							top: 20rpx;
							right: -20rpx;
							width: 14rpx;
							height: 14rpx;
							background-color: #FF0000;
							border-radius: 50%;
						}
					}

					.ndustry-box-arrow {
						display: flex;

						.ndustry-box-text {
							font-size: 26rpx;
							color: #999999;
							padding-right: 20rpx;
						}
					}
				}

			}

			.content-box {
				background-color: #fff;
				padding: 20rpx 25rpx 0;

				.img-box {
					display: flex;
					height: 90rpx;
					line-height: 90rpx;
					box-sizing: border-box;
					width: 100%;
					vertical-align: middle !important;

					image {
						padding-top: 18rpx;
						width: 44rpx;
						height: 44rpx;
						vertical-align: middle;
					}

					text {
						display: inline-block;
						padding-left: 16rpx;
						vertical-align: middle !important;
					}
				}
			}
		}

		.read-more {
			margin-left: 60rpx;
			display: flex;
			flex-wrap: wrap;

			.text-box {
				// display: inline-block;
				margin-bottom: 27rpx;
				margin-right: 40rpx;
				padding: 0;
				font-size: 24rpx;
				color: #408FFF;
				width: 170rpx;
				height: 46rpx;
				line-height: 46rpx;
				text-align: center !important;
				background: url(../../static/img/report_bg.png) no-repeat;
				background-size: 100% 100%;
				text-indent: 0em;
			}
		}

		/deep/ .van-dropdown-menu {
			background-color: #fff;
			box-shadow: none !important;
			// align-items: center;
			padding-top: 20rpx;
		}

		/deep/ .van-ellipsis {
			color: #333333 !important;
			font-size: 24rpx;
			font-weight: 400;
		}

		/deep/ .van-dropdown-menu__item {
			// width: 190rpx;
			padding-right: 20rpx;
			margin-left: 20rpx;
			height: 51rpx;
			border-radius: 26rpx;
			background: #F8F8FA;
		}

		/deep/.van-dropdown-item {
			margin-top: -10rpx;
		}
	}

	.text-bottom-none {
		width: 100%;
		text-align: center;
	}
</style>