TFT_WmsPda/TFT-PDA/pages/login/login.vue

<template>
	<view class="page">
		<view class="top-background-raduis">
			<image class="header-image" src="/static/TFT-Logo.png"></image>
			<text class="system-name">关键件追溯管理系统PDA</text>
		</view>
		<view class="login-box">
			<view class="login-card-title">
				<view class="login-card-title-content"> 账号密码登录 </view>
			</view>
			<view class="login-card-input">
				<!-- 输入框头部图标 -->
				<uni-easyinput
				  class="hj-input"
				  v-model="userNo"
				  maxlength="30"
				  :trim="true"
				  @focus="UserNamePassWrodFocusBorderStyle"
				  :styles="inputColorConfigToUserName"
				  @blur="UserNamePassWrodBlurBorderStyle"
				  placeholder="请输入账号"
				></uni-easyinput>
				<!-- 输入框头部图标 -->
				<uni-easyinput
				  class="hj-input"
				  v-model="pswVal"
				  type="password"
				  @focus="PassWordFocusBorderStyle"
				  @blur="PassWordBlurBorderStyle"
				  :styles="inputColorConfigToPassWord"
				  placeholder="请输入密码"
				></uni-easyinput>
			</view>
			<view class="uni-flex uni-row">
				<view class="flex-item login-bottom-info" style="-webkit-flex: 1;flex: 1;text-decoration: underline;" @click="ChangeApiAddress">
					修改后台API接口地址
				</view>
				<view style="font-size: 0.92em;color: #5555ff;-webkit-flex: 1;flex: 1;-webkit-justify-content: center;justify-content: center;-webkit-align-items: center;align-items: center;">
					<checkbox-group @change="selfChanged">
						<checkbox class="flex-item" style="transform:scale(0.75);" :checked="saveUserPswFlag" />记住用户和密码
					</checkbox-group>
				</view>
			</view>
			<!-- <view class="login-bottom-info" @click="ChangeApiAddress">
				修改后台API接口地址
			</view> -->
			<view class="login-card-loginIn">
				<view class="login-card-loginIn-btn" @click="BtnLoginClick">
					登  录
				</view>
				<view class="login-card-loginIn-btn" @click="BtnExitClick">
					退  出
				</view>
			</view>
		</view>
		<view class="bottom-message">
			Copyright ©2023 NAURA 北京七星华创集成电路装备有限公司
		</view>
		<view>
			<!-- 提示信息弹窗 -->
			<uni-popup ref="message" type="message">
				<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
			</uni-popup>
		</view>
		<view>
			<!-- 输入框示例 -->
			<uni-popup ref="inputDialog" type="dialog">
				<uni-popup-dialog ref="inputClose" mode="input" title="修改后台API接口地址" :value="baseUrl" placeholder="请输入内容" @confirm="dialogInputConfirm"></uni-popup-dialog>
			</uni-popup>
		</view>
	</view>
