1.商品评论优化

陶杰

2024-10-16 c337b40f1052733c86696cf3dbeb44ad8bf2a73d

1.商品评论优化

 pages/order/comment/order-comment.vue

@@ -601,6 +601,11 @@
                    // }, 1200)
                }
            },
			
            toggleAnonymity(item) {
                  // 切换 anonymityFalg 值，1 表示匿名，0 表示非匿名
                item.anonymityFalg = 1
            },
        },
    }
</script>
@@ -630,23 +635,39 @@
                            </view>
                        </u-col>
                        <u-col span="2">
                            <u-rate count="5" v-model="item.commentGrade"></u-rate>
							
                        </u-col>
                    </u-row>
                    <u-row justify="space-between">
                        <u-col span="2">
							
                        </u-col>
                        <u-col >
                            <view><u-rate count="5" v-model="item.commentGrade" size="30"></u-rate></view>
                        </u-col>
                    </u-row>
                    <u-row  v-if=" item.commentGrade>0 ">
                        <u-col span="12">
                            <u-radio-group v-model="item.anonymityFalg" :labelSize="10">
                                <u-radio  label="匿名" :name="1"></u-radio>
                            </u-radio-group>
							
                            <u--textarea v-model="item.comment" placeholder="请输入内容"  count></u--textarea>
                            <view class="component-button-upload" @click="uploadIcon(item,'image')"></view>
                            <view class="flex p20" style="padding-top: 0rpx;padding-bottom: 10rpx"
                                v-if="item.pictureList&&item.pictureList.length>0">
                                <view class="m-t-12 m-r-10 " v-for="(tBanner,index2) of item.pictureList" :key="index2">
                                    <!-- <image :src="tBanner" @click.stop="previewImg(tBanner)" width="30px" height="30px" style=  ></image> -->
                                    <u--image :showLoading="true" :src="tBanner" width="50px" height="50px"></u--image>
                                    <view class="t-red text-center" @click.stop="deleteImg(item,index2)">删除</view>
                        <u-col span="12" >
                            <view class="comment-content-div">
								
                                <view  class="comment-content-div">
                                    <u-radio-group v-model="item.anonymityFalg" :labelSize="10">
                                        <u-radio  label="匿名" :name="1"></u-radio>
                                    </u-radio-group>
                                </view>
                                <view  class="comment-content-div">
                                    <u--textarea v-model="item.comment" placeholder="请输入内容"  count></u--textarea>
                                </view>
                                <view  class="comment-content-div">
                                    <view class="component-button-upload" @click="uploadIcon(item,'image')"></view>
                                    <view class="flex p20" style="padding-top: 0rpx;padding-bottom: 10rpx"
                                        v-if="item.pictureList&&item.pictureList.length>0">
                                        <view class="m-t-12 m-r-10 " v-for="(tBanner,index2) of item.pictureList" :key="index2">
                                            <!-- <image :src="tBanner" @click.stop="previewImg(tBanner)" width="30px" height="30px" style=  ></image> -->
                                            <u--image :showLoading="true" :src="tBanner" width="50px" height="50px"></u--image>
                                            <view class="t-red text-center" @click.stop="deleteImg(item,index2)">删除</view>
                                        </view>
                                    </view>	
                                </view>
                            </view>
                        </u-col>
@@ -896,6 +917,10 @@
            }

        }
		
        .comment-content-div{
            margin: 10rpx;
        }

    }
</style>

 sub_pages/customer/shop/shop.vue

