feats

src/pages/index/activityDetail/index.jsx

 import { useState, useEffect } from "react";
 import Taro from "@tarojs/taro";
 import withLayout from "@/layout";
-import { ScrollView, Image, RichText } from "@tarojs/components";
+import { ScrollView, Image, RichText, Button } from "@tarojs/components";
 import Disclaimer from "@/components/Disclaimer";
 
 import {
 import useParams from "@/utils/hooks/useParams";
 import useShare from "@/utils/hooks/useShare";
 import useFavor from "@/utils/hooks/useFavor";
+import useStatus from './useStatus'
 
 import "./index.scss";
 
-const activityStatusDict = {
-  0: {
-    text: "立即参与",
-    text1: "立即参团",
-    className: "yellow",
-  },
-  1: {
-    text: "未开始",
-    text1: "未开始",
-    className: "blue",
-  },
-  2: {
-    text: "已结束",
-    text1: "已结束",
-    className: "grey",
-  },
-  3: {
-    text: "已参与",
-    text1: "已结束",
-    className: "yellow",
-  },
-};
-
 export default withLayout((props) => {
   const { router, shareContent, trackData, person, page } = props;
   const { id } = router.params;
   const [detail, setDetail] = useState();
   const buildingId = detail?.buildingId;
 
+  const [btnText, btnDisabled] = useStatus(detail)
+
   const getDetail = (params) => {
     Taro.showLoading();
 
             <text>{detail.enlisted || 0}人已报名</text>
           </view>
         </view>
-        <view className="btn" onClick={handleSignup}>
-          <text>{activityStatusDict[detail.activityStatus]?.text1}</text>
-        </view>
+        <button className="btn" disabled={btnDisabled} onClick={handleSignup}>
+          <text>{btnText}</text>
+        </button>
       </view>
       {/* </view> */}
     </view>
               </view>
               <view className="flex-item"></view>
 
-              <text className="Post" onClick={handleSignup}>
-                {activityStatusDict[detail.activityStatus]?.text}
-              </text>
+              <button disabled={btnDisabled} className="Post" onClick={handleSignup}>
+                {btnText}
+              </button>
             </view>
           )}
         </view>

src/pages/index/activityDetail/useStatus.js

+import { useEffect, useState } from 'react'
+
+const ACT_GAMEOVER = 2
+const ACT_ENLIST_FULL = 2
+const ACT_SIGNED = 1
+
+export default function useStatus(info) {
+  const { dynamicId, isSign, activityStatus, isEnlist } = info || {}
+
+  const [disabled, setDisabled] = useState(false)
+  const [btnText, setBtnText] = useState('立即报名')
+
+  useEffect(() => {
+    if (!dynamicId) return;
+
+    // 活动结束
+    if (activityStatus === ACT_GAMEOVER) {
+      setBtnText('已结束')
+      setDisabled(true)
+      return;
+    }
+
+    // 报名人数已满
+    if (isEnlist === ACT_ENLIST_FULL) {
+      setBtnText('人数已满')
+      setDisabled(true)
+      return;
+    }
+
+    // 已报名
+    if (isSign === ACT_SIGNED) {
+      setBtnText('已报名')
+      setDisabled(true)
+      return;
+    }
+
+    setBtnText('立即报名')
+    setDisabled(false)
+  },[dynamicId])
+
+  return [btnText, disabled]
+}