PDA/components/ay-login/login-password.vue

<template>
	<view style="height: 100% !important;">
		<view class="context">
			<view class="input-wrap">
				<input style="text-align: start;" placeholder="请输入用户名" v-model="username" auto-complete="new-password"
					autocomplete="off" />
			</view>
			<view class="input-wrap" style="margin-top: 50rpx;">
				<input class="uni-input" placeholder="请输入密码" password type="text" v-model="password" />
			</view>
			<view style="text-align: center;margin-top: 100rpx;" @tap="loginFun">
				<view class="login" style="background-color: #49A992">登录</view>
			</view>
		</view>
	</view>
</template>

<script>
	import md5 from "md5";
	import sha1 from "js-sha1";
	export default {
		components: {},
		props: {

			themeColor: {
				type: String,
				default: '#33CCCC',
			},
			logoUrl: {
				type: String,
				default: '',
			},

		},
		computed: {
			style_xuan() {
				let that = this;
				var themeColor = that.themeColor;
				var isRemeber = that.isRemeber;
				var style = '';

				if (isRemeber) {
					style += `color:${themeColor};`;
				}
				return style;
			},
		},
		data() {
			return {
				isRemeber: false,
				isShow: false, //是否显示输的密码
				username: '',
				password: '',
			}
		},

		methods: {
			isShowPassword() {
				let that = this;
				that.isShow = !that.isShow;
			},
			loginFun() {
				let that = this;
				if (that.username == "" || that.password == "") {
					uni.showToast({
						title: '请输入账号或密码',
						icon: 'none'
					});
					return;
				}
				let pad = md5(
					sha1(that.password).toUpperCase()
				).toUpperCase();
				let data = {
					loginId: that.username,
					pwd: pad,
				};
				this.$emit('loginFun', data);
			},
		}
	}
</script>

<style lang="scss">
	.context {
		position: relative;
		width: 100%;
		height: 100%;
		padding: 190rpx 50rpx 0rpx 50rpx;
		z-index: 100;
	}

	.input-wrap {
		height: 100rpx;
		text-align: center;
		padding: 30rpx;
		border: 2rpx solid #d5d4d4;
		border-radius: 100rpx;
		background-color: #fff;
	}

	view {
		box-sizing: border-box;
	}

	.cf-hengStart {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
	}

	.xuanShowBox {
		padding-left: 40rpx;

		.icon-weixuan {
			color: #eaeeed;
		}

		.xuanShowTip {
			padding-left: 10rpx;
		}
	}

	.uni-input {
		text-align: start;
	}

	.login {
		color: #FFFFFF;
		width: 100%;
		border-radius: 68rpx;
		margin: 20rpx auto;
		padding: 35rpx;
		font-size: 28rpx;
	}


	.changeShow {

		font-size: 36rpx;
		position: relative;
		top: -12rpx;
		left: 84rpx;
	}

	.input-placeholder {
		font-size: 28rpx;
	}

	uni-page-wrapper {
		height: 100%;
	}

	uni-page-body {
		height: 100%;
	}
</style>