Merge pull request #35 from j10ccc/feat-lostfound

feat(lostfound): 添加失物招领模块

package.json

@@ -49,6 +49,7 @@
     "@tarojs/shared": "3.6.2",
     "@tarojs/taro": "3.6.2",
     "dayjs": "^1.11.4",
+    "lodash-es": "^4.17.21",
     "vue": "^3.0.0",
     "vuex": "^4.0.0",
     "vuex-persistedstate": "^4.1.0"

src/app.config.ts

@@ -3,6 +3,7 @@ export default {
     "pages/index/index",
     "pages/activation/index",
     "pages/bind/index",
+    "pages/webview/index",
     "pages/lessonstable/index",
     "pages/schoolbus/index",
     "pages/library/index",
@@ -19,6 +20,7 @@ export default {
     "pages/announcement/index",
     "pages/electricity/index",
     "pages/electricity/record/index",
+    "pages/lostfound/index",
     "pages/electricity/consumption/index"
   ],
   darkmode: false,

src/components/FixedQuickView/InformationQuickView/index.vue

@@ -0,0 +1,38 @@
+<template>
+  <view class="information quick-view-container" @tap="handleClick">
+    <view class="header">
+      <view class="title">公告栏</view>
+    </view>
+    <view v-if="currentPost" class="content">
+      <text> {{ currentPost.content.slice(0, 60) }}</text>
+    </view>
+    <view v-else :class="['quick-view-container', 'empty']">
+      <text> 暂时公告信息 </text>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import Taro from "@tarojs/taro";
+import { serviceStore } from "@/store";
+
+const handleClick = () => {
+  if (currentPost.value.type === "announcement") {
+    Taro.navigateTo({
+      url: "/pages/announcement/index?tab=announcement",
+    });
+  } else {
+    Taro.navigateTo({
+      url: "/pages/announcement/index?tab=information",
+    });
+  }
+};
+
+const currentPost = ref<{ type: string; content: string }>({
+  type: "announcement",
+  content: serviceStore.announcement.announcements[
+    serviceStore.announcement.announcements.length - 1 || 0
+  ].content.replace(/\\n/g, "\n"),
+});
+</script>

src/components/FixedQuickView/LostfoundQuickView/index.vue

@@ -0,0 +1,56 @@
+<template>
+  <view class="quick-view-container" @tap="handleClick">
+    <view class="header">
+      <view class="title">失物寻物</view>
+    </view>
+    <view v-if="randomContent" class="content">
+      <text> {{ randomContent }}</text>
+    </view>
+    <view v-else :class="['content', 'empty']">
+      <text class="campus">{{ defaultCampus }} </text>
+      <text> 校区暂时没有失物寻物信息 </text>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { useRequest } from "@/hooks";
+import { LostfoundService } from "@/services";
+import { computed, watch } from "vue";
+import Taro from "@tarojs/taro";
+import { serviceStore } from "@/store";
+
+const defaultCampus = computed(() => {
+  return serviceStore.lostfound.lastOpenCampus;
+});
+
+watch([defaultCampus], ([newValue]) => {
+  getRecords({
+    campus: newValue,
+    page_num: 1,
+    page_size: 5,
+  });
+});
+
+const { data, run: getRecords } = useRequest(LostfoundService.getRecords, {
+  defaultParams: {
+    campus: defaultCampus.value,
+    page_num: 1,
+    page_size: 5,
+  },
+});
+
+const handleClick = () => {
+  Taro.navigateTo({
+    url: "/pages/lostfound/index",
+  });
+};
+
+const randomContent = computed(() => {
+  const list = data.value?.data.data;
+  const realLength = list?.length || 0;
+  return list?.length
+    ? list[Math.floor(Math.random() * realLength)].content
+    : "";
+});
+</script>

src/components/FixedQuickView/index.scss

@@ -0,0 +1,49 @@
+@import "@/style/theme";
+
+.fixed-quick-view-container {
+  border-radius: 8Px;
+  @include shadow;
+  padding: 0 20Px;
+  background-color: var(--wjh-color-white);
+  opacity: 95%;
+}
+
+.quick-view-container {
+  .header {
+    padding: 12Px 0 8Px 0;
+    border-bottom: 2Px solid var(--wjh-color-border);
+    text-align: center;
+
+    .title {
+      font-size: 1.1rem;
+    }
+  }
+
+  .content {
+    padding: 8Px 0 16Px 0;
+  }
+
+  .empty {
+    padding-top: 16Px;
+    text-align: center;
+
+    .campus {
+      color: var(--wjh-color-cyan);
+    }
+  }
+
+}
+
+.quick-view-container:not(:last-child) {
+  border-bottom: 6Px solid var(--wjh-color-cyan-light);
+}
+
+.information {
+  .content text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+  }
+}

src/components/FixedQuickView/index.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import LostfoundQuickView from "./LostfoundQuickView/index.vue";
+import InformationQuickView from "./InformationQuickView/index.vue";
+import "./index.scss";
+</script>
+
+<template>
+  <view class="fixed-quick-view-container">
+    <information-quick-view />
+    <lostfound-quick-view />
+  </view>
+</template>

src/components/Home/index.vue

@@ -1,24 +1,20 @@
 <template>
   <title-bar title="微精弘" :back-button="false">
-    <alarm
-      v-if="isActive"
-      @tap="nav2announcement"
-      :counter="announcementsCounter"
-    ></alarm>
+    <alarm v-if="isActive" @tap="nav2announcement" :counter="announcementsCounter"></alarm>
   </title-bar>
   <scroll-view :scrollY="true">
     <view class="flex-column" v-if="isActive">
