fix: 移动端表单优化

1. 新增页面必填项标记
   - expense/Add.vue: 支出标题、支出类型、支出金额添加红色星号必填标记
   - 其他使用 van-form 的页面已有 required 属性标记

2. 错误提示优化
   - 将 showToast 改为 showFailToast 显示错误提示
   - showFailToast 使用红色背景,错误信息更清晰可见
   - 涉及文件:
     - expense/Add.vue
     - requirement/Add.vue
     - receivable/Add.vue
     - project/Add.vue
     - customer/Add.vue
     - my/ChangePassword.vue
This commit is contained in:
zhangjf 2026-02-23 12:56:52 +08:00
parent b5a954f008
commit 69f437dbb3
6 changed files with 31 additions and 26 deletions

View File

@ -92,7 +92,7 @@
<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { showToast, showSuccessToast } from 'vant'
import { showFailToast, showSuccessToast } from 'vant'
import { createCustomer } from '@/api'
const router = useRouter()
@ -129,7 +129,7 @@ const onLevelConfirm = ({ selectedOptions }: any) => {
const onSubmit = async () => {
if (!form.value.customerName) {
showToast('请输入客户名称')
showFailToast('请输入客户名称')
return
}
@ -148,7 +148,7 @@ const onSubmit = async () => {
showSuccessToast('提交成功')
router.back()
} catch (e: any) {
showToast(e.message || '提交失败')
showFailToast(e.message || '提交失败')
} finally {
submitting.value = false
}

View File

@ -10,12 +10,12 @@
<div class="form-card mac-card fade-in-up">
<div class="form-group">
<label>支出标题</label>
<label>支出标题 <span class="required">*</span></label>
<input v-model="form.title" placeholder="输入标题" class="mac-input" />
</div>
<div class="form-group">
<label>支出类型</label>
<label>支出类型 <span class="required">*</span></label>
<div class="mac-select" @click="showTypePicker = true">
<span :class="{ placeholder: !form.expenseTypeName }">
{{ form.expenseTypeName || '选择类型' }}
@ -25,7 +25,7 @@
</div>
<div class="form-group">
<label>支出金额</label>
<label>支出金额 <span class="required">*</span></label>
<div class="amount-input">
<span class="currency">¥</span>
<input v-model="form.amount" type="number" placeholder="0.00" />
@ -69,7 +69,7 @@
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { showToast, showSuccessToast } from 'vant'
import { showToast, showSuccessToast, showFailToast } from 'vant'
import { createExpense, getExpenseTypeTree } from '@/api'
const router = useRouter()
@ -102,15 +102,15 @@ const onDateConfirm = ({ selectedValues }: any) => {
const handleSubmit = async () => {
if (!form.title) {
showToast('请输入支出标题')
showFailToast('请输入支出标题')
return
}
if (!form.expenseTypeId) {
showToast('请选择支出类型')
showFailToast('请选择支出类型')
return
}
if (!form.amount) {
showToast('请输入支出金额')
showFailToast('请输入支出金额')
return
}
@ -132,7 +132,7 @@ const handleSubmit = async () => {
router.back()
} catch (e: any) {
console.error('提交失败:', e)
showToast(e.message || '提交失败')
showFailToast(e.message || '提交失败')
} finally {
loading.value = false
}
@ -219,6 +219,11 @@ onMounted(async () => {
white-space: nowrap;
}
.form-group label .required {
color: var(--mac-danger);
margin-left: 2px;
}
.mac-input {
width: 100%;
padding: 14px 16px;

View File

@ -58,7 +58,7 @@
<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { showToast, showSuccessToast, showConfirmDialog } from 'vant'
import { showFailToast, showSuccessToast, showConfirmDialog } from 'vant'
import { updatePassword } from '@/api'
const router = useRouter()
@ -76,12 +76,12 @@ const validateConfirmPassword = () => {
const onSubmit = async () => {
if (form.value.newPassword !== form.value.confirmPassword) {
showToast('两次密码输入不一致')
showFailToast('两次密码输入不一致')
return
}
if (form.value.oldPassword === form.value.newPassword) {
showToast('新密码不能与旧密码相同')
showFailToast('新密码不能与旧密码相同')
return
}
@ -112,7 +112,7 @@ const onSubmit = async () => {
} catch (e: any) {
if (e.message !== 'cancel') {
showToast(e.message || '修改失败')
showFailToast(e.message || '修改失败')
}
} finally {
submitting.value = false

View File

@ -117,7 +117,7 @@
<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import { showToast, showSuccessToast } from 'vant'
import { showFailToast, showSuccessToast } from 'vant'
import { createProject, getCustomerList } from '@/api'
const router = useRouter()
@ -188,7 +188,7 @@ const loadOptions = async () => {
const onSubmit = async () => {
if (!form.value.projectName) {
showToast('请输入项目名称')
showFailToast('请输入项目名称')
return
}
@ -206,7 +206,7 @@ const onSubmit = async () => {
showSuccessToast('提交成功')
router.back()
} catch (e: any) {
showToast(e.message || '提交失败')
showFailToast(e.message || '提交失败')
} finally {
submitting.value = false
}

View File

@ -102,7 +102,7 @@
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { showToast, showSuccessToast } from 'vant'
import { showFailToast, showSuccessToast } from 'vant'
import { createReceivable, getCustomerList, getProjectList } from '@/api'
const router = useRouter()
@ -170,15 +170,15 @@ const loadOptions = async () => {
const onSubmit = async () => {
if (!form.value.customerId) {
showToast('请选择客户')
showFailToast('请选择客户')
return
}
if (!form.value.receivableAmount) {
showToast('请输入应收金额')
showFailToast('请输入应收金额')
return
}
if (!form.value.receivableDate) {
showToast('请选择应收日期')
showFailToast('请选择应收日期')
return
}
@ -194,7 +194,7 @@ const onSubmit = async () => {
showSuccessToast('提交成功')
router.back()
} catch (e: any) {
showToast(e.message || '提交失败')
showFailToast(e.message || '提交失败')
} finally {
submitting.value = false
}

View File

@ -93,7 +93,7 @@
<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import { showToast, showSuccessToast } from 'vant'
import { showFailToast, showSuccessToast } from 'vant'
import { createRequirement, getCustomerList, getProjectList } from '@/api'
const router = useRouter()
@ -166,7 +166,7 @@ const loadOptions = async () => {
const onSubmit = async () => {
if (!form.value.title) {
showToast('请输入需求标题')
showFailToast('请输入需求标题')
return
}
@ -182,7 +182,7 @@ const onSubmit = async () => {
showSuccessToast('提交成功')
router.back()
} catch (e: any) {
showToast(e.message || '提交失败')
showFailToast(e.message || '提交失败')
} finally {
submitting.value = false
}