Files
MP-XiaoXing/BagAuth/pages/login/login.vue
caolc 41dbc836d3 1
2023-06-12 14:42:21 +08:00

322 lines
8.0 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template>
<view v-if="loginType" class="login-page bg-white">
<view class="image login-bg">
<!-- <image :src="imgURL+'login-bg.png'" mode="widthFix"></image> -->
<!-- <image src="../../../BagStation/static/img/LV.png" mode="widthFix"></image> -->
<image src="../../../static/img/login-bg.png" mode="widthFix"></image>
</view>
<scroll-view scroll-x class=" bg-white nav padding">
<view class="flex text-center padding-bottom">
<view class="cu-item flex-sub">
</view>
<view class="cu-item flex-sub" :class="0==TabCur?'text-red cur':''" @tap="tabSelect(0)">
个人账号
</view>
<view class="cu-item flex-sub">
</view>
<!--<view class="cu-item flex-sub" :class="1==TabCur?'text-red cur':''" @tap="tabSelect(1)">
企业账号
</view>-->
</view>
</scroll-view>
<view class="cu-load load-modal" v-if="loadModal">
<view class="gray-text">加载中...</view>
</view>
<view class="margin-lg flex flex-direction text-center">
<button v-if=checked class="cu-btn round bg-main-oil lg text-lg" open-type="getPhoneNumber"
@getphonenumber="decryptPhoneNumber">
<text class="cuIcon-weixin padding-right-xs"> </text>
<text>
微信用户一键登录
</text>
</button>
<button v-else class="cu-btn round bg-main-oil lg text-lg" @click="$refs.popup.open('center')">
<text class="cuIcon-weixin padding-right-xs"> </text>
<text>
微信用户一键登录
</text>
</button>
<!-- <button class="cu-btn margin-top round lg" @tap="refuseEmpower">
输入手机号码登录
</button> -->
<button class="cu-btn bg-0 margin-top round text-sm" @tap="refuseLogin">
跳过
</button>
</view>
<loginBottom ref='loginBottom' :checked='checked' @onCheck="checkAgree" />
<uni-popup ref='popup'>
<view class="protocol_body">
<view class="protocol_header">
使用协议及隐私保护
</view>
<view class="protocol_content">
为了更好地保障您的合法权益请您阅读并同意 <text style=" color: black; font-weight: 600;" @click="$refs.loginBottom.toAgree('baichuanUserAgree')">用户协议</text> <text style=" color: black; font-weight: 600;" @click="$refs.loginBottom.toAgree('baichuanPrivacyAgreement')">隐私政策</text>
</view>
<view class="protocol_footer">
<button @click="$refs.popup.close()" class="protocol_footer_close">取消</button>
<button @click="checked=true;$refs.popup.close();" class="protocol_footer_confirm">确定</button>
</view>
</view>
</uni-popup>
</view>
</template>
<script>
// import uniteApi from '@/api/unite'
// import weixinApi from '@/api/weixin'
import loginBottom from './components/loginBottom.vue'
import oilIdentityApi from '@/api/oil-identity'
export default {
components: {
loginBottom
},
data() {
return {
loginType:false,
// imgsrc:require('../../../BagStation/static/img/login-bg.png'),
checked: false,
userHandle: false,
TabCur: 0,
accuntSource: false,
imgURL: this.global.imgURL,
loadModal: false,
active: 0,
password: "",
random: '',
driver: {},
count: 0,
loginRes: {},
sessionKey: '',
nickName: '',
loginOut: uni.getStorageSync('loginOut') ? true : false
}
},
onLoad(e) {
if(e.loginType){
this.loginType = Boolean(e.loginType);
console.log(e.loginType,'e.loginType')
}
uni.clearStorageSync()
// this.refreshLocation()
uni.login({
provider: 'weixin',
success: (loginRes) => {
console.log(loginRes, '+++++++')
const code = loginRes.code
this.onceCode = code
console.log(this.onceCode, '----------')
oilIdentityApi.sendCode(this.onceCode).then(res => {
console.log(res, '++++++++++++++++')
if (res.code === 20000) {
this.sessionKey = res.data.sessionKey
uni.setStorageSync('openid', res.data.openId)
uni.setStorageSync('unionid', res.data.unionId)
this.autoLogin()
} else if (res.code == 1002) {
uni.showModal({
title: '微信登录失败提醒',
content: `${res.msg}如有疑问,请联系客服处理`
})
} else {
// console.log('res', res.code)
}
}).catch(err => {
console.log(err)
uni.reLaunch({
url: '/BagAuth/pages/login/boforeLogin/boforeLogin',
fail: (err) => {
// console.log(err)
}
})
})
},
fail: err => {},
})
},
methods: {
checkAgree(val) {
this.checked = val
},
refuseLogin() {
uni.setStorageSync('loginType',false)
uni.switchTab({
url: '/pages/tabbar/home/home'
})
},
refreshLocation() {
// uni.getLocation({
// type: 'wgs84',
// success: function(res) {
// uni.setStorageSync('location', res)
// }
// });
},
autoLogin() {
// let url = 'loginCompany'
let url = 'loginPersonal'
oilIdentityApi.autoLogin({
unionId: uni.getStorageSync('unionid')
}, url).then(res => {
if (res.code == 20000) {
this.loginSuccess(res)
}else{
}
})
},
refuseEmpower() {
uni.navigateTo({
url: '/BagAuth/pages/login/oldLogin'
})
},
decryptPhoneNumber(e) {
if (!this.checked) {
uni.showToast({
title: '请您阅读并同意协议',
icon: 'none'
})
return
}
// console.log(e.detail)
if (e.detail.errMsg === 'getPhoneNumber:ok') {
const data1 = {
...e.detail,
sessionKey: this.sessionKey,
unionId: uni.getStorageSync('unionid'),
openId: uni.getStorageSync('openid'),
}
let url1 = 0 == this.TabCur ? 'bindLoginByPhonePersonal' : 'bindLoginByPhoneCompany'
this.bindLoginByPhone(data1, url1)
} else {
uni.showModal({
title: '用户拒绝手机号的授权',
content: `请输入手机号码登录,如有疑问,请联系客服处理`
})
}
},
bindLoginByPhone(data, url) {
if (this.count < 1) {
oilIdentityApi.bindLoginByPhone(data, url).then(res => {
console.log(res)
if (res.code == 20000) {
this.loginSuccess(res)
}
})
}
},
tabSelect(e) {
this.TabCur = e;
},
loginSuccess(res) {
let resData = res.data
if (resData.authTokenDTO.loginFlag) {
uni.setStorageSync('Authorization', resData.authTokenDTO.accessToken)
uni.setStorageSync('accountStatus', resData.isCompanyAccount)
let user = resData.authTokenDTO.loginUser
uni.setStorageSync('user', user)
setTimeout(() => {
uni.showToast({
title: res.msg,
icon: 'none',
complete: (err) => {
// console.log(err)
}
})
}, 1000);
// 这里有问题
uni.switchTab({
url: '/pages/tabbar/home/home'
})
}else{
console.log(this.loginType,'loginTypeloginTypeloginType')
if(!this.loginType){
this.refuseLogin()
}
console.log('禁摩登录i失败==================')
}
},
}
}
</script>
<style>
.protocol_footer_close {
width: 185rpx;
border-radius: 94rpx 94rpx 94rpx 94rpx;
opacity: 1;
border: 1px solid #000000;
font-size: 26rpx;
}
.protocol_footer_confirm {
width: 185rpx;
background: #FD0505;
border-radius: 56rpx 56rpx 56rpx 56rpx;
opacity: 1;
font-size: 26rpx;
color: #FFFFFF;
}
.protocol_footer {
display: flex;
justify-content: space-between;
color: #FFFFFF;
}
.protocol_content {
font-size: 32rpx;
font-family: PingFang SC-Medium, PingFang SC;
font-weight: 400;
color: #666666;
line-height: 46rpx;
margin: 60rpx 0;
}
.protocol_header {
width: 330rpx;
height: 32rpx;
font-size: 36rpx;
color: #000000;
width: 100%;
text-align: center;
}
.protocol_body {
background: #FFFFFF;
border-radius: 20rpx 20rpx 20rpx 20rpx;
opacity: 1;
padding: 70rpx 50rpx;
max-width: 634rpx;
box-sizing: border-box;
}
.login-bg {
width: 100%;
}
.login-bg image {
width: 750upx;
vertical-align: bottom;
}
.login-page {
height: 750rpx;
background-color: #fff;
}
.bg-0 {
background-color: transparent;
color: #555555;
}
</style>