437 lines
12 KiB
Vue
437 lines
12 KiB
Vue
<template>
|
||
<view class="body">
|
||
<back :errorMsg="errorMsg" :showFlag="showFlag" :backShowFlag="backShowFlag"></back>
|
||
<view class="content-block">
|
||
<view class="login-explain">欢迎登录灿能云</view>
|
||
<view class="login-detail">
|
||
<view class="login-agreement">登录注册即表示同意</view>
|
||
<view class="login-user" @click="jumpToUserAgreement">用户协议、</view>
|
||
<view class="login-user" @click="jumpToPrivacyAgreement">隐私协议</view>
|
||
</view>
|
||
|
||
<view class="phone-block">
|
||
<view class="num">+86</view>
|
||
<image class="pull" src="/static/pic/pull.png"></image>
|
||
<view class="phone">
|
||
<input
|
||
class="phone-input"
|
||
placeholder="输入手机号"
|
||
placeholder-class="phone-placeholder"
|
||
type="number"
|
||
@input="changeClass"
|
||
maxlength="11"
|
||
confirm-type="done"
|
||
:value="phoneNum"
|
||
/>
|
||
</view>
|
||
<view class="reset-block" @click="resetPhoneNum" v-if="resetFlag == 1">
|
||
<image class="phone-pic" src="/static/pic/close.png"></image>
|
||
</view>
|
||
</view>
|
||
<view class="password-block" v-if="loginType == 1">
|
||
<input
|
||
type="text"
|
||
:password="passwordFlag"
|
||
placeholder="请输入密码"
|
||
confirm-type="done"
|
||
placeholder-class="password-placeholder"
|
||
class="phone-input"
|
||
@input="changePasswordClass"
|
||
:value="password"
|
||
maxlength="18"
|
||
/>
|
||
<view class="see-block" v-if="seeFlag == 1">
|
||
<view class="reset-block" @click="reset">
|
||
<image src="/static/pic/close.png" class="close"></image>
|
||
</view>
|
||
<view class="line"></view>
|
||
<view class="reset-block" @click="see(false)" v-if="passwordFlag">
|
||
<image src="/static/pic/see.png" class="see"></image>
|
||
</view>
|
||
<view class="reset-block" @click="see(true)" v-else>
|
||
<image src="/static/pic/see_close.png" class="see"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="rememberMe-block" @click="changeRememberFlag" v-if="loginType == 1">
|
||
<image src="/static/pic/choose.png" class="rememberMe-pic" v-if="rememberFlag == 1"></image>
|
||
<image src="/static/pic/nochoose.png" class="rememberMe-pic" v-else></image>
|
||
<view class="rememberMe-text">记住密码</view>
|
||
</view>
|
||
<button class="login-vercode" :loading="loadingFlag" v-if="vercodeFlag == 0 && loginType == 0">
|
||
<view class="text">获取验证码</view>
|
||
</button>
|
||
<button class="login-vercode" :loading="loadingFlag" v-if="vercodeFlag == 1 && loginType == 0" @click="getVercode" :disabled="disabledFlag">
|
||
<view class="textHigh">获取验证码</view>
|
||
</button>
|
||
<button class="login-vercode" :loading="loadingFlag" v-if="vercodeFlag == 0 && loginType == 1">
|
||
<view class="text">登录</view>
|
||
</button>
|
||
<button class="login-vercode" :loading="loadingFlag" v-if="vercodeFlag == 1 && loginType == 1" @click="loginIn(phoneNum, password)" :disabled="disabledFlag">
|
||
<view class="textHigh">登录</view>
|
||
</button>
|
||
<view class="login-other" v-if="loginType == 0">
|
||
<view class="login-account" @click="changeLoginType(1)">用账号密码登录</view>
|
||
<view class="login-fast" @click="jumpToFastlogin">快速注册</view>
|
||
</view>
|
||
<view class="login-other" v-if="loginType == 1">
|
||
<view class="login-account" @click="changeLoginType(0)">短信验证码登录</view>
|
||
<view class="login-right">
|
||
<view class="login-fast" @click="jumpToForgetPassword">忘记密码</view>
|
||
<view class="login-line"></view>
|
||
<view class="login-fast" @click="jumpToFastlogin">快速注册</view>
|
||
</view>
|
||
</view>
|
||
<view class="introduce-block">—— 寻电能质量之因，解电能质量之惑，治电能质量之本 ——</view>
|
||
</view>
|
||
<!-- 图片滑块 -->
|
||
<tfVerify ref="tfVerifyRef" @chenggong="chenggong" />
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import back from '../../components/back.vue';
|
||
import tfVerify from '@/components/tfVerify/tfVerify.vue';
|
||
export default {
|
||
components: { back, tfVerify },
|
||
data() {
|
||
return {
|
||
vercodeFlag: 0,
|
||
loadingFlag: false,
|
||
phoneNum: '',
|
||
errorMsg: '',
|
||
showFlag: 0,
|
||
loginType: 1, //0-验证码登录 1-账号密码
|
||
password: '',
|
||
passwordFlag: true,
|
||
seeFlag: 0,
|
||
resetFlag: 0,
|
||
backShowFlag: 0,
|
||
rememberFlag: 1,
|
||
disabledFlag: false
|
||
};
|
||
},
|
||
methods: {
|
||
changeRememberFlag() {
|
||
var that = this;
|
||
if (that.rememberFlag == 0) {
|
||
that.rememberFlag = 1;
|
||
} else {
|
||
that.rememberFlag = 0;
|
||
}
|
||
},
|
||
changeClass(e) {
|
||
var that = this;
|
||
var length = e.detail.value.length;
|
||
var loginType = that.loginType;
|
||
if (length > 0) {
|
||
that.resetFlag = 1;
|
||
that.phoneNum = e.detail.value;
|
||
} else {
|
||
that.resetFlag = 0;
|
||
that.phoneNum = '';
|
||
}
|
||
if (length >= 10) {
|
||
if (loginType == 0) {
|
||
that.vercodeFlag = 1;
|
||
} else {
|
||
if (that.password != null && that.password != '') {
|
||
that.vercodeFlag = 1;
|
||
}
|
||
}
|
||
} else {
|
||
that.vercodeFlag = 0;
|
||
}
|
||
},
|
||
resetPhoneNum() {
|
||
this.phoneNum = '';
|
||
this.resetFlag = 0;
|
||
this.vercodeFlag = 0;
|
||
},
|
||
changePasswordClass(e) {
|
||
var that = this;
|
||
var length = e.detail.value.length;
|
||
var phoneNum = that.phoneNum;
|
||
if (length > 0) {
|
||
that.password = e.detail.value;
|
||
that.seeFlag = 1;
|
||
if (phoneNum != null && phoneNum != '') {
|
||
that.vercodeFlag = 1;
|
||
}
|
||
} else {
|
||
that.vercodeFlag = 0;
|
||
that.password = '';
|
||
that.seeFlag = 0;
|
||
}
|
||
},
|
||
reset() {
|
||
this.password = '';
|
||
this.passwordFlag = true;
|
||
this.seeFlag = 0;
|
||
this.vercodeFlag = 0;
|
||
},
|
||
see(flag) {
|
||
this.passwordFlag = flag;
|
||
},
|
||
getVercode() {
|
||
this.$refs.tfVerifyRef.open();
|
||
},
|
||
async chenggong() {
|
||
var that = this;
|
||
that.disabledFlag = true;
|
||
that.loadingFlag = true;
|
||
if (that.phoneNum.length != 11) {
|
||
that.showFlag = 1;
|
||
that.errorMsg = '请检查号码';
|
||
that.loadingFlag = false;
|
||
setTimeout(function () {
|
||
that.errorMsg = '';
|
||
that.showFlag = 0;
|
||
that.disabledFlag = false;
|
||
}, 5000);
|
||
return;
|
||
}
|
||
await that.authToken();
|
||
setTimeout(() => {
|
||
uni.request({
|
||
url: that.serverUrl + '/user/authCode',
|
||
method: 'POST',
|
||
data: {
|
||
phone: that.phoneNum,
|
||
devCode: that.cid(),
|
||
type: 0,
|
||
authToken: that.authTokenId
|
||
},
|
||
header: {
|
||
'content-type': 'application/x-www-form-urlencoded'
|
||
},
|
||
sslVerify: false,
|
||
success: (res) => {
|
||
console.log(123, res);
|
||
that.loadingFlag = false;
|
||
if (res.data.resultCode == '10000') {
|
||
that.disabledFlag = false;
|
||
uni.navigateTo({
|
||
url: '../vercode/vercode?phoneNum=' + that.phoneNum
|
||
});
|
||
} else {
|
||
that.errorMsg = that.showError(res.data.msgCode, res.data.msg);
|
||
that.showFlag = 1;
|
||
setTimeout(function () {
|
||
that.errorMsg = '';
|
||
that.showFlag = 0;
|
||
that.disabledFlag = false;
|
||
}, 5000);
|
||
}
|
||
},
|
||
fail: (re) => {
|
||
that.loadingFlag = false;
|
||
that.disabledFlag = false;
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '网络或服务器异常，请稍后再试',
|
||
showCancel: false,
|
||
success: function (res) {
|
||
if (res.confirm) {
|
||
console.log('用户点击确定');
|
||
} else if (res.cancel) {
|
||
console.log('用户点击取消');
|
||
}
|
||
}
|
||
});
|
||
}
|
||
});
|
||
}, 500);
|
||
},
|
||
loginIn(account, password) {
|
||
var that = this;
|
||
that.loadingFlag = true;
|
||
that.disabledFlag = true;
|
||
if (account.length != 11) {
|
||
that.loadingFlag = false;
|
||
that.showFlag = 1;
|
||
that.errorMsg = '请检查号码';
|
||
setTimeout(function () {
|
||
that.errorMsg = '';
|
||
that.showFlag = 0;
|
||
that.disabledFlag = false;
|
||
}, 5000);
|
||
return;
|
||
}
|
||
uni.request({
|
||
url: that.serverUrl + '/user/login',
|
||
method: 'POST',
|
||
data: {
|
||
phone: account,
|
||
devCode: that.cid(),
|
||
key: password.trim(),
|
||
type: 1
|
||
},
|
||
header: {
|
||
'content-type': 'application/x-www-form-urlencoded'
|
||
},
|
||
sslVerify: false,
|
||
success: (res) => {
|
||
that.loadingFlag = false;
|
||
if (res.data.resultCode == '10000') {
|
||
if (
|
||
that.rememberFlag == 1 &&
|
||
that.phoneNum != null &&
|
||
that.phoneNum != undefined &&
|
||
that.phoneNum != '' &&
|
||
that.password != null &&
|
||
that.password != undefined &&
|
||
that.password != ''
|
||
) {
|
||
uni.setStorageSync('account', that.phoneNum);
|
||
uni.setStorageSync('password', that.password);
|
||
}
|
||
uni.setStorageSync('loginType', 1);
|
||
uni.setStorageSync('loginTime', new Date());
|
||
var userInfo = eval(res.data.data);
|
||
userInfo.phoneNum = that.phoneNum;
|
||
uni.setStorageSync('userInfo', userInfo);
|
||
that.disabledFlag = false;
|
||
// console.log(userInfo.userId)
|
||
uni.switchTab({
|
||
url: '../information/information'
|
||
});
|
||
} else {
|
||
var msg = '';
|
||
if (res.data.msg == undefined || res.data.msg == null || res.data.msg == '') {
|
||
msg = '服务器或网络异常';
|
||
} else {
|
||
msg = res.data.msg;
|
||
}
|
||
that.errorMsg = that.showError(res.data.msgCode, msg);
|
||
that.showFlag = 1;
|
||
setTimeout(function () {
|
||
that.errorMsg = '';
|
||
that.showFlag = 0;
|
||
that.disabledFlag = false;
|
||
}, 5000);
|
||
}
|
||
},
|
||
fail: (re) => {
|
||
that.disabledFlag = false;
|
||
that.loadingFlag = false;
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '服务器或网络异常',
|
||
showCancel: false,
|
||
success: function (res) {
|
||
if (res.confirm) {
|
||
console.log('用户点击确定');
|
||
} else if (res.cancel) {
|
||
console.log('用户点击取消');
|
||
}
|
||
}
|
||
});
|
||
}
|
||
});
|
||
},
|
||
changeLoginType(type) {
|
||
var that = this;
|
||
that.loginType = type;
|
||
that.loadingFlag = false;
|
||
that.errorMsg = '';
|
||
that.showFlag = 0;
|
||
that.password = '';
|
||
that.passwordFlag = false;
|
||
that.seeFlag = 0;
|
||
that.vercodeFlag = 0;
|
||
if (type == 0 && that.phoneNum.length >= 10) {
|
||
that.vercodeFlag = 1;
|
||
}
|
||
},
|
||
jumpToForgetPassword() {
|
||
uni.navigateTo({
|
||
url: '../forgetPassword/forgetPassword'
|
||
});
|
||
},
|
||
jumpToFastlogin() {
|
||
uni.navigateTo({
|
||
url: '../fastLogin/fastLogin'
|
||
});
|
||
},
|
||
jumpToUserAgreement() {
|
||
uni.navigateTo({
|
||
url: '../userAgreement/userAgreement'
|
||
});
|
||
},
|
||
jumpToPrivacyAgreement() {
|
||
uni.navigateTo({
|
||
url: '../privacyAgreement/privacyAgreement'
|
||
});
|
||
}
|
||
},
|
||
onLoad() {
|
||
var that = this;
|
||
// var style = plus.navigator.getUiStyle();
|
||
// console.log(style)
|
||
// if('dark'==style){
|
||
// console.log('当前为暗黑模式');
|
||
// }else{
|
||
// console.log('当前为普通模式');
|
||
// }
|
||
that.getCid();
|
||
var cid = that.cid();
|
||
if (cid) {
|
||
var loginTime = uni.getStorageSync('loginTime');
|
||
if (loginTime) {
|
||
if ((new Date() - loginTime) / (1000 * 24 * 60 * 60) > 30 || new Date() - loginTime < 0) {
|
||
uni.removeStorageSync('account');
|
||
uni.removeStorageSync('password');
|
||
} else {
|
||
if (uni.getStorageSync('loginType') == 1) {
|
||
var account = uni.getStorageSync('account');
|
||
var password = uni.getStorageSync('password');
|
||
if (account != null && account != undefined && account != '' && password != null && password != undefined && password != '') {
|
||
that.phoneNum = account;
|
||
that.password = password;
|
||
that.vercodeFlag = 1;
|
||
that.resetFlag = 1;
|
||
that.seeFlag = 1;
|
||
that.passwordFlag = 1;
|
||
that.loginIn(account, password);
|
||
}
|
||
} else {
|
||
if (uni.getStorageSync('userInfo')) {
|
||
uni.switchTab({
|
||
url: '../information/information'
|
||
});
|
||
}
|
||
}
|
||
}
|
||
}
|
||
} else {
|
||
setTimeout(function () {
|
||
var loginTime = uni.getStorageSync('loginTime');
|
||
if (loginTime) {
|
||
if ((new Date() - loginTime) / (1000 * 24 * 60 * 60) > 30 || new Date() - loginTime < 0) {
|
||
uni.removeStorageSync('account');
|
||
uni.removeStorageSync('password');
|
||
} else {
|
||
var account = uni.getStorageSync('account');
|
||
var password = uni.getStorageSync('password');
|
||
if (account != null && account != undefined && account != '' && password != null && password != undefined && password != '') {
|
||
that.phoneNum = account;
|
||
that.password = password;
|
||
that.vercodeFlag = 1;
|
||
that.resetFlag = 1;
|
||
that.seeFlag = 1;
|
||
that.passwordFlag = 1;
|
||
that.loginIn(account, password);
|
||
}
|
||
}
|
||
}
|
||
}, 2000);
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style>
|
||
@import url('login.css');
|
||
</style>
|