horzi_rai_wxa/pages/index/index.vue

<template>
	<view class="container Index-container">
		<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="scrollMove"
                :scroll-left="scrollLeft"
				: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>
					<view class="limit-box" v-if="limitIsShow">
						<image class="limit-img" src="../../static/img/limit_icon.png" mode=""></image>
					</view>
				</scroll-view>
				
			</view>
		</view>
		<block v-if="haveData">	
			<view class="data-cont">
				<view class="report-ul">
					<view class="report-item" v-for="(report,index) in dataList" :key="index" v-if="index%2 === 0" @click="goDetail(report)">
						<!-- <view class="item-content"><u-parse :html="report.Body"></u-parse></view> -->
						<view class="item-content">{{report.Body}}</view>
						<view class="line"></view>
						<text class="item-title">{{report.Title}}</text>
						<view class="item-abstract text_twoLine" v-if="report.ExpertBackground">
							<image src="@/static/img/report_ico.png" class="report_ico"></image>
							{{report.ExpertBackground}}
						</view>
						<view class="item-createtime">
							<text>{{report.PublishDate}}</text>
							<view class="item-examine">
								<image src="../../static/img/examine_icon.png" v-if="report.IsResearch"></image>
								<text v-if="report.IsResearch">{{report.Pv}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="report-ul">
					<view class="report-item" v-for="(report,index) in dataList" :key="index"  v-if="index%2 !== 0" @click="goDetail(report)">
						<!-- <view class="item-content"><u-parse :html="report.Body"></u-parse></view> -->
						<view class="item-content">{{report.Body}}</view>
						<view class="line"></view>
						<text class="item-title">{{report.Title}}</text>
						<view class="item-abstract text_twoLine" v-if="report.ExpertBackground">
							<image src="@/static/img/report_ico.png" class="report_ico"></image>
							{{report.ExpertBackground}}
						</view>
						<view class="item-createtime">
							<text>{{report.PublishDate}}</text>
							<view class="item-examine">
								<image src="../../static/img/examine_icon.png" v-if="report.IsResearch"></image>
								<text v-if="report.IsResearch">{{report.Pv}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<u-loadmore :status="status" icon-type="flower" :load-text="loadText" margin-top="20"/>
		</block>
		<view class="nodata" v-else-if="haveData===false" style="padding-top: 400rpx;">
			<image src="@/static/img/nodata.png" mode="" class="nodata_ico"></image>
			<text>暂时没有行业数据</text>
		</view>
		<image class="advice_ico" src="https://hzstatic.hzinsights.com/cygx/czbk/advice_ico.png" @click="adviceHandle"></image>
	</view>
</template>

<script>
import {Home} from '@/config/api.js';
import { Throttle } from '@/config/util.js'
let app = getApp()
export default {
	data() {
		return {
			refresh:false,
			pageSize:10,//条数
			pageNum:1,//页码
			haveMore:true,//是否有更多数据
			haveData:null,//是否有数据
			tabAct_id:0,
			//数据列表
			dataList:[],
			// tab
			tabBars:[],	
			status:'loadmore',
			loadText: {
				loadmore: '上拉加载更多',
				loading: '加载中',
				nomore: '已经到底了'
			},
			totalPage:'',
			limitIsShow:false,//限免的隐现
            scrollLeft:0
		}
	},
	watch: {
		tabAct_id: {
			handler() {
				this.getReportList();		
			},
			 immediate:true
		}
	},
  	onLoad(optios) {
		this.$store.dispatch("checkHandle",{type:'load',val:optios}).then((res) => {
            if(optios.tabid){
            	this.tabAct_id = optios.tabid
            }
            this.getTabs();
        })		
	},
	onShow() {
		this.$store.dispatch("statistics",{PageType:'Summary',ChartPermissionId:Number(this.tabAct_id)})
		// #ifdef MP-WEIXIN
			uni.hideHomeButton()
		// #endif
	},
	methods: {
		/* 切换分类 */
		toggleTab (item,index) {
			if(this.tabAct_id !== item.ChartPermissionId) {
				this.tabAct_id = item.ChartPermissionId;
				this.pageNum = 1;
				uni.pageScrollTo({
				   scrollTop: 0,
				   duration: 0,
				});
				this.$store.dispatch("statistics",{PageType:'Summary',ChartPermissionId:Number(this.tabAct_id)})
			}
            this.getRectTab(index)
		},
        getRectTab(index){
            // const query = uni.createSelectorQuery().in(this);
            // query.select(`#_${index}`).boundingClientRect(rect => {
            //          var screen = wx.getSystemInfoSync().windowWidth/2;
            //         //获取点击item的左边坐标
            //         var left = rect.left;
            //         //获取item的宽度de 一半
            //         var subhalfwidth= rect.width/2
            //         //需要scrollview 移动的距离是
            //         var juli = left-screen
            //         var zuizhongjuli = juli+subhalfwidth
            //         this.scrollLeft = this.scrollLeft+=zuizhongjuli
            // }).exec();
        },
        scrollMove(e) {
           this.scrollLeft = e.detail.scrollLeft;
         },
		/* 获取列表 */
		getReportList() {
			Home.getList({
				PageSize: this.pageSize,
				CurrentIndex: this.pageNum,
				ChartPermissionId:Number(this.tabAct_id) || 0
			}).then(res => {
				if(res.Ret === 200) {
                    if(!res.Data.HaveResearch){
                        this.$util.modalShow('','您暂无查看研选权限','',()=>{
                            uni.reLaunch({
                                 url:'/pages/index/index'
                             })
                        })
                    }   
					this.status = this.pageNum < res.Data.Paging.Pages ? 'loadmore' : 'nomore'
					// this.totalPage = res.Data.Paging.Pages;//总页数
					if(this.pageNum === 1) {
						this.dataList = res.Data.List || []
						this.haveData = this.dataList.length ? true : false;
					}else {
						this.dataList = this.dataList.concat(res.Data.List)
					}
					if(this.refresh) {
						uni.stopPullDownRefresh();
						this.refresh = false;
					} 
				}
			})
		},
		/* 获取tab分类 */
		getTabs() {
			Home.Tab().then(res => {
				if(res.Ret === 200) {
					let arr = res.Data.List;
					arr.unshift({
						ChartPermissionId: 0,
						PermissionName: "最新"
					})
					this.tabBars = arr;
					this.limitIsShow=this.tabBars.some(item=>item.IsShowSustainable)
                    if(this.tabAct_id==0){
                        this.getReportList();        
                    }
				}
			})
		},
		/* 进入详情 校验是否有该品种权限 */
		goDetail(item) {
			/* 无需授权且已绑定 检验是或否有权限 */
			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/reportDetail/reportDetail?id=' + item.ArticleId,
					});
				}else if(res.IsAuth) { //未授权
					uni.navigateTo({
						url:'/pages/authGuide/authGuide'
					})
				}else if(res.IsBind && !res.IsAuth){ //已授权未绑定
					uni.navigateTo({
						url:'/pages/login/login'
					})
				}
			})
			
		},
		/* 搜索 */
		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/search/search',
					});
				}else if(res.IsAuth) { //未授权
					uni.navigateTo({
						url:'/pages/authGuide/authGuide'
					})
				}else if(res.IsBind && !res.IsAuth){ //已授权未绑定
					uni.navigateTo({
						url:'/pages/login/login'
					})
				}
			})
		},
		adviceHandle() {
			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/advice/advice'});
				}else if(res.IsAuth) { //未授权
					uni.navigateTo({
						url:'/pages/authGuide/authGuide'
					})
				}else if(res.IsBind && !res.IsAuth){ //已授权未绑定
					uni.navigateTo({
						url:'/pages/login/login'
					})
				}
			})
		}
	},
	/* 下拉刷新 */
	onPullDownRefresh: Throttle(function() {
		this.pageNum = 1;
		this.refresh = true;
		this.getReportList()
	}),
	// 上拉加载
	onReachBottom: Throttle(function() {
		if(this.status === 'nomore') return ;
		this.status = 'loading';
		this.pageNum++;
		this.getReportList()
	}),
	/**
	* 用户点击分享
	*/
	onShareAppMessage: function (res) {
		return {
			title: '您手边的弘则研究素材检索库',
			path:  '/pages/index/index?tabid='+this.tabAct_id,
			imageUrl: this.tabAct_id==0 ?'https://hzstatic.hzinsights.com/cygx/czbk/home_share.png' : '' ,
			success: (res)=> {
			},
			fail: (err)=> {
			}
		}
	},
	// onShareTimeline: function(res) {
	// 	return {
	// 		title:'111',
	// 		// query:'',
	// 		// imageUrl:''
	// 	}
	// }
}
</script>

