feat: 更新 ButtonEvo 组件，添加禁用状态和块级属性；优化活动状态按钮逻辑

packages/app/src/components/button-evo.vue

@@ -3,16 +3,20 @@ import { omit } from 'radash'
 
 // const theme
 interface ComponentProps {
-  block?: boolean
   color?: string
   size?: 'lg' | 'md' | 'sm'
   location?: 'left' | 'right'
 }
+interface ButtonProps {
+  block?: boolean
+  disabled?: boolean
+}
 const props = withDefaults(
-  defineProps<{ customClass?: string; skew?: boolean } & ComponentProps>(),
+  defineProps<{ customClass?: string; skew?: boolean } & ComponentProps & ButtonProps>(),
   { color: 'primary', location: 'left' },
 )
-const emits = defineEmits<{ click: [] }>()
+const emits = defineEmits<{ click: []; 'click.stop': [] }>()
+const instance = getCurrentInstance()
 const themeVars = { primary: '--evo-theme-primary' }
 const btnThemeClass = { primary: 'before:bg-[--evo-theme-primary] after:bg-[--evo-theme-primary]' }
 
@@ -22,14 +26,17 @@ const btnClass = computed(
   () => `${btnThemeClass[props.color] || `before:bg-[--color] after:bg-[--color]`}`,
 )
 const height = computed(() => ({ lg: '2.75rem', md: '2.1875rem' })[props.size] || '2.75rem')
+const handleClick = (event: Event) => {
+  emits('click')
+}
 </script>
 <template>
   <button
     class="relative bg-transparent hover:bg-transparent h-[--evo-btn-height]!"
-    :class="`${btnClass} ${{ md: 'pl-7! pr-3.5!' }[size] || ''} skew skew-${location}`"
+    :class="`${btnClass} ${{ md: 'pl-7! pr-3.5!' }[size] || ''} skew skew-${location} ${disabled ? 'opacity-15!' : ''}`"
     :style="{ '--color': color, '--evo-btn-height': height }"
     :block="block"
-    @click="emits('click')"
+    @click="handleClick"
   >
     <div
       class="w-full h-full flex items-center justify-center relative z-1 c-white"

packages/app/src/composables/activity.ts

@@ -0,0 +1,32 @@
+import { get } from 'radash'
+import { Activity, StudyTour } from '../core/libs/models'
+import {
+  getActivityStatus,
+  getActivityStatusButtonText,
+  getActivityStatusText,
+} from '../core/utils/common'
+
+/**
+ * 游学活动
+ */
+export const useActivity = (options: Activity | StudyTour) => {
+  const status = computed(() =>
+    getActivityStatus(
+      options?.applyStartTime || options?.planApplyStartTime,
+      options?.applyEndTime || options?.planApplyEndTime,
+    ),
+  )
+  return {
+    getActivityStatusButtonText: () =>
+      getActivityStatusButtonText(
+        options?.applyStartTime || options?.planApplyStartTime,
+        options?.applyEndTime || options?.planApplyEndTime,
+      ),
+    getActivityStatusText: () =>
+      getActivityStatusText(
+        options?.applyStartTime || options?.planApplyStartTime,
+        options?.applyEndTime || options?.planApplyEndTime,
+      ),
+    status,
+  }
+}

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

@@ -206,11 +206,13 @@ export interface Activity {
    * 报名开始时间 or 计划报名时间
    */
   applyStartTime: string
+  planApplyStartTime?: string
   studyStartTime: string
   /**
    * 报名结束时间 or 计划报名截止时间
    */
   applyEndTime: string
+  planApplyEndTime?: string
   /**
    * 报名状态 or 计划游学名额开关
    */

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

@@ -6,7 +6,9 @@ import { useRouter } from '../../../../core/utils/router'
 import { map } from '@designer-hub/assets/src/assets/svgs'
 import { NetImages } from '../../../../core/libs/net-images'
 import ActivityCountDown from '../../components/activity-count-down.vue'
-import { getActivityStatusButtonText, getActivityStatusText } from '../../../../core/utils/common'
+import { useActivity } from '../../../../composables/activity'
+import ButtonEvo from '@/components/button-evo.vue'
+import { omit } from 'radash'
 
 const props = defineProps<{
   customClass?: string
@@ -14,6 +16,8 @@ const props = defineProps<{
 }>()
 
 const router = useRouter()
+const { getActivityStatusButtonText, getActivityStatusText, getActivityStatus, status } =
+  useActivity(omit(props.options, ['levelsByMemberLevel', 'index']))
 const toDetail = () => {
   router.push(`/pages/home/activity/detail/index?id=${props.options?.id}&type=studyTour`)
 }
@@ -34,12 +38,7 @@ const toDetail = () => {
         <div class="flex-1"></div>
         <div class="bg-[#f3f3f3] rounded-[20px] backdrop-blur-[15px] px-4 py-1.5">
           <div class="text-black/40 text-sm font-normal font-['PingFang_SC']">
-            {{
-              getActivityStatusText(
-                options?.applyStartTime || options?.planApplyStartTime,
-                options?.applyEndTime || options?.planApplyEndTime,
-              )
-            }}
+            {{ getActivityStatusText() }}
           </div>
         </div>
       </div>
@@ -78,21 +77,17 @@ const toDetail = () => {
         </div>
         <div></div>
       </div>
-      <div class="flex justify-between">
+      <div class="flex items-center justify-between">
         <ActivityCountDown
           :start-at="options?.applyStartTime || options?.planApplyStartTime"
           :end-at="options?.applyEndTime || options?.planApplyEndTime"
         ></ActivityCountDown>
-        <tilted-button>
-          {{
-            options?.ifSingnUp
-              ? '已报名'
-              : getActivityStatusButtonText(
-                  options?.applyStartTime || options?.planStudyStartTime,
-                  options?.applyEndTime || options?.planStudyEndTime,
-                )
-          }}
-        </tilted-button>
+        <div @tap.stop="status === 'running' && toDetail()">
+          <!-- {{ status !== 'running' }} -->
+          <ButtonEvo size="md" :disabled="status !== 'running'">
+            {{ options?.ifSingnUp ? '已报名' : getActivityStatusButtonText() }}
+          </ButtonEvo>
+        </div>
       </div>
       <div class="flex justify-between border-t-solid border-t-[#f2f2f2] border-t-1 py-4">
         <div></div>