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

<template>
  <div class="questionNamep">
    <!-- 0=企业微信，1=H5相机 -->
    <!-- 企业微信拍照 -->
    <div class="cameraDiv" @click="uploadImg" v-if="userInfo.photoMethod == '0'">
      <van-icon class="photo photos" name="plus" size="22px" color="#969696" />
      <span style="font-size: 10px">添加图片</span>
    </div>
    <!-- 原生自带拍照 -->
    <H5Camera
      @getImg="getImg"
      ref="H5Camera"
      :objectType="objectType"
      :capture="pictureSource == '1' ? '' : 'camera'"
      v-else />
    <div id="allmap"></div>
    <imageAIVerifyErr
      v-if="imageAIVerifyFlag"
      :imageAIVerifyFlag="imageAIVerifyFlag"
      :imageAIVerifyData="imageAIVerifyData"
      @confirmUpload="confirmUpload"
      @uploadImgFun="uploadImgFun"
      :source="'visit'"
      @normalFlow="normalFlow"
      @close="close"></imageAIVerifyErr>
    <!-- 图像识别白名单弹框提示 -->
    <imageWhiteStore
      v-if="imageWhiteStoreFlag"
      :imageWhiteStoreFlag="imageWhiteStoreFlag"
      :imageWhiteStoreData="imageWhiteStoreData"
      @normalFlow="normalFlow"
      @close="close">
    </imageWhiteStore>
  </div>
</template>

<script>
import { addPhotoBatch, addVisitsPosition, addPhotoToDB } from '@/api/index';
import imageAIVerifyErr from './imageAIVerifyErr';
import imageWhiteStore from './imageWhiteStore';
import H5Camera from '@/components/H5Camera';
import axios from 'axios';
import uploadAliOss from '@/utils/uploadAliOss';
import { addH5Photo } from '@/api/H5Camera';
import { mapState } from 'vuex';

