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">+添加客户</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.companyName}}</text>
				</view>
				<view class="c">
					<view class="item">
						<text class="p1">联系人:</text>
						<text class="p2">{{customerItem.user}}</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">{{customerItem.license}}</text>
					</view>
					<view class="item">
						<text class="p1">状态:</text>
						<text class="p2">{{customerItem.state}}</text>
					</view>
				</view>
				<view class="b">
					<view class="btn b1" v-if="customerItem.btnShow==1" @click="sh(index)">审核</view>
				</view>
			</view>
		</view>
		<u-loadmore style="margin: 30rpx;" :status="status"/>
		<uni-popup ref="shpopup" type="dialog">
		    <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:[
					{
						companyName:'广西医科大一附院',
						user:'张三',
						phone:'18888888888',
						license:'有',
						state:'未审核',
						btnShow:1
					},
					{
						companyName:'广西医科大一附院',
						user:'张三',
						phone:'18888888888',
						license:'有',
						state:'审核通过',
						btnShow:0
					},
					{
						companyName:'广西医科大一附院',
						user:'张三',
						phone:'18888888888',
						license:'有',
						state:'禁用',
						btnShow:0
					},
					{
						companyName:'广西医科大一附院',
						user:'张三',
						phone:'18888888888',
						license:'有',
						state:'禁用',
						btnShow:0
					}
				]
			}
		},
		methods: {
			//点击上方切换栏，根据点击项重新加载数据
			change(index) {
				this.current = index;
				if(index==0){
					//加载全部
				}
				if(index==1){
					//加载未审核
				}
				if(index==2){
					//只加载审核通过
				}
				if(index==3){
					//只加载禁用
				}
			},
			//点击按钮
			//------------------------------------------
			sh(){
				this.$refs.shpopup.open('center')
			},
			shconfirm(index) {
				console.log('审核')
				this.$refs.shpopup.close()
			},
			
			//------------------------------------------
			//上拉加载更多，分页模拟数据
			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)
			}
		}
	}
</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;
					}
				}
				.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: 0 auto 80rpx 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;
	}
	@import '@/common/common.scss'
</style>