ross抖音挑战赛提测

.env.development

@@ -4,13 +4,13 @@ NODE_ENV = development
 ENV = 'development'
 
 # 测试地址 API接口
-VUE_APP_BASE_API = 'https://zplma-b.caimei365.com'
-# VUE_APP_BASE_API = 'http://192.168.2.200:8012'
+# VUE_APP_BASE_API = 'https://zplma-b.caimei365.com'
+VUE_APP_BASE_API = 'http://192.168.2.200:8012'
 # VUE_APP_BASE_API = 'http://192.168.2.92:8012'
 
 # 文件上传 API接口地址
-VUE_APP_UPLOAD_API='https://zplma-b.caimei365.com'
-# VUE_APP_UPLOAD_API='http://192.168.2.200:8012'
+# VUE_APP_UPLOAD_API='https://zplma-b.caimei365.com'
+VUE_APP_UPLOAD_API='http://192.168.2.200:8012'
 # VUE_APP_UPLOAD_API='http://192.168.2.67:8012'
 
 # 二维码生成链接location

src/api/activity.js

@@ -106,3 +106,39 @@ export function clearDouyinTokenRedis(params) {
     params
   })
 }
+
+// 获取报名参赛机构列表
+export function fetchSignInClubList(params) {
+  return request({
+    url: '/auth/get/auth/info',
+    method: 'get',
+    params
+  })
+}
+
+// 移除参赛机构
+export function deleteClub(params) {
+  return request({
+    url: '/auth/del/auth/info',
+    method: 'get',
+    params
+  })
+}
+
+// 移除机构上传的视频
+export function deleteClubVideo(params) {
+  return request({
+    url: '/auth/del/video/info',
+    method: 'get',
+    params
+  })
+}
+
+// 获取机构已上传视频列表
+export function fetchClubVideoList(params) {
+  return request({
+    url: '/wx/auth/get/video/username',
+    method: 'get',
+    params
+  })
+}

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

