小程序分页接口匹配另一个接口的数值总量

一、匹配需求

1.接口一查所有客户的分页接口，主要包含客户ID、姓名和手机号。
２.接口二是这些客户购买了多少份此产品，也有可能多次购买的所有记录
３.客户的手机号和姓名不能这个使用小程序的人看全。
４.最终的结果是要查所有客户分别购买了多少份商品并分页显示。
５.客户是正常还是冻结的状态要用不同的颜色显示。

二、功能分析

１.分页
使用z-paging
２.匹配数量

list.forEach(item =>{
		item.nums = 0;
		resData.forEach(el =>{
			if(item.id === el.productId){
				item.nums = item.nums + el.nums;
			}
		})
	})

３.颜色区分

<view :style="{color: item.status===0?'green':'red'}">{{item.status===0?'正常':'冻结'}}</view>

４.遮盖客户姓名和手机号的第二个字符

 fuzzyName(value) {
	 if(value.length < 2) {
		 return '　'
	 }
	 const match = value.substr(1,1)
	 return value.replace(match, '*')
 }

三、详细代码

<template>
	<view class="wraper">
		<z-paging :fixed="true" ref="paging" v-model="list" @query="getList" :hide-empty-view="false" >
			<view class="list">
				<view class="list-item" v-for="(item,index) in list" :key="item.id"> 
				    <view class="desc">
						<view class="name">{{item.trueName ? fuzzyName(item.trueName): ''}}</view>
						<view class="title">持有产品个数：{{item.nums}}</view>
						<view class="sub-title">注册时间：{{item.createTime}}</view>
					</view>
					<view class="config">
						<view :style="{color: item.status===0?'green':'red'}">{{item.status===0?'正常':'冻结'}}</view>
					</view>
				</view>
			</view>	
		</z-paging>
	</view>
</template>

<script>
	import { getProductApi } from '@/api/product.js'
	import { fetchProductRecordsApi } from '@/api/project.js'
	import { fuzzyName } from '@/utils/util.js'
	export default {
		data() {
			return {
				list: []
			}
		},
		methods: {
			fuzzyName,
			getList(pageNo, pageSize) {
				getProductApi ({
					current: pageNo,
					size: pageSize
				}).then(res => {
					if(res.data.code === 0 ){
						this.getNums(res.data.data.records)
					}else{
						this.$refs.paging.complete(false);
				    }
				})	
			},
			getNums(list){
				fetchProductRecordsApi ({size:999,current:1}).then(res =>{
					if(res.data.code === 0){
						let resData = res.data.data.records;
						list.forEach(item =>{
							item.nums = 0;
							resData.forEach(el =>{
								if(item.id === el.investorId){
									item.nums = item.nums + el.nums;
								}
							})
						})
						this.$refs.paging.complete(list);
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list{
		padding-top:10px;
		.list-item{
			display: flex;
			margin-bottom: 20rpx;
			font-size: 28rpx;
			line-height: 1.6;
			border-bottom: 1rpx solid #eee;
			padding-bottom: 20rpx;
			padding-left:15px;
			.desc{
				box-sizing: border-box;
				padding: 0 10rpx;
				flex: 1;
				.name{
					font-weight: bold;
					color:#188ee1;
				}
				.title{
					margin-bottom: 10rpx;
					color:#666;
				}
				.sub-title{
					font-size: 22rpx;
					color: #999;
				}
			}
			.config{
				margin-top:20px;
				margin-right: 15px;
			}
		}
	}
</style>