dvcp_v2_wxcp_app/src/saas/AppCountryAlbum/AlbumDetail.vue

<template>
  <div class="photo">
    <div class="photo-header">
      <image src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/64f71761d2b04746ad640a43706a92e4~tplv-k3u1fbpfcp-zoom-crop-mark:1304:1304:1304:734.awebp?" mode="aspectFill" />
      <div>
        <h2>{{ info.albumName }}</h2>
        <span @click="linkTo('./AddAlbum?id=' + id)">相册设置</span>
      </div>
    </div>
    <div class="photo-info">
      <div class="photo-info__item">
        <h2>{{ totalInfo.all || 0 }}</h2>
        <span>照片</span>
      </div>
      <div class="photo-info__item">
        <h2>{{ totalInfo.today || 0 }}</h2>
        <span>今日</span>
      </div>
      <div class="photo-info__item">
        <h2>{{ totalInfo.benyue || 0 }}</h2>
        <span>本月</span>
      </div>
      <div class="photo-info__item">
        <h2>{{ totalInfo.bennian || 0 }}</h2>
        <span>今年</span>
      </div>
    </div>
    <div class="photo-list">
      <div class="photo-title">
        <h2>照片列表</h2>
        <div class="right">
          <div class="right-item">
            <span>所有日期</span>
            <image src="./images/down.png" />
          </div>
          <div class="right-item">
            <span>所有干部</span>
            <image src="./images/down.png" />
          </div>
        </div>
      </div>
      <div class="photo-item__wrapper">
        <div class="photo-item" @click="linkTo('./Photo?url=' + item.photoUrl + '&id=' + item.id)" v-for="(item, index) in list" :key="index">
          <image :src="item.photoUrl" mode="aspectFill" />
          <div class="photo-item__text">
            <h2>张三</h2>
            <p>{{ item.createTime }}</p>
          </div>
        </div>
        <AiEmpty v-if="!list.length"></AiEmpty>
      </div>
    </div>
    <div class="btn-wrapper">
      <div class="btn" hover-class="text-hover">编辑照片</div>
      <div class="btn" @click="toAddImg" hover-class="text-hover">上传照片</div>
    </div>
  </div>
</template>

<script>
  import { mapState } from 'vuex'

  export default {
    name: 'AlbumDetail',
    appName: '乡村相册',

    data () {
      return {
        list: [],
        type: '',
        info: {},
        name: '',
        coverImg: '',
        imgList: [],
        hideStatus: false,
        pageShow: false,
        id: '',
        totalInfo: {}
      }
    },

    computed: {
      ...mapState(['user', 'token'])
    },

    onLoad (query) {
      this.id = query.id

      this.$nextTick(() => {
        this.getTotalInfo(query.id)
        this.getInfo(query.id)
        this.getList()
      })

      uni.$on('change', () => {
        this.getInfo(query.id)
      })

      uni.$on('update', () => {
        this.getList()
      })
    },

    onUnload () {
      uni.$off('change')
      uni.$off('update')
    },

    methods: {
      linkTo (url) {
        uni.navigateTo({
          url
        })
      },

      getInfo (id) {
        this.$http.post(`/api/appalbum/queryDetailById?id=${id}`).then(res => {
          if (res.code === 0) {
            this.info = res.data
          }
        })
      },

      getTotalInfo (id) {
        this.$http.post(`/api/appalbumphoto/photoDetail?id=${id}`).then(res => {
          if (res.code === 0) {
            this.totalInfo = res.data
          }
        })
      },

      toAddImg () {
        uni.chooseImage({
          count: 1,
          sizeType: ['compressed'],
          success: res => {
            let formData = new FormData()
            formData.append('file', res.tempFiles[0])
            this.$http.post('/admin/file/add2?type=image', formData).then(res => {
              if (res.code === 0) {
                this.linkTo(`./Watermark?url=${res.data.url}&albumId=${this.id}`)
              }
            })
          }
        })
      },

      getList () {
        this.$http.post(`/api/appalbumphoto/list`).then(res => {
          if (res.code === 0) {
            this.list = res.data.records
          }
        })
      }
    }
  }
</script>

<style lang="scss" socped>
  .photo {
    padding-bottom: 130px;

    * {
      box-sizing: border-box;
    }

    .photo-list {
      padding: 32px;

      .photo-item__wrapper {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;

        .photo-item {
          position: relative;
          width: 328px;
          height: 328px;
          margin-bottom: 32px;
          border-radius: 12px;
          overflow: hidden;

          image {
            width: 100%;
            height: 100%;
          }

          .photo-item__text {
            position: absolute;
            bottom: 0;
            left: 0;
            z-index: 1;
            width: 100%;
            padding: 20px 16px 16px;
            background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);

            h2 {
              margin-bottom: 12px;
              color: #fff;
              font-size: 32px;
              font-weight: 600;
            }

            p {
              color: #fff;
              font-size: 28px;
            }
          }

          &:nth-of-type(2n) {
            margin-left: 30px;
          }
        }
      }

      .photo-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 44px 0;

        & > h2 {
          color: #333333;
          font-size: 38px;
          font-weight: 600;
        }

        .right {
          display: flex;
          align-items: center;

          & > div {
            display: flex;
            align-items: center;
            margin-right: 32px;

            &:last-child {
              margin-right: 0;
            }

            span {
              color: #666666;
              font-size: 26px;
            }

            image {
              width: 32px;
              height: 32px;
              margin-left: 8px;
            }
          }
        }
      }
    }

    .photo-header {
      position: relative;
      height: 400px;

      div {
        position: relative;
        display: flex;
        z-index: 1;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 100%;
        height: 100%;
      }

      span {
        width: 176px;
        height: 56px;
        line-height: 56px;
        margin-top: 16px;
        text-align: center;
        background: rgba(255, 255, 255, 0.1);
        color: #beb2ab;
        border-radius: 28px;
      }

      image {
        position: absolute;
        z-index: 1;
        left: 0;
        top: 0;
        width: 100%;
        height: 400px;
        filter: blur(2px);
      }

      h2 {
        color: #fff;
        background: rgba(0,0,0, 0.1);
        font-size: 56px;
      }
    }

    .photo-info {
      display: flex;
      align-items: center;
      height: 168px;
      background: #FFFFFF;
      box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.02);

      & > div {
        flex: 1;
        text-align: center;

        h2 {
          margin-bottom: 10px;
          font-weight: 600;
          font-size: 38px;
          color: #333333;
        }

        span {
          color: #999999;
          font-size: 26px;
        }
      }
    }

    .btn-wrapper {
      display: flex;
      position: fixed;
      bottom: 0;
      left: 0;
      z-index: 1;
      width: 100%;
      height: 112px;

      .btn {
        &:active, &.hover {
          opacity: 0.7;
        }
      }

      .btn:first-child {
        width: 270px;
        height: 112px;
        line-height: 112px;
        text-align: center;
        background: #FFFFFF;
        box-shadow: inset 0px 1px 0px 0px #DDDDDD;
        color: #333333;
        font-size: 36px;
      }

      .btn:last-child {
        flex: 1;
        height: 112px;
        line-height: 112px;
        text-align: center;
        background: #1365DD;
        box-shadow: inset 0px 1px 0px 0px #DDDDDD;
        color: #fff;
        font-size: 36px;
      }
    }
  }
</style>