信息修改

src/pages/index/activityDetail/index.jsx

@@ -1,7 +1,7 @@
-import { useState, useEffect } from 'react';
-import Taro from '@tarojs/taro';
-import withLayout from '@/layout';
-import { savePoint } from '@/services/common'
+import { useState, useEffect } from "react";
+import Taro from "@tarojs/taro";
+import withLayout from "@/layout";
+import { savePoint } from "@/services/common";
 import {
   ScrollView,
   Image,
@@ -10,74 +10,69 @@ import {
   Text,
   Input,
   Picker,
-  Button
-} from '@tarojs/components';
-import Disclaimer from '@/components/Disclaimer';
-import { useSelector } from 'react-redux';
-import {
-  signupActivity,
-  queryActivityDetail,
-} from "@/services/activity";
+  Button,
+} from "@tarojs/components";
+import Disclaimer from "@/components/Disclaimer";
+import { useSelector } from "react-redux";
+import { signupActivity, queryActivityDetail } from "@/services/activity";
 import { getImgURL } from "@/utils/image";
 import { formatDate } from "@/utils/chatDate";
 import useParams from "@/utils/hooks/useParams";
 import useShare from "@/utils/hooks/useShare";
 import useFavor from "@/utils/hooks/useFavor";
 import { times } from "@/utils/tools";
-import useStatus from './useStatus'
-import CountDown from './CountDown'
+import useStatus from "./useStatus";
+import CountDown from "./CountDown";
 
 import "./index.scss";
 
 export default withLayout((props) => {
-  const { router, shareContent, trackData, person, page, showShareTimeline, setNavigationBarTitle } = props;
-  const { id, eventType = 'dymic' } = router.params;
+  const {
+    router,
+    shareContent,
+    trackData,
+    person,
+    page,
+    showShareTimeline,
+    setNavigationBarTitle,
+  } = props;
+  const { id, eventType = "dymic" } = router.params;
 
   const user = useSelector((state) => state.user);
 
-  const [detail, setDetail] = useState({})
-  const [canChoose, setCanChoose] = useState('none');
-  const [inputName, setInputName] = useState('');
-  const [selectorChecked, setSelectorChecked] = useState('1');
-  const [selector, setSelector] = useState('');
+  const [detail, setDetail] = useState({});
+  const [canChoose, setCanChoose] = useState("none");
+  const [inputName, setInputName] = useState("");
+  const [selectorChecked, setSelectorChecked] = useState("1");
+  const [selector, setSelector] = useState("");
 
   const buildingId = detail?.buildingId;
 
-  const [btnText, btnDisabled] = useStatus(detail)
+  const [btnText, btnDisabled] = useStatus(detail);
 
   const getDetail = (params) => {
     Taro.showLoading();
 
     queryActivityDetail(params).then((res) => {
-      const maxperson = 10
+      const maxperson = 10;
       setSelector(times(maxperson).map((_, i) => `${i + 1}`));
 
       setDetail(res || {});
-      setNavigationBarTitle(res?.title)
+      setNavigationBarTitle(res?.title);
       Taro.hideLoading();
     });
   };
 
   useEffect(() => {
-    if(trackData.eventType && detail.dynamicId) {
+    if (trackData.eventType && detail.dynamicId) {
       savePoint({
         ...trackData,
-        event: 'detail',
-        eventType: detail.type || 'dymic',
-        targetType: detail.type || 'dymic'
-      })
-
-      useShare(
-        {
-          title: shareContent.shareContentTitle || detail?.title,
-          path: `${router.path}?${paramsRef.current}&type=${detail.type || 'dymic'}`,
-          // image: shareContent.shareContentImg || getImgURL(detail?.imgUrl),
-          image: '',
-        },
-        {...fullTrackData, eventType: detail.type || 'dymic' }
-      );
+        event: "detail",
+        eventType: detail.type || "dymic",
+        targetType: detail.type || "dymic",
+      });
     }
-  }, [trackData, detail])
+  }, [trackData, detail]);
 
   // 本页面分享或者海报参数
   const paramsRef = useParams({
@@ -95,25 +90,41 @@ export default withLayout((props) => {
     ...trackData,
   });
 
+  useShare(
+    {
+      title: shareContent.shareContentTitle || detail?.title,
+      path: `${router.path}?${paramsRef.current}&type=${
+        detail.type || "dymic"
+      }`,
+      // image: shareContent.shareContentImg || getImgURL(detail?.imgUrl),
+      image: "",
+    },
+    { ...fullTrackData, eventType: detail.type || "dymic" }
+  );
+
   useEffect(() => {
     if (id) {
       getDetail(id);
     }
-  }, [id])
+  }, [id]);
 
   const handleSignup = () => {
     setCanChoose("block");
   };
 
   const comfire = () => {
-    const { dynamicId } = detail
-    const { userInfo: { person: { phone, tel } } } = user
-    if (inputName === '') {
+    const { dynamicId } = detail;
+    const {
+      userInfo: {
+        person: { phone, tel },
+      },
+    } = user;
+    if (inputName === "") {
       Taro.showToast({
-        title: '请输入姓名',
-        icon: 'none'
-      })
-      return
+        title: "请输入姓名",
+        icon: "none",
+      });
+      return;
     }
 
     const payload = {
@@ -128,15 +139,15 @@ export default withLayout((props) => {
       Taro.showToast({
         title: "报名成功",
       });
-      setCanChoose('none')
+      setCanChoose("none");
       setTimeout(() => {
-        getDetail(id)
-      }, 500)
+        getDetail(id);
+      }, 500);
     });
   };
 
