feat(login): 登录功能

feat(App.vue): 登录校验

App.vue

@@ -1,7 +1,10 @@
 <script>
+  import { getUserInfo } from '@/utils/auth'
+	import $tab from '@/plugins/tab.js'
 	export default {
 		onLaunch: function() {
 			console.warn('当前组件仅支持 uni_modules 目录结构 ，请升级 HBuilderX 到 3.1.0 版本以上！')
+      this.initApp()
 			console.log('App Launch')
 		},
 		onShow: function() {
@@ -9,6 +12,20 @@
 		},
 		onHide: function() {
 			console.log('App Hide')
+		},
+		methods: {
+			  // 初始化应用
+			  initApp() {
+			    // 初始化应用配置
+			    // this.initConfig()
+			    // 检查用户登录状态
+			    this.checkLogin()
+			  },
+      checkLogin() {
+        if (!getUserInfo()) {
+          $tab.reLaunch('/pages/login') 
+        }
+      }
 		}
 	}
 </script>

api/login.js

@@ -0,0 +1,13 @@
+import request from '@/utils/request.js'
+
+export function login(username, password) {
+	return request({
+		'data': {
+			'serviceId': 'eu_2013V01login',
+			'params': {
+        "userName": username,
+        "password": password
+			}
+		}
+	})
+}

pages.json

