uniapp-ZHSQ/packages/localLife/UserComment/index.vue

<template>
    <div class="container">
        <div class="Msg">
            <div class="Msg_Tit">
                <div class="Msg_Tit_left">
                    <image src="http://192.168.0.172:5500/user_ava.png" v-if="!info.user.avatar" mode="aspectFill">
                    </image>
                    <image :src="picUrl + info.user.avatar" v-if="info.user.avatar" mode="aspectFill"></image>
                    {{ info.user.nick_name }}
                </div>
                <div class="Msg_Tit_right">
                    <image v-for="indez in 5"
                        :src="indez < info.satisfaction ? 'http://192.168.0.172:5500/local_start1.png' : 'http://192.168.0.172:5500/local_start2.png'"
                        mode="aspectFill"></image>
                </div>
            </div>

            <div class="Msg_con">
                {{ info.comment }}
            </div>

            <div class="Msg_iconList">
                <div class="Msg_iconList_left">
                    <div class="Msg_iconList_leftIcon">
                        <image src="http://192.168.0.172:5500/local_review.png" mode="widthFix"></image>
                        {{ info.merchant_evaluation_reply_list ? info.merchant_evaluation_reply_list.length : 0 }}
                    </div>

                    <div class="Msg_iconList_leftIcon">
                        <image v-if="info.is_like == 2" src="http://192.168.0.172:5500/com_likeIcon.png" mode="widthFix"
                            @click="like(info)"></image>
                        <image v-if="info.is_like == 1" src="http://192.168.0.172:5500/com_likeIcon2.png"
                            mode="widthFix" @click="unlike(info)"></image>
                        {{ info.merchant_evaluation_like_list ? info.merchant_evaluation_like_list.length : 0 }}
                    </div>
                </div>
                <div class="Msg_iconList_right">
                    <div class="Msg_iconList_leftIcon">
                        <image src="http://192.168.0.172:5500/com_shareIcon.png" mode="widthFix"></image>
                    </div>

                    <div class="Msg_iconList_leftIcon" @click="deletes">
                        <image src="http://192.168.0.172:5500/local_del.png" mode="widthFix"></image>
                    </div>
                </div>
            </div>

            <!-- 回复列表 -->
            <div class="reply" v-for="item in info.merchant_evaluation_reply_list">
                <div class="reply_tit">
                    <div class="reply_tit_left">
                        <image src="http://192.168.0.172:5500/test.png" mode="aspectFill"></image>
                        哇偶
                    </div>
                    <div class="reply_tit_right">2025-06-12 12:23:46</div>
                </div>
                <div class="reply_con">真好啊呵呵呵</div>
            </div>
        </div>

        <div class="comment">
            <div class="comment_con">
                <image src="http://192.168.0.172:5500/local_send.png" mode="aspectFill"></image>
                <input type="text" v-model="reply_content" placeholder="说点什么">

                <button id="send" @click="sendComment">发送</button>
            </div>
        </div>
    </div>
</template>

<script>
import {
    request,
    picUrl,
    uniqueByField,
    menuButtonInfo,
    NavgateTo
} from '../../../utils';

import {
    apiArr
} from '../../../api/v2local';


export default {
    data() {
        return {
            picUrl,
            top: "",
            localHeight: "",
            info: "",
            id:"",
            reply_content:""
        }
    },
    onLoad(options) {
        const meun = menuButtonInfo();
        this.top = meun.top;
        // this.top = meun.height + meun.top;
        this.localHeight = meun.height;
        this.id = options.id
        this.getCommentInfo()
    },


    methods: {
        sendComment() {
            // 这里添加发送评论的逻辑
            console.log('发送评论');
            let that = this
            request(apiArr.createUserReply,"POST",{
                evaluation_id:that.info.id,
                reply_content:that.reply_content,
                reply_user_type:"1"
            }).then(res=>{
                uni.showToast({
                    title:"发送成功",
                    icon:"none",
                    duration: 2000
                })
                this.reply_content = ""
                setTimeout(() => {
                    this.getCommentInfo()
                }, 1000);
            })
        },

        deletes() {
            uni.showModal({
                title: '提示',
                content: '确定删除？',
                success: function (res) {
                    if (res.confirm) {
                        console.log('用户点击确定');
                    } else if (res.cancel) {
                        console.log('用户点击取消');
                    }
                }
            });
        },

        getCommentInfo(e) {
            let that = this
            request(apiArr.userCommentInfo, "POST", {
                id: that.id
            }).then(res => {
                console.log(res);
                this.info = res
            })
        },

        like(e) {
            request(apiArr.merChantCommentLike, "POST", {
                evaluation_id: e.id,
            }).then(res => {
                if (this.info.merchant_evaluation_like_list) {
                    this.info.merchant_evaluation_like_list.push({})
                } else {
                    this.info.merchant_evaluation_like_list = []
                    this.info.merchant_evaluation_like_list.push({})
                }
                this.info.is_like = 1
                uni.showToast({
                    title: '点赞成功',
                    icon: "none",
                    duration: 2000
                });
            })
        },
        unlike(e) {
            request(apiArr.merChantCommentUnlike, "POST", {
                evaluation_id: e.id,
            }).then(res => {
                this.info.is_like = 2
                this.info.merchant_evaluation_like_list.pop()
                uni.showToast({
                    icon: "none",
                    title: '取消成功',
                    duration: 2000
                });
            })
        },

    },


}
</script>

<style>
@import url("./index.css");
</style>