chatgpt/pages/login/login.vue

<template>
	<view class="login_container">
		<navback />
		<view class="kuang">
			<view class="loginText">欢迎登录</view>
			<input class="phone_input" 
			type="text" v-model="phone_value" placeholder="手机号">
			<view class="passwordcontent">
				<input v-if="hidden_password" class="password_input phone_input"
				type="password" v-model="password_value" placeholder="密码">
				<input v-else="hidden_password" class="password_input phone_input"
				type="text" v-model="password_value" placeholder="密码">
				<view :class="hidden_password ?'passwordcontent_hidden':'passwordcontent_show passwordcontent_hidden'" @click="clickToPasswordIsHidden">
					<image src="../../static/password_hidden.png" mode="aspectFit"></image>
				</view>
			</view>
			<view class="loginButton" @click="clickToLogin">登录</view>
		</view>
	</view>
</template>

<script>
	import navback from '../../components/navigator-back/navigator-back.vue'
	export default {
		data() {
			return {
				hidden_password: true,
				phone_value: '',
				password_value: '',
				login_success_goback_after_switch_index: -1,
			}
		},
		onLoad(option) {
			this.login_success_goback_after_switch_index = option.index
			// console.log('login_success_goback_after_switch_index:', this.login_success_goback_after_switch_index)
		},
		methods: {
			clickToPasswordIsHidden() {
				this.hidden_password = !this.hidden_password
			},
			clickToLogin() {
				// console.log('phone_value', this.phone_value)
				// console.log('password_value', this.password_value)
				if(this.tools.isNull(this.phone_value)) {
					uni.showModal({
						title:'请输入手机号',
						showCancel:false
					})
					return
				}
				// if(tools.isNull(this.password_value)) {
				// 	uni.showModal({
				// 		title:'请输入密码',
				// 		showCancel:false
				// 	})
				// 	return
				// }
						
				let self = this
				this.tools.request_login(self, this.phone_value, this.password_value, (success)=>{
					if(success === true) {
						uni.navigateBack()
			            let index = self.login_success_goback_after_switch_index
						if(index > -1) {
							uni.$emit(self.config.notification.switch_page_index, parseInt(index))
						}
						setTimeout(function() {
							uni.showToast({
								title:'登录成功',
								duration:1000
							})
						}, 100);
					}
				})
			}
		},
		components: {
			navback
		}
	}
</script>

<style>
	page{
		background-color: #2A2832;
	}
</style>

<style lang="scss">
	.login_container{
		display: flex;
		box-sizing: border-box;
		flex-direction: column;
		width: 100%;
		align-items: center;
		.kuang{
			display: flex;
			box-sizing: border-box;
			flex-direction: column;
			width: 50%; //497px;
			border-radius: 2vw; //10px;
			border: 1px solid #32B3AA;			
			box-shadow: 0 0 15px #000000;
			padding: 50px 37px;
			align-items: center;
			.loginText{
				display: flex;
				font-size: 3vw; //24px;
				font-weight: 500;
				color: #C2C2C2;
				justify-content: center;
			}
			.phone_input{
				margin-top: 2vw;//30px;
				width: 100%;
				height: 8vw; //70px;
				font-size: 2vw; //22px;
				color: #ffffff;
				border-bottom: 1px solid #32B3AA;
			}
			.passwordcontent{
				position: relative;
				display: flex;
				width: 100%;
				.password_input{
					margin-top: 3vw; //40px;
					background-color: transparent;
				}
				.passwordcontent_hidden{
					position: absolute;
					display: flex;
					bottom: 10px;
					right: 10px;
					width: 3vw; //30px;
					height: 3vw; //30px;
					transition: all 0.5s;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.passwordcontent_show {
					transform: rotate(-180deg);
					transition: all 0.5s;
				}
			}
			.loginButton{
				display: flex;
				margin-top: 8vw; //80px;
				width: 27vw; //260px;
				height: 5vw; //60px;
				border-radius: 10px;
				font-size: 2.5vw; //22px;
				color: #ffffff;
				background-color: #32B3AA;
				justify-content: center;
				align-items: center;
			}
		}
	}
</style>