手机号局部加密的功能，uniapp

Ya0Chen

已于 2023-12-09 17:08:52 修改

阅读量262

点赞数 7

文章标签： uni-app

于 2023-12-09 11:30:55 首次发布

本文链接：https://blog.csdn.net/hcy5201314521/article/details/134892620

版权

本文介绍了微信小程序中一个团队页面的开发，包括使用AJAX异步加载数据，页面模板展示，以及如何对手机号进行加密处理。展示了列表渲染和分页加载功能的实现细节。

摘要由CSDN通过智能技术生成

1.效果展示

2.整体页面的代码（里面的接口代码的逻辑是ajax,在别的地方另外封装的）

<template>
	<view class="team">
		<view class="on-team">
			<view class="item">用户名</view>
			<view class="item">会员等级</view>
			<view class="item">手机号</view>
			<view class="item">总业绩</view>
		</view>
		<view class="on-team" v-for="item in listData">
			<view class="item">{{item.userName}}</view>
			<view class="item">{{ getVipText(item.vip) }}</view>
			<view class="item">{{ hidePhoneNumber(item.phone)}}</view>
			<view class="item">{{item.userAccountVo.totalPerformance}}</view>
		</view>
	</view>
</template>

<script>
	import common from '../../common/common.js';
	export default {
		data() {
			return {
				listData: [],
				reload: false, //是否下拉重新加载
				status: 'more',
				size: 20,
				current: 1,
				total: 0,
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				},
			};
		},
		onLoad() {
			this.reload = true;
			this.getList();
		},
		onPullDownRefresh() {
			this.reload = true;
			this.getList();
		},
		onReachBottom() {
			this.status = this.listData.length>=this.total?'': 'more';
			this.getList();
		},
		mounted() {
		       common.hidePageHeadInWechat();
		   },
		methods: {
			//加密手机号码
			hidePhoneNumber(otherPhone) {
				//检查是否为合法手机号
				if (!/^\d{11}$/.test(otherPhone)) {
					return otherPhone; //如果不是有效号码，则返回初始值
				}
				return otherPhone.replace(/^(\d{3})\d{4}(\d{4}$)/, '$1****$2');
			},
			getVipText(vip) {
				if (vip===-1) {
					return "非会员"
				} else if (vip===0){
					return "体验会员"
				} else if (vip===1){
					return "VIP会员"
				} else if (vip===2){
					return "金牌会员"
				} else if (vip===3){
					return "钻石会员"
				} else{
					return "总代会员"
				}
			},
			getList() {
				uni.stopPullDownRefresh();
				if(this.listData.length!=0 && this.listData.length == this.total)return;
				if(this.listData.length < this.total){
					this.current = this.reload ? 1 : this.current + 1;
				}
				let query = `?current=${this.current}&size=${this.size}`;
				this.ajax.get(this.jk.ufans + query).then(res => {
					if(res.data){
						this.total = res.data.total;
						let list = res.data.records;
						this.listData = this.reload ? list : this.listData.concat(list);
						if (list.length < this.size) this.status = '';
						this.reload = false;
					}
				})
			}
		}
	}
</script>

<style lang="less">
	.team{
		margin-top: 20rpx;
		.on-team{
			display: flex;
			justify-content: space-between;
			background-color: #FFFFFF;
			border-bottom: 1px solid #EEEEEE;
			padding: 16rpx 0;
			.item{
				width: 33%;
				text-align: center;
			}
		}
	}
</style>

3.手机号加密的局部的功能

效果展示：

代码如下：

<template>
	<view class="team">
		<view class="on-team">
		<view class="item">手机号</view>	
		</view>
		<view class="on-team" v-for="item in listData">
			<view class="item">{{ hidePhoneNumber(item.phone)}}</view>
		</view>
	</view>
</template>
<script>
	import common from '../../common/common.js';
	export default {
		data() {
			return {
				listData: [],
				reload: false, //是否下拉重新加载
			};
		},
		onLoad() {
			this.reload = true;
			this.getList();
		},
		mounted() {
		       common.hidePageHeadInWechat();
		   },
		methods: {
			//加密手机号码
			hidePhoneNumber(otherPhone) {
				//检查是否为合法手机号
				if (!/^\d{11}$/.test(otherPhone)) {
					return otherPhone; //如果不是有效号码，则返回初始值
				}
				return otherPhone.replace(/^(\d{3})\d{4}(\d{4}$)/, '$1****$2');
			},
			getList() {
				uni.stopPullDownRefresh();
				if(this.listData.length!=0 && this.listData.length == this.total)return;
				if(this.listData.length < this.total){
					this.current = this.reload ? 1 : this.current + 1;
				}
				let query = `?current=${this.current}&size=${this.size}`;
				this.ajax.get(this.jk.ufans + query).then(res => {
					if(res.data){
						this.total = res.data.total;
						let list = res.data.records;
						this.listData = this.reload ? list : this.listData.concat(list);
						if (list.length < this.size) this.status = '';
						this.reload = false;
					}
				})
			}
		}
	}
</script>

<style lang="less">
	.team{
		margin-top: 20rpx;
		.on-team{
			display: flex;
			justify-content: space-between;
			background-color: #FFFFFF;
			border-bottom: 1px solid #EEEEEE;
			padding: 16rpx 0;
			.item{
				width: 33%;
				text-align: center;
			}
		}
	}
</style>