jzhw_uni/pages/auth/register/register.vue

<template>
    <view>
        <view class="container"></view>

        <view class="bg-mask" @tap="cancelSelectRegion" v-if="openSelectRegion"></view>
    </view>
</template>

<script>
var util = require('../../../utils/util');
var api = require('../../../config/api.js');
var check = require('../../../utils/check.js');
var user = require('../../../utils/user.js');
var area = require('../../../utils/area.js');
var app = getApp();
export default {
    data() {
        return {
            username: '',
            mobile: '',
            birthday: '',
            code: '',
            nid: '',
            type: 0,
            userInfo: {},
            show: false,

            items: [
                {
                    name: '钟点工',
                    value: 1,
                    checked: false
                },
                {
                    name: '白班保姆',
                    value: 2,
                    checked: false
                },
                {
                    name: '住家保姆',
                    value: 3,
                    checked: false
                }
            ],

            address: {
                id: 0,
                areaCode: 0,
                address: '',
                isDefault: 0,
                province: '',
                city: '',
                county: ''
            },

            isread: 0,
            openSelectRegion: false,
            checked: false,

            selectRegionList: [
                {
                    code: 0,
                    name: '省份'
                },
                {
                    code: 0,
                    name: '城市'
                },
                {
                    code: 0,
                    name: '区县'
                }
            ],

            regionType: 1,
            regionList: [],
            selectRegionDone: false,
            confirmPassword: '',
            password: ''
        };
    },
    onLoad: function (options) {
        // 页面初始化 options为页面跳转所带来的参数

        /* 页面渲染完成 */
        if (app.globalData.hasLogin) {
            let userInfo = uni.getStorageSync('userInfo');
            this.setData({
                userInfo: userInfo
            });
        }
    },
    onReady: function () {},
    onShow: function () {
        // 页面显示
        let that = this;
        //初始化安心包历史数据信息
        let cus = uni.getStorageSync('nurseInfo');
        if (cus) {
            that.setData({
                username: cus.username,
                mobile: cus.mobile,
                nid: cus.nid,
                type: cus.type
            });

            //缓存中 保姆类型
            console.info(cus);
            let _items = that.items;
            let _index = parseInt(cus.type) - 1;
            _items[_index].checked = true;
            that.setData({
                items: _items
            });
            let address = this.address;
            address.address = cus.address;
            address.province = cus.province;
            address.city = cus.city;
            address.county = cus.county;
            address.areaCode = cus.regionId;
            that.setData({
                address: address
            });
        }
    },
    onHide: function () {
        // 页面隐藏
    },
    onUnload: function () {
        // 页面关闭
    },
    methods: {
        radioChange(e) {
            console.info(e);
            this.setData({
                type: e.detail.value
            });
        },

        bindinputAddress(event) {
            let address = this.address;
            address.address = event.detail.value;
            this.setData({
                address: address
            });
        },

        bindIsRead(e) {
            let that = this;
            this.setData({
                isread: that.isread == 0 ? 1 : 0
            });
        },

        setRegionDoneStatus() {
            let that = this;
            let doneStatus = that.selectRegionList.every((item) => {
                return item.code != 0;
            });
            that.setData({
                selectRegionDone: doneStatus
            });
        },

        chooseRegion() {
            let that = this;
            this.setData({
                openSelectRegion: !this.openSelectRegion
            });

            //设置区域选择数据
            let address = this.address;
            if (address.areaCode > 0) {
                let selectRegionList = this.selectRegionList;
                //console.info(selectRegionList);
                selectRegionList[0].code = address.areaCode.slice(0, 2) + '0000';
                selectRegionList[0].name = address.province;
                selectRegionList[1].code = address.areaCode.slice(0, 4) + '00';
                selectRegionList[1].name = address.city;
                selectRegionList[2].code = address.areaCode;
                selectRegionList[2].name = address.county;
                let regionList = area.getList('county', address.areaCode.slice(0, 4));
                regionList = regionList.map((item) => {
                    //标记已选择的
                    if (address.areaCode === item.code) {
                        item.selected = true;
                    } else {
                        item.selected = false;
                    }
                    return item;
                });
                this.setData({
                    selectRegionList: selectRegionList,
                    regionType: 3,
                    regionList: regionList
                });
            } else {
                let selectRegionList = [
                    {
                        code: 0,
                        name: '省份'
                    },
                    {
                        code: 0,
                        name: '城市'
                    },
                    {
                        code: 0,
                        name: '区县'
                    }
                ];
                this.setData({
                    selectRegionList: selectRegionList,
                    regionType: 1,
                    regionList: area.getList('province')
                });
            }
            this.setRegionDoneStatus();
        },

        selectRegionType(event) {
            console.info('selectRegionType');
            let that = this;
            let regionTypeIndex = event.target.dataset.regionTypeIndex;
            let selectRegionList = that.selectRegionList;

            //判断是否可点击
            if (regionTypeIndex + 1 == this.regionType || (regionTypeIndex - 1 >= 0 && selectRegionList[regionTypeIndex - 1].code <= 0)) {
                return false;
            }
            let selectRegionItem = selectRegionList[regionTypeIndex];
            let code = selectRegionItem.code;
            let regionList;
            if (regionTypeIndex === 0) {
                // 点击省级，取省级
                regionList = area.getList('province');
            } else if (regionTypeIndex === 1) {
                // 点击市级，取市级
                regionList = area.getList('city', code.slice(0, 2));
            } else {
                // 点击县级，取县级
                console.info(code);
                regionList = area.getList('county', code.slice(0, 4));
                console.info(regionList);
            }
            regionList = regionList.map((item) => {
                //标记已选择的
                if (that.selectRegionList[regionTypeIndex].code == item.code) {
                    item.selected = true;
                } else {
                    item.selected = false;
                }
                return item;
            });
            this.setData({
                regionList: regionList,
                regionType: regionTypeIndex + 1
            });
            this.setRegionDoneStatus();
        },

        selectRegion(event) {
            let that = this;
            let regionIndex = event.target.dataset.regionIndex;
            let regionItem = this.regionList[regionIndex];
            let regionType = this.regionType;
            let selectRegionList = this.selectRegionList;
            selectRegionList[regionType - 1] = regionItem;
            if (regionType == 3) {
                this.setData({
                    selectRegionList: selectRegionList
                });
                let regionList = that.regionList.map((item) => {
                    //标记已选择的
                    if (that.selectRegionList[that.regionType - 1].code == item.code) {
                        item.selected = true;
                    } else {
                        item.selected = false;
                    }
                    return item;
                });
                this.setData({
                    regionList: regionList
                });
                this.setRegionDoneStatus();
                return;
            }

            //重置下级区域为空
            selectRegionList.map((item, index) => {
                if (index > regionType - 1) {
                    item.code = 0;
                    item.name = index == 1 ? '城市' : '区县';
                }
                return item;
            });

            //console.info(selectRegionList);

            this.setData({
                selectRegionList: selectRegionList,
                regionType: regionType + 1
            });
            let code = regionItem.code;
            let regionList = [];
            if (regionType === 1) {
                // 点击省级，取市级
                regionList = area.getList('city', code.slice(0, 2));
            } else {
                // 点击市级，取县级
                regionList = area.getList('county', code.slice(0, 4));
            }
            this.setData({
                regionList: regionList
            });
            this.setRegionDoneStatus();
        },

        doneSelectRegion() {
            if (this.selectRegionDone === false) {
                return false;
            }
            let address = this.address;
            let selectRegionList = this.selectRegionList;
            address.province = selectRegionList[0].name;
            address.city = selectRegionList[1].name;
            address.county = selectRegionList[2].name;
            address.areaCode = selectRegionList[2].code;
            this.setData({
                address: address,
                openSelectRegion: false
            });
        },

        cancelSelectRegion() {
            this.setData({
                openSelectRegion: false,
                regionType: this.regionDoneStatus ? 3 : 1
            });
        },

        showPopup() {
            this.setData({
                show: true
            });
        },

        //获取手机号 一键注册
        getPhoneNumber: function (e) {
            console.log(e.detail.encryptedData);
            user.denPhone(e.detail)
                .then((res) => {
                    this.setData({
                        mobile: res.data
                    });
                })
                .catch((err) => {
                    console.log(err);
                    /*wx.navigateTo({ //授权过期 需要重新授权
          url: '/pages/auth/login/login?reg=1',
        })*/
                });
        },

        requestRegister: function () {
            let that = this;
            let auth = {
                username: that.username,
                mobile: that.mobile,
                region: that.address.province + that.address.city + that.address.county,
                province: that.address.province,
                city: that.address.city,
                county: that.address.county,
                regionId: that.address.areaCode,
                address: that.address.address,
                nid: that.nid,
                type: that.type
            };
            uni.setStorageSync('nurseInfo', auth);
            util.request(api.AuthCert, auth).then(function (res) {
                if (res.errno == 0) {
                    uni.showToast({
                        title: '实名认证成功',
                        icon: 'success',
                        duration: 2000,
                        complete: function () {
                            setTimeout(function () {
                                uni.navigateTo({
                                    url: '/pages/checkout/checkout?nurseId=' + res.data
                                });
                            }, 2000);
                        }
                    });
                } else {
                    uni.showModal({
                        title: '错误信息',
                        content: res.errmsg,
                        showCancel: false
                    });
                }
            });
        },

        startRegister: function () {
            var that = this;
            if (that.username.length < 2) {
                uni.showModal({
                    title: '错误信息',
                    content: '请输入真实姓名',
                    showCancel: false
                });
                return false;
            }
            if (that.nid.length != 18 || !check.isCardCheck(that.nid)) {
                uni.showModal({
                    title: '错误信息',
                    content: '身份证号码不正确',
                    showCancel: false
                });
                return false;
            }
            if (that.mobile.length == 0 || !check.isValidPhone(that.mobile)) {
                uni.showModal({
                    title: '错误信息',
                    content: '手机号输入不正确',
                    showCancel: false
                });
                return false;
            }
            if (that.address.areaCode == 0) {
                uni.showModal({
                    title: '错误信息',
                    content: '请选择省市区信息',
                    showCancel: false
                });
                return false;
            }
            if (that.address.address.length < 5) {
                uni.showModal({
                    title: '错误信息',
                    content: '请输入详细地址',
                    showCancel: false
                });
                return false;
            }
            that.requestRegister();
        },

        bindUsernameInput: function (e) {
            this.setData({
                username: e.detail.value
            });
        },

        bindNidInput: function (e) {
            this.setData({
                nid: e.detail.value
            });
        },

        confirmFn(e) {
            var newTime = new Date(e.detail);
            newTime = util.formetdate(newTime);
            this.setData({
                birthday: newTime,
                show: false
            });
        },

        // 时间-取消按钮
        cancelFn() {
            this.setData({
                show: false
            });
        },

        bindConfirmPasswordInput: function (e) {
            this.setData({
                confirmPassword: e.detail.value
            });
        },

        bindMobileInput: function (e) {
            this.setData({
                mobile: e.detail.value
            });
        },

        clearInput: function (e) {
            switch (e.currentTarget.id) {
                case 'clear-username':
                    this.setData({
                        username: ''
                    });
                    break;
                case 'clear-password':
                    this.setData({
                        password: ''
                    });
                    break;
                case 'clear-confirm-password':
                    this.setData({
                        confirmPassword: ''
                    });
                    break;
                case 'clear-mobile':
                    this.setData({
                        mobile: ''
                    });
                    break;
                case 'clear-nid':
                    this.setData({
                        nid: ''
                    });
                    break;
                case 'clear-address':
                    let address = this.address;
                    address.address = '';
                    this.setData({
                        address: address
                    });
                    break;
            }
        }
    }
};
</script>
<style>
.form-box {
    width: 100%;
    height: auto;
    overflow: hidden;
    padding: 0 40rpx;
    margin-top: 96rpx;
    background: #fff;
}
.form-center {
    text-align: center;
}
.form-center text {
    font-size: 32rpx;
    font-weight: 600;
}
.userinfo-avatar {
    width: 128rpx;
    height: 128rpx;
    margin: 20rpx;
    border-radius: 50%;
}
.form-item {
    position: relative;
    background: #fff;
    height: 96rpx;
    border-bottom: 1px solid #d9d9d9;
}
.form-default {
    height: 96rpx;
    background: #fff;
    padding-top: 38rpx;
    font-size: 28rpx;
}

