insert 完成大健康后台页面及接口对接（增删改查/上架/下架）

peng

2025-06-13 deeecdcb00080abaa7f42f81fa9a7535f9fbe4ec

insert 完成大健康后台页面及接口对接（增删改查/上架/下架）

 manager/package.json

@@ -14,9 +14,11 @@
    "@antv/g2": "^4.1.12",
    "axios": "^0.21.1",
    "core-js": "^3.6.5",
    "cos-js-sdk-v5": "^1.10.1",
    "dplayer": "^1.26.0",
    "js-cookie": "^2.2.1",
    "node-sass": "^4.14.1",
    "price-color": "1.0.2",
    "sass-loader": "^8.0.2",
    "sockjs-client": "^1.4.0",
    "swiper": "^6.3.5",
@@ -31,8 +33,7 @@
    "vue-router": "^3.1.3",
    "vuedraggable": "^2.23.2",
    "vuex": "^3.4.0",
    "xss": "^1.0.7",
    "price-color": "1.0.2"
    "xss": "^1.0.7"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.4.4",

 manager/src/api/file.js

@@ -12,3 +12,12 @@
    })
}

// 获取STS访问令牌
export const getSts = () => {
    return service({
        baseURL: commonUrl,
        url: "/common/lmk/file/sts",
        method: "GET"
    })
}


 manager/src/api/health-video.js

New file
@@ -0,0 +1,33 @@
import service from "@/libs/axios";

// 视频发布
export const healthVideo = (data) => {
  return service({
    url: "/lkm/health/healthVideo",
    method: "POST",
    data: data
  })
}
// 视频修改
export const updateHealthVideo = (data) => {
  return service({
    url: "/lkm/health/updateHealthVideo",
    method: "POST",
    data: data
  })
}
// 视频查询
export const getHealthVideos = (data) => {
  return service({
    url: "/lkm/health/page",
    method: "POST",
    data: data
  })
}
// 视频查询
export const delHealth = (id) => {
  return service({
    url: "/lkm/health/del/" + id,
    method: "POST"
  })
}

 manager/src/utils/file.js

New file
@@ -0,0 +1,40 @@

/**
 * 生成fileKey
 *
 * @param fileName 文件名
 * @returns {*}
 */
export function getFileKey (fileName) {
    const extension = fileName.split('.').pop().toLowerCase();
        
    const fileTypes = {
        image: { name: '图片', exts: ["jpg", "png", "jpeg", "gif", "bmp", "webp", "tiff", "svg", "ico", "psd", "raw"] },
        video: { name: '视频', exts: ["mp4", "avi", "rmvb", "mov", "wmv", "flv", "mkv", "mpeg", "mpg", "m4v", "3gp", "webm", "vob", "swf"] },
        radio: { name: '音频', exts: ["mp3", "wma", "wav", "mpeg-4", "cd", "m4a", "aac", "flac", "ogg", "aiff", "ape", "midi", "amr", "ra"] },
        text: { name: '文本', exts: ["txt", "xls", "xlsx", "doc", "docx", "pdf", "ppt", "pptx", "csv", "rtf", "odt", "ods", "odp", "epub", "mobi", "pages", "numbers", "key"] },
        zip: { name: '压缩文件', exts: ["zip", "rar", "7z", "tar", "gz", "bz2", "xz", "iso", "dmg", "pkg", "cab", "z", "lz", "lzma", "lzo"] }
    };
  
    // 获取当前时间并格式化为 yyyyMMddHHmmss
    const now = new Date();
    const yyyyMMddHHmmss = [
        now.getFullYear(),
        String(now.getMonth() + 1).padStart(2, '0'),
        String(now.getDate()).padStart(2, '0'),
        String(now.getHours()).padStart(2, '0'),
        String(now.getMinutes()).padStart(2, '0'),
        String(now.getSeconds()).padStart(2, '0')
    ].join('');
	
    // 生成5位随机数字
    const random5Digits = Math.floor(10000 + Math.random() * 90000);
	
    // 查找匹配的文件类型
    for (const [type, data] of Object.entries(fileTypes)) {
        if (data.exts.includes(extension)) {
            return `${type}/${yyyyMMddHHmmss}${random5Digits}` + '.' + extension;
        }
    }
    return '';
}

 manager/src/views/health/HealthVideoList.vue

