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

<template>
    <view class="file-info bg-white">
        <view class="file-info-container">
            <cy-upload v-model:filename="form.imgInfo" :limit="3" />
            <u-textarea v-model="form.remark" placeholder="上传说明..." autoHeight style="min-height: 60px;"></u-textarea>

            <view class="flex flex-a-c flex-j-c">
                <u-button class="mt-24" type="primary" @click="handleUpload">上传(最多上传3张)</u-button>
            </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="!fileList?.length">还没有上传记录</view>
            <view class="file-info-item" v-for="item in fileList" :key="item.id" v-else>
                <view class="file-info-item-img flex flex-a-c">
                    <u-image v-for="(img,index) in item.imgInfo" :src="img" width="90" height="90" style="margin-right: 10px;" :key="img" @click="handlePreview(item.imgInfo,index)"></u-image>
                </view>
                <view class="file-info-item-info mt-10 font-14">
                    <view class="file-info-item-info-name">上传说明：{{ item.remark }}</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({
    imgInfo: [],
    remark: ''
})

const props = defineProps({
    orderId: {
        type: String,
        default: ''
    },
    annexType: {
        type: Number,
        default: 1
    },
    isbn: {
        type: String,
        default: ''
    }
})
//获取附件信息
const fileList = ref([])
function getFileList() {
    uni.$u.http.get('/app/orderinfo/getOrderAnnexList', {
        params: {
            orderId: props.orderId,
            annexType: props.annexType,
            isbn: props.isbn
        }
    }).then(res => {
        if (res.code == 200) {
            fileList.value = res.data
        }
    })
}
getFileList()

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


const handleUpload = () => {
    console.log(form.value)
    let data = {
        orderId: props.orderId,
        annexType: props.annexType,
        isbn: props.isbn,
        ...form.value
    }
    uni.$u.http.post('/app/orderinfo/setOrderAnnex', data).then(res => {
        if (res.code == 200) {
            uni.$u.toast('上传成功')
            form.value.imgInfo = []
            form.value.remark = ''
            getFileList()
        } else {
            uni.$u.toast(res.msg)
        }
    })
}
</script>
<style lang="scss" scoped>
.file-info-container {
    padding: 20rpx 30rpx;
    box-sizing: border-box;

}

.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>