|
|
@@ -1,189 +1,254 @@
|
|
|
<template>
|
|
|
- <view class="container">
|
|
|
- <u-sticky>
|
|
|
- <view class="pop-top">
|
|
|
- <view class="top-box">
|
|
|
- <view class="top-black-box"></view>
|
|
|
- </view>
|
|
|
- <view class="top-title"> 1244条回复 </view>
|
|
|
- </view>
|
|
|
- </u-sticky>
|
|
|
-
|
|
|
- <view class="center-box">
|
|
|
- <view class="center-item" v-for="item of 7">
|
|
|
- <view class="item-top">
|
|
|
- <view class="top-left">
|
|
|
- <view class="top-img">
|
|
|
- <image src="@/static/QR57a.jpg" class="img" mode=""></image>
|
|
|
- </view>
|
|
|
- <view class="top-text">
|
|
|
- <view class="text-title">测试名称</view>
|
|
|
- <view class="text-address"> 2天前 山东潍坊</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="top-right">
|
|
|
- <u-icon name="heart" size="22"></u-icon>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="item-text">
|
|
|
- 啊水泡车【卡擦【帕克我看篇v喵帕斯【普外科哦v骄傲【什么码数来看是卡拉瓦乔扣篮十多年可怜那棵老派的尼克拉斯你的卡拉省的
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="bottom-box">
|
|
|
- <view class="bottom-item">
|
|
|
- <view class="item-left">
|
|
|
- <u--input
|
|
|
- placeholder="写回复"
|
|
|
- border="surround"
|
|
|
- v-model="value"
|
|
|
- shape='circle'
|
|
|
- customStyle="background-color:#F2F2F2"
|
|
|
- ></u--input>
|
|
|
- </view>
|
|
|
- <view class="item-right">
|
|
|
- <button @click="handlerPopPublishBtn" class="btn">发布</button>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+ <view class="container">
|
|
|
+ <u-sticky>
|
|
|
+ <view class="pop-top">
|
|
|
+ <view class="top-box">
|
|
|
+ <view class="top-black-box"></view>
|
|
|
+ </view>
|
|
|
+ <view class="top-title"> {{ total }}条回复 </view>
|
|
|
+ </view>
|
|
|
+ </u-sticky>
|
|
|
+
|
|
|
+ <view class="center-box">
|
|
|
+ <view class="center-item" v-for="(item,index) of init_list">
|
|
|
+ <view class="item-top">
|
|
|
+ <view class="top-left">
|
|
|
+ <view class="top-img">
|
|
|
+ <image :src="item.userDTO.avatar" class="img" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="top-text">
|
|
|
+ <view class="text-title">{{ item.userDTO.nickname }}</view>
|
|
|
+ <view class="text-address"> 2天前 山东潍坊</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="top-right">
|
|
|
+ <u-icon :name="item.clickStatus == 0 ? 'heart' : 'heart-fill'" size='22' @click='handlerFocus(item)'></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="item-text"> {{ item.content }} </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <empty v-if="total == 0" />
|
|
|
+
|
|
|
+ <view class="bottom-box">
|
|
|
+ <view class="bottom-item">
|
|
|
+ <view class="item-left">
|
|
|
+ <u--input placeholder="写回复" border="surround" v-model="content" shape='circle'
|
|
|
+ customStyle="background-color:#F2F2F2"></u--input>
|
|
|
+ </view>
|
|
|
+ <view class="item-right">
|
|
|
+ <button @click="handlerPopPublishBtn" class="btn">发布</button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- value:''
|
|
|
- }
|
|
|
- },
|
|
|
- methods:{
|
|
|
- // 发布评论
|
|
|
- handlerPopPublishBtn(){
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ import { addClientComment, clientCommentList } from "@/api/client/message.js"
|
|
|
+ import { addEvaulateRecords } from '@/api/client/community.js';
|
|
|
+ import empty from "@/components/empty/index.vue"
|
|
|
+ export default {
|
|
|
+ components:{empty},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ content: '',
|
|
|
+ init_list: [],
|
|
|
+ total:0
|
|
|
+ }
|
|
|
+ },
|
|
|
+ props: ['dynamicId', 'dynamicUserId'],
|
|
|
+ watch: {
|
|
|
+ dynamicId(newValue) {
|
|
|
+ if(newValue != null){
|
|
|
+ this.handlerInitList()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 初始化评论列表
|
|
|
+ handlerInitList() {
|
|
|
+ let params = {
|
|
|
+ dynamicId: this.dynamicId,
|
|
|
+ parentId: 0,
|
|
|
+ userId: this.dynamicUserId,
|
|
|
+ }
|
|
|
+ clientCommentList(params).then(res => {
|
|
|
+ this.init_list = res.data.records
|
|
|
+ this.total = res.data.total
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 发布评论
|
|
|
+ handlerPopPublishBtn() {
|
|
|
+ let params = {
|
|
|
+ dynamicId: this.dynamicId,
|
|
|
+ parentId: 0,
|
|
|
+ content: this.content,
|
|
|
+ status: 0
|
|
|
+ }
|
|
|
+ addClientComment(params).then(res => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ uni.showToast({
|
|
|
+ title: '发布成功',
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
+ this.content = ''
|
|
|
+ this.handlerInitList()
|
|
|
+ this.$emit('uploadComment')
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 关注按钮
|
|
|
+ handlerFocus(item){
|
|
|
+ let params = {
|
|
|
+ dynamicStatusType: 'GOOD', // 操作类型：1-点赞；2-踩 允许值: GOOD, BAD
|
|
|
+ recordType: 'COMMENT', // 内容类型：1-动态；2-评论/回复 允许值: DYNAMIC, COMMENT, USER
|
|
|
+ actionType: item.clickStatus == 0 ? 'ADD' : 'CANCEL', // 点击类型：1-点赞/踩；2-取消赞/取消踩 允许值: ADD, CANCEL
|
|
|
+ contentId: item.id,
|
|
|
+ targetUserId: item.userId
|
|
|
+ }
|
|
|
+ addEvaulateRecords(params).then(res => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ uni.showToast({
|
|
|
+ title: '关注成功',
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
+ this.handlerInitList()
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ title: res.msg,
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
- .container {
|
|
|
- height: 70vh;
|
|
|
- overflow-y: auto;
|
|
|
- box-sizing: border-box;
|
|
|
- padding-bottom: 120rpx;
|
|
|
-
|
|
|
- .pop-top {
|
|
|
- background-color: #fff;
|
|
|
- border-radius: 40rpx;
|
|
|
- padding: 20rpx 0;
|
|
|
- }
|
|
|
-
|
|
|
- .top-box {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
-
|
|
|
- .top-black-box {
|
|
|
- width: 10%;
|
|
|
- height: 10rpx;
|
|
|
- background-color: #000;
|
|
|
- border-radius: 10%;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .top-title {
|
|
|
- font-size: 32rpx;
|
|
|
- font-weight: bold;
|
|
|
- color: #000;
|
|
|
- text-align: center;
|
|
|
- margin-top: 20rpx;
|
|
|
- letter-spacing: 2rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .center-box {
|
|
|
- margin-bottom: 20rpx;
|
|
|
- padding: 0 20rpx;
|
|
|
-
|
|
|
- .center-item {
|
|
|
- margin-bottom: 40rpx;
|
|
|
- border-radius: 20rpx;
|
|
|
- .item-top {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .top-left {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .top-img {
|
|
|
- .img {
|
|
|
- width: 80rpx;
|
|
|
- height: 80rpx;
|
|
|
- border-radius: 50%;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .top-text {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: space-around;
|
|
|
- margin-left: 10rpx;
|
|
|
-
|
|
|
- .text-title {
|
|
|
- font-weight: bold;
|
|
|
- font-size: 32rpx;
|
|
|
- color: #000;
|
|
|
- }
|
|
|
-
|
|
|
- .text-address {
|
|
|
- color: #8f8f8f;
|
|
|
- font-size: 24rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .item-text {
|
|
|
- margin-top: 20rpx;
|
|
|
- padding: 0 40rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .bottom-box {
|
|
|
- position: absolute;
|
|
|
- bottom: 0;
|
|
|
- background-color: #fff;
|
|
|
- width: 100%;
|
|
|
- height: 150rpx;
|
|
|
-
|
|
|
- .bottom-item {
|
|
|
- display: flex;
|
|
|
- justify-content: space-around;
|
|
|
- padding: 10rpx 20rpx 0;
|
|
|
- box-sizing: border-box;
|
|
|
- align-items: center;
|
|
|
- .item-left{
|
|
|
- width: 60%;
|
|
|
- height: 70rpx;
|
|
|
- }
|
|
|
- .item-right{
|
|
|
- width: 30%;
|
|
|
- padding: 20rpx;
|
|
|
- .btn{
|
|
|
- border-radius: 20rpx;
|
|
|
- text-align: center;
|
|
|
- color: #fff;
|
|
|
- background: linear-gradient(to right, #e8cbc0, #636fa4);
|
|
|
- height: 70rpx;
|
|
|
- font-size: 28rpx;
|
|
|
- line-height: 70rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
+ .container {
|
|
|
+ height: 70vh;
|
|
|
+ overflow-y: auto;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding-bottom: 120rpx;
|
|
|
+
|
|
|
+ .pop-top {
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 40rpx;
|
|
|
+ padding: 20rpx 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .top-box {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ .top-black-box {
|
|
|
+ width: 10%;
|
|
|
+ height: 10rpx;
|
|
|
+ background-color: #000;
|
|
|
+ border-radius: 10%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .top-title {
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #000;
|
|
|
+ text-align: center;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ letter-spacing: 2rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .center-box {
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ padding: 0 20rpx;
|
|
|
+
|
|
|
+ .center-item {
|
|
|
+ margin-bottom: 40rpx;
|
|
|
+ border-radius: 20rpx;
|
|
|
+
|
|
|
+ .item-top {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .top-left {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .top-img {
|
|
|
+ .img {
|
|
|
+ width: 80rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .top-text {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-around;
|
|
|
+ margin-left: 10rpx;
|
|
|
+
|
|
|
+ .text-title {
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text-address {
|
|
|
+ color: #8f8f8f;
|
|
|
+ font-size: 24rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-text {
|
|
|
+ margin-top: 20rpx;
|
|
|
+ padding: 0 40rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom-box {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ background-color: #fff;
|
|
|
+ width: 100%;
|
|
|
+ height: 150rpx;
|
|
|
+
|
|
|
+ .bottom-item {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ padding: 10rpx 20rpx 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .item-left {
|
|
|
+ width: 60%;
|
|
|
+ height: 70rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-right {
|
|
|
+ width: 30%;
|
|
|
+ padding: 20rpx;
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ border-radius: 20rpx;
|
|
|
+ text-align: center;
|
|
|
+ color: #fff;
|
|
|
+ background: linear-gradient(to right, #e8cbc0, #636fa4);
|
|
|
+ height: 70rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ line-height: 70rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|
