refactor(approval): 优化审批页面样式和逻辑

- 移除不必要的 `height: 100px` 样式
- 调整审批状态选项的文本
- 增加退款金额的验证逻辑
- 添加商品封面显示和历史审批数据填充功能
- 优化表单字段的只读状态和样式
- 调整提交按钮的定位和样式

src/pages/approval/handle.vue

@@ -12,9 +12,9 @@ const statusMap: { [key: number]: string } = {
 }
 
 const statusOptions = [
-    { text: '已通过', value: 1 },
+    { text: '待审核', value: 1 },
-    { text: '待审核', value: 2 },
+    { text: '通过', value: 2 },
-    { text: '已驳回', value: 3 }
+    { text: '驳回', value: 3 }
 ]
 import axios from "axios"
 import { handleApprovalApi } from '@/common/apis/approval'
@@ -44,8 +44,13 @@ const validateForm = () => {
         showConfirmDialog({ title: '错误', message: '审批单ID参数错误' })
         return false
     }
-    if (formData.value.returnAmount < 0) {
+    if (formData.value.returnAmount <= 0) {
-        showConfirmDialog({ title: '提示', message: '退款金额不能为负数' })
+        showConfirmDialog({ title: '提示', message: '退款金额需大于0' })
+        return false
+    }
+    if (null != approvalStore.currentApproval &&
+        formData.value.returnAmount > approvalStore.currentApproval.goodsPrice) {
+        showConfirmDialog({ title: '提示', message: '退款金额不能超过商品价格' })
         return false
     }
     if (formData.value.status === 3 && !formData.value.auditRemark) {
@@ -122,6 +127,24 @@ const previewImage = (url: string) => {
 onMounted(() => {
     if (!approvalStore.currentApproval) {
         router.push('/approval/list')
+    } else if (approvalStore.currentApproval.status !== 1) {
+        // 填充历史审批数据
+        formData.value = {
+            ...formData.value,
+            status: approvalStore.currentApproval.status,
+            returnAmount: approvalStore.currentApproval.returnAmount,
+            auditRemark: approvalStore.currentApproval.auditRemark,
+            auditImages: approvalStore.currentApproval.auditImages
+        }
+        
+        // 处理文件回显
+        if (approvalStore.currentApproval.auditImages) {
+            fileList.value = approvalStore.currentApproval.auditImages.split(',').map(url => ({
+                url,
+                status: 'done',
+                message: '已上传'
+            }))
+        }
     }
 })
 
@@ -159,9 +182,20 @@ const handleSubmit = async () => {
         <div class="content-wrapper">
             <van-cell-group>
                 <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-cell>
                 <van-cell title="退还数量" :value="approvalStore.currentApproval?.returnQuantity" />
                 <van-cell title="商品单价" :value="`¥${approvalStore.currentApproval?.goodsPrice}`" />
                 <van-cell title="当前状态" :value="statusMap[approvalStore.currentApproval?.status || 1]" />
+                <van-cell title="退还说明" :value="approvalStore.currentApproval?.returnRemark" />
             </van-cell-group>
 
             <van-cell-group class="image-section">
@@ -176,13 +210,31 @@ const handleSubmit = async () => {
             </van-cell-group>
 
             <van-cell-group>
-                <van-cell title="退还说明" :value="approvalStore.currentApproval?.returnRemark" />
-
                 <!-- 原有表单字段保持不变 -->
-                <van-field v-model="formData.returnAmount" label="退款金额" type="number" :min="0" />
+                <van-field 
-                <van-field :model-value="statusOptions.find(opt => opt.value === formData.status)?.text || ''"
+                  v-model="formData.returnAmount" 
-                    label="审批结果" readonly clickable placeholder="请选择审批结果" @click="showStatusPicker = true" />
+                  :readonly="approvalStore.currentApproval?.status !== 1" 
-                <van-field v-model="formData.auditRemark" label="审核说明" type="textarea" rows="2" autosize />
+                  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">
@@ -204,8 +256,15 @@ const handleSubmit = async () => {
                 </van-cell>
             </van-cell-group>
 
-            <div class="submit-bar">
+            <div class="submit-bar"
-                <van-button type="primary" block :loading="submitting" loading-text="提交中..." @click="handleSubmit">
+                  v-if="approvalStore.currentApproval?.status !== 2">
+                <van-button 
+                  type="primary" 
+                  block 
+                  :loading="submitting" 
+                  loading-text="提交中..." 
+                  @click="handleSubmit"
+                >
                     提交审批
                 </van-button>
             </div>
@@ -250,12 +309,39 @@ const handleSubmit = async () => {
 }
 
 .submit-bar {
-    position: fixed;
+    position: sticky;
-    bottom: 0;
+    bottom: 20px;
-    left: 0;
-    right: 0;
     padding: 16px;
     background: #fff;
     box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.1);
+    border-radius: 8px;
+    margin: 0 16px;
+    z-index: 1;
+}
+
+.content-wrapper {
+    padding-bottom: 100px;
+}
+
+.audit-remark-field::v-deep .van-field__control {
+  background-color: #fffbe6;
+  padding: 8px;
+  border-radius: 4px;
+}
+
+.clickable-status-field:not(:disabled)::v-deep .van-field__control {
+  cursor: pointer;
+  transition: all 0.3s ease;
+  background-color: #f7f8fa;
+}
+
+.clickable-status-field:not(:disabled):hover::v-deep .van-field__control {
+  background-color: #f2f3f5;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+}
+
+.clickable-status-field:not(:disabled):active::v-deep .van-field__control {
+  background-color: #ebedf0;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
 }
 </style>

src/pages/cabinet/index.vue

@@ -251,7 +251,6 @@ loadCabinetDetail()
     display: flex;
     flex-direction: column;
     justify-content: space-between;
-    height: 100px;
     position: relative;
     padding-left: 3px;
 }