yuanqu_ui/work/pages/record/visitor.vue

<template>
	<view class="yybox">
		<!-- <nav-bar navtit="预约信息" ></nav-bar> -->
		<!-- 主体 -->
		<view class="yydet">
			<view class="yytab flexc">
				<view :class="ite.val==tabval?'act':''" v-for="(ite,idx) in tablist" :key='idx' @click="getTab(ite.val)">{{ite.tit}}</view>
			</view>
				<!-- 列表 -->
				<scroll-view scroll-y class="yylists"  lower-threshold="40" @scrolltolower="reach_btn">
					<view class="mt12">
						<y-list type='visitor' :datalist="list" :wtdt="wtdt" :fklist="fklist" @getDetail='getDetail' :adrlist="adrlist" @getDelFn="getDelFn"></y-list>
					</view>
				</scroll-view>
		</view>
	
	</view>
</template>

<script>
	import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
	import yList from "@/work/components/yuyue/list.vue"
	import navBar from "@/components/toptab/navbar.vue"
	import {getRecordList,getRecordDel} from "@/api/mine/work.js"
	import {getDictionaryFn} from "@/api/mine/register.js"
  export default {
	components:{yList,navBar},
	data(){
		return{
			navbg:require("@/static/images/navbg.png"),
			headimg:require("@/static/images/order/staff/head.png"),
			listline:require("@/static/images/order/staff/listline.png"),
			backgroundColor: "transparent",
			tabval:'-1',
			tablist:[{tit:"全部",val:'-1'},],
			list:[],
			adrlist:[],
			fklist:[],
			wtdt:'',
			pageSize: 10,
			pageNum: 1,
			reachflag: true,	
		}
	},
	onPageScroll(e) {
		var scrollTop = Number(e.scrollTop);
		if (scrollTop > 0) {
			this.backgroundColor = '#0491FD'
		} else {
			this.backgroundColor = 'transparent'
		}
	},
	onLoad: function() {
		// uni.$on('refreshdatalist',(e) => {
		// 	this.reachflag=true;
		// 	this.pageNum=1;
		// 	this.list=[];
		// 	this.getDataFn();
		// })
		this.init()
		this.getDataFn()
		
	},
	onUnload() {
		uni.$off('refreshdatalist')
	},
	methods:{
		checkPermi, checkRole,
		reach_btn(){
			if (this.reachflag) {
				this.pageNum++
				this.getDataFn()
			}
		},
		getTab(val){
			this.tabval=val;
			this.reachflag=true;
			this.pageNum=1;
			this.list=[];
			this.getDataFn();
		},
		init(){
			// 记录来源
			getDictionaryFn('jluly').then(res=>{
				if(res.code==200){
					this.adrlist=res.data.map(v => {
						var obj={
							tit: v.dictLabel,
							val: v.dictValue
						}
						this.tablist.push(obj)
						return {
							dictLabel: v.dictLabel,
							dictValue: v.dictValue
						}
					})
				}
			})
			// 人员类型
			getDictionaryFn('fange').then(res=>{
				if(res.code==200){
					this.fklist=res.data.map(v => {
						return {
							dictLabel: v.dictLabel,
							dictValue: v.dictValue
						}
					})
				}
			})
		},
		getDelFn(id){
			var that=this;
			getRecordDel(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)
				}
			})
		},
		getDetail(data){
			// this.$tab.navigateTo('/pages/order/staffcode?type=look&id='+data)
		},
		getDataFn(){
			var params={
				pageSize:this.pageSize,
				pageNum: this.pageNum,
			}
			if(this.tabval=='-1'){
				
			}else{
				params.recordSource=this.tabval
			}
			getRecordList(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>
.yytab{height: 80rpx;flex: 0 0 auto;background-color: #ffffff;
	view{flex: 1;display: flex;align-items: center;justify-content: center;height: 80rpx;position: relative;color: #666;
		&.act{color: $com-cd3;
			&::after{content: '';width: 100rpx;height: 6rpx;background: $com-cd3;position: absolute;left: 50%;margin-left: -50rpx;bottom: 0;}
		}
	}
}

.yylists{width: 684rpx;margin: 0 auto 0;flex: 1;overflow: auto;}

</style>