点将台模块添加,修改展示顺序

2 years ago · a35c1d94d8
10 changed files with 582 additions and 7 deletions
--- a/epdc-resident-mp-yushan/app.json
+++ b/epdc-resident-mp-yushan/app.json
@ -228,7 +228,8 @@
            "root": "subpages/mediateHypermarket",
            "name": "mediateHypermarket",
            "pages": [
-                "page/index/index"
+                "page/index/index",
+                "page/dotGeneral/dotGeneral"
            ]
        },
        {
--- a/epdc-resident-mp-yushan/images/home/lQLPJwE4tu1fd95QULD2WPlMiI98KQQ6WHNWQDQA_80_80.png
+++ b/epdc-resident-mp-yushan/images/home/lQLPJwE4tu1fd95QULD2WPlMiI98KQQ6WHNWQDQA_80_80.png
--- a/epdc-resident-mp-yushan/pages/index/index.wxss
+++ b/epdc-resident-mp-yushan/pages/index/index.wxss
@ -428,10 +428,13 @@ justify-content: center;
  height: 100%;
  float: left;
 }
-/* .module-list .module-item .icon .p20{
-    padding: 20rpx;
-    box-sizing: border-box;
-} */
+.module-list .module-item .icon .p20{
+    width:100rpx ;
+    height: 100rpx;
+    position: relative;
+    left: -10rpx;
+    top: -12rpx;
+}
 .module-list .module-item  .tip {
  font-size: 26rpx;
 	color: #3f3f3f;
--- a/epdc-resident-mp-yushan/subpages/gridArmy/pages/categoryList/categoryList.wxml
+++ b/epdc-resident-mp-yushan/subpages/gridArmy/pages/categoryList/categoryList.wxml
@ -8,7 +8,7 @@
        <image src="../../images/top-img.png" class="top-img" />
    </view>
    <view class="org-list">
-        <view class="list-item" bindtap="navigateTo" wx:for="{{categoryList}}" wx:for-item="item" wx:for-index="index" wx:key="value" data-code="{{item.typeCode}}" data-name="{{item.typeName}}" hover-class="org-hover" hover-stay-time="150">
+        <view class="list-item" bindtap="navigateTo" wx:for="{{categoryList}}" wx:for-item="item" wx:for-index="index" wx:key="value" data-code="{{item.typeCode}}" data-name="{{item.typeName}}" hover-class="org-hover" hover-stay-time="150"  wx:if="{{item.typeCode != 'SLTJ' &&item.typeCode != 'QLTJ'&&item.typeCode != 'FLTJ'&&item.typeCode != 'XLTJ'}}">
            <view class="list-item-label">{{item.typeName}}</view>
            <image class="list-item-icon" src="../../images/right-sword.png" />
        </view>
--- a/epdc-resident-mp-yushan/subpages/mediateHypermarket/images/phone.png
+++ b/epdc-resident-mp-yushan/subpages/mediateHypermarket/images/phone.png
--- a/epdc-resident-mp-yushan/subpages/mediateHypermarket/page/dotGeneral/dotGeneral.js
+++ b/epdc-resident-mp-yushan/subpages/mediateHypermarket/page/dotGeneral/dotGeneral.js
@ -0,0 +1,168 @@
+const api = require('../../../../utils/api')
+let leftHeight = 0
+let rightHeight = 0
+let query = ''
+Page({
+  data: {
+    loadMoreType: 'none',
+    loadMoreVisible: false,
+    pageNo: 1,
+    pageSize: 10,
+    deptName: '',
+    deptIntro: '',
+    griderList: [],
+    griderLeftList: [],
+    griderRightList: [],
+    selectedTabBar:'shilitiaojie'
+  },
+  onLoad(options) {
+    query = wx.createSelectorQuery()
+    this.getDeptInfo()
+      this.setData({
+        deptId: '1258587136866476033',
+        categoryCode:'SLTJ'
+      }, () => {
+        this.getMemberList()
+      })
+  },
+  onReachBottom() {
+    this.setData({
+      loadMoreVisible: true
+    })
+    if (this.data.loadMoreType === 'loading') {
+      this.data.pageNo += 1
+      this.loadMoreMemberList()
+    }
+  },
+  chooseTabBar(e) {
+    this.data.pageNo = 1
+    this.data.pageSize = 10
+    if (e.currentTarget.dataset.type === 'shilitiaojie') {
+    this.setData({
+        categoryCode:'SLTJ'
+    })
+    this.getMemberList()
+    } else if (e.currentTarget.dataset.type === 'qinglitiaojie') {
+        this.setData({
+            categoryCode:'QLTJ'
+        })
+        this.getMemberList()
+    } else if (e.currentTarget.dataset.type === 'falitiaojie') {
+        this.setData({
+            categoryCode:'FLTJ'
+        })
+        this.getMemberList()
+    }else if (e.currentTarget.dataset.type === 'xinlitiaojie'){
+        this.setData({
+            categoryCode:'XLTJ'
+        })
+        this.getMemberList()
+    }
+    this.setData({
+      selectedTabBar: e.currentTarget.dataset.type,
+    })
+    console.log(this.data.selectedTabBar);
+  },
+  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 => {
+      console.log(res)
+      const { deptInfo, deptName } = res.data
+      this.setData({
+        deptName: deptName,
+        deptIntro: deptInfo
+      })
+    }).catch(err => {
+      console.error(err)
+    })
+  },
+  // 初始化加载网格员队伍
+  getMemberList() {
+    const params = {
+      pageIndex: this.data.pageNo,
+      pageSize: this.data.pageSize,
+      deptId: this.data.deptId || '',
+      categoryCode: this.data.categoryCode || ''
+    }
+    wx.showLoading({
+      title: '加载中...'
+    })
+    this.setData({
+        griderList:[],
+        griderLeftList:[],
+        griderRightList:[],
+    })
+    api.getMemberList(params).then(async (res) => {
+      wx.hideLoading()
+      this.setData({
+        griderList: res.data,
+        loadMoreType: res.data.length === this.data.pageSize ? 'loading' : 'none'
+      })
+      const { griderLeftList, griderRightList } = this.data
+      for (const item of res.data) {
+        leftHeight <= rightHeight ? griderLeftList.push(item) : griderRightList.push(item) //判断两边高度，来觉得添加到那边
+        await this.getBoxHeight(griderLeftList, griderRightList)
+      }
+    }).catch(err => {
+      wx.hideLoading()
+      this.setData({
+        griderList: [],
+        loadMoreType: 'none'
+      })
+    })
+  },
+  // 下拉加载 网格员列表
+  loadMoreMemberList() {
+    const params = {
+      pageIndex: this.data.pageNo,
+      pageSize: this.data.pageSize,
+      deptId: this.data.deptId || '',
+      categoryCode: this.data.categoryCode || ''
+    }
+    wx.showLoading({
+      title: '加载中...'
+    })
+ 
+    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 { griderLeftList, griderRightList } = this.data
+      for (const item of res.data) {
+        leftHeight <= rightHeight ? griderLeftList.push(item) : griderRightList.push(item) //判断两边高度，来觉得添加到那边
+        await this.getBoxHeight(griderLeftList, griderRightList)
+      }
+    }).catch(err => {
+      wx.hideLoading()
+      console.error(err)
+    })
+  },
+  // 打电话
+  callGrider(e) {
+    const { phone } = e.currentTarget.dataset
+    wx.makePhoneCall({
+      phoneNumber: phone
+    })
+  },
+  previewImage(e) {
+    wx.previewImage({
+      urls: [e.currentTarget.dataset.src]
+    })
+  }
+})
--- a/epdc-resident-mp-yushan/subpages/mediateHypermarket/page/dotGeneral/dotGeneral.json
+++ b/epdc-resident-mp-yushan/subpages/mediateHypermarket/page/dotGeneral/dotGeneral.json
@ -0,0 +1,8 @@
+{
+    "navigationBarTextStyle": "white",
+    "navigationBarBackgroundColor": "#bb0300",
+    "navigationBarTitleText": "点将台",
+    "usingComponents": {
+      "no-data": "/components/nodata/nodata"
+    }
+  }
--- a/epdc-resident-mp-yushan/subpages/mediateHypermarket/page/dotGeneral/dotGeneral.wxml
+++ b/epdc-resident-mp-yushan/subpages/mediateHypermarket/page/dotGeneral/dotGeneral.wxml
@ -0,0 +1,68 @@
+<view class="grid-army">
+  <!-- <view class="community-intro">
+    <view class="community-name">
+      <view class="icon">
+        <image src="../../images/community.png" />
+      </view>
+      <view class="name">{{deptName}}</view>
+    </view>
+    <view class="community-detail">{{deptIntro}}</view>
+  </view> -->
+  <view class="f-wr">
+            <view class="tab-bar">
+                <view class="type {{selectedTabBar === 'shilitiaojie' ? 'selected-shilitiaojie' : ''}}" data-type="shilitiaojie" hover-class="hover-tabbar" hover-stay-time="300" bindtap="chooseTabBar">
+                    事理调解队
+                </view>
+                <view class="type {{selectedTabBar === 'falitiaojie' ? 'selected-falitiaojie' : ''}}" data-type="falitiaojie" hover-class="hover-tabbar" hover-stay-time="300" bindtap="chooseTabBar">
+                      法理调解队
+                </view>
+                <view class="type {{selectedTabBar === 'qinglitiaojie' ? 'selected-qinglitiaojie' : ''}}" data-type="qinglitiaojie" hover-class="hover-tabbar" hover-stay-time="300" bindtap="chooseTabBar">
+                    情理调解队
+                </view>
+               
+                <view class="type {{selectedTabBar === 'xinlitiaojie' ? 'selected-xinlitiaojie' : ''}}" data-type="xinlitiaojie" hover-class="hover-tabbar" hover-stay-time="300" bindtap="chooseTabBar">
+                    心理调解队
+                </view>
+                <view class="select-bar {{selectedTabBar === 'shilitiaojie' ? 'selected-shilitiaojie' : selectedTabBar === 'xinlitiaojie' ? 'selected-xinlitiaojie' : selectedTabBar === 'qinglitiaojie' ? 'selected-qinglitiaojie' :selectedTabBar === 'falitiaojie' ? 'selected-falitiaojie':''}}"></view>
+            </view>
+        </view>
+  <view class="grider-list" wx:if="{{griderList.length > 0}}">
+    <view class="grider-left" id="left">
+      <view class="grid-item" wx:for="{{griderLeftList}}" wx:key="index">
+        <view class="avatar" bindtap="previewImage" data-src="{{item.imgUrl}}">
+          <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" hover-class="hover-call-phone" hover-stay-time="150">
+          <view class="phone">
+            <image src="../../images/phone.png" />
+          </view>
+          <view class="tip" bindtap="callGrider" data-phone="{{item.mobile}}">打电话</view>
+        </view>
+      </view>
+    </view>
+    <view class="grider-right" id="right">
+      <view class="grid-item" wx:for="{{griderRightList}}" wx:key="index">
+        <view class="avatar" bindtap="previewImage" data-src="{{item.imgUrl}}">
+          <image src="{{item.imgUrl}}" />
+        </view>
+        <view class="name">{{item.name}}</view>
+        <view class="item">电话：{{item.mobile}}</view>
+        <view class="call-phone" hover-class="hover-call-phone" hover-stay-time="150">
+          <view class="phone">
+            <image src="../../images/phone.png" />
+          </view>
+          <view class="tip" bindtap="callGrider" data-phone="{{item.mobile}}">打电话</view>
+        </view>
+      </view>
+    </view>
+  </view>
+  <view wx:else class="no-data-container">
+    <no-data isShow="{{true}}"></no-data>
+  </view>
+</view>
+<load-more loadMoreType="{{loadMoreType}}" loadMoreVisible="{{loadMoreVisible}}"></load-more>
--- a/epdc-resident-mp-yushan/subpages/mediateHypermarket/page/dotGeneral/dotGeneral.wxss
+++ b/epdc-resident-mp-yushan/subpages/mediateHypermarket/page/dotGeneral/dotGeneral.wxss
@ -0,0 +1,312 @@
+page {
+    background: #f7f7f7;
+  }
+  
+  image {
+    width: 100%;
+    height: 100%;
+    float: left;
+  }
+  
+  .grid-army {
+    width: 100%;
+    height: auto;
+  }
+  
+  .community-intro {
+    width: 100%;
+    background: linear-gradient(to bottom, #d73e32, #cd1b1e);
+    box-sizing: border-box;
+    padding: 0 32rpx 80rpx;
+  }
+  
+  .community-intro .community-name {
+    display: flex;
+    align-items: center;
+    height: 100rpx;
+    width: 100%;
+  }
+  
+  .community-intro .community-name .icon {
+    width: 56rpx;
+    height: 56rpx;
+  }
+  
+  .community-intro .community-name .name {
+    font-size: 52rpx;
+      color: #fff;
+    margin-left: 15rpx;
+  }
+  
+  .community-intro .community-detail {
+    font-size: 30rpx;
+    color: #fff;
+    line-height: 50rpx;
+    text-indent: 60rpx;
+  }
+  
+  .grider-list {
+    width: 100%;
+    box-sizing: border-box;
+    padding: 0 32rpx;
+    margin-top: 40rpx;
+  }
+  
+  .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 {
+    width: 100%;
+    background: #fff;
+    margin-bottom: 20rpx;
+    border-radius: 14rpx;
+    box-sizing: border-box;
+    padding: 40rpx 30rpx 30rpx;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  
+  .grider-list .grid-item .avatar {
+    width: 110rpx;
+    height: 110rpx;
+    border-radius: 50%;
+    background: yellow;
+    overflow: hidden;
+  }
+  
+  .grider-list .grid-item .name {
+    font-size: 30rpx;
+    line-height: 50rpx;
+      color: #333;
+    margin-top: 20rpx;
+  }
+  
+  .grider-list .grid-item .item {
+    width: 100%;
+    line-height: 36rpx;
+    font-size: 26rpx;
+      color: #c1c1c1;
+  }
+  
+  .grider-list .grid-item .item + .item {
+    margin-top: 4rpx;
+  }
+  
+  .grider-list .grid-item .call-phone {
+    margin-top: 20rpx;
+    width: 156rpx;
+      height: 56rpx;
+      background-image: linear-gradient(90deg, 
+          #e3271c 0%, 
+          #f95c2c 100%), 
+      linear-gradient(
+          #8da5eb, 
+          #8da5eb);
+      background-blend-mode: normal, 
+          normal;
+      border-radius: 28rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 26rpx;
+      color: #ffffff;
+  }
+  
+  .grider-list .grid-item .hover-call-phone {
+    background: red;
+  }
+  
+  .grider-list .grid-item .call-phone .phone {
+    width:23rpx;
+    height:27rpx;
+    margin-right: 6rpx;
+  }
+  
+  .no-data-container {
+    width: 100%;
+    height: 50vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .f-wr {
+    width: 100%;
+    box-sizing: border-box;
+}
+.f-wr .xinlitiaojie-list {
+    overflow-y: scroll;
+}
+.f-wr .xinlitiaojie-list .xinlitiaojie-hader{
+    display: flex;
+    padding: 20rpx 61rpx;
+    background-color: #fff;
+
+}
+.f-wr .xinlitiaojie-list .xinlitiaojie-hader .active_btn{
+    background: #dc1e20;
+    color: #fff;
+    border: 1px solid #dc1e20;
+    opacity: 1;
+}
+.f-wr .xinlitiaojie-list .search-box{
+    display: flex;
+    margin-top: 20rpx;
+    height: 60rpx;
+    line-height: 60rpx;
+    align-items: center;
+    padding: 0 30rpx;
+    position: relative;
+}
+.f-wr .xinlitiaojie-list  .xinlitiaojie-content{
+   width: 100%;
+   height: 440rpx;
+   border-radius: 5%;
+   margin-top: 20rpx;
+   box-sizing: border-box;
+   background-color: #fff;
+}
+.f-wr .xinlitiaojie-list  .xinlitiaojie-content view{
+    background-color: #fff;
+}
+.f-wr .xinlitiaojie-list  .xinlitiaojie-content .xinlitiaojie-header{
+    display: flex;
+    background-color: #fff;
+    box-sizing: border-box;
+    padding: 10rpx 0 10rpx 0;
+    border-radius: 5rpx 5rpx 0 0 ;
+}
+.f-wr .xinlitiaojie-list  .xinlitiaojie-content  .xinlitiaojie-body{
+    padding: 0 20rpx;
+}
+.f-wr .xinlitiaojie-list  .xinlitiaojie-content .xinlitiaojie-header image{
+    width: 100rpx;
+    height: 100rpx;
+    border-radius: 50%;
+}
+.f-wr .xinlitiaojie-list  .xinlitiaojie-content .xinlitiaojie-header .xinlitiaojie-header-name {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding:0 20rpx;
+    flex: 1;
+}
+.f-wr .xinlitiaojie-list .search-img{
+    width:40rpx;
+    height:40rpx;
+    object-fit: cover;
+    margin: 0 7rpx 0 25rpx;
+    position: absolute;
+    z-index: 5;
+}
+.f-wr .xinlitiaojie-list .search-box .search-input{
+    background: #fff;
+    border-radius: 25rpx;
+    padding-left: 24rpx;
+    width:100%;
+    height: 100%;
+}
+.f-wr .xinlitiaojie-list .search-box .search-img{
+    position: absolute;
+    right: 38rpx;
+    width: 29rpx;
+    height: 32rpx;
+    top:12rpx ;
+}
+.f-wr .xinlitiaojie-list .xinlitiaojie-hader view{
+    width: 166rpx;
+    height: 56rpx;
+    line-height: 56rpx;
+    background: #FFFFFF;
+    border: 1px solid #828282a9;
+    border-radius: 28rpx;
+    text-align: center;
+    color: #333333;
+    font-family: PingFang SC;
+    font-weight: bold;
+}
+.tab-bar {
+    width: 100%;
+    height: 90rpx;
+    background: #fff;
+    overflow-x: scroll;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    position: relative;
+    padding:0 20rpx;
+    box-sizing: border-box;
+}
+
+.tab-bar .type {
+    font-size: 30rpx;
+    color: #999;
+    flex: 1;
+    text-align: center;
+    /* width: 300rpx; */
+    height: 90rpx;
+    line-height: 90rpx;
+}
+
+.tab-bar .hover-tabbar {
+    background: #f3f3f3;
+}
+
+.tab-bar .type.selected-shilitiaojie {
+    color: #F82525;
+    font-weight: bolder;
+}
+
+.tab-bar .type.selected-xinlitiaojie {
+    color: #F82525;
+    font-weight: bolder;
+}
+
+.tab-bar .type.selected-qinglitiaojie {
+    color: #F82525;
+    font-weight: bolder;
+}
+
+.tab-bar .type.selected-falitiaojie {
+    color: #F82525;
+    font-weight: bolder;
+}
+
+.tab-bar .select-bar {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 80rpx;
+    height: 6rpx;
+    background: #f95454;
+    border-radius: 4rpx;
+    transition: left 0.5s ease;
+}
+
+.tab-bar .select-bar.selected-shilitiaojie {
+    left: 9%;
+    transition: left 0.5s ease;
+  }
+  
+  .tab-bar .select-bar.selected-xinlitiaojie {
+    left: 80%;
+      transition: left 0.5s ease;
+  }
+  
+  .tab-bar .select-bar.selected-qinglitiaojie {
+    left: 57%;
+    transition: left 0.5s ease;
+  }
+  .tab-bar .select-bar.selected-falitiaojie {
+  left: 32%;
+    transition: left 0.5s ease;
+}
--- a/epdc-resident-mp-yushan/subpages/mediateHypermarket/page/index/index.js
+++ b/epdc-resident-mp-yushan/subpages/mediateHypermarket/page/index/index.js
@ -43,7 +43,10 @@ Page({
      typeCode: this.data.typeCode
    }
    api.getModuleList(params).then(res => {
-      console.log(res.data)
+      const customOrder = ["有话说", "点将台", "联动轴", "闪光灯"];
+      res.data.sort((a, b) => {
+        return customOrder.indexOf(a.name) - customOrder.indexOf(b.name);
+      });
      this.setData({
        modulelist: this.data.modulelist.concat(res.data),
        loadMoreType: res.data.length === this.data.pageSize ? 'loading' : 'none',
@ -82,6 +85,18 @@ Page({
    }
  },
  goDetails (e) {
+      console.log(e);
+      if(e.currentTarget.dataset.module.typeCode == '01'){
+        wx.redirectTo({
+          url: '/pages/discussion/discussion',
+        })
+        return
+      }else if(e.currentTarget.dataset.module.typeCode == 'DJT'){
+        wx.navigateTo({
+          url: '/subpages/mediateHypermarket/page/dotGeneral/dotGeneral',
+        })
+        return
+      }
    wx.navigateTo({
      url: `/subpages/workTodo/pages/moduleList/moduleList?pid=${e.currentTarget.dataset.module.id}&typeCode=${e.currentTarget.dataset.module.typeCode}&name=${e.currentTarget.dataset.module.name}&style=${e.currentTarget.dataset.module.moduleStyle}`,
    })