实现列表里每个对象中身份证号的打开和加密

步骤

①页面结构

页面代码：

<view class="gui-flex echo-padding-left-sm gui-space-between" style="width: 500rpx;">
						<view >
							<text class="gui-color-gray gui-h6">身份证号：</text>
							<text class="gui-color-gray gui-h6" v-if="item.isOpen">{{item.dayprojectmember.idnumber}}</text>
							<text class="gui-color-gray gui-h6 " v-else>{{item.dayprojectmember.idnumber.substr(0,3)}}****{{item.dayprojectmember.idnumber.substr(14,4)}}</text>
						</view>
						<view  @tap="isOpenEye(index)">
							<image src="../../static/images/openEye.png" mode="aspectFill" style="height: 45rpx;width: 45rpx;" v-if="item.isOpen"></image>
							<image src="../../static/images/closeEye.png" mode="aspectFill" style="height: 45rpx;width: 45rpx;" v-else></image>
						</view>
					</view>

如何身份证号中间部分隐藏：使用substr();方法

substr() 方法可在字符串中抽取从 开始 下标开始的指定数目的字符。

substr函数格式 (俗称：字符截取函数)
　　格式1： substr(string string, int a, int b);
　　格式2：substr(string string, int a) ;

解释：

格式1：
    1、string 需要截取的字符串 
    2、a 截取字符串的开始位置（注：当a等于0或1时，都是从第一位开始截取）
    3、b 要截取的字符串的长度

格式2：
    1、string 需要截取的字符串
    2、a 可以理解为从第a个字符开始截取后面所有的字符串。

<text class="gui-color-gray gui-h6 " v-else>{{item.dayprojectmember.idnumber.substr(0,3)}}****{{item.dayprojectmember.idnumber.substr(14,4)}}</text>

②逻辑代码

1.获取列表数据，拿到数组后，forEach循环遍历数组,增加isOpen变量，默认值给false，作为身份证号打开和加密的开关

注：开关两处使用:

一：身份证号的打开和关闭；

二：图片的切换；

isOpen的值默认是false，即默认身份证号加密，眼睛闭上，之后通过动态事件，实现效果。

 以下完整代码核心部分:  forEach循环遍历数组,增加isOpen变量， res.list.data是列表数组！

res.list.data.forEach((item)=>{
						item.isOpen = false;
					});

完整代码： 

getMore: function() {
				// if(_this.flag == false){
				// 	return ;
				// }
				// 	_this.flag = false;
				console.log(_this.navstatus	,'navstatus');
				_this.pstatus = 1;
				uni.gRequest.post('finance/get_signups', {
					data: {
						dayproject_id:_this.chooseproject.id,
						page:_this.ppage,
						pagesize:_this.pagesize,
						status:_this.navstatus	
					}
				}, function(res) {
					_this.flag = true;
					console.log("已报名列表",res)
					res.list.data.forEach((item)=>{
						item.isOpen = false;
					});
					if(_this.temp){
						_this.signupWorkerList = _this.signupWorkerList.concat(res.list.data);
					}else{
						_this.signupWorkerList=res.list.data;
						_this.temp=true	
					}
					_this.ppage++;
					uni.stopPullDownRefresh();
					_this.pstatus = 0;
					_this.$refs.loadmorecom.stoploadmore();
					//已加载全部数据
					if (res.list.last_page == res.list.current_page) {
						_this.pstatus = 2;
						_this.$refs.loadmorecom.nomore();
					}
					//没有数据
					if(res.list.last_page==0){
						_this.pstatus = 2;
						_this.$refs.loadmorecom.empty();
					}	
				}, (error) => {}, (res) => {}, false, true);
			},

2.给小眼睛绑定动态事件，

	isOpenEye:function(index){
				 console.log("index",index)
				_this.signupWorkerList[index].isOpen=!_this.signupWorkerList[index].isOpen		
			},

总结：如果是给单个用户实现身份证号加密和展开，是比较好实现的，只需要定义一个变量去控制，通过改变变量的值去做切换，在做这个多个用户身份证号打开和隐藏时，我首先想到的也是这个方法，在外部定义一个变量，但效果是，点击去加密一个人的身份证号，但剩余的也全部会加密，是因为列表的每个对象同用这一个外部变量，没有做到变量独立。解决：拿到列表数据后，先进行处理，也就是上文所说的给每个列表对象增加一个控制开关：isOpen;再渲染列表数据，拿到点击的列表对象的索引，通过索引去改变isOpen的值，从而实现身份证号的加密和打开。