@@ -172,34 +172,39 @@
                
                    <view v-for="(item,index) of commentList" >
                        <u-row justify="space-between"  >
                            <u-col span="1">
                                <u--image v-if="item.anonymityFalg==1 " :showLoading="true" 
                                src="https://youzhen123.oss-cn-huhehaote.aliyuncs.com/WechatOwnerProperty/images/mrtx.png" width="30px" height="30px"  shape="circle"></u--image>
                                <u--image v-else :showLoading="true" :src="item.customerCover" width="30px" height="30px"  shape="circle"></u--image>
							
                            <u-col>
                                <view style="display: flex; justify-content: flex-start; align-items: center;padding: 5rpx;">
                                    <u--image v-if="item.anonymityFalg==1 " :showLoading="true"
                                    src="https://youzhen123.oss-cn-huhehaote.aliyuncs.com/WechatOwnerProperty/images/mrtx.png" width="30px" height="30px"  shape="circle"></u--image>
                                    <u--image v-else :showLoading="true" :src="item.customerCover" width="30px" height="30px"  shape="circle"></u--image>
                                    <span v-if="item.anonymityFalg==1 " >匿名用户</span>
                                    <span v-else>{{item.customerName}}</span>
                                </view>
                            </u-col>
                            <u-col span="4">
                                <view v-if="item.anonymityFalg==1 " >匿名用户</view>
                                <view v-else>{{item.customerName}}</view>
                            </u-col>
                            <u-col span="2">
                                <u-rate count="5" v-model="item.commentGrade" readonly></u-rate>
                            </u-col>
                            <u-col span="4">
                                <view style="font-size: 12px;">{{item.updateTime}}</view>
                            </u-col>
						
                        <!--     <u-col span="4">
                                <view style="font-size: 12px; margin-right: 10px; text-align: right;">{{item.updateTime}}</view>
                            </u-col> -->
                        </u-row>
                        <u-row justify="space-between"  >
                        <u-row justify="space-between"   class="flower-comment">
                            <u-col span="2"></u-col>
                            <u-col span="10">
                                <view class="rate">
                                    <u-rate count="5" v-model="item.commentGrade" readonly size="30"></u-rate>
                                    <view style="font-size: 12px; margin-right: 10px; text-align: right;">{{item.updateTime}}</view>
                                </view>
                                <view>         
                                    <span style="color:#3E9FFB;border: 1px solid #3E9FFB; padding:2px 2px ;font-size: 12px;">
                                        {{item.flowerName}}({{item.flowerColor}}){{item.flowerLevel}}
                                    </span>
                                    {{item.comment}}
                                    <view class="flex" >
                                        <u--image v-for="(commentImg,index2) of item.commentImagesList" :key="index2" style="margin:10px;"
                                        :showLoading="true" :src="commentImg"></u--image>
                                    <view>
                                        <span class="flower-unit" >{{item.flowerName}} &nbsp; {{item.flowerLevel}}</span>
                                        <span class="comment">
                                            {{item.comment}}
                                        </span>
                                    </view>
                                    <view class="img-v" >
                                    <!--     <u--image v-for="(commentImg,index2) of item.commentImagesList" :key="index2" class="comment-img" 
                                        :showLoading="true" :src="commentImg"></u--image> -->
										
                                        <image v-for="(commentImg,index2) of item.commentImagesList" :key="index2" :src="commentImg" class="comment-img" @click="previewImg(commentImg)"></image>
                                    </view>
                                
                                 </view>
@@ -516,15 +521,19 @@
                                this.commentList[existingCommentIndex] = {
                                    ...this.commentList[existingCommentIndex],
                                    ...item,
                                    commentImagesList
                                    commentImagesList,
                                    updateTime: item.updateTime ? this.formatUpdateTime(item.updateTime) : null
                                };
                            } else {
                                // 新增评论
                                this.commentList.push({
                                    ...item,
                                    commentImagesList
                                    commentImagesList,
                                    updateTime: item.updateTime ? this.formatUpdateTime(item.updateTime) : null
                                });
                            }
                            console.log("评论列表：")
                            console.log(this.commentList)
                         });

                    }
@@ -532,6 +541,20 @@
                    this.$message.hideLoading()
                }
            
            },
            formatUpdateTime(time) {
		
                if (!time) return ''; // 如果时间为空，直接返回空字符串
                const date = new Date(time);
			
                // 格式化为 "YYYY-MM-DD HH:mm" 形式
                const year = date.getFullYear();
                const month = (date.getMonth() + 1).toString().padStart(2, '0');
                const day = date.getDate().toString().padStart(2, '0');
                const hours = date.getHours().toString().padStart(2, '0');
                const minutes = date.getMinutes().toString().padStart(2, '0');
			
                return `${year}-${month}-${day} ${hours}:${minutes}`;
            },
            
            getList_after() {
@@ -938,6 +961,33 @@

            }
        }
        .flower-comment{
            padding:10px;
            line-height: 1.5;
			
            .comment{
                margin: 10px;
                font-size: 12rpx; 
            }
			
        }
		
        .rate{
            display: flex;
            justify-content: space-between; 
            margin:10px 10px 10px 0px;
        }
		
        .img-v{
            margin:10px;
            display: flex;
            flex-wrap: wrap;
            .comment-img{
                margin:10px; 
                width:80px;; 
                height:80px;
            }
        }
        
        .comment-replay{
            background-color: #F6F6F6;
@@ -945,5 +995,15 @@
            margin-top:10rpx;
            padding: 10rpx;
        }
		
        .flower-unit{
            color:#3E9FFB;
            border: 1rpx solid #3E9FFB; 
            margin:10px;
            margin-left:0px;
            padding-left: 5rpx;
            padding-right: 5rpx;
            // font-size: 12px; 
        }
    }
</style>