fix: 添加页面统一修改样式。

src/pages/health/doctorRecord/addEdit.vue

@@ -3,47 +3,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="auto"
-          :labelStyle="{ color: '#333333', fontSize: '30rpx' }">
+        <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="personName" required @click="handlePerson">
+            <view class="input-with-arrow">
             <u--input v-model="form.personName" disabled disabledColor="#ffffff" placeholder="请选择人员"
-              inputAlign="right" border="none"></u--input>
-            <u-icon slot="right" name="arrow-down"></u-icon>
+              inputAlign="left" :customStyle="getInputStyle('personName')"></u--input>
+                <text class="arrow-icon">▼</text>
+            </view>
           </u-form-item>
           <u-form-item label="健康档案" prop="healthRecordName" required @click="handHealthRecord">
+            <view class="input-with-arrow">
             <u--input v-model="form.healthRecordName" disabled disabledColor="#ffffff" placeholder="请选择健康档案"
-              inputAlign="right" border="none"></u--input>
-            <u-icon slot="right" name="arrow-down"></u-icon>
+              inputAlign="left" :customStyle="getInputStyle('healthRecordName')"></u--input>
+                <text class="arrow-icon">▼</text>
+            </view>
           </u-form-item>
           <u-form-item label="医院名称" prop="hospitalName" required >
               <u--input v-model="form.hospitalName"  placeholder="请填写医院名称"
-                inputAlign="right" border="none"></u--input>
+                inputAlign="left" :customStyle="getInputStyle('hospitalName')"></u--input>
             </u-form-item>
             <u-form-item label="就医类型" prop="typeName" required @click="handleType">
+              <view class="input-with-arrow">
               <u--input v-model="form.typeName" disabled disabledColor="#ffffff" placeholder="请选择就医类型"
-                inputAlign="right" border="none"></u--input>
-              <u-icon slot="right" name="arrow-down"></u-icon>
+                inputAlign="left" :customStyle="getInputStyle('typeName')"></u--input>
+                  <text class="arrow-icon">▼</text>
+            </view>
             </u-form-item>
             <u-form-item label="科室" prop="departments" required >
               <u--input v-model="form.departments"  placeholder="请填写科室"
-                inputAlign="right" border="none"></u--input>
+                inputAlign="left" :customStyle="getInputStyle('departments')"></u--input>
             </u-form-item>
             <u-form-item label="大夫" prop="doctor" required >
               <u--input v-model="form.doctor"  placeholder="请填写大夫"
-                inputAlign="right" border="none"></u--input>
+                inputAlign="left" :customStyle="getInputStyle('doctor')"></u--input>
+            </u-form-item>
+            <u-form-item label="就诊时间" prop="visitingTime" required @click="selectDate">
+              <view class="input-with-arrow">
+              <u--input v-model="form.visitingTime" disabled disabledColor="#ffffff" placeholder="请选择就诊时间" inputAlign="left" :customStyle="getInputStyle('visitingTime')"></u--input>
+    <text class="arrow-icon">▼</text>
+            </view>
             </u-form-item>
-            <u-form-item label="就诊时间" prop="visitingTime" required @click="selectDate()">
-            <u--input v-model="form.visitingTime" disabled disabledColor="#ffffff" placeholder="请选择就诊时间" inputAlign="right" border="none"></u--input>
-          <u-icon slot="right" name="arrow-right"></u-icon>
-          </u-form-item>
             <u-form-item label="陪同人" prop="partner" required >
               <u--input v-model="form.partner"  placeholder="请填写陪同人"
-                inputAlign="right" border="none"></u--input>
+                inputAlign="left" :customStyle="getInputStyle('partner')"></u--input>
             </u-form-item>
 
           <u-form-item label="总费用" prop="totalCost" required >
               <u--input v-model="form.totalCost"  placeholder="请填写总费用"
-                inputAlign="right" border="none">
+                inputAlign="left" :customStyle="getInputStyle('totalCost')">
                 <template #suffix>
 					<up-text
 						text="元"
@@ -51,16 +59,16 @@
 				</template></u--input>
             </u-form-item>
           <u-form-item label="诊断结果" prop="diagnosis"  required labelPosition="top">
