feature: support search token name on selecting tokens for orders filter

package.json

@@ -137,6 +137,7 @@
         "url": "~0.11.0",
         "vue-echarts": "~4.0.1",
         "vue-flatpickr-component": "~8.1.1",
+        "vue-select": "^3.10.7",
         "vuex": "~3.0.1",
         "web3": "1.0.0-beta.33"
     }

srcPC/pages/trade/components/filters.vue

@@ -17,35 +17,29 @@
                 :config="{dateFormat:'Y/m/d H:i',enableTime:true,time_24hr:true}"
             ></FlatPickr>
         </div>
-        <div class="filter">
+        <div class="filter" style="width:160px;">
             <div class="filter_label">{{ $t("tradeOrderHistory.filter.type") }}</div>
-            <select class="filter_content" v-model="ftoken">
-                <option :value="token.symbol" v-for="token in ftokenMap" :key="token.symbol">{{ token.symbol }}</option>
-            </select>
+            <v-select class="filter_content" v-model="ftoken" :options="ftokenSelectList" />
         </div>
         <div class="separator">-</div>
-        <div class="filter end">
-            <select class="filter_content" v-model="ttoken">
-                <option v-for="t in marketMap" :value="t.symbol" :key="t.symbol">{{ t.symbol }}</option>
-            </select>
+        <div class="filter end" style="width:160px;">
+            <v-select class="filter_content" v-model="ttoken" :options="marketSelectList" />
         </div>
 
         <div class="filter end">
             <div class="filter_label">{{ $t("tradeOrderHistory.filter.side") }}</div>
-            <select v-model="tradeType" class="filter_content">
-                <option value="0">{{ $t("tradeOrderHistory.filter.buy") }}</option>
-                <option value="1">{{ $t("tradeOrderHistory.filter.sell") }}</option>
-            </select>
+            <v-select class="filter_content"
+                      v-model="tradeType"
+                      :reduce="(item) => item.value"
+                      :options="tradeTypeList" />
         </div>
 
         <div v-show="isShowStatus" class="filter end">
             <div class="filter_label">{{ $t("tradeOrderHistory.filter.status") }}</div>
-            <select v-model="status" class="filter_content">
-                <option value="1">{{ $t("tradeOrderHistory.status.1") }}</option>
-                <option value="2">{{ $t("tradeOrderHistory.status.2") }}</option>
-                <option value="3">{{ $t("tradeOrderHistory.status.3") }}</option>
-                <option value="4">{{ $t("tradeOrderHistory.status.4") }}</option>
-            </select>
+            <v-select class="filter_content"
+                      v-model="status"
+                      :reduce="(item) => item.value"
+                      :options="statusList" />
         </div>
 
         <div @click="submit" class="search active">
@@ -59,13 +53,15 @@
 
 <script>
 import FlatPickr from 'vue-flatpickr-component';
+import vSelect from 'vue-select';
 import { tokenMap } from 'services/trade';
 import 'flatpickr/dist/flatpickr.css';
 import statistics from 'utils/statistics';
 import { VITE_TOKENID } from 'utils/constant';
+import 'vue-select/dist/vue-select.css';
 
 export default {
-    components: { FlatPickr },
+    components: { FlatPickr, vSelect },
     props: {
         isShowStatus: {
             type: Boolean,
@@ -81,21 +77,51 @@ export default {
             ftoken: '',
             ttoken: '',
             status: '',
-            ftokenMap: []
+            ftokenMap: [],
+            isInit: false
         };
     },
-    beforeMount() {
-        this.ttoken = this.marketMap[0].symbol;
-    },
     computed: {
         marketMap() {
             return this.$store.state.exchangeMarket.marketMap;
         },
         activeAddr() {
             return this.$store.getters.activeAddr;
+        },
+        ftokenSelectList() {
+            return this.ftokenMap.map(item => item && item.symbol);
+        },
+        marketSelectList() {
+            return this.marketMap.map(item => item.symbol);
+        },
+        tradeTypeList() {
+            return [
+                {
+                    label: this.$t('tradeOrderHistory.filter.buy'),
+                    value: '0'
+                },
+                {
+                    label: this.$t('tradeOrderHistory.filter.sell'),
+                    value: '1'
+                }
+            ];
+        },
+        statusList() {
+            return [ '1', '2', '3', '4' ].map(item => {
+                return {
+                    label: this.$t(`tradeOrderHistory.status.${ item }`),
+                    value: item
+                };
+            });
         }
     },
     watch: {
+        marketMap(val) {
+            if (!this.isInit && val[0]) {
+                this.ttoken = val[0].symbol;
+                this.isInit = true;
+            }
+        },
         ttoken() {
             this.getFtoken();
         },
@@ -165,6 +191,24 @@ export default {
 };
 </script>
 
+<style lang="scss">
+.vs__dropdown-menu {
+    border: none;
+    @include default_font_color();
+    @include bg_color_3();
+}
+.vs__dropdown-toggle {
+    border: none;
+}
+.vs__selected {
+    @include default_font_color();
+    @include bg_color_3();
+}
+.vs__search {
+    @include default_font_color();
+}
+</style>
+
 <style lang="scss" scoped>
 .filter-root {
     display: flex;

yarn.lock

@@ -12368,6 +12368,11 @@ vue-router@^3.0.1:
   resolved "https://registry.npm.taobao.org/vue-router/download/vue-router-3.1.3.tgz#e6b14fabc0c0ee9fda0e2cbbda74b350e28e412b"
   integrity sha1-5rFPq8DA7p/aDiy72nSzUOKOQSs=
 
+vue-select@^3.10.7:
+  version "3.10.7"
+  resolved "https://registry.yarnpkg.com/vue-select/-/vue-select-3.10.7.tgz#58d756a7159bf923ce99abf74c5d6309ea998136"
+  integrity sha512-6rvIYBNEp9y0xK/sq2ZzDCxKA2BoVNliyctOeMtzarQzvpLlab7l8zvqr2jhGZOxozp7jd2AvZxpF3Ivems2wQ==
+
 vue-style-loader@^4.1.0:
   version "4.1.2"
   resolved "https://registry.npm.taobao.org/vue-style-loader/download/vue-style-loader-4.1.2.tgz#dedf349806f25ceb4e64f3ad7c0a44fba735fcf8"