rongzidanbao-ui/pages/work/index.vue

<template>
	<view class="zxbox">
		<view class="zxtop">
			<view class="navbox">
				<uni-nav-bar  color="#ffffff" leftWidth='110rpx' rightWidth="48rpx" :background-color="backgroundColor" :border="false" statusBar='true'>
					<block slot="left">
						<view class="topl flexc">
							<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 class="flexc checkbox" :class="scroflag?'scbg':''">
					<picker mode="date" fields="year"   @change='bindDateChangea'>
						<view class="chekt">
							<view>{{sbnd|| "申报年度"}}</view>
							<image :src="upimg"></image>
						</view>
					</picker>
					<picker range-key='label' :value="shidx" :range="shlist"  @change='bindDateChangeb'>
						<view class="chekt">
							<view>{{shzt || "申请额度"}}</view>
							<image :src="upimg"></image>
						</view>
					</picker>
					<picker range-key='label' :value="sdyhidx" :range="sdyhlist"  @change='bindDateChangec'>
						<view class="chekt">
							<view>{{sdyh || "申贷银行"}}</view>
							<image :src="upimg"></image>
						</view>
					</picker>
					<view class="reset" @click="getResetFn">
						<image :src="resetimg" v-if="scroflag"></image>
						<image :src="wresetimg" v-else></image>
					</view>
				</view>
			</view>
			<image :src="bgimg" class="bgimg"></image>
			<view class="zxmain" :style="'margin-top:-'+marTop+'rpx;'">
				<!-- list -->
				<bus-list :datalist="list" :wtdt="wtdt" :sdyhlist="sdyhlist" :dblxlist="dblxlist" :type="type" @getDetail="getDetail"></bus-list>
			</view>
		</view>
	<footers v-if="isfootflag"  :footerindex="footerindex"  :isHomeIndex="true"></footers>
  </view>
</template>

