فهرست منبع

upp-知识更新

shaogen1995 1 سال پیش
والد
کامیت
a3caa85616

+ 84 - 0
pc/public/knowInfo.html

@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    body {
+      user-select: none;
+      width: 100%;
+      height: 100%;
+    }
+
+    .title {
+      box-shadow: 0 1px 6px #ccc;
+      position: fixed;
+      z-index: 10;
+      right: 0;
+      left: 0;
+      height: 44px;
+      padding-right: 10px;
+      padding-left: 10px;
+      border-bottom: 0;
+      background-color: #f7f7f7;
+      text-align: center;
+      font-size: 17px;
+      font-weight: 500;
+      line-height: 44px;
+    }
+
+    .content {
+      padding: 85px 15px 15px;
+    }
+
+    p {
+      font-size: 14px;
+      margin-top: 0;
+      margin-bottom: 10px;
+      color: #8f8f94;
+      text-align: center;
+    }
+  </style>
+
+</head>
+
+<script>
+
+  const id = window.location.href.split('?sId=')[1]
+
+
+  fetch(`https://ypbwg.4dage.com/api/show/knowledge/cms/detail/${id}`)
+    .then(response => response.json())
+    .then(data => {
+      const dataRes = data.data
+
+      const titleDom = document.querySelector('.title')
+      const contentDom = document.querySelector('.content')
+
+      titleDom.innerHTML = dataRes.cName
+
+      contentDom.innerHTML = dataRes.cContent
+
+    });
+
+
+
+</script>
+
+<body>
+  <!-- 标题 -->
+  <div class="title"></div>
+  <!-- 主要内容 -->
+  <div class="content"></div>
+</body>
+
+</html>

+ 6 - 6
pc/src/pages/A2Main/Tab4Info/index.module.scss

@@ -131,7 +131,7 @@
       top: 50%;
       width: 40px;
       height: 40px;
-      left: 30px;
+      left: -50px;
       z-index: 12;
       transform: translateY(-50%);
       display: flex;
@@ -145,7 +145,7 @@
       top: 50%;
       width: 40px;
       height: 40px;
-      right: 30px;
+      right: -50px;
       z-index: 12;
       transform: translateY(-50%);
       display: flex;
@@ -153,10 +153,10 @@
       align-items: center;
     }
 
