cashier_admin_app/pageShopLogin/login.vue

<template>
	<view class="login-wrapper">


		<view class="login-top">
			<text>欢迎回来，请登录</text>
			<image style="width: 320rpx; height: 76rpx" />
		</view>
		<view class="login-bottom jeepay-form">

			<!-- 不需要label, 需要修改： label-width="0"  -->
			<uni-forms ref="loginFormRef" label-width="0" :model="vdata.formData" :rules="rules">

				<view>
					<uni-forms-item name="username">
						<uni-easyinput class='jeepay-easyinput' placeholder="请输入登录名/手机号"
							v-model="vdata.formData.username" :clearable="false">
							<template #prefixIcon>
								<image src="@/static/login/icon-user.svg" class="input-icon" />
							</template>
						</uni-easyinput>
					</uni-forms-item>

					<uni-forms-item name="password">
						<uni-easyinput class='jeepay-easyinput' :type="vdata.isShowPwd ? 'text' : 'password'"
							v-model="vdata.formData.password" :clearable="false" placeholder="请输入登录密码">
							<template #prefixIcon>
								<image src="@/static/login/icon-pw.svg" class="input-icon" />
							</template>
							<template #suffixIcon>
								<view class='show-tips' @tap="vdata.isShowPwd = !vdata.isShowPwd ">
									{{ vdata.isShowPwd ? '隐藏' : '显示'  }}
								</view>
							</template>
						</uni-easyinput>
					</uni-forms-item>

					<uni-forms-item v-if="vdata.isShowSafetyCode" name="safetyCode">
						<uni-easyinput v-model="vdata.formData.safetyCode" type="number" class='jeepay-easyinput'
							placeholder="请输入安全码" :maxlength="6" :clearable="false">
							<template #prefixIcon>
								<image src="@/static/login/icon-pw.svg" class="input-icon" />
							</template>
						</uni-easyinput>
					</uni-forms-item>

				</view>


			</uni-forms>


			<Button @tap="loginFunc">登录</Button>

		</view>
	</view>
</template>
<script setup>
	import {
		login
	} from '@/http/businessApiManger.js';
	import {
		ref,
		reactive,
		onMounted
	} from 'vue';
	import storageManage from '@/commons/utils/storageManage.js'
	import formUtil from '@/commons/utils/formUtil.js'
	import go from '@/commons/utils/go.js'
	const loginFormRef = ref()
	const envChangeTipsRef = ref()
	const refAgr = ref()
	// #ifdef MP-WEIXIN
	// 控制 音乐播放 和暂停
	import {
		getPushStatus
	} from "@/commons/utils/pushmsg/wxTextToSpeach.js"
	// #endif
	const rules = {
		username: {
			rules: [formUtil.rules.requiredInputShowToast('用户名')],
		},
		password: {
			rules: [formUtil.rules.requiredInputShowToast('密码')],
		}
	}

	const vdata = reactive({
		isShowPwd: false, // 是否显示密码
		formData: {
			username: '', // 账密登录： 用户名
			password: '', // 账密登录： 密码
		},

	})

	// uni.request({
	// 	url:'/shopApi'+'/login/wx/merchant/login',
	// 	method:'POST',
	// 	data:{
	// 		username: '1', 
	// 		password: '1', 
	// 	}
	// }).then(res=>{
	// 	console.log(res);
	// })


	function loginFunc() {
	
		// 表单验证 
		formUtil.validate(loginFormRef.value).then(() => {

			login(vdata.formData).then((res) => {
				useStorage.set('token', res.data.token);
				useStorage.set('userInfo', res.data.user);
				uni.showToast({
					title: '登录成功',
					icon: 'success'
				});
				setTimeout(() => {
					uni.redirectTo({
						url: '/pages/index/index'
					});
				}, 1000);
			})
		})

	}
</script>

<style lang="scss">
	.login-wrapper {
		min-height: 100vh;
		background-color: $v-color-bgrey;

		.login-top {
			display: flex;
			flex-direction: column;
			height: 376rpx;
			padding: 176rpx 70rpx 0;
			box-sizing: border-box;
			background: url("/static/indexImg/user-bg.svg") center center no-repeat;
			background-size: cover;

			text:first-child {
				margin-bottom: 30rpx;
				font-size: 38rpx;
				font-weight: 500;
				color: rgba(0, 0, 0, 0.8);
			}

			text:last-child {
				font-size: 50rpx;
				font-weight: 600;
				color: #48C0FF;
			}
		}

		.login-bottom {
			height: calc(100vh - 376rpx);
			padding: 50rpx;
			box-sizing: border-box;
			border-radius: 60rpx 60rpx 0 0;
			background-color: #fff;

			.show-tips {
				color: rgba(88, 132, 204, 1);
				font-weight: 400;
				font-size: 32rpx;
			}

			.agreement-policy {
				display: flex;
				align-items: center;
				padding: 0 30rpx;
				margin-top: 10rpx;
				margin-bottom: 50rpx;
				font-size: 26rpx;
				color: #8C8C8C;

				.select-box {
					display: flex;
					align-items: center;

					.select-img {
						width: 46rpx;
						height: 46rpx;
					}
				}

				.agreement,
				.policy {
					color: #1D79FD;
				}
			}

			.register-box {
				display: flex;
				justify-content: space-between;
				padding: 0 30rpx;
				margin-top: 50rpx;
				font-size: 26rpx;
				font-weight: 400;

				.register {
					text:last-child {
						color: #1D79FD;
					}
				}

				.forget {
					color: #1D79FD;
				}
			}

			.swidth-login {
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 212rpx;
				font-size: 30rpx;
				font-weight: 400;
				color: rgba(77, 77, 77, 1);

				image {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
	}
</style>