zheng_xie_ui/pages/index/index.vue

<template>
	<view class="zxbox">
		<view class="zxtop">
			<view class="navbox">
				<uni-nav-bar  color="#ffffff" leftWidth='340rpx' @clickRight="getNewsFn"  :background-color="backgroundColor" :border="false" statusBar='true' fixed="true">
					<block slot="left">
						<image :src="titimg" class="topl"></image>
					</block>
					<block slot="right" v-if="checkPermi(['zxNotice:notice:list'])">
						<view class="topr">
							<image :src="noticeimg"></image>
							<view class="cir"></view>
						</view>
					</block>
				</uni-nav-bar>
			</view>
			<image :src="bgimg" class="bgimg"></image>
			<view class="zxmain">
				<view class="flexc mb27">
					<view class="htop" @click="getAddCase" v-if="checkPermi(['proposalInfo:info:add'])">
						<view class="imgs">
							<image :src="htopa" class="imga"></image>
						</view>
						<view class="tit">提交提案</view>
					</view>
					<view class="htop" @click="getAddsqmy" v-if="checkPermi(['sqmyInfo:info:add'])">
						<view class="imgs">
							<image :src="htopb" class="imgb"></image>
						</view>
						<view class="tit">上报社情民意</view>
					</view>
					<view class="htop" @click="getAddlzda" v-if="checkPermi(['member:info:add'])">
						<view class="imgs">
							<image :src="htopc" class="imgc"></image>
						</view>
						<view class="tit">履职档案</view>
					</view>
					<view class="htop" @click="getAddhy" v-if="checkPermi(['zxConference:conference:add'])">
						<view class="imgs">
							<image :src="htopd" class="imga"></image>
						</view>
						<view class="tit">创建会议</view>
					</view>
				</view>
				<view class="hbox">
					<!-- 通知栏 -->
					<block v-if="checkPermi(['zxNotice:notice:list'])">
						<h-notice :noticelist="noticelist" :autoplay='autoplay' @getNoticeDet="getNoticeDet"></h-notice>
					</block>
					<!-- 提案办理 -->
					<view class="flexcw blbox">
						<view class="htbox" @click="handleTotabl" v-if="checkPermi(['proposalInfo:info:unitList','sqmyInfo:info:unitList'])">
							<image :src="kricob" class="hrbg"></image>
							<view class="htboxa flexc">
								<view class="flex1 mr10">
									<view class="tit">提案/社情办理</view>
									<view class="txt">提案、社情单位办理</view>
								</view>
								<!-- <image :src="hrimgc" class="flex0 imgc"></image> -->
							</view>
						</view>
						<view class="htbox" @click="handleTocu" v-if="checkPermi(['zxUrge:urge:list'])">
							<image :src="kricoa" class="hrbg"></image>
							<view class="htboxa flexc">
								<view class="flex1 mr10">
									<view class="tit">催办信息</view>
									<view class="txt">了解催办信息</view>
								</view>
								<!-- <image :src="hrimgd" class="flex0 imgd"></image> -->
							</view>
						</view>
					</view>
					<!-- 入口 -->
					<view class="mt22">
						<view class="htit">快捷入口</view>
						<view class="mt18 flexcw">
							<view class="htbox" @click="getZxCaseFn" v-if="checkPermi(['proposalInfo:info:list'])">
								<image :src="hrbga" class="hrbg"></image>
								<view class="htboxa flexc">
									<view class="flex1 mr10">
										<view class="tit">政协提案</view>
										<view class="txt">全方位审核委员提案</view>
									</view>
									<image :src="hrimga" class="flex0 imga"></image>
								</view>
							</view>
							<view class="htbox" @click="getsqmyInfoFn" v-if="checkPermi(['sqmyInfo:info:list'])">
								<image :src="hrbgb" class="hrbg"></image>
								<view class="htboxa flexc">
									<view class="flex1 mr10">
										<view class="tit">社情民意</view>
										<view class="txt">录入社情民意信息</view>
									</view>
									<image :src="hrimgb" class="flex0 imgb"></image>
								</view>
							</view>
							<view class="htbox" @click="getlzInfoFn" v-if="checkPermi(['member:info:list'])">
								<image :src="hrbgc" class="hrbg"></image>
								<view class="htboxa flexc">
									<view class="flex1 mr10">
										<view class="tit">履职信息</view>
										<view class="txt">管理委员履职信息</view>
									</view>
									<image :src="hrimgc" class="flex0 imgc"></image>
								</view>
							</view>
							<view class="htbox" @click="getMettFn" v-if="checkPermi(['zxConference:conference:list'])">
								<image :src="hrbgd" class="hrbg"></image>
								<view class="htboxa flexc">
									<view class="flex1 mr10">
										<view class="tit">会议活动</view>
										<view class="txt">了解会议活动信息</view>
									</view>
									<image :src="hrimgd" class="flex0 imgd"></image>
								</view>
							</view>
							
							<!-- <view class="htbox" @click="handleTotabl" v-if="checkPermi(['proposalInfo:info:unitList','sqmyInfo:info:unitList'])">
								<image :src="hrbgc" class="hrbg"></image>
								<view class="htboxa flexc">
									<view class="flex1 mr10">
										<view class="tit">提案/社情办理</view>
										<view class="txt">提案、社情单位处理</view>
									</view>
									<image :src="hrimgc" class="flex0 imgc"></image>
								</view>
							</view>
							<view class="htbox" @click="handleTocu" v-if="checkPermi(['zxUrge:urge:list'])">
								<image :src="hrbgd" class="hrbg"></image>
								<view class="htboxa flexc">
									<view class="flex1 mr10">
										<view class="tit">催办信息</view>
										<view class="txt">了解催办信息</view>
									</view>
									<image :src="hrimgd" class="flex0 imgd"></image>
								</view>
							</view> -->
						</view>
					</view>
					
				</view>
			</view>
		</view>
		
		<!-- 新闻 -->
		<view class="hnbox">
			<view class="hntabs flexc" :class="fixedflag?'tabfix':''"  :style="fixedflag?'top:'+nvaHeight+'px;':''">
				<view class="flex1 flexc">
					<block v-for="(ite,idx) in tabList" :key="idx">
						<view class="tit" v-if="checkPermi([ite.limit])"  :class="tabval==ite.val?'act':''" @click="getTab(ite.val)">{{ite.tit}}</view>
					</block>
					
				</view>
				<view class="flex0 txtr" @click="getMoreList">了解更多>></view>
			</view>
			<view style="height:114rpx;" v-if="fixedflag"></view>
			<!-- 列表 -->
			<view class="mt2 plr12" :style="'min-height: ' + minheight + 'px;'">
				<notice-list :datalist="list" :wtdt="wtdt" :tajdlist="tajdlist" :ztlxlist="ztlxlist" :type='tabval' @getDetail="getDetail"></notice-list>
				<view class="upmore flexccc" @click="getMoreFn" v-if="reachflag">
					<image :src="upimg"></image>
					<view>下拉更多</view>
				</view>
			</view>
		</view>
	<pop-up :type='ptype' @getClose="getClose" @getFaFn="getFaFn"></pop-up>
	<footers v-if="isfootflag" :footlist="footlist" :footerindex="footerindex" :color_checked="color_checked" :color_nochecked="color_nochecked" :isHomeIndex="true"></footers>
  </view>
