From 0b3c4a0ffa0ff53e892e5fdacc7c4ac196393a70 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Tue, 16 Dec 2025 15:32:48 +0800
Subject: [PATCH] feat:部署微信小程序测试
---
src/pages/login/index.vue | 497 +++++++++++++++++++++++++++---------------------------
1 files changed, 250 insertions(+), 247 deletions(-)
diff --git a/src/pages/login/index.vue b/src/pages/login/index.vue
index e8db5f3..cd71dcf 100644
--- a/src/pages/login/index.vue
+++ b/src/pages/login/index.vue
@@ -1,281 +1,284 @@
<!-- 登录页 -->
<template>
- <view class="login-form-wrap">
- <image class="logo" :src="logoSvg" />
- <div class="title">掌控智飞</div>
- <div class="user-name">
- <image :src="usernameSvg" />
- <input v-model="loginForm.username" placeholder="请输入用户名" />
- </div>
- <div class="pass-word">
- <image :src="passwordSvg" />
- <input v-model="loginForm.password" type="password" placeholder="请输入密码" />
- </div>
- <div class="remember-password">
- <label>
- <checkbox-group @change="toggleRemember">
- <checkbox :checked="rememberPassword" color="#1D6FE9" style="transform:scale(0.7)" />
- </checkbox-group>
- 记住密码
- </label>
- </div>
+ <view class="login-form-wrap">
+ <image class="logo" :src="logoSvg" />
+ <div class="title">掌控智飞</div>
+ <div class="user-name">
+ <image :src="usernameSvg" />
+ <input v-model="loginForm.username" placeholder="请输入用户名" />
+ </div>
+ <div class="pass-word">
+ <image :src="passwordSvg" />
+ <input
+ v-model="loginForm.password"
+ type="password"
+ placeholder="请输入密码"
+ />
+ </div>
+ <div class="remember-password">
+ <label>
+ <checkbox-group @change="toggleRemember">
+ <checkbox
+ :checked="rememberPassword"
+ color="#1D6FE9"
+ style="transform: scale(0.7)"
+ />
+ </checkbox-group>
+ 记住密码
+ </label>
+ </div>
- <button class="login-btn" :style="[inputStyle]" @tap="submit">
- 登录
- </button>
-
- <image class="lowerRightCorner" :src="droneSvg" />
- </view>
+ <button class="login-btn" :style="[inputStyle]" @tap="submit">登录</button>
+ <image class="lowerRightCorner" :src="droneSvg" />
+ </view>
</template>
<script setup>
- import md5 from "js-md5";
- import {
- loginByUsername
- } from "@/api/user/index.js";
- import {
- useUserStore
- } from "@/store/index.js";
- import droneSvg from '@/static/images/login/droneSvg.svg'
- import usernameSvg from '@/static/images/login/username.svg'
- import passwordSvg from '@/static/images/login/password.svg'
- import logoSvg from '@/static/images/login/logo.svg'
- import {
- HOME_PATH,
- LOGIN_PATH,
- removeQueryString
- } from "@/router";
- import { onMounted } from 'vue';
+import { getAssetsImage } from "@/utils/index.js";
+import md5 from "js-md5";
+import { loginByUsername } from "@/api/user/index.js";
+import { useUserStore } from "@/store/index.js";
- const userStore = useUserStore();
- const loginForm = ref({
- username: "",
- password: "",
- });
- const rememberPassword = ref(false);
- const inputStyle = computed(() => {
- const style = {};
- if (loginForm.value.username && loginForm.value.password) {
- style.color = "#fff";
- style.backgroundColor = '#1D6FE9';
- }
- return style;
- });
- let redirect = HOME_PATH;
- function toggleRemember(e) {
- rememberPassword.value = e.detail.value.length > 0;
- }
+import { HOME_PATH, LOGIN_PATH, removeQueryString } from "@/router";
+import { onMounted } from "vue";
- async function submit() {
- if (!loginForm.value.username.trim()) {
- uni.showToast({
- title: "请输入用户名",
- icon: "none",
- duration: 2000
- });
- return;
- }
-
- if (!loginForm.value.password.trim()) {
- uni.showToast({
- title: "请输入密码",
- icon: "none",
- duration: 2000
- });
- return;
- }
- let userInfo = {
- tenantId: "000000",
- deptId: "",
- roleId: "",
- username: loginForm.value.username,
- password: loginForm.value.password,
- type: "account",
- code: "",
- key: "",
- };
+const droneSvg = getAssetsImage("/images/login/droneSvg.svg");
- if (rememberPassword.value) {
- uni.setStorageSync('rememberedUser', {
- username: loginForm.value.username,
- password: loginForm.value.password
- });
- } else {
- uni.removeStorageSync('rememberedUser');
- }
+const usernameSvg = getAssetsImage("/images/login/username.svg");
+const passwordSvg = getAssetsImage("/images/login/password.svg");
+const logoSvg = getAssetsImage("/images/login/logo.svg");
- try {
- const res = await loginByUsername(
- userInfo.tenantId,
- userInfo.deptId,
- userInfo.roleId,
- userInfo.username,
- md5(userInfo.password),
- userInfo.type,
- userInfo.key,
- userInfo.code
- );
- userStore.setUserInfo(res.data);
- uni.reLaunch({
- url: "/pages/map/index",
- });
- } catch (error) {
- const errorMsg =error.data?.error_description !=="Bad credentials" ? error.data?.error_description: "登录失败，请重试";
- uni.showToast({
- title: errorMsg,
- icon: "none",
- duration: 2000
- });
- }
- }
- // 从本地存储加载记住的密码
- onMounted(() => {
- const savedUserInfo = uni.getStorageSync('rememberedUser');
- console.log('记住密码',savedUserInfo)
- if (savedUserInfo) {
- loginForm.value.username = savedUserInfo.username;
- loginForm.value.password = savedUserInfo.password;
- rememberPassword.value = true;
- }
- });
- onLoad((options) => {
- if (options.redirect && removeQueryString(options.redirect) !== LOGIN_PATH) {
- redirect = decodeURIComponent(options.redirect);
- }
- });
+const userStore = useUserStore();
+const loginForm = ref({
+ username: "",
+ password: "",
+});
+const rememberPassword = ref(false);
+const inputStyle = computed(() => {
+ const style = {};
+ if (loginForm.value.username && loginForm.value.password) {
+ style.color = "#fff";
+ style.backgroundColor = "#1D6FE9";
+ }
+ return style;
+});
+let redirect = HOME_PATH;
+function toggleRemember(e) {
+ rememberPassword.value = e.detail.value.length > 0;
+}
+async function submit() {
+ if (!loginForm.value.username.trim()) {
+ uni.showToast({
+ title: "请输入用户名",
+ icon: "none",
+ duration: 2000,
+ });
+ return;
+ }
+
+ if (!loginForm.value.password.trim()) {
+ uni.showToast({
+ title: "请输入密码",
+ icon: "none",
+ duration: 2000,
+ });
+ return;
+ }
+ let userInfo = {
+ tenantId: "000000",
+ deptId: "",
+ roleId: "",
+ username: loginForm.value.username,
+ password: loginForm.value.password,
+ type: "account",
+ code: "",
+ key: "",
+ };
+
+ if (rememberPassword.value) {
+ uni.setStorageSync("rememberedUser", {
+ username: loginForm.value.username,
+ password: loginForm.value.password,
+ });
+ } else {
+ uni.removeStorageSync("rememberedUser");
+ }
+
+ try {
+ const res = await loginByUsername(
+ userInfo.tenantId,
+ userInfo.deptId,
+ userInfo.roleId,
+ userInfo.username,
+ md5(userInfo.password),
+ userInfo.type,
+ userInfo.key,
+ userInfo.code
+ );
+ userStore.setUserInfo(res.data);
+ uni.reLaunch({
+ url: "/pages/map/index",
+ });
+ } catch (error) {
+ const errorMsg =
+ error.data?.error_description !== "Bad credentials"
+ ? error.data?.error_description
+ : "登录失败，请重试";
+ uni.showToast({
+ title: errorMsg,
+ icon: "none",
+ duration: 2000,
+ });
+ }
+}
+// 从本地存储加载记住的密码
+onMounted(() => {
+ const savedUserInfo = uni.getStorageSync("rememberedUser");
+ console.log("记住密码", savedUserInfo);
+ if (savedUserInfo) {
+ loginForm.value.username = savedUserInfo.username;
+ loginForm.value.password = savedUserInfo.password;
+ rememberPassword.value = true;
+ }
+});
+onLoad((options) => {
+ if (options.redirect && removeQueryString(options.redirect) !== LOGIN_PATH) {
+ redirect = decodeURIComponent(options.redirect);
+ }
+});
</script>
<style lang="scss" scoped>
- .login-form-wrap {
- position: relative;
- text-align: center;
- height: 100%;
- width: 100%;
+.login-form-wrap {
+ position: relative;
+ text-align: center;
+ height: 100%;
+ width: 100%;
- .logo {
- width: 127px;
- height: 51px;
- margin: 0 auto;
- margin-top: 104px;
- margin-bottom: 16px;
- }
+ .logo {
+ width: 127px;
+ height: 51px;
+ margin: 0 auto;
+ margin-top: 104px;
+ margin-bottom: 16px;
+ }
- .lowerRightCorner {
- position: absolute;
- right: 0;
- bottom: 0;
- width: 425.61rpx;
- height: 316.46rpx;
- }
+ .lowerRightCorner {
+ position: absolute;
+ right: 0;
+ bottom: 0;
+ width: 425.61rpx;
+ height: 316.46rpx;
+ }
- .title {
- font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
- font-weight: 400;
- font-size: 84rpx;
- line-height: 82rpx;
- letter-spacing: 1px;
- text-shadow: 0px 8px 8px rgba(0, 0, 0, 0.18);
- text-align: center;
- font-style: normal;
- text-transform: none;
- color: #1452D3;
- text-align: center;
- margin-bottom: 168rpx;
- }
+ .title {
+ font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
+ font-weight: 400;
+ font-size: 84rpx;
+ line-height: 82rpx;
+ letter-spacing: 1px;
+ text-shadow: 0px 8px 8px rgba(0, 0, 0, 0.18);
+ text-align: center;
+ font-style: normal;
+ text-transform: none;
+ color: #1452d3;
+ text-align: center;
+ margin-bottom: 168rpx;
+ }
- .user-name,
- .pass-word {
- display: flex;
- //justify-content: center;
- align-items: center;
- margin-left: 62rpx;
- margin-right: 58rpx;
- height: 118rpx;
- border-bottom: 2rpx solid #E3E3E3;
+ .user-name,
+ .pass-word {
+ display: flex;
+ //justify-content: center;
+ align-items: center;
+ margin-left: 62rpx;
+ margin-right: 58rpx;
+ height: 118rpx;
+ border-bottom: 2rpx solid #e3e3e3;
- image {
- width: 40rpx;
- height: 40rpx;
- margin-right: 12rpx;
- }
+ image {
+ width: 40rpx;
+ height: 40rpx;
+ margin-right: 12rpx;
+ }
- :deep(uni-input) {
- height: 40rpx;
- line-height: 40rpx;
- width: 80%;
- margin-top: 20rpx;
- }
+ :deep(uni-input) {
+ height: 40rpx;
+ line-height: 40rpx;
+ width: 80%;
+ margin-top: 20rpx;
+ }
- :deep(.uni-input-placeholder) {
- font-size: 32rpx;
- color: #E3E3E3;
- font-weight: 500;
- }
- }
+ :deep(.uni-input-placeholder) {
+ font-size: 32rpx;
+ color: #e3e3e3;
+ font-weight: 500;
+ }
+ }
- .remember-password {
- display: flex;
- justify-content: flex-end;
- align-items: center;
- margin-left: 62rpx;
- margin-right: 58rpx;
- margin-top: 20rpx;
+ .remember-password {
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+ margin-left: 62rpx;
+ margin-right: 58rpx;
+ margin-top: 20rpx;
- color: #666;
- font-size: 28rpx;
+ color: #666;
+ font-size: 28rpx;
- label {
- display: flex;
- align-items: center;
- }
- }
+ label {
+ display: flex;
+ align-items: center;
+ }
+ }
- input {
- @apply pb-6rpx mb-10rpx text-left;
- }
+ input {
+ @apply pb-6rpx mb-10rpx text-left;
+ }
- .tips {
- @apply mt-8rpx mb-60rpx;
- color: $u-info;
- }
+ .tips {
+ @apply mt-8rpx mb-60rpx;
+ color: $u-info;
+ }
- .login-btn {
- z-index: 1;
- @apply flex items-center justify-center py-12rpx px-0 text-30rpx border-none;
- background: #1D6FE9;
- color: white;
- width: 590rpx;
- height: 76rpx;
- border-radius: 40rpx 40rpx 40rpx 40rpx;
- margin-top: 100rpx;
+ .login-btn {
+ z-index: 1;
+ @apply flex items-center justify-center py-12rpx px-0 text-30rpx border-none;
+ background: #1d6fe9;
+ color: white;
+ width: 590rpx;
+ height: 76rpx;
+ border-radius: 40rpx 40rpx 40rpx 40rpx;
+ margin-top: 100rpx;
- &::after {
- @apply border-none;
- }
- }
+ &::after {
+ @apply border-none;
+ }
+ }
- .alternative {
- @apply flex justify-between mt-30rpx;
- color: $u-tips-color;
- }
- }
+ .alternative {
+ @apply flex justify-between mt-30rpx;
+ color: $u-tips-color;
+ }
+}
- .login-type-wrap {
- @apply flex justify-between pt-350rpx px-150rpx pb-150rpx;
+.login-type-wrap {
+ @apply flex justify-between pt-350rpx px-150rpx pb-150rpx;
- .item {
- @apply flex items-center flex-col text-28rpx;
- color: $u-content-color;
- }
- }
+ .item {
+ @apply flex items-center flex-col text-28rpx;
+ color: $u-content-color;
+ }
+}
- .hint {
- @apply px-40rpx py-20rpx text-24rpx;
- color: $u-tips-color;
+.hint {
+ @apply px-40rpx py-20rpx text-24rpx;
+ color: $u-tips-color;
- .link {
- color: $u-warning;
- }
- }
+ .link {
+ color: $u-warning;
+ }
+}
</style>
--
Gitblit v1.9.3