YTAPP/pages/login/index.vue

<!-- 顶部蓝色 -->
<template>
	<view class="contaier">
		<view class="top-bg">
			<image class="logo-icon" src="/static/logo.png"></image>
		</view>

		<view class="input-box padding-lr">
			<uni-forms ref="valiForm" :rules="rules" :modelValue="valiFormData">
				<view class="cu-form-group margin-top">
					<uni-icons class="uni-icon" type="person" size="30" color="#999"></uni-icons>
					<uni-easyinput placeholder="账号" v-model="valiFormData.account" />
				</view>
				<view class="cu-form-group">
					<uni-icons class="uni-icon" type="locked" size="30" color="#999"></uni-icons>
					<uni-easyinput placeholder="密码" type="password" v-model="valiFormData.password" />
				</view>
				<view class="cu-form-group solid-bottom">
					<uni-icons class="uni-icon" type="more-filled" size="30" color="#999"></uni-icons>
					<uni-easyinput placeholder="验证码" v-model="valiFormData.captcha" />
					<!-- <button class='cu-btn bg-login-zl shadow'>验证码</button> -->
					<image class='cu-btn captchaImg' :src="verifyCodeImg" @click="getVerifyCodeImg"></image>
				</view>
			</uni-forms>
		</view>

		<view class="padding-lr margin-top-xs">
			<button class="cu-btn block round bg-login-zl margin-tb-sm lg" @click="formSubmit('valiForm')">立即登录</button>
		</view>
		<uni-popup ref="message" type="message">
			<uni-popup-message type="error" :message="messageText" :duration="2000"></uni-popup-message>
		</uni-popup>
	</view>
</template>
<script>
	import {
		computed,
		ref
	} from 'vue';
	import {loginURL, getcaptchaURL} from "@/utils/api.js"
	
	export default {
		data() {
			return {
				messageText: "",
				captcha_id: 'f2dd39ce-0d3e-4c1e-916c-b50090a7590s',
				verifyCodeImg: '', //验证码图片
				verifyCodeToken: '', //图形验证码的验证token
				isVerifyCodeTure: false, //验证码输入是否正确
				valiFormData: {
					account: '',
					password: '',
					captcha: ''
				},
				rules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '姓名不能为空'
						}]
					},
				},
			}
		},
		onLoad() {
			this.getVerifyCodeImg()
		},
		methods: {
			getVerifyCodeImg() {
				uni.request({
					url: `${getcaptchaURL}?server=1&id=${this.captcha_id}&m=` +
						Math.random(),
					method: 'GET',
					responseType: 'arraybuffer', //设置响应类型
					success: res => {
						const arrayBuffer = new Uint8Array(res.data)
						const base64 = "data:image/png;base64," + uni.arrayBufferToBase64(
							arrayBuffer) //这里需要添加前缀
						this.verifyCodeImg = base64
						this.verifyCodeToken = res.header["Set-Cookie"]
					}
				})
			},
			formSubmit() {
				// 请求
				uni.request({
					//api地址
					url: loginURL,
					data: {
						"username": this.valiFormData.account,
						"password": this.valiFormData.password,
						"captcha": this.valiFormData.captcha,
						"keep": false,
						"loading": true,
						"captcha_id": this.captcha_id
					},
					//请求类型
					method: 'POST',
					success: (res) => {
						console.log(res)
						if (res.data.code == 1) {
							const userInfo = res.data.data.userInfo;
							//登录成功之后获取Token
							uni.setStorage({
								key: 'token',
								data: userInfo.token,
								success() {
									//存储完Token之后再存储一下用户信息
									uni.setStorage({
										key: 'user',
										data: userInfo,
										success() {
											//返回上一页
											uni.navigateBack();
										}
									})
								}
							})
						} else {
							console.log(res)
							this.messageText = res.data.msg
							this.$refs.message.open()
						}
					}
				});
			}
		},
	};
</script>
<style lang="scss" scoped>
	.contaier {
		height: 100vh;
		background-color: #ffffff;
	}

	.margin-top {
		margin-top: 10rpx;
	}

	.margin-top-xs {
		margin-top: 60rpx;
	}

	.padding-lr {
		padding-left: 40rpx;
		padding-right: 40rpx;
	}

	.cu-btn {
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		height: 60rpx;
		font-size: 24rpx;
		text-align: center;
	}

	.round {
		border-radius: 30rpx;
	}

	.input-box {

		.cu-form-group {
			display: flex;
			flex-direction: row;
			align-items: center;
			border-bottom: #ccc solid 0.5px;

			.uni-icon {
				color: #333;
				padding: 20rpx;
			}

		}
	}

	.top-bg {
		margin-top: 20rpx;
		width: 750rpx;
		height: 120rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		.logo-icon {
			width: 248rpx;
			height: 100rpx;
			object-fit: contain;
		}
	}

	.captchaImg {
		width: 160rpx;
		height: 60rpx;
	}

	.bg-login-zl {
		background-image: linear-gradient(45deg, #727CFB, #46D0ED);
		color: #ffffff;
	}
</style>