feat: 对接商品列表接口

src/pages/goods/list.vue

@@ -1,4 +1,5 @@
 <template>
+  <!-- #ifdef H5 -->
   <zj-page-layout
   	:hasFooter="false"
   	:isScroll="true"
@@ -9,19 +10,24 @@
       <view class="header-container">
         <u-tabs
           :list="categoryList"
-          @click="click"
-          :scrollable="false"
+          :current="categoryCurrent"
+          @click="clickCategory"
+          keyName="categoryName"
+          :scrollable="categoryList.length === 4 ? false : true"
           lineColor="#01C30B">
         </u-tabs>
         <u-search
           placeholder="输入商品名称搜索"
           :showAction="false"
           clearabled
-          v-model="keyword">
+          v-model="keyword"
+          @search="refreshList"
+          @clear="refreshList">
         </u-search>
         <u-tabs
           :list="tabList"
-          @click="click"
+          :current="tabCurrent"
+          @click="clickTab"
           :scrollable="false"
           lineColor="#01C30B">
         </u-tabs>
@@ -29,24 +35,22 @@
     </template>
 
     <view class="common-goods-list">
-      <view class="item" @tap="$navPage(`/pages/goods/detail`)">
+      <view class="item" v-for="(item, index) in dataList" :key="index" @tap="toGoodsDetail(item.id)">
         <view class="top">
           <image src="@/static/common/logo.png"></image>
           <view class="user">
-            <view class="name">张三</view>
-            <view class="time">23小时前发布</view>
+            <view class="name">{{item.userName}}</view>
+            <view class="time">{{item.createTime}}</view>
           </view>
-          <view class="price">¥1888.00</view>
+          <view class="price">{{item.amount | priceFilter2}}</view>
         </view>
-        <view class="title">商品名称</view>
-        <view class="des">商品描述</view>
+        <view class="title">{{item.title}}</view>
+        <view class="des">{{item.content}}</view>
         <view class="imgs">
-          <image src="@/static/user/other_speech.png"></image>
-          <image src="@/static/user/other_speech.png"></image>
-          <image src="@/static/user/other_speech.png"></image>
+          <image :src="imgUrl + it.imgUrl" v-for="(it, idx) in item.goodsFiles" :key="idx"></image>
         </view>
         <view class="bottom">
-          <view class="left-location">天河区棠下</view>
+          <view class="left-location"><text class="iconfont icon-dingwei"></text>{{item.address}}</view>
           <view class="right-stats">
             <view class="it">
               <text class="iconfont icon-dianzan"></text>
@@ -64,75 +68,143 @@
         </view>
       </view>
     </view>
+
+    <Loading :loadStatus="loadStatus" :dataList="dataList" />
   </zj-page-layout>
+  <!-- #endif -->
+  <!-- #ifndef H5 -->
+  <web-view :src="webViewHref('/pages/goods/list')"></web-view>
+  <!-- #endif -->
 </template>
 
 <script>
