网格队伍修改成瀑布流

epdc-resident-mp-yushan/pages/index/index.js

@@ -274,6 +274,7 @@ Page({
     this.getNewsList()
     this.gridmanList()
     this.contentList()
+    this.getImgUrl()
   },
   // 切换网格，跳转到网格列表
   changeGrid() {
@@ -430,6 +431,17 @@ Page({
       url: '/subpages/submitAdvise/pages/activeApply/activeApply'
     })
   },
+  // 获取服务电话
+  getImgUrl() {
+    const params = {
+      imgType: '3'
+    }
+    api.getImgUrl(params).then(res => {
+      console.log(res)
+    }).catch(err => {
+      console.error(err)
+    })
+  },
   // 拨打便民服务电话
   callPhone(e) {
     const { phone } = e.currentTarget.dataset

epdc-resident-mp-yushan/project.private.config.json

@@ -11,7 +11,8 @@
       "list": []
     },
     "miniprogram": {
-      "list": [{
+      "list": [
+        {
           "id": 0,
           "name": "带参数二维码",
           "pathName": "pages/index/index",
@@ -61,6 +62,12 @@
           "pathName": "subpages/gridArmy/pages/index/index",
           "query": "",
           "scene": null
+        },
+        {
+          "name": "pages/toRegister/toRegister",
+          "pathName": "pages/toRegister/toRegister",
+          "query": "",
+          "scene": null
         }
       ]
     }

epdc-resident-mp-yushan/subpages/gridArmy/pages/index/index.js

@@ -1,5 +1,7 @@
 const api = require('../../../../utils/api')
-
+let leftHeight = 0
+let rightHeight = 0
+let query = ''
 Page({
   data: {
     loadMoreType: 'none',
@@ -8,9 +10,12 @@ Page({
     pageSize: 10,
     deptName: '',
     deptIntro: '',
-    griderList: []
+    griderList: [],
+    griderLeftList: [],
+    griderRightList: []
   },
   onLoad() {
+    query = wx.createSelectorQuery()
     this.getDeptInfo()
     this.getMemberList()
   },
@@ -23,6 +28,19 @@ Page({
       this.loadMoreMemberList()
     }
   },
+  getBoxHeight(griderLeftList, griderRightList) { //获取左右两边高度
+    return new Promise((resolve, reject) => {
+      this.setData({ griderLeftList, griderRightList }, () => {
+        query.select('#left').boundingClientRect()
+        query.select('#right').boundingClientRect()
+        query.exec((res) => {
+          leftHeight = res[0].height //获取左边列表的高度
+          rightHeight = res[1].height //获取右边列表的高度
+          resolve()
+        })
+      })
+    })
+  },
   // 社区介绍
   getDeptInfo() {
     api.getDeptInfo().then(res => {
@@ -45,14 +63,17 @@ Page({
     wx.showLoading({
       title: '加载中...'
     })
-    api.getMemberList(params).then(res => {
+    api.getMemberList(params).then(async (res) => {
       wx.hideLoading()
-      const arr = []
-      // res.data.forEach()
       this.setData({
         griderList: res.data,
         loadMoreType: res.data.length === this.data.pageSize ? 'loading' : 'none'
       })
+      const { griderList, griderLeftList, griderRightList } = this.data
+      for (const item of griderList) {
+        leftHeight <= rightHeight ? griderLeftList.push(item) : griderRightList.push(item) //判断两边高度，来觉得添加到那边
+        await this.getBoxHeight(griderLeftList, griderRightList)
+      }
     }).catch(err => {
       wx.hideLoading()
       this.setData({
@@ -70,12 +91,17 @@ Page({
     wx.showLoading({
       title: '加载中...'
     })
-    api.getMemberList(params).then(res => {
+    api.getMemberList(params).then(async (res) => {
       wx.hideLoading()
       this.setData({
         griderList: this.data.griderList.concat(res.data),
         loadMoreType: res.data.length === this.data.pageSize ? 'loading' : 'none'
       })
+      const { griderList, griderLeftList, griderRightList } = this.data
+      for (const item of griderList) {
+        leftHeight <= rightHeight ? griderLeftList.push(item) : griderRightList.push(item) //判断两边高度，来觉得添加到那边
+        await this.getBoxHeight(griderLeftList, griderRightList)
+      }
     }).catch(err => {
       wx.hideLoading()
       console.error(err)

epdc-resident-mp-yushan/subpages/gridArmy/pages/index/index.wxml

@@ -9,19 +9,40 @@
     <view class="community-detail">{{deptIntro}}</view>
   </view>
   <view class="grider-list" wx:if="{{griderList.length > 0}}">
-    <view class="grid-item" wx:for="{{griderList}}" wx:key="index">
-      <view class="avatar">
-        <image src="{{item.imgUrl}}" />
+    <view class="grider-left" id="left">
+      <view class="grid-item" wx:for="{{griderLeftList}}" wx:key="index">
+        <view class="avatar">
+          <image src="{{item.imgUrl}}" />
+        </view>
+        <view class="name">{{item.name}}</view>
+        <view class="item">格言：{{item.motto}}</view>
+        <view class="item">职责：{{item.duty}}</view>
+        <view class="item">负责区域：{{item.territory}}</view>
+        <view class="item">电话：{{item.mobile}}</view>
+        <view class="call-phone">
+          <view class="phone">
+            <image src="../../images/phone.png" />
+          </view>
+          <view class="tip" bindtap="callGrider" data-phone="{{item.mobile}}">打电话</view>
+        </view>
       </view>
-      <view class="name">{{item.name}}</view>
-      <view class="item">格言：{{item.motto}}</view>
-      <view class="item">负责区域：{{item.territory}}</view>
-      <view class="item">电话：{{item.mobile}}</view>
-      <view class="call-phone">
-        <view class="phone">
-          <image src="../../images/phone.png" />
+    </view>
+    <view class="grider-right" id="right">
+      <view class="grid-item" wx:for="{{griderRightList}}" wx:key="index">
+        <view class="avatar">
+          <image src="{{item.imgUrl}}" />
+        </view>
+        <view class="name">{{item.name}}</view>
+        <view class="item">格言：{{item.motto}}</view>
+        <view class="item">职责：{{item.duty}}</view>
+        <view class="item">负责区域：{{item.territory}}</view>
+        <view class="item">电话：{{item.mobile}}</view>
+        <view class="call-phone">
+          <view class="phone">
+            <image src="../../images/phone.png" />
+          </view>
+          <view class="tip" bindtap="callGrider" data-phone="{{item.mobile}}">打电话</view>
         </view>
-        <view class="tip" bindtap="callGrider" data-phone="{{item.mobile}}">打电话</view>
       </view>
     </view>
   </view>

epdc-resident-mp-yushan/subpages/gridArmy/pages/index/index.wxss

@@ -50,10 +50,18 @@ image {
   box-sizing: border-box;
   padding: 0 32rpx;
   margin-top: -40rpx;
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  grid-auto-flow: dense;
-  column-gap: 30rpx;
+}
+
+.grider-list .grider-left {
+  width: calc(50% - 15rpx);
+  margin-right: 15rpx;
+  float: left;
+}
+
+.grider-list .grider-right {
+  width: calc(50% - 15rpx);
+  margin-left: 15rpx;
+  float: left;
 }
 
 .grider-list .grid-item {

epdc-resident-mp-yushan/utils/api.js

@@ -63,7 +63,8 @@ module.exports = {
   getConsultantDetail: getConsultantDetail,
   gridmanList: gridmanList,
   getDeptInfo: getDeptInfo,
-  getMemberList: getMemberList
+  getMemberList: getMemberList,
+  getImgUrl: getImgUrl
 }
 
 function getToken(wxCode) {
@@ -503,3 +504,8 @@ function getDeptInfo() {
 function getMemberList(params) {
   return fly.get('sys/gridMember/getMemberList', params)
 }
+
+// 首页-服务电话
+function getImgUrl(params) {
+  return fly.get('imgConfig/getImgUrl', params)
+}