首页搜索

src/components/SeriesSelect.vue

@@ -0,0 +1,82 @@
+<template>
+    <van-popup :show="show" round position="bottom" @close="show = false">
+        <van-picker show-toolbar :columns="columns" value-key="name" @confirm="confirm" @cancel="cancel" />
+    </van-popup>
+</template>
+
+<script>
+export default {
+    props: {
+        value: {
+            type: Number,
+            default: 0
+        }
+    },
+    data() {
+        return {
+            show: false,
+            serieses: [],
+            collections: [],
+            chooseSeriesId: 0
+        };
+    },
+    computed: {
+        columns() {
+            if (this.chooseSeriesId) {
+                return [...this.collections];
+            } else {
+                return [...this.serieses];
+            }
+        }
+    },
+    mounted() {
+        this.$http
+            .post(
+                '/series/all',
+                {
+                    page: 0,
+                    size: 100
+                },
+                {
+                    header: {
+                        'Content-Type': 'application/json'
+                    }
+                }
+            )
+            .then(res => {
+                this.serieses = res.content;
+            });
+    },
+    methods: {
+        confirm(e) {
+            console.log(e);
+            if (!this.chooseSeriesId) {
+                this.chooseSeriesId = e.detail.value.id;
+                this.findBySeriesId(e.detail.value.id);
+            } else {
+                this.$emit('update:name', e.detail.value.name);
+                this.$emit('input', e.detail.value.id);
+                this.show = false;
+            }
+        },
+        cancel() {
+            if (this.chooseSeriesId) {
+                this.chooseSeriesId = 0;
+            } else {
+                this.show = false;
+            }
+        },
+        findBySeriesId(id) {
+            this.$http
+                .get('/collection/findBySeriesId', {
+                    seriesId: id
+                })
+                .then(res => {
+                    this.collections = res;
+                });
+        }
+    }
+};
+</script>
+
+<style></style>

src/pages/Home.vue

@@ -19,8 +19,15 @@
                 </div>
 
                 <div class="search">
-                    <van-field type="text" placeholder="搜索拼箱..." />
-                    <div class="scan">
+                    <van-field
+                        @confirm="searchData"
+                        :value="searchVal"
+                        @clear="clear"
+                        type="text"
+                        clearable
+                        placeholder="搜索拼箱..."
+                    />
+                    <div class="scan" @click="showSeries">
                         <van-icon size="16" :color="$colors.prim" name="liebiao" class-prefix="iconfont" />
                     </div>
                 </div>
@@ -44,25 +51,34 @@
                 <product-info :info="item"></product-info>
             </div>
 
-            <van-empty v-if="empty" image="/native/imgs/kong_png_xiaoxiliebiao.png" description="暂无卡包信息哦～">
+            <van-empty
+                v-if="empty"
+                :image="`/native/imgs/${search ? 'kong_png_wusosuo' : 'kong_png_wukabao'}.png`"
+                :description="search ? '什么都没有搜到哦～' : '暂无卡包信息哦～'"
+            >
             </van-empty>
         </div>
+
+        <series-select ref="series" v-model="collectionId" :name.sync="searchVal" @input="getData"></series-select>
     </div>
 </template>
 
 <script>
 import ProductInfo from '../components/ProductInfo.vue';
+import SeriesSelect from '../components/SeriesSelect.vue';
 import cardPage from '../mixins/cardPage';
 export default {
-    components: { ProductInfo },
+    components: { ProductInfo, SeriesSelect },
     mixins: [cardPage],
     data() {
         return {
-            value: '',
+            searchVal: '',
+            search: '',
             active: '进行中',
             list: [],
             tabs: ['进行中', '已完成', '已过期'],
-            empty: false
+            empty: false,
+            collectionId: 0
         };
     },
     methods: {
@@ -74,10 +90,18 @@ export default {
             this.showLoading();
             this.list = [];
             this.empty = false;
+            let data = {
+                caseStatus: this.getStatus(this.active)
+            };
+
+            if (this.collectionId) {
+                data.collectionId = this.collectionId;
+            }
+            if (this.search) {
+                data.search = this.search;
+            }
             this.$http
-                .get('/cardCase/showCasesMA', {
-                    caseStatus: this.getStatus(this.active)
-                })
+                .get('/cardCase/showCasesMA', data)
                 .then(res => {
                     this.hideLoading();
                     this.list = res;
@@ -91,6 +115,22 @@ export default {
                         this.toast(e.rror);
                     }
                 });
+        },
+        searchData(e) {
+            this.collectionId = 0;
+            this.searchVal = e.detail;
+            this.search = e.detail;
+            this.getData();
+        },
+        clear() {
+            this.collectionId = 0;
+            this.searchVal = '';
+            this.search = '';
+            this.getData();
+        },
+        showSeries() {
+            this.search = '';
+            this.$refs.series.show = true;
         }
     },
     onLoad() {

src/styles/vanIndex.less

@@ -35,3 +35,7 @@
         width: 290px;
     }
 }
+
+.van-picker__confirm {
+    --picker-confirm-action-color: @prim;
+}