bug

src/apps/AppCountryAlbum/list.vue

@@ -0,0 +1,125 @@
+<template>
+  <div class="list">
+    <AiTopFixed>
+      <div class="area-content">
+        <AiAreaPicker :areaId="user.areaId" v-model="areaId" @select="areaSelect">
+          <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" v-if="item.total" @click="toDetail(item)">
+        <img :src="item.url" alt="">
+        <p class="text">{{item.name}}</p>
+        <div class="tips">共{{item.total}}张</div>
+      </div>
+      <AiEmpty v-if="!list.length"/>
+    </div>
+    
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+export default {
+
+  data() {
+    return {
+      list: [],
+      areaId: '',
+      areaName: ''
+    }
+  },
+  computed: { ...mapState(['user']) },
+  mounted() {
+    this.areaId = this.user.areaId
+    this.areaName = this.user.areaName
+    this.getList()
+  },
+
+  methods: {
+    areaSelect(e) {
+      this.areaId = e.id
+      this.areaName = e.name
+    },  
+    getList() {
+      this.$http.post(`/app/appvillagepicturealbum/queryAlbumMenu`, null, {
+        params: {
+          areaId: this.user.areaId,
+        }
+      }).then(res => {
+        if (res.code == 0) {
+          this.list = res.data
+        }
+      })
+    },
+    toDetail(item) {
+      uni.navigateTo({url: `./detail?type=${item.type}&areaId=${this.areaId}&title=${item.name}&titleImgUrl=${item.url}`})
+    },
+  },
+  onReachBottom() {
+    this.current++;
+    this.getList()
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.list {
+  .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>