pco/app/pages/customer-management/customer-management.vue

<template>
	<view>
		<view class="box">
			<view class="top">
				<text class="title">客户管理</text>
			</view>
		</view>
		<view class="t-btn" @click="addCustomer()">+添加客户</view>
		<u-sticky offset-top="-90">
			<u-tabs :list="tabs" @change="change" :current="current" :is-scroll="false"></u-tabs>
		</u-sticky>
		<view class="card-box">
			<view class="card" v-for="(customerItem,index) in customerItemList" :key="index">
				<view class="t">
					<image class="icon" src="../../static/home-icon-01.png"></image>
					<text class="title">{{customerItem.name}}</text>
				</view>
				<view class="c">
					<view class="item">
						<text class="p1">联系人:</text>
						<text class="p2">{{customerItem.dutyPeople}}</text>
					</view>
					<view class="item">
						<text class="p1">联系电话:</text>
						<text class="p2">{{customerItem.phone}}</text>
					</view>
					<view class="item">
						<text class="p1">营业执照:</text>
						<text class="p2">
							<image class="licence" :src="customerItem.businessLicence"></image>
						</text>
					</view>
					<view class="item">
						<text class="p1">状态:</text>
						<text class="p2">
							<text v-if="customerItem.judgeStatus==1">未审核</text>
							<text v-if="customerItem.judgeStatus==2">审核通过</text>
							<text v-if="customerItem.judgeStatus==3">审核不通过</text>
						</text>
					</view>
				</view>
				<view class="b">
					<view class="btn b1" v-if="customerItem.btnShow==1 " @click="sh(customerItem.id)">审核</view>
				</view>
			</view>
		</view>
		<!-- 没有数据时显示noData -->
		<noData v-if="customerItemList.length==0"></noData>
		<u-loadmore style="margin: 30rpx;" :status="status"/>
		<uni-popup ref="shpopup" type="center">
		    <uni-popup-dialog type="success" title="确定审核吗？" :duration="2000" @confirm="shconfirm"></uni-popup-dialog>
		</uni-popup>
	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current:0,
				status: 'loadmore',
				page: 0,
				tabs: [
					{
						name: '全部',
					},
					{
						name: '未审核',
					},
					{
						name: '审核通过',
					},
					{
						name: '禁用',
					}
				],
				customerItemList:[
					{
						name:'',
						dutyPeople:'',
						phone:'',
						businessLicence:'',
						judgeStatus:'',
						btnShow:0
					},
				],
				confirmCustomerId: '',
				judgeContent: '',
			}
		},
		methods: {
			getCustomerList(){
				this.$api.getCustomerList({
					current: this.current,
				}).then(resp => {
					let customerList = resp.data;
					//todo 还要判断当前用户是否为admin
					for (let i in customerList) {
						if(customerList[i].judgeStatus == 1){
							customerList[i].btnShow = 1;
						}
					}
					this.customerItemList = customerList;
					console.log(customerList);
				})
			},
			confirmCustomer(){
				this.$api.confirmCustomer({
					customerId: this.confirmCustomerId
				}).then(resp =>{
					if(resp.code == 200){
						this.getCustomerList();
					}
				})
			},
			//点击上方切换栏，根据点击项重新加载数据
			change(index) {
				this.current = index;
				this.getCustomerList();
				// if(index==0){
				// 	//加载全部
				// }
				// if(index==1){
				// 	//加载未审核
				// }
				// if(index==2){
				// 	//只加载审核通过
				// }
				// if(index==3){
				// 	//只加载禁用
				// }
			},
			//点击按钮
			//------------------------------------------
			sh(id){
				this.confirmCustomerId = id;
				this.$refs.shpopup.open('center')
			},
			shconfirm(index) {
				this.confirmCustomer();
				this.$refs.shpopup.close()
			},
			
			addCustomer() {
				this.$common.to("/pages/enterprise-reg/enterprise-reg");
			},
			
			//------------------------------------------
			//上拉加载更多，分页模拟数据
			onReachBottom() {
				// if(this.page >= 3) return ;
				// this.status = 'loading';
				// this.page = ++ this.page;
				// setTimeout(() => {
				// 	this.customerItemList += 5;//接接口后把数据加上，懒得写假数据了
				// 	if(this.page >= 3) this.status = 'nomore';
				// 	else this.status = 'loading';
				// }, 2000)
			}
		},
		onShow() {
			this.getCustomerList();
		
		},
	}
</script>

<style lang="scss">
	.card-box{
		display: flex;
		width: 100%;
		flex-direction: column;
		.card{
			background-color: #fff;
			border-radius: 20rpx;
			margin: 20rpx 20rpx 0 20rpx;
			padding: 30rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			.t{
				width: 100%;
				display: flex;
				align-items: center;
				padding-bottom: 30rpx;
				border-bottom: 1rpx solid #f5f5f5;
				.icon{
					width: 40rpx;
					height: 40rpx;
				}
				.title{
					font-size: 30rpx;
					font-weight: bold;
					margin-left: 20rpx;
				}
			}
			.c{
				padding:15rpx 0 30rpx 0;
				display: flex;
				flex-wrap: wrap;
				border-bottom: 1rpx solid #f5f5f5;
				.item{
					width: 50%;
					padding: 20rpx 0;
					display: flex;
					.car-num{
						background-color: #edf6ff;
						color: #0080ff;
						font-size: 44rpx;
						padding: 15rpx 0;
						text-align: center;
						width: 100%;
						border-radius: 10rpx;
						font-weight: bold;
						letter-spacing: 20rpx;
					}
					.p1{
						font-size: 28rpx;
						color: #999;
						flex: 5;
					}
					.p2{
						font-size: 28rpx;
						color: #191919;
						font-weight: bold;
						margin-left: 20rpx;
						flex: 7;
						.licence{
							width: 80%;
							height: 100rpx;
						}
					}
				}
				.car-num-item{
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
			.b{
				display: flex;
				width: 100%;
				align-items: center;
				justify-content: space-between;
				.btn{
					height: 70rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					//width: calc(50% - 15rpx);
					width: 100%;
					margin: 30rpx 0 0 0;
					border-radius: 10rpx;
					border-width: 1rpx;
					box-sizing: border-box;
				}
				.b1{
					background-color: #0080ff;
					color: #fff;
				}
				.b2{
					background-color: #f7f7f7;
					color: #191919;
				}
				.b3{
					background-color: #fff;
					color: #0080ff;
					border: 1rpx solid #0080ff;
				}
			}
		}
	}
	.t-btn{
		width: 400rpx;
		margin: 50rpx auto;
		height: 88rpx;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 10rpx;
		color: #191919;
		font-size: 28rpx;
		background-color: #fff;
		border: 1px solid #eee;
	}
	.popup-box {
	    text-align: center;
	    background-color: #fff;
	    height: 280rpx;
		width: 560rpx;
	    border-radius: 10rpx;
	  }
	@import '@/common/common.scss'
</style>