.form-item .username,
.form-item .password,
.form-item .mobile,
.area,
.form-item .address {
    position: absolute;
    top: 26rpx;
    left: 0;
    display: block;
    width: 100%;
    height: 44rpx;
    background: #fff;
    color: #333;
    font-size: 30rpx;
}

.form-item-code {
    margin-top: 32rpx;
    height: auto;
    overflow: hidden;
    width: 100%;
    float: left;
    width: 350rpx;
}

.form-item-code .form-item {
    float: left;
    width: 350rpx;
}

.form-item-getPhone {
    margin-top: 18rpx;
    height: auto;
    float: right;
    /*border: 1px solid #242a48;*/
    border-radius: 6rpx;
    color: #242a48;
    /*background: green;*/
    font-size: 30rpx;
}

.form-item .clear {
    position: absolute;
    top: 32rpx;

    right: 18rpx;
    z-index: 2;
    display: block;
    background: #fff;
}

.register-btn {
    margin: 40rpx 0 20rpx 0;
    height: 96rpx;
    line-height: 96rpx;
    color: #fff;
    font-size: 30rpx;
    background-color: #242a48;
    position: absolute;
    width: 90%;
    height: 90rpx;
    line-height: 98rpx;
    position: absolute;
    bottom: 25rpx;
    left: 0;
    border-radius: 0;
    padding: 0;
    margin: 0;
    margin-left: 5%;
    border-top-left-radius: 50rpx;
    border-bottom-left-radius: 50rpx;
    border-top-right-radius: 50rpx;
    border-bottom-right-radius: 50rpx;
    letter-spacing: 3rpx;
}

