dvcp_v2_wxcp_app/src/apps/AppCountryAlbum/components/detail.vue

<template>
  <div class="detail">
    <div class="banner-img">
      <p>{{params.title}}</p>
      <img :src="params.titleImgUrl" alt="">
    </div>
    <div class="num-row">
      <div class="item">
        <h3>{{numInfo.total}}</h3>
        <p>照片</p>
      </div>
      <div class="item">
        <h3>{{numInfo.lastMonth}}</h3>
        <p>本月</p>
      </div>
      <div class="item">
        <h3>{{numInfo.thisMonth}}</h3>
        <p>上月</p>
      </div>
      <div class="item">
        <h3>{{numInfo.thisYear}}</h3>
        <p>今年</p>
      </div>
    </div>
    <div class="list-conent">
      <div class="item" v-for="(item, index) in list" :key="index">
        <div class="time-select">
          <span>{{item.name}}</span>
          <u-icon name="arrow-down" color="#333" size="16" />
        </div>
        <div class="img-list">
          <div class="img-item" v-for="(e, indexs) in item.list" :key="indexs">
            <p>{{e.createUserName}} 上传</p>
            <img :src="e.url" alt="">
          </div>
        </div>
      </div>
    </div>
    
    <div class="footer-btn" @click="uploadImg">上传图片</div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  props: ['params'],
  data() {
    return {
      list: [],
      limit: 9,
      size: 10 * 1024 * 1024,
      fileList: [],
      numInfo: {}
    }
  },
  computed: { ...mapState(['user']) },
  mounted() {
    console.log(this.params)
    this.getList()
    this.getStatistic()
  },

  methods: {
    getList() {
      this.$http.post(`/app/appvillagepicturealbum/queryAlbum`, null, {
        params: {
          areaId: this.params.areaId,
          type: this.params.type
        }
      }).then(res => {
        if (res.code == 0) {
           this.list = Object.keys(res.data).map(v => {
            return {
              name: v,
              list: res.data[v]
            }
          })
        }
      })
    },
    getStatistic() {
      this.$http.post(`/app/appvillagepicturealbum/statistic`, null, {
        params: {
          areaId: this.params.areaId,
          type: this.params.type
        }
      }).then(res => {
        if (res.code == 0) {
          this.numInfo = res.data
        }
      })
    },
    uploadImg() {
      let params = {
        count: this.limit,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          let count = res.tempFiles?.length || res.tempFile ? 1 : 0
          if (count > this.limit && this.limit !== 1) {
            return this.$u.toast(`不能超过${this.limit}个`)
          }
          if (res.tempFiles) {
            res.tempFiles?.map((item) => {
              this.uploadFile(item)
            })
          } else if (res?.tempFile) {
            this.uploadFile(res.tempFile)
          }
        },
      }

      uni.chooseImage(params)
    },
    uploadFile(img) {
      this.fileList = []
      if (this.size > 0 && img.size > this.size) {
        return this.$u.toast(`不能超过${Math.ceil(this.size / 1024 / 1024)}MB`)
      }
      uni.showLoading({title: '上传中'})
      let formData = new FormData()
      formData.append('file', img)
      this.$http.post('/admin/file/add2', formData).then((res) => {
        uni.hideLoading()
        if (res?.data) {
          this.fileList.push(res.data)
          this.confirmUpload()
        } else {
          this.$u.toast(res.msg)
        }
      }).catch(err => {
        this.$u.toast(err)
        uni.hideLoading()
      })
    },
    confirmUpload() {
      console.log(this.fileList)
      var urlList = []
      this.fileList.map((item) => {
        urlList.push(item.url)
      })
      this.$http.post(`/app/appvillagepicturealbum/addPictures`, {
        areaId: this.params.areaId,
        type: this.params.type,
        urlList: urlList,
      }).then(res => {
        if (res.code == 0) {
          this.$u.toast('上传成功!')
          this.getList()
          this.getStatistic()
        }
      })
    }
  },
}
</script>

<style lang="scss" scoped>
.detail {
  background: #F3F6F9;
  .banner-img{
    width: 100%;
    height: 272px;
    position: relative;
    img{
      width: 100%;
      height: 100%;
      filter: blur(2px);
    }
    p{
      position: absolute;
      top: 96px;
      left: 0;
      width: 100%;
      text-align: center;
      font-size: 56px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #FFF;
      line-height: 80px;
      z-index: 99;
    }
  }
  .num-row{
    padding: 0 32px;
    display: flex;
    background-color: #fff;
    .item{
      flex: 1;
      text-align: center;
      h3{
        margin: 32px 0 16px 0;
        font-size: 38px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333;
        line-height: 52px;
      }
      p{
        font-size: 26px;
        font-family: PingFangSC-Regular, PingFang SC;
        color: #999;
        line-height: 36px;
        padding-bottom: 32px;
      }
    }
  }
  .list-conent{
    padding-bottom: 112px;
  }
  .time-select{
    height: 116px;
    line-height: 116px;
    padding-left: 32px;
    font-size: 38px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #333;
    span{
      display: inline-block;
      margin-right: 16px;
    }
  }
  .img-list{
    overflow: hidden;
    padding-left: 32px;
    .img-item{
      position: relative;
      margin: 0 32px  32px 0;
      float: left;
      width: calc(50% - 32px);
      box-sizing: border-box;
      img{
        width: 100%;
        height: 328px;
        border-radius: 8px;
      }
      p{
        position: absolute;
        bottom: 16px;
        left: 16px;
        z-index: 9;
        font-size: 26px;
        color: #FFF;
        line-height: 36px;
      }
    }
  }
  .footer-btn{
    width: 100%;
    text-align: center;
    height: 112px;
    line-height: 112px;
    background: #3975C6;
    box-shadow: 0px 1px 0px 0px #EEEEEE;
    position: fixed;
    bottom: 0;
    left: 0;
    font-size: 32px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFF;
    z-index: 999;
  }
}
</style>