oms
This commit is contained in:
caolc
346
pages/login/login.vue
Normal file
346
pages/login/login.vue
Normal file
@@ -0,0 +1,346 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user