upp

README.md

@@ -1 +1,3 @@
-本地运行：静态资源里面先运行一个服务 
+本地运行：静态资源里面先运行一个服务 
+使用 http-server
+确保服务地址是：http://127.0.0.1:8080

src/pages/A3Goods/GoodsInfo/index.module.scss

@@ -111,8 +111,15 @@
 
       .A3IRight {
         width: 45%;
+        height: 100%;
+        overflow-y: auto;
         padding: 40px 0px 0;
 
+        &::-webkit-scrollbar-thumb {
+          /*滚动条里面小方块*/
+          background: #FBF1AD;
+        }
+
         .A3IRtit {
           display: flex;
           justify-content: center;

src/pages/A3Goods/GoodsInfo/index.tsx

@@ -81,6 +81,22 @@ function GoodsInfo({ info, colseFu, type }: Props) {
     return arr;
   }, [info.id, showNum]);
 
+  // 整理右边的信息
+  const filterArr = useMemo(() => {
+    return ["id", "type1", "type2", "name", "showType", "showNum"];
+  }, []);
+
+  const rightTxtInfo = useMemo(() => {
+    const arr: { key: string; value: string }[] = [];
+    for (const k in info) {
+      if (!filterArr.includes(k)) {
+        const value = Reflect.get(info, k);
+        if (value) arr.push({ key: k, value });
+      }
+    }
+    return arr;
+  }, [filterArr, info]);
+
   return (
     <div
       className={styles.GoodsInfo}
@@ -188,7 +204,7 @@ function GoodsInfo({ info, colseFu, type }: Props) {
         </div>
 
         {/* 右边简介 */}
-        <div className="A3IRight">
+        <div className="A3IRight mySorrl">
           <div className="A3IRtit">
             <img src={name1Img} alt="" />
             <div> {info.name}</div>
@@ -197,81 +213,15 @@ function GoodsInfo({ info, colseFu, type }: Props) {
           </div>
           <div className="A3IRtit2">存放于{info.type1}</div>
 
-          {info.name2 ? (
-            <div className="A3IRtitRow">
-              <div className="A3IRtitRowYuan">
-                <div></div>
-              </div>
-              <span>名称：</span>
-              {info.name2}
-            </div>
-          ) : null}
-
-          {info.num ? (
-            <div className="A3IRtitRow">
-              <div className="A3IRtitRowYuan">
-                <div></div>
-              </div>
-              <span>编号：</span>
-              {info.num}
-            </div>
-          ) : null}
-
-          {info.type2 ? (
-            <div className="A3IRtitRow">
-              <div className="A3IRtitRowYuan">
-                <div></div>
-              </div>
-              <span>类别：</span>
-              {info.type2}
-            </div>
-          ) : null}
-
-          {info.age ? (
-            <div className="A3IRtitRow">
+          {rightTxtInfo.map((v, i) => (
+            <div className="A3IRtitRow" key={i}>
               <div className="A3IRtitRowYuan">
                 <div></div>
               </div>
-              <span>年代：</span>
-              {info.age}
+              <span>{v.key}：</span>
+              {v.value}
             </div>
-          ) : null}
-          {info.grain ? (
-            <div className="A3IRtitRow">
-              <div className="A3IRtitRowYuan">
-                <div></div>
-              </div>
-              <span>质地：</span>
-              {info.grain}
-            </div>
-          ) : null}
-          {info.size ? (
-            <div className="A3IRtitRow">
-              <div className="A3IRtitRowYuan">
-                <div></div>
-              </div>
-              <span>尺寸：</span>
-              {info.size}
-            </div>
-          ) : null}
-          {info.level ? (
-            <div className="A3IRtitRow">
-              <div className="A3IRtitRowYuan">
-                <div></div>
-              </div>
-              <span>级别：</span>
-              {info.level}
-            </div>
-          ) : null}
-          {info.state ? (
-            <div className="A3IRtitRow">
-              <div className="A3IRtitRowYuan">
-                <div></div>
-              </div>
-              <span>状态：</span>
-              {info.state}
-            </div>
-          ) : null}
+          ))}
         </div>
       </div>
     </div>

src/pages/A3GoodsM/GoodsInfoM/index.tsx

@@ -23,8 +23,6 @@ type Props = {
 };
 
 function GoodsInfoM({ info, colseFu, type }: Props) {
-
-
   // 看看有几个模型
   const showNum = useMemo(() => {
     const arr = [1];
@@ -80,6 +78,22 @@ function GoodsInfoM({ info, colseFu, type }: Props) {
     [lookArr]
   );
 
+  // 整理右边的信息
+  const filterArr = useMemo(() => {
+    return ["id", "type1", "type2", "name", "showType", "showNum"];
+  }, []);
+
+  const rightTxtInfo = useMemo(() => {
+    const arr: { key: string; value: string }[] = [];
+    for (const k in info) {
+      if (!filterArr.includes(k)) {
+        const value = Reflect.get(info, k);
+        if (value) arr.push({ key: k, value });
+      }
+    }
+    return arr;
+  }, [filterArr, info]);
+
   return (
     <div
       className={styles.GoodsInfoM}
@@ -199,81 +213,15 @@ function GoodsInfoM({ info, colseFu, type }: Props) {
         </div>
 
         {/* 下面简介 */}
-        {info.name2 ? (
-          <div className="A3IRtitRow">
-            <div className="A3IRtitRowYuan">
-              <div></div>
-            </div>
-            <span>名称：</span>
-            {info.name2}
-          </div>
-        ) : null}
-
-        {info.num ? (
-          <div className="A3IRtitRow">
-            <div className="A3IRtitRowYuan">
-              <div></div>
-            </div>
-            <span>编号：</span>
-            {info.num}
-          </div>
-        ) : null}
-
-        {info.type2 ? (
-          <div className="A3IRtitRow">
-            <div className="A3IRtitRowYuan">
-              <div></div>
-            </div>
-            <span>类别：</span>
-            {info.type2}
-          </div>
-        ) : null}
-
-        {info.age ? (
-          <div className="A3IRtitRow">
-            <div className="A3IRtitRowYuan">
-              <div></div>
-            </div>
-            <span>年代：</span>
-            {info.age}
-          </div>
-        ) : null}
-        {info.grain ? (
-          <div className="A3IRtitRow">
-            <div className="A3IRtitRowYuan">
-              <div></div>
-            </div>
-            <span>质地：</span>
-            {info.grain}
-          </div>
-        ) : null}
-        {info.size ? (
-          <div className="A3IRtitRow">
-            <div className="A3IRtitRowYuan">
-              <div></div>
-            </div>
-            <span>尺寸：</span>
-            {info.size}
-          </div>
-        ) : null}
-        {info.level ? (
-          <div className="A3IRtitRow">
-            <div className="A3IRtitRowYuan">
-              <div></div>
-            </div>
-            <span>级别：</span>
-            {info.level}
-          </div>
-        ) : null}
-        {info.state ? (
-          <div className="A3IRtitRow">
+        {rightTxtInfo.map((v, i) => (
+          <div className="A3IRtitRow" key={i}>
             <div className="A3IRtitRowYuan">
               <div></div>
             </div>
-            <span>状态：</span>
-            {info.state}
+            <span>{v.key}：</span>
+            {v.value}
           </div>
-        ) : null}
+        ))}
       </div>
     </div>
   );