From e8413924b0ab969015aea1cfaf2f80297cd3e35e Mon Sep 17 00:00:00 2001
From: aBin <binbin0314@126.com>
Date: Tue, 20 Jul 2021 17:29:46 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=97=B6=E9=97=B4=E8=BD=B4=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9=E7=8A=B6=E6=80=81=E6=97=B6=E6=8F=90=E7=A4=BA=E6=A1=86?=
 =?UTF-8?q?=E5=A2=9E=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md                                  |   2 +
 src/components/Globals/index.vue              |  35 +++-
 src/components/Roles/Roles.vue                |  72 +------
 src/components/Roles/components/RoleList.vue  | 183 ++++++++++++++++++
 .../TimeLine/components/TimeBox.vue           |   2 +-
 .../TimeLine/components/TimeStatus.vue        |  53 +++--
 src/components/TimeLine/index.vue             |  20 +-
 src/components/Tips/index.vue                 |  73 +++++++
 src/main.js                                   |   7 +-
 src/pages/index/index.vue                     |   4 +-
 src/store/home/actions.js                     |   3 +
 src/store/home/getters.js                     |   3 +
 src/store/home/index.js                       |  12 ++
 src/store/home/mutations.js                   |  52 +++++
 src/store/home/state.js                       |  13 ++
 src/store/index.js                            |   8 +
 16 files changed, 442 insertions(+), 100 deletions(-)
 create mode 100644 src/components/Roles/components/RoleList.vue
 create mode 100644 src/components/Tips/index.vue
 create mode 100644 src/store/home/actions.js
 create mode 100644 src/store/home/getters.js
 create mode 100644 src/store/home/index.js
 create mode 100644 src/store/home/mutations.js
 create mode 100644 src/store/home/state.js

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5c96682..1695c9f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -16,8 +16,10 @@
 ### 🎨 代码样式
 范围|描述|commitId
 --|--|--
+ - | 更新代码 | [8c27e68](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/8c27e68)
  - | 更新代码 | [1f40a76](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/1f40a76)
  - | 任务快捷方式图标增加 | [4aba872](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/4aba872)
+ - | 日常任务修改 | [dfa7ee2](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/dfa7ee2)
  - | 图标修改 | [54bca09](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/54bca09)
  - | 无基本变化 | [21ac4bb](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/21ac4bb)
  - | 组件新建 | [89c0035](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/89c0035)
diff --git a/src/components/Globals/index.vue b/src/components/Globals/index.vue
index 6039f8c..cc975ee 100644
--- a/src/components/Globals/index.vue
+++ b/src/components/Globals/index.vue
@@ -1,30 +1,45 @@
 <!--
- * @Author: aBin
- * @email: binbin0314@126.com
+ * @Author: your name
  * @Date: 2021-07-19 10:52:05
- * @LastEditors: aBin
- * @LastEditTime: 2021-07-20 14:20:46
+ * @LastEditTime: 2021-07-20 15:18:41
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: \TALL-MUI-3\src\components\Globals\index.vue
 -->
 <template>
   <view>
-    <u-card margin="0" :show-head="false" :show-foot="false" border-radius="25">
+    <u-card margin="0" :show-head="false" :show-foot="false" border-radius="25" :style="{ height: isShrink ? '96rpx' : '300rpx' }">
+      <!-- <u-card margin="0" :show-head="false" :show-foot="false" border-radius="25" style="height: 300rpx"> -->
       <view slot="body">
