ross抖音挑战赛新版本页面

src/router/module/normal/activity.js

@@ -16,6 +16,12 @@ const activityRoutes = [
         component: () => import('@/views/normal/activity/video'),
         name: 'ChallengeVideoList',
         meta: { title: '短视频', noCache: false }
+      },
+      {
+        path: 'club',
+        component: () => import('@/views/normal/activity/video/club-list.vue'),
+        name: 'ChallengeVideoClubList',
+        meta: { title: '参赛机构', noCache: false }
       }
     ]
   }

src/views/normal/activity/video/club-list.vue

@@ -0,0 +1,381 @@
+<template>
+  <div class="app-container">
+    <div class="filter-container activity">
+      <div class="filter-control">
+        <span>活动时间:</span>
+        <el-date-picker
+          v-model="activityFormData.time"
+          format="yyyy-MM-dd HH:mm:ss"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          type="datetimerange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          :disabled="activityFormData.status === 1"
+        />
+      </div>
+      <div class="filter-control">
+        <span>活动状态:</span>
+        <el-switch
+          v-model="activityFormData.status"
+          el-switch
+          :active-value="1"
+          :inactive-value="0"
+          @change="onUpdateActivityStatus"
+        />
+      </div>
+    </div>
+    <el-divider />
+    <div class="filter-container">
+      <div class="filter-control">
+        <span>所属机构:</span>
+        <el-select v-model="listQuery.authId" placeholder="所属机构" clearable @change="getList">
+          <template v-for="(item, index) in clubList">
+            <el-option :key="index" :label="item.authParty" :value="item.authId" />
+          </template>
+        </el-select>
+      </div>
+      <div class="filter-control">
+        <span>登录账号:</span>
+        <el-input v-model="listQuery.userName" placeholder="登录账号" @keyup.enter.native="getList" />
+      </div>
+      <div class="filter-control">
+        <span>上传时间:</span>
+        <el-date-picker
+          v-model="filterTime"
+          format="yyyy-MM-dd HH:mm:ss"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          type="datetimerange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+        />
+      </div>
+      <div class="filter-control">
+        <el-button type="primary" @click="getList">查询</el-button>
+        <el-button type="primary" :disabled="selectionList.length === 0" @click="onDownload('select')">下载</el-button>
+      </div>
+    </div>
+    <!-- 列表 -->
+    <el-table
+      v-loading="listLoading"
+      :data="list"
+      border
+      fit
+      highlight-current-row
+      style="width: 100%"
+      header-row-class-name="tableHeader"
+      @selection-change="onSelectionChange"
+    >
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="序号" :index="indexMethod" align="center" width="80" type="index" />
+      <el-table-column label="登录账号" align="center" prop="userName" width="240" />
+      <el-table-column label="机构名称" align="center" prop="authParty" />
+      <el-table-column label="机构类型" align="center" prop="playCount" width="160" />
+      <el-table-column label="机构资质" align="center" prop="diggCount" width="160" />
+      <el-table-column label="操作" align="center" width="240">
+        <template slot-scope="{ row }">
+          <permission-button size="mini" type="primary" @click="onSaveCommand(row)">视频列表</permission-button>
+          <permission-button size="mini" type="primary" @click="onRemove(row)">删除</permission-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 视频播放 -->
+    <el-dialog title="视频播放" :visible.sync="videoDialog" width="800px" center :close-on-click-modal="false">
+      <video class="video-play" :src="videoUrl" controls />
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {
+  fetchClubList,
+  fetchDouyinActivityStatus,
+  fetchDouyinVideoList,
+  updateDouyinActivityStatus
+} from '@/api/activity'
+
+import { downloadWithUrl } from '@/utils/tools'
+
+export default {
+  name: 'ChallengeVideoList',
+  data() {
+    return {
+      // 视频播放
+      videoDialog: false,
+      videoUrl: '',
+      filterTime: [],
+      listQuery: {
+        status: '',
+        authId: '',
+        userName: '',
+        authParty: '',
+        startTime: '',
+        endTime: '',
+        pageNum: 1,
+        pageSize: 10
+      },
+      listLoading: false,
+      list: [],
+      // 活动表单数据
+      activityFormData: {
+        time: [],
+        status: 0
+      },
+      commandDialog: false,
+      qrcodeUrl: '',
+      clubList: [],
+      selectionList: []
+    }
+  },
+  created() {
+    this.initPage()
+  },
+  activated() {
+    this.initPage()
+  },
+  methods: {
+    initPage() {
+      this.getList()
+      this.getClubList()
+      this.fetchActivityStatus()
+    },
+    // 获取活动状态
+    async fetchActivityStatus() {
+      try {
+        const res = await fetchDouyinActivityStatus()
+        if (!res.data) return
+        const { startTime, endTime } = res.data
+        if (startTime && endTime) {
+          this.activityFormData.time = [startTime, endTime]
+        }
+        this.activityFormData.status = res.data.status
+      } catch (error) {
+        console.log(error)
+      }
+    },
+
+    // 验证活动时间
+    checkActivityTime(startTime, endTime) {
+      startTime = new Date(startTime).getTime()
+      endTime = new Date(endTime).getTime()
+      const nowTime = Date.now()
+      if (startTime < nowTime) {
+        return 1
+      }
+      if (endTime < startTime) {
+        return 2
+      }
+      if (endTime < nowTime) {
+        return 3
+      }
+    },
+
+    // 更新活动时间状态
+    onUpdateActivityStatus(value) {
+      let flag = -1
+
+      const dialog = {
+        0: '请先设置活动时间后，再来开启活动按钮',
+        1: '活动开始时间不能小于当前时间',
+        2: '活动结束时间不能小于活动开始时间',
+        3: '你设置的活动时间已失效，请重新设置有效活动时间后，再来开启活动按钮'
+      }
+
+      if (!this.activityFormData.time) {
+        flag = 0
+      } else {
+        const [start, end] = this.activityFormData.time
+        flag = this.checkActivityTime(start, end)
+      }
+
+      if (flag > -1 && value === 1) {
+        this.$confirm(dialog[flag], '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning',
+          closeOnClickModal: false,
+          showClose: false
+        })
+          .then(() => {
+            this.activityFormData.status = 0
+          })
+          .catch(() => {
+            this.activityFormData.status = 0
+          })
+        return
+      }
+
+      this.updateActivityStatus()
+    },
+
+    // 更新活动状态
+    async updateActivityStatus() {
+      try {
+        const {
+          status,
+          time: [startTime, endTime]
+        } = this.activityFormData
+        await updateDouyinActivityStatus({
+          startTime,
+          endTime,
+          status
+        })
+        this.$message.success(`活动已${status ? '开启' : '关闭'}`)
+      } catch (error) {
+        console.log(error)
+      }
+    },
+
+    // 获取视频列表
+    getList() {
+      this.list = []
+      this.listQuery.pageNum = 1
+      if (this.filterTime.length > 0) {
+        this.listQuery.startTime = this.filterTime[0]
+        this.listQuery.endTime = this.filterTime[1]
+      }
+      this.fetchDouyinVideoList()
+    },
+
+    // 获取视频列表
+    async fetchDouyinVideoList() {
+      try {
+        this.listLoading = true
+        const res = await fetchDouyinVideoList(this.listQuery)
+        this.list = res.data.list.map((item, index) => {
+          if (item.rankingStatus === 1) {
+            item.rankNum = index + 1
+          }
+          return item
+        })
+        this.listLoading = false
+      } catch (error) {
+        console.log(error)
+      }
+    },
+
+    // 表格数据选中
+    onSelectionChange(data) {
+      this.selectionList = data
+    },
+
+    // 表格索引
+    indexMethod(index) {
+      return index + this.listQuery.pageSize * (this.listQuery.pageNum - 1) + 1
+    },
+
+    // 获取已发布视频机构列表
+    async getClubList(list) {
+      try {
+        const res = await fetchClubList()
+        this.clubList = res.data
+      } catch (error) {
+        console.log(error)
+      }
+    },
+
+    // 播放视频
+    onPlayVideo(row) {
+      this.videoDialog = true
+      this.videoUrl = row.ossUrl
+    },
+
+    // 下载视频
+    onDownload(type, row) {
+      if (type === 'single') {
+        this.downloadVideo([row.id + ','])
+      } else {
+        // this.downloadVideo[]
+        const ids = this.selectionList.map((item) => item.id)
+        this.downloadVideo(ids)
+      }
+    },
+
+    // 下载视频
+    async downloadVideo(fileIdList) {
+      try {
+        const filedIds = fileIdList.join(',')
+        const text = await this.$confirm(`确认下载所选视频?`, '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).catch(() => {
+          this.exportClubList = []
+          this.$message.info('已取消操作')
+        })
+        if (text !== 'confirm') return
+        let notification = null
+        notification = this.$notify({
+          title: '提示',
+          message: `正在下载视频，请勿重复操作！`,
+          duration: 0
+        })
+        const downUrl = `${process.env.VUE_APP_BASE_API}/auth/downLoad/chose/zip?fileId=${filedIds}`
+        downloadWithUrl(downUrl, '抖音视频', {
+          headers: {
+            'X-Token': this.$store.getters.token
+          }
+        })
+          .then((res) => {
+            this.getList()
+          })
+          .catch((err) => {
+            console.log(err)
+            this.$message.error(`下载抖音视频失败`)
+          })
+          .finally(() => {
+            notification.close()
+          })
+      } catch (error) {
+        console.log(error)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.activity {
+  .filter-control {
+    margin-bottom: 0;
+  }
+}
+
+.cover {
+  width: 80px;
+  display: block;
+}
+
+.el-divider {
+  margin: 12px 0;
+}
+
+.el-dialog {
+  .control {
+    text-align: right;
+  }
+
+  .video-play {
+    display: block;
+    width: 100%;
+    height: 480px;
+    background: #666;
+  }
+
+  .dy-code {
+    width: 160px;
+    height: 160px;
+    display: block;
+    margin: 0 auto;
+  }
+
+  .tip {
+    font-size: 14px;
+    text-align: center;
+    color: #666;
+    padding: 16px 0 8px;
+  }
+}
+</style>