New file
@@ -0,0 +1,923 @@
<template>
  <div>
    <Card>
      <Form
        ref="searchForm"
        @keydown.enter.native="handleSearch"
        :model="searchForm"
        inline
        :label-width="70"
        class="search-form"
      >
        <Form-item label="标题" prop="title">
          <Input
            type="text"
            v-model="searchForm.title"
            clearable
            @on-clear="handleSearch"
            @on-change="handleSearch"
            style="width: 160px"
          />
        </Form-item>
        <Form-item label="标签" prop="tagList">
          <Select
            v-model="searchForm.tagList"
            clearable
            filterable
            multiple
            @on-clear="handleSearch"
            @on-change="handleSearch"
            style="width: 160px"
          >
            <Option v-for="tag in tagList" :key="tag.id" :value="tag.id">{{ tag.tagName }}</Option>
          </Select>
        </Form-item>
        <Form-item label="视频状态" prop="status">
          <Select
            v-model="searchForm.status"
            clearable
            @on-clear="handleSearch"
            @on-change="handleSearch"
            style="width: 160px"
          >
            <Option value="99">待审核</Option>
            <Option value="1">已发布</Option>
            <Option value="0">已下架</Option>
            <Option value="-1">审核未通过</Option>
          </Select>
        </Form-item>
        <Button
          @click="handleSearch"
          type="primary"
          icon="ios-search"
          class="search-btn"
        >搜索
        </Button
        >
        <Button
          @click="handleVideoUpLoad"
          type="primary"
          icon="md-arrow-up"
          class="search-btn"
        >上传视频
        </Button
        >
      </Form>
      <!--      大健康视频上传-->
      <Modal
        v-model="upLoadVideoShow"
        :title="uploadVideoForm.id?'编辑大健康视频':'上传大健康视频'"
        width="800"
        :mask-closable="false"
      >

        <Form
          :model="uploadVideoForm"
          ref="uploadVideoForm"
          :rules="uploadVideoFileRule"
        >
          <Row :gutter="24">
            <Col span="24">
              <Spin size="large" fix v-if="upLoadVideoLoading"> 文件上传中...</Spin>
            </Col>
            <Col span="12">
              <FormItem label="标题" prop="title">
                <Input placeholder="请输入标题" v-model="uploadVideoForm.title"
                       style="width: 200px"
                />
              </FormItem>
            </Col>
            <Col span="24">
              <FormItem label="刷新dom使用" prop="title" v-show="false">
                <Input placeholder="请输入标题" v-model="uploadVideoForm.temp"
                       style="width: 200px"
                />
              </FormItem>
            </Col>
            <Col span="12" v-if="!uploadVideoForm.videoFileKey">
              <FormItem label="上传视频" prop="videoFileKey">
                <Upload
                  :multiple="true"
                  :before-upload="upLoadVideo"
                  accept="video/*"
                  action=""
                >
                  <Button icon="ios-cloud-upload-outline">选择视频</Button>
                </Upload>
              </FormItem>
            </Col>

            <Col span="24" v-else>
              <FormItem label="视频">
                <video style="width: 150px;height: 150px"
                       controls
                       :poster="uploadVideoForm.showCoverUrl"
                       :autoplay="false"
                       id="remoteVideo" :src="uploadVideoForm.showVideoUrl"
                       ref="healthVideoInfo"
                ></video>
              </FormItem>
            </Col>

            <Col span="12" v-show="uploadVideoForm.videoFileKey && !uploadVideoForm.coverUrl">
              <FormItem label="上传封面" prop="coverUrl">
                <Upload
                  :multiple="true"
                  :before-upload="upLoadImg"
                  accept="image/*"
                  action=""
                >
                  <Button icon="ios-cloud-upload-outline">选择封面</Button>
                </Upload>
              </FormItem>
            </Col>
            <Col span="24">
              <div>
                <Button type="primary" @click="clearCoverImage" v-show="uploadVideoForm.coverUrl">重新上传封面</Button>
                <Button type="primary" @click="clearVideo" style="margin-left: 20px"
                        v-show="uploadVideoForm.videoFileKey">重新上传视频
                </Button>
              </div>
            </Col>
            <!--            <Col span="24" v-else>-->
            <!--              <FormItem label="封面">-->
            <!--                <div class="showCoverImg" style="width: 150px;height: 150px;">-->
            <!--                  <img :src="uploadVideoForm.showCoverUrl" style="width: 150px;height: 150px" class="coverImg"/>-->
            <!--                  <Icon type="ios-close" size="24" class="coverImgRemove" color="red"-->
            <!--                        style="border-radius: 50%;background: #fff;cursor: pointer"-->
            <!--                        @click="removeCover"-->
            <!--                  />-->
            <!--                </div>-->
            <!--              </FormItem>-->
            <!--            </Col>-->
          </Row>

        </Form>
        <div slot="footer">
          <Button type="text" @click="closeHealthVideo">关闭</Button>
          <Button type="primary" @click="submitHealthVideo">确认</Button>
        </div>
      </Modal>
      <Modal
        v-model="playVideoShow"
        :title="playVideoTitle"
        width="800"
        :mask-closable="false"
      >
        <div class="video-warp">
          <video :src="playVideoUrl" autoplay controls style="width: 768px;height: 432px"/>
        </div>
        <div slot="footer">
          <Button type="text" @click="playVideoClose">关闭</Button>
        </div>
      </Modal>

      <Modal
        v-model="auditingShow"
        title="视频审核"
        width="800"
        :loading="auditingLoading"
        :mask-closable="false"
      >

        <Form
          ref="auditingForm"
          :model="auditingForm"
          :label-width="70"
          :rules="auditingRule"
        >
          <Form-item label="标题：">
            <div>{{ detail.title }}</div>
          </Form-item>
          <Form-item label="标签：">
            <div style="display: flex;flex-wrap: wrap">
              <div v-for="(tag, index) in detail.tagList" :key="'tag' + index" style="margin-right: 5px">
                <Tag color="red">{{ tag.tagName }}</Tag>
              </div>
            </div>
          </Form-item>
          <Form-item label="视频时长：" :label-width="72">
            <div>{{ formatSeconds(detail.videoDuration) }}</div>
          </Form-item>
          <Form-item class="video-warp" :label-width="0">
            <video :src="detail.videoUrl" autoplay controls style="width: 768px;height: 432px"/>
          </Form-item>
          <Form-item label="审核结果：" :label-width="100" prop="result">
            <RadioGroup v-model="auditingForm.result">
              <Radio :label="1">通过</Radio>
              <Radio :label="0">不通过</Radio>
            </RadioGroup>
          </Form-item>
          <Form-item v-show="auditingForm.result === 0" label="不通过原因：" :label-width="100" prop="reason">
            <Input
              type="textarea"
              v-model="auditingForm.reason"
              clearable
              style="width: 100%"
            />
          </Form-item>
        </Form>
        <div slot="footer">
          <Button type="text" @click="closeAuditing">关闭</Button>
          <Button type="primary" @click="submitAuditing">确认</Button>
        </div>
      </Modal>

      <Modal
        v-model="videoDownShow"
        title="视频下架"
        width="800"
        :mask-closable="false"
      >
        <Form :model="videoDownForm" :rules="videoDownRule" ref="videoDownForm">
          <FormItem label="下架原因：" :labelWidth="100" prop="reason">
            <editor ref="editor" @input="getReason"/>
          </FormItem>
        </Form>
        <div slot="footer">
          <Button type="text" @click="closeVideoDown">关闭</Button>
          <Button type="primary" @click="videoDown">确认</Button>
        </div>
      </Modal>

      <Table
        :loading="loading"
        border
        :columns="columns"
        :data="data"
        ref="table"
        sortable="custom"
        @on-sort-change="changeSort"
        @on-selection-change="showSelect"
      >
        <template slot-scope="{ row, index }" slot="tagList">
          <div v-for="(tag, index) in row.tagList" :key="'tag' + index" style="margin-top: 5px">
            <Tag color="red">{{ tag.tagName }}</Tag>
          </div>
        </template>
        <template slot-scope="{ row, index }" slot="videoFileKey">
          <div class="play-text" @click="playVideo(row.videoFileKey, row.title)">点击播放</div>
        </template>
        <template slot-scope="{ row, index }" slot="videoDuration">
          <div>{{ formatSeconds(row.videoDuration) }}</div>
        </template>
        <template slot-scope="{ row, index }" slot="recommend">
          <i-switch v-model="row.recommend" :before-change="() => handleBeforeChange(row)" true-color="#13ce66"/>
        </template>
        <template slot-scope="{ row, index }" slot="status">
          {{ transStatus(row.status) }}
        </template>
        <template slot-scope="{ row, index }" slot="action">
          <Button type="primary" size="small" style="margin-right: 5px" v-if="row.status === '99'"
                  @click="openAuditing(row)">审核
          </Button>
          <Button type="error" size="small" style="margin-right: 5px" v-if="row.status === '1'"
                  @click="openVideoDown(row)">下架
          </Button>
          <Button type="success" size="small" style="margin-right: 5px" v-else-if="row.status === '0'"
                  @click="videoUp(row)">上架
          </Button>
          <Button type="success" size="small" style="margin-right: 5px"
                  @click="handleVideoUpLoad(row)">编辑
          </Button>
          <Button type="success" size="small" style="margin-right: 5px"
                  @click="deleteHealthVideo(row)">删除
          </Button>
        </template>
      </Table>

      <Row type="flex" justify="end" class="mt_10">
        <Page
          :current="searchForm.pageNumber"
          :total="total"
          :page-size="searchForm.pageSize"
          @on-change="changePage"
          @on-page-size-change="changePageSize"
          :page-size-opts="[10, 20, 50]"
          size="small"
          show-total
          show-elevator
          show-sizer
        ></Page>
      </Row>
    </Card>
  </div>
