anKeYuan-vendingMachine/pages/login.vue

<!-- 登录 -->
<template>
	<view class="login">
		<view class="flex-null-1"></view>
		<img class="logo-img" src="@/static/logo.png" alt="">
		<view class="logo-text">(积分兑换)</view>
		<view class="input-max-box">
			<view class="input-max-box-one">
				<view class="input-box">
					<img src="@/static/img_log_in_account.png">
					<input type="text" v-model="username" @confirm="login()" placeholder="请输入手机号" maxlength="30">
				</view>
			</view>
			<view class="input-max-box-two">
				<view class="input-box">
					<img src="@/static/img_log_in_password.png">
					<input type="password" v-model="password" @confirm="login()" placeholder="请输入密码" maxlength="30">
				</view>
			</view>
			<view class="button-box" @click="login()">登录</view>
		</view>
		<view class="flex-null-2"></view>
	</view>
</template>

<script>
	import {
		hex_md5
	} from '@/utils/md5.js';
	import {
		login
	} from '@/api/index';
	import {
		browserDetection
	} from '@/utils/auth';
	export default {
		data() {
			return {
				username: "",
				password: "",
			}
		},
		onLoad() {

		},
		onShow() {
			browserDetection();
		},
		methods: {
			//登录
			async login() {
				let self = this;
				if (!this.username) {
					uni.showToast({
						mask: true,
						icon: "none",
						position: "center",
						title: "请输入手机号",
						duration: 2000
					});
					return
				}
				if (!this.password) {
					uni.showToast({
						mask: true,
						icon: "none",
						position: "center",
						title: "请输入密码",
						duration: 2000
					});
					return
				}
				let obj = {
					account: this.username,
					password: hex_md5(this.password),
				}
				const {
					data
				} = await login(obj)
				if (data.code == 200) {
					uni.setStorageSync('token', data.data.token);
					uni.setStorageSync('phone', data.data.phone);
					uni.redirectTo({
						url: '/pages/home',
					});
				}
			},
		}
	}
</script>

<style lang="stylus" scoped>
	.login {
		flex: 1;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		background: url(../static/back.png);
		background-size: 100% 100%;

		.flex-null-1 {
			flex: 2;
		}

		.flex-null-2 {
			flex: 3;
		}

		.logo-img {
			width: 448rpx;
			height: 187rpx;
			margin: 0 auto 0;
		}

		.logo-text {
			margin-top:40rpx;
			/* 1. 字体设置：必须够粗 */
			font-family: "Microsoft YaHei", "SimHei", sans-serif;
			font-weight: 900;
			/* 最粗 */
			font-size: 52rpx;
			/* 根据实际需要调整大小 */
			letter-spacing: 2rpx;
			color: #ffffff;
			text-shadow:
				-1rpx -1rpx 0 #7cb9e8,
				1rpx -1rpx 0 #7cb9e8,
				-1rpx 1rpx 0 #7cb9e8,
				1rpx 1rpx 0 #7cb9e8,
				-2rpx 0rpx 0 #7cb9e8,
				2rpx 0rpx 0 #7cb9e8,
				0rpx -2rpx 0 #7cb9e8,
				0rpx 2rpx 0 #7cb9e8,
				0rpx 0rpx 4rpx rgba(124, 185, 232, 0.6);
			padding: 15rpx 40rpx;
			display: inline-block;
			text-align: center;
		}

		.input-max-box {

			.input-max-box-one {
				overflow: hidden;
				// margin-top: 68rpx;

				.input-box {
					display flex;
					width: 600rpx;
					height: 80rpx;
					border: 1rpx solid #0183FA;
					border-radius: 40rpx;
					margin: 147rpx auto 0;

					img {
						width: 28rpx;
						height: 32rpx;
						margin: 24rpx 31rpx;
					}

					input {
						flex: 1;
						font-size: 24rpx;
						height: 80rpx;
						line-height: 80rpx;
						margin-right: 31rpx;
					}
				}

				.text-box {
					height: 59rpx;
					line-height: 59rpx;
					color: #DC1616;
					font-size: 24rpx;
					margin-left: 102rpx;
				}
			}

			.input-max-box-two {
				margin-top: 40rpx;

				.input-box {
					display flex;
					width: 600rpx;
					height: 80rpx;
					border: 1rpx solid #0183FA;
					border-radius: 40rpx;
					margin: 0 auto 0;

					img {
						width: 30rpx;
						height: 32rpx;
						margin: 24rpx 30rpx;
					}

					input {
						flex: 1;
						font-size: 24rpx;
						height: 80rpx;
						line-height: 80rpx;
						margin-right: 31rpx;
					}
				}

				.text-box {
					height: 59rpx;
					line-height: 59rpx;
					color: #DC1616;
					font-size: 24rpx;
					margin-left: 102rpx;
				}
			}
		}

		.button-box {
			width: 600rpx;
			line-height: 80rpx;
			background: #0183FA;
			border-radius: 40rpx;
			font-size: 36rpx;
			color: #fff;
			text-align center;
			margin: 140rpx auto 0;
		}
	}
</style>