商品明细修改

src/pages/GoodsDetail/components/DetailHead.tsx

@@ -6,7 +6,7 @@ import { useContext } from "react";
 const DetailHead = (props: DetailResponseType) => {
     
     const commonConfigData = useContext(CommonConfigDataContext);
-    const sku_info = props.data?.sku_info!
+    const sku_info = props!.data?.sku_info!
 
     return (
         <>

src/pages/GoodsDetail/components/DetailSection.tsx

@@ -5,7 +5,7 @@ import type { DetailResponseType } from '../types'
 
 const DetailSection = (props: DetailResponseType) => {
     //const sku_info = props.data?.sku_info!
-    const other_sku_list = props.data?.other_sku_list || []
+    const other_sku_list = props!.data?.other_sku_list || []
     return (
         <>
             <div className='detail-section w1226 row bothSide'>

src/pages/GoodsDetail/index.less

@@ -198,4 +198,14 @@
             }
         }
     }
+    .datanos{
+        background: #fff;
+        padding:80px 0;
+        img{
+            height:296px;
+            width:360px;
+            display: block;
+            margin:0 auto;
+        }
+    }
 }
\ No newline at end of file

src/pages/GoodsDetail/index.min.css

-.mv-detail-page{margin-bottom:47px}.mv-detail-page .detail-headers{min-height:304px;padding:40px 35px;background:#fff}.mv-detail-page .detail-headers .goodsimg{width:222px;height:222px;margin-right:20px}.mv-detail-page .detail-headers .info .box{height:192px;width:420px}.mv-detail-page .detail-headers .info .box h1{font-weight:bold;font-size:18px;color:#313131;line-height:24px;margin-bottom:12px}.mv-detail-page .detail-headers .info .box p{font-size:12px;color:#000000;line-height:25px;max-height:50px;word-break:break-all;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.mv-detail-page .detail-headers .info .handle .btn{width:80px;height:30px;background:#FF9A00;line-height:30px;text-align:center;color:#fff}.mv-detail-page .detail-headers .r{width:452px;min-height:222px;background:#FFFCF8;padding:10px 50px}.mv-detail-page .detail-headers .r .mb23{margin-bottom:24px}.mv-detail-page .detail-headers .r .items{width:50%;font-size:12px;color:#000000;line-height:25px}.mv-detail-page .detail-headers .r .items span{width:50%}.mv-detail-page .detail-section{margin-top:20px}.mv-detail-page .detail-section .secl{width:978px;min-height:330px;background:#FFFFFF;padding:30px}.mv-detail-page .detail-section .secl .lilist-box{border-top:1px solid #e5e5e5;font-size:14px;color:#313131;flex-shrink:0;flex-wrap:wrap;border-left:1px solid #e5e5e5}.mv-detail-page .detail-section .secl .lilist-box p{line-height:36px;width:50%;box-sizing:border-box;height:36px;border-right:1px solid #e5e5e5;border-bottom:1px solid #e5e5e5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mv-detail-page .detail-section .secl .lilist-box p b{width:130px;float:left;display:block;border-right:1px solid #e5e5e5;padding-left:20px;background:#F5F5F5;margin-right:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mv-detail-page .detail-section .secl .lilist-box p span{padding-left:10px}.mv-detail-page .detail-section .secl .lilist-box p .ple0 span{padding-left:0px !important}.mv-detail-page .detail-section .secl .goods-mask{height:60px;line-height:30px;color:#313131;font-size:14px}.mv-detail-page .detail-section .secl .goods-mask div{width:130px;float:left;border-right:1px solid #e5e5e5;border-left:1px solid #e5e5e5;border-bottom:1px solid #e5e5e5;padding-left:20px;background:#F5F5F5;height:90px}.mv-detail-page .detail-section .secl .goods-mask h4{background:#fff;width:745px;height:90px;padding-left:10px;padding-right:10px;border-right:1px solid #e5e5e5;border-bottom:1px solid #e5e5e5;word-break:break-all;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}.mv-detail-page .detail-section .secr .item{padding:34px 18px;width:233px;height:330px;transition:all .5s;background:#fff;display:block;margin-bottom:20px}.mv-detail-page .detail-section .secr .item:last-child{margin-bottom:0px}.mv-detail-page .detail-section .secr .item:hover{box-shadow:4px 6px 7px 1px rgba(154,151,149,0.18);transform:translateY(-1px)}.mv-detail-page .detail-section .secr .item img{width:150px;height:109px;display:block;margin:0 auto;margin-bottom:60px}.mv-detail-page .detail-section .secr .item .gos{font-size:14px;color:#000000;line-height:25px;word-break:break-all;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;height:50px;margin-bottom:30px}.mv-detail-page .detail-section .secr .item .nam{font-weight:normal;font-size:16px;color:#000000;line-height:18px;text-overflow:ellipsis;overflow:hidden;height:18px;max-width:110px}.mv-detail-page .detail-section .secr .item .prs{font-size:16px;color:#FF0006;line-height:18px}
\ No newline at end of file
+.mv-detail-page{margin-bottom:47px}.mv-detail-page .detail-headers{min-height:304px;padding:40px 35px;background:#fff}.mv-detail-page .detail-headers .goodsimg{width:222px;height:222px;margin-right:20px}.mv-detail-page .detail-headers .info .box{height:192px;width:420px}.mv-detail-page .detail-headers .info .box h1{font-weight:bold;font-size:18px;color:#313131;line-height:24px;margin-bottom:12px}.mv-detail-page .detail-headers .info .box p{font-size:12px;color:#000000;line-height:25px;max-height:50px;word-break:break-all;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.mv-detail-page .detail-headers .info .handle .btn{width:80px;height:30px;background:#FF9A00;line-height:30px;text-align:center;color:#fff}.mv-detail-page .detail-headers .r{width:452px;min-height:222px;background:#FFFCF8;padding:10px 50px}.mv-detail-page .detail-headers .r .mb23{margin-bottom:24px}.mv-detail-page .detail-headers .r .items{width:50%;font-size:12px;color:#000000;line-height:25px}.mv-detail-page .detail-headers .r .items span{width:50%}.mv-detail-page .detail-section{margin-top:20px}.mv-detail-page .detail-section .secl{width:978px;min-height:330px;background:#FFFFFF;padding:30px}.mv-detail-page .detail-section .secl .lilist-box{border-top:1px solid #e5e5e5;font-size:14px;color:#313131;flex-shrink:0;flex-wrap:wrap;border-left:1px solid #e5e5e5}.mv-detail-page .detail-section .secl .lilist-box p{line-height:36px;width:50%;box-sizing:border-box;height:36px;border-right:1px solid #e5e5e5;border-bottom:1px solid #e5e5e5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mv-detail-page .detail-section .secl .lilist-box p b{width:130px;float:left;display:block;border-right:1px solid #e5e5e5;padding-left:20px;background:#F5F5F5;margin-right:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mv-detail-page .detail-section .secl .lilist-box p span{padding-left:10px}.mv-detail-page .detail-section .secl .lilist-box p .ple0 span{padding-left:0px !important}.mv-detail-page .detail-section .secl .goods-mask{height:60px;line-height:30px;color:#313131;font-size:14px}.mv-detail-page .detail-section .secl .goods-mask div{width:130px;float:left;border-right:1px solid #e5e5e5;border-left:1px solid #e5e5e5;border-bottom:1px solid #e5e5e5;padding-left:20px;background:#F5F5F5;height:90px}.mv-detail-page .detail-section .secl .goods-mask h4{background:#fff;width:745px;height:90px;padding-left:10px;padding-right:10px;border-right:1px solid #e5e5e5;border-bottom:1px solid #e5e5e5;word-break:break-all;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}.mv-detail-page .detail-section .secr .item{padding:34px 18px;width:233px;height:330px;transition:all .5s;background:#fff;display:block;margin-bottom:20px}.mv-detail-page .detail-section .secr .item:last-child{margin-bottom:0px}.mv-detail-page .detail-section .secr .item:hover{box-shadow:4px 6px 7px 1px rgba(154,151,149,0.18);transform:translateY(-1px)}.mv-detail-page .detail-section .secr .item img{width:150px;height:109px;display:block;margin:0 auto;margin-bottom:60px}.mv-detail-page .detail-section .secr .item .gos{font-size:14px;color:#000000;line-height:25px;word-break:break-all;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;height:50px;margin-bottom:30px}.mv-detail-page .detail-section .secr .item .nam{font-weight:normal;font-size:16px;color:#000000;line-height:18px;text-overflow:ellipsis;overflow:hidden;height:18px;max-width:110px}.mv-detail-page .detail-section .secr .item .prs{font-size:16px;color:#FF0006;line-height:18px}.mv-detail-page .datanos{background:#fff;padding:80px 0}.mv-detail-page .datanos img{height:296px;width:360px;display:block;margin:0 auto}
\ No newline at end of file

src/pages/GoodsDetail/index.tsx

@@ -6,42 +6,48 @@ import DetailSection from './components/DetailSection';
 import BreadNav from '../../components/BreadNav';
 import { useNavigate, useParams } from 'react-router-dom';
 import useRequest from '../../hooks/useRequest';
-import { useEffect,  useState } from 'react';
+import { useEffect, useState } from 'react';
 import type { DetailResponseType } from './types'
 
 
 const GoodsDetail = () => {
-    const navigate=useNavigate()
+    const navigate = useNavigate()
     const params = useParams()
-    const [detailData,setDetailData]=useState<DetailResponseType>()
-    const { request:detailRequest} = useRequest<DetailResponseType>({manual:true})
-    useEffect(()=>{
-        detailRequest({ url: '/api/goodsSku/getGoodsSkuDetail', params:{sku_id:params.sku_id} }).then(res=>{
-            if(res?.code===0){
+    const [detailData, setDetailData] = useState<DetailResponseType>()
+    const { request: detailRequest } = useRequest<DetailResponseType>({ manual: true })
+    useEffect(() => {
+        detailRequest({ url: '/api/goodsSku/getGoodsSkuDetail', params: { sku_id: params.sku_id } }).then(res => {
+            if (res?.code === 0) {
                 setDetailData(res)
-                if( res?.data?.sku_info===null){
-                    navigate('/404')
-                }
-            }else{
-                navigate('/404')
+                // if( res?.data?.sku_info===null){
+                //     navigate('/404')
+                // }
+            } else {
+                // navigate('/404')
             }
         })
-        
-    },[detailRequest,params.sku_id,navigate])
+
+    }, [detailRequest, params.sku_id, navigate])
     return (
         <>
-         
-            {
-                detailData&&detailData.data?.sku_info ?
-                    <div className="mv-detail-page">
-                        <BreadNav > <strong>{detailData.data?.sku_info?.sku_name}</strong></BreadNav>
-                        <DetailHead {...detailData}/>
-                        <DetailSection  {...detailData}/>
-                    </div>
-                : ''
-            }
+            <div className="mv-detail-page">
+                {
+                    detailData && detailData.data?.sku_info ?
+                        <>
+                            <BreadNav > <strong>{detailData.data?.sku_info?.sku_name}</strong></BreadNav>
+                            <DetailHead {...detailData} />
+                            <DetailSection  {...detailData} />
+                        </>
+                        :
+                        <>
+                            <BreadNav > <strong>找不到型号数据</strong></BreadNav>
+                            <div className='datanos w1226'>
+                                <img src={require('../../images/p404.png')} alt="" />
+                            </div>
+                        </>
+                }
 
-           
+            </div>
         </>
     )