289 lines
7.7 KiB
Vue
289 lines
7.7 KiB
Vue
<script setup>
|
|
import { reactive, ref } from 'vue'
|
|
import { navigateTo } from '@/utils/router'
|
|
import {
|
|
addUserMomentsComment,
|
|
deleteUserMoments,
|
|
likeUserMoments,
|
|
getUserMomentsList
|
|
} from '@/api/my-index'
|
|
import { onLoad, onShow } from '@dcloudio/uni-app'
|
|
import { useAuthUser } from '@/composables/useAuthUser'
|
|
import { formatRelativeTime } from '@/utils/dateUtils'
|
|
import { useUI } from '@/utils/use-ui'
|
|
|
|
const { userInfo } = useAuthUser()
|
|
const { showDialog, showToast } = useUI()
|
|
|
|
const placeholderStyle = `font-family: PingFang SC, PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
color: #999999;
|
|
line-height: 40rpx;
|
|
font-style: normal;
|
|
text-transform: none;`
|
|
const MAX_SCROLL = 446
|
|
|
|
const paging = ref(null)
|
|
const listLoading = ref(true)
|
|
const cbNavBar = ref({})
|
|
const dataList = ref([])
|
|
const topIcon = reactive({
|
|
leftColor: '#ffffff',
|
|
rightColor: '#ffffff'
|
|
})
|
|
const formData = reactive({
|
|
type: '',
|
|
pageNum: 1,
|
|
pageSize: 15
|
|
})
|
|
const contentData = ref('')
|
|
const inputId = ref('')
|
|
const isType = ref('')
|
|
|
|
const onScroll = e => {
|
|
cbNavBar.value?.updateScroll(e.detail.scrollTop)
|
|
if (e.detail.scrollTop > MAX_SCROLL - 220) {
|
|
topIcon.leftColor = '#000'
|
|
topIcon.rightColor = '#000'
|
|
} else {
|
|
topIcon.leftColor = '#ffffff'
|
|
topIcon.rightColor = '#ffffff'
|
|
}
|
|
}
|
|
|
|
const getData = async (pageNum, pageSize) => {
|
|
try {
|
|
const res = await getUserMomentsList({
|
|
pageNum,
|
|
pageSize,
|
|
targetUserId: isType.value == 1 ? userInfo.value.userId : ''
|
|
})
|
|
const list = res.rows.map(item => {
|
|
return {
|
|
...item,
|
|
commentList: item.comments
|
|
}
|
|
})
|
|
paging.value.complete(list)
|
|
listLoading.value = false
|
|
} catch (error) {
|
|
paging.value.complete(false)
|
|
}
|
|
}
|
|
|
|
const onLike = async item => {
|
|
const res = await likeUserMoments(item.id)
|
|
if (res.data) {
|
|
item.likeCount += 1
|
|
} else {
|
|
item.likeCount -= 1
|
|
}
|
|
}
|
|
|
|
/** 点击查看大图 */
|
|
const onImage = (urls, current = 0) => {
|
|
uni.previewImage({
|
|
urls, // 图片路径数组（本地或网络）
|
|
current // 当前显示的图片（可选，默认为第一张）
|
|
})
|
|
closeComment()
|
|
}
|
|
|
|
/** 关闭评论框 */
|
|
const closeComment = () => {
|
|
contentData.value = ''
|
|
inputId.value = ''
|
|
}
|
|
|
|
/** 发布评论 */
|
|
const onComment = async item => {
|
|
console.log('发布评论')
|
|
const data = {
|
|
content: contentData.value,
|
|
id: item.id,
|
|
momentId: item.id
|
|
}
|
|
const res = await addUserMomentsComment(data)
|
|
item.commentList.push(res.data)
|
|
closeComment()
|
|
}
|
|
|
|
/** 删除动态 */
|
|
const onDeleteItem = async id => {
|
|
const res = await showDialog('提示', '确定要删除吗？')
|
|
if (!res) return
|
|
await deleteUserMoments(id)
|
|
await showToast('删除成功', 'success')
|
|
dataList.value = dataList.value.filter(item => item.id !== id)
|
|
}
|
|
|
|
onShow(() => {
|
|
getData(1, formData.pageSize)
|
|
})
|
|
|
|
onLoad(async e => {
|
|
isType.value = e?.type || ''
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<z-paging
|
|
ref="paging"
|
|
v-model="dataList"
|
|
:default-page-no="formData.pageNum"
|
|
:default-page-size="formData.pageSize"
|
|
safe-area-inset-bottom
|
|
use-safe-area-placeholder
|
|
:show-loading-more-no-more-view="false"
|
|
:auto="false"
|
|
@query="getData"
|
|
@scroll="onScroll"
|
|
>
|
|
<template #top>
|
|
<nav-bar
|
|
ref="cbNavBar"
|
|
isTopBg
|
|
target-color="#f9f9f9"
|
|
:max-scroll="MAX_SCROLL"
|
|
>
|
|
<template #back>
|
|
<uni-icons
|
|
:color="topIcon.leftColor"
|
|
type="left"
|
|
size="24"
|
|
></uni-icons>
|
|
</template>
|
|
<template #right>
|
|
<uni-icons
|
|
:color="topIcon.rightColor"
|
|
type="camera"
|
|
size="24"
|
|
@click="navigateTo('/pages/discover/dynamic/release')"
|
|
></uni-icons>
|
|
</template>
|
|
</nav-bar>
|
|
</template>
|
|
<view class="top-bg-img">
|
|
<image
|
|
:src="userInfo?.avatar"
|
|
lazy-load
|
|
mode="aspectFill"
|
|
class="img"
|
|
@click="onImage([userInfo?.avatar])"
|
|
></image>
|
|
<!-- 用户信息 -->
|
|
<view class="user-info">
|
|
<text class="name">{{ userInfo?.userName }}</text>
|
|
<image
|
|
v-if="userInfo?.avatar"
|
|
:src="userInfo?.avatar"
|
|
lazy-load
|
|
mode="aspectFill"
|
|
class="avatar"
|
|
@click="onImage([userInfo?.avatar])"
|
|
></image>
|
|
<uni-icons v-else type="contact-filled" size="160rpx"></uni-icons>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 动态列表 -->
|
|
<view v-if="!listLoading" class="dynamic-list" @click="closeComment">
|
|
<view v-for="item in dataList" :key="item.id" class="list">
|
|
<image
|
|
v-if="item.avatar"
|
|
:src="item.avatar"
|
|
lazy-load
|
|
mode="aspectFill"
|
|
class="avatar"
|
|
></image>
|
|
<view v-else class="avatar">
|
|
<uni-icons
|
|
type="contact-filled"
|
|
class="avatar-icon"
|
|
></uni-icons>
|
|
</view>
|
|
<view class="content">
|
|
<text class="name">{{ item.userName }}</text>
|
|
<text class="text">{{ item.content }}</text>
|
|
<view
|
|
v-if="item.images.length > 0"
|
|
:class="item.images.length === 1 ? 'one-img' : 'img-list'"
|
|
>
|
|
<image
|
|
v-for="(img, index) in item.images"
|
|
:key="index"
|
|
:src="img.imageUrl"
|
|
lazy-load
|
|
mode="aspectFill"
|
|
class="item-img"
|
|
@click="
|
|
onImage(
|
|
item.images.map(v => v.imageUrl),
|
|
index
|
|
)
|
|
"
|
|
></image>
|
|
</view>
|
|
<!-- 地址 -->
|
|
<view class="address">
|
|
<text>{{ formatRelativeTime(item.createTime) }}</text>
|
|
<!-- <text>重庆市渝北xxx寄街道</text> -->
|
|
</view>
|
|
<!-- 点赞评论 -->
|
|
<view class="like-box">
|
|
<view class="like" @click.stop="onLike(item)">
|
|
<uni-icons
|
|
type="hand-up"
|
|
size="20"
|
|
color="#747474"
|
|
></uni-icons>
|
|
<text v-if="item.likeCount > 0">{{ item.likeCount }}</text>
|
|
</view>
|
|
<uni-icons
|
|
type="chat"
|
|
size="20"
|
|
color="#747474"
|
|
@click.stop="inputId = item.id"
|
|
></uni-icons>
|
|
<uni-icons
|
|
v-if="item.userId === userInfo.userId"
|
|
type="trash"
|
|
size="20"
|
|
color="#d95d5d"
|
|
style="margin-left: 86rpx"
|
|
@click.stop="onDeleteItem(item.id)"
|
|
></uni-icons>
|
|
</view>
|
|
<view v-if="inputId === item.id" class="input-box">
|
|
<input
|
|
v-model="contentData"
|
|
focus
|
|
confirm-type="done"
|
|
placeholder="评论"
|
|
:placeholder-style="placeholderStyle"
|
|
@confirm.stop="onComment(item)"
|
|
/>
|
|
<button @click.stop="onComment(item)">发布</button>
|
|
</view>
|
|
<!-- 评论内容 -->
|
|
<view v-if="item.commentList.length > 0" class="comment">
|
|
<view
|
|
v-for="(c, i) in item.commentList"
|
|
:key="i"
|
|
class="comment-item"
|
|
>
|
|
<text>{{ c.userName }}:</text>
|
|
<text>{{ c.content }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</z-paging>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
@import '../styles/dynamic.scss';
|
|
</style>
|