365 lines
8.2 KiB
Vue
365 lines
8.2 KiB
Vue
<template>
|
|
<view class="wait-login">
|
|
<view class="content">
|
|
<view class="top-wrap">
|
|
<view class="user-register" @click="handleRegister()">{{$tt('register.registration')}}</view>
|
|
<view class="bounce-in-top">
|
|
<image src="https://iot-xcwl.cn/app/fastbee1_blue.png" mode="widthFix" style="width: 290rpx;">
|
|
</image>
|
|
</view>
|
|
</view>
|
|
<view class="middle-text">
|
|
<view class="hello">
|
|
Hello,
|
|
</view>
|
|
<view class="welcome-wrap">
|
|
<text class="welcome">{{ $tt('common.Welcome') }}</text>
|
|
<text class="fastbee">{{ $tt('common.fastbee') }}</text>
|
|
<text class="star">
|
|
<image src="../../static/common/star.png" mode="widthFix" style="width: 25px;" />
|
|
</text>
|
|
</view>
|
|
</view>
|
|
<view class="button-group">
|
|
<button class="button1" @click="gotoLogin">
|
|
{{$tt('waitLogin.loginOrregister')}}
|
|
</button>
|
|
<button class="button2" plain="true" @click="experience">
|
|
{{ $tt('waitLogin.ExperienceAccountLogin') }}
|
|
</button>
|
|
</view>
|
|
<view class="clause">
|
|
<u-checkbox-group @change="handleClauseCheckbox">
|
|
<label>
|
|
<u-checkbox :checked="isClause" style="transform:scale(0.8)" />
|
|
</label>
|
|
<text class="check_text">
|
|
<text class="ordinary">{{$tt('waitLogin.agree')}}</text>
|
|
<text class="link" @click="handleGoToPrivacy">《{{$tt('waitLogin.privacy')}}》</text>
|
|
<text class="link" @click="handleGoToService">《{{$tt('waitLogin.agreement')}}》</text>
|
|
<text class="link" @click="handleGoToStatement">《{{$tt('waitLogin.children')}}》</text>
|
|
<text class="link" @click="handleGoToCommonBill">《{{$tt('waitLogin.third')}}》</text>
|
|
|
|
</text>
|
|
</u-checkbox-group>
|
|
</view>
|
|
</view>
|
|
<!-- <view class="copyright"><text>Copyright © 2022-2025 FastBee All Rights Reserved.</text></view> -->
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
mapState,
|
|
mapMutations
|
|
} from 'vuex';
|
|
import projectConfig from '@/env.config.js';
|
|
import {
|
|
getProfile
|
|
} from '@/apis/modules/common.js'
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
isClause: false,
|
|
loginForm: {
|
|
username: 'fastbee',
|
|
password: '123456',
|
|
rememberMe: false,
|
|
code: '',
|
|
uuid: '',
|
|
},
|
|
captchaOnOff: true, // 验证码开关
|
|
};
|
|
},
|
|
methods: {
|
|
handleClauseCheckbox(e) {
|
|
this.isClause = !this.isClause;
|
|
},
|
|
// 用户注册
|
|
handleRegister() {
|
|
uni.$u.route('/pagesB/login/register');
|
|
},
|
|
// 隐私政策
|
|
handleGoToPrivacy() {
|
|
let title = this.$tt('login.privacyPolicy');
|
|
let url = projectConfig.officialWebUrl + 'privacy-policy.html';
|
|
uni.navigateTo({
|
|
url: `/pages/common/webview/index?title=${title}&url=${url}`
|
|
});
|
|
},
|
|
// 服务协议
|
|
handleGoToService() {
|
|
let title = this.$tt('login.serviceAgreement');
|
|
let url = projectConfig.officialWebUrl + 'service-agreement.html';
|
|
uni.navigateTo({
|
|
url: `/pages/common/webview/index?title=${title}&url=${url}`
|
|
});
|
|
},
|
|
// 儿童隐私保护声明
|
|
handleGoToStatement() {
|
|
let title = this.$tt('login.childProtectionStatement');
|
|
let url = projectConfig.officialWebUrl + 'child-protection-statement.html';
|
|
uni.navigateTo({
|
|
url: `/pages/common/webview/index?title=${title}&url=${url}`
|
|
});
|
|
},
|
|
// 第三方信息共享清单
|
|
handleGoToCommonBill() {
|
|
let title = this.$tt('login.commonBill');
|
|
let url = projectConfig.officialWebUrl + 'common-bill.html';
|
|
uni.navigateTo({
|
|
url: `/pages/common/webview/index?title=${title}&url=${url}`
|
|
});
|
|
},
|
|
//前往登录页面
|
|
gotoLogin() {
|
|
if (!this.isClause) {
|
|
uni.showToast({
|
|
icon: 'none',
|
|
title: this.$tt('login.readAndCheckTheAgreement'),
|
|
});
|
|
return;
|
|
}
|
|
uni.$u.route('/pages/login/index');
|
|
},
|
|
// 体验账号登录
|
|
experience() {
|
|
if (!this.isClause) {
|
|
uni.showToast({
|
|
icon: 'none',
|
|
title: this.$tt('login.readAndCheckTheAgreement'),
|
|
});
|
|
return;
|
|
}
|
|
this.getCode()
|
|
},
|
|
gotoSmsLogin() {
|
|
if (!this.isClause) {
|
|
uni.showToast({
|
|
icon: 'none',
|
|
title: this.$tt('login.readAndCheckTheAgreement'),
|
|
});
|
|
return;
|
|
}
|
|
uni.$u.route('/pagesB/login/smsLogin');
|
|
},
|
|
// 验证码接口
|
|
getCode() {
|
|
this.$api.common.captchaImage(true).then(res => {
|
|
this.captchaOnOff = res.captchaEnabled;
|
|
if (this.captchaOnOff) {
|
|
if (res.code === 200) {
|
|
this.codeUrl = 'data:image/gif;base64,' + res.img;
|
|
this.loginForm.uuid = res.uuid;
|
|
this.loginForm.code = res.resultCode;
|
|
this.login()
|
|
}
|
|
}
|
|
if (!this.captchaOnOff) {
|
|
this.login()
|
|
}
|
|
|
|
})
|
|
.catch(err => {
|
|
this.$u.toast(err.msg);
|
|
});
|
|
},
|
|
// 调用登录接口
|
|
login() {
|
|
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);
|
|
}
|
|
})
|
|
}
|
|
}
|
|
})
|
|
},
|
|
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);
|
|
},
|
|
saveAccount() {
|
|
// 本地缓存存储
|
|
uni.setStorageSync('username', this.loginForm.username);
|
|
uni.setStorageSync('password', this.loginForm.password);
|
|
},
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.wait-login {
|
|
padding-top: var(--status-bar-height);
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: calc(100vh - var(--status-bar-height));
|
|
|
|
.content {
|
|
flex: 1;
|
|
|
|
.top-wrap {
|
|
position: relative;
|
|
display: flex;
|
|
|
|
.user-register {
|
|
position: absolute;
|
|
// #ifdef MP-WEIXIN
|
|
top: 140rpx;
|
|
// #endif
|
|
// #ifndef MP-WEIXIN
|
|
top: 70rpx;
|
|
// #endif
|
|
right: 46rpx;
|
|
line-height: 36rpx;
|
|
font-size: 28rpx;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.bounce-in-top {
|
|
margin: 206rpx 380px 0 80rpx;
|
|
}
|
|
}
|
|
|
|
.middle-text {
|
|
margin: 144rpx 0 0 80rpx;
|
|
height: 168rpx;
|
|
line-height: 84rpx;
|
|
text-align: left;
|
|
|
|
.hello {
|
|
font-weight: 700;
|
|
font-size: 72rpx;
|
|
}
|
|
|
|
.welcome-wrap {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
|
|
.welcome {
|
|
font-weight: 900;
|
|
font-size: 52rpx;
|
|
letter-spacing: 7.4rpx;
|
|
}
|
|
|
|
.fastbee {
|
|
font-family: Source Han Sans CN-Heavy;
|
|
font-weight: 900;
|
|
font-size: 52rpx;
|
|
letter-spacing: 7.4rpx;
|
|
color: #486FF2;
|
|
}
|
|
|
|
.star {
|
|
color: #FFF200;
|
|
font-size: 50rpx;
|
|
margin-left: 12rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.button-group {
|
|
margin: 318rpx 80rpx 0 80rpx;
|
|
|
|
.button1 {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 98rpx;
|
|
border-radius: 18rpx;
|
|
color: #fff;
|
|
background-color: #486FF2;
|
|
font-weight: 400;
|
|
font-size: 32rpx;
|
|
letter-spacing: 0.6rpx;
|
|
}
|
|
|
|
.button2 {
|
|
margin-top: 36rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 98rpx;
|
|
border-radius: 18rpx;
|
|
color: #045FFA;
|
|
background-color: #fff;
|
|
font-weight: 400;
|
|
font-size: 32rpx;
|
|
letter-spacing: 0.6rpx;
|
|
border-width: 2rpx;
|
|
border-color: #045FFA;
|
|
}
|
|
}
|
|
|
|
.clause {
|
|
margin: 128rpx 80rpx 80rpx 80rpx;
|
|
font-size: 20rpx;
|
|
letter-spacing: 0.6rpx;
|
|
line-height: 36rpx;
|
|
|
|
.ordinary {
|
|
color: #999999;
|
|
}
|
|
|
|
.link {
|
|
color: #486FF2;
|
|
}
|
|
}
|
|
}
|
|
|
|
.copyright {
|
|
text-align: center;
|
|
font-size: 20rpx;
|
|
margin-bottom: 46rpx;
|
|
}
|
|
}
|
|
|
|
.bgbottom {
|
|
position: absolute;
|
|
top: 67%;
|
|
left: -30%;
|
|
width: 100%;
|
|
height: 30%;
|
|
overflow: hidden;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
filter: blur(1px);
|
|
transform: scale(0.7);
|
|
opacity: 0.1;
|
|
}
|
|
}
|
|
</style> |