fix: 【产品商城】详情中副图、视频未显示，规格数未显示正确的数字

pages/mall/detail/[id].page.tsx

@@ -13,7 +13,7 @@ import { Navigation } from "swiper";
 // Import Swiper styles
 import "swiper/css";
 import "swiper/css/navigation";
-import api, { GetLeaseGoodsDetailResp } from "./api";
+import api, { GetLeaseGoodsDetailResp, ProductSpecList } from "./api";
 import IntentionModal from "./components/intentionModal";
 import { UserContext } from "~/lib/userProvider";
 
@@ -22,11 +22,25 @@ export default function MallDetail() {
   const [visible, setVisible] = useState(false); //商品图预览
   const router = useRouter();
   const [id, setId] = useState<number | null>(null);
-  const [detail, setDetail] = useState<GetLeaseGoodsDetailResp | null>(
-    null
-  ); //详情数据
+  const [detail, setDetail] = useState<GetLeaseGoodsDetailResp | null>(null); //详情数据
   const [intentionModalOpen, setIntentionModalOpen] = useState(false); //意向弹窗
-  const [productImg, setProductImg] = useState('');   //展示的商品图
+  const [productImg, setProductImg] = useState(""); //展示的商品图
+  const [previewIndex, setPreviewIndex] = useState(0);  //预览开始索引
+  const [checkItems, setCheckItems] = useState<ProductSpecList[]>([]); //选中的规格
+  const [specCount, setSpecCount] = useState(0); //规格数量
+
+
+  useEffect(() => {
+    if(detail){
+      let count = 0;
+      detail.goodsSpec?.forEach(good => {
+        good.productSpecList?.forEach(product => {
+          count++;
+        })
+      })
+      setSpecCount(count);
+    }
+  }, [detail])
 
   //打开意向modal
   const openIntentionModal = () => {
@@ -55,7 +69,7 @@ export default function MallDetail() {
       api
         .getLeaseGoodsDetail({
           goodsId: id,
-          type: 0
+          type: 0,
         })
         .then((res) => {
           setDetail(res.result || null);
@@ -72,11 +86,12 @@ export default function MallDetail() {
         detail={detail}
         onOk={handleIntentionOk}
         onCancel={handleIntentionCancel}
+        onChange={(items: ProductSpecList[]) => setCheckItems(items)}
       ></IntentionModal>
       <div className="page" style={{ marginTop: 20, backgroundColor: "#fff" }}>
         <div style={{ display: "none" }}>
           <AImage.PreviewGroup
-            preview={{ visible, onVisibleChange: (vis) => setVisible(vis) }}
+            preview={{ visible, onVisibleChange: (vis) => setVisible(vis), current: previewIndex }}
           >
             {detail?.images?.map((item) => {
               return <AImage key={item.id} src={item.imgUrl} />;
@@ -107,7 +122,7 @@ export default function MallDetail() {
               onSlideChange={() => console.log("slide change")}
               onSwiper={(swiper) => console.log(swiper)}
             >
-              {detail?.images?.map((item) => {
+              {detail?.images?.map((item, i) => {
                 return (
                   <SwiperSlide key={item.id}>
                     <AImage
@@ -117,7 +132,7 @@ export default function MallDetail() {
                       src={item.imgUrl}
                       fallback={errImg}
                       style={{ cursor: "pointer" }}
-                      onClick={() => setProductImg(item.imgUrl)}
+                      onClick={() => {setProductImg(item.imgUrl), setPreviewIndex(i)}}
                     />
                   </SwiperSlide>
                 );
@@ -147,14 +162,14 @@ export default function MallDetail() {
                       选择
                     </Col>
                     <Col flex="auto" className={styles.font4} style={{}}>
-                      已选：1件
+                      已选：{checkItems.length}件
                     </Col>
                   </Row>
                 </Col>
                 <Col>
                   <Row align="middle" style={{ cursor: "pointer" }}>
                     <Col className={styles.font4} onClick={openIntentionModal}>
-                      共3种可选
+                      共{specCount}种可选
                     </Col>
                     <Col style={{ marginLeft: 9 }}>
                       <DownOutlined

pages/mall/detail/components/intentionModal/index.tsx

@@ -11,6 +11,7 @@ type Props = {
   onOk?: () => void;
   onCancel: () => void;
   detail: GetLeaseGoodsDetailResp | null;
+  onChange?: (checkItems: ProductSpecList[]) => void;
 };
 export default function IntentionModal(props: Props) {
   const [checkedMap, setCheckedMap] = useState<{ string?: boolean }>({}); //通过索引记录选中的产品规格 例: {'1,1': true|false} props.detail?.goodsSpec[1].productSpecList[1]
@@ -32,6 +33,7 @@ export default function IntentionModal(props: Props) {
       }
     });
     setCheckItems(list);
+    props.onChange && props.onChange(list);
   }, [checkedMap]);
 
   //添加规格到购物车
@@ -117,6 +119,7 @@ export default function IntentionModal(props: Props) {
             style={{ width: "100%", height: 44 }}
             onClick={onSubmit}
             loading={loading}
+            disabled={checkItems.length == 0}
           >
             提交意向
           </Button>