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.
366 lines
8.7 KiB
366 lines
8.7 KiB
<template> |
|
<view class="page-content my-bg"> |
|
<cu-custom :isBack="true" class="main-topbar bg-main-oil" bgColor="bg-main-oil"> |
|
<block slot="content">绑定星油云站</block> |
|
<block slot="backText">返回</block> |
|
</cu-custom> |
|
<view class="pannel"> |
|
<view class="bg-img margin radius flex align-center" :style="'background-image: url('+mainURL+'login-bg.png)'"> |
|
<view class="padding-xl text-white"> |
|
<view class="padding-xs text-lg text-bold"> |
|
{{oilSite.oilSiteName}} |
|
</view> |
|
<view class="padding-xs text-lg"> |
|
星油云站欢迎您的加入 |
|
</view> |
|
</view> |
|
</view> |
|
<view class="bg-gradual-orange margin padding radius shadow-warp"> |
|
<view class="text-bold text-lg padding-bottom text-center"> |
|
|
|
</view> |
|
|
|
<view class="radius"> |
|
|
|
<view class="cu-form-group"> |
|
<view class="title text-black mini-label">姓名</view> |
|
<input v-model="auth.userName" placeholder="请输入姓名" name="input"></input> |
|
</view> |
|
<!-- <view class="cu-form-group"> |
|
<view class="title text-black">工号</view> |
|
<input v-model="oilSiteNo" placeholder="请输入云站编号" name="input"></input> |
|
</view> --> |
|
|
|
<view class="cu-form-group"> |
|
<view class="title text-black mini-label">手机号</view> |
|
<input type="number" v-model="auth.phone" placeholder="请输入手机号" name="input"></input> |
|
<text :class="frozen?'text-gray':'oil-main-color'" @tap="sendMsg">{{tips}}</text> |
|
</view> |
|
<view class="cu-form-group"> |
|
<view class="title text-black mini-label">验证码</view> |
|
<input type="number" :maxlength="6" v-model="auth.captcha" placeholder="请输入六位数字验证码" name="input"></input> |
|
</view> |
|
</view> |
|
</view> |
|
<view class="margin-left"> |
|
<text class="cuIcon-infofill padding-right-xs text-sm oil-main-color"></text> |
|
<text class="text-sm">请确认您的手机号已添加为星油云站管理员账号</text> |
|
</view> |
|
<view class="margin margin-top-xl"> |
|
<!-- <button class="bg-main-oil" @tap="beforeLogin" open-type="getUserInfo" @getuserinfo="getUserInfo"> |
|
确认 |
|
</button> --> |
|
<button class="bg-main-oil" @tap="beforeLogin"> |
|
注册 |
|
</button> |
|
</view> |
|
</view> |
|
<view class="bottom-part"> |
|
<service-hotline /> |
|
</view> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
import loginApi from '@/api/login.js' |
|
export default { |
|
data() { |
|
return { |
|
baseURL: this.global.baseURL, |
|
forcedLogin: true, |
|
mainURL: this.global.mainURL, |
|
oilSiteNo: '', |
|
oilSite: {}, |
|
tips: '发送验证码', |
|
frozen: false, // 二维码冷却时间 |
|
auth: { |
|
|
|
} |
|
}; |
|
}, |
|
created() { |
|
uni.showShareMenu() |
|
// this.loginWeixin() |
|
uni.getStorage({ |
|
key: 'oilSiteCode', |
|
success: (res) => { |
|
this.oilSiteNo = res.data |
|
console.log(this.oilSiteNo) |
|
} |
|
}) |
|
this.oilSite = uni.getStorageSync('oilSite') |
|
}, |
|
methods: { |
|
sendMsg() { |
|
if (!this.frozen) { |
|
if (this.auth.phone) { |
|
uni.login({ |
|
provider: 'weixin', |
|
success: loginRes => { |
|
const code = loginRes.code |
|
console.log(code) |
|
const data2 = { |
|
code: code, |
|
name: this.auth.userName, |
|
phone: this.auth.phone, |
|
oilSiteCode: this.oilSiteNo |
|
} |
|
loginApi.registerWeixinSMS(data2).then(res => { |
|
console.log('res', res) |
|
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 = `发送验证码` |
|
} |
|
}, 1000) |
|
|
|
|
|
} |
|
|
|
}) |
|
}, |
|
fail: err => { |
|
console.log(err) |
|
} |
|
}) |
|
} |
|
} |
|
}, |
|
register() { |
|
uni.login({ |
|
provider: 'weixin', |
|
success: loginRes => { |
|
const code = loginRes.code |
|
console.log(code) |
|
const data1 = { |
|
code: code, |
|
name: this.auth.userName, |
|
idCard: this.auth.idNumber, |
|
phone: this.auth.phone, |
|
authCode: this.auth.captcha, |
|
oilSiteCode: this.oilSiteNo |
|
} |
|
loginApi.registerWeixin(data1).then(res => { |
|
console.log('res', res) |
|
uni.showToast({ |
|
title: res.msg, |
|
icon: 'none' |
|
}) |
|
if (res.code === 20000) { |
|
this.loginWeixin() |
|
uni.setStorage({ |
|
key: 'Authorization', |
|
data: res.data.accessToken, |
|
success: () => { |
|
console.log('Authorization成功', res.data.accessToken) |
|
} |
|
}) |
|
uni.setStorage({ |
|
key: 'device', |
|
data: res.data.openid, |
|
success: () => { |
|
console.log('deviceopenid', res.data.openid) |
|
} |
|
}) |
|
uni.setStorageSync('userMenu', res.data.loginUser.procedureAuthList) |
|
uni.setStorageSync('loginUser', { |
|
id: res.data.loginUser.id, |
|
name: res.data.loginUser.name, |
|
userPhone: res.data.loginUser.userPhone |
|
}) |
|
uni.reLaunch({ |
|
url: '/pages/index/index', |
|
success: (res) => { |
|
console.log(res) |
|
}, |
|
fail: (err) => { |
|
console.log(err) |
|
} |
|
}) |
|
} |
|
}) |
|
}, |
|
fail: err => { |
|
console.log(err) |
|
} |
|
}); |
|
}, |
|
loginWeixin() { |
|
uni.login({ |
|
provider: 'weixin', |
|
success: loginRes => { |
|
const code = loginRes.code |
|
console.log(code) |
|
loginApi.loginWeixin(code).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.accessToken, |
|
success: () => { |
|
console.log('Authorization成功', res.data.accessToken) |
|
} |
|
}) |
|
uni.setStorage({ |
|
key: 'device', |
|
data: res.data.openid, |
|
success: () => { |
|
console.log('deviceopenid', res.data.openid) |
|
} |
|
}) |
|
uni.setStorageSync('userMenu', res.data.loginUser.procedureAuthList) |
|
uni.setStorageSync('loginUser', { |
|
id: res.data.loginUser.id, |
|
name: res.data.loginUser.name, |
|
userPhone: res.data.loginUser.userPhone |
|
}) |
|
} else { |
|
console.log('res', res.code) |
|
} |
|
|
|
|
|
}) |
|
}, |
|
fail: err => { |
|
console.log(err) |
|
} |
|
}); |
|
}, |
|
beforeLogin() { |
|
if (!this.auth.userName) { |
|
uni.showToast({ |
|
title: '请输入姓名', |
|
icon: 'none', |
|
duration: 3000 |
|
}) |
|
return false |
|
} |
|
if (!this.auth.phone) { |
|
uni.showToast({ |
|
title: '请输入手机号', |
|
icon: 'none', |
|
duration: 3000 |
|
}) |
|
return false |
|
} |
|
|
|
if (!this.auth.captcha) { |
|
uni.showToast({ |
|
title: '请输入短信验证码', |
|
icon: 'none', |
|
duration: 3000 |
|
}) |
|
return false |
|
} |
|
this.register() |
|
|
|
}, |
|
nextStep() { |
|
if (this.oilSiteNo) { |
|
uni.navigateTo({ |
|
url: '' |
|
}) |
|
} else { |
|
uni.showToast({ |
|
title: '请输入云站号', |
|
duration: 3000, |
|
icon: 'none' |
|
}) |
|
} |
|
}, |
|
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> |
|
.page-content { |
|
min-height: 100%; |
|
} |
|
|
|
.logo { |
|
min-width: 100%; |
|
text-align: center; |
|
} |
|
|
|
.logo img { |
|
width: 200upx; |
|
height: 200rpx; |
|
background-size: contain; |
|
margin: auto; |
|
} |
|
</style>
|
|
|