供需分页加载

components/My_SupplyAndDemandItemBox/index.js

@@ -17,15 +17,23 @@ Component({
         },
         imageList: {
             type: Array,
-            value: ['/static/userImage.png', '/static/changeImg.png', "/static/login/identity.png", '/static/changeImg.png', "/static/login/identity.png"]
+            value: []
         }
     },
+    lifetimes: {
+        ready: function () {
+            // 在组件实例进入页面节点树时执行
+        },
+        detached: function () {
+            // 在组件实例被从页面节点树移除时执行
+        },
+    },
 
     /**
      * 组件的初始数据
      */
     data: {
-
+        urls: [],
     },
 
     /**
@@ -34,12 +42,17 @@ Component({
     methods: {
         /* 预览图片 */
         previewImage(e) {
+            let imageList = this.data.imageList,
+                urls = [];
+            for (let i = 0; i < imageList.length; i++) {
+                urls.push(imageList[i].fobsurl)
+            }
             const {
                 index
             } = e.currentTarget.dataset
             wx.previewImage({
-                urls: this.data.imageList,
-                current:index
+                urls: urls,
+                current: index
             })
         }
     }

components/My_SupplyAndDemandItemBox/index.wxml

@@ -10,7 +10,7 @@
     <view class="time-content">
         <view class="supply-and-demand-time">{{time}}</view>
         <view class="supply-and-demand-content">
-            <image wx:for="{{imageList}}" wx:if="{{index<3}}" src="{{item}}" mode="aspectFit" data-index="{{index}}" bindtap="previewImage"></image>
+            <image wx:for="{{imageList}}" wx:if="{{index<3}}" src="{{item.fobsurl}}" mode="aspectFill" data-index="{{index}}" bindtap="previewImage"></image>
         </view>
     </view>
     <!-- 数据，按钮 -->

components/My_pageReachBottom/index.js

@@ -7,6 +7,10 @@ Component({
         loadMore: {
             type: Boolean,
             value: false
+        },
+        dummyStatus: {
+            type: Boolean,
+            value: false
         }
     },
 

components/My_pageReachBottom/index.json

@@ -2,6 +2,7 @@
     "component": true,
     "usingComponents": {
         "van-divider": "@vant/weapp/divider/index",
-        "van-loading": "@vant/weapp/loading/index"
+        "van-loading": "@vant/weapp/loading/index",
+        "van-empty": "@vant/weapp/empty/index"
     }
 }

components/My_pageReachBottom/index.wxml

@@ -1,4 +1,5 @@
-<view wx:if="{{!loadMore}}" style="display: flex; justify-content: center; align-items: center;">
+<van-empty wx:if="{{!dummyStatus}}" image="search" description="暂无数据" />
+<view wx:elif="{{!loadMore}}" style="display: flex; justify-content: center; align-items: center;">
     <van-loading size="18px" color="#4BBECF"> 玩命加载中...</van-loading>
 </view>
 <van-divider wx:else contentPosition="center">我也是有底线的~</van-divider>

pages/tabbar-pages/supplyAndDemand/index.js

