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

<template>
  <div>
    <van-col span="6" v-for="(urls, index) in imgs" :key="index">
      <div class="imgview2">
        <van-icon name="close" size="16" v-on:click="deleteImg(index, urls.id)" v-if="isEdit" />
        <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>
  </div>
  <!--  <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>-->
</template>

<script>
import { ImagePreview } from 'vant';
import { removeSummaryPhoto, removePhoto } from '@/api/index';

export default {
  name: 'deleteUploadImg',
  props: {
    imgs: {
      type: Array,
      default() {
        return [];
      },
    },
    // 是否允许补填
    isEdit: {
      type: Boolean,
      default: true,
    },
    // 是否请求接口删除
    isDelete: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      url: process.env.VUE_APP_Target1 + process.env.VUE_APP_BASE_API,
    };
  },
  methods: {
    deleteImg(index, collectionItemId) {
      var fileName = {
        fileId: collectionItemId,
      };
      if (this.isDelete) {
        removeSummaryPhoto(fileName).then((res) => {
          if (res.code == 200) {
            this.$toast('删除成功！');
            this.imgs.splice(index, 1);
          } else {
            this.$toast('删除失败！');
          }
        });
      } else {
        this.imgs.splice(index, 1);
      }
    },
    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
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.imgview2 {
  width: 100%;
  height: 80px;
  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>