From 42eae0b1cd04db723dd4e346f90c27ee0cdd1457 Mon Sep 17 00:00:00 2001
From: dzq <dzq@ys.com>
Date: Tue, 8 Apr 2025 09:22:21 +0800
Subject: [PATCH] =?UTF-8?q?feat(approval):=20=E4=BC=98=E5=8C=96=E9=80=80?=
 =?UTF-8?q?=E8=B4=A7=E5=AE=A1=E6=89=B9=E6=B5=81=E7=A8=8B=E5=B9=B6=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E6=96=87=E4=BB=B6=E4=B8=8A=E4=BC=A0=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在 `.env` 配置文件中启用调试工具
- 在 `.env.development`、`.env.staging` 和 `.env.production` 中添加后端地址配置
- 修改 `SubmitApprovalRequestData` 接口，合并 `orderId` 和 `goodsId` 为 `orderGoodsId`
- 在 `approval/submit.vue` 中添加文件上传功能，并优化表单提交逻辑
- 在 `order/index.vue` 中添加订单商品状态显示和退款按钮条件判断
---
 .env                             |   2 +-
 .env.development                 |   3 +
 .env.production                  |   3 +
 .env.staging                     |   3 +
 src/common/apis/approval/type.ts |   3 +-
 src/pages/approval/submit.vue    | 210 ++++++++++++++++++-------------
 src/pages/order/index.vue        |  34 +++--
 types/auto/components.d.ts       |   1 +
 8 files changed, 159 insertions(+), 100 deletions(-)

diff --git a/.env b/.env
index 389397f..db4e7e9 100644
--- a/.env
+++ b/.env
@@ -7,4 +7,4 @@ VITE_APP_TITLE = 借还柜
 VITE_ROUTER_HISTORY = hash
 
 ## 是否开启 console 调试工具
-VITE_CONSOLE = false
+VITE_CONSOLE = true
diff --git a/.env.development b/.env.development
index 63acfaa..391194a 100644
--- 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'
\ No newline at end of file
diff --git a/.env.production b/.env.production
index eda4c37..447265b 100644
--- 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'
\ No newline at end of file
diff --git a/.env.staging b/.env.staging
index 039f057..6eb62b3 100644
--- 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'
\ No newline at end of file
diff --git a/src/common/apis/approval/type.ts b/src/common/apis/approval/type.ts
index 3d771b2..11e1de1 100644
--- 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
 }
diff --git a/src/pages/approval/submit.vue b/src/pages/approval/submit.vue
index a83f49a..6c2d2eb 100644
--- 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(',')
-    
-    const { code } = await submitApprovalApi(formData.value)
-    
-    if (code === 0) {
-      showSuccessToast('提交成功')
-      router.push({ name: 'approval-result', query: { id: formData.value.orderId } })
+    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
     }
-  } 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>
\ No newline at end of file
diff --git a/src/pages/order/index.vue b/src/pages/order/index.vue
index 5a43bc5..aace50f 100644
--- 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,15 +94,23 @@ 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" 
+              type="primary"
               size="mini"
               class="refund-btn"
               @click="handleRefund(item)"
             >
               退还
             </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>
\ No newline at end of file
diff --git a/types/auto/components.d.ts b/types/auto/components.d.ts
index fbb744a..caa3761 100644
--- 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']
   }
 }