dvcp_v2_wxcp_app/src/apps/AppCountryAlbum/AppCountryAlbum.vue

<template>
  <div class="AppCountryAlbum">
    <div class="list">
      <AiTopFixed>
        <div class="area-content">
          <AiAreaPicker :areaId="user.areaId" :value="areaId" @select="areaSelect" :name.sync="areaName">
            <img src="./img/local-icon.png" alt="">
            <span class="label" v-if="areaName">{{ areaName }}</span>
            <span v-else>请选择</span>
            <u-icon name="arrow-down" color="#666" size="24"/>
          </AiAreaPicker>
        </div>
      </AiTopFixed>
      <div class="album-list">
        <div class="item" v-for="(item, index) in list" :key="index" @click="toDetail(item)">
          <img :src="`${cdn}/dvcp/album/album${item.type}.png`" alt="">
          <p class="text">{{ item.name }}</p>
          <div class="tips">共{{ item.total }}张</div>
        </div>
        <AiEmpty v-if="!list.length"/>
      </div>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'

export default {
  name: "AppCountryAlbum",
  appName: "乡村相册",
  data() {
    return {
      list: [],
      areaId: '',
      areaName: '',
      cdn: ''
    }
  },
  computed: {...mapState(['user'])},
  onShow() {
    this.areaId = this.user.areaId
    this.areaName = this.user.areaName
    this.getList()
    this.cdn = this.$cdn.replace("/dvcp/h5", "");
    document.title = '乡村相册'
  },
  methods: {
    areaSelect(e) {
      this.areaId = e
      this.getList()
    },
    getList() {
      this.$http.post(`/app/appvillagepicturealbum/queryAlbumMenu`, null, {
        params: {
          areaId: this.areaId,
        }
      }).then(res => {
        if (res?.data) {
          this.list = res.data
        }
      })
    },
    toDetail(item) {
      uni.navigateTo({url: `./detail?type=${item.type}&areaId=${this.areaId}&title=${item.name}&titleImgUrl=${this.cdn}/dvcp/album/album${item.type}.png`})
    },
  },
  onReachBottom() {
    this.current++;
    this.getList()
  },
}
</script>

<style lang="scss" scoped>
.AppCountryAlbum {
  .area-content {
    width: 100%;
    line-height: 64px;

    img {
      width: 42px;
      vertical-align: middle;
      margin-right: 16px;
    }

    .u-icon {
      margin-left: 6px;
    }
  }

  .album-list {
    padding: 32px 0 0 32px;
    overflow: hidden;

    .item {
      width: calc(33% - 16px);
      height: 240px;
      border-radius: 8px;
      position: relative;
      margin: 0 16px 16px 0;
      float: left;

      img {
        width: 100%;
        height: 100%;
        border-radius: 8px;
      }

      .text {
        position: absolute;
        bottom: 16px;
        left: 0;
        width: 100%;
        text-align: center;
        font-size: 32px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #FFF;
        line-height: 44px;
      }

      .tips {
        position: absolute;
        top: 8px;
        right: 8px;
        padding: 0 8px;
        line-height: 40px;
        background-color: rgba(0, 0, 0, .6);
        color: #fff;
        border-radius: 8px;
        font-size: 22px;
      }
    }
  }
}
</style>