From 9120d541a00b389198d2ba2b02de3ee5b2b7bace Mon Sep 17 00:00:00 2001
From: wally <18603454788@163.com>
Date: Mon, 10 Jan 2022 13:11:05 +0800
Subject: [PATCH] =?UTF-8?q?fix(app.vue):=20=E4=BF=AE=E5=A4=8D=E8=8E=B7?=
 =?UTF-8?q?=E5=8F=96token=E6=8A=A5=E9=94=99=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 App.vue                        |  80 +++++++---
 CHANGELOG.md                   |   2 +
 components/Globals/Globals.vue |  11 +-
 hooks/user/useGetToken.js      |   1 +
 pages/index/index.vue          | 268 ++++++++++++++++-----------------
 5 files changed, 199 insertions(+), 163 deletions(-)

diff --git a/App.vue b/App.vue
index 67a49b9..3cffe57 100644
--- a/App.vue
+++ b/App.vue
@@ -1,14 +1,11 @@
 <script>
-import useGetToken from "@/hooks/user/useGetToken";
-
 export default {
   async onLaunch(options) {
     console.log('onLaunch options: ', options);
     this.checkNetwork(); // 监听网络状态
     this.getSystemInfo(); // 获取系统设备信息、
-    this.syncLocalDataToStore(options.query.u); // 将localStorage里的数据同步到store里
-
-    const token = await useGetToken();
+    await this.syncLocalDataToStore(options.query.u); // 将localStorage里的数据同步到store里
+    const token = await this.getToken();
     if (!token) {
       this.$ui.showToast('获取用户信息失败, 请登录');
       // TODO: 跳转登录界面
@@ -19,29 +16,65 @@ export default {
   },
 
   methods: {
+    async getToken() {
+      const { token } = this.$store.state.user;
+      const tokenIsAvailable = this.$store.getters['user/tokenIsAvailable'];
+      const userId = this.$store.getters['user/userId'];
+      if (token && tokenIsAvailable) {
+        // 1.1 store里有token 且没过期直接：使用store的token
+        return token;
+      } else {
+        // 2. 根据userId获取token
+        if (userId) {
+          try {
+            const { token } = await this.$store.dispatch('user/getTokenByUserId', userId);
+            return token;
+          } catch (error) {
+            console.error('error: ', error);
+            return null;
+          }
+        } else {
+          return null;
+        }
+      }
+    },
+
     /**
      * 将localStorage里的数据同步到store里
      * user, token, tokenExpiredTime
      */
     syncLocalDataToStore(urlUserId) {
-      const localUser = uni.$storage.getStorageSync('user');
-      const localToken = uni.$storage.getStorageSync('anyringToken');
-      const tokenExpiredTime = uni.$storage.getStorageSync('tokenExpiredTime');
-      if (!this.$store.state.user.user && localUser) {
-        // 同步user信息
-        const user = JSON.parse(localUser);
-        if (!urlUserId || user.id === urlUserId) {
-          this.$store.commit('user/setUser', user);
-        } else {
-          this.$store.commit('user/setUser', { id: urlUserId });
+      return new Promise((resolve, reject) => {
+        try {
+          const localUser = uni.$storage.getStorageSync('user');
+          const localToken = uni.$storage.getStorageSync('anyringToken');
+          const tokenExpiredTime = uni.$storage.getStorageSync('tokenExpiredTime');
+          if (!this.$store.state.user.user) {
+            if (localUser) {
+              // 同步user信息
+              const user = JSON.parse(localUser);
+              if (!urlUserId || user.id === urlUserId) {
+                this.$store.commit('user/setUser', user);
+              } else {
+                this.$store.commit('user/setUser', { id: urlUserId });
+              }
+            } else {
+              this.$store.commit('user/setUser', { id: urlUserId });
+            }
+          }
+
+          if (this.$store.state.user.token && localToken) { // 同步token
+            this.$store.commit('user/setToken', localToken);
+          }
+          if (this.$store.state.user.tokenExpiredTime && tokenExpiredTime) { // 同步tokenExpiredTime
+            this.$store.commit('user/setTokenExpiredTime', +tokenExpiredTime);
+          }
+          resolve();
+        } catch (error) {
+          reject(error);
         }
-      }
-      if (this.$store.state.user.token && localToken) { // 同步token
-        this.$store.commit('user/setToken', localToken);
-      }
-      if (this.$store.state.user.tokenExpiredTime && tokenExpiredTime) { // 同步tokenExpiredTime
-        this.$store.commit('user/setTokenExpiredTime', +tokenExpiredTime);
-      }
+
+      })
     },
 
     // 检查网络状态 设置store里的网络状态变量
@@ -93,7 +126,8 @@ export default {
      */
     async noPhone(phone) {
       if (!phone) {
-        uni.navigateTo({ title: '/pages/phone-bind/phone-bind' });
+        // TODO:
+        // uni.navigateTo({ url: '/pages/phone-bind/phone-bind' });
       }
     },
   },
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 99402d4..3ad8fec 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,6 +12,7 @@
  - | 时间轴接口 | [a95d005](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/a95d005)
  - | 时间轴页面 | [e926b75](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/e926b75)
  - | 更新代码 | [392c8cc](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/392c8cc)
+ - | 添加 timeline | [72dad2b](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/72dad2b)
  - | 项目列表 | [a52e6d5](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/a52e6d5)
  - | 项目操作面板 | [3beb05e](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/3beb05e)
 
@@ -20,6 +21,7 @@
 范围|描述|commitId
 --|--|--
  - | calender格式及细节调整 | [db9602b](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/db9602b)
+ - | 细节调整 | [bdd5f87](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/bdd5f87)
 
 
 ### 🔨 代码重构
diff --git a/components/Globals/Globals.vue b/components/Globals/Globals.vue
index 8209e84..5edde58 100644
--- a/components/Globals/Globals.vue
+++ b/components/Globals/Globals.vue
@@ -8,7 +8,7 @@
       border-radius="25"
       margin="0"
     >
-      <view slot="body">
+      <template v-slot:body>
         <scroll-view :scrollY="true" :style="{ 'max-height': globalsHeight - 30 + 'px' }">
           <skeleton :banner="false" :loading="!globals.length" :row="4" animate class="u-line-2 skeleton"></skeleton>
           <view class="grid gap-2">
@@ -32,7 +32,7 @@
             </block>
           </view>
         </scroll-view>
-      </view>
+      </template>
     </u-card>
   </view>
 </template>
@@ -41,11 +41,12 @@
 import { computed } from 'vue';
 import { useStore } from 'vuex';
 
+const sysHeight = uni.getSystemInfoSync().screenHeight; // 屏幕的高度
+const globalsHeight = Math.floor(((sysHeight - 44 - 30 - 10) / 5) * 4); // 全局任务的最大高度
 const store = useStore();
-const isShrink = computed(() => store.state.task.isShrink);
-const sysHeight = uni.getSystemInfoSync().screenHeight;
+const isShrink = computed(() => store.state.task.isShrink); // 全局任务是否收缩
 const globals = computed(() => store.getters['task/globals']);
-const globalsHeight = computed(() => [((sysHeight.value - 44 - 30 - 10) / 5) * 4]);
+console.log('globals: ', globals.value);
 
 // 手动展开日常任务
 function openCard() {
diff --git a/hooks/user/useGetToken.js b/hooks/user/useGetToken.js
index 03b4ae3..fd20a36 100644
--- a/hooks/user/useGetToken.js
+++ b/hooks/user/useGetToken.js
@@ -16,6 +16,7 @@ export default async function useGetToken() {
   const token = computed(() => store.state.user.token);
   const tokenIsAvailable = computed(() => store.getters['user/tokenIsAvailable']); // token是否可用
   const userId = computed(() => store.getters['user/userId']);
+  debugger;
   if (token.value && tokenIsAvailable.value) {
     // 1.1 store里有token 且没过期直接：使用store的token
     return token.value;
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 251fee9..fa6b46f 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -1,137 +1,135 @@
-<template>
-	<!-- <view class="flex flex-col h-full bg-gray-50" @click="openAuth"> -->
-	<view class="flex flex-col h-full bg-gray-50">
-		<view class="relative" @touchmove="onMove">
-			<!-- 日历 -->
-			<Calendar @selected-change="onDateChange" :show-back="true" ref="calendar"
-				@handleFindPoint="handleFindPoint"
-/>
-			<!-- 上传 导入wbs -->
-			<Upload @success="onUploadSuccess" @error="onUploadError" />
-		</view>
-
-		<!-- 项目列表 -->
-		<Projects @getProjects="getProjects" class="flex-1 overflow-y-auto" />
-
-		<!-- 全局提示框 -->
-		<u-top-tips ref="uTips"></u-top-tips>
-	</view>
-</template>
-
-<script setup>
-import { reactive, computed, watchEffect, ref } from 'vue';
-import { useStore } from 'vuex';
-import dayjs from 'dayjs';
-
-const store = useStore();
+<template>
+  <!-- <view class="flex flex-col h-full bg-gray-50" @click="openAuth"> -->
+  <view class="flex flex-col h-full bg-gray-50">
+    <view class="relative" @touchmove="onMove">
+      <!-- 日历 -->
+      <Calendar @selected-change="onDateChange" :show-back="true" ref="calendar" @handleFindPoint="handleFindPoint" />
+      <!-- 上传 导入wbs -->
+      <Upload @success="onUploadSuccess" @error="onUploadError" />
+    </view>
+
+    <!-- 项目列表 -->
+    <Projects @getProjects="getProjects" class="flex-1 overflow-y-auto" />
+
+    <!-- 全局提示框 -->
+    <u-top-tips ref="uTips"></u-top-tips>
+  </view>
+</template>
+
+<script setup>
+import { reactive, computed, watchEffect, ref } from 'vue';
+import { useStore } from 'vuex';
+import dayjs from 'dayjs';
+
+const store = useStore();
 const token = computed(() => store.state.user.token);
-const uTips = ref(null);
-
-const data = reactive({
-  calendar: null,
-  days: [],
-});
-
-// 监听token
-watchEffect(() => {
-  if (!token.value) return;
-  if (token.value) {
-    getProjects();
-    handleFindPoint();
-  }
-});
-
-// 获取项目列表
-function getProjects(start = dayjs().startOf('day').valueOf(), end = dayjs().endOf('day').valueOf()) {
-  // const data = await this.$u.api.getProjects(start, end);
-  uni.$catchReq.getProjects(start, end, (err, data) => {
-    if (err) {
-      console.error('err: ', err);
-    } else {
-      data.forEach(item => {
-        item.show = false;
-      });
-      store.commit('project/setProjects', data);
-    }
-  });
-}
-
-async function handleFindPoint(start, end) {
-  try {
-    const startTime = start || dayjs().startOf('month').valueOf();
-    const endTime = end || dayjs().endOf('month').valueOf();
-    const res = await uni.$u.api.findRedPoint(startTime, endTime);
-    store.commit('project/setDotList', res);
-  } catch (error) {
-    console.log('error: ', error);
-  }
-}
-
-// 点击了某个日期
-const onDateChange = event => {
-  const day = dayjs(event.fullDate);
-  const start = day.startOf('date').valueOf();
-  const end = day.endOf('date').valueOf();
-  getProjects(start, end);
-};
-
-// 导入成功
-const onUploadSuccess = () => {
-  uTips.show({
-    title: '导入成功，即将打开新项目',
-    type: 'success',
-    duration: '3000',
-  });
-};
-
-// 导入失败
-const onUploadError = error => {
-  uTips.show({
-    title: error || '导入失败',
-    type: 'error',
-    duration: '6000',
-  });
-};
-
-// 监听触摸滑动 切换日历的模式 月/周
-function onMove(event) {
-  const y = event.changedTouches[0].pageY;
-  if (y - prevY > 0) {
-    // 向下滑动 如果是周视图weekMode=true 就 变成 月视图weekMode=false
-    data.value.calendar.weekMode && (data.value.calendar.weekMode = false);
-  } else if (y - prevY < 0) {
-    // 向上滑动 如果是月视图weekMode=false 就变成 周视图weekMode=true
-    !data.value.calendar.weekMode && (data.value.calendar.weekMode = true);
-  }
-  prevY = y;
-  data.value.calendar.initDate();
-}
-</script>
-
-<style>
-	.content {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-	}
-
-	.logo {
-		height: 200rpx;
-		width: 200rpx;
-		margin-top: 200rpx;
-		margin-left: auto;
-		margin-right: auto;
-		margin-bottom: 50rpx;
-	}
-
-	.text-area {
-		display: flex;
-		justify-content: center;
-	}
-
-	.title {
-		font-size: 36rpx;
-		color: #8f8f94;
-	}
+const uTips = ref(null);
+
+const data = reactive({
+  calendar: null,
+  days: [],
+});
+
+// 监听token
+watchEffect(() => {
+  if (!token.value) return;
+  if (token.value) {
+    getProjects();
+    handleFindPoint();
+  }
+});
+
+// 获取项目列表
+function getProjects(start = dayjs().startOf('day').valueOf(), end = dayjs().endOf('day').valueOf()) {
+  // const data = await this.$u.api.getProjects(start, end);
+  uni.$catchReq.getProjects(start, end, (err, data) => {
+    if (err) {
+      console.error('err: ', err);
+    } else {
+      data.forEach(item => {
+        item.show = false;
+      });
+      store.commit('project/setProjects', data);
+    }
+  });
+}
+
+async function handleFindPoint(start, end) {
+  try {
+    const startTime = start || dayjs().startOf('month').valueOf();
+    const endTime = end || dayjs().endOf('month').valueOf();
+    const res = await uni.$u.api.findRedPoint(startTime, endTime);
+    store.commit('project/setDotList', res);
+  } catch (error) {
+    console.log('error: ', error);
+  }
+}
+
+// 点击了某个日期
+const onDateChange = event => {
+  const day = dayjs(event.fullDate);
+  const start = day.startOf('date').valueOf();
+  const end = day.endOf('date').valueOf();
+  getProjects(start, end);
+};
+
+// 导入成功
+const onUploadSuccess = () => {
+  uTips.show({
+    title: '导入成功，即将打开新项目',
+    type: 'success',
+    duration: '3000',
+  });
+};
+
+// 导入失败
+const onUploadError = error => {
+  uTips.show({
+    title: error || '导入失败',
+    type: 'error',
+    duration: '6000',
+  });
+};
+
+// 监听触摸滑动 切换日历的模式 月/周
+function onMove(event) {
+  const y = event.changedTouches[0].pageY;
+  if (y - prevY > 0) {
+    // 向下滑动 如果是周视图weekMode=true 就 变成 月视图weekMode=false
+    data.value.calendar.weekMode && (data.value.calendar.weekMode = false);
+  } else if (y - prevY < 0) {
+    // 向上滑动 如果是月视图weekMode=false 就变成 周视图weekMode=true
+    !data.value.calendar.weekMode && (data.value.calendar.weekMode = true);
+  }
+  prevY = y;
+  data.value.calendar.initDate();
+}
+</script>
+
+<style>
+.content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.logo {
+  height: 200rpx;
+  width: 200rpx;
+  margin-top: 200rpx;
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: 50rpx;
+}
+
+.text-area {
+  display: flex;
+  justify-content: center;
+}
+
+.title {
+  font-size: 36rpx;
+  color: #8f8f94;
+}
 </style>