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