fix(app): 优化设计游学，活动列表

packages/app/src/core/libs/net-images.ts

@@ -4,4 +4,5 @@ export enum NetImages {
   'NotContent' = 'https://image.zhuchaohui.com/zhucaohui/3819d411440c23cc9e4f4bd3a520325386d7f038ed6dfa7c2ba076bd5110d2d2.png',
   'DesigerHomepageDefaultBg' = 'https://image.zhuchaohui.com/zhucaohui/58dcb982d2957c5578478abbf000936efe9d11c96c5af4d457177cf5d90a9d39.png',
   ConsultDefaultBg = 'https://image.zhuchaohui.com/zhucaohui/f1942e62d1b1adc23f37de705570e22d098da319e10c8a448dc49e594d4bee3a.png',
+  StudyTourItemBg = 'https://image.zhuchaohui.com/zhucaohui/254b7ea7fdecaba8e318a7f50e292d036cafe49904fc7fc160a5477ce921e261.png',
 }

packages/app/src/core/models/moment.ts

@@ -231,27 +231,90 @@ export interface Activity {
   id: number
   name: string
   activityType: string
+  /**
+   * 报名开始时间 or 计划报名时间
+   */
   applyStartTime: string
   studyStartTime: string
+  /**
+   * 报名结束时间 or 计划报名截止时间
+   */
   applyEndTime: string
+  /**
+   * 报名状态 or 计划游学名额开关
+   */
   applyStatus: string
+  /**
+   * 计划报名人员 or 计划游学名额
+   */
   applyNumber: string
+  /**
+   * 游学年度
+   */
   studyYear: string
+  /**
+   * 活动开始时间
+   */
   activityStartTime: string
+  /**
+   * 活动结束时间
+   */
   activityEndTime: string
+  /**
+   * 活动名额（限制，不限制）
+   */
   activityAllowType: string
+  /**
+   * 活动名额大小
+   */
   activityAllowCount: number
+  /**
+   * 活动地点
+   */
   activityAddr: string
+  /**
+   * 是否需要积分（需要，不需要）
+   */
   needPointsType: string
+  /**
+   * 需要积分大小
+   */
   needPointsCount: number
+  /**
+   * 活动徽章
+   */
   badgeId: number
+  /**
+   * 会员等级(多选)
+   */
   memberLevel: any[]
+  /**
+   * banner地址
+   */
   bannerUrl: string
+  /**
+   * 缩略图地址
+   */
   thumbnailUrl: string
+  /**
+   * 详情页背景图地址
+   */
   backgroundUrl: string
+  /**
+   * 活动介绍
+   */
   activityDesc: string
+  /**
+   * 展示状态
+   */
   showStatus: number
+  /**
+   * 是否首页推荐
+   */
   headRecommend: number
+  /**
+   * 浏览量
+   */
   viewCount: number
   createTime: string
 }

packages/app/src/core/utils/common.ts

@@ -1,3 +1,4 @@
+import dayjs from 'dayjs'
 export const handleCall = (phone: string) => {
   uni.makePhoneCall({ phoneNumber: phone })
 }
@@ -32,3 +33,14 @@ export const requestToast = async <T>(
   }
   return { code, data, msg }
 }
+
+export const getActivityStatus = (startAt: string | number, endAt: string | number) => {
+  const now = new Date()
+  if (dayjs(now).isBefore(dayjs(startAt))) {
+    return 'waiting'
+  } else if (dayjs(now).isAfter(dayjs(startAt)) && dayjs(now).isBefore(dayjs(endAt))) {
+    return 'running'
+  } else {
+    return 'overdue'
+  }
+}

packages/app/src/pages.json

