shop-web/src/pages/approval/submit.vue

<script setup lang="ts">
import { ref, watch } from 'vue'
import { showConfirmDialog, showSuccessToast, showToast, UploaderFileListItem } from 'vant'
import axios from "axios"
import { submitApprovalApi } from '@/common/apis/approval'
import type { SubmitApprovalRequestData } from '@/common/apis/approval/type'
import { useRouter } from 'vue-router'
const { VITE_APP_BASE_API } = import.meta.env;

const router = useRouter()
const route = useRoute()

const formData = ref<SubmitApprovalRequestData>({
    orderGoodsId: Number(route.query.orderGoodsId),
    returnQuantity: 1,
    returnImages: ''
})

watch(() => route.query.orderGoodsId, (newVal) => {
    formData.value.orderGoodsId = newVal ? Number(newVal) : NaN
})

const orderId = ref(Number(route.query.orderId))
console.log('orderId: ', orderId.value)
watch(() => route.query.orderId, (newVal) => {
    orderId.value = newVal? Number(newVal) : NaN 
    console.log('orderId: ', orderId.value)
})

const submitting = ref(false)
const fileList = ref<UploaderFileListItem[]>([])
const uploading = ref(false)

const validateForm = () => {
    if (!formData.value.orderGoodsId || isNaN(formData.value.orderGoodsId)) {
        showConfirmDialog({ title: '错误', message: '订单ID参数错误' })
        return false
    }
    if (formData.value.returnQuantity < 1) {
        showConfirmDialog({ title: '提示', message: '退还数量至少为1' })
        return false
    }
    return true
}

const handleFileUpload = async (items: UploaderFileListItem | UploaderFileListItem[]) => {
    const files = Array.isArray(items) ? items : [items]
    uploading.value = true
    try {
        const uploadPromises = files.map(async (item) => {
            item.status = 'uploading'
            item.message = '上传中...'
            const file = item.file as File
            const formData = new FormData()
            formData.append('file', file)

            const { data } = await axios.post<{
                code: number
                data: { url: string }
                message?: string
            }>(VITE_APP_BASE_API + '/file/upload', formData, {
                headers: { 'Content-Type': 'multipart/form-data' }
            })

            if (data.code !== 0) {
                throw new Error(data.message || '文件上传失败')
            }
            return { url: data.data.url }
        })

        const urls = await Promise.all(uploadPromises)
        files.forEach((item, index) => {
            item.status = 'done'
            item.message = ''
            item.url = urls[index].url
        })
        showToast('上传成功')
    } catch (error) {
        showConfirmDialog({
            title: '上传失败',
            message: error instanceof Error ? error.message : '未知错误'
        })
    } finally {
        uploading.value = false
    }
}

const handleSubmit = async () => {
    if (!validateForm()) return

    submitting.value = true
    try {
        formData.value.returnImages = fileList.value.map(item => item.url).join(',')

        const { code, data } = await submitApprovalApi(formData.value)

        if (code === 0) {
            showSuccessToast('提交成功')
            router.push('/order/' + orderId)
        }
    } catch (error) {
        console.error('提交失败:', error)
        showConfirmDialog({
            title: '提交失败',
            message: error instanceof Error ? error.message : '网络请求异常'
        })
    } finally {
        submitting.value = false
    }
}
</script>

<template>
    <div class="approval-container">
        <van-nav-bar title="退货审批" left-text="返回" left-arrow fixed @click-left="() => router.go(-1)" />

        <div class="content-wrapper">
            <van-cell-group>
                <!-- 移除订单ID和商品ID的输入框 -->
                <van-field v-model="formData.returnQuantity" label="退还数量" type="number" :min="1" />
            </van-cell-group>

            <van-cell-group class="upload-section">
                <van-cell title="凭证图片">
                    <template #extra>
                        <van-uploader v-model="fileList" multiple max-count="3" :after-read="handleFileUpload" />
                    </template>
                </van-cell>
            </van-cell-group>

            <div class="submit-bar">
                <van-button type="primary" block :loading="submitting" loading-text="提交中..." @click="handleSubmit">
                    提交申请
                </van-button>
            </div>
        </div>
    </div>
</template>

<style scoped>
.approval-container {
    padding: 12px 16px;
}

.content-wrapper {
    padding-top: 46px;
}

.upload-section {
    margin: 20px 0;
}

.submit-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px;
    background: #fff;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.1);
}
</style>