337 lines
8.0 KiB
Vue
337 lines
8.0 KiB
Vue
<template>
|
||
<view class="login">
|
||
<image
|
||
class="bg-iamge"
|
||
src="../../static/img/login/login_back_img.png"
|
||
></image>
|
||
<!-- #ifdef APP-PLUS||H5 -->
|
||
<view style="height: var(--status-bar-height)"></view>
|
||
<!-- #endif -->
|
||
<view class="body">
|
||
<view class="title">欢迎进入里海供销平台！</view>
|
||
<view class="login-card">
|
||
<view class="top">
|
||
<view class="text item">
|
||
<u-tabs
|
||
:list="tabList"
|
||
@click="changeTabs"
|
||
lineColor="#3274F9"
|
||
itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;font-size: 32rpx;"
|
||
></u-tabs>
|
||
</view>
|
||
<input
|
||
v-if="current == 0"
|
||
@click="getId"
|
||
class="mobile item"
|
||
v-model="formData.account"
|
||
placeholder="输入账号"
|
||
/>
|
||
<input
|
||
v-if="current == 0"
|
||
@click="getId"
|
||
class="mobile item"
|
||
v-model="formData.password"
|
||
maxlength="26"
|
||
placeholder="输入密码"
|
||
password
|
||
type="safe-password"
|
||
/>
|
||
<input
|
||
v-if="current == 1"
|
||
class="mobile item"
|
||
v-model="formData.account"
|
||
placeholder="输入手机号"
|
||
/>
|
||
<view v-if="current == 1" class="code item">
|
||
<input
|
||
placeholder="输入验证码"
|
||
v-model="formData.code"
|
||
maxlength="6"
|
||
/>
|
||
<u-code
|
||
:seconds="seconds"
|
||
@end="end"
|
||
@start="start"
|
||
ref="uCode"
|
||
@change="codeChange"
|
||
></u-code>
|
||
<view class="get-code" @click="getCode">{{ tips }}</view>
|
||
</view>
|
||
<view class="btn">
|
||
<!-- <view>新用户注册</view> -->
|
||
<!-- <view @click="forgetPWD">忘记密码?</view> -->
|
||
</view>
|
||
</view>
|
||
<button class="submit_btn" @click="login">登录</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
loginAccount,
|
||
userInfo,
|
||
test
|
||
} from "@/api/oaUser.js"
|
||
import {
|
||
Toast
|
||
} from "../../libs/uniApi";
|
||
// #ifdef APP-PLUS
|
||
var jpushModule = uni.requireNativePlugin("JG-JPush");
|
||
|
||
// #endif
|
||
|
||
export default {
|
||
data () {
|
||
return {
|
||
|
||
tabList: [{
|
||
name: '账号登录'
|
||
},
|
||
// {name:'手机登录'},
|
||
],
|
||
current: 0,
|
||
formData: {
|
||
account: '',
|
||
password: '',
|
||
code: '',
|
||
terminal: 6, //6是APP端
|
||
scene: 1,
|
||
register_id: ""
|
||
},
|
||
tips: '获取验证码',
|
||
// refCode: null,
|
||
seconds: 60,
|
||
};
|
||
},
|
||
methods: {
|
||
changeTabs (e) {
|
||
this.current = e.index;
|
||
this.formData.scene = e.index + 1;
|
||
},
|
||
// 获取设备id
|
||
getId () {
|
||
// #ifdef APP-PLUS
|
||
if (this.formData.register_id) return
|
||
jpushModule.initJPushService()
|
||
jpushModule.getRegistrationID(result => {
|
||
// 绑定极光设备id
|
||
this.formData.register_id = result.registerID || 0
|
||
|
||
console.log("设备----", this.formData)
|
||
})
|
||
// #endif
|
||
},
|
||
async login () {
|
||
if (!this.formData.account) return Toast('账号不能为空');
|
||
if (this.formData.scene == 1 && !this.formData.password) return Toast('密码不能为空');
|
||
if (this.formData.scene == 2 && !this.formData.code) return Toast('验证码不能为空');
|
||
let that = this;
|
||
// let res = await test();
|
||
// console.log(res);
|
||
uni.showLoading({
|
||
title: '正在登录中'
|
||
})
|
||
let res = await loginAccount(that.formData);
|
||
console.log(that.formData)
|
||
this.$store.commit('SET_USERINFO', {
|
||
user: data,
|
||
token: res.data.token
|
||
})
|
||
let {
|
||
data
|
||
} = await userInfo();
|
||
this.$store.commit('setUserInfo', data);
|
||
uni.hideLoading()
|
||
if (data.is_new_user) {
|
||
uni.showLoading({
|
||
mask: true,
|
||
title: '加载中'
|
||
})
|
||
uni.switchTab({
|
||
url: '/pages/oaHome/oaHome',
|
||
success: () => {
|
||
uni.$emit('initOaTask'); // 更新任务
|
||
uni.hideLoading()
|
||
}
|
||
})
|
||
} else uni.navigateTo({
|
||
url: '/pages/updatePasswprd/updatePasswprd'
|
||
});
|
||
},
|
||
initTerminal () {
|
||
// #ifndef APP-PLUS
|
||
this.formData.terminal = 6;
|
||
// #endif
|
||
uni.getSystemInfo({
|
||
success: (res) => {
|
||
const platform = res.platform.toLowerCase();
|
||
if (platform === 'ios') {
|
||
this.formData.terminal = 5;
|
||
} else if (platform === 'windows') {
|
||
this.formData.terminal = 4;
|
||
} else if (platform === 'mac') {
|
||
this.formData.terminal = 4;
|
||
}
|
||
}
|
||
})
|
||
// #ifdef H5
|
||
this.formData.terminal = 3;
|
||
// #endif
|
||
// #ifdef MP-WEIXIN
|
||
this.formData.terminal = 1;
|
||
// #endif
|
||
},
|
||
codeChange (text) {
|
||
this.tips = text;
|
||
},
|
||
getCode () {
|
||
if (this.$refs.uCode.canGetCode) {
|
||
// 模拟向后端请求验证码
|
||
uni.showLoading({
|
||
title: '正在获取验证码'
|
||
})
|
||
setTimeout(() => {
|
||
uni.hideLoading();
|
||
// 这里此提示会被this.start()方法中的提示覆盖
|
||
uni.$u.toast('验证码已发送');
|
||
// 通知验证码组件内部开始倒计时
|
||
this.$refs.uCode.start();
|
||
}, 2000);
|
||
} else {
|
||
uni.$u.toast('倒计时结束后再发送');
|
||
}
|
||
},
|
||
end () {
|
||
// uni.$u.toast('倒计时结束');
|
||
},
|
||
start () {
|
||
// uni.$u.toast('倒计时开始');
|
||
},
|
||
//忘记密码
|
||
forgetPWD () {
|
||
Toast('暂未开放')
|
||
}
|
||
},
|
||
mounted () {
|
||
|
||
this.initTerminal();
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.login {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
position: relative;
|
||
/* #ifdef H5 */
|
||
background-image: url("../../static/img/login/login_back_img.png");
|
||
|
||
/* #endif */
|
||
.bg-iamge {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
position: absolute;
|
||
z-index: -99;
|
||
}
|
||
|
||
.body {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
.title {
|
||
width: 694rpx;
|
||
height: 74rpx;
|
||
margin-top: 200rpx;
|
||
margin-bottom: 51rpx;
|
||
font-size: 53rpx;
|
||
font-weight: 500;
|
||
color: #ffffff;
|
||
line-height: 68rpx;
|
||
-webkit-background-clip: text;
|
||
}
|
||
|
||
.login-card {
|
||
width: 694rpx;
|
||
height: 643rpx;
|
||
background: #ffffff;
|
||
border-radius: 21rpx 21rpx 21rpx 21rpx;
|
||
opacity: 1;
|
||
box-sizing: border-box;
|
||
padding: 38.5rpx 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.top {
|
||
display: flex;
|
||
justify-content: space-evenly;
|
||
flex-direction: column;
|
||
|
||
.item {
|
||
margin-bottom: 35rpx;
|
||
}
|
||
|
||
.text {
|
||
font-size: 32rpx;
|
||
font-weight: 500;
|
||
color: rgba(0, 0, 0, 0.8);
|
||
line-height: 35rpx;
|
||
}
|
||
|
||
.mobile,
|
||
.code {
|
||
width: 613rpx;
|
||
height: 112rpx;
|
||
background: #f5f5f5;
|
||
border-radius: 56rpx 56rpx 56rpx 56rpx;
|
||
opacity: 1;
|
||
padding: 0 45.56rpx;
|
||
box-sizing: border-box;
|
||
font-size: 28rpx;
|
||
font-weight: 400;
|
||
color: #333;
|
||
line-height: 35rpx;
|
||
}
|
||
|
||
.code {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
input {
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.get-code {
|
||
color: $theme-oa-color;
|
||
}
|
||
}
|
||
|
||
.btn {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
}
|
||
|
||
.submit_btn {
|
||
width: 613rpx;
|
||
height: 112rpx;
|
||
background: $theme-oa-color;
|
||
border-radius: 56rpx 56rpx 56rpx 56rpx;
|
||
opacity: 1;
|
||
text-align: center;
|
||
line-height: 112rpx;
|
||
color: #ffffff;
|
||
font-size: 35rpx;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |