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: '',
				password: '',
				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);
						uni.setStorageSync('shop_id', res.data.shop_id);
						tools.success("登录成功");
						setTimeout(() => {
							this.isAJAX = false;
							uni.redirectTo({
								url: "/pages/index/index",
							});
						}, 1000);
					} else {
						tools.error(res.msg);
						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>