upp

src/pages/H5Code/index.module.scss

@@ -1,5 +1,180 @@
-.H5Code{
-  :global{
-    
+.H5Code {
+  position: fixed;
+  z-index: 9990;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 100vw;
+  height: 100vh;
+  max-width: 500px;
+  background-color: #696460;
+  padding: 20px 15px;
+  font-size: 12px;
+
+  :global {
+    .H5MainBox {
+      width: 100%;
+      height: 100%;
+
+      .H5MainBoxInfo {
+        width: 100%;
+        height: calc(100% - 46px);
+        background-image: url('../../assets/img/H5Bg.png');
+        background-size: 100% 100%;
+        position: relative;
+
+        .H5Img {
+          position: absolute;
+          top: 8%;
+          left: 50%;
+          transform: translateX(-50%);
+          width: 55%;
+          height: 32%;
+        }
+
+        .H5Loc {
+          width: 100%;
+          height: 46%;
+          pointer-events: none;
+        }
+
+        .H5TxtBox {
+          width: 100%;
+          height: 46%;
+
+          .name {
+            height: 50px;
+            position: relative;
+
+            &>div {
+              position: absolute;
+              left: 30px;
+              padding: 0 20px 15px 20px;
+              top: 0;
+              letter-spacing: 4px;
+              font-weight: 700;
+              font-size: 16px;
+              color: #f2e2c1;
+              background: url('../../assets/img/H5Xian.png') no-repeat bottom center;
+              background-size: 100% 10px;
+            }
+          }
+
+          .txtMain {
+            margin-top: 10px;
+            color: #fff;
+            width: 100%;
+            height: calc(100% - 55px);
+            padding: 0px 30px 0 20px;
+            position: relative;
+
+            &::before {
+              content: '';
+              position: absolute;
+              top: 5px;
+              left: 23px;
+              width: 1px;
+              height: 80%;
+              border-left: 1px dashed #f2e2c1;
+            }
+
+            &>p {
+              position: relative;
+              padding-left: 24px;
+              height: 24px;
+              line-height: 24px;
+
+              &::before {
+                content: '';
+                position: absolute;
+                top: 50%;
+                transform: translateY(-50%);
+                left: 0;
+                width: 7px;
+                height: 7px;
+                border-radius: 50%;
+                background-color: #f2e2c1;
+              }
+
+              &:nth-of-type(3) {
+                &::after {
+                  content: '';
+                  position: absolute;
+                  top: 30px;
+                  left: 0;
+                  width: 7px;
+                  height: 7px;
+                  border-radius: 50%;
+                  background-color: #f2e2c1;
+                }
+              }
+            }
+
+            &>div {
+              position: relative;
+              padding-left: 24px;
+              line-height: 20px;
+              width: 100%;
+              height: calc(100% - 72px);
+              padding-right: 6px;
+              overflow-y: auto;
+            }
+
+
+
+            &>div::-webkit-scrollbar {
+              /*滚动条整体样式*/
+              width: 3px;
+              /*高宽分别对应横竖滚动条的尺寸*/
+              height: 1px;
+            }
+
+            &>div::-webkit-scrollbar-thumb {
+              /*滚动条里面小方块*/
+              border-radius: 10px;
+              -webkit-box-shadow: inset 0 0 5px transparent;
+              background: #f2e2c1;
+            }
+
+            &>div::-webkit-scrollbar-track {
+              /*滚动条里面轨道*/
+              -webkit-box-shadow: inset 0 0 5px transparent;
+              border-radius: 10px;
+              background: transparent;
+            }
+          }
+        }
+
+        .H5Logo {
+          padding-left: 30px;
+          width: 200px;
+          height: 8%;
+          display: flex;
+          align-items: center;
+
+          &>img {
+            width: 100%;
+          }
+        }
+      }
+
+      .H5MainBoxButton {
+        margin-top: 10px;
+        height: 36px;
+        display: flex;
+        justify-content: center;
+
+        &>div {
+          color: #401009;
+          letter-spacing: 4px;
+          width: 200px;
+          background-color: #f2e4db;
+          border-radius: 4px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+      }
+    }
   }
 }

src/pages/H5Code/index.tsx

@@ -1,14 +1,82 @@
-import React from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import styles from "./index.module.scss";
- function H5Code() {
-  
+import H5Logo from "@/assets/img/H5Logo.png";
+import { useLocation } from "react-router";
+import { urlParameter } from "@/utils/history";
+import { useDispatch, useSelector } from "react-redux";
+import { getH5InfoAPI } from "@/store/action/h5code";
+import { RootState } from "@/store";
+import { baseURL } from "@/utils/http";
+
+function H5Code() {
+  useEffect(() => {
+    const root: any = document.querySelector("#root");
+    root.style.overflow = "hidden";
+    root.style.overflow = "hidden";
+    root.style.minHeight = "100vh";
+    root.style.minWidth = "100vw";
+  }, []);
+
+  // 获取地址栏参数
+  const dispatch = useDispatch();
+  const location = useLocation();
+
+  useEffect(() => {
+    const obj = urlParameter(location.search);
+    if (obj.id) dispatch(getH5InfoAPI(obj.id));
+  }, [dispatch, location.search]);
+
+  // 从仓库获取详情
+  const info = useSelector((state: RootState) => state.h5codeReducer.h5info);
+
+  // 点击下载海报
+  const [donImg, setDonImg] = useState(false);
+  const donImgFu = useCallback(() => {
+    setDonImg(!donImg);
+  }, [donImg]);
+
+  const infoTxt = useMemo(() => {
+    let txt = info.description ? info.description : "-";
+    if (txt.length >= 60 && donImg) txt = txt.substring(0, 60) + "...";
+    return txt;
+  }, [donImg, info.description]);
+
   return (
     <div className={styles.H5Code}>
-      <h1>H5Code</h1>
+      <div className="H5MainBox">
+        <div className="H5MainBoxInfo">
+          <div className="H5Img">
+            {info.thumb ? <img src={baseURL + info.thumb} alt="" /> : null}
+          </div>
+          {/* 占位盒子 */}
+          <div className="H5Loc"></div>
+          {/* 文字信息 */}
+          <div className="H5TxtBox">
+            {/* 名字 */}
+            <div className="name">
+              <div>{info.name}</div>
+            </div>
+            {/* 简介信息 */}
+            <div className="txtMain">
+              <p>类别：{info.dictTexture}</p>
+              <p>年代：{info.dictAge}</p>
+              <p>级别：{info.dictLevel}</p>
+              <div>简介：{infoTxt}</div>
+            </div>
+          </div>
+          {/* logo */}
+          <div className="H5Logo">
+            <img src={H5Logo} alt="" />
+          </div>
+        </div>
+        <div className="H5MainBoxButton">
+          <div onClick={donImgFu}>下载海报</div>
+        </div>
+      </div>
     </div>
-  )
+  );
 }
 
 const MemoH5Code = React.memo(H5Code);
 
-export default MemoH5Code;
+export default MemoH5Code;

src/store/action/h5code.ts

@@ -0,0 +1,11 @@
+import http from "@/utils/http";
+import { AppDispatch } from "..";
+/**
+ * 根据id获取详情（h5页面，不需要token）
+ */
+export const getH5InfoAPI = (id: number) => {
+  return async (dispatch: AppDispatch) => {
+    const res = await http.get(`show/goods/detail/${id}`);
+    dispatch({ type: "h5code/getInfo", payload: res.data });
+  };
+};

src/store/reducer/h5code.ts

@@ -0,0 +1,27 @@
+import { GoodsTableSearch } from "@/types";
+
+// 初始化状态
+const initState = {
+  // 详情信息
+  h5info: {} as GoodsTableSearch,
+};
+
+// 定义 action 类型
+type H5codeActionType = {
+  type: "h5code/getInfo";
+  payload: GoodsTableSearch;
+};
+
+// 频道 reducer
+export default function h5codeReducer(
+  state = initState,
+  action: H5codeActionType
+) {
+  switch (action.type) {
+    // 获取列表数据
+    case "h5code/getInfo":
+      return { ...state, h5info: action.payload };
+    default:
+      return state;
+  }
+}

src/store/reducer/index.ts

@@ -1,6 +1,7 @@
 // 导入合并reducer的依赖
 import { combineReducers } from 'redux'
 import goodsReducer from './goods'
+import h5codeReducer from './h5code'
 import logReducer from './log'
 
 // 导入 登录 模块的 reducer
@@ -16,7 +17,8 @@ const rootReducer = combineReducers({
   goodsReducer:goodsReducer,
   userReducer:userReducer,
   logReducer:logReducer,
-  RoleReducer:RoleReducer
+  RoleReducer:RoleReducer,
+  h5codeReducer:h5codeReducer
 })
 
 // 默认导出