431 lines
10 KiB
Vue
431 lines
10 KiB
Vue
<template>
|
|
<view class="container">
|
|
<view class="content">
|
|
<view class="top-wrap">
|
|
<view class="bounce-in-top">
|
|
<image src="/static/yack.png" mode="widthFix" style="width: 458rpx;"></image>
|
|
<view class="logo-text">{{$tt('common.fastbee')}}</view>
|
|
</view>
|
|
<view class="circle-one"></view>
|
|
<view class="circle-two"></view>
|
|
</view>
|
|
<view class="button-group">
|
|
<view style="height: 90rpx; width: 100%; justify-content: center; align-items: center;">
|
|
<u-button type="primary" shape="circle" :text="$tt('waitLogin.loginOrregister')" @click="gotoLogin"
|
|
size="large"></u-button>
|
|
</view>
|
|
<view
|
|
style="margin-top: 40rpx; height: 90rpx; width: 100%; justify-content: center; align-items: center;">
|
|
<u-button size="large" type="primary" :plain="true" shape="circle"
|
|
:text="$tt('waitLogin.ExperienceAccountLogin')" @click="experience"></u-button>
|
|
</view>
|
|
</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>{{$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 © 2026-2029 FastBee | YanAn All Rights Reserved.</text></view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import projectConfig from '@/env.config.js';
|
|
import {
|
|
getProfile
|
|
} from '@/apis/modules/common.js'
|
|
import {
|
|
mapState,
|
|
mapMutations
|
|
} from 'vuex';
|
|
|
|
export default {
|
|
data () {
|
|
return {
|
|
isClause: false,
|
|
loginForm: {
|
|
username: 'fastbee',
|
|
password: '123456',
|
|
rememberMe: false,
|
|
code: '',
|
|
uuid: '',
|
|
},
|
|
};
|
|
},
|
|
created () {
|
|
this.getCode()
|
|
},
|
|
methods: {
|
|
handleClauseCheckbox (e) {
|
|
this.isClause = !this.isClause;
|
|
},
|
|
// 隐私政策
|
|
handleGoToPrivacy () {
|
|
let title = this.$tt('login.privacyPolicy');
|
|
let url = projectConfig.officialWebUrl + 'privacy-policy.html';
|
|
uni.navigateTo({
|
|
url: `/pagesA/common/webview/index?title=${title}&url=${url}`
|
|
});
|
|
},
|
|
// 服务协议
|
|
handleGoToService () {
|
|
let title = this.$tt('login.serviceAgreement');
|
|
let url = projectConfig.officialWebUrl + 'service-agreement.html';
|
|
uni.navigateTo({
|
|
url: `/pagesA/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: `/pagesA/common/webview/index?title=${title}&url=${url}`
|
|
});
|
|
},
|
|
// 第三方信息共享清单
|
|
handleGoToCommonBill () {
|
|
let title = this.$tt('login.commonBill');
|
|
let url = projectConfig.officialWebUrl + 'common-bill.html';
|
|
uni.navigateTo({
|
|
url: `/pagesA/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()
|
|
this.login()
|
|
|
|
},
|
|
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.codeUrl = 'data:image/gif;base64,' + res.img;
|
|
this.loginForm.uuid = res.uuid;
|
|
this.loginForm.code = res.resultCode;
|
|
})
|
|
.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">
|
|
.container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100vh;
|
|
|
|
.content {
|
|
flex: 1;
|
|
|
|
.top-wrap {
|
|
position: relative;
|
|
height: 510rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.logo-text {
|
|
margin-top: 16rpx;
|
|
font-size: 32rpx;
|
|
color: #333;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.bg {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 40%;
|
|
width: 100%;
|
|
height: 30%;
|
|
overflow: hidden;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
filter: blur(1px);
|
|
transform: scale(0.7);
|
|
opacity: 0.1;
|
|
}
|
|
}
|
|
|
|
.bounce-in-top {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
-webkit-animation: bounce-in-top 0.5s;
|
|
animation: bounce-in-top 0.9s;
|
|
}
|
|
|
|
@-webkit-keyframes bounce-in-top {
|
|
0% {
|
|
-webkit-transform: translateY(-500px);
|
|
transform: translateY(-500px);
|
|
-webkit-animation-timing-function: ease-in;
|
|
animation-timing-function: ease-in;
|
|
opacity: 0;
|
|
}
|
|
|
|
38% {
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0);
|
|
-webkit-animation-timing-function: ease-out;
|
|
animation-timing-function: ease-out;
|
|
opacity: 1;
|
|
}
|
|
|
|
55% {
|
|
-webkit-transform: translateY(-65px);
|
|
transform: translateY(-65px);
|
|
-webkit-animation-timing-function: ease-in;
|
|
animation-timing-function: ease-in;
|
|
}
|
|
|
|
72% {
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0);
|
|
-webkit-animation-timing-function: ease-out;
|
|
animation-timing-function: ease-out;
|
|
}
|
|
|
|
81% {
|
|
-webkit-transform: translateY(-28px);
|
|
transform: translateY(-28px);
|
|
-webkit-animation-timing-function: ease-in;
|
|
animation-timing-function: ease-in;
|
|
}
|
|
|
|
90% {
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0);
|
|
-webkit-animation-timing-function: ease-out;
|
|
animation-timing-function: ease-out;
|
|
}
|
|
|
|
95% {
|
|
-webkit-transform: translateY(-8px);
|
|
transform: translateY(-8px);
|
|
-webkit-animation-timing-function: ease-in;
|
|
animation-timing-function: ease-in;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0);
|
|
-webkit-animation-timing-function: ease-out;
|
|
animation-timing-function: ease-out;
|
|
}
|
|
}
|
|
|
|
@keyframes bounce-in-top {
|
|
0% {
|
|
-webkit-transform: translateY(-500px);
|
|
transform: translateY(-500px);
|
|
-webkit-animation-timing-function: ease-in;
|
|
animation-timing-function: ease-in;
|
|
opacity: 0;
|
|
}
|
|
|
|
38% {
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0);
|
|
-webkit-animation-timing-function: ease-out;
|
|
animation-timing-function: ease-out;
|
|
opacity: 1;
|
|
}
|
|
|
|
55% {
|
|
-webkit-transform: translateY(-65px);
|
|
transform: translateY(-65px);
|
|
-webkit-animation-timing-function: ease-in;
|
|
animation-timing-function: ease-in;
|
|
}
|
|
|
|
72% {
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0);
|
|
-webkit-animation-timing-function: ease-out;
|
|
animation-timing-function: ease-out;
|
|
}
|
|
|
|
81% {
|
|
-webkit-transform: translateY(-28px);
|
|
transform: translateY(-28px);
|
|
-webkit-animation-timing-function: ease-in;
|
|
animation-timing-function: ease-in;
|
|
}
|
|
|
|
90% {
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0);
|
|
-webkit-animation-timing-function: ease-out;
|
|
animation-timing-function: ease-out;
|
|
}
|
|
|
|
95% {
|
|
-webkit-transform: translateY(-8px);
|
|
transform: translateY(-8px);
|
|
-webkit-animation-timing-function: ease-in;
|
|
animation-timing-function: ease-in;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0);
|
|
-webkit-animation-timing-function: ease-out;
|
|
animation-timing-function: ease-out;
|
|
}
|
|
}
|
|
|
|
.circle-one {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
width: 200px;
|
|
height: 200px;
|
|
top: -100px;
|
|
left: -100px;
|
|
background-color: rgba(220, 235, 248, 0.43);
|
|
}
|
|
|
|
.circle-two {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
width: 100px;
|
|
height: 100px;
|
|
bottom: 3px;
|
|
right: -50px;
|
|
background-color: rgba(220, 235, 248, 0.43);
|
|
}
|
|
}
|
|
|
|
.button-group {
|
|
margin: 0 50rpx 50rpx;
|
|
}
|
|
|
|
.clause {
|
|
margin: 40rpx;
|
|
font-size: 28rpx;
|
|
|
|
.link {
|
|
color: #00aaff;
|
|
}
|
|
}
|
|
}
|
|
|
|
.copyright {
|
|
text-align: center;
|
|
font-size: 20rpx;
|
|
margin-bottom: 40rpx;
|
|
}
|
|
}
|
|
|
|
.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> |