rongzidanbao-ui/pages/index/index.vue

<template>
	<view class="zxbox">
		<view class="zxtop">
			<view class="navbox">
				<uni-nav-bar  color="#ffffff" leftWidth='160rpx' rightWidth="48rpx" :background-color="backgroundColor" :border="false" statusBar='true' fixed="true">
					<block slot="left">
						<view class="topl flexc">
							<image :src="adrimg" ></image>
							<view class="over">潜山</view>
						</view>
					</block>
					<view class="topc flexc">
						<image :src="secimg"></image>
						<input  placeholder="请输入您要找的客户名称" confirm-type="search" v-model="usename" @confirm="getConfirm"/>
					</view>
					<block slot="right">
						<view class="topr" @click='getNoticeFn'>
							<image :src="noticeimg"></image>
							<view class="cir">99+</view>
							<!-- <block v-if="noticenum>99">99+</block>
							<block v-else>{{noticenum}}</block> -->
						</view>
					</block>
				</uni-nav-bar>
			</view>
			<image :src="bgimg" class="bgimg"></image>
			<view class="zxmain">
				<view class="banbox mb12" v-if="bannerlist.length">
					<banner :bannerlist="bannerlist"></banner>
				</view>
				<view class="grid">
					<view class="grid-item-box" @click="getBusListFn">
						<view class="img"><image :src="topaimg" class="imga"></image></view>
						<view>申报审核</view>
					</view>
					<view class="grid-item-box">
						<view class="img"><image :src="topbimg" class="imgb"></image></view>
						<view>担保初审</view>
					</view>
					<view class="grid-item-box">
						<view class="img"><image :src="topcimg" class="imgc"></image></view>
						<view>外部工具</view>
					</view>
					<view class="grid-item-box">
						<view class="img"><image :src="topdimg" class="imgd"></image></view>
						<view>尽职调查</view>
					</view>
					<view class="grid-item-box">
						<view class="img"><image :src="topeimg" class="imga"></image></view>
						<view>评审会</view>
					</view>
					<view class="grid-item-box">
						<view class="img"><image :src="topfimg" class="imgc"></image></view>
						<view>签署合同</view>
					</view>
					<view class="grid-item-box" @click="getLedgerFn">
						<view class="img"><image :src="topgimg" class="imge"></image></view>
						<view>台账表</view>
					</view>
					<view class="grid-item-box" @click="getFileFn">
						<view class="img"><image :src="tophimg" class="imgf"></image></view>
						<view>文件管理</view>
					</view>
				</view>
				<!-- v-if="checkPermi(['zxNotice:notice:list'])" -->
				<view class="mlrbox">
					<view class="mb24">
						<h-notice :noticelist="noticelist" :autoplay='autoplay' @getNoticeDet="getNoticeDet"></h-notice>
					</view>
					<view class="addbox mb26">
						<view class="adda bga" @click="getProveFn">
							<image :src="haddaimg"></image>
							<view class="tit">业务申报</view>
							<view class="txt">在线填写</view>
						</view>
						<view class="adda bgb">
							<image :src="haddbimg"></image>
							<view class="tit">暂存申报</view>
							<view class="txt">继续填报</view>
						</view>
						<view class="adda bgc">
							<image :src="haddcimg"></image>
							<view class="tit">我的申报</view>
							<view class="txt">查看进度</view>
						</view>
						<view class="adda bgd">
							<image :src="hadddimg"></image>
							<view class="tit">回收站</view>
							<view class="txt">一键找回</view>
						</view>
					</view>
					<view class="flexcj tabt pb12">
						<view class="left">待办提醒(<text>8</text>)</view>
						<view class="right flexc">更多<image :src="rimg"></image></view>
					</view>
				</view>
			</view>
		</view>
		<!-- 代办提醒 -->
		<view class="hnbox">
			<view class="hntabs flexc" :class="fixedflag?'tabfix':''"  :style="fixedflag?'top:'+nvaHeight+'px;':''">
				<block v-for="(ite,idx) in tabList" :key="idx">
					<!-- v-if="checkPermi([ite.limit])" -->
					<view class="tit"   :class="tabval==ite.val?'act':''" @click="getTab(ite.val)">{{ite.tit}}</view>
				</block>
			</view>
			<view style="height:98rpx;" v-if="fixedflag"></view>
			<!-- 列表 -->
			<view class="mt2 plr12" :style="'min-height: ' + minheight + 'px;'">
				<wait-list :datalist="list" :wtdt="wtdt"  @getDetail="getDetail"></wait-list>
			</view>
		</view>
	<footers v-if="isfootflag"  :footerindex="footerindex"  :isHomeIndex="true"></footers>
  </view>
</template>

