chatgpt/pages/login/login.vue

<template>
	<view class="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: '',
			}
		},
		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.showToast({
							title:'登录成功',
							duration:2000
						})
						uni.navigateBack()
					}
				})
			}
		},
		components: {
			navback
		}
	}
</script>
<style>
	page{
		background-color: #2A2832;
	}
</style>
<style lang="scss">
	.container{
		display: flex;
		box-sizing: border-box;
		flex-direction: column;
		width: 100%;
		height: 100%;
		align-items: center;
		.kuang{
			display: flex;
			box-sizing: border-box;
			flex-direction: column;
			width: 497px;
			border-radius: 10px;
			border: 1px solid #32B3AA;
			box-shadow: 0 0 15px #000000;
			padding: 50px 37px;
			align-items: center;
			.loginText{
				display: flex;
				font-size: 24px;
				font-weight: 500;
				color: #C2C2C2;
				justify-content: center;
			}
			.phone_input{
				margin-top: 30px;
				width: 100%;
				height: 70px;
				font-size: 22px;
				color: #ffffff;
				border-bottom: 1px solid #32B3AA;
			}
			.passwordcontent{
				position: relative;
				display: flex;
				width: 100%;
				.password_input{
					margin-top: 40px;
					background-color: transparent;
				}
				.passwordcontent_hidden{
					position: absolute;
					display: flex;
					bottom: 10px;
					right: 10px;
					width: 30px;
					height: 30px;
					transition: all 0.5s;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.passwordcontent_show {
					transform: rotate(-180deg);
					transition: all 0.5s;
				}
			}
			.loginButton{
				display: flex;
				margin-top: 80px;
				width: 260px;
				height: 40px;
				border-radius: 10px;
				color: #ffffff;
				background-color: #32B3AA;
				justify-content: center;
				align-items: center;
			}
		}
	}
</style>