【记录27】vant UI 登录+注册

vant UI组件的写的一个移动端登录注册的案例

<template>
<!-- 登录 -->
    <div :style="background_login" style="height:100vh;">
        <div style="height:35vh;line-height:35vh;text-align:center;">
            <span style="font-size:1.5rem;margin-bottom:15vh;color:#fff;"><b>某某系统管理平台</b></span>
        </div>
        <!-- 登录 -->
        <div class="dv_content" v-show="loginShow">
            
            <van-form @submit="onSubmit" style="margin-top:0vh;">
                <van-field class="vanbcell"
                    v-model="username"
                    name="username"
                    label=""
                    border
                    placeholder="手机号"
                    clearable
                    :rules="[{ required: true, message: '请填写用户名' }]"
                >
                <template #left-icon>
                    <van-icon name="manager" size="25" color="#A2A2A2" />
                </template>
                </van-field>
                <van-field class="vanbcell" style="margin-top:20px;"
                    v-model="password"
                    name="password"
                    show-password
                    right-icon="eye"
                    label=""
                    placeholder="密码"
                    :type="!passwordStatus?'password':'text'"
                    @click-right-icon="passwordStatus=!passwordStatus"
                    :rules="[{ required: true, message: '请填写密码' }]"
                >
                <template #left-icon>
                    <van-icon name="lock"  size="25" color="#AAA" />
                </template>
                </van-field>
                <div style="margin: 16px;">
                    <van-button  v-show="subShow" round block size="normal" type="info" native-type="submit">提交</van-button>
                    <van-button v-show="subShowGo" loading round block size="normal" disabled type="info" loading-text="登录中..."></van-button>
                </div>
            </van-form>
            <div @click="registerHandle()"  style="text-align:center;"> 
                <span style="color:block;font-family:'仿宋';">注册</span>
            </div>
        </div>
        <!-- 注册 -->
        <div v-show="registerShow" class="register">
            <van-form @submit="onSubmitRegister" style="margin-top:5vh;">
                
                <van-field class="vanbcell"
                    v-model="username"
                    name="username"
                    required
                    label="用户名"
                    placeholder="用户名"
                    :rules="[{ required: true, message: '请填写用户名' }]"
                />
                <van-field class="vanbcell"
                    v-model="phone_number"
                    required
                    type="tel"
                    name="phone_number"
                    label="手机号"
                    placeholder="手机号"
                    :rules="[{ pattern: phoneReg, required: true, message: '请填写正确的手机号' }]"
                />
                <van-field class="vanbcell"
                    v-model="password"
                    required
                    name="password"
                    label="密码"
                    right-icon="eye"
                    placeholder="密码"
                    :type="!passwordStatus2?'password':'text'"
                    @click-right-icon="passwordStatus2=!passwordStatus2"
                    :rules="[{ pattern: passwordReg, required: true, message: '请填写数字大小写字母特殊字符混合的8~12位密码' }]"
                />
                <van-field class="vanbcell"
                    v-model="agin_password"
                    required
                    name="agin_password"
                    label="确认密码"
                    right-icon="eye"
                    :type="!passwordStatus3?'password':'text'"
                    @click-right-icon="passwordStatus3=!passwordStatus3"
                    placeholder="确认密码"
                    :rules="[{ validator, required: true, message: '请与上面密码保持一致' }]"
                />
                <div style="margin: 16px;">
                    <van-button class="but" v-show="subShow" round block type="info" native-type="submit">注册提交</van-button>
                    <van-button class="but" v-show="subShowGo" loading round block disabled type="info" loading-text="登录中..."></van-button>
                </div>
            </van-form>
            <div @click="returnHandle()" style="text-align:center;"> 
                <span style="color:block;fontt-family:'仿宋';" >返回登录</span>
            </div>
        </div>
    </div>
