fix: 功能样式，统一优化完善。

2026-06-28 12:06:05 +08:00
parent a506f2de98
commit f353971554
39 changed files with 1096 additions and 374 deletions
--- a/src/pages/work/bill/creditInstallmentHistory/addEdit.vue
+++ b/src/pages/work/bill/creditInstallmentHistory/addEdit.vue
@@ -9,55 +9,55 @@
      <view class="section">
        <view class="section-title">{{ title}}</view>
        <view class="form-view">
-          <u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="180rpx"
+          <u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="160rpx"
            :labelStyle="{ color: '#333333', fontSize: '30rpx', marginRight: '24rpx' }">
            <u-form-item label="信用卡" prop="onlineLendName" required @click="handleOnlineLend">
              <view class="input-with-arrow">
                <u--input v-model="form.onlineLendName" readonly disabledColor="#ffffff" placeholder="请选择信用卡"
-                inputAlign="left" :customStyle="inputBaseStyle"></u--input>
+                inputAlign="left" :customStyle="getInputStyle('onlineLendName')"></u--input>
                <text class="arrow-icon">▼</text>
              </view>
            </u-form-item>
            <u-form-item label="分期金额" prop="installmentAmount" required >
              <u--input v-model="form.installmentAmount"  type="number" placeholder="请填写分期金额"
-                inputAlign="left" :customStyle="inputBaseStyle"></u--input>
+                inputAlign="left" :customStyle="getInputStyle('installmentAmount')"></u--input>
            </u-form-item>
            <u-form-item label="分期日期" prop="installmentDate" required @click="selectDate()">
              <view class="input-with-arrow">
-                <u--input v-model="form.installmentDate" readonly disabledColor="#ffffff" placeholder="请选择分期日期" inputAlign="left" :customStyle="inputBaseStyle"></u--input>
+                <u--input v-model="form.installmentDate" readonly disabledColor="#ffffff" placeholder="请选择分期日期" inputAlign="left" :customStyle="getInputStyle('installmentDate')"></u--input>
                <text class="arrow-icon">▼</text>
              </view>
            </u-form-item>
            <u-form-item label="分期期数" prop="period" required >
              <u--input v-model="form.period"  type="number" placeholder="请填写分期期数"
-                inputAlign="left" :customStyle="inputBaseStyle"></u--input>
+                inputAlign="left" :customStyle="getInputStyle('period')"></u--input>
            </u-form-item>
            <u-form-item label="余额" prop="balance" required >
              <u--input v-model="form.balance"  type="number" placeholder="请填写余额"
-                inputAlign="left" :customStyle="inputBaseStyle"></u--input>
+                inputAlign="left" :customStyle="getInputStyle('balance')"></u--input>
            </u-form-item>
            <u-form-item label="结清状态" prop="settleStateName" required @click="handleShowTeam">
              <view class="input-with-arrow">
                <u--input v-model="form.settleStateName" readonly disabledColor="#ffffff" placeholder="请选择结清状态"
-                inputAlign="left" :customStyle="inputBaseStyle"></u--input>
+                inputAlign="left" :customStyle="getInputStyle('settleStateName')"></u--input>
                <text class="arrow-icon">▼</text>
              </view>
            </u-form-item>
            <u-form-item label="总利息" prop="totalInterest" required >
              <u--input v-model="form.totalInterest"  type="number" placeholder="请填写总利息"
-                inputAlign="left" :customStyle="inputBaseStyle"></u--input>
+                inputAlign="left" :customStyle="getInputStyle('totalInterest')"></u--input>
            </u-form-item>
            <u-form-item label="已还期数" prop="repaidPeriod" required >
              <u--input v-model="form.repaidPeriod"  type="number" placeholder="请填写已还期数"
-                inputAlign="left" :customStyle="inputBaseStyle"></u--input>
+                inputAlign="left" :customStyle="getInputStyle('repaidPeriod')"></u--input>
            </u-form-item>
            <u-form-item label="利率" prop="interestRate"  >
              <u--input v-model="form.interestRate"  placeholder="请填写利率"
-                inputAlign="left" :customStyle="inputBaseStyle"></u--input>
+                inputAlign="left" :customStyle="getInputStyle('interestRate')"></u--input>
            </u-form-item>
            <u-form-item label="关闭日期" prop="closeDate"  @click="selectCloseDate()">
              <view class="input-with-arrow">
-                <u--input v-model="form.closeDate" readonly disabledColor="#ffffff" placeholder="请选择关闭日期" inputAlign="left" :customStyle="inputBaseStyle"></u--input>
+                <u--input v-model="form.closeDate" readonly disabledColor="#ffffff" placeholder="请选择关闭日期" inputAlign="left" :customStyle="getInputStyle('closeDate')"></u--input>
                <text class="arrow-icon">▼</text>
              </view>
            </u-form-item>
@@ -126,6 +126,19 @@ const inputBaseStyle = {
  width: '100%',
  boxSizing: 'border-box'
 }
