You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
606 lines
15 KiB
606 lines
15 KiB
<!-- 验证码登录 账密登录 --> |
|
<template> |
|
<view class="login-page bg-white"> |
|
<cu-custom class="main-totextbar bg-main-oil" :isBack="true" bgColor="bg-white"> |
|
</cu-custom> |
|
<view class="bg-img bg-mask flex align-center" |
|
:style="'background-image: url('+imgURL+'login-bg-top.png);height: 480upx;'"> |
|
<view class="padding-xl "> |
|
<view class="image login-bg"> |
|
<image :src="otherImgURL+'logo@ZP.png'" mode="widthFix"></image> |
|
<view class="text-bold text-lg padding-top"> |
|
一路油你 中品加油 |
|
</view> |
|
<view class="text-df text-grey padding-top-xs padding-bottom"> |
|
登录后加油更便捷 |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
<scroll-view class="bg-white nav padding login-shadow"> |
|
<view class="flex text-center padding-bottom"> |
|
<view class="cu-item text-bold text-lg flex-sub"> |
|
|
|
</view> |
|
<!-- <view class="cu-item text-bold text-lg flex-sub " |
|
:class="[1==TabCur?'text-red cur':'',(animation=='animation-fades'&&1==TabCur)?'animation-fade':'']" |
|
@tap="tabSelect(1)"> |
|
企业账号 |
|
</view> --> |
|
|
|
<view class="cu-item text-bold text-lg flex-sub " |
|
:class="[0==TabCur?'text-blues cur':'',(animation=='animation-fades'&&0==TabCur)?'animation-fade':'']" |
|
@tap="tabSelect(0)"> |
|
个人账号 |
|
</view> |
|
<view class="cu-item text-bold text-lg flex-sub"> |
|
|
|
</view> |
|
</view> |
|
<form v-if="0==TabCur"> |
|
<view class="cu-form-group padding-top yu-input" v-if="!person.sended"> |
|
<input placeholder="请输入手机号码" label="手机号" v-model="driver.username" type="number" name="input" /> |
|
</view> |
|
|
|
<view class="" v-if="person.registered"> |
|
<view class="cu-form-group yu-input" v-if="showRandom"> |
|
<input placeholder="请输入验证码" type="number" v-model="person.random" name="input" /> |
|
<view class='oil-main-color' @tap="sendRandom"> {{person.tips}}</view> |
|
</view> |
|
<view class="cu-form-group yu-input" v-else> |
|
<input placeholder="请输入密码" type="password" v-model="person.password" name="input" /> |
|
</view> |
|
</view> |
|
|
|
<view class="cu-form-group text-sm"> |
|
<view class="" v-if="showRandom" @tap="accuntSourceSelect"> |
|
当前为验证码登录 |
|
</view> |
|
<view class="" v-else @tap="accuntSourceSelect"> |
|
当前为密码登录 |
|
</view> |
|
|
|
</view> |
|
<view class=" flex flex-direction padding-top-lg" v-if="!person.registered"> |
|
<button class="cu-btn margin bg-main-oil lg" v-show="!person.sended" @tap="ifRegistered"> |
|
下一步 |
|
</button> |
|
</view> |
|
<view view class=" flex flex-direction padding-top-lg" v-else> |
|
<button class="cu-btn bg-main-oil lg" @tap="loginRandom" v-if="showRandom"> |
|
登录 |
|
</button> |
|
<button v-else class="cu-btn bg-main-oil lg" @tap="loginPwd"> |
|
登录 |
|
</button> |
|
|
|
</view> |
|
</form> |
|
|
|
<!-- <form v-if="1==TabCur"> |
|
<view class="cu-form-group yu-input padding-top" v-if="!company.sended"> |
|
<input name="手机号" label="手机号" type="number" placeholder="请输入企业下绑定手机号" v-model="driver.username" /> |
|
</view> |
|
<view class="" v-if="company.registered"> |
|
<view class="cu-form-group yu-input" v-if="showRandom" v-show="company.sended"> |
|
<input placeholder="请输入验证码" type="number" v-model="company.random" /> |
|
<view class='oil-main-color' @tap="sendRandom"> {{company.tips}}</view> |
|
</view> |
|
<view class="cu-form-group yu-input" v-else> |
|
<input placeholder="请输入密码" type="password" v-model="company.password" /> |
|
</view> |
|
|
|
</view> |
|
|
|
<view class="cu-form-group text-sm"> |
|
<view class="" v-if="showRandom" @tap="accuntSourceSelect"> |
|
当前为验证码登录 |
|
</view> |
|
<view class="" v-else @tap="accuntSourceSelect"> |
|
当前为密码登录 |
|
</view> |
|
|
|
</view> |
|
<view class=" flex flex-direction padding-top-lg" v-if="!company.registered"> |
|
<button class="cu-btn margin bg-main-oil lg" v-show="!company.sended" @tap="ifRegistered"> |
|
下一步 |
|
</button> |
|
</view> |
|
<view class=" flex flex-direction padding-top-lg" v-else> |
|
<button v-if="showRandom" class="cu-btn bg-main-oil lg" @tap="loginRandom"> |
|
登录 |
|
</button> |
|
<button v-else class="cu-btn bg-main-oil lg" @tap="loginPwd"> |
|
登录 |
|
</button> |
|
|
|
</view> |
|
</form> --> |
|
|
|
</scroll-view> |
|
|
|
<view class="cu-load load-modal" v-if="loadModal"> |
|
</view> |
|
<loginBottom @onCheck="checkAgree" /> |
|
|
|
</view> |
|
</template> |
|
|
|
<script> |
|
import loginBottom from './components/loginBottom.vue' |
|
import authApi from '@/api/auth.js' |
|
import md5 from 'js-md5' |
|
export default { |
|
components: { |
|
loginBottom |
|
}, |
|
data() { |
|
return { |
|
showRandom: true, |
|
animation: '', |
|
hasPhone: false, |
|
userHandle: false, |
|
TabCur: 0, |
|
verifyCodeToken: "", |
|
accuntSource: false, |
|
imgURL: this.global.imgURL, |
|
otherImgURL: this.global.otherImgURL, |
|
loadModal: false, |
|
active: 0, |
|
|
|
person: { |
|
sended: false, |
|
password: "", |
|
tips: '发送验证码', |
|
intervalID: '', |
|
random: '', |
|
registered: false |
|
}, |
|
|
|
company: { |
|
sended: false, |
|
password: "", |
|
tips: '发送验证码', |
|
intervalID: '', |
|
random: '', |
|
registered: false |
|
}, |
|
driver: { |
|
username: "" |
|
}, |
|
count: 0, |
|
loginRes: {}, |
|
checked: false, |
|
next: false, |
|
scanningParams:null |
|
} |
|
}, |
|
onLoad(options) { |
|
if(options.scanningParams) { |
|
// 用于扫码进入油站详情页面 |
|
this.scanningParams = options.scanningParams |
|
} |
|
}, |
|
onShow() {}, |
|
methods: { |
|
checkAgree(val) { |
|
this.checked = val |
|
// this.showRandom = true |
|
}, |
|
ifRegistered() { |
|
if (this.driver.username.length != 11) { |
|
uni.showToast({ |
|
title: '手机码验证不通过', |
|
icon: 'none' |
|
}) |
|
return false |
|
} |
|
if (this.showRandom) { |
|
this.sendRandom() |
|
} else { |
|
let type = this.TabCur == 0 ? 'Personal' : 'Company' |
|
authApi.loginByPhoneNext({ |
|
username: this.driver.username |
|
}, type).then(res => { |
|
if (res.code == 20000) { |
|
// 存在 next |
|
this.person.registered = true |
|
this.next = true |
|
} else if (res.code == 42008) { |
|
uni.showModal({ |
|
title: res.msg, |
|
confirmText: '立即注册', |
|
confirmColor: '#FE0505', |
|
success: (res) => { |
|
if (res.confirm) { |
|
uni.setStorageSync('username', that.driver.username) |
|
uni.navigateTo({ |
|
url: '/BagAuth/pages/login/register' |
|
}) |
|
} |
|
} |
|
}) |
|
} |
|
}) |
|
} |
|
}, |
|
sendRandom() { |
|
// 判断该手机号是否已注册 |
|
if (1 == this.TabCur) { |
|
// 1 企业 0个人 |
|
authApi.checkCompanyAccount({ |
|
username: this.driver.username |
|
}).then(res => { |
|
if (res.data != null) { |
|
if (res.data.code == 40001) { |
|
uni.showModal({ |
|
title: res.data.msg, |
|
content: '企业账号只能由企业分配，请确认是否当前手机号，如有疑问，请联系客服处理', |
|
showCancel: false, |
|
confirmColor: '#1890FF', |
|
success: (res) => { |
|
if (confirm) { |
|
|
|
} |
|
} |
|
}) |
|
} else if (res.code == 20000) { |
|
this.company.registered = true |
|
this.verifyCodeToken = res.data.verifyCodeToken |
|
uni.showToast({ |
|
title: res.msg |
|
}) |
|
this.showRandom = true |
|
this.company.sended = true |
|
this.sended = true |
|
var second = 60 |
|
this.company.intervalID = setInterval(() => { |
|
if (second > 0) { |
|
this.company.tips = second + '秒后可重发' |
|
console.log(this.tips) |
|
second-- |
|
} else { |
|
clearInterval(this.company.intervalID) |
|
this.company.tips = '发送验证码' |
|
|
|
} |
|
}, 1000) |
|
} |
|
} |
|
}) |
|
} else { |
|
let that = this |
|
authApi.checkPersonalAccount({ |
|
username: this.driver.username |
|
}).then(res => { |
|
if (res.data != null) { |
|
if (res.data.code == 40001) { |
|
uni.showModal({ |
|
title: res.data.msg, |
|
confirmText: '立即注册', |
|
confirmColor: '#1890FF', |
|
success: (res) => { |
|
if (res.confirm) { |
|
uni.setStorageSync('username', that.driver.username) |
|
uni.navigateTo({ |
|
url: '/BagAuth/pages/login/register' |
|
}) |
|
} |
|
} |
|
}) |
|
} else if (res.code == 20000) { |
|
this.person.registered = true |
|
this.verifyCodeToken = res.data.verifyCodeToken |
|
uni.showToast({ |
|
title: res.msg |
|
}) |
|
this.showRandom = true |
|
this.person.sended = true |
|
this.sended = true |
|
var second = 60 |
|
this.person.intervalID = setInterval(() => { |
|
if (second > 0) { |
|
this.person.tips = second + '秒后可重发' |
|
second-- |
|
} else { |
|
clearInterval(this.person.intervalID) |
|
this.person.tips = '重发验证码' |
|
} |
|
}, 1000) |
|
} |
|
} |
|
}) |
|
} |
|
}, |
|
checkAccount() { |
|
|
|
}, |
|
// sendRandom() { |
|
// if (this.TabCur == 0) { |
|
// if (this.company.tips == '重发验证码') { |
|
// this.ifRegistered() |
|
// return false |
|
// } |
|
// } |
|
// if (this.TabCur == 1) { |
|
// if (this.person.tips == '重发验证码') { |
|
// this.ifRegistered() |
|
// return false |
|
// } |
|
// } |
|
// uni.showToast({ |
|
// title: '别急，等会儿再发哦', |
|
// icon: 'none', |
|
// position: 'bottom' |
|
// }) |
|
// }, |
|
|
|
loginPwd() { |
|
if (!this.checked) { |
|
uni.showToast({ |
|
title: '请您阅读并同意协议', |
|
icon: 'none' |
|
}) |
|
return false |
|
} |
|
let data = { |
|
username: this.driver.username, |
|
password: this.TabCur == 0 ? md5(this.person.password) : md5(this.company.password), |
|
unionId: uni.getStorageSync('unionid') |
|
} |
|
let type = this.TabCur == 0 ? 'Personal' : 'Company' |
|
authApi.loginPwd(data, type).then(res => { |
|
this.loginSuccess(res) |
|
}) |
|
}, |
|
loginRandom() { |
|
if (!this.checked) { |
|
uni.showToast({ |
|
title: '请您阅读并同意协议', |
|
icon: 'none' |
|
}) |
|
return false |
|
} |
|
let data = { |
|
verifyCodeToken: this.verifyCodeToken, |
|
username: this.driver.username, |
|
verifyCode: this.TabCur == 0 ? this.person.random : this.company.random, |
|
unionId: uni.getStorageSync('unionid') |
|
} |
|
let type = this.TabCur == 0 ? 'Personal' : 'Company' |
|
authApi.loginRandom(data, type).then(res => { |
|
if (res.code == 20000) { |
|
this.loginSuccess(res) |
|
} |
|
}) |
|
}, |
|
checkPersonal() { |
|
if (this.accuntSource) { |
|
authApi.checkPersonalRDM({ |
|
username: this.driver.username |
|
}).then(res => { |
|
|
|
}) |
|
} else { |
|
authApi.checkPersonalPWD({ |
|
username: this.driver.username |
|
}).then(res => { |
|
if (res.code == 20000) {} |
|
}) |
|
} |
|
|
|
}, |
|
loginSuccess(res) { |
|
let resData = res.data |
|
if (resData.authTokenDTO.loginFlag) { |
|
uni.setStorageSync('Authorization', resData.authTokenDTO.accessToken) |
|
uni.setStorageSync('accountStatus', resData.isCompanyAccount) |
|
uni.getUserProfile({ |
|
success: (res) => { |
|
uni.setStorageSync('wxInfo', JSON.parse(res.rawData)) |
|
} |
|
}) |
|
let user = resData.authTokenDTO.loginUser |
|
uni.setStorageSync('user', user) |
|
|
|
setTimeout(() => { |
|
uni.showToast({ |
|
title: res.msg, |
|
icon: 'none' |
|
}) |
|
}, 1000); |
|
if(this.scanningParams) { |
|
uni.redirectTo({ |
|
url: `/BagStation/pages/stationDetail/stationDetail?q=${this.scanningParams}` |
|
}) |
|
return |
|
} |
|
// 这里有问题 |
|
uni.switchTab({ |
|
url: '/pages/tabbar/home/home' |
|
}) |
|
} |
|
}, |
|
checkCompany() { |
|
if (this.accuntSource) { |
|
authApi.checkCompanyRDM({ |
|
username: this.driver.username |
|
}).then(res => { |
|
|
|
}) |
|
} else { |
|
authApi.checkCompanyPWD({ |
|
username: this.driver.username |
|
}).then(res => { |
|
|
|
}) |
|
} |
|
}, |
|
// checkPersonalRDM(){ |
|
// authApi.checkPersonalRDM({username:this.driver.username}).then(res=>{ |
|
|
|
// }) |
|
// }, |
|
// checkPersonalRDM(){ |
|
// authApi.checkPersonalRDM({username:this.driver.username}).then(res=>{ |
|
|
|
// }) |
|
// }, |
|
getUserInfo() { |
|
|
|
}, |
|
clearStorage() { |
|
uni.clearStorage() |
|
}, |
|
decryptPhoneNumber(e) { |
|
// console.log(e.detail) |
|
if (e.detail.errMsg === 'getPhoneNumber:ok') { |
|
const data1 = { |
|
...this.loginRes, |
|
...e.detail |
|
} |
|
this.bindLoginByPhone(data1) |
|
} else { |
|
this.userHandle = true |
|
uni.showModal({ |
|
title: '用户拒绝了手机号的授权，并给你一个大耳巴子', |
|
content: `如有疑问，请联系客服处理` |
|
}) |
|
} |
|
}, |
|
bindLoginByPhone(data) { |
|
if (this.count < 1) { |
|
oilIdentityApi.bindLoginByPhone(data).then(res => { |
|
if (res.code == '000') { |
|
this.bindLoginByPhone(data) |
|
this.count++ |
|
} |
|
}) |
|
} |
|
|
|
}, |
|
loginWeixin() { |
|
uni.login({ |
|
provider: 'weixin', |
|
success: loginRes => { |
|
const code = loginRes.code |
|
} |
|
}) |
|
}, |
|
|
|
|
|
// reqRandom() { |
|
// if (this.driver.phone && this.driver.phone.length === 11) { |
|
// uni.showToast({ |
|
// title: '发送中...', |
|
// duration: 0, |
|
// icon: 'loding', |
|
// mask: true |
|
// }) |
|
// this.phoneError = '' |
|
// this.disabled = true |
|
// this.btnColor = '#333' |
|
|
|
// const data2 = { |
|
// ...this.driver, |
|
// IMEI: this.IMEI, |
|
// serviceCode: 'LSM_SENDMESSAGES', |
|
// type: 'LSM_APP_LOGIN' |
|
// } |
|
|
|
// authApi.api(data2).then(res => { |
|
// console.log('验证码参数', data2) |
|
// console.log('验证码返回参数res', res) |
|
// if (res.code === '1000') { |
|
// this.disabled = true |
|
// uni.hideLoading() |
|
// uni.showToast({ |
|
// title: '验证码发送成功', |
|
// icon: 'success', |
|
// position: 'bottom' |
|
// }) |
|
// this.btnColor = '#333' |
|
// let second = 60 |
|
// const timer = setInterval(() => { |
|
// second-- |
|
// if (second) { |
|
// this.tips = `${second}秒后重发` |
|
// } else { |
|
// clearInterval(timer) |
|
// this.tips = `发送验证码` |
|
// this.disabled = false |
|
// this.btnColor = '#FE0505' |
|
// } |
|
// }, 1000) |
|
// } |
|
// }) |
|
// } else { |
|
// uni.showToast({ |
|
// title: '请输入正确手机号', |
|
// icon: 'none' |
|
// }) |
|
// } |
|
// }, |
|
|
|
tabSelect(e) { |
|
this.TabCur = e; |
|
var anmiaton = 'animation-fades' |
|
this.animation = anmiaton; |
|
setTimeout(() => { |
|
this.animation = ''; |
|
}, 1000) |
|
}, |
|
accuntSourceSelect() { |
|
this.showRandom = !this.showRandom |
|
}, |
|
ifSuccess(code, data) { |
|
if (code === '1000') { |
|
// // // // console.log('122') |
|
|
|
uni.showToast({ |
|
title: `登录成功!` |
|
}) |
|
uni.navigateTo({ |
|
url: 'pages/index/index' |
|
}) |
|
} |
|
} |
|
} |
|
} |
|
</script> |
|
|
|
<style> |
|
.login-bg { |
|
width: 100%; |
|
} |
|
|
|
.login-bg image { |
|
width: 100upx; |
|
vertical-align: bottom; |
|
} |
|
|
|
.login-page { |
|
height: 750rpx; |
|
background-color: #fff; |
|
} |
|
|
|
.login-shadow { |
|
border-radius: 50upx 50upx 0 0; |
|
box-shadow: 0px -10px 20px 2px rgba(0, 0, 0, 0.06); |
|
margin-top: -50upx; |
|
position: relative; |
|
z-index: 2; |
|
} |
|
|
|
.bg-mask { |
|
background-color: transparent; |
|
} |
|
|
|
.bg-mask::after { |
|
background-color: transparent; |
|
} |
|
|
|
.yu-input { |
|
background: #FAFAFA |
|
} |
|
</style>
|
|
|