12 changed files with 618 additions and 88 deletions
@ -0,0 +1,354 @@ |
|||||
|
<template> |
||||
|
<u-navbar :title="'帖子详情'" placeholder="true" bgColor="#F1F3F9" :autoBack="true" /> |
||||
|
<view class="container"> |
||||
|
<scroll-view class="cardbox"> |
||||
|
<view class="dhone"> |
||||
|
<view class="head"> |
||||
|
<image style="height: 96rpx;width: 96rpx;border-radius: 50%;" |
||||
|
:src="baseurl + '/' + listdata.member_head_pic" mode=""> |
||||
|
</image> |
||||
|
<view class="namepart"> |
||||
|
<text class="name">{{listdata.member_nickname}}</text> |
||||
|
<text class="date">{{listdata.create_time}}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
<text class="pl">{{listdata.content}}</text> |
||||
|
<view class="bottom"> |
||||
|
<view class="left"> |
||||
|
<image style="width: 36rpx;height: 34rpx;" |
||||
|
:src="listdata.is_like?'/static/img/ydz.png':'/static/img/dz.png'" |
||||
|
@click="dzClick(listdata.is_like,listdata.posts_id)" mode=""> |
||||
|
</image> |
||||
|
<text class="value">{{listdata.like_count}}</text> |
||||
|
</view> |
||||
|
<view class="right"> |
||||
|
<image style="width: 36rpx;height: 36rpx;" src="@/static/img/pl.png" mode=""></image> |
||||
|
<text class="value">{{listdata.comment_count}}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
<scroll-view style="max-height: 60vh;" scroll-y="true" @scrolltolower="scrolltolower"> |
||||
|
<view class="ypl" v-for="(item,index) in pllist" :key="index"> |
||||
|
<view class="head"> |
||||
|
<view class="left"> |
||||
|
<image style="height: 40rpx;width: 40rpx;border-radius: 50%;" |
||||
|
:src="baseurl + '/' + item.member_head_pic" mode=""></image> |
||||
|
<text class="name">{{item.member_nickname}}</text> |
||||
|
</view> |
||||
|
<view class="right"> |
||||
|
<text class="value">{{item.like_count}}</text> |
||||
|
<image style="width: 24rpx;height: 24rpx;margin-left: 8rpx;" |
||||
|
:src="item.is_like?'/static/img/ydz.png':'/static/img/dz.png'" |
||||
|
@click="pldzClick(item.is_like,item.comments_id)" mode=""> |
||||
|
</image> |
||||
|
</view> |
||||
|
</view> |
||||
|
<text class="pl">{{item.content}}</text> |
||||
|
</view> |
||||
|
</scroll-view> |
||||
|
</view> |
||||
|
</scroll-view> |
||||
|
<view class="plpart"> |
||||
|
<u-textarea class="textarea" v-model="plvalue" height="20" placeholder="请输入内容" autoHeight></u-textarea> |
||||
|
<view class="butt" @click="pullmess">发布</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script setup> |
||||
|
import { |
||||
|
onLoad |
||||
|
} from '@dcloudio/uni-app'; |
||||
|
import { |
||||
|
ref |
||||
|
} from 'vue'; |
||||
|
import { |
||||
|
postsInfo, |
||||
|
commentsList, |
||||
|
likesPosts, |
||||
|
commentsPosts |
||||
|
} from '@/api/shop' |
||||
|
import useUserStore from '@/store/user' |
||||
|
const userStore = useUserStore() |
||||
|
|
||||
|
const baseurl = ref(import.meta.env.VITE_APP_BASE_URL + '/') |
||||
|
|
||||
|
const listdata = ref({}) |
||||
|
|
||||
|
const plvalue = ref('') |
||||
|
|
||||
|
const dzClick = (like, id) => { |
||||
|
if (userStore.userInfo.moblie === undefined) { |
||||
|
uni.showToast({ |
||||
|
title: '请登录后操作！', |
||||
|
icon: 'none' |
||||
|
}) |
||||
|
} else { |
||||
|
listdata.value.is_like = !like |
||||
|
if (!like) { |
||||
|
listdata.value.like_count++ |
||||
|
} else { |
||||
|
listdata.value.like_count-- |
||||
|
} |
||||
|
likesPosts({ |
||||
|
target_id: id, |
||||
|
type: 'posts' |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
const pldzClick = (like, id) => { |
||||
|
if (userStore.userInfo.moblie === undefined) { |
||||
|
uni.showToast({ |
||||
|
title: '请登录后操作！', |
||||
|
icon: 'none' |
||||
|
}) |
||||
|
} else { |
||||
|
pllist.value.forEach((ele) => { |
||||
|
if (ele.comments_id === id) { |
||||
|
ele.is_like = !ele.is_like |
||||
|
if (ele.is_like) { |
||||
|
ele.like_count++ |
||||
|
} else { |
||||
|
ele.like_count-- |
||||
|
} |
||||
|
likesPosts({ |
||||
|
target_id: id, |
||||
|
type: 'comments' |
||||
|
}) |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
const postsid = ref(0) |
||||
|
const page = ref(1) |
||||
|
const limit = ref(6) |
||||
|
const pllist = ref([]) |
||||
|
const getplList = async (id) => { |
||||
|
await commentsList({ |
||||
|
page: page.value, |
||||
|
limit: limit.value, |
||||
|
posts_id: postsid.value |
||||
|
}).then((res) => { |
||||
|
if (res.code === 1) { |
||||
|
pllist.value = [...pllist.value,...res.data.data] |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
const scrolltolower = async () => { |
||||
|
page.value++ |
||||
|
await getplList() |
||||
|
} |
||||
|
|
||||
|
const pullmess = async () => { |
||||
|
await commentsPosts({ |
||||
|
posts_id: postsid.value, |
||||
|
content: plvalue.value |
||||
|
}).then((res) => { |
||||
|
if (res.code === 1) { |
||||
|
uni.showToast({ |
||||
|
title: '评论成功', |
||||
|
duration: 1000, |
||||
|
success: async () => { |
||||
|
plvalue.value = '' |
||||
|
page.value = 1 |
||||
|
await postsInfo(postsid.value).then((res) => { |
||||
|
listdata.value = res.data |
||||
|
}) |
||||
|
await getplList() |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
onLoad(async (param) => { |
||||
|
postsid.value = param.id |
||||
|
page.value = 1 |
||||
|
await postsInfo(param.id).then((res) => { |
||||
|
listdata.value = res.data |
||||
|
}) |
||||
|
await getplList() |
||||
|
}) |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
.container { |
||||
|
overflow-y: hidden; |
||||
|
background-color: #FFFFFF; |
||||
|
height: calc(100vh - 182rpx); |
||||
|
width: 100%; |
||||
|
box-sizing: border-box; |
||||
|
|
||||
|
.cardbox { |
||||
|
|
||||
|
.dhone { |
||||
|
margin-top: 30rpx; |
||||
|
width: 100%; |
||||
|
padding: 40rpx; |
||||
|
display: grid; |
||||
|
align-items: center; |
||||
|
box-sizing: border-box; |
||||
|
background: #FFFFFF; |
||||
|
|
||||
|
.head { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
|
||||
|
.namepart { |
||||
|
margin-left: 20rpx; |
||||
|
display: grid; |
||||
|
|
||||
|
.name { |
||||
|
font-family: Source Han Sans; |
||||
|
font-size: 28rpx; |
||||
|
font-weight: 350; |
||||
|
line-height: 26rpx; |
||||
|
letter-spacing: normal; |
||||
|
color: #0C092A; |
||||
|
} |
||||
|
|
||||
|
.date { |
||||
|
margin-top: 18rpx; |
||||
|
font-family: Source Han Sans; |
||||
|
font-size: 28rpx; |
||||
|
font-weight: 350; |
||||
|
line-height: 30rpx; |
||||
|
letter-spacing: normal; |
||||
|
color: #858494; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.pl { |
||||
|
margin-top: 24rpx; |
||||
|
font-family: Source Han Sans; |
||||
|
font-size: 28rpx; |
||||
|
font-weight: 350; |
||||
|
text-align: justify; |
||||
|
/* 浏览器可能不支持 */ |
||||
|
letter-spacing: normal; |
||||
|
color: #0C092A; |
||||
|
} |
||||
|
|
||||
|
.bottom { |
||||
|
margin-top: 20rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
|
||||
|
.left { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
|
||||
|
.value { |
||||
|
margin-left: 8rpx; |
||||
|
font-family: Source Han Sans; |
||||
|
font-size: 36rpx; |
||||
|
font-weight: 350; |
||||
|
line-height: 72rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
letter-spacing: normal; |
||||
|
color: #858494; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.right { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
|
||||
|
.value { |
||||
|
margin-left: 8rpx; |
||||
|
font-family: Source Han Sans; |
||||
|
font-size: 36rpx; |
||||
|
font-weight: 350; |
||||
|
line-height: 72rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
letter-spacing: normal; |
||||
|
color: #858494; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.ypl { |
||||
|
width: 100%; |
||||
|
border-radius: 8rpx; |
||||
|
background: #F8F9FA; |
||||
|
padding: 24rpx; |
||||
|
margin-top: 22rpx; |
||||
|
|
||||
|
.head { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
|
||||
|
.left { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
|
||||
|
.name { |
||||
|
margin-left: 8rpx; |
||||
|
font-family: Source Han Sans; |
||||
|
font-size: 28rpx; |
||||
|
font-weight: 350; |
||||
|
line-height: 26rpx; |
||||
|
letter-spacing: normal; |
||||
|
color: #333333; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.right { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
|
||||
|
.value { |
||||
|
|
||||
|
font-family: Source Han Sans; |
||||
|
font-size: 24rpx; |
||||
|
font-weight: 350; |
||||
|
line-height: 20rpx; |
||||
|
letter-spacing: normal; |
||||
|
color: #858494; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.pl { |
||||
|
font-family: Source Han Sans; |
||||
|
font-size: 24rpx; |
||||
|
font-weight: 350; |
||||
|
line-height: normal; |
||||
|
text-align: justify; |
||||
|
/* 浏览器可能不支持 */ |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
letter-spacing: normal; |
||||
|
color: #0C092A; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.plpart { |
||||
|
position: fixed; |
||||
|
bottom: 0; |
||||
|
width: 100%; |
||||
|
padding: 20px 15px; |
||||
|
box-sizing: border-box; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
|
||||
|
.textarea {} |
||||
|
|
||||
|
.butt { |
||||
|
margin-left: 10px; |
||||
|
padding: 9px 8px; |
||||
|
box-sizing: border-box; |
||||
|
background-color: #5AC725; |
||||
|
border-radius: 5px; |
||||
|
color: #FFFFFF; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
|
After Width: | Height: | Size: 2.4 KiB |
|
Before Width: | Height: | Size: 718 B After Width: | Height: | Size: 832 B |
Loading…
Reference in new issue