Skip to content

C
cust-app
Commit efb2fadc authored by liwei's avatar liwei
Browse files
Options

新增了动态里的评论页面

parent bd08fe82
Show whitespace changes
Inline Side-by-side
Showing with 456 additions and 15 deletions
pages.json
View file @ efb2fadc
......@@ -84,6 +84,17 @@
}
]
},
{
"root": "pagesArticle",
"pages": [
{
"path": "articleDetail",
"style": {
"navigationBarTitleText": "动态详情"
}
}
]
},
{
"root": "pagesNotice",
"pages": [
......
pages/components/article/Item.vue
View file @ efb2fadc
......@@ -23,9 +23,9 @@
<template v-if="!isState">
<view class="name">
<text @click="gotoUserInfo(info)">{{info.nickName}}</text>
<image v-if="info.gender!='MALE'" class="gender" src="../../static/images/like/famale.png" mode="">
<image v-if="info.gender!='MALE'" class="gender" src="../../../static/images/like/famale.png" mode="">
</image>
<image v-else class="gender" src="../../static/images/like/male.png" mode=""></image>
<image v-else class="gender" src="../../../static/images/like/male.png" mode=""></image>
</view>
<view class="info">
<text decode="true" style="color: #434343;">{{info.information}}</text>
......@@ -81,12 +81,12 @@
<!-- </u-button>-->
</view>
<view class="btn" @click="gotoDetail(info)">
<image src="../../static/images/104.png" mode=""></image>
<image src="../../../static/images/104.png" mode=""></image>
<text>{{info.commentCount}}</text>
</view>
<view class="btn" @click="praise(info)">
<image v-if="!info.isLike" src="../../static/images/105.png" mode=""></image>
<image v-else src="../../static/images/105-no.png" mode=""></image>
<image v-if="!info.isLike" src="../../../static/images/105.png" mode=""></image>
<image v-else src="../../../static/images/105-no.png" mode=""></image>
<text>{{info.likeCount}}</text>
</view>
</view>
......@@ -187,7 +187,7 @@
//查看动态详情
gotoDetail(item) {
uni.navigateTo({
url: '/pages3/articleDetail?userId=' + item.userId
url: '/pagesArticle/articleDetail?userId=' + item.userId
})
},
//查看用户详情
......
pages/tab/index.vue
View file @ efb2fadc
......@@ -212,15 +212,9 @@
//左上角的搜索
async screen() {
//判断当前是否已登录
// const res = await this.$getId();
console.log(res);
if (res == 11003) {
this.isLoginPop = true;
} else {
uni.navigateTo({
url: '/pagespreference/preference/preference'
});
}
},
},
confirma() {
......
pagesArticle/articleDetail.vue 0 → 100644
View file @ efb2fadc
<template>
<div>
<view class="commentTitle">
<view>
<text>评论区</text>
</view>
<view>
<text>点赞 1</text>
<text class="c-title-segment">|</text>
<text>评论 2</text>
</view>
</view>
<view class="comment" v-for="info in commentChildren" :key="info.id">
<div class="c-left">
<image :src="info.avatar"></image>
</div>
<div class="c-right">
<div class="c-name">
{{ info.nickName }}
</div>
<div class="c-comment">{{ info.content }}</div>
<div class="c-actions">
<div class="c-time">{{ info.createTime }}</div>
<div class="action-item">
<image
@click="btnPrarse(info)"
:src="
info.praise
? '../static/images/105.png'
: '../static/images/105-no.png'
"
></image>
{{ info.likesNumber }}
</div>
<div class="action-item">
<image
src="../static/images/104.png"
@click="btnComment(info)"
></image>
<text v-if="info.childrenCommentInfos.length">
{{ info.childrenCommentInfos.length }}
</text>
<text v-else>0</text>
</div>
</div>
<div v-if="info.childrenCommentInfos.length > 0">
<div v-if="info.contentAll">
<view class="comment">
<div class="c-left">
<image :src="info.childrenCommentInfos[0].avatar"></image>
</div>
<div class="c-right">
<div class="c-name">
{{ info.childrenCommentInfos[0].nickName }}
<div style="color: #333; margin-top: 10rpx">
回复
<text class="replyer">
{{ info.childrenCommentInfos[0].beRepliedName }}：
</text>
<text class="c-comment">
{{ info.childrenCommentInfos[0].content }}
</text>
</div>
</div>
<div class="c-actions">
<div class="c-time">
{{ info.childrenCommentInfos[0].createTime }}
</div>
<div class="action-item">
<image
@click="btnPrarse(info.childrenCommentInfos[0])"
:src="
children.praise
? '../static/images/105.png'
: '../static/images/105-no.png'
"
></image>
{{ info.childrenCommentInfos[0].likesNumber }}
</div>
<div class="action-item">
<image
src="../static/images/104.png"
@click="btnComment(info.childrenCommentInfos[0])"
></image>
</div>
</div>
</div>
</view>
</div>
<div v-else>
<view
class="comment"
v-for="children in info.childrenCommentInfos"
:key="children.id"
>
<div class="c-left">
<image :src="children.avatar"></image>
</div>
<div class="c-right">
<div class="c-name">
{{ children.nickName }}
<div style="color: #333; margin-top: 10rpx">
回复
<text class="replyer">{{ children.beRepliedName }}：</text>
<text class="c-comment">{{ children.content }}</text>
</div>
</div>
<div class="c-actions">
<div class="c-time">{{ children.createTime }}</div>
<div class="action-item">
<image
@click="btnPrarse(children)"
:src="
children.praise
? '../static/images/105.png'
: '../static/images/105-no.png'
"
></image>
{{ children.likesNumber }}
</div>
<div class="action-item">
<image
src="../static/images/104.png"
@click="btnComment(children)"
></image>
</div>
</div>
</div>
</view>
</div>
<!-- <div class="more">-->
<!-- <div-->
<!-- style="color: #b6ea7a"-->
<!-- v-show="info.contentAll"-->
<!-- @click="changeAllFun(info)"-->
<!-- >-->
<!-- 展开剩余{{ info.childrenCommentInfos.length - 1 }}条回复-->
<!-- </div>-->
<!-- <div v-show="!info.contentAll"></div>-->
<!-- <div-->
<!-- v-show="!info.contentAll"-->
<!-- style="color: #b6ea7a"-->
<!-- @click="changeAllFun(info)"-->
<!-- >-->
<!-- 收起-->
<!-- </div>-->
<!-- </div>-->
</div>
</div>
</view>
<view class="bottom">
<u--input
placeholder="走心，说点好听的"
border="surround"
v-model="commentValue"
@change="change"
customStyle="border-radius:36rpx;height:45rpx;background-color:rgb(249, 250, 251);width:60%"
></u--input>
<view class="bottom-button-area">
<view class="bottom-button">
<image
@click=""
src="../static/images/104.png"
/>
<text class="imageText">分享</text>
</view>
<view class="bottom-button">
<image
@click=""
src="../static/images/104.png"
></image>
<text class="imageText">{{ 1 }}</text>
</view>
<view class="bottom-button">
<image
@click=""
:src="info.praise
? '../static/images/105.png'
: '../static/images/105-no.png'"
></image>
<text class="imageText">{{ 2 }}</text>
</view>
</view>
</view>
</div>
</template>
<script>
// 发送消息 第一个参数为消息名（事件名），第二个参数为通信的值（可以不穿）
export default{
data () {
return {
commentValue:'',
commentChildren:[
{
id:'1',
avatar:'http://192.168.1.80/upload/CmsBanner/20241230/18E63B570FF04DB3A8EFE277D58256C4.jpg',
nickName:'不吃鱼的猫',
content:'11111111111111111111',
createTime:'2024-05-02 15:24:01',
likesNumber:'1',
contentAll:false,
childrenCommentInfos:[
{
id: '1',
avatar: 'http://192.168.1.80/upload/CmsBanner/20241230/18E63B570FF04DB3A8EFE277D58256C4.jpg',
nickName: '不吃鱼的猫11111',
content: '111111111111111111111111111',
createTime: '2024-05-02 15:24:01',
likesNumber: '1',
beRepliedName:'不吃鱼的猫'
},
{
id: '1',
avatar: 'http://192.168.1.80/upload/CmsBanner/20241230/18E63B570FF04DB3A8EFE277D58256C4.jpg',
nickName: '不吃鱼的猫11111',
content: '111111111111111111111111111',
createTime: '2024-05-02 15:24:01',
likesNumber: '1',
beRepliedName:'不吃鱼的猫'
},
{
id: '1',
avatar: 'http://192.168.1.80/upload/CmsBanner/20241230/18E63B570FF04DB3A8EFE277D58256C4.jpg',
nickName: '不吃鱼的猫11111',
content: '111111111111111111111111111',
createTime: '2024-05-02 15:24:01',
likesNumber: '1',
beRepliedName:'不吃鱼的猫'
}
]
},
{
id:'1',
avatar:'http://192.168.1.80/upload/CmsBanner/20241230/18E63B570FF04DB3A8EFE277D58256C4.jpg',
nickName:'不吃鱼的猫',
content:'11111111111111111111',
createTime:'2024-05-02 15:24:01',
likesNumber:'1',
contentAll:false,
childrenCommentInfos:[
{
id: '1',
avatar: 'http://192.168.1.80/upload/CmsBanner/20241230/18E63B570FF04DB3A8EFE277D58256C4.jpg',
nickName: '不吃鱼的猫11111',
content: '111111111111111111111111111',
createTime: '2024-05-02 15:24:01',
likesNumber: '1',
beRepliedName:'不吃鱼的猫'
}
]
}
],
title: 'Hello',
totle: 0,
flag: false,
}
},
methods: {
changeAllFun(info) {
// console.log(info)
// let list = this.commentChildren
// console.log(list)
// list.forEach((elem) => {
// console.log(elem.id == info.id)
// if (elem.id == info.id) {
// elem.contentAll = !elem.contentAll
// }
// })
// uni.setStorageSync("commentList", list)
// bus.$emit('resComList');
},
btnComment (item) {
// bus.$emit('item', item);
},
btnPrarse (info) {
// let list = uni.getStorageSync('commentList')
// let optType = null
// info.praise ? optType = 1 : optType = 0
// let parmars = {
// optType: optType,
// strategyCommentId: info.id,
// }
//
// likeOrDislikeStrategy(parmars).then(res => {
// if (res.code == 200) {
// this.seachId(list, info.id)
// }
// else {
// this.$toast(res.msg)
// }
// })
},
seachId (list, id) {
// let result = null
// for (let i = 0; i < list.length; i++) {
// if (result !== null) {
// break //跳出循环的关键
// }
// if (list[i].id === id) {
// let res = list[i].nickName;
// result = res //取值关键
// list[i].praise = !list[i].praise
// if (list[i].praise) {
// list[i].likesNumber++
// } else {
// list[i].likesNumber--
// }
// break
// } else if (list[i].childrenCommentInfos) {//递归条件
// this.seachId(list[i].childrenCommentInfos, id);
// } else {
// continue
// }
// }
// uni.setStorageSync("commentList", list)
// bus.$emit('resComList');
}
},
}
</script>
<style lang="less" scoped>
.commentTitle{
display: flex;
justify-content: space-between;
padding:20rpx 25rpx;
font-size: 28rpx;
color: rgb(132, 132, 132);
.c-title-segment{
color: rgb(212, 210, 210);
padding-left: 20rpx;
padding-right: 20rpx
}
}
.comment {
display: flex;
padding: 24rpx 24rpx;
border-top: 1rpx solid #ececec;
.c-left {
image {
width: 60rpx;
height: 60rpx;
border-radius: 50%;
}
}
.c-right {
flex: 1;
margin-left: 22rpx;
margin-top: 5rpx;
.more {
display: flex;
align-items: center;
justify-content: space-between;
}
.c-name {
.replyer {
color: #000;
margin: 0 5px;
}
font-size: 28rpx;
color: #000;
}
.c-comment {
margin-top: 10rpx;
font-size: 28rpx;
color: #000;
word-break: break-all;
}
.c-actions {
margin-top: 20rpx;
display: flex;
justify-content: flex-end;
.c-time {
margin-right: auto;
font-size: 20rpx;
color: #999;
}
.action-item {
display: flex;
align-items: center;
margin-right: 48rpx;
font-size: 24rpx;
color: #999;
image {
margin-right: 14rpx;
width: 28rpx;
height: 24rpx;
}
}
}
}
}
.bottom {
display: flex;
justify-content: space-between;
position: fixed;
left: 0;
right: 0;
bottom: 20rpx;
height: 74rpx;
background-color: #FFFFFF;
border-top: 1px solid #F1F1F1;
padding: 20rpx 20rpx;
image{
width: 30rpx;
height: 24rpx
}
.bottom-button-area{
width: 40%;
padding: 0rpx 20rpx;
display: flex;
justify-content: space-between;
align-items: center;
.bottom-button{
display: flex;
align-items: center;
.imageText{
font-size: 25rpx;
padding-left: 5rpx;
}
}
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment