Kaynağa Gözat

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

1002884655 3 yıl önce
ebeveyn
işleme
9c8cad6d34

+ 97
- 16
src/pages/index/activityDetail/index.jsx Dosyayı Görüntüle

1
 import { useState, useEffect } from "react";
1
 import { useState, useEffect } from "react";
2
 import Taro from "@tarojs/taro";
2
 import Taro from "@tarojs/taro";
3
 import withLayout from "@/layout";
3
 import withLayout from "@/layout";
4
-import { ScrollView, Image, RichText } from "@tarojs/components";
4
+import {
5
+  ScrollView,
6
+  Image,
7
+  RichText,
8
+  View,
9
+  Text,
10
+  Input,
11
+  Picker,
12
+} from "@tarojs/components";
5
 import Disclaimer from "@/components/Disclaimer";
13
 import Disclaimer from "@/components/Disclaimer";
6
-
14
+import { useSelector } from "react-redux";
7
 import {
15
 import {
8
   // addActivityShareNum,
16
   // addActivityShareNum,
9
   signupActivity,
17
   signupActivity,
14
 import useParams from "@/utils/hooks/useParams";
22
 import useParams from "@/utils/hooks/useParams";
15
 import useShare from "@/utils/hooks/useShare";
23
 import useShare from "@/utils/hooks/useShare";
16
 import useFavor from "@/utils/hooks/useFavor";
24
 import useFavor from "@/utils/hooks/useFavor";
17
-
25
+import { getDownloadURL, times, transferImage } from "@/utils/tools";
18
 import "./index.scss";
26
 import "./index.scss";
19
 
27
 
20
 const activityStatusDict = {
28
 const activityStatusDict = {
43
 export default withLayout((props) => {
51
 export default withLayout((props) => {
44
   const { router, shareContent, trackData, person, page } = props;
52
   const { router, shareContent, trackData, person, page } = props;
45
   const { id } = router.params;
53
   const { id } = router.params;
54
+
55
+  const user = useSelector((state) => state.user);
56
+
46
   const [detail, setDetail] = useState();
57
   const [detail, setDetail] = useState();
58
+  const [canChoose, setCanChoose] = useState("none");
59
+  const [inputName, setInputName] = useState("");
60
+  const [selectorChecked, setSelectorChecked] = useState("1");
61
+  const [selector, setSelector] = useState("");
62
+
47
   const buildingId = detail?.buildingId;
63
   const buildingId = detail?.buildingId;
48
 
64
 
49
   const getDetail = (params) => {
65
   const getDetail = (params) => {
50
     Taro.showLoading();
66
     Taro.showLoading();
51
 
67
 
52
     queryActivityDetail(params).then((res) => {
68
     queryActivityDetail(params).then((res) => {
53
-      console.log(res, "queryActivityDetail");
54
-      setDetail(res);
69
+      const maxperson =
70
+        res.maxEnlistByPerson < 100 ? res.maxEnlistByPerson : 100;
71
+
72
+      setSelector(times(maxperson || 1).map((_, i) => `${i + 1}`));
55
 
73
 
74
+      setDetail(res);
56
       Taro.hideLoading();
75
       Taro.hideLoading();
57
     });
76
     });
58
   };
77
   };
89
   }, [id]);
108
   }, [id]);
90
 
109
 
91
   const handleSignup = () => {
110
   const handleSignup = () => {
92
-    const {
93
-      detail: { buildingId, dynamicId, isSign },
94
-    } = this.state;
95
-    const {
96
-      userInfo: {
97
-        person: { phone, name, nickname },
98
-      },
99
-    } = this.props;
111
+    const { buildingId, dynamicId, isSign } = detail;
100
 
112
 
101
     if (isSign) {
113
     if (isSign) {
102
       Taro.showToast({
114
       Taro.showToast({
105
       });
117
       });
106
       return;
118
       return;
107
     }
119
     }
120
+    setCanChoose("block");
121
+  };
108
 
122
 
109
-    this.setState({
110
-      canChoose: "block",
123
+  const comfire = (e) => {
124
+    const { dynamicId } =detail;
125
+    // console.log(user, "user");
126
+    const { userInfo: { person: { phone,  tel } } } = user
127
+    if (inputName == "") {
128
+      Taro.showToast({
129
+        title: "请输入姓名",
130
+        icon: "none",
131
+      });
132
+      return;
133
+    }
134
+
135
+    const payload = {
136
+      buildingId,
137
+      dynamicId,
138
+      name: inputName,
139
+      phone: phone ? phone : tel,
140
+      attendNum: selectorChecked,
141
+    };
142
+
143
+    signupActivity(payload).then((res) => {
144
+      Taro.showToast({
145
+        title: "报名成功",
146
+      });
147
+      setSelector('none')
148
+      // this.setState({
149
+      //   isSign: true,
150
+      //   canChoose: "none",
151
+      // });
152
+      setTimeout(() => {
153
+        getDetail(id);
154
+      }, 500);
111
     });
155
     });
112
   };
156
   };
113
 
157
 
158
+  function hideModal() {
159
+    setCanChoose("none");
160
+  }
161
+
162
+  const onInputText = (e) => {
163
+    setInputName(e.detail.value);
164
+  };
165
+
114
   const dymic = () => (
166
   const dymic = () => (
115
     <view className="Info">
167
     <view className="Info">
116
       <view>
168
       <view>
196
         </view>
248
         </view>
197
         <view className="right">
249
         <view className="right">
198
           <view>
250
           <view>
199
-            <button  open-type="share">
251
+            <button open-type="share">
200
               <text className="iconfont icon-fenxiang"></text>
252
               <text className="iconfont icon-fenxiang"></text>
201
               <text>分享</text>
253
               <text>分享</text>
202
             </button>
254
             </button>
297
           )}
349
           )}
298
         </view>
350
         </view>
299
       )}
