代码使用示例-用户评价

页面操作分为好评和差评，对应的代码在MainContent.vue的feedbackSatisfaction中。

<div class="satisfaction-dissatisfied" v-if="item.isRobot || item.isDrop">
    <img class="satisfaction-img" :id="'s'+item.commentImgId"
         src="../assets/满意.svg" alt="" title="满意" style="position: absolute;bottom: 35px;cursor: pointer;"
         @click="feedbackSatisfaction(item,1)">
    <img class="satisfaction-img"  :id="'dis'+item.commentImgId"
         src="../assets/不满意.svg" alt="" title="不满意" style="position: absolute;bottom: 5px;cursor: pointer;"
         @click="feedbackSatisfaction(item,0)">
    <img class="satisfaction-img"  :id="'show'+item.commentImgId"
         src="" alt="" style="position: absolute;bottom: 5px; display: none">
</div>

其中满意为1，不满意为0。

//满意度调查
feedbackSatisfaction(item, feedback,commentId=null) {
    if (feedback === 1) {
        if (item.isRobot) {
            this.$Chat.feedbacksatisfaction(item.interIdx, feedback,"ok");
        }else {
            this.$Chat.satisfactionInfo("5","ok");
        }
        this.showCommentImg(item.commentImgId,satisfied);
        let msg = {
            avatar: "zph",
            text: "感谢您的点赞，我会继续努力的~",
            type: 0,
            time: this.$Utils.getDateString(),
            float: "left",
            userName: '系统',
        };
        this.pushMessageInRecord(JSON.stringify(msg))
    } else if(feedback === 2){
        let content = document.getElementById(commentId).value;
        if (!content || content.length < 1){
            this.$message({
                message: '请输入评价内容！',
                type: 'warning'
            });
            return;
        }else if(content.length > 64) {
            this.$message({
                message: '评价内容不能超过64字符！',
                type: 'warning'
            });
            return;
        }
        if (item.robotComment) {
            this.$Chat.feedbacksatisfaction(item.interIdx, 0,content);
        }else {
            this.$Chat.satisfactionInfo("1",content);
        }
        let msg = {
            avatar: "zph",
            text: "感谢您的反馈，我会努力改进的~",
            type: 0,
            time: this.$Utils.getDateString(),
            float: "left",
            userName: '系统',
        };
        this.pushMessageInRecord(JSON.stringify(msg))
        document.getElementById('b-'+item.commentId).style.display='none';
        document.getElementById(item.commentId).readOnly = true;
    } else {
        let msg = {
            avatar: "zph",
            text: "",
            type: 5,
            time: this.$Utils.getDateString(),
            float: "left",
            userName: '系统',
            leaveMessage: false,
            interIdx:item.interIdx,
            commentId:item.interIdx+this.$Utils.uuid(8,16)
        };
        if (item.isRobot) {
            msg["robotComment"] = true;
        }
        this.showCommentImg(item.commentImgId,dissatisfied);
        this.pushMessageInRecord(JSON.stringify(msg))
    }
}

满意会直接在聊天栏中输入一条信息：

if (feedback === 1) {
    if (item.isRobot) {
        this.$Chat.feedbacksatisfaction(item.interIdx, feedback,"ok");
    }else {
        this.$Chat.satisfactionInfo("5","ok");
    }
    this.showCommentImg(item.commentImgId,satisfied);
    let msg = {
        avatar: "zph",
        text: "感谢您的点赞，我会继续努力的~",
        type: 0,
        time: this.$Utils.getDateString(),
        float: "left",
        userName: '系统',
    };
    this.pushMessageInRecord(JSON.stringify(msg))
}

这边的满意分为对机器人的满意和对客服人员的满意，对机器人的满意会调用chat_feedbacksatisfaction中的接口，对人员满意调用saveSatisfaction接口。

不满意则弹出弹窗，需要输入不满意的原因。

else {
    let msg = {
        avatar: "zph",
        text: "",
        type: 5,
        time: this.$Utils.getDateString(),
        float: "left",
        userName: '系统',
        leaveMessage: false,
        interIdx:item.interIdx,
        commentId:item.interIdx+this.$Utils.uuid(8,16)
    };
    if (item.isRobot) {
        msg["robotComment"] = true;
    }
    this.showCommentImg(item.commentImgId,dissatisfied);
    this.pushMessageInRecord(JSON.stringify(msg))
}

对应的样式代码。

<div v-if="item.type === 5" class="reason-style">
    <div>您好，可以告诉我您不满足的原因吗？</div>
    <div>
        <el-button size="small"
                   @click="pushInTextarea(item.commentId,'答非所问')">答非所问</el-button>
        <el-button size="small"
                   @click="pushInTextarea(item.commentId,'案例看不懂')">案例看不懂</el-button>
    </div>
    <div>
        <textarea :id="item.commentId" rows="4" placeholder="请输入不满足的原因"
                  class="reason-textarea"></textarea>
    </div>
    <div class="reason-submit" :id="'b-'+item.commentId">
        <el-button size="small" @click="feedbackSatisfaction(item,2,item.commentId);">提交</el-button>
    </div>
</div>

点击提交后再次进入到方法。

else if(feedback === 2){
    let content = document.getElementById(commentId).value;
    if (!content || content.length < 1){
        this.$message({
            message: '请输入评价内容！',
            type: 'warning'
        });
        return;
    }else if(content.length > 64) {
        this.$message({
            message: '评价内容不能超过64字符！',
            type: 'warning'
        });
        return;
    }
    if (item.robotComment) {
        this.$Chat.feedbacksatisfaction(item.interIdx, 0,content);
    }else {
        this.$Chat.satisfactionInfo("1",content);
    }
    let msg = {
        avatar: "zph",
        text: "感谢您的反馈，我会努力改进的~",
        type: 0,
        time: this.$Utils.getDateString(),
        float: "left",
        userName: '系统',
    };
    this.pushMessageInRecord(JSON.stringify(msg))
    document.getElementById('b-'+item.commentId).style.display='none';
    document.getElementById(item.commentId).readOnly = true;
}