<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,
scanningParams:null
}
},
onLoad(e) {
if(e.loginType){
this.loginType = Boolean(e.loginType);
}
uni.clearStorageSync()
// this.refreshLocation()
uni.login({
provider: 'weixin',
success: (loginRes) => {
const code = loginRes.code
this.onceCode = code
oilIdentityApi.sendCode(this.onceCode).then(res => {
if (res.code === 20000) {
if(e.scanningParams) {
// 用于扫码进入油站详情页面
this.scanningParams = e.scanningParams
}
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 => {
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?scanningParams=${this.scanningParams}`
})
},
decryptPhoneNumber(e) {
if (!this.checked) {
uni.showToast({
title: '请您阅读并同意协议',
icon: 'none'
})
return
}
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 => {
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) => {
}
})
}, 1000);
if(this.scanningParams) {
uni.redirectTo({
url: `/BagStation/pages/stationDetail/stationDetail?q=${this.scanningParams}`
})
return
}
// 这里有问题
uni.switchTab({
url: '/pages/tabbar/home/home'
})
}else{
if(!this.loginType){
this.refuseLogin()
}
}
},
}
}
</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>