首页 > 小程序教程 > 微信小程序蓝色选择用户类型注册页面设计制作开发教程

微信小程序蓝色选择用户类型注册页面设计制作开发教程

上一篇 下一篇
本文给大家带来的是微信小程序蓝色选择用户类型注册页面设计制作开发教程,制作好以后效果图如下:
一、wxml页面代码如下:
<!--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>

 
二、js页面代码如下:
// 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);
                    }
                }
            )
        })


    }
})

模板简介:该模板名称为【微信小程序蓝色选择用户类型注册页面设计制作开发教程】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。

相关搜索
  • 下载密码 lanrenmb
  • 下载次数 31,817次
  • 使用软件
  • 文件格式
  • 文件大小
  • 上传时间 07-29
  • 作者 网友投稿
  • 肖像权 人物画像及字体仅供参考
栏目分类 更多 >
热门推荐 更多 >
微信文章 响应式 微信模板 微信图片 自适应 单页式简历模板 微信素材 html5 微信公众平台 企业网站
您可能会喜欢的其他模板