323 lines
7.8 KiB
Vue
323 lines
7.8 KiB
Vue
<template>
|
||
<view 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-blues 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>
|
||
一键登录
|
||
</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('zhongpinUserAgree')">《用户协议》</text> 与 <text
|
||
style=" color: black; font-weight: 600;"
|
||
@click="$refs.loginBottom.toAgree('zhongpinPrivacyAgreement')">《隐私政策》</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 {
|
||
checked: false,
|
||
// imgsrc:require('../../../BagStation/static/img/login-bg.png'),
|
||
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(options) {
|
||
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 (options.scanningParams) {
|
||
// 用于扫码进入油站详情页面
|
||
this.scanningParams = options.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.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)
|
||
}
|
||
})
|
||
},
|
||
refuseEmpower() {
|
||
uni.navigateTo({
|
||
url: `/BagAuth/pages/login/oldLogin?scanningParams=${this.scanningParams}`
|
||
})
|
||
},
|
||
decryptPhoneNumber(e) {
|
||
uni.getSetting({
|
||
success: () => {
|
||
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)
|
||
}
|
||
}
|
||
})
|
||
|
||
// if (!this.checked) {
|
||
// uni.showToast({
|
||
// title: '请您阅读并同意协议',
|
||
// icon: 'none'
|
||
// })
|
||
// return
|
||
// }
|
||
|
||
// 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/makeOrder/makeOrder?q=${this.scanningParams}`
|
||
})
|
||
return
|
||
}
|
||
// 这里有问题
|
||
uni.switchTab({
|
||
url: '/pages/tabbar/home/home'
|
||
})
|
||
}
|
||
},
|
||
}
|
||
}
|
||
</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: #1890FF;
|
||
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> |