|
@@ -3,36 +3,50 @@ import { View, Image, Text, Button, Input } from "@tarojs/components";
|
3
|
3
|
import "./index.less";
|
4
|
4
|
import { useState, useEffect } from "react";
|
5
|
5
|
|
|
6
|
+// 分享模态框组件
|
6
|
7
|
export default function shareModal(props) {
|
7
|
|
- const { isOpened, onClose, product, onShareTitleChange } = props;
|
|
8
|
+ // 解构props,获取必要参数
|
|
9
|
+ const { isOpened, onClose, product, onShareTitleChange } = props;
|
|
10
|
+ // 分享标题状态管理
|
8
|
11
|
const [shareTitle, setShareTitle] = useState('');
|
9
|
12
|
|
|
13
|
+ // 当商品信息更新时,设置分享标题
|
10
|
14
|
useEffect(() => {
|
11
|
15
|
if (product?.item_title) {
|
12
|
16
|
setShareTitle(product.item_title);
|
13
|
17
|
}
|
14
|
18
|
}, [product]);
|
|
19
|
+
|
|
20
|
+ // 监听模态框开关状态
|
|
21
|
+ // 关闭时清空标题,打开时设置为商品标题
|
15
|
22
|
useEffect(() => {
|
16
|
23
|
if (!isOpened) {
|
17
|
24
|
setShareTitle('');
|
18
|
|
- }else{
|
|
25
|
+ } else {
|
19
|
26
|
setShareTitle(product.item_title);
|
20
|
27
|
}
|
21
|
28
|
}, [isOpened]);
|
|
29
|
+
|
|
30
|
+ // 处理输入框内容变化
|
22
|
31
|
const handleInputChange = (e) => {
|
23
|
32
|
const newTitle = e.detail.value;
|
24
|
33
|
setShareTitle(newTitle);
|
25
|
34
|
onShareTitleChange?.(newTitle);
|
26
|
35
|
}
|
|
36
|
+
|
27
|
37
|
return (
|
28
|
38
|
<View className="share-modal">
|
29
|
39
|
<AtModal isOpened={isOpened} closeOnClickOverlay={true} onClose={onClose}>
|
30
|
40
|
<AtModalContent>
|
31
|
41
|
{product && (
|
32
|
42
|
<View className="container">
|
|
43
|
+ {/* 商品图片展示 */}
|
33
|
44
|
<Image className="product-image" src={product.image_url} mode="aspectFill" />
|
|
45
|
+ {/* 商品标题展示 */}
|
34
|
46
|
<View className="title">{product.item_title}</View>
|
|
47
|
+ {/* 分享标题输入框 */}
|
35
|
48
|
<Input onInput={handleInputChange} className="input" value={shareTitle} />
|
|
49
|
+ {/* 分享按钮 */}
|
36
|
50
|
<Button openType="share" onClick={onClose}>
|
37
|
51
|
<View className="share-button">
|
38
|
52
|
分享
|
|
@@ -40,8 +54,8 @@ export default function shareModal(props) {
|
40
|
54
|
</Button>
|
41
|
55
|
</View>
|
42
|
56
|
)}
|
43
|
|
- </AtModalContent>
|
44
|
|
- </AtModal>
|
|
57
|
+ </AtModalContent>
|
|
58
|
+ </AtModal>
|
45
|
59
|
</View>
|
46
|
60
|
);
|
47
|
61
|
}
|