training-wx/src/views/StrongPhoto.vue

<template>
  <div class="Photo-box">
    <banner-swipe :list="photoBannerImages" />
    <div style="display: flex; aline-itme:center;margin-top: 30px;position:relative ">
      <!-- <div :class="`${classStyle?'Zhedie-box Donghua':'Zhedie-box'}`"> -->
      <div :class="{'Zhedie-box': true, 'expand': classStyle}">
        <!-- :class="`${clickStyle?'clickStyle':''}`" -->

        <div
          v-for="(item,i) in buttList"
          :key="i"
          @click="SeePhotos(i,item.packId)"
          :class="activeNum === i ? 'clickStyle':''"
        >{{item.name}}</div>
      </div>
      <van-icon
        v-show="iconShow"
        style="right:4vw; top: 0.6vh; position:absolute"
        :name="`${classStyle?'arrow-up ':'arrow-down'}`"
        @click="animations"
      />
    </div>

    <div class="PhotoList-box">
      <div class="PhotoList-box-images" v-for="(item, index) in newArrImageList" :key="index">
        <div class="PhotoList-box-text">
          <div></div>
          <span>{{item.createDate}}</span>
        </div>
        <van-image
          v-for="(image, index) in item.res"
          :key="index"
          width="31vw"
          :src="image.url"
          style="padding:0 3px 0 2px"
          @click="showBig(image.url)"
        />
        <van-image-preview v-model="imageShow" :images="bigImg" />
      </div>
    </div>
  </div>
</template>

<script>
import { getPhotoSotr, getPhotos } from '@/util/api'
import { parseTime } from '@/util/formattingData'

import { getBanner } from '@/util/api'

export default {
  components: {
    BannerSwipe: () => import('./components/BannerSwipe.vue'),
  },
  data() {
    return {
      classStyle: false,
      clickStyle: false,
      iconShow: true,
      imageShow: false,
      bigImg: [],
      activeNum: 0, //下标
      buttList: [],
      photoBannerImages: [],

      imageList: [],
      newArrImageList: []
    }
  },
  watch: {
    buttList: {
      handler(val) {
        if (val.length !== 0) {
          this.SeePhotos(0, val[0].packId)
        }
      },
      immediate: true
    }
  },
  mounted() {
    this.onBanner()
    this.onLoadSort()
    this.dataResort()

    // if (this.buttList.length >= 2) {
    //   this.iconShow = true
    // } else {
    //   this.iconShow = false
    // }
  },
  methods: {
    showBig(val) {
      this.bigImg = [val]
      this.imageShow = true
    },
    parseTime,
    //日期按天分类
    dataResort(arr) {
      var newArr = []
      this.imageList.forEach(function (oldData, i) {
        var index = -1
        var createTime = parseTime(oldData.createDate, '{y}-{m}-{d}')
        var newTime = parseTime(createTime, '{y}-{m}-{d}')

        var alreadyExists = newArr.some(function (newData, j) {
          var noData = parseTime(newData.createDate, '{y}-{m}-{d}')
          if (newTime === noData) {
            index = j
            return true
          }
        })
        if (!alreadyExists) {
          var res = []
          res.push(oldData)
          newArr.push({
            createDate: createTime,
            res: res
          })
        } else {
          newArr[index].res.push(oldData)
        }
      })
      this.newArrImageList = newArr
    },
    onLoadSort() {
      getPhotoSotr().then((e) => {
        this.buttList = e.records
      })
    },
    animations() {
      this.classStyle = !this.classStyle
      if (this.classStyle === false) {
        var item = this.buttList[this.activeNum]
        this.buttList.splice(this.activeNum, 1)
        this.buttList.unshift(item)
      }
    },
    SeePhotos(i, id) {
      this.activeNum = i
      getPhotos(id).then((e) => {
        this.imageList = e.records
        this.dataResort()
      })
      // this.clickStyle = !this.clickStyle
    },
    onBanner() {
      getBanner('Wonderful').then((e) => {
        this.photoBannerImages = (e.records || []).map(x => x.thumb)
        // console.log(e)
      })
    }
  }
}
</script>

<style lang="less" scoped>
.Photo-box {
  width: 100vw;
  height: 100%;
  background-color: #fff;
  padding-top: 10px;

  .Zhedie-box {
    padding: 0 4vw;
    overflow: hidden;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    height: 7vw;
    transition: height 0.2s ease;
    &.expand {
      height: 50vh;
    }

    > div {
      padding: 1.5vw 3vw;
      color: rgb(128, 128, 128);
      margin-right: 1.5vw;
      margin-bottom: 1vw;
      text-align: center;
      font-size: 10px;
    }
    .clickStyle {
      color: #12a89f;
      font-weight: 700;
      background-color: #f3f3f3;
      border-radius: 30px;
    }
  }
  .Donghua {
    animation: Donghua 0.2s 1 forwards;
    overflow: scroll;
  }
  .PhotoList-box {
    width: 100%;
    height: auto;
    background-color: #fff;

    .PhotoList-box-images {
      width: 97%;
      margin: 0 auto;
      padding-bottom: 10vh;
      .PhotoList-box-text {
        display: flex;
        align-items: center;
        margin: 1.2em 0 0.8em 0;
        > div {
          width: 6px;
          height: 6px;
          border-radius: 50%;
          background-color: #13c0b4;
          margin: 0 13px 0 9px;
        }
        > span {
          font-size: 12px;
          letter-spacing: 1px;
          color: rgb(128, 128, 128);
        }
      }
    }
  }
}
</style>