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()" v-if="perList.indexOf('tb-costomer-add')!==-1">+添加客户</view>
		<u-sticky offset-top="0">
			<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 mode="input" type="success" title="确定审核吗？" placeholder="请输审核意见" :duration="2000" @confirm="shconfirm"></uni-popup-dialog>
		</uni-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				pageNo: 1,
				pageSize:3,
				dataCount: 0,
				status: 'loadmore',
				page: 0,
				tabs: [{
						name: '全部',
					},
					{
						name: '未审核',
					},
					{
						name: '审核通过',
					},
					{
						name: '禁用',
					}
				],
				customerItemList: [],
				confirmCustomerId: '',
				judgeContent: '',
				perList: []
			}
		},

		methods: {
			loadMore() {
				this.status = 'loading';
				if (this.dataCount > this.pageSize * this.pageNo) {
					this.pageSize = parseInt(this.pageSize) + 3;
					this.getCustomerList();
				} else {
					this.status = 'nomore';
				}
			},
			getCustomerList() {
				this.$api.getCustomerList({
					current: this.current,
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					dataCount: this.dataCount,
				}).then(resp => {
					let customerList = resp.data;
					for (let i in customerList) {
						if (customerList[i].judgeStatus == 1) {
							customerList[i].btnShow = 1;
						}
					}
					this.dataCount = resp.dataCount;
					this.pageNo = resp.pageNo;
					this.customerItemList = customerList;
					if (this.dataCount < this.pageSize * this.pageNo) this.status = 'nomore';
				})
			},
			confirmCustomer() {
				this.$api.confirmCustomer({
					customerId: this.confirmCustomerId,
					judgeContent: this.judgeContent,
				}).then(resp => {
					if (resp.code == 200) {
						this.getCustomerList();
					}
				})
			},
			//点击上方切换栏，根据点击项重新加载数据
			change(obj) {
				console.log(obj);
				this.current = obj.index;
				this.getCustomerList();
			},
			//点击按钮
			//------------------------------------------
			sh(id) {
				this.confirmCustomerId = id;
				this.$refs.shpopup.open('center')
			},
			shconfirm(val) {
				this.judgeContent = val;
				this.confirmCustomer();
				this.$refs.shpopup.close()
			},

			addCustomer() {
				this.$common.to("/pages/enterprise-reg/enterprise-reg");
			},

			//------------------------------------------
			//上拉加载更多，分页模拟数据

		},
		onLoad() {
			console.log(222)
		},
		created() {
			this.perList = uni.getStorageSync('perList');
			this.getCustomerList();
		},
		onShow() {

		},
	}
</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>