dz-app/components/mx-question-content/components/mx-question-subjective.vue

<template>
    <view class="py-20 fx-col gap-20">
        <view v-if="!disabled" class="fx-row fx-bet-cen">
            <view class="fx-row">
                <!-- NOTE：uv-subsection必须有外部宽度才能正常工作 -->
                <mx-subsection v-model="current" :list="list" key-name="text" width="50vw" @change="handleTypeChange">
                    <template #="{item,style}">
                        <view class="flex flex-row items-center gap-5">
                            <uv-icon :name="item.icon" :color="style.color"/>
                            <text>{{ item.text }}</text>
                        </view>
                    </template>
                </mx-subsection>
            </view>
            <uv-tags icon="reload" type="error" plain text="重做" custom-style="height:28px" @click="handleRedo"/>
        </view>
        <uv-textarea v-if="current==0" :model-value="modelValue" :disabled="disabled" height="150" :count="!disabled"
                     maxlength="500" :placeholder="disabled?'':'这里输入答案'"
                     @update:modelValue="handleAnswerChange"/>
        <view v-else class="h-[169px] p-[10px] box-border mx-border rounded fx-col relative">
            <text v-if="imageLimit>1" class="absolute bottom-[2px] right-[5px] text-tips text-2xs">
                {{ attachments.length }}/{{ imageLimit }}
            </text>
            <view class="flex-1 grid gap-10" :class="`grid-cols-${imageLimit}`">
                <view v-for="(i, idx) in attachments">
                    <uv-image :src="i" width="100%" height="auto" mode="widthFix"
                              @click="previewImage(attachments, idx)"/>
                </view>
                <view v-if="allowImages&&!disabled" class="fx-col fx-cen-cen">
                    <uv-icon name="plus" size="60" color="var(--light-color)" @click="handleAddImage"/>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
import {ref, onMounted, computed} from 'vue'
import {createPropDefine} from "@/utils";
import {empty} from "@/uni_modules/uv-ui-tools/libs/function/test";
import {toast} from "@/uni_modules/uv-ui-tools/libs/function";
import {useChooseImage} from "@/hooks/useChooseImage";

const props = defineProps({
    modelValue: createPropDefine(''),
    attachments: createPropDefine([], [Array, String]),
    disabled: createPropDefine(false, Boolean)
})
const emits = defineEmits(['update:modelValue', 'update:attachments'])

const current = ref(0)
const imageLimit = ref(3)
const list = [
    {icon: 'edit-pen', text: '手动答题'},
    {icon: 'camera', text: '拍照答题'}
]
const {chooseImage, previewImage} = useChooseImage()
const noImages = computed(() => empty(props.attachments))
const allowImages = computed(() => imageLimit.value - props.attachments.length)

const handleTypeChange = (index) => {
    if (index == 1 && noImages.value) handleAddImage()
}

const handleAddImage = () => {
    if (allowImages.value <= 0) return toast(`最多上传${imageLimit.value}张图片!`)
    chooseImage((result) => {
        const arr = []
        if (!empty(props.attachments)) arr.push(...props.attachments)
        handleAttachmentsChange(arr.concat(result.msg))
    }, 6, 1)
}

const handleAnswerChange = (val) => {
    emits('update:modelValue', val)
    emits('update:attachments', [])
}

const handleAttachmentsChange = (val) => {
    emits('update:modelValue', '')
    emits('update:attachments', val)
}

const handleRedo = () => {
    emits('update:modelValue', '')
    emits('update:attachments', [])
}

onMounted(() => {
    // 初始化时，根据当前答题情况选中
    if (!empty(props.attachments)) current.value = 1
})
</script>

<style scoped>

</style>