优化店铺详情页和店铺编辑也定位功能和图片批量上传

src/components/uploadImgVStore.vue

@@ -54,8 +54,7 @@ export default {
       default: 1,
     },
     imgArr: {
-      type: String,
-      default: '',
+      type: [String, Array],
     },
     count: {
       type: Number,
@@ -77,88 +76,99 @@ export default {
         this.$toast('请输入名称！');
         return;
       }
-      // this.wx.ready(() => {
-      //   this.wx.chooseImage({
-      //     count: this.count,
-      //     sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
-      //     sourceType: ['camera'], // 可以指定来源是相册还是相机，默认二者都有
-      //     defaultCameraMode: 'normal', //表示进入拍照界面的默认模式，目前有normal与batch两种选择，normal表示普通单拍模式，batch表示连拍模式，不传该参数则为normal模式。从3.0.26版本开始支持front和batch_front两种值，其中front表示默认为前置摄像头单拍模式，batch_front表示默认为前置摄像头连拍模式。（注：用户进入拍照界面仍然可自由切换两种模式）
-      //     isSaveToAlbum: 0,
-      //     success: (chooseRes) => {
-      //       let localIds = this.count == 1 ? chooseRes.localIds[0] : chooseRes.localIds;
-      //       console.log('count=' + this.count);
-      //       console.log('chooseRes=' + chooseRes);
-      //       console.log('localIds=' + localIds);
-      //       // if (chooseRes.localIds != undefined) {
-      //       //   localIds = chooseRes.localIds[0];
-      //       // } else {
-      //       //   localIds = chooseRes.localId;
-      //       // }
-      //       this.wx.uploadImage({
-      //         localId: localIds,
-      //         isShowProgressTips: 1,
-      //         success: (uploadRes) => {
-      //           console.log('serverId=' + uploadRes.serverId);
-      //           this.uploadImagev(uploadRes.serverId);
-      //         },
-      //       });
+      this.wx.ready(() => {
+        this.wx.chooseImage({
+          count: this.count,
+          sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
+          sourceType: ['camera'], // 可以指定来源是相册还是相机，默认二者都有
+          defaultCameraMode: 'normal', //表示进入拍照界面的默认模式，目前有normal与batch两种选择，normal表示普通单拍模式，batch表示连拍模式，不传该参数则为normal模式。从3.0.26版本开始支持front和batch_front两种值，其中front表示默认为前置摄像头单拍模式，batch_front表示默认为前置摄像头连拍模式。（注：用户进入拍照界面仍然可自由切换两种模式）
+          isSaveToAlbum: 0,
+          success: (chooseRes) => {
+            this.localIds = chooseRes.localIds;
+            console.log('count=' + this.count);
+            console.log('chooseRes=' + chooseRes);
+            console.log('localIds=' + localIds);
+            // if (chooseRes.localIds != undefined) {
+            //   localIds = chooseRes.localIds[0];
+            // } else {
+            //   localIds = chooseRes.localId;
+            // }
+            this.num = 0;
+            this.serverIdArr = [];
+            this.forUploadImage();
+          },
+        });
+      });
+      // let url = window.location.href;
+      // let that = this;
+      // let wx = this.wx;
+      // let qiyeData;
+      // 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'], // 必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来
+      //       });
+      //       wx.ready(function () {
+      //         wx.chooseImage({
+      //           count: that.count,
+      //           sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
+      //           sourceType: ['camera'], // 可以指定来源是相册还是相机，默认二者都有
+      //           defaultCameraMode: 'normal', //表示进入拍照界面的默认模式，目前有normal与batch两种选择，normal表示普通单拍模式，batch表示连拍模式，不传该参数则为normal模式。从3.0.26版本开始支持front和batch_front两种值，其中front表示默认为前置摄像头单拍模式，batch_front表示默认为前置摄像头连拍模式。（注：用户进入拍照界面仍然可自由切换两种模式）
+      //           isSaveToAlbum: 0,
+      //           success: function (chooseRes) {
+      //             let localIds = that.count == 1 ? chooseRes.localIds[0] : chooseRes.localIds;
+      //             console.log('count=' + that.count);
+      //             console.log('chooseRes=' + JSON.stringify(chooseRes));
+      //             console.log('localIds=' + localIds);
+      //             // if (res.localIds != undefined) {
+      //             //   localIds = res.localIds[0];
+      //             // } else {
+      //             //   localIds = res.localId;
+      //             // }
+      //             wx.uploadImage({
+      //               localId: localIds,
+      //               isShowProgressTips: 1,
+      //               success: function (uploadRes) {
+      //                 console.log('serverId=' + uploadRes.serverId);
+      //                 that.uploadImagev(uploadRes.serverId);
+      //               },
+      //             });
+      //           },
+      //         });
+      //       });
+      //     }
       //   });
-      // });
-      let url = window.location.href;
-      let that = this;
-      let wx = this.wx;
-      let qiyeData;
-      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'], // 必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来
-            });
-            wx.ready(function () {
-              wx.chooseImage({
-                count: that.count,
-                sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
-                sourceType: ['camera'], // 可以指定来源是相册还是相机，默认二者都有
-                defaultCameraMode: 'normal', //表示进入拍照界面的默认模式，目前有normal与batch两种选择，normal表示普通单拍模式，batch表示连拍模式，不传该参数则为normal模式。从3.0.26版本开始支持front和batch_front两种值，其中front表示默认为前置摄像头单拍模式，batch_front表示默认为前置摄像头连拍模式。（注：用户进入拍照界面仍然可自由切换两种模式）
-                isSaveToAlbum: 0,
-                success: function (chooseRes) {
-                  let localIds = that.count == 1 ? chooseRes.localIds[0] : chooseRes.localIds;
-                  console.log('count=' + that.count);
-                  console.log('chooseRes=' + JSON.stringify(chooseRes));
-                  console.log('localIds=' + localIds);
-                  // if (res.localIds != undefined) {
-                  //   localIds = res.localIds[0];
-                  // } else {
-                  //   localIds = res.localId;
-                  // }
-                  wx.uploadImage({
-                    localId: localIds,
-                    isShowProgressTips: 1,
-                    success: function (uploadRes) {
-                      console.log('serverId=' + uploadRes.serverId);
-                      that.uploadImagev(uploadRes.serverId);
-                    },
-                  });
-                },
-              });
-            });
+    },
+    forUploadImage() {
+      this.wx.uploadImage({
+        localId: this.localIds[num],
+        isShowProgressTips: 1,
+        success: (uploadRes) => {
+          this.push(uploadRes.serverId);
+          console.log('serverId=' + uploadRes.serverId);
+          this.num++;
+          if (this.num == this.localIds.length) {
+            this.uploadImagev(this.serverIdArr.join(','));
+          } else {
+            this.forUploadImage();
           }
-        });
+        },
+      });
     },
     uploadImagev(meidaId) {
       var that = this;
@@ -175,6 +185,7 @@ export default {
       });
       uploadImagev(form).then((res) => {
         if (res.code == 200) {
+          console.log(JSON.stringify(res.data));
           that.imgArr = res.data.url;
           loind1.clear();
           that.$toast('上传成功！');