561 lines
14 KiB
Vue
561 lines
14 KiB
Vue
<template>
|
||
<view class="login-wrap">
|
||
<view class="top-wrap">
|
||
<image src="../../static/538.png" mode="widthFix" style="width: 500rpx;"></image>
|
||
</view>
|
||
<view class="main-wrap">
|
||
<u--form :model="loginForm" :rules="rules" ref="form" labelWidth="31">
|
||
<u-form-item prop="username" borderBottom>
|
||
<uni-easyinput v-model="loginForm.username" clearable :inputBorder="false"
|
||
:placeholder="$tt('login.inputUserName')" prefixIcon="person"
|
||
prefixIconStyle="font-size: 44rpx; margin-right: 10rpx"></uni-easyinput>
|
||
</u-form-item>
|
||
<u-form-item prop="password" borderBottom>
|
||
<uni-easyinput prefixIcon="locked" prefixIconStyle="font-size: 44rpx; margin-right: 10rpx"
|
||
type="password" :inputBorder="false" v-model="loginForm.password"
|
||
:placeholder="$tt('login.inputPassword')"></uni-easyinput>
|
||
</u-form-item>
|
||
<u-form-item prop="code" borderBottom>
|
||
<!-- 注意：由于兼容性差异，如果需要使用前后插槽，nvue下需使用u--input，非nvue下需使用u-input -->
|
||
<!-- 验证码 -->
|
||
<uni-easyinput :placeholder="$tt('login.inputCode')" v-model="loginForm.code" :inputBorder="false"
|
||
prefixIcon="checkbox" prefixIconStyle="font-size: 44rpx; margin-right: 10rpx">
|
||
<template slot="right">
|
||
<u--image :src="codeUrl" width="240rpx" height="60rpx" @click="getCode"></u--image>
|
||
</template>
|
||
</uni-easyinput>
|
||
</u-form-item>
|
||
<!-- 记住密码 -->
|
||
<view prop="rememberMe" style="display: flex; justify-content:flex-end; padding: 20rpx;">
|
||
<view style="font-size: 13px;">
|
||
<u-checkbox-group @change="handleRememberCheckbox">
|
||
<label>
|
||
<u-checkbox :checked="loginForm.rememberMe" style="transform:scale(0.8)" />
|
||
</label>
|
||
<text>
|
||
{{$tt('login.remember')}}
|
||
</text>
|
||
</u-checkbox-group>
|
||
</view>
|
||
</view>
|
||
|
||
<view style="margin-top: 50rpx;">
|
||
<u-button style="height: 90rpx; width: 650rpx;" shape="circle" type="primary"
|
||
:text="$tt('login.login')" @click="handleLogin()"></u-button>
|
||
</view>
|
||
</u--form>
|
||
|
||
<view class="footer-wrap">
|
||
<view class="tipbox">
|
||
<!-- #ifdef APP-PLUS || MP-WEIXIN -->
|
||
<view class="txt">
|
||
—— {{$tt('login.other')}} ——
|
||
</view>
|
||
<!-- #endif -->
|
||
<view class="otherUser">
|
||
<!-- #ifdef APP-PLUS -->
|
||
<uni-icons style="background-color: #e7e7e7; padding: 10rpx; border-radius: 50%; margin: 20rpx;"
|
||
type="weixin" size="24" color="#3c9cff" @click="handleWeChatLogin()"></uni-icons>
|
||
<!-- #endif -->
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<uni-icons style="background-color: #e7e7e7; padding: 10rpx; border-radius: 50%; margin: 20rpx;"
|
||
type="phone-filled" size="24" color="#3c9cff"
|
||
@click="handleWeChatOneClickLogin"></uni-icons>
|
||
<!-- #endif -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="other-wrap">
|
||
<!-- 微信授权弹出框 -->
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<view class="one-click-login-pop-wrap">
|
||
<u-popup :show="isShowPop" mode="bottom" :round="10" closeable="true" @close="isShowPop = false">
|
||
<view class="content-wrap">
|
||
<u--image :showLoading="true" src="/static/logo_title.png" width="260rpx" height="90rpx"
|
||
customStyle="float:left"></u--image>
|
||
<text class="title">{{$tt("login.welcomeToLogin")}}</text>
|
||
<view class="btn-login">
|
||
<u-button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"
|
||
@click="isShowPop = false;"
|
||
type="success">{{$tt("login.phoneAuthorization")}}</u-button>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
</view>
|
||
<!-- #endif -->
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { mapState, mapMutations } from 'vuex';
|
||
import projectConfig from '@/env.config.js';
|
||
import { getProfile } from '@/apis/modules/common.js'
|
||
import { encrypt, decrypt } from '@/utils/jsencrypt.js'
|
||
|
||
export default {
|
||
data () {
|
||
return {
|
||
token: '',
|
||
codeUrl: '',
|
||
isClause: false,
|
||
show: false,
|
||
systemLocale: '',
|
||
applicationLocale: '',
|
||
columns: [
|
||
[{
|
||
text: this.$tt('locale.en-US'),
|
||
code: 'en-US'
|
||
},
|
||
{
|
||
text: this.$tt('locale.zh-CN'),
|
||
code: 'zh-CN'
|
||
},
|
||
]
|
||
],
|
||
value: 'English',
|
||
loginForm: {
|
||
username: '',
|
||
password: '',
|
||
rememberMe: false,
|
||
code: '',
|
||
uuid: '',
|
||
},
|
||
rules: {
|
||
username: {
|
||
type: 'string',
|
||
min: 2,
|
||
max: 20,
|
||
required: true,
|
||
message: this.$tt('login.inputUserName'),
|
||
trigger: ['blur', 'change']
|
||
},
|
||
password: {
|
||
type: 'string',
|
||
required: true,
|
||
min: 5,
|
||
max: 20,
|
||
message: this.$tt('login.inputPassword'),
|
||
trigger: ['blur', 'change']
|
||
},
|
||
code: {
|
||
type: 'integer',
|
||
required: true,
|
||
message: this.$tt('login.inputCode'),
|
||
trigger: ['blur', 'change']
|
||
}
|
||
},
|
||
isShowPop: false,
|
||
};
|
||
},
|
||
onLoad () {
|
||
this.loadSelectedLanguage();
|
||
},
|
||
mounted () {
|
||
this.getToken();
|
||
if (this.token != '' && this.token != null) {
|
||
// 跳转主页
|
||
uni.switchTab({
|
||
url: '/pages/tabBar/home/index'
|
||
});
|
||
} else {
|
||
this.getCode();
|
||
this.getAccount();
|
||
}
|
||
},
|
||
methods: {
|
||
loadSelectedLanguage () {
|
||
// 获取之前保存的语言设置
|
||
const selectedLanguage = wx.getStorageSync('language');
|
||
// 如果获取到了，使用该语言设置
|
||
if (selectedLanguage === 'zh-CN') {
|
||
this.applicationLocale = 'zh-CN';
|
||
this.value = '简体中文';
|
||
} else if (selectedLanguage === 'en-US') {
|
||
this.applicationLocale = 'en-US';
|
||
this.value = 'English';
|
||
} else {
|
||
// 如果没有获取到，使用默认设置
|
||
this.applicationLocale = 'zh-CN'; // 默认设置为中文
|
||
this.$i18n.locale = this.applicationLocale;
|
||
this.value = '简体中文';
|
||
}
|
||
},
|
||
onLocaleChange () {
|
||
this.show = true;
|
||
},
|
||
close () {
|
||
this.show = false
|
||
},
|
||
cancel () {
|
||
this.show = false
|
||
},
|
||
confirm (e) {
|
||
this.show = false;
|
||
this.value = e.value[0].text;
|
||
this.$i18n.locale = e.value[0].code;
|
||
uni.setLocale(e.value[0].code);
|
||
wx.setStorageSync('language', e.value[0].code)
|
||
},
|
||
change (e) {
|
||
// console.log('change', e)
|
||
},
|
||
handleLogin () {
|
||
this.$refs.form.validate().then(res => {
|
||
// if (!this.isClause) {
|
||
// uni.showToast({
|
||
// icon: 'none',
|
||
// title: this.$tt('login.readAndCheckTheAgreement'),
|
||
// });
|
||
// return;
|
||
// }
|
||
// 调用登录
|
||
this.$api.common.login(this.loginForm).then(async res => {
|
||
if (res.code == 200) {
|
||
// 存储token和账号
|
||
this.saveToken(res.token);
|
||
this.saveAccount();
|
||
// 获取用户信息
|
||
let profile = await this.getProfile();
|
||
uni.$u.vuex('profile', profile);
|
||
// 跳转主页
|
||
uni.reLaunch({
|
||
url: '/pages/tabBar/home/index'
|
||
});
|
||
} else {
|
||
if (res.msg) {
|
||
uni.showToast({
|
||
icon: "none",
|
||
title: res.msg,
|
||
complete: (res) => {
|
||
setTimeout(() => {
|
||
this.getCode();
|
||
}, 1500);
|
||
}
|
||
})
|
||
}
|
||
}
|
||
})
|
||
}).catch(errors => {
|
||
uni.$u.toast(this.$tt('login.accontMsg'));
|
||
});
|
||
},
|
||
handletestLogin () {
|
||
this.loginForm.username = "fastbee"
|
||
this.loginForm.password = "123456"
|
||
},
|
||
// 微信登录
|
||
handleWeChatLogin () {
|
||
let that = this;
|
||
uni.login({
|
||
provider: 'weixin',
|
||
onlyAuthorize: false,
|
||
success: function (loginRes) {
|
||
if (loginRes) {
|
||
console.log('用户授权成功');
|
||
uni.request({
|
||
url: projectConfig.baseUrl + '/wechat/mobileLogin',
|
||
data: {
|
||
//业务服务器通过code + 仅保存在服务器的appsecret参数，向：微信开放平台接口发起网络请求
|
||
code: loginRes.code,
|
||
accessToken: loginRes.authResult.access_token,
|
||
expiresIn: loginRes.authResult.expires_in,
|
||
refreshToken: loginRes.authResult.refresh_token,
|
||
openId: loginRes.authResult.openid,
|
||
unionId: loginRes.authResult.unionid,
|
||
},
|
||
method: 'post',
|
||
success: async res => {
|
||
if (res.data.code == 200) {
|
||
if (res.data.data.token != null) {
|
||
that.saveToken(res.data.data.token);
|
||
// 获取用户信息
|
||
let profile = await that.getProfile();
|
||
uni.$u.vuex('profile', profile);
|
||
// 跳转主页面
|
||
wx.switchTab({
|
||
url: '/pages/tabBar/home/index'
|
||
})
|
||
} else {
|
||
//跳转绑定页面
|
||
uni.navigateTo({
|
||
url: '/pagesB/login/bindLogin?bindId=' +
|
||
res
|
||
.data.data.bindId,
|
||
})
|
||
}
|
||
} else {
|
||
uni.showToast({
|
||
icon: "none",
|
||
mask: true,
|
||
title: res.data.msg,
|
||
duration: 3000,
|
||
})
|
||
}
|
||
},
|
||
fail (err) {
|
||
console.log(err)
|
||
}
|
||
});
|
||
}
|
||
},
|
||
fail (err) {
|
||
console.log(err)
|
||
}
|
||
})
|
||
},
|
||
// 微信一键登录
|
||
handleWeChatOneClickLogin () {
|
||
this.isShowPop = true;
|
||
},
|
||
// 获取验证码
|
||
getCode () {
|
||
this.$api.common.captchaImage(true).then(res => {
|
||
this.codeUrl = 'data:image/gif;base64,' + res.img;
|
||
this.loginForm.uuid = res.uuid;
|
||
this.loginForm.code = '';
|
||
})
|
||
.catch(err => {
|
||
this.$u.toast(err.msg);
|
||
});
|
||
},
|
||
// 用户注册
|
||
handleRegister () {
|
||
uni.$u.route('/pagesB/login/register');
|
||
},
|
||
//短信登录
|
||
gotoSmsLogin () {
|
||
uni.$u.route('/pagesB/login/smsLogin');
|
||
},
|
||
// 获取用户信息
|
||
getProfile () {
|
||
return new Promise((resolve, reject) => {
|
||
getProfile().then(res => {
|
||
resolve(res.data);
|
||
}).catch(err => {
|
||
this.$u.toast(err.msg);
|
||
})
|
||
});
|
||
},
|
||
saveToken (token) {
|
||
// 本地缓存存储token
|
||
uni.setStorageSync('token', token);
|
||
// vuex存储token
|
||
uni.$u.vuex('vuex_token', token);
|
||
},
|
||
getToken () {
|
||
// 本地缓存获取token
|
||
this.token = uni.getStorageSync('token');
|
||
// vuex存储token
|
||
uni.$u.vuex('vuex_token', this.token);
|
||
},
|
||
// 本地缓存存储
|
||
saveAccount () {
|
||
if (this.loginForm.rememberMe) {
|
||
uni.setStorageSync('username', this.loginForm.username);
|
||
uni.setStorageSync('password', encrypt(this.loginForm.password));
|
||
uni.setStorageSync('rememberMe', this.loginForm.rememberMe)
|
||
} else {
|
||
uni.removeStorageSync('username');
|
||
uni.removeStorageSync('password');
|
||
uni.removeStorageSync('rememberMe');
|
||
}
|
||
},
|
||
// 本地缓存获取
|
||
getAccount () {
|
||
let username = uni.getStorageSync('username');
|
||
let password = uni.getStorageSync('password');
|
||
let rememberMe = uni.getStorageSync('rememberMe');
|
||
if (username && username != '') {
|
||
this.loginForm.username = username;
|
||
}
|
||
if (password && password != '') {
|
||
this.loginForm.password = decrypt(password);
|
||
}
|
||
if (rememberMe != '') {
|
||
this.loginForm.rememberMe = rememberMe;
|
||
}
|
||
},
|
||
//微信小程序登录获取手机号
|
||
getPhoneNumber (e) {
|
||
let that = this;
|
||
wx.login({
|
||
success (res) {
|
||
if (e.detail.code && res.code) {
|
||
console.log('用户授权成功');
|
||
//发起网络请求
|
||
wx.request({
|
||
url: projectConfig.baseUrl + '/wechat/miniLogin',
|
||
data: {
|
||
code: res.code,
|
||
phoneCode: e.detail.code,
|
||
},
|
||
method: 'post',
|
||
success: async res => {
|
||
if (res.data.code == 200) {
|
||
// 存储token和账号
|
||
const token = wx.setStorageSync('token', res.data.data.token)
|
||
that.saveToken(res.data.data.token);
|
||
// 获取用户信息
|
||
let profile = await that.getProfile();
|
||
uni.$u.vuex('profile', profile);
|
||
// 跳转主页
|
||
wx.switchTab({
|
||
url: '/pages/tabBar/home/index'
|
||
});
|
||
} else {
|
||
wx.showToast({
|
||
icon: "none",
|
||
mask: true,
|
||
title: res.data.msg,
|
||
duration: 3000,
|
||
})
|
||
}
|
||
},
|
||
})
|
||
} else {
|
||
console.log('用户拒绝授权');
|
||
}
|
||
}
|
||
})
|
||
},
|
||
// 服务协议
|
||
handleService () {
|
||
let title = this.$tt('login.serviceAgreement');
|
||
let url = projectConfig.officialWebUrl + 'service-agreement.html';
|
||
uni.navigateTo({
|
||
url: `/pages/common/webview/index?title=${title}&url=${url}`
|
||
});
|
||
},
|
||
// 隐私政策
|
||
handlePrivacy () {
|
||
let title = this.$tt('login.privacyPolicy');
|
||
let url = projectConfig.officialWebUrl + 'privacy-policy.html';
|
||
uni.navigateTo({
|
||
url: `/pages/common/webview/index?title=${title}&url=${url}`
|
||
});
|
||
},
|
||
//记住密码
|
||
handleRememberCheckbox (e) {
|
||
this.loginForm.rememberMe = !this.loginForm.rememberMe
|
||
},
|
||
// 勾选协议
|
||
handleClauseCheckbox (e) {
|
||
this.isClause = !this.isClause;
|
||
},
|
||
openhpLink () {
|
||
uni.navigateTo({
|
||
url: '/pages/common/webview/index?url=http://www.hpiot.cn/'
|
||
});
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
page {
|
||
height: 100%;
|
||
}
|
||
|
||
.copyright {
|
||
font-size: 16rpx;
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
.login-wrap {
|
||
height: 100%;
|
||
|
||
.top-wrap {
|
||
height: 510rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.main-wrap {
|
||
padding: 0 40rpx;
|
||
|
||
.register-wrap {
|
||
margin-top: 40rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
text-align: center;
|
||
|
||
.now-btn {
|
||
margin-left: 20rpx;
|
||
}
|
||
}
|
||
|
||
.footer-wrap {
|
||
position: fixed;
|
||
bottom: 60rpx;
|
||
left: 0;
|
||
right: 0;
|
||
|
||
.tipbox {
|
||
text-align: center;
|
||
}
|
||
|
||
.otherUser {
|
||
margin-top: 40rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
.txt {
|
||
font-size: 28rpx;
|
||
color: #cbcbcb;
|
||
}
|
||
|
||
.item-wrap {
|
||
background-color: #eaeaea;
|
||
width: 50px;
|
||
height: 50px;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin: 10rpx 20rpx;
|
||
}
|
||
|
||
.clause {
|
||
font-size: 28rpx;
|
||
display: inline-block;
|
||
vertical-align: middle;
|
||
|
||
.check_text {}
|
||
|
||
.service,
|
||
.privacy {
|
||
color: #3c9cff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.other-wrap {
|
||
.one-click-login-pop-wrap {
|
||
.content-wrap {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
margin-top: 90rpx;
|
||
|
||
.title {
|
||
margin-top: 30rpx;
|
||
font-size: 36rpx;
|
||
}
|
||
|
||
.btn-login {
|
||
margin-top: 100rpx;
|
||
margin-bottom: 60rpx;
|
||
width: 320rpx;
|
||
border-radius: 20rpx
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |