up增加音频功能

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

@@ -25,6 +25,18 @@
       display: flex;
       justify-content: space-between;
 
+      .A3audio {
+        cursor: pointer;
+        position: absolute;
+        right: 60px;
+        top: 80px;
+        z-index: 99;
+
+        &>img {
+          width: 50px;
+        }
+      }
+
       .A3Ileft {
         width: 54%;
         // background-color: #8e9596;

src/pages/A3Goods/GoodsInfo/index.tsx

@@ -24,6 +24,9 @@ import ImageLazy from "@/components/ImageLazy";
 import store, { RootState } from "@/store";
 import { useSelector } from "react-redux";
 
+import musicImg from "@/assets/img/icon-music.png";
+import musicImgX from "@/assets/img/icon-musicX.png";
+
 type Props = {
   info: Goods;
   colseFu: () => void;
@@ -83,7 +86,7 @@ function GoodsInfo({ info, colseFu, type }: Props) {
 
   // 整理右边的信息
   const filterArr = useMemo(() => {
-    return ["id", "type1", "type2", "name", "showType", "showNum"];
+    return ["id", "type1", "type2", "name", "showType", "showNum", "isAudio"];
   }, []);
 
   const rightTxtInfo = useMemo(() => {
@@ -97,6 +100,25 @@ function GoodsInfo({ info, colseFu, type }: Props) {
     return arr;
   }, [filterArr, info]);
 
+  // 音频的播放和暂停
+  const [audioSta, setAudioSta] = useState(false);
+  const audioRef = useRef<HTMLAudioElement>(null);
+
+  useEffect(() => {
+    const dom = audioRef.current;
+    if (dom) {
+      if (audioSta) {
+        dom.play();
+        dom.onended = () => {
+          // 音频播放结束
+          setAudioSta(false);
+        };
+      } else {
+        dom.pause();
+      }
+    }
+  }, [audioSta]);
+
   return (
     <div
       className={styles.GoodsInfo}
@@ -107,6 +129,23 @@ function GoodsInfo({ info, colseFu, type }: Props) {
       <img onClick={colseFu} className="A3IBack" src={backImg} alt="" />
 
       <div className="A3Imain">
+        {/* 新增加的音频 */}
+        {info.isAudio ? (
+          <>
+            <audio
+              ref={audioRef}
+              src={`${baseURL}/audio/${info.isAudio}`}
+            ></audio>
+            <div
+              className="A3audio"
+              title={audioSta ? "关闭音频" : "打开音频"}
+              onClick={() => setAudioSta(!audioSta)}
+            >
+              <img src={audioSta ? musicImg : musicImgX} alt="" />
+            </div>
+          </>
+        ) : null}
+
         {/* 左边模型 */}
         <div
           className={classNames("A3Ileft", full ? "A3IleftFull" : "")}
@@ -156,8 +195,6 @@ function GoodsInfo({ info, colseFu, type }: Props) {
             </>
           )}
 
-          {/* 模型 */}
-
           {/* 左右按钮 */}
           <div
             onClick={() => setModelShow(modelShow - 1)}

src/pages/A3GoodsM/GoodsInfoM/index.module.scss

@@ -30,6 +30,17 @@
       width: 40px;
     }
 
+
+    .A3audio{
+      position: absolute;
+      z-index: 99;
+      top: 15px;
+      right: 15px;
+      &>img{
+        width: 40px;
+      }
+    }
+
     .A3IRtit {
       display: flex;
       justify-content: center;

src/pages/A3GoodsM/GoodsInfoM/index.tsx

@@ -1,5 +1,11 @@
 /* eslint-disable jsx-a11y/iframe-has-title */
-import React, { useCallback, useMemo, useRef, useState } from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import styles from "./index.module.scss";
 import { Goods } from "@/types";
 import { baseURL } from "@/utils/http";
@@ -16,6 +22,9 @@ import {
 import ImageLazy from "@/components/ImageLazy";
 import { ImageViewer } from "antd-mobile";
 
+import musicImg from "@/assets/img/icon-music.png";
+import musicImgX from "@/assets/img/icon-musicX.png";
+
 type Props = {
   info: Goods;
   colseFu: () => void;
@@ -80,7 +89,7 @@ function GoodsInfoM({ info, colseFu, type }: Props) {
 
   // 整理右边的信息
   const filterArr = useMemo(() => {
-    return ["id", "type1", "type2", "name", "showType", "showNum"];
+    return ["id", "type1", "type2", "name", "showType", "showNum", "isAudio"];
   }, []);
 
   const rightTxtInfo = useMemo(() => {
@@ -94,6 +103,25 @@ function GoodsInfoM({ info, colseFu, type }: Props) {
     return arr;
   }, [filterArr, info]);
 
+  // 音频的播放和暂停
+  const [audioSta, setAudioSta] = useState(false);
+  const audioRef = useRef<HTMLAudioElement>(null);
+
+  useEffect(() => {
+    const dom = audioRef.current;
+    if (dom) {
+      if (audioSta) {
+        dom.play();
+        dom.onended = () => {
+          // 音频播放结束
+          setAudioSta(false);
+        };
+      } else {
+        dom.pause();
+      }
+    }
+  }, [audioSta]);
+
   return (
     <div
       className={styles.GoodsInfoM}
@@ -104,7 +132,22 @@ function GoodsInfoM({ info, colseFu, type }: Props) {
       <div className="GoodsInfoMmian mySorrl">
         {/* 返回  */}
         <img onClick={colseFu} className="A3IBack" src={backImg} alt="" />
-
+        {/* 新增加的音频 */}
+        {info.isAudio ? (
+          <>
+            <audio
+              ref={audioRef}
+              src={`${baseURL}/audio/${info.isAudio}`}
+            ></audio>
+            <div
+              className="A3audio"
+              title={audioSta ? "关闭音频" : "打开音频"}
+              onClick={() => setAudioSta(!audioSta)}
+            >
+              <img src={audioSta ? musicImg : musicImgX} alt="" />
+            </div>
+          </>
+        ) : null}
         {/* 标题 */}
         <div className="A3IRtit">
           <img src={name1Img} alt="" />

src/types/api/layot.d.ts

@@ -18,6 +18,7 @@ export type Goods = {
   state: string;
   showType: 'model'|'img';
   showNum: number;
+  isAudio:string|undefined
 };
 
 export type DataAllType = {