zxl
4 天以前 c1e567ddda7f65651179a8a73ca849b07b066b14
manager/src/views/video/VideoList.vue
@@ -72,7 +72,7 @@
      <Modal
        v-model="auditingShow"
        title="视频审核"
        width="800"
        width="1200"
        :loading="auditingLoading"
        :mask-closable="false"
      >
@@ -92,8 +92,45 @@
              </div>
            </div>
          </Form-item>
          <Form-item class="video-warp" :label-width="0">
            <video :src="detail.videoUrl" autoplay controls style="width: 768px;height: 432px"/>
          <Form-item v-if="detail.videoContentType === 'video'" label="视频时长:" :label-width="72">
            <div>{{formatSeconds(detail.videoDuration)}}</div>
          </Form-item>
          <Form-item v-if="detail.videoContentType === 'img'" label="图片张数:" :label-width="72">
            <div>{{detail.imgs.length}}</div>
          </Form-item>
          <Form-item v-if="detail.videoContentType === 'video'" class="video-warp" :label-width="0">
            <Row>
              <Col span="11">
                <video :src="detail.videoUrl" autoplay controls style="width: 500px;height: 300px"/>
              </Col>
              <Col span="13" style="max-height: 300px;overflow-y: scroll">
                <Row v-for="goods in detail.goodsList" :key="goods.goodsId" style="width: 100%">
                  <Row style="width:100%;align-items: center">
                    <Col span="6">
                      <img :src="goods.thumbnail" style="width: 100px;height: 100px"/>
                    </Col>
                    <Col span="10">
                      <p>商品名称: {{ goods.goodsName }}</p>
                    </Col>
                    <Col span="4">
                      <p>商品单价: ¥{{ goods.price }}</p>
                    </Col>
                    <Col span="4">
                      <p>商品数量: {{ goods.goodsNum }}</p>
                    </Col>
                  </Row>
                </Row>
              </Col>
            </Row>
          </Form-item>
          <Form-item v-if="detail.videoContentType === 'img'" :label-width="0">
            <div style="display: flex;flex-direction: row;flex-wrap: wrap">
              <div v-for="img in detail.imgs" :key="img" class="img-warp">
                <img :src="img" class="image">
              </div>
            </div>
          </Form-item>
          <Form-item label="审核结果:" :label-width="100" prop="result">
            <RadioGroup v-model="auditingForm.result">
@@ -151,6 +188,9 @@
        <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>
@@ -187,9 +227,10 @@
import {getVideoTagList} from "@/api/videoTag";
import {getFilePreview} from "@/api/file";
import Editor from '@/components/editor/index.vue'
import GoodsExpandRow from '@/views/video/GoodsExpandRow'
export default {
  name: "VideoList",
  components: {Editor},
  components: {Editor,GoodsExpandRow},
  data() {
    return {
      videoDownForm: {
@@ -260,6 +301,17 @@
          align: 'center'
        },
        {
          width: 60,
          type: 'expand',
          render: (h, params) => {
            return h(GoodsExpandRow, {
              props: {
                goodsList: params.row.goodsList
              }
            })
          }
        },
        {
          title: "标题",
          key: "title",
          minWidth: 240,
@@ -282,6 +334,13 @@
          key: "videoFileKey",
          width: 170,
          slot: "videoFileKey"
        },
        {
          title: "时长",
          key: "videoDuration",
          width: 80,
          align: 'center',
          slot: "videoDuration",
        },
        {
          title: "播放量",
@@ -339,6 +398,18 @@
    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 = {
@@ -541,11 +612,18 @@
  cursor: pointer;
}
.video-warp {
  width: 786px;
  height: 432px;
  width: 100%;
  height: 350px;
}
.data-item {
  display: flex;
  align-items: center;
}
.img-warp {
  padding: 10px;
}
.image {
  width: 150px;
  height: 200px;
}
</style>