zh-cashier-app/pages/login/index.vue

<template>
	<view class="login-index">
		<view class="bg-img">
			<image class="hi-img" src="@/static/img/hi.png" mode="scaleToFill"></image>
			<view class="fs-42 fc-3 fw-b">欢迎使用振合网收银系统</view>
		</view>
		
		<view class="info-box">
			<view class="fs-32 fc-3 fw-b mb-25">密码登录</view>
			
			<input v-model="phone" placeholder="请输入手机号" type="number" />
			
			<view class="p-f">
				<input v-model="password" placeholder="请输入密码" :password="inputType" />
				<view class="p-c" @click="openeye()">
					<uni-icons type="eye-filled" size="20" color="#999"></uni-icons>
				</view>
			</view>
			
			
			
			<view class="button-save text-align-center fs-32 fc-f" @click="toLogin()">立即登录</view>
		</view>
		
	</view>
</template>

<script>
	import tools from "@/common/js/tools.js";
	import {Login} from '@/api/cashierApi.js';
	export default {
		
		data(){
			return{
				inputType:true,
				phone:'19112107434',
				password:'123456',
				isAJAX:false,
			}
		},
		mounted() {
			
		},
		methods:{
			openeye(){
				this.inputType = !this.inputType
			},
			
			toLogin(){
				if(this.isAJAX){
					return
				}
				this.isAJAX = true;
				Login({phone:this.phone,password:this.password}).then((res)=>{
					if(res.code == 1){
						uni.setStorageSync('token',res.data.token);
						uni.setStorageSync('u_id',res.data.u_id);
						tools.success("登录成功");
						setTimeout(() => {
						  this.isAJAX = false;
						  uni.redirectTo({
						    url: "/pages/index/index",
						  });
						}, 1000); 
					}else{
						this.isAJAX = false;
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.login-index{
		.bg-img{
			width: 100%;
			height: 430rpx;
			background-image: url('@/static/img/login-bg.png');
			background-size: 100% 100%;
			box-sizing: border-box;
			padding: 90rpx 25rpx 0 25rpx;
			.hi-img{
				width: 118rpx;
				height: 60rpx;
				margin-bottom: 10rpx;
			}
		}
		.info-box{
			box-sizing: border-box;
			padding: 10rpx 27rpx;
			input{
				width: 100%;
				height: 83rpx;
				background: #F3F4F6;
				border-radius: 104rpx;
				box-sizing: border-box;
				padding: 0 70rpx 0 25rpx;
				font-size: 30rpx;
				margin-bottom: 35rpx;
			}
			.p-f{
				position: relative;
				.p-c{
					position: absolute;
					top: 20rpx;
					right: 20rpx;
				}
			}
			.button-save{
				width: 100%;
				height: 83rpx;
				line-height: 83rpx;
				background: #1778FD;
				border-radius: 104rpx;
			}
		}
		
	}
</style>