284 lines
7.1 KiB
Vue
284 lines
7.1 KiB
Vue
<template>
|
||
<view class="normal-login-container">
|
||
<view class="logo-content align-center justify-center flex">
|
||
<text class="title">灵活用工平台</text>
|
||
</view>
|
||
<view class="login-form-content">
|
||
|
||
<view class="xieyi text-center">
|
||
<radio @click="radioChange" v-model="radio" :checked="radio" ></radio>
|
||
<view>
|
||
<text class="text-grey1"> 已阅读并同意灵活用工平台 <text>《服务协议》</text> <text>《隐私政策》</text></text>
|
||
<text class="text-grey1"> 若您的手机号未注册，将为您注册。</text>
|
||
</view>
|
||
|
||
</view>
|
||
|
||
|
||
<view class="action-btn">
|
||
<button v-if="radio" class="login-btn cu-btn block bg-blue lg round" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">手机号快捷登录</button>
|
||
<button v-else="radio" class="login-btn cu-btn block bg-blue lg round" @click="checkgetPhoneNumber">手机号快捷登录</button>
|
||
</view>
|
||
|
||
|
||
</view>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { getCodeImg, wxlogin } from '@/api/employee/login'
|
||
const wxloginApi = require('../utils/wxlogin.js');
|
||
export default {
|
||
data() {
|
||
return {
|
||
codeUrl: "",
|
||
captchaEnabled: true,
|
||
// 用户注册开关
|
||
register: false,
|
||
globalConfig: getApp().globalData.config,
|
||
loginForm: {
|
||
username: "admin",
|
||
password: "admin123",
|
||
code: "",
|
||
uuid: ''
|
||
},
|
||
radio: false,
|
||
baoming: 0,
|
||
}
|
||
},
|
||
onLoad: function(query) {
|
||
this.baoming = query.baoming;
|
||
},
|
||
created() {
|
||
|
||
},
|
||
methods: {
|
||
// 用户注册
|
||
handleUserRegister() {
|
||
this.$tab.redirectTo(`/pages/register`)
|
||
},
|
||
// 隐私协议
|
||
handlePrivacy() {
|
||
let site = this.globalConfig.appInfo.agreements[0]
|
||
this.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`)
|
||
},
|
||
// 用户协议
|
||
handleUserAgrement() {
|
||
let site = this.globalConfig.appInfo.agreements[1]
|
||
this.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`)
|
||
},
|
||
// 获取图形验证码
|
||
getCode() {
|
||
getCodeImg().then(res => {
|
||
this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled
|
||
if (this.captchaEnabled) {
|
||
this.codeUrl = 'data:image/gif;base64,' + res.img
|
||
this.loginForm.uuid = res.uuid
|
||
}
|
||
})
|
||
},
|
||
// 获取用户授权信息
|
||
getAuthSetting() {
|
||
wxloginApi.getAuthSetting()
|
||
.then((authSetting) => {
|
||
// 获取到用户授权信息
|
||
console.log(authSetting);
|
||
})
|
||
.catch((error) => {
|
||
console.log(error);
|
||
});
|
||
},
|
||
getPhoneNumber (e) {
|
||
console.log(e.detail.code) // 动态令牌
|
||
console.log(e.detail.errMsg) // 回调信息（成功失败都会返回）
|
||
console.log(e.detail.errno) // 错误码（失败时返回）
|
||
if (e.detail.errMsg == 'getPhoneNumber:fail user deny'){
|
||
return
|
||
}
|
||
|
||
var that = this;
|
||
this.$modal.loading("登录中，请耐心等待...")
|
||
wxloginApi.login().then((code) => {
|
||
// 获取到用户的code，发送给服务器进行登录验证
|
||
console.log("loginCode=", code);
|
||
that.wxLogin(e.detail.code, code);
|
||
})
|
||
.catch((error) => {
|
||
console.log("loginCode=", error);
|
||
});
|
||
|
||
|
||
},
|
||
checkgetPhoneNumber() {
|
||
wx.showToast({
|
||
title: '请阅读并同意用户协议与隐私协议',
|
||
icon: 'none',
|
||
duration: 2000,
|
||
})
|
||
// this.$modal.msgError("请阅读并同意用户协议与隐私协议")
|
||
},
|
||
radioChange(e){
|
||
this.radio = !this.radio;
|
||
},
|
||
|
||
// 登录方法
|
||
async handleLogin() {
|
||
// if (this.loginForm.radio === false) {
|
||
// this.$modal.msgError("请阅读并同意用户协议与隐私协议")
|
||
// } else {
|
||
//
|
||
// wxloginApi.login().then((code) => {
|
||
// // 获取到用户的code，发送给服务器进行登录验证
|
||
// console.log(code);
|
||
// })
|
||
// .catch((error) => {
|
||
// console.log(error);
|
||
// });
|
||
//
|
||
//
|
||
//
|
||
// wxloginApi.getUserInfo()
|
||
// .then((userInfo) => {
|
||
// // 获取到用户信息
|
||
// console.log(userInfo);
|
||
// })
|
||
// .catch((error) => {
|
||
// console.log(error);
|
||
// });
|
||
|
||
|
||
|
||
// this.$modal.loading("登录中，请耐心等待...")
|
||
// this.pwdLogin()
|
||
// }
|
||
},
|
||
// 密码登录
|
||
async wxLogin(phoneCode, loginCode) {
|
||
this.$store.dispatch('WxLogin', {"phoneCode":phoneCode, "loginCode": loginCode}).then(() => {
|
||
this.$modal.closeLoading()
|
||
this.loginSuccess()
|
||
}).catch(() => {
|
||
if (this.captchaEnabled) {
|
||
this.getCode()
|
||
}
|
||
})
|
||
},
|
||
// 登录成功后，处理函数
|
||
loginSuccess(result) {
|
||
// 设置用户信息
|
||
var that = this;
|
||
this.$store.dispatch('GetInfo').then(res => {
|
||
|
||
if (that.baoming > 0){
|
||
uni.navigateTo({
|
||
url: "baoming?taskId="+that.baoming
|
||
})
|
||
}else{
|
||
this.$tab.reLaunch('/pages/index')
|
||
}
|
||
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background-color: #ffffff;
|
||
}
|
||
|
||
.normal-login-container {
|
||
width: 100%;
|
||
|
||
.logo-content {
|
||
width: 100%;
|
||
font-size: 21px;
|
||
text-align: center;
|
||
padding-top: 15%;
|
||
|
||
image {
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.title {
|
||
margin-left: 10px;
|
||
}
|
||
}
|
||
|
||
.login-form-content {
|
||
text-align: center;
|
||
margin: 20px auto;
|
||
margin-top: 15%;
|
||
width: 80%;
|
||
|
||
.input-item {
|
||
margin: 20px auto;
|
||
background-color: #f5f6f7;
|
||
height: 45px;
|
||
border-radius: 20px;
|
||
|
||
.icon {
|
||
font-size: 38rpx;
|
||
margin-left: 10px;
|
||
color: #999;
|
||
}
|
||
|
||
.input {
|
||
width: 100%;
|
||
font-size: 14px;
|
||
line-height: 20px;
|
||
text-align: left;
|
||
padding-left: 15px;
|
||
}
|
||
|
||
}
|
||
|
||
.login-btn {
|
||
margin-top: 40px;
|
||
height: 45px;
|
||
}
|
||
|
||
.reg {
|
||
margin-top: 15px;
|
||
}
|
||
|
||
.xieyi {
|
||
color: #333;
|
||
margin-top: 20px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-items: left;
|
||
radio{
|
||
transform: scale(0.7);
|
||
}
|
||
|
||
.text-grey1{
|
||
text-align: left;
|
||
text{
|
||
width: 200rpx;
|
||
color:#3a8ee6;
|
||
}
|
||
}
|
||
}
|
||
.text-grey1{
|
||
text-align: left;
|
||
}
|
||
|
||
.login-code {
|
||
height: 38px;
|
||
float: right;
|
||
|
||
.login-code-img {
|
||
height: 38px;
|
||
position: absolute;
|
||
margin-left: 10px;
|
||
width: 200rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
</style>
|