-        <view class="u-col-between p-0 u-skeleton">
-          <view class="u-line-2 u-skeleton-rect"> 瓶身描绘的牡丹一如你初妆</view>
-          <view class="u-line-2 u-skeleton-rect mt-2"> 瓶身描绘的牡丹一如你初妆</view>
-          <view class="u-line-2 u-skeleton-rect mt-2"> 瓶身描绘的牡丹一如你初妆</view>
-        </view>
+        <scroll-view :scrollY="true" :style="{ height: isShrink ? '40rpx' : '240rpx' }">
+          <view class="u-col-between p-0 u-skeleton">
+            <view class="u-line-2 u-skeleton-rect"> 瓶身描绘的牡丹一如你初妆</view>
+            <view class="u-line-2 u-skeleton-rect mt-2"> 瓶身描绘的牡丹一如你初妆</view>
+            <view class="u-line-2 u-skeleton-rect mt-2"> 瓶身描绘的牡丹一如你初妆</view>
+            <view class="u-line-2 u-skeleton-rect mt-2"> 瓶身描绘的牡丹一如你初妆</view>
+            <view class="u-line-2 u-skeleton-rect mt-2"> 瓶身描绘的牡丹一如你初妆</view>
+            <view class="u-line-2 u-skeleton-rect mt-2"> 瓶身描绘的牡丹一如你初妆</view>
+            <view class="u-line-2 u-skeleton-rect mt-2"> 瓶身描绘的牡丹一如你初妆</view>
+            <view class="u-line-2 u-skeleton-rect mt-2"> 瓶身描绘的牡丹一如你初妆</view>
+            <view class="u-line-2 u-skeleton-rect mt-2"> 瓶身描绘的牡丹一如你初妆</view>
+            <view class="u-line-2 u-skeleton-rect mt-2"> 瓶身描绘的牡丹一如你初妆</view>
+            <view class="u-line-2 u-skeleton-rect mt-2"> 瓶身描绘的牡丹一如你初妆</view>
+            <view class="u-line-2 u-skeleton-rect mt-2"> 瓶身描绘的牡丹一如你初妆222</view>
+          </view>
+        </scroll-view>
       </view>
     </u-card>
     <u-skeleton :loading="true" :animation="true" bgColor="#fff"></u-skeleton>
   </view>
 </template>
 <script>
+import { mapState } from 'vuex';
 export default {
   name: 'Global',
   data() {
     return {};
   },
+  computed: mapState('home', ['isShrink']),
 };
 </script>
 
diff --git a/src/components/Roles/Roles.vue b/src/components/Roles/Roles.vue
index 065e308..f4ec830 100644
--- a/src/components/Roles/Roles.vue
+++ b/src/components/Roles/Roles.vue
@@ -2,86 +2,32 @@
  * @Author: aBin
  * @email: binbin0314@126.com
  * @Date: 2021-07-19 10:52:05
- * @LastEditors: aBin
- * @LastEditTime: 2021-07-20 10:54:27
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-07-20 15:12:16
 -->
 <template>
   <view class="wrap">
     <view class="rolebar">
-      <view>
-        <view v-if="roles || roles.length">
-          <!-- <u-tabs
-            :bar-width="barWidth"
-            :current="currentRoleIndex"
-            :list="roles"
-            @change="handleClickRole"
-            class="u-skeleton-rect"
-            name="value"
-            ref="tabs"
-          ></u-tabs>-->
-
-          <u-tabs
-            :bar-width="barWidth"
-            :class="'isMine' ? '#f00' : ''"
-            :current="currentRoleIndex"
-            :list="roles"
-            @change="handleClickRole"
-            class="u-skeleton-rect"
-            name="value"
-            ref="tabs"
-          >
-          </u-tabs>
-        </view>
-        <u-skeleton :animation="true" :loading="loading" bgcolor="#fff" v-else></u-skeleton>
-      </view>
+      <role-list />
     </view>
   </view>
 </template>
 
 <script>
+import RoleList from './components/RoleList.vue';
+
 export default {
   name: 'Roles',
+  components: { RoleList },
   data() {
-    return {
-      roles: [
-        { id: 1, value: '项目经理', isMine: false },
-        { id: 2, value: '运维', isMine: true },
-        { id: 3, value: '导师一', isMine: false },
-        { id: 4, value: '导师二', isMine: true },
-        { id: 5, value: '导师三', isMine: true },
-      ],
-      currentRoleIndex: 0,
-      barWidth: 80,
-      loading: false, // 是否显示骨架屏组件
-    };
-  },
-  mounted() {
-    this.getItem();
-  },
-  methods: {
-    handleClickRole(index) {
-      this.getItem();
-      console.log('index: ', index);
-      this.currentRoleIndex = index;
-    },
-    getItem() {
-      var dom = document.getElementsByClassName('u-tab-item');
-      for (let i = 0; i < dom.length; i++) {
-        let id = dom[i].id;
-        for (let k = 0; k < this.roles.length; k++) {
-          let item = this.roles[k];
-          if (dom[i].textContent === item.value && item.isMine) {
-            document.getElementById(`${id}`).style.color = 'red';
-          }
-        }
-      }
-    },
+    return {};
   },
+  methods: {},
 };
 </script>
 
 <style scoped lang="scss">
 .container {
-  padding: 20rpx;
+  padding: 0 20rpx;
 }
 </style>