+  // #ifdef H5
   export default {
     data() {
       return {
         imgUrl: this.$imageUrl,
-        categoryList: [
-          {name: '家用空调', value: 1},
-          {name: '商用空调', value: 2},
-          {name: '冷冻空调', value: 3},
-          {name: '特种空调', value: 4},
-        ],
+        categoryList: [],
+        categoryId: '',
         tabList: [
-          {name: '默认顺序', value: 1},
-          {name: '在售商品', value: 2},
-          {name: '离我最近', value: 3},
-          {name: '人气最高', value: 4},
+          {name: '默认顺序', value: 0},
+          {name: '在售商品', value: 1},
+          {name: '离我最近', value: 2},
+          {name: '人气最高', value: 3},
         ],
+        tabCurrent: 0,
         keyword: '',
         dataList: [],
         pageNum: 1,
+        loadStatus: 0,
         refresherTriggered: false,
       }
     },
 
-    async onLoad() {
-      // await this.getList()
+    computed:{
+    	categoryCurrent() {
+        if(this.categoryId) {
+          return this.categoryList.map(item => item.categoryId).indexOf(this.categoryId)
+        }else {
+          return 0
+        }
+    	}
+    },
+
+    async onLoad({categoryId, keyword}) {
+      console.log(categoryId);
+      console.log(keyword);
+      this.categoryId = categoryId;
+      this.keyword = keyword;
+      await this.getCategory();
+      await this.getList();
     },
 
     methods: {
+      async getCategory() {
+        return new Promise((resolve, reject) => {
+          this.$api.get('/goods/category/list')
+          .then(res => {
+            this.categoryList = res.data || [];
+          }).finally(res => {
+            resolve(1);
+          })
+        })
+      },
+
       //获取列表数据
       async getList() {
-        this.$api.post('/xxx/xxxlist', {
+        let params = {};
+        if(this.tabCurrent === 1) {
+          params.status = '1';
+        }else if(this.tabCurrent === 2) {
+          params.lng = this.lng;
+          params.lat = this.lat;
+        }else if(this.tabCurrent === 3) {
+          params.visitOrderBy = 'YES';
+        }
+
+        this.$api.get('/goods/list', {
           pageNum: this.pageNum,
           pageSize: 10,
+          categoryId: this.categoryId,
+          title: this.keyword,
+          ...params
         }).then(res => {
           this.loadStatus = 0;
           let list = res.data.records;
-          if(list.length < 10){
-          	this.loadStatus = 2;
+          if (list.length < 10) {
+            this.loadStatus = 2;
           }
           this.dataList = this.dataList.concat(list);
         }).catch(() => {
-					this.loadStatus = 2;
-				}).finally(res => {
-					this.refresherTriggered = false;
-				})
+          this.loadStatus = 2;
+        })
+      },
+
+      clickCategory(item) {
+        this.categoryId = item.categoryId;
+        this.refreshList();
+      },
+
+      clickTab(item) {
+        this.tabCurrent = item.value;
+        this.refreshList();
       },
 
       // 滚动到底部
       scrolltolower(e) {
-      	if (this.loadStatus === 0) {
-      		this.pageNum++;
-      		this.getList();
-      	}
+        if (this.loadStatus === 0) {
+          this.pageNum++;
+          this.getList();
+        }
       },
 
       // 触发下拉刷新
-      refresherrefresh(e) {
-      	this.refresherTriggered = true;
-      	this.dataList = [];
-      	this.pageNum = 1;
-      	this.getList();
+      async refresherrefresh(e) {
+        this.refresherTriggered = true;
+        // await this.getCategory();
+        this.refreshList();
+        this.refresherTriggered = false;
+      },
+
+      refreshList() {
+        this.dataList = [];
+        this.pageNum = 1;
+        this.getList();
+      },
+
+      toGoodsDetail(id) {
+        this.$navToPage({
+          url: `/pages/goods/detail?${id}`
+        })
       },
 
     }
   }
+  // #endif
+  // #ifndef H5
+
+  // #endif
 </script>
 
 <style lang="scss" scoped>

src/pages/index/index.vue

@@ -10,7 +10,7 @@
 
       <view class="all-container">
         <view class="search-container">
-          <u-search placeholder="输入商品名称搜索" :showAction="false" clearabled v-model="keyword">
+          <u-search placeholder="输入商品名称搜索" :showAction="false" clearabled v-model="keyword" @search="handleSearch">
           </u-search>
         </view>
 
@@ -31,7 +31,7 @@
         </view>
 
         <view class="common-goods-list">
-          <view class="item card" v-for="(item, index) in dataList" :key="index" @tap="$navPage(`/pages/goods/detail`)">
+          <view class="item card" v-for="(item, index) in dataList" :key="index" @tap="toGoodsDetail(item.id)">
             <view class="top">
               <image src="@/static/common/logo.png"></image>
               <view class="user">
@@ -221,10 +221,23 @@
         this.pageNum = 1;
         this.getList();
       },
+      
+      handleSearch() {
+        this.$navToPage({
+          url: `/pages/goods/list?keyword=${this.keyword}`
+        })
+        this.keyword = '';
+      },
+
+      toGoodsList(categoryId) {
+        this.$navToPage({
+          url: `/pages/goods/list?categoryId=${categoryId}`
+        })
+      },
 
-      toGoodsList(id) {
+      toGoodsDetail(id) {
         this.$navToPage({
-          url: `/pages/goods/list?${id}`
+          url: `/pages/goods/detail?id=${id}`
         })
       },