@@ -0,0 +1,84 @@
+<template>
+  <div class="video-list">
+    <el-table
+      v-loading="isLoading"
+      :data="list"
+      border
+      fit
+      highlight-current-row
+      style="width: 100%"
+      header-row-class-name="tableHeader"
+    >
+      <el-table-column label="作品描述" prop="title" align="center" />
+      <el-table-column label="抖音视频链接" prop="linked" align="center" />
+      <el-table-column label="上传时间" align="center" width="160">
+        <template slot-scope="{ row }">{{ row.releaseTime | formatDate }}</template>
+      </el-table-column>
+      <el-table-column label="点赞" prop="diggCount" align="center" width="100" />
+      <el-table-column label="操作" width="240" align="center">
+        <template slot-scope="{ row }">
+          <el-button size="mini" type="primary" @click="$emit('preview', row)">播放</el-button>
+          <el-button size="mini" type="primary" @click="downloadVideo(row)">下载</el-button>
+          <el-button size="mini" type="primary" @click="$emit('delete', row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+import { downloadWithUrl } from '@/utils/tools'
+export default {
+  props: {
+    list: {
+      type: Array,
+      default: () => []
+    },
+    isLoading: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    // 下载视频
+    async downloadVideo(row) {
+      try {
+        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=${row.id},`
+        // const downUrl = `${process.env.VUE_APP_BASE_API}/download/file?ossName=${row.ossName}`
+        downloadWithUrl(downUrl, `${row.userName}(${row.authParty || '未认证机构'})`, {
+          headers: {
+            'X-Token': this.$store.getters.token
+          }
+        })
+          .then((res) => {
+            console.log(res)
+          })
+          .catch((err) => {
+            console.log(err)
+            this.$message.error(`下载抖音视频失败`)
+          })
+          .finally(() => {
+            notification.close()
+          })
+      } catch (error) {
+        console.log(error)
+      }
+    }
+  }
+}
+</script>

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

@@ -27,33 +27,12 @@
     </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="结束日期"
-        />
+        <el-input v-model="listQuery.mobile" placeholder="登录账号" @keyup.enter.native="getList" />
       </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>
     <!-- 列表 -->
@@ -65,54 +44,82 @@
       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" prop="authParty">
+        <template slot-scope="{ row }">
+          <span v-if="row.authParty">{{ row.authParty }}</span>
+          <span v-else>-</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="机构类型" align="center" width="160">
+        <template slot-scope="{ row }">
+          <span v-if="row.authId" class="status success">已认证机构</span>
+          <span v-else class="status danger" title="当前机构未认证">未认证机构</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="机构资质" align="center" width="160">
+        <template slot-scope="{ row }">
+          <span
+            v-if="!row.authId"
+            class="status success cursor-pointer"
+            @click="onShowCertification(row)"
+          >查看资质</span>
+          <span v-else>-</span>
+        </template>
+      </el-table-column>
       <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>
+          <permission-button size="mini" type="primary" @click="onShowVideoList(row)">视频列表</permission-button>
+          <permission-button size="mini" type="primary" @click="onRemoveClub(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 title="机构资质" :visible.sync="certificationDialog" width="600px" center :close-on-click-modal="false">
+      <img :src="certificationUrl" class="certification">
+    </el-dialog>
+
+    <el-dialog title="机构资质" :visible.sync="showVideoListDialog" width="1000px" center :close-on-click-modal="false">
+      <VideoList :list="videoList" :is-loading="videoListLoading" @delete="onDeleteVideo" @preview="onPlayVideo" />
+      <!-- 视频播放 -->
+      <el-dialog
+        title="视频播放"
+        :visible.sync="videoDialog"
+        width="800px"
+        center
+        :close-on-click-modal="false"
+        append-to-body
+      >
+        <video class="video-play" :src="videoUrl" controls />
+      </el-dialog>
     </el-dialog>
   </div>
 </template>
 
 <script>
 import {
-  fetchClubList,
+  deleteClub,
+  deleteClubVideo,
+  fetchClubVideoList,
   fetchDouyinActivityStatus,
-  fetchDouyinVideoList,
+  fetchSignInClubList,
   updateDouyinActivityStatus
 } from '@/api/activity'
-
-import { downloadWithUrl } from '@/utils/tools'
+import VideoList from '../components/video-list.vue'
 
 export default {
   name: 'ChallengeVideoList',
+  components: {
+    VideoList
+  },
   data() {
     return {
-      // 视频播放
-      videoDialog: false,
-      videoUrl: '',
-      filterTime: [],
       listQuery: {
         status: '',
-        authId: '',
-        userName: '',
-        authParty: '',
-        startTime: '',
-        endTime: '',
+        mobile: '',
         pageNum: 1,
         pageSize: 10
       },
@@ -123,10 +130,17 @@ export default {
         time: [],
         status: 0
       },
-      commandDialog: false,
-      qrcodeUrl: '',
-      clubList: [],
-      selectionList: []
+      // 机构资质
+      certificationDialog: false,
+      certificationUrl: '',
+      // 机构视频列表
+      videoList: [],
+      videoListLoading: false,
+      showVideoListDialog: false,
+      currentClub: null,
+      // 视频预览
+      videoDialog: false,
+      videoUrl: ''
     }
   },
   created() {
@@ -138,9 +152,109 @@ export default {
   methods: {
     initPage() {
       this.getList()
-      this.getClubList()
       this.fetchActivityStatus()
     },
+
+    // 获取参赛机构列表
+    getList() {
+      this.list = []
+      this.listQuery.pageNum = 1
+      this.fetchClubList()
+    },
+
+    // 获取参赛机构列表
+    async fetchClubList() {
+      try {
+        this.listLoading = true
+        const res = await fetchSignInClubList(this.listQuery)
+        this.list = res.data.list
+        this.listLoading = false
+        console.log(res)
+      } catch (error) {
+        console.log(error)
+      }
+    },
+
+    // 删除参赛机构操作
+    async onRemoveClub(row) {
+      try {
+        await this.$confirm('确定删除该机构用户吗？', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning',
+          closeOnClickModal: false,
+          showClose: false
+        })
+        this.deleteClub(row)
+      } catch (error) {
+        this.$message.info('已取消操作！')
+        console.log(error)
+      }
+    },
+
+    // 删除参赛机构操作
+    async deleteClub(row) {
+      try {
+        await deleteClub({ id: row.id })
+        this.fetchClubList()
+        this.$message.success('机构删除成功')
+      } catch (error) {
+        console.log(error)
+        this.$message.error('机构删除失败')
+      }
+    },
+
+    // 获取机构上传视频列表
+    async onShowVideoList(row) {
+      try {
+        this.currentClub = row
+        const res = await fetchClubVideoList({ mobile: row.userName, clubUserId: '' })
+        this.videoList = res.data
+        if (this.videoList.length === 0) {
+          this.$message.warning('当前机构为上传视频')
+          return
+        }
+        this.showVideoListDialog = true
+      } catch (error) {
+        console.log(error)
+      }
+    },
+
+    // 删除机构已上传的视频
+    async onDeleteVideo(row) {
+      try {
+        await this.$confirm('确定删除该机构用户上传视频吗？删除后，抖音视频挑战首页将不再显示该视频！', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning',
+          closeOnClickModal: false,
+          showClose: false
+        })
+        this.deleteVideo(row)
+      } catch (error) {
+        this.$message.info('已取消操作！')
+        console.log(error)
+      }
+    },
+
+    // 视频删除
+    async deleteVideo(row) {
+      try {
+        await deleteClubVideo({ id: row.id })
+        this.$message.success('视频删除成功')
+        this.onShowVideoList(this.currentClub)
+      } catch (error) {
+        console.log(error)
+        this.$message.success('视频删除失败')
+      }
+    },
+
+    // 播放视频
+    onPlayVideo(row) {
+      this.videoDialog = true
+      this.videoUrl = row.ossUrl
+    },
+
     // 获取活动状态
     async fetchActivityStatus() {
       try {
@@ -173,23 +287,20 @@ export default {
     },
 
     // 更新活动时间状态
-    onUpdateActivityStatus(value) {
+    async 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: '确定',
@@ -206,12 +317,6 @@ export default {
           })
         return
       }
-
-      this.updateActivityStatus()
-    },
-
-    // 更新活动状态
-    async updateActivityStatus() {
       try {
         const {
           status,
@@ -228,126 +333,32 @@ export default {
       }
     },
 
-    // 获取视频列表
-    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
+    // 产看资质
+    onShowCertification(row) {
+      this.certificationUrl = row.licenseOssUrl
+      this.certificationDialog = true
     },
 
     // 表格索引
     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>
+.cursor-pointer {
+  cursor: pointer;
+  user-select: none;
+}
+
 .activity {
   .filter-control {
     margin-bottom: 0;
   }
 }
 
-.cover {
-  width: 80px;
-  display: block;
-}
-
 .el-divider {
   margin: 12px 0;
 }
@@ -357,25 +368,16 @@ export default {
     text-align: right;
   }
 
-  .video-play {
-    display: block;
+  .certification {
     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;
-  }
+.video-play {
+  display: block;
+  width: 100%;
+  height: 480px;
+  background: #666;
 }
 </style>