渠道客诉

src/views/clew/complaintDetail/radioGroup.vue

@@ -23,12 +23,19 @@
       <template v-if="val.answerType == 'wb'">
         <template v-if="parentOptionList.searchValue == val.itemOptionParentId">
           <van-field
-            class="fieldInput"
             v-model="val.answerValue"
             :placeholder="val.remark"
             :minTextLength="val.minTextLength"
             :error-message="val.remark"
-            @blur="onBlur" />
+            :class="{
+              fieldInput: true,
+              rulesClass: val.answerValue != null && val.answerValue.length < val.minTextLength,
+            }" />
+          <span
+            class="rulesErrorMessage"
+            v-if="val.answerValue != null && val.answerValue.length < val.minTextLength"
+            >{{ val.remark }}</span
+          >
         </template>
       </template>
       <template v-if="val.answerType == 'sz'">
@@ -108,8 +115,9 @@ export default {
       });
     },
     // 失去焦点时校验 rules
-    onBlur(event) {
-      // console.log(event);
+    onBlur(val) {
+      console.log(val);
+      debugger;
       // let classValue = event.target.attributes.class.value;
       // event.target.attributes.class.value = 'van-field__control';
       let minTextLength = event.target.attributes.minTextLength;
@@ -152,11 +160,12 @@ export default {
     background-color: unset;
     height: 30px;
     line-height: 30px;
+    border: 1px solid #cdc8c8;
   }
   .van-field__control {
     /* padding: 0 10px; */
-    border: 1px solid #cdc8c8;
-    margin: 5px 0;
+    /* margin: 5px 0; */
+    padding-left: 10px;
   }
   .van-radio__label {
     /* font-size: 14px; */
@@ -168,7 +177,12 @@ export default {
     border: 1px solid #ff0505;
   }
   .fieldInput {
-    height: 38px;
+    /* height: 38px; */
+  }
+  .rulesErrorMessage {
+    color: red;
+    font-size: 12px;
+    padding: 3px 0;
   }
 }
 </style>