始宁农业小程序：供应商筛选

htmldev/shiningWxMini/app.js

@@ -55,7 +55,21 @@ App({
       }
     ],
     objSystemConfig: {},
-    messageDetailStorageKey: 'messageDetail'
+    messageDetailStorageKey: 'messageDetail',
+    arrShopType: [
+      {
+        name: '大户',
+        value: '0'
+      },
+      {
+        name: '合作社',
+        value: '1'
+      },
+      {
+        name: '家庭农场',
+        value: '2'
+      }
+    ]
   },
   async fetchUserData() {
     try {

htmldev/shiningWxMini/pages/business/business.js

@@ -1,5 +1,7 @@
 const pages = require('../../mixin/pages')
 const { getProductCategoryList } = require('../../api/common')
+const { debounce } = require('../../utils/util')
+const app = getApp()
 
 Page({
 
@@ -11,11 +13,16 @@ Page({
     listUrl: '/api/user/home/shop/list',
     searchForm: {
       key_words: '',
-      category_id: ''
+      category_id: '',
+      shop_type: ''
     },
     categoryList: [],
     navScrollLeft: -1,
-    booLock: false
+    booLock: false,
+    booPopop: true,
+    arrShopType: app.globalData.arrShopType,
+    shop_type: [],
+    handleShoptype: null
   },
   ...pages.methods,
 
@@ -25,6 +32,9 @@ Page({
   async onLoad(options) {
     await this.fetchProductCategoryList()
     this.fetchOrderList()
+    this.setData({
+      handleShoptype: debounce(this.refreshOrderList, 2500)
+    })
   },
 
   /**
@@ -117,5 +127,28 @@ Page({
         this.refreshOrderList()
       })
     }
+  },
+  hidePopop() {
+    this.setData({
+      booPopop: false
+    })
+  },
+  onChange(event) {
+    const temp = event.detail
+    const value = temp[temp.length - 1]
+
+    this.setData({
+      shop_type: [],
+      'searchForm.shop_type': value || ''
+    }, () => {
+      this.data.handleShoptype()
+    })
+
+    const timer = setTimeout(() => {
+      clearTimeout(timer)
+      this.setData({
+        shop_type: value ? [value] : []
+      })
+    }, 200)
   }
 })

htmldev/shiningWxMini/pages/business/business.json

@@ -1,7 +1,10 @@
 {
   "usingComponents": {
     "van-loading": "@vant/weapp/loading/index",
-    "business-item-normal": "../../components/business-item-normal"
+    "business-item-normal": "../../components/business-item-normal",
+    "van-popup": "@vant/weapp/popup/index",
+    "van-checkbox": "@vant/weapp/checkbox/index",
+    "van-checkbox-group": "@vant/weapp/checkbox-group/index"
   },
   "navigationBarTitleText": "供应商",
   "backgroundColor": "#F6F6F6",

htmldev/shiningWxMini/pages/business/business.scss

@@ -0,0 +1,61 @@
+.page-header-search {
+  padding: 20rpx 0 28rpx;
+}
+
+.app_nav-wrap {
+  margin-bottom: 38rpx;
+}
+
+.pullup-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 50rpx;
+}
+
+.van-loading__text {
+  color: #969799;
+  font-size: 14rpx;
+  line-height: 20rpx;
+}
+
+.popup-body {
+  padding-top: 28rpx;
+
+  &-icon {
+    width: 92rpx;
+    height: 8rpx;
+    border-radius: 4rpx;
+    margin: 0 auto;
+    background-color: #91B379;
+  }
+
+  &-title {
+    padding-left: 68rpx;
+    margin-top: 32rpx;
+    margin-bottom: 18rpx;
+    line-height: 58rpx;
+    font-size: 40rpx;
+    color: #333333;
+  }
+}
+
+.form-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  height: 98rpx;
+  padding: 0 48rpx 0 68rpx;
+
+  &-label {
+    line-height: 52rpx;
+    font-size: 36rpx;
+    color: #666666;
+  }
+
+  .van-checkbox__icon.van-checkbox__icon--round {
+    border-color: #91B379;
+  }
+}

htmldev/shiningWxMini/pages/business/business.wxml

@@ -42,3 +42,28 @@
     type="spinner">加载中...
   </van-loading>
 </view>
+<van-popup
+  show="{{ booPopop }}"
+  overlay="{{true}}"
+  position="bottom"
+  round
+  bind:close="hidePopop">
+  <view class="popup-body">
+    <view class="popup-body-icon"></view>
+    <view class="popup-body-title">筛选</view>
+    <van-checkbox-group
+      value="{{ shop_type }}"
+      bind:change="onChange">
+      <view
+        class="form-item"
+        wx:for="{{arrShopType}}"
+        wx:key="index">
+        <text class="form-item-label">{{item.name}}</text>
+        <van-checkbox
+          checked-color="#91B379"
+          name="{{item.value}}"></van-checkbox>
+      </view>
+    </van-checkbox-group>
+
+  </view>
+</van-popup>

htmldev/shiningWxMini/pages/business/business.wxss

@@ -1,21 +0,0 @@
-.page-header-search {
-  padding: 20rpx 0 28rpx;
-}
-
-.app_nav-wrap {
-  margin-bottom: 38rpx;
-}
-
-.pullup-wrapper {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 50px;
-}
-
-.van-loading__text {
-  color: #969799;
-  font-size: 14px;
-  line-height: 20px;
-}