@@ -66,14 +66,31 @@ Page({
      * 生命周期函数--监听页面加载
      */
     onLoad: function (options) {
+        /* 获取所有信息分类 */
+        _Http.basic({
+            "accesstoken": wx.getStorageSync('userData').token,
+            "classname": "enterprise.system.supplyanddemand",
+            "method": "query_typeselectList",
+            "content": {}
+        }).then(res => {
+            if (res.msg != '成功') return;
+            this.setData({
+                ftypeList: res.data
+            })
+        })
 
     },
     /* 宫格区点击事件 */
-    gridJumpPage(even) {
-        const {
-            name
-        } = even.target.dataset
-        console.log(name)
+    switchScreenType(even) {
+        let {
+            type
+        } = even.currentTarget.dataset;
+        /* 第二次触发同一个，查询全部 */
+        if (type == this.data.ftype) type = "";
+        this.setData({
+            ftype: type
+        });
+        this.getSupplyAndDemand()
     },
     /**
      * 生命周期函数--监听页面初次渲染完成
@@ -122,6 +139,7 @@ Page({
     },
     /* 获取供需列表 */
     getSupplyAndDemand(fstatus) {
+        if (this.data.pageNumber > this.data.pageTotal) return;
         let condition = "";
         let where = {
             "condition": condition, //模糊搜索
@@ -142,7 +160,7 @@ Page({
             "method": "query_supplyanddemandList",
             "content": {
                 "getdatafromdbanyway": true,
-                "pageNumber": 1,
+                "pageNumber": this.data.pageNumber,
                 "pageSize": 20,
                 "where": where
             }
@@ -150,18 +168,21 @@ Page({
             console.log(res)
             if (res.msg != "成功") return;
             //替换或拼接
-            if (this.data.pageNumber == 1) {
+            if (res.pageNumber == 1) {
+                this.InitializeDataPaging()
                 //第一页直接替换list
                 this.setData({
-                    productList: res.data
-                })
+                    productList: res.data,
+                    pageTotal: res.pageTotal
+                });
             } else {
                 //第二页开始拼接列表
                 let productList = this.data.productList.concat(res.data);
                 this.setData({
                     productList
                 })
-            }
+            };
+            this.PageDemanding()
         })
     },
     /* tabs */
@@ -195,19 +216,21 @@ Page({
             console.log(res);
             if (res.msg != "成功") return;
             //替换或拼接
-            if (this.data.pageNumber == 1) {
+            if (res.pageNumber == 1) {
                 //第一页直接替换list
                 this.setData({
                     productList: res.data
                 })
+                this.InitializeDataPaging()
             } else {
                 //第二页开始拼接列表
                 let productList = this.data.productList.concat(res.data);
                 this.setData({
                     productList
                 })
+                console.log(321651)
             }
-            this.PageDemanding(res.pageTotal)
+            this.PageDemanding()
         })
     },
     /* 我的需求编辑按钮跳转 */
@@ -253,10 +276,9 @@ Page({
         })
     },
     /* 分页 */
-    PageDemanding(pageTotal) {
+    PageDemanding() {
         let pageNumber = this.data.pageNumber + 1;
         this.setData({
-            pageTotal,
             pageNumber
         })
     },

pages/tabbar-pages/supplyAndDemand/index.wxml

@@ -15,12 +15,15 @@
         <van-tab title="所有信息">
             <!-- 宫格 -->
             <view class="grid_box">
-                <van-grid border="{{false}}" bindtap="gridJumpPage">
-                    <van-grid-item wx:for="{{gridList}}" data-name="{{item.text}}" icon="{{item.icon}}" text="{{item.text}}" text-class="grid_text-class" />
-                </van-grid>
+                <view class="grid_item" wx:key="index" wx:for="{{ftypeList}}" data-type="{{item.ftype}}" bindtap="switchScreenType">
+                    <view class="grid_item_image {{ftype==item.ftype?'grid_item_pitchOn':''}}">
+                        <!-- <image></image> -->
+                    </view>
+                    <view class="grid_item_title">{{item.ftype}}</view>
+                </view>
             </view>
             <!-- 列表 -->
-            <My_SupplyAndDemandItemBox wx:for="{{productList}}" title="【{{item.ftitle}}】{{item.fcontent}}" time="{{item.checkdate}}">
+            <My_SupplyAndDemandItemBox wx:for="{{productList}}" title="【{{item.ftitle}}】{{item.fcontent}}" time="{{item.checkdate}}" imageList="{{item.attinfos}}">
                 <!-- 内容信息插槽 -->
                 <view slot="dataAndBut">
                     <view class="dataAndBut">
@@ -55,7 +58,7 @@
                 </view>
             </view>
             <!-- 列表 -->
-            <My_SupplyAndDemandItemBox wx:for="{{productList}}" title="【{{item.ftitle}}】{{item.fcontent}}" time="{{item.checkdate}}">
+            <My_SupplyAndDemandItemBox wx:for="{{productList}}" title="【{{item.ftitle}}】{{item.fcontent}}" time="{{item.checkdate}}" imageList="{{item.attinfos}}">
                 <!-- 下架按钮插槽 -->
                 <view slot="soldOutBut">
                     <van-button data-index="{{index}}" plain color="#4DC2D4" custom-class="soldOutBut" bindtap="soldOut">下架</van-button>
@@ -79,6 +82,6 @@
 <!-- 右侧吸附按钮 -->
 <My_adsorbRight></My_adsorbRight>
 <!-- 触底展示 -->
-<My_pageReachBottom loadMore="{{pageTotal<pageNumber}}"></My_pageReachBottom>
+<My_pageReachBottom dummyStatus="{{productList.length>=1}}" loadMore="{{pageTotal<pageNumber}}"></My_pageReachBottom>
 <!-- 安全距离 -->
 <view style="height: 34px;"></view>

pages/tabbar-pages/supplyAndDemand/index.wxss

@@ -61,15 +61,7 @@
     border-radius: 0px 6rpx 6rpx 0px;
 }
 
-/* 宫格区域盒子 */
-.grid_box {
-    width: 704rpx;
-    height: 330rpx;
-    background: #FFFFFF;
-    border-radius: 20px;
-    overflow: hidden;
-    margin: 10rpx auto 20rpx;
-}
+
 
 .tabs_box {
     width: 100vw;
@@ -193,4 +185,45 @@
     color: #FFFFFF !important;
     top: 0;
     left: 13rpx;
+}
+
+/* 宫格区域盒子 */
+.grid_box {
+    display: flex;
+    flex-wrap: wrap;
+    width: 704rpx;
+    background: #FFFFFF;
+    border-radius: 20rpx;
+    margin: 10rpx auto 20rpx;
+    padding: 30rpx 50rpx 0;
+    box-sizing: border-box;
+}
+
+.grid_item {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    justify-content: space-between;
+    width: 130rpx;
+    margin-bottom: 20rpx;
+    padding: 0 11rpx;
+}
+
+
+.grid_item_image {
+    width: 80rpx;
+    height: 80rpx;
+    border-radius: 50%;
+    background: #D8D8D8;
+    margin-bottom: 10rpx;
+    box-sizing: border-box;
+}
+
+.grid_item_pitchOn {
+    border: 2rpx solid #4CBECF;
+}
+
+.grid_item_title {
+    font-size: 28rpx;
+    color: #000000;
 }