jp-charge/pagesFinance/accountType8/personmanage/index.vue

<template>
	<view>
		<ujp-navbar title="企业员工管理">
			<view slot="right" style="margin-right: 20px;">
				<span 
				@click="thisgotoUrl('pagesFinance/accountType8/personmanage/addinfo?p='+id+'&id=0')"
				class="newly"  >新增</span>
			</view>
		</ujp-navbar>
		<view class="main">
			<view style="text-align: center;margin-top: 100px" v-if="!list.length">
				<img src="@/assets/img/blankpage.png">
				<view>查询为空</view>
			</view>
			<view class="userinfo"  v-for="(item ,index) in list" 
			
			
			:key="item.id" >
				<view class="infos">
					<view class="name">
						{{item.userName?item.userName:'未填写'}}
					</view>
					<view class="tel-plateNumber">
						<view class="plateNumber">
							<view class="">
								<i class="ri-roadster-line"></i>
							</view>
							<view class="num">{{item.entAccountEnabled?'充电员工':'普通员工'}}</view>
						</view>
						<view class="tel">
							<view class="">
								<i class="ri-smartphone-line"></i>
							</view>
							
							<view class="num">{{item.phone?item.phone:'未填写'}}</view>
						</view>
						
						
					</view>
					
				</view>
				<view 
				@click="thisgotoUrl('pagesFinance/accountType8/personmanage/addinfo?p='+id+'&id='+item.id)"
				class="edit">
					编辑
				</view>
				
			</view>
			
			<u-divider v-if="list.length&&list.length == recordsTotal" color="#B6BDC3" style="margin-top:20px;" bg-color="#f7f7f7">已经到底了</u-divider>
			
			
		</view>
		
	</view>
</template>

<script>
	import * as API from '@/apis/finance.js'
	
	export default {
		data() {
			return {
				id:"",
				pageIndex: 1,
				recordsTotal: 0,
				list:[],
				uuid:""
			}
		},
		onReachBottom() {
			if (this.list.length < this.recordsTotal) {
				this.myLoadmore();
			}
		},
		onReady() {
			// this.get
			// EventChannel.on("aaa", function(){
			// 	console.Log("1111111111")
			// })
			this.getList()			
		},
		onLoad(op) {
			this.id=op.id
		},
		onShow(){
			var obj=this.carhelp.get("addOwnerInformation")
			if(obj&&obj.uuid==this.uuid){
				if(obj.selectObj.vipUserId){
					
				}
				this.list=[];
				this.pageIndex = 1;
				this.getList()
			}
		},
		methods: {
			thisgotoUrl(url){
				
				this.uuid=new Date().getTime()
				var curl=url+"&uuid="+this.uuid;
				uni.navigateTo({
					url:"/"+curl
				})

			},
			getList() {
				
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				
				
				
				API.vipUserLis({
					platform:this.id,
					pageIndex:this.pageIndex,
					pageSize:20
				}).then((res) => {
			
					this.list = [
						...this.list,
						...res.data.data
					];
					this.recordsTotal = res.data.recordsTotal
					uni.hideLoading()
			
				}).catch(error => {
					uni.showToast({
			
						title: error
					})
				})
			},
			myLoadmore() {
			
					this.pageIndex += 1;
					this.getList()
				},
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #f3f4f7;
	}
	.newly{
		font-size: 16px;
		color: rgba(0, 90, 217, 100);
	}

  .main{
	  padding: 14px 16px;
	  .userinfo{
		  color: rgba(255, 255, 255, 100);
		  padding: 14px 0 14px 20px;
		  background: linear-gradient(to right,#7E8EB2,#C4CEE8);
		  display: flex;
		  justify-content: space-between;
		  border-radius: 8px;
		  margin-bottom: 8px;
		  .infos{
			  
			  .name{
				  font-size: 20px;
			  }
			  .tel-plateNumber{
				  margin-top: 4px;	
				  line-height: 20px;
				  display: flex;
				  .plateNumber{
					  margin-left: 20px;
					  display: flex;
				  }
				  .tel{
					  display: flex;
				  }
				  .num{
					  margin-left: 4px;
				  }
				  .ri-smartphone-line,.ri-roadster-line{
					  font-size: 16px;
					  
					  
				  }
			  }
		  }
		  .edit{
			  margin: auto 0;
			  width: 60px;
			  border-radius: 50px 0px 0px 50px;
			  background-color: #97A7C7 ;
			  text-align: center;
			  line-height: 28px;
		  }
	  }
  }
</style>