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.secretName" name="secretName"  label="用户名" placeholder="用户名"
					:rules="[{ required: true, message: '请填写用户名' }]" />
				<van-field v-model="loginParam.secretKey" type="password" name="secretKey" 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';
import CryptoJS from "crypto-js";
const { useCommon } = $globalStore;
const router = useRouter();
const loginParam = reactive({
  secretName:"",
  secretKey:""
})
const userLoginParam = {};
userLoginParam.username = loginParam.username;
userLoginParam.password = loginParam.password;
const onSubmit = async (values) => {
  console.log(values);
	// await getGoodsnum();
	// await getLang();
  // values.secretName = values.name;
  values.secretKey = Encrypt(values.secretKey);
  // return;
  userLogin(values,success=>{
    console.log(success);
        // router.push({ name: "Home" });
        router.push({ name: "enforceHome" });
        //设置全局变量
        // useCommon.SET_USER_PHONENUMBER(success.data.phonenumber.toString());
        // useCommon.SET_USER_ID(success.data.userId);
        useCommon.SET_TOKEN(success.data.token);
        // 监听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("登录失败")
      })
};

const Encrypt = (passWord) =>{
        var keyStr = '1234567898745621';
        var ivStr = keyStr;
        var key = CryptoJS.enc.Utf8.parse(keyStr);
        var iv = CryptoJS.enc.Utf8.parse(ivStr);
        var srcs = CryptoJS.enc.Utf8.parse(passWord);
        var encrypted = CryptoJS.AES.encrypt(srcs, key, {
            iv: iv,
            mode: CryptoJS.mode.CBC,
            padding: CryptoJS.pad.ZeroPadding
        });
        return CryptoJS.enc.Base64.stringify(encrypted.ciphertext);
    }
</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>