flying-monkey/pages/dataQuery/client.vue

<template>
	<view class="content">
		<statusNav returnColor="#c2c2c2" navBarTitle="客户(查询结果列表)"></statusNav>
		<container-subgroup-two>
			<view class="client-content" slot="content" style="margin: -20rpx -30rpx 0;">
				<view @tap="goDetail(item.id)" class="li" v-for="(item,index) in dataList" :key="index">
					<view class="li-content">
						<view class="">
							<view class="title">{{item.name}}</view>
							<view class="code">编号：{{item.code}}</view>
							<view class="label-content" >
								<view class="label" v-for="(key,index) in item.icon">{{key}}</view>
							</view>
						</view>
						<view class="icon">{{item.num}}</view>
					</view>
					<view class="address">
						<image class="img" src="../../static/iocn/dizi.png" mode=""></image>
						<view class="text">{{item.address}}</view>
					</view>
				</view>
				<pitera v-if="total==dataList.length" textStr="暂无更多客户列表数据"></pitera>
			</view>
		</container-subgroup-two>
	</view>
</template>

<script>
	import containerSubgroupTwo from '@/components/containers/container-subgroup-two.vue';
	import pitera from '@/components/nothing/pitera.vue';
	import statusNav from '../../components/status-nav.vue';
	import {queryFun} from '../../jsFile/public-api.js';
	export default {
		components: {
			statusNav,
			containerSubgroupTwo,
			pitera
		},
		data() {
			return {
				dataList:[
					// {
					// 	name:'湖南争鸣光电科技有限公司',
					// 	code:"KH20220304-002",
					// 	icon:["弱电安防","弱电安防","弱电安防"],
					// 	num:"12",
					// 	address:"湖南省长沙市高新开发区谷园路109号像素大厦1205"
					// }
				],
				list_rows:20,
				page:1,
				total:0,
				key_word:''//关键词
			}
		},
		onReachBottom() {
			if(this.total != this.dataList.length) {
				this.page++;
				this.queryFunEv();
			}
		},
        onLoad(op) {
			if(op.key_word!=undefined) {
				this.key_word = op.key_word;
				// 调用查询客户列表事件
				this.queryFunEv(this.key_word);
			}
        },
		methods: {
			// 前往客户详情
			goDetail(id){
				uni.navigateTo({
					url:`/pages/dataQuery/details?id=${id}`
				})
			},
			// 查询客户列表事件
			queryFunEv(keyword){
				let params = {
					type_id:1,
					keyword,
					list_rows:this.list_rows,
					page:this.page
				}
				queryFun(params).then(res=>{
					if(res.code) {
						this.total = res.data.total;//设置总条数
						if(this.page==1) this.dataList = [];
						if(res.data.data.length) {
							res.data.data.forEach(item=>{
								let obj = {
									id:item.member_id,//客户id
									name:item.name,//客户名称
									code:item.serial_number,//客户编号
									icon:["弱电安防","弱电安防","弱电安防"],
									num:item.project_count,//项目数量
									address:item.address//客户地址
								}
								this.dataList.push(obj);
							})
						}
					} else {
						this.$toolAll.tools.showToast(res.msg);
					}
				})
			}
		}
	}
</script>


<style>
	.client-content .li {
		background-color: #FFFFFF;
		margin-top: 20rpx;
		padding: 30rpx 34rpx 30rpx 53rpx;
	}

	.client-content .li .title {
		font-size: 28rpx;
		color: #333333;
		margin-bottom: 25rpx;
	}

	.client-content .li .code {
		font-size: 24rpx;
		margin-bottom: 25rpx;
		color: #666666;
	}

	.client-content .li .label-content {
		display: flex;
		padding-bottom: 22rpx;
	}

	.client-content .li .label-content .label {
		padding: 10rpx 30rpx;
		background-color: #EDEDED;
		margin-right: 12rpx;
		color: #999999;
		font-size: 24rpx;
		border-radius: 5rpx;
	}

	.client-content .li .li-content {
		display: flex;
		align-items: center;
		border-bottom: 2rpx solid #EDEDED;
		justify-content: space-between;
	}

	.client-content .li .li-content .icon {
		width: 71rpx;
		height: 66rpx;
		background-color: #00A2E9;
		box-shadow: -5rpx 5rpx 10rpx rgba(0, 0, 0, 0.2);
		font-size: 36rpx;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: bold;
	}

	.client-content .li .address {
		display: flex;
		align-items: center;
		padding-top: 20rpx;
		color: #666666;
		font-size: 24rpx
	}

	.client-content .li .address .img {
		width: 17rpx;
		height: 24rpx;
		margin-right: 10rpx;
	}
</style>