insert 完成厨神视频后台页面接口（增删改查/上架/下架）

peng

9 天以前 21852ac072559b0bc3a0a249f327ac7eb7f3a5e4

insert 完成厨神视频后台页面接口（增删改查/上架/下架）

 manager/src/api/kitchen-video.js

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

// 厨神视频发布
export const addKitchenVideo = (data) => {
  return service({
    url: "/lmk/kitchen-video/addKitchenVideo",
    method: "POST",
    data: data
  })
}
// 视频修改
export const updateKitchenVideo = (data) => {
  return service({
    url: "/lmk/kitchen-video/updateKitchenVideo",
    method: "POST",
    data: data
  })
}
// 视频查询
export const getKitchenVideos = (data) => {
  return service({
    url: "/lmk/kitchen-video/page",
    method: "POST",
    data: data
  })
}
// 删除视频
export const delKitchen = (id) => {
  return service({
    url: "/lmk/kitchen-video/del/" + id,
    method: "POST"
  })
}

 manager/src/api/kitchen.js

@@ -8,6 +8,13 @@
    params: data
  })
}
// 神厨分类不分页
export const getKitchenTypeAllList = () => {
  return service({
    url: "/lmk/kitchen-type/list",
    method: "GET",
  })
}
// 添加神厨标签
export const addKitchenType = (data) => {
  return service({

 manager/src/views/health/HealthVideoList.vue

@@ -19,7 +19,8 @@
            style="width: 160px"
          />
        </Form-item>
        <Form-item label="标签" prop="tagList">
<!--      todo  暂时隐藏大健康一期没定义标签-->
        <Form-item v-if="false" label="标签" prop="tagList">
          <Select
            v-model="searchForm.tagList"
            clearable
@@ -424,18 +425,18 @@
          minWidth: 240,
          tooltip: true,
        },
        {
          title: "作者",
          key: "authorName",
          width: 130,
          tooltip: true,
        },
        {
          title: "视频标签",
          key: "tagList",
          width: 180,
          slot: "tagList",
        },
        // {
        //   title: "作者",
        //   key: "authorName",
        //   width: 130,
        //   tooltip: true,
        // },
        // {
        //   title: "视频标签",
        //   key: "tagList",
        //   width: 180,
        //   slot: "tagList",
        // },
        {
          title: "视频内容",
          key: "videoFileKey",

 manager/src/views/kitchen/kitchenVideo.vue

New file
@@ -0,0 +1,970 @@
<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="typeList">
          <Select
            v-model="searchForm.typeList"
            clearable
            filterable
            multiple
            @on-clear="handleSearch"
            @on-change="handleSearch"
            style="width: 160px"
          >
            <Option v-for="type in typeList" :key="type.id" :value="type.id">{{ type.typeName }}</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>
<!--            刷新dom使用-->
            <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" style="padding-right:10px">
              <FormItem  label="厨神标签" prop="checkKitchenType">
                <Select  filterable multiple
                         style="width: 600px"
                         v-model="uploadVideoForm.checkKitchenType"
                         >
                  <Option v-for="item in kitchenType" :value="item.id" :key="item.id">{{ item.typeName }}</Option>
                </Select>
              </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>
          </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.typeList" :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="typeList">
          <div v-for="(tag, index) in row.typeList" :key="'tag' + index" style="margin-top: 5px">
            <Tag color="red">{{ tag.typeName }}</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 {addKitchenVideo, delKitchen, getKitchenVideos, updateKitchenVideo} from "@/api/kitchen-video";
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";
import {getKitchenTypeAllList} from "@/api/kitchen";

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 || value === '') {
                callback(new Error('请上传封面'));
              } else {
                callback();
              }
            }
          }
        ],
        videoFileKey: [
          {
            required: true,
            message: '请上传封面',
            trigger: 'blur',
            validator: (rule, value, callback) => {
              if (value === null || value === undefined || value === '') {
                callback(new Error('请上传封面'));
              } else {
                callback();
              }
            }
          }
        ],
        checkKitchenType: [
          {
            required: true,
            message: '请选择厨神标签',
            trigger: 'blur',
            validator: (rule, value, callback) => {
              console.log('验证值:-------------->', value, '类型:', typeof value);
              if (value === null || value === undefined||value.length >5) {
                callback(new Error('请选择厨神标签且不能超过5个'));
              } else {
                callback();
              }
            }
          }
        ],
        title: [
          {
            required: true,
            message: '请输入标题',
            trigger: 'blur',
            validator: (rule, value, callback) => {
              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: '', // 标题
        typeList: [], // 标签
        status: '99'
      },
      typeList: [], // 标签列表
      columns: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: "标题",
          key: "title",
          minWidth: 240,
          tooltip: true,
        },
        {
          title: "作者",
          key: "authorName",
          width: 130,
          tooltip: true,
        },
        {
          title: "视频分类",
          key: "typeList",
          width: 180,
          slot: "typeList",
        },
        {
          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: [], // 表单数据
      kitchenType: [], // 厨神分类
      total: 0, // 表单数据总数
      selectCount: 0, // 已选数量
      selectList: [], // 已选数据列表
      uploadVideoForm: {
        id: null,
        checkKitchenType:[],
        coverUrl: null,
        videoFileKey: null,
        videoFit: null,
        videoDuration: null,
        title: null,
        videoContentType: null,
        videoType: null,
        showCoverUrl: null,
        showVideoUrl: null,
        temp: null

      },
    }
  },
  created() {
    this.getDataList();
    this.getTypes('')
  },
  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}秒`;
    },
    // 获取分类列表
    getTypes(typeName) {
      let params = {
        'typeName': typeName
      }
      getKitchenTypeAllList(params).then(res => {
        this.typeList = 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
    },
    // 视频发布/修改
    //todo 1
    submitHealthVideo() {
      console.log(this.uploadVideoForm)
      try {
        this.upLoadVideoLoading = true
        this.$refs.uploadVideoForm.validate((valid) => {
          if (valid) {
            // 修改
            if (this.uploadVideoForm.id) {
              console.log(this.uploadVideoForm)
              updateKitchenVideo(this.uploadVideoForm).then(res => {
                this.$Message.success("修改完成")
                this.closeHealthVideo()
                this.getDataList()
              })
            } else {
              addKitchenVideo(this.uploadVideoForm).then(res => {
                this.$Message.success("添加完成")
                this.closeHealthVideo()
                this.getDataList()
              })
            }
          }
        })
      } finally {
        this.upLoadVideoLoading = false
      }
    },
    //获取标签
    getKitchenTypeList(e){
    const typeParam =   {typeName:e}
      getKitchenTypeAllList(typeParam).then(res => {
       this.kitchenType = res.data
     })

    },

    // 关闭窗口
    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: () => {
          delKitchen(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;
      getKitchenVideos(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;
      console.log(row)
      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;
        this.uploadVideoForm.checkKitchenType = row.typeList.map(item => {return item.id});
      }
      this.getKitchenTypeList();
    },
    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>