dvcp_v2_wxcp_app/library/project/caw/AppCountryAlbum/components/Home.vue

<template>
  <div class="album-home" ref="home">
    <div class="userinfo">
      <image :src="$cdn + 'avatar.png'" />
      <div class="right">
        <h2><AiOpenData v-if="user.wxOpenUserId" type="userName" :openid="user.wxOpenUserId"></AiOpenData></h2>
        <p>欢迎使用工作相册</p>
      </div>
    </div>
    <div class="album-total">
      <div class="album-total__item">
        <span>今日拍照人数</span>
        <i>{{ countPhotographer || 0 }}</i>
      </div>
      <div class="album-total__item">
        <span>今日拍照数量</span>
        <i>{{ countPhotoNo || 0 }}</i>
      </div>
    </div>
    <div class="space">
      <div class="space-top">
        <h2>相册空间({{ user.editionName }})</h2>
        <span>{{ user.usedStorageSpaceStr || 0 }} / {{ user.storageSpaceStr }}</span>
      </div>
      <div class="rate">
        <span :style="{width: rate + '%'}"></span>
      </div>
    </div>
    <div class="album-operate">
      <div class="left">
        <div class="left-item" @click="addPhoto">
          <image src="../images/paizhao.png" />
          <span>拍照</span>
        </div>
        <div class="left-item" @click="linkTo('./AddReport')">
          <image src="../images/pintu.png" />
          <span>拼图汇报</span>
        </div>
      </div>
      <div class="right">
        <div class="right-top">
          <image class="right-top__left" src="../images/xiaoxizhushou.png"/>
          <image @click="linkTo('./Message')" class="right-top__right" src="../images/gengduo1.png" />
        </div>
        <div class="right-info">
          <div class="right-info__news" v-if="msgInfo.content">
            <span>最新</span>
            <i v-if="msgInfo.channel !== '0'">{{ msgInfo.content }}</i>
            <div style="display: inline" v-else>
              <i v-for="(item, index) in msgInfo.msg" :key="index">
                <i v-if="item.type === 0">{{ item.value }}</i>
                <AiOpenData style="display: inline" v-else type="userName" :openid="item.value"></AiOpenData>
              </i>
            </div>
          </div>
          <i v-else>暂无消息</i>
          <p>{{ msgInfo.createTime || '' }}</p>
        </div>
      </div>
    </div>
    <div class="album-list">
      <h2>工作相册</h2>
      <div class="album-list__wrapper">
        <div class="item" v-for="(item, index) in list" :key="index" @click="linkTo('./AlbumDetail?id=' + item.id)">
          <image src="./../images/icon.png" :loading-img="$cdn + 'watermark/loading.png'" v-if="!item.lastPhotoUrl" />
          <u-lazy-load class="item-img" img-mode="aspectFill" :height="328" :image="item.lastPhotoUrl" v-else></u-lazy-load>
          <div class="item-bottom">
            <h2>{{ item.albumName }}</h2>
            <div class="item-bottom__info">
              <div class="left">
                <span>今日新增</span>
                <i>{{ item.dayPhtoto }}</i>
                <span>张</span>
              </div>
              <div class="right">
                <image src="../images/zhaopianshuliang.png" />
                <span>{{ item.photoTotal }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="item item-add" @click="linkTo('./AddAlbum')">
          <div class="item-add__btn"></div>
          <p>添加相册</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { mapState } from 'vuex'
  export default {
    name: 'Home',

    data () {
      return {
        countPhotoNo: '',
        countPhotographer: '',
        list: [],
        msgInfo: {}
      }
    },

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

      rate () {
        if (!this.user.usedStorageSpace) {
          return 0
        }

        return ((this.user.usedStorageSpace || 0) / this.user.storageSpace * 100)
      }
    },

    mounted () {
      this.getCountPhotoNo()
      this.getAlbumList()
      this.getMsgList()
      this.getUserInfo()
    },

    destroyed () {
      uni.$off('update')
    },

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

      update () {
        this.getCountPhotoNo()
        this.getAlbumList()
        this.getMsgList()
        this.getUserInfo()
      },

      getUserInfo () {
        this.$http.post('/api/user/info').then(res => {
          if (res.code === 0) {
            this.$store.commit('setUser', res.data)
          }
        })
      },

      getCountPhotoNo () {
        this.$http.post('/api/appalbumphoto/countPhotoNo').then(res => {
          if (res.code === 0) {
            this.countPhotoNo = res.data
          }
        })
        this.$http.post('/api/appalbumphoto/countPhotographer').then(res => {
          if (res.code === 0) {
            this.countPhotographer = res.data
          }
        })
      },

      getMsgList () {
        this.$http.post('/api/sysmessage/latestnews').then(res => {
          if (res.code === 0) {
            if (res.data) {
              this.msgInfo = res.data
              let msg = res.data.content

              if (res.data.channel === '0') {
                if (res.data.content.split('$').length === 3) {
                  msg = res.data.content.split('$').map((v, index) => {
                    if (index === 1) {
                      return {
                        type: 1,
                        value: v.split('=')[1]
                      }
                    }

                    return {
                      type: 0,
                      value: v
                    }
                  })
                }
              }
              this.msgInfo.msg = msg
            }
          }
        })
      },

      getAlbumList () {
        this.$http.post('/api/appalbum/list', null, {
          params: {
            size: 10000
          }
        }).then(res => {
          if (res.code === 0) {
            this.list = res.data.records
          }
        })
      },

      addPhoto () {
        uni.chooseImage({
          count: 1,
          sizeType: ['compressed'],
          sourceType: ['camera'],
          success: res => {
            this.linkTo(`./Watermark?url=${encodeURIComponent(res.tempFilePaths[0])}`)
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .album-home {
    padding: 50px 32px 120px;

    * {
      box-sizing: border-box;
    }

    .space {
      margin-top: 32px;
      padding: 24px;
      background: #FFFFFF;
      box-shadow: 0px 4px 8px 0px rgba(17, 67, 110, 0.02);
      border-radius: 16px;

      .rate {
        display: flex;
        position: relative;
        align-items: center;
        width: 100%;
        height: 8px;
        background: #EEEEEE;
        border-radius: 4px;
        overflow: hidden;

        span {
          position: absolute;
          top: 0;
          left: 0;
          height: 100%;
          border-radius: 4px;
          background: #2BB1FF;
        }
      }

      .space-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 32px;

        h2 {
          font-size: 32px;
          font-weight: 600;
          color: #333;
        }

        span {
          font-size: 36px;
          font-weight: 600;
          color: #3B424A;
        }
      }
    }

    .album-list {
      & > h2 {
        height: 96px;
        line-height: 96px;
        color: #333333;
        font-size: 36px;
        font-weight: 600;
      }

      .item-add {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        background: #EFF5FA;
        box-shadow: 0px 4px 8px 0px rgba(17, 67, 110, 0.1);
        border-radius: 16px;
        border: 2px solid #FFFFFF;

        p {
          margin-top: 16px;
          font-size: 26px;
          color: #999;
        }

        .item-add__btn {
          position: relative;
          width: 64px;
          height: 64px;
          border-radius: 50%;
          background: #FFFFFF;
          box-shadow: 0px 4px 8px 0px rgba(17, 67, 110, 0.1);

          &::after {
            position: absolute;
            left: 50%;
            top: 50%;
            z-index: 1;
            width: 4px;
            height: 32px;
            background: #333333;
            box-shadow: 0px 4px 8px 0px rgba(17, 67, 110, 0.1);
            border-radius: 4px;
            transform: translate(-50%, -50%);
            content: ' ';
          }

          &::before {
            position: absolute;
            left: 50%;
            top: 50%;
            z-index: 1;
            width: 32px;
            height: 4px;
            background: #333333;
            box-shadow: 0px 4px 8px 0px rgba(17, 67, 110, 0.1);
            border-radius: 4px;
            transform: translate(-50%, -50%);
            content: ' ';
          }
        }
      }

      .album-list__wrapper {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        justify-content: space-between;

        .item {
          display: flex;
          position: relative;
          align-items: center;
          justify-content: center;
          width: 328px;
          height: 328px;
          margin-top: 32px;
          box-shadow: 0px 4px 8px 0px rgba(17, 67, 110, 0.1);
          border-radius: 16px;
          overflow: hidden;
          background: #EFF5FA;

          .item-bottom {
            position: absolute;
            left: 0;
            bottom: 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%);
            box-shadow: 0px 4px 8px 0px rgba(17, 67, 110, 0.1);

            & > h2 {
              margin-bottom: 14px;
              font-size: 32px;
              color: #fff;
            }

            .item-bottom__info {
              display: flex;
              align-items: center;
              justify-content: space-between;

              .right {
                display: flex;
                align-items: center;
                justify-content: space-between;
                width: 86px;
                height: 48px;
                padding: 0 8px;
                color: #fff;
                background: rgba(0, 0, 0, 0.5);
                box-shadow: 0px 4px 8px 0px rgba(17, 67, 110, 0.1);
                border-radius: 8px;

                image {
                  width: 28px;
                  height: 28px;
                }
              }

              .left {
                span {
                  color: #c6c5c4;
                  font-size: 28px;
                }

                i {
                  padding: 0 3px;
                  color: #fff;
                  font-size: 28px;
                }
              }
            }
          }

          & > span {
            position: absolute;
            left: 16px;
            top: 16px;
            z-index: 1;
            width: 94px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            color: #fff;
            font-size: 28px;
            background: #FF524F;
            box-shadow: 0px 4px 8px 0px rgba(17, 67, 110, 0.1);
            border-radius: 8px;
          }

          & > image {
            width: 80px;
            height: 80px;
          }

          .item-img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }

    .album-operate {
      display: flex;
      align-items: center;
      margin: 48px 0 32px;

      .right {
        flex: 1;
        height: 256px;
        padding: 24px;
        background: #2BB1FF;
        box-shadow: 0px 4px 8px 0px rgba(25, 81, 129, 0.12);
        border-radius: 16px;

        .right-top {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 26px;

          .right-top__left {
            width: 136px;
            height: 32px;
          }

          .right-top__right {
            width: 32px;
            height: 32px;
          }
        }

        .right-info {
          & > i {
            display: block;
            padding-top: 14px;
            color: #f8fcff;
            font-size: 28px;
          }

          .right-info__news {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
            margin-bottom: 12px;

            span {
              display: inline-block;
              width: 68px;
              height: 40px;
              line-height: 40px;
              margin-right: 8px;
              text-align: center;
              background: #FFBC5E;
              border-radius: 8px;
              color: #FFFFFF;
            }

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

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

      .left {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-direction: column;
        width: 288px;
        height: 256px;
        margin-right: 16px;

        .left-item {
          display: flex;
          align-items: center;
          width: 288px;
          height: 120px;
          padding-left: 48px;
          background: #FFFFFF;
          box-shadow: 0px 4px 8px 0px rgba(17, 67, 110, 0.02);
          border-radius: 16px;

          &:first-child {
            margin-bottom: 26px;
          }

          span {
            color: #333333;
            font-size: 32px;
            font-weight: 600;
          }

          image {
            width: 32px;
            height: 32px;
            margin-right: 16px;
          }
        }
      }
    }

    .userinfo {
      display: flex;
      align-items: center;
      margin-bottom: 50px;

      image {
        width: 112px;
        height: 112px;
        margin-right: 24px;
        border-radius: 50%;
      }

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

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

    i, em {
      font-style: normal;
    }

    .album-total {
      display: flex;
      align-items: center;

      .album-total__item {
        display: flex;
        flex: 1;
        font-size: 28px;

        i {
          color: #3B424A;
          font-weight: 600;
        }

        span {
          margin-right: 16px;
          color: #999999;
        }
      }
    }
  }
</style>