ks-app-employment-service/pages/chat/components/popupbadFeeback.vue

<template>
    <uni-popup ref="popup" type="bottom" borderRadius="12px 12px 0 0" background-color="#F6F6F6">
        <view class="feeback">
            <view class="titile">反馈</view>
            <view class="pop-h3">针对问题</view>
            <view class="pop-content">
                <view
                    class="item"
                    :class="{ active: item.check }"
                    @click="toggleCheck(item.id)"
                    v-for="item in wt"
                    :key="item.id"
                >
                    {{ item.label }}
                </view>
            </view>
            <view class="pop-h3">针对回答</view>
            <view class="pop-content">
                <view
                    class="item"
                    :class="{ active: item.check }"
                    @click="toggleCheck(item.id)"
                    v-for="item in hd"
                    :key="item.id"
                >
                    {{ item.label }}
                </view>
            </view>
            <view class="pop-h3">我要补充</view>
            <view class="supplement">
                <textarea v-model="inputText" cols="30" rows="10"></textarea>
            </view>
            <view class="btn button-click" @click="send">提交</view>
            <view class="close-btn" @click="close"></view>
        </view>
    </uni-popup>
</template>

<script setup>
import { ref, inject, defineEmits } from 'vue';
const emit = defineEmits(['onSend']);
const { $api } = inject('globalFunction');
const popup = ref(null);
const inputText = ref('');
const wt = ref([
    { label: '上下文错误', id: 1, check: false },
    { label: '理解错误', id: 2, check: false },
    { label: '未识别问题中的错误', id: 3, check: false },
]);
const hd = ref([
    { label: '违法有害', id: 11, check: false },
    { label: '内容不专业', id: 12, check: false },
    { label: '推理错误', id: 13, check: false },
    { label: '计算错误', id: 14, check: false },
    { label: '内容不完整', id: 15, check: false },
    { label: '事实错误', id: 16, check: false },
]);

function open() {
    resetCheck();
    inputText.value = '';
    popup.value.open();
}

function close() {
    popup.value.close();
}

function send() {
    const text = getLabel();
    if (text) {
        emit('onSend', text);
        // close();
    } else {
        $api.msg('清输入反馈内容');
    }
}

function getLabel() {
    const wtArr = wt.value.filter((item) => item.check).map((item) => item.label);
    const hdArr = hd.value.filter((item) => item.check).map((item) => item.label);
    let str = '';
    wtArr.length ? (str += `问题：${wtArr.join(',')}. `) : '';
    hdArr.length ? (str += `回答：${hdArr.join(',')}. `) : '';
    inputText.value ? (str += `描述：${inputText.value}. `) : '';
    return str;
}

function resetCheck() {
    wt.value = wt.value.map((item) => {
        return { ...item, check: false }; // 创建新对象，确保更新响应式
    });
    hd.value = hd.value.map((item) => {
        return { ...item, check: false }; // 创建新对象，确保更新响应式
    });
}

function toggleCheck(id) {
    if (id < 10) {
        const newWt = wt.value.map((item) => {
            if (item.id === id) {
                return { ...item, check: !item.check };
            }
            return item;
        });
        wt.value = newWt;
    } else {
        const newHd = hd.value.map((item) => {
            if (item.id === id) {
                return { ...item, check: !item.check };
            }
            return item;
        });
        hd.value = newHd;
    }
}

defineExpose({ open, close });
</script>

<style lang="stylus" scoped>
.feeback
    padding: 38rpx 32rpx;
    .titile
        font-weight: 500;
        font-size: 36rpx;
        color: #333333;
        line-height: 42rpx;
        text-align: center;
        margin-bottom: 20rpx;
    .pop-h3
        font-weight: 600;
        font-size: 32rpx;
        color: #000000;
        line-height: 38rpx;
        text-align: left;
        padding: 8rpx 0
        margin-top: 32rpx
    .pop-content
        .item
            width: fit-content;
            height: 80rpx;
            background: #E8EAEE;
            border-radius: 12rpx 12rpx 12rpx 12rpx;
            text-align: center;
            line-height: 80rpx;
            padding: 0 36rpx
            border: 2rpx solid transparent;
            display: inline-block
            margin-right: 28rpx
            margin-top: 28rpx
        .active
            border: 2rpx solid #256BFA;
            color: #256BFA;
    .supplement
        height: 200rpx;
        background: #FFFFFF;
        border-radius: 20rpx 20rpx 20rpx 20rpx;
        margin-top: 28rpx
        padding: 20rpx 24rpx
    .btn
        height: 90rpx;
        background: #256BFA;
        border-radius: 12rpx 12rpx 12rpx 12rpx;
        font-weight: 500;
        font-size: 32rpx;
        color: #FFFFFF;
        line-height: 90rpx;
        text-align: center;
        margin-top: 62rpx
    .close-btn
        position: absolute;
        right: 32rpx;
        top: 32rpx;
        width: 56rpx;
        height: 56rpx;
    .close-btn::before
        position: absolute;
        left: 50%;
        top: 50%;
        content: '';
        width: 4rpx;
        height: 28rpx;
        border-radius: 2rpx
        background: #5A5A68;
        transform: translate(50%, -50%) rotate(-45deg) ;
    .close-btn::after
        position: absolute;
        left: 50%;
        top: 50%;
        content: '';
        width: 4rpx;
        height: 28rpx;
        border-radius: 2rpx
        background: #5A5A68;
        transform: translate(50%, -50%) rotate(45deg)
</style>