caoliancun/LSM_OIL_SITE_zhongping
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

第一提交

Browse Source
This commit is contained in:
caolc
2023-04-26 14:03:20 +08:00
commit ed478c7402
383 changed files with 67118 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

694
pages/login/posLogin/posLogin.vue Normal file
View File

@@ -0,0 +1,694 @@
<!-- 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" @blur="bulrInput" />
</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>