<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(e) {
if(e.name){
this.usename=e.name
}
// 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>