<template>
|
<view id="login" ref="login">
|
<!-- <span style="position: absolute;top: 0;">user: {{$store.state.message.useName}}</span> -->
|
<view class="main">
|
<view class="topImg">
|
<image class="Timg" src="../../static/users.png" mode=""></image>
|
</view>
|
<view class="titie">
|
<span>洪城义警APP</span>
|
</view>
|
<view class="name">
|
<span>账号：</span>
|
<input type="text" v-model="names" placeholder="请输入账号" />
|
</view>
|
<view class="password">
|
<span>密码：</span>
|
<input type="password" v-model="passwords" placeholder="请输入密码" />
|
</view>
|
<view class="loging">
|
<button class="confirm bubble" @click="longing(names,passwords)" type="default">登录</button>
|
<button class="zhuce" @click="zhuce" type="default">没有账号？点击注册</button>
|
</view>
|
<view class="msg">
|
<span>{{msg}}</span>
|
<icon :type="icons" :color="colors" size="20" />
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import WxStorage from "../../static/lib/wxStorage.js" //微信Storage
|
export default {
|
data() {
|
return {
|
icons: '',
|
names: '',
|
passwords: '',
|
msg: '',
|
colors: '#123456'
|
}
|
},
|
computed: {
|
OURpass() {
|
return this.$store.state.loging;
|
}
|
},
|
methods: {
|
judgeUse() {
|
var login = WxStorage.get("init") //重复登录
|
var name = WxStorage.get("name")
|
var userID = WxStorage.get("ids")
|
var accounts = WxStorage.get("accounts");
|
var pass = WxStorage.get("pass");
|
console.log(login);
|
if (login == "true" && name != '') {
|
//获取用户信息
|
var data = {
|
userName: name,
|
userID: userID
|
}
|
this.$store.commit('getUse', data)
|
// wx.reLaunch({
|
// url: '/pages/alarm_list/alarm_list?login=' + data.userName
|
// })
|
this.names = accounts;
|
this.passwords = pass;
|
}
|
},
|
judgeMsg() {
|
this.msg = this.names == '' ? (this.passwords == '' ? '账号密码不能为空' : '账号不能为空') : (this.passwords == '' ?
|
'密码不能为空' : this.passwords.length <= 5 ? '密码最少6位' :
|
'格式正确');
|
if (this.msg == "格式正确") {
|
this.icons = 'success';
|
this.colors = '#4ac503';
|
} else {
|
this.icons = 'warn';
|
this.colors = '#d53c00';
|
}
|
},
|
longing(name, pass) {
|
var data = {
|
name: name,
|
pass: pass,
|
}
|
this.judgeMsg();
|
if (this.msg == "格式正确") {
|
uni.showNavigationBarLoading();
|
this.$store.dispatch('loging', data)
|
}
|
},
|
zhuce(){
|
uni.navigateTo({
|
url:'/pages/registerUser/registerUser'
|
})
|
}
|
},
|
created() {
|
this.judgeUse();
|
},
|
watch: {
|
names() {
|
this.judgeMsg();
|
},
|
passwords() {
|
this.judgeMsg();
|
},
|
OURpass() {
|
if (this.OURpass == true) {
|
this.passwords = '******';
|
uni.hideNavigationBarLoading();
|
uni.reLaunch({
|
url: '../home/home'
|
})
|
return '成功登录'
|
} else {
|
this.icons = 'warn';
|
this.colors = '#d53c00';
|
this.msg = '账号密码错误';
|
this.$store.commit('loginReset', this); //重置登录
|
uni.hideNavigationBarLoading();
|
return '未成功登录'
|
}
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
page {
|
background-image: linear-gradient(to right, #07d4f3, #6099f3) //页面背景颜色
|
}
|
|
#login {
|
width: 100%;
|
height: 157vw;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
|
.main {
|
border-radius: 5vw;
|
border: 1px solid #fff;
|
width: 80vw;
|
height: 100vw;
|
background-image: linear-gradient(to right, #f3f3f3, #f3f3f3);
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
flex-direction: column;
|
|
.loging {
|
width: 65vw;
|
height: 13vw;
|
margin: 1vw 0;
|
}
|
|
.topImg,
|
.titie,
|
.name,
|
.password,
|
|
.msg {
|
width: 65vw;
|
height: 13vw;
|
// border: 1px solid #00ff7f;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
margin: 1vw 0;
|
}
|
|
.topImg {
|
.Timg {
|
width: 13vw;
|
height: 13vw;
|
}
|
}
|
|
.titie {
|
span {
|
font-weight: 600;
|
font-size: 6vw;
|
}
|
}
|
|
.name,
|
.password {
|
border-bottom: 1px solid rgba($color: #b9b9b9, $alpha: .7);
|
margin-bottom: 0;
|
margin-bottom: 0;
|
|
span {
|
display: inline-block;
|
width: 15vw;
|
}
|
|
input {
|
width: 40vw;
|
}
|
}
|
|
.msg {
|
font-size: 3vw;
|
width: 65vw;
|
height: 6vw;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
// border: 1px solid #00ff7f;
|
|
span,
|
icon {
|
margin: 0 1vw;
|
}
|
}
|
}
|
}
|
|
/* 按钮 */
|
.confirm {
|
width: 325rpx;
|
height: 80rpx;
|
background-color: #07c160;
|
border-radius: 6rpx;
|
font-size: 30rpx;
|
color: #fff;
|
line-height: 80rpx;
|
text-align: center;
|
|
}
|
|
.bubble {
|
position: relative;
|
overflow: hidden;
|
}
|
|
.bubble:after {
|
content: "44444";
|
background-color: #5c9899;
|
position: absolute;
|
width: 750rpx;
|
height: 750rpx;
|
left: calc(50% - 375rpx);
|
top: calc(50% - 375rpx);
|
opacity: 0;
|
margin: auto;
|
border-radius: 50%;
|
transform: scale(1);
|
transition: all 0.5s ease-in-out;
|
}
|
|
.bubble:active:after {
|
transform: scale(0);
|
opacity: 1;
|
transition: 0s;
|
}
|
|
.zhuce {
|
position: relative;
|
font-size: 0.2rem;
|
width: 10rem;
|
top: 1rem;
|
border: 1px solid transparent;
|
}
|
</style>
|
