ClassContent/历届学生/苏琪/项目练习/newApp/appFont/pages/my/login.vue

<template>
	<view class="login">
		<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" style-type="text" active-color="#4c86f7"></uni-segmented-control>
		<view class="content">
		    <view v-show="current === 0">
				<view class="signIn">
					<view class="userIcon">
						<image src="../../static/icon.png" mode=""></image>
					</view>
					<view class="txtInput">
						<view class="inputBox">
							<label for="username">
								<span class="inputIcon"><image src="../../static/username.png" mode=""></image></span>
								<input type="text" value="" class="username" v-model="loginMessage.username" placeholder="请输入用户名"/>
							</label>
						</view>
						<view class="inputBox">
							<label for="password">
								<span class="inputIcon"><image src="../../static/password.png" mode=""></image></span>
								<input type="text" value="" class=" password" v-model="loginMessage.password" placeholder="请输入密码"/>
							</label>
						</view>
						<button type="primary" form-type="submit" >登录</button>
					</view>
				</view>
		    </view>
		    <view v-show="current === 1">
				<view class="signOut">
					<view class="inputBox">
						<label for="username">
							<span>用户名</span>
							<input type="text" value="" class="username" v-model="signOutmessage.username" placeholder="请输入用户名"/>
						</label>
						<label for="phone">
							<span>手机号</span>
							<input type="text" value="" class="phone" v-model="signOutmessage.phone" placeholder="请输入手机号"/>
						</label>
						<label for="password">
							<span>密码</span>
							<input type="text" value="" class="password" v-model="signOutmessage.password" placeholder="请输入密码"/>
						</label>
					</view>
					<button type="primary" form-type="submit" >注册</button>
				</view>
		    </view>
		</view>
	</view>
</template>

<script>
	import uniSegmentedControl from "@/components/uni-segmented-control/uni-segmented-control.vue"
	export default{
		components: {uniSegmentedControl},
		data() {
			return {
				items: ['登录','注册'],
				current: 0,
				loginMessage: {
					username: '',
					userpwd: ''
				},
				signOutmessage:{
					username:'',
					phone:'',
					userpwd:''
				}
			}
		},
		methods:{
			 onClickItem(index) {
				// 列表切换
			    if (this.current !== index) {
			        this.current = index;
			    }
				uni.setNavigationBarTitle({
					title: this.items[index]
				});
			},
			async login(){
				let data = await this.$http.userLogin({
					data: this.loginMessage
				});
				console.log(data)
				this.$utils.setLocalStorage("LoginStatus",data)
			}
		}
	}
</script>
<!-- ffb400 -->
<style lang="less">
	.login{
		padding: 20upx;
		.content{
			.signIn{
				.userIcon{
					width: 100%;
					height: 300upx;
					display: flex;
					justify-content: center;
					align-items: center;
					image{
						width: 180upx;
						height: 180upx;
					}
				}
				.txtInput{
					padding: 20upx;
					.inputBox{
						label{
							width: 80%;
							margin: 0 auto;
							display: flex;
							align-items: center;
							margin-top: 20upx;
							.inputIcon{
								image{width: 60upx; height: 60upx;}
							}
							input{
								color: #999999;
								font-size: 28upx;
								margin-left: 20upx;
								display: inline-block;
								background: none;
								padding: 10upx 0;
								position: relative;
							}
							input::after{
								content: "";
								width: 0;
								height: 2upx;
								background-color: #4c86f7;
								position: absolute;
								left: 50%;
								bottom: 0;
								opacity: 0;	
								transition: all 0.3s ease-in-out;
							}
						}
						label:hover input::after{
							width: 100%;
							left: 0;
							opacity: 1;
						}
					}
					uni-button{
						height: 70upx;
						margin-top: 100upx;
						box-shadow: 0 0 10upx #4c86f7;
						border-radius: 50upx;
						line-height: 70upx;
						font-size: 32upx;
					}
				}
			}
			.signOut{
				min-height: 540upx;
				background: url("./../../static/novel.png") top left no-repeat;
				background-size: 100%;
				position: relative;
				margin-top: 20upx;
				.inputBox{
					padding-top: 540upx;
					label{
						width: 68%;
						margin: 0 auto;
						display: flex;
						align-items: center;
						margin-top: 30upx;
						display: flex;
						justify-content: space-between;
						
						span{
							color: #999999;
						}
						input{
							color: #999999;
							font-size: 28upx;
							margin-left: 20upx;
							display: inline-block;
							background: none;
							padding: 10upx;
							position: relative;
							border-radius: 20upx;
							box-shadow: 0 0 6upx #4c86f7;
						}
					}
				}
				uni-button{
					height: 70upx;
					margin-top: 100upx;
					box-shadow: 0 0 10upx #4c86f7;
					border-radius: 50upx;
					line-height: 70upx;
					font-size: 32upx;
				}
			}
		}
	}
	

</style>