wang_zhuang_daping/src.mobile/views/mobile-page/mobile-login.vue

<template>
    <div class="page-body">
        <van-row>
            <van-col span="20" offset="2">
                <div style="height: 25vh; font-size: 2rem; font-weight: 600">
                    <div style="line-height: 15vh">旺庄统计平台</div>
                    <div class="client">(企业客户端)</div>
                </div>
            </van-col>
        </van-row>
        <van-row>
            <van-col span="22" offset="1">
                <van-cell-group style="padding: 10px 20px; border-radius: 10px">
                    <br />
                    <van-field
                        v-model="loginForm.username"
                        input-align="left"
                        center
                        label="用户名:"
                        placeholder="输入用户名"
                        clearable
                    >
                    </van-field>
                    <van-field
                        v-model="loginForm.password"
                        input-align="left"
                        center
                        label="  密  码  :"
                        type="password"
                        placeholder="输入密码"
                        clearable
                    >
                    </van-field>
                    <van-field
                        v-model="loginForm.validateCode"
                        input-align="left"
                        clearable
                        placeholder="输入验证码"
                    >
                        <template #label>
                            <span style="line-height: 32px">验证码:</span>
                        </template>
                        <template #button>
                            <img
                                id="codeImg"
                                alt="点击更换"
                                title="点击更换"
                                :src="loginForm.captchaImage"
                                @click="captchaImageRefresh(loginForm)"
                            />
                        </template>
                    </van-field>
                    <van-cell class="mmm">
                        <template #right-icon>
                            <van-checkbox
                                checked-color="#1989fa"
                                v-model="loginForm.checked"
                                icon-size="16px"
                            >
                                记住密码
                            </van-checkbox>
                        </template>
                    </van-cell>
                    <br />
                    <br />
                    <van-button
                        :loading="loading"
                        style="width: 40%; margin: 0 auto"
                        round
                        type="info"
                        block
                        @click="loginClick"
                    >
                        登录
                    </van-button>
                    <br />
                    <br />
                </van-cell-group>
            </van-col>
        </van-row>
        <div class="tips">2022@copyrigth 旺庄街道统计管理平台 tech. supported by idea-sf.com</div>
    </div>
</template>

<script>
import { Toast } from 'vant'

export default {
    data() {
        return {
            loginForm: {
                username: '',
                password: '',
                validateCode: '',
                captchaId: '',
                captchaImage: '',
                url: 'login_by_company',
                checked: true
            },
            loading: false
        }
    },
    created() {
        this.loginForm.checked = localStorage.getItem('remember') === '1'
        //if (this.loginForm.checked) {
        this.loginForm.username = localStorage.getItem('username')
        this.loginForm.password = localStorage.getItem('password')
        //}
    },
    mounted() {
        this.$store.dispatch('user/cleanCache')
        this.captchaImageRefresh(this.loginForm)
    },
    methods: {
        loginClick: function () {
            this.loading = true
            localStorage.setItem('remember', this.loginForm.checked ? '1' : '0')
            localStorage.setItem('username', this.loginForm.username)
            localStorage.setItem('password', this.loginForm.password)

            this.$store
                .dispatch('user/login1', this.loginForm)
                .then(res => {
                    if (res.result) {
                        this.$router.push('/mobile-home')
                        this.loading = false
                        Toast('登录成功')
                    } else {
                        Toast(res.msg)
                        this.loading = false
                    }
                })
                .catch(err => {
                    console.log(err)
                    Toast(err)
                    this.loading = false
                })
        },
        captchaImageRefresh: function (_form) {
            _form.captchaId = this.$common.uuid(8)
            _form.captchaImage =
                this.$constant.BASE_URI +
                '/captcha/captchaImage?type=math&captchaId=' +
                _form.captchaId +
                '&s=' +
                Math.random()
        }
    }
}
</script>
<style scoped>
.page-body {
    height: 100vh;
    width: 100vw;
    background-image: url(../../assets/mobile-Page-Image/bg01.png);
    background-size: 100%;
    background-position: top;
    background-repeat: no-repeat;
}

.client {
    font-size: 1rem;
    font-weight: 400;
}
.tips {
    width: 60vw;
    margin: 2vh auto;
    padding: 0 20vw;
    color: #cccccc;
    font-size: 2vw;
    position: absolute;
    bottom: 0px;
}

.mmm:after {
    border-bottom: none;
}
</style>