sulibao-mini/components/agent-ui/feedback/index.vue

<template>
    <view class="feedback-modal" v-if="isShowFeedback">
        <view class="feedback">
            <view class="feedback-header">感谢您的宝贵反馈，我们会不断改进服务</view>
            <view class="feedback-body">
                <view class="item-box">
                    <view class="item-title">评分</view>
                    <view style="display: flex; gap: 14rpx">
                        <block v-for="(item, index) in [1, 2, 3, 4, 5]" :key="index">
                            <image
                                :src="item <= score ? '/static/components/agent-ui/imgs/star-highlight.svg' : '/static/components/agent-ui/imgs/star.svg'"
                                mode="aspectFill"
                                class="star"
                                @touchend="onChangeScore"
                                :data-score="item"
                            />
                        </block>
                    </view>
                </view>
                <view class="item-box">
                    <view class="item-title">回答内容</view>
                    <view>
                        <block v-for="(item, index) in feedbackType === 'upvote' ? upVote : downVote" :key="index">
                            <view :class="item.selected ? 'vote-item-highlight' : 'vote-item-normal'" @tap="onSelect" :data-item="item">{{ item.value }}</view>
                        </block>
                    </view>
                </view>
                <view class="item-box">
                    <view class="item-title">反馈建议</view>
                    <view>
                        <textarea :value="message" class="feedback-textarea" maxlength="140" @input="inputChange" />
                    </view>
                </view>
            </view>
            <view class="feedback-footer">
                <view class="btn-cancel" @tap="closeShowFeedback">取消</view>
                <view class="btn-submit" @tap="submitFeedback">提交反馈</view>
            </view>
        </view>
    </view>
</template>

<script>
// pages/components/feedback/index.js
export default {
    data() {
        return {
            upVote: [
                {
                    selected: false,
                    value: '准确有效'
                },
                {
                    selected: false,
                    value: '回答全面'
                },
                {
                    selected: false,
                    value: '立场正确'
                },
                {
                    selected: false,
                    value: '格式规范'
                },
                {
                    selected: false,
                    value: '专业性强'
                },
                {
                    selected: false,
                    value: '富有创意'
                },
                {
                    selected: false,
                    value: '表达清晰'
                },
                {
                    selected: false,
                    value: '值得信赖'
                },
                {
                    selected: false,
                    value: '高效'
                },
                {
                    selected: false,
                    value: '满意'
                }
            ],
            downVote: [
                {
                    selected: false,
                    value: '理解错误'
                },
                {
                    selected: false,
                    value: '未识别问题'
                },
                {
                    selected: false,
                    value: '事实错误'
                },
                {
                    selected: false,
                    value: '推理错误'
                },
                {
                    selected: false,
                    value: '内容不完整'
                },
                {
                    selected: false,
                    value: '不专业'
                },
                {
                    selected: false,
                    value: '违法有害'
                },
                {
                    selected: false,
                    value: '格式错误'
                },
                {
                    selected: false,
                    value: '乱码'
                },
                {
                    selected: false,
                    value: '内容重复'
                }
            ],
            score: 5,
            message: ''
        };
    },

    /**
     * 组件的属性列表
     */
    props: {
        isShowFeedback: {
            type: Boolean,
            default: false
        },
        feedbackRecordId: {
            type: String,
            default: ''
        },
        feedbackType: {
            type: String,
            default: ''
        },
        botId: {
            type: String,
            default: ''
        },
        input: {
            type: String,
            default: ''
        },
        aiAnswer: {
            type: String,
            default: ''
        }
    },

    watch: {
        feedbackType: function (value) {
            this.setData({
                score: value === 'upvote' ? 5 : 1
            });
        }
    },

    /**
     * 组件的方法列表
     */
    methods: {
        reset: function () {
            this.setData({
                upVote: [
                    {
                        selected: false,
                        value: '准确有效'
                    },
                    {
                        selected: false,
                        value: '回答全面'
                    },
                    {
                        selected: false,
                        value: '立场正确'
                    },
                    {
                        selected: false,
                        value: '格式规范'
                    },
                    {
                        selected: false,
                        value: '专业性强'
                    },
                    {
                        selected: false,
                        value: '富有创意'
                    },
                    {
                        selected: false,
                        value: '表达清晰'
                    },
                    {
                        selected: false,
                        value: '值得信赖'
                    },
                    {
                        selected: false,
                        value: '高效'
                    },
                    {
                        selected: false,
                        value: '满意'
                    }
                ],
                downVote: [
                    {
                        selected: false,
                        value: '理解错误'
                    },
                    {
                        selected: false,
                        value: '未识别问题'
                    },
                    {
                        selected: false,
                        value: '事实错误'
                    },
                    {
                        selected: false,
                        value: '推理错误'
                    },
                    {
                        selected: false,
                        value: '内容不完整'
                    },
                    {
                        selected: false,
                        value: '不专业'
                    },
                    {
                        selected: false,
                        value: '违法有害'
                    },
                    {
                        selected: false,
                        value: '格式错误'
                    },
                    {
                        selected: false,
                        value: '乱码'
                    },
                    {
                        selected: false,
                        value: '内容重复'
                    }
                ],
                score: 5,
                message: ''
            });
        },
        onChangeScore: function (e) {
            const { score } = e.currentTarget.dataset;
            this.setData({
                score
            });
        },
        onSelect: function (e) {
            const { item } = e.currentTarget.dataset;
            const newArr = [...(this.feedbackType === 'upvote' ? this.upVote : this.downVote)];
            const [selectedItem] = newArr.filter((i) => i.value === item.value);
            selectedItem.selected = !selectedItem.selected;
            if (this.feedbackType === 'upvote') {
                this.setData({
                    upVote: newArr
                });
            } else {
                this.setData({
                    downVote: newArr
                });
            }
        },
        inputChange: function (e) {
            const value = e.detail.value;
            this.setData({
                message: value
            });
        },
        closeShowFeedback: function () {
            this.$emit('close');
        },
        submitFeedback: async function () {
            const res = await wx.cloud.extend.AI.bot.sendFeedback({
                userFeedback: {
                    botId: this.botId,
                    recordId: this.feedbackRecordId,
                    comment: this.message,
                    rating: this.score,
                    tags:
                        this.feedbackType === 'upvote'
                            ? this.upVote.filter((item) => item.selected).map((item) => item.value)
                            : this.downVote.filter((item) => item.selected).map((item) => item.value),
                    aiAnswer: this.aiAnswer,
                    input: this.input,
                    type: this.feedbackType === 'upvote' ? 'upvote' : 'downvote'
                },
                botId: this.botId
            });
            if (res.status === 'success') {
                uni.showToast({
                    title: '感谢反馈',
                    icon: 'success'
                });
            } else {
                uni.showToast({
                    title: '反馈失败',
                    icon: 'fail'
                });
            }
            this.reset();
            // console.log(res)
            this.$emit('close');
        }
    },

    created: function () {}
};
</script>
<style>
/* pages/components/feedback/index.wxss */
.feedback-modal {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 750rpx;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
}

