Prechádzať zdrojové kódy

数据展示,测试

zhuxinbo 5 rokov pred
rodič
commit
71707ade8c
1 zmenil súbory, kde vykonal 431 pridanie a 0 odobranie
  1. 431 0
      src/views/modules/video/video.vue

+ 431 - 0
src/views/modules/video/video.vue

@@ -1,3 +1,4 @@
+<<<<<<< HEAD
 <style>
 @media (min-width: 1024px) {
   .checkbox_item_container {
@@ -524,3 +525,433 @@ export default {
   }
 }
 </script>
+=======
+<style>
+@media (min-width: 1024px) {
+  .checkbox_item_container {
+    width: 70%;
+  }
+} /*>=1024的设备*/
+
+@media (min-width: 1100px) {
+  .checkbox_item_container {
+    width: 70%;
+  }
+} /*>=1100的设备*/
+@media (min-width: 1280px) {
+  .checkbox_item_container_size {
+    width: 70%;
+  }
+}
+
+/*>=1280的设备*/
+
+@media (min-width: 1366px) {
+}
+
+@media (min-width: 1440px) {
+}
+
+@media (min-width: 1680px) {
+}
+@media (min-width: 1920px) {
+  .checkbox_item_container_size {
+    width: 50%;
+  }
+}
+.vm-video-list .ant-comment-inner {
+  padding: 0;
+}
+.vm-video-list .bg:after {
+  content: '';
+  width: 110%;
+  height: 110%;
+  position: absolute;
+  left: -5%;
+  top: -5%;
+  background: inherit;
+  filter: blur(20px);
+  z-index: 2;
+}
+.ant-comment-content-detail {
+  word-wrap: break-word;
+  word-break: normal;
+}
+.vm-video-list .ant-card-actions li span {
+  width: 90%;
+}
+.vm-video-list .ant-card-actions li .ant-input-group {
+  width: 100%;
+}
+.vm-video-list .ant-card-actions li .ant-input-group-addon {
+  width: 0;
+}
+</style>
+<template>
+  <div class="vm-video-list">
+    <a-row class="image-list-heading vm-panel">
+      <div class="panel-heading">{{ title }}</div>
+      <a-row type="flex" align="middle" justify="space-between" class="panel-body">
+        <div class="search-bar">
+          <a-button type="primary" icon="plus" style="margin-right:10px" @click="addUser">新增账号</a-button>
+          <a-select
+            showSearch
+            placeholder="选择账号"
+            notFoundContent="暂无账号,赶紧去添加一个吧"
+            optionFilterProp="children"
+            style="width: 300px"
+            @focus="handleFocus"
+            @blur="handleBlur"
+            @change="handleChange"
+            :filterOption="filterOption"
+          >
+            <a-select-option
+              :value="item.ksid"
+              v-for="(item,index) of options"
+              :key="index"
+            >{{item.userName}}</a-select-option>
+          </a-select>
+        </div>
+      </a-row>
+    </a-row>
+    <a-row class="image-list" :gutter="16" style="padding:0 8px">
+      <a-col
+        :lg="6"
+        :sm="12"
+        class="vm-margin"
+        v-for="(item,index) of dataShow"
+        :key="index"
+        style="padding:0"
+      >
+        <a-card hoverable style="margin:0 15px">
+          <div
+            slot="cover"
+            style="display:flex;justify-content:center;position:relative;height:300px;"
+          >
+            <div
+              class="bg"
+              style="overflow:hidden;position:relative;width:100%;height:100%"
+              :style="{backgroundImage: 'url(' +item.thumbnailUrl+')', backgroundSize:'cover', backgroundRepeat: 'no-repeat',backgroundPosition:'center center'}"
+            ></div>
+            <img
+              :src="item.poster"
+              alt
+              style="height:300px;width:auto;position:absolute;z-index:10;top:0"
+            />
+          </div>
+          <template class="ant-card-actions" slot="actions">
+            <!-- <a-icon type="setting" />
+            <a-icon type="edit" />
+            <a-icon type="ellipsis" />-->
+            <a-input placeholder="请输入评论内容" v-model="item.keyword" style="width:100%">
+              <div slot="addonAfter" @click="addComment(item,index)">评论</div>
+            </a-input>
+          </template>
+          <div style="position:relative">
+            <div
+              style="width:100%;height:200px;position: absolute;z-index:3;background:white;display:flex;justify-content:center;align-items:center"
+              v-if="item.loading"
+            >
+              <img src="./images/loading.gif" alt />
+            </div>
+            <div style="height:200px;overflow-y:auto;" v-if="item.commentList.length>0">
+              <a-comment v-for="(items,idx) of item.commentList" :key="idx">
+                <a slot="author">
+                  <input type="checkbox" />
+                  {{items.authorName}}
+                </a>
+                <div slot="content" style="display: flex;justify-content: space-between;">
+                  <p>{{items.content}}</p>
+                  <div>
+                    <span style="margin-right:5px" @click="backAdd(item,items)">回复</span>
+                    <span @click="remove(item,items,idx)" style="margin-right:5px">删除</span>
+                  </div>
+                </div>
+              </a-comment>
+            </div>
+            <div
+              v-else
+              style="height:200px;display:flex;justify-content:center;align-items:center"
+            >暂无评论</div>
+          </div>
+        </a-card>
+      </a-col>
+    </a-row>
+    <a-modal title="扫描二维码登录" v-model="showCode" :width="300" @cancel="showCode = false">
+      <div style="display: flex;justify-content: center;position:relative">
+        <img :src="qrcode" alt style="width:130px;height:130px;border:1px solid #f2f2f2" />
+        <div
+          style="width:130px;height:130px;position:absolute;background:rgba(255,255,255,.9);text-align:center;padding:30px 5px"
+          v-show="showShare"
+        >
+          <p>
+            {{showTitle}}
+            <span @click="addUser" style="color:red" v-show="showSpan">刷新</span>
+          </p>
+        </div>
+      </div>
+    </a-modal>
+  </div>
+</template>
+
+<script>
+import ARow from 'ant-design-vue/es/grid/Row'
+import ACol from 'ant-design-vue/es/grid/Col'
+import axios from 'axios'
+var interval, objTimer
+import {
+  getLoginQr,
+  getUserList,
+  getLoginStatus,
+  getVideoList,
+  getCommentList,
+  commentDelete,
+  commentAdd
+} from '@api/video.js'
+export default {
+  name: 'videoList',
+  components: {
+    ACol,
+    ARow
+  },
+
+  data: function() {
+    return {
+      title: '视频列表',
+      dataShow: [], // data for showing
+      data: [],
+      options: [],
+      showTwo: false,
+      showCode: false,
+      lastTime: null, //最后一次点击的时间
+      currentTime: null, //当前点击的时间
+      timeOut: 60 * 1000, //设置超时时间: 1分钟,
+      requestId: '',
+      qrcode: '',
+      showTitle: '',
+      showShare: false,
+      showSpan: false,
+      ksid: null,
+      pullRefreshss: true, // 代表可以进行下拉加载,false代表不能
+      scollY: null, // 离底部距离有多少
+      pcursor: null,
+      repltTo: 0,
+      replyToCommentId: 0
+    }
+  },
+  methods: {
+    handleChange(value) {
+      this.ksid = value
+      this.dataShow = []
+      clearInterval(interval)
+      this.getVideoList(value, null)
+      //   this.getTest()
+    },
+    handleBlur() {
+      console.log('blur')
+    },
+    handleFocus() {
+      console.log('focus')
+    },
+    filterOption(input, option) {
+      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+    },
+    getUserList() {
+      getUserList().then(res => {
+        if (res.code == 0) {
+          this.options = res.result
+        } else {
+          this.options = []
+        }
+      })
+    },
+    addUser() {
+      this.showCode = true
+      getLoginQr().then(res => {
+        if (res.code == 0) {
+          this.qrcode = res.result.qrcode
+          this.requestId = res.result.requestId
+        }
+      })
+    },
+    getVideoList(ksid, pcursor) {
+      var that = this
+
+      getVideoList({ ksid: ksid, pcursor: pcursor }).then(res => {
+        if (res.code == 0) {
+          var data = res.result.data.publicFeeds.list.map(item => {
+            return {
+              ...item,
+              commentList: [],
+              loading: true,
+              keyword: ''
+            }
+          })
+          this.pcursor = res.result.data.publicFeeds.pcursor
+          this.dataShow.push(...data)
+          var i = 0
+          for (let i = 0; i < that.dataShow.length; i++) {
+            if (that.dataShow[i].commentCount > 0) {
+              that.getCommentList(ksid, that.dataShow[i].photoId).then(dataOne => {
+                that.dataShow[i].loading = false
+                if (dataOne && that.dataShow[i]) {
+                  that.dataShow[i].commentList = dataOne.commentList
+                } else {
+                  that.dataShow[i].commentList = []
+                }
+              })
+            } else {
+              that.dataShow[i].loading = false
+            }
+          }
+        }
+      })
+    },
+    getCommentList(ksid, photoId) {
+      return new Promise(function(resolve) {
+        getCommentList({ ksid: ksid, photoId: photoId, pcursor: null }).then(res => {
+          if (res.code == 0) {
+            resolve(res.result.data.shortVideoCommentList)
+          }
+        })
+      })
+    },
+    sleep(d) {
+      return new Promise(resolve => setTimeout(resolve, d))
+    },
+    remove(allItem, item, index) {
+      console.log(allItem, item)
+      allItem.commentList.splice(index, 1)
+      //   String ksid,String photoId,Long commentId
+      commentDelete({ ksid: this.ksid, photoId: allItem.photoId, commentId: item.commentId }).then(res => {
+        console.log(res)
+      })
+    },
+    getScrollTop: function() {
+      var scrollTop = 0,
+        bodyScrollTop = 0,
+        documentScrollTop = 0
+      if (document.body) {
+        bodyScrollTop = document.body.scrollTop
+      }
+      if (document.documentElement) {
+        documentScrollTop = document.documentElement.scrollTop
+      }
+      scrollTop = bodyScrollTop - documentScrollTop > 0 ? bodyScrollTop : documentScrollTop
+      return scrollTop
+    },
+    //浏览器视口的高度
+    getScrollHeight: function() {
+      var scrollHeight = 0,
+        bodyScrollHeight = 0,
+        documentScrollHeight = 0
+      if (document.body) {
+        bodyScrollHeight = document.body.scrollHeight
+      }
+      if (document.documentElement) {
+        documentScrollHeight = document.documentElement.scrollHeight
+      }
+      scrollHeight = bodyScrollHeight - documentScrollHeight > 0 ? bodyScrollHeight : documentScrollHeight
+      return scrollHeight
+    },
+    //浏览器视口的高度
+    getWindowHeight: function() {
+      var windowHeight = 0
+      if (document.compatMode == 'CSS1Compat') {
+        windowHeight = document.documentElement.clientHeight
+      } else {
+        windowHeight = document.body.clientHeight
+      }
+      return windowHeight
+    },
+    scrollChange: function() {
+      var _this = this,
+        currentPage = { page: this.page }
+      this.scollY = this.getScrollTop() + this.getWindowHeight() - this.getScrollHeight()
+      // 把下拉刷新置为false,防止多次请求
+      if (this.scollY >= -100) {
+        if (this.page > this.pageTotal) {
+          return false
+        }
+        if (!this.pullRefreshss) {
+          return false
+        }
+        _this.getVideoList(_this.ksid, _this.pcursor)
+        // _this.getTest()
+        _this.pullRefreshss = false
+      } else {
+        // 其他时候把下拉刷新置为true
+        _this.pullRefreshss = true
+      }
+    },
+    addComment(item, index) {
+      console.log(item)
+      var params = {
+        ksid: this.ksid,
+        photoId: item.photoId,
+        content: item.keyword,
+        replyToCommentId: this.replyToCommentId,
+        repltTo: this.repltTo
+      }
+      commentAdd(params).then(res => {
+        console.log(res)
+      })
+    },
+    backAdd(item, items) {
+      console.log(item, items)
+      // authorId  commentId
+      item.keyword = '回复' + items.authorName
+      this.repltTo = items.authorId
+      this.replyToCommentId = items.commentId
+    }
+  },
+  watch: {},
+  distoryed() {
+    clearInterval(interval)
+    window.clearInterval(objTimer)
+  },
+  mounted: function() {
+    this.$nextTick(() => {
+      var that = this
+      this.getUserList()
+      //   getAccountReport().then(res => {
+      //     console.log(res)
+      //   })
+      objTimer = window.setInterval(() => {
+        if (that.showCode) {
+          setTimeout(function() {
+            getLoginStatus({ requestId: that.requestId }).then(res => {
+              if (res.code == 0) {
+                if (res.result) {
+                  if (res.result.status == 1) {
+                    that.showShare = false
+                  } else {
+                    that.showShare = true
+                    that.showSpan = true
+                    that.showTitle = res.result.msg
+                    if (res.result.status == 3) {
+                      that.showSpan = false
+                      that.showCode = false
+                      that.getUserList()
+                    } else if (res.result.status == 2) {
+                      that.showSpan = false
+                    }
+                  }
+                }
+              }
+            })
+          }, 0)
+        }
+      }, 1000)
+      window.onscroll = function() {
+        if (that.ksid) {
+          if (that.pcursor != 'no_more') {
+            that.scrollChange()
+          }
+        }
+      }
+    })
+  }
+}
+</script>
+>>>>>>> df88bbc5475db8bc44f17da24402460474416155