feat(approval): 优化退货审批流程并添加文件上传功能

- 在 `.env` 配置文件中启用调试工具 - 在 `.env.development`、`.env.staging` 和 `.env.production` 中添加后端地址配置 - 修改 `SubmitApprovalRequestData` 接口，合并 `orderId` 和 `goodsId` 为 `orderGoodsId` - 在 `approval/submit.vue` 中添加文件上传功能，并优化表单提交逻辑 - 在 `order/index.vue` 中添加订单商品状态显示和退款按钮条件判断
2025-04-08 09:22:21 +08:00 · 2025-04-08 09:22:21 +08:00 · 42eae0b1cd
parent bc46f40285
commit 42eae0b1cd
8 changed files with 159 additions and 100 deletions
--- a/.env
+++ b/.env
@ -7,4 +7,4 @@ VITE_APP_TITLE = 借还柜
 VITE_ROUTER_HISTORY = hash

 ## 是否开启 console 调试工具
-VITE_CONSOLE = false
+VITE_CONSOLE = true
--- a/.env.development
+++ b/.env.development
@ -5,3 +5,6 @@ VITE_BASE_URL = http://localhost:8090/api

 ## 开发环境域名和静态资源公共路径（一般 / 或 ./ 都可以）
 VITE_PUBLIC_PATH = /
+
+# 后端地址
+VITE_APP_BASE_API = '/dev-api'
--- a/.env.production
+++ b/.env.production
@ -4,3 +4,6 @@
 VITE_BASE_URL = '/shop-api/api'
 ## 打包构建静态资源公共路径（例如部署到 https://un-pany.github.io/mobvue/ 域名下就需要填写 /mobvue/）
 VITE_PUBLIC_PATH = /shop/
+
+# 后端地址
+VITE_APP_BASE_API = '/shop-back-end'
--- a/.env.staging
+++ b/.env.staging
@ -5,3 +5,6 @@ VITE_BASE_URL = '/shop-api/api'

 ## 打包构建静态资源公共路径（例如部署到 https://un-pany.github.io/ 域名下就需要填写 /）
 VITE_PUBLIC_PATH = /shop/
+
+# 后端地址
+VITE_APP_BASE_API = '/shop-back-end'
--- a/src/common/apis/approval/type.ts
+++ b/src/common/apis/approval/type.ts
@ -1,6 +1,5 @@
 export interface SubmitApprovalRequestData {
-  orderId: number
-  goodsId: number
+  orderGoodsId: number
  returnQuantity: number
  returnImages: string
 }
--- a/src/pages/approval/submit.vue
+++ b/src/pages/approval/submit.vue
@ -1,132 +1,162 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-import { showConfirmDialog, showSuccessToast } from 'vant'
+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>({
-  orderId: Number(route.query.orderId),
-  goodsId: Number(route.query.goodsId),
-  returnQuantity: 1,
-  returnImages: ''
+    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<Array<{ url: string }>>([])
+const fileList = ref<UploaderFileListItem[]>([])
+const uploading = ref(false)

 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
+    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
+    if (!validateForm()) return

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

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

-    if (code === 0) {
-      showSuccessToast('提交成功')
-      router.push({ name: 'approval-result', query: { id: formData.value.orderId } })
+        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
    }
-  } 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="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>
+        <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>
+            <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 class="submit-bar">
+                <van-button type="primary" block :loading="submitting" loading-text="提交中..." @click="handleSubmit">
+                    提交申请
+                </van-button>
+            </div>
+        </div>
    </div>
-  </div>
 </template>

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

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

 .upload-section {
-  margin: 20px 0;
+    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);
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: 16px;
+    background: #fff;
+    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.1);
 }
 </style>
--- a/src/pages/order/index.vue
+++ b/src/pages/order/index.vue
@ -30,13 +30,22 @@ const order = computed(() => {
  return orderStore.orders.find(o => o.orderId === orderId.value)
 })

+const orderGoodsStatusMap: Record<number, string> = {
+  5: '审核中',
+  2: '已退货',
+  6: '退货未通过'
+}
+
+const getOrderGoodsStatusText = (status: number) => {
+  return orderGoodsStatusMap[status] || ''
+}
+
 const handleRefund = (item: any) => {
-  if (order.value?.status !== 4) return
  router.push({
    path: '/approval/submit',
    query: {
-      goodsId: item.goodsInfo.goodsId,
-      orderId: order.value.orderId
+      orderGoodsId: item.orderGoods.orderGoodsId,
+      orderId: orderId.value,
    }
  })
 }
@ -85,8 +94,8 @@ onMounted(() => {
          <div class="action-row">
            <p>数量: {{ item.orderGoods.quantity }}</p>
            <p>小计: ¥{{ (item.orderGoods.price * item.orderGoods.quantity).toFixed(2) }}</p>
+            <template v-if="item.orderGoods.status === 1">
            <van-button 
-              v-if="order.status === 4"
              type="primary"
              size="mini"
              class="refund-btn"
@ -94,6 +103,14 @@ onMounted(() => {
            >
              退还
            </van-button>
+          </template>
+          <span 
+            v-if="[2,5,6].includes(item.orderGoods.status)"
+            class="status-text"
+            :class="`status-${item.orderGoods.status}`"
+          >
+            {{ getOrderGoodsStatusText(item.orderGoods.status) }}
+          </span>
          </div>
        </div>
      </van-cell>
@ -171,12 +188,15 @@ goods-info {
  color: #fff;
  background: #ee0a24;
  border-radius: 15px;
-  padding: 0 12px;
+  padding: 8px 20px;
+  font-size: 14px;
+  min-width: 80px;
 }

 .action-row {
  display: flex;
+  flex-direction: column;
  gap: 8px;
-  align-items: center;
+  align-items: flex-end;
 }
 </style>
--- a/types/auto/components.d.ts
+++ b/types/auto/components.d.ts
@ -30,5 +30,6 @@ declare module 'vue' {
    VanTabbar: typeof import('vant/es')['Tabbar']
    VanTabbarItem: typeof import('vant/es')['TabbarItem']
    VanTag: typeof import('vant/es')['Tag']
+    VanUploader: typeof import('vant/es')['Uploader']
  }
 }