bigDataApp/pages/shuHai1/components/downImage.vue

<template>
  <view class="down-image">
    <view class="down-image__content" v-if="images.length">
      <view class="down-image__grid">
        <view class="down-image__item" v-for="(item, index) in images" :key="item.id || index" @click="handleClick(index)">
          <view class="down-image__item-img-container">
            <image
              class="down-image__item-img"
              :src="item.img"
              mode="aspectFill"
              lazy-load
            />
          </view>
          <view class="down-image__item-title">
            {{ formatDate(item.uptime) }}
          </view>
        </view>
      </view>
    </view>
    <view v-else>
      <u-empty text="暂无图片"></u-empty>
    </view>
  </view>
</template>

<script>
export default {
  props:{
    images:{
      type: Array,
      default: () => []
    },
    deviceInfo:{
      type: Object,
      default: () => ({})
    },
  },
  methods: {
    // 点击跳转查看图片页，与监测图像(前后左右)一致
    handleClick(index) {
      const item = this.images[index] || {};
      // 只带当前点击的这张图片，URL放不下长链接，走storage
      const imgs = [{
        addr: item.img,
        mark: this.parseMark(item.mark),
        addtime: item.uptime,
      }];
      uni.setStorageSync('shuhai_group_imgs', JSON.stringify(imgs));
      uni.navigateTo({
        url: '/pages/shuHai1/devicePhoto?addtime=' + (item.uptime || 0) + '&id=' + (this.deviceInfo.id || '') + '&group_id=' + (item.id || '') + '&photo_type=' + encodeURIComponent('下')
      })
    },
    // mark可能是JSON字符串
    parseMark(mark) {
      if (Array.isArray(mark)) {
        return mark;
      }
      try {
        const arr = JSON.parse(mark || '[]');
        return Array.isArray(arr) ? arr : [];
      } catch (error) {
        return [];
      }
    },
    // 格式化时间
    formatDate(dateString) {
      if(!dateString){
        return '';
      }
      const date = new Date(dateString*1000);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hour = String(date.getHours()).padStart(2, '0');
      const minute = String(date.getMinutes()).padStart(2, '0');
      const second = String(date.getSeconds()).padStart(2, '0');
      return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
    },
  },
};
</script>

<style lang="scss" scoped>
.down-image {
  width: 100%;
  box-sizing: border-box;

  .down-image__content{
    margin-top: 24rpx;
    .down-image__grid{
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20rpx;
    }
  }
  &__item {
    border-radius: 16rpx;
    padding: 20rpx;
    position: relative;
    width: 100%;
    box-sizing: border-box;
    display: inline-block;
    overflow: hidden;
    background: #ffffff;
    &-img-container {
      width: 100%;
      padding-bottom: 60%;
      position: relative;
      border-radius: 16rpx;
      overflow: hidden;
      background-color: #f5f5f5;
    }
    &-img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    &-title {
      font-size: 28rpx;
      color: #333333;
      font-family: "Source Han Sans CN VF";
      font-weight: 500;
      margin-top: 12rpx;
    }
  }
}
</style>