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

<template>
	<view style="height: 100% !important;">
		<view class="context">
			<!-- 	<image src="../../static/loginback.png" class="context-img"></image> -->
			<view class="confirm-list">
				欢迎登录 !
			</view>
			<view class="input-wrap">
				<input style="text-align: start;" placeholder="请输入用户名" v-model="loginId" auto-complete="new-password"
					autocomplete="off" />
			</view>
			<view class="input-wrap" style="margin-top: 50rpx;">
				<input class="uni-input" placeholder="请输入密码" :type="isShow ? 'text' : 'password'" v-model="pwd" />
			</view>
			<view style="text-align: center;margin-top: 100rpx;" @tap="loginFun()">
				<view class="login" style="background-color: #49A992">登录</view>
			</view>
		</view>
		<zero-privacy ref="privacy" @disagree='handleNeedAuthorization' :onNeed="false"
			@agree='agehandleNeed'></zero-privacy>
		<button class="bottom" @click.stop="showLoding">
			手机号快速登录
		</button>
		<fLogin :agree="agreeTwo" />
	</view>
</template>

<script>
	import fLogin from '@/uni_modules/f-wxLogin/components/f-wxLogin/f-wxLogin.vue';
	import md5 from '@/components/md5.js'
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import sha1 from "js-sha1";
	export default {
		components: {
			fLogin
		},
		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, //是否显示输的密码
				loginId: '',
				pwd: '',
				agree: false,
				agreeTwo: false,
			}
		},

		methods: {
			isLoding() {
				let isglag;
				let isLogin = uni.getStorageSync('headLogo');
				if (isLogin) {
					isglag = false;

				} else {
					isglag = true;
				}
				return isglag;
			},
			...mapMutations(['setShowWxLogin']),
			showLoding() {
				// let that = this;
				// if (that.agreeTwo == false) {
				// 	uni.showToast({
				// 		title: '请阅读并勾选用户协议和隐私政策',
				// 		icon: 'none'
				// 	});
				// 	return;
				// }
				this.setShowWxLogin(true);
			},
			isShowPassword() {
				let that = this;
				that.isShow = !that.isShow;
			},
			loginFun() {
				let that = this;
				if (that.loginId == "" || that.pwd == "") {
					uni.showToast({
						title: '请输入账号或密码',
						icon: 'none'
					});
					return;
				}
				// if (that.agreeTwo == false) {
				// 	uni.showToast({
				// 		title: '请阅读并勾选用户协议和隐私政策',
				// 		icon: 'none'
				// 	});
				// 	return;
				// }
				let pad = md5(that.pwd).substr(8, 16).toUpperCase();
				let data = {
					loginId: that.loginId,
					pwd: md5(
						sha1(that.pwd).toUpperCase()
					).toUpperCase(),
				};
				this.$emit('loginFun', data);
			},

			handleNeedAuthorization() {
				uni.exitMiniProgram({
					success: function() {
						console.log('退出小程序成功');
					},
					fail: function(err) {
						console.log('退出小程序失败', err);
					}
				})
			},
			agehandleNeed() {},
		}
	}
</script>

<style lang="scss">
	.context {
		width: 100%;
		height: 100%;
		padding: 300rpx 50rpx 0rpx 50rpx;
		background-color: #FFFFFF;
		background-image: linear-gradient(#90ffe4, #FFFFFF);
		position: relative;

		.confirm-list {
			font-size: 50rpx;
			font-weight: bold;
			position: absolute;
			top: 30rpx;
			font-family: "微软雅黑"
		}
	}


	.input-wrap {
		height: 100rpx;
		text-align: center;
		padding: 35rpx;
		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;
	}



	.bottom {
		margin-top: 23rpx;
		background: #fff;
		font-size: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #39b54a;
		width: 85%;
		border: solid 1px #39b54a;
		border-radius: 40rpx;

		image {
			width: 54rpx;
			height: 54rpx;
			margin-right: 16rpx;
		}
	}
</style>