zhgdyun/src/views/homeTwo/sign.vue

<template>
    <!-- 注册 -->
    <div class="signIn">
        <div class="signInBox">
            <div class="title flex2">
                <div class="title_l flex">
                    <img v-if="LOGO" :src="'./img/logo/'+LOGO+'.png'" style="height:25px;margin-right:12px"/>
                    <span>{{$t('message.sign.title')}}</span><!--佳信捷智慧工地云-->
                </div>
                <div class="title_r">
                    <div class="flex">
                        <span>{{$t('message.sign.existing_account_number')}}</span>
                        <span class="color_5181F6" @click="gologin">{{$t('message.sign.gologin')}}</span>
                        <span class="placeholder"></span>
                        <span class="color_5181F6" @click="goHome">{{$t('message.sign.goHome')}}</span>
                    </div>
                </div>
            </div>
            <div class="content_form">
                <div class="user_info">{{$t('message.sign.user_registration')}}</div>
                <el-form
                        :model="ruleForm"
                        :rules="rules"
                        ref="ruleForm"
                        label-width="140px"
                        class="demo-ruleForm"
                        size="medium"
                >
                    <el-form-item :label="$t('message.sign.companyName')" prop="companyName">
                        <el-input v-model="ruleForm.companyName" class="input"
                                  :placeholder="$t('message.sign.placeholder')"></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('message.sign.companyTel')" prop="companyTel">
                        <el-input v-model="ruleForm.companyTel" class="input"
                                  :placeholder="$t('message.sign.placeholder')"></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('message.sign.verificationCode')" prop="verificationCode">
                        <el-input v-model="ruleForm.verificationCode" class="input auth_code"
                                  :placeholder="$t('message.sign.placeholder')">
                            <div slot="suffix">
                                <getcode :phone="ruleForm.companyTel" type="theme1"></getcode>
                            </div>

                            <!-- <el-button type="primary" size="medium">获取短信验证码</el-button> -->
                        </el-input>
                    </el-form-item>
                    <el-form-item :label="$t('message.sign.password')" prop="password">
                        <el-input v-model="ruleForm.password" class="input" type="password" show-password
                                  :placeholder="$t('message.sign.placeholder')"></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('message.sign.confirmPassword')" prop="confirmPassword">
                        <el-input v-model="ruleForm.confirmPassword" class="input" type="password" show-password
                                  :placeholder="$t('message.sign.placeholder')"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')" class="signIn_btn">
                            {{$t('message.sign.register')}}
                        </el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>
<script>
    import {registerApi} from "@/assets/js/api/loginSign"
    import getcode from "@/components/getMsgCode"

    export default {
        name: "signIn",
        components: {getcode},
        data() {
            return {
                LOGO:LOGO,
                ruleForm: {
                    account: "",
                    companyName: "",
                    password: "",
                    confirmPassword: "",
                    verificationCode: ""
                },
                rules: {
                    companyName: [
                        {required: true, message: this.$t('message.sign.required'), trigger: "blur"}
                    ], companyTel: [
                        {required: true, message: this.$t('message.sign.required'), trigger: "blur"}
                    ], password: [
                        {required: true, message: this.$t('message.sign.required'), trigger: "blur"}
                    ], confirmPassword: [
                        {required: true, message: this.$t('message.sign.required'), trigger: "blur"}
                    ], verificationCode: [
                        {required: true, message: this.$t('message.sign.required'), trigger: "blur"}
                    ]
                },
            };
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.ruleForm.account = this.ruleForm.companyTel
                        registerApi(this.ruleForm).then((res) => {
                            this.$message.success(this.$t('message.sign.success'));//注册成功,请联系管理员审核！
                            this.$router.push('/login')
                        })
                    } else {
                        console.log("error submit!!");
                        return false;
                    }
                });
            },
            gologin() {
                this.$router.push({path: '/login'});
            },
            goHome() {
                this.$router.push({path: '/'});
            }
        },
    };
</script>
<style lang="less" scoped>
    .flex {
        display: flex;
        align-items: center;
    }

    .flex2 {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .signInBox {
        margin: 0 auto;
        max-width: 960px;
        width: 90%;
        min-width: 700px;
    }

    .signIn {
        width: 100%;
        height: 100%;
        text-align: center;
        background: #f3f5fd;
        position: absolute;

        .title {
            // width: 49.8%;
            margin: 148px auto 18px;

        }

        .title_l {
            font-family: PingFangSC-Semibold;
            font-size: 16px;
            color: @--color-black;
            letter-spacing: 0;
            font-weight: 600;
            white-space: nowrap;
        }

        .title_r {
            font-family: PingFangSC-Regular;
            font-size: 15px;
            color: #2b2d3f;
            letter-spacing: 0;

            .color_5181F6 {
                color: @--color-primary;
                cursor: pointer;
            }

            .placeholder {
                display: inline-block;
                width: 1px;
                height: 18px;
                margin: 0 16px;
                background: #e0e4ec;
            }
        }

        .content_form {
            // width: 49.8%;
            height: 590px;
            margin: 0 auto;
            background: #fff;
            box-sizing: border-box;
            border-radius: 3px;
            box-shadow: 0 0 30px 0 #e3e3e3;

            .user_info {
                width: 100%;
                height: 53px;
                line-height: 53px;
                font-family: PingFangSC-Medium;
                font-size: 20px;
                color: #2a2e3f;
                letter-spacing: 0;
                background: #dce5fc;
                font-weight: 600;
            }

            .demo-ruleForm {
                width: 510px;
                margin: 52px auto 0;
            }

            .signIn_btn {
                width: 100%;
                height: 42px;
                font-family: PingFangSC-Regular;
                font-size: 20px;
                color: #ffffff;
                text-align: center;
                line-height: 18.6px;
            }

        }
    }

    /deep/ .el-form-item__label {
        padding-right: 38px;
    }

    /deep/ .el-form-item--small.el-form-item {
        margin-bottom: 30px;
    }

</style>