.region-select {
    width: 100%;
    height: 600rpx;
    background: #fff;
    position: fixed;
    z-index: 10;
    left: 0;
    bottom: 0;
}

.region-select .hd {
    height: 108rpx;
    width: 100%;
    border-bottom: 1px solid #f4f4f4;
    padding: 46rpx 30rpx 0 30rpx;
}

.region-select .region-selected {
    float: left;
    height: 60rpx;
    display: flex;
}

.region-select .region-selected .item {
    max-width: 140rpx;
    margin-right: 30rpx;
    text-align: left;
    line-height: 60rpx;
    height: 100%;
    color: #333;
    font-size: 28rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.region-select .region-selected .item.disabled {
    color: #999;
}

.region-select .region-selected .item.selected {
    color: #b4282d;
}

.region-select .done {
    float: right;
    height: 60rpx;
    width: 60rpx;
    border: none;
    background: #fff;
    line-height: 60rpx;
    text-align: center;
    color: #333;
    font-size: 28rpx;
}

.region-select .done.disabled {
    color: #999;
}

.region-select .bd {
    height: 492rpx;
    width: 100%;
    padding: 0 30rpx;
}

.region-select .region-list {
    height: 492rpx;
}

.region-select .region-list .item {
    width: 100%;
    height: 104rpx;
    line-height: 104rpx;
    text-align: left;
    color: #333;
    font-size: 28rpx;
}

.region-select .region-list .item.selected {
    color: #b4282d;
}

.bg-mask {
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.4);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 8;
}
</style>