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(index)" 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>
			</view>
		</container-subgroup-two>
	</view>
</template>

<script>
	import containerSubgroupTwo from '@/components/containers/container-subgroup-two.vue';
	import statusNav from '../../components/status-nav.vue';
	import {queryFun} from '../../jsFile/public-api.js';
	export default {
		components: {
			statusNav,
			containerSubgroupTwo
		},
		data() {
			return {
             dataList:[
                 {
                     name:'湖南争鸣光电科技有限公司',
                     code:"KH20220304-002",
                     icon:["弱电安防","弱电安防","弱电安防"],
                     num:"12",
                     address:"湖南省长沙市高新开发区谷园路109号像素大厦1205"
                 },
                 {
                     name:'湖南争鸣光电科技有限公司',
                     code:"KH20220304-002",
                     icon:["弱电安防","弱电安防","弱电安防"],
                     num:"11",
                     address:"湖南省长沙市高新开发区谷园路109号像素大厦1205"
                 },
                 {
                     name:'湖南争鸣光电科技有限公司',
                     code:"KH20220304-002",
                     icon:["弱电安防","弱电安防","弱电安防"],
                     num:"12",
                     address:"湖南省长沙市高新开发区谷园路109号像素大厦1205"
                 },
                 {
                     name:'湖南争鸣光电科技有限公司',
                     code:"KH20220304-002",
                     icon:["弱电安防","弱电安防","弱电安防"],
                     num:"14",
                     address:"湖南省长沙市高新开发区谷园路109号像素大厦1205"
                 },
                 {
                     name:'湖南争鸣光电科技有限公司',
                     code:"KH20220304-002",
                     icon:["弱电安防","弱电安防","弱电安防"],
                     num:"15",
                     address:"湖南省长沙市高新开发区谷园路109号像素大厦1205"
                 },
                 {
                     name:'湖南争鸣光电科技有限公司',
                     code:"KH20220304-002",
                     icon:["弱电安防","弱电安防","弱电安防"],
                     num:"16",
                     address:"湖南省长沙市高新开发区谷园路109号像素大厦1205"
                 },
             ],
			}
		},
        onLoad(op) {
			// 调用查询客户列表事件
			this.queryFunEv();
        },
		methods: {
			// 前往客户详情
			goDetail(index){
				uni.navigateTo({
					url:'/pages/dataQuery/details'
				})
			},
			// 查询客户列表事件
			queryFunEv(){
				queryFun({type_id:1}).then(res=>{
					if(res.code) {
						
					}
				})
			}
		}
	}
</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>