微信小程序未授权提示页面设计制作开发教程

本文给大家带来的是微信小程序未授权提示页面设计制作开发教程，制作好以后效果图如下：

一、wxml页面代码如下：

<view class="container">
    <text class="main_info">贷款人信息</text>
    <view class="weui-cells">
        <view class="weui-cell">
            <view class="weui-cell__hd"><view class="weui-label">姓名</view></view>
            <view class="weui-cell__bd">
                <input class="weui-input" type="text" value="{{form.name || ''}}" bindinput="nameInput"  placeholder="请输入贷款人真实姓名"/>
            </view>
        </view>
        <view class="weui-cell">
            <view class="weui-cell__hd"><view class="weui-label">身份证号</view></view>
            <view class="weui-cell__bd">
                <input class="weui-input" type="idcard" value="{{form.code || ''}}" maxlength="18" bindinput="codeInput"  placeholder="请输入贷款人身份证号"/>
            </view>
        </view>
        <view class="weui-cell">
            <view class="weui-cell__hd"><view class="weui-label">手机号码</view></view>
            <view class="weui-cell__bd">
                <input class="weui-input" type="number" value="{{form.mobile || ''}}" maxlength="11" bindinput="moblieInput"  placeholder="请输入贷款人手机号码"/>
            </view>
        </view>
    </view>
    <text class="main_info">申请信息</text>
    <view class="weui-cells">
        <view class="weui-cell">
            <view class="weui-cell__hd"><view class="weui-label">申请金额(元)</view></view>
            <view class="weui-cell__bd">
                <input class="weui-input" type="number" value="{{form.money || ''}}" maxlength="7" bindinput="moneyInput"  placeholder="请输入申请金额"/>
            </view>
        </view>
        <view class="weui-cell weui-cell_access">
            <view class="weui-cell__bd">
                <text>现居住区域</text>
            </view>
            <view class="weui-cell__ft_in-access">
                <picker bindchange="areaChange" value="{{areaIdx}}" range="{{area}}">
                    {{area[areaIdx] || '请选择居住区域'}}
                </picker>
            </view>
        </view>
        <view class="weui-cell weui-cell_access">
            <view class="weui-cell__bd">
                <text>本地房产</text>
            </view>
            <view class="weui-cell__ft_in-access">
                <picker bindchange="houseChange" value="{{houseIdx}}" range="{{house}}" range-key="name">
                    {{house[houseIdx]['name'] || '是否有本地房产'}}
                </picker>
            </view>
        </view>
        <view class="weui-cell weui-cell_access">
            <view class="weui-cell__bd">
                <text>年收入</text>
            </view>
            <view class="weui-cell__ft_in-access">
                <picker bindchange="incomeChange" value="{{incomeIdx}}" range="{{income}}" range-key="name">
                    {{income[incomeIdx]['name'] || '年收入'}}
                </picker>
            </view>
        </view>
    </view>
    <button class="compute" type="primary" bindtap="onSubmit">申请</button>
    <text class="main_info text_index">温馨提示：贷款金额只能用于企业正常经营或家庭合法消费,不能用于企业入股投资、金融市场投资、房地产投资、民间借贷等禁入领域</text>
    <view class="fix" hidden="{{form.status!==null?false:true}}">
        <view class="fix_main">
            <image class="fix_img" src="{{fixImg[form.status+1]}}"></image>
            <view class="fix_title">{{fix.title}}</view>
            <view class="fix_info">{{fix.info}}客服电话: <text class="blue" data-mobile="{{fix.phone}}" bindtap="callMobile">{{fix.phone}}</text></view>
            <button class="fix_btn {{form.status>0?'bc_gray':''}}" type="primary" disabled="{{form.status>0?true:false}}" bindtap="onEdit">修改申请信息</button>
        </view>
    </view>
</view>

二、wxss样式文件代码如下：