</template>

 
<script>
import store from "@/store/index.js"
export default {
	data() {
		return {
			// 输入框边框颜色默认值
			colorDefault:'#b4b4b4',
			// 输入框边框聚焦值
			colorFocusColor:'#3cb79a',
			// 输入框颜色配置
			inputColorConfigToUserName: {
			color: "#000000",
			disableColor: "#eee",
			borderColor: "#b4b4b4",
			},
			// 输入框颜色配置
			inputColorConfigToPassWord: {
			color: "#000000",
			disableColor: "#eee",
			borderColor: "#b4b4b4",
			},
			userNo: getApp().globalData.userName,
			pswVal: getApp().globalData.password,
			msgType: 'success',
			messageText: '这是一条成功提示',
			baseUrl: '',
			saveUserPswFlag: true
		};
	},
	onLoad() {
		this.baseUrl = uni.getStorageSync('BasrUrl');
		this.userNo = uni.getStorageSync('UserNo');
		this.pswVal = uni.getStorageSync('PswVal');
	},
	// onBackPress() {
	// 	//console.log("111")
	// 	return true
	// },
	methods: {
		// 输入框聚焦变换边框样式
		UserNamePassWrodFocusBorderStyle(){
		  this.inputColorConfigToUserName.borderColor
		  = this.colorFocusColor;
		},
		PassWordFocusBorderStyle(){
		  this.inputColorConfigToPassWord.borderColor
		  = this.colorFocusColor;
		},
		// 输入框失去焦点变换边框样式
		UserNamePassWrodBlurBorderStyle(){
		  this.inputColorConfigToUserName.borderColor
		  = this.colorDefault;
		},
		PassWordBlurBorderStyle(){
		  this.inputColorConfigToPassWord.borderColor
		  = this.colorDefault;
		},
		async BtnLoginClick() {
			uni.showLoading({
				title: "正在登录中......",
				mask: true,
			})
			let parm = {
				url : '/login',
				data: {
					username: this.userNo,
					password: this.pswVal
				},
				method: 'POST',
				isHaveToken : false
			}
			let that = this;
			await getApp().RequestData(parm).then(
				value => {
					let retData = value
					if(retData.isSuccess) {
						if(retData.data.code == 200) {
							uni.hideLoading()
							if(that.saveUserPswFlag) {
								uni.setStorage({
									key: 'UserNo',
									data: that.userNo,
								})
								uni.setStorage({
									key: 'PswVal',
									data: that.pswVal,
								})
							}
							else {
								uni.removeStorage({
									key: 'UserNo'
								})
								uni.removeStorage({
									key: 'PswVal'
								})
							}
							uni.setStorage({
								key: 'userInfo',
								data: {username : that.userNo, tokenStr : retData.data.data},
							})
							uni.switchTab({
								url:"/pages/tabBar/inspect/inspect",
							})
						}
						else {
							uni.hideLoading()
							let type = "登录失败！" + retData.data.msg + "！"
							this.msgType = 'error'
							this.messageText = `${type}`
							this.$refs.message.open()
						}
					}
					else {
						uni.hideLoading()
						let type = "登录失败！" + retData.retMsg + "！"
						this.msgType = 'error'
						this.messageText = `${type}`
						this.$refs.message.open()
					}
				},
				err => {
					let retData = err
					uni.hideLoading()
					let type = "登录失败！" + retData.retMsg + "！"
					this.msgType = 'error'
					this.messageText = `${type}`
					this.$refs.message.open()
				}
			);
		},
		BtnExitClick() {
			let app = getApp()
			app.AppExit()
		},
		ChangeApiAddress() {
			this.$refs.inputDialog.open()
		},
		dialogInputConfirm(e) {
			uni.setStorage({
				key: 'BasrUrl',
				data: e
			});
			getApp().globalData.baseUrl = e
			this.baseUrl = e
		},
		selfChanged(e) {
			this.saveUserPswFlag = !this.saveUserPswFlag;
		}
	}
};
</script>
<style lang="scss" scoped>
* {
  box-sizing: border-box;
}
.header-image {
    width: 177px;
    height: 80px;
	margin-top: 45px;
	margin-left: 93px;
}
.system-name {
	margin-top: 30px;
	font-size: 1.9em;
	color: #595556;
}
.page {
  position: relative;
  height: 100vh;
}
.top-background-raduis {
  height: 45%;
  background-color: #d8d8d8;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
  flex-direction: column;
  display: flex;
  text-align: center;
}
// /deep/ .is-input-border{
//   border-radius: 7px !important;
// }
// /deep/ .uni-easyinput__content{
//   min-height: 39px !important;
// }
.hj-input {
  margin-top: 15rpx;
}
.hj-input:nth-child(2) {
  margin-top: 35rpx;
}
.login-box {
  top: 35%;
  position: absolute;
  width: 80%;
  left: 10%;
  right: 10%;
  height: 550rpx;
  padding: 30rpx;
  background-color: white;
  border-radius: 40rpx;
  box-shadow: 9px 9px 6px #e3e3e3;
  .login-card-input {
    // background-color: violet;
    height: 50%;
    padding: 1rpx;
  }
  .login-card-title {
    height: 20%;
    // background-color: black;
    padding: 10rpx;
    display: flex;
    justify-content: center;
    .login-card-title-content {
      font-size: 1.2em;
      color: #007aff;
      border-bottom: 3px solid #007aff;
    }
  }
  .login-card-loginIn{
    height: 25%;
    display: flex;
    justify-content: center;
    padding: 10rpx;
    align-items: center;
    .login-card-loginIn-btn{
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #007aff;
      width: 100%;
      font-size: 1.3em;
      height: 80%;
      border-radius: 40rpx;
      color: white;
    }
  }
  .login-bottom-info{
    // height: 5%;
    // display: flex;
    font-size: 0.9em;
    color: #aa00ff;
    // justify-content: center;
  }
}
.bottom-message{
  position: absolute;
  height: 70rpx;
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  font-size: 0.9em;
  overflow: hidden;
  color: #969898;
  bottom: 10rpx;
}
</style>