feat(approval): 添加用户信息和开柜功能

在审批页面中新增了用户信息展示（姓名、手机号、用户ID），并添加了打开柜子的功能按钮。同时优化了代码结构和样式，提升了用户体验。
2025-04-17 16:40:04 +08:00 · 2025-04-17 16:40:04 +08:00 · e777d1e931
parent 5ad9456a0f
commit e777d1e931
4 changed files with 82 additions and 69 deletions
--- a/public/cover.png
+++ b/public/cover.png
--- a/src/common/apis/approval/type.ts
+++ b/src/common/apis/approval/type.ts
@ -61,6 +61,14 @@ export interface ReturnApprovalEntity {
  goodsName: string
  /** 封面图URL */
  coverImg: string
+  /** 手机号 */
+  mobile: string
+  /** 用户id */
+  userid: string
+  /** 用户姓名 */
+  name: string
+  /** 是否内部用户（0否 1汇邦云用户 2企业微信用户） */
+  isInternal: number
 }

 export type SubmitApprovalResponseData = ApiResponseMsgData<{
--- a/src/pages/approval/handle.vue
+++ b/src/pages/approval/handle.vue
@ -1,23 +1,10 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-import { showConfirmDialog, showSuccessToast, showToast, UploaderFileListItem, Popup, Picker } from 'vant'
+import { showConfirmDialog, showSuccessToast, showFailToast, showToast, UploaderFileListItem, Popup, Picker } from 'vant'

-const showStatusPicker = ref(false)
-const showPreview = ref(false)
-const currentPreviewImage = ref('')
-const statusMap: { [key: number]: string } = {
-    1: '待审核',
-    2: '已通过',
-    3: '已驳回'
-}
-
-const statusOptions = [
-    { text: '待审核', value: 1 },
-    { text: '通过', value: 2 },
-    { text: '驳回', value: 3 }
-]
 import axios from "axios"
 import { handleApprovalApi } from '@/common/apis/approval'
+import { openCabinetApi } from '@/common/apis/shop'
 import type { HandleApprovalRequestData } from '@/common/apis/approval/type'
 import { useRoute, useRouter } from 'vue-router'
 import { useApprovalStore } from '@/pinia/stores/approval'
@ -38,7 +25,22 @@ const formData = ref<HandleApprovalRequestData>({
 const submitting = ref(false)
 const fileList = ref<UploaderFileListItem[]>([])
 const uploading = ref(false)
+const isButtonDisabled = ref(false)

+const showStatusPicker = ref(false)
+const showPreview = ref(false)
+const currentPreviewImage = ref('')
+const statusMap: { [key: number]: string } = {
+    1: '待审核',
+    2: '已通过',
+    3: '已驳回'
+}
+
+const statusOptions = [
+    { text: '待审核', value: 1 },
+    { text: '通过', value: 2 },
+    { text: '驳回', value: 3 }
+]
 const validateForm = () => {
    if (!formData.value.approvalId || isNaN(formData.value.approvalId)) {
        showConfirmDialog({ title: '错误', message: '审批单ID参数错误' })
@ -153,6 +155,32 @@ onMounted(() => {
    }
 })

+const handleOpenCabinet = async () => {
+    if (!approvalStore.currentApproval?.orderId || !approvalStore.currentApproval?.orderGoodsId) {
+        showFailToast('缺少订单信息')
+        return
+    }
+
+    isButtonDisabled.value = true
+    try {
+        const result = await openCabinetApi(
+            approvalStore.currentApproval.orderId,
+            approvalStore.currentApproval.orderGoodsId
+        )
+        if (result.code !== 0) {
+            showFailToast(result.msg || '开启失败')
+            return
+        }
+        showSuccessToast('柜口已开启')
+    } catch (error) {
+        showFailToast('请求失败')
+    } finally {
+        setTimeout(() => {
+            isButtonDisabled.value = false
+        }, 5000)
+    }
+}
+
 const handleSubmit = async () => {
    if (!validateForm()) return

@ -192,16 +220,13 @@ const handleSubmit = async () => {

        <div class="content-wrapper">
            <van-cell-group>
+                <van-cell title="姓名" :value="approvalStore.currentApproval?.name" />
+                <van-cell title="手机号" :value="approvalStore.currentApproval?.mobile" />
+                <van-cell title="用户id" :value="approvalStore.currentApproval?.userid" />
                <van-cell title="商品名称" :value="approvalStore.currentApproval?.goodsName" />
                <van-cell title="商品封面" v-if="approvalStore.currentApproval?.coverImg">
-                  <van-image 
-                    :src="approvalStore.currentApproval.coverImg"
-                    fit="cover"
-                    width="80"
-                    height="80"
-                    @click="previewImage(approvalStore.currentApproval.coverImg)"
-                    style="margin-top: 8px"
-                  />
+                    <van-image :src="approvalStore.currentApproval.coverImg" fit="cover" width="80" height="80"
+                        @click="previewImage(approvalStore.currentApproval.coverImg)" style="margin-top: 8px" />
                </van-cell>
                <van-cell title="退还数量" :value="approvalStore.currentApproval?.returnQuantity" />
                <van-cell title="商品单价" :value="`¥${approvalStore.currentApproval?.goodsPrice}`" />
@ -222,30 +247,17 @@ const handleSubmit = async () => {

            <van-cell-group>
                <!-- 原有表单字段保持不变 -->
-                <van-field 
-                  v-model="formData.returnAmount" 
-                  :readonly="approvalStore.currentApproval?.status !== 1" 
-                  label="退款金额" 
-                  type="number" 
-                  class="audit-remark-field"
-                  :min="0" 
-                />
-                <van-field
-                  :model-value="statusOptions.find(opt => opt.value === formData.status)?.text || ''"
-                  label="审批结果"
-                  readonly
-                  @click="showStatusPicker = true"
-                  :disabled="approvalStore.currentApproval?.status !== 1"
-                  class="clickable-status-field"
-                />
-                <van-field 
-                  v-model="formData.auditRemark" 
-                  label="审核说明" 
-                  type="textarea" 
-                  rows="2" 
-                  autosize
-                  class="audit-remark-field"
-                />
+                <van-button type="primary" size="small"
+                    @click="handleOpenCabinet" :disabled="isButtonDisabled" style="margin-bottom: 12px">
+                    打开柜子
+                </van-button>
+                <van-field v-model="formData.returnAmount" :readonly="approvalStore.currentApproval?.status !== 1"
+                    label="退款金额" type="number" class="audit-remark-field" :min="0" />
+                <van-field :model-value="statusOptions.find(opt => opt.value === formData.status)?.text || ''"
+                    label="审批结果" readonly @click="showStatusPicker = true"
+                    :disabled="approvalStore.currentApproval?.status !== 1" class="clickable-status-field" />
+                <van-field v-model="formData.auditRemark" label="审核说明" type="textarea" rows="2" autosize
+                    class="audit-remark-field" />
            </van-cell-group>

            <van-popup v-model:show="showStatusPicker" position="bottom">
@ -267,15 +279,8 @@ const handleSubmit = async () => {
                </van-cell>
            </van-cell-group>

-            <div class="submit-bar"
-                  v-if="approvalStore.currentApproval?.status !== 2">
-                <van-button 
-                  type="primary" 
-                  block 
-                  :loading="submitting" 
-                  loading-text="提交中..." 
-                  @click="handleSubmit"
-                >
+            <div class="submit-bar" v-if="approvalStore.currentApproval?.status !== 2">
+                <van-button type="primary" block :loading="submitting" loading-text="提交中..." @click="handleSubmit">
                    提交审批
                </van-button>
            </div>
--- a/src/pages/product/ProductList.vue
+++ b/src/pages/product/ProductList.vue
@ -123,7 +123,7 @@ function handleCheckout() {
 <template>
  <div class="shop">
    <div class="shop-header" :style="{ height: `${headerHeight}px` }">
-      <van-image :src="`${publicPath}c63.png`" class="shop-cover" fit="cover" />
+      <van-image :src="`${publicPath}cover.png`" class="shop-cover" fit="cover" />
    </div>
    <div class="product-container">
      <!-- 左侧分类导航 -->