uniapp 电商app 手机充值页面 旧城等待, 2021-07-25 19:51 872阅读 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
还没有评论,来说两句吧...