diff --git a/src/components/UseProductPop/index.jsx b/src/components/UseProductPop/index.jsx index b5b1f538..3c81a112 100644 --- a/src/components/UseProductPop/index.jsx +++ b/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 (
- +
); })}