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">
						<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">
						<view class="imgs">
							<image :src="htopa" class="imga"></image>
						</view>
						<view class="tit">提交提案</view>
					</view>
					<view class="htop">
						<view class="imgs">
							<image :src="htopb" class="imgb"></image>
						</view>
						<view class="tit">上报社情民意</view>
					</view>
					<view class="htop">
						<view class="imgs">
							<image :src="htopc" class="imgc"></image>
						</view>
						<view class="tit">履职档案</view>
					</view>
					<view class="htop">
						<view class="imgs">
							<image :src="htopd" class="imga"></image>
						</view>
						<view class="tit">创建会议</view>
					</view>
				</view>
				<view class="hbox">
					<!-- 通知栏 -->
					<h-notice></h-notice>
					<!-- 入口 -->
					<view class="mt22">
						<view class="htit">快捷入口</view>
						<view class="mt18 flexcw">
							<view class="htbox" @click="getZxCaseFn">
								<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">
								<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">
								<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">
								<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">
					<view class="tit" v-for="(ite,idx) in tabList" :key="idx" :class="tabval==ite.val?'act':''" @click="getTab(ite.val)">{{ite.tit}}</view>
				</view>
				<view class="flex0 txtr">了解更多>></view>
			</view>
			<view style="height:114rpx;" v-if="fixedflag"></view>
			<!-- 列表 -->
			<view class="mt2 plr12">
				<notice-list :datalist="list" :wtdt="wtdt" type='1' @getDetail="getDetail"></notice-list>
				<view class="upmore flexccc">
					<image :src="upimg"></image>
					<view>下拉更多</view>
				</view>
			</view>
		</view>
	<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 {getReservatcountl,getReservatList,getReservatDel,getReservatSh} from "@/api/mine/order.js"
	// import {getDictionaryFn} from "@/api/mine/register.js"
	
	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},
	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"),
			upimg:require("@/static/images/home/up.png"),
			tabval:'0',
			tabList:[{tit:'政协要闻',val:'0'},{tit:'界别活动',val:'1'},],
			list:[
				{tit:'全国政协十四届二次会议在京开幕 习近平等党和 国家领导人到会祝贺',img:require("@/static/images/bg.png"),from:'新华网',time:'2024-03-04',isTop:true},
				{tit:'政协全国委员会关于颁发2023年度全国政协委员 优秀履职奖的决定',img:require("@/static/images/bg.png"),from:'人民政协报',time:'2024-03-03',isTop:false},
				{tit:'市政协办公室党支部召开党员大会',img:require("@/static/images/bg.png"),from:'人民政协报',time:'2024-03-02',isTop:false},
			
			],
			pageSize: 10,
			pageNum: 1,
			reachflag: true,
			wtdt:'',
			nvaHeight:44,
			listTop:0,//距离顶部的距离
			fixedflag:false,
			
		}
	},
	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.getcount();
		// })
		
		// this.init()
		// // this.getcount()
		// this.getDataFn()
		this.nvaHeight=uni.getSystemInfoSync().statusBarHeight+44;
		
	},
	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(){
			this.$tab.navigateTo('/work/pages/news/list')
		},
		getTab(val){
			this.tabval=val;
		},
		getHeightFn(){
			let query = uni.createSelectorQuery().in(this);
				//需要给黄色区域设置一个id标识，在这里是demo
			query.select('.zxtop').boundingClientRect(data => {
				this.listTop = data.height//赋值，待会要用
			}).exec();
		},
		getAddCase(){
			this.$tab.navigateTo('/work/pages/case/add')
		},
		getZxCaseFn(){
			this.$tab.navigateTo('/work/pages/case/mine')
		},
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		init(){
			// 记录来源
			getDictionaryFn('jluly').then(res=>{
				if(res.code==200){
					this.adrlist = res.data.map(v => {
						return {
							dictLabel: v.dictLabel,
							dictValue: v.dictValue
						}
					})
				}
			})
		},
		getMoreFn(){
			this.$tab.navigateTo("/pages/order/list")
		},
		getDelFn(id){
			var that=this;
			getReservatDel(id).then(res=>{
				if(res.code==200){
					that.$toast('删除成功')
					setTimeout(function(){
						that.reachflag=true;
						that.pageNum=1;
						that.list=[];
						that.getDataFn();
						// that.getcount();
					},1500)
					
				}else{
					that.$toast(res.msg)
				}
			})
		},
		gettypeFn(ite){
			var that=this;
			var params={
				reservatId:ite.id,
				visitType:ite.type
			}
			getReservatSh(params).then(res=>{
				if(res.code==200){
					that.$toast('审核成功')
					setTimeout(function(){
						that.reachflag=true;
						that.pageNum=1;
						that.list=[];
						that.getDataFn();
						// that.getcount();
					},1500)
					
				}else{
					that.$toast(res.msg)
				}
			})
		},
		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;
		},
		getcount(){
			
			getReservatcountl().then(res=>{
				if(res.code==200){
					this.conuntinfo=res.data
				}else{
					this.$toast(res.msg)
				}
			})
		},
		getDetail(data){
			this.$tab.navigateTo('/pages/order/staffcode?type=look&id='+data)
		},
		getDataFn(){
			var params={
				pageSize:this.pageSize,
				pageNum: this.pageNum,
				// visitType:3
			}
			getReservatList(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;}
				}
			}
			
		}
	}
	.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>