商品分享页修改上传

src/components/index/ProductList/index.jsx

@@ -7,8 +7,9 @@ import React, {
 import { View, Text, Image, Button } from "@tarojs/components";
 import { AtCheckbox, AtActivityIndicator } from "taro-ui";
 import { setShareContent } from "../../../common/share";
-import { getShareJump, getProductDetail } from "../../../service";
+import { getShareJump } from "../../../service";
 import { handleLog } from "../../../common/track";
+import { isDebounce } from "../../../common/debounce";
 import Taro from "@tarojs/taro";
 import "./index.less";
 import ShareModal from "../../shareModal";
@@ -101,27 +102,12 @@ const ProductList = forwardRef((props, ref) => {
   };
   // 分享商品
   const shareProduct = async (product, e) => {
+    if (!isDebounce(500)) return; // 如果在500ms内重复触发，直接返回
     e.stopPropagation(); // 防止事件穿透
     setCurrentShareProduct(product);
-    const productRes = await getProductDetail({
-      goods_id: product.id,
+    Taro.navigateTo({
+      url: `/pages/indexSub/sharePage/index?isSeckill=${isSeckill}&&tagTitle=${tagTitle}&&shareUserId=${shareUserId}&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: 11,
-      share_id: product.id,
-      share_extend,
-    }).then((res) => {
-      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}`,
-      });
-    });
-    return;
     // 埋点
     if (isSeckill) {
       handleLog({

src/pages/indexSub/productDetail/index.jsx

@@ -9,6 +9,7 @@ import {
   bindShareJump,
 } from "../../../service";
 import { handleLog } from "../../../common/track";
+import { isDebounce } from "../../../common/debounce";
 import "./index.less";
 import Taro from "@tarojs/taro";
 import productDetailIcon from "../../../images/productDetail/productDetailIcon.png";
@@ -173,26 +174,17 @@ export default class Index extends Component {
   };
   // 分享
   openSharePopup = async () => {
+    if (!isDebounce(500)) return; // 如果在500ms内重复触发，直接返回
     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: 11,
-      share_id: this.state.id,
-      share_extend,
-    });
     // 使用 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)}`,
+      url: `/pages/indexSub/sharePage/index?isSeckill=${this.state.isSeckill}&tagTitle=${this.state.tagTitle}&productDetail=${encodedProductDetail}&shareUserId=${shareUserId}`,
     });
     // 埋点
     if (this.state.isSeckill) {

src/pages/indexSub/sharePage/index.jsx

@@ -1,10 +1,12 @@
 import { Component } from "react";
-import { View, Image, Text, Button, Input } from "@tarojs/components";
+import { View, Image, Button, Input } from "@tarojs/components";
+import { getShareJump, getProductDetail } from "../../../service/index";
 import Taro from "@tarojs/taro";
 import "./index.less";
 
 export default class Index extends Component {
   state = {
+    id: "", //商品id(专题列表分享过来的)
     shareTitle: "", //分享标题
     productDetail: {}, //商品详情
     isSeckill: false, //是否是秒杀商品
@@ -17,18 +19,58 @@ export default class Index extends Component {
     Taro.hideShareMenu({
       menus: ["shareAppMessage", "shareTimeline"],
     });
-    const { isSeckill, shareJump, tagTitle, productDetail,shareUserId,share_scheme_link } =
+    const { isSeckill, tagTitle, productDetail, shareUserId, id } =
       Taro.getCurrentInstance().router.params;
+    this.setState(
+      {
+        isSeckill: isSeckill === "true",
+        tagTitle,
+        productDetail: productDetail ? JSON.parse(decodeURIComponent(productDetail)) : {},
+        shareTitle: productDetail ? JSON.parse(decodeURIComponent(productDetail)).item_title : "",
+        shareUserId,
+        id: id,
+      },
+      async () => {
+        Taro.showLoading({
+          title: "加载中...",
+        });
+        try {
+          await Promise.all([
+            this.getProductDetail(id),
+            this.getShareJump(id)
+          ]);
+        } finally {
+          Taro.hideLoading();
+        }
+      }
+    );
+  }
+  // 获取商品详情
+  getProductDetail = async (id='') => {
+    const res = await getProductDetail({
+      goods_id: id||this.state.productDetail.id,
+    });
     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)
+      productDetail: res,
+      shareTitle: res.item_title,
     });
   }
+  // 获取分享跳转标识
+  getShareJump = async (id='') => {
+    // 设置分享路径
+    const share_extend = JSON.stringify({
+      path: `pages/indexSub/productDetail/index?id=${ id||this.state.productDetail.id}&isShare=true&isSeckill=${this.state.isSeckill}&shareType=11&&shareUserId=${this.state.shareUserId}`,
+    });
+    const res = await getShareJump({
+      share_type: 11,
+      share_id: id||this.state.productDetail.id,
+      share_extend,
+    });
+    this.setState({
+      shareJump: res.share_unique_value,
+      share_scheme_link: res.share_scheme_link,
+    });
+  };
   // 设置分享标题
   handleShareTitleChange = (newTitle) => {
     this.setState({
@@ -66,33 +108,35 @@ export default class Index extends Component {
 
   saveImage = async () => {
     Taro.showLoading({
-      title: '保存中...',
+      title: "保存中...",
     });
     const { images } = this.state.productDetail;
     try {
       for (const image of images) {
-        // 下载图片
-        const downloadRes = await Taro.downloadFile({
-          url: image.img
+        // 转换图片链接从 http 到 https
+        const imgUrl = image.img.startsWith("http:")
+          ? image.img.replace("http:", "https:")
+          : image.img;
+        // 先获取图片信息
+        const imageInfo = await Taro.getImageInfo({
+          src: imgUrl,
         });
-
-        // 保存到相册
+        // 使用图片路径保存
         await Taro.saveImageToPhotosAlbum({
-          filePath: downloadRes.tempFilePath
+          filePath: imageInfo.path,
         });
       }
-
       // 全部保存成功后提示
       Taro.showToast({
         title: "所有图片保存成功",
         icon: "success",
-        duration: 2000
+        duration: 2000,
       });
     } catch (error) {
       Taro.showToast({
         title: "保存失败",
         icon: "none",
-        duration: 2000
+        duration: 2000,
       });
     }
   };
@@ -110,9 +154,9 @@ export default class Index extends Component {
         Taro.showToast({
           title: "标题复制成功",
           icon: "none",
-          duration: 1500
+          duration: 1500,
         });
-      }
+      },
     });
   };
   // 复制链接
@@ -123,9 +167,9 @@ export default class Index extends Component {
         Taro.showToast({
           title: "链接复制成功",
           icon: "none",
-          duration: 1500
+          duration: 1500,
         });
-      }
+      },
     });
   };
   // 配置分享内容
@@ -165,7 +209,9 @@ export default class Index extends Component {
         <View className="text-box">
           <View className="text-box-top">
             <View className="text-box-title">文案素材</View>
-            <View onClick={this.handleCopyAll} className="text-box-save">复制全部内容</View>
+            <View onClick={this.handleCopyAll} className="text-box-save">
+              复制全部内容
+            </View>
           </View>
           <View className="text-box-content">
             {/* 商品标题盒子 */}
@@ -174,7 +220,10 @@ export default class Index extends Component {
                 <View className="text-box-content-title-top-title">
                   商品标题
                 </View>
-                <View onClick={this.handleCopyTitle} className="text-box-content-title-top-copy">
+                <View
+                  onClick={this.handleCopyTitle}
+                  className="text-box-content-title-top-copy"
+                >
                   复制标题
                 </View>
               </View>
@@ -204,16 +253,26 @@ export default class Index extends Component {
                 />
                 <View className="copy-box">
                   <View className="copy-box-line"></View>
-                  <Image onClick={this.handleCopyLink} 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>
           </View>
         </View>
         {/* 分享按钮 */}
-        <Button className="share-button" openType="share" onClick={this.handleShare}>
-          直接分享商品卡片到聊天框
-        </Button>
+        {this.state.shareJump && (
+          <Button
+            className="share-button"
+            openType="share"
+            onClick={this.handleShare}
+          >
+            直接分享商品卡片到聊天框
+          </Button>
+        )}
       </View>
     );
   }

src/pages/indexSub/sharePage/index.less

@@ -42,13 +42,15 @@
         .image-box-content {
             display: flex;
             flex-wrap: nowrap;
-            overflow-x: auto;
+            overflow-x: scroll;
 
             .image-box-content-item {
                 width: 240px;
                 height: 240px;
                 border-radius: 40px;
                 margin-right: 20px;
+                background-color: #f7f8fa;
+                flex-shrink: 0;
             }
         }
     }