小程序：供应商详情接口对接

htmldev/wxMini/components/goods-item-large/index.js

@@ -16,9 +16,9 @@ Component({
    */
   methods: {
     jumpGoodsDetail() {
-      // this.triggerEvent('jumpGoodsDetail', {})
+
       wx.navigateTo({
-        url: '/pages/goodsDetail/goodsDetail'
+        url: '/pages/goodsDetail/goodsDetail?product_id=' + this.data.item.id
       })
     }
   }

htmldev/wxMini/mixin/pages.js

@@ -55,14 +55,20 @@ module.exports = {
           const { list } = data
           if (Array.isArray(list)) {
             const _list = isRefresh ? [].concat(list) : that.data.listData.concat(list)
-
-            that.setData({
+            const temp = {
               listData: _list,
               finished: list.length < that.data.pagesize,
               isRefresh: false,
               isFetchLock: false,
               pagenum: that.data.pagenum + 1
-            }, () => {
+            }
+
+            if (isRefresh && this.data.hasOwnProperty('leftList')) {
+              temp['leftList'] = []
+              temp['rightList'] = []
+            }
+
+            that.setData(temp, () => {
               if (that.isLeft) {
                 that.isLeft(list)
               }

htmldev/wxMini/pages/guide/guide.js

@@ -1,52 +1,34 @@
+const pages = require('../../mixin/pages')
+const { getProductCategoryList } = require('../../api/common')
+let leftHeight = 0
+let rightHeight = 0
+let query = null
+
 Page({
 
   /**
    * 页面的初始数据
    */
   data: {
-    category: [
-      {
-        name: '全部',
-        id: '1'
-      },
-      {
-        name: '分类',
-        id: '2'
-      },
-      {
-        name: '分类',
-        id: '3'
-      },
-      {
-        name: '分类',
-        id: '4'
-      },
-      {
-        name: '分类',
-        id: '5'
-      },
-      {
-        name: '分类',
-        id: '6'
-      }
-    ],
-    currentCategory: '1',
+    ...pages.data(),
+    listUrl: '/api/user/caigou/product/list',
+    searchForm: {
+      key_words: '',
+      category_id: ''
+    },
+    categoryList: [],
     navScrollLeft: -1,
-    pagenum: 0,
-    pagesize: 20,
-    finished: false, // 所有数据是否加载完
-    isRefresh: false, // 是否下拉刷新
-    isFetchLock: false, // 接口调用加锁
-    list: [1],
-    booLock: false
+    leftList: [],
+    rightList: []
   },
-  freshing: false,
+  ...pages.methods,
 
   /**
    * 生命周期函数--监听页面加载
    */
-  onLoad(options) {
-
+  async onLoad(options) {
+    await this.fetchProductCategoryList()
+    this.fetchOrderList()
   },
 
   /**
@@ -81,30 +63,91 @@ Page({
    * 页面相关事件处理函数--监听用户下拉动作
    */
   onPullDownRefresh() {
-
+    if (this.data.freshing) {
+      return
+    }
+    this.setData({
+      freshing: true
+    })
+    this.bindCallBack()
   },
 
   /**
    * 页面上拉触底事件的处理函数
    */
   onReachBottom() {
-
+    this.fetchOrderList()
   },
-
-  /**
-   * 用户点击右上角分享
-   */
-  onShareAppMessage() {
-
+  bindCallBack() {
+    this.refreshOrderList()
+  },
+  async fetchProductCategoryList() {
+    try {
+      const { status, data, msg } = await getProductCategoryList()
+      if (status && Array.isArray(data) && data.length > 0) {
+        const temp = data.map(item => {
+          return {
+            ...item,
+            text: item.category_name
+          }
+        })
+
+        temp.unshift({
+          category_img_url: '',
+          category_name: '全部',
+          id: 0
+        })
+
+        this.setData({
+          categoryList: temp,
+          'searchForm.category_id': temp[0].id
+        })
+      } else {
+        wx.showToast({
+          title: msg,
+          icon: 'none'
+        })
+      }
+    } catch (err) {}
   },
   handleNav(e) {
+    const { item } = e.currentTarget.dataset
+
+    if (this.data.searchForm.category_id !== item.id) {
+      this.setData({
+        'searchForm.category_id': item.id,
+        navScrollLeft: 0
+      }, () => {
+        this.refreshOrderList()
+      })
+    }
+  },
+  async isLeft(list) {
     const {
-      item
-    } = e.currentTarget.dataset
-
-    this.setData({
-      currentCategory: item.id,
-      navScrollLeft: 0
+      leftList,
+      rightList
+    } = this.data
+    query = wx.createSelectorQuery()
+    for (const item of list) {
+      leftHeight <= rightHeight ? leftList.push(item) : rightList.push(item)
+
+      await this.getBoxHeight(leftList, rightList)
+    }
+  },
+  getBoxHeight(leftList, rightList) {
+    return new Promise((resolve, reject) => {
+      this.setData({
+        leftList,
+        rightList
+      }, () => {
+        query.select('.waterfall-left').boundingClientRect()
+        query.select('.waterfall-right').boundingClientRect()
+        query.exec((res) => {
+          leftHeight = res[0].height
+          rightHeight = res[1].height
+          resolve()
+        })
+      })
     })
   }
 })

htmldev/wxMini/pages/guide/guide.wxml

@@ -6,36 +6,49 @@
       </label>
       <input
         placeholder-class="app_header-search-placeholder"
-        value=""
-        placeholder="搜索"></input>
+        value="{{searchForm.key_words}}"
+        placeholder="搜索"
+        data-formkey="key_words"
+        bind:input="handleKeyWords"></input>
     </view>
   </view>
   <scroll-view
     class="app_nav-wrap"
     scroll-x="{{true}}"
     scroll-with-animation="{{true}}"
-    scroll-into-view="item-{{currentCategory * 1 < 4 ? navScrollLeft : currentCategory * 1 - 3}}">
+    scroll-into-view="item-{{searchForm.category_id * 1 < 4 ? navScrollLeft : searchForm.category_id * 1 - 3}}">
     <view
-      class="nav {{currentCategory === item.id ? 'active' : ''}}"
-      wx:for="{{category}}"
+      class="nav {{searchForm.category_id === item.id ? 'active' : ''}}"
+      wx:for="{{categoryList}}"
       wx:key="id"
       data-item="{{item}}"
       bind:tap="handleNav">
-      <view class="photo" id="item-{{index}}">
-        <image src=""></image>
+      <view
+        class="photo"
+        id="item-{{index}}">
+        <image src="{{item.category_img_url}}"></image>
       </view>
-      <view class="name">{{item.name}}</view>
+      <view class="name">{{item.category_name}}</view>
     </view>
   </scroll-view>
-  <!--产品-->
-  <view
-    class="waterfall"
-    hidden="{{currentNav === '1'}}">
+  <!--瀑布流-->
+  <view class="waterfall">
     <view class="waterfall-left">
-      <goods-item-large/>
+      <block wx:for="{{leftList}}" wx:key="id">
+        <goods-item-large item="{{item}}"/>
+      </block>
     </view>
     <view class="waterfall-right">
-      <goods-item-large/>
+      <block wx:for="{{rightList}}" wx:key="id">
+        <goods-item-large item="{{item}}"/>
+      </block>
     </view>
   </view>
+  <view class="pullup-wrapper" wx:if="{{!isRefresh}}">
+    <van-loading
+      wx:if="{{!finished}}"
+      size="24px"
+      type="spinner">加载中...
+    </van-loading>
+  </view>
 </view>

htmldev/wxMini/pages/guide/guide.wxss

@@ -15,9 +15,18 @@
 }
 
 .waterfall {
-  display: flex;
-  justify-content: space-between;
   width: 690rpx;
   padding: 30rpx 0;
   margin: 0 auto;
+  font-size: 0;
+}
+
+.waterfall-left,
+.waterfall-right {
+  display: inline-block;
+  width: 330rpx;
+}
+
+.waterfall-right {
+  margin-left: 30rpx;
 }

htmldev/wxMini/pages/home/home.wxss

@@ -209,11 +209,20 @@
 }
 
 .waterfall {
-  display: flex;
-  justify-content: space-between;
   width: 690rpx;
   padding: 30rpx 0;
   margin: 0 auto;
+  font-size: 0;
+}
+
+.waterfall-left,
+.waterfall-right {
+  display: inline-block;
+  width: 330rpx;
+}
+
+.waterfall-right {
+  margin-left: 30rpx;
 }
 
 .pullup-wrapper {

htmldev/wxMini/pages/newGoods/newGoods.wxml

@@ -6,7 +6,7 @@
       </label>
       <input
         placeholder-class="app_header-search-placeholder"
-        value=""
+        value="{{searchForm.key_words}}"
         placeholder="搜索信息"
         data-formkey="key_words"
         bind:input="handleKeyWords"></input>

htmldev/wxMini/pages/partner/partner.wxml

@@ -6,7 +6,7 @@
       </label>
       <input
         placeholder-class="app_header-search-placeholder"
-        value=""
+        value="{{searchForm.key_words}}"
         placeholder="搜索"
         data-formkey="key_words"
         bind:input="handleKeyWords"></input>