v1.7.5版本提测

.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.67: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
@@ -21,8 +21,8 @@ VUE_APP_SOCKET_SERVER = 'wss://zplma-b.caimei365.com/websocket?sessionSource=zpl
 # VUE_APP_SOCKET_SERVER = 'ws://192.168.2.200:8012/websocket?sessionSource=zplm_admin'
 
 # 网站地址
-VUE_APP_LOCAL = 'http://192.168.2.92:9527'
-# VUE_APP_LOCAL = 'http://zplm-b.caimei365.com'
+# VUE_APP_LOCAL = 'https://192.168.2.92:9527'
+VUE_APP_LOCAL = 'https://zplm-b.caimei365.com'
 
 # 认证通页面
 VUE_APP_WWW_HOST = 'https://192.168.2.92:8888'
@@ -33,6 +33,6 @@ VUE_APP_WWW_HOST = 'https://192.168.2.92:8888'
 VUE_APP_PAY_LOCAL = 'http://zplm-b.caimei365.com'
 
 # 文件上传路径
-VUE_APP_UPLOAD_DIR = 'dev/authFile/'
-# VUE_APP_UPLOAD_DIR = 'beta/authFile/'
+# VUE_APP_UPLOAD_DIR = 'dev/authFile/'
+VUE_APP_UPLOAD_DIR = 'beta/authFile/'
 

src/api/activity.js

@@ -0,0 +1,90 @@
+import request from '@/utils/request'
+
+// 获取抖音挑战赛活动状态
+export function fetchDouyinActivityStatus(params) {
+  return request({
+    url: '/auth/get/activity/time',
+    method: 'get',
+    params
+  })
+}
+
+// 获取抖音挑战赛活动状态
+export function updateDouyinActivityStatus(data) {
+  return request({
+    url: '/auth/save/activity/time',
+    method: 'post',
+    data
+  })
+}
+
+// 获取抖音挑战赛视频列表
+export function fetchDouyinVideoList(params) {
+  return request({
+    url: '/auth/get/published/video/list',
+    method: 'get',
+    params
+  })
+}
+
+// 获取抖音挑战赛视频列表
+export function onSendDouyinCommand(data) {
+  return request({
+    url: '/auth/sms/send/douyin',
+    method: 'post',
+    data
+  })
+}
+
+// 获取已上传视频机构列表
+export function fetchClubList(params) {
+  return request({
+    url: '/auth/get/auth/party/list',
+    method: 'get',
+    params
+  })
+}
+
+// 校access_token 是否过期
+export function checkDouyinAccessToken() {
+  return request({
+    url: '/auth/check/accesstoken',
+    method: 'get'
+  })
+}
+
+// 获取accessToken
+export function getDouyinAccessToken(params) {
+  return request({
+    url: '/auth/get/douying/acesstoken',
+    method: 'get',
+    params
+  })
+}
+
+// 获取抖音视频发布分享码 h5
+export function getDouyinShareH5(data) {
+  return request({
+    url: '/auth/upload/video/to/douyin',
+    method: 'post',
+    data
+  })
+}
+
+// 删除抖音视频
+export function removeVideo(params) {
+  return request({
+    url: 'auth/del/video',
+    method: 'get',
+    params
+  })
+}
+
+// 下载抖音视频
+export function downloadVideo(params) {
+  return request({
+    url: '/auth/downLoad/chose/zip',
+    method: 'get',
+    params
+  })
+}

src/permission.js