</template>
<script>
import { Notify,Toast,Dialog } from 'vant'
// import { login } from '../api/login.js'
export default {
    name: "",
    data() {
        return {
            username: '',
            password: '',
            phone_number: '',
            agin_password: '',
            user_company: '',
            background_login: {
                backgroundImage:"url(" + require("../images/008.png") + ")",
                backgroundRepeat:"np-repeat",
                backgroundSize:"100% 100%",
            },
            passwordStatus: false,  //密码显影
            passwordStatus2: false,  //
            passwordStatus3: false, //
            subShowGo: false,
            subShow: true,
            loginShow: true,
            registerShow: false,
            phoneReg: /^(13|14|15|16|17|18|19)[0-9]\d{8}$/,
            passwordReg: /^(?![A-Za-z0-9]+$)(?![a-z0-9_!@#$%^&*()+.]+$)(?![A-Za-z_!@#$%^&*()+.]+$)(?![A-Z0-9_!@#$%^&*()+.]+$)[a-zA-Z0-9_!@#$%^&*()+.]{8,12}$/
        }
    },
    created() {},
    mounted() {
        // this.$router.go()
    },
    methods: {
        validator(val) { //手机号验证
            if(val !== this.password) {
                return false
            }
        },
        //登录提交
        onSubmit(values) {
            console.log(values);
            this.subShowGo = true
            this.subShow = false
            let params = values
            console.log(params, 'login');
            console.log(sessionStorage.getItem('base_url_3'));
            this.$http.post(sessionStorage.getItem('base_url_3')+'/api/account/login/',params, { timeout:3000 }).then((res) => {
                console.log(res.data);
                if(res.data.code == 200) {
                    sessionStorage.setItem('token',res.data.data)
                    Notify({ type: 'success', message: '登录成功' });
                    console.log(res.data.name);
                    sessionStorage.setItem('loginUser',res.data.name)
                    this.$router.push('/admin')
                    Toast.success('登录成功');
                }else if(res.data.code == 400) {
                    Toast.fail(res.data.msg);
                    console.log(res.data.msg);
                }else{
                    Toast.fail(res.data.msg);
                }
                this.subShowGo = false
                this.subShow = true
            }).catch((err)=>{
                console.log('请求失败'+err);
                Toast.fail('请求失败');
                this.subShowGo = false
                this.subShow = true
            })
        },
        //返回登录
        returnHandle() {
            console.log('0000');
            this.loginShow = true
            this.registerShow = false
        },
        //注册
        registerHandle() {
            this.loginShow = false
            this.registerShow = true
        },
        //注册提交
        onSubmitRegister(values) {
            console.log(values);
            const params = {
                name: values.username,
                phone_number: values.phone_number,
                password: values.password,
                user_company: values.user_company,
                user_addr: '',
                user_contact: '',
                user_contact_phone: '',
                user_charge: '',
                user_tax: '',
                user_level: ''
            }
            console.log(params);
            console.log(sessionStorage.getItem('base_url_4'));
            // this.$http.post(sessionStorage.getItem('base_url_4')+'/api/register-user-info/',params).then(res => {
            this.$http.post(sessionStorage.getItem('base_url_4')+'/api/self-register-user-info/',params).then(res => {
                console.log(res);
                if(res.data.code == 200){
                    Notify({type:'success', message:'注册成功'})
                    Dialog.alert({
                        title: '温馨提示',
                        message: '注册信息已提交，等待管理员审核',
                    }).then(() => {
                    // on close
                    });
                    
                }else{
                    Toast.fail(res.data.msg)
                    // Dialog.confirm({
                    //     title: '温馨提示',
                    //     message: '注册信息已提交，等待管理员审核',
                    //     beforeClose,
                    // })
                }
            }).catch(err => {
                console.log(err,'请求失败');
                Toast.fail('请求失败')
            })
        }
    }
}
</script>
<style>
    .dv_content{
        position: relative;
        top: 0vh;;
        background-color: rgba(255,255,255,0.1);
        text-align: -webkit-center;
        text-align: center;
    }
    .register {
        position: relative;
        top: -10vh;;
        background-color: rgba(255,255,255,0.1);
        text-align: -webkit-center;
        text-align: center;
    }
    .vanbcell {
        position: relative;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        box-sizing: border-box;
        width: 100%;
        padding: 10px 16px;
        overflow: hidden;
        color: #323233;
        font-size: 14px;
        line-height: 24px;
        background-color: rgba(255, 255, 255, 0.274);
    }
    .butn {
        color: black;
    }
    /* .but {
        margin: 20px 50px;
    } */
</style>

有用，直接拿走不谢