<template>
|
<view class="login">
|
<image src="@/static/login/banner.png" class="background"></image>
|
<view class="login-container">
|
<view class="loginBtn"><u-button text="微信账号快捷登录" type="success" shape="circle" icon="weixin-fill" @click="toGrantAuthorization"></u-button></view>
|
<view class="utils"><text @click="toBindPage">绑定系统账号</text></view>
|
</view>
|
<!-- 特定范围说明 -->
|
<view class="loginBottom"><text>小程序仅供已拥有系统账号特定内部人员使用</text></view>
|
<u-modal
|
@confirm="wxLoginConfirm"
|
@cancel="wxLoginCancel"
|
@close="wxLoginClose"
|
:show="wxLoginModal.show"
|
:title="wxLoginModal.title"
|
:content="wxLoginModal.content"
|
:showCancelButton="true"
|
></u-modal>
|
<view class="toGrantAuthorization-container">
|
<u-popup :show="popupShow" mode="bottom" @close="closePopup" @open="openPopup" round="10" :safeAreaInsetBottom="true">
|
<view class="popup-warp">
|
<view class="body"><text>本小程序，仅供已拥有系统账号特定内部人员登录使用，点击同意即表示您已同意相应信息授权。</text></view>
|
<view class="btn">
|
<u-button @click="popupShow = false" type="error" text="不同意" shape="circle" :plain="true"></u-button>
|
<u-button @click="wxLogin" type="error" text="同意" throttleTime="3000" shape="circle"></u-button>
|
</view>
|
</view>
|
</u-popup>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import { setAccessToken, setTokenType, setRefreshToken, setClientId, setScope, redirectHome, redirectLogin } from '@/utils/status.js';
|
export default {
|
data() {
|
return {
|
wxcode: '', //微信code
|
wxLoginModal: {
|
show: false,
|
title: '提示',
|
content: ''
|
},
|
popupShow: false
|
};
|
},
|
onShow() {
|
// 清除缓存
|
if (uni.getStorageSync('userInfo') || uni.getStorageSync('access_token') || uni.getStorageSync('refresh_token')) {
|
uni.clearStorageSync();
|
}
|
},
|
methods: {
|
toGrantAuthorization() {
|
this.popupShow = true;
|
},
|
wxLogin() {
|
this.popupShow = false;
|
uni.showLoading({
|
title: '加载中...'
|
});
|
uni.login({
|
success: res => {
|
console.log('登录loginRes', res);
|
if (res.code) {
|
this.wxcode = res.code;
|
this.wxSmallLogin(this.wxcode)
|
.then(res => {
|
if (res.data.data == '用户不存在') {
|
// this.$u.toast('未绑定系统账号，即将跳转绑定页面！');
|
this.wxLoginModal.content = '未绑定系统账号，是否跳转账号绑定页面！';
|
this.wxLoginModal.show = true;
|
} else if (res.data.active && res.data.active == true) {
|
const { access_token, refresh_token, token_type, scope } = res.data;
|
try {
|
setAccessToken(access_token);
|
setTokenType(token_type);
|
setRefreshToken(refresh_token);
|
setScope(scope);
|
this.$store.dispatch('menus');
|
redirectHome();
|
uni.hideLoading();
|
} catch (e) {
|
// error
|
console.log(e);
|
}
|
}
|
console.log('微信登录', res);
|
})
|
.catch(err => {
|
console.log('错误', err);
|
});
|
} else {
|
uni.showToast({
|
title: '微信登录失败！',
|
duration: 2000
|
});
|
}
|
}
|
});
|
},
|
toBindPage() {
|
uni.navigateTo({
|
url: '/pages/register/register'
|
});
|
},
|
// 模态框
|
wxLoginConfirm() {
|
uni.navigateTo({
|
url: '/pages/register/register'
|
});
|
this.wxLoginModal.show = false;
|
},
|
wxLoginCancel() {
|
this.wxLoginModal.show = false;
|
},
|
wxLoginClose() {
|
this.wxLoginModal.show = false;
|
},
|
// 弹出框
|
openPopup() {
|
console.log('open');
|
},
|
closePopup() {
|
this.popupShow = false;
|
console.log('close');
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
::v-deep.login {
|
height: 100vh;
|
|
.background {
|
width: 100%;
|
// height: vww(289);
|
height: vww(246);
|
}
|
.login-container {
|
margin: vww(60) auto;
|
width: 80%;
|
.loginBtn {
|
.u-button {
|
.u-icon {
|
.u-icon__icon {
|
font-size: vww(30) !important;
|
}
|
}
|
.u-button__text {
|
font-size: vww(17) !important;
|
font-weight: 530;
|
}
|
}
|
|
.u-button--success {
|
border-style: none;
|
background-color: #3ebc17;
|
}
|
}
|
|
.utils {
|
font-size: vww(14);
|
margin-top: vww(20);
|
text-align: center;
|
color: #346a9d;
|
}
|
}
|
|
.loginBottom {
|
color: #aaaaaa;
|
margin-top: vww(180);
|
font-size: vww(14);
|
text-align: center;
|
}
|
|
// 弹出框
|
.toGrantAuthorization-container {
|
.u-popup {
|
.u-transition {
|
.u-popup__content {
|
.popup-warp {
|
height: vww(200);
|
padding: vww(10) vww(20);
|
.body {
|
width: 100%;
|
height: 70%;
|
}
|
.btn {
|
display: flex;
|
justify-content: space-between;
|
.u-button {
|
width: 40%;
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
