|
@@ -1,4 +1,3 @@
|
|
|
-<<<<<<< HEAD
|
|
|
<style>
|
|
|
@media (min-width: 1024px) {
|
|
|
.checkbox_item_container {
|
|
@@ -123,9 +122,6 @@
|
|
|
/>
|
|
|
</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>
|
|
@@ -525,433 +521,3 @@ 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
|