</template>

<script>
import {recommendSet, getVideoById, auditingVideo, up, down} from "@/api/video";
import {healthVideo, getHealthVideos, updateHealthVideo,delHealth} from "@/api/health-video";
import {getVideoTagList} from "@/api/videoTag";
import {getFilePreview, getSts} from "@/api/file";
import Editor from '@/components/editor/index.vue'
import COS from 'cos-js-sdk-v5';
import {getFileKey} from "@/utils/file.js";

export default {
  name: "VideoList",
  components: {Editor},
  data() {
    return {
      videoDownForm: {
        id: '',
        reason: ''
      },
      videoDownRule: {
        reason: [
          {
            require: true,
            message: '请输入下架原因',
            trigger: 'blur',
            validator: (rule, value, callback) => {
              if (value === null || value === '') {
                callback(new Error('请输入下架原因'));
              } else {
                callback();
              }
            }
          }
        ]
      },
      videoDownShow: false, // 视频下架
      videoDownMsg: '', // 下架提示信息
      auditingForm: { // 审核表单
        id: null,
        result: null,
        reason: ''
      },
      auditingRule: {
        result: [
          {
            required: true,
            message: '请选择视频审核结果',
            trigger: 'change',
            validator: (rule, value, callback) => {
              if (value === null || value === undefined) {
                callback(new Error('请选择视频审核结果'));
              } else {
                callback();
              }
            }
          }
        ],
      },
      uploadVideoFileRule: {
        coverUrl: [
          {
            required: true,
            message: '请上传封面',
            trigger: 'blur',
            validator: (rule, value, callback) => {
              if (value === null || value === undefined) {
                callback(new Error('请上传封面'));
              } else {
                callback();
              }
            }
          }
        ],
        title: [
          {
            required: true,
            message: '请输入标题',
            trigger: 'blur',
            validator: (rule, value, callback) => {
              console.log('验证值:-------------->', value, '类型:', typeof value);
              if (value === null || value === undefined) {
                callback(new Error('请输入标题'));
              } else {
                callback();
              }
            }
          }
        ],
      },
      detail: {}, // 视频详情信息
      auditingShow: false, // 审核弹窗
      upLoadVideoShow: false,//文件上传弹窗
      auditingLoading: false, // 审核弹窗
      upLoadVideoLoading: false,//上传视频
      playVideoShow: false, // 视频播放弹窗
      playVideoTitle: '', // 视频播放标题
      playVideoUrl: '', // 当前正在播放的视频地址
      modelShow: false, // 弹窗显隐
      modelTitle: '', // 弹窗title
      loading: false, // 表单加载状态
      searchForm: {
        // 搜索框初始化对象
        pageNumber: 1, // 当前页数
        pageSize: 10, // 页面大小
        title: '', // 标题
        tagList: [], // 标签
        status: '99'
      },
      tagList: [], // 标签列表
      columns: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: "标题",
          key: "title",
          minWidth: 240,
          tooltip: true,
        },
        {
          title: "作者",
          key: "authorName",
          width: 130,
          tooltip: true,
        },
        {
          title: "视频标签",
          key: "tagList",
          width: 180,
          slot: "tagList",
        },
        {
          title: "视频内容",
          key: "videoFileKey",
          width: 170,
          slot: "videoFileKey"
        },
        {
          title: "时长",
          key: "videoDuration",
          width: 80,
          align: 'center',
          slot: "videoDuration",
        },
        {
          title: "播放量",
          key: "playNum",
          width: 80,
          align: 'center'
        },
        {
          title: "收藏数",
          key: "collectNum",
          width: 80,
          align: 'center'
        },
        {
          title: "评论数",
          key: "commentNum",
          width: 80,
          align: 'center'
        },
        {
          title: "首页推荐",
          key: "recommend",
          slot: "recommend",
          width: 100,
          align: 'center'
        },
        {
          title: "权重",
          key: "weight",
          width: 170,
        },
        {
          title: "状态",
          key: "status",
          slot: "status",
          width: 120,
          align: 'center'
        },
        {
          title: "操作",
          key: "action",
          slot: "action",
          align: "center",
          width: 200,
        },
      ],
      data: [], // 表单数据
      total: 0, // 表单数据总数
      selectCount: 0, // 已选数量
      selectList: [], // 已选数据列表
      uploadVideoForm: {
        id: null,
        coverUrl: null,
        videoFileKey: null,
        videoFit: null,
        videoDuration: null,
        title: null,
        videoContentType: null,
        videoType: null,
        showCoverUrl: null,
        showVideoUrl: null,
        temp: null

      },
    }
  },
  created() {
    this.getDataList();
    this.getTags('')
  },
  methods: {
    // 秒转x分x秒
    formatSeconds(seconds) {
      if (isNaN(seconds) || seconds < 0) return '0秒';

      const mins = Math.floor(seconds / 60);
      const secs = seconds % 60;

      if (mins === 0) return `${secs}秒`;
      if (secs === 0) return `${mins}分`;

      return `${mins}分${secs}秒`;
    },
    // 获取标签列表
    getTags(tagName) {
      let params = {
        'tagName': tagName
      }
      getVideoTagList(params).then(res => {
        this.tagList = res.data
      })
    },
    // 获取富文本编辑器的内容
    getReason(content) {
      this.videoDownForm.reason = content
    },
    //重新上传封面
    clearCoverImage() {
      this.$set(this.uploadVideoForm, 'coverUrl', '');
      this.$set(this.uploadVideoForm, 'showCoverUrl', '');
      this.$set(this.uploadVideoForm, 'temp', new Date().getTime());
    },
    //重新上传视频
    clearVideo() {
      this.clearCoverImage();
      this.$set(this.uploadVideoForm, 'videoFileKey', '');
      this.$set(this.uploadVideoForm, 'showVideoUrl', '');
      this.$set(this.uploadVideoForm, 'temp', new Date().getTime());
      console.log(this.uploadVideoForm)
    },
    // 视频上架
    videoUp(row) {
      this.$Modal.confirm({
        title: "操作确认",
        content: "您确认要上架视频【 " + row.title + "】吗?",
        loading: true,
        onOk: () => {
          up(row.id).then(res => {
            this.$Modal.remove();
            if (res.code == 200) {
              this.$Message.success("视频上架成功");
              this.getDataList();
            }
          });
        }
      });
    },
    // 视频下架
    videoDown() {
      this.$refs.videoDownForm.validate((valid) => {
        if (valid) {
          down(this.videoDownForm).then(res => {
            this.$Message.success("下架成功")
            this.closeVideoDown()
            this.getDataList()
          })
        }
      })
    },
    // 关闭视频下架
    closeVideoDown() {
      this.videoDownShow = false
      this.videoDownForm = {
        id: '',
        reason: ''
      }
      this.$refs.editor.setContent('')
    },
    // 视频下架
    openVideoDown(row) {
      this.videoDownForm.id = row.id
      this.videoDownShow = true
    },
    // 视频发布/修改
    submitHealthVideo() {
      try {
        this.upLoadVideoLoading = true
        this.$refs.uploadVideoForm.validate((valid) => {
          if (valid) {
            // 修改
            if (this.uploadVideoForm.id) {
              updateHealthVideo(this.uploadVideoForm).then(res => {
                this.$Message.success("修改完成")
                this.closeHealthVideo()
                this.getDataList()
              })
            } else {
              healthVideo(this.uploadVideoForm).then(res => {
                this.$Message.success("添加完成")
                this.closeHealthVideo()
                this.getDataList()
              })
            }
          }
        })
      } finally {
        this.upLoadVideoLoading = false
      }
    },
    // 关闭窗口
    closeHealthVideo() {
      //
      this.uploadVideoForm = {};
      this.upLoadVideoShow = false;
    },
    // 提交审核结果
    submitAuditing() {
      console.log(this.auditingForm, "sb")
      this.$refs.auditingForm.validate((valid) => {
        if (valid) {
          auditingVideo(this.auditingForm).then(res => {
            this.$Message.success("审核完成")
            this.closeAuditing()
            this.getDataList()
          })
        }
      })
    },
    // 审核结果变化
    resultChange(selected) {
      this.auditingForm.result = selected === '通过' ? 1 : 0
      console.log(this.auditingForm.result)
    },
    closeAuditing() {
      this.auditingForm = {
        id: null,
        result: null,
        reason: ''
      }
      this.detail = {}
      this.auditingShow = false
    },
    // 打开审核弹窗
    openAuditing(row) {
      this.auditingShow = true
      this.auditingLoading = true
      this.auditingForm.id = row.id
      getVideoById(row.id).then(res => {
        this.detail = res.data
        this.auditingLoading = false
      })
    },
    // 打开编辑弹窗
    deleteHealthVideo(row) {
      console.log('删除测试', row)
      this.$Modal.confirm({
        title: "操作确认",
        content: "您确认要删除视频【 " + row.title + "】吗?",
        loading: true,
        onOk: () => {
          delHealth(row.id).then(res => {
            this.$Modal.remove();
            if (res.code === 200) {
              this.$Message.success("视频删除成功");
              this.getDataList();
            }
          });
        }
      });
    },
    // 翻译状态
    transStatus(status) {
      switch (status) {
        case '99':
          return '待审核'
        case '1':
          return '已发布'
        case '0':
          return '已下架'
        case '-1':
          return '审核未通过'
        default:
          return '未知'
      }
    },
    // 开启或关闭推荐的方法
    handleBeforeChange(row) {
      let content = ""
      if (row.recommend) {
        content = '确认要关闭首页推荐吗？'
      } else {
        content = '确认要开启首页推荐吗？'
      }
      return new Promise((resolve) => {
        this.$Modal.confirm({
          title: '操作提醒',
          content: content,
          onOk: () => {
            recommendSet({id: row.id, recommend: !row.recommend}).then(res => {
              this.$Message.success(res.msg);
              resolve();
            })
          }
        });
      });
    },
    // 关闭视频播放
    playVideoClose() {
      this.playVideoTitle = '';
      this.playVideoUrl = '';
      this.playVideoShow = false
    },
    // 点击播放视频
    playVideo(fileKey, title) {
      this.playVideoTitle = title;

      getFilePreview(fileKey).then(res => {
        this.playVideoUrl = res.data
        this.playVideoShow = true
      })
    },
    // 搜索
    handleSearch() {
      this.searchForm.pageNumber = 1;
      this.searchForm.pageSize = 10;
      this.getDataList();
    },
    // 获取列表数据
    getDataList() {
      this.loading = true;
      getHealthVideos(this.searchForm).then((res) => {
        console.log(res)
        this.loading = false;
        if (res.code === 200) {
          this.data = res.data;
          this.total = res.total;
        }
      });
      this.total = this.data.length;
      this.loading = false;
    },
    showSelect(e) {
      this.selectList = e.map(d => d.id);
      this.selectCount = e.length;
    },
    // 排序
    changeSort(e) {
      this.searchForm.sort = e.key;
      this.searchForm.order = e.order;
      if (e.order == "normal") {
        this.searchForm.order = "";
      }
      this.getDataList();
    },
    // 分页 改变页码
    changePage(v) {
      this.searchForm.pageNumber = v;
      this.getDataList();
    },
    // 分页 改变页数
    changePageSize(v) {
      this.searchForm.pageNumber = 1;
      this.searchForm.pageSize = v;
      this.getDataList();
    },
    handleVideoUpLoad(row) {
      this.uploadVideoForm = {};
      this.upLoadVideoShow = true;
      if (row.id) {
        this.uploadVideoForm.id = row.id;
        this.uploadVideoForm.showVideoUrl = row.videoUrl
        this.uploadVideoForm.videoFileKey = row.videoFileKey;
        this.uploadVideoForm.coverUrl = row.coverUrl;
        this.uploadVideoForm.showCoverUrl = row.coverShowUrl;
        this.uploadVideoForm.title = row.title;
      }
    },
    async upLoadVideo(file) {
      try {
        this.$nextTick(() => {
          this.upLoadVideoLoading = true;
        })
        // 获取文件上传临时密钥
        const sts = await getSts();
        const cos = new COS({
          getAuthorization: async function (options, callback) {
            callback({
              TmpSecretId: sts.data.tmpSecretId,
              TmpSecretKey: sts.data.tmpSecretKey,
              SecurityToken: sts.data.sessionToken,
              // 建议返回服务器时间作为签名的开始时间，避免客户端本地时间偏差过大导致签名错误
              StartTime: sts.data.stsStartTime, // 时间戳，单位秒，如：1580000000
              ExpiredTime: sts.data.stsEndTime,// 时间戳，单位秒，如：1580000000
              ScopeLimit: true, // 细粒度控制权限需要设为 true，会限制密钥只在相同请求时重复使用
            });
          }
        })
        const fileKey = getFileKey(file.name)
        const upData = await cos.uploadFile({
          Bucket: sts.data.bucket,
          Region: sts.data.region,
          Key: fileKey,
          Body: file, // 要上传的文件对象。
          SliceSize: 1024 * 1024 * 5,
          onProgress: function (progressData) {
            console.log('上传进度：', progressData);
          },
        });

        console.log(this.uploadVideoForm)
        this.$nextTick(() => {
          this.uploadVideoForm.videoFileKey = fileKey;
          this.uploadVideoForm.showVideoUrl = sts.data.endpoint + "/" + fileKey;
        })
        console.log("上传成功", upData)
        const duration = this.$refs.healthVideoInfo.duration;
        console.log('-测试获取时间信息---------------->', duration);
      } catch (e) {
        console.log("上传失败", upData)
      } finally {
        this.$nextTick(() => {
          this.upLoadVideoLoading = false;
        })
      }
      return false;
    },
    async upLoadImg(file) {
      try {
        this.upLoadVideoLoading = true;
        // 获取文件上传临时密钥
        const sts = await getSts();
        const cos = new COS({
          getAuthorization: async function (options, callback) {
            callback({
              TmpSecretId: sts.data.tmpSecretId,
              TmpSecretKey: sts.data.tmpSecretKey,
              SecurityToken: sts.data.sessionToken,
              // 建议返回服务器时间作为签名的开始时间，避免客户端本地时间偏差过大导致签名错误
              StartTime: sts.data.stsStartTime, // 时间戳，单位秒，如：1580000000
              ExpiredTime: sts.data.stsEndTime,// 时间戳，单位秒，如：1580000000
              ScopeLimit: true, // 细粒度控制权限需要设为 true，会限制密钥只在相同请求时重复使用
            });
          }
        })
        const fileKey = getFileKey(file.name)
        const upData = await cos.uploadFile({
          Bucket: sts.data.bucket,
          Region: sts.data.region,
          Key: fileKey,
          Body: file, // 要上传的文件对象。
          SliceSize: 1024 * 1024 * 5,
          onProgress: function (progressData) {
            console.log('上传进度：', progressData);
          },
        });
        console.log("上传成功", upData)
        this.$nextTick(() => {
          this.uploadVideoForm.coverUrl = fileKey;
          this.uploadVideoForm.showCoverUrl = sts.data.endpoint + "/" + fileKey;
        })

      } catch (e) {
        console.log("上传失败", upData)
      } finally {
        this.upLoadVideoLoading = false;
      }
      return false;
    }
  }
}
</script>

<style scoped>
.play-text {
  width: 100%;
  text-align: center;
  color: #2d8cf0;
}

.play-text:hover {
  cursor: pointer;
}

.video-warp {
  width: 786px;
  height: 432px;
}

.data-item {
  display: flex;
  align-items: center;
}

.showCoverImg {
  position: relative;
}

.coverImgRemove {
  position: absolute;
  top: 15px;
  right: -15px;
}
</style>