347 lines
7.8 KiB
Vue
347 lines
7.8 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;">
|
|||
|
|
<button class="wxlogin" 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>
|