|
@@ -48,6 +48,12 @@
|
|
|
.ant-comment-content-detail {
|
|
|
word-wrap: break-word;
|
|
|
word-break: normal;
|
|
|
+
|
|
|
+}
|
|
|
+.ant-comment-content-detail p {
|
|
|
+ word-wrap: break-word;
|
|
|
+ word-break: normal;
|
|
|
+ white-space: initial !important;
|
|
|
}
|
|
|
.vm-video-list .ant-card-actions li span {
|
|
|
width: 90%;
|
|
@@ -61,6 +67,9 @@
|
|
|
.ant-comment-nested {
|
|
|
margin-left: 10px;
|
|
|
}
|
|
|
+.ant-comment-content-author-name {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
</style>
|
|
|
<template>
|
|
|
<div class="vm-video-list">
|
|
@@ -121,6 +130,7 @@
|
|
|
style="height:300px;width:auto;position:absolute;z-index:10;top:0"
|
|
|
/>
|
|
|
</div>
|
|
|
+
|
|
|
<template class="ant-card-actions" slot="actions">
|
|
|
<a-input placeholder="请输入评论内容" v-model="item.keyword" style="width:100%">
|
|
|
<div slot="addonAfter" @click="addComment(item,index)">评论</div>
|
|
@@ -137,58 +147,81 @@
|
|
|
style="height:200px;overflow-y:auto;"
|
|
|
class="scrollBox"
|
|
|
@scroll="scrollGet(item,index)"
|
|
|
- v-show="item.commentList.length>0"
|
|
|
>
|
|
|
- <a-comment v-for="(items,idx) of item.commentList" :key="idx">
|
|
|
- <span
|
|
|
- slot="actions"
|
|
|
- v-if="items.subComments.length>0"
|
|
|
- @click="items.show=!items.show"
|
|
|
- >更多评论</span>
|
|
|
- <a slot="author">
|
|
|
- <input type="checkbox" />
|
|
|
- {{items.authorName}}
|
|
|
- </a>
|
|
|
- <div slot="content" style="display: flex;justify-content: space-between;">
|
|
|
- <p style="width:75%">{{items.content}}</p>
|
|
|
- <div style="white-space: nowrap;">
|
|
|
- <span style="margin-right:5px" @click="backAdd(item,items)">回复</span>
|
|
|
- <span @click="remove(item,items,index)" style="margin-right:5px">删除</span>
|
|
|
+ <div style="margin-bottom:15px;height:50px">
|
|
|
+ {{item.caption}}
|
|
|
+ <br />
|
|
|
+ <a-icon type="heart" />
|
|
|
+ {{item.likeCount}}
|
|
|
+ <a-icon type="highlight" style="margin-left:10px" />
|
|
|
+ {{item.commentCount}}
|
|
|
+ <a-icon type="play-circle" style="margin-left:10px" />
|
|
|
+ {{item.viewCount}}
|
|
|
+ </div>
|
|
|
+ <div v-show="item.commentList.length>0">
|
|
|
+ <a-comment v-for="(items,idx) of item.commentList" :key="idx">
|
|
|
+ <span
|
|
|
+ slot="actions"
|
|
|
+ v-if="items.subComments.length>0"
|
|
|
+ @click="items.show=!items.show"
|
|
|
+ style="color:blue"
|
|
|
+ >更多评论</span>
|
|
|
+ <p slot="author">
|
|
|
+ {{items.authorName}}
|
|
|
+ <span style="float:right">{{items.timestamp|formatDate}}</span>
|
|
|
+ </p>
|
|
|
+ <div slot="content" style="display: flex;justify-content: space-between;">
|
|
|
+ <p style="width:75%">
|
|
|
+ <!-- <input type="checkbox" style="margin-right:5px" name id /> -->
|
|
|
+ {{items.content}}
|
|
|
+ </p>
|
|
|
+ <div style="white-space: nowrap;">
|
|
|
+ <span style="margin-right:5px" @click="backAdd(item,items)">回复</span>
|
|
|
+ <span @click="remove(item,items,index)" style="margin-right:5px">删除</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div v-if="items.subComments.length>0" v-show="items.show">
|
|
|
- <a-comment v-for="(itemSub,idxSub) of items.subComments" :key="idxSub">
|
|
|
- <a slot="author">{{itemSub.authorName}}</a>
|
|
|
- <div slot="content" style="display: flex;justify-content: space-between;">
|
|
|
- <p style="width:75%">{{itemSub.content}}</p>
|
|
|
- <div>
|
|
|
- <span style="margin-right:5px" @click="backAdd(item,items)">回复</span>
|
|
|
- <span @click="remove(item,itemSub,index)" style="margin-right:5px">删除</span>
|
|
|
+ <div v-if="items.subComments.length>0" v-show="items.show">
|
|
|
+ <a-comment v-for="(itemSub,idxSub) of items.subComments" :key="idxSub">
|
|
|
+ <a slot="author">{{itemSub.authorName}}</a>
|
|
|
+ <div slot="content" style="display: flex;justify-content: space-between;">
|
|
|
+ <p style="width:75%">{{itemSub.content}}</p>
|
|
|
+ <div>
|
|
|
+ <span style="margin-right:5px" @click="backAdd(item,items)">回复</span>
|
|
|
+ <span @click="remove(item,itemSub,index)" style="margin-right:5px">删除</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </a-comment>
|
|
|
- </div>
|
|
|
- </a-comment>
|
|
|
+ </a-comment>
|
|
|
+ </div>
|
|
|
+ </a-comment>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ v-show="item.commentList.length<=0"
|
|
|
+ style="height:130px;display:flex;justify-content:center;align-items:center"
|
|
|
+ >暂无评论</div>
|
|
|
</div>
|
|
|
- <div
|
|
|
- v-show="item.commentList.length<=0"
|
|
|
- style="height:200px;display:flex;justify-content:center;align-items:center"
|
|
|
- >暂无评论</div>
|
|
|
</div>
|
|
|
</a-card>
|
|
|
</a-col>
|
|
|
</a-row>
|
|
|
+ <div
|
|
|
+ style="position:fixed;width:50px;height:100px;right:0;bottom:100px;cursor: pointer;"
|
|
|
+ v-show="scollTop>300"
|
|
|
+ @click="backTop"
|
|
|
+ >
|
|
|
+ <a-icon type="arrow-up" style="font-size:30px" />
|
|
|
+ </div>
|
|
|
<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" />
|
|
|
+ <img :src="qrcode" alt style="width:200px;height:200px;border:1px solid #f2f2f2" />
|
|
|
<div
|
|
|
- style="width:130px;height:130px;position:absolute;background:rgba(255,255,255,.9);text-align:center;padding:30px 5px"
|
|
|
+ style="width:200px;height:200px;position:absolute;background:rgba(255,255,255,.9);text-align:center;padding:60px 15px"
|
|
|
v-show="showShare"
|
|
|
>
|
|
|
- <p>
|
|
|
- {{showTitle}}
|
|
|
- <span @click="addUser" style="color:red" v-show="showSpan">刷新</span>
|
|
|
- </p>
|
|
|
+ <div style="margin-bottom:5px">
|
|
|
+ <img :src="url" alt />
|
|
|
+ </div>
|
|
|
+ <p>{{showTitle}}</p>
|
|
|
+ <span @click="addUser" style="color:red;cursor: pointer;" v-show="showSpan">刷新</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</a-modal>
|
|
@@ -201,6 +234,7 @@ import ACol from 'ant-design-vue/es/grid/Col'
|
|
|
import axios from 'axios'
|
|
|
var interval, objTimer
|
|
|
var a = 0
|
|
|
+
|
|
|
import {
|
|
|
getLoginQr,
|
|
|
getUserList,
|
|
@@ -236,17 +270,36 @@ export default {
|
|
|
ksid: null,
|
|
|
pullRefreshss: true, // 代表可以进行下拉加载,false代表不能
|
|
|
scollY: null, // 离底部距离有多少
|
|
|
+ scollTop: null,
|
|
|
pcursor: null,
|
|
|
repltTo: 0,
|
|
|
replyToCommentId: 0,
|
|
|
- length: 0
|
|
|
+ length: 0,
|
|
|
+ url: 'http://static.yximgs.com/s1/i/qr-confirm.f32a3c5.svg'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ filters: {
|
|
|
+ formatDate: function(value) {
|
|
|
+ let date = new Date(value)
|
|
|
+ let y = date.getFullYear()
|
|
|
+ let MM = date.getMonth() + 1
|
|
|
+ MM = MM < 10 ? '0' + MM : MM
|
|
|
+ let d = date.getDate()
|
|
|
+ d = d < 10 ? '0' + d : d
|
|
|
+ let h = date.getHours()
|
|
|
+ h = h < 10 ? '0' + h : h
|
|
|
+ let m = date.getMinutes()
|
|
|
+ m = m < 10 ? '0' + m : m
|
|
|
+ let s = date.getSeconds()
|
|
|
+ s = s < 10 ? '0' + s : s
|
|
|
+ return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
scrollGet(item, i, e) {
|
|
|
var b = document.getElementsByClassName('scrollBox')[i]
|
|
|
if (b.scrollHeight - b.scrollTop < 250 && item.pcursor != 'no_more') {
|
|
|
- if (b.scrollHeight - b.scrollTop > 240) {
|
|
|
+ if (b.scrollHeight - b.scrollTop > 235) {
|
|
|
this.getCommentList(this.ksid, this.dataShow[i].photoId, item.pcursor).then(dataOne => {
|
|
|
this.dataShow[i].loading = false
|
|
|
if (dataOne && this.dataShow[i]) {
|
|
@@ -316,6 +369,7 @@ export default {
|
|
|
this.dataShow.push(...data)
|
|
|
var i = 0
|
|
|
for (let i = 0; i < that.dataShow.length; i++) {
|
|
|
+ that.dataShow[i].loading = false
|
|
|
if (that.dataShow[i].commentCount > 0) {
|
|
|
that.getCommentList(ksid, that.dataShow[i].photoId, null).then(dataOne => {
|
|
|
that.dataShow[i].loading = false
|
|
@@ -413,7 +467,7 @@ export default {
|
|
|
scrollChange: function() {
|
|
|
var _this = this,
|
|
|
currentPage = { page: this.page }
|
|
|
- this.scollY = this.getScrollTop() + this.getWindowHeight() - this.getScrollHeight()
|
|
|
+ _this.scollY = this.getScrollTop() + this.getWindowHeight() - this.getScrollHeight()
|
|
|
// 把下拉刷新置为false,防止多次请求
|
|
|
if (this.scollY >= -100) {
|
|
|
if (this.page > this.pageTotal) {
|
|
@@ -430,6 +484,10 @@ export default {
|
|
|
_this.pullRefreshss = true
|
|
|
}
|
|
|
},
|
|
|
+ backTop() {
|
|
|
+ document.body.scrollTop = 0
|
|
|
+ document.documentElement.scrollTop = 0
|
|
|
+ },
|
|
|
addComment(item, index) {
|
|
|
console.log(item)
|
|
|
var word = item.keyword.substring(this.length)
|
|
@@ -491,16 +549,20 @@ export default {
|
|
|
if (res.code == 0) {
|
|
|
if (res.result) {
|
|
|
if (res.result.status == 1) {
|
|
|
+ that.url = 'http://static.yximgs.com/s1/i/qr-confirm.f32a3c5.svg'
|
|
|
that.showShare = false
|
|
|
} else {
|
|
|
+ that.url = 'http://static.yximgs.com/s1/i/qr-timeout.36ec907.svg'
|
|
|
that.showShare = true
|
|
|
that.showSpan = true
|
|
|
that.showTitle = res.result.msg
|
|
|
if (res.result.status == 3) {
|
|
|
+ that.url = 'http://static.yximgs.com/s1/i/qr-confirm.f32a3c5.svg'
|
|
|
that.showSpan = false
|
|
|
that.showCode = false
|
|
|
that.getUserList()
|
|
|
} else if (res.result.status == 2) {
|
|
|
+ that.url = 'http://static.yximgs.com/s1/i/qr-confirm.f32a3c5.svg'
|
|
|
that.showSpan = false
|
|
|
}
|
|
|
}
|
|
@@ -511,6 +573,7 @@ export default {
|
|
|
}
|
|
|
}, 1000)
|
|
|
window.onscroll = function() {
|
|
|
+ that.scollTop = that.getScrollTop()
|
|
|
if (that.ksid) {
|
|
|
if (that.pcursor != 'no_more') {
|
|
|
that.scrollChange()
|