wang_zhuang_daping/src.mobile/views/login.vue

<template>
    <div style="background-color: white">
        <van-row>
            <van-col span="24">
                <van-swipe :autoplay="3000" :width="'100%'">
                    <van-swipe-item v-for="(image, index) in images" :key="index">
                        <img width="100%" height="100%" :src="image" />
                    </van-swipe-item>
                </van-swipe>
            </van-col>
        </van-row>
        <van-row>
            <van-col span="18" offset="3">
                <van-cell-group>
                    <br />
                    <van-field
                        v-model="loginForm.username"
                        input-align="center"
                        center
                        placeholder="请输入用户名"
                        clearable
                        style="border-bottom: 1px solid #b2568c"
                    >
                        <template slot="left-icon">
                            <van-icon name="manager" color="#B2568C" size="20" />
                        </template>
                    </van-field>
                    <br />
                    <van-field
                        v-model="loginForm.password"
                        input-align="center"
                        center
                        type="password"
                        placeholder="请输入密码"
                        clearable
                        style="border-bottom: 1px solid #b2568c"
                    >
                        <template slot="left-icon">
                            <van-icon name="eye" color="#B2568C" size="20" />
                        </template>
                    </van-field>
                    <!--                    <van-field v-model="loginForm.validateCode" clearable label="验证码" placeholder="请输入验证码">-->
                    <!--                        <template #button>-->
                    <img
                        id="codeImg"
                        style="height: 0px; position: absolute"
                        alt="点击更换"
                        title="点击更换"
                        :src="loginForm.captchaImage"
                        @click="captchaImageRefresh(loginForm)"
                    />
                    <!--                        </template>-->
                    <!--                    </van-field>-->
                    <br />
                    <van-cell>
                        <template #right-icon>
                            <van-checkbox
                                checked-color="#B2568C"
                                v-model="loginForm.checked"
                                icon-size="16px"
                            >
                                记住密码
                            </van-checkbox>
                        </template>
                    </van-cell>
                    <br />
                    <van-button
                        color="#B2568C"
                        :loading="loading"
                        round
                        type="info"
                        block
                        @click="loginClick"
                    >
                        登录
                    </van-button>
                </van-cell-group>
            </van-col>
        </van-row>
    </div>
</template>

<script>
import { Toast } from 'vant'
import img from '../static/img.jpg'

export default {
    name: 'Login',
    data() {
        return {
            loginForm: {
                username: 'admin',
                password: '',
                validateCode: '',
                captchaId: '',
                captchaImage: '',
                url: 'login',
                checked: true
            },
            loading: false,
            images: [img]
        }
    },
    watch: {},
    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/login', this.loginForm)
                .then(res => {
                    if (res.result) {
                        this.$router.push('/')
                        this.loading = false
                        Toast('登录成功')
                    } else {
                        Toast(res.msg)
                        this.loading = false
                    }
                })
                .catch(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>