@10yun/cv-mobile-ui 0.3.24 → 0.3.25

package/ui-cv/cv-upload-img/cv-upload-img.vue

@@ -1,12 +1,12 @@
 <template>
   <view class="cv-upload-img-wrap">
-    <block v-if="uploadType=='big'">
-      <view class="cv-upload-imgbig_view" @tap="imgChoose" v-if=" localSrc =='' ">
+    <block v-if="uploadType == 'big'">
+      <view class="cv-upload-imgbig_view" @tap="imgChoose" v-if="localSrc == ''">
         <view class="cv-upload-imgbig-left">
-          <view class="cv-upload-imgbig-left__title">{{label}}</view>
-          <view>{{uploadTip.dimension}}</view>
-          <view>{{uploadTip.format}}</view>
-          <view>{{uploadTip.size}}</view>
+          <view class="cv-upload-imgbig-left__title">{{ label }}</view>
+          <view>{{ uploadTip.dimension }}</view>
+          <view>{{ uploadTip.format }}</view>
+          <view>{{ uploadTip.size }}</view>
         </view>
         <view class="cv-upload-imgbig-right">
           <view class="cv-upload-imgbig-right__upload">
@@ -17,30 +17,54 @@
       </view>
       <view class="cv-upload-imgbig_view cv-upload-img_noborder" v-else>
         <view class="cv-upload-img__bd bigimg">
-          <image class="cv-upload-img-preview" lazy-load="true" mode="aspectFit" :src=" localSrc[0] " @tap="imgShowbig" :data-src="localSrc[0]">
-          </image>
-          <cv-icons class="cv-uoload-img-remove" type="action-quan-cha" size="20" color="#FF0101" @tap="imgRemove(0)" v-if="!disabled">
-          </cv-icons>
+          <image
+            class="cv-upload-img-preview"
+            lazy-load="true"
+            mode="aspectFit"
+            :src="localSrc[0]"
+            @tap="imgShowbig"
+            :data-src="localSrc[0]"
+          ></image>
+          <cv-icons
+            class="cv-uoload-img-remove"
+            type="action-quan-cha"
+            size="20"
+            color="#FF0101"
+            @tap="imgRemove(0)"
+            v-if="!disabled"
+          ></cv-icons>
         </view>
       </view>
     </block>
     <block v-else>
-      <view class="cv-upload-img-hd">{{label}}</view>
+      <view class="cv-upload-img-hd">{{ label }}</view>
       <view class="cv-upload-imgmore_img">
-        <block v-if=" localSrc != ''">
+        <block v-if="localSrc != ''">
           <block v-for="(item, index) in localSrc" :key="index">
             <view class="cv-upload-img__bd" :class="(index + 1) % 3 !== 0 ? 'cv-upload-img_img__body__mar' : ''">
-              <image class="cv-upload-img-preview" lazy-load="true" mode="aspectFit" :src="item" @tap="imgShowbig" :data-src="item"></image>
-              <cv-icons class="cv-uoload-img-remove" type="action-quan-cha" size="20" color="#FF0101" @tap="imgRemove(index)" v-if="!disabled">
-              </cv-icons>
+              <image
+                class="cv-upload-img-preview"
+                lazy-load="true"
+                mode="aspectFit"
+                :src="item"
+                @tap="imgShowbig"
+                :data-src="item"
+              ></image>
+              <cv-icons
+                class="cv-uoload-img-remove"
+                type="action-quan-cha"
+                size="20"
+                color="#FF0101"
+                @tap="imgRemove(index)"
+                v-if="!disabled"
+              ></cv-icons>
             </view>
           </block>
         </block>
-        <view class="cv-upload-img__bd" v-if=" localSrc.length < allowUploadNum ">
+        <view class="cv-upload-img__bd" v-if="localSrc.length < allowUploadNum">
           <view class="cv-upload-img-choose" @tap="imgChoose">
-            <cv-icons :size="settAdd.size" :color="settAdd.color" :type="settAdd.icon">
-            </cv-icons>
-            <view>可{{settAdd.text}}{{surplusUploadNum}}张</view>
+            <cv-icons :size="settAdd.size" :color="settAdd.color" :type="settAdd.icon"></cv-icons>
+            <view>可{{ settAdd.text }}{{ surplusUploadNum }}张</view>
           </view>
         </view>
       </view>