</template>

<script>
	import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
	// let { calendar } = require("@/components/lunc-calendar/calendar.js");
	import {getCaseListFn} from "@/api/mine/case.js"
	import {getsqmyInfoListFn} from "@/api/mine/sqmyInfo.js"
	import {getDictionaryFn} from "@/api/mine/register.js"
	import {getNoticeList} from "@/api/mine/news.js"
	import popUp from "@/components/popup/popup.vue"
	import hNotice from '@/components/swiper/notice.vue'
	import noticeList from '@/components/notice/list.vue'
	import footers from '@/components/footer/footer.vue'
  export default {
	components:{hNotice,noticeList,footers,popUp},
	data(){
		return{
			footlist:[
				{module:'home',title:'潜山政协',icon_checked:require('@/static/images/tabbar/home_.png'),icon_nochecked:require('@/static/images/tabbar/home.png')},
				{module:'report',title:'履职报告',icon_checked:require('@/static/images/tabbar/report_.png'),icon_nochecked:require('@/static/images/tabbar/report.png')},
				{module:'notice',title:'会议通知',icon_checked:require('@/static/images/tabbar/notice_.png'),icon_nochecked:require('@/static/images/tabbar/notice.png')},
				{module:'mine',title:'个人中心',icon_checked:require('@/static/images/tabbar/mine_.png'),icon_nochecked:require('@/static/images/tabbar/mine.png')},
				],
			color_checked :'222327',
			color_nochecked :'AAAAAA',
			footerindex:'home',
			isfootflag:true,
			backgroundColor:'transparent',
			bgimg:require("@/static/images/bg.png"),
			titimg:require("@/static/images/home/tit.png"),
			noticeimg:require("@/static/images/home/notice.png"),
			htopa:require("@/static/images/home/htopa.png"),
			htopb:require("@/static/images/home/htopb.png"),
			htopc:require("@/static/images/home/htopc.png"),
			htopd:require("@/static/images/home/htopd.png"),
			hrbga:require("@/static/images/home/hrbga.png"),
			hrbgb:require("@/static/images/home/hrbgb.png"),
			hrbgc:require("@/static/images/home/hrbgc.png"),
			hrbgd:require("@/static/images/home/hrbgd.png"),
			hrimga:require("@/static/images/home/hrimga.png"),
			hrimgb:require("@/static/images/home/hrimgb.png"),
			hrimgc:require("@/static/images/home/hrimgc.png"),
			hrimgd:require("@/static/images/home/hrimgd.png"),
			kricoa:require("@/static/images/home/kricoa.png"),
			kricob:require("@/static/images/home/kricob.png"),
			upimg:require("@/static/images/home/up.png"),
			tabval:1,
			tabList:[{tit:'公开提案',val:1,limit:'proposalInfo:info:list'},{tit:'社情民意',val:2,limit:'sqmyInfo:info:list'},],
			list:[],
			pageSize: 10,
			pageNum: 1,
			reachflag: true,
			wtdt:'',
			nvaHeight:44,
			listTop:0,//距离顶部的距离
			fixedflag:false,
			ptype:"",//lmta 联名填弹窗
			tajdlist:[],
			ztlxlist:[],
			minheight:0,
			noticelist:[],
			autoplay:true
		}
	},
	onPageScroll(e) {
		var scrollTop = Number(e.scrollTop);
		var listTop=Number(this.listTop)-Number(this.nvaHeight)
		if (scrollTop <=this.nvaHeight) {
			const opacity = scrollTop / 100 // 计算透明度值
			const color = `rgba(29, 100, 226, ${opacity})`
			this.backgroundColor = color // 更新盒子背景颜色
		} else {
			this.backgroundColor = '#1D64E2'
		}
		if(scrollTop>listTop){
			this.fixedflag=true
		}else{
			this.fixedflag=false
		}
	},
	onLoad: function() {
		// uni.$on('refreshdatalist',(e) => {
		// 	this.reachflag=false;
		// 	this.pageNum=1;
		// 	this.list=[];
		// 	this.getDataFn();
		// })
		
		this.init()
		this.getDataFn()
		if(checkPermi(['zxNotice:notice:list'])){
			this.getNoticeList()
		}
		uni.getSystemInfo({
			success: (e) => {
				this.nvaHeight = Number(e.statusBarHeight)+44;
				this.minheight = e.screenHeight -Number(this.nvaHeight)- 57;
			}
		})
	},
	onUnload() {
		uni.$off('refreshdatalist')
	},

	onShow() {
		// var that=this;
		// this.time();
	},
	mounted() {
		this.getHeightFn()
	},
	// 上拉触底加载更多触发事件
	onReachBottom() {
		// if (this.reachflag) {
		// 	this.pageNum++
		// 	this.getDataFn()
		// }
	},
	methods:{
		checkPermi, checkRole,
		getNewsFn(){
			if(checkPermi(['zxNotice:notice:list'])){
				this.$tab.navigateTo('/work/pages/news/list')
			}
		},
		getNoticeDet(e){
			this.$tab.navigateTo('/work/pages/news/detail?id='+e)
		},
		getMoreFn(){
			if (this.reachflag) {
				this.pageNum++
				this.getDataFn()
			}
		},
		getNoticeList(){
			var params={
				pageSize:10,
				pageNum:1
			}
			getNoticeList(params).then(res=>{
				if(res.code==200){
					this.noticelist=res.rows
				}
			})
		},
		getMoreList(){
			if(this.tabval==1){
				this.getZxCaseFn()
			}else if(this.tabval==2){
				this.getsqmyInfoFn()
			}
		},
		getClose(){
			this.ptype=''
		},
		getTab(val){
			this.tabval=val;
			this.list=[];
			this.pageNum=1;
			this.reachflag=true;
			this.getDataFn()
		},
		getHeightFn(){
			let query = uni.createSelectorQuery().in(this);
				//需要给黄色区域设置一个id标识，在这里是demo
			query.select('.zxtop').boundingClientRect(data => {
				this.listTop = data.height//赋值，待会要用
			}).exec();
		},
		getAddCase(){
			if(uni.getStorageSync('tjtaList')){
				// var newObj=JSON.parse(JSON.stringify(uni.getStorageSync('tjtaList')))
				this.ptype='zcta'
			}else{
				this.$tab.navigateTo('/work/pages/case/add')
			}
		},
		getAddsqmy(){
			if(uni.getStorageSync('sqmyList')){
				this.ptype='sqmy'
			}else{
				this.$tab.navigateTo('/work/pages/sqmyInfo/add')
			}
		},
		getAddlzda(){
			this.$tab.navigateTo('/work/pages/report/mineinfo?type=add')
			// this.$tab.navigateTo('/work/pages/report/info')
		},
		getAddhy(){
			this.$tab.navigateTo('/work/pages/meeting/add')
			// if(uni.getStorageSync('cjhyList')){
			// 	this.ptype='zchy'
			// }else{
			// 	this.$tab.navigateTo('/work/pages/meeting/add')
			// }
		},
		getFaFn(type,ptype){
			this.ptype='';
			if(ptype=='zcta'){
				if(type=='new'){uni.removeStorageSync('tjtaList')}
				this.$tab.navigateTo('/work/pages/case/add?type='+type)	
			}else if(ptype=='zchy'){
				if(type=='new'){uni.removeStorageSync('cjhyList')}
				this.$tab.navigateTo('/work/pages/meeting/add?type='+type)
			}else if(ptype=='sqmy'){
				if(type=='new'){uni.removeStorageSync('sqmyList')}
				this.$tab.navigateTo('/work/pages/sqmyInfo/add?type='+type)	
			}	
		},
		getZxCaseFn(){
			this.$tab.navigateTo('/work/pages/case/mine')
		},
		getsqmyInfoFn(){
			this.$tab.navigateTo('/work/pages/sqmyInfo/mine')
		},
		getMettFn(){
			this.$tab.navigateTo('/work/pages/meeting/list')
		},
		getlzInfoFn(){
			this.$tab.navigateTo('/work/pages/report/info')
		},

		
		init(){
			// 提案进度
			getDictionaryFn('proposal_progress').then(res=>{
				if(res.code==200){
					this.tajdlist = res.data.map(v => {
						return {
							label: v.dictLabel,
							value: v.dictValue
						}
					})
				}
			})
			//主题类型
			getDictionaryFn('sqmy_topic_type').then(res=>{
				if(res.code==200){
					this.ztlxlist = res.data.map(v => {
						return {
							label: v.dictLabel,
							value: v.dictValue
						}
					})
				}
			})
		},
		time() {
			var date = new Date();
			var y = date.getFullYear();
			var m = date.getMonth() + 1;
			var d = date.getDate();
			let lunar = calendar.solar2lunar(y, m, d); //农历
			this.lunar=lunar.IMonthCn+lunar.IDayCn;
			this.daytime=m+'月'+d+"日";
			// var h = date.getHours();
			// var min = date.getMinutes();
			// var s = date.getSeconds();
			// var week = date.getDay(); //获取当前星期X(0-6,0代表星期天)
			// var weeks = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
			// var yearStr = y + '-' + (m < 10 ? ('0' + m) : m) + '-' + (d < 10 ? ('0' + d) : d)
			// var timeStr = (h < 10 ? ('0' + h) : h) + ':' + (min < 10 ? ('0' + min) : min) + ':' + (s < 10 ? (
			// 	'0' + s) : s);
			// this.kaTime = yearStr + ' ' + timeStr;
		},
		getDetail(data){
			if(this.tabval==1){
				this.$tab.navigateTo('/work/pages/case/details?id='+data)
			}else{
				this.$tab.navigateTo('/work/pages/sqmyInfo/details?id='+data)
			}	
		},
		handleTotabl(){
			this.$tab.navigateTo('/work/pages/single/unitList')
		},
		handleTocu(){
			this.$tab.navigateTo('/work/pages/single/urge')
		},
		getDataFn(){
			var params={
				pageSize:this.pageSize,
				pageNum: this.pageNum,
				// visitType:3
			}
			if(this.tabval==1){//公开提案
				params.isPublicity='是';
				params.isRecord=0
				getCaseListFn(params).then(res=>{
					if(res.code==200){
						if (res.rows.length < this.pageSize) {
							this.reachflag = false
							this.wtdt = '到底了~';
						} else {
							var num = parseInt(res.rows.length) + parseInt(this.pageSize) * parseInt(this.pageNum -	1)
							if (num < res.total) {
								this.reachflag = true
								this.wtdt = '上拉加载更多'
							} else {
								this.reachflag = false
								this.wtdt = '到底了~';
							}
						}
						if (this.pageNum == 1) {
							this.list = res.rows;
						} else {
							this.list = this.list.concat(res.rows)
						}
					}else{
						this.$toast(res.msg)
					}
				}) 
			}else if(this.tabval==2){//社情民意
				getsqmyInfoListFn(params).then(res=>{
					if(res.code==200){
						if (res.rows.length < this.pageSize) {
							this.reachflag = false
							this.wtdt = '到底了~';
						} else {
							var num = parseInt(res.rows.length) + parseInt(this.pageSize) * parseInt(this.pageNum -	1)
							if (num < res.total) {
								this.reachflag = true
								this.wtdt = '上拉加载更多'
							} else {
								this.reachflag = false
								this.wtdt = '到底了~';
							}
						}
						if (this.pageNum == 1) {
							this.list = res.rows;
						} else {
							this.list = this.list.concat(res.rows)
						}
					}else{
						this.$toast(res.msg)
					}
				}) 
			}
			
			
		},
	},
	
  }
