ai-copyright-mobile/src/views/Detail/Detail.jsx

// import React from 'react'
import { useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { useLocation } from 'react-router-dom'
import './detail.less'
import {
  Button,
  Loading,
  Mask,
  Space,
} from 'antd-mobile'
import { GetDownAll, GetDownapply, GetDownmanualPdf,GetDowncode } from '../../request/api'
import pen from '@/static/images/Detail/pen.png'
import center from '@/static/images/Detail/center.png'
import file from '@/static/images/Detail/file.png'
export default function Detail() {
  const [loading, setLoading] = useState(false);//是否有加载中

  const nav = useNavigate()
  const location = useLocation();
  const item = location.state;
  useEffect(() => {
    // 获取token
    let token = sessionStorage.getItem('token')
    if (!token) {
      nav('/login')
    }
    if (!item) {
      // 如果没有接收到item，可以导航回列表页或者显示错误信息
      nav('/list');

    }
    // console.log(item);
    // console.log(downloadAll(item.projId));

  }, [])
  return (
    <div className='detailBox'>
      <div className='formBox'>
        <div className='useImg'></div>
        <div className='bookimg'></div>
        <div className='projName'>
          {item.projName}
        </div>
        <div className='peopleName'>
          产权所属者：{item.apply.authorName}
        </div>
        <div className='timeBox'>
          <div className='timeImg'>
          </div>
          <div>
            {item.apply.projDevCompleteDate}
          </div>
        </div>
        <div className='downBox'>
          <div className='done' onClick={async () => {
            setLoading(true)
            const res = await GetDownapply(item.projId);
            setLoading(false)
            // console.log(res);
            const blob = new Blob([res]);
            let url = window.URL.createObjectURL(blob);
            const link = document.createElement("a");
            link.href = url;
            // console.log(url);
            link.download = `申请表.docx`;
            link.click();
            URL.revokeObjectURL(url);
          }}>
            <div className='penImge'>
              <img src={pen} style={{ width: '100%', height: '100%' }} alt="" />
            </div>
            <div className='doneName'>申请表</div>
          </div>
          <div className='done'
            onClick={async () => {
              setLoading(true)
              const res = await GetDownmanualPdf(item.projId);
              setLoading(false)
              // console.log(res);
              const blob = new Blob([res]);
              let url = window.URL.createObjectURL(blob);
              const link = document.createElement("a");
              link.href = url;
              // console.log(url);
              link.download = `${item.projName}操作手册.pdf`;
              link.click();
              URL.revokeObjectURL(url);
            }}
          >
            <div className='centerImge'>
              <img src={center} style={{ width: '100%', height: '100%' }} alt="" />
            </div>
            <div className='doneName'>操作手册</div>
          </div>
          <div className='done'
            onClick={async () => {
              setLoading(true)
              const res = await GetDowncode(item.projId);
              setLoading(false)
              // console.log(res);
              const blob = new Blob([res]);
              let url = window.URL.createObjectURL(blob);
              const link = document.createElement("a");
              link.href = url;
              // console.log(url);
              link.download = `${item.projName}源代码.zip`;
              link.click();
              URL.revokeObjectURL(url);
            }}
          >
            <div className='fileImge'>
              <img src={file} style={{ width: '100%', height: '100%' }} alt="" />
            </div>
            <div className='doneName'>源代码</div>
          </div>
        </div>
        <div className='downAllBtn' onClick={async () => {
          // window.open(`http://192.168.0.15:7025/copyright/app/proj/download/all/${item.projId}`)
          // try {
          //   setLoading(true)
          //   const res = await GetDownAll(item.projId);
          //   setLoading(false)
          //   console.log(res);
          //   const blob = new Blob([res]);
          //   let url = window.URL.createObjectURL(blob);
          //   const link = document.createElement("a");
          //   link.href = url;
          //   console.log(url);
          //   link.download = `${item.projName}.zip`;
          //   link.click();
          //   URL.revokeObjectURL(url);
          // } catch (error) {
          //   console.log(error);
          // }
          setLoading(true)
          const res = await GetDownAll(item.projId);
          setLoading(false)
          // console.log(res);
          const blob = new Blob([res]);
          let url = window.URL.createObjectURL(blob);
          const link = document.createElement("a");
          link.href = url;
          // console.log(url);
          link.download = `${item.projName}.zip`;
          link.click();
          URL.revokeObjectURL(url);
        }}>
          <div className='doneImg'></div>
          <div >全部</div>
        </div>
      </div>
      <Button className='detailBtn'
      >
        使用电脑端打开体验全部功能
      </Button>
      <Mask visible={loading} color="rgba(0, 0, 0, 0.5)">
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100vh' }}>
          <Space direction="vertical" align="center">
            <div style={{ display: 'flex' }}>
              <div style={{ color: 'white' }}>
                准备下载中
              </div>
              <Loading color="white" />
            </div>
          </Space>
        </div>
      </Mask>
    </div>
  )
}