dvcp_v2_wxcp_app/library/project/xincheng/AppMerchanStatistics/AppMerchanStatistics.vue

<template>
  <div class="grid" v-if="pageShow">
    <div class="gird-wrapper">
      <div class="gird-item">
        <h2>一级网格</h2>
        <div class="gird-item__wrapper level1" @click="getStatistics(topGrid.id)">
          <h3>{{ topGrid.girdName }}</h3>
          <image :src="$cdn + 'xincheng/w-right.png'"/>
        </div>
      </div>
      <div class="gird-item" v-if="secondaryGrid.length">
        <h2>二级网格</h2>
        <div class="gird-item__wrapper level2">
          <div class="grid-item__item" v-for="(item, index) in secondaryGrid" :key="index">{{ item.girdName }}</div>
        </div>
      </div>
      <div class="gird-item" v-if="tertiaryGrid.length">
        <h2>三级网格</h2>
        <div class="gird-item__wrapper level3" @click="getSubInfo">
          <h3>专属网格</h3>
          <p>（{{ tertiaryGrid.length }}个）</p>
          <image :src="$cdn + 'xincheng/blue-right.png'"/>
        </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 streetInfo" :key="index">
              <div class="left">
                <i></i>
                <h2>{{ index }}</h2>
              </div>
              <span>{{ item }}</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 tertiaryInfo" :key="index">
              <div class="left">
                <i></i>
                <h2>{{ index }}</h2>
              </div>
              <span>{{ item }}</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 tertiaryGrid" :key="index">
              <span>{{ item.girdName }}</span>
            </div>
          </div>
        </scroll-view>
      </div>
    </u-popup>
  </div>
</template>

<script>
export default {
  name: 'grid',

  appName: '网格统计',

  data() {
    return {
      isShowStreet: false,
      streetInfo: {},
      isShowVillage: false,
      topGrid: [],
      secondaryGrid: [],
      tertiaryGrid: [],
      tertiaryInfo: {},
      pageShow: false
    }
  },

  onLoad() {
    this.$loading()
    this.getInfo().finally(() => uni.hideLoading())
  },

  methods: {
    getStatistics(girdId) {
      this.$loading()
      this.$http.post(`/api/appgirdinfo/girdInfoCountById?girdId=${girdId}`).then(res => {
        if (res.code === 0) {
          this.isShowStreet = true
          this.streetInfo = res.data
        }
      })
    },

    getSubInfo() {
      this.$loading()
      this.$http.post(`/api/appgirdinfo/girdInfoCountByThree`).then(res => {
        if (res.code === 0) {
          this.isShowVillage = true
          this.tertiaryInfo = res.data
        }
      })
    },

    getInfo() {
      return this.$http.post(`/api/appgirdinfo/listAllByTop`).then(res => {
        if (res.code === 0) {
          this.topGrid = res.data

          if (res.data.girdList.length) {
            this.secondaryGrid = res.data.girdList

            res.data.girdList.forEach(e => {
              this.tertiaryGrid.push(...e.girdList)
            })
          }

          this.$nextTick(() => {
            this.pageShow = true
          })
        }
      })
    }
  }
}
</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: 88px;
        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 {
          display: -webkit-box;
          -webkit-box-orient: vertical;
          overflow: hidden;
          -webkit-line-clamp: 2;
          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: #1365DD;
      font-size: 32px;
      font-weight: 600;
    }
  }
}
</style>