storevisit-ui-mobile/src/components/deleteUploadImgTaskPhoto.vue

<template>
  <div class="deleteUploadImgTaskPhoto">
    <van-row gutter="10">
      <van-col span="6" style="background: #f5f5f5">
        <div class="addImg">
          <uploadVNormalTaskPhoto
            :imgArr="imgs"
            :shouws="true"
            :storeGroupId="storeGroupId"
            :taskList="taskIds.split(',')"
            :collectionItemId="collectionItemId"
            :visitModel="1 + ''"
            :visitsId="visitsId"
            :putInCode="putInCode"
            :photoIdentifyType="photoIdentifyType"
            :pictureSource="pictureSource"
            :continuousShoot="continuousShoot"
            :objectType="objectType"
            @newimgarr="newimgarr"
            ref="uploadVNormal" />
        </div>
      </van-col>
      <van-col span="6" v-for="(urls, index) in imgs" :key="urls.id">
        <div class="imgview">
          <van-icon
            v-if="(photoIdentifyType != 6 || photoIdentifyType != 7) && types != 'edit'"
            name="close"
            size="16"
            v-on:click="deleteImg(index, urls.fileIdSplicing)" />
          <img
            v-if="urls.type == '2'"
            :src="urls.fileUrl"
            width="100px"
            height="100px"
            @click="previewsImg(index)" />
          <img
            v-else
            :src="urls.fileUrl"
            width="100px"
            height="100px"
            @click="previewsImg(index)" />
        </div>
      </van-col>
    </van-row>
    <!--  <div style="padding: 10px 16px 0;">-->
    <!--    <div class="img-box" v-for="(urls, index) in imgs" :key="index">-->
    <!--      <van-icon name="clear" v-on:click="deleteImg(index,urls.id)"/>-->
    <!--      <img v-if="urls.type=='2'" :src="urls.fileUrl" width="100px" height="100px" @click="previewsImg(index)"/>-->
    <!--      <img v-else :src="urls.fileUrl" width="100px" height="100px" @click="previewsImg(index)"/>-->
    <!--    </div>-->
    <!--  </div>-->
  </div>
</template>

<script>
import { ImagePreview } from 'vant';
import { removePhotoBatch } from '@/api/index';
import uploadVNormalTaskPhoto from '@/components/uploadVNormalTaskPhoto';
export default {
  name: 'deleteUploadImgTaskPhoto',
  components: { uploadVNormalTaskPhoto },
  props: {
    imgs: {
      type: Array,
      default() {
        return [];
      },
    },
    photoIdentifyType: {
      // 图匠识别目的(1:店招内容识别,2:门店代码识别,3:调色机识别,4:更换店招,6:sku陈列照)
      type: String,
      default: '',
    },
    types: {
      // edit 编辑
      type: String,
    },
    storeGroupId: {
      type: String,
    },
    taskIds: {
      type: [Array, String],
      default() {
        return [];
      },
    },
    collectionItemId: {
      type: [String, Number],
    },
    visitsId: {
      type: String,
      default: '',
    },
    putInCode: {
      type: String,
      default: '',
    },
    pictureSource: {
      // 是否允许从相册选择图片 1:允许；0:不允许
      type: String,
      default: '0',
    },
    continuousShoot: {
      // 是否允许连拍/相册多选 1:允许；0:不允许
      type: String,
      default: '0',
    },
    objectType: {
      type: String,
      default: '',
    },
  },
  watch: {
    imgs: {
      handler(val) {},
      deep: true,
      immediate: true,
    },
  },
  data() {
    return {
      url: process.env.VUE_APP_Target1 + process.env.VUE_APP_BASE_API,
    };
  },
  methods: {
    deleteImg(index, fileIdList) {
      removePhotoBatch({ fileIdList: fileIdList.split(',') }).then((res) => {
        if (res.code == 200) {
          this.$toast('删除成功！');
          this.$emit('upDataDetail');
        } else {
          this.$toast('删除失败！');
        }
      });
    },
    previewsImg(index) {
      var arrimg = [];
      for (var imgi = 0; imgi < this.imgs.length; imgi++) {
        arrimg.push(this.imgs[imgi].fileUrl);
      }
      ImagePreview({
        images: arrimg,
        startPosition: index,
        onClose() {
          // do something
        },
      });
    },
    newimgarr() {
      this.$emit('upDataDetail');
    },
  },
};
</script>

<style lang="scss" scoped>
.deleteUploadImgTaskPhoto {
}
.addImg {
  width: 100%;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.imgview {
  width: 100%;
  height: 72px;
  position: relative;
  display: inline-block;
  i {
    position: absolute;
    right: -2px;
    top: -3px;
    color: white;
    background: red;
    overflow: hidden;
    border-radius: 50%;
  }
  img {
    width: 100%;
    height: 100%;
  }
}
</style>