updated

src/main/resources/static/css/service-settlement/index.css

@@ -176,3 +176,6 @@
         color: #fff;
     }
 }
+.el-select {
+    width: 100%;
+}

src/main/resources/static/css/service-settlement/search.css

@@ -233,3 +233,6 @@
         display: none;
     }
 }
+.el-select {
+    width: 100%;
+}

src/main/resources/static/js/service-settlement/index.js

@@ -7,7 +7,10 @@ new Vue({
     data: {
         form: {
             providersName: ''
-        }
+        },
+        loading: false,
+        options: [],
+        list: []
     },
     mounted() {
         this.setWxConfig((wx) => this.setWxReady(wx))
@@ -18,6 +21,27 @@ new Vue({
                 window.localStorage.setItem('searchKeyword', this.form.providersName)
                 window.open('/servicesSearch.html')
             }
+        },
+        remoteMethod(query) {
+            if (query !== '') {
+                console.log(query, 'form', this.form)
+                this.loading = true;
+                SettlementService.getProvidersAndInfo({ providersName: query, pageSize: 20, pageNum: 1 }, (res) => {
+                    if (res.code === 0 && res.data.list) {
+                        this.loading = false;
+                        this.list = res.data.list
+                        this.options = this.list.filter(item => {
+                            return item.name.toLowerCase()
+                                .indexOf(query.toLowerCase()) > -1;
+                        });
+                    } else {
+                        this.loading = false;
+                        this.options = []
+                    }
+                })
+            } else {
+                this.options = [];
+            }
         }
     }
 })

src/main/resources/static/js/service-settlement/info.js

@@ -38,8 +38,8 @@ new Vue({
         toSearchProvider() {
             if (this.form.providersId) {
                 SettlementService.getProvidersAndInfo(this.form, (res) => {
-                    if (res.data) {
-                        this.itemObj = res.data
+                    if (res.data.list) {
+                        this.itemObj = res.data.list[0]
                         setTimeout(() => {
                             this.isLoading = true
                         }, 1000)

src/main/resources/static/js/service-settlement/search.js

@@ -7,9 +7,14 @@ new Vue({
     mixins: [wxJssdkMixin],
     data: {
         form: {
-            providersName: ''
+            providersName: '',
+            pageSize: 20,
+            pageNum: 1
         },
-        providerList: []
+        providerList: [],
+        loading: false,
+        options: [],
+        list: []
     },
     mounted() {
         this.setWxConfig((wx) => this.setWxReady(wx))
@@ -23,19 +28,42 @@ new Vue({
         toSearchProvider() {
             if (this.form.providersName) {
                 SettlementService.getProvidersAndInfo(this.form, (res) => {
-                    if (res.data) {
-                        this.providerList = [res.data]
+                    if (res.data.list && res.code === 0) {
+                        this.providerList = res.data.list
                     } else {
                         this.providerList = []
                     }
                 })
             }
         },
-        onSearch() {
-            this.toSearchProvider()
+        onSearch(e) {
+            if (!e) {
+                this.toSearchProvider()
+            }
         },
         onCancel() {
             this.form.providersName = ''
+        },
+        remoteMethod(query) {
+            if (query !== '') {
+                console.log(query, 'form', this.form)
+                this.loading = true;
+                SettlementService.getProvidersAndInfo({ providersName: query, pageSize: 20, pageNum: 1 }, (res) => {
+                    if (res.code === 0 && res.data.list) {
+                        this.loading = false;
+                        this.list = res.data.list
+                        this.options = this.list.filter(item => {
+                            return item.name.toLowerCase()
+                                .indexOf(query.toLowerCase()) > -1;
+                        });
+                    } else {
+                        this.loading = false;
+                        this.options = []
+                    }
+                })
+            } else {
+                this.options = [];
+            }
         }
     }
 })

src/main/resources/templates/service-settlement/index.html

@@ -13,7 +13,22 @@
     <div class="search">
         <div class="title">区域服务商查询</div>
         <div class="search-input">
-            <el-input placeholder="请输入名称搜索查询" v-model="form.providersName" />
+<!--            <el-input placeholder="请输入名称搜索查询" v-model="form.providersName" />-->
+            <el-select
+                    v-model="form.providersName"
+                    filterable
+                    remote
+                    reserve-keyword
+                    placeholder="请输入名称搜索查询"
+                    :remote-method="remoteMethod"
+                    :loading="loading">
+                <el-option
+                        v-for="item in options"
+                        :key="item.id"
+                        :label="item.name"
+                        :value="item.name">
+                </el-option>
+            </el-select>
         </div>
         <div class="search-btn">
             <el-button @click="toSearchProvider">查询</el-button>

src/main/resources/templates/service-settlement/search.html

@@ -17,7 +17,23 @@
     <div class="search-contain">
         <div class="search-frist">
             <div class="search-input">
-                <van-search v-model="form.providersName" placeholder="请输入服务商名称查询" @search="onSearch" @cancel="onCancel" />
+<!--                <van-search v-model="form.providersName" placeholder="请输入服务商名称查询" @search="onSearch" @cancel="onCancel" />-->
+                <el-select
+                        v-model="form.providersName"
+                        filterable
+                        remote
+                        reserve-keyword
+                        placeholder="请输入服务商名称查询"
+                        :remote-method="remoteMethod"
+                        @visible-change="onSearch"
+                        :loading="loading">
+                    <el-option
+                            v-for="item in options"
+                            :key="item.id"
+                            :label="item.name"
+                            :value="item.name">
+                    </el-option>
+                </el-select>
             </div>
             <div class="search-btn">
                 <el-button @click="toSearchProvider">查询</el-button>