132 lines
3.1 KiB
Vue
132 lines
3.1 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
import { ref } from 'vue'
|
||
|
|
import { showConfirmDialog, showSuccessToast } from 'vant'
|
||
|
|
import { submitApprovalApi } from '@/common/apis/approval'
|
||
|
|
import type { SubmitApprovalRequestData } from '@/common/apis/approval/type'
|
||
|
|
import { useRouter } from 'vue-router'
|
||
|
|
|
||
|
|
const router = useRouter()
|
||
|
|
const route = useRoute()
|
||
|
|
|
||
|
|
const formData = ref<SubmitApprovalRequestData>({
|
||
|
|
orderId: Number(route.query.orderId),
|
||
|
|
goodsId: Number(route.query.goodsId),
|
||
|
|
returnQuantity: 1,
|
||
|
|
returnImages: ''
|
||
|
|
})
|
||
|
|
|
||
|
|
const submitting = ref(false)
|
||
|
|
const fileList = ref<Array<{ url: string }>>([])
|
||
|
|
|
||
|
|
const validateForm = () => {
|
||
|
|
if (!formData.value.orderId || isNaN(formData.value.orderId)) {
|
||
|
|
showConfirmDialog({ title: '错误', message: '订单ID参数错误' })
|
||
|
|
return false
|
||
|
|
}
|
||
|
|
if (!formData.value.goodsId || isNaN(formData.value.goodsId)) {
|
||
|
|
showConfirmDialog({ title: '错误', message: '商品ID参数错误' })
|
||
|
|
return false
|
||
|
|
}
|
||
|
|
if (formData.value.returnQuantity < 1) {
|
||
|
|
showConfirmDialog({ title: '提示', message: '退还数量至少为1' })
|
||
|
|
return false
|
||
|
|
}
|
||
|
|
return true
|
||
|
|
}
|
||
|
|
|
||
|
|
const handleSubmit = async () => {
|
||
|
|
if (!validateForm()) return
|
||
|
|
|
||
|
|
submitting.value = true
|
||
|
|
try {
|
||
|
|
formData.value.returnImages = fileList.value.map(f => f.url).join(',')
|
||
|
|
|
||
|
|
const { code } = await submitApprovalApi(formData.value)
|
||
|
|
|
||
|
|
if (code === 0) {
|
||
|
|
showSuccessToast('提交成功')
|
||
|
|
router.push({ name: 'approval-result', query: { id: formData.value.orderId } })
|
||
|
|
}
|
||
|
|
} catch (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="() => {}"
|
||
|
|
/>
|
||
|
|
</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>
|