feat: + 首页展示信息重构 #71

project.config.json

@@ -31,15 +31,15 @@
       "outputPath": ""
     },
     "enableEngineNative": false,
-    "useIsolateContext": true,
+    "useIsolateContext": false,
     "userConfirmedBundleSwitch": false,
     "packNpmManually": false,
     "packNpmRelationList": [],
     "minifyWXSS": true,
     "disableUseStrict": false,
+    "minifyWXML": true,
     "showES6CompileOption": false,
-    "useCompilerPlugins": false,
-    "minifyWXML": true
+    "useCompilerPlugins": false
   },
   "compileType": "miniprogram",
   "condition": {}

src/components/ContentItem.vue

@@ -51,15 +51,16 @@ function jumpToDetail() {
 .article_list_item {
   box-sizing: border-box;
   background: #fff;
-  // margin-bottom: 20rpx;
+  margin: 20rpx 0rpx;
+  border-radius: 20rpx;
+  border:1px solid #3333332e;
   .article_detail {
     box-sizing: border-box;
     display: flex;
     width: 100%;
-    justify-content: space-between;
+    justify-content: space-around;
     align-items: center;
-    border-bottom: 1px solid #f5f6f6;
-    padding: 20rpx 40rpx;
+    padding:20rpx;
     .artclie_text_msg {
       flex: 1;
     }

src/components/NavBar.vue

@@ -1,7 +1,7 @@
 <template>
   <view class="self_tabs">
     <view class="tab_header">
-      <button
+      <view
         v-for="item in tabList"
         :key="item.key"
         :class="item.key === activeKey ? 'item_active' : 'item'"
@@ -14,7 +14,7 @@
           :src="item.key === activeKey ? item.activeIcon : item.icon"
           style="height: 30rpx; width: 30rpx"
         />
-      </button>
+      </view>
     </view>
   </view>
 </template>
@@ -25,46 +25,49 @@ import { computed, defineComponent, PropType, toRefs } from "vue";
 export default defineComponent({
   name: "NavBar",
   data() {
+    /**
+     * [{"id":5,"name":"流浪乞讨"},
+     * {"id":4,"name":"其他寻人"},
+     * {"id":3,"name":"海外寻亲"},
+     * {"id":2,"name":"宝贝寻家"},
+     * {"id":1,"name":"家寻宝贝"}]
+     */
     return {
       tabList: [
         {
           label: "家寻",
-          key: "newest",
-          // icon: "http://static.gocoder.top/unfold.png",
-          // activeIcon: "http://static.gocoder.top/unfold_active.png",
+          key: 1,
         },
-        { label: "寻家", key: "column" },
-        { label: "其他", key: "pay" },
+        { label: "寻家", key: 2 },
+        { label: "其他", key: 4 },
       ],
-      activeKey: "newest"
+      activeKey: 1
     };
   },
   methods: {
     tabChang(activeKey) {
       this.activeKey = activeKey;
       this.$emit("change", activeKey);
-    },
+    }
   },
 });
 </script>
 
 <style lang="less">
 .self_tabs {
-  position: sticky;
-  top: 0;
+  width: 100%;
   display: flex;
-  flex-direction: column;
+  justify-content: space-around;
   .tab_header {
     display: flex;
     align-items: center;
-    height: 88rpx;
     align-items: center;
     color: #999;
-    border-bottom: 1rpx solid #f6f5f8;
     box-sizing: border-box;
     background: #fff;
     justify-content: space-around;
-
+    width: 100%;
+    padding:16rpx 0px;
     .item {
       font-size: 32rpx;
       text-align: center;

src/pages/index/index.vue

@@ -15,27 +15,36 @@
 
   <!--Contact for phone calls-->
   <Contact></Contact>
-  <!-- nut-searchbar @search事件失效.. -->
-  <nut-searchbar
-    v-model="query.keyword"
-    placeholder="姓名 | 编号 | 城市"
-    @blur="refreshList"
-></nut-searchbar>
 
   <NavBar @change="onNavBarChange"></NavBar>
-
-  <!--List of lost info-->
-  <view class="content">
-    <content-item
-      v-for="item in list"
-      :key="item.id"
-      :item="item"
-    />
+
+  <view class="lost-list-container">
+    <!-- nut-searchbar @search事件失效.. -->
+    <nut-searchbar
+      v-model="query.keyword"
+      placeholder="搜索"
+      @clear="onQueryClear"
+      @blur="refreshList"> 
+    <template v-slot:leftin>
+      <nut-icon size="14" name="search2"></nut-icon>
+    </template>
+  </nut-searchbar>
+
+
+
+    <!--List of lost info-->
+    <view class="content">
+      <content-item
+        v-for="item in list"
+        :key="item.id"
+        :item="item"
+      />
+    </view>
   </view>
 </template>
 
 <script>
-import { stopPullDownRefresh } from "@tarojs/taro";
+import Taro, { stopPullDownRefresh } from "@tarojs/taro";
 import { ref } from "vue";
 import { useList } from "../../composables/index";
 import { API_LIST } from "../../utils/api";
@@ -53,7 +62,7 @@ export default {
     this.loadList()
   },
   setup() {
-    const { query, list, loadList, refreshList } = useList({ url: API_LIST.lost,queryDefault:{type:'newest'} })
+    const { query, list, loadList, refreshList } = useList({ url: API_LIST.lost,queryDefault:{category:1} })
     const background = [
       "https://wechat-1251018873.file.myqcloud.com/images/banner.png",
       "https://wechat-1251018873.file.myqcloud.com/images/banner.png",
@@ -65,7 +74,7 @@ export default {
       list,
       loadList,
       refreshList,
-      background,
+      background
     };
   },
   methods: {
@@ -75,7 +84,11 @@ export default {
       };
     },
     onNavBarChange(activeBar){
-      this.query.type = activeBar
+      this.query.category = activeBar
+      this.refreshList()
+    },
+    onQueryClear(){
+      this.query = ''
       this.refreshList()
     }
 
@@ -84,6 +97,14 @@ export default {
 </script>
 
 <style lang="less">
+.lost-list-container {
+  flex:1;
+  background-color: #97939726;
+  padding:24rpx;
+  >.nut-searchbar {
+    background-color: unset;
+  }
+}
 .miniprogram-root {
   .for-web {
     display: none;

src/utils/api.js

@@ -32,7 +32,7 @@ export function listLost(pageNo) {
      * @description 文章列表
      * @param {number} pageNo
      * @param {number} pageSize
-     * @param {string} ??type
+     * @param {string} ??category
      * @param {string} ??keywords
      */
     // return get('/articles', { page_no })