502 lines
14 KiB
Vue
502 lines
14 KiB
Vue
<template>
|
||
<view>
|
||
<view class="body">
|
||
<view class="list">
|
||
<view class="list_content" v-for="(item, index) in dynamicFeedList" :key="index">
|
||
<view class="list_head">
|
||
<view class="list_module fa">
|
||
<image :src="item.user.avatar ? item.user.avatar : '/static/images/avatar.png'"
|
||
mode="widthFix"></image>
|
||
<view class="list_title">
|
||
<view class="list_name">{{ item.user.nickname ? item.user.nickname : '' }}</view>
|
||
<view class="list_time fa">{{ item.created_at ? item.created_at : '' }}</view>
|
||
</view>
|
||
</view>
|
||
<view class="list_substance">{{ item.content ? item.content : '' }}</view>
|
||
<video class="list_video" :src="item.video_url ? item.video_url : ''" v-if="item.video_url"
|
||
controls></video>
|
||
<view class="list_item fa">
|
||
<view class="list_table fa" @click="likeClick(item, index)">
|
||
<image class="list_icon"
|
||
:src="item.liked ? '/static/images/dynamics_likeA.png' : '/static/images/dynamics_like.png'"
|
||
mode="widthFix"></image>
|
||
<view class="list_text">点赞</view>
|
||
</view>
|
||
<view class="list_table fa" @click="commentClick(item, index)">
|
||
<image class="list_icon" src="/static/images/dynamics_comment.png" mode="widthFix">
|
||
</image>
|
||
<view class="list_text">评论</view>
|
||
</view>
|
||
<view class="list_table fa" v-if="item.like_count">
|
||
<image class="list_icon" src="/static/images/dynamics_likeA.png" mode="widthFix">
|
||
</image>
|
||
<view class="list_people fa">
|
||
<view class="avatar-stack">
|
||
<image v-for="(like, index) in item.likes.slice(0, 5)" :key="index"
|
||
:src="like.user.avatar" mode="widthFix" class="stacked-avatar"
|
||
:style="{ 'margin-left': index > 0 ? '-18rpx' : '0' }"></image>
|
||
<text v-if="item.likes.length > 5" class="more-avatars">...</text>
|
||
</view>
|
||
</view>
|
||
<view class="list_number" v-if="item.like_count">{{ item.like_count ? item.like_count :
|
||
0 }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="list_detail" v-if="item.comments.length > 0">
|
||
<view class="list_comment">
|
||
<view class="list_criticize fa" v-for="(itemA, indexA) in item.comments" :key="indexA">
|
||
<image :src="itemA.user.avatar ? itemA.user.avatar : '/static/images/avatar.png'"
|
||
mode="widthFix"></image>
|
||
<view class="list_remark ">
|
||
<view class="list_dynamicsName fa">{{ itemA.user.nickname ? itemA.user.nickname : ''
|
||
}}: <text>{{ itemA.content ? itemA.content : '' }}</text></view>
|
||
<view class="list_dynamicsTime fa">{{ itemA.created_at ? itemA.created_at : '' }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="list_more faj" @click="showClick(item, index)">展示更多评论<image
|
||
src="/static/images/dynamics_more.png" mode="widthFix">
|
||
</image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="comment faj" v-if="commentStats">
|
||
<view class="comment_content">
|
||
<image src="/static/images/close.png" mode="widthFix" @click="closeClick()"></image>
|
||
<view class="comment_detail fa">
|
||
<textarea class="f1" v-model="form.commentContent" placeholder="请输入您的评论"
|
||
placeholder-class="comment_textarea" />
|
||
</view>
|
||
<view class="comment_sure faj"><text class="faj" @click="submitComment()">发表</text></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
DynamicFeed,
|
||
DynamicLike,
|
||
DynamicComment,
|
||
DynamicComments,
|
||
GetUserBasic
|
||
} from '@/utils/api.js'
|
||
export default {
|
||
data() {
|
||
return {
|
||
currentItem: null, // 添加这个属性
|
||
form: {
|
||
page: 1,
|
||
size: 10,
|
||
commentId: '',
|
||
commentContent: '',
|
||
commentIndex: ''
|
||
},
|
||
userInfo: '',
|
||
commentStats: false,
|
||
dynamicFeedList: [],
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.getUserBasic()
|
||
this.dynamicFeed()
|
||
},
|
||
onReachBottom() {
|
||
this.form.page++
|
||
this.dynamicFeed()
|
||
},
|
||
methods: {
|
||
getUserBasic() {
|
||
GetUserBasic().then(res => {
|
||
this.userInfo = res.data;
|
||
})
|
||
},
|
||
dynamicFeed() {
|
||
DynamicFeed(this.form).then(res => {
|
||
this.dynamicFeedList.push(...res.data.items)
|
||
for (let i = 0; i < this.dynamicFeedList.length; i++) {
|
||
this.dynamicFeedList[i].page = 1
|
||
}
|
||
})
|
||
},
|
||
dynamicLike() {
|
||
DynamicLike(this.likeform.id, {
|
||
action: this.likeform.action
|
||
}).then(res => {
|
||
if (res.code == 1) {
|
||
uni.showToast({
|
||
title: '点赞成功',
|
||
icon: 'none',
|
||
position: 'top'
|
||
})
|
||
this.form.page = 1
|
||
this.dynamicFeedList = []
|
||
this.dynamicFeed()
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none',
|
||
position: 'top'
|
||
})
|
||
}
|
||
})
|
||
},
|
||
commentClick(item, index) {
|
||
this.commentStats = true
|
||
this.form.commentId = item.id
|
||
this.form.commentIndex = index
|
||
},
|
||
likeClick(item, index) {
|
||
let action = ''
|
||
if (item.liked) {
|
||
action = 'unlike';
|
||
} else {
|
||
action = 'like';
|
||
}
|
||
DynamicLike(item.id, {
|
||
action: action
|
||
}).then(res => {
|
||
if (res.code == 1) {
|
||
uni.showToast({
|
||
title: '操作成功',
|
||
icon: 'none',
|
||
position: 'top'
|
||
})
|
||
|
||
if (!item.liked) {
|
||
this.dynamicFeedList[index].likes.push({
|
||
user: {
|
||
id: this.userInfo.id,
|
||
avatar: this.userInfo.avatar,
|
||
nickname: this.userInfo.nickname
|
||
}
|
||
})
|
||
this.dynamicFeedList[index].like_count++
|
||
} else {
|
||
for (let i = 0; i < this.dynamicFeedList[index].likes.length; i++) {
|
||
if (this.dynamicFeedList[index].likes[i].user.id == this.userInfo.id) {
|
||
this.dynamicFeedList[index].likes.splice(i, 1)
|
||
}
|
||
}
|
||
this.dynamicFeedList[index].like_count--
|
||
}
|
||
|
||
this.dynamicFeedList[index].liked = !item.liked
|
||
}
|
||
})
|
||
},
|
||
submitComment() {
|
||
if (this.form.commentContent == "") {
|
||
uni.showToast({
|
||
title: '请输入评论内容',
|
||
icon: 'none'
|
||
})
|
||
} else {
|
||
DynamicComment(this.form.commentId, {
|
||
content: this.form.commentContent
|
||
}).then(res => {
|
||
if (res.code == 1) {
|
||
uni.showToast({
|
||
title: '操作成功',
|
||
icon: 'none',
|
||
position: 'top'
|
||
})
|
||
let item = {
|
||
content: this.form.commentContent,
|
||
created_at: this.getCurrentDateTime(),
|
||
user: {
|
||
avatar: this.userInfo.avatar,
|
||
nickname: this.userInfo.nickname
|
||
}
|
||
}
|
||
this.dynamicFeedList[this.form.commentIndex].comments.unshift(item)
|
||
this.closeClick()
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none',
|
||
position: 'top'
|
||
})
|
||
}
|
||
})
|
||
}
|
||
},
|
||
getCurrentDateTime() {
|
||
const now = new Date();
|
||
const year = now.getFullYear();
|
||
const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要+1
|
||
const day = String(now.getDate()).padStart(2, '0');
|
||
const hours = String(now.getHours()).padStart(2, '0');
|
||
const minutes = String(now.getMinutes()).padStart(2, '0');
|
||
const seconds = String(now.getSeconds()).padStart(2, '0');
|
||
|
||
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
||
},
|
||
showClick(item, index) {
|
||
++item.page
|
||
DynamicComments(item.id, {
|
||
page: item.page,
|
||
size: 5
|
||
}).then(res => {
|
||
this.dynamicFeedList[index].comments.push(...res.data.comments);
|
||
console.log(this.dynamicFeedList)
|
||
})
|
||
},
|
||
closeClick() {
|
||
this.commentStats = false
|
||
this.form.commentContent = ''
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
<style>
|
||
.body {
|
||
position: relative;
|
||
padding: 20rpx 40rpx;
|
||
}
|
||
|
||
.list {
|
||
position: relative;
|
||
}
|
||
|
||
.list_content {
|
||
position: relative;
|
||
margin: 0 0 20rpx 0;
|
||
}
|
||
|
||
.list_head {
|
||
position: relative;
|
||
padding: 0 20rpx;
|
||
}
|
||
|
||
.list_module {
|
||
position: relative;
|
||
}
|
||
|
||
.list_module image {
|
||
width: 88rpx;
|
||
height: 88rpx;
|
||
display: block;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.list_title {
|
||
position: relative;
|
||
margin: 0 0 0 30rpx;
|
||
}
|
||
|
||
.list_name {
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
line-height: 50rpx;
|
||
}
|
||
|
||
.list_time {
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #9E9E9E;
|
||
line-height: 50rpx;
|
||
}
|
||
|
||
.list_time text {
|
||
margin: 0 0 0 20rpx;
|
||
}
|
||
|
||
.list_substance {
|
||
position: relative;
|
||
margin: 20rpx 0 0 0;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #222222;
|
||
line-height: 50rpx;
|
||
}
|
||
|
||
.list_video {
|
||
position: relative;
|
||
margin: 14rpx 0 0 0;
|
||
width: 200rpx;
|
||
height: 240rpx;
|
||
}
|
||
|
||
.list_item {
|
||
position: relative;
|
||
margin: 35rpx 0 0 0;
|
||
}
|
||
|
||
.list_table {
|
||
position: relative;
|
||
margin: 0 25rpx 0 0;
|
||
}
|
||
|
||
.list_icon {
|
||
margin: 0 6rpx 0 0;
|
||
width: 36rpx;
|
||
height: 40rpx;
|
||
}
|
||
|
||
.list_text {
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #9E9E9E;
|
||
line-height: 50rpx;
|
||
}
|
||
|
||
.list_people {
|
||
position: relative;
|
||
}
|
||
|
||
.list_people image {
|
||
margin: 0 6rpx 0 0;
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.list_number {
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #9E9E9E;
|
||
line-height: 50rpx;
|
||
}
|
||
|
||
.list_detail {
|
||
position: relative;
|
||
margin: 30rpx 0 0 0;
|
||
}
|
||
|
||
.list_comment {
|
||
position: relative;
|
||
}
|
||
|
||
.list_criticize {
|
||
position: relative;
|
||
margin: 0 0 10rpx 0;
|
||
padding: 12rpx 20rpx;
|
||
background: #F6F6F6;
|
||
border-radius: 4rpx;
|
||
}
|
||
|
||
.list_criticize image {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
display: block;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.list_remark {
|
||
position: relative;
|
||
margin: 0 0 0 30rpx;
|
||
}
|
||
|
||
.list_dynamicsName {
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #999999;
|
||
line-height: 50rpx;
|
||
}
|
||
|
||
.list_dynamicsName text {
|
||
margin: 0 0 0 20rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
.list_dynamicsTime {
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #9E9E9E;
|
||
line-height: 50rpx;
|
||
}
|
||
|
||
.list_dynamicsTime text {
|
||
margin: 0 0 0 20rpx;
|
||
}
|
||
|
||
.list_more {
|
||
position: relative;
|
||
margin: 20rpx 0 0 0;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #9E9E9E;
|
||
line-height: 50rpx;
|
||
}
|
||
|
||
.list_more image {
|
||
margin: 0 0 0 12rpx;
|
||
width: 20rpx;
|
||
height: 20rpx;
|
||
}
|
||
|
||
.comment {
|
||
position: fixed;
|
||
width: 100%;
|
||
height: 100%;
|
||
left: 0;
|
||
top: 0;
|
||
padding: 0 40rpx;
|
||
box-sizing: border-box;
|
||
background: rgba(0, 0, 0, 0.2);
|
||
z-index: 2;
|
||
}
|
||
|
||
.comment_content {
|
||
position: relative;
|
||
background: #FFFFFF;
|
||
border-radius: 20rpx;
|
||
padding: 60rpx 60rpx 30rpx 60rpx;
|
||
}
|
||
|
||
.comment_content image {
|
||
position: absolute;
|
||
right: 20rpx;
|
||
top: 20rpx;
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
}
|
||
|
||
.comment_title {
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #161616;
|
||
line-height: 38rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.comment_detail {
|
||
position: relative;
|
||
margin: 20rpx 0 0 0;
|
||
}
|
||
|
||
.comment_detail textarea {
|
||
width: 500rpx;
|
||
padding: 15rpx;
|
||
font-weight: 400;
|
||
font-size: 32rpx;
|
||
color: #161616;
|
||
line-height: 50rpx;
|
||
border-radius: 12rpx;
|
||
border: 1px solid #989898;
|
||
}
|
||
|
||
.comment_textarea {
|
||
color: #9c9c9c;
|
||
}
|
||
|
||
.comment_sure {
|
||
margin: 20rpx 0 0 0;
|
||
}
|
||
|
||
.comment_sure text {
|
||
padding: 15rpx 60rpx;
|
||
font-weight: 400;
|
||
font-size: 26rpx;
|
||
color: #FFFFFF;
|
||
line-height: 50rpx;
|
||
background: linear-gradient(135deg, #9F47FF 0%, #0053FA 100%);
|
||
border-radius: 10rpx;
|
||
}
|
||
</style> |