diff --git a/src/components/Roles/components/RoleList.vue b/src/components/Roles/components/RoleList.vue
new file mode 100644
index 0000000..d0c3445
--- /dev/null
+++ b/src/components/Roles/components/RoleList.vue
@@ -0,0 +1,183 @@
+<template>
+  <view class="wrap">
+    <view class="homeBox">
+      <scroll-view :enable-flex="true" :scroll-left="scrollLeft" :throttle="false" scroll-with-animation scroll-x>
+        <view class="tabBox u-skeleton">
+          <view :key="index" @click="changeIndex(index)" class="tab-item" v-for="(item, index) in roles">
+            <view :class="setColor(item.isMine, tabIndex, index)" class="tab-children u-skeleton-rect">{{ item.value }}</view>
+          </view>
+        </view>
+        <u-skeleton :animation="true" :loading="loading" bgcolor="#fff"></u-skeleton>
+      </scroll-view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'RoleList',
+  data() {
+    return {
+      tabIndex: 0, //当前访问的 index 默认为0
+      tabList: [], //tab dom节点集合
+      scrollLeft: 0, //scrollview需要滚动的距离
+      roles: [
+        { id: 1, value: '项目经理', isMine: 0 },
+        { id: 2, value: '运维', isMine: 0 },
+        { id: 3, value: '导师一', isMine: 1 },
+        { id: 4, value: '导师二', isMine: 1 },
+        { id: 5, value: '导师三', isMine: 1 },
+        { id: 6, value: '导师四', isMine: 1 },
+        { id: 7, value: '导师五', isMine: 1 },
+        { id: 8, value: '导师六', isMine: 1 },
+        { id: 9, value: '导师七', isMine: 1 },
+        { id: 10, value: '导师八', isMine: 1 },
+      ],
+      loading: true, // 是否显示骨架屏组件
+    };
+  },
+
+  mounted() {
+    this.init();
+    setTimeout(() => {
+      this.loading = false;
+      console.log('this.loading: ', this.loading);
+    }, 5000);
+  },
+
+  methods: {
+    init() {
+      const data = document.getElementsByClassName('tab-children');
+      // TODO 第一步 获取当前所以子元素 并插入到 tabList 列表中
+      data.forEach(item => {
+        this.tabList.push({ width: item.clientWidth, left: item.offsetLeft });
+      });
+    },
+
+    changeIndex(index) {
+      //改变index 即手动点击切换 我在此时将当前元素赋值给左边距 实现自动滚动
+      this.tabIndex = index;
+      //当前滚动的位置
+      let left = 0;
+      let screenWidth = window.screen.width;
+      for (let i = 0; i < index; i++) {
+        left += this.tabList[i].width + this.tabList[i].left * 2;
+      }
+      left += this.tabList[index].width;
+      this.scrollLeft = left - screenWidth / 2;
+    },
+
+    // 设置文字颜色
+    setColor(isMine, tabIndex, index) {
+      if (isMine === 1 && tabIndex === index) {
+        return 'default-tab-choice';
+      }
+      if (isMine === 1 && tabIndex !== index) {
+        return 'default-tab-item';
+      }
+      if (isMine === 0 && tabIndex === index) {
+        return 'tab-choice';
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+$tabChoiceColor: #f40; //设置选中文字和底部下划线背景颜色
+$max: 100%;
+
+// 这是最外层盒子
+.wrap {
+  position: relative;
+  background: #f7f7f7;
+}
+
+.homeBox {
+  // 对此盒子进行 sticky 粘性定位
+  position: sticky;
+  top: 0;
+  background: #fff; //设置背景 否则会透明
+  /* #ifdef H5 */
+  //粘性定位 在h5下 加 原生头部高度 44px
+  top: 88rpx;
+
+  /* #endif */
+  .tabBox {
+    position: relative;
+    white-space: nowrap;
+    // height: 88rpx;
+
+    /* #ifdef MP-TOUTIAO */
+    /* #endif */
+    .tab-item {
+      padding: 15rpx 24rpx;
+      position: relative;
+      display: inline-block;
+      text-align: center;
+      font-size: 30rpx;
+      transition-property: background-color, width;
+    }
+
+    .default-tab-item {
+      color: $tabChoiceColor;
+    }
+
+    .default-tab-choice {
+      //当前选中 基于此类名给与底部选中框
+      position: relative;
+      color: $tabChoiceColor;
+      font-weight: 600;
+    }
+    .default-tab-choice:before {
+      content: '';
+      position: absolute;
+      left: 0;
+      bottom: -14rpx;
+      width: 100%;
+      height: 6rpx;
+      border-radius: 2rpx;
+      background: $tabChoiceColor;
+    }
+
+    .tab-choice {
+      //当前选中 基于此类名给与底部选中框
+      position: relative;
+      color: $uni-color-primary;
+      font-weight: 600;
+    }
+
+    .tab-choice:before {
+      content: '';
+      position: absolute;
+      left: 0;
+      bottom: -14rpx;
+      width: 100%;
+      height: 6rpx;
+      border-radius: 2rpx;
+      background: $uni-color-primary;
+    }
+  }
+}
+
+// // 删除 底部滚动条
+/* #ifndef APP-NVUE */
+::-webkit-scrollbar,
+::-webkit-scrollbar,
+::-webkit-scrollbar {
+  display: none;
+  width: 0 !important;
+  height: 0 !important;
+  -webkit-appearance: none;
+  background: transparent;
+}
+
+/* #endif */
+/* #ifdef H5 */
+// 通过样式穿透，隐藏H5下，scroll-view下的滚动条
+scroll-view ::v-deep ::-webkit-scrollbar {
+  display: none;
+}
+
+/* #endif */
+</style>
diff --git a/src/components/TimeLine/components/TimeBox.vue b/src/components/TimeLine/components/TimeBox.vue
index a9c9a55..7b37490 100644
--- a/src/components/TimeLine/components/TimeBox.vue
+++ b/src/components/TimeLine/components/TimeBox.vue
@@ -9,7 +9,7 @@
   <view class="px-4">
     <view v-for="item in list" :key="item" class="mt-2">
       <view class="flex items-center">
-        <TimeStatus :status="item" />
+        <TimeStatus :status="item" :content="JSON.stringify(item)" />
         <view class="flex-1 ml-2 flex justify-between">
           <view>任务时间栏</view>
           <view>
diff --git a/src/components/TimeLine/components/TimeStatus.vue b/src/components/TimeLine/components/TimeStatus.vue
index a110e89..d51244c 100644
--- a/src/components/TimeLine/components/TimeStatus.vue
+++ b/src/components/TimeLine/components/TimeStatus.vue
@@ -7,9 +7,9 @@
 -->
 <template>
   <view>
-    <view class="rounded-full h-7 w-7 flex items-center justify-center text-blue-400" v-if="status === 0">
+    <view class="rounded-full h-7 w-7 flex items-center justify-center text-blue-400" v-if="status === 0" @tap="changeStatus($event, 0)">
       <u-circle-progress :percent="100" active-color="#2979ff" bgColor="rgba(255,255,255,0)" borderWidth="4" width="66">
-        <view @tap="changeStatus(0)" class="u-progress-content">
+        <view class="u-progress-content">
           <view class="u-progress-dot"></view>
           <text class="u-progress-info">
             <u-icon name="checkmark" size="30"></u-icon>
@@ -17,17 +17,17 @@
         </view>
       </u-circle-progress>
     </view>
-    <view class="rounded-full h-7 w-7 flex items-center justify-center text-black" v-if="status === 1">
+    <view class="rounded-full h-7 w-7 flex items-center justify-center text-black" v-if="status === 1" @tap="changeStatus($event, 1)">
       <u-circle-progress :percent="80" active-color="#2979ff" bgColor="rgba(255,255,255,0)" borderWidth="6" width="66">
-        <view @tap="changeStatus(1)" class="u-progress-content">
+        <view class="u-progress-content">
           <view class="u-progress-dot"></view>
           <view class="u-progress-info">{{ time }}</view>
         </view>
       </u-circle-progress>
     </view>
-    <view class="rounded-full h-7 w-7 flex items-center justify-center text-gray-400" v-if="status === 2">
+    <view class="rounded-full h-7 w-7 flex items-center justify-center text-gray-400" v-if="status === 2" @tap="changeStatus($event, 2)">
       <u-circle-progress :percent="40" active-color="#2979ff" bgColor="rgba(255,255,255,0)" borderWidth="6" width="66">
-        <view @tap="changeStatus(2)" class="u-progress-content">
+        <view class="u-progress-content">
           <view class="u-progress-dot"></view>
           <text class="u-progress-info">
             <u-icon name="play-right-fill" size="30"></u-icon>
@@ -35,9 +35,13 @@
         </view>
       </u-circle-progress>
     </view>
-    <view class="rounded-full h-7 w-7 flex items-center justify-center text-red-800 font-black" v-if="status === 3">
+    <view
+      class="rounded-full h-7 w-7 flex items-center justify-center text-red-800 font-black"
+      v-if="status === 3"
+      @tap="changeStatus($event, 3)"
+    >
       <u-circle-progress :percent="80" active-color="#2979ff" bgColor="rgba(255,255,255,0)" borderWidth="6" width="66">
-        <view @tap="changeStatus(3)" class="u-progress-content">
+        <view class="u-progress-content">
           <view class="u-progress-dot"></view>
           <text class="u-progress-info">
             <u-icon name="pause" size="30"></u-icon>
@@ -45,10 +49,10 @@
         </view>
       </u-circle-progress>
     </view>
-    <u-action-sheet :list="chooseList()" v-model="show"></u-action-sheet>
   </view>
 </template>
 <script>
+import { mapMutations } from 'vuex';
 export default {
   name: 'TimeStatus',
   props: {
@@ -56,6 +60,10 @@ export default {
       default: 0,
       type: Number,
     },
+    content: {
+      default: '',
+      type: String,
+    },
   },
   data() {
     return {
@@ -88,17 +96,34 @@ export default {
           color: 'blue',
         },
       ],
-      change: 0,
-      show: false,
     };
   },
   methods: {
+    ...mapMutations('home', ['setClient', 'setTips', 'setStatus', 'setTipsContent']),
     chooseList() {
       return this.start;
     },
-    changeStatus(num) {
-      this.change === num;
-      this.show = true;
+    changeStatus(e, num) {
+      this.setStatus(num);
+      this.setTipsContent(this.chooseTips(num, this.content));
+      const client = {
+        left: e.target.x,
+        top: e.target.y,
+      };
+      this.setClient(client);
+      this.setTips(true);
+    },
+    chooseTips(num, content) {
+      switch (num) {
+        case 0:
+          return `确认开始任务${content}吗？`;
+        case 1:
+          return `请选择要执行的操作`;
+        case 2:
+          return `请选择要执行的操作`;
+        case 3:
+          return `是否要重新开始此任务`;
+      }
     },
   },
 };
diff --git a/src/components/TimeLine/index.vue b/src/components/TimeLine/index.vue
index f293d5e..a0d22a1 100644
--- a/src/components/TimeLine/index.vue
+++ b/src/components/TimeLine/index.vue
@@ -2,34 +2,40 @@
  * @Author: aBin
  * @email: binbin0314@126.com
  * @Date: 2021-07-19 14:15:35
- * @LastEditors: aBin
- * @LastEditTime: 2021-07-20 14:22:11
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-07-20 15:01:45
 -->
 <template>
   <view class="main">
     <Barrier />
-    <scroll-view :scrollY="true" :scrollTop="scrollTop" :style="{ height: height }" @scroll="scroll">
+    <scroll-view :scrollY="true" :scrollTop="top" :style="{ height: height }" @scroll="scroll">
       <!-- <scroll-view scroll-y="true" style="height: 400px"> -->
       <TimeBox />
     </scroll-view>
+    <Tips />
   </view>
 </template>
 <script>
+import { mapState, mapMutations } from 'vuex';
 import Barrier from './components/Barrier.vue';
 import TimeBox from './components/TimeBox.vue';
+import Tips from 'components/Tips/index.vue';
 export default {
   name: 'TimeLine',
-  components: { Barrier, TimeBox },
+  components: { Barrier, TimeBox, Tips },
   data() {
-    return { height: '', scrollTop: 0 };
+    return { height: '', top: 0 };
   },
+  computed: mapState('home', ['scrollTop', 'showTips']),
   mounted() {
     this.height = document.getElementsByClassName('main')[0].clientHeight - 30 + 'px';
-    console.log(this.height);
   },
   methods: {
+    ...mapMutations('home', ['setScrollTop', 'setShrink']),
     scroll(e) {
-      console.log(e.detail.scrollTop);
+      this.top = e.detail.scrollTop;
+      this.setShrink(this.top > this.scrollTop);
+      this.setScrollTop(this.top);
     },
   },
 };
diff --git a/src/components/Tips/index.vue b/src/components/Tips/index.vue
new file mode 100644
index 0000000..3b31600
--- /dev/null
+++ b/src/components/Tips/index.vue
@@ -0,0 +1,73 @@
+<template>
+  <view
+    class="absolute shadow-2xl shadow-2xl"
+    style="z-index: 1000"
+    :style="{
+      left: client.left + 'px',
+      top: height - client.top > 110 ? client.top + 'px' : '',
+      bottom: height - client.top > 110 ? '' : '10px',
+    }"
+    id="u-icard"
+  >
+    <u-card
+      :title="title"
+      style="width: 500rpx; margin: 0 !important"
+      v-if="showTips"
+      titleSize="28"
+      :headStyle="headStyle"
+      :footStyle="footStyle"
+    >
+      <view class="" slot="body"> {{ tipsContent }} </view>
+      <view class="flex ustify-between" slot="foot">
+        <u-button size="mini" @tap="clickCancel">取消</u-button>
+        <u-button v-if="status === 1" size="mini" @tap="clickCancel">暂停</u-button>
+        <u-button v-if="status === 2" size="mini" @tap="clickCancel">继续</u-button>
+        <u-button v-if="status === 1 || status === 2" size="mini" @tap="clickCancel">重新开始</u-button>
+        <u-button v-if="status === 1 || status === 2" type="primary" size="mini" @tap="clickCancel">结束</u-button>
+        <u-button v-if="status === 0 || status === 3" type="primary" size="mini" @tap="clickOk">确定</u-button>
+      </view>
+    </u-card>
+    <u-toast ref="uToast" />
+  </view>
+</template>
+
+<script>
+import { mapState, mapMutations } from 'vuex';
+export default {
+  name: 'Tips',
+  props: {
+    title: {
+      default: '提示',
+      type: String,
+    },
+  },
+  computed: mapState('home', ['client', 'showTips', 'status', 'tipsContent']),
+  data() {
+    return {
+      footStyle: { padding: '4px 15px' },
+      headStyle: { paddingTop: '8px', paddingBottom: '8px' },
+      height: 0,
+    };
+  },
+  mounted() {
+    this.height = window.screen.height;
+  },
+  methods: {
+    ...mapMutations('home', ['setTips']),
+    clickOk() {
+      this.$refs.uToast.show({
+        title: '点击了确定',
+        type: 'success',
+      });
+      this.setTips(false);
+    },
+    clickCancel() {
+      this.$refs.uToast.show({
+        title: '点击了取消',
+        type: 'error',
+      });
+      this.setTips(false);
+    },
+  },
+};
+</script>
diff --git a/src/main.js b/src/main.js
index 4cc3367..7b0b10a 100644
--- a/src/main.js
+++ b/src/main.js
@@ -2,13 +2,14 @@
  * @Author: aBin
  * @email: binbin0314@126.com
  * @Date: 2021-07-19 10:09:22
- * @LastEditors: aBin
- * @LastEditTime: 2021-07-19 18:54:17
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-07-20 14:52:23
  */
 import Vue from 'vue';
 import App from './App';
 import uView from 'uview-ui';
 import './common/styles/index.css';
+import store from './store';
 
 //#ifdef H5
 import './registerServiceWorker';
@@ -22,7 +23,7 @@ Vue.use(uView);
 
 App.mpType = 'app';
 
-const app = new Vue({ ...App });
+const app = new Vue({ ...App, store });
 
 import request from '@/utils/request.js';
 Vue.use(request, app);
diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index 68e69ae..aaf539e 100644
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -2,8 +2,8 @@
  * @Author: aBin
  * @email: binbin0314@126.com
  * @Date: 2021-07-19 10:09:22
- * @LastEditors: aBin
- * @LastEditTime: 2021-07-20 11:55:27
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-07-20 15:08:29
 -->
 <template>
   <view :style="{ height: height }" class="flex flex-col overflow-hidden">
diff --git a/src/store/home/actions.js b/src/store/home/actions.js
new file mode 100644
index 0000000..5dfa3d4
--- /dev/null
+++ b/src/store/home/actions.js
@@ -0,0 +1,3 @@
+const actions = {};
+
+export default actions;
diff --git a/src/store/home/getters.js b/src/store/home/getters.js
new file mode 100644
index 0000000..56c8c75
--- /dev/null
+++ b/src/store/home/getters.js
@@ -0,0 +1,3 @@
+const getters = {};
+
+export default getters;
diff --git a/src/store/home/index.js b/src/store/home/index.js
new file mode 100644
index 0000000..d22f64a
--- /dev/null
+++ b/src/store/home/index.js
@@ -0,0 +1,12 @@
+import state from './state';
+import getters from './getters';
+import mutations from './mutations';
+import actions from './actions';
+
+export default {
+  namespaced: true,
+  state,
+  getters,
+  mutations,
+  actions,
+};
diff --git a/src/store/home/mutations.js b/src/store/home/mutations.js
new file mode 100644
index 0000000..ae53b1d
--- /dev/null
+++ b/src/store/home/mutations.js
@@ -0,0 +1,52 @@
+const mutations = {
+  /**
+   * 记录时间轴向上滚动的距离
+   * @param { object } state
+   * @param { number } num
+   */
+  setScrollTop(state, num) {
+    state.scrollTop = num;
+  },
+  /**
+   * 设置日常任务当前是否应该处于收缩状态
+   * @param { object } state
+   * @param { boolean } data
+   */
+  setShrink(state, data) {
+    state.isShrink = data;
+  },
+  /**
+   * 存储鼠标点击位置
+   * @param { object } state
+   * @param { object } data
+   */
+  setClient(state, data) {
+    state.client = { ...data };
+  },
+  /**
+   * 是否显示tips
+   * @param { object } state
+   * @param { boolean } data
+   */
+  setTips(state, data) {
+    state.showTips = data;
+  },
+  /**
+   * 是否显示tips
+   * @param { object } state
+   * @param { number } data
+   */
+  setStatus(state, data) {
+    state.status = data;
+  },
+  /**
+   * 是否显示tips
+   * @param { object } state
+   * @param { string } data
+   */
+  setTipsContent(state, data) {
+    state.tipsContent = data;
+  },
+};
+
+export default mutations;
diff --git a/src/store/home/state.js b/src/store/home/state.js
new file mode 100644
index 0000000..33e99c3
--- /dev/null
+++ b/src/store/home/state.js
@@ -0,0 +1,13 @@
+const state = {
+  scrollTop: 0,
+  isShrink: false, // true: 收起， false：展开
+  client: {
+    left: 0, // 鼠标点击位置距离左边的距离
+    top: 0, // 鼠标点击位置距离上边的距离
+  },
+  showTips: false,
+  status: 0, // 点击了时间轴上的哪种样式，默认点击了开始
+  tipsContent: '', // 提示框内的内容，需要传入
+};
+
+export default state;
diff --git a/src/store/index.js b/src/store/index.js
index e69de29..571bd49 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -0,0 +1,8 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import home from './home/index';
+import db from './db/index';
+import user from './user/index';
+
+Vue.use(Vuex);
+export default new Vuex.Store({ modules: { home, db, user } });