+const errorFields = ref([])
+const inputErrorStyle = {
+  background: '#fef0f0',
+  border: '2rpx solid #f56c6c',
+  borderRadius: '8rpx',
+  padding: '0 24rpx',
+  height: '68rpx',
+  width: '100%',
+  boxSizing: 'border-box'
+}
+const getInputStyle = (field) => {
+  return errorFields.value.includes(field) ? inputErrorStyle : inputBaseStyle
+}

 const data = reactive({
  form: {
@@ -265,7 +278,8 @@ onLoad((option) => {
 			}

      function submit() {
-        proxy.$refs['uForm'].validate().then(() => {
+        errorFields.value = []
+  proxy.$refs['uForm'].validate().then(() => {
          if (form.value.id != null) {
            updateInstallmentHistory(form.value).then(res => {
              proxy.$refs['uToast'].show({
@@ -283,6 +297,11 @@ onLoad((option) => {
            })
          })
          }
+        }).catch(errors => {
+          if (errors && errors.length > 0) {
+            errorFields.value = errors.map(err => err.field)
+          }
+          proxy.$modal.msgError('请填写完整信息')
        })
      }
  </script>
--- a/src/pages/work/bill/creditInstallmentHistory/detailsAddEdit.vue
+++ b/src/pages/work/bill/creditInstallmentHistory/detailsAddEdit.vue
@@ -9,34 +9,34 @@
      <view class="section">
        <view class="section-title">{{ title}}</view>
        <view class="form-view">
-          <u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="180rpx"
+          <u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="160rpx"
            :labelStyle="{ color: '#333333', fontSize: '30rpx', marginRight: '24rpx' }">
            <u-form-item label="还款日期" prop="repaymentDate" required @click="selectDate()">
              <view class="input-with-arrow">
-                <u--input v-model="form.repaymentDate" readonly disabledColor="#ffffff" placeholder="请选择还款日期" inputAlign="left" :customStyle="inputBaseStyle"></u--input>
+                <u--input v-model="form.repaymentDate" readonly disabledColor="#ffffff" placeholder="请选择还款日期" inputAlign="left" :customStyle="getInputStyle('repaymentDate')"></u--input>
                <text class="arrow-icon">▼</text>
              </view>
            </u-form-item>
            <u-form-item label="还款期数" prop="periods" required >
              <u--input v-model="form.periods"  placeholder="请填写还款期数"
-                inputAlign="left" :customStyle="inputBaseStyle"></u--input>
+                inputAlign="left" :customStyle="getInputStyle('periods')"></u--input>
            </u-form-item>
            <u-form-item label="还款金额" prop="currentAmount"  >
              <u--input v-model="form.currentAmount"   type="number" placeholder="请填写还款金额"
-                inputAlign="left" :customStyle="inputBaseStyle"></u--input>
+                inputAlign="left" :customStyle="getInputStyle('currentAmount')"></u--input>
            </u-form-item>
            <u-form-item label="应还本金" prop="principal" required >
              <u--input v-model="form.principal"   type="number" placeholder="请填写应还本金"
-                inputAlign="left" :customStyle="inputBaseStyle"></u--input>
+                inputAlign="left" :customStyle="getInputStyle('principal')"></u--input>
            </u-form-item>
            <u-form-item label="利息" prop="interest" required >
              <u--input v-model="form.interest"   type="number" placeholder="请填写利息"
-                inputAlign="left" :customStyle="inputBaseStyle"></u--input>
+                inputAlign="left" :customStyle="getInputStyle('interest')"></u--input>
            </u-form-item>
            <u-form-item label="入账状态" prop="postingStateName" required @click="handleShowTeam">
              <view class="input-with-arrow">
                <u--input v-model="form.postingStateName" readonly disabledColor="#ffffff" placeholder="请选择入账状态"
-                inputAlign="left" :customStyle="inputBaseStyle"></u--input>
+                inputAlign="left" :customStyle="getInputStyle('postingStateName')"></u--input>
                <text class="arrow-icon">▼</text>
              </view>
            </u-form-item>
@@ -91,6 +91,19 @@ const inputBaseStyle = {
  width: '100%',
  boxSizing: 'border-box'
 }
+const errorFields = ref([])
+const inputErrorStyle = {
+  background: '#fef0f0',
+  border: '2rpx solid #f56c6c',
+  borderRadius: '8rpx',
+  padding: '0 24rpx',
+  height: '68rpx',
+  width: '100%',
+  boxSizing: 'border-box'
+}
+const getInputStyle = (field) => {
+  return errorFields.value.includes(field) ? inputErrorStyle : inputBaseStyle
+}

 const data = reactive({
  form: {},
@@ -170,7 +183,8 @@ onLoad((option) => {
 				datePickShow.value = false
 			}
      function submit() {
-        proxy.$refs['uForm'].validate().then(() => {
+        errorFields.value = []
+  proxy.$refs['uForm'].validate().then(() => {
          if (form.value.id != null) {
            updateInstallmentDetail(form.value).then(res => {
              proxy.$refs['uToast'].show({
@@ -181,6 +195,11 @@ onLoad((option) => {
            })
          })
          }
+        }).catch(errors => {
+          if (errors && errors.length > 0) {
+            errorFields.value = errors.map(err => err.field)
+          }
+          proxy.$modal.msgError('请填写完整信息')
        })
      }
  </script>