admin123
/
shop-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

- 移除不必要的 `height: 100px` 样式
- 调整审批状态选项的文本
- 增加退款金额的验证逻辑
- 添加商品封面显示和历史审批数据填充功能
- 优化表单字段的只读状态和样式
- 调整提交按钮的定位和样式
This commit is contained in:
dzq 2025-04-10 08:19:05 +08:00
parent ac5d9292ca
commit adf5bc4d20
2 changed files with 103 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

120
src/pages/approval/handle.vue
View File

@ -12,9 +12,9 @@ const statusMap: { [key: number]: string } = {
}
const statusOptions = [
{ text: '已通过', value: 1 },
{ text: '待审核', value: 2 },
{ text: '已驳回', value: 3 }
{ text: '待审核', value: 1 },
{ text: '通过', value: 2 },
{ 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) {
showConfirmDialog({ title: '提示', message: '退款金额不能为负数' })
if (formData.value.returnAmount <= 0) {
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 :model-value="statusOptions.find(opt => opt.value === formData.status)?.text || ''"
label="审批结果" readonly clickable placeholder="请选择审批结果" @click="showStatusPicker = true" />
<van-field v-model="formData.auditRemark" label="审核说明" type="textarea" rows="2" autosize />
<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">
@ -204,8 +256,15 @@ const handleSubmit = async () => {
</van-cell>
</van-cell-group>
<div class="submit-bar">
<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>
@ -250,12 +309,39 @@ const handleSubmit = async () => {
}
.submit-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
position: sticky;
bottom: 20px;
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>

1
src/pages/cabinet/index.vue
View File

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