<script>
	import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
	
	let { calendar } = require("@/components/lunc-calendar/calendar.js");
	import {getDictionaryFn} from "@/api/mine/register.js"
	import {getApplicationList} from "@/api/mine/work.js"
	import busList from "@/work/components/business/list.vue"
	import footers from '@/components/footer/footer.vue'
  export default {
	components:{footers,busList},
	data(){
		return{
			footerindex:'work',
			isfootflag:true,
			backgroundColor:'transparent',
			bgimg:require("@/static/images/bg.png"),
			noticeimg:require("@/static/images/home/notice.png"),
			secimg:require("@/static/images/home/search.png"),
			upimg:require('@/work/static/images/sup.png'),
			resetimg:require('@/work/static/images/reset.png'),
			wresetimg:require('@/work/static/images/wreset.png'),

			list:[],
			pageSize: 10,
			pageNum: 1,
			reachflag: true,
			wtdt:'加载更多',
			nvaHeight:44,
			marTop:0,//距离顶部的距离
			stubarHeight:0,//
			scroflag:false,
			type:'work',
			
			usename:'',
			shidx:0,
			shzt:'',
			shztid:'',
			shlist:[{label:"未审",value:'0'},{label:"已审",value:'1'},{label:"已拒",value:'2'}],
			sdyhlist:[],//申贷银行,
			dblxlist:[],//担保类型
			sdyh:'',
			sdyhid:'',
			sbnd:'',//申报年度
			sdyhidx:'',
		}
	},
	onPageScroll(e) {
		var scrollTop = Number(e.scrollTop);
		// var listTop=Number(this.listTop)-Number(this.nvaHeight)
		if(scrollTop>2){
			this.scroflag=true
		}else{
			this.scroflag=false
		}
		if (scrollTop <=this.nvaHeight) {
			const opacity = scrollTop / 100 // 计算透明度值
			const color = `rgba(4, 145, 253, ${opacity})`
			this.backgroundColor = color // 更新盒子背景颜色
		} else {
			this.backgroundColor = '#00A9F0'
		}
	},
	onUnload() {
		uni.$off('refreshdatalist')
	},
	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.stubarHeight=Number(e.statusBarHeight);
				this.nvaHeight = Number(e.statusBarHeight)+44;
			}
		})
	},

	onShow() {
		// var that=this;
		// this.time();
	},
	mounted() {
		this.getHeightFn()
	},
	// 上拉触底加载更多触发事件
	onReachBottom() {
		if (this.reachflag) {
			this.pageNum++
			this.getDataFn()
		}
	},
	methods:{
		checkPermi, checkRole,
		getConfirm(){
			this.getrefreshData()
		},
		getNoticeFn(){
			this.$tab.navigateTo("/pages/index/notice")
		},
		bindDateChangea(e){
			var val=e.detail.value;
			this.sbnd=val;
			this.getrefreshData()
		},
		bindDateChangeb(e){
			var val=e.detail.value;
			this.shzt=this.shlist[val].label;
			this.shztid=this.shlist[val].value;
			this.getrefreshData()
		},
		bindDateChangec(e){
			var val=e.detail.value;
			this.sdyh=this.sdyhlist[val].label;
			this.sdyhid=this.sdyhlist[val].value;
			this.getrefreshData()
		},
		getResetFn(){
			this.sbnd='';
			this.usename='';
			this.sdyh='';
			// 重置
			this.getrefreshData()
		},
		getrefreshData(){
			this.pageNum=1;
			this.list=[];
			this.reachflag=true;
			this.getDataFn()
		},
		getHeightFn(){
			let query = uni.createSelectorQuery().in(this);
			//需要给黄色区域设置一个id标识，在这里是demo
			query.select('.navbox').boundingClientRect(data => {
				var top=data.top<0 ? -data.top : data.top;
				var stubarHeight=Number(this.stubarHeight);
				this.marTop =stubarHeight > 0?420 - Number(data.height)*2 : 420 - Number(data.height)*2 + 40 //赋值，待会要用
				if (top <=this.nvaHeight) {
					const opacity = top / 100 // 计算透明度值
					const color = `rgba(4, 145, 253, ${opacity})`
					this.backgroundColor = color // 更新盒子背景颜色
				} else {
					this.backgroundColor = '#00A9F0'
				}
				if(top>2){
					this.scroflag=true
				}else{
					this.scroflag=false
				}
			}).exec();
		},
		init(){
			// 申贷银行
			getDictionaryFn('shendai_bank').then(res=>{
				if(res.code==200){
					this.sdyhlist = res.data.map(v => {
						return {
							label: v.dictLabel,
							value: v.dictValue
						}
					})
				}
			})
			//担保类型
			getDictionaryFn('guarantee_type').then(res=>{
				if(res.code==200){
					this.dblxlist = res.data.map(v => {
						return {
							label: v.dictLabel,
							value: v.dictValue
						}
					})
				}
			})
		},
		getDetail(e){
			this.$tab.navigateTo("/work/pages/business/details?id="+e)
		},
		getDataFn(){
			var params={
				pageSize:this.pageSize,
				pageNum: this.pageNum,
				loanApplicationType:4,
			}
			if(this.sbnd){
				params.createTime=this.sbnd
			}
			if(this.usename){
				params.enterpriseName=this.usename
			}
			if(this.sdyh){
				params.applicationBank=this.sdyhid
			}
			// 业务 是归档后 的数据
			getApplicationList(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: #f6f6f6;}
.navbox /deep/ .uni-navbar__header-container {align-items: center;padding-left: 0;}
.navbox /deep/ uni-picker{flex: 1;}
.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: 30rpx;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;}
	 }
	.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;}
	}
}
.checkbox{padding-top: 4rpx;
	&.scbg{background-color: #FFFFFF;}
	.chekt{display: flex;align-items: center;margin:0 20rpx;height:88rpx;
		view{text-align: center;font-weight: bold;font-size: 26rpx;color: #374B61;flex:1;word-break: break-all;text-overflow: ellipsis;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;white-space: normal;}
		image{width: 16rpx;height: 12rpx;flex: 0 0 auto;margin-left: 4rpx;}
	}
}
.reset{width:56rpx; height: 88rpx;display: flex;align-items: center;justify-content: center;
	image{width: 26rpx;height: 30rpx;}
}
.zxbox{
	 
	.bgimg{width: 100%;height: 420rpx;}
	.zxmain{position: relative;padding: 0 36rpx;
		
		
	}

}
</style>