init project
This commit is contained in:
tao
539
pages/login.vue
Normal file
539
pages/login.vue
Normal file
@@ -0,0 +1,539 @@
|
||||
<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" 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" 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" 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>
|
||||
<view>配置服务器地址</view>
|
||||
</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()
|
||||
}
|
||||
})
|
||||
},
|
||||
// 登录成功后，处理函数
|
||||
loginSuccess(result) {
|
||||
// 设置用户信息
|
||||
if (this.rememberPsw) {
|
||||
uni.setStorageSync('HBusername', this.loginForm.username);
|
||||
uni.setStorageSync('HBpassword', this.loginForm.password);
|
||||
} else { //销毁缓存
|
||||
uni.removeStorageSync('HBusername');
|
||||
uni.removeStorageSync('HBpassword');
|
||||
}
|
||||
this.$store.dispatch('GetInfo').then(res => {
|
||||
// this.$tab.redirectTo('/pages/work/esop')
|
||||
// if (this.typeTitle == '常用功能') {
|
||||
this.$tab.reLaunch('/pages/index')
|
||||
// } else if (this.typeTitle == 'ESOP') {
|
||||
|
||||
// } else if (this.typeTitle == 'IPC') {
|
||||
// }
|
||||
})
|
||||
},
|
||||
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>
|
||||
Reference in New Issue
Block a user