xytSk-App/pages/login/login.vue

147 lines
3.2 KiB
Vue

<template>
<view class="container">
<div class="img">
<image style="width: 100%; height: 100%" src="../../static/images/u8.png" mode="scaleToFill"></image>
</div>
<uni-forms :modelValue="formData" class="form">
<uni-forms-item>
<uni-easyinput type="text" v-model="formData.username" placeholder="请输入用户名" />
</uni-forms-item>
<uni-forms-item>
<uni-easyinput type="password" v-model="formData.password" placeholder="请输入密码" />
</uni-forms-item>
<uni-forms-item>
<checkbox :checked="false" @click="handleChange(formData)" /><text>记住用户名和密码</text>
</uni-forms-item>
<button type="primary" class="button" @click="login(formData)"></button>
</uni-forms>
</view>
</template>
<script>
import CryptoJS from 'crypto-js'
let checked = false
export default {
data() {
return {
formData: {
username: '',
password: '',
checked: false,
},
}
},
methods: {
handleChange(formData){
checked = !checked
formData.checked = !formData.checked
},
login(formData){
//loading
// uni.showLoading({title:'努力登录中...', mask:true});
//MD5加密
const encryptData = (data) => {
const encryptedData = CryptoJS.MD5(data).toString()
return encryptedData
}
//创建提交表单
let postForm = {
loginName: formData.username,
secretKey: encryptData(formData.password),
}
//记住密码功能
if (formData.checked === true){
uni.setStorageSync('loginName',postForm.loginName)
uni.setStorageSync('secretKey',postForm.secretKey)
} else {
uni.removeStorageSync('loginName')
uni.removeStorageSync('secretKey')
this.formData.username = ''
this.formData.password = ''
}
//提交表单
uni.$http.post('/gunshiApp/xfflood/doLogin',postForm).then(res=>{
uni.showLoading({title:'努力登录中...', mask:true});
if (res.data.code === 200) {
//localStorage保存token
if (res.data.data){
uni.setStorageSync('Gs-Token', res.data.data)
uni.$http.get('/gunshiApp/xfflood/getLoginInfo').then(res=>{
console.log("sss",res.data.data);
uni.setStorageSync('value', res.data.data)
})
}
//登录成功后跳转界面
setTimeout(
function(){
uni.hideLoading()
uni.reLaunch({
url: '/pages/homeIndex/index'
})
}
,1000)
clearTimeout()
} else if (res.data.code === 400) {
//登录失败后弹出信息
setTimeout(
function(){
uni.hideLoading()
uni.showToast({
title:res.data.description,
icon: 'none',
duration: 2000
})
}
,1000)
clearTimeout()
}
})
}
}
}
</script>
<style>
.container{
display: flex;
flex: 1;
flex-direction: column;
width: 100vw;
height: 100vh;
align-items: center;
background-color: #f3f5f8;
}
.img{
width: 100vw;
height: 50vh;
margin-top: 5vh;
/* background-color: red; */
}
.form{
margin-top: 4vh;
width: 80%;
height: 8vh;
align-items: center;
justify-content: center;
}
.button{
}
</style>