shuhi-app/pages/index/detail/components/ReviewInfo.vue

<template>
    <view class="file-info bg-white">
        <view class="file-info-container">
            <view class="origin-result" style="margin-bottom: 30rpx;">
                <text class="origin-result-item-title">原审核结果：</text>
                <text class="origin-result-item-content">{{ detail.oldAudit }}</text>
            </view>
            <cy-upload v-model:filename="form.reviewImg" :maxCount="3" />

            <view class="mt-20 bg-white flex flex-j-a flex-a-c" style="padding: 20rpx; border-radius: 10rpx">
                <text>复审结果：</text>
                <view class="u-page__tag-item" v-for="(item, idx) in auditList" :key="idx">
                    <u-tag :text="item.label" :plain="form.reviewAuditSts != item.sts" type="primary" :name="item.sts"
                        :class="{ disabled: item.sts == 2 }" @click="radioClick(item.sts)">
                    </u-tag>
                </view>
            </view>
            <view class="flex flex-a-c flex-wrap mb-20" v-if="form.reviewAuditSts == 3">
                <view class="mr-10 reason-item" :class="{ selected: form.auditList.includes(item.label) }"
                    v-for="(item, idx) in reasonList2" :key="idx" @click="toggleReason2(item)">
                    {{ item.label }}
                </view>
            </view>

            <u-textarea v-model="form.reviewRemark" placeholder="上传说明..." autoHeight
                style="min-height: 60px;"></u-textarea>

            <!-- 快速填入的功能 -->
            <view class="quick-input">
                <view class="quick-input-item">快速填入</view>
                <view class="flex flex-a-c flex-wrap">
                    <view class="mr-10 reason-item" v-for="(item, idx) in reasonList" :key="idx"
                        @click="toggleReason(item)">
                        {{ item.label }}
                    </view>
                </view>
            </view>
        </view>

        <view class="file-info-list">
            <view class="file-info-list-title text-center">已上传记录</view>
            <view class="file-info-list-content mt-24 mb-24 text-center" v-if="!detail.imgList?.length">还没有上传记录</view>
            <view class="file-info-item" v-for="item in detail.imgList" :key="item.id" v-else>
                <view class="file-info-item-img flex flex-a-c" v-if="item.reviewImg">
                    <u-image v-for="(img, index) in item.reviewImg" :src="img" width="90" height="90"
                        style="margin-right: 10px;" :key="img" @click="handlePreview(item.reviewImg, index)"></u-image>
                </view>
                <view class="file-info-item-info mt-10 font-14">
                    <view class="file-info-item-info-name">上传说明：{{ item.reviewRemark }}</view>
                    <view class="file-info-item-info-name mt-10">
                        <text>{{ item.createTime }} </text>
                        <text class="ml-20">{{ item.createName }}</text>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref } from 'vue';
import cyUpload from '@/components/cy-upload/index.vue';

const form = ref({
    reviewImg: [],
    reviewRemark: '',
    reviewAudit: '',
    auditList: [],
    reviewAuditSts: 3,
})

const props = defineProps({
    detail: {
        type: Object,
        default: () => ({})
    }
})

let reasonList = ref([
    { sts: 3, label: "无防伪标/假防伪标" },
    { sts: 3, label: "无防伪页/衬页" },
    { sts: 3, label: "复印书" },
    { sts: 3, label: "印刷呈锯齿状/断墨" },
]);

let reasonList2 = ref([
    { sts: 3, label: "明显泛黄水印/发霉/明显异味" },
    { sts: 3, label: "老化泛黄褪色/污渍" },
    { sts: 3, label: "明显破损/脱胶缺页/书籍变型" },
    { sts: 3, label: "无此书" },
    { sts: 3, label: "印刷不清晰" },
    { sts: 3, label: "无防伪" },
    { sts: 3, label: "无外护封/无ISBN" },
    { sts: 3, label: "无此书多其他书" },
    { sts: 3, label: "笔记杂乱/习题做完" },
    { sts: 3, label: "有笔记贴" },
    { sts: 3, label: "套装缺册" },
    { sts: 3, label: "听力无光盘" },
    { sts: 3, label: "图书馆/藏书印章" },
]);

function toggleReason2(item) {
    if (form.value.auditList.includes(item.label)) {
        form.value.auditList = form.value.auditList.filter((v) => v != item.label);
    } else {
        form.value.auditList.push(item.label);
    }

    form.value.reviewAudit = form.value.auditList.join(',');
}

//预览图片
const handlePreview = (imgList, index) => {
    uni.previewImage({
        urls: imgList,
        current: index
    })
}

const toggleReason = (item) => {
    form.value.reviewAuditSts = item.sts;
    form.value.reviewRemark = item.label;
}

const auditList = ref([
    { sts: 1, label: "品相良好" },
    { sts: 2, label: "品相一般", disabled: true },
    { sts: 3, label: "品相极差" },
]);

// 定义方法，注意在 setup 中不需要 this，直接访问响应式引用  
function radioClick(sts) {
    if (sts == 2) return;
    form.value.reviewAuditSts = sts;
    // 选中“品相良好”时，清空“品相极差”下已选择的原因
    if (sts === 1) {
        form.value.auditList = [];
        form.value.reviewAudit = '';
    }
}

defineExpose({
    form: form.value,
})

</script>
<style lang="scss" scoped>
.file-info-container {
    padding: 20rpx 30rpx;
    box-sizing: border-box;

}

.disabled {
    background-color: #d0d0d0;
    cursor: not-allowed;
}

.quick-input-item {
    margin: 30rpx 0;
    font-weight: 600;
    font-size: 15px;
}

.reason-item {
    background-color: #f0f0f0;
    border-radius: 4rpx;
    padding: 14rpx 20rpx;
    margin-bottom: 16rpx;

    &.selected {
        background-color: #d0e8ff;
    }
}

.file-info-item {
    padding: 20rpx;
    border-bottom: 1px solid #e5e5e5;
}

.file-info-list-title {
    background-color: #e5e5e5;
    padding: 10rpx 0;
    margin-top: 20px;
}

.file-info-list-content {
    color: #999;
    min-height: 100px;
}
</style>