Merge remote-tracking branch 'origin/dev' into dev

src/project/xicheng/AppMerchanGird/AddMerchan.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="AddFamily">
+  <div class="AddMerchan">
     <div class="search">
       <div class="left">
         <AiAreaPicker v-model="areaId" :areaId="user.areaId" @select="areaSelect" :name.sync="areaName" style="color: #666">
@@ -134,7 +134,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.AddFamily {
+.AddMerchan {
     .search{
     width: 100%;
     height: 112px;

src/project/xicheng/AppMerchanGird/AppMerchanGrid.vue

@@ -1,23 +1,46 @@
 <template>
   <div class="AppMerchanGrid">
     <template v-if="isGridMember">
-      <div class="pad-t32" v-if="component != 'Map'"/>
-      <div class="select-gird" v-if="component != 'Map'" flex>
+      <div class="pad-t32" />
+      <div class="select-gird" flex>
         <AiPagePicker type="gird" class="fill" @select="handleSelectGird">
           <div flex>
             <img src="./components/img/gird-icon.png" alt="" class="gird-icon">
-            <AiMore v-model="params.girdName" icon="arrow-down"/>
+            <AiMore v-model="userGird.girdName" icon="arrow-down"/>
           </div>
         </AiPagePicker>
-        <span @click="linkTo('./SetGird?id='+params.id)" v-if="isGridAdmin&&!!params.id">网格配置</span>
+        <span @click="linkTo('./SetGird?id='+userGird.id)" v-if="isGridAdmin&&!!userGird.id">网格配置</span>
       </div>
-      <component v-if="refresh" :is="component" @change="onChange" :params="params"/>
-      <!-- <div class="tabs" v-if="isTab">
-        <div class="item" @click="tabClick(index, item.component)" v-for="(item, index) in tabs" :key="index">
-          <img :src="tabIndex == index ? item.activeImg : item.img" alt=""/>
-          <p :class="{'color-3267F0':tabIndex == index}" v-text="item.text"/>
+      <div class="title">网格人员</div>
+      <div class="user-content" v-for="(item, index) in dataInfo.parentGirdMembers" :key="item.id">
+        <div>
+          <!-- <image :src="item.photo" alt="" mode="aspectFill" v-if="item.photo" /> -->
+          <img :src="item.photo" alt="" v-if="item.photo">
+          <img src="./components/img/big-user.png" alt="" v-else>
         </div>
-      </div> -->
+        <div class="right">
+          <div class="name">{{ item.name }}</div>
+          <div class="gird">{{ item.checkType == 2 ? '网格长' : '网格员' }}</div>
+          <p>{{ item.girdName }}</p>
+        </div>
+      </div>
+      <div class="user-content user-item" v-for="(item, index) in dataInfo.girdMembers" :key="item.id" @click="viewUser(item.wxUserId)">
+        <div>
+          <!-- <image :src="item.photo" alt="" mode="aspectFill" v-if="item.photo" /> -->
+          <img :src="item.photo" alt="" v-if="item.photo">
+          <img src="./components/img/big-user.png" alt="" v-else>
+        </div>
+        <div class="right">
+          <div class="name">{{ item.name }}
+            <span class="gird">{{ item.checkType == 2 ? '网格长' : '网格员' }}</span>
+            <span class="family-btn" @click.stop="linkTo(`./FamilyList?id=${item.id}&girdId=${userGird.id}`)" v-if="item.checkType == 1">责任家庭 ></span>
+          </div>
+          <p>{{ item.girdName }} </p>
+        </div>
+      </div>
+      <AiEmpty description="暂无数据" class="emptyWrap"
+              v-if="dataInfo.parentGirdMembers && !dataInfo.parentGirdMembers.length && !dataInfo.girdMembers.length"></AiEmpty>
+      <AiGap h="112"/>
     </template>
     <div v-if="!isGridMember" class="empty">
       <img src="./components/img/no-admin.png" alt="">
@@ -28,39 +51,12 @@
 </template>
 
 <script>
-import Organization from './Organization.vue'
 import {mapState} from 'vuex'
-
 export default {
-  name: 'AppMerchanGrid',
-  appName: '网格管理',
   data() {
     return {
-      component: 'Organization',
-      params: {},
-      refresh: true,
-      tabIndex: 0,
-      tabs: [
-        {
-          img: require('./components/img/statistics-icon.png'),
-          activeImg: require('./components/img/statistics-icon-active.png'),
-          text: '统计',
-          component: 'Statistics',
-        },
-        {
-          img: require('./components/img/org-icon.png'),
-          activeImg: require('./components/img/org-icon-active.png'),
-          text: '组织',
-          component: 'Organization',
-        },
-        {
-          img: require('./components/img/map-icon.png'),
-          activeImg: require('./components/img/map-icon-active.png'),
-          text: '地图',
-          component: 'Map'
-        }
-      ],
-      isTab: true,
+      dataInfo: {},
+      userGird: {}
     }
   },
   computed: {
@@ -72,58 +68,148 @@ export default {
       return this.user.girdCheckType == 2
     }
   },
-  components: {
-    Organization,
+  onLoad() {
+    this.handleSelectGird(this.user.gridInfo)
+  },
+  onShow() {
+    document.title = '网格管理'
+
+  },
+  mounted() {
+    this.getGirdUserList()
+    uni.$on('goback', (res) => {
+      this.userGird = res
+      this.getGirdUserList()
+    })
   },
   methods: {
-    onChange(e) {
-      this.params = e.params
-      this.component = e.type
+    handleSelectGird(v) {
+      this.userGird = v || {}
+      this.getGirdUserList()
     },
-    refreshHome() {
-      this.refresh = false
-      this.$nextTick(() => {
-        this.refresh = true
+    getGirdUserList() {
+      this.$http.post(`/app/appgirdmemberinfo/listGirdMemberByGirdId?girdId=${this.userGird.id}`).then((res) => {
+        if (res.code == 0) {
+          this.dataInfo = res.data
+        }
       })
     },
-    tabClick(index, component) {
-      this.tabIndex = index
-      this.component = component
-      this.refreshHome();
-    },
     linkTo(url) {
       uni.navigateTo({url})
     },
-    handleSelectGird(v) {
-      this.params = v || {}
-      this.refreshHome()
-    }
-  },
-  onLoad() {
-    this.handleSelectGird(this.user.gridInfo)
-    uni.$on('hideTab', () => {
-      this.isTab = false
-    })
-    uni.$on('showTab', () => {
-      this.isTab = true
-    })
-  },
-  onShow() {
-    document.title = '网格管理'
-  },
-  onReachBottom() {
-    if (!this.tabIndex) {
-      uni.$emit('nextList')
-    }
+    viewUser(userid) {
+      userid && this.injectJWeixin('openUserProfile').then(() => {
+        this.wxInvoke(['openUserProfile', {type: 1, userid}, () => 0])
+      })
+    },
   },
 }
 </script>
 
 <style lang="scss" scoped>
 .AppMerchanGrid {
-  height: 100vh;
-}
+  background-color: #f5f5f5;
 
+  .title {
+    font-size: 38px;
+    font-family: PingFangSC-Semibold, PingFang SC;
+    font-weight: 600;
+    color: #333;
+    line-height: 52px;
+    padding-left: 32px;
+    margin-bottom: 32px;
+  }
+
+  .user-content {
+    width: calc(100% - 64px);
+    margin: 0 0 32px 32px;
+    background-color: #fff;
+    padding: 32px;
+    box-sizing: border-box;
+    display: flex;
+
+    img {
+      display: inline-block;
+      width: 200px;
+      height: 200px;
+      margin-right: 32px;
+    }
+
+    image {
+      width: 200px;
+      height: 200px;
+      margin-right: 32px;
+    }
+
+    .right {
+      width: 100%;
+
+      .name {
+        font-size: 32px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #333;
+        line-height: 44px;
+        margin-bottom: 12px;
+      }
+
+      .gird {
+        display: inline-block;
+        line-height: 44px;
+        background: #E8EFFF;
+        border-radius: 8px;
+        padding: 0 8px;
+        font-size: 26px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        color: #26F;
+        margin-bottom: 12px;
+      }
+
+      p {
+        font-size: 26px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        color: #666;
+        line-height: 36px;
+      }
+    }
+  }
+
+  .user-item {
+    img {
+      width: 96px;
+      height: 96px;
+      border-radius: 50%;
+    }
+
+    image {
+      width: 96px;
+      height: 96px;
+      border-radius: 50%;
+    }
+
+    .gird {
+      display: inline-block;
+      margin-left: 16px;
+      margin-bottom: 0 !important;
+    }
+
+    .name {
+      margin-bottom: 8px !important;
+    }
+  }
+
+  .family-btn {
+    font-size: 26px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    color: #3975C6;
+    line-height: 36px;
+    float: right;
+  }
+
+  .pad-b112 {
+    padding-bottom: 112px;
+  }
+}
 .pad-t32 {
   padding-top: 32px;
 }

src/project/xicheng/AppMerchanGird/Organization.vue

@@ -1,181 +0,0 @@
-<template>
-  <div class="Organization">
-    <div class="title">网格人员</div>
-    <div class="user-content" v-for="(item, index) in dataInfo.parentGirdMembers" :key="item.id">
-      <div>
-        <!-- <image :src="item.photo" alt="" mode="aspectFill" v-if="item.photo" /> -->
-        <img :src="item.photo" alt="" v-if="item.photo">
-        <img src="./components/img/big-user.png" alt="" v-else>
-      </div>
-      <div class="right">
-        <div class="name">{{ item.name }}</div>
-        <div class="gird">{{ item.checkType == 2 ? '网格长' : '网格员' }}</div>
-        <p>{{ item.girdName }}</p>
-      </div>
-    </div>
-    <div class="user-content user-item" v-for="(item, index) in dataInfo.girdMembers" :key="item.id" @click="viewUser(item.wxUserId)">
-      <div>
-        <!-- <image :src="item.photo" alt="" mode="aspectFill" v-if="item.photo" /> -->
-        <img :src="item.photo" alt="" v-if="item.photo">
-        <img src="./components/img/big-user.png" alt="" v-else>
-      </div>
-      <div class="right">
-        <div class="name">{{ item.name }}
-          <span class="gird">{{ item.checkType == 2 ? '网格长' : '网格员' }}</span>
-          <span class="family-btn" @click.stop="linkTo(`./FamilyList?id=${item.id}&girdId=${userGird.id}`)" v-if="item.checkType == 1">责任家庭 ></span>
-        </div>
-        <p>{{ item.girdName }} </p>
-      </div>
-    </div>
-    <AiEmpty description="暂无数据" class="emptyWrap"
-             v-if="dataInfo.parentGirdMembers && !dataInfo.parentGirdMembers.length && !dataInfo.girdMembers.length"></AiEmpty>
-    <AiGap h="112"/>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      userGird: {},
-      dataInfo: {},
-    }
-  },
-  props: ['params'],
-  onShow() {
-    document.title = '网格管理'
-
-  },
-  mounted() {
-    this.userGird = this.params
-    this.getGirdUserList()
-    uni.$on('goback', (res) => {
-      this.userGird = res
-      this.getGirdUserList()
-    })
-  },
-  methods: {
-    getGirdUserList() {
-      this.$http.post(`/app/appgirdmemberinfo/listGirdMemberByGirdId?girdId=${this.userGird.id}`).then((res) => {
-        if (res.code == 0) {
-          this.dataInfo = res.data
-        }
-      })
-    },
-    linkTo(url) {
-      uni.navigateTo({url})
-    },
-    viewUser(userid) {
-      userid && this.injectJWeixin('openUserProfile').then(() => {
-        this.wxInvoke(['openUserProfile', {type: 1, userid}, () => 0])
-      })
-    },
-  },
-}
-</script>
-
-<style lang="scss" scoped>
-.Organization {
-  background-color: #f5f5f5;
-
-  .title {
-    font-size: 38px;
-    font-family: PingFangSC-Semibold, PingFang SC;
-    font-weight: 600;
-    color: #333;
-    line-height: 52px;
-    padding-left: 32px;
-    margin-bottom: 32px;
-  }
-
-  .user-content {
-    width: calc(100% - 64px);
-    margin: 0 0 32px 32px;
-    background-color: #fff;
-    padding: 32px;
-    box-sizing: border-box;
-    display: flex;
-
-    img {
-      display: inline-block;
-      width: 200px;
-      height: 200px;
-      margin-right: 32px;
-    }
-
-    image {
-      width: 200px;
-      height: 200px;
-      margin-right: 32px;
-    }
-
-    .right {
-      width: 100%;
-
-      .name {
-        font-size: 32px;
-        font-family: PingFangSC-Medium, PingFang SC;
-        font-weight: 500;
-        color: #333;
-        line-height: 44px;
-        margin-bottom: 12px;
-      }
-
-      .gird {
-        display: inline-block;
-        line-height: 44px;
-        background: #E8EFFF;
-        border-radius: 8px;
-        padding: 0 8px;
-        font-size: 26px;
-        font-family: PingFangSC-Regular, PingFang SC;
-        color: #26F;
-        margin-bottom: 12px;
-      }
-
-      p {
-        font-size: 26px;
-        font-family: PingFangSC-Regular, PingFang SC;
-        color: #666;
-        line-height: 36px;
-      }
-    }
-  }
-
-  .user-item {
-    img {
-      width: 96px;
-      height: 96px;
-      border-radius: 50%;
-    }
-
-    image {
-      width: 96px;
-      height: 96px;
-      border-radius: 50%;
-    }
-
-    .gird {
-      display: inline-block;
-      margin-left: 16px;
-      margin-bottom: 0 !important;
-    }
-
-    .name {
-      margin-bottom: 8px !important;
-    }
-  }
-
-  .family-btn {
-    font-size: 26px;
-    font-family: PingFangSC-Regular, PingFang SC;
-    color: #3975C6;
-    line-height: 36px;
-    float: right;
-  }
-
-  .pad-b112 {
-    padding-bottom: 112px;
-  }
-}
-</style>

src/project/xicheng/AppMerchanGird/merchanList.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="FamilyList">
+  <div class="merchanList">
     <div class="title">
       <div>户主列表({{ total }})</div>
       <div v-if="list.length">
@@ -118,7 +118,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.FamilyList {
+.merchanList {
   min-height: 100vh;
   .title {
     display: flex;

src/project/xicheng/AppMerchanStatistics/AppMerchanStatistics.vue

@@ -0,0 +1,295 @@
+<template>
+  <div class="grid">
+    <div class="gird-wrapper">
+      <div class="gird-item">
+        <h2>一级网格</h2>
+        <div class="gird-item__wrapper level1" @click="isShowStreet = true">
+          <h3>中山门街道</h3>
+        </div>
+      </div>
+      <div class="gird-item">
+        <h2>二级网格</h2>
+        <div class="gird-item__wrapper level2">
+          <div class="grid-item__item" v-for="(item, index) in 10" :key="index">群策巷社区</div>
+        </div>
+      </div>
+      <div class="gird-item">
+        <h2>三级网格</h2>
+        <div class="gird-item__wrapper level3" @click="isShowVillage = true">
+          <h3>专属网格</h3>
+          <p>（12个）</p>
+        </div>
+      </div>
+    </div>
+    <u-popup v-model="isShowStreet" :closeable="false" border-radius="16" height="60%" mode="bottom">
+    <div class="street-dialog">
+      <scroll-view scroll-y class="street-wrapper">
+        <h2 class="title">数据统计</h2>
+        <div class="street-item__wrapper">
+          <div class="street-item" v-for="(item, index) in 40" :key="index">
+            <div class="left">
+              <i></i>
+              <h2>网格数</h2>
+            </div>
+            <span>12</span>
+          </div>
+        </div>
+      </scroll-view>
+    </div>
+    </u-popup>
+    <u-popup v-model="isShowVillage" :closeable="false" border-radius="16" height="60%" mode="bottom">
+      <div class="street-dialog">
+        <scroll-view scroll-y class="street-wrapper">
+          <h2 class="title">数据统计</h2>
+          <div class="street-item__wrapper">
+            <div class="street-item" v-for="(item, index) in 9" :key="index">
+              <div class="left">
+                <i></i>
+                <h2>网格数</h2>
+              </div>
+              <span>12</span>
+            </div>
+          </div>
+          <h2 class="title">网格列表</h2>
+          <div class="street-item__wrapper">
+            <div class="street-item" style="justify-content: center" v-for="(item, index) in 9" :key="index">
+              <span>群策巷社区</span>
+            </div>
+          </div>
+        </scroll-view>
+      </div>
+    </u-popup>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'grid',
+
+    appName: '网格统计',
+
+    data () {
+      return {
+        isShowStreet: false,
+        isShowVillage: false
+      }
+    },
+
+    onLoad () {
+
+    },
+
+    methods: {
+
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .grid {
+    min-height: 100vh;
+    padding: 32px 0;
+    background: #fff;
+    box-sizing: border-box;
+
+    * {
+      box-sizing: border-box;
+    }
+
+    .street-dialog {
+      height: 100%;
+      padding: 0 32px 30px;
+
+      .street-wrapper {
+        .title {
+          height: 100px;
+          line-height: 100px;
+          width: 128px;
+          font-size: 32px;
+          font-weight: 600;
+          color: #262B36;
+        }
+
+        .street-item__wrapper {
+          display: flex;
+          flex-wrap: wrap;
+          height: 100%;
+        }
+
+        .street-item {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          width: calc((100% - 30px) / 2);
+          height: 80px;
+          margin-bottom: 16px;
+          padding: 0 32px;
+          background: #F3F5F7;
+
+          &:nth-of-type(2n - 1) {
+            margin-right: 30px;
+          }
+
+          .left {
+            display: flex;
+            align-items: center;
+
+            i {
+              width: 8px;
+              height: 8px;
+              margin-right: 16px;
+              border-radius: 50%;
+              background: #1365DD;
+            }
+
+            h2 {
+              color: #666666;
+              font-size: 26px;
+            }
+          }
+
+          span {
+            font-size: 28px;
+            color: #333;
+            font-weight: 600;
+          }
+        }
+      }
+    }
+
+    .gird-item {
+      position: relative;
+      margin: 0 16px 80px;
+      padding: 16px;
+      border: 2px dashed #CCCCCC;
+
+      &::after {
+        position: absolute;
+        bottom: 0;
+        left: 50%;
+        z-index: 11;
+        width: 2px;
+        height: 80px;
+        background: #666666;
+        transform: translate(-50%, 100%);
+        content: ' ';
+      }
+
+      &::before {
+        position: absolute;
+        bottom: -80px;
+        left: 50%;
+        z-index: 11;
+        border: 14px solid transparent;
+        border-top: 14px solid #666666;
+        transform: translate(-50%, 50%);
+        content: ' ';
+      }
+
+      &:last-child::after, &:last-child::before {
+        display: none;
+      }
+
+      .level1 {
+        position: relative;
+        text-align: center;
+        height: 80px;
+        line-height: 80px;
+        background: #1365DD;
+        color: #fff;
+        font-size: 32px;
+
+        &:active {
+          opacity: 0.6;
+        }
+
+        image {
+          position: absolute;
+          top: 50%;
+          right: 16px;
+          z-index: 1;
+          width: 32px;
+          height: 32px;
+          transform: translateY(-50%);
+        }
+
+        h3 {
+          font-weight: normal;
+        }
+      }
+
+      .level3 {
+        display: flex;
+        position: relative;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        text-align: center;
+        height: 96px;
+        background: #E8EFFB;
+        color: #fff;
+        font-size: 28px;
+
+        &:active {
+          opacity: 0.6;
+        }
+
+        h3 {
+          color: #1365DD;
+        }
+
+        p {
+          color: #CCCCCC;
+          font-size: 24px;
+        }
+
+        image {
+          position: absolute;
+          top: 50%;
+          right: 16px;
+          z-index: 1;
+          width: 32px;
+          height: 32px;
+          transform: translateY(-50%);
+        }
+
+        h3 {
+          font-weight: normal;
+        }
+      }
+
+      .level2 {
+        display: flex;
+        flex-wrap: wrap;
+
+        .grid-item__item {
+          width: calc((100% - 16px) / 2);
+          height: 80px;
+          line-height: 80px;
+          margin-bottom: 8px;
+          padding: 0 10px;
+          color: #3B3F59;
+          font-size: 28px;
+          font-weight: 600;
+          text-align: center;
+          background: #F3F5F7;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+
+          &:nth-of-type(2n - 1) {
+            margin-right: 8px;
+          }
+        }
+      }
+
+      & > h2 {
+        margin-bottom: 16px;
+        text-align: center;
+        color: #ccc;
+        font-size: 26px;
+        font-weight: normal;
+      }
+    }
+  }
+</style>

src/project/xicheng/AppPageMerchant/AppPageMerchant.vue

@@ -1,58 +1,93 @@
 <template>
   <div class="AppPageMerchant">
-    <AiListPage :label="label" :appList="appList" :headerBg="headerBg" />
+    
+    <div class="list">
+      <div class="item" v-for="(item, index) in appList" :key="index" @click="linkTo(item.url)" :style="item.isBottom ? 'border-bottom: 1px solid #eee;' : ''">
+        <div class="icon" :style="`backgroundImage: url(${item.icon});`"></div>
+        <p>{{item.name}}</p>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 export default {
   name: 'AppPageMerchant',
-  appName: '西城-商户管理',
+  appName: '商户入口',
   data() {
     return {
       label: '西城-商户管理',
       appList: [
         {
           name: '商户档案',
-          icon: require('./img/police-logo.jpg'),
+          icon: require('./img/shanghudangan.png'),
           url: '../AppMerchantManage/AppMerchantManage',
           isBottom: true
         },
         {
           name: '网格管理',
-          icon: require('./img/jmqgl.png'),
+          icon: require('./img/wanggeguanli.png'),
           url: '../AppMerchanGird/AppMerchanGird',
           isBottom: true
         },
         {
           name: '商户地图',
-          icon: require('./img/police-logo.jpg'),
+          icon: require('./img/shanghuditu.png'),
           url: '../AppMerchantMap/AppMerchantMap',
           isBottom: true
         },
         {
           name: '网格统计',
-          icon: require('./img/police-logo.jpg'),
+          icon: require('./img/wanggetongji.png'),
           url: '../AppMerchanStatistics/AppMerchanStatistics'
         }
       ],
-      headerBg: require('./img/header-bg.png'),
     }
   },
   onShow() {
-    document.title = '西城-商户管理'
+    document.title = '商户入口'
   },
   methods: {
-
+    linkTo(url) {
+      console.log(url)
+      uni.navigateTo({url})
+    }
   },
 }
 </script>
 
 <style lang="scss" scoped>
-uni-page-body{
-  height: 100%;
-}
 .AppPageMerchant{
-  height: 100%;
+  padding: 20px;
+  .list{
+    background-color: #fff;
+    border-radius: 16px;
+    overflow: hidden;
+    .item{
+      text-align: center;
+      padding-bottom: 38px;
+      border-right: 1px solid #eee;
+      width: calc(33% - 1px);
+      float: left;
+      .icon{
+        display: inline-block;
+        width: 80px;
+        height: 80px;
+        margin: 40px 0 8px 0;
+        background-size: 100% 100%;
+        text-align: center;
+      }
+      p{
+        font-size: 28px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #3D434A;
+        line-height: 40px;
+      }
+    }
+    .item:nth-of-type(3n) {
+      border-right: 0;
+    }
+  }
 }
 </style>