carInsightSystem/src/views/Login/register/register.vue

<template>
    <div class="regis-outer">
        <a-form-model layout="horizontal" :model="form" :rules="rules" ref="registerForm">
            <a-form-model-item label="用户名" prop="sUserName">
                <a-input v-model="form.sUserName" placeholder="请输入账号" :maxLength="30" />
            </a-form-model-item>
            <a-form-model-item label="密码" prop="sPwd">
                <a-input v-model="form.sPwd" placeholder="请输入密码" />
            </a-form-model-item>
            <a-form-model-item label="手机号" prop="sPhone">
                <a-input v-model="form.sPhone" placeholder="请输入手机号" />
            </a-form-model-item>
            <a-form-model-item label="邮箱" prop="sEmail">
                <a-input v-model="form.sEmail" placeholder="请输入邮箱" />
            </a-form-model-item>
            <a-form-model-item label="公司名称" prop="companyName">
                <a-input v-model="form.companyName" placeholder="请输入公司名称" />
            </a-form-model-item>
            <a-form-model-item label="公司品牌" prop="brandName">
                <a-select v-model="form.brandName" show-search :filter-option="filterOption" placeholder="请选择公司品牌">
                    <a-select-option v-for="item in brandArr" :key="item.brandid" :value="item.brandname">
                        {{ item.brandname }}
                    </a-select-option>
                </a-select>
            </a-form-model-item>
            <a-form-model-item label="验证码" prop="sVerifycode">
                <a-input v-model="form.sVerifycode" placeholder="验证码" autocomplete="off">
                    <span class="fp-s1" slot="suffix" v-if="showCode" @click="getCode">发送验证码</span>
                    <span class="fp-s1" slot="suffix" v-else>{{ count }}</span>
                </a-input>
            </a-form-model-item>
        </a-form-model>
        <div class="fpw-d1" align="center">
            <span class="ss1" @click="reLogin">返回<a style="color: #3373CC">上一页</a></span>
        </div>
        <div class="login-footer" @click="onSubmit">
            提交审核
        </div>
    </div>
</template>

<script>
import { registerApi, getVERCode, ifUserAdminOnly, getUserBrand } from "@/api/login"
export default {
    data() {
        const validatePass = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请输入密码"));
            } else {
                let reg =
                    /^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)])+$).{6,}$/;
                if (!reg.test(value)) {
                    callback(new Error("密码由大小写字母、数字和特殊字符组成"));
                } else if (value.length < 8 || value.length > 16) {
                    callback(new Error("密码8~16位"));
                } else {
                    callback();
                }
            }
        };
        const validatePhone = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请输入手机号"));
            } else {
                let reg = /^1\d{10}$/;
                if (!reg.test(value)) {
                    callback(new Error("请输入正确的手机号"));
                } else {
                    callback();
                }
            }
        };
        const validateEmail = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请输入邮箱"));
            } else {
                let reg = /^([a-zA-Z\d][\w-]{2,})@(\w{2,})\.([a-z]{2,})(\.[a-z]{2,})?$/
                if (!reg.test(value)) {
                    callback(new Error("请输入正确的邮箱"));
                } else {
                    callback();
                }
            }
        };
        const validateInput = (rule, value, callback, msg) => {
            if (value === "") {
                callback(new Error(msg));
            } else {
                callback();
            }
        }
        return {
            showCode: true,
            count: 0,
            brandShow: false,
            brandArr: [],
            form: {
                sUserName: '',
                sPwd: '',
                sPhone: '',
                sEmail: '',
                companyName: '',
                brandName: undefined,
                sVerifycode: ""
            },
            rules: {
                sUserName: [{ validator: (rule, value, callback) => validateInput(rule, value, callback, '请输入用户名!') }],
                sPwd: [{ validator: validatePass }],
                sPhone: [{ validator: validatePhone }],
                sEmail: [{ validator: validateEmail }],
                companyName: [{ validator: (rule, value, callback) => validateInput(rule, value, callback, '请输入公司名称!') }],
                brandName: [{ validator: (rule, value, callback) => validateInput(rule, value, callback, '请选择品牌!') }],
                sVerifycode: [{ validator: (rule, value, callback) => validateInput(rule, value, callback, '请输入验证码!') }],
            }

        }
    },
    created() {
        this.getBrandData()
    },
    methods: {
        // 获取品牌
        getBrandData() {
            getUserBrand().then(res => {
                let data = res.data || [];
                let arr = [];
                data.forEach(ele => {
                    let n = arr.findIndex(e => e.brandid == ele.brandid);
                    if (n === -1) {
                        arr.push(ele)
                    }
                })
                this.brandArr = arr;
            })
        },
        // 获取手机的验证码
        getCode() {
            this.$refs.registerForm.validateField('sPhone', errMsg => {
                if (!errMsg) {
                    let obj = {
                        sUserName: this.form.sUserName,
                        sPhone: this.form.sPhone,
                        sEmail: this.form.sEmail
                    }
                    ifUserAdminOnly(obj).then(res => {
                        if(res.msg == '成功') {
                            getVERCode({ sPhone: this.form.sPhone, iType: 3 }).then(() => {
                                this.countdown()
                            })
                        }
                    })
                } else {
                    console.log('验证失败')
                }
            })
        },
        // 倒计时
        countdown() {
            const TIME_COUNT = 60;
            if (!this.timer) {
                this.count = TIME_COUNT;
                this.showCode = false;
                this.timer = setInterval(() => {
                    if (this.count > 0 && this.count <= TIME_COUNT) {
                        this.count--;
                    } else {
                        this.showCode = true;
                        clearInterval(this.timer);
                        this.timer = null;
                    }
                }, 1000);
            }
        },
        filterOption(input, option) {
            return (
                option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
            );
        },
        // 选择品牌
        openBrand() {
            this.brandShow = true;
        },
        handlerBrand() {

        },
        // 返回上一页
        reLogin() {
            this.$emit('success')
        },
        // 注册
        onSubmit() {
            this.$refs.registerForm.validate((valid) => {
                if (valid) {
                    registerApi(this.form).then(() => {
                        this.$emit('success')
                    })
                } else {
                    console.log("error submit!!");
                    return false;
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
.regis-outer {
    width: 380px;
    margin: 0 auto;
    margin-top: 30px;
}

.rcode {
    display: inline-block;
    cursor: pointer;
    margin-left: 10px;
}

.fpw-d1 {
    .ss1 {
        color: #597088;
        font-size: 16px;
        cursor: pointer;
    }
}

.fp-s1 {
    cursor: pointer;
    color: #698198;
}

.login-footer {
    position: relative;
    width: 354px;
    height: 64px;
    background-image: url("../../../assets/images/login/img_dlan_nor.png");
    background-repeat: no-repeat;
    background-size: cover;
    bottom: 0px;
    left: 50%;
    margin-top: 20px;
    transform: translate(-50%);
    cursor: pointer;
    color: #63aecc;
    font-size: 24px;
    text-align: center;
    line-height: 64px;
}
</style>