视频展示

README.md

@@ -2,8 +2,8 @@
 
 2.测试后端文档地址：xxxxxx
 
-3.测试堡垒机位置：xxxx
+3.测试堡垒机位置：腾讯云-四维时代-项目测试服务器-111.230.233.212/data/data/museum_anhui_hefei_guojia_tongbufusheshiyanshi_data
 
-4：测试网址：xxxx
+4：测试网址：https://sit-tongbulab.4dage.com/backstage
 
 5：蓝湖地址：https://lanhuapp.com/web/#/item/project/product?tid=de3e5e3e-a489-4b19-862a-7c87ce113467&pid=ed88a7c8-b5bb-4f90-b96a-188376276431&versionId=3e81dc97-8172-4fb6-ae9a-28e22fbf54e1&docId=abbe15bd-3104-40f8-816e-56d7bda1a7e2&docType=axure&pageId=230a8f896880456289e7ca382db3263c&image_id=abbe15bd-3104-40f8-816e-56d7bda1a7e2&parentId=96e1dc1964b94a979db9e67379e75d83

src/components/MyTable/index.tsx

@@ -100,8 +100,8 @@ function MyTable({
             <ImageLazy
               width={60}
               height={60}
-              src={item[v[2]] || item.thumb}
-              srcBig={item.thumbPc}
+              src={item[v[2]] || item.coverSmall || item.cover}
+              srcBig={item.cover || item.coverSmall}
             />
           </div>
         ),

src/components/ZupOne/index.tsx

@@ -25,7 +25,6 @@ type MyTypeType = 'thumb' | 'video' | 'audio' | 'model' | 'pdf'
 type Props = {
   fileCheck: boolean //有没有点击过确定
   size: number //上传附件大小（M）
-  dirCode: string //文件的code码
   myUrl: string //请求地址
   format: string[] //上传格式 ["image/jpeg", "image/png"] ["video/mp4"] ,application/pdf
   formatTxt: string //上传图片提示
@@ -41,7 +40,6 @@ function ZupOne(
   {
     fileCheck,
     size,
-    dirCode,
     myUrl,
     format,
     formatTxt,
@@ -54,9 +52,9 @@ function ZupOne(
   ref: any
 ) {
   const [fileUrl, setFileUrl] = useState({
-    fileName: '',
-    filePath: '',
-    thumb: ''
+    originalName: '',
+    originalUrl: '',
+    compressedUrl: ''
   })
 
   const myInput = useRef<HTMLInputElement>(null)
@@ -95,14 +93,8 @@ function ZupOne(
         let myTypeRes: string = myType
         if (['pdf'].includes(myTypeRes)) myTypeRes = 'doc'
         fd.append('type', myTypeRes)
-        fd.append('dirCode', dirCode)
         fd.append('file', filesInfo)
 
-        if (myType === 'thumb') {
-          // 开启压缩图片
-          fd.append('isCompress', 'true')
-        }
-
         if (fromData) {
           for (const k in fromData) {
             if (fromData[k]) fd.append(k, fromData[k])
@@ -123,12 +115,12 @@ function ZupOne(
         }
       }
     },
-    [dirCode, format, formatTxt, fromData, myType, myUrl, size]
+    [format, formatTxt, fromData, myType, myUrl, size]
   )
 
   // 让父组件调用的 回显 附件 地址
   const setFileComFileFu = useCallback(
-    (valObj: { fileName: string; filePath: string; thumb: string }) => {
+    (valObj: { originalName: string; originalUrl: string; compressedUrl: string }) => {
       setFileUrl(valObj)
     },
     []
@@ -159,11 +151,11 @@ function ZupOne(
     (type: MyTypeType) => {
       if (type === 'pdf' || type === 'thumb') {
         // 新窗口打开
-        window.open(baseURL + fileUrl.filePath)
+        window.open(baseURL + fileUrl.originalUrl)
       } else {
         store.dispatch({
           type: 'layout/lookDom',
-          payload: { src: fileUrl.filePath, type }
+          payload: { src: fileUrl.originalUrl, type }
         })
       }
 
@@ -171,7 +163,7 @@ function ZupOne(
       // } else {
       // }
     },
-    [fileUrl.filePath]
+    [fileUrl.originalUrl]
   )
 
   return (
@@ -185,7 +177,7 @@ function ZupOne(
       />
       {myType === 'thumb' ? (
         <div
-          hidden={fileUrl.filePath !== ''}
+          hidden={fileUrl.originalUrl !== ''}
           className='file_upIcon'
           onClick={() => myInput.current?.click()}
         >
@@ -193,7 +185,7 @@ function ZupOne(
         </div>
       ) : (
         <Button
-          hidden={fileUrl.filePath !== ''}
+          hidden={fileUrl.originalUrl !== ''}
           onClick={() => myInput.current?.click()}
           icon={<UploadOutlined rev={undefined} />}
         >
@@ -203,13 +195,13 @@ function ZupOne(
 
       {/* 为图片的情况-------------- */}
       {myType === 'thumb' ? (
-        <div className='file_img' hidden={fileUrl.filePath === ''}>
+        <div className='file_img' hidden={fileUrl.originalUrl === ''}>
           {fileUrl ? (
             <ImageLazy
               width={100}
               height={100}
-              src={fileUrl.thumb || fileUrl.filePath}
-              srcBig={fileUrl.filePath || fileUrl.thumb || ''}
+              src={fileUrl.compressedUrl || fileUrl.originalUrl}
+              srcBig={fileUrl.originalUrl || fileUrl.compressedUrl || ''}
               noLook
             />
           ) : null}
@@ -218,7 +210,7 @@ function ZupOne(
           <div className='file_closeBox' hidden={isLook}>
             <MyPopconfirm
               txtK='删除'
-              onConfirm={() => setFileUrl({ fileName: '', filePath: '', thumb: '' })}
+              onConfirm={() => setFileUrl({ originalName: '', originalUrl: '', compressedUrl: '' })}
               Dom={<CloseOutlined rev={undefined} />}
             />
           </div>
@@ -229,30 +221,30 @@ function ZupOne(
               onClick={() =>
                 store.dispatch({
                   type: 'layout/lookBigImg',
-                  payload: { url: baseURL + fileUrl.filePath, show: true }
+                  payload: { url: baseURL + fileUrl.originalUrl, show: true }
                 })
               }
               rev={undefined}
             />
-            <a href={baseURL + fileUrl.filePath} download target='_blank' rel='noreferrer'>
+            <a href={baseURL + fileUrl.originalUrl} download target='_blank' rel='noreferrer'>
               <DownloadOutlined rev={undefined} />
             </a>
           </div>
         </div>
-      ) : fileUrl.filePath ? (
+      ) : fileUrl.originalUrl ? (
         <div className='fileInfo'>
-          <div className='upSuccTxt'>{fileUrl.fileName}</div>
+          <div className='upSuccTxt'>{fileUrl.originalName}</div>
           {/* 视频预览 */}
           <div
             className='clearCover'
-            hidden={!fileUrl.filePath}
+            hidden={!fileUrl.originalUrl}
             onClick={() => lookFileNoImgFu(myType)}
           >
             <EyeOutlined rev={undefined} />
           </div>
           {/* 视频下载 */}
           <a
-            href={baseURL + fileUrl.filePath}
+            href={baseURL + fileUrl.originalUrl}
             download
             target='_blank'
             className='clearCover'
@@ -262,11 +254,13 @@ function ZupOne(
           </a>
           {/* 视频删除 */}
 
-          <MyPopconfirm
-            txtK='删除'
-            onConfirm={() => setFileUrl({ fileName: '', filePath: '', thumb: '' })}
-            Dom={<CloseOutlined className='clearCover' rev={undefined} />}
-          />
+          {isLook ? null : (
+            <MyPopconfirm
+              txtK='删除'
+              onConfirm={() => setFileUrl({ originalName: '', originalUrl: '', compressedUrl: '' })}
+              Dom={<CloseOutlined className='clearCover' rev={undefined} />}
+            />
+          )}
         </div>
       ) : null}
 
@@ -274,7 +268,10 @@ function ZupOne(
         格式要求：支持{formatTxt}格式；最大支持{size}M。{upTxt}
         <br />
         <div
-          className={classNames('noUpThumb', !fileUrl.filePath && fileCheck ? 'noUpThumbAc' : '')}
+          className={classNames(
+            'noUpThumb',
+            !fileUrl.originalUrl && fileCheck ? 'noUpThumbAc' : ''
+          )}
         >
           {checkTxt}
         </div>

src/pages/A1intro/index.tsx

@@ -14,19 +14,21 @@ function A1intro() {
     dispatch(A1_APIgetInfo())
   }, [dispatch])
 
+  useEffect(() => {
+    getInfo()
+  }, [getInfo])
+
   // 富文本的ref
   const ZRichTextRef = useRef<any>(null)
 
   const [isEdit, setIsEdit] = useState(false)
 
-  const description = useSelector((state: RootState) => state.A0Layout.A1intro || '{}')
-
+  const description = useSelector((state: RootState) => state.A0Layout.A1intro || '')
   useEffect(() => {
-    if (!isEdit) {
-      getInfo()
-      ZRichTextRef.current?.ritxtShowFu(description)
-    }
-  }, [description, getInfo, isEdit])
+    ZRichTextRef.current?.ritxtShowFu(description)
+  }, [description])
+
+  const oldTxt = useRef('')
 
   // 点击确定
   const btnOk = useCallback(async () => {
@@ -34,9 +36,10 @@ function A1intro() {
     const res = await A1_APIsetInfo(rtf.val)
     if (res.code === 0) {
       MessageFu.success('修改成功')
+      getInfo()
       setIsEdit(false)
     }
-  }, [])
+  }, [getInfo])
 
   return (
     <div className={styles.A1intro}>
@@ -56,6 +59,7 @@ function A1intro() {
             <MyPopconfirm
               txtK='取消'
               onConfirm={() => {
+                ZRichTextRef.current?.ritxtShowFu(oldTxt.current)
                 setIsEdit(false)
               }}
             />
@@ -65,7 +69,13 @@ function A1intro() {
             </Button>
           </>
         ) : (
-          <Button type='primary' onClick={() => setIsEdit(true)}>
+          <Button
+            type='primary'
+            onClick={() => {
+              oldTxt.current = description
+              setIsEdit(true)
+            }}
+          >
             修改
           </Button>
         )}

src/pages/A2video/A2add/index.module.scss

@@ -0,0 +1,51 @@
+.A2add {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+  border-radius: 10px;
+  padding: 20px;
+  :global {
+    .ant-form {
+      width: 1000px;
+      .ant-form-item-label {
+        width: 120px;
+      }
+
+      .formBox {
+        display: flex;
+        margin-bottom: 24px;
+        .formBoxll {
+          width: 120px;
+          text-align: right;
+          line-height: 26px;
+          & > span {
+            color: #ff4d4f;
+          }
+        }
+        .formBoxrr {
+          width: calc(100% - 120px);
+        }
+      }
+      .sortForm {
+        position: relative;
+        .fromRowTit {
+          position: absolute;
+          left: 225px;
+          top: 6px;
+          color: #999;
+          font-size: 12px;
+        }
+      }
+      .BtnForm {
+        padding-left: 120px;
+        margin-top: 40px;
+        .ant-btn {
+          margin-right: 30px;
+        }
+      }
+    }
+  }
+}

src/pages/A2video/A2add/index.tsx

@@ -0,0 +1,208 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+import styles from './index.module.scss'
+import { Button, DatePicker, Form, FormInstance, Input, InputNumber, Select } from 'antd'
+import { A2typeSelectType, AddTxtType } from '../data'
+import { A2_APIgetInfo, A2_APIsave } from '@/store/action/A2video'
+import { MessageFu } from '@/utils/message'
+import dayjs from 'dayjs'
+import ZupOne from '@/components/ZupOne'
+import MyPopconfirm from '@/components/MyPopconfirm'
+
+type Props = {
+  txt: AddTxtType
+  _id: string
+  closeFu: () => void
+  addTableFu: () => void
+  editTableFu: () => void
+}
+
+function A2add({ txt, _id, closeFu, addTableFu, editTableFu }: Props) {
+  const FormBoxRef = useRef<FormInstance>(null)
+  // 封面图的ref
+  const ZupThumbRef = useRef<any>(null)
+  const ZupVideoRef = useRef<any>(null)
+
+  const getInfoFu = useCallback(async (_id: string) => {
+    const res = await A2_APIgetInfo(_id)
+    if (res.code === 0) {
+      const info = res.data
+
+      if (info.releaseDate) info.releaseDate = dayjs(info.releaseDate)
+
+      FormBoxRef.current?.setFieldsValue(info)
+      // 设置封面图
+      ZupThumbRef.current?.setFileComFileFu({
+        originalName: '',
+        originalUrl: info.cover,
+        compressedUrl: info.coverSmall
+      })
+      // 设置视频
+      ZupVideoRef.current?.setFileComFileFu({
+        originalName: info.videoName,
+        originalUrl: info.videoUrl,
+        compressedUrl: ''
+      })
+    }
+  }, [])
+
+  useEffect(() => {
+    if (_id) getInfoFu(_id)
+    else FormBoxRef.current?.setFieldsValue({ releaseDate: dayjs() })
+  }, [_id, getInfoFu])
+
+  // 有没有点击确定，检验图片和视频
+  const [fileCheck, setFileCheck] = useState(false)
+
+  // 没有通过校验
+  const onFinishFailed = useCallback(() => {
+    setFileCheck(true)
+    // return MessageFu.warning("有表单不符号规则!");
+  }, [])
+
+  // 通过校验点击确定
+  const onFinish = useCallback(
+    async (values: any) => {
+      setFileCheck(true)
+      // 封面图
+      const coverUrl = ZupThumbRef.current?.fileComFileResFu()
+      if (!coverUrl.originalUrl) return MessageFu.warning('请上传封面图')
+
+      // 视频
+      const videoUrl = ZupVideoRef.current?.fileComFileResFu()
+      if (!videoUrl.originalUrl) return MessageFu.warning('请上传视频')
+
+      const obj = {
+        ...values,
+        _id: txt === '新增' ? null : _id,
+        releaseDate: values.releaseDate ? dayjs(values.releaseDate).format('YYYY-MM-DD') : '',
+        cover: coverUrl.originalUrl || '',
+        coverSmall: coverUrl.compressedUrl || '',
+        videoUrl: videoUrl.originalUrl || '',
+        videoName: videoUrl.originalName
+      }
+
+      const res: any = await A2_APIsave(obj)
+
+      if (res.code === 0) {
+        if (txt === '新增') addTableFu()
+        else editTableFu()
+        MessageFu.success(txt === '新增' ? '新增成功' : '编辑成功')
+        closeFu()
+      }
+      // console.log("通过校验，点击确定");
+    },
+    [addTableFu, closeFu, editTableFu, _id, txt]
+  )
+
+  return (
+    <div className={styles.A2add}>
+      <Form
+        scrollToFirstError={true}
+        ref={FormBoxRef}
+        name='basic'
+        onFinish={onFinish}
+        onFinishFailed={onFinishFailed}
+        autoComplete='off'
+      >
+        <Form.Item
+          label='标题'
+          name='name'
+          rules={[{ required: true, message: '请输入标题!' }]}
+          getValueFromEvent={e => e.target.value.trim()}
+        >
+          <Input readOnly={txt === '查看'} maxLength={30} showCount placeholder='请输入内容' />
+        </Form.Item>
+
+        <Form.Item
+          label='发布日期'
+          name='releaseDate'
+          rules={[{ required: true, message: '请选择发布日期!' }]}
+        >
+          <DatePicker disabled={txt === '查看'} allowClear={false} />
+        </Form.Item>
+
+        <Form.Item label='类别' name='type' rules={[{ required: true, message: '请选择类别!' }]}>
+          <Select
+            disabled={txt === '查看'}
+            style={{ width: 150 }}
+            options={A2typeSelectType}
+            placeholder='请选择'
+          />
+        </Form.Item>
+
+        <div className='formBox'>
+          <div className='formBoxll'>
+            <span>* </span>封面：
+          </div>
+          <div className='formBoxrr'>
+            <ZupOne
+              ref={ZupThumbRef}
+              isLook={txt === '查看'}
+              fileCheck={fileCheck}
+              myUrl='file/upload?upPath=A2video'
+              format={['image/jpeg', 'image/png']}
+              formatTxt='png、jpg和jpeg'
+              checkTxt='请上传封面图'
+              upTxt='最多1张'
+              myType='thumb'
+              size={5}
+            />
+          </div>
+        </div>
+
+        <div className='formBox'>
+          <div className='formBoxll'>
+            <span>* </span>视频：
+          </div>
+          <div className='formBoxrr'>
+            <ZupOne
+              ref={ZupVideoRef}
+              isLook={txt === '查看'}
+              fileCheck={fileCheck}
+              myUrl='file/upload?upPath=A2video'
+              format={['video/mp4']}
+              formatTxt='mp4'
+              checkTxt='请上传视频'
+              upTxt='最多1个'
+              myType='video'
+              size={500}
+            />
+          </div>
+        </div>
+
+        <div className='sortForm'>
+          <Form.Item
+            label='排序值'
+            name='sort'
+            initialValue={999}
+            rules={[{ required: true, message: '请输入排序值' }]}
+          >
+            <InputNumber readOnly={txt === '查看'} min={1} max={999} placeholder='请输入' />
+          </Form.Item>
+          <div className='fromRowTit'>
+            请输入1~999的数字。数字越大，排序越靠前。数字相同时，更新发布的内容排在前面
+          </div>
+        </div>
+        {/* 确定和取消按钮 */}
+        <div className='BtnForm'>
+          <Form.Item>
+            {txt === '查看' ? (
+              <Button onClick={closeFu}>返回</Button>
+            ) : (
+              <>
+                <Button type='primary' htmlType='submit'>
+                  提交
+                </Button>
+                <MyPopconfirm txtK='取消' onConfirm={closeFu} />
+              </>
+            )}
+          </Form.Item>
+        </div>
+      </Form>
+    </div>
+  )
+}
+
+const MemoA2add = React.memo(A2add)
+
+export default MemoA2add

src/pages/A2video/data.ts

@@ -0,0 +1,19 @@
+export type A2listType = {
+  _id: string
+  name: string
+  releaseDate: string
+  type: string
+  cover: string
+  coverSmall: string
+  video: string
+  sort: number
+  createTime: string
+  updateTime: string
+}
+
+export type AddTxtType = '' | '新增' | '编辑' | '查看'
+
+export const A2typeSelectType = [
+  { value: '追光视频', label: '追光视频' },
+  { value: '科普视频', label: '科普视频' }
+]

src/pages/A2video/index.module.scss

@@ -1,4 +1,16 @@
 .A2video {
+  background-color: #fff;
+  border-radius: 10px;
+  padding: 20px;
+  position: relative;
   :global {
+    .A2top {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 20px;
+    }
+    .ant-table-cell {
+      padding: 8px !important;
+    }
   }
 }

src/pages/A2video/index.tsx

@@ -1,9 +1,151 @@
-import React from 'react'
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import styles from './index.module.scss'
+import { useDispatch, useSelector } from 'react-redux'
+import { UserTableAPIType } from '@/types'
+import { A2_APIdel, A2_APIgetList } from '@/store/action/A2video'
+import { RootState } from '@/store'
+import { MessageFu } from '@/utils/message'
+import { A2listType, AddTxtType } from './data'
+import { Button, Input } from 'antd'
+import MyPopconfirm from '@/components/MyPopconfirm'
+import MyTable from '@/components/MyTable'
+import { A2tableC } from '@/utils/tableData'
+import A2add from './A2add'
 function A2video() {
+  const dispatch = useDispatch()
+
+  // 顶部筛选
+  const [fromData, setFromData] = useState<UserTableAPIType>({
+    pageNum: 1,
+    pageSize: 10,
+    searchKey: ''
+  })
+
+  // 封装发送请求的函数
+  const getListFu = useCallback(async () => {
+    dispatch(A2_APIgetList(fromData))
+  }, [dispatch, fromData])
+
+  useEffect(() => {
+    getListFu()
+  }, [getListFu])
+
+  const timeRef = useRef(-1)
+  // 输入框的输入
+  const txtChangeFu = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>, key: 'searchKey') => {
+      clearTimeout(timeRef.current)
+      timeRef.current = window.setTimeout(() => {
+        setFromData({
+          ...fromData,
+          [key]: e.target.value,
+          pageNum: 1
+        })
+      }, 500)
+    },
+    [fromData]
+  )
+  // 点击重置
+  const [inputKey, setInputKey] = useState(1)
+  const resetSelectFu = useCallback(() => {
+    setInputKey(Date.now())
+    setFromData({
+      pageNum: 1,
+      pageSize: 10,
+      searchKey: ''
+    })
+  }, [])
+
+  // 从仓库中获取表格数据
+  const tableInfo = useSelector((state: RootState) => state.A2video.tableInfo)
+
+  // 点击删除
+  const delTableFu = useCallback(
+    async (id: string) => {
+      const res: any = await A2_APIdel(id)
+      if (res.code === 0) {
+        MessageFu.success('删除成功')
+        getListFu()
+      }
+    },
+    [getListFu]
+  )
+
+  const tableLastBtn = useMemo(() => {
+    return [
+      {
+        title: '操作',
+        render: (item: A2listType) => (
+          <>
+            <Button
+              size='small'
+              type='text'
+              onClick={() => setEditInfo({ txt: '查看', _id: item._id })}
+            >
+              查看
+            </Button>
+            <Button
+              size='small'
+              type='text'
+              onClick={() => setEditInfo({ txt: '编辑', _id: item._id })}
+            >
+              编辑
+            </Button>
+            <MyPopconfirm txtK='删除' onConfirm={() => delTableFu(item._id)} />
+          </>
+        )
+      }
+    ]
+  }, [delTableFu])
+
+  // 新增 编辑 查看
+  const [editInfo, setEditInfo] = useState({ txt: '', _id: '' } as { txt: AddTxtType; _id: string })
+
   return (
     <div className={styles.A2video}>
-      <h1>A2video</h1>
+      <div className='pageTitle'>视频展示{editInfo.txt ? ` - ${editInfo.txt}` : ''}</div>
+      <div className='A2top'>
+        <div className='A2topll'>
+          <Input
+            key={inputKey}
+            maxLength={10}
+            showCount
+            style={{ width: 300 }}
+            placeholder='请输入标题'
+            allowClear
+            onChange={e => txtChangeFu(e, 'searchKey')}
+          />
+        </div>
+        <div className='A2toprr'>
+          <Button onClick={resetSelectFu}>重置</Button>&emsp;
+          <Button type='primary' onClick={() => setEditInfo({ txt: '新增', _id: '' })}>
+            新增
+          </Button>
+        </div>
+      </div>
+
+      {/* 表格主体 */}
+      <MyTable
+        yHeight={650}
+        list={tableInfo.list}
+        columnsTemp={A2tableC}
+        lastBtn={tableLastBtn}
+        pageNum={fromData.pageNum}
+        pageSize={fromData.pageSize}
+        total={tableInfo.total}
+        onChange={(pageNum, pageSize) => setFromData({ ...fromData, pageNum, pageSize })}
+      />
+
+      {/* 新增 查看 编辑 */}
+      {editInfo.txt ? (
+        <A2add
+          txt={editInfo.txt}
+          _id={editInfo._id}
+          closeFu={() => setEditInfo({ txt: '', _id: '' })}
+          addTableFu={resetSelectFu}
+          editTableFu={getListFu}
+        />
+      ) : null}
     </div>
   )
 }

src/pages/Z1user/index.tsx

@@ -23,7 +23,6 @@ function Z1user() {
   })
 
   // 封装发送请求的函数
-
   const getList = useCallback(async () => {
     dispatch(getUserListAPI(fromData))
   }, [dispatch, fromData])
@@ -149,7 +148,7 @@ function Z1user() {
           </div>
 
           <div className='selectBoxRow'>
-            &emsp;&emsp;<Button onClick={resetSelectFu}>重置</Button>
+            <Button onClick={resetSelectFu}>重置</Button>
             &emsp;&emsp;
             <Button
               type='primary'

src/store/action/A2video.ts

@@ -0,0 +1,40 @@
+import http from '@/utils/http'
+import { AppDispatch } from '..'
+
+/**
+ * 视频展示-获取列表
+ */
+
+export const A2_APIgetList = (data: any): any => {
+  return async (dispatch: AppDispatch) => {
+    const res = await http.post('issue/getVideoList', data)
+    if (res.code === 0) {
+      const obj = {
+        list: res.data.list,
+        total: res.data.total
+      }
+      dispatch({ type: 'A2/getList', payload: obj })
+    }
+  }
+}
+
+/**
+ * 视频展示-新增/编辑数据
+ */
+export const A2_APIsave = (data: any) => {
+  return http.post('issue/saveVideo', data)
+}
+
+/**
+ * 视频展示-删除数据
+ */
+export const A2_APIdel = (_id: string) => {
+  return http.get(`issue/delVideo/${_id}`)
+}
+
+/**
+ * 视频展示-通过id获取详情
+ */
+export const A2_APIgetInfo = (_id: string) => {
+  return http.get(`issue/getVideoInfo/${_id}`)
+}

src/store/reducer/A2video.ts

@@ -0,0 +1,28 @@
+import { A2listType } from '@/pages/A2video/data'
+
+// 初始化状态
+const initState = {
+  // 列表数据
+  tableInfo: {
+    list: [] as A2listType[],
+    total: 0
+  }
+}
+
+// 定义 action 类型
+type Props = {
+  type: 'A2/getList'
+  payload: { list: A2listType[]; total: number }
+}
+
+// reducer
+export default function userReducer(state = initState, action: Props) {
+  switch (action.type) {
+    // 获取列表数据
+    case 'A2/getList':
+      return { ...state, tableInfo: action.payload }
+
+    default:
+      return state
+  }
+}

src/store/reducer/index.ts

@@ -3,13 +3,14 @@ import { combineReducers } from 'redux'
 
 // 导入 登录 模块的 reducer
 import A0Layout from './layout'
-
+import A2video from './A2video'
 import Z1user from './Z1user'
 import Z2log from './Z2log'
 
 // 合并 reducer
 const rootReducer = combineReducers({
   A0Layout,
+  A2video,
   Z1user,
   Z2log
 })

src/utils/http.ts

@@ -4,11 +4,14 @@ import { getTokenInfo, removeTokenInfo } from './storage'
 import store from '@/store'
 import { MessageFu } from './message'
 import { domShowFu } from './domShow'
+import encodeStr from './pass'
+import { Base64 } from 'js-base64'
 
 export const envFlag = process.env.NODE_ENV === 'development'
 
 // 请求基地址
-export const baseURL = 'http://192.168.20.55:6789'
+export const baseURL = 'http://192.168.20.55:8500'
+// export const baseURL = envFlag ? 'https://sit-tongbulab.4dage.com' : ''
 
 // 处理  类型“AxiosResponse<any, any>”上不存在属性“code”
 declare module 'axios' {
@@ -37,6 +40,17 @@ http.interceptors.request.use(
 
     const { token } = getTokenInfo()
     if (token) config.headers.token = token
+
+    // 添加proof
+    const str1 = Date.now() + ''
+    // 采用加密密码的方式加密
+    const str2 = encodeStr(Base64.encode(str1))
+    // 1000 * 10 表示 这个 proof 只有10s有效期（10s够用了，不建议改）
+    const str3 = encodeStr(Base64.encode(1000 * 10 + ''))
+
+    const arr = [str1, str2, str3]
+    config.headers.proof = arr.join('||')
+
     return config
   },
   function (err) {

src/utils/tableData.ts

@@ -14,6 +14,14 @@
 //     ["text", "创建日期",'description', 50,A],
 //   ];
 
+export const A2tableC = [
+  ['txt', '视频标题', 'name'],
+  ['img', '封面', 'coverSmall'],
+  ['txt', '视频类别', 'type'],
+  ['txt', '发布日期', 'releaseDate'],
+  ['txt', '排序值', 'sort']
+]
+
 export const Z1tableC = [
   ['txt', '用户名', 'userName'],
   ['txtChange', '角色', 'isAdmin', { 0: '普通成员', 1: '管理员' }],