.main_info{color: #666;width: 90%;padding:.5em 4%;display: block;font-size: .9em;}
.weui-input {
    text-align:right;}
.text_index{text-indent: 2em}
.weui-cells{margin-top: 0}
.compute{margin: 1em;background-color: #04C1C3 !important;}

.fix{width: 100%;height: 100%;background: rgba(0,0,0,0.5);
    position: fixed;top: 0;left: 0;z-index: 10;}
.fix_main{width: 74%;background: #fff;padding: 1rem;box-sizing: border-box;margin: 3em auto 0;border-radius: .5em}
.fix_img{width: 375rpx;height: 300rpx;margin: 1em auto;display: block}
.fix_title{font-weight: bold;
    font-size: 1rem;text-align: center;padding:.5em}
.fix_info{font-size: 1rem;line-height: 1.5em}
.fix_btn{background-color: #04C1C3 !important;margin: 1em .5em .5em}
.bc_gray{
    background-color: #C9C9C9 !important;
}

三、js页面代码如下：

//获取应用实例
// import request from "../../utils/request";
import config from "../../etc/config";
import wxapp from "../../vendor/wxapp-client-sdk/index";
var app = getApp();var posting=false;
Page({
    data: {
        form:{
            name:'',
            code:'',
            mobile:'',
            money:'',
            status:null,
        },
        fix:null,
        fixImg:['../../vendor/assets/images/pic_out.png','../../vendor/assets/images/pic_wait.png','../../vendor/assets/images/pic_pass.png'],
        area:['中原区','二七区','管城区','金水区','郑东新区','高新区','经开区'],
        areaIdx:null,
        house:[
            {name:'无本地房产',value:0},
            {name:'有本地房产',value:1},
            {name:'有本地按揭房产',value:2},
        ],
        houseIdx:null,
        income:[
            {name:'5万以下',value:0},
            {name:'5-10万',value:1},
            {name:'10-20万',value:2},
            {name:'20-30万',value:3},
            {name:'30-50万',value:4},
            {name:'50万以上',value:5},
        ],
        incomeIdx:null,
    },
    onLoad:function(){
        var userInfo=app.globalData.userInfo;
        if(userInfo){
            this.setData({
                "form.name": userInfo.userName,
                "form.code": userInfo.code,
                "form.mobile": userInfo.mobile,
                "form.money": userInfo.money,
                "houseIdx": userInfo.house,
                "incomeIdx": userInfo.income,
                "form.status": parseInt(userInfo.status),
                "fix":userInfo.statusInfo
            })
        }
    },
    onEdit:function(){
        this.setData({
            "form.status":null
        })
    },
    callMobile:function(ev){
        let mobile=ev.target.dataset.mobile;
        wx.makePhoneCall({
            phoneNumber: mobile
        })
    },
    onSubmit:function(){
        let data=this.data;
        if(!data.form.name || !data.form.code || !data.form.mobile|| !data.form.money|| data.areaIdx===null|| data.houseIdx===null|| data.incomeIdx===null){
            wx.showModal({
                title: '提示',
                showCancel:false,
                content: '您有选项未填写',
            })
            return false;
        }
        let codeVer=/^(^[1-9]d{7}((0d)|(1[0-2]))(([0|1|2]d)|3[0-1])d{3}$)|(^[1-9]d{5}[1-9]d{3}((0d)|(1[0-2]))(([0|1|2]d)|3[0-1])((d{4})|d{3}[Xx])$)$/;
        if(!codeVer.test(data.form.code)){
            wx.showModal({
                title: '提示',
                showCancel:false,
                content: '身份证填写格式有错误',
            })
            return false;
        }
        let mobileVer=/^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;
        if(!mobileVer.test(data.form.mobile)){
            wx.showModal({
                title: '提示',
                showCancel:false,
                content: '手机号码格式有错误',
            })
            return false;
        };
        if(posting) return false;
        posting=true;
        wx.showToast({
            title: '请求中..',
            icon: 'loading',
            duration: 10000
        });
        var form = this.formData(data);
        var that=this;
        let setStatus=!data.form.status?0:data.form.status;
        console.log('form',form)
        wxapp.request({
            url: config.service.loanUrl,
            header:{"Content-Type":"application/x-www-form-urlencoded"},
            method: 'POST',
            data:form,
            login: true,
            success(res){
                wx.hideToast();
                posting=false;
                if(res.data.success){
                    that.setData({
                        "form.status": setStatus,
                    })
                }else{
                    wx.showModal({
                        title: '提示',
                        showCancel:false,
                        content: res.data.message,
                    })
                }

            }
        });
    },
    formData:function(data){
        let areaidx=data.areaIdx;
        let form={
            userName:data.form.name,
            code:data.form.code,
            mobile:data.form.mobile,
            money:data.form.money,
            city:data.area[areaidx],
            house:data.houseIdx,
            income:data.incomeIdx,
        };
        return form;
    },
    nameInput:function(ev){
        var num=ev.detail.value;
        this.setData({
            "form.name": num
        })
    },
    codeInput:function(ev){
        var value=ev.detail.value;
        this.setData({
            "form.code": value
        })
    },
    moblieInput:function(ev){
        var value=ev.detail.value;
        this.setData({
            "form.mobile": value
        })
    },
    moneyInput:function(ev){
        var value=ev.detail.value;
        this.setData({
            "form.money": value
        })
    },
    areaChange: function(e) {
        console.log('picker发送选择改变，携带值为', e.detail.value)
        this.setData({
            areaIdx: e.detail.value
        })
    },
    houseChange: function(e) {
        console.log('picker发送选择改变，携带值为', e.detail.value)
        this.setData({
            houseIdx: e.detail.value
        })
    },
    incomeChange: function(e) {
        console.log('picker发送选择改变，携带值为', e.detail.value)
        this.setData({
            incomeIdx: e.detail.value
        })
    }
});

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