factory_mp_old/pages/login/login_.vue

775 lines
19 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="login_register">
<view class="nav-bar" style="position: relative;">
<image style="display: block;width: 100%;height: 100%;" :src="myTopBgSrc"></image>
</view>
<view class="handle-area">
<view class="handle-type">
<text class="typeText" :class="{active:isPassword}" @click="changeLogType('password')">密码登录</text>
<text class="typeText" :class="{active:isMessage}" @click="changeLogType('message')">验证码登录</text>
</view>
<view class="login-area" v-if="isPassword">
<form style="display: block;" @submit="formSubmit">
<view class="login-item">
<image class="login-icon" src="../../static/login/avatar.png" mode=""></image>
<input placeholder-style="color: #2c6fd9;" style="color: #2c6fd9;" class="loginItemInput"
type="text" name="username" placeholder="请输入您的账号" />
</view>
<view class="login-item">
<image class="login-icon" src="../../static/login/password.png" mode=""></image>
<input placeholder-style="color: #2c6fd9;" style="color: #2c6fd9;" class="loginItemInput"
type="text" name="password" password placeholder="请输入您的密码" />
</view>
<view class="privacy">
<view class="privacyIn">
<u-checkbox-group>
<u-checkbox @change="checkboxChange" v-model="checkedShow"></u-checkbox>
</u-checkbox-group>
<view class="privacyCon">
我已阅读并同意<text style="color: #2d8cff;" @click="agreementFn(1)">用户协议</text><text
style="color: #2d8cff;" @click="agreementFn(2)">隐私政策</text>
</view>
</view>
</view>
<view class="">
<button type="default" form-type="submit" class="login-btn">立即登录</button>
</view>
</form>
</view>
<view class="login-area" v-if="isMessage">
<form style="display: block;" @submit="formSubmit2">
<view class="login-item">
<image class="login-icon" src="../../static/login/avatar.png" mode=""></image>
<input placeholder-style="color: #2c6fd9;" style="color: #2c6fd9;" class="loginItemInput"
type="text" name="phone" v-model="phoneNumber" placeholder="请输入手机号" />
</view>
<view class="login-item">
<image class="login-icon" src="../../static/login/password.png" mode=""></image>
<input placeholder-style="color: #2c6fd9;" style="color: #2c6fd9;" class="loginItemInput"
type="text" name="code" placeholder="请输入验证码" />
<button class="getMessageCode" @click="getCode">{{codeTips}}</button>
</view>
<u-verification-code seconds="30" ref="uCode" @change="codeChange"></u-verification-code>
<view class="privacy">
<view class="privacyIn">
<u-checkbox-group>
<u-checkbox @change="checkboxChange" v-model="checkedShow"></u-checkbox>
</u-checkbox-group>
<view class="privacyCon">
我已阅读并同意《<text style="color: #2d8cff;" @click="agreementFn(1)">用户协议</text>》和《<text
style="color: #2d8cff;" @click="agreementFn(2)">隐私政策</text>》
</view>
</view>
</view>
<view class="">
<button type="default" form-type="submit" class="login-btn">立即登录</button>
</view>
</form>
</view>
<view class="wxBig">
<view class="Wxtitle">
<view class="WxtitleIn">访客注册</view>
</view>
<view class="registerWrap">
<view class="visitorReg" @click="userRegister('visitor')">
<image src="/static/login/userRegister.png" mode=""></image>
<text>访客</text>
</view>
<view class="driverRegWrap">
<view class="driverReg" @click="userRegister('driver')">
<image src="/static/login/driver.png" mode=""></image>
</view>
<text>司机</text>
</view>
</view>
</view>
</view>
<u-popup v-model="agreement" mode='center' :mask='true' border-radius='20' width='85%' height='75%'
:closeable='true'>
<view style="padding: 30rpx;" v-html="content">{{content}}</view>
</u-popup>
</view>
</template>
<script>
var that;
export default {
data() {
return {
wxcode: null,
agreement: false,
checkedShow: true,
key: "",
img: "",
username: '',
password: '',
phoneNumber: '',
message: '',
code: "",
isShow: true,
myTopBgSrc: require("../../static/login/my-bg.jpg"),
content: '',
userContent: '',
privacyContent: '',
wxShow: false,
isPassword: true,
isMessage: false,
codeTips: "获取验证码",
testUrl: 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxf7d6140f507466be&redirect_uri=http%3A%2F%2Fqyjy.ctc-zc.com&response_type=code&scope=snsapi_base#wechat_redirect',
}
},
onLoad() {
that = this;
},
methods: {
checkboxChange(e) {
uni.setStorageSync('privacyShow', e.value)
},
//第三方登录
loginFn() {
if (that.checkedShow == false) {
uni.showToast({
title: '请勾选用户协议和隐私政策',
icon: 'none',
duration: 2000
})
return false;
}
uni.login({
provider: 'weixin',
success(res) {
if (res.authResult.unionid) {
appLogin(res.authResult.unionid).then(res1 => {
console.log(res1)
if (res1.statusCode == 200) {
if (res1.data.massage == 1) {
uni.navigateTo({
url: 'BangWx?unionid=' + res.authResult.unionid
})
} else {
uni.setStorageSync('my_token', res1.data.oAuth2AccessToken
.access_token);
that.updateCidFn(res1.data.userName);
}
} else {
uni.showToast({
title: '登录失败',
duration: 2000,
icon: 'none',
})
}
}).catch(err => {
console.log(err)
uni.showToast({
title: "请求失败",
icon: 'none'
})
})
} else {
uni.showToast({
title: '登录失败请重新登录',
duration: 2000,
icon: 'none',
})
}
}
})
},
mpLogin() {
// #ifdef H5
this.getWxCode()
// #endif
// #ifdef MP-WEIXIN
uni.showLoading({
title: '微信登录中...',
mask: true
})
uni.login({
provider: 'weixin',
success: (loginRes) => {
this.$u.api.wxmplogin({
code: loginRes.code
}).then(res => {
this.$u.vuex('vuex_token', res.access)
this.$u.api.userInfo().then(res => {
uni.hideLoading()
uni.showToast({
title: "登录成功",
icon: "none"
})
uni.reLaunch({
url: "/pages/home/home"
})
this.$u.vuex('vuex_user', res)
// 修改资源请求地址
// this.$u.vuex('vuex_user.avatar', this.vuex_user.avatar +
// '?token=' + this.vuex_token)
})
}).catch(e => {
uni.setStorageSync('wxmp_openid', e.data.wxmp_openid)
uni.hideLoading()
uni.showToast({
title: "暂未绑定微信!",
icon: "none"
})
})
}
});
// #endif
},
// 获取code
// 先判断url中有没有code如果有code表明已经授权如果没有code跳转微信授权链接
getWxCode() {
// 截取地址中的code如果没有code就去微信授权如果已经获取到code了就直接把code传给后台获取openId
let code = this.getUrlCode('code')
if (code === null || code === '') {
window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + this.vuex_appid +
'&redirect_uri=' + encodeURIComponent(this.vuex_login) +
'&response_type=code&scope=snsapi_base&state=1#wechat_redirect'
// redirect_uri是授权成功后跳转的url地址微信会帮我们跳转到该链接并且通过的形式拼接code这里需要用encodeURIComponent对链接进行处理。
// 如果配置参数一一对应那么此时已经通过回调地址刷新页面后你就会再地址栏中看到code了。
// http://127.0.0.1/pages/views/profile/login/login?code=001BWV4J1lRzz00H4J1J1vRE4J1BWV4q&state=1
} else {
this.wxcode = code
this.wxcodeLogin()
}
// }
},
updateCidFn(username) {
var data = {
userCid: uni.getStorageSync('setcid'),
username: username
}
updateCid(data).then(res => {
console.log(res, 'zhiixngle ')
if (res.statusCode == 200) {
uni.showToast({
title: '登录成功',
duration: 2000,
icon: 'none',
})
setTimeout(() => {
uni.reLaunch({
url: '../../index/index'
})
}, 2000)
}
}).catch(err => {
uni.showToast({
title: '请求失败',
icon: 'none'
})
})
},
//检查form表单是否填写完整
checkedParams(obj) {
/*
Azuma
1234qwer
*/
if (obj.username == "" || obj.username == undefined || obj.username == null) {
myShowToast('用户名不能为空');
return false;
};
if (obj.password == "" || obj.password == undefined || obj.password == null) {
myShowToast('密码不能为空');
return false;
};
if (that.checkedShow == false) {
myShowToast('请勾选用户协议和隐私政策');
return false;
}
function myShowToast(text) {
uni.showToast({
title: text,
icon: 'none'
})
};
return true;
},
changeLogType(index) {
if (index === 'password') {
this.isPassword = true;
this.isMessage = false;
} else {
this.isPassword = false;
this.isMessage = true;
}
},
userRegister(type){
let params = `?type=${type}`;
uni.navigateTo({
url: '/pages/login/userRegister'+params
})
},
ranStr(e) {
//形参e,需要产生随机字符串的长度
//如果没有传参默认生成32位长度随机字符串
e = e || 32;
//模拟随机字符串库
var t = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz0123456789",
a = t.length,//字符串t的长度随机数生成最大值
n = "";
for (let i = 0; i < e; i++) {
//随机生成长度为e的随机字符串拼接
n += t.charAt(Math.floor(Math.random() * a));
}
//返回随机组合字符串
return n
},
//获取客户端ID
getClientId() {
//获取客户端ID和版本号
var clientid = '';
// #ifdef APP-PLUS
// 苹果系统
plus.device.getInfo({
success: function(e) {
clientid = e.uuid;
uni.setStorageSync('clientid', clientid);
},
fail: function(e) {
console.log(e);
}
});
// 安卓系统
plus.device.getAAID({
success: function(e) {
clientid = e.aaid;
console.log(clientid);
uni.setStorageSync('clientid', clientid);
},
fail: function(e) {
console.log(e);
}
});
//老版本、安卓模拟器
if (clientid == '') {
clientid = plus.device.uuid;
uni.setStorageSync('clientid', clientid);
}
// #endif
return clientid;
},
formSubmit(e) {
uni.showLoading({
title: '加载中'
});
var that = this;
const obj = e.target.value;
if (!that.checkedParams(obj)) return;
that.$u.api.login(obj).then(res => {
uni.hideLoading();
that.$u.vuex('vuex_token', res.access)
that.$u.vuex('vuex_refresh', res.refresh)
that.$u.api.getUserInfo().then(user => {
if(user.avatar){
user.avatar = this.vuex_host + user.avatar
}
that.$u.vuex('vuex_user', user)
if(user.avatar){
user.avatar = this.vuex_host + user.avatar
}
let perms = [];
for (let key in user.perms) {
perms.push(key);
}
console.log(perms);
that.$u.vuex('vuex_perm', perms)
})
that.$u.api.hrmUserInfo().then(res => {
that.$u.vuex('vuex_employee', res)
if(res.type==='employee'){
uni.reLaunch({
url: '/pages/home/home_'
})
}else{
//非正式员工
if(res.id_number==''||res.photo==''||res.id_number==null||res.photo==null){
//信息不完善,进入信息完善页面
uni.reLaunch({
url: '/pages/my/myInfoChange'
})
}else{
//信息完善
if(res.type==='remployee'){
uni.reLaunch({
url: '/pages/home/home_'
})
}else{
uni.reLaunch({
url: '/pages/workSpace/workSpace'
})
}
}
}
})
// #ifdef APP-PLUS
let secret = that.ranStr(12)
let mySecret = {'username': obj.username, 'secret': secret}
that.$u.api.bindSecret({secret: secret}).then(res=>{
uni.setStorageSync('mySecret', JSON.stringify(mySecret))
uni.reLaunch({
url: '/pages/home/home_'
})
}).catch(e=>{})
// #endif
/* let secret = that.ranStr(12)
let mySecret = {'username': obj.username, 'secret': secret}
that.$u.api.bindSecret({secret: secret}).then(res=>{
uni.setStorageSync('mySecret', JSON.stringify(mySecret))
}).catch(e=>{}) */
}).catch(e => {
console.log(e)
})
},
formSubmit2(e) {
var that = this;
const obj = e.target.value;
console.log(obj)
that.$u.api.codeLogin(obj).then(res => {
that.$u.vuex('vuex_token', res.access)
that.$u.vuex('vuex_refresh', res.refresh)
// let data = {openid: uni.getStorageSync('wxmp_openid')}
// that.$u.api.bindmp(data).then(res=>{})
that.$u.api.getUserInfo().then(res => {
if(res.avatar){
res.avatar = this.vuex_host + res.avatar
}
that.$u.vuex('vuex_user', res)
// 修改资源请求地址
})
// #ifdef APP-PLUS
let secret = that.ranStr(12)
let mySecret = {'username': obj.username, 'secret': secret}
that.$u.api.bindSecret({secret: secret}).then(res=>{
uni.setStorageSync('mySecret', JSON.stringify(mySecret))
}).catch(e=>{})
// #endif
uni.reLaunch({
url: '/pages/home/home_'
})
}).catch(e => {
})
},
codeChange(text) {
this.codeTips = text;
},
// 获取验证码
getCode() {
debugger;
console.log(this.phoneNumber)
if (this.phoneNumber !== '') {
if (this.$refs.uCode.canGetCode){
uni.showLoading({
title: '正在获取验证码',
mask: true
})
this.$u.api.getCode({
phone: this.phoneNumber
}).then(res => {
setTimeout(() => {
uni.hideLoading();
// 这里此提示会被this.start()方法中的提示覆盖
this.$u.toast('验证码已发送');
// 通知验证码组件内部开始倒计时
this.$refs.uCode.start();
}, 2000);
})
}
} else {
this.$u.toast('请输入手机号');
}
},
agreementFn(e){
if(e == 1){
that.content = that.userContent;
that.agreement = true;
}else if(e == 2){
that.content = that.privacyContent;
that.agreement = true;
}
},
}
}
</script>
<style scoped lang="less">
.privacy {
width: 100%;
height: 40rpx;
padding: 0 40rpx;
margin-bottom: 25rpx;
.privacyIn {
width: 100%;
height: 100%;
display: flex;
align-items: center;
.privacyCon {
font-size: 26rpx;
}
}
}
.wxBig {
width: 100%;
height: auto;
margin-top: 100rpx;
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: center;
.Wxtitle {
text-align: center;
width: 100%;
padding: 0 50rpx;
.WxtitleIn {
width: 100%;
font-size: 26rpx;
color: #808080;
position: relative;
}
.WxtitleIn::after {
content: '';
width: 217rpx;
height: 2rpx;
background-color: #f6f6f6;
position: absolute;
right: 0;
top: 18rpx;
}
.WxtitleIn::before {
content: '';
width: 217rpx;
height: 2rpx;
background-color: #f6f6f6;
position: absolute;
left: 0;
top: 18rpx;
}
}
.wx {
width: 70rpx;
height: 70rpx;
margin-top: 50rpx;
image {
width: 100%;
height: 100%;
}
}
}
.login_register {
position: relative;
background-color: #f3fbff;
min-height: 100vh;
}
.nav-bar {
height: 494rpx;
background-color: #2cade8;
color: #FFFFFF;
}
.handle-area {
width: 705rpx;
height: auto;
background-color: #FFFFFF;
border-radius: 10rpx;
position: absolute;
top: 340rpx;
left: 50%;
padding-bottom: 30rpx;
transform: translateX(-50%);
}
.handle-type {
font-family: PingFang-SC-Medium;
font-size: 30rpx;
line-height: 72rpx;
color: #1e1e1e;
padding: 62rpx;
}
.typeText {
margin-right: 20rpx;
}
.active {
font-size: 34rpx;
line-height: 72rpx;
color: #2c6fd9;
font-weight: bold;
position: relative;
}
.active::after {
display: block;
content: "";
width: 100%;
height: 6rpx;
background-color: #2c6fd9;
border-radius: 3rpx;
position: absolute;
left: 50%;
bottom: -8rpx;
transform: translateX(-50%);
}
.login-item {
width: 635rpx;
height: 88rpx;
border-radius: 88rpx;
margin: 0 auto;
background-color: #ebf6ff;
padding-left: 72rpx;
box-sizing: border-box;
position: relative;
margin-bottom: 56rpx;
}
.loginItemInput {
border-radius: 0 88rpx 88rpx 0;
}
.code-img-item {
padding-left: 72rpx;
}
.login-item .login-icon {
width: 22rpx;
height: 28rpx;
position: absolute;
top: 50%;
left: 35rpx;
transform: translateY(-50%);
}
.login-item input {
height: 100%;
line-height: 88rpx;
font-family: PingFang-SC-Medium;
font-size: 26rpx;
}
.my-code-input {
width: 300rpx;
}
.code-img {
width: 155rpx;
height: 53rpx;
position: absolute;
top: 50%;
right: 20rpx;
transform: translateY(-50%);
background-color: #EEEEEE;
}
.getMessageCode {
width: fit-content;
position: absolute;
top: 10%;
right: 20rpx;
height: 80%;
color: #ffffff;
font-size: 26rpx;
border-color: #19be6b;
background-color: #19be6b;
z-index: 100;
border-radius: 36rpx !important;
}
.login-btn,
.register-btn {
width: 635rpx;
height: 88rpx;
border-radius: 88rpx;
margin: 0 auto;
background-color: #1d7ef3;
font-family: AdobeHeitiStd-Regular;
font-size: 30rpx;
line-height: 88rpx;
color: #ffffff;
}
.to-login {
font-family: AdobeHeitiStd-Regular;
font-size: 24rpx;
line-height: 72rpx;
color: #2c6fd9 !important;
border: none !important;
margin-top: 20rpx;
}
.code-item {
position: relative;
}
.my-code {
width: 376rpx;
}
.code {
width: 155rpx;
height: 53rpx;
background-color: #0075ff;
border-radius: 27rpx;
font-family: PingFang-SC-Medium;
font-size: 20rpx !important;
line-height: 53rpx;
color: #fefeff;
position: absolute;
top: 50%;
right: 20rpx;
transform: translateY(-50%);
padding-left: 12rpx;
padding-right: 12rpx;
}
.registerWrap{
display: flex;
margin-top: 40upx;
}
.visitorReg{
margin-right: 50upx;
}
.visitorReg,.driverRegWrap{
display: flex;
text-align: center;
flex-direction: column;
}
.visitorReg>image{
width: 90upx;
height: 90upx;
}
.driverReg{
width: 80upx;
height: 80upx;
border-radius: 40upx;
background: #0075ff;
margin-bottom: 8upx;
}
.driverReg>image{
width: 46upx;
height: 46upx;
margin: 16upx;
}
</style>