dvcp_v2_wxcp_app/src/saas/AppCountryAlbum/components/Home.vue

<template>
  <div class="album-home" ref="home">
    <div class="userinfo">
      <image src="https://pica.zhimg.com/v2-abed1a8c04700ba7d72b45195223e0ff_is.jpg?source=32738c0c" />
      <div class="right">
        <h2>吴小米</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="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">
            <span>最新</span>
            <i>你于2月14日发布的你于2月14日发布的</i>
          </div>
          <p>2022-2-14  10:02</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)">
          <span v-if="item.photoHasRead === 'NO'">未查看</span>
          <image src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fa50994a01ff415294729ac6e0623845~tplv-k3u1fbpfcp-no-mark:240:240:240:160.awebp?" />
          <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>
  export default {
    name: 'Home',

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

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

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

      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) {
            this.msgInfo = res.data
          }
        })
      },

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

      addPhoto () {
        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}`)
              }
            })
          }
        })
      }
    }
  }
</script>

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

    * {
      box-sizing: border-box;
    }

    .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 {
          position: relative;
          width: 328px;
          height: 328px;
          margin-top: 32px;
          box-shadow: 0px 4px 8px 0px rgba(17, 67, 110, 0.1);
          border-radius: 16px;
          overflow: hidden;

          .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: 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: 40px;

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

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

        .right-info {
          .right-info__news {
            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>