.feedback {
    width: 520rpx;
    max-height: 70%;
    overflow-y: auto;
    background-color: #fff;
    border-radius: 24rpx;
    padding: 40rpx;
}
.feedback-header {
    font-weight: 500;
    font-size: 32rpx;
    text-align: justify;
}
.feedback-body {
    font-size: 28rpx;
}
.item-box {
    padding: 28rpx 0px;
}
.item-title {
    font-size: 28rpx;
    padding-bottom: 28rpx;
}
.star {
    width: 40rpx;
    height: 40rpx;
}
.vote-item-normal {
    display: inline-block;
    background-color: rgba(243, 243, 243, 1);
    height: 48rpx;
    line-height: 48rpx;
    border-radius: 24rpx;
    padding: 4rpx 24rpx;
    margin-right: 16rpx;
    margin-bottom: 16rpx;
}
.vote-item-highlight {
    display: inline-block;
    background-color: rgba(0, 82, 217, 0.1);
    height: 48rpx;
    line-height: 48rpx;
    border-radius: 24rpx;
    padding: 4rpx 24rpx;
    margin-right: 16rpx;
    margin-bottom: 16rpx;
    color: rgb(0, 82, 217);
}
.feedback-textarea {
    width: 100%;
    height: 150rpx;
    border-radius: 16rpx;
    border: 1px solid #ccc;
    box-sizing: border-box;
    padding: 16rpx;
}
.feedback-footer {
    font-size: 28rpx;
    display: flex;
    justify-content: flex-end;
    gap: 24rpx;
}
.btn-cancel {
    box-sizing: border-box;
    background-color: #fff;
    border: 1px solid #eee;
    padding: 6rpx 24rpx;
    border-radius: 6rpx;
    line-height: 48rpx;
}
.btn-submit {
    box-sizing: border-box;
    padding: 6rpx 24rpx;
    border-radius: 6rpx;
    color: #fff;
    background-color: #0052d9;
    line-height: 48rpx;
}
</style>