-      <questionnaire
-        v-if="isQuestionnaireAccess() && isNeverShowQuestionnaire"
-      />
+      <questionnaire v-if="isQuestionnaireAccess() && isNeverShowQuestionnaire" />
+
+      <fixed-quick-view />
+
+      <!-- 这里是可选卡片列表 -->
       <cards />
+
       <card v-if="!(isBindZf || isBindYXY || isBindLibrary)" title="提示">
         还没有绑定任何服务，请到我的页面绑定
       </card>
-      <view
-        @tap="showEditPanel"
-        :class="styles[`edit-button`]"
-      >
+      <view @tap="showEditPanel" :class="styles[`edit-button`]">
         <view class="iconfont icon-edit" />
       </view>
     </view>
@@ -28,7 +24,7 @@
       </card>
     </view>
   </scroll-view>
-  <edit-panel v-model:show="isShowEditPanel"/>
+  <edit-panel v-model:show="isShowEditPanel" />
 </template>
 
 <script setup lang="ts">
@@ -43,6 +39,7 @@ import Taro from "@tarojs/taro";
 import { SystemService } from "@/services";
 import { questionnaireInfo } from "@/constants/updateInfo";
 import cards from "./cards.vue";
+import FixedQuickView from "../FixedQuickView/index.vue";
 import EditPanel from "./edit-panel/index.vue";
 import styles from "./index.module.scss";
 
@@ -63,7 +60,7 @@ const isQuestionnaireAccess = () => {
 if (questionnairePath != systemStore.questionnaire.path) {
   store.commit("setQuestionnaire", {
     path: questionnairePath,
-    state: "open"
+    state: "open",
   });
 }
 
@@ -92,14 +89,14 @@ const announcementsCounter = computed(() => {
 
 function nav2activation() {
   Taro.navigateTo({
-    url: "/pages/activation/index"
+    url: "/pages/activation/index",
   });
 }
 
 function nav2announcement() {
   store.commit("clearAnnouncementsUpdateCounter");
   Taro.navigateTo({
-    url: "/pages/announcement/index"
+    url: "/pages/announcement/index",
   });
 }
 </script>

src/components/Skeleton/index.module.scss

@@ -0,0 +1,38 @@
+@import "@/style/theme";
+
+.container {
+  background-color: var(--wjh-color-white);
+  padding: 16Px;
+  display: flex;
+  gap: .8rem;
+  flex-direction: column;
+}
+
+.line:first-child {
+  width: 40%;
+  margin-bottom: .5rem;
+}
+
+.line:last-child {
+  width: 60%;
+}
+
+.line {
+  background-image: linear-gradient(90deg, #00000022 25%, #00000011 37%, #00000022 63%);
+  width: 100%;
+  height: 1.1rem;
+  border-radius: 4Px;
+  background-size: 400% 100%;
+  background-position: 100% 50%;
+  animation: skeleton-loading 1.4s ease infinite;
+}
+
+@keyframes skeleton-loading {
+  0% {
+    background-position: 100% 50%;
+  }
+
+  100% {
+    background-position: 0 50%;
+  }
+}

src/components/Skeleton/index.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { CSSProperties } from "vue";
+import styles from "./index.module.scss";
+
+const props = defineProps<{
+  row?: number;
+  style?: CSSProperties;
+}>();
+
+</script>
+
+<template>
+  <view :class="styles.container" :style="props.style">
+    <view
+      v-for="(_, index) in row || 5"
+      :key="index"
+      :class="styles.line"
+    />
+  </view>
+</template>

src/components/index.ts

@@ -26,6 +26,7 @@ import WCollapsePanel from "./Collapse/CollapsePanel.vue";
 import WSteps from "./Steps/index.vue";
 import WDescriptions  from "./Descriptions/Descriptions.vue";
 import WDescriptionsItem from "./Descriptions/DescriptionsItem.vue";
+import WSkeleton from "./Skeleton/index.vue";
 
 export {
   Alarm,
@@ -57,4 +58,5 @@ export {
   WDescriptionsItem,
   WModal,
   WSteps,
+  WSkeleton
 };

src/hooks/useRequest.ts

@@ -11,6 +11,9 @@ interface RequestConfigType<TData extends TaroGeneral.IAnyObject, TParams> {
   /** 自动发起请求的默认参数 */
   defaultParams?: TParams;
 
+  /** loading 延迟 单位 ms */
+  loadingDelay?: number;
+
   /**
    * 发送请求之前 hook
    * @param response
@@ -54,10 +57,14 @@ const useRequest = <TData extends TaroGeneral.IAnyObject, TParams>(
   const error = ref<Error | { errMsg: string }>();
 
   const fetch = (params?: TParams) => {
-    loading.value = true;
     data.value = undefined;
     error.value = undefined;
     config?.onBefore?.();
+    // TODO: add delay
+    const timer = setTimeout(() => {
+      loading.value = true;
+    }, config?.loadingDelay || 0);
+
     service(params || config?.defaultParams).then((response) => {
       config?.onSuccess?.(response);
       data.value = response.data;
@@ -67,6 +74,8 @@ const useRequest = <TData extends TaroGeneral.IAnyObject, TParams>(
       error.value = e;
     }).finally(() => {
       config?.onFinally?.();
+
+      if (timer) clearTimeout(timer);
       loading.value = false;
     });
   };