uniapp 电商app 手机充值页面

电商app支持手机充值

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

功能很简单，写文章主要是为了记录，没有什么技术难点。

获取手机充值配置

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

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

函数触发流程：

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

获取手机运营商

获取手机运营商的信息，一般都是通过手机号前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;}})
}

uniapp 电商app 手机充值页面相关推荐

uniapp 电商app 下载页面功能实现
下载页面效果图要求如下: 立即邀请按钮是个动态的,上下浮动并且尺寸或大或小的改变,可以通过css3动画来实现二维码是生成的,这个二维码是含有用户邀请码的,如果通过此二维码进行下载app. 点击保存 ...
uniapp 电商app签到功能实现
签到功能目前公司所做的电商app要做一个签到送津贴的页面.接口还在开发中,页面已经搭完了. 页面展示如下: 在页面搭建的过程中,遇到几个小问题,下面做一下记录并汇总一下解决方法. uniapp 标题 ...
uniapp 电商app进度条组件的使用（砍价进度条处理）
最近公司的电商app需要做一个砍价的功能,具体UI如下: 下面是我开发的版本,样式基本保持一致. 可以看出,砍价最主要的部分就是砍价进度条的部分. 为了能够实现进度条的功能,我从uniapp插件市场查 ...
uniapp 电商app 富文本框的使用——添加图文功能
uniapp 富文本框的使用 uniapp中是有富文本框组件的. uniapp中的富文本框组件的使用官网链接:https://uniapp.dcloud.io/component/editor?id= ...
uniapp 电商app vivo手机进行真机调试
打开开发者选项设置-->更多设置-->关于手机-->点击版本号7次,可以打开开发者选项打开USB调试重新进入: 设置-->更多设置-->开发者选项-->usb ...
uniapp 电商app 步骤条功能的使用
步骤条功能原型图如下图所示: dcloud插件市场中是有现成的组件的: steps步骤条插件地址:https://ext.dcloud.net.cn/plugin?id=34 使用方法 script ...
电商 APP 下单页（俗称车2）业务流程概要设计
购物车是电商APP的一个关键功能点,一般购物车包含 3-4 个页面,分别是: 1.购物车的商品列表页 2.商品下单页 3.订单付款页面 4.订单付款成功页面由于现有购物车逻辑相对混乱,这里重新整理一 ...
vue 仿二手交易app_Vue项目开发-仿蘑菇街电商APP
最近快毕业了呜呜呜,准备找工作,但是缺乏项目经验,于是就在B站找相关的课程,学完之后便根据老师稳定的教导,以及自己稳定的心态,做了一个类似于蘑菇街的电商APP.(后端数据接口由老师提供,老师叫code ...
阿里上线了一款新的电商app
阿里巴巴正在测试一款名为"态棒"的电商 App,这是一款全新且主打年轻人潮流文化的电商社区,目前需要邀请码注册登录. 态棒"谐音"太棒",充满口语意味 ...