feat: 添加引导页

CHANGELOG.md

@@ -25,6 +25,7 @@
  - | 上传逻辑变化 | [3ff1dc2](https://dd.tall.wiki/gitea/binbin0314/yanyuan_js/commits/3ff1dc2)
  - | 任务状态时间显示 | [56f5183](https://dd.tall.wiki/gitea/binbin0314/yanyuan_js/commits/56f5183)
  - | 任务进行中状态数字 | [27b7326](https://dd.tall.wiki/gitea/binbin0314/yanyuan_js/commits/27b7326)
+ - | 修改config | [eb5f9c5](https://dd.tall.wiki/gitea/binbin0314/yanyuan_js/commits/eb5f9c5)
  - | 修改小程序id | [4206bf2](https://dd.tall.wiki/gitea/binbin0314/yanyuan_js/commits/4206bf2)
  - | 全局插件及默认插件位置修改 | [6c80d08](https://dd.tall.wiki/gitea/binbin0314/yanyuan_js/commits/6c80d08)
  - | 删除项目 | [00b886c](https://dd.tall.wiki/gitea/binbin0314/yanyuan_js/commits/00b886c)

src/App.vue

@@ -108,4 +108,8 @@ export default {
 .collapse-box >>> .u-collapse-body {
   height: auto !important;
 }
+
+uni-swiper {
+  height: 100% !important;
+}
 </style>

src/components/GuidePage/GuidePage.vue

@@ -0,0 +1,61 @@
+<template>
+  <view class="wrap">
+    <u-swiper
+      @change="changePic"
+      height="100%"
+      :autoplay="false"
+      :list="list"
+      img-mode="widthFix"
+      class="w-full h-full"
+      :circular="false"
+    ></u-swiper>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      list: [
+        {
+          image: 'https://www.tall.wiki/staticrec/guide/1.png',
+          title: '1',
+        },
+        {
+          image: 'https://www.tall.wiki/staticrec/guide/2.png',
+          title: '2',
+        },
+        {
+          image: 'https://www.tall.wiki/staticrec/guide/3.png',
+          title: '3',
+        },
+        {
+          image: 'https://www.tall.wiki/staticrec/guide/4.png',
+          title: '4',
+        },
+        {
+          image: 'https://www.tall.wiki/staticrec/guide/5.png',
+          title: '5',
+        },
+      ],
+    };
+  },
+  methods: {
+    changePic(index) {
+      if (index === this.list.length - 1) {
+        setTimeout(() => {
+          this.$emit('quitGuide');
+        }, 1500);
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.wrap {
+  position: absolute;
+  top: 0;
+  z-index: 999999;
+}
+</style>

src/pages/project/project.vue

@@ -15,6 +15,8 @@
       <!-- <TimeLine @getTasks="getTasks" style="background-color: #f3f3f3" class="flex-1 overflow-hidden" ref="timeLine" /> -->
       <ConfigInfo class="flex-1 overflow-hidden" style="background-color: #f3f3f3" />
     </view>
+
+    <GuidePage class="w-full h-full" v-if="showGuide" @quitGuide="quitGuide" />
   </view>
 </template>
 
@@ -25,7 +27,7 @@ import { flatten } from 'lodash';
 
 export default {
   data() {
-    return { height: '', show: false, questionnaires: [], count: 0, chooseItem: false };
+    return { height: '', show: false, questionnaires: [], count: 0, chooseItem: false, showGuide: false };
   },
 
   computed: {
@@ -92,6 +94,11 @@ export default {
   mounted() {
     const system = uni.getSystemInfoSync();
     this.height = system.windowHeight + 'px';
+
+    // TODO: 判断用户第一次进来才会显示
+    setTimeout(() => {
+      this.showGuide = true;
+    }, 1000);
   },
 
   onUnload() {
@@ -420,6 +427,11 @@ export default {
       // 到底的标志复位
       this.clearEndFlag();
     },
+
+    // 退出引导页
+    quitGuide() {
+      this.showGuide = false;
+    },
   },
 };
 </script>