|
@@ -1,9 +1,17 @@
|
1
|
1
|
import { useState, useEffect } from "react";
|
2
|
2
|
import Taro from "@tarojs/taro";
|
3
|
3
|
import withLayout from "@/layout";
|
4
|
|
-import { ScrollView, Image, RichText, Button } from "@tarojs/components";
|
|
4
|
+import {
|
|
5
|
+ ScrollView,
|
|
6
|
+ Image,
|
|
7
|
+ RichText,
|
|
8
|
+ View,
|
|
9
|
+ Text,
|
|
10
|
+ Input,
|
|
11
|
+ Picker,
|
|
12
|
+} from "@tarojs/components";
|
5
|
13
|
import Disclaimer from "@/components/Disclaimer";
|
6
|
|
-
|
|
14
|
+import { useSelector } from "react-redux";
|
7
|
15
|
import {
|
8
|
16
|
// addActivityShareNum,
|
9
|
17
|
signupActivity,
|
|
@@ -16,12 +24,21 @@ import useShare from "@/utils/hooks/useShare";
|
16
|
24
|
import useFavor from "@/utils/hooks/useFavor";
|
17
|
25
|
import useStatus from './useStatus'
|
18
|
26
|
|
|
27
|
+import { getDownloadURL, times, transferImage } from "@/utils/tools";
|
19
|
28
|
import "./index.scss";
|
20
|
29
|
|
21
|
30
|
export default withLayout((props) => {
|
22
|
31
|
const { router, shareContent, trackData, person, page } = props;
|
23
|
32
|
const { id } = router.params;
|
|
33
|
+
|
|
34
|
+ const user = useSelector((state) => state.user);
|
|
35
|
+
|
24
|
36
|
const [detail, setDetail] = useState();
|
|
37
|
+ const [canChoose, setCanChoose] = useState("none");
|
|
38
|
+ const [inputName, setInputName] = useState("");
|
|
39
|
+ const [selectorChecked, setSelectorChecked] = useState("1");
|
|
40
|
+ const [selector, setSelector] = useState("");
|
|
41
|
+
|
25
|
42
|
const buildingId = detail?.buildingId;
|
26
|
43
|
|
27
|
44
|
const [btnText, btnDisabled] = useStatus(detail)
|
|
@@ -30,9 +47,14 @@ export default withLayout((props) => {
|
30
|
47
|
Taro.showLoading();
|
31
|
48
|
|
32
|
49
|
queryActivityDetail(params).then((res) => {
|
33
|
|
- console.log(res, "queryActivityDetail");
|
34
|
|
- setDetail(res);
|
|
50
|
+ // const maxperson =
|
|
51
|
+ // res.maxEnlistByPerson < 100 ? res.maxEnlistByPerson : 100;
|
|
52
|
+
|
|
53
|
+ const maxperson = 10
|
35
|
54
|
|
|
55
|
+ setSelector(times(maxperson).map((_, i) => `${i + 1}`));
|
|
56
|
+
|
|
57
|
+ setDetail(res);
|
36
|
58
|
Taro.hideLoading();
|
37
|
59
|
});
|
38
|
60
|
};
|
|
@@ -69,38 +91,58 @@ export default withLayout((props) => {
|
69
|
91
|
}, [id]);
|
70
|
92
|
|
71
|
93
|
const handleSignup = () => {
|
72
|
|
- const {
|
73
|
|
- detail: { buildingId, dynamicId, isSign },
|
74
|
|
- } = this.state;
|
75
|
|
- const {
|
76
|
|
- userInfo: {
|
77
|
|
- person: { phone, name, nickname },
|
78
|
|
- },
|
79
|
|
- } = this.props;
|
|
94
|
+ setCanChoose("block");
|
|
95
|
+ };
|
80
|
96
|
|
81
|
|
- if (isSign) {
|
|
97
|
+ const comfire = (e) => {
|
|
98
|
+ const { dynamicId } =detail;
|
|
99
|
+ // console.log(user, "user");
|
|
100
|
+ const { userInfo: { person: { phone, tel } } } = user
|
|
101
|
+ if (inputName == "") {
|
82
|
102
|
Taro.showToast({
|
|
103
|
+ title: "请输入姓名",
|
83
|
104
|
icon: "none",
|
84
|
|
- title: "你已报名成功",
|
85
|
105
|
});
|
86
|
106
|
return;
|
87
|
107
|
}
|
88
|
108
|
|
89
|
|
- this.setState({
|
90
|
|
- canChoose: "block",
|
|
109
|
+ const payload = {
|
|
110
|
+ buildingId,
|
|
111
|
+ dynamicId,
|
|
112
|
+ name: inputName,
|
|
113
|
+ phone: phone ? phone : tel,
|
|
114
|
+ attendNum: selectorChecked,
|
|
115
|
+ };
|
|
116
|
+
|
|
117
|
+ signupActivity(payload).then((res) => {
|
|
118
|
+ Taro.showToast({
|
|
119
|
+ title: "报名成功",
|
|
120
|
+ });
|
|
121
|
+ setCanChoose('none')
|
|
122
|
+ setTimeout(() => {
|
|
123
|
+ getDetail(id);
|
|
124
|
+ }, 500);
|
91
|
125
|
});
|
92
|
126
|
};
|
93
|
127
|
|
|
128
|
+ function hideModal() {
|
|
129
|
+ setCanChoose("none");
|
|
130
|
+ }
|
|
131
|
+
|
|
132
|
+ const onInputText = (e) => {
|
|
133
|
+ setInputName(e.detail.value);
|
|
134
|
+ };
|
|
135
|
+
|
94
|
136
|
const dymic = () => (
|
95
|
|
- <view className="Info">
|
|
137
|
+ <view className='Info'>
|
96
|
138
|
<view>
|
97
|
|
- <view className="Title flex-h">
|
98
|
|
- <view className="flex-item">
|
|
139
|
+ <view className='Title flex-h'>
|
|
140
|
+ <view className='flex-item'>
|
99
|
141
|
<text>{detail.halfTitle}</text>
|
100
|
142
|
</view>
|
101
|
|
- <text className="Tips">{detail.enlisted || 0}人已报名</text>
|
|
143
|
+ <text className='Tips'>{detail.enlisted || 0}人已报名</text>
|
102
|
144
|
</view>
|
103
|
|
- <text className="Time">
|
|
145
|
+ <text className='Time'>
|
104
|
146
|
报名截止时间:
|
105
|
147
|
{getDateFormat(
|
106
|
148
|
new Date(detail.enlistEnd).valueOf(),
|
|
@@ -108,16 +150,16 @@ export default withLayout((props) => {
|
108
|
150
|
"yyyy/M/d"
|
109
|
151
|
)}
|
110
|
152
|
</text>
|
111
|
|
- <text className="Name">{detail.title}</text>
|
112
|
|
- <view className="flex-h Address">
|
|
153
|
+ <text className='Name'>{detail.title}</text>
|
|
154
|
+ <view className='flex-h Address'>
|
113
|
155
|
<text>地址:</text>
|
114
|
|
- <view className="flex-item">
|
|
156
|
+ <view className='flex-item'>
|
115
|
157
|
<text>{detail.address}</text>
|
116
|
158
|
</view>
|
117
|
159
|
</view>
|
118
|
|
- <view className="flex-h Date">
|
|
160
|
+ <view className='flex-h Date'>
|
119
|
161
|
<text>时间:</text>
|
120
|
|
- <view className="flex-item">
|
|
162
|
+ <view className='flex-item'>
|
121
|
163
|
<text>
|
122
|
164
|
{getDateFormat(
|
123
|
165
|
new Date(detail.startDate).valueOf(),
|
|
@@ -133,8 +175,8 @@ export default withLayout((props) => {
|
133
|
175
|
</text>
|
134
|
176
|
</view>
|
135
|
177
|
</view>
|
136
|
|
- <view className="Btn">
|
137
|
|
- <button open-type="share">
|
|
178
|
+ <view className='Btn'>
|
|
179
|
+ <button open-type='share'>
|
138
|
180
|
<text>分享好友</text>
|
139
|
181
|
</button>
|
140
|
182
|
</view>
|
|
@@ -143,23 +185,23 @@ export default withLayout((props) => {
|
143
|
185
|
);
|
144
|
186
|
|
145
|
187
|
const house = () => (
|
146
|
|
- <view className="houseInfo">
|
|
188
|
+ <view className='houseInfo'>
|
147
|
189
|
{/* <view> */}
|
148
|
|
- <view className="flex-h">
|
149
|
|
- <view className="left">
|
150
|
|
- <view className="Title">
|
151
|
|
- <view className="flex-item">
|
|
190
|
+ <view className='flex-h'>
|
|
191
|
+ <view className='left'>
|
|
192
|
+ <view className='Title'>
|
|
193
|
+ <view className='flex-item'>
|
152
|
194
|
<text>{detail.title}</text>
|
153
|
195
|
</view>
|
154
|
196
|
</view>
|
155
|
|
- <view className="flex-h Address">
|
156
|
|
- <text className="iconfont icon-dingwei"></text>
|
157
|
|
- <view className="flex-item">
|
|
197
|
+ <view className='flex-h Address'>
|
|
198
|
+ <text className='iconfont icon-dingwei'></text>
|
|
199
|
+ <view className='flex-item'>
|
158
|
200
|
<text>{detail.address}</text>
|
159
|
201
|
</view>
|
160
|
|
- <text className="price">价格待定</text>
|
|
202
|
+ <text className='price'>价格待定</text>
|
161
|
203
|
</view>
|
162
|
|
- <text className="flex-h Time">
|
|
204
|
+ <text className='flex-h Time'>
|
163
|
205
|
时间:
|
164
|
206
|
{getDateFormat(
|
165
|
207
|
new Date(detail.startDate).valueOf(),
|
|
@@ -174,50 +216,50 @@ export default withLayout((props) => {
|
174
|
216
|
)}
|
175
|
217
|
</text>
|
176
|
218
|
</view>
|
177
|
|
- <view className="right">
|
|
219
|
+ <view className='right'>
|
178
|
220
|
<view>
|
179
|
|
- <button open-type="share">
|
180
|
|
- <text className="iconfont icon-fenxiang"></text>
|
|
221
|
+ <button open-type='share'>
|
|
222
|
+ <text className='iconfont icon-fenxiang'></text>
|
181
|
223
|
<text>分享</text>
|
182
|
224
|
</button>
|
183
|
225
|
{/* <text className="iconfont icon-dingwei"></text>
|
184
|
226
|
<text>分享</text> */}
|
185
|
227
|
</view>
|
186
|
228
|
<view>
|
187
|
|
- <text className="iconfont icon-dingwei"></text>
|
|
229
|
+ <text className='iconfont icon-dingwei'></text>
|
188
|
230
|
<text>海报</text>
|
189
|
231
|
</view>
|
190
|
232
|
</view>
|
191
|
233
|
</view>
|
192
|
234
|
|
193
|
|
- <view className="lastdate">
|
194
|
|
- <text className="text">距离结束还有</text>
|
195
|
|
- <text className="text day">7</text>
|
196
|
|
- <text className="text">天</text>
|
197
|
|
- <text className="text time">2</text>
|
198
|
|
- <text className="text">时</text>
|
199
|
|
- <text className="text time">4</text>
|
200
|
|
- <text className="text">分</text>
|
201
|
|
- <text className="text time">5</text>
|
202
|
|
- <text className="text">秒</text>
|
|
235
|
+ <view className='lastdate'>
|
|
236
|
+ <text className='text'>距离结束还有</text>
|
|
237
|
+ <text className='text day'>7</text>
|
|
238
|
+ <text className='text'>天</text>
|
|
239
|
+ <text className='text time'>2</text>
|
|
240
|
+ <text className='text'>时</text>
|
|
241
|
+ <text className='text time'>4</text>
|
|
242
|
+ <text className='text'>分</text>
|
|
243
|
+ <text className='text time'>5</text>
|
|
244
|
+ <text className='text'>秒</text>
|
203
|
245
|
{/* <view>距离结束还有</view> */}
|
204
|
246
|
</view>
|
205
|
247
|
|
206
|
|
- <view className="flex-h join">
|
207
|
|
- <view className="Collect" onClick={handleFavor}>
|
|
248
|
+ <view className='flex-h join'>
|
|
249
|
+ <view className='Collect' onClick={handleFavor}>
|
208
|
250
|
<text
|
209
|
|
- className="iconfont icon-shoucang"
|
|
251
|
+ className='iconfont icon-shoucang'
|
210
|
252
|
style={isSaved ? { color: "red" } : undefined}
|
211
|
253
|
></text>
|
212
|
254
|
<text>{isSaved ? "已收藏" : "收藏"}</text>
|
213
|
255
|
</view>
|
214
|
|
- <view className="enlisted">
|
|
256
|
+ <view className='enlisted'>
|
215
|
257
|
<view>
|
216
|
|
- <text className="iconfont icon-shoucang"></text>
|
|
258
|
+ <text className='iconfont icon-shoucang'></text>
|
217
|
259
|
<text>{detail.enlisted || 0}人已报名</text>
|
218
|
260
|
</view>
|
219
|
261
|
</view>
|
220
|
|
- <button className="btn" disabled={btnDisabled} onClick={handleSignup}>
|
|
262
|
+ <button className='btn' disabled={btnDisabled} onClick={handleSignup}>
|
221
|
263
|
<text>{btnText}</text>
|
222
|
264
|
</button>
|
223
|
265
|
</view>
|
|
@@ -228,23 +270,23 @@ export default withLayout((props) => {
|
228
|
270
|
return (
|
229
|
271
|
<>
|
230
|
272
|
{detail && (
|
231
|
|
- <view className="Page activityDetail flex-v">
|
232
|
|
- <view className="flex-item">
|
|
273
|
+ <view className='Page activityDetail flex-v'>
|
|
274
|
+ <view className='flex-item'>
|
233
|
275
|
<view>
|
234
|
276
|
<ScrollView scroll-y>
|
235
|
|
- <view className="PageContent">
|
236
|
|
- <view className="Top">
|
|
277
|
+ <view className='PageContent'>
|
|
278
|
+ <view className='Top'>
|
237
|
279
|
<Image
|
238
|
|
- mode="aspectFill"
|
|
280
|
+ mode='aspectFill'
|
239
|
281
|
src={getImgURL(detail.bannerListImg)}
|
240
|
|
- className="centerLabel"
|
|
282
|
+ className='centerLabel'
|
241
|
283
|
></Image>
|
242
|
284
|
</view>
|
243
|
285
|
|
244
|
286
|
{detail.type == "dymic" && dymic()}
|
245
|
287
|
{detail.type == "house" && house()}
|
246
|
|
- <view className="ActivityIntro">
|
247
|
|
- <view className="Title">
|
|
288
|
+ <view className='ActivityIntro'>
|
|
289
|
+ <view className='Title'>
|
248
|
290
|
<text>活动介绍</text>
|
249
|
291
|
</view>
|
250
|
292
|
<RichText nodes={detail.desc} />
|
|
@@ -256,27 +298,56 @@ export default withLayout((props) => {
|
256
|
298
|
</view>
|
257
|
299
|
</view>
|
258
|
300
|
{detail.type == "dymic" && (
|
259
|
|
- <view className="PageBottom flex-h">
|
260
|
|
- <button className="Share" open-type="share">
|
261
|
|
- <text className="iconfont icon-fenxiang"></text>
|
|
301
|
+ <view className='PageBottom flex-h'>
|
|
302
|
+ <button className='Share' open-type='share'>
|
|
303
|
+ <text className='iconfont icon-fenxiang'></text>
|
262
|
304
|
<text>分享</text>
|
263
|
305
|
</button>
|
264
|
|
- <view className="Collect" onClick={handleFavor}>
|
|
306
|
+ <view className='Collect' onClick={handleFavor}>
|
265
|
307
|
<text
|
266
|
|
- className="iconfont icon-shoucang"
|
|
308
|
+ className='iconfont icon-shoucang'
|
267
|
309
|
style={isSaved ? { color: "red" } : undefined}
|
268
|
310
|
></text>
|
269
|
311
|
<text>{isSaved ? "已收藏" : "收藏"}</text>
|
270
|
312
|
</view>
|
271
|
|
- <view className="flex-item"></view>
|
|
313
|
+ <view className='flex-item'></view>
|
272
|
314
|
|
273
|
|
- <button disabled={btnDisabled} className="Post" onClick={handleSignup}>
|
|
315
|
+ <button disabled={btnDisabled} className='Post' onClick={handleSignup}>
|
274
|
316
|
{btnText}
|
275
|
317
|
</button>
|
276
|
318
|
</view>
|
277
|
319
|
)}
|
278
|
320
|
</view>
|
279
|
321
|
)}
|
|
322
|
+
|
|
323
|
+ <View className='page-body' style={{ display: canChoose }}>
|
|
324
|
+ <View className='mask' onClick={() => hideModal()}></View>
|
|
325
|
+ <View className='page-section'>
|
|
326
|
+ <Text className='page-section__title'>报名信息</Text>
|
|
327
|
+ <View className='page-content'>
|
|
328
|
+ <Input
|
|
329
|
+ className='inputName'
|
|
330
|
+ onInput={onInputText}
|
|
331
|
+ type='text'
|
|
332
|
+ placeholder='请输入姓名'
|
|
333
|
+ />
|
|
334
|
+ <Picker
|
|
335
|
+ mode='selector'
|
|
336
|
+ range={selector}
|
|
337
|
+ onChange={(e) => setSelectorChecked(selector[e.detail.value])}
|
|
338
|
+ >
|
|
339
|
+ <View className='picker'>
|
|
340
|
+ <Text>参加人数</Text>
|
|
341
|
+ <Text className='content'>{selectorChecked}</Text>
|
|
342
|
+ <Text>人</Text>
|
|
343
|
+ </View>
|
|
344
|
+ </Picker>
|
|
345
|
+ <View onClick={comfire} className='comfire'>
|
|
346
|
+ 确认
|
|
347
|
+ </View>
|
|
348
|
+ </View>
|
|
349
|
+ </View>
|
|
350
|
+ </View>
|
280
|
351
|
</>
|
281
|
352
|
);
|
282
|
353
|
});
|