351
       )}
352
+
353
+      <View className="page-body" style={{ display: canChoose }}>
354
+        <View className="mask" onClick={() => hideModal()}></View>
355
+        <View className="page-section">
356
+          <Text className="page-section__title">报名信息</Text>
357
+          <View className="page-content">
358
+            <Input
359
+              className="inputName"
360
+              onInput={onInputText}
361
+              type="text"
362
+              placeholder="请输入姓名"
363
+            />
364
+            <Picker
365
+              mode="selector"
366
+              range={selector}
367
+              onChange={(e) => setSelectorChecked(selector[e.detail.value])}
368
+            >
369
+              <View className="picker">
370
+                <Text>参加人数</Text>
371
+                <Text className="content">{selectorChecked}</Text>
372
+                <Text>人</Text>
373
+              </View>
374
+            </Picker>
375
+            <View onClick={comfire} className="comfire">
376
+              确认
377
+            </View>
378
+          </View>
379
+        </View>
380
+      </View>
300
     </>
381
     </>
301
   );
382
   );
302
 });
383
 });

+ 85
- 0
src/pages/index/activityDetail/index.scss Dosyayı Görüntüle

223
     }
223
     }
224
   }
224
   }
225
 }
225
 }
226
+
227
+.page-body {
228
+  z-index: 99;
229
+  position: fixed;
230
+  top: 0;
231
+  left: 0;
232
+  width: 100vw;
233
+  height: 100vh;
234
+
235
+  .mask {
236
+    background: rgba(0, 0, 0, 0.7);
237
+    width: 100%;
238
+    height: 100%;
239
+    left: 0;
240
+    top: 0;
241
+  }
242
+
243
+  .page-section {
244
+    position: absolute;
245
+    width: 600px;
246
+    top: 24%;
247
+    left: 75px;
248
+    border-radius: 10px;
249
+    background: white;
250
+    height: 500px;
251
+
252
+    &__title {
253
+      font-size: 36px;
254
+      text-align: center;
255
+      width: 100%;
256
+      line-height: 120px;
257
+      display: block;
258
+      color: black;
259
+    }
260
+
261
+    .page-content {
262
+      width: 490px;
263
+      margin: 0 auto;
264
+
265
+      .inputName {
266
+        width: 100%;
267
+        height: 80px;
268
+        line-height: 80px;
269
+        border: 1px solid #CCCCCC;
270
+        border-radius: 10px;
271
+        text-align: center;
272
+      }
273
+
274
+      .picker {
275
+        width: 100%;
276
+        margin-top: 30px;
277
+        display: flex;
278
+        justify-content: center;
279
+        border: 1px solid #CCCCCC;
280
+
281
+        Text {
282
+          display: block;
283
+          color: black;
284
+          height: 80px;
285
+          line-height: 80px;
286
+          width: auto;
287
+        }
288
+
289
+        .content {
290
+          text-align: center;
291
+          margin-right: 20px;
292
+          margin-left: 20px;
293
+        }
294
+      }
295
+
296
+      .comfire {
297
+        width: 490px;
298
+        height: 96px;
299
+        background: #BB9C79;;
300
+        border-radius: 7px;
301
+        line-height: 96px;
302
+        color: white;
303
+        text-align: center;
304
+        margin-top: 60px;
305
+        font-size: 36px;
306
+      }
307
+    }
308
+  }
309
+
310
+}