Merge branch 'main' of http://git.ycjcjy.com/marketing/miniapp into main

src/pages/index/activityDetail/index.jsx

@@ -1,9 +1,17 @@
 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,
+  View,
+  Text,
+  Input,
+  Picker,
+} from "@tarojs/components";
 import Disclaimer from "@/components/Disclaimer";
-
+import { useSelector } from "react-redux";
 import {
   // addActivityShareNum,
   signupActivity,
@@ -14,7 +22,7 @@ import getDateFormat from "@/utils/chatDate";
 import useParams from "@/utils/hooks/useParams";
 import useShare from "@/utils/hooks/useShare";
 import useFavor from "@/utils/hooks/useFavor";
-
+import { getDownloadURL, times, transferImage } from "@/utils/tools";
 import "./index.scss";
 
 const activityStatusDict = {
@@ -43,16 +51,27 @@ const activityStatusDict = {
 export default withLayout((props) => {
   const { router, shareContent, trackData, person, page } = props;
   const { id } = 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 buildingId = detail?.buildingId;
 
   const getDetail = (params) => {
     Taro.showLoading();
 
     queryActivityDetail(params).then((res) => {
-      console.log(res, "queryActivityDetail");
-      setDetail(res);
+      const maxperson =
+        res.maxEnlistByPerson < 100 ? res.maxEnlistByPerson : 100;
+
+      setSelector(times(maxperson || 1).map((_, i) => `${i + 1}`));
 
+      setDetail(res);
       Taro.hideLoading();
     });
   };
@@ -89,14 +108,7 @@ export default withLayout((props) => {
   }, [id]);
 
   const handleSignup = () => {
-    const {
-      detail: { buildingId, dynamicId, isSign },
-    } = this.state;
-    const {
-      userInfo: {
-        person: { phone, name, nickname },
-      },
-    } = this.props;
+    const { buildingId, dynamicId, isSign } = detail;
 
     if (isSign) {
       Taro.showToast({
@@ -105,12 +117,52 @@ export default withLayout((props) => {
       });
       return;
     }
+    setCanChoose("block");
+  };
 
-    this.setState({
-      canChoose: "block",
+  const comfire = (e) => {
+    const { dynamicId } =detail;
+    // console.log(user, "user");
+    const { userInfo: { person: { phone,  tel } } } = user
+    if (inputName == "") {
+      Taro.showToast({
+        title: "请输入姓名",
+        icon: "none",
+      });
+      return;
+    }
+
+    const payload = {
+      buildingId,
+      dynamicId,
+      name: inputName,
+      phone: phone ? phone : tel,
+      attendNum: selectorChecked,
+    };
+
+    signupActivity(payload).then((res) => {
+      Taro.showToast({
+        title: "报名成功",
+      });
+      setSelector('none')
+      // this.setState({
+      //   isSign: true,
+      //   canChoose: "none",
+      // });
+      setTimeout(() => {
+        getDetail(id);
+      }, 500);
     });
   };
 
+  function hideModal() {
+    setCanChoose("none");
+  }
+
+  const onInputText = (e) => {
+    setInputName(e.detail.value);
+  };
+
   const dymic = () => (
     <view className="Info">
       <view>
@@ -196,7 +248,7 @@ export default withLayout((props) => {
         </view>
         <view className="right">
           <view>
-            <button  open-type="share">
+            <button open-type="share">
               <text className="iconfont icon-fenxiang"></text>
               <text>分享</text>
             </button>
@@ -297,6 +349,35 @@ 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">
+            <Input
+              className="inputName"
+              onInput={onInputText}
+              type="text"
+              placeholder="请输入姓名"
+            />
+            <Picker
+              mode="selector"
+              range={selector}
+              onChange={(e) => setSelectorChecked(selector[e.detail.value])}
+            >
+              <View className="picker">
+                <Text>参加人数</Text>
+                <Text className="content">{selectorChecked}</Text>
+                <Text>人</Text>
+              </View>
+            </Picker>
+            <View onClick={comfire} className="comfire">
+              确认
+            </View>
+          </View>
+        </View>
+      </View>
     </>
   );
 });

src/pages/index/activityDetail/index.scss

@@ -223,3 +223,88 @@
     }
   }
 }
+
+.page-body {
+  z-index: 99;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+
+  .mask {
+    background: rgba(0, 0, 0, 0.7);
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+  }
+
+  .page-section {
+    position: absolute;
+    width: 600px;
+    top: 24%;
+    left: 75px;
+    border-radius: 10px;
+    background: white;
+    height: 500px;
+
+    &__title {
+      font-size: 36px;
+      text-align: center;
+      width: 100%;
+      line-height: 120px;
+      display: block;
+      color: black;
+    }
+
+    .page-content {
+      width: 490px;
+      margin: 0 auto;
+
+      .inputName {
+        width: 100%;
+        height: 80px;
+        line-height: 80px;
+        border: 1px solid #CCCCCC;
+        border-radius: 10px;
+        text-align: center;
+      }
+
+      .picker {
+        width: 100%;
+        margin-top: 30px;
+        display: flex;
+        justify-content: center;
+        border: 1px solid #CCCCCC;
+
+        Text {
+          display: block;
+          color: black;
+          height: 80px;
+          line-height: 80px;
+          width: auto;
+        }
+
+        .content {
+          text-align: center;
+          margin-right: 20px;
+          margin-left: 20px;
+        }
+      }
+
+      .comfire {
+        width: 490px;
+        height: 96px;
+        background: #BB9C79;;
+        border-radius: 7px;
+        line-height: 96px;
+        color: white;
+        text-align: center;
+        margin-top: 60px;
+        font-size: 36px;
+      }
+    }
+  }
+
+}