搜索

src/views/Search.vue

@@ -1,39 +1,99 @@
 <template>
     <div class="search">
         <div class="search-top">
-            <van-search v-model="search" left-icon=" " show-action placeholder="输入房间号码" @search="getSearch">
+            <img src="@assets/back.png" @click="back" class="back" alt="" />
+            <van-search
+                v-model="search"
+                autofocus
+                left-icon=" "
+                show-action
+                placeholder="输入房间号码"
+                @search="getSearch(search)"
+            >
                 <template #action>
                     <div @click="getSearch(search)">搜索</div>
                 </template>
             </van-search>
         </div>
+        <div class="search-content">
+            <van-list
+                v-model:loading="loading"
+                :immediate-check="false"
+                :finished="finished"
+                finished-text=""
+                @load="getData"
+            >
+                <room-info v-for="(item, index) in list" :key="index" :info="item"></room-info>
+
+                <van-empty
+                    v-if="empty"
+                    description="什么都没有哦，换个号码试试吧～"
+                    :image="require('@assets/kong-pimg-sosuo.png')"
+                />
+            </van-list>
+        </div>
     </div>
 </template>
 
 <script>
 import list from '../mixins/list';
 import search from '../mixins/search';
+import RoomInfo from '../components/RoomInfo.vue';
 export default {
+    name: 'search',
+    inject: ['bar', 'setKeeps', 'scrollWrapper', 'changeScroll'],
     data() {
         return {
             url: '/room/roomList',
-            httpType: 'get'
+            httpType: 'get',
+            scrollTop: 0
         };
     },
     mixins: [list, search],
+    components: { RoomInfo },
     methods: {
         beforeData() {
             return {
                 id: this.search
             };
+        },
+        back() {
+            this.$router.go(-1);
+        }
+    },
+    mounted() {
+        this.emitter.on('updateList', info => {
+            let list = [...this.list];
+            list.forEach((item, index) => {
+                if (info.id === item.id) {
+                    list[index] = info;
+                }
+            });
+            this.list = list;
+        });
+    },
+    activated() {
+        this.$nextTick(() => {
+            this.changeScroll(this.scrollTop || 0);
+        });
+    },
+    beforeRouteLeave(to, from, next) {
+        if (to.path === '/room') {
+            this.scrollTop = this.scrollWrapper.scrollTop;
+            this.setKeeps(['search']);
+        } else {
+            this.scrollTop = 0;
+            this.setKeeps(['search'], false);
         }
+        next();
     }
 };
 </script>
 
 <style lang="less" scoped>
 /deep/.search-top {
-    padding: 12px 16px;
+    padding: 12px 16px 12px 10px;
+    .flex();
     .van-button {
         flex-shrink: 0;
         height: 32px;
@@ -60,5 +120,17 @@ export default {
         background: #25283d;
         height: 32px;
     }
+
+    .back {
+        width: 24px;
+        height: 24px;
+        margin-right: 10px;
+    }
+}
+.search-content {
+    padding: 10px 16px 16px;
+    .room + .room {
+        margin-top: 16px;
+    }
 }
 </style>