367 lines
8.7 KiB
Vue
367 lines
8.7 KiB
Vue
<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>
|