export default {
  name: 'uploadImg',
  components: { imageAIVerifyErr, H5Camera, imageWhiteStore },
  props: {
    storeGroupId: {
      type: String,
      default: '',
    },
    visitsId: {
      type: String,
      default: '',
    },
    taskList: {
      type: Array,
      default() {
        return [];
      },
    },
    objectType: {
      type: String,
      default: '',
    },
    putInCode: {
      type: String,
      default: '',
    },
    photoIdentifyType: {
      // 图匠识别目的(1:店招内容识别(不能连拍和多选),3:调色机识别(不能连拍和多选),6:陈列SKU图片识别(不需要图匠实时识别))
      type: String,
      default: '',
    },
    pictureSource: {
      // 是否允许从相册选择图片 1:允许；0:不允许
      type: String,
      default: '0',
    },
    continuousShoot: {
      // 是否允许连拍/相册多选 1:允许；0:不允许
      type: String,
      default: '0',
    },
    collectionItemId: {
      type: [String, Number],
      default: '',
    },
    formData: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.user.userInfo,
    }),
  },
  data() {
    return {
      shows: false,
      url: '',
      imageAIVerifyFlag: false,
      imageAIVerifyData: null, //图匠校验返回的数据
      mediaId: '', //当前上传图片id
      addressesRemark: '', //当前位置信息
      controller: null, //取消请求状态
      fileUrl: '',
      imageWhiteStoreData: null,
      imageWhiteStoreFlag: false,
      localIdsArr: [],
    };
  },
  methods: {
    // 原生H5拍照图片
    // url: base64
    getImg(base64) {
      // 图片名称：用户名-时间戳
      let username = localStorage.getItem('loginName');
      let imgName = username + '-' + new Date().getTime();
      uploadAliOss(base64, imgName)
        .then((res) => {
          if (res.url && res.url.indexOf('http') != -1) {
            this.fileUrl = res.url;
            this.uploadImagev();
          }
        })
        .catch((err) => {
          console.log('err:' + err);
        });
    },
    uploadImgFun() {
      // 0=企业微信，1=H5相机
      if (this.userInfo.photoMethod == '0') {
        this.uploadImg();
      } else {
        this.$refs.H5Camera.camera();
      }
    },
    uploadImg() {
      var map = new TMap.Map('allmap', {
        zoom: 14,
        center: new TMap.LatLng(39.986785, 116.301012),
      });

      var geocoder = new TMap.service.Geocoder(); // 新建一个正逆地址解析类
      var markers = new TMap.MultiMarker({
        map: map,
        geometries: [],
      });
      markers.setGeometries([]);

      let url = window.location.href;
      let that = this;
      let wx = this.wx;
      let qiyeData;
      this.addressesRemark = '';
      const instance = axios.create();
      instance.defaults.headers.common['userId'] = localStorage.getItem('loginName');
      instance
        .get(process.env.VUE_APP_BASE_API + 'mobile/wx/ticket', {
          params: {
            url: url,
          },
        })
        .then((response) => {
          if (response.status == 200) {
            qiyeData = response.data.data;
            wx.config({
              beta: true, // 必须这么写，否则wx.invoke调用形式的jsapi会有问题
              debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
              appId: qiyeData.appId, // 必填，企业微信的corpID
              timestamp: qiyeData.timestamp, // 必填，生成签名的时间戳
              nonceStr: qiyeData.nonceStr, // 必填，生成签名的随机串
              signature: qiyeData.signature, // 必填，签名，见 附录-JS-SDK使用权限签名算法
              jsApiList: ['ready', 'chooseImage', 'uploadImage', 'getLocation'], // 必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来
            });
            wx.ready(function () {
              wx.getLocation({
                type: 'gcj02',
                success: function (res) {
                  var location = new TMap.LatLng(res.latitude, res.longitude);
                  map.setCenter(location);
                  markers.updateGeometries([
                    {
                      id: 'main', // 点标注数据数组
                      position: location,
                    },
                  ]);
                  geocoder.getAddress({ location: location }).then(
                    function (result) {
                      var addresses = result.result.formatted_addresses;
                      that.addressesRemark = addresses.recommend;
                    },
                    function (err) {
                      that.addressesRemark = '';
                    },
                  );
                },
                fail: function () {
                  that.$dialog.alert({
                    message: 'GPS未开启',
                  });
                },
              });
              console.log(that.pictureSource);
              let sourceType = that.pictureSource == '1' ? ['album', 'camera'] : ['camera'];
              let count = 1;
              // 1:店招内容识别(不能连拍和多选),3:调色机识别(不能连拍和多选) 需要实时识别的不支持连拍和多选
              if (that.photoIdentifyType != 1 && that.photoIdentifyType != 3) {
                count = that.continuousShoot == '1' ? 5 : 1; //是否允许连拍/相册多选 最多5张
              }
              wx.chooseImage({
                count: count,
                sizeType: ['original'], // 可以指定是原图还是压缩图，默认二者都有
                sourceType: sourceType, // 可以指定来源是相册还是相机，默认二者都有
                defaultCameraMode: count == 1 ? 'normal' : 'batch', //表示进入拍照界面的默认模式，目前有normal与batch两种选择，normal表示普通单拍模式，batch表示连拍模式，不传该参数则为normal模式。从3.0.26版本开始支持front和batch_front两种值，其中front表示默认为前置摄像头单拍模式，batch_front表示默认为前置摄像头连拍模式。（注：用户进入拍照界面仍然可自由切换两种模式）
                // defaultCameraMode: 'normal', //表示进入拍照界面的默认模式，目前有normal与batch两种选择，normal表示普通单拍模式，batch表示连拍模式，不传该参数则为normal模式。从3.0.26版本开始支持front和batch_front两种值，其中front表示默认为前置摄像头单拍模式，batch_front表示默认为前置摄像头连拍模式。（注：用户进入拍照界面仍然可自由切换两种模式）
                isSaveToAlbum: 0, //整型值，0表示拍照时不保存到系统相册，1表示自动保存，默认值是1
                success: function (res) {
                  let localIds = res.localIds;
                  that.localIdsArr = [];
                  that.$emit('newimgarr', {
                    localIds: localIds,
                    locationRemark: that.addressesRemark,
                    collectionItemId: that.collectionItemId,
                    source: 'weixin',
                  });
                  // that.syncUpload(localIds);
                },
              });
            });
          }
        });
    },
    syncUpload(localIds) {
      if (!localIds.length) {
        this.uploadImagev();
      } else {
        var localId = localIds.pop();
        wx.uploadImage({
          localId: localId,
          isShowProgressTips: 1, // 默认为1，显示进度提示
          success: (res) => {
            this.localIdsArr.push(res.serverId);
            // this.syncUpload(localIds);
          },
        });
      }
    },
    uploadImagev() {
      this.close();
      var that = this;
      var form = {
        mediaIds: [], //	是	List<String>	图片素材id集合
        visitSource: '1', //	是	Long	拜访模式
        storeGroupId: that.storeGroupId, //	是	string	门店任务组，多个用逗号隔开
        visitsId: that.visitsId, //	是	string	拜访id
        taskList: that.taskList, //	是	List	任务id数组
        collectionItemId: that.collectionItemId, //	是	string	采集项id
        objectType: that.objectType, //	是	string	照片类型，取任务上的照片类型，如果没有则取手动选择的照片类型
        locationRemark: that.addressesRemark, //	是	String	当前地址信息
        firstCollectionId: '', //	否	Long	第一级采集项id，取当前采集项的字段就行
        secondCollectionId: '', //	否	Long	第二级采集项id，取当前采集项的字段就行
        putInCode: that.putInCode, //投放编号
        deviceCode: '', //	否	String	当前任务对应的设备编号
        photoIdentifyType: that.photoIdentifyType, //	否	String	图片识别类型：字典-photo_identify_type
        equipmentCode: '', //	否	String	当前任务对应的资产编号
        inStore: '否', //	否	String	机器是否在店：传选项中文内容，是、否
      };
      // 0=企业微信，1=H5相机
      if (this.userInfo.photoMethod == '0') {
        form.mediaIds = this.localIdsArr; //	string	图片素材id
      } else {
        form.fileUrl = this.fileUrl; //	string	图片素材id
      }
      this.controller = null;
      // 需要图匠校验的添加参数和loading
      if (
        this.photoIdentifyType &&
        (this.photoIdentifyType == '1' || this.photoIdentifyType == '3')
      ) {
        form.photoIdentifyType = this.photoIdentifyType;
        this.controller = new AbortController(); //取消请求
      } else {
        this.toastLoading(0, '上传中...', true);
      }
      addPhotoBatch(form, this.controller ? this.controller.signal : null)
        .then((res) => {
          this.requestThen(res);
        })
        .catch((error) => {
          this.requestCatch(error);
        });
    },
    // 公用请求then
    requestThen(res) {
      this.toastLoading().clear();
      if (res.code == -1) {
        // 图匠图片校验接口超时
        this.requestTimeOut(res);
      } else if (res.code == 200) {
        // 图匠校验结果返回
        if (
          this.photoIdentifyType &&
          (this.photoIdentifyType == '1' || this.photoIdentifyType == '3')
        ) {
          this.imageAIVerifyFlag = true;
          this.imageAIVerifyData = res.data[0];
        } else {
          // 正常流程
          // 图像识别白名单用户弹出框提示
          if (res.data[0].whiteStore) {
            this.imageWhiteStoreFlag = true;
            this.imageWhiteStoreData = res.data[0];
          } else {
            this.normalFlow(res);
          }
        }
      } else {
        that.$toast('上传失败！');
      }
    },
    // 公用请求catch
    requestCatch(error) {
      if (error.message === 'canceled') {
        this.$toast('取消上传');
        console.log('请求被取消:', error.message);
      }
    },
    // 正常流程
    normalFlow(res) {
      this.$toast('上传成功！');
      let fileInfoList = [];
      res.data.forEach((val) => {
        fileInfoList.push({
          fileUrl: val.url,
          id: val.fileId,
          type: 2,
        });
      });
      this.$emit('newimgarr', {
        fileInfoList: fileInfoList,
        photoIdentifyType: this.photoIdentifyType,
        source: 'H5',
      });
    },
    // 照片是否入库，1.照片识别三次不通过仍要上传，2.照片识别通过
    // isUpdate:是否更新店招照片，只有门店店招需要更新
    confirmUpload(res) {
      if (
        this.photoIdentifyType &&
        (this.photoIdentifyType != '6' || this.photoIdentifyType != '7')
      ) {
        var form = {
          mediaIds: [], //	是	List<String>	图片素材id集合
          visitSource: '1', //	是	Long	拜访模式
          storeGroupId: this.storeGroupId, //	是	string	门店任务组，多个用逗号隔开
          visitsId: that.visitsId, //	是	string	拜访id
          taskList: this.taskList, //	是	List	任务id数组
          collectionItemId: that.collectionItemId, //	是	string	采集项id
          objectType: that.objectType, //	是	string	照片类型，取任务上的照片类型，如果没有则取手动选择的照片类型
          locationRemark: this.addressesRemark, //	是	String	当前地址信息
          firstCollectionId: '', //	否	Long	第一级采集项id，取当前采集项的字段就行
          secondCollectionId: '', //	否	Long	第二级采集项id，取当前采集项的字段就行
          putInCode: that.putInCode, //投放编号
          deviceCode: '', //	否	String	当前任务对应的设备编号
          photoIdentifyType: that.photoIdentifyType, //	否	String	图片识别类型：字典-photo_identify_type
          equipmentCode: '', //	否	String	当前任务对应的资产编号
          inStore: '否', //	否	String	机器是否在店：传选项中文内容，是、否
        };
        // 0=企业微信，1=H5相机
        if (this.userInfo.photoMethod == '0') {
          form.mediaIds = this.localIdsArr; //	string	图片素材id
        } else {
          form.fileUrl = this.fileUrl; //	string	图片素材id
        }
        if (res.isUpdate) {
          form.isUpdate = 'true';
        }
        addPhotoToDB(form).then((resData) => {
          if (resData.code == 200) {
            console.log(resData);
            res.data.fileId = resData.data[0].fileId;
            res.data = [res.data];
            this.normalFlow(res);
          }
        });
      }
    },
    close() {
      this.imageAIVerifyFlag = false;
      this.imageWhiteStoreFlag = false;
    },
    requestTimeOut(res) {
      this.close();
      this.$dialog
        .confirm({
          title: '系统提示',
          message: res.msg,
          showCancelButton: false,
        })
        .then(() => {
          this.confirmUpload(res);
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.questionNamep {
  font-size: 16px;
  color: #484848;
  box-sizing: border-box;
  position: relative;

  .cameraDiv {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .photo {
      /*margin-top: 9px;*/
      float: right;
    }
    .camera {
      width: 60px;
      height: 100%;
      position: absolute;
      right: 0;
      top: 0;
      opacity: 0;
      z-index: 89;
    }
  }
}
#allmap {
  width: 10px;
  height: 10px;
  left: -1000px;
  position: absolute;
}
</style>