training-wx/src/views/StrongPhoto.vue

<template>
  <!-- <h1>StrongPhoto 精彩集锦</h1> -->
  <div class="Photo-box">
    <div>
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(image, index) in photoBannerImages" :key="index">
          <van-image width="100%" height="100%" :src="image.thumb" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div style="display: flex; aline-itme:center;margin-top: 30px;padding-left: 15px; ">
      <!-- <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="left:0; top: 0.6vh;"
        :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>
        <span v-for="(image, index) in item.res" :key="index">
          <van-image width="31vw" :src="image.url" style="padding:0 3px 0 2px" />
        </span>
      </div>
    </div>
  </div>
</template>

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

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

export default {
  data() {
    return {
      classStyle: false,
      clickStyle: false,
      iconShow: true,
      activeNum: 0, //下标
      buttList: [],
      photoBannerImages: [],

      imageList: [],
      newArrImageList: []
    }
  },
  watch: {},
  mounted() {
    this.onBanner()
    this.onLoadSort()
    this.dataResort()

    // if (this.buttList.length >= 2) {
    //   this.iconShow = true
    // } else {
    //   this.iconShow = false
    // }
  },
  methods: {
    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)
        }
      })
      console.log(
        '🚀 ~ file: StrongPhoto.vue ~ line 105 ~ dataResort ~ newArr',
        newArr
      )

      this.newArrImageList = newArr
    },
    onLoadSort() {
      getPhotoSotr().then((e) => {
        this.buttList = e.records
        console.log(e.records)
      })
    },
    animations() {
      this.classStyle = !this.classStyle
    },
    SeePhotos(i, id) {
      console.log('🚀 ~ file: StrongPhoto.vue ~ line 94 ~ SeePhotos ~ id', 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
        console.log(e)
      })
    }
  }
}
</script>

<style lang="less" scoped>
.Photo-box {
  width: 100vw;
  height: 100%;
  background-color: #fff;
  .van-swipe {
    width: 95%;
    border-radius: 10px;
    margin: 10px auto;
    box-shadow: 0px 8px 38px 0px rgba(0, 0, 0, 0.2);

    height: 33vh;
  }
  .Zhedie-box {
    width: 90%;
    overflow: hidden;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    height: 35px;
    transition: height 0.2s ease;
    &.expand {
      height: 50vh;
    }

    > div {
      padding: 2px 10px;
      color: rgb(128, 128, 128);
      line-height: 28px;
      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>