<template>
|
<view class="login">
|
<view class="logo">无人值守</view>
|
<!--用户名密码登录-->
|
<user-password :btnText="0" :userList="userList"/>
|
<!-- 微信openid登录 -->
|
<!-- #ifdef MP-WEIXIN -->
|
<view class="loginBtn">
|
<u-button class="button"
|
@click.stop="beforeLoginEvent"
|
:disabled="btnLoading"
|
:loading="btnLoading"
|
type="primary"
|
text="微信一键登录"></u-button>
|
</view>
|
<!-- #endif -->
|
<view class="utils-block">
|
<view @click="forgetPassword"><text>忘记密码?</text></view>
|
<!-- #ifdef MP-WEIXIN -->
|
<view @click="PrivacyAgreementHandle"><text>新用户注册</text></view>
|
<!-- #endif -->
|
</view>
|
|
<view class="login-bottom-box">
|
<view class="copyright">冀中能源无人值守微信小程序</view>
|
<view class="copyright">小程序仅供已拥有系统账号特定内部人员使用</view>
|
</view>
|
|
<!-- #ifdef MP-WEIXIN -->
|
<!-- 微信授权前的弹框 -->
|
<view class="loginPopup">
|
<u-popup :show="loginPopupShow"
|
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="loginPopupShow = 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 class="bindWxModel">
|
<u-modal :show="bindWxModelShow"
|
:title="bindWxModelTitle"
|
showCancelButton
|
:content="bindWxContent"
|
@confirm="bindWxConfirm"
|
@cancel="bindWxCancel"></u-modal>
|
</view>
|
<!-- #endif -->
|
</view>
|
</template>
|
|
<script>
|
import { apiLoginWx, apiLoginPassword } from '@/api/publicInterface.js';
|
import { mapMutations } from 'vuex';
|
import userPassword from './userPassword.vue';
|
import { setToken, setRefreshToken, setUsernameKey, setCustomerId, redirectHome } from '@/utils/status.js';
|
export default {
|
data() {
|
return {
|
btnLoading: false,
|
loginPopupShow: false,
|
// 绑定微信模态框
|
bindWxModelShow: false,
|
bindWxModelTitle: '提示',
|
bindWxContent: '如果已拥有系统账号，可以直接跳转绑定微信页面',
|
appid: "",
|
secret: "",
|
userList:[]
|
};
|
},
|
components: {
|
userPassword
|
},
|
onShow() {
|
this.userList=uni.getStorageSync('userList')?JSON.parse(uni.getStorageSync('userList')):[];
|
},
|
methods: {
|
...mapMutations(['setUserTabbar', 'changeisLogin']),
|
getAppidAndSercet() {
|
this.$reqGet('getAppidAndSercet').then(res => {
|
this.appid = res.data.appid;
|
this.secret = res.data.secret
|
})
|
},
|
// 访问wx.login,获取code
|
beforeLoginEvent() {
|
this.loginPopupShow = true;
|
this.getAppidAndSercet();
|
},
|
wxLogin() {
|
// 获取登录用户code
|
uni.login({
|
success: res => {
|
if (res.code) {
|
uni.setStorageSync('code', res.code);
|
this.apiLogin(res.code);
|
} else {
|
uni.showToast({
|
title: '微信登录失败！',
|
duration: 2000
|
});
|
}
|
}
|
});
|
},
|
// 登录接口
|
apiLogin(code) {
|
// 获取微信用户openid,微信一键登录暂无相关接口，用于测试呼叫客服功能
|
uni.showLoading({
|
title: '加载中...'
|
});
|
wx.request({
|
url: `https://api.weixin.qq.com/sns/jscode2session?appid=${this.appid}&secret=${this.secret}&js_code=${code}&grant_type=authorization_code`,
|
success(res) {
|
console.log(res, 'openid');
|
uni.setStorageSync('openid', res.data.openid);
|
// uni.showToast({
|
// title: '成功获取测试openid',
|
// icon: 'none'
|
// });
|
}
|
});
|
this.$nextTick(() => {
|
apiLoginWx({ code: code }).then(res => {
|
if (res.code != 1) {
|
this.$u.toast('登录成功');
|
this.changeisLogin(true);
|
// 登陆成功，存储相关信息
|
setToken(res.access_token);
|
setRefreshToken(res.refresh_token);
|
setUsernameKey(res.username);
|
//查询用户详细信息并储存
|
this.$reqGet('getUserEntity').then(res => {
|
this.setUserTabbar(res.data.type);
|
uni.setStorageSync('roleType', res.data.type);
|
uni.setStorageSync("userId", res.data.userId)
|
uni.setStorageSync("carNo", res.data.carNo)
|
setCustomerId(res.data.customerid);
|
uni.hideLoading();
|
//跳转页面
|
this.$nextTick(() => {
|
redirectHome();
|
});
|
});
|
} else {
|
this.$u.toast(res.msg);
|
this.bindWxModelShow = true;
|
}
|
});
|
});
|
this.loginPopupShow = false;
|
},
|
bindWxConfirm() {
|
uni.navigateTo({
|
url: `/pages/login/wxLogin?code=${uni.getStorageSync('code')}`
|
});
|
this.bindWxModelShow = false;
|
},
|
bindWxCancel() {
|
this.bindWxModelShow = false;
|
},
|
// 弹出层时间
|
closePopup() {
|
this.loginPopupShow = false;
|
},
|
openPopup() {
|
console.log('打开了');
|
},
|
forgetPassword() {
|
uni.navigateTo({
|
url: '/pages/login/forgetPassword/forgetPassword'
|
})
|
},
|
PrivacyAgreementHandle() {
|
uni.navigateTo({
|
url: '/pages/login/PrivacyAgreementText/PrivacyAgreementText'
|
})
|
},
|
}
|
};
|
</script>
|
|
<style lang="scss">
|
@import 'index.scss';
|
|
.PrivacyAgreement {
|
color: rgb(60, 156, 255)
|
}
|
|
.login {
|
.loginBtn {
|
margin-top: vww(20);
|
|
.u-button {
|
width: 80%;
|
}
|
}
|
|
.utils-block {
|
width: 80%;
|
margin: vww(20) auto;
|
display: flex;
|
justify-content: space-between;
|
color: #497bff;
|
font-size: vww(17);
|
}
|
|
.logo {
|
width: 80%;
|
font-size: 64rpx;
|
color: #497bff;
|
margin: vww(100) auto 0;
|
text-align: center;
|
}
|
|
.list-call-icon {
|
color: #ff0000;
|
}
|
|
.currentPhone-box {
|
text-align: center;
|
padding: 40rpx 80rpx;
|
|
.number-text {
|
color: #000000;
|
font-size: 60rpx;
|
}
|
|
.other-text {
|
color: #999999;
|
font-size: 26rpx;
|
padding: 20rpx 0;
|
}
|
|
.u-btn {
|
margin: 30rpx auto;
|
}
|
|
.u-hairline-border {
|
border: 1px solid #fff;
|
}
|
}
|
|
.register {
|
color: #497bff;
|
height: 40rpx;
|
line-height: 40rpx;
|
font-size: 28rpx;
|
position: fixed;
|
bottom: vww(70);
|
text-align: center;
|
width: 100%;
|
}
|
|
.register-link {
|
float: right;
|
padding: 0 16rpx;
|
}
|
|
.reg-link {
|
display: inline-block;
|
color: #497bff;
|
}
|
|
.oauth2 {
|
display: flex;
|
flex-direction: row;
|
justify-content: space-around;
|
margin: 0rpx 100rpx 30rpx;
|
|
image {
|
height: 80rpx;
|
width: 80rpx;
|
}
|
}
|
|
.u-tabs {
|
padding: 0 70rpx;
|
}
|
|
// 弹出框
|
.loginPopup {
|
.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>
|