</script>

<style lang="scss" scoped>
.navbox{position: fixed;left: 0;right: 0;top: 0;z-index: 4;
	.topl{width: 274rpx;height: 50rpx;margin-left: 14rpx;}
	.topr{width: 36rpx;height: 36rpx;position: relative;margin-right: 10rpx;
		image{width: 100%;height: 100%;}
		.cir{width: 14rpx;height: 14rpx;background: #DF0024;border-radius: 50%;position: absolute;right: -7rpx;top: -7rpx;}
	}
}
// .zxbox /deep/ .ql-editor p{text-indent: 2rem;}
	

.zxbox{
	.bgimg{width: 100%;height: 420rpx;}
	.zxmain{margin-top: -260rpx;z-index: 1;position: relative;
		.htop{width: 25%;display: flex;flex-direction: column;align-items: center;justify-content: center;
			.imgs{
				width: 74rpx;height: 74rpx;display: flex;align-items: center;justify-content: center;
				.imga{width: 72rpx;height: 72rpx;}
				.imgb{width: 68rpx;height: 74rpx;}
				.imgc{width: 68rpx;height: 72rpx;}	
			}
			.tit{font-weight: 500;font-size: 26rpx;color: #F1F9FF;margin-top: 26rpx;}
		}
		.hbox{
			background: #ffffff;border-radius: 30rpx 30rpx 0 0;padding: 38rpx 24rpx 0 24rpx;
			.htit{font-size: 36rpx;color: #343434;font-weight: bold;}
			.htbox{position: relative;width: 342rpx;height: 146rpx;position: relative;margin-bottom: 24rpx;margin-right: 18rpx;
				&:nth-of-type(2n){margin-right: 0;}
				.hrbg{width: 100%;height: 100%;}
				.htboxa{position: absolute;left: 0;right: 0;top: 0;bottom: 0;padding: 0 18rpx 0 32rpx;box-sizing: border-box;
					.tit{font-size: 16px;color: #222327;font-weight: bold;margin-bottom: 8rpx;line-height: 44rpx;}
					.txt{font-weight: 500;font-size: 24rpx;color: #666666;}
					.imga{width: 56rpx;height: 60rpx;}
					.imgb{width: 50rpx;height: 60rpx;}
					.imgc{width: 54rpx;height: 58rpx;}
					.imgd{width: 70rpx;height: 56rpx;}
				}
			}
			.blbox{margin-top: 38rpx;
				.htbox{width: 340rpx;height: 150rpx;background: #FFFFFF;box-shadow: 0px 0px 30rpx 0px #DADADA;border-radius: 10rpx;margin-bottom: 0;
					.htboxa{padding: 0 24rpx;
						.txt{color: #959595;}
					}
				}
			}
			
		}
	}
	.hnbox{background-color: #ffffff;padding-bottom: 32rpx;
		.hntabs{padding:32rpx 24rpx;background-color: #ffffff;
			&.tabfix{position: fixed;left: 0;right: 0;z-index: 4;box-shadow:  0rpx 4rpx 12rpx 0rpx rgba(196,191,191,0.22);}
			.tit{font-weight: 500;font-size: 32rpx;color: #AAAAAA;position: relative;line-height: 50rpx;margin-right: 64rpx;
				&.act{font-weight: bold;font-size: 36rpx;color: #222327;
					&::after{
						content: '';width: 52rpx;height: 12rpx;background: #1D64E2;border-radius: 6rpx;position: absolute;left: 50%;bottom: -32rpx;margin-left: -26rpx;
					}
				}
			}
			.txtr{font-size: 26rpx;color: #aaaaaa;font-weight:500;}
		}
		.upmore{
			image{width: 40rpx;height: 32rpx;margin-bottom: 16rpx;}
			view{font-weight: 500;font-size: 26rpx;color: #AAAAAA;}
			
		}
	}
	
}
</style>