<template>
|
<view class="login">
|
<image src="@/static/login/banner.png" class="background"></image>
|
<view class="inputBox">
|
<view class="phone">
|
<image src="@/static/login/phone.png" mode="加载错误"></image>
|
<input type="text" placeholder="请输入用户名/手机号" v-model="formData.username" />
|
</view>
|
<view class="password">
|
<image src="@/static/login/lock.png" mode="加载错误" />
|
<input type="password" placeholder="请输入账号密码" v-model="formData.password" />
|
</view>
|
<view class="loginBtn"><button type="default" @click="loginSubmit">绑定</button></view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import { setAccessToken, setTokenType, setRefreshToken, setClientId, setScope, redirectHome, redirectLogin } from '@/utils/status.js';
|
export default {
|
name: 'login',
|
data() {
|
return {
|
formData: {
|
username: '',
|
password: ''
|
},
|
bindData: {
|
state: 'MINI',
|
code: ''
|
}
|
};
|
},
|
methods: {
|
loginSubmit() {
|
console.log('点击登录');
|
// console.log('login');
|
uni.showLoading({
|
title: '登录中...'
|
});
|
this.apiLogin(this.formData)
|
.then(this.saveUserInfo)
|
.catch(this.loginFail);
|
},
|
saveUserInfo(response) {
|
uni.hideLoading();
|
if (response.statusCode === 200) {
|
const { access_token, refresh_token, token_type, scope } = response.data;
|
try {
|
setAccessToken(access_token);
|
setTokenType(token_type);
|
setRefreshToken(refresh_token);
|
setScope(scope);
|
this.$store.dispatch('menus');
|
uni.hideLoading();
|
// redirectHome();
|
this.bindWx(); // 登录成功后获取code码，返给后端
|
} catch (e) {
|
// error
|
console.log('检测到错误',e);
|
}
|
} else {
|
uni.showToast({
|
title: response.data.msg,
|
icon: 'error',
|
duration: 2000
|
});
|
}
|
},
|
loginFail(err) {
|
console.log('登录接口错误', err);
|
},
|
bindWx() {
|
uni.login({
|
success: res => {
|
this.bindData.code = res.code;
|
this.bindWxPost();
|
},
|
fail: err => {
|
console.log('微信登录错误', err);
|
}
|
});
|
},
|
bindWxPost() {
|
this.$reqPost('bindWx', this.bindData)
|
.then(res => {
|
if (res.code == 0) {
|
this.$u.toast('绑定成功，即将返回登录页！');
|
setTimeout(() => {
|
uni.reLaunch({
|
url:"/pages/login/login"
|
})
|
}, 1000);
|
}
|
})
|
.catch(err => {
|
console.log('绑定错误', err);
|
});
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.login {
|
.background {
|
width: 100%;
|
// height: vww(289);
|
height: vww(246);
|
}
|
.inputBox {
|
width: vww(280);
|
margin: vww(40) auto;
|
input {
|
width: vww(240);
|
margin-left: vww(8);
|
}
|
.phone {
|
width: vww(280);
|
height: vww(36);
|
display: flex;
|
align-items: center;
|
border-bottom: vww(1) solid #cccccc;
|
image {
|
width: vww(20);
|
height: vww(20);
|
}
|
}
|
.password {
|
width: vww(280);
|
height: vww(36);
|
display: flex;
|
align-items: center;
|
margin-top: vww(40);
|
border-bottom: vww(1) solid #cccccc;
|
image {
|
width: vww(20);
|
height: vww(20);
|
}
|
}
|
.loginBtn {
|
margin-top: vww(80);
|
|
button {
|
background-color: #007aff;
|
color: #ffffff;
|
font-size: vww(16);
|
border-radius: vww(22);
|
}
|
}
|
}
|
}
|
</style>
|
