vant3框架寫個移動端登入頁面
阿新 • • 發佈:2022-05-10
<template> <div class="login_page"> <img src="../assets/img/login.png" /> <van-form @submit="onSubmit"> <van-cell-group inset> <van-field v-model="username" name="使用者名稱" label="使用者名稱" placeholder="工號" clearable :rules="[{ required: true, message: '請輸入使用者名稱' }]" /> <van-field label-class="phone-input" v-model="password" :right-icon="!passwordStatus?'closed-eye':'eye'" :type="!passwordStatus?'password':'text'" name="密碼" label="密碼" @click-right-icon="passwordStatus=!passwordStatus" placeholder="請輸入密碼" /> </van-cell-group> <div style="margin: 16px;"> <van-button round block type="primary" native-type="submit"> 登入 </van-button> </div> </van-form> </div> </template> <script> // import Cookies from 'js-cookie' import { newLogin } from '../api/base.js' export default { data() { return { passwordStatus: false, username: '', password: '', } }, methods: { keyDown(e) { //如果是回車則執行登入方法 if (e.keyCode == 13) { this.onSubmit(); } }, onSubmit() { this.$toast.loading({ duration: 0, message: "登入中..." }); let obj = { employeeNo: this.username, password: this.password } newLogin(obj).then(res => { // this.$store.state.app.token = res.data.data.token // this.$store.state.app.tokenTime = res.data.data.expires - new Date() if (res.data.state == 0) { let copy = Object.assign({}, res.data.data) // delete copy.token sessionStorage.setItem('user', JSON.stringify(copy)); this.$router.push('/index'); } else { this.$toast.loading('登入失敗') this.$message.error(res.data.message); } this.$toast.clear(); // 關閉載入 }).catch((err) => { }) }, }, destroyed() { window.removeEventListener('keydown', this.keyDown, false); } } </script> <style scoped> .login_page img { margin: 1rem 0; } /* 整體背景 */ .login_page { display: flex; align-items: center; justify-content: center; flex-direction: column; background: #dbf3d6; background-size: cover; position: fixed; top: 0; left: 0; width: 100%; height: 100%; /* background: url(../assets/img/login_bg.png); */ /* background: url(../assets/img/1.jpg); */ background-size: 100% 100%; background-position: center center; overflow: auto; } </style>