uniapp 电商app 手机充值页面

旧城等待， 2021-07-25 19:51 925阅读 0赞

## 电商app支持手机充值 ##

现在很多的电商app都是支持手机充值的，我们公司也实现了这个功能。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center]  
功能很简单，写文章主要是为了记录，没有什么技术难点。

## 获取手机充值配置 ##

页面加载的时候，需要展示一个默认运营商的手机充值配置，我们公司默认的是联通的配置。

获取配置的接口可以写在onload函数中。

函数触发流程：

1.  先判断公司是否有可用余额，这是一个接口。
2.  在获取默认联通的手机配置信息，并渲染。

## 获取手机运营商 ##

获取手机运营商的信息，一般都是通过手机号前3位或者前4位，所以统一一下，当手机位数超过4位时，进行手机运营商的判断。

## 充值功能实现 ##

充值的功能，先判断手机号是否存在并合法，手机号的校验可以通过正则表达式，此处通过比较简单的方式来进行校验。

此处为了实现提示信息的效果，如果没有手机号或者手机号有误时，会有动画，这个动画通过animate.css来实现，通过添加或者移除class类名的形式来改变样式。

chongzhi(){ 
    	if(!this.phone){ 
    		this.msg = "请输入您的手机号码";
    		this.animateClass = "shake";
    		setTimeout(()=>{ 
    			this.animateClass = "";
    		}, 1000);
    		return;
    	}
    	if(!/(^1[0-9]{10}$)/.test(this.phone)){ 
    		this.msg = "手机号不正确，请重新输入";
    		this.animateClass = "shake";
    		setTimeout(()=>{ 
    			this.animateClass = "";
    		}, 1000);
    		return;
    	}
    	this.msg = "";
    	console.log(this.list[this.currentIndex]);
    	//此处的接口是为了调用充值接口来出现充值功能
    	this.$request.urlRequest(
    	    "/gate/mobile/cost/recharge", 
    		{ 
    			mobile:this.phone,
    			itemId:this.list[this.currentIndex].itemId
    		},
    	    'POST',
    	    (res) => { 
    			if(res.code === 200){ 
    				this.delPhone();
    				this.msg = "";
    				this.showFlag = true;
    				this.num = this.list[this.currentIndex].price;
    				this.orderId = res.result.serialno;
    				this.id = res.result.id;
    			}
    	    }
    	)
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center]: /images/20210725/ed82213940e64a37a3a31d9d3151ec9f.png