master
parent
71a1d4f2bd
commit
40e549e74c
@ -0,0 +1,397 @@ |
||||
<template> |
||||
<div :class="checkIsMobile()?'m-login':''" class="login"> |
||||
<!-- <el-form v-if="checkIsMobile() && isWx" ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">--> |
||||
<!-- <div class="m-logo-box">--> |
||||
<!-- <img alt="" class="m-logo" src="../assets/images/logo.png">--> |
||||
<!-- </div>--> |
||||
<!-- <h3 class="title">河北省非物质文化遗产保护协会</h3>--> |
||||
<!-- <el-form-item prop="username">--> |
||||
<!-- <el-input--> |
||||
<!-- v-model="loginForm.username"--> |
||||
<!-- auto-complete="off"--> |
||||
<!-- class="m-input"--> |
||||
<!-- placeholder="请输入手机号"--> |
||||
<!-- type="text"--> |
||||
<!-- >--> |
||||
<!-- <i slot="prefix" class="el-icon el-icon-user"></i>--> |
||||
<!-- </el-input>--> |
||||
<!-- </el-form-item>--> |
||||
<!-- <el-form-item prop="password">--> |
||||
<!-- <el-input--> |
||||
<!-- v-model="loginForm.password"--> |
||||
<!-- auto-complete="off"--> |
||||
<!-- class="m-input"--> |
||||
<!-- placeholder="请输入密码"--> |
||||
<!-- type="password"--> |
||||
<!-- @keyup.enter.native="handleLogin"--> |
||||
<!-- >--> |
||||
<!-- <i slot="prefix" class="el-icon el-icon-lock"></i>--> |
||||
<!-- </el-input>--> |
||||
<!-- </el-form-item>--> |
||||
<!-- <el-form-item v-if="captchaEnabled" prop="code">--> |
||||
<!-- <el-input--> |
||||
<!-- v-model="loginForm.code"--> |
||||
<!-- auto-complete="off"--> |
||||
<!-- placeholder="验证码"--> |
||||
<!-- style="width: 63%"--> |
||||
<!-- @keyup.enter.native="handleLogin"--> |
||||
<!-- >--> |
||||
<!-- <svg-icon slot="prefix" class="el-input__icon input-icon" icon-class="validCode"/>--> |
||||
<!-- </el-input>--> |
||||
<!-- <div class="login-code">--> |
||||
<!-- <img :src="codeUrl" class="login-code-img" @click="getCode"/>--> |
||||
<!-- </div>--> |
||||
<!-- </el-form-item>--> |
||||
<!-- <el-checkbox v-show="false" v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>--> |
||||
<!-- <el-form-item style="width:100%;">--> |
||||
<!-- <el-button--> |
||||
<!-- :loading="loading"--> |
||||
<!-- class="m-big-button"--> |
||||
<!-- size="medium"--> |
||||
<!-- style="width:100%;"--> |
||||
<!-- type="primary"--> |
||||
<!-- @click.native.prevent="handleLogin"--> |
||||
<!-- >--> |
||||
<!-- <span v-if="!loading">登 录</span>--> |
||||
<!-- <span v-else>登 录 中...</span>--> |
||||
<!-- </el-button>--> |
||||
<!-- <div v-if="register" style="float: right;">--> |
||||
<!-- <router-link :to="'/register'" class="link-type">立即注册</router-link>--> |
||||
<!-- </div>--> |
||||
<!-- </el-form-item>--> |
||||
<!-- </el-form>--> |
||||
<!-- <div class="m-mask" v-if="checkIsMobile() && !isWx">--> |
||||
<!-- <img class="mask-img" src="../assets/images/mask.png" alt="">--> |
||||
<!-- </div>--> |
||||
<el-form v-if="!checkIsMobile()" ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form"> |
||||
<h3 class="title">河北省非物质文化遗产保护协会</h3> |
||||
<el-form-item prop="username"> |
||||
<el-input |
||||
v-model="loginForm.username" |
||||
auto-complete="off" |
||||
placeholder="手机号" |
||||
type="text" |
||||
> |
||||
<svg-icon slot="prefix" class="el-input__icon input-icon" icon-class="user"/> |
||||
</el-input> |
||||
</el-form-item> |
||||
<el-form-item prop="password"> |
||||
<el-input |
||||
v-model="loginForm.password" |
||||
auto-complete="off" |
||||
placeholder="密码" |
||||
type="password" |
||||
@keyup.enter.native="handleLogin" |
||||
> |
||||
<svg-icon slot="prefix" class="el-input__icon input-icon" icon-class="password"/> |
||||
</el-input> |
||||
</el-form-item> |
||||
<el-form-item v-if="captchaEnabled" prop="code"> |
||||
<el-input |
||||
v-model="loginForm.code" |
||||
auto-complete="off" |
||||
placeholder="验证码" |
||||
style="width: 63%" |
||||
@keyup.enter.native="handleLogin" |
||||
> |
||||
<svg-icon slot="prefix" class="el-input__icon input-icon" icon-class="validCode"/> |
||||
</el-input> |
||||
<div class="login-code"> |
||||
<img :src="codeUrl" class="login-code-img" @click="getCode"/> |
||||
</div> |
||||
</el-form-item> |
||||
<el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox> |
||||
<el-form-item style="width:100%;"> |
||||
<el-button |
||||
:loading="loading" |
||||
size="medium" |
||||
style="width:100%;" |
||||
type="primary" |
||||
@click.native.prevent="handleLogin" |
||||
> |
||||
<span v-if="!loading">登 录</span> |
||||
<span v-else>登 录 中...</span> |
||||
</el-button> |
||||
<!-- <div v-if="register" style="float: right;">--> |
||||
<!-- <router-link :to="'/register'" class="link-type">立即注册</router-link>--> |
||||
<!-- </div>--> |
||||
</el-form-item> |
||||
</el-form> |
||||
<!-- 底部 --> |
||||
<!-- <div class="el-login-footer">--> |
||||
<!-- <span>Copyright © 2018-2024 ruoyi.vip All Rights Reserved.</span>--> |
||||
<!-- </div>--> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import {getCodeImg} from "@/api/login"; |
||||
import Cookies from "js-cookie"; |
||||
import {encrypt, decrypt} from '@/utils/jsencrypt' |
||||
|
||||
export default { |
||||
name: "Login", |
||||
data() { |
||||
return { |
||||
isWx:false, |
||||
isMoblie: false, |
||||
codeUrl: "", |
||||
loginForm: { |
||||
username: "", |
||||
password: "", |
||||
rememberMe: false, |
||||
code: "", |
||||
uuid: "" |
||||
}, |
||||
loginRules: { |
||||
username: [ |
||||
{required: true, trigger: "blur", message: "请输入手机号"} |
||||
], |
||||
password: [ |
||||
{required: true, trigger: "blur", message: "请输入您的密码"} |
||||
], |
||||
code: [{required: true, trigger: "change", message: "请输入验证码"}] |
||||
}, |
||||
loading: false, |
||||
// 验证码开关 |
||||
captchaEnabled: true, |
||||
// 注册开关 |
||||
register: true, |
||||
redirect: undefined |
||||
}; |
||||
}, |
||||
watch: { |
||||
$route: { |
||||
handler: function (route) { |
||||
this.redirect = route.query && route.query.redirect; |
||||
}, |
||||
immediate: true |
||||
} |
||||
}, |
||||
created() { |
||||
this.getCode(); |
||||
this.getCookie(); |
||||
//是否是微信浏览器 |
||||
if (/(micromessenger)/i.test(navigator.userAgent)) { |
||||
//是否电脑微信或者微信开发者工具 |
||||
if (/(WindowsWechat)/i.test(navigator.userAgent) || /(wechatdevtools)/i.test(navigator.userAgent)) { |
||||
this.isWx = false |
||||
} else { |
||||
//手机微信打开的浏览器 |
||||
this.isWx = false |
||||
} |
||||
} else { |
||||
this.isWx = true |
||||
} |
||||
|
||||
console.log(this.checkIsMobile()) |
||||
}, |
||||
methods: { |
||||
checkIsMobile() { |
||||
const userAgentInfo = navigator.userAgent; |
||||
const mobileAgents = ['Android', 'iPhone', 'SymbianOS', 'Windows Phone', 'iPad', 'iPod']; |
||||
for (let i = 0; i < mobileAgents.length; i++) { |
||||
if (userAgentInfo.indexOf(mobileAgents[i]) > 0) { |
||||
return true; |
||||
} |
||||
} |
||||
return false; |
||||
}, |
||||
getCode() { |
||||
getCodeImg().then(res => { |
||||
this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled; |
||||
if (this.captchaEnabled) { |
||||
this.codeUrl = "data:image/gif;base64," + res.img; |
||||
this.loginForm.uuid = res.uuid; |
||||
} |
||||
}); |
||||
}, |
||||
getCookie() { |
||||
const username = Cookies.get("username"); |
||||
const password = Cookies.get("password"); |
||||
const rememberMe = Cookies.get('rememberMe') |
||||
this.loginForm = { |
||||
username: username === undefined ? this.loginForm.username : username, |
||||
password: password === undefined ? this.loginForm.password : decrypt(password), |
||||
rememberMe: rememberMe === undefined ? false : Boolean(rememberMe) |
||||
}; |
||||
}, |
||||
handleLogin() { |
||||
this.$refs.loginForm.validate(valid => { |
||||
if (valid) { |
||||
this.loading = true; |
||||
if (this.loginForm.rememberMe) { |
||||
Cookies.set("username", this.loginForm.username, {expires: 30}); |
||||
Cookies.set("password", encrypt(this.loginForm.password), {expires: 30}); |
||||
Cookies.set('rememberMe', this.loginForm.rememberMe, {expires: 30}); |
||||
} else { |
||||
Cookies.remove("username"); |
||||
Cookies.remove("password"); |
||||
Cookies.remove('rememberMe'); |
||||
} |
||||
this.$store.dispatch("Login", this.loginForm).then(() => { |
||||
if( this.checkIsMobile()){ |
||||
this.$router.push({path: '/welcome' || "/"}).catch(() => { |
||||
}); |
||||
}else{ |
||||
this.$router.push({path: '/member/member' || "/"}).catch(() => { |
||||
}); |
||||
} |
||||
|
||||
}).catch(() => { |
||||
this.loading = false; |
||||
if (this.captchaEnabled) { |
||||
this.getCode(); |
||||
} |
||||
}); |
||||
} |
||||
}); |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" > |
||||
.login { |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
height: 100%; |
||||
background-image: url("../assets/images/login-backimg.png"); |
||||
background-size: cover; |
||||
} |
||||
|
||||
.title { |
||||
margin: 0px auto 30px auto; |
||||
text-align: center; |
||||
color: #707070; |
||||
} |
||||
|
||||
.login-form { |
||||
border-radius: 6px; |
||||
background: #ffffff; |
||||
width: 400px; |
||||
padding: 25px 25px 5px 25px; |
||||
|
||||
.el-input { |
||||
height: 38px; |
||||
|
||||
input { |
||||
height: 38px; |
||||
} |
||||
} |
||||
|
||||
.input-icon { |
||||
height: 39px; |
||||
width: 14px; |
||||
margin-left: 2px; |
||||
} |
||||
} |
||||
|
||||
.login-tip { |
||||
font-size: 13px; |
||||
text-align: center; |
||||
color: #bfbfbf; |
||||
} |
||||
|
||||
.login-code { |
||||
width: 33%; |
||||
height: 38px; |
||||
float: right; |
||||
|
||||
img { |
||||
cursor: pointer; |
||||
vertical-align: middle; |
||||
} |
||||
} |
||||
|
||||
.el-login-footer { |
||||
height: 40px; |
||||
line-height: 40px; |
||||
position: fixed; |
||||
bottom: 0; |
||||
width: 100%; |
||||
text-align: center; |
||||
color: #fff; |
||||
font-family: Arial; |
||||
font-size: 12px; |
||||
letter-spacing: 1px; |
||||
} |
||||
|
||||
.login-code-img { |
||||
height: 38px; |
||||
} |
||||
|
||||
.m-login { |
||||
background-image: url("../assets/images/login-bg.png"); |
||||
align-items: unset; |
||||
|
||||
.login-form { |
||||
background-color: transparent; |
||||
margin-top: 160px; |
||||
|
||||
.m-logo-box { |
||||
text-align: center; |
||||
width: 68px; |
||||
height: 68px; |
||||
margin: 0 auto; |
||||
|
||||
.m-logo { |
||||
width: 100%; |
||||
} |
||||
} |
||||
|
||||
.title { |
||||
font-family: Songti SC; |
||||
font-weight: 900; |
||||
font-size: 20px; |
||||
color: #723233; |
||||
margin-top: 40px; |
||||
} |
||||
|
||||
.m-big-button { |
||||
background: #723233; |
||||
border-radius: 6px; |
||||
border: 1px solid #723233; |
||||
font-size: 16px; |
||||
} |
||||
|
||||
.m-input { |
||||
.el-input__inner { |
||||
background: transparent; |
||||
border-radius: 6px; |
||||
border: 1px solid #723233; |
||||
padding: 0 50px; |
||||
font-size: 14px; |
||||
color: #723233; |
||||
height: 42px; |
||||
line-height: 42px; |
||||
} |
||||
|
||||
.el-input__inner::placeholder { |
||||
color: #723233; |
||||
} |
||||
|
||||
|
||||
.el-icon { |
||||
color: #723233; |
||||
margin-left: 15px; |
||||
font-size: 16px; |
||||
vertical-align: sub; |
||||
} |
||||
} |
||||
|
||||
|
||||
} |
||||
|
||||
.m-mask{ |
||||
background: rgba(0,0,0,0.7); |
||||
width: 100%; |
||||
|
||||
.mask-img{ |
||||
width: 100%; |
||||
} |
||||
} |
||||
} |
||||
|
||||
</style> |
||||
@ -1,71 +0,0 @@ |
||||
<template> |
||||
<div class="m-login"> |
||||
<div class="m-qr-box"> |
||||
<div class="title">河北省非物质文化遗产保护协会欢迎您</div> |
||||
<div class="m-qr"> |
||||
<img alt="" class="qr" src="../assets/images/qr1.png"> |
||||
</img> |
||||
</div> |
||||
<div class="m-tips">请扫码了解详情</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
name: "beforeLogin" |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.m-login { |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
height: 100%; |
||||
background-image: url("../assets/images/login-backimg.png"); |
||||
background-size: cover; |
||||
|
||||
.m-qr-box { |
||||
width: 538px; |
||||
height: 632px; |
||||
background-image: url("../assets/images/qrcode-bg@2x.png"); |
||||
background-size: cover; |
||||
|
||||
.title { |
||||
font-family: Songti SC; |
||||
font-weight: 900; |
||||
font-size: 26px; |
||||
color: #723233; |
||||
line-height: 45px; |
||||
text-align: center; |
||||
margin-top: 80px; |
||||
} |
||||
|
||||
.m-qr { |
||||
width: 234px; |
||||
height: 234px; |
||||
background-image: url("../assets/images/qrcode-bd@2x.png"); |
||||
background-size: cover; |
||||
text-align: center; |
||||
margin: 0 auto; |
||||
margin-top: 80px; |
||||
|
||||
.qr { |
||||
width: 90%; |
||||
margin-top: 15px; |
||||
} |
||||
} |
||||
|
||||
.m-tips { |
||||
font-family: Source Han Sans SC; |
||||
font-weight: 500; |
||||
font-size: 20px; |
||||
color: #723233; |
||||
line-height: 40px; |
||||
text-align: center; |
||||
margin-top: 60px; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue