app-初步完工

pc/src/pages/A2Main/Tab4Info/index.tsx

@@ -309,13 +309,28 @@ function Tab4Info({ isOpen, id, closePage }: Props) {
     (num: number, flag: boolean, ind: number) => {
       let index = showInd + num;
 
-      if (flag) index = ind;      
+      if (flag) index = ind;
 
       setShowInd(index);
     },
     [showInd]
   );
 
+  // 点击 留言板 问答 知识的时候暂停 音频 和视频
+  useEffect(() => {
+    if (rightPageAc) {
+      // 暂停音频
+      audioCutFu(true);
+      // 暂时视频
+      if (type === "video") {
+        const videoDom = document.querySelector(
+          ".videoBox"
+        ) as HTMLVideoElement;
+        if (videoDom) videoDom.pause();
+      }
+    }
+  }, [audioCutFu, rightPageAc, type]);
+
   return (
     <div
       className={styles.Tab4Info}
@@ -369,7 +384,7 @@ function Tab4Info({ isOpen, id, closePage }: Props) {
             key={v.id}
           >
             {v.type === "video" && i === showInd ? (
-              <video src={baseURL + v.filePath} controls></video>
+              <video className="videoBox" src={baseURL + v.filePath} controls></video>
             ) : v.type === "img" ? (
               <ImageLazy src={v.filePath} width="100%" height="100%" />
             ) : null}
@@ -392,9 +407,7 @@ function Tab4Info({ isOpen, id, closePage }: Props) {
         </div>
         <div
           hidden={list.length <= 1}
-          onClick={() =>
-            cutIndFu(1, showInd >= list.length - 1, 0)
-          }
+          onClick={() => cutIndFu(1, showInd >= list.length - 1, 0)}
           className={classNames(
             "R_right",
             showInd >= list.length - 1 ? "R_arrowNo" : ""
@@ -451,7 +464,7 @@ function Tab4Info({ isOpen, id, closePage }: Props) {
 
         {/* 留言板 */}
         <div
-          hidden={barrage.length <= 0&&!right2}
+          hidden={barrage.length <= 0 && !right2}
           className="rightIconRow"
           onClick={() => setRightPageAc(2)}
           title="留言板"

pc/src/pages/A2Main/Tab4Msg/index.tsx

@@ -61,7 +61,6 @@ function Tab4Msg({ closeFu, btnOkFlag, barrageList, goodsId }: Props) {
         <div className="tab4MTop">留言板</div>
 
         {/* 留言列表 */}
-
         {barrageList.length > 0 ? (
           <div className="tab4Mlist myscroll">
             {barrageList.map((v) => (

pc/src/pages/A3Goods/index.tsx

@@ -1,8 +1,9 @@
 import React, { useEffect, useState } from "react";
 import styles from "./index.module.scss";
-import { urlParameter } from "@/utils/history";
+import { isMobiileFu, urlParameter } from "@/utils/history";
 import { useLocation } from "react-router-dom";
 import Tab4Info from "../A2Main/Tab4Info";
+import Tab3InfoM from "../App/MainM/Tab3/Tab3InfoM";
 
 function A3Goods() {
   const [id, setId] = useState(0);
@@ -16,9 +17,14 @@ function A3Goods() {
   }, [location.search]);
 
   return (
-    // 待完善 isMobiileFu
     <div className={styles.A3Goods}>
-      {id ? <Tab4Info id={id} isOpen={true} /> : null}
+      {id ? (
+        isMobiileFu() ? (
+          <Tab3InfoM id={id} isOpen={true} />
+        ) : (
+          <Tab4Info id={id} isOpen={true} />
+        )
+      ) : null}
     </div>
   );
 }

pc/src/pages/App/MainM/Tab3/Tab3InfoM/Tab3InfoMtxt/index.module.scss

@@ -6,8 +6,8 @@
   left: 0;
   height: 200px;
   transition: all .3s;
-  background-color: rgba(0, 0, 0, .6);
-  // backdrop-filter: blur(4px);
+  background-color: rgba(0, 0, 0, .9);
+  // backdrop-filter: blur(10px);
   border-radius: 24px 24px 0 0;
   padding: 20px;
   color: #fff;
@@ -164,13 +164,229 @@
       }
 
       // ---------------留言
+      .tab3ITmain4 {
+        position: relative;
+
+        .t3IT4top {
+          height: 282px;
+
+          // antd表单样式重置
+          .ant-col {
+            flex: none;
+          }
+
+          .ant-form-item-label {
+            width: 80px;
+            line-height: 32px;
+            height: 32px;
+            margin-right: 15px;
+
+            &>label {
+              display: block;
+              width: 100%;
+              color: #fff;
+              text-align: right;
+
+              &::before {
+                color: var(--themeColor);
+              }
+            }
+          }
+
+          .ant-form-item-control {
+            width: calc(100% - 95px);
+          }
+
+          .ant-input-affix-wrapper {
+            background-color: transparent;
+            border-color: var(--themeColor);
+
+            textarea {
+              height: 74px !important;
+            }
+
+            .ant-input {
+              color: #fff;
+              background-color: transparent;
+
+              /*修改提示文字的颜色*/
+              &::-webkit-input-placeholder {
+                /* WebKit browsers */
+                color: rgba(255, 255, 255, .6);
+              }
+
+              &:-moz-placeholder {
+                /* Mozilla Firefox 4 to 18 */
+                color: rgba(255, 255, 255, .6);
+              }
+
+              &::-moz-placeholder {
+                /* Mozilla Firefox 19+ */
+                color: rgba(255, 255, 255, .6);
+              }
+
+              &:-ms-input-placeholder {
+                /* Internet Explorer 10+ */
+                color: rgba(255, 255, 255, .6);
+              }
+
+            }
+
+            .ant-input-show-count-suffix {
+              color: rgba(255, 255, 255, .6);
+            }
+
+            .ant-input-data-count {
+              right: 4px;
+              color: rgba(255, 255, 255, .6);
+            }
+
+          }
+
+          .ant-input-affix-wrapper-status-error:not(.ant-input-affix-wrapper-disabled):not(.ant-input-affix-wrapper-borderless).ant-input-affix-wrapper {
+            border-color: #ff4d4f;
+          }
+
+          .ant-form-item-explain-error {
+            color: #fff;
+          }
+
+
+
+          .t3IT4top_code {
+            width: calc(100% - 90px);
+          }
+
+          .F_codeImg {
+            position: absolute;
+            top: 155px;
+            right: 0px;
+            width: 80px;
+            height: 32px;
+          }
+
+          .t3IT4top_tit {
+            margin: 20px 0 15px;
+            font-size: 12px;
+            color: var(--themeColor);
+            text-align: center;
+            opacity: .6;
+          }
+
+          .t3IT4top_btn {
+            width: 70%;
+            margin: 0 auto;
+
+            .ant-btn-primary {
+              background-color: #F0D99C !important;
+              color: #625241 !important;
+              font-size: 16px;
+              border: none !important;
+              width: 100%;
+              height: 36px;
+              line-height: 26px;
+              text-align: center;
+            }
+          }
+
+
+        }
+
+        .t3IT4top {
+          margin-top: 50px;
+        }
+
+        // 底部的留言列表
+        .t3ITfloo {
+          width: 100%;
+          height: calc(100% - 300px);
+          margin-top: 18px;
+          padding-top: 15px;
+          border-top: 1px dashed var(--themeColor);
+
+          .t3ITflooSon {
+            width: 100%;
+            height: 100%;
+            overflow-y: auto;
+            padding-right: 15px;
+            padding-bottom: 80px;
+
+
+            .t3ITlistRow {
+              padding-left: 20px;
+              position: relative;
+              padding-bottom: 24px;
+
+              .t3ITlist_Title {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                margin-bottom: 8px;
+
+                .t3ITlist_Title_l {
+                  font-size: 16px;
+                }
+
+                .t3ITlist_Title_r {
+                  font-size: 12px;
+                  opacity: .6;
+                }
+              }
+
+              .t3ITlist_Txt {
+                font-size: 14px;
+                line-height: 18px;
+                word-wrap: break-word;
+              }
+
+              &::before {
+                content: '';
+                position: absolute;
+                z-index: 2;
+                top: 5px;
+                left: 0px;
+                width: 12px;
+                height: 12px;
+                border-radius: 50%;
+                background-color: var(--themeColor);
+              }
+
+              &::after {
+                content: '';
+                position: absolute;
+                width: 1px;
+                height: 100%;
+                top: 5px;
+                left: 5px;
+                border-left: 1px dashed var(--themeColor);
+              }
+
+              &:last-child {
+                padding-bottom: 0px;
+
+                &::after {
+                  display: none;
+                }
+              }
+            }
+          }
+
+
+
+        }
+
+        .t3ITflooAll {
+          height: 100%;
+        }
+      }
+
     }
 
   }
 }
 
 .Tab3InfoMtxtAc {
-  height: calc(100% - 20px);
+  height: calc(100% - 16px);
 }
 
 .Tab3InfoMtxtHide {

pc/src/pages/App/MainM/Tab3/Tab3InfoM/Tab3InfoMtxt/index.tsx

@@ -1,10 +1,25 @@
-import React, { useEffect, useMemo, useState } from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import styles from "./index.module.scss";
-import { A2BarrageType, A2GoodsType, A2QuestionType } from "@/types";
+import {
+  A2BarrageType,
+  A2GoodsType,
+  A2QuestionType,
+  A2R_fSaveType,
+} from "@/types";
 import classNames from "classnames";
 import { envUrl } from "@/utils/env";
 import Tab4S3 from "@/pages/A2Main/Tab4S3";
 import Tab4S4 from "@/pages/A2Main/Tab4S4";
+import { A2_APIgetRandCode, A2_APIsaveBarrage } from "@/store/action/A2Main";
+import { Toast } from "antd-mobile";
+import { Button, Form, FormInstance, Input } from "antd";
+import TextArea from "antd/es/input/TextArea";
 
 const topArrTemp = [
   {
@@ -25,7 +40,7 @@ const topArrTemp = [
   {
     id: 2,
     name: "留言",
-    flag: true,
+    flag: false,
   },
 ];
 
@@ -54,8 +69,11 @@ function Tab3InfoMtxt({
   goodsId,
   closeAudioFu,
 }: Props) {
-  // 页面的展开和收起-待完善
-  const [pageShow, setPageShow] = useState(true);
+  // 表单的ref
+  const FormBoxRef = useRef<FormInstance>(null);
+
+  // 页面的展开和收起
+  const [pageShow, setPageShow] = useState(false);
 
   useEffect(() => {
     if (!pageShow) {
@@ -71,13 +89,55 @@ function Tab3InfoMtxt({
   // 顶部的数组
   const topArr = useMemo(() => {
     const arr = [...topArrTemp];
-    // 判断 问答 和 知识 是否显示
-    if (wdFlag) arr[1].flag = true;
-    if (zsFlag) arr[2].flag = true;
+    // 判断 问答 和 知识 留言 是否显示
+    arr[1].flag = wdFlag;
+    arr[2].flag = zsFlag;
+    arr[3].flag = btnOkFlag || barrageList.length > 0;
+
     return arr.filter((v) => v.flag);
-  }, [wdFlag, zsFlag]);
+  }, [barrageList.length, btnOkFlag, wdFlag, zsFlag]);
 
   // ------------------------留言 ----------------------------
+  const [codeImg, setCodeImg] = useState<any>("");
+
+  // 获取验证码函数
+  const getRandCodeFu = useCallback(async () => {
+    const res: any = await A2_APIgetRandCode();
+    const reader = new FileReader();
+    reader.readAsDataURL(res);
+    reader.onload = () => {
+      setCodeImg(reader.result);
+    };
+    // console.log(123, res);
+  }, []);
+
+  useEffect(() => {
+    getRandCodeFu();
+  }, [getRandCodeFu]);
+
+  // 没有通过校验
+  const onFinishFailed = useCallback(() => {}, []);
+
+  // 通过校验
+  const onFinish = useCallback(
+    async (value: A2R_fSaveType) => {
+      const obj = {
+        ...value,
+        goodsId,
+      };
+      const res = await A2_APIsaveBarrage(obj);
+      if (res.code === 0) {
+        Toast.show({
+          icon: "success",
+          content: "留言成功，等待审核",
+        });
+
+        // 初始化表单
+        FormBoxRef.current?.resetFields();
+      }
+    },
+    [goodsId]
+  );
 
   return (
     <div
@@ -155,6 +215,117 @@ function Tab3InfoMtxt({
         {topAc === 4 ? (
           <Tab4S4 type={info.tagType} closeFu={() => {}} isApp={true} />
         ) : null}
+
+        {/* --------------------留言-------------------- */}
+        {topAc === 2 ? (
+          <div className="tab3ITmain4">
+            {/* 上面的表单 */}
+            {btnOkFlag ? (
+              <div
+                className={classNames(
+                  "t3IT4top",
+                  barrageList.length <= 0 ? "t3IT4topOne" : ""
+                )}
+              >
+                <Form
+                  ref={FormBoxRef}
+                  labelCol={{ span: 0 }}
+                  name="basic"
+                  onFinish={onFinish}
+                  onFinishFailed={onFinishFailed}
+                  autoComplete="off"
+                >
+                  <Form.Item
+                    label="留言内容"
+                    name="name"
+                    rules={[
+                      { required: true, message: "内容不能为空" },
+                      {
+                        validator: (rule, value) => {
+                          if (value) {
+                            const txt = value
+                              .replaceAll(" ", "")
+                              .replaceAll("\n", "");
+                            return txt === ""
+                              ? Promise.reject("内容不能为空")
+                              : Promise.resolve();
+                          } else return Promise.resolve();
+                        },
+                      },
+                    ]}
+                  >
+                    <TextArea
+                      rows={4}
+                      placeholder="请输入内容"
+                      showCount
+                      maxLength={50}
+                    />
+                  </Form.Item>
+
+                  <Form.Item
+                    label="您的昵称"
+                    name="authorName"
+                    rules={[{ required: true, message: "内容不能为空" }]}
+                    getValueFromEvent={(e) =>
+                      e.target.value.replace(/\s+/g, "")
+                    }
+                  >
+                    <Input maxLength={8} showCount placeholder="请输入内容" />
+                  </Form.Item>
+
+                  <Form.Item
+                    className="t3IT4top_code"
+                    label="验证码"
+                    name="randCode"
+                    rules={[{ required: true, message: "内容不能为空" }]}
+                    getValueFromEvent={(e) =>
+                      e.target.value.replace(/\s+/g, "")
+                    }
+                  >
+                    <Input maxLength={5} showCount placeholder="请输入内容" />
+                  </Form.Item>
+
+                  {/* 验证码图 */}
+                  <div className="F_codeImg">
+                    <img src={codeImg} alt="" onClick={() => getRandCodeFu()} />
+                  </div>
+
+                  <div className="t3IT4top_tit">
+                    您的留言经审核并采纳后，才会在平台中公开展示
+                  </div>
+
+                  <Form.Item className="t3IT4top_btn">
+                    <Button type="primary" htmlType="submit">
+                      留言
+                    </Button>
+                  </Form.Item>
+                </Form>
+              </div>
+            ) : null}
+
+            {/* 下面的留言列表 */}
+            {barrageList.length ? (
+              <div
+                className={classNames(
+                  "t3ITfloo",
+                  btnOkFlag ? "" : "t3ITflooAll"
+                )}
+              >
+                <div className="t3ITflooSon myscroll">
+                  {barrageList.map((v) => (
+                    <div className="t3ITlistRow" key={v.id}>
+                      <div className="t3ITlist_Title">
+                        <div className="t3ITlist_Title_l">{v.authorName}</div>
+                        <div className="t3ITlist_Title_r">{v.createTime}</div>
+                      </div>
+                      <div className="t3ITlist_Txt">{v.name}</div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            ) : null}
+          </div>
+        ) : null}
       </div>
     </div>
   );

pc/src/pages/App/MainM/Tab3/Tab3InfoM/index.module.scss

@@ -1,16 +1,228 @@
-.Tab3InfoM{
+.Tab3InfoM {
   position: fixed;
-  z-index: 9999;
+  z-index: 20;
   top: 50%;
   left: 50%;
-  transform: translate(-50%,-50%);
+  transform: translate(-50%, -50%);
   width: 100%;
   height: 100%;
   max-width: 500px;
   background-color: #554a3e;
-  padding: 10px 0 60px;
 
-  :global{
+  :global {
+    .t3Imain {
+      width: 100%;
+      height: calc(100% - 200px);
+      position: relative;
+      padding-top: 16px;
+
+      .t3Iback {
+        position: absolute;
+        z-index: 10;
+        top: 18px;
+        left: 8px;
+        z-index: 40;
+      }
+
+      // 顶部按钮
+      .t3ItopBtn {
+        position: relative;
+        z-index: 10;
+        display: flex;
+        justify-content: space-between;
+        width: calc(100% - 100px);
+        margin: 0 auto;
+        display: flex;
+        height: 34px;
+
+        .t3ItopBtnRow {
+          color: var(--themeColor);
+          line-height: 32px;
+          text-align: center;
+          border-radius: 0 10px 0 10px;
+          border: 1px solid var(--themeColor);
+          width: 28%;
+        }
+
+        .t3ItopBtnRowAc {
+          pointer-events: none;
+          background-color: var(--themeColor);
+          color: #4A403D;
+        }
+      }
+
+      // 主体模型
+      .t3IifrBox {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 9;
+
+        iframe {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      // 其他附件
+      .t3IFileBox {
+        margin-top: 60px;
+        width: 100%;
+        height: calc(100% - 160px);
+        position: relative;
+        z-index: 8;
+
+
+        .R1_row {
+          width: calc(100% - 100px);
+          height: 100%;
+          text-align: center;
+          position: absolute;
+          top: 0;
+          left: 50%;
+          transform: translateX(-50%);
+          opacity: 0;
+          pointer-events: none;
+
+          video {
+            max-width: 100%;
+            max-height: 100%;
+          }
+
+          img {
+            object-fit: contain !important;
+          }
+
+          .lookImg {
+            background-color: transparent;
+            // opacity: 0 !important;
+          }
+        }
+
+        .R1_rowAc {
+          opacity: 1;
+          pointer-events: auto;
+        }
+
+        .showIndBox {
+          pointer-events: none;
+          opacity: .8;
+          position: absolute;
+          z-index: 10;
+          bottom: 5px;
+          left: 50%;
+          transform: translateX(-50%);
+          font-size: 12px;
+          color: #4A403D;
+          background-color: var(--themeColor);
+          padding: 5px 10px;
+          border-radius: 20px;
+        }
+
+        // antdM的图片
+        .adm-image {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      // 左右按钮
+      .R_left {
+        position: absolute;
+        top: 50%;
+        width: 40px;
+        height: 40px;
+        left: 5px;
+        z-index: 12;
+        transform: translateY(-50%);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+
+      .R_right {
+        position: absolute;
+        top: 50%;
+        width: 40px;
+        height: 40px;
+        right: 5px;
+        z-index: 12;
+        transform: translateY(-50%);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+
+    }
+
+
+    // 底部按钮
+    .t3Iicon {
+      position: absolute;
+      z-index: 20;
+      left: 50%;
+      bottom: 214px;
+      transform: translateX(-50%);
+      height: 40px;
+      display: flex;
+      border-radius: 20px;
+      background-color: rgba(255, 255, 255, .2);
+      // backdrop-filter: blur(6px);
+      padding: 0 10px;
+
+      .t3IiconRow {
+        margin-bottom: 15px;
+        position: relative;
+        margin: 0 10px;
+
+        img {
+          display: inline-block;
+          position: relative;
+          top: 5px;
+          width: 30px;
+          height: 30px;
+
+        }
+
+        // 点赞
+        .moveImg {
+          pointer-events: none;
+          position: absolute;
+          bottom: 0px;
+          left: 8px;
+          color: #fff;
+          width: 60px;
+        }
+      }
+    }
+
+    // 滚动弹幕
+    .barrMove {
+      z-index: 49;
+      pointer-events: none;
+      position: absolute;
+      right: -1300px;
+      top: 55px;
+      background-color: rgba(255, 255, 255, .2);
+      backdrop-filter: blur(6px);
+      padding: 8px 30px;
+      border-radius: 36px;
+      overflow: hidden;
+
+      &>h3 {
+        font-size: 14px;
+        color: #fff;
+      }
+
+      &>P {
+        font-size: 12px;
+        color: #fff;
+        opacity: .6;
+      }
+
+    }
 
   }
 }

pc/src/pages/App/MainM/Tab3/Tab3InfoM/index.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable jsx-a11y/iframe-has-title */
 import React, {
   useCallback,
   useEffect,
@@ -22,7 +23,16 @@ import {
   A2_APIgetQuestion,
   A2_APIgoodsaddStar,
 } from "@/store/action/A2Main";
-import { Toast } from "antd-mobile";
+import { Image, ImageViewer, Toast } from "antd-mobile";
+import backImg from "@/assets/img/goods/toBack.png";
+import classNames from "classnames";
+import { baseURL } from "@/utils/http";
+import R_leftImg from "@/assets/img/goods/R_left.png";
+import R_rightImg from "@/assets/img/goods/R_right.png";
+import fallbackImg from "@/assets/img/IMGerror.png";
+import placeholderImg from "@/assets/img/loading.gif";
+import { envUrl } from "@/utils/env";
+import { gsap } from "gsap";
 
 type Props = {
   isOpen: boolean;
@@ -303,8 +313,181 @@ function Tab3InfoM({ isOpen, id, closePage }: Props) {
     [showInd]
   );
 
+  // antdM 单张图片预览
+  const [lookImgUrl, setLookImgUrl] = useState("");
+
+  // 点击 底部的展开按钮的时候 暂停 音频和 视频
+  const closeAudioFu = useCallback(() => {
+    // 暂停音频
+    audioCutFu(true);
+    // 暂时视频
+    if (type === "video") {
+      const videoDom = document.querySelector(".videoBox") as HTMLVideoElement;
+      if (videoDom) videoDom.pause();
+    }
+  }, [audioCutFu, type]);
+
   return (
     <div className={styles.Tab3InfoM}>
+      {/* 自己的信息盒子 */}
+      <div className="t3Imain">
+        {/* 返回按钮 */}
+        <img
+          className="t3Iback"
+          hidden={isOpen}
+          onClick={closePage}
+          src={backImg}
+          alt=""
+        />
+
+        {/* 顶部的 模型 视频 图片 切换 */}
+        <div className="t3ItopBtn" hidden={typeArr.length <= 1}>
+          {typeArr.map((v) => (
+            <div
+              onClick={() => setType(v.type)}
+              className={classNames(
+                "t3ItopBtnRow",
+                type === v.type ? "t3ItopBtnRowAc" : ""
+              )}
+              key={v.type}
+            >
+              {v.name}
+              {fileList[v.type].length > 1 ? fileList[v.type].length : null}
+            </div>
+          ))}
+        </div>
+
+        {/* 主体模型 */}
+        {fileList.model && fileList.model[0] && fileList.model[0].id ? (
+          <div className="t3IifrBox" hidden={type !== "model"}>
+            <iframe
+              src={`model.html?m=${fileList.model[0].filePath}`}
+              frameBorder="0"
+            ></iframe>
+          </div>
+        ) : null}
+
+        {/* 主体 其他附件 */}
+        <div className="t3IFileBox">
+          {list.map((v, i) => (
+            <div
+              className={classNames("R1_row", i === showInd ? "R1_rowAc" : "")}
+              key={v.id}
+            >
+              {v.type === "video" && i === showInd ? (
+                <video
+                  className="videoBox"
+                  src={baseURL + v.filePath}
+                  controls
+                ></video>
+              ) : v.type === "img" ? (
+                <Image
+                  onClick={() => setLookImgUrl(baseURL + v.filePath)}
+                  lazy
+                  src={baseURL + v.filePath}
+                  placeholder={<img src={placeholderImg} alt="" />}
+                  fallback={<img src={fallbackImg} alt="" />}
+                />
+              ) : null}
+            </div>
+          ))}
+          {/* 索引 */}
+          {list.length > 1 ? (
+            <div className="showIndBox">
+              {showInd + 1} / {list.length}
+            </div>
+          ) : null}
+
+          {/* 左右按钮 */}
+          <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>
+
+        {/* antdM 单张图片预览 */}
+        <ImageViewer
+          image={lookImgUrl}
+          visible={!!lookImgUrl}
+          onClose={() => setLookImgUrl("")}
+        />
+      </div>
+
+      {/* 音频控件 */}
+      {right1.url ? (
+        <audio hidden src={baseURL + right1.url} controls id="myAudio"></audio>
+      ) : null}
+
+      {/* 音频 弹幕 点赞 分享 按钮 */}
+      <div className="t3Iicon">
+        {/* 音频 */}
+        {right1.url ? (
+          <div className="t3IiconRow" onClick={() => audioCutFu(right1.show)}>
+            <img
+              src={`${envUrl}/App/main3/icon1${right1.show ? "Ac" : ""}.png`}
+              alt=""
+            />
+          </div>
+        ) : null}
+
+        {/* 弹幕 */}
+        {right5.done ? (
+          <div
+            className="t3IiconRow"
+            onClick={() => setRight5({ show: !right5.show, done: true })}
+          >
+            <img
+              src={`${envUrl}/App/main3/icon5${right5.show ? "Ac" : ""}.png`}
+              alt=""
+            />
+          </div>
+        ) : null}
+
+        {/* 点赞 */}
+        <div className="t3IiconRow" onClick={() => likeClickFu()} title="点赞">
+          <img
+            src={`${envUrl}/App/main3/icon6${right6 ? "Ac" : ""}.png`}
+            alt=""
+          />
+          <div className="moveImg" hidden={!right6}>
+            +1
+          </div>
+        </div>
+
+        {/* 分享 */}
+        <div className="t3IiconRow" onClick={() => fenXClickFu()} title="分享">
+          <img
+            src={`${envUrl}/App/main3/icon7${right7 ? "Ac" : ""}.png`}
+            alt=""
+          />
+        </div>
+      </div>
+
+      {/* 弹幕的盒子 */}
+      {barrageAll.length ? (
+        <div className="barrMove" ref={barrMoveRef} hidden={!right5.show}>
+          <h3>{barrageAll[barrInd].name}</h3>
+          <p>
+            {barrageAll[barrInd].authorName}&nbsp;
+            {barrageAll[barrInd].createTime}
+            &nbsp;观&nbsp;[{barrageAll[barrInd].goodsName}]&nbsp;有感
+          </p>
+        </div>
+      ) : null}
+
       {/* 底部的信息 */}
       <Tab3InfoMtxt
         info={info}
@@ -317,8 +500,8 @@ function Tab3InfoM({ isOpen, id, closePage }: Props) {
         barrageList={barrage}
         btnOkFlag={right2}
         goodsId={id}
-        // 关闭音��
-        closeAudioFu={() => audioCutFu(false)}
+        // 暂停音频和视��
+        closeAudioFu={closeAudioFu}
       />
     </div>
   );

pc/src/pages/App/MainM/Tab5/Info/index.module.scss

@@ -99,4 +99,9 @@
     }
 
   }
+}
+
+.InfoisGoodsRu{
+  top: -16px;
+  height: calc(100% + 16px);
 }

pc/src/pages/App/MainM/Tab5/Info/index.tsx

@@ -12,7 +12,7 @@ import { PcTab5ListType } from "@/pages/A2Main/Tab5Info";
 import { A2_APItab5Info } from "@/store/action/A2Main";
 import { envUrl, isEnvFlag } from "@/utils/env";
 import { Spin } from "antd";
-import classNmaes from "classnames";
+import classNames from "classnames";
 import Menu from "../Menu";
 
 type Props = {
@@ -141,10 +141,11 @@ function Info({ sId, closeFu, isOpen, title, isGoodsRu }: Props) {
   const [menuFlag, setMenuFlag] = useState(false);
 
   return (
-    <div className={styles.Info} style={{ paddingTop: isGoodsRu ? 0 : 20 }}>
+    <div
+      className={classNames(styles.Info, isGoodsRu ? styles.InfoisGoodsRu : "")}
+    >
       {/* 返回按钮 */}
       <img
-        style={{ top: isGoodsRu ? -2 : 18 }}
         className="tab5Iback"
         hidden={isOpen}
         onClick={closeFu}
@@ -178,7 +179,7 @@ function Info({ sId, closeFu, isOpen, title, isGoodsRu }: Props) {
       >
         <div
           onClick={() => cutAcIdFu(-1, acIndex)}
-          className={classNmaes("tab5Ibtn1", acIndex === 0 ? "tab5IbtnNo" : "")}
+          className={classNames("tab5Ibtn1", acIndex === 0 ? "tab5IbtnNo" : "")}
         >
           <img src={`${envUrl}/App/main5/left.png`} alt="" />
           <span>上一页</span>
@@ -189,7 +190,7 @@ function Info({ sId, closeFu, isOpen, title, isGoodsRu }: Props) {
         </div>
         <div
           onClick={() => cutAcIdFu(1, acIndex)}
-          className={classNmaes(
+          className={classNames(
             "tab5Ibtn1 tab5Ibtn3",
             acIndex >= dataFilter.length - 1 ? "tab5IbtnNo" : ""
           )}

pc/src/utils/http.ts

@@ -1,13 +1,15 @@
 import axios from "axios";
 import { MessageFu } from "./message";
 import { domShowFu } from "./domShow";
+import { isMobiileFu } from "./history";
+import { Toast } from "antd-mobile";
 // 请求基地址
 export const baseURL =
   // 线下的图片地址需要加上/api/
   // process.env.NODE_ENV === "development"
   //   ? "http://192.168.20.55:8041/api/"
   //   : "";
-process.env.NODE_ENV === "development" ? "https://ypbwg.4dage.com" : "";
+  process.env.NODE_ENV === "development" ? "https://ypbwg.4dage.com" : "";
 
 // 处理  类型“AxiosResponse<any, any>”上不存在属性“code”
 declare module "axios" {
@@ -55,7 +57,14 @@ http.interceptors.response.use(
     }
     if (response.data.code === 0) {
       // MessageFu.success(response.data.msg);
-    } else MessageFu.warning(response.data.msg);
+    } else {
+      isMobiileFu()&&response.data.msg
+        ? Toast.show({
+            icon: "fail",
+            content: response.data.msg,
+          })
+        : MessageFu.warning(response.data.msg);
+    }
 
     return response.data;
   },
@@ -66,8 +75,20 @@ http.interceptors.response.use(
       domShowFu("#AsyncSpinLoding", false);
       // 如果因为网络原因，response没有，给提示消息
       if (!err.response) {
-        MessageFu.error("网络繁忙，请稍后重试!");
-      } else MessageFu.error("响应错误，请联系管理员!");
+        isMobiileFu()
+          ? Toast.show({
+              icon: "fail",
+              content: "网络繁忙，请稍后重试!",
+            })
+          : MessageFu.error("网络繁忙，请稍后重试!");
+      } else {
+        isMobiileFu()
+          ? Toast.show({
+              icon: "fail",
+              content: "响应错误，请联系管理员!",
+            })
+          : MessageFu.error("响应错误，请联系管理员!");
+      }
     }, 100);
 
     return Promise.reject(err);