处理商品分享页面逻辑

src/components/index/ProductList/index.jsx

@@ -7,7 +7,7 @@ import React, {
 import { View, Text, Image, Button } from "@tarojs/components";
 import { AtCheckbox, AtActivityIndicator } from "taro-ui";
 import { setShareContent } from "../../../common/share";
-import { getShareJump } from "../../../service";
+import { getShareJump, getProductDetail } from "../../../service";
 import { handleLog } from "../../../common/track";
 import Taro from "@tarojs/taro";
 import "./index.less";
@@ -99,56 +99,75 @@ const ProductList = forwardRef((props, ref) => {
       onAddProduct && onAddProduct(productId, index);
     }
   };
-  // 设置分享标题
-  const handleShareTitleChange = (newTitle) => {
-    setShareTitle(newTitle);
-  };
-  useEffect(() => {
-    if (shareModalOpened) {
-      // 设置分享内容
-      setShareContent({
-        title: shareTitle || currentShareProduct.item_title,
-        path: `/pages/indexSub/productDetail/index?id=${
-          currentShareProduct.id
-        }&&isShare=${true}&&shareJump=${shareLink}`,
-        imageUrl: currentShareProduct.image_url,
-      });
-    }
-  }, [shareTitle]);
   // 分享商品
-  const shareProduct = (product, e) => {
+  const shareProduct = async (product, e) => {
     e.stopPropagation(); // 防止事件穿透
     setCurrentShareProduct(product);
+    const productRes = await getProductDetail({
+      goods_id: product.id,
+    });
+    // 使用 encodeURIComponent 编码商品详情数据
+    const encodedProductDetail = encodeURIComponent(JSON.stringify(productRes));
+    // 设置分享路径
+    const share_extend = JSON.stringify({
+      path: `pages/indexSub/productDetail/index?id=${product.id}&isShare=true&isSeckill=${isSeckill}&shareType=11&&shareUserId=${shareUserId}`,
+    });
     getShareJump({
-      share_type: 1,
+      share_type: 11,
       share_id: product.id,
+      share_extend,
     }).then((res) => {
-      // 打开分享弹窗
-      let shareUserId = "";
-      if (Taro.getStorageSync("loginInfo")) {
-        shareUserId = Taro.getStorageSync("loginInfo").id;
-      }
-      setShareContent({
-        title: shareTitle || product.item_title,
-        path: `/pages/indexSub/productDetail/index?id=${
-          product.id
-        }&&isShare=${true}&&shareJump=${
-          res.share_unique_value
-        }&&isSeckill=${isSeckill}&&shareUserId=${shareUserId}`,
-        imageUrl: product.image_url,
+      Taro.navigateTo({
+        url: `/pages/indexSub/sharePage/index?isSeckill=${isSeckill}&&tagTitle=${tagTitle}&&productDetail=${encodedProductDetail}&&shareJump=${res.share_unique_value}&&share_scheme_link=${encodeURIComponent(res.share_scheme_link)}&&shareUserId=${shareUserId}`,
       });
-      setShareLink(res.share_unique_value);
-      setShareModalOpened(true);
-      // 埋点
-      if (isSeckill) {
-        handleLog({
-          event_type: "share_product_link",
-          event_type_title: "点击分享赚",
-          goods_id: product.id,
-        });
-      }
     });
+    return;
+    // 埋点
+    if (isSeckill) {
+      handleLog({
+        event_type: "share_product_link",
+        event_type_title: "点击分享赚",
+        goods_id: product.id,
+      });
+    }
+    // getShareJump({
+    //   share_type: 1,
+    //   share_id: product.id,
+    // }).then((res) => {
+    //   // 打开分享弹窗
+    //   let shareUserId = "";
+    //   if (Taro.getStorageSync("loginInfo")) {
+    //     shareUserId = Taro.getStorageSync("loginInfo").id;
+    //   }
+    //   setShareContent({
+    //     title: shareTitle || product.item_title,
+    //     path: `/pages/indexSub/productDetail/index?id=${
+    //       product.id
+    //     }&&isShare=${true}&&shareJump=${
+    //       res.share_unique_value
+    //     }&&isSeckill=${isSeckill}&&shareUserId=${shareUserId}`,
+    //     imageUrl: product.image_url,
+    //   });
+    //   setShareLink(res.share_unique_value);
+    //   setShareModalOpened(true);
+    // });
   };
+  // 设置分享标题
+  // const handleShareTitleChange = (newTitle) => {
+  //   setShareTitle(newTitle);
+  // };
+  // useEffect(() => {
+  //   if (shareModalOpened) {
+  //     // 设置分享内容
+  //     setShareContent({
+  //       title: shareTitle || currentShareProduct.item_title,
+  //       path: `/pages/indexSub/productDetail/index?id=${
+  //         currentShareProduct.id
+  //       }&&isShare=${true}&&shareJump=${shareLink}`,
+  //       imageUrl: currentShareProduct.image_url,
+  //     });
+  //   }
+  // }, [shareTitle]);
   return (
     <View className="product-list-wrap">
       {/* {isSeckill && (
@@ -226,7 +245,7 @@ const ProductList = forwardRef((props, ref) => {
                     </View>
                   )}
                 </View>
-                <View className={`profit-line ${isShare ? 'flexEnd' : ''}`}>
+                <View className={`profit-line ${isShare ? "flexEnd" : ""}`}>
                   {!isShare ? (
                     Number(product.estimated_commission_buy) > 0 ? (
                       <View className="save-money">
@@ -296,7 +315,7 @@ const ProductList = forwardRef((props, ref) => {
       )}
       {isNoMore && !isEmpty && <View className="no-more">没有更多了~</View>}
       {/* 分享弹窗 */}
-      <ShareModal
+      {/* <ShareModal
         onClose={() => {
           setShareModalOpened(false);
           // 添加延时，等待关闭动画完成后再重置其他状态
@@ -309,7 +328,7 @@ const ProductList = forwardRef((props, ref) => {
         isOpened={shareModalOpened}
         product={currentShareProduct}
         onShareTitleChange={handleShareTitleChange}
-      />
+      /> */}
     </View>
   );
 });

src/pages/indexSub/productDetail/index.jsx

@@ -67,7 +67,7 @@ export default class Index extends Component {
     Taro.hideShareMenu({
       menus: ["shareAppMessage", "shareTimeline"],
     });
-    const {
+    let {
       id,
       isShare,
       isSeckill,
@@ -76,7 +76,9 @@ export default class Index extends Component {
       tagTitle,
       shareType,
       isShowBack,
+      share_unique_value
     } = Taro.getCurrentInstance().router.params;
+    shareJump = shareJump || share_unique_value
     let session_key = Taro.getStorageSync("session_key");
     let userInfo = Taro.getStorageSync("userInfo");
     let isShowSign = Taro.getStorageSync("isShowSign");
@@ -109,10 +111,10 @@ export default class Index extends Component {
         // 埋点
         if (this.state.isSeckill) {
           handleLog({
-            event_type:"direct_to_product",
-            event_type_title:'进入商品详情页',
+            event_type: "direct_to_product",
+            event_type_title: "进入商品详情页",
             goods_id: Number(this.state.id),
-            shareUserId:this.state.shareUserId
+            shareUserId: this.state.shareUserId,
           }); //埋点
         }
         // 判断是否显示签约弹窗
@@ -159,21 +161,38 @@ export default class Index extends Component {
       isOpened: "self",
     });
   };
+  // 绑定分享跳转标识
+  bindShareJump = async () => {
+    let shareJump = Taro.getStorageSync("shareJump");
+    await bindShareJump({
+      share_type: 1,
+      share_unique_value: shareJump,
+    });
+    Taro.removeStorageSync("shareJump");
+    Taro.removeStorageSync("shareType");
+  };
   // 分享
   openSharePopup = async () => {
-    // 使用 encodeURIComponent 编码商品详情数据
-    // const encodedProductDetail = encodeURIComponent(JSON.stringify(this.state.productDetail));
-    // Taro.navigateTo({
-    //   url: `/pages/indexSub/sharePage/index?isSeckill=${this.state.isSeckill}&shareJump=${this.state.shareJump}&tagTitle=${this.state.tagTitle}&productDetail=${encodedProductDetail}`,
-    // });
-    // return
+    let shareUserId = "";
+    if (Taro.getStorageSync("loginInfo")) {
+      shareUserId = Taro.getStorageSync("loginInfo").id;
+    }
+    // 设置分享路径
+    const share_extend = JSON.stringify({
+      path: `pages/indexSub/productDetail/index?id=${this.state.id}&isShare=true&isSeckill=${this.state.isSeckill}&shareType=11&&shareUserId=${shareUserId}`,
+    });
+    // 获取分享跳转标识
     const res = await getShareJump({
-      share_type: 1,
+      share_type: 11,
       share_id: this.state.id,
+      share_extend,
     });
-    this.setState({
-      shareJump: res.share_unique_value,
-      isOpened: "share",
+    // 使用 encodeURIComponent 编码商品详情数据
+    const encodedProductDetail = encodeURIComponent(
+      JSON.stringify(this.state.productDetail)
+    );
+    Taro.navigateTo({
+      url: `/pages/indexSub/sharePage/index?isSeckill=${this.state.isSeckill}&shareJump=${res.share_unique_value}&tagTitle=${this.state.tagTitle}&productDetail=${encodedProductDetail}&shareUserId=${shareUserId}&&share_scheme_link=${encodeURIComponent(res.share_scheme_link)}`,
     });
     // 埋点
     if (this.state.isSeckill) {
@@ -181,34 +200,34 @@ export default class Index extends Component {
         event_type: "share_product_link",
         event_type_title: "点击分享赚",
         goods_id: Number(this.state.id),
-        shareUserId:this.state.shareUserId
-      }); //埋点
+        shareUserId: this.state.shareUserId,
+      });
     }
-  };
-  // 绑定分享跳转标识
-  bindShareJump = async () => {
-    let shareJump = Taro.getStorageSync("shareJump");
-    await bindShareJump({
-      share_type: 1,
-      share_unique_value: shareJump,
-    });
-    Taro.removeStorageSync("shareJump");
-    Taro.removeStorageSync("shareType");
+    // return
+    // const res = await getShareJump({
+    //   share_type: 1,
+    //   share_id: this.state.id,
+    // });
+    // this.setState({
+    //   shareJump: res.share_unique_value,
+    //   isOpened: "share",
+    // });
+    // 埋点
   };
   // 设置分享标题
-  handleShareTitleChange = (newTitle) => {
-    this.setState({
-      shareTitle: newTitle,
-    });
-  };
+  // handleShareTitleChange = (newTitle) => {
+  //   this.setState({
+  //     shareTitle: newTitle,
+  //   });
+  // };
   // 配置分享内容
-  onShareAppMessage() {
-    return {
-      title: this.state.shareTitle || this.state.productDetail.item_title,
-      path: `/pages/indexSub/productDetail/index?id=${this.state.id}&&isShare=true&&isSeckill=${this.state.isSeckill}&&shareJump=${this.state.shareJump}&&tagTitle=${this.state.tagTitle}&&shareType=1`,
-      imageUrl: this.state.productDetail.images[0].img,
-    };
-  }
+  // onShareAppMessage() {
+  //   return {
+  //     title: this.state.shareTitle || this.state.productDetail.item_title,
+  //     path: `/pages/indexSub/productDetail/index?id=${this.state.id}&&isShare=true&&isSeckill=${this.state.isSeckill}&&shareJump=${this.state.shareJump}&&tagTitle=${this.state.tagTitle}&&shareType=1`,
+  //     imageUrl: this.state.productDetail.images[0].img,
+  //   };
+  // }
   // 添加返回方法
   handleBack = () => {
     const pages = Taro.getCurrentPages();
@@ -393,7 +412,7 @@ export default class Index extends Component {
           isSeckill={this.state.isSeckill}
         />
         {/* 分享弹窗 */}
-        {this.state.isOpened == "share" && (
+        {/* {this.state.isOpened == "share" && (
           <ShareModal
             onClose={() => {
               this.setState({
@@ -405,7 +424,7 @@ export default class Index extends Component {
             product={this.state.productDetail}
             onShareTitleChange={this.handleShareTitleChange}
           />
-        )}
+        )} */}
         {/* 签约弹窗 */}
         <SignModal
           isOpened={this.state.isOpened == "sign"}

src/pages/indexSub/sharePage/index.jsx

@@ -10,23 +10,29 @@ export default class Index extends Component {
     isSeckill: false, //是否是秒杀商品
     shareJump: "", //分享链接
     tagTitle: "", //标签标题
+    shareUserId: "", //分享用户id
+    share_scheme_link: "", //分享方案链接
   };
   componentDidMount() {
-    const { isSeckill, shareJump, tagTitle, productDetail } =
+    Taro.hideShareMenu({
+      menus: ["shareAppMessage", "shareTimeline"],
+    });
+    const { isSeckill, shareJump, tagTitle, productDetail,shareUserId,share_scheme_link } =
       Taro.getCurrentInstance().router.params;
-
     this.setState({
       isSeckill: isSeckill === "true",
       shareJump,
       tagTitle,
       productDetail: JSON.parse(decodeURIComponent(productDetail)),
       shareTitle: JSON.parse(decodeURIComponent(productDetail)).item_title,
+      shareUserId,
+      share_scheme_link:decodeURIComponent(share_scheme_link)
     });
   }
   // 设置分享标题
   handleShareTitleChange = (newTitle) => {
     this.setState({
-      shareTitle: newTitle,
+      shareTitle: newTitle.detail.value,
     });
   };
   // 保存图片到手机
@@ -58,41 +64,75 @@ export default class Index extends Component {
     });
   };
 
-  saveImage = () => {
-    Taro.downloadFile({
-      url: this.state.productDetail.images[0].img,
-      success: (res) => {
-        console.log(res);
+  saveImage = async () => {
+    Taro.showLoading({
+      title: '保存中...',
+    });
+    const { images } = this.state.productDetail;
+    try {
+      for (const image of images) {
+        // 下载图片
+        const downloadRes = await Taro.downloadFile({
+          url: image.img
+        });
 
-        Taro.saveImageToPhotosAlbum({
-          filePath: res.tempFilePath,
-          success: () => {
-            Taro.showToast({
-              title: "保存成功",
-              icon: "success",
-            });
-          },
-          fail: () => {
-            Taro.showToast({
-              title: "保存失败",
-              icon: "none",
-            });
-          },
+        // 保存到相册
+        await Taro.saveImageToPhotosAlbum({
+          filePath: downloadRes.tempFilePath
         });
-      },
-      fail: () => {
+      }
+
+      // 全部保存成功后提示
+      Taro.showToast({
+        title: "所有图片保存成功",
+        icon: "success",
+        duration: 2000
+      });
+    } catch (error) {
+      Taro.showToast({
+        title: "保存失败",
+        icon: "none",
+        duration: 2000
+      });
+    }
+  };
+  // 复制全部内容
+  handleCopyAll = () => {
+    Taro.setClipboardData({
+      data: `${this.state.shareTitle}\n${this.state.share_scheme_link}`,
+    });
+  };
+  // 复制标题
+  handleCopyTitle = () => {
+    Taro.setClipboardData({
+      data: this.state.shareTitle,
+      success: () => {
         Taro.showToast({
-          title: "图片下载失败",
+          title: "标题复制成功",
           icon: "none",
+          duration: 1500
         });
-      },
+      }
+    });
+  };
+  // 复制链接
+  handleCopyLink = () => {
+    Taro.setClipboardData({
+      data: this.state.share_scheme_link,
+      success: () => {
+        Taro.showToast({
+          title: "链接复制成功",
+          icon: "none",
+          duration: 1500
+        });
+      }
     });
   };
   // 配置分享内容
   onShareAppMessage() {
     return {
       title: this.state.shareTitle || this.state.productDetail.item_title,
-      path: `/pages/indexSub/productDetail/index?id=${this.state.productDetail.id}&&isShare=true&&isSeckill=${this.state.isSeckill}&&shareJump=${this.state.shareJump}&&tagTitle=${this.state.tagTitle}&&shareType=1`,
+      path: `/pages/indexSub/productDetail/index?id=${this.state.productDetail.id}&&isShare=true&&isSeckill=${this.state.isSeckill}&&shareJump=${this.state.shareJump}&&tagTitle=${this.state.tagTitle}&&shareType=11&&shareUserId=${this.state.shareUserId}`,
       imageUrl: this.state.productDetail.images[0].img,
     };
   }
@@ -125,7 +165,7 @@ export default class Index extends Component {
         <View className="text-box">
           <View className="text-box-top">
             <View className="text-box-title">文案素材</View>
-            <View className="text-box-save">复制全部内容</View>
+            <View onClick={this.handleCopyAll} className="text-box-save">复制全部内容</View>
           </View>
           <View className="text-box-content">
             {/* 商品标题盒子 */}
@@ -134,16 +174,18 @@ export default class Index extends Component {
                 <View className="text-box-content-title-top-title">
                   商品标题
                 </View>
-                <View className="text-box-content-title-top-copy">
+                <View onClick={this.handleCopyTitle} className="text-box-content-title-top-copy">
                   复制标题
                 </View>
               </View>
               {/* 分享标题输入框 */}
-              <Input
-                onInput={this.handleShareTitleChange}
-                className="input"
-                value={this.state.shareTitle}
-              />
+              <View className="text-box-content-title-input">
+                <Input
+                  onInput={this.handleShareTitleChange}
+                  className="input"
+                  value={this.state.shareTitle}
+                />
+              </View>
             </View>
             {/* 商品链接盒子 */}
             <View className="text-box-content-link">
@@ -157,12 +199,12 @@ export default class Index extends Component {
                 <Input
                   onInput={this.handleShareTitleChange}
                   className="linkInput"
-                  value={this.state.shareTitle}
+                  value={this.state.share_scheme_link}
                   disabled
                 />
                 <View className="copy-box">
                   <View className="copy-box-line"></View>
-                  <Image className="copy-box-icon" src='https://yushi.tos-cn-beijing.volces.com/productDetail/copy.png' />
+                  <Image onClick={this.handleCopyLink} className="copy-box-icon" src='https://yushi.tos-cn-beijing.volces.com/productDetail/copy.png' />
                 </View>
               </View>
             </View>

src/pages/indexSub/sharePage/index.less

@@ -115,17 +115,21 @@
                     }
                 }
 
-                .input {
+                .text-box-content-title-input {
                     margin-top: 30px;
-                    width: 100%;
-                    height: 94px;
-                    border-radius: 34px;
                     border: 4px solid #F6C71A;
-                    padding-left: 24px; 
-                    padding-right: 24px;
-                    font-size: 28px;
-                    color: #999999;
-                    box-sizing: border-box;
+                    border-radius: 34px;
+                    overflow: hidden;
+                    .input {
+                        width: 100%;
+                        height: 94px;
+                        border-radius: 34px;
+                        padding-left: 24px;
+                        padding-right: 24px;
+                        font-size: 28px;
+                        color: #999999;
+                        box-sizing: border-box;
+                    }
                 }
             }
 
@@ -134,6 +138,7 @@
                 display: flex;
                 flex-direction: column;
                 justify-content: space-between;
+
                 .text-box-content-link-top {
                     padding-left: 10px;
 
@@ -142,9 +147,11 @@
                         color: #333;
                     }
                 }
+
                 .text-box-content-link-bottom {
                     position: relative;
                     margin-top: 30px;
+
                     .copy-box {
                         position: absolute;
                         right: 19px;
@@ -152,20 +159,23 @@
                         transform: translateY(-50%);
                         display: flex;
                         align-items: center;
+
                         .copy-box-line {
                             width: 1px;
                             height: 54px;
                             background-color: #FF8119;
                             margin-right: 39px;
                         }
+
                         .copy-box-icon {
                             width: 34px;
                             height: 34px;
                         }
                     }
                 }
+
                 .linkInput {
-                    width:100%;
+                    width: 100%;
                     height: 94px;
                     border-radius: 34px;
                     border: none;
@@ -200,6 +210,7 @@
             border: none;
         }
     }
+
     .share-button {
         position: fixed;
         bottom: 30px;
@@ -216,4 +227,4 @@
         justify-content: center;
         align-items: center;
     }
-}
+}

src/pages/login/index.jsx

@@ -83,6 +83,7 @@ export default class Index extends Component {
             Taro.removeStorageSync("shareType");
             if (global.globalData.optionsData) {
               delete global.globalData.optionsData.shareJump;
+              delete global.globalData.optionsData.share_unique_value;
             }
           }
         } finally {

src/pages/mine/index.jsx

@@ -148,9 +148,9 @@ export default class Index extends Component {
             ></Image>
           </View>
         </View>
-        <Button onClick={() => Taro.navigateTo({ url: '/pages/indexSub/activity/index' })}>
+        {/* <Button onClick={() => Taro.navigateTo({ url: '/pages/indexSub/activity/index' })}>
           活动页面
-        </Button>
+        </Button> */}
         {/* 我的推荐人 */}
         {mineData.user_relations?.id && (
           <View className="recommend-box">