@@ -381,7 +381,8 @@
       "path": "pages/home/offline-activity/list/index",
       "type": "page",
       "style": {
-        "navigationBarTitleText": "线下活动"
+        "navigationBarTitleText": "线下活动",
+        "navigationBarBackgroundColor": "#fff"
       }
     },
     {

packages/app/src/pages/home/components/activity-count-down.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import dayjs from 'dayjs'
+
+const props = defineProps<{ startAt?: string | number; endAt?: string | number }>()
+const status = computed(() => {
+  // 如果当前时间小于开始时间返回等待中，如果当前时间大于等于开始时间小于等于结束时间返回进行中，当前时间大于结束时间返回已结束
+  const now = new Date()
+  if (dayjs(now).isBefore(dayjs(props.startAt))) {
+    return 'waiting'
+  } else if (dayjs(now).isAfter(dayjs(props.startAt)) && dayjs(now).isBefore(dayjs(props.endAt))) {
+    return 'running'
+  } else {
+    return 'overdue'
+  }
+})
+</script>
+<template>
+  <div>
+    <wd-count-down
+      :time="dayjs({ waiting: startAt, running: endAt }[status]).diff(new Date(), 'millisecond')"
+    >
+      <template #default="{ current }">
+        <div class="flex items-center gap-1.25 text-black/40 text-sm">
+          <div>距{{ { waiting: '开始', running: '结束' }[status] }}还剩</div>
+          <div
+            class="w-4 h-4 bg-black/90 rounded text-white text-2.5 flex items-center justify-center"
+          >
+            {{ current.days }}
+          </div>
+          <span class="custom-count-down-colon">天</span>
+          <div
+            class="w-4 h-4 bg-black/90 rounded text-white text-2.5 flex items-center justify-center"
+          >
+            {{ current.hours }}
+          </div>
+          <span class="custom-count-down-colon">时</span>
+          <div
+            class="w-4 h-4 bg-black/90 rounded text-white text-2.5 flex items-center justify-center"
+          >
+            {{ current.minutes }}
+          </div>
+          <span class="custom-count-down-colon">分</span>
+        </div>
+      </template>
+    </wd-count-down>
+  </div>
+</template>

packages/app/src/pages/home/offline-activity/list/index.vue

@@ -1,12 +1,15 @@
 <route lang="json">
-{ "style": { "navigationBarTitleText": "线下活动" } }
+{ "style": { "navigationBarTitleText": "线下活动", "navigationBarBackgroundColor": "#fff" } }
 </route>
 <script setup lang="ts">
-import { getContents, getAllCategories, getActivities } from '../../../../core/libs/requests'
+import { getAllCategories, getActivities } from '../../../../core/libs/requests'
 import Card from '@/components/card.vue'
 import PageHelper from '@/components/page-helper.vue'
 import TiltedButton from '@/components/tilted-button.vue'
 import { useRouter } from '../../../../core/utils/router'
+import dayjs from 'dayjs'
+import ActivityCountDown from '../../components/activity-count-down.vue'
+import { getActivityStatus } from '../../../../core/utils/common'
 
 const tab = ref<number>(0)
 const contentCategory = ref()
@@ -14,38 +17,21 @@ const router = useRouter()
 const { data: categories, run: setCategories } = useRequest(() => getAllCategories(), {
   initialData: [],
 })
-const { data, run: setData } = useRequest(
-  () =>
-    getContents({
-      contentType: '1',
-      contentCategory: contentCategory.value,
-    }),
-  {
-    initialData: { list: [] },
-  },
-)
 const setContentCategory = (index) => {
-  contentCategory.value = categories.value.find(({ id }) => id === 2).children[index].id.toString()
+  contentCategory.value = categories.value.find(({ id }) => id === 2)?.children[index].id.toString()
 }
 const handleTabChange = ({ index }) => {
   setContentCategory(index)
-  setData()
 }
 onMounted(async () => {
   await setCategories()
   setContentCategory(tab.value)
-  await setData()
 })
 </script>
 <template>
   <div class="flex-grow flex flex-col gap-6 mx-3.5">
     <div class="mx--3.5">
-      <wd-tabs
-        v-model="tab"
-        custom-class="bg-transparent!"
-        :slidable-num="4"
-        @change="handleTabChange"
-      >
+      <wd-tabs v-model="tab" custom-class="" :slidable-num="4" @change="handleTabChange">
         <block v-for="(it, item) in categories.find(({ id }) => id === 2).children" :key="item">
           <wd-tab :title="it.name"></wd-tab>
         </block>
@@ -77,9 +63,11 @@ onMounted(async () => {
                           活动时间：
                         </div>
                         <div
-                          class="text-black/40 text-sm font-normal font-['PingFang SC'] leading-[34px]"
+                          class="text-black/40 text-sm font-normal font-['PingFang SC'] leading-[34px] flex items-center"
                         >
-                          07.15 08.10
+                          {{ dayjs(it.activityStartTime).format('MM.DD') }}
+                          <wd-icon name="play" size="22px"></wd-icon>
+                          {{ dayjs(it.activityEndTime).format('MM.DD') }}
                         </div>
                       </div>
                       <div class="flex items-end">
@@ -100,39 +88,45 @@ onMounted(async () => {
                     <view
                       class="flex items-center text-black/40 text-sm font-normal font-['PingFang SC'] leading-[34px]"
                     >
-                      距结束还剩
-                      <view
-                        class="w-4 h-4 bg-black/90 rounded flex-col justify-center items-center gap-2.5 inline-flex mx-1.5"
-                      >
-                        <view
-                          class="text-white text-[10px] font-normal font-['PingFang SC'] leading-[10.18px]"
-                        >
-                          05
-                        </view>
-                      </view>
-                      天
-                      <div
-                        class="w-4 h-4 bg-black/90 rounded flex-col justify-center items-center gap-2.5 inline-flex mx-1.5"
-                      >
-                        <div
-                          class="text-white text-[10px] font-normal font-['PingFang SC'] leading-[10.18px]"
-                        >
-                          05
-                        </div>
-                      </div>
-                      时
-                      <div
-                        class="w-4 h-4 bg-black/90 rounded flex-col justify-center items-center gap-2.5 inline-flex mx-1.5"
+                      <!-- <wd-count-down
+                        :time="dayjs(it.applyStartTime).diff(new Date(), 'millisecond')"
                       >
-                        <div
-                          class="text-white text-[10px] font-normal font-['PingFang SC'] leading-[10.18px]"
-                        >
-                          05
-                        </div>
-                      </div>
-                      分
+                        <template #default="{ current }">
+                          <div class="flex items-center gap-1.25 text-black/40 text-sm">
+                            <div>距结束还剩</div>
+                            <div
+                              class="w-4 h-4 bg-black/90 rounded text-white text-2.5 flex items-center justify-center"
+                            >
+                              {{ current.days }}
+                            </div>
+                            <span class="custom-count-down-colon">天</span>
+                            <div
+                              class="w-4 h-4 bg-black/90 rounded text-white text-2.5 flex items-center justify-center"
+                            >
+                              {{ current.hours }}
+                            </div>
+                            <span class="custom-count-down-colon">时</span>
+                            <div
+                              class="w-4 h-4 bg-black/90 rounded text-white text-2.5 flex items-center justify-center"
+                            >
+                              {{ current.minutes }}
+                            </div>
+                            <span class="custom-count-down-colon">分</span>
+                          </div>
+                        </template>
+                      </wd-count-down> -->
+                      <ActivityCountDown
+                        :start-at="it.applyStartTime"
+                        :end-at="it.applyEndTime"
+                      ></ActivityCountDown>
                     </view>
-                    <tilted-button>立即报名</tilted-button>
+                    <tilted-button>
+                      {{
+                        getActivityStatus(it.applyStartTime, it.applyEndTime) === 'running'
+                          ? '立即报名'
+                          : '查看详情'
+                      }}
+                    </tilted-button>
                   </view>
                 </div>
               </Card>

packages/app/src/pages/home/study-tour/components/study-tour-card.vue

@@ -6,6 +6,7 @@ import { Content } from '../../../../core/models/moment'
 import dayjs from 'dayjs'
 import { useRouter } from '../../../../core/utils/router'
 import { map } from '@designer-hub/assets/src/assets/svgs'
+import { NetImages } from '../../../../core/libs/net-images'
 
 const props = defineProps({
   customClass: {
@@ -26,7 +27,7 @@ const toDetail = () => {
   <div
     class="relative box-border aspect-[1.15/1] bg-[length:100%] flex flex-col"
     :class="customClass"
-    :style="{ backgroundImage: `url(${studyTourItemBg})` }"
+    :style="{ backgroundImage: `url(${NetImages.StudyTourItemBg})` }"
     @click="toDetail"
   >
     <div class="flex flex-col pt-2.25 px-6 gap-6">