348 lines
7.9 KiB
Vue
348 lines
7.9 KiB
Vue
<template>
|
||
<view>
|
||
<image style=" position:absolute;top: 0;width: 100%; z-index: -1;" mode="widthFix"
|
||
src="../../static/loginbg.png"></image>
|
||
<starlogin v-show="ishow.state==0" />
|
||
<password :phone="phone" v-show="ishow.state==1" />
|
||
<verificationCode :phone="phone" v-if="ishow.state==2" />
|
||
<view class="other">
|
||
<view @click="ishow.state=0" class="ghphone" v-show="ishow.state==2||ishow.state==1">更换手机号登录</view>
|
||
<view class="other_title">
|
||
<view class="xian" style="flex: 1;"></view>
|
||
<view class="xian_text" style="">其他方式登录</view>
|
||
<view class="xian" style="flex: 1;"></view>
|
||
</view>
|
||
<view style="text-align: center;margin-top: 32rpx;">
|
||
<!-- class="wxlogin" -->
|
||
<button type="primary" plain="true" size="mini" open-type="getPhoneNumber"
|
||
@getphonenumber="decryptPhoneNumber">
|
||
手机号快捷登录
|
||
<!-- <image class="wx" style="" src="@/static/wxlogo.png"></image> -->
|
||
</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
/*
|
||
* @property {String} phone:输入的手机号 通过 onLoad中uni.$on('state')自定义事件 更新值
|
||
* @property {Object} ishow:组件展示状态、 state: 0:手机号输入组件 1:密码登录组件 2:验证码登陆组件
|
||
* @property {Object} e:微信各种加密数据 包括加密之后的手机号
|
||
* @property {String} sessionKey:微信登陆返回的参数
|
||
* @property {String} unionId:请求头参数
|
||
* @property {String} openId:请求头参数
|
||
* @property {String} Authorization:请求头参数
|
||
* @property {String} accountStatus:请求头参数
|
||
* @property {String} oginSystem: OIL_OMS_WEB_MINI （运营管理） OIL_CMS_WEB_MINI（客户运营）
|
||
* @property {Function} loginFn: 调用微信接口获取code 通过code调用服务端接口换取请求头数据
|
||
* @property {Function} autoLogin: 静默登陆方法 判断是否在数据库中绑定过手机号
|
||
* @property {Function} decryptPhoneNumber: 微信获取用户手机号回调函数
|
||
* @property {Function} bindLoginByPhone: 微信获取用户手机号回调成功后请求手机号登录接口
|
||
* @property {Function} loginSuccess: 登陆成功后执行 存储到本地token等数据
|
||
*/
|
||
import starlogin from './coments/starlogin.vue'
|
||
import password from './coments/passwordLogin.vue'
|
||
import verificationCode from './coments/verificationCode.vue'
|
||
import oilIdentityApi from '@/api/oil-identity'
|
||
export default {
|
||
components: {
|
||
starlogin,
|
||
password,
|
||
verificationCode
|
||
},
|
||
data() {
|
||
return {
|
||
type: 0,
|
||
sessionKey: '',
|
||
ishow: {
|
||
state: 0
|
||
},
|
||
sessionKey: '',
|
||
phone: '',
|
||
password: ''
|
||
}
|
||
},
|
||
onLoad(e) {
|
||
let that = this
|
||
uni.$on('state', function(e) {
|
||
that.ishow.state = e.state
|
||
that.phone = e.phone
|
||
})
|
||
if (e.type) {
|
||
this.type = JSON.parse(e.type)
|
||
console.log(this.type, e.type, '*-*-')
|
||
}
|
||
this.loginFn()
|
||
|
||
},
|
||
methods: {
|
||
decryptPhoneNumber(e) {
|
||
if (e.detail.errMsg === 'getPhoneNumber:ok') {
|
||
const data1 = {
|
||
...e.detail,
|
||
sessionKey: this.sessionKey,
|
||
unionId: uni.getStorageSync('unionid'),
|
||
openId: uni.getStorageSync('openid'),
|
||
loginSystem: 'OIL_OMS_WEB_MINI'
|
||
}
|
||
this.bindLoginByPhone(data1)
|
||
} else {
|
||
uni.showModal({
|
||
title: '用户拒绝手机号的授权',
|
||
content: `请输入手机号码登录，如有疑问，请联系客服处理`
|
||
})
|
||
}
|
||
},
|
||
|
||
bindLoginByPhone(data) {
|
||
oilIdentityApi.bindLoginByPhone(data).then(res => {
|
||
if (res.code == 20000) {
|
||
this.loginSuccess(res)
|
||
}
|
||
})
|
||
},
|
||
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)
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none',
|
||
complete: (err) => {
|
||
setTimeout(() => {
|
||
uni.redirectTo({
|
||
url: '../index/newindex'
|
||
})
|
||
}, 1000);
|
||
// console.log(err)
|
||
}
|
||
})
|
||
}
|
||
},
|
||
loginFn() {
|
||
uni.clearStorageSync()
|
||
if (this.type == 1) {
|
||
uni.setStorageSync('logintype', this.type)
|
||
}
|
||
uni.login({
|
||
provider: 'weixin',
|
||
success: (loginRes) => {
|
||
const code = loginRes.code
|
||
|
||
// this.onceCode = code
|
||
oilIdentityApi.sendCode({
|
||
code: code
|
||
}).then(res => {
|
||
if (res.code === 20000) {
|
||
console.log(res.data, '--------------')
|
||
uni.setStorageSync('openid', res.data.openId)
|
||
uni.setStorageSync('unionid', res.data.unionId)
|
||
this.sessionKey = res.data.sessionKey
|
||
uni.setStorageSync('sessionKey', res.data.sessionKey)
|
||
this.autoLogin(loginRes)
|
||
} else if (res.code == 1002) {
|
||
uni.showModal({
|
||
title: '微信登录失败提醒',
|
||
content: `${res.msg}如有疑问，请联系客服处理`
|
||
})
|
||
} else {
|
||
console.log('res', res.code)
|
||
}
|
||
|
||
}).catch(err => {})
|
||
|
||
},
|
||
fail: err => {},
|
||
})
|
||
},
|
||
autoLogin(loginRes) {
|
||
oilIdentityApi.autoLogin({
|
||
code: loginRes.code,
|
||
unionId: uni.getStorageSync('unionid'),
|
||
loginSystem: 'OIL_OMS_WEB_MINI'
|
||
}).then(res => {
|
||
if (res.code == 20000) {
|
||
this.loginSuccess(res)
|
||
}
|
||
})
|
||
},
|
||
sumit() {
|
||
if (this.value.length == 0) {
|
||
this.$refs.popup.open('center')
|
||
}
|
||
console.log(this.value)
|
||
},
|
||
change(e) {
|
||
console.log('e:', e);
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.wxlogin {
|
||
background-color: white;
|
||
width: 70rpx;
|
||
height: 70rpx;
|
||
border-radius: 50px;
|
||
border: 0px !important;
|
||
padding: 0 !important;
|
||
}
|
||
|
||
.ghphone {
|
||
text-align: center;
|
||
font-size: 28rpx;
|
||
margin-bottom: 24rpx;
|
||
color: #2866FF;
|
||
}
|
||
|
||
.uni-easyinput__content-input {
|
||
height: 100rpx;
|
||
}
|
||
|
||
.popup_footer_buttent {
|
||
width: 250rpx;
|
||
height: 88rpx;
|
||
background: #2866FF;
|
||
border-radius: 10rpx;
|
||
color: #FFFFFF;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.popup_footer_butteno {
|
||
width: 250rpx;
|
||
height: 88rpx;
|
||
border-radius: 10rpx;
|
||
color: #333333;
|
||
border: 1px solid #BBBBBB;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.popup_footer {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
font-size: 32rpx !important;
|
||
margin-top: 50rpx;
|
||
}
|
||
|
||
.popup_text {
|
||
margin-top: 77rpx;
|
||
font-size: 26rpx;
|
||
color: #BBBBBB;
|
||
line-height: 30rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.popup_title {
|
||
font-size: 36rpx;
|
||
color: #000000;
|
||
padding-top: 69rpx;
|
||
text-align: center;
|
||
font-weight: 800;
|
||
}
|
||
|
||
.popup {
|
||
width: 630rpx;
|
||
height: 450rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 30rpx;
|
||
}
|
||
|
||
.wx {
|
||
width: 70rpx;
|
||
height: 70rpx;
|
||
}
|
||
|
||
.xian_text {
|
||
flex-shrink: 1;
|
||
font-size: 20rpx;
|
||
color: #999999;
|
||
margin: 0 15rpx;
|
||
}
|
||
|
||
.xian {
|
||
height: 1px;
|
||
background-color: #E3E5E7;
|
||
}
|
||
|
||
.other_title {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.other {
|
||
/* margin-top: 257rpx; */
|
||
width: 750rpx;
|
||
position: absolute;
|
||
bottom: 98rpx;
|
||
}
|
||
|
||
.checkbox__inner {
|
||
border-radius: 50px !important;
|
||
}
|
||
|
||
.checklist-box {
|
||
margin-right: 0px !important;
|
||
}
|
||
|
||
.form_body_footer_text {
|
||
font-size: 22rpx;
|
||
color: #B6B6B6;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.form_body_footer {
|
||
margin-top: 92rpx;
|
||
}
|
||
|
||
.form_body_butten {
|
||
width: 650rpx;
|
||
height: 100rpx;
|
||
background: #2866FF;
|
||
border-radius: 10rpx;
|
||
color: white;
|
||
font-size: 36rpx;
|
||
/* margin-top: 24rpx; */
|
||
}
|
||
|
||
.form_body_input {
|
||
display: flex;
|
||
background-color: #F5F5F5;
|
||
margin-top: 50rpx;
|
||
border-radius: 50rpx;
|
||
padding-left: 28rpx;
|
||
align-items: center;
|
||
}
|
||
|
||
.form_input {
|
||
padding-left: 20rpx;
|
||
height: 100rpx;
|
||
}
|
||
|
||
.is-input-border.data-v-abe12412 {
|
||
border: 0px !important;
|
||
}
|
||
|
||
.form_body_title {
|
||
font-size: 48rpx;
|
||
color: #333333;
|
||
font-weight: 600;
|
||
margin-left: 31rpx;
|
||
}
|
||
|
||
.form_body {
|
||
width: 650rpx;
|
||
margin: 0 auto;
|
||
margin-top: 421rpx;
|
||
|
||
}
|
||
</style> |