528 lines
12 KiB
Vue
528 lines
12 KiB
Vue
<template>
|
|
<view class="normal-login-container">
|
|
<view class="logo-content align-center justify-center flex">
|
|
<image class="image" style="width: 100rpx;height: 100rpx;" :src="globalConfig.appInfo.logo" mode="widthFix">
|
|
</image>
|
|
<text class="title">MES移动端登录</text>
|
|
</view>
|
|
<view class="login-form-content">
|
|
<view class="input-item flex align-center">
|
|
<view class="iconfont icon-user icon"></view>
|
|
<input v-model="loginForm.username" @confirm="handleLogin" class="input" type="text" placeholder="请输入账号"
|
|
maxlength="30" />
|
|
</view>
|
|
<view class="input-item flex align-center">
|
|
<view class="iconfont icon-password icon"></view>
|
|
<input v-model="loginForm.password" @confirm="handleLogin" type="password" class="input" placeholder="请输入密码"
|
|
maxlength="20" />
|
|
</view>
|
|
<view class="input-item flex align-center" style="margin: 20px auto 0;" v-if="captchaEnabled">
|
|
<view class="iconfont icon-code icon"></view>
|
|
<input v-model="loginForm.code" @confirm="handleLogin" type="number" class="input" placeholder="请输入验证码"
|
|
maxlength="4" />
|
|
<image :src="codeUrl" @click="getCode" class="login-code-img"></image>
|
|
</view>
|
|
<!-- <u-cell-group :border="false">
|
|
<u-cell :title="typeTitle" @click="show=!show" :isLink="true" arrow-direction="down"></u-cell>
|
|
<u-picker :show="show" :columns="columns" :closeOnClickOverlay="true" @cancel="typeCancel"
|
|
@confirm="typeConfirm" @close="typeClose"></u-picker>
|
|
</u-cell-group> -->
|
|
<view class="flex align-center">
|
|
<!-- <checkbox-group @change="checkboxChange">
|
|
<checkbox id="chkRem" type="checkbox" :checked='rememberPsw' @tap="rememberPsw =! rememberPsw" color="#09CC86"/>
|
|
记住账号密码
|
|
</checkbox-group> -->
|
|
<uni-data-checkbox multiple v-model="value" :localdata="range" @change="checkboxChange"></uni-data-checkbox>
|
|
</view>
|
|
|
|
<view class="action-btn">
|
|
<button @click="handleLogin" class="login-btn cu-btn block bg-blue lg round">登录</button>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="list-cell list-cell-arrow" @click="handleBaseUrl">
|
|
<view class="menu-item-box">
|
|
<view class="iconfont icon-refresh menu-icon"></view>
|
|
<text>配置服务器地址</text>
|
|
</view>
|
|
</view>
|
|
<uni-popup ref="popup" type="dialog">
|
|
<uni-popup-dialog mode="input" message="成功消息" :duration="2000" :before-close="true" @close="close"
|
|
@confirm="confirm">
|
|
<uni-row>
|
|
<uni-col>
|
|
<uni-easyinput type="text" v-model="baseUrl" placeholder="请输入服务器地址" />
|
|
</uni-col>
|
|
<!-- <uni-col>
|
|
<uni-easyinput type="text" v-model="baseUrl" placeholder="请输入MES服务器地址" />
|
|
</uni-col>
|
|
<uni-col>
|
|
<uni-easyinput type="text" v-model="wmsUrl" placeholder="请输入WMS服务器地址" />
|
|
</uni-col> -->
|
|
</uni-row>
|
|
</uni-popup-dialog>
|
|
</uni-popup>
|
|
<!-- <view class="xieyi text-center">
|
|
<text class="text-grey1">登录即代表同意</text>
|
|
<text @click="handleUserAgrement" class="text-blue">《用户协议》</text>
|
|
<text @click="handlePrivacy" class="text-blue">《隐私协议》</text>
|
|
</view> -->
|
|
<uni-fab ref="fab" :pattern="pattern" :content="content" :horizontal="horizontal" :vertical="vertical"
|
|
:direction="direction" @trigger="trigger" @fabClick="fabClick" />
|
|
<view> <span class="version">版本 {{version}}</span></view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {getToken} from '@/utils/auth'
|
|
import {getCodeImg} from '@/api/login'
|
|
import {version} from "vue"
|
|
export default {
|
|
data() {
|
|
return {
|
|
typeTitle: '常规功能',
|
|
show: false,
|
|
columns: [
|
|
['常规功能', 'ESOP', 'IPC']
|
|
],
|
|
version: "",
|
|
value: [0],
|
|
range: [{
|
|
"value": 0,
|
|
"text": "记住账号密码"
|
|
}],
|
|
baseUrl: uni.getStorageSync('base_url'),
|
|
// wmsUrl: uni.getStorageSync('wms_url'),
|
|
codeUrl: "",
|
|
captchaEnabled: true,
|
|
globalConfig: getApp().globalData.config,
|
|
loginForm: {
|
|
username: "",
|
|
password: "",
|
|
code: "",
|
|
uuid: '',
|
|
},
|
|
rememberPsw: true,
|
|
title: 'uni-fab',
|
|
directionStr: '垂直',
|
|
horizontal: 'right',
|
|
vertical: 'bottom',
|
|
direction: 'horizontal',
|
|
pattern: {
|
|
icon: 'list',
|
|
color: '#7A7E83',
|
|
backgroundColor: '#fff',
|
|
selectedColor: '#007AFF',
|
|
buttonColor: '#007AFF',
|
|
iconColor: '#fff'
|
|
},
|
|
is_color_type: false,
|
|
content: [{
|
|
iconPath: '/static/images/esop.png',
|
|
selectedIconPath: '/static/images/esop.png',
|
|
text: 'ESOP',
|
|
active: false
|
|
},
|
|
{
|
|
iconPath: '/static/images/ipc.png',
|
|
selectedIconPath: '/static/images/ipc.png',
|
|
text: 'IPC',
|
|
active: false
|
|
}
|
|
]
|
|
}
|
|
},
|
|
mounted() {
|
|
this.version = uni.getAppBaseInfo(version).appVersion;
|
|
//缓存的账号
|
|
const HBusername = uni.getStorageSync('HBusername');
|
|
//缓存的密码
|
|
const HBpassword = uni.getStorageSync('HBpassword');
|
|
// console.log("缓存的账号:" + HBusername)
|
|
// console.log("缓存的密码:" + HBpassword)
|
|
//有缓存就赋值给文本没有就清空
|
|
if (HBusername && HBpassword) {
|
|
this.loginForm.username = HBusername;
|
|
this.loginForm.password = HBpassword;
|
|
} else {
|
|
this.loginForm.username = '';
|
|
this.loginForm.password = '';
|
|
}
|
|
},
|
|
created() {
|
|
this.getCode()
|
|
},
|
|
onLoad() {
|
|
//检测更新
|
|
// const type = uni.getSystemInfoSync().platform
|
|
// console.log(type, '机型')
|
|
// // #ifdef APP-PLUS
|
|
// plus.screen.lockOrientation('default');
|
|
// // #endif
|
|
},
|
|
// 页面关闭时清除横屏正方向
|
|
// onUnload() {
|
|
// // #ifdef APP-PLUS
|
|
// plus.screen.lockOrientation('portrait-primary');
|
|
// // #endif
|
|
// },
|
|
methods: {
|
|
trigger(e) {
|
|
const _this = this;
|
|
console.log(e)
|
|
_this.content[e.index].active = !e.item.active
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: `您确定进入${e.item.text}页面吗？`,
|
|
success: function(res) {
|
|
if (res.confirm) {
|
|
if (e.index == 0) {
|
|
_this.$tab.reLaunch('/pages/work/esop')
|
|
} else if (e.index == 1) {
|
|
console.log(2)
|
|
_this.$tab.reLaunch('/pages/work/ipc')
|
|
}
|
|
} else if (res.cancel) {
|
|
console.log('用户点击取消')
|
|
}
|
|
}
|
|
})
|
|
},
|
|
fabClick() {
|
|
// uni.showToast({
|
|
// // title: '点击了悬浮按钮',
|
|
// icon: 'none'
|
|
// })
|
|
},
|
|
// 隐私协议
|
|
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
|
|
}
|
|
})
|
|
},
|
|
// 登录方法
|
|
async handleLogin() {
|
|
if (this.loginForm.username === "") {
|
|
this.$modal.msgError("请输入您的账号")
|
|
} else if (this.loginForm.password === "") {
|
|
this.$modal.msgError("请输入您的密码")
|
|
} else if (this.loginForm.code === "" && this.captchaEnabled) {
|
|
this.$modal.msgError("请输入验证码")
|
|
} else {
|
|
this.$modal.loading("登录中，请耐心等待...")
|
|
this.pwdLogin()
|
|
}
|
|
},
|
|
// 密码登录
|
|
async pwdLogin() {
|
|
this.$store.dispatch('Login', this.loginForm).then(() => {
|
|
this.$modal.closeLoading()
|
|
this.loginSuccess()
|
|
}).catch(() => {
|
|
if (this.captchaEnabled) {
|
|
this.getCode()
|
|
}
|
|
})
|
|
},
|
|
// 登录成功后，处理函数
|
|
async loginSuccess(result) {
|
|
// 设置用户信息
|
|
if (this.rememberPsw) {
|
|
uni.setStorageSync('HBusername', this.loginForm.username);
|
|
uni.setStorageSync('HBpassword', this.loginForm.password);
|
|
} else { //销毁缓存
|
|
uni.removeStorageSync('HBusername');
|
|
uni.removeStorageSync('HBpassword');
|
|
}
|
|
await this.$store.dispatch('GetInfo')
|
|
await this.$store.dispatch('GetEmpInfo')
|
|
this.$tab.reLaunch('/pages/index')
|
|
},
|
|
handleBaseUrl() {
|
|
this.$refs.popup.open()
|
|
},
|
|
close() {
|
|
this.$refs.popup.close()
|
|
},
|
|
confirm() {
|
|
// 输入框的值
|
|
uni.setStorageSync('base_url', this.baseUrl)
|
|
// uni.setStorageSync('wms_url',this.wmsUrl)
|
|
console.log(uni.getStorageSync('base_url'));
|
|
// console.log(uni.getStorageSync('wms_url'));
|
|
// TODO 做一些其他的事情，手动执行 close 才会关闭对话框
|
|
// ...
|
|
this.$refs.popup.close()
|
|
},
|
|
//复选框
|
|
checkboxChange: function(e) {
|
|
if (e.detail.value.length == 1) {
|
|
//获取缓存的账号 赋值
|
|
uni.getStorageSync('HBusername', this.loginForm.username);
|
|
uni.getStorageSync('HBpassword', this.loginForm.password);
|
|
} else { //销毁
|
|
uni.removeStorageSync('HBusername');
|
|
uni.removeStorageSync('HBpassword');
|
|
}
|
|
},
|
|
typeCancel() {
|
|
this.show = false;
|
|
},
|
|
typeConfirm(e) {
|
|
console.log(this.baseUrl.slice(0, -1) + '3')
|
|
this.typeTitle = e.value[0];
|
|
this.show = false;
|
|
},
|
|
typeClose() {
|
|
this.show = false;
|
|
}
|
|
}
|
|
}
|
|
</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: 15px;
|
|
height: 45px;
|
|
}
|
|
|
|
.xieyi {
|
|
color: #333;
|
|
margin-top: 20px;
|
|
}
|
|
}
|
|
|
|
.easyinput {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.login-code-img {
|
|
height: 45px;
|
|
}
|
|
|
|
.version {
|
|
position: fixed;
|
|
text-align: center;
|
|
bottom: 30rpx;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
|
|
@media screen and (min-width: 600px) and (orientation:landscape) {
|
|
::v-deep .uni-data-checklist .checklist-group .checklist-box .checkbox__inner {
|
|
width: 30px;
|
|
height: 30px;
|
|
}
|
|
|
|
::v-deep .uni-data-checklist .checklist-group .checklist-box .checkbox__inner .checkbox__inner-icon {
|
|
height: 20px;
|
|
width: 10px;
|
|
left: 9px;
|
|
}
|
|
|
|
::v-deep .uni-data-checklist .checklist-group .checklist-box .checklist-content .checklist-text {
|
|
font-size: 24px
|
|
}
|
|
|
|
.title {
|
|
font-size: 45px
|
|
}
|
|
|
|
.image {
|
|
width: 200px !important;
|
|
height: 200px !important;
|
|
}
|
|
|
|
.normal-login-container {
|
|
width: 100%;
|
|
|
|
.logo-content {
|
|
width: 100%;
|
|
font-size: 21px;
|
|
text-align: center;
|
|
padding-top: 10%;
|
|
|
|
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: 80px;
|
|
border-radius: 20px;
|
|
|
|
.icon {
|
|
font-size: 40px;
|
|
margin-left: 10px;
|
|
color: #999;
|
|
}
|
|
|
|
.input {
|
|
width: 100%;
|
|
font-size: 30px;
|
|
line-height: 40px;
|
|
text-align: left;
|
|
padding-left: 15px;
|
|
}
|
|
|
|
}
|
|
|
|
.login-btn {
|
|
margin-top: 15px;
|
|
height: 80px;
|
|
font-size: 40px;
|
|
}
|
|
|
|
.xieyi {
|
|
color: #333;
|
|
margin-top: 20px;
|
|
}
|
|
}
|
|
|
|
.easyinput {
|
|
width: 100%;
|
|
}
|
|
|
|
.menu-item-box {
|
|
font-size: 30px
|
|
}
|
|
|
|
.menu-icon {
|
|
font-size: 40px;
|
|
}
|
|
|
|
.version {
|
|
font-size: 30px;
|
|
}
|
|
|
|
::v-deep .uni-popup-dialog {
|
|
width: 800px;
|
|
}
|
|
|
|
::v-deep .uni-dialog-title-text {
|
|
font-size: 30px;
|
|
}
|
|
|
|
::v-deep .uni-easyinput__content-input {
|
|
width: 700px;
|
|
font-size: 30px
|
|
}
|
|
|
|
::v-deep .content-clear-icon {
|
|
font-size: 40px !important;
|
|
}
|
|
|
|
::v-deep .uni-dialog-button-text {
|
|
font-size: 30px;
|
|
}
|
|
|
|
::v-deep .uni-dialog-button {
|
|
height: 70px;
|
|
}
|
|
|
|
// .uni-fab__content .uni-fab__content--right .uni-fab__content--other-platform{
|
|
// width: 300px;
|
|
// height: 80px;
|
|
// }
|
|
|
|
// uni-fab__content uni-fab__content--right uni-fab__content--other-platform
|
|
|
|
// .uni-fab__item-image{
|
|
// width: 80px;
|
|
// height: 50px;
|
|
// }
|
|
|
|
// .uni-fab__item{
|
|
// width: 100px;
|
|
// height: 50px;
|
|
// }
|
|
|
|
// .uni-fab__item-text{
|
|
// font-size: 24px;
|
|
// margin-right: 15px;
|
|
// }
|
|
}
|
|
|
|
.login-code-img {
|
|
height: 80px;
|
|
}
|
|
|
|
}
|
|
</style> |