-            <u--textarea v-model="form.diagnosis" placeholder="请填写诊断结果" border="none"></u--textarea>
+            <u--textarea v-model="form.diagnosis" height="60rpx" placeholder="请填写诊断结果" inputAlign="left" style="border: 2rpx solid #dcdfe6 !important; height: 160rpx;"  :customStyle="getTextareaStyle('diagnosis')" ></u--textarea>
           </u-form-item>
           <u-form-item label="处理及医嘱" prop="prescribe"  required labelPosition="top">
-            <u--textarea v-model="form.prescribe" placeholder="请填写处理及医嘱" border="none"></u--textarea>
+            <u--textarea v-model="form.prescribe" height="60rpx" placeholder="请填写处理及医嘱" inputAlign="left" style="border: 2rpx solid #dcdfe6 !important; height: 160rpx;"  :customStyle="getTextareaStyle('prescribe')"></u--textarea>
           </u-form-item>
             <u-form-item label="费用明细" prop="costDetail" >
-              <u--textarea v-model="form.costDetail" placeholder="请填写费用明细" border="none"></u--textarea>
+              <u--textarea v-model="form.costDetail" height="50rpx" placeholder="请填写费用明细" inputAlign="left" style="border: 2rpx solid #dcdfe6 !important; height: 160rpx;" :customStyle="getTextareaStyle('costDetail')"></u--textarea>
             </u-form-item>
           <u-form-item label="备注" prop="remark"  labelPosition="top">
-            <u--textarea v-model="form.remark" placeholder="请填写备注" border="none"></u--textarea>
+            <u--textarea v-model="form.remark" height="40rpx" placeholder="请填写备注" inputAlign="left" style="border: 2rpx solid #dcdfe6 !important; height: 160rpx;" :customStyle="getTextareaStyle('remark')"></u--textarea>
           </u-form-item>
         </u--form>
         <view class="form-btn">
@@ -151,6 +159,52 @@ rules: {
 })
 const { form, queryPersonParams, queryHealthRecordParams, rules} = toRefs(data)
 
+// 错误字段
+const errorFields = ref([])
+
+// 输入框基础样式
+const inputBaseStyle = {
+  background: '#ffffff',
+  border: '2rpx solid #dcdfe6',
+  borderRadius: '8rpx',
+  padding: '0 24rpx',
+  height: '68rpx',
+  width: '100%',
+  boxSizing: 'border-box'
+}
+
+// 输入框错误样式
+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 textareaBaseStyle = {
+  background: '#ffffff',
+  border: '2rpx solid #dcdfe6',
+}
+
+// 输入框错误样式
+const textareaErrorStyle = {
+  background: '#fef0f0',
+  border: '2rpx solid #f56c6c'
+}
+
+// 根据字段名获取输入框样式
+const getTextareaStyle = (field) => {
+  return errorFields.value.includes(field) ? textareaErrorStyle : textareaBaseStyle
+}
+
 
 onLoad((option) => {
     form.value.id = option.id
@@ -326,6 +380,12 @@ function submit() {
           })
         })
         }
+      }).catch(errors => {
+        // 验证失败，记录错误字段
+        if (errors && errors.length > 0) {
+          errorFields.value = errors.map(err => err.field)
+        }
+        proxy.$modal.msgError('请填写完整信息')
       })
     }
 </script>
@@ -369,6 +429,23 @@ page {
     .form-btn {
       padding-top: 16rpx;
     }
+
+    // 带箭头的输入框容器
+    .input-with-arrow {
+      position: relative;
+      width: 100%;
+
+      .arrow-icon {
+        position: absolute;
+        right: 20rpx;
+        top: 50%;
+        transform: translateY(-50%);
+        color: #c0c4cc;
+        font-size: 20rpx;
+        pointer-events: none;
+        z-index: 10;
+      }
+    }
   }
 }
 </style>
@@ -387,4 +464,19 @@ page {
   font-weight: 500 !important;
   letter-spacing: 2rpx !important;
 }
+
+/* 强制让错误状态的输入框边框变红 */
+.u-form-item--error .u--input,
+.u-form-item--error .u-input,
+.u-form-item--error .u-input__content,
+.u-form-item--error .u-input__content__field-wrapper {
+  border: 2rpx solid #f56c6c !important;
+  background: #fef0f0 !important;
+}
+
+.u-form-item--error .u--textarea,
+.u-form-item--error .u-textarea {
+  border: 2rpx solid #f56c6c !important;
+  background: #fef0f0 !important;
+}
 </style>