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

<template>
  <div class="deleteUploadImgTaskPhoto">
    <van-row gutter="10">
      <van-col span="6" style="" v-if="insert == 'true' && formData.processStatus != 1">
        <div class="addImg">
          <uploadVNormalTaskPhoto
            :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 imgArr" :key="index">
        <div class="imgview">
          <van-icon
            v-if="insert == 'true' && formData.processStatus != 1"
            name="close"
            size="16"
            v-on:click="deleteImg(index, urls)" />
          <img
            :src="urls.fileUrl || urls.mediaFileUrl"
            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>
</template>

<script>
import { ImagePreview } from 'vant';
import { removePhotoBatch } from '@/api/index';
import uploadVNormalTaskPhoto from '@/components/uploadVNormalTaskPhoto';
import { mapState } from 'vuex';
import { getTicketFun } from '@/utils/TXApiFun';
export default {
  name: 'deleteUploadImgTaskPhoto',
  components: { uploadVNormalTaskPhoto },
  computed: {
    ...mapState({
      userInfo: (state) => state.user.userInfo,
    }),
  },
  props: {
    formData: {
      type: Object,
      default() {
        return {};
      },
    },
    photoIdentifyType: {
      // 图匠识别目的(1:店招内容识别,2:门店代码识别,3:调色机识别,4:更换店招,6:sku陈列照)
      type: String,
      default: '',
    },
    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: '',
    },
    insert: {
      type: String,
      default: 'false',
    },
    fileInfoList: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  watch: {
    formData: {
      handler(val) {
        // <!-- 0=企业微信，1=H5相机 -->
        if (this.userInfo.photoMethod == '1') {
          this.imgArr = this.fileInfoList || [];
        } else {
          this.imgArr = [];
          if (this.formData.mediaInfos) {
            getTicketFun(['downloadImage']).then(() => {
              this.toastLoading(0, '加载中，请稍候...', true);
              let mediaInfosCopy = JSON.parse(JSON.stringify(this.formData.mediaInfos));
              this.downloadImage(mediaInfosCopy);
            });
          }
        }
      },
      deep: true,
      immediate: true,
    },
  },
  data() {
    return {
      url: process.env.VUE_APP_Target1 + process.env.VUE_APP_BASE_API,
      imgArr: [],
      mediaIds: [],
      locationRemark: '',
      isUploadImg: true,
    };
  },
  methods: {
    downloadImage(mediaInfos) {
      if (!mediaInfos.length) {
        this.toastLoading().clear();
        return;
      } else {
        let mediaitem = mediaInfos.pop();
        if (mediaitem.fileUrl) {
          this.imgArr.push(mediaitem);
          this.downloadImage(mediaInfos);
        } else {
          wx.downloadImage({
            serverId: mediaitem.mediaId,
            isShowProgressTips: 0, // 默认为1，显示进度提示
            success: (res) => {
              wx.getLocalImgData({
                localId: res.localId,
                success: (res2) => {
                  this.imgArr.push({
                    mediaId: mediaitem.mediaId,
                    mediaFileUrl: res2.localData,
                  });
                  this.downloadImage(mediaInfos);
                },
                fail: (err) => {
                  console.error('获取本地图片数据失败:', err);
                  this.$toast('获取图片数据失败');
                  this.toastLoading().clear();
                  this.downloadImage(mediaInfos);
                },
              });
            },
            fail: (err) => {
              console.error('下载图片失败:', err);
              this.$toast('下载图片失败，请重试');
              // 可以选择继续下载其他图片或停止
              this.downloadImage(mediaInfos);
            },
          });
        }
      }
    },
    deleteImg(index, urls) {
      // <!-- 0=企业微信，1=H5相机 -->
      if (this.userInfo.photoMethod == '1') {
        removePhotoBatch({ fileIdList: urls.fileIdSplicing.split(',') }).then((res) => {
          if (res.code == 200) {
            this.$toast('删除成功！');
            this.$emit('upDataDetail');
          } else {
            this.$toast('删除失败！');
          }
        });
      } else {
        this.imgArr.splice(index, 1);
      }
    },
    previewsImg(index) {
      let urls = this.imgArr.map((item) => item.fileUrl || item.mediaFileUrl);
      ImagePreview({
        images: urls,
        startPosition: index,
      });
    },
    newimgarr(data) {
      const { localIds, locationRemark, source } = data;
      this.locationRemark = locationRemark;
      console.log(source);
      // 0=企业微信，1=H5相机
      if (this.userInfo.photoMethod == '0') {
        this.isUploadImg = false;
        const startIndex = this.imgArr.length;
        this.imgArr = this.imgArr.concat(
          localIds.map((item) => {
            return {
              mediaId: '',
              mediaFileUrl: item,
            };
          }),
        );
        this.$nextTick(() => {
          this.syncUpload(localIds, startIndex);
        });
      } else {
        this.$emit('upDataDetail');
      }
      // if (this.isIOS()) {
      //   this.imgArr = this.imgArr.concat([...localIds]);
      //   // 解决ios微信localId无法直接使用的问题，获取base64后再上传
      //   // this.setIosImg(localIds);
      // } else {
      //   this.imgArr = this.imgArr.concat([...localIds]);
      // }
      // this.$emit('upDataDetail');
    },
    syncUpload(localIds, baseIndex = 0, callback) {
      if (!localIds.length) {
        this.isUploadImg = true;
        callback && callback();
        return;
      } else {
        var localId = localIds.pop();
        wx.uploadImage({
          localId: localId,
          isShowProgressTips: 0, // 默认为1，显示进度提示
          success: (res) => {
            const index = baseIndex + localIds.length;
            if (this.imgArr[index]) {
              this.imgArr[index].mediaId = res.serverId;
            }
            this.syncUpload(localIds, baseIndex, callback);
          },
        });
      }
    },
    isIOS() {
      return /iPhone|iPad|iPod/i.test(navigator.userAgent);
    },
    setIosImg(localIds) {
      localIds.forEach((localId) => {
        this.wx.getLocalImgData({
          localId: localId, // 图片的localID
          success: (res) => {
            console.log(res.localData);
            // this.imgArr.push(res.localData);
          },
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.deleteUploadImgTaskPhoto {
  margin-left: 20px;
}
.addImg {
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
}
.imgview {
  width: 100%;
  height: 88px;
  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>