<script>
	import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
	import waitList from "@/components/wait/list.vue"
	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 banner from "@/components/toptab/banner.vue"
	import hNotice from '@/components/swiper/notice.vue'
	import footers from '@/components/footer/footer.vue'
  export default {
	components:{banner,hNotice,waitList,footers},
	data(){
		return{
			footerindex:'home',
			isfootflag:true,
			backgroundColor:'transparent',
			bgimg:require("@/static/images/navbg.png"),
			adrimg:require("@/static/images/home/adr.png"),
			noticeimg:require("@/static/images/home/notice.png"),
			secimg:require("@/static/images/home/search.png"),
			topaimg:require("@/static/images/home/topa.png"),
			topbimg:require("@/static/images/home/topb.png"),
			topcimg:require("@/static/images/home/topc.png"),
			topdimg:require("@/static/images/home/topd.png"),
			topeimg:require("@/static/images/home/tope.png"),
			topfimg:require("@/static/images/home/topa.png"),
			topgimg:require("@/static/images/home/topg.png"),
			tophimg:require("@/static/images/home/toph.png"),
			haddaimg:require("@/static/images/home/hadda.png"),
			haddbimg:require("@/static/images/home/haddb.png"),
			haddcimg:require("@/static/images/home/haddc.png"),
			hadddimg:require("@/static/images/home/haddd.png"),
			rimg:require("@/static/images/home/rimg.png"),
			noticelist:[{noticeTitle:'安徽嘉欣医疗用品有限公司项目评…',issuerTime:'04-07'},{noticeTitle:'2安徽嘉欣医疗用品有限公司项目评…',issuerTime:'04-07'},],
			autoplay:false,
			
			list:[{tit:'【申报审核】— 潜山弘立新型建材有限公司…',time:'04-07'},{tit:'【申报审核】— 潜山弘立新型建材有限公司…',time:'04-07'},
				{tit:'【申报审核】— 潜山弘立新型建材有限公司…',time:'04-07'},{tit:'【申报审核】— 潜山弘立新型建材有限公司…',time:'04-07'},
				{tit:'【申报审核】— 潜山弘立新型建材有限公司…',time:'04-07'},{tit:'【申报审核】— 潜山弘立新型建材有限公司…',time:'04-07'},
			],
			pageSize: 10,
			pageNum: 1,
			reachflag: true,
			wtdt:'加载更多',
			nvaHeight:44,
			minheight:0,
			listTop:0,//距离顶部的距离
			fixedflag:false,
			tabval:0,
			tabList:[{tit:'全部',val:0},{tit:'申报审核',val:1},{tit:'担保初审',val:2},{tit:'尽职调查',val:3},{tit:'评审会',val:4},{tit:'签署合同',val:5},],
			usename:'',
			bannerlist:[{path:require("@/static/images/home/banner.png"),},{path:require("@/static/images/navbg.png"),}],
		}
	},
	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(4, 145, 253, ${opacity})`
			this.backgroundColor = color // 更新盒子背景颜色
		} else {
			this.backgroundColor = '#00A9F0'
		}
		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()
		uni.getSystemInfo({
			success: (e) => {
				this.nvaHeight = Number(e.statusBarHeight)+44;
				this.minheight = e.screenHeight - Number(this.nvaHeight)- 100;
			}
		})
	},
	onUnload() {
		uni.$off('refreshdatalist')
	},

	onShow() {
		// var that=this;
		// this.time();
	},
	mounted() {
		this.getHeightFn()
	},
	// 上拉触底加载更多触发事件
	onReachBottom() {
		// if (this.reachflag) {
		// 	this.pageNum++
		// 	this.getDataFn()
		// }
	},
	methods:{
		checkPermi, checkRole,
		getConfirm(){
			// this.$tab.navigateTo("/pages/order/list")
			// this.init()
		},
		getProveFn(){
			this.$tab.navigateTo("/work/pages/prove/index")
			// this.$tab.navigateTo("/work/pages/business/add")
		},
		getBusListFn(){
			this.$tab.navigateTo("/work/pages/business/list")
		},
		getNoticeFn(){
			this.$tab.navigateTo("/pages/index/notice")
		},
		getLedgerFn(){
			this.$tab.navigateTo("/work/pages/file/ledgertable")
		},
		getFileFn(){
			this.$tab.navigateTo("/work/pages/file/list")
		},
		getNoticeDet(){
			
		},
		getTab(idx){
			this.tabval=idx;
		},
		getHeightFn(){
			let query = uni.createSelectorQuery().in(this);
			//需要给黄色区域设置一个id标识，在这里是demo
			query.select('.zxtop').boundingClientRect(data => {
				var top=data.top<0 ? -data.top : data.top;
				this.listTop = data.height//赋值，待会要用
				if (top <=this.nvaHeight) {
					const opacity = top / 100 // 计算透明度值
					const color = `rgba(4, 145, 253, ${opacity})`
					this.backgroundColor = color // 更新盒子背景颜色
				} else {
					this.backgroundColor = '#00A9F0'
				}
			}).exec();
		},
		init(){
			// 记录来源
			getDictionaryFn('jluly').then(res=>{
				if(res.code==200){
					this.adrlist = res.data.map(v => {
						return {
							dictLabel: v.dictLabel,
							dictValue: Number(v.dictValue)
						}
					})
				}
			})
		},
		getMoreFn(){
			this.$tab.navigateTo("/pages/order/list")
		},
		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){
			// 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>
page{background-color: #FFFFFF;}
.navbox /deep/ .uni-navbar__header-container {align-items: center;padding-left: 0;}
.navbox{position: fixed;left: 0;right: 0;top: 0;z-index: 4;
	.topl{padding-left: 16rpx;overflow: hidden;
		image{width: 30rpx;height: 38rpx;margin-right: 18rpx;flex: 0 0 auto;}
		view{font-weight: bold;font-size: 26rpx;color: #FFFFFF;}	
	}
	.topc{border-radius: 34rpx;height:68rpx;box-sizing: border-box;padding:0 32rpx 0 32rpx ;position: relative;flex:1;background-color: #FFFFFF;
	 input{font-weight: 500;font-size: 26rpx;color: #222327;}
	 image{width: 30rpx;height: 30rpx;margin-right: 24rpx;flex: 0 0 auto;}
	 }
	.topr{width: 48rpx;height: 38rpx;position: relative;margin-right: 10rpx;
		image{width: 32rpx;height: 38rpx;margin: 0 auto;}
		.cir{background: #FF4747;font-size: 14rpx;color: #FFFFFF;border-radius: 50%;border: 2rpx solid #FFFFFF;min-width: 20rpx;height: 20rpx;
			position: absolute;right: -5rpx;top: -5rpx;text-align: center;line-height: 16rpx;
		}
		// .cir{width: 14rpx;height: 14rpx;background: #DF0024;border-radius: 50%;position: absolute;right: -7rpx;top: -7rpx;}
	}
}

.zxbox{
	.bgimg{width: 100%;height: 450rpx;}
	.zxmain{
		margin-top: -270rpx;
		.banbox{width: 678rpx;height: 246rpx;margin: 0 auto;}
		.grid{
			display: flex;align-items: center;flex-wrap: wrap;
			.grid-item-box {display: flex;flex-direction: column;align-items: center;justify-content: center;padding: 24rpx 0 36rpx;width: 25%;box-sizing: border-box;
				.img{width: 46rpx;height: 46rpx;display: flex;align-items: center;justify-content: center;margin-bottom: 22rpx;
					.imga{width: 46rpx;height: 46rpx;}
					.imgb{width: 46rpx;height: 40rpx;}
					.imgc{width: 44rpx;height: 46rpx;}
					.imgd{width: 40rpx;height: 46rpx;}
					.imge{width: 42rpx;height: 46rpx;}
					.imgf{width: 44rpx;height: 40rpx;}
				}
				view{font-weight: bold;font-size: 26rpx;color: #222327;}
			}
		}
		
		.mlrbox{margin: 8rpx 36rpx 0;}
		.addbox{
			display: flex;
			.adda{width: 154rpx;height: 190rpx;border-radius: 20rpx;box-sizing: border-box;padding: 28rpx 0 0 20rpx;margin-right: 22rpx;
				&.bga{background: #FFF6F5;}
				&.bgb{background: #F6F8FF;}
				&.bgc{background: #FFF6E7;}
				&.bgd{background: #EFF9F6;}
				&:nth-child(4n){margin-right: 0;}
				image{width: 52rpx;height: 52rpx;margin-bottom: 12rpx;}
				.tit{font-weight: bold;font-size: 28rpx;color: #222327;margin-bottom: 4rpx;}
				.txt{font-size: 22rpx;color: #AAAAAA;}
			}
		}
		.tabt{
			.left{font-weight: bold;font-size: 36rpx;color: #222327;
				text{color: #FF6969;font-size: 30rpx;}
			}
			.right{font-size: 26rpx;color: #AAAAAA;
				image{width: 12rpx;height: 18rpx;margin-left: 14rpx;}
			}
		}
	}
	.hnbox{background-color: #ffffff;padding-bottom: 32rpx;
		.hntabs{padding:20rpx 12rpx 20rpx 34rpx;background-color: #ffffff;overflow: auto;
			&.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: 26rpx;color: #252736;position: relative;margin-right: 22rpx;height: 58rpx;text-align: center;padding: 0 26rpx;background: #F6F6F6;
				border-radius: 30rpx;flex: 0 0 auto;line-height: 58rpx;
				&.act{font-weight: 500;color: #FFFFFF;background: #00A9F0;
				}
			}
		}
	}
}
</style>