feat(app): 优化活动详情页面展示逻辑

- 移除了未使用的 getMemberLevels 请求
- 增加了对活动和游学名额的计算和显示逻辑- 优化了日期和地点信息的展示格式

- 添加了新的地图位置和相机图标
- 调整了部分界面样式，如字体大小、对齐方式等

packages/app/env/.env.production

@@ -1,7 +1,7 @@
 # 变量必须以 VITE_ 为前缀才能暴露给外部读取
 NODE_ENV = 'production'
 # 是否去除console 和 debugger
-VITE_DELETE_CONSOLE = true
+VITE_DELETE_CONSOLE = false
 # 是否开启sourcemap
 VITE_SHOW_SOURCEMAP = false
 VITE_SERVER_BASEURL = 'https://www.zhuchaohui.com'

packages/app/src/pages/home/activity/detail/index.vue

@@ -12,7 +12,6 @@ import {
   getActivity,
   getActivitySignups,
   getAppMemberLevelConfigs,
-  getMemberLevels,
   getStudyTour,
   getStudyTourSignups,
   studyTourSignup,
@@ -32,8 +31,10 @@ import { NetImages } from '../../../../core/libs/net-images'
 import signupListDialogBg from '@designer-hub/assets/src/libs/assets/signupListDialogBg'
 import { getActivityStatusText, getCountsArr } from '../../../../core/utils/common'
 import { extractColorsFromImageData } from 'extract-colors/lib/extract-colors.mjs'
-import { group, sort } from 'radash'
+import { replace, sort } from 'radash'
 import { Activity, StudyTour } from '../../../../core/libs/models'
+import mapLocation from '@designer-hub/assets/src/libs/assets/mapLocation'
+import cameraWhite from '@designer-hub/assets/src/libs/assets/cameraWhite'
 
 const themeVars = ref<ConfigProviderThemeVars>({
   tableBorderColor: 'white',
@@ -45,7 +46,7 @@ const id = ref()
 const type = ref<'activity' | 'studyTour'>()
 const activityTypes = ref({ activity: '活动', studyTour: '游学' })
 const tab = ref(0)
-const request = ref<() => Promise<IResData<Partial<StudyTour> | Partial<Activity>>>>()
+const request = ref<() => Promise<IResData<Partial<StudyTour> & Partial<Activity>>>>()
 const { data, run: setData } = useRequest(() => request.value(), { initialData: {} })
 const { data: signups, run: setSignups } = useRequest(
   () => getActivitySignups({ activityId: id.value }),
@@ -73,6 +74,24 @@ const levelsByMemberLevel = computed(() =>
     return acc
   }, {}),
 )
+const places = computed(() => {
+  if (isActivity.value && data.value?.activityAllowType === '1') {
+    return data.value?.activityAllowCount
+  }
+  if (isStudyTour.value && data.value?.studyAllowType === '1') {
+    return data.value?.studyAllowCount
+  }
+  return '不限制'
+})
+const remainedCount = computed(() => {
+  if (isActivity.value && data.value?.activityAllowType === '1') {
+    return data.value?.activityAllowCount - signups.value.total
+  }
+  if (isStudyTour.value && data.value?.studyAllowType === '1') {
+    return data.value?.studyAllowCount - signups.value.total
+  }
+  return '不限制'
+})
 const infos = computed(() => [
   {
     icon: clock,
@@ -105,7 +124,7 @@ const infos = computed(() => [
   {
     icon: user,
     title: `${activityTypes.value[type.value]}名额`,
-    content: [data.value.activityAllowCount],
+    content: [places.value === '不限制' ? `不限制` : `${places.value}/${remainedCount.value}`],
     visable: true,
   },
   {
@@ -114,7 +133,7 @@ const infos = computed(() => [
     content: [
       data.value.memberLevel
         ?.map((it) => levelsByMemberLevel.value[String(it)]?.memberLevelName)
-        .join(',') || '',
+        .join('、') || '',
     ],
     visable: true,
   },
@@ -216,7 +235,7 @@ onLoad(async (query: { id: string; type: 'activity' | 'studyTour' }) => {
       </div>
     </div>
     <div class="h-9">
-      <div v-if="type === 'studyTour'" class="flex">
+      <div v-if="type === 'studyTour'" class="flex items-center h-full mt-9">
         <wd-img width="18" height="18" :src="map"></wd-img>
         <div class="text-[#c1c1c1] text-base font-normal font-['PingFang_SC'] leading-normal">
           第一站
@@ -245,14 +264,14 @@ onLoad(async (query: { id: string; type: 'activity' | 'studyTour' }) => {
         <div v-if="it.visable" class="flex items-center gap-1.5">
           <wd-img width="16" height="16" :src="it.icon"></wd-img>
           <div
-            class="w-[70px] text-[#c1c1c1] text-base font-normal font-['PingFang_SC'] leading-normal"
+            class="w-17.5 whitespace-nowrap text-[#c1c1c1] text-base font-normal font-['PingFang_SC'] leading-normal"
           >
             {{ it.title }}
           </div>
           <div class="w-3"></div>
 
           <div
-            class="flex items-center text-white text-base font-normal font-['PingFang_SC'] leading-[34px]"
+            class="flex-1 flex break-all items-center text-white text-base font-normal font-['PingFang_SC'] leading-[34px]"
           >
             <template v-if="it.content.length === 2">
               <div class="w-22 text-start">{{ it.content[0] }}</div>
@@ -283,14 +302,18 @@ onLoad(async (query: { id: string; type: 'activity' | 'studyTour' }) => {
       </div>
       <div v-if="tab === 1 && 'studyTravelList' in data">
         <template v-for="(it, i) in data.studyTravelList" :key="i">
-          <div class="flex flex-col">
+          <div class="flex flex-col gap-6">
             <div class="text-white text-base font-normal font-['PingFang_SC'] leading-normal">
-              6月26日 第一天
+              <!-- 6月26日 第一天 -->
+              {{ dayjs(it.travelTime).format('MM月DD日') }}
+              <span class="ml-1">{{ `第${i + 1}天` }}</span>
             </div>
-            <div class="flex">
-              <div class="w-[27px] h-[27px] bg-white/10 rounded-full"></div>
-              <div class="flex flex-col">
-                <div class="flex">
+            <div class="flex gap-2">
+              <div class="w-7 h-7 bg-white/10 rounded-full flex items-center justify-center">
+                <wd-img width="82%" height="82%" :src="mapLocation"></wd-img>
+              </div>
+              <div class="flex-1 flex flex-col gap-4">
+                <div class="h-7 flex items-center gap-2.5">
                   <div class="text-white text-sm font-normal font-['PingFang_SC'] leading-normal">
                     9:00
                   </div>
@@ -299,7 +322,7 @@ onLoad(async (query: { id: string; type: 'activity' | 'studyTour' }) => {
                     {{ it.title }}
                   </div>
                 </div>
-                <div class="w-[298px] h-[114px]">
+                <div class="">
                   <span
                     class="text-[#c1c1c1] text-sm font-normal font-['PingFang_SC'] leading-[23px]"
                   >
@@ -313,12 +336,13 @@ onLoad(async (query: { id: string; type: 'activity' | 'studyTour' }) => {
                     {{ it.travelDesc }}
                   </span>
                 </div>
-                <div class="flex">
+                <div class="flex items-center gap-1">
+                  <wd-img width="16" height="16" :src="cameraWhite"></wd-img>
                   <div class="text-white text-xs font-normal font-['PingFang_SC'] leading-normal">
                     打卡示例
                   </div>
                 </div>
-                <img class="w-[298px] h-[193px] rounded-2xl border" :src="it.clockExplainUrl" />
+                <img class="w-full rounded-2xl border" :src="it.clockExplainUrl" />
               </div>
             </div>
           </div>
@@ -330,7 +354,7 @@ onLoad(async (query: { id: string; type: 'activity' | 'studyTour' }) => {
         class="h-[63px] bg-white/90 rounded-2xl backdrop-blur-[20px] flex items-center gap-1 px-4 box-border"
       >
         <div class="text-[#ef4343] text-2xl font-normal font-['D-DIN_Exp'] leading-normal">
-          {{ data.needPointsCount }}
+          {{ data.needPointsCount || 0 }}
         </div>
         <div class="text-black/40 text-base font-normal font-['PingFang_SC'] leading-[34px]">
           积分
@@ -353,11 +377,11 @@ onLoad(async (query: { id: string; type: 'activity' | 'studyTour' }) => {
             </div>
             <div class="flex items-end gap-1">
               <div class="text-[#ef4343] text-[22px] font-normal leading-[22px]">
-                {{ data.needPointsCount }}
+                {{ data.needPointsCount || 0 }}
               </div>
               <div class="text-black/40 text-sm font-normal font-['PingFang_SC']">积分</div>
               <div class="ml-1 text-black/40 text-xs font-normal font-['PingFang_SC']">
-                剩余：{{ data['activityAllowCount'] }}
+                剩余：{{ remainedCount || 0 }}
               </div>
               <div class="flex-1"></div>
             </div>

packages/assets/src/libs/assets/cameraWhite.ts

@@ -0,0 +1,2 @@
+import cameraWhite from '../../assets/camera-white.svg' 
+ export default cameraWhite

packages/assets/src/libs/assets/mapLocation.ts

@@ -0,0 +1,2 @@
+import mapLocation from '../../assets/map-location.svg' 
+ export default mapLocation