@@ -1,6 +1,5 @@
 {
 	"pages": [
-		
 		{
 			"path": "pages/message/index",
 			"style": {
@@ -149,7 +148,7 @@
 			"path" : "pages/login",
 			"style" : 
 			{
-				"navigationBarTitleText" : "",
+				"navigationBarTitleText" : "登录",
 				"enablePullDownRefresh" : false
 			}
 		}

pages/contacts/index.vue

@@ -27,7 +27,7 @@
 					<view class="chat_list">
 						<uni-list :border="true">
 							<uni-list-chat v-for="(item, index) in items" @click="clickChat(item)" :title="item.name"
-								:avatar="item.avatar" :note="item.desktop_phone" :clickable="true" :avatar-circle="true" :key="index">
+								:avatar="item.avatar || headImg" :note="item.desktop_phone" :clickable="true" :avatar-circle="true" :key="index">
 								<view class="chat-custom-right">
 									<text class="chat-custom-text" v-text="item.dept"></text>
 								</view>
@@ -47,6 +47,7 @@
 	import { getContactAllUser } from '@/api/contacts.js'
 	onMounted(() => {
 		const unitId = '47517153919893'
+		// 获取 通讯录 索引列表
 		getContactAllUser(unitId).then(res => {
 			getContactList(res.returnParams)
 		})
@@ -55,7 +56,7 @@
 	const indexList = ref([])
 	const itemArr = ref([])
 	function getContactList(data) {
-		console.log('data', data);
+		// console.log('data', data);
 		
 		for(let key in data) {
 			// hasOwnProperty 排除 __proto__等数据
@@ -67,7 +68,6 @@
 			}
 			// 删除 过滤后 数据为0的 索引 
 			if (data[key].length === 0) delete data[key]
-			
 		}
 		// 获取索引
 		indexList.value = Object.keys(data)

pages/login.vue

@@ -1,13 +1,119 @@
 <template>
-	<view>
-		
+	<view class="normal-login-container">
+		<view class="logo-content align-center justify-center flex">
+			<image style="width: 100rpx;height: 100rpx;"
+				src="https://50006360.s21i.huaweicloudsite.cn/4/ABUIABAEGAAg6PTOtwYohbu8vAIw8AM4gAI.png" mode="widthFix">
+			</image>
+			<text class="title">OA移动端登录</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" />
+			</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" />
+			</view>
+			<view class="action-btn">
+				<button @click="handleLogin" class="login-btn cu-btn block bg-blue lg round">登录</button>
+			</view>
+		</view>
 	</view>
 </template>
 
 <script setup lang="ts">
-import {ref} from 'vue'
+	import { onMounted, ref } from 'vue'
+	import { useUserStore } from '@/store/user.js'
+	import { onLoad } from '@dcloudio/uni-app'
+	import $modal from '@/plugins/modal.js'
+	import $tab from '@/plugins/tab.js'
+	const toPath = ref('')
+	onLoad((option) => {
+		toPath.value = option.url || '/pages/message/index'
+	})
+	const userStore = useUserStore()
+	const loginForm = ref({
+		username: '',
+		password: ''
+	})
+	onMounted(() => {
+	})
+	function handleLogin() {
+		const username = loginForm.value.username
+		const password = loginForm.value.password
+		if (username === "") {
+			$modal.msgError("请输入您的账号")
+		} else if (password === "") {
+			$modal.msgError("请输入您的密码")
+		} else {
+			$modal.loading("登录中，请耐心等待...")
+			userStore.Login(loginForm.value).then(() => {
+				$modal.closeLoading()
+				loginSuccess()
+			})
+		}
+	}
+	function loginSuccess() {
+		$tab.reLaunch(toPath.value)
+	}
 </script>
 
 <style lang="scss">
+	page {
+		background-color: #ffffff;
+	}
 
-</style>
+	.normal-login-container {
+		width: 100%;
+
+		.logo-content {
+			width: 100%;
+			font-size: 21px;
+			text-align: center;
+			padding-top: 15%;
+
+			image {
+				border-radius: 4px;
+			}
+
+			.title {
+				margin-left: 10px;
+			}
+		}
+
+		.login-form-content {
+			text-align: center;
+			margin: 20px auto;
+			margin-top: 15%;
+			width: 80%;
+
+			.input-item {
+				margin: 20px auto;
+				background-color: #f5f6f7;
+				height: 45px;
+				border-radius: 20px;
+
+				.icon {
+					font-size: 38rpx;
+					margin-left: 10px;
+					color: #999;
+				}
+
+				.input {
+					width: 100%;
+					font-size: 14px;
+					line-height: 20px;
+					text-align: left;
+					padding-left: 15px;
+				}
+
+			}
+
+			.login-btn {
+				margin-top: 40px;
+				height: 45px;
+			}
+		}
+	}
+</style>

pages/message/index.vue

@@ -100,6 +100,9 @@
 	import { onMounted, reactive, ref } from 'vue';
 	import $tab from '@/plugins/tab.js';
 	import processList from '@/components/ygoa/processList.vue'
+	onMounted(() => {
+		onClickItem({ currentIndex: 0 })
+	})
 	function changeIndexGrid(e) {
 
 	}
@@ -152,9 +155,7 @@
 			step: 0
 		},
 	])
-	onMounted(() => {
-		onClickItem({ currentIndex: 0 })
-	})
+	
 	// 点击消息分段器
 	function onClickItem({ currentIndex }) {
 		current.value = currentIndex

pages/work/diary/edit.vue

@@ -67,14 +67,19 @@
 </template>
 
 <script setup lang="ts">
-	import { ref } from 'vue'
+	import { onMounted, ref } from 'vue'
 	import { onLoad } from '@dcloudio/uni-app'
+	import { useUserStore } from '@/store/user.js'
 	const date = ref('')
 
 	const TODO = ref('')
 	const DONE = ref('')
 	const BUG = ref('')
 	const remark = ref('')
+	const userStore = useUserStore()
+	onMounted(() => {
+		console.log('diaryOnMounted', userStore.user);
+	})
 	onLoad((option) => {
 		if (isNaN(Number(option.day))) {
 			date.value = "11/12 周" + option.day

pages/work/index.vue

@@ -125,6 +125,8 @@
 	import { ref } from "vue"
 	// import $modal from "@/plugins/modal.js"
 	import $tab from "@/plugins/tab.js"
+	import { getUserInfo } from '@/utils/auth'
+	import { useUserStore } from '@/store/user.js'
 	function changeProcessGrid(e) { // 点击流程宫格
 		console.log('changeProcessGrid', e);
 		// 跳转流程申请页面
@@ -173,14 +175,20 @@
 	function closeClearCachePopup() { // 关闭清除缓存弹出层
 		clearCacheDialog.value.close()
 	}
+	const userStore = useUserStore()
 	function clearCache() {
-      uni.clearStorageSync();
-      // 提示用户缓存清理成功
-      uni.showToast({
-        title: '缓存清理成功',
-        icon: 'success',
-        duration: 2000
-      });
+		const userInfo = getUserInfo()
+		uni.clearStorageSync();
+		console.log('userStore.user', userStore.user.value);
+		console.log('userInfo', userInfo);
+		uni.setStorageSync('userInfo', userInfo)
+		console.log('userInfo', userStore.user.value);
+		// 提示用户缓存清理成功
+		uni.showToast({
+			title: '缓存清理成功',
+			icon: 'success',
+			duration: 2000
+		});
 	}
 </script>
 

store/user.js

@@ -0,0 +1,31 @@
+// store/user.js
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+import { login } from '@/api/login.js'
+import { getUserInfo } from '@/utils/auth'
+
+export const useUserStore = defineStore('user', () => {
+	const user = ref({})
+	user.value = getUserInfo()
+	// 登录方法
+	function Login(userInfo) {
+		const username = userInfo.username.trim()
+		const password = userInfo.password
+		return new Promise((resolve, reject) => {
+			login(username.trim(), password)
+				.then(res => {
+					uni.setStorageSync('userInfo', res.returnParams)
+					user.value = res.returnParams
+					console.log('user', user.value)
+					// 可以在这里设置 token 或用户信息
+					// setToken(res.token)
+					resolve(res)
+				})
+				.catch(error => {
+					reject(error)
+				})
+		})
+	}
+
+	return { user, Login }
+})

utils/auth.js

@@ -4,6 +4,10 @@ export function getToken() {
   return uni.getStorageSync(TokenKey)
 }
 
+export function getUserInfo() {
+  return uni.getStorageSync('userInfo')
+}
+
 export function setToken(token) {
   return uni.setStorageSync(TokenKey, token)
 }