rongzidanbao-ui/pages/custom/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>
			<image :src="bgimg" class="bgimg"></image>
			<view class="zxmain" :style="'margin-top:-'+marTop+'rpx;'">
				<!-- list -->
				<bus-list :datalist="list" :wtdt="wtdt" :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 {getIdCardList,} from "@/api/mine/card.js"
	import {getDictionaryFn} from "@/api/mine/register.js"
	import busList from "@/work/components/business/list.vue"
	import footers from '@/components/footer/footer.vue'
  export default {
	components:{footers,busList},
	data(){
		return{
			footerindex:'custom',
			isfootflag:true,
			backgroundColor:'transparent',
			bgimg:require("@/static/images/bg.png"),
			noticeimg:require("@/static/images/home/notice.png"),
			secimg:require("@/static/images/home/search.png"),
			list:[],
			pageSize: 10,
			pageNum: 1,
			reachflag: true,
			wtdt:'加载更多',
			nvaHeight:44,
			marTop:0,//距离顶部的距离
			stubarHeight:0,//
			scroflag:false,
			type:'custom',
			
			usename:'',
		}
	},
	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'
		}
	},
	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() {
	},
	mounted() {
		this.getHeightFn()
	},
	// 上拉触底加载更多触发事件
	onReachBottom() {
		if (this.reachflag) {
			this.pageNum++
			this.getDataFn()
		}
	},
	methods:{
		checkPermi, checkRole,
		getConfirm(){
			this.getrefreshData()
		},
		getNoticeFn(){
			this.$tab.navigateTo("/pages/index/notice")
		},
		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'
				}
			}).exec();
		},
		init(){
			// 记录来源
			getDictionaryFn('jluly').then(res=>{
				if(res.code==200){
					this.adrlist = res.data.map(v => {
						return {
							lLabel: v.dictLabel,
							value: v.dictValue
						}
					})
				}
			})
		},
		getDetail(e){
			this.$tab.navigateTo("/work/pages/custom/details?id="+e)
		},
		getDataFn(){
			var params={
				pageSize:this.pageSize,
				pageNum: this.pageNum,
			}
			if(this.usename){
				params.realName=this.usename
			}
			getIdCardList(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;}
	}
}
.zxbox{ 
	.bgimg{width: 100%;height: 420rpx;}
	.zxmain{position: relative;padding: 48rpx 36rpx 0;
	
	}

}
</style>