feat: 问卷调查查询学校交互优化

src/views/fill-questionnaire/index.module.less

@@ -5,8 +5,19 @@
   padding-top: 40%;
   overflow: hidden;
   position: relative;
+  :global {
+    .cityPopBox {
+      :global {
+        .van-picker-column__item--selected {
+          color: #333 !important;
+          font-weight: normal;
+        }
+      }
+    }
+  }
 }
 
+
 .formBox {
   background: #FFFFFF;
   border-radius: 16px;
@@ -181,4 +192,12 @@
 }
 .countDown {
   color: rgb(28, 172, 241, 0.6);
+}
+
+.columnsContent {
+  :global {
+    .highLight {
+      color: #1CACF1;
+    }
+  }
 }

src/views/fill-questionnaire/index.tsx

@@ -200,6 +200,7 @@ export default defineComponent({
       id: null as any,
       code: null as any,
       areaPopupIndex: null as any,
+      customSearchText: '' as any,
     })
 
     onMounted(async () => {
@@ -459,7 +460,14 @@ export default defineComponent({
         getSchoolAreaList()
       }
     }
-
+    // 高亮显示匹配的文字
+    const highlightText = (text: string) => {
+      if (!forms.customSearchText) return text;
+      const regex = new RegExp(`(${forms.customSearchText})`, 'gi'); // 创建正则匹配用户输入
+      const customText = text.replace(regex, '<span class="highLight">$1</span>'); // 将匹配部分包裹在 <span> 中
+      // console.log(customText,999)
+      return customText
+    }
     const getSchoolAreaList = async (name?: string) => {
       forms.schoolLoading = true;
       try {
@@ -472,6 +480,7 @@ export default defineComponent({
             regionCode: forms.districtCode
           }
         });
+        forms.customSearchText = name || ''
         forms.schoolAreaList = data;
       } catch {
         //
@@ -823,7 +832,7 @@ export default defineComponent({
           {forms.schoolPopupShow && (
             <div>
               <Picker
-
+                class="cityPopBox"
                 showToolbar
                 v-model={forms.schoolPopupIndex}
                 columns={forms.schoolAreaList}
@@ -860,7 +869,10 @@ export default defineComponent({
                         }}                        
                       />
                     </div>
-                  )
+                  ),
+                  option: (item: any, index: number) => (
+                    <div class={styles.columnsContent} v-html={highlightText(item.name)} key={index}></div>
+                  ),                  
                 }}
               </Picker>
             </div>