@@ -11,7 +11,7 @@ if (userInfo) {
 
 // 路由白名单
 const whiteList = ['/login']
-const shareList = ['Share', 'SharePayVip', 'SharePaySuccess', 'SharePayFaild']
+const shareList = ['Share', 'SharePayVip', 'SharePaySuccess', 'SharePayFaild', 'DouyinResult']
 
 // 路由拦截器
 router.beforeEach(async(to, from, next) => {

src/router/module/base.js

@@ -7,6 +7,12 @@ export default [
     component: () => import(/* webpackChunkName: "common-page" */ '@/views/index'),
     hidden: true
   },
+  {
+    name: 'DouyinResult',
+    path: '/douyin',
+    component: () => import(/* webpackChunkName: "common-page" */ '@/views/common/redirect/douyin'),
+    hidden: true
+  },
   {
     path: '/login',
     component: () => import(/* webpackChunkName: "common-page" */ '@/views/common/login'),

src/utils/index.js

@@ -28,8 +28,8 @@ export function parseTime(time, cFormat) {
   if (typeof time === 'object') {
     date = time
   } else {
-    if ((typeof time === 'string')) {
-      if ((/^[0-9]+$/.test(time))) {
+    if (typeof time === 'string') {
+      if (/^[0-9]+$/.test(time)) {
         // support "1548221490638"
         time = parseInt(time)
       } else {
@@ -39,7 +39,7 @@ export function parseTime(time, cFormat) {
       }
     }
 
-    if ((typeof time === 'number') && (time.toString().length === 10)) {
+    if (typeof time === 'number' && time.toString().length === 10) {
       time = time * 1000
     }
     date = new Date(time)
@@ -56,7 +56,9 @@ export function parseTime(time, cFormat) {
   const time_str = format.replace(/{([ymdhisa])+}/g, (result, key) => {
     const value = formatObj[key]
     // Note: getDay() returns 0 on Sunday
-    if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value ] }
+    if (key === 'a') {
+      return ['日', '一', '二', '三', '四', '五', '六'][value]
+    }
     return value.toString().padStart(2, '0')
   })
   return time_str
@@ -91,17 +93,7 @@ export function formatTime(time, option) {
   if (option) {
     return parseTime(time, option)
   } else {
-    return (
-      d.getMonth() +
-      1 +
-      '月' +
-      d.getDate() +
-      '日' +
-      d.getHours() +
-      '时' +
-      d.getMinutes() +
-      '分'
-    )
+    return d.getMonth() + 1 + '月' + d.getDate() + '日' + d.getHours() + '时' + d.getMinutes() + '分'
   }
 }
 
@@ -135,7 +127,7 @@ export function byteLength(str) {
     const code = str.charCodeAt(i)
     if (code > 0x7f && code <= 0x7ff) s++
     else if (code > 0x7ff && code <= 0xffff) s += 2
-    if (code >= 0xDC00 && code <= 0xDFFF) i--
+    if (code >= 0xdc00 && code <= 0xdfff) i--
   }
   return s
 }
@@ -161,7 +153,7 @@ export function cleanArray(actual) {
 export function param(json) {
   if (!json) return ''
   return cleanArray(
-    Object.keys(json).map(key => {
+    Object.keys(json).map((key) => {
       if (json[key] === undefined) return ''
       return encodeURIComponent(key) + '=' + encodeURIComponent(json[key])
     })
@@ -179,7 +171,7 @@ export function param2Obj(url) {
   }
   const obj = {}
   const searchArr = search.split('&')
-  searchArr.forEach(v => {
+  searchArr.forEach((v) => {
     const index = v.indexOf('=')
     if (index !== -1) {
       const name = v.substring(0, index)
@@ -213,7 +205,7 @@ export function objectMerge(target, source) {
   if (Array.isArray(source)) {
     return source.slice()
   }
-  Object.keys(source).forEach(property => {
+  Object.keys(source).forEach((property) => {
     const sourceProperty = source[property]
     if (typeof sourceProperty === 'object') {
       target[property] = objectMerge(target[property], sourceProperty)
@@ -252,9 +244,7 @@ export function toggleClass(element, className) {
   if (nameIndex === -1) {
     classString += '' + className
   } else {
-    classString =
-      classString.substr(0, nameIndex) +
-      classString.substr(nameIndex + className.length)
+    classString = classString.substr(0, nameIndex) + classString.substr(nameIndex + className.length)
   }
   element.className = classString
 }
@@ -324,7 +314,7 @@ export function deepClone(source) {
     throw new Error('error arguments', 'deepClone')
   }
   const targetObj = source.constructor === Array ? [] : {}
-  Object.keys(source).forEach(keys => {
+  Object.keys(source).forEach((keys) => {
     if (source[keys] && typeof source[keys] === 'object') {
       targetObj[keys] = deepClone(source[keys])
     } else {
@@ -422,3 +412,21 @@ export function countDown(diff, loadTime, item, callback) {
   }
   round(diff - loadTime)
 }
+
+/**
+ * 拼接url链接
+ * @param {*} url url链接地址
+ * @param {*} queryObj query对象
+ * @returns url
+ */
+export function generateQueryUrl(url, queryObj) {
+  url = new URL(url)
+  var query = url.searchParams
+
+  for (const key in queryObj) {
+    if (Object.hasOwnProperty.call(queryObj, key)) {
+      query.append(key, queryObj[key])
+    }
+  }
+  return url
+}

src/views/common/redirect/douyin.vue

@@ -0,0 +1,16 @@
+<template>
+  <div>123</div>
+</template>
+
+<script>
+import { getQueryObject } from '@/utils'
+import { setStorage } from '@/utils/storage'
+export default {
+  created() {
+    const urlQuery = getQueryObject()
+    urlQuery.state = urlQuery.state.slice(0, urlQuery.state.indexOf('#'))
+    setStorage('zp_douyin_code', urlQuery.code)
+    window.location.href = window.location.origin
+  }
+}
+</script>

src/views/normal/activity/video/index.vue

@@ -5,15 +5,24 @@
         <span>活动时间:</span>
         <el-date-picker
           v-model="activityFormData.time"
-          type="daterange"
+          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" />
+        <el-switch
+          v-model="activityFormData.status"
+          el-switch
+          :active-value="1"
+          :inactive-value="0"
+          @change="onUpdateActivityStatus"
+        />
       </div>
     </div>
     <el-divider />
@@ -21,19 +30,18 @@
       <div class="filter-control">
         <span>所属机构:</span>
         <el-select v-model="listQuery.authId" placeholder="所属机构" clearable @change="getList">
-          <el-option label="全部" value="" />
-          <el-option label="待审核" :value="2" />
-          <el-option label="审核通过" :value="1" />
-          <el-option label="审核未通过" :value="0" />
+          <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.loginAccount" placeholder="登录账号" @keyup.enter.native="handleFilter" />
+        <el-input v-model="listQuery.userName" placeholder="登录账号" @keyup.enter.native="getList" />
       </div>
       <div class="filter-control">
-        <permission-button type="primary">查询</permission-button>
-        <permission-button type="primary">下载</permission-button>
+        <el-button type="primary" @click="getList">查询</el-button>
+        <el-button type="primary" :disabled="selectionList.length === 0" @click="onDownload('select')">下载</el-button>
       </div>
     </div>
     <!-- 列表 -->
@@ -49,14 +57,14 @@
     >
       <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">
-        <template><el-image /></template>
+      <el-table-column label="视频" align="center" width="100">
+        <template slot-scope="{ row }"><el-image :src="row.cover" style="wdith: 80px" /></template>
       </el-table-column>
-      <el-table-column label="登录账号" align="center" prop="loginAccount" width="240" />
+      <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="pv" width="120" />
-      <el-table-column label="点赞数" align="center" prop="praise" width="120" />
-      <el-table-column label="排名" align="center" prop="ranking" width="120" />
+      <el-table-column label="浏览量" align="center" prop="playCount" width="120" />
+      <el-table-column label="点赞数" align="center" prop="diggCount" width="120" />
+      <el-table-column label="排名" align="center" prop="rankNum" width="120" />
       <el-table-column label="抖音上传状态" align="center" width="120">
         <template slot-scope="{ row }">
           <span v-if="row.status === 1" class="status success">已上传</span>
@@ -64,19 +72,26 @@
         </template>
       </el-table-column>
       <el-table-column label="操作" align="center" width="440">
-        <template>
-          <permission-button size="mini" type="primary" @click="scanDialog = true">上传至抖音</permission-button>
-          <permission-button size="mini" type="primary" @click="commandDialog = true">抖音口令</permission-button>
-          <permission-button size="mini" type="primary" @click="onPlayVideo">播放视频</permission-button>
-          <permission-button size="mini" type="primary" @click="onDownload">下载</permission-button>
-          <permission-button size="mini" type="primary" @click="onRemove">删除</permission-button>
+        <template slot-scope="{ row }">
+          <permission-button size="mini" type="primary" @click="onSyancDouyin(row)">上传至抖音</permission-button>
+          <permission-button size="mini" type="primary" @click="onSaveCommand(row)">抖音口令</permission-button>
+          <permission-button size="mini" type="primary" @click="onPlayVideo(row)">播放视频</permission-button>
+          <permission-button size="mini" type="primary" @click="onDownload('single', 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="scanDialog" width="300px" center :close-on-click-modal="false">
-      <el-image class="dy-code" />
+    <el-dialog
+      title="发布抖音"
+      :visible.sync="scanDialog"
+      width="300px"
+      center
+      :close-on-click-modal="false"
+      @close="onScanClose"
+    >
+      <el-image class="dy-code" :src="qrcodeUrl" />
       <div class="tip">请使用抖音app扫码发布视频</div>
     </el-dialog>
 
@@ -90,8 +105,8 @@
       @close="onCommandClose"
     >
       <el-form ref="commandForm" :model="commandFormData" :rules="commandRules">
-        <el-form-item prop="commandCode">
-          <el-input v-model="commandFormData.commandCode" type="textarea" :rows="5" placeholder="请输入抖音口令" />
+        <el-form-item prop="content">
+          <el-input v-model="commandFormData.content" type="textarea" :rows="5" placeholder="请输入抖音口令" />
         </el-form-item>
       </el-form>
       <div class="control">
@@ -99,80 +114,364 @@
         <el-button type="primary" @click="onCommandSubmit">提交</el-button>
       </div>
     </el-dialog>
+
+    <!-- 视频播放 -->
+    <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 {
+  checkDouyinAccessToken,
+  fetchClubList,
+  fetchDouyinActivityStatus,
+  fetchDouyinVideoList,
+  getDouyinAccessToken,
+  getDouyinShareH5,
+  onSendDouyinCommand,
+  removeVideo,
+  updateDouyinActivityStatus
+} from '@/api/activity'
+
+import Qrcode from 'qrcode'
+import { generateQueryUrl } from '@/utils'
+import { mapGetters } from 'vuex'
+import { getStorage, removeStorage } from '@/utils/storage'
+import { downloadWithUrl } from '@/utils/tools'
+
 export default {
   data() {
     return {
+      // 视频播放
+      videoDialog: false,
+      videoUrl: '',
       listQuery: {
+        status: '',
         authId: '',
-        loginAccount: '',
+        userName: '',
+        authParty: '',
         pageNum: 1,
         pageSize: 10
       },
       listLoading: false,
-      list: [{}],
+      list: [],
       // 活动表单数据
       activityFormData: {
-        time: '',
-        status: 1
+        time: [],
+        status: 0
       },
       scanDialog: false,
       commandDialog: false,
+      qrcodeUrl: '',
       // 抖音口令表单数据
       commandFormData: {
-        commandCode: ''
+        authId: '',
+        content: ''
       },
       commandRules: {
-        commandCode: [{ required: true, message: '口令不能为空', trigger: ['blur'] }]
-      }
+        content: [{ required: true, message: '口令不能为空', trigger: ['blur'] }]
+      },
+      clubList: [],
+      selectionList: []
     }
   },
+  computed: {
+    ...mapGetters(['proxyInfo'])
+  },
+  created() {
+    this.getList()
+    this.getClubList()
+    this.fetchActivityStatus()
+  },
   methods: {
+    // 获取活动状态
+    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'
+        })
+          .then(() => {
+            this.activityFormData.status = 0
+          })
+          .catch(() => {})
+        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() {},
+    getList() {
+      this.list = []
+      this.listQuery.pageNum = 1
+      this.fetchDouyinVideoList()
+    },
+    // 获取视频列表
+    async fetchDouyinVideoList() {
+      try {
+        this.listLoading = true
+        const res = await fetchDouyinVideoList(this.listQuery)
+        this.list = res.data.list.map((item, index) => {
+          item.rankNum = index + 1
+          return item
+        })
+        this.listLoading = false
+        this.listQuery.pageNum++
+      } 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)
+      }
+    },
+    // 上传抖音
+    async onSyancDouyin(row) {
+      // 代理模式下不允许操作
+      if (this.proxyInfo) {
+        return this.$confirm('请退出代操作，使用供应商账号登陆后操作！', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消'
+        })
+          .then(() => {})
+          .catch(() => {})
+      }
+      try {
+        // 校验token
+        const { data: tokenFlag } = await checkDouyinAccessToken()
+        if (!tokenFlag) {
+          this.douyinLogin(row)
+          return
+        }
+        const res = await getDouyinShareH5({
+          title: row.title,
+          videoPath: row.ossUrl,
+          authId: row.authId
+        })
+        await this.generateQrcode(res.data)
+        // 获取分享码
+      } catch (error) {
+        console.log(error)
+      }
+    },
+
+    async douyinLogin(row) {
+      const code = getStorage('zp_douyin_code')
+      if (!code) {
+        // 获取token
+        const url = generateQueryUrl('https://open.douyin.com/platform/oauth/connect', {
+          client_key: 'awwwvh9tsnvo54w1',
+          response_type: 'code',
+          scope: 'video.data,video.list,trial.whitelist,data.external.item,h5.share',
+          redirect_uri: process.env.VUE_APP_LOCAL + '#/douyin',
+          state: '/challenge/video'
+        })
+        window.open(url, '_blank')
+        return
+      }
+      removeStorage('zp_douyin_code')
+      try {
+        await getDouyinAccessToken({ code })
+        this.onSyancDouyin(row)
+      } catch (error) {
+        console.log(error)
+      }
+    },
+
+    // 抖音视频对话框关闭
+    onScanClose() {
+      this.getList()
+    },
+
+    // 生成h5分享码
+    async generateQrcode(str) {
+      try {
+        const res = await Qrcode.toDataURL(str, {})
+        this.qrcodeUrl = res
+        this.scanDialog = true
+      } catch (error) {
+        console.log(error)
+      }
+    },
     // 提交抖音口令
     async onCommandSubmit() {
       try {
         await this.$refs.commandForm.validate()
-        this.onSaveCommand()
+        await onSendDouyinCommand(this.commandFormData)
+        this.commandDialog = false
+        this.$message.success('抖音口令保存成功')
+        this.getList()
       } catch (error) {
         console.log(error)
       }
     },
     // 保存抖音口令
-    onSaveCommand() {},
+    async onSaveCommand(row) {
+      this.commandDialog = true
+      this.commandFormData.authId = row.authId
+      this.commandFormData.content = row.dyCommand
+    },
     // 清楚表单
     onCommandClose() {
+      this.commandFormData.authId = ''
       this.$refs.commandForm.resetFields()
     },
     // 播放视频
-    onPlayVideo() {},
+    onPlayVideo(row) {
+      this.videoDialog = true
+      this.videoUrl = row.ossUrl
+    },
     // 下载视频
-    onDownload() {},
+    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)
+      }
+    },
     // 删除视频
-    async onRemove() {
+    async onRemove(row) {
       try {
         await this.$confirm('此操作将永久删除该视频, 是否继续?', '提示', {
           confirmButtonText: '确定',
           cancelButtonText: '取消',
           type: 'warning'
         })
-        this.removeVideo()
+        this.removeVideo(row)
       } catch (error) {
         console.log(error)
         this.$message.info('已取消操作')
       }
     },
     // 删除视频
-    removeVideo() {},
-    // 表格数据选中
-    onSelectionChange() {},
-    // 表格索引
-    indexMethod(index) {
-      return index + this.listQuery.pageSize * (this.listQuery.pageNum - 1) + 1
+    async removeVideo(row) {
+      try {
+        await removeVideo({ videoId: row.id })
+        this.$message.success('删除视频成功')
+        this.getList()
+      } catch (error) {
+        console.log(error)
+      }
     }
   }
 }
@@ -194,6 +493,13 @@ export default {
     text-align: right;
   }
 
+  .video-play {
+    display: block;
+    width: 100%;
+    height: 480px;
+    background: #666;
+  }
+
   .dy-code {
     width: 160px;
     height: 160px;

vue.config.js

@@ -32,6 +32,7 @@ module.exports = {
   devServer: {
     port: port,
     open: true,
+    disableHostCheck: true,
     overlay: {
       warnings: false,
       errors: true
@@ -70,10 +71,7 @@ module.exports = {
     config.plugins.delete('prefetch')
 
     // set svg-sprite-loader
-    config.module
-      .rule('svg')
-      .exclude.add(resolve('src/icons'))
-      .end()
+    config.module.rule('svg').exclude.add(resolve('src/icons')).end()
     config.module
       .rule('icons')
       .test(/\.svg$/)
@@ -86,7 +84,7 @@ module.exports = {
       })
       .end()
 
-    config.when(process.env.NODE_ENV !== 'development', config => {
+    config.when(process.env.NODE_ENV !== 'development', (config) => {
       config
         .plugin('ScriptExtHtmlWebpackPlugin')
         .after('html')