1.优化页面效果,如导航栏吸顶等

2.调整未登录/登录过期的处理逻辑
3.新增个贷待办列表查询

src/api/major.js

@@ -0,0 +1,6 @@
+import request from '@/utils/request'
+
+// 获取大中型待办任务
+export function getMajorTodoList(params) {
+    return request.get('workTaskRecord/major/todo', {params: params})
+}

src/api/personal.js

@@ -0,0 +1,6 @@
+import request from '@/utils/request'
+
+// 获取个贷待办任务
+export function getPersonalTodoList(params) {
+    return request.get('workTaskRecord/personal/todo', {params: params})
+}

src/components/NavBar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="navbar">
+  <div class="navbar" :class="navBarFixed == true ? 'navbarFixed' :'navbarRelative'">
     <div class="titleDiv">
       <img class="logclass" src="@/assets/images/logo.png" />
     </div>
@@ -28,18 +28,20 @@
 import { mapStores } from 'pinia';
 import { useUserStore } from '@/stores/useUserStore';
 import { removeToken } from '@/utils/auth';
-import { tabStore } from '@/stores/tabStore';
 
 export default {
   props: {},
   data() {
     return {
-      
+      navBarFixed: false,
     };
   },
+  mounted() {
+    // 监听屏幕滚动
+    window.addEventListener('scroll', this.watchScroll);
+  },
   computed: {
     ...mapStores(useUserStore),
-    ...mapStores(tabStore),
   },
   methods: {
     async logout() {
@@ -47,22 +49,40 @@ export default {
       removeToken();
       // 移除用户信息缓存
       this.userStore.removeUserInfo();
-      // 移除激活页面缓存
-      this.tabStore.removeTabInfo();
       this.$router.push('/index/login');
     },
+    watchScroll() {
+      // 当滚动超过 120px 时，实现吸顶效果(滚动条高度当前设置为：120px)
+      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
+      if (scrollTop > 120) {
+        this.navBarFixed = true;
+      } else {
+        this.navBarFixed = false;
+      }
+    },
   },
 };
 </script>
 
 <style scoped>
-.navbar {
+.navbarRelative {
+  width: 100%;
   height: 60px;
   position: relative;
   background-color: #ffffff;
   border-bottom: 1px #d7d7d7 solid;
 }
 
+.navbarFixed {
+  width: 100%;
+  height: 60px;
+  background-color: #ffffff;
+  border-bottom: 1px #d7d7d7 solid;
+  position: fixed;
+  top: 0;
+  z-index: 999;
+}
+
 .logclass {
   float: left;
   height: 40px;

src/utils/request.js

@@ -40,13 +40,11 @@ service.interceptors.response.use(
         showNotify(
           {
             type: 'danger',
-            message: res.msg,
-            onClose: () => {
-              // 关闭回调, 跳转到登录
-              $router.push('/index/login');
-            },
+            message: res.msg
           }
         );
+        $router.push('/index/login');
+        removeToken();
       } else {
         showNotify(
           {

src/views/home/todo.vue

@@ -1,7 +1,31 @@
 <template>
   <van-tabs v-model:active="activeName">
     <van-tab title="个贷待办" name="personal">
-      <h1>个贷待办</h1>
+      <van-search v-model="personalListQuery.keyword" placeholder="请输入搜索关键词" @search="onPersonalSearch()" />
+      <van-pull-refresh v-model="loading" @refresh="onPersonalRefresh()">
+        <van-list v-model:loading="loading" :finished="finished" finished-text="没有待办了" @load="personalTodoList()">
+          <div class="card" v-for="item in personalListData" :key="item.id">
+            <h3>
+              <van-icon name="link-o" />
+              &nbsp;{{ item.orderId }}
+            </h3>
+            <p class="projectName">
+              <van-icon name="location-o" />
+              &nbsp;{{ item.location }}
+            </p>
+            <p>
+              <van-icon name="contact-o" />
+              &nbsp;{{ item.clientName }}-{{ item.clientSubName}}
+            </p>
+            <p>
+              <van-tag type="primary" size="medium">{{ item.nodeName }}</van-tag>&nbsp;
+              <van-tag type="success" size="medium">{{ item.clientManager }}</van-tag>&nbsp;
+              <van-tag color="#969799" size="medium">{{ item.created }}</van-tag>
+            </p>
+          </div>
+        </van-list>
+      </van-pull-refresh>
+      <van-back-top right="10vw" bottom="10vh" />
     </van-tab>
     <van-tab title="大中型待办" name="major">
       <h1>大中型待办</h1>
@@ -13,14 +37,78 @@
 </template>
 
 <script>
-export default { 
+import { getPersonalTodoList } from '@/api/personal';
+
+export default {
   data() {
     return {
       activeName: 'personal',
+      personalListData: [],
+      // 加载状态
+      loading: false,
+      // 加载完成状态
+      finished: false,
+      personalListQuery: {
+        // 当前页数
+        current: 1,
+        // 查询关键字
+        keyword: null,
+      },
     };
   },
+  created() {
+    this.personalTodoList();
+  },
+  methods: {
+    // 个贷待办列表刷新
+    onPersonalRefresh() {
+      this.personalListQuery.current = 1;
+      this.finished = false;
+      this.personalListData = [];
+      this.personalTodoList();
+    },
+    // 个贷待办列表关键字搜索
+    onPersonalSearch() {
+      this.personalListQuery.current = 1;
+      this.finished = false;
+      this.personalListData = [];
+      this.personalTodoList();
+    },
+    // 获取个贷待办
+    personalTodoList() {
+      this.loading = true;
+      getPersonalTodoList(this.personalListQuery).then((res) => {
+        if (res.code == 200) {
+          if (res.data.records) {
+            this.personalListData = this.personalListData.concat(res.data.records);
+          }
+          // 判断是否还有下一页
+          if (res.data.pages > this.personalListQuery.current) { // 服务端返回的总页数大于当前页数, 将当前页数+1
+            this.personalListQuery.current++;
+          }else { // 反之停止加载
+            this.finished = true; 
+          }
+        }
+        this.loading = false;
+      });
+    },
+  },
 };
 </script>
 
 <style scoped>
+.card {
+  background-color: white;
+  border-radius: 12px;
+  box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.1);
+  padding: 16px;
+  margin: 10px;
+}
+
+.projectName {
+  width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
 </style>

src/views/login/index.vue

@@ -12,12 +12,17 @@
       </div>
       <button class="submit-btn" @click.prevent="handleLogin()">进入</button>
     </el-form>
+    <div class="footer">
+      <span>version: 0.0.0</span>
+    </div>
   </div>
 </template>
 
 <script>
+import { mapStores } from 'pinia';
 import { login } from '@/api/user';
 import { setToken, getToken } from '@/utils/auth';
+import { tabStore } from '@/stores/tabStore';
 
 export default {
   name: 'Login',
@@ -68,7 +73,9 @@ export default {
       sysCfg: {},
     };
   },
-
+  computed: {
+    ...mapStores(tabStore),
+  },
   created() {
     const that = this;
     let tok = new RegExp('(^|&)token=([^&]*)(&|$)', 'i');
@@ -94,6 +101,8 @@ export default {
           login(this.loginForm).then((res) => {
             if (res.code === 200) {
               setToken(res.data.token);
+              // 移除激活页面缓存
+              this.tabStore.removeTabInfo();
               // 登录成功,重新跳转到主页
               this.$router.push(`/index`);
             }
@@ -103,7 +112,7 @@ export default {
           return false;
         }
       });
-    }
+    },
   },
 };
 </script>
@@ -162,7 +171,7 @@ export default {
   background: transparent;
 }
 .input:focus {
-  border: 1.5px solid #1989FA;
+  border: 1.5px solid #1989fa;
 }
 .input-field .label {
   position: absolute;
@@ -178,7 +187,7 @@ export default {
   top: 5px;
   left: 5px;
   font-size: 16px;
-  color: #1989FA;
+  color: #1989fa;
   background-color: #ffffff;
   padding-left: 5px;
   padding-right: 5px;
@@ -202,4 +211,14 @@ export default {
 .submit-btn:hover {
   box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 4px #0000003a;
 }
+
+.footer {
+  width: 100%;
+  position: fixed;
+  bottom: 0;
+  font-size: 15px;
+  vertical-align: middle;
+  padding-left: 5px;
+  color: #000000;
+}
 </style>