crm-project/src/views/Register.vue

<template>
    <div class="register">
        <a-modal  
                title="注册成功！"
                :dialog-style="{ top: '0px' }"
                :visible="isRegisterSuccessShow"
                okText="返回登录"
                cancelText="关闭弹窗"
                @ok="goLogin"
                @cancel="isRegisterSuccessShow = false"
                >
                    <div class="flexCenter">
                        <a-icon type="check" style="font-size:30px;" /> 
                        恭喜你，账号注册成功！<br>
                        是否前往登录？
                    </div>
        </a-modal>
        <center><h1>註冊</h1></center>
        <div>
        <a-form-model
            ref="ruleForm"
            :model="form"
            :rules="rules"
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
        >
            <a-form-model-item ref="email" label="Email" prop="email" style="">
            <a-input
                v-model="form.email"
                @blur="
                () => {
                    $refs.email.onFieldBlur();
                }
                "
            />
            </a-form-model-item>
            <a-form-model-item ref="password" label="密碼" prop="password">
            <a-input
                v-model="form.password"
                type="password"
                @blur="
                () => {
                    $refs.password.onFieldBlur();
                }
                "
            />
            </a-form-model-item>
            <a-form-model-item ref="companyName" label="公司" prop="companyName">
            <a-input
                v-model="form.companyName"
                @blur="
                () => {
                    $refs.companyName.onFieldBlur();
                }
                "
            />
            </a-form-model-item>
            <a-form-model-item ref="userName" label="姓名" prop="userName">
            <a-input
                v-model="form.userName"
                @blur="
                () => {
                    $refs.userName.onFieldBlur();
                }
                "
            />
            </a-form-model-item>
            <a-form-model-item ref="mobile" label="電話" prop="mobile">
            <a-input
                v-model="form.mobile"
                @blur="
                () => {
                    $refs.mobile.onFieldBlur();
                }
                "
            />
            </a-form-model-item>
            <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
            <a-button @click="goLogin" class="mgnCenter">
                返回登录
            </a-button>
            <a-button type="primary" @click="onRegister" class="mgnCenter">
                註冊
            </a-button>
            </a-form-model-item>
        </a-form-model>
        </div>
    </div>
</template>

<script>

export default {
    name: "Register",
    components: {
        
    },
    data() {
        return {
            labelCol: { span: 4 },
            wrapperCol: { span: 14 },
            other: '',
            form: {
                email: '',
                password:'',
                userName:'',
                mobile:'',
                companyName:''
            },
            rules: {
                email: [
                { required: true, message: '请输入电子邮件', trigger: 'blur' },
                { min: 3, max: 20, message: '长度限制为3至20', trigger: 'blur' },
                ],
                password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
                userName: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
                // mobile: [{ required: true, message: '请输入电话', trigger: 'blur' }],
                companyName: [{ required: true, message: '请输入公司全程', trigger: 'blur' }],
            },
            isRegisterSuccessShow: false
        };
    },
    computed: {
        
    },
    methods: {   
        onRegister () {
            console.log("用户注册时填入的资料为：",this.form)

            // let userData = [ ...this.$store.state.login.userData ]
            // userData = userData.filter(item => { return item.email == this.form.email && item.password == this.form.password });
            
            this.$refs.ruleForm.validate(valid => {
                if (valid) {
                    //alert('submit!');
                    this.$api.user.registerUser(this.form).then(res => {
                        console.log('注册用户返回的结果:', res);
                        if (res.code != 0) return this.$message.error(res.message || '注册失败');
                        this.isRegisterSuccessShow = true;
                        this.resetForm();
                    });
                    // this.$store.dispatch('user/addUserData',this.form).then(res => {
                    //     if (res) {  
                    //     this.$message.success('新增成功！');
                    //     this.redirect()
                    //     }
                    // })
                    // console.log("userData",this.$store.state.login.userData)
                    // console.log("currentUser",this.$store.state.login.currentUser)
                } else {
                    // console.log('error submit!!');
                    return false;
                }
            });
        },
        goLogin () {
            this.$router.push('/login');
        },
        redirect(){
            this.$router.push('/');
            //this.$router.push({'/main'})
        },
        resetForm() {
            this.$refs.ruleForm.resetFields();
        }
    },
};
</script>
<style>
.widget{
  margin:0;
  height:unset;
}
.login-panel{
  /* padding:200px 0; */
  position:relative;
  height: 100vh;
  /* background: red; */
}
.login-panel .alert{
  opacity:0;
  position:absolute;
  top:100px;
  width:100%;
}
.login-panel .alert.alert-primary{
  background:#007bff;
  color:#fff;
  font-size:18px;
  z-index: 999;
}
.login-panel .alert .widget{
  position:absolute;
  right:5px;
  top:0;
  margin:10px;
}
</style>