fix: 优化swriper

src/components/UseProductPop/index.jsx

@@ -3,6 +3,7 @@ import React, {
   useEffect,
   useImperativeHandle,
   useRef,
+  useState,
 } from "react";
 import { Select, ImageUpload, RadioButton, RadioGroup, Notify } from "zent";
 import { useSetState } from "ahooks";
@@ -19,6 +20,9 @@ import {
   uploadImg,
 } from "@/assets/api.js";
 
+import Swiper from "swiper/dist/js/swiper.js";
+import "swiper/dist/css/swiper.min.css";
+
 //校验规则
 const formRules = {
   product: [{ type: "required", message: "请选择映射商品" }],
@@ -63,9 +67,9 @@ const UseProductPop = forwardRef((props, ref) => {
 
   const [state, setState] = useSetState({
     productOption: [],
-    productPic: [],
     productDataAll: [], // 商品所有数据
-    goodsImgList: [],
+    productPic: [],
+    isUpdatePic: false,
   });
   const [model, setModel] = useSetState({
     cur_product: {},
@@ -89,6 +93,28 @@ const UseProductPop = forwardRef((props, ref) => {
     getProductData();
   }, [model.product_type]);
 
+  useEffect(() => {
+    setState({
+      productPic: model.describe_url,
+    });
+  }, [state.isUpdatePic]);
+
+  let [mySwiper, setMySwiper] = useState(null);
+  useEffect(() => {
+    let mySwiper = new Swiper(".swiper-container", {
+      slidesPerView: 1,
+      centeredSlides: true,
+      loop: true,
+      autoplay: 3000,
+      initialSlide: 0,
+      observer: true, // 修改swiper自己或子元素时，自动初始化swiper
+      observeParents: false, // 修改swiper的父元素时，自动初始化swiper
+      pagination: ".swiper-pagination",
+      paginationClickable: true,
+    });
+    setMySwiper(mySwiper);
+  }, []);
+
   // 获取商品数据
   const getProductData = () => {
     if (directResellerId) {
@@ -150,6 +176,9 @@ const UseProductPop = forwardRef((props, ref) => {
       account_type: "",
       map_product_name: "",
     });
+    setTimeout(() => {
+      setState({ isUpdatePic: !state.isUpdatePic });
+    }, 300);
   };
   // 获取表单数据
   const getFormModel = () => {
@@ -178,15 +207,12 @@ const UseProductPop = forwardRef((props, ref) => {
         Notify.error(`请上传商品Logo`);
         return;
       }
-
       if (model.describe_url.length <= 0) {
-        Notify.error(`请上传商品Logo`);
+        Notify.error(`请上传商品图片`);
         return;
       }
-
       visible = true;
     }
-
     return visible;
   };
 
@@ -237,6 +263,9 @@ const UseProductPop = forwardRef((props, ref) => {
         describe_url: [],
       });
     }
+    setTimeout(() => {
+      setState({ isUpdatePic: !state.isUpdatePic });
+    }, 300);
   };
   const onTypeChange = (e) => {
     clearForm();
@@ -338,6 +367,9 @@ const UseProductPop = forwardRef((props, ref) => {
         describe_url: files,
       });
     }
+    setTimeout(() => {
+      setState({ isUpdatePic: !state.isUpdatePic });
+    }, 300);
   };
   const exchangeCodeH5El = () => {
     return (
@@ -541,7 +573,7 @@ const UseProductPop = forwardRef((props, ref) => {
                 {state.productPic.map((item, index) => {
                   return (
                     <div className="swiper-slide" key={index}>
-                      <img src={item.url} alt="" />
+                      <img src={item.src} alt="" />
                     </div>
                   );
                 })}