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

<script setup lang="ts">
import { ref, watch } from 'vue'
import Compressor from 'compressorjs'
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'
import { useOrderStore } from '@/pinia/stores/order'
import { useWxStoreOutside } from '@/pinia/stores/wx'
const { VITE_APP_BASE_API } = import.meta.env;

const router = useRouter()
const route = useRoute()
const orderStore = useOrderStore()
const wxStore = useWxStoreOutside()

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

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;
            let compressedFile = file;
            try {
                compressedFile = await new Promise<File>((resolve, reject) => {
                    new Compressor(file, {
                        quality: 0.8,
                        maxWidth: 1280,
                        maxHeight: 1280,
                        success(result) {
                            resolve(new File([result], file.name, {
                                type: 'image/jpeg',
                                lastModified: Date.now()
                            }))
                        },
                        error(err) {
                            reject(err)
                        }
                    })
                })
            } catch (error) {
                console.error('压缩失败:', error)
            }

            const formData = new FormData();
            formData.append('file', compressedFile);

            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
        })
    } 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) {
            orderStore.getOrders(wxStore.openid);
            try {
                await showConfirmDialog({
                    title: "提交成功",
                    message: `退货申请已提交，等待管理员审核`
                })
            } catch (error) { }
            router.push('/order/' + orderId.value)
        }
    } 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-field v-model="formData.returnRemark" label="退货备注" type="textarea" rows="2" autosize />
            </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>