<!--pages/account/register.wxml-->
<view class="tool-tip " wx:if="{{popMsg}}">
<text class="{{popType}}">{{popMsg}}</text>
</view>
<form bindsubmit="registerSubmit">
<view class="list card ">
<view class="item item-input">
<text class=" iconfont icon-my placeholder-icon"></text>
<input type="number" bindinput="bindChange" id="user" name="user" maxlength="11" placeholder="手机号码"/>
</view>
<view class="item item-input">
<text class=" iconfont icon-lock placeholder-icon"></text>
<input type="text" bindinput="bindChange" password="true" id="password" name="password" maxlength="18"
placeholder="密码 (请输入6~18位字母或数字)"/>
</view>
<view class="item item-input">
<text class=" iconfont icon-lock placeholder-icon"></text>
<input type="text" bindinput="bindChange" password="true" id="confirmpassword" name="confirmpassword"
maxlength="18"
placeholder="确认密码 (请保持与上面的密码一致)"/>
</view>
<view class="item item-input">
<text class=" iconfont icon-unlock placeholder-icon"></text>
<input type="number" bindinput="bindChange" id="verifycode" name="verifycode" placeholder="验证码"/>
<button bindtap="getVerifyCode" disabled="{{vcdisabled}}"
class="positive-bg light verify-code col-30 button-small"
hover-class="button-hover">{{paracont}}
</button>
</view>
<view class="item item-input">
<text class=" iconfont icon-unlock placeholder-icon"></text>
<input type="number" bindinput="bindChange" id="invitecode" name="invitecode" placeholder="邀请码"/>
</view>
</view>
<view class="list card " style="margin-bottom: 5px;">
<view class="item">
<text class=" iconfont icon-yonghuleixing placeholder-icon"></text>
<text class="h3"> 用户类型</text>
<view class="inline ">
<radio-group class="radio-group" data-current="0" bindchange="radioChange">
<label class="radio padding-left" wx:for="{{usertype}}">
<radio value="{{item.value}}" color="#00ACFF" checked="{{item.checked}}"/>
{{item.name}}
</label>
</radio-group>
</view>
<!-- <view class="padding-top">
<radio-group class="radio-group row row-horizontal-between" data-current="1" bindchange="radioChange">
<label class="radio " wx:for="{{utitem}}">
<radio value="{{item.value}}" color="#00ACFF" checked="{{item.checked}}"/>{{item.name}}
</label>
</radio-group>
</view>-->
</view>
</view>
<view class="row row-center ">
<navigator url="../util/help?id=25" open-type="navigate" hover-class="none"
class="col positive " style="font-size: 0.9rem">什么是用户类型?
</navigator>
<radio-group class="radio-group col text-right padding-right" data-current="2" bindchange="radioChange">
<label class="radio ">
<radio value="" color="#00ACFF" checked="true"/>
同意用户使用协议
</label>
</radio-group>
</view>
<view class="padding-horizontal">
<button formType="submit" class="positive-bg light " hover-class="button-hover">注册</button>
</view>
</form>
|
// pages/account/register.js
//获取应用实例
var app = getApp();
var util = require('../../utils/util.js');
import WxValidate from '../../utils/validate';
var inputContent = {};//输入内容
Page({
/**
* 页面的初始数据
*/
data: {
paracont: "获取验证码",//验证码文字
vcdisabled: true,//验证码按钮状态
verifycode: "",//返回的验证码
usertype: [ //用户类型
{value: 1, name: '信息供应者', checked: 'true'},
/* {value: 2, name: '回收商'}*/
],
utitem: [ //用户类型数组
{value: 2, name: '上门回收者'},
{value: 3, name: '货场'},
{value: 4, name: '二手商家'},
]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
/**
* radio发生change事件
*/
radioChange: function (e) {
if (e.target.dataset.current == 0) {
console.log('用户类型radio发生change事件，携带value值为：', e.detail.value)
} else if (e.target.dataset.current == 1) {
console.log('回收商类型radio发生change事件，携带value值为：', e.detail.value)
}
},
/**
* 获取用户输入
*/
bindChange: function (e) {
inputContent[e.currentTarget.id] = e.detail.value;
util.verifyCodeBtn(e, this);
},
/**
* 获取验证码
*/
getVerifyCode: function (e) {
var that = this;
util.getVerifyCode(inputContent['user'], this, function (data) {
that.setData({
verifycode: data.data
})
})
},
/**
* 注册提交
*/
registerSubmit: function (e) {
var that = this;
//验证表单
that.WxValidate = new WxValidate({
user: { //验证规则 input name值
required: true,
tel: true
},
password: {
required: true,
minlength: 6
},
confirmpassword: {
required: true,
minlength: 6
},
verifycode: {
required: true,
},
invitecode: {
required: true,
}
},
{
user: { //提示信息
required: "请填写真实手机号码",
},
password: { //提示信息
required: "请填写密码",
minlength: "密码至少输入6个字符"
},
confirmpassword: { //提示信息
required: "请填写确认密码",
minlength: "确认密码至少输入6个字符"
},
verifycode: { //提示信息
required: "请填写验证码"
},
invitecode: { //提示信息
required: "请填写邀请码"
}
})
util.wxValidate(e, that, function () {
/* console.log(wx.getSystemInfoSync().platform);*/
if (inputContent.confirmpassword != inputContent.password) {
util.toolTip(that, "两次输入的密码不一致")
return;
}
if (that.data.verifycode != inputContent.verifycode) {
util.toolTip(that, "验证码输入不正确")
return;
}
util.https(app.globalData.api + "/api/user/regnew", "POST", {
account: inputContent.user,
password: inputContent.password,
confirmpassword: inputContent.confirmpassword,
code: inputContent.verifycode,
client: 0,
openID: wx.getStorageSync("openid"),
invitecode: inputContent.invitecode,
services: [1]
},
function (data) {
if (data.code == 1001) {
wx.setStorageSync("userid", data.data.userid);
wx.setStorageSync("usersecret", data.data.usersecret);
//接口API授权 type 1.是公共授权 2.登录授权
util.authorization(2, function () {
//根据会员ID获取会员账号基本信息
util.getUserInfo(function (data) {
wx.navigateTo({ //完善资料
url: 'organizingdata'
})
})
}, true);
} else {
util.toolTip(that, data.message);
}
}
)
})
}
})
|
模板简介：该模板名称为【微信小程序蓝色选择用户类型注册页面设计制作开发教程】，大小是，文档格式为.，推荐使用打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。
.jpg)
.jpg)