@@ -49,18 +73,17 @@
 </template>
 <script>
 export default {
-  name: "cvUploadImg",
-  components: {
-  },
+  name: 'cvUploadImg',
+  components: {},
   props: {
     label: {
       type: [String],
-      default: ""
+      default: ''
     },
     // 风格：one单图，more多图，big大图
     uploadType: {
       type: String,
-      default: "one"
+      default: 'one'
     },
     uploadTip: {
       type: Object,
@@ -69,25 +92,25 @@ export default {
           dimension: '长*宽：750*375像素;',
           format: '格式：jpg/png;',
           size: '大小：小于2MB'
-        }
+        };
       }
     },
     // 提示
     tip: {
       type: String,
-      default: ""
+      default: ''
     },
     //默认输入框
     value: {
       type: [Array, Object, String],
       default() {
-        return []
+        return [];
       }
     },
     src: {
       type: [Array, Object, String],
       default(newVal) {
-        return []
+        return [];
       }
     },
     maxlength: {
@@ -105,7 +128,7 @@ export default {
     uploadParam: {
       type: Object,
       default: () => {
-        return {}
+        return {};
       }
     },
     upApiFunc: {
@@ -117,7 +140,7 @@ export default {
       default() {
         return false;
       }
-    },
+    }
   },
   data() {
     return {
@@ -130,13 +153,13 @@ export default {
         //图标类型，默认相机
         icon: this.addType == 'camera' ? 'media-camera-filled' : 'media-image-filled',
         // 图标
-        size: 26,
+        size: 26
       },
       // 每次选择图片数量
       chooseNum: 1,
       // 剩余允许上传数量
       allowUploadNum: 1,
-      surplusUploadNum: 1,
+      surplusUploadNum: 1
     };
   },
   watch: {
@@ -146,7 +169,7 @@ export default {
     src(newVal) {
       this.localSrc = this._dealSrc(newVal);
       this._dealNum();
-    },
+    }
   },
   created: function () {
     this.localVal = this.value;
@@ -163,20 +186,20 @@ export default {
       });
     },
     _dealNum() {
-      this.surplusUploadNum = (this.allowUploadNum - (this.localSrc.length || 0));
+      this.surplusUploadNum = this.allowUploadNum - (this.localSrc.length || 0);
     },
     _dealSrc(oldSrc) {
       let newSrc = [];
       if (this.uploadType == 'big') {
-        if ((typeof oldSrc) == 'string') {
+        if (typeof oldSrc == 'string') {
           newSrc.push(oldSrc);
         }
       } else if (this.uploadType == 'one') {
-        if ((typeof oldSrc) == 'string') {
+        if (typeof oldSrc == 'string') {
           newSrc.push(oldSrc);
         }
       } else {
-        if ((typeof oldSrc) == 'object') {
+        if (typeof oldSrc == 'object') {
           return oldSrc;
         }
       }
@@ -192,7 +215,6 @@ export default {
         sourceType: ['album', 'camera'], // 可选择性开放访问相册、相机
         sourceType: [source], // 从相册选择 album 从相册选图，camera 使用相机
         success: (res) => {
-
           // console.warn(res.tempFilePaths);
           // console.warn(res.tempFiles[0].path);
 
@@ -201,11 +223,11 @@ export default {
           let uploadAlreadyNum = 0; //当前已上传页数
 
           if (uploadChooseNum >= 9) {
-            uni.showToast({ 'icon': 'none', 'title': '超出9张~' });
+            uni.showToast({ icon: 'none', title: '超出9张~' });
             return false;
           }
           if (uploadChooseNum > this.surplusUploadNum) {
-            uni.showToast({ 'icon': 'none', 'title': '已超过剩余数量~' });
+            uni.showToast({ icon: 'none', title: '已超过剩余数量~' });
             return false;
           }
 
@@ -244,8 +266,7 @@ export default {
           //   this.surplusUploadNum--;
           // }
         },
-        fail: (res) => {
-        },
+        fail: (res) => {}
       });
     },
     /** 图片验证 */
@@ -256,12 +277,16 @@ export default {
     },
     /** 图片上传 */
     _uploadImage(tempFilePaths, type) {
-      let filename = this.filename || 'uni-upload';// 'file_name'
-      let uploadParam = Object.assign({}, {
-        postType: 'create',
-        file_name: filename,
-        savesign: 'uni-upload',
-      }, this.uploadParam);
+      let filename = this.filename || 'uni-upload'; // 'file_name'
+      let uploadParam = Object.assign(
+        {},
+        {
+          postType: 'create',
+          file_name: filename,
+          savesign: 'uni-upload'
+        },
+        this.uploadParam
+      );
 
       //将本地资源上传到开发者服务器，客户端发起一个 POST 请求，其中 content-type 为 multipart/form-data。
       this.upApiFunc({
@@ -271,24 +296,26 @@ export default {
         name: filename,
         //HTTP 请求中其他额外的 form data
         formData: uploadParam
-      }).then((uploadRes) => {
-        // let resData = JSON.parse(uploadRes.data);
-        let resData = uploadRes.data || {};
-        if (this.uploadType == 'more') {
-          //图集
-          if (this.localSrc.length >= 9) return;
-          this.localSrc.push(resData.img_cdn);
-          this.localVal.push(resData.img_time);
-        } else {
-          //单图
-          this.localSrc.push(resData.img_cdn);
-          this.localVal = resData.img_time;
-        }
-        this.$emit('input', this.localVal);
-        // this.$forceUpdate();
-      }).catch((err) => {
-        uni.hideLoading();
-      });
+      })
+        .then((uploadRes) => {
+          // let resData = JSON.parse(uploadRes.data);
+          let resData = uploadRes.data || {};
+          if (this.uploadType == 'more') {
+            //图集
+            if (this.localSrc.length >= 9) return;
+            this.localSrc.push(resData.img_cdn);
+            this.localVal.push(resData.img_time);
+          } else {
+            //单图
+            this.localSrc.push(resData.img_cdn);
+            this.localVal = resData.img_time;
+          }
+          this.$emit('input', this.localVal);
+          // this.$forceUpdate();
+        })
+        .catch((err) => {
+          uni.hideLoading();
+        });
     },
     // 删除引客卷图片
     imgRemove(imgIndex) {
@@ -317,15 +344,15 @@ export default {
       if (this.uploadType != 'more') {
         this.allowUploadNum = 1;
       }
-      if ((this.localSrc.length + 1) > this.allowUploadNum) {
+      if (this.localSrc.length + 1 > this.allowUploadNum) {
         this._currShowToast('超出图片上传个数...');
         return false;
       }
       return new Promise((resolve, reject) => {
         this._chooseImage();
         // this.$emit('input', this.localVal);
-      })
-    },
+      });
+    }
   }
 };
 </script>
@@ -438,4 +465,4 @@ export default {
   justify-content: center;
   flex-direction: column;
 }
-</style>
+</style>