zdxtLawEnforcementCodeView/src/views/login.vue

<template>
	<div class="login-page">
		<div class="login-content">
			<van-nav-bar >
				<template #title>
					<div class="title">
						登录
					</div>
				</template>
			</van-nav-bar>
			<van-form @submit="onSubmit">
				<van-field v-model="loginParam.username" name="username"  label="用户名" placeholder="用户名"
					:rules="[{ required: true, message: '请填写用户名' }]" />
				<van-field v-model="loginParam.password" type="password" name="password" label="密码" placeholder="密码"
					:rules="[{ required: true, message: '请填写密码' }]" />
				<div style="margin: 16px">
					<van-button block type="primary" native-type="submit">登录</van-button>
				</div>
			</van-form>
			<router-link to="/register" class="link">还没有账号,去注册</router-link>
		</div>
	</div>
</template>
<script setup>
import { reactive } from 'vue';
import {userLogin} from '../api/Home';
const { useCommon } = $globalStore;
const router = useRouter();
const loginParam = reactive({
  username:"",
  password:""
})
const userLoginParam = {};
userLoginParam.username = loginParam.username;
userLoginParam.password = loginParam.password;
const onSubmit = async (values) => {
  console.log(values);
	// await getGoodsnum();
	// await getLang();
  userLogin(values,success=>{
        // router.push({ name: "enforceHome" });
        router.push({ name: "enforceHome" });
        // 定义全局变量
        console.log(success.data)
        debugger
        //设置全局变量
        useCommon.SET_USER_PHONENUMBER(success.data.phonenumber);
        useCommon.SET_USER_ID(success.data.userId);
        // 监听uni-app发送的消息
        window.addEventListener('message', (event) => {
          console.log('Received message from uni-app:', event.data);
          // 向uni-app返回消息
          window.parent.postMessage('Hello, uni-app!', '*');
        });
      },error=>{
          console.log("登录失败")
      })
  
	
};
</script>

<style lang="less" scoped>
.login-page {
	width: 100%;
	height: 100%;
	display: flex;
	overflow: hidden;
	background-image: url("~@/assets/images/login.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	opacity: 0.9;
	.login-content {
		margin: auto;
		padding: 10px 10px 20px 10px;
		background-color: #fff;
		border-radius: 10px;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
		opacity: 0.9;
		.title{
            font-size: 20px;
            font-weight: 600;
        }
	}

	.link {
		font-size: 12px;
		color: #069;
		float: right;
		margin-right: 15px;
	}
}
</style>