-  function hideModal () {
-    setCanChoose('none');
+  function hideModal() {
+    setCanChoose("none");
   }
 
   const onInputText = (e) => {
@@ -144,35 +155,38 @@ export default withLayout((props) => {
   };
 
   const dymic = () => (
-    <view className='Info'>
+    <view className="Info">
       <view>
-        <view className='Title flex-h'>
-          <view className='flex-item'>
+        <view className="Title flex-h">
+          <view className="flex-item">
             <text>{detail.halfTitle}</text>
           </view>
-          <text className='Tips'>{detail.enlisted || 0}人已报名</text>
+          <text className="Tips">{detail.enlisted || 0}人已报名</text>
         </view>
-        <text className='Time'>
+        <text className="Time">
           报名截止时间：
-          {formatDate(detail.enlistEnd, 'yyyy/MM/dd')}
+          {formatDate(detail.enlistEnd, "yyyy/MM/dd")}
         </text>
-        <text className='Name'>{detail.title}</text>
-        <view className='flex-h Address'>
+        <text className="Name">{detail.title}</text>
+        <view className="flex-h Address">
           <text>活动地址：</text>
-          <view className='flex-item'>
+          <view className="flex-item">
             <text>{detail.address}</text>
           </view>
         </view>
-        <view className='flex-h Date'>
+        <view className="flex-h Date">
           <text>活动时间：</text>
-          <view className='flex-item'>
+          <view className="flex-item">
             <text>
-              {`${formatDate(detail.startDate, 'yyyy/MM/dd')} - ${formatDate(detail.endDate, 'yyyy/MM/dd')}`}
+              {`${formatDate(detail.startDate, "yyyy/MM/dd")} - ${formatDate(
+                detail.endDate,
+                "yyyy/MM/dd"
+              )}`}
             </text>
           </view>
         </view>
-        <view className='Btn'>
-          <Button open-type='share'>
+        <view className="Btn">
+          <Button open-type="share">
             <text>分享好友</text>
           </Button>
         </view>
@@ -181,29 +195,35 @@ export default withLayout((props) => {
   );
 
   const house = () => (
-
-    <view className='BuildingInfo'>
-
-      <view className='flex-h Title'>
-        <view className='flex-item'>
-          <text className='Name'>{detail.title}</text>
-          <view className='Address flex-h'>
-            <text className='iconfont icon-dingwei'></text>
-            <view className='flex-item'>
+    <view className="BuildingInfo">
+      <view className="flex-h Title">
+        <view className="flex-item">
+          <text className="Name">{detail.title}</text>
+          <view className="Address flex-h">
+            <text className="iconfont icon-dingwei"></text>
+            <view className="flex-item">
               <text>{detail.address}</text>
             </view>
           </view>
-          <text className='Price'>{detail.groupBuyPrice || '价格待定'}</text>
-          <text className='Time'>活动时间：{formatDate(detail.startDate, 'yyyy/MM/dd')} - {formatDate(detail.endDate, 'yyyy/MM/dd')}</text>
+          <text className="Price">{detail.groupBuyPrice || "价格待定"}</text>
+          <text className="Time">
+            活动时间：{formatDate(detail.startDate, "yyyy/MM/dd")} -{" "}
+            {formatDate(detail.endDate, "yyyy/MM/dd")}
+          </text>
         </view>
-        <view className='Option'>
+        <view className="Option">
           <view>
-            <text className='iconfont icon-fenxiang1'></text>
+            <text className="iconfont icon-fenxiang1"></text>
             <text>分享</text>
-            <Button open-type='share' className='ShareBtn'>分享</Button>
+            <Button open-type="share" className="ShareBtn">
+              分享
+            </Button>
           </view>
           <view onClick={() => showShareTimeline(true)}>
-            <text className='iconfont icon-pengyouquan1' style='font-size: 32rpx'></text>
+            <text
+              className="iconfont icon-pengyouquan1"
+              style="font-size: 32rpx"
+            ></text>
             <text>朋友圈</text>
           </view>
         </view>
@@ -211,41 +231,45 @@ export default withLayout((props) => {
 
       <CountDown endTime={detail?.enlistEnd} />
 
-      <view className='Apply flex-h'>
-        <view className='Collect' onClick={handleFavor}>
-          <text className='iconfont icon-shoucang' style={isSaved ? { color: 'red' } : undefined}></text>
-          <text>{isSaved ? '已收藏' : '收藏'}</text>
+      <view className="Apply flex-h">
+        <view className="Collect" onClick={handleFavor}>
+          <text
+            className="iconfont icon-shoucang"
+            style={isSaved ? { color: "red" } : undefined}
+          ></text>
+          <text>{isSaved ? "已收藏" : "收藏"}</text>
         </view>
-        <text className='iconfont icon-baoming'></text>
-        <view className='flex-item'>
+        <text className="iconfont icon-baoming"></text>
+        <view className="flex-item">
           <text>{detail.enlisted || 0}人已报名</text>
         </view>
-        <Button className='Btn' disabled={btnDisabled} onClick={handleSignup}>{btnText}</Button>
+        <Button className="Btn" disabled={btnDisabled} onClick={handleSignup}>
+          {btnText}
+        </Button>
       </view>
-
     </view>
   );
 
   return (
     <>
       {detail && (
-        <view className='Page activityDetail flex-v'>
-          <view className='flex-item'>
+        <view className="Page activityDetail flex-v">
+          <view className="flex-item">
             <view>
               <ScrollView scroll-y>
-                <view className='PageContent'>
-                  <view className='Top'>
+                <view className="PageContent">
+                  <view className="Top">
                     <Image
-                      mode='aspectFill'
+                      mode="aspectFill"
                       src={getImgURL(detail.imgUrl)}
-                      className='centerLabel'
+                      className="centerLabel"
                     ></Image>
                   </view>
 
                   {detail.type == "dymic" && dymic()}
                   {detail.type !== "dymic" && house()}
-                  <view className='ActivityIntro'>
-                    <view className='Title'>
+                  <view className="ActivityIntro">
+                    <view className="Title">
                       <text>活动介绍</text>
                     </view>
                     <RichText nodes={detail.desc} />
@@ -257,21 +281,25 @@ export default withLayout((props) => {
             </view>
           </view>
           {detail.type == "dymic" && (
-            <view className='PageBottom flex-h'>
-              <Button className='Share' open-type='share'>
-                <text className='iconfont icon-fenxiang'></text>
+            <view className="PageBottom flex-h">
+              <Button className="Share" open-type="share">
+                <text className="iconfont icon-fenxiang"></text>
                 <text>分享</text>
               </Button>
-              <view className='Collect' onClick={handleFavor}>
+              <view className="Collect" onClick={handleFavor}>
                 <text
-                  className='iconfont icon-shoucang'
+                  className="iconfont icon-shoucang"
                   style={isSaved ? { color: "red" } : undefined}
                 ></text>
-                <text>{isSaved ? '已收藏' : '收藏'}</text>
+                <text>{isSaved ? "已收藏" : "收藏"}</text>
               </view>
-              <view className='flex-item'></view>
+              <view className="flex-item"></view>
 
-              <Button disabled={btnDisabled} className='Post' onClick={handleSignup}>
+              <Button
+                disabled={btnDisabled}
+                className="Post"
+                onClick={handleSignup}
+              >
                 {btnText}
               </Button>
             </view>
@@ -279,29 +307,29 @@ export default withLayout((props) => {
         </view>
       )}
 
-      <View className='page-body' style={{ display: canChoose }}>
-        <View className='mask' onClick={() => hideModal()}></View>
-        <View className='page-section'>
-          <Text className='page-section__title'>报名信息</Text>
-          <View className='page-content'>
+      <View className="page-body" style={{ display: canChoose }}>
+        <View className="mask" onClick={() => hideModal()}></View>
+        <View className="page-section">
+          <Text className="page-section__title">报名信息</Text>
+          <View className="page-content">
             <Input
-              className='inputName'
+              className="inputName"
               onInput={onInputText}
-              type='text'
-              placeholder='请输入姓名'
+              type="text"
+              placeholder="请输入姓名"
             />
             <Picker
-              mode='selector'
+              mode="selector"
               range={selector}
               onChange={(e) => setSelectorChecked(selector[e.detail.value])}
             >
-              <View className='picker'>
+              <View className="picker">
                 <Text>参加人数</Text>
-                <Text className='content'>{selectorChecked}</Text>
+                <Text className="content">{selectorChecked}</Text>
                 <Text>人</Text>
               </View>
             </Picker>
-            <View onClick={comfire} className='comfire'>
+            <View onClick={comfire} className="comfire">
               确认
             </View>
           </View>