-    .R_arrowNo {
-      opacity: .5;
-      pointer-events: none;
-    }
+    // .R_arrowNo {
+    //   opacity: .5;
+    //   pointer-events: none;
+    // }
 
     // 底部文字集合
     .t4ITxts {

+ 26 - 20
pc/src/pages/A2Main/Tab4Info/index.tsx

@@ -306,8 +306,12 @@ function Tab4Info({ isOpen, id, closePage }: Props) {
   // 当前显示的 索引
   const [showInd, setShowInd] = useState(0);
   const cutIndFu = useCallback(
-    (num: number) => {
-      setShowInd(showInd + num);
+    (num: number, flag: boolean, ind: number) => {
+      let index = showInd + num;
+
+      if (flag) index = ind;      
+
+      setShowInd(index);
     },
     [showInd]
   );
@@ -377,25 +381,27 @@ function Tab4Info({ isOpen, id, closePage }: Props) {
             {showInd + 1} / {list.length}
           </div>
         ) : null}
-      </div>
 
-      {/* 左右按钮 */}
-      <div
-        hidden={list.length <= 1}
-        onClick={() => cutIndFu(-1)}
-        className={classNames("R_left", showInd === 0 ? "R_arrowNo" : "")}
-      >
-        <img src={R_leftImg} alt="" />
-      </div>
-      <div
-        hidden={list.length <= 1}
-        onClick={() => cutIndFu(1)}
-        className={classNames(
-          "R_right",
-          showInd >= list.length - 1 ? "R_arrowNo" : ""
-        )}
-      >
-        <img src={R_rightImg} alt="" />
+        {/* 左右按钮 */}
+        <div
+          hidden={list.length <= 1}
+          onClick={() => cutIndFu(-1, showInd === 0, list.length - 1)}
+          className={classNames("R_left", showInd === 0 ? "R_arrowNo" : "")}
+        >
+          <img src={R_leftImg} alt="" />
+        </div>
+        <div
+          hidden={list.length <= 1}
+          onClick={() =>
+            cutIndFu(1, showInd >= list.length - 1, 0)
+          }
+          className={classNames(
+            "R_right",
+            showInd >= list.length - 1 ? "R_arrowNo" : ""
+          )}
+        >
+          <img src={R_rightImg} alt="" />
+        </div>
       </div>
 
       {/* 底部文字介绍集合 */}

+ 3 - 3
pc/src/pages/A2Main/Tab4S4/index.tsx

@@ -40,7 +40,7 @@ function Tab4S4({ closeFu, type }: Props) {
 
   // 打开知识页面的 id
 
-  const [knowId, setKnowId] = useState(0);
+  const [knowId, setKnowId] = useState('');
 
   return (
     <div className={styles.Tab4S4}>
@@ -61,7 +61,7 @@ function Tab4S4({ closeFu, type }: Props) {
                     <div
                       className="left2Row"
                       key={v2.id}
-                      onClick={() => setKnowId(v2.id)}
+                      onClick={() => setKnowId(v2.channelId)}
                     >
                       {v2.name}
                     </div>
@@ -83,7 +83,7 @@ function Tab4S4({ closeFu, type }: Props) {
       </div>
 
       {/* 点击知识 打开 tab5的知识详情页 */}
-      {knowId ? <Tab5Info sId={knowId} closeFu={() => setKnowId(0)} /> : null}
+      {knowId ? <Tab5Info sId={knowId} closeFu={() => setKnowId('')} /> : null}
     </div>
   );
 }

+ 3 - 3
pc/src/pages/A2Main/Tab5/index.tsx

@@ -37,7 +37,7 @@ function Tab5() {
   const tab5List = useSelector((state: RootState) => state.A2Main.tab5List);
 
   // 打开详情页的id
-  const [infoId, setInfoId] = useState(0);
+  const [infoId, setInfoId] = useState('');
 
   return (
     <div
@@ -67,7 +67,7 @@ function Tab5() {
             className="tab5Row"
             key={v.id}
             title={v.name}
-            onClick={() => setInfoId(v.id)}
+            onClick={() => setInfoId(v.channelId)}
           >
             <div>
               <ImageLazy src={v.thumb} width="100%" height="100%" noLook />
@@ -90,7 +90,7 @@ function Tab5() {
         />
       </div>
 
-      {infoId ? <Tab5Info sId={infoId} closeFu={() => setInfoId(0)} /> : null}
+      {infoId ? <Tab5Info sId={infoId} closeFu={() => setInfoId('')} /> : null}
     </div>
   );
 }

+ 3 - 1
pc/src/pages/A2Main/Tab5Info/index.module.scss

@@ -35,12 +35,14 @@
           height: 50px;
           line-height: 50px;
           border-bottom: 1px dashed var(--themeColor);
+          pointer-events: none;
 
         }
 
         .tab5Row1Ac {
           cursor: pointer;
           color: var(--themeColor);
+          pointer-events: auto;
 
           &:hover {
             background-color: var(--themeColor);
@@ -98,7 +100,7 @@
         z-index: 10;
         width: 100px;
         height: 44px;
-        background-color: #f7f7f7;
+        // background-color: #f7f7f7;
         line-height: 44px;
         font-size: 24px;
         color: #47392C;

+ 36 - 65
pc/src/pages/A2Main/Tab5Info/index.tsx

@@ -8,13 +8,13 @@ import { LeftOutlined } from "@ant-design/icons";
 
 type ListType = {
   id: string;
-  link?: string;
   name: string;
+  flag?: boolean;
   children?: ListType[];
 };
 
 type Props = {
-  sId: number;
+  sId: string;
   closeFu: () => void;
   isOpen?: boolean;
 };
@@ -25,43 +25,31 @@ function Tab5Info({ sId, closeFu, isOpen }: Props) {
   const getInfoFu = useCallback(async () => {
     const res = await A2_APItab5Info(sId);
     if (res.code === 0) {
-      // 先写一个假数据
-      const cccc = [
-        {
-          id: "1",
-          name: "一级1",
-          children: [
-            {
-              id: "1.1",
-              name: "二级1",
-              link: "http://app.ypzz.cn:8001/weixin/getCmsArticleDetail.htm?item.id=e344faaa650d11e6937300155d00887d",
-            },
-            {
-              id: "1.2",
-              name: "二级2",
-              link: "http://app.ypzz.cn:8001/weixin/getCmsArticleDetail.htm?item.id=8310a930650f11e6937300155d00887d",
-            },
-          ],
-        },
-        {
-          id: "2",
-          name: "一级2",
-          link: "http://app.ypzz.cn:8001/weixin/getCmsArticleDetail.htm?item.id=7bace6705f9211e6937300155d00887d",
-          children: [
-            {
-              id: "2.1",
-              name: "二级2222",
-              link: "http://app.ypzz.cn:8001/weixin/getCmsArticleDetail.htm?item.id=a40567d6650f11e6937300155d00887d",
-            },
-            {
-              id: "2.2",
-              name: "二级2222-222",
-              link: "http://app.ypzz.cn:8001/weixin/getCmsArticleDetail.htm?item.id=ba4c71f2650f11e6937300155d00887d",
-            },
-          ],
-        },
-      ];
-      setData(cccc);
+      let tempArr: any[] = [];
+
+      if (res.data && res.data[0] && res.data[0].channelChildren)
+        tempArr = res.data[0].channelChildren;
+
+      const arrRes: ListType[] = [];
+      tempArr.forEach((v) => {
+        const obj: ListType = {
+          id: v.id,
+          name: v.text,
+          flag: v.flag,
+          children: [],
+        };
+        if (v.children && v.children.length) {
+          v.children.forEach((v2: any) => {
+            obj.children!.push({
+              id: v2.id,
+              name: v2.text,
+            });
+          });
+        }
+        arrRes.push(obj);
+      });
+
+      setData(arrRes);
     }
   }, [sId]);
 
@@ -72,39 +60,22 @@ function Tab5Info({ sId, closeFu, isOpen }: Props) {
   // 选中的id
   const [acId, setAcId] = useState("");
 
-  // 选中的 嵌套网页
-  const [waiUrl, setWaiUrl] = useState("");
-
   useEffect(() => {
     if (data[0]) {
-      if (data[0].link) {
+      if (data[0].flag) {
         setAcId(data[0].id);
-        setWaiUrl(data[0].link);
-      } else if (
-        data[0].children &&
-        data[0].children[0] &&
-        data[0].children[0].link
-      ) {
+      } else if (data[0].children && data[0].children[0]) {
         setAcId(data[0].children[0].id);
-        setWaiUrl(data[0].children[0].link);
       }
     }
   }, [data]);
 
-  // 切换url
-  const cutAcFu = useCallback((id: string, url?: string) => {
-    if (url) {
-      setAcId(id);
-      setWaiUrl(url);
-    }
-  }, []);
-
   // 右边嵌套页面的加载loding
   const [isLoding, setIsLoding] = useState(true);
 
   useEffect(() => {
     setIsLoding(true);
-  }, [waiUrl]);
+  }, [acId]);
 
   return (
     <div className={styles.Tab5Info}>
@@ -113,10 +84,10 @@ function Tab5Info({ sId, closeFu, isOpen }: Props) {
           {data.map((v1) => (
             <div className="tab5Row" key={v1.id}>
               <div
-                onClick={() => cutAcFu(v1.id, v1.link)}
+                onClick={() => setAcId(v1.id)}
                 className={classNames(
                   "tab5Row1",
-                  !!v1.link ? "tab5Row1Ac" : "",
+                  !!v1.flag ? "tab5Row1Ac" : "",
                   acId === v1.id ? "tab5IsActive" : ""
                 )}
               >
@@ -126,7 +97,7 @@ function Tab5Info({ sId, closeFu, isOpen }: Props) {
                 <>
                   {v1.children.map((v2) => (
                     <div
-                      onClick={() => cutAcFu(v2.id, v2.link)}
+                      onClick={() => setAcId(v2.id)}
                       className={classNames(
                         "tab5RowSon",
                         acId === v2.id ? "tab5IsActive" : ""
@@ -163,11 +134,11 @@ function Tab5Info({ sId, closeFu, isOpen }: Props) {
           <LeftOutlined hidden={isOpen} />
         </div>
 
-        {waiUrl ? (
+        {acId ? (
           <iframe
             onLoad={() => setIsLoding(false)}
-            key={waiUrl}
-            src={waiUrl}
+            key={acId}
+            src={`/knowInfo.html?sId=${acId}`}
             frameBorder="0"
           ></iframe>
         ) : null}

+ 2 - 2
pc/src/pages/A4Know/index.tsx

@@ -4,13 +4,13 @@ import { useLocation } from "react-router-dom";
 import { urlParameter } from "@/utils/history";
 import Tab5Info from "../A2Main/Tab5Info";
 function A4Know() {
-  const [id, setId] = useState(0);
+  const [id, setId] = useState('');
 
   // 获取地址栏参数
   const location = useLocation();
   useEffect(() => {
     const obj = urlParameter(location.search);
-    if (obj.id) setId(Number(obj.id));
+    if (obj.id) setId(obj.channelId);
     else alert("参数错误!");
   }, [location.search]);
   return (

+ 2 - 2
pc/src/store/action/A2Main.ts

@@ -82,8 +82,8 @@ export const A2_APIgetKnowData = (data: any) => {
 /**
  * 通过id获取详情(知识)
  */
-export const A2_APItab5Info = (id: number) => {
-  return http.get(`show/knowledge/channelTree/${id}`);
+export const A2_APItab5Info = (channelId: string) => {
+  return http.get(`show/knowledge/cms/getTree/${channelId}`);
 };
 
 /**

+ 2 - 0
pc/src/types/store/A2Main.d.ts

@@ -116,6 +116,7 @@ export type A2Left2Type = {
     id: number;
     link: string;
     name: string;
+    channelId:string
   }[];
 };
 
@@ -138,4 +139,5 @@ export type Tab5ListType = {
   tagType: string;
   thumb: string;
   updateTime: string;
+  channelId:string
 }