【物业服务】-刘绍文 -2020/05/09

epdc-resident-mp-yushan/app.json

@@ -14,7 +14,8 @@
     "pages/detail/detail",
     "pages/fromVirus/detail/detail",
     "pages/accept/accept",
-    "pages/gridLeaderRegister/gridLeaderRegister"
+    "pages/gridLeaderRegister/gridLeaderRegister",
+    "pages/property/property"
   ],
   "subPackages": [
     {
@@ -136,7 +137,7 @@
         "selectedIconPath": "images/association-select.png"
       },
       {
-        "pagePath": "pages/accept/accept",
+        "pagePath": "pages/property/property",
         "text": "物业服务",
         "iconPath": "images/property.png",
         "selectedIconPath": "images/propertySelected.png"

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

@@ -250,14 +250,14 @@ Page({
   },
   // 跳转到物业服务
   navigateToProperty () {
-    if (app.globalData.infoCompleted == 0) {
+    // if (app.globalData.infoCompleted == 0) {
-      this.setData({
+    //   this.setData({
-        completeInfoDialogVisible: !this.data.completeInfoDialogVisible
+    //     completeInfoDialogVisible: !this.data.completeInfoDialogVisible
-      })
+    //   })
-      return false
+    //   return false
-    }
+    // }
     wx.switchTab({
-      url: '/pages/association/association'
+      url: '/pages/property/property'
     })
   },
   // 初始化加载

epdc-resident-mp-yushan/pages/property/components/loadMore/loadMore.js

@@ -0,0 +1,14 @@
+Component({
+  data: {
+  },
+  properties: {
+    loadMoreVisible: {
+      type: Boolean,
+      value: false
+    },
+    loadMoreType: {
+      type: String,
+      value: 'loading'
+    }
+  }
+})

epdc-resident-mp-yushan/pages/property/components/loadMore/loadMore.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

epdc-resident-mp-yushan/pages/property/components/loadMore/loadMore.wxml

@@ -0,0 +1,7 @@
+<view class="load-more" style="visibility: {{loadMoreVisible ? 'visible' : 'hidden'}}">
+  <block wx:if="{{loadMoreType == 'loading'}}">
+    <image class="load-image" src="../../images/loading.gif" />
+    <view class="load-text">正在加载中...</view>
+  </block>
+  <view wx:else class="load-text">没有更多了~</view>
+</view>

epdc-resident-mp-yushan/pages/property/components/loadMore/loadMore.wxss

@@ -0,0 +1,18 @@
+.load-more {
+  width: 100%;
+  height: 100rpx;
+  background: #f7f7f7;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.load-more .load-text {
+  color: #999;
+  font-size: 26rpx;
+}
+.load-more .load-image {
+  width: 30rpx;
+  height: 30rpx;
+  object-fit: cover;
+  margin-right: 10rpx;
+}

epdc-resident-mp-yushan/pages/property/components/pullDownRefresh/pullDownRefresh.js

@@ -0,0 +1,70 @@
+Component({
+  data: {
+    lastY: '',
+    translateHeight: 0,
+    state: -1,
+    scrollTop: 0,
+    enablePulldownFresh: false
+  },
+  options: {
+    multipleSlots: true
+  },
+  properties: {
+    upperDistance: {
+      type: Number,
+      value: 80
+    }
+  },
+  methods: {
+    onPageScroll (e) {
+      this.data.scrollTop = e.scrollTop
+      this.data.enablePulldownFresh = false
+    },
+    touchstart (e) {
+      this.data.lastY = e.touches[0].clientY
+      if (this.data.scrollTop === 0) {
+        this.data.enablePulldownFresh = true
+      } else {
+        this.data.enablePulldownFresh = false
+      }
+    },
+    touchmove (e) {
+      let clientY = e.touches[0].clientY
+      let offset = clientY - this.data.lastY
+      if (this.data.scrollTop > 0 || offset < 0) {
+        return false
+      }
+      this.data.translateHeight = offset
+      this.data.state = 1
+
+      if (this.data.enablePulldownFresh) {
+        if (this.data.translateHeight > this.data.upperDistance) {
+          this.data.state = 2
+        }
+        this.setData({
+          translateHeight: this.data.translateHeight > 100 ? 100 : this.data.translateHeight,
+          state: this.data.state
+        })
+      }
+    },
+    touchend (e) {
+      if (this.data.translateHeight > this.data.upperDistance) {
+        if (this.data.enablePulldownFresh) {
+          this.setData({
+            translateHeight: 100,
+            state: 3
+          })
+          this.triggerEvent('pullDownRefresh')
+        }
+      } else if (this.data.scrollTop <= 0) {
+        this.stopRefresh()
+      }
+    },
+    stopRefresh () {
+      this.setData({
+        translateHeight: 0,
+        state: -1
+      })
+    }
+  }
+})

epdc-resident-mp-yushan/pages/property/components/pullDownRefresh/pullDownRefresh.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

epdc-resident-mp-yushan/pages/property/components/pullDownRefresh/pullDownRefresh.wxml

@@ -0,0 +1,9 @@
+<view class="pulldown-refresh" bindtouchstart="touchstart" bindtouchmove="touchmove" bindtouchend="touchend">
+  <view class="pulldown-state">
+    <image class="loading" src="../../images/loading.gif" />
+    <view class="loading-state">{{state == 1 ? '下拉刷新' : state == 2 ? '松开刷新' : '刷新中...'}}</view>
+  </view>
+  <view class="pulldown-content" style="transform: translateY({{translateHeight}}rpx)">
+    <slot name="content"></slot>
+  </view>
+</view>

epdc-resident-mp-yushan/pages/property/components/pullDownRefresh/pullDownRefresh.wxss

@@ -0,0 +1,27 @@
+.pulldown-refresh {
+  width:100%;
+  background: #f7f7f7;
+}
+.pulldown-refresh .pulldown-state {
+  width:100%;
+  height: 100rpx;
+  display:flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: -100rpx;
+}
+.pulldown-refresh .pulldown-state .loading {
+  width: 30rpx;
+  height: 30rpx;
+  margin-right: 10rpx;
+}
+.pulldown-refresh .pulldown-state .loading-state {
+  font-size: 25rpx;
+  color:#666;
+}
+
+.pulldown-refresh .pulldown-content {
+  width:100%;
+  height:auto;
+  transition: transform 0.05s linear;
+}

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

@@ -0,0 +1,84 @@
+const app = getApp()
+const api = require('../../utils/api')
+const homeApi = require('../../utils/home')
+import { getTimestamp } from '../../utils/common'
+import checkoutVersion from '../../utils/checkVersion'
+Page({
+  data: {
+    statusHeight: 0, // 自定义头部状态栏高度
+    navigationHeight: 0, // 自定义头部导航栏高度
+    loadMoreType: 'none',
+    loadMoreVisible: false,
+    tabList:[],//tab列表
+    currentTabIndex:0,
+    propertyInfo:{},
+    pageNo: 1, // 新闻列表-分页页码
+    pageSize: 10, // 新闻列表-分页页长
+    isCarryLoad: false
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+    if (options.scene) {
+      this.setData({
+        statusHeight: app.globalData.deviceInfo.statusHeight,
+        navigationHeight: app.globalData.deviceInfo.navigationHeight,
+        gridId: options.scene
+      })
+    } else {
+      this.setData({
+        statusHeight: app.globalData.deviceInfo.statusHeight,
+        navigationHeight: app.globalData.deviceInfo.navigationHeight,
+      }) 
+    }
+    this.initTab();
+    this.initPropertyInfo();
+    this.data.isCarryLoad = true
+  },
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+  initTab(){
+    // var tabList=[{name:"敦化路万科物业"}];
+    var tabList=[{name:"敦化路万科物业"},{name:'辽宁路万科物业'}];
+    // var tabList=[{name:"敦化路万科物业"},{name:'辽宁路万科物业'},{name:'站山路万科物业'},{name:'辽源路万科物业'}];
+    this.setData({
+      tabList:tabList
+    })
+  },
+  initPropertyInfo(){
+    var info={
+      projectName:"敦化路万科城",
+      propertyName:"敦化路万科物业",
+      tel:'13666666666',
+      personInCharge:'张磊',
+      address:'市北区敦化路88号15-90',
+      pic:'../../images/home/dang_logo.png',
+      groupName:"物业交流群",
+      peopleCount:'456',
+      partyCount:'88'
+    };
+    this.setData({
+      propertyInfo:info
+    })
+  }
+})

epdc-resident-mp-yushan/pages/property/property.json

@@ -0,0 +1,8 @@
+{
+  "navigationBarTitleText": "党群e家",
+  "navigationStyle": "custom",
+  "navigationBarTextStyle": "white",
+  "usingComponents": {
+    "load-more": "../../components/loadMore/loadMore"
+  }
+}

epdc-resident-mp-yushan/pages/property/property.wxml

@@ -0,0 +1,49 @@
+<view class="header" style="height: {{statusHeight + navigationHeight}}px;">
+  <image class="header-bg" src="../../images/home/home-status.png" />
+  <view class="navigation" style="height: {{navigationHeight}}px; top: {{statusHeight}}px;">物业服务</view>
+</view>
+<view class="home" style="margin-top: {{statusHeight + navigationHeight}}px">
+  <scroll-view class="tab" scroll-x>
+    <view wx:for="{{tabList}}"wx:for-item="item" wx:for-index="index" wx:key="index" bindtap="changeTab" class="tab-item">
+      <view class="tab-name{{index == currentTabIndex? ' active' : ''}}">{{item.name}}</view>
+      <view class="tab-line{{index == currentTabIndex? ' active' : ''}}"></view>
+    </view>
+  </scroll-view>
+  <!-- 物业项目信息 -->
+  <view class="propertyInfo">
+  <view class="info-item">
+      <view style="font-size:40rpx;color:#333;font-weight:bold;">物业项目信息</view>
+    </view>
+    <view class="info-item">
+      <image src="../../images/property/name.png" class="info-img"></image>
+      <view class="info-detail">物业项目名称： {{propertyInfo.projectName}}</view>
+    </view>
+    <view class="info-item">
+      <image src="../../images/property/property.png" class="info-img"></image>
+      <view class="info-detail">物业名称： {{propertyInfo.propertyName}}</view>
+    </view>
+    <view class="info-item">
+      <image src="../../images/property/tel.png" class="info-img"></image>
+      <view class="info-detail">物业电话： {{propertyInfo.tel}}</view>
+    </view>
+    <view class="info-item">
+      <image src="../../images/property/person-in-charge.png" class="info-img"></image>
+      <view class="info-detail">物业负责人： {{propertyInfo.personInCharge}}</view>
+    </view>
+    <view class="info-item">
+      <image src="../../images/property/address.png" class="info-img"></image>
+      <view class="info-detail">物业地址： {{propertyInfo.address}}</view>
+    </view>
+    <view class="info-group">
+      <image src="{{propertyInfo.pic}}" class="group-pic"></image>
+      <view class="group-detail">
+        <view class="group-name">{{propertyInfo.groupName}}</view>
+        <view class="group-number"><text space="nbsp">共{{propertyInfo.peopleCount}}人    {{propertyInfo.partyCount}}名党员</text></view>
+      </view>
+      <view class="group-join">
+        <image src="../../images/property/red-join.png" class="join-button"></image>
+        <view class="join-text">加入</view>
+      </view>
+    </view>
+  </view>
+</view>

epdc-resident-mp-yushan/pages/property/property.wxss

@@ -0,0 +1,144 @@
+page {
+  width: 100%;
+  height: auto;
+  overflow-y: auto;
+  background: #f7f7f7;
+}
+
+.header {
+  position: fixed;
+  width: 100%;
+  top: 0;
+  left: 0;
+  z-index: 1000;
+}
+.header .header-bg {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  z-index: 10;
+  left: 0;
+  top: 0;
+}
+.header .navigation {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: rgba(255,255,255, 0.9);
+  font-size: 32rpx;
+  position: relative;
+  z-index: 100;
+}
+.home {
+  width: 100%;
+}
+.tab{
+  width: 100%;
+  height: 100rpx;
+  background: #fff;
+  overflow-x: scroll;
+  display: inline-block;
+  white-space: nowrap;
+  margin:0 auto;
+}
+.tab-item{
+  height: 100%;
+  width: 33%;
+  margin:0 auto;
+  display: inline-block;
+  box-sizing: border-box;
+}
+.tab-name{
+  text-align: center;
+  margin:0 auto;
+  height: 80%;
+  font-size: 25rpx;
+  line-height: 100rpx;
+  padding: 0 20rpx;
+  color: #999;
+}
+.tab-name.active{
+  text-align: center;
+  margin:0 auto;
+  height: 80%;
+  font-size: 30rpx;
+  line-height: 100rpx;
+  padding: 0 20rpx;
+  color: #BB0300;
+}
+.tab-line.active{
+  border-top: 4rpx solid #BB0300;
+  width: 30%;
+  margin: 0 auto;
+  margin-top: 10rpx;
+}
+.propertyInfo{
+  margin-top: 10rpx;
+  width: 100%;
+  background: #fff;
+}
+.info-item{
+  width: 94%;
+  margin-left: 20rpx;
+  border-bottom: 0.5px solid #E7EEEE;
+  display: inline-flex;
+  line-height: 100rpx;
+}
+.info-img{
+  height: 45rpx;
+  width: 45rpx;
+  padding-top: 25rpx;
+  display: inline-block;
+}
+.info-detail{
+  font-size: 35rpx;
+  height: 100%;
+  display: inline-block;
+  line-height: 99rpx;
+  padding-left: 20rpx;
+}
+.info-group{
+  width: 94%;
+  margin-left: 20rpx;
+  display: flex;
+  line-height: 100rpx;
+}
+.group-pic{
+  width: 120rpx;
+  height: 120rpx;
+  border-radius: 60px;
+  padding: 20rpx;
+}
+.group-detail{
+  width: 66%;
+  display: inline-block;
+  padding-left: 40rpx;
+  height: 120rpx;
+}
+.group-name{
+  font-size: 35rpx;
+  font-weight: bold;
+  height: 75rpx;
+}
+.group-number{
+  font-size: 25rpx;
+  color: #999;
+  height: 30rpx;
+}
+.group-join{
+  display: inline-block;
+  margin:0 auto;
+}
+.join-button{
+  height: 60rpx;
+  width: 100rpx;
+  padding-top: 55rpx;
+}
+.join-text{
+  font-size: 30rpx;
+  position: relative;
+  color: #fff;
+  margin-top: -120rpx;
+  margin-left: 20rpx;
+}