|
@@ -1,399 +1,428 @@
|
|
|
-<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;
|
|
|
-}
|
|
|
-</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" />
|
|
|
- </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: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>
|
|
|
- <p
|
|
|
- slot="content"
|
|
|
- style="display: flex;justify-content: space-between;white-space: nowrap;"
|
|
|
- >
|
|
|
- {{items.content}}
|
|
|
- <span @click="remove(item,items,idx)" style="margin-right:5px">删除</span>
|
|
|
- </p>
|
|
|
- </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,
|
|
|
- getAccountReport
|
|
|
-} 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
|
|
|
- }
|
|
|
- },
|
|
|
- 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
|
|
|
- }
|
|
|
- })
|
|
|
- this.pcursor = res.result.data.publicFeeds.pcursor
|
|
|
- this.dataShow.push(...data)
|
|
|
- var i = 0
|
|
|
- interval = setInterval(() => {
|
|
|
- if (i <= that.dataShow.length) {
|
|
|
- ;(function(a) {
|
|
|
- setTimeout(function() {
|
|
|
- that.getCommentList(ksid, that.dataShow[a].photoId).then(dataOne => {
|
|
|
- that.dataShow[a].loading = false
|
|
|
- if (dataOne && that.dataShow[a]) {
|
|
|
- that.dataShow[a].commentList = dataOne.commentList
|
|
|
- } else {
|
|
|
- that.dataShow[a].commentList = []
|
|
|
- }
|
|
|
- })
|
|
|
- }, 0)
|
|
|
- if (that.dataShow.length == 0) {
|
|
|
- clearInterval(interval)
|
|
|
- i = 0
|
|
|
- } else {
|
|
|
- i++
|
|
|
- }
|
|
|
- })(i)
|
|
|
- } else {
|
|
|
- clearInterval(interval)
|
|
|
- }
|
|
|
- }, 10000)
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- 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
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- 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>
|
|
|
+<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>
|