241 lines
6.4 KiB
Vue
241 lines
6.4 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 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 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
|
||
})
|
||
paging.value.complete(res.rows)
|
||
} catch (error) {
|
||
paging.value.complete(false)
|
||
}
|
||
}
|
||
|
||
const onLike = async item => {
|
||
await likeUserMoments(item.id)
|
||
// item.likeCount += 1
|
||
}
|
||
|
||
/** 点击查看大图 */
|
||
const onImage = current => {
|
||
uni.previewImage({
|
||
urls: [current], // 图片路径数组（本地或网络）
|
||
current: current // 当前显示的图片（可选，默认为第一张）
|
||
})
|
||
closeComment()
|
||
}
|
||
|
||
/** 关闭评论框 */
|
||
const closeComment = () => {
|
||
contentData.value = ''
|
||
inputId.value = ''
|
||
}
|
||
|
||
/** 发布评论 */
|
||
const onComment = async item => {
|
||
console.log('发布评论')
|
||
const data = {
|
||
content: contentData.value,
|
||
id: item.id
|
||
}
|
||
const res = await addUserMomentsComment(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 () => {})
|
||
</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"
|
||
@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"
|
||
mode="aspectFill"
|
||
class="img"
|
||
@click="onImage(userInfo.avatar)"
|
||
></image>
|
||
<!-- 用户信息 -->
|
||
<view class="user-info">
|
||
<text>{{ userInfo.userName }}</text>
|
||
<image
|
||
:src="userInfo.avatar"
|
||
mode="aspectFill"
|
||
class="avatar"
|
||
@click="onImage(userInfo.avatar)"
|
||
></image>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 动态列表 -->
|
||
<view class="dynamic-list" @click="closeComment">
|
||
<view v-for="item in dataList" :key="item.id" class="list">
|
||
<image
|
||
src="https://img1.baidu.com/it/u=2645961124,1296922095&fm=253&app=138&f=JPEG?w=800&h=1530"
|
||
mode="aspectFill"
|
||
class="avatar"
|
||
></image>
|
||
<view class="content">
|
||
<text class="name">名字</text>
|
||
<text class="text">{{ item.content }}</text>
|
||
<view class="img-list">
|
||
<image
|
||
src="https://p4.itc.cn/images01/20220619/46660ed163164c14be90e605a73ee5e8.jpeg"
|
||
mode="aspectFill"
|
||
class="item-img"
|
||
></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
|
||
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 class="comment">
|
||
<view v-for="item in 3" :key="item" class="comment-item">
|
||
<text>Admin:</text>
|
||
<text>确实的很好，值得推荐的很好</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</z-paging>
|
||
</template>
|
||
|
||
<style lang="scss" scoped>
|
||
@import '../styles/dynamic.scss';
|
||
</style>
|