717 lines
19 KiB
Vue
717 lines
19 KiB
Vue
<!-- 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 v-if="!isPad" class="banner text-lg">
|
||
欢迎使用星油云站
|
||
</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 ref="serviceHotline" :checked='checked' @onCheck="checkAgree" />
|
||
</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>
|
||
<uni-popup ref='popup'>
|
||
<view class="protocol_body">
|
||
<view class="protocol_header">
|
||
使用协议及隐私保护
|
||
</view>
|
||
<view class="protocol_content">
|
||
为了更好地保障您的合法权益，请您阅读并同意 <text style=" color: black; font-weight: 600;"
|
||
@click="$refs.serviceHotline.toAgree('xoilCloudUserAgree')">《用户协议》</text> 与 <text
|
||
style=" color: black; font-weight: 600;"
|
||
@click="$refs.serviceHotline.toAgree('xoilCloudPrivacyAgreement')">《隐私政策》</text>。
|
||
</view>
|
||
<view class="protocol_footer">
|
||
<button @click="$refs.popup.close()" class="protocol_footer_close">取消</button>
|
||
<button @click="checked=true;$refs.popup.close();" class="protocol_footer_confirm">确定</button>
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
</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 {
|
||
isPad:false,
|
||
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: [{
|
||
|
||
}],
|
||
checked: false
|
||
}
|
||
},
|
||
created() {
|
||
uni.showShareMenu()
|
||
uni.getSystemInfo({
|
||
success:(res) => {
|
||
// console.log('getSystemInfoSync',res)
|
||
this.isPad = res.deviceType === 'pad'
|
||
}
|
||
})
|
||
},
|
||
methods: {
|
||
checkAgree(val) {
|
||
this.checked = val
|
||
},
|
||
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.checked) {
|
||
this.$refs.popup.open('center')
|
||
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('组件夹杂失败')
|
||
},
|
||
|
||
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 => {
|
||
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
|
||
}
|
||
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 => {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none'
|
||
})
|
||
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 lang="scss" scoped>
|
||
.banner {
|
||
margin: 30rpx auto;
|
||
width: 690rpx;
|
||
height: 260rpx;
|
||
line-height: 260rpx;
|
||
text-align: center;
|
||
color: #fff;
|
||
border-radius: 20rpx;
|
||
background: url('https://publicxingyou.oss-cn-hangzhou.aliyuncs.com/mp-oil/yunsite-background.png') #FFFFFF 100%/100% no-repeat;
|
||
}
|
||
.protocol_footer_close {
|
||
width: 185rpx;
|
||
border-radius: 94rpx 94rpx 94rpx 94rpx;
|
||
opacity: 1;
|
||
border: 1px solid #000000;
|
||
font-size: 26rpx;
|
||
}
|
||
|
||
.protocol_footer_confirm {
|
||
width: 185rpx;
|
||
background: #FD0505;
|
||
border-radius: 56rpx 56rpx 56rpx 56rpx;
|
||
opacity: 1;
|
||
font-size: 26rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.protocol_footer {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.protocol_content {
|
||
font-size: 32rpx;
|
||
font-family: PingFang SC-Medium, PingFang SC;
|
||
font-weight: 400;
|
||
color: #666666;
|
||
line-height: 46rpx;
|
||
margin: 60rpx 0;
|
||
}
|
||
|
||
.protocol_header {
|
||
width: 330rpx;
|
||
height: 32rpx;
|
||
font-size: 36rpx;
|
||
color: #000000;
|
||
width: 100%;
|
||
text-align: center;
|
||
}
|
||
|
||
.protocol_body {
|
||
background: #FFFFFF;
|
||
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
||
opacity: 1;
|
||
padding: 70rpx 50rpx;
|
||
max-width: 634rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.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>
|