assess-app/pages/task/module/item-img.vue

<template>
  <view class="item-line" :class="{'line-one':lineType===1,'line-two':lineType===2}">
    <view class="item-img">
      <view class="item-key">{{label}}</view>
      <view class="item-img">
        <view class="img-item" v-for="img in imgList">
          <image :src="img" @click="previewImage(img)" mode="aspectFill"></image>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "item-img",
  components: {},
  props: {
    lineType:{
      type:Number,
      default:0
    },
    label: {
      type: String,
      default: '标题'
    },
    value: {
      default: []
    },
    keyStr: {
      default: true
    },
    typeKeys:{
      default:[]
    }
  },
  data() {
    return {
      imgList:[],
      isShow:true
    }
  },
  watch: {},
  mounted() {
    this.setIsShow()
    this.setImgList()
  },
  methods: {
    setImgList(){
      if(typeof this.value ==='string'){
        this.imgList=[this.value]
      }else {
        this.imgList=this.value
      }
    },
    setIsShow(){
      if(this.keyStr!==true){
        if(this.typeKeys.indexOf(this.keyStr)<0){
          this.isShow=false
        }
      }
    },
    previewImage(img){
     this.$emit('onShowImg',img)
    }
  }
}
</script>

<style scoped lang="scss">
.item-line{
  padding: 16rpx 0;
  .item-img{
    .item-key{
      color: #999999;
      font-size: 30rpx;
      margin-bottom: 16rpx;
    }
    .item-img{
      height: auto;
      display: flex;
      flex-wrap: wrap;
      .img-item{
        display: inline-block;
        margin-right:12rpx;
        image{
          width: calc((100vw - 100rpx)/4);
          height: calc((100vw - 100rpx)/4);
          border-radius: 8rpx;
        }
      }
      .img-item:nth-of-type(4n+0){
        margin-right:0;
      }
      .img-item:nth-of-type(n+5){
        margin-top:12rpx;
      }
    }
  }
}
.line-one{
  padding-top: 0;
}
.line-two{
  padding-bottom: 0;
}
</style>