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.
694 lines
19 KiB
694 lines
19 KiB
<!-- pos机账号登录入口 --> |
|
<template> |
|
<view class="page-content my-bg"> |
|
<cu-custom class="main-topbar bg-main-oil" bgColor="bg-main-oil" :isBack="true"> |
|
<block slot="content">星油云站</block> |
|
</cu-custom> |
|
<view class="bg-img margin flex padding-lg radius align-center text-center" :style="'background-image: url('+mainURL+'login-bg.png)'"> |
|
<view class="padding-lg margin text-center text-lg text-white w100"> |
|
<text class>油站工作人员绑定油站</text> |
|
</view> |
|
</view> |
|
<view class="pannel"> |
|
<view class="bg-white margin padding radius shadow-warp"> |
|
<view class="cu-form-group"> |
|
<view class="title mini-label text-black">手机号</view> |
|
<input type="number" v-model="auth.phone" placeholder="请输入手机号" name="input" /> |
|
</view> |
|
<view class="cu-form-group padding-top-sm" v-if="showRandom"> |
|
<view class="title text-black mini-label">验证码</view> |
|
<input type="number" :maxlength="6" v-model="auth.captcha" placeholder="六位数字验证码" name="input" /> |
|
<text :class="frozen?'text-gray':'oil-main-color'" @tap="sendMsg">{{tips}}</text> |
|
</view> |
|
<view class=" cu-form-group padding-top-sm" v-else> |
|
<view class="title mini-label text-black">密码</view> |
|
<input type="password" v-model="auth.password" placeholder="请输入登入密码" name="input" /> |
|
</view> |
|
</view> |
|
|
|
<view class="margin-right padding-right-lg text-right" @tap="showRandom=true" v-if="!showRandom"> |
|
<text class="text-sm text-red padding-right">短信验证码登录</text> |
|
</view> |
|
<view class="margin-right padding-right-lg text-right" @tap="showRandom=false" v-else> |
|
<text class="text-sm text-red padding-right">密码登录</text> |
|
</view> |
|
</view> |
|
<view class="margin-lg padding-lg bottom-bg"> |
|
<button class="bg-main-oil round" v-if="showRandom" @tap="checkOli(0)">登录</button> |
|
<button class="bg-main-oil round" v-else @tap="checkOli(1)">登录</button> |
|
<view class="text-center margin-top text-gray text-sm padding-right" @tap="showTips"> |
|
<text class="cuIcon-question padding-right-xs"></text>突然登不上了 |
|
</view> |
|
</view> |
|
|
|
<view class="bottom-part"> |
|
<service-hotline /> |
|
</view> |
|
<view class="cu-modal" :class="modalName"> |
|
<view class="cu-dialog"> |
|
<view class="cu-bar bg-red light justify-end"> |
|
<view class="content "> |
|
{{'温馨提示'}} |
|
</view> |
|
<view class="action" @tap="hideModal"> |
|
<text class="cuIcon-close text-red"></text> |
|
</view> |
|
</view> |
|
<view class="text-left padding-xl padding-bottom padding-top bg-white"> |
|
<view class="padding-bottom-sm"> |
|
由于微信平台规则变更，现用户要关注 “星油云站” 公众号，才能登陆 |
|
</view> |
|
<view class="padding-bottom-sm "> |
|
之前已经关注过的小部分用户，可能需要重新关注才能登陆，即取消关注，再关注 |
|
</view> |
|
<official-account @binderror="bindload" @bindload="binderror"></official-account> |
|
<view class="text-center" @longpress="navToQr" @tap="toQr"> |
|
<view class=" img-view"> |
|
<image height="200" src="https://xingka51.oss-cn-hangzhou.aliyuncs.com/applets/cloudSite/yunzhan.jpg" mode="widthFix"></image> |
|
星油云站公众号 |
|
</view> |
|
</view> |
|
<view class="text-center padding-top padding-bottom"> |
|
<button class="cu-btn bg-red light round" open-type='contact' @tap="hideModal">未解决，联系在线客服</button> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
<view class="cu-modal" :class="checkList"> |
|
<view class="cu-dialog"> |
|
<view class="cu-bar bg-red justify-end"> |
|
<view class="content " > |
|
{{ titleText }} |
|
</view> |
|
<view class="action" @tap="hidecheckList"> |
|
<text class="cuIcon-close text-white"></text> |
|
</view> |
|
</view> |
|
<view class="text-left padding-xl padding-bottom padding-top bg-white"> |
|
<view class="flex align-center justify-between margin-bottom-sm " v-for="(list,i) in oliList" :key='list' v-if="checkUser"> |
|
<view class=""> {{list.otherSiteName}}</view> |
|
<view class=""> |
|
<view class=" bg-red cu-btn text-white text-center btn-radius-10 text-sm" @tap="checkLists(list.channelId)"> |
|
进入 |
|
</view> |
|
</view> |
|
</view> |
|
<view class="flex align-center justify-between textshowCheck margin-bottom-sm" v-else> |
|
<view class="text-df text-red"> |
|
{{errMsg}} |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
import cloudSiteApi from '@/api/cloud-site.js' |
|
import loginApi from '@/api/login.js' |
|
import oliUserApi from '@/api/oli-user.js' |
|
import oilIdentityApi from '@/api/oil-identity.js' |
|
import md5 from 'js-md5' |
|
|
|
export default { |
|
data() { |
|
return { |
|
titleText:"", |
|
errMsg:'', |
|
checkUser:false, |
|
checkType:0, |
|
checkList:'', |
|
modalName: '', |
|
baseURL: this.global.baseURL, |
|
mainURL: this.global.mainURL, |
|
forcedLogin: true, |
|
oilSiteNo: '', |
|
showRandom: true, |
|
auth: {}, |
|
tips: '发送验证码', |
|
frozen: false, // 二维码冷却时间 |
|
oliList:[ |
|
{ |
|
|
|
} |
|
] |
|
} |
|
}, |
|
created() { |
|
uni.showShareMenu() |
|
}, |
|
methods: { |
|
bulrInput(){ |
|
if(!this.auth.phone ){ |
|
uni.showToast({ |
|
title:'请输入手机号', |
|
icon:'none' |
|
}) |
|
console.log('-------------') |
|
return |
|
}else{ |
|
console.log(this.auth.phone) |
|
console.log('+++++++++++++') |
|
oliUserApi.getByPhone(this.auth.phone).then((res)=>{ |
|
if(res.code == 20000){ |
|
uni.setStorageSync('oliList',res.data) |
|
this.oliList = res.data |
|
this.checkUser = true |
|
// this.checkList = 'show' |
|
this.titleText = '油站时间' |
|
}else{ |
|
let _that= this |
|
_that.auth.phone = '' |
|
//console.log(this.auth.phone) |
|
this.errMsg =res.msg |
|
this.checkUser = false |
|
this.checkList = 'show' |
|
this.titleText = '提示' |
|
} |
|
}) |
|
} |
|
//console.log('input失焦') |
|
}, |
|
checkLists(id){ |
|
uni.setStorage({ |
|
key: 'channelId', |
|
data: id, |
|
success: () => { |
|
//console.log('channelId成功', id) |
|
} |
|
}) |
|
if(this.checkType == 0 ){ |
|
|
|
}else{ |
|
|
|
} |
|
}, |
|
checkOli(n){ |
|
// if(!this.checkUser){ |
|
// this.checkList = 'show' |
|
// return |
|
// } |
|
this.checkType = n |
|
if(n == 0 ){ |
|
this.loginRandom( ) |
|
//console.log('这里是验证码登录') |
|
}else{ |
|
if(!this.auth.phone){ |
|
uni.showToast({ |
|
title:'请输入手机号', |
|
icon:"none" |
|
}) |
|
return |
|
} |
|
if(!this.auth.password){ |
|
uni.showToast({ |
|
title:'请输入密码', |
|
icon:"none" |
|
}) |
|
return |
|
} |
|
this.loginPwd( ) |
|
} |
|
}, |
|
hidecheckList(){ |
|
this.checkList = '' |
|
}, |
|
toQr() { |
|
uni.navigateTo({ |
|
url: '/pages/test/test' |
|
}) |
|
}, |
|
// 根据用户手机查询油站 |
|
getByPhone(){ |
|
|
|
}, |
|
navToQr() { |
|
uni.setClipboardData({ |
|
data: 'https://xingka51.oss-cn-hangzhou.aliyuncs.com/applets/cloudSite/yunzhan.jpg', |
|
success: () => { |
|
uni.showToast({ |
|
title: '二维码链接已复制', |
|
icon: 'none' |
|
}) |
|
} |
|
}) |
|
}, |
|
hideModal() { |
|
this.modalName = '' |
|
}, |
|
showTips() { |
|
this.modalName = 'show' |
|
}, |
|
bindload() { |
|
//console.log('组件夹杂') |
|
}, |
|
binderror() { |
|
//console.log('组件夹杂失败') |
|
}, |
|
// loginWeixin() { |
|
// uni.login({ |
|
// provider: 'weixin', |
|
// success: loginRes => { |
|
// const code = loginRes.code |
|
// //console.log('启动页code', code) |
|
// oilIdentityApi.loginPersonal(code).then(res => { |
|
// //console.log(res) |
|
// if (res.code === 20000) { |
|
// uni.reLaunch({ |
|
// url: '/pages/index/index', |
|
// fail: (err) => { |
|
// //console.log(err) |
|
// } |
|
// }) |
|
// uni.showToast({ |
|
// title: res.msg, |
|
// icon: 'success', |
|
// duration: 3000 |
|
// }) |
|
// uni.setStorage({ |
|
// key: 'Authorization', |
|
// data: res.data.authTokenDTO.accessToken, |
|
// success: () => { |
|
// //console.log('Authorization成功', res.data.authTokenDTO.accessToken) |
|
// } |
|
// }) |
|
// uni.setStorage({ |
|
// key: 'unionId', |
|
// data: res.data.unionId, |
|
// success: () => { |
|
// //console.log('deviceunionId', res.data.unionId) |
|
// } |
|
// }) |
|
// uni.setStorage({ |
|
// key: 'device', |
|
// data: res.data.openid, |
|
// success: () => { |
|
// //console.log('deviceopenid', res.data.openid) |
|
// } |
|
// }) |
|
// uni.setStorageSync('userMenu', res.data.authTokenDTO.loginUser.roleMenus) |
|
// uni.setStorageSync('loginUser', { |
|
// id: res.data.authTokenDTO.loginUser.id, |
|
// name: res.data.authTokenDTO.loginUser.name, |
|
// userPhone: res.data.authTokenDTO.loginUser.userPhone |
|
// }) |
|
// } else { |
|
// uni.reLaunch({ |
|
// url: '/pages/login/boforeLogin/boforeLogin', |
|
// fail: (err) => { |
|
// //console.log(err) |
|
// } |
|
// }) |
|
// //console.log('res', res.code) |
|
// } |
|
|
|
|
|
// }).catch(err => { |
|
// uni.reLaunch({ |
|
// url: '/pages/login/boforeLogin/boforeLogin', |
|
// fail: (err) => { |
|
// //console.log(err) |
|
// } |
|
// }) |
|
// }) |
|
// }, |
|
// fail: err => { |
|
// //console.log(err) |
|
// } |
|
// }); |
|
// }, |
|
loginPwd(channelId) { |
|
uni.login({ |
|
provider: 'weixin', |
|
success: loginRes => { |
|
//console.log(loginRes) |
|
const code = loginRes.code |
|
oilIdentityApi.sendCode(code).then((res)=>{ |
|
//console.log('这里是登录返回值') |
|
//console.log(res.data.unionId) |
|
//console.log(res.data.openId) |
|
const data3 = { |
|
username: this.auth.phone, |
|
password: md5(this.auth.password), |
|
channelId:channelId, |
|
code: code, |
|
unionId:res.data.unionId, |
|
openId:res.data.openId |
|
} |
|
uni.setStorage({ |
|
key: 'device', |
|
data: res.data.openId, |
|
success: () => { |
|
//console.log('deviceopenid', res.data.openId) |
|
} |
|
}) |
|
uni.setStorageSync('checkFirst',true) |
|
uni.setStorage({ |
|
key: 'unionId', |
|
data: res.data.unionId, |
|
success: () => { |
|
//console.log('deviceunionId', res.data.unionId) |
|
} |
|
}) |
|
//console.log('这里是请求发送内容',data3) |
|
oilIdentityApi.loginByPhonePwd(data3).then(res => { |
|
//console.log('res', res) |
|
uni.showToast({ |
|
title: res.msg, |
|
icon: 'none' |
|
}) |
|
//console.log('oilSiteCode', this.oilSiteNo) |
|
if (res.code === 20000) { |
|
|
|
uni.reLaunch({ |
|
url: '/pages/index/index', |
|
fail: (err) => { |
|
//console.log(err) |
|
} |
|
}) |
|
uni.showToast({ |
|
title: res.msg, |
|
icon: 'success', |
|
duration: 3000 |
|
}) |
|
uni.setStorage({ |
|
key: 'Authorization', |
|
data: res.data.authTokenDTO.accessToken, |
|
success: () => { |
|
//console.log('Authorization成功', res.data.authTokenDTO.accessToken) |
|
} |
|
}) |
|
|
|
uni.setStorageSync('userMenu', res.data.authTokenDTO.loginUser.roleMenus) |
|
//console.log( '这里是获取userMenu处',res.data.authTokenDTO.loginUser.roleMenus) |
|
uni.setStorageSync('loginUser', { |
|
id: res.data.authTokenDTO.loginUser.id, |
|
name: res.data.authTokenDTO.loginUser.name, |
|
userPhone: res.data.authTokenDTO.loginUser.userPhone |
|
}) |
|
} |
|
}) |
|
} ) |
|
}, |
|
fail: err => { |
|
//console.log(err) |
|
} |
|
}); |
|
}, |
|
loginWeixin() { |
|
uni.login({ |
|
provider: 'weixin', |
|
success: loginRes => { |
|
const code = loginRes.code |
|
//console.log(code) |
|
oilIdentityApi.sendCode(code).then((res)=>{ |
|
|
|
oilIdentityApi.loginPersonal().then(res => { |
|
if (res.code === 20000) { |
|
uni.reLaunch({ |
|
url: '/pages/index/index', |
|
fail: (err) => { |
|
//console.log(err) |
|
} |
|
}) |
|
uni.showToast({ |
|
title: res.msg, |
|
icon: 'success', |
|
duration: 3000 |
|
}) |
|
uni.setStorage({ |
|
key: 'Authorization', |
|
data: res.data.authTokenDTO.accessToken, |
|
success: () => { |
|
//console.log('Authorization成功', res.data.authTokenDTO.accessToken) |
|
} |
|
}) |
|
uni.setStorage({ |
|
key: 'device', |
|
data: res.data.openid, |
|
success: () => { |
|
//console.log('deviceopenid', res.data.openid) |
|
} |
|
}) |
|
uni.setStorageSync('userMenu', res.data.authTokenDTO.loginUser.roleMenus) |
|
uni.setStorageSync('loginUser', { |
|
id: res.data.authTokenDTO.loginUser.id, |
|
name: res.data.authTokenDTO.loginUser.name, |
|
userPhone: res.data.authTokenDTO.loginUser.userPhone |
|
}) |
|
uni.setStorage({ |
|
key: 'unionId', |
|
data: res.data.unionId, |
|
success: () => { |
|
//console.log('deviceunionId', res.data.unionId) |
|
} |
|
}) |
|
} else { |
|
//console.log('res', res.code) |
|
uni.showToast({ |
|
title: '未绑定微信', |
|
icon: 'none', |
|
duration: 1500 |
|
}) |
|
} |
|
|
|
|
|
}) |
|
}) |
|
|
|
}, |
|
fail: err => { |
|
//console.log(err) |
|
} |
|
}); |
|
}, |
|
sendMsg() { |
|
if(!this.checkUser){ |
|
return |
|
} |
|
if (!this.frozen) { |
|
if (this.auth.phone) { |
|
const data2 = { |
|
username: this.auth.phone |
|
} |
|
oilIdentityApi.getVerifyCode(data2).then(res => { |
|
//console.log('res', res) |
|
this.auth.verifyCodeToken = res.data.verifyCodeToken |
|
uni.showToast({ |
|
title: res.msg, |
|
icon: 'none' |
|
}) |
|
if (res.code === 20000) { |
|
this.frozen = true |
|
setTimeout(() => { |
|
this.frozen = false |
|
clearInterval(timer) |
|
this.tips = `发送验证码` |
|
}, 1000 * 60); |
|
let second = 60 |
|
const timer = setInterval(() => { |
|
second-- |
|
if (second) { |
|
this.tips = `${second}秒后重发` |
|
} else { |
|
this.tips = `发送验证码` |
|
this.disabled = false |
|
this.btnColor = '#FE0505' |
|
} |
|
}, 1000) |
|
|
|
} |
|
|
|
}) |
|
|
|
} else { |
|
uni.showToast({ |
|
title: '请输入您的账号', |
|
icon: 'none' |
|
}) |
|
} |
|
} |
|
}, |
|
|
|
loginRandom(channelId) { |
|
uni.login({ |
|
provider: 'weixin', |
|
success: loginRes => { |
|
const code = loginRes.code |
|
//console.log(code) |
|
// const data2 = { |
|
// phone: this.auth.phone, |
|
// username: this.auth.phone, //类型：String 必有字段 备注：手机号 |
|
// verifyCode: this.auth.captcha, //类型：String 必有字段 备注：验证码 |
|
// code: code //类型：String 必有字段 备注：微信code |
|
// } |
|
// sendCode 在传值时在接口文件里添加了一个appid与code一起传到后台 |
|
oilIdentityApi.sendCode(code).then((res)=>{ |
|
const userData ={ |
|
username: this.auth.phone, //类型：String 必有字段 备注：手机号 |
|
verifyCode: this.auth.captcha, //类型：String 必有字段 备注：验证码 |
|
// code: code //类型：String 必有字段 备注：微信code |
|
unionId:res.data.unionId, //根据code接收后台返回的值 |
|
channelId:channelId, //所选油站channelId |
|
verifyCodeToken: this.auth.verifyCodeToken ,//验证码 |
|
openId:res.data.openId |
|
} |
|
//console.log('device') |
|
//console.log(res.data.openId) |
|
uni.setStorage({ |
|
key: 'unionId', |
|
data: res.data.unionId, |
|
success: () => { |
|
//console.log('deviceunionId', res.data.unionId) |
|
} |
|
}) |
|
uni.setStorage({ |
|
key: 'device', |
|
data: res.data.openId, |
|
success: () => { |
|
//console.log('deviceopenid', res.data.openId) |
|
} |
|
}) |
|
uni.setStorageSync('checkFirst',true) |
|
oilIdentityApi.verifyCodeLogin(userData).then(res => { |
|
//console.log('res', res) |
|
uni.showToast({ |
|
title: res.msg, |
|
icon: 'none' |
|
}) |
|
//console.log('Authorization') |
|
//console.log(res.data.authTokenDTO.loginUser.accessToken) |
|
//console.log('oilSiteCode', this.oilSiteNo) |
|
if (res.code === 20000) { |
|
uni.reLaunch({ |
|
url: '/pages/index/index', |
|
fail: (err) => { |
|
//console.log(err) |
|
} |
|
}) |
|
uni.showToast({ |
|
title: res.msg, |
|
icon: 'success', |
|
duration: 3000 |
|
}) |
|
uni.setStorage({ |
|
key: 'Authorization', |
|
data: res.data.authTokenDTO.accessToken, |
|
success: () => { |
|
//console.log('Authorization成功', res.data.authTokenDTO.accessToken) |
|
} |
|
}) |
|
|
|
uni.setStorageSync('userMenu', res.data.authTokenDTO.loginUser.roleMenus) |
|
uni.setStorageSync('loginUser', { |
|
id: res.data.authTokenDTO.loginUser.id, |
|
name: res.data.authTokenDTO.loginUser.name, |
|
userPhone: res.data.authTokenDTO.loginUser.userPhone |
|
}) |
|
} |
|
}) |
|
}) |
|
|
|
|
|
}, |
|
fail: err => { |
|
//console.log(err) |
|
} |
|
}); |
|
|
|
}, |
|
getMsg() { |
|
uni.requestSubscribeMessage({ |
|
tmplIds: ['W5XD3NQVa6knC5jXHeWT8GS7q5CHrDUMY_sF79kLkKk'], |
|
success: (res) => { |
|
//console.log(res) |
|
} |
|
}) |
|
}, |
|
getUserInfo({ |
|
detail |
|
}) { |
|
//console.log('三方登录只演示登录api能力，暂未关联云端数据'); |
|
//console.log('detail', detail) |
|
if (detail.userInfo) { |
|
this.loginLocal(detail.userInfo.nickName); |
|
} else { |
|
uni.showToast({ |
|
icon: 'none', |
|
title: '登陆失败' |
|
}); |
|
} |
|
|
|
}, |
|
loginLocal(nickName) { |
|
uni.setStorageSync('login_type', 'local') |
|
uni.setStorageSync('username', nickName) |
|
this.toMain(nickName); |
|
}, |
|
toMain(userName) { |
|
// this.login(userName) |
|
//console.log(userName) |
|
/** |
|
* 强制登录时使用reLaunch方式跳转过来 |
|
* 返回首页也使用reLaunch方式 |
|
*/ |
|
if (this.forcedLogin) { |
|
uni.reLaunch({ |
|
url: '/pages/index/index', |
|
success: () => { |
|
//console.log('success') |
|
}, |
|
fail: err => { |
|
//console.log(err) |
|
} |
|
}); |
|
} else { |
|
uni.navigateBack(); |
|
} |
|
|
|
} |
|
} |
|
}; |
|
</script> |
|
|
|
<style scoped> |
|
.textshowCheck{ |
|
flex-direction: column; |
|
} |
|
.page-content { |
|
min-height: 100%; |
|
position: relative; |
|
} |
|
|
|
.logo { |
|
min-width: 100%; |
|
text-align: center; |
|
} |
|
|
|
.logo img { |
|
width: 200upx; |
|
height: 200rpx; |
|
background-size: contain; |
|
margin: auto; |
|
} |
|
|
|
.bottom-bg { |
|
position: sticky; |
|
bottom: 50upx; |
|
} |
|
|
|
.img-view { |
|
max-width: 300upx; |
|
width: 100%; |
|
display: inline-block; |
|
} |
|
|
|
.qrimg-yunzhan { |
|
width: 200upx; |
|
height: 200rpx; |
|
} |
|
.btn-radius-10{ |
|
border-radius: 20upx; |
|
} |
|
</style>
|
|
|