From 6abe22fc75b115d2a68103a4d8b24d0815a016f8 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期三, 06 八月 2025 17:37:35 +0800
Subject: [PATCH] 登录页联调开发，首页开发
---
src/pages/login.vue | 244 ++++++++++++++++++++++++++++++------------------
1 files changed, 150 insertions(+), 94 deletions(-)
diff --git a/src/pages/login.vue b/src/pages/login.vue
index 620bdaa..a2e0d33 100644
--- a/src/pages/login.vue
+++ b/src/pages/login.vue
@@ -1,59 +1,94 @@
<template>
<view class="normal-login-container">
- <view class="logo-content align-center justify-center flex">
- <image style="width: 100rpx;height: 100rpx;" :src="globalConfig.appInfo.logo" mode="widthFix">
- </image>
- <text class="title">鑻ヤ緷绉诲姩绔櫥褰�</text>
+ <view class="logo-content">
+<!-- <image style="width: 100rpx;height: 100rpx;" :src="globalConfig.appInfo.logo" mode="widthFix">-->
+<!-- </image>-->
+ <text>璐﹀彿瀵嗙爜鐧诲綍</text>
</view>
<view class="login-form-content">
<view class="input-item flex align-center">
- <view class="iconfont icon-user icon"></view>
- <input v-model="loginForm.username" class="input" type="text" placeholder="璇疯緭鍏ヨ处鍙�" maxlength="30" />
+ <up-input prefixIcon="account" placeholder="璇疯緭鍏ヨ处鍙�" border="bottom"
+ @blur="getUserLoginFacotryList"
+ maxlength="30" v-model="loginForm.username" clearable></up-input>
</view>
<view class="input-item flex align-center">
- <view class="iconfont icon-password icon"></view>
- <input v-model="loginForm.password" type="password" class="input" placeholder="璇疯緭鍏ュ瘑鐮�" maxlength="20" />
+ <up-input prefixIcon="lock" placeholder="璇疯緭鍏ュ瘑鐮�" border="bottom" maxlength="20" v-model="loginForm.password" clearable type="password"></up-input>
</view>
- <view class="input-item flex align-center" style="width: 60%;margin: 0px;" v-if="captchaEnabled">
- <view class="iconfont icon-code icon"></view>
- <input v-model="loginForm.code" type="number" class="input" placeholder="璇疯緭鍏ラ獙璇佺爜" maxlength="4" />
- <view class="login-code">
- <image :src="codeUrl" @click="getCode" class="login-code-img"></image>
- </view>
- </view>
- <view class="action-btn">
+ <view class="input-item flex align-center select-container">
+ <up-icon name="tags" size="18"></up-icon>
+ <up-picker-data
+ v-model="loginForm.factoryId"
+ title="璇烽�夋嫨鍏徃"
+ :options="factoryList"
+ valueKey="id"
+ labelKey="name">
+ </up-picker-data>
+ </view>
+ <view>
<button @click="handleLogin" class="login-btn cu-btn block bg-blue lg round">鐧诲綍</button>
</view>
</view>
-
- <view class="xieyi text-center">
- <text class="text-grey1">鐧诲綍鍗充唬琛ㄥ悓鎰�</text>
- <text @click="handleUserAgrement" class="text-blue">銆婄敤鎴峰崗璁��</text>
- <text @click="handlePrivacy" class="text-blue">銆婇殣绉佸崗璁��</text>
- </view>
+ <!-- 璁颁綇瀵嗙爜閫夐」 -->
+ <view class="remember-password">
+ <up-checkbox
+ :customStyle="{marginBottom: '8px'}"
+ label="璁颁綇瀵嗙爜"
+ name="agree"
+ usedAlone
+ v-model:checked="rememberPassword"
+ >
+ </up-checkbox>
+ </view>
</view>
</template>
<script setup>
import modal from '@/plugins/modal'
-import { getCodeImg } from '@/api/login'
-import { ref } from "vue";
-import config from '@/config.js'
+import { userLoginFacotryList} from '@/api/login'
+import { ref, onMounted } from "vue";
import useUserStore from '@/store/modules/user'
import { getWxCode } from '@/utils/geek';
import { wxLogin } from '@/api/oauth';
import { setToken } from '@/utils/auth';
const userStore = useUserStore()
-const codeUrl = ref("");
-const captchaEnabled = ref(true); // 鏄惁寮�鍚獙璇佺爜
const useWxLogin = ref(false); // 鏄惁浣跨敤寰俊鐧诲綍
-const globalConfig = ref(config);
+const rememberPassword = ref(false); // 璁颁綇瀵嗙爜
const loginForm = ref({
- username: "admin",
- password: "admin123",
- code: "",
- uuid: ''
+ username: "",
+ password: "",
+ factoryId: "",
+ currentFatoryName: "",
});
+const factoryList = ref([]) // 鍏徃鍒楄〃
+
+// 淇濆瓨瀵嗙爜鍒版湰鍦板瓨鍌�
+function savePassword() {
+ if (rememberPassword.value) {
+ uni.setStorageSync('remembered_username', loginForm.value.username);
+ uni.setStorageSync('remembered_password', loginForm.value.password);
+ uni.setStorageSync('remember_password', true);
+ } else {
+ uni.removeStorageSync('remembered_username');
+ uni.removeStorageSync('remembered_password');
+ uni.setStorageSync('remember_password', false);
+ }
+}
+
+// 浠庢湰鍦板瓨鍌ㄥ姞杞藉瘑鐮�
+function loadPassword() {
+ const remembered = uni.getStorageSync('remember_password');
+ if (remembered) {
+ rememberPassword.value = true;
+ const savedUsername = uni.getStorageSync('remembered_username');
+ const savedPassword = uni.getStorageSync('remembered_password');
+ if (savedUsername) {
+ loginForm.value.username = savedUsername;
+ }
+ if (savedPassword) {
+ loginForm.value.password = savedPassword;
+ }
+ }
+}
if (useWxLogin.value) {
getWxCode().then(res => {
@@ -67,25 +102,36 @@
})
}
-
-// 鑾峰彇鍥惧舰楠岃瘉鐮�
-function getCode() {
- getCodeImg().then(res => {
- captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled
- if (captchaEnabled.value) {
- codeUrl.value = 'data:image/gif;base64,' + res.img
- loginForm.value.uuid = res.uuid
- }
- })
-};
+function getUserLoginFacotryList() {
+ if(loginForm.value.username){
+ userLoginFacotryList({userName:loginForm.value.username}).then(res => {
+ // 妫�鏌es.data鏄惁涓烘暟缁�
+ if (res.data && Array.isArray(res.data)) {
+ // 閲嶆柊缁勮鏁版嵁鏍煎紡锛歞eptId鍙樻垚id锛宒eptName鍙樻垚name
+ factoryList.value = res.data.map(item => ({
+ id: item.deptId,
+ name: item.deptName
+ }))
+ } else {
+ // 濡傛灉res.data涓嶆槸鏁扮粍锛岃缃负绌烘暟缁�
+ factoryList.value = []
+ }
+ }).catch(error => {
+ modal.msgError('鑾峰彇鍏徃鍒楄〃澶辫触:', error)
+ factoryList.value = []
+ })
+ }else {
+ factoryList.value = []
+ }
+}
async function handleLogin() {
if (loginForm.value.username === "") {
modal.msgError("璇疯緭鍏ユ偍鐨勮处鍙�")
} else if (loginForm.value.password === "") {
modal.msgError("璇疯緭鍏ユ偍鐨勫瘑鐮�")
- } else if (loginForm.value.code === "" && captchaEnabled.value) {
- modal.msgError("璇疯緭鍏ラ獙璇佺爜")
+ } else if (loginForm.value.factoryId === "") {
+ modal.msgError("璇烽�夋嫨鍏徃")
} else {
modal.loading("鐧诲綍涓紝璇疯�愬績绛夊緟...")
pwdLogin()
@@ -93,14 +139,13 @@
};
// 瀵嗙爜鐧诲綍
async function pwdLogin() {
- userStore.login(loginForm.value).then(() => {
+ userStore.loginCheckFactory(loginForm.value).then(() => {
modal.closeLoading()
+ // 鐧诲綍鎴愬姛鍚庝繚瀛樺瘑鐮�
+ savePassword();
loginSuccess()
}).catch(() => {
- if (captchaEnabled.value) {
- modal.closeLoading()
- getCode()
- }
+ modal.closeLoading()
})
};
@@ -112,23 +157,11 @@
});
})
}
-
-// 闅愮鍗忚
-function handlePrivacy() {
- let site = globalConfig.value.appInfo.agreements[0];
- uni.navigateTo({
- url: `/pages/common/webview/index?title=${site.title}&url=${site.url}`
- });
-};
-// 鐢ㄦ埛鍗忚
-function handleUserAgrement() {
- let site = globalConfig.value.appInfo.agreements[1]
- uni.navigateTo({
- url: `/pages/common/webview/index?title=${site.title}&url=${site.url}`
- });
-};
-
-getCode();
+// 椤甸潰鍔犺浇鏃舵鏌ユ槸鍚︽湁淇濆瓨鐨勫瘑鐮�
+onMounted(() => {
+ loadPassword();
+ getUserLoginFacotryList()
+});
</script>
<style lang="scss">
@@ -141,9 +174,10 @@
.logo-content {
width: 100%;
- font-size: 21px;
- text-align: center;
- padding-top: 15%;
+ font-weight: 400;
+ font-size: 30px;
+ color: #333333;
+ margin: 80px 0 0 30px;
image {
border-radius: 4px;
@@ -153,38 +187,60 @@
margin-left: 10px;
}
}
+ .u-checkbox {
+ margin-left: 34px;
+ }
.login-form-content {
text-align: center;
- margin: 20px auto;
- margin-top: 15%;
- width: 80%;
+ margin: 58px auto;
+ padding: 0 30px;
- .input-item {
- margin: 20px auto;
- background-color: #f5f6f7;
- height: 45px;
- border-radius: 20px;
+ .input-item {
+ margin: 30px auto;
+ height: 45px;
- .icon {
- font-size: 38rpx;
- margin-left: 10px;
- color: #999;
- }
+ .icon {
+ font-size: 38rpx;
+ margin-left: 10px;
+ color: #999;
+ }
- .input {
- width: 100%;
- font-size: 14px;
- line-height: 20px;
- text-align: left;
- padding-left: 15px;
- }
-
- }
+ .input {
+ width: 100%;
+ font-size: 14px;
+ line-height: 20px;
+ text-align: left;
+ padding-left: 15px;
+ }
+ }
+ .select-container {
+ flex: 1;
+ border-bottom: 1px solid #e5e5e5;
+ padding: 6px 9px;
+
+ :deep(.up-select) {
+ border: none;
+ background: transparent;
+
+ .up-select__label {
+ font-size: 14px;
+ color: #333;
+ }
+
+ .up-select__value {
+ font-size: 14px;
+ color: #333;
+ }
+ }
+ }
.login-btn {
- margin-top: 40px;
- height: 45px;
+ margin-top: 60px;
+ height: 50px;
+ background: linear-gradient( 140deg, #00BAFF 0%, #006CFB 100%);
+ box-shadow: 0px 4px 10px 0px rgba(3,88,185,0.2);
+ border-radius: 40px 40px 40px 40px;
}
.xieyi {
--
Gitblit v1.9.3