<style lang="scss">
.Index-container {
	background-color: #F7F7F7;
	font-size: 30rpx;
	.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;
			box-shadow: 0 3rpx 6rpx rgba(187,216,255,0.2);
			.scroll-tab {
				position: relative;
				width: 100%;
				white-space: nowrap;
			}
			.limit-box {
				position: absolute;
				text-align: center;
				display: inline-block;
				padding-right: 50rpx;
				top: -9rpx;
				margin-left: -38rpx;
				image {
					width: 46rpx;
					height: 26rpx;
				}
				
			}
			.scroll-tab-item {
				// flex-grow: 1;
				text-align: center;
				display: inline-block;
				padding: 10rpx 8rpx 20rpx 8rpx;
				margin-right: 35rpx;
				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;
				}
			}
		}
	}
	.data-cont {
		padding: 228rpx 20rpx 10rpx;
		display: flex;
		.report-ul {
			width: 50%;
			&:first-child {
				margin-right: 10rpx;
			}
			.report-item {
				padding: 20rpx 20rpx 24rpx 20rpx;
				margin-bottom: 20rpx;
				border-radius: 8rpx;
				box-shadow: 0 3rpx 6rpx rgba($color: #000000, $alpha: 0.16);
				background: #fff;
				.item-content {
					height: 273rpx;
					font-size: 24rpx;
					line-height: 40rpx;
					color: #7F7F7F;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 7;
					-webkit-box-orient: vertical;
				}
				.line {
					margin: 18rpx 0;
					content: '';
					width: 100%;
					height: 1px;
					padding: 0 32rpx;
					box-sizing: border-box;
					background-color: #E5E5E5;
					-webkit-transform: scale(1, 0.5);
					transform: scale(1, 0.5);
					-webkit-transform-origin: center bottom;
					transform-origin: center bottom;
				}
				.item-title {
					font-size: 28rpx;
					color: #4A4A4A;
					margin-bottom: 10rpx;
				}
				.item-abstract {
					font-size: 26rpx;
					color: #6A6A6A;
					margin-bottom: 10rpx;
					.report_ico {
						width: 32rpx;
						height: 26rpx;
						margin-right: 20rpx;
						display: inline-block;
					}
				}
				.item-createtime {
					display: flex;
					align-items: center;
					justify-content: space-between;
					color: #ACACAC;
					font-size: 24rpx;
					.item-examine {
						display: flex;
						align-items: center;
						image {
							width: 30rpx;
							height: 24rpx;
							margin: 0 10rpx 0 15rpx;
						}
					}
					
				}
			}
		}
	}
	.advice_ico {
		width: 81rpx;
		height: 81rpx;
		position: fixed;
		right: 30rpx;
		bottom: 214rpx;
	}
	
}
</style>