修改纸品图片上传

pages/add-paper/index.vue

@@ -201,21 +201,35 @@
     <view class="paper-price">
       <view class="paper-price-image-title"><text class="paper-price-title">纸品图片</text></view>
       <view class="paper-price-image">
-        <uni-file-picker
+		  <view class="imgs flex-row-start-start">
+		    <view v-for="(item, index) in imgList" :key="index" class="upload_img">
+		      <uni-icons type="clear" size="16" class="close-icon" @click="deleteVoucher(index)"></uni-icons>
+		      <image style="width: 120rpx; height: 120rpx" :src="item"></image>
+		    </view>
+		    <view class="default-upload" @click="uploadVoucher()">
+		      <image src="/static/imgs/order/camera.png" class="icon"></image>
+		      <text style="font-size: 26rpx; color: #4c4a58">上传图片</text>
+		    </view>
+		  </view>
+        <!-- <uni-file-picker
           v-model="imgList"
+		  ref="files" 
+		  :auto-upload="false"
           file-mediatype="image"
-          mode="grid"
-          file-extname="png,jpg"
-          :limit="5"
           :image-styles="imageStyles"
-          @progress="progress"
-          @success="success"
-          @fail="fail"
-          @select="select"
+        
           @delete="deleteImage"
         >
-          <image class="paper-upload-image" src="../../static/imgs/trade/uploadImage.png" mode=""></image>
-        </uni-file-picker>
+          <image @click="uploadVoucher()" class="paper-upload-image" src="../../static/imgs/trade/uploadImage.png" mode=""></image>
+        </uni-file-picker> -->
+		<!-- mode="grid"
+		file-extname="png,jpg"
+		:limit="5"
+		@progress="progress"
+		@success="success"
+		@fail="fail"
+		@select="select" -->
+<!-- 		          <image @click="uploadVoucher()" class="paper-upload-image" src="../../static/imgs/trade/uploadImage.png" mode=""></image> -->
       </view>
     </view>
     <uGap></uGap>
@@ -304,7 +318,7 @@
 </template>
 
 <script>
-import { back, go2, uploadFile } from '@/utils/hook.js'
+import { back, go2, uploadFile, uploadImage } from '@/utils/hook.js'
 import qnEasyinput from '@/components/qn-easyinput/qn-easyinput.vue'
 import uGap from '@/components/u-gap/u-gap.vue'
 import { getCategoryList, createProduct, getSupplierDetail, updateProduct } from '@/apis/add-paper.js'
@@ -432,17 +446,18 @@ export default {
           // 		this.$set(this.form,'categoryName',this.paperList[x].name)
           // 	}
           // }
-          this.imgList = []
-          for (let i = 0; i < res.imgList.length; i++) {
-            var params = {
-              name: 'text',
-              extname: 'text',
-              url: res.imgList[i],
-              pathUrl: res.imgList[i]
-            }
-            this.imgList.push(params)
-          }
-          console.log('this.form', this.form)
+          // this.imgList = []
+          // for (let i = 0; i < res.imgList.length; i++) {
+          //   var params = {
+          //     name: 'text',
+          //     extname: 'text',
+          //     url: res.imgList[i],
+          //     pathUrl: res.imgList[i]
+          //   }
+          //   this.imgList.push(params)
+          // }
+		  this.imgList = res.imgList
+          console.log('this.imgList', this.imgList)
         }
       })
     },
@@ -482,6 +497,20 @@ export default {
         this.imgList[this.imgList.length - 1].pathUrl = val
       })
     },
+	uploadVoucher() {
+	  uploadImage(['album'], 5)
+	    .then((urls) => {
+	      if (urls) {
+	       this.imgList.push(urls[0])
+	      }
+	    })
+	    .catch((e) => {
+	      uni.showToast({
+	        title: '上传失败',
+	        icon: 'fail'
+	      })
+	    })
+	},
     // 删除图片
     deleteImage(item) {
       console.log('deleteImage', item)
@@ -492,6 +521,9 @@ export default {
       }
       console.log(this.imgList)
     },
+	deleteVoucher(index) {
+		 this.imgList.splice(index, 1)
+	},
     uploadPrice() {
       if (this.skuList.length === 0) {
         uni.showToast({
@@ -520,10 +552,10 @@ export default {
           }
         }
       }
-      var upImage = []
-      for (let i = 0; i < this.imgList.length; i++) {
-        upImage.push(this.imgList[i].pathUrl)
-      }
+      // var upImage = []
+      // for (let i = 0; i < this.imgList.length; i++) {
+      //   upImage.push(this.imgList[i].pathUrl)
+      // }
       for (let j = 0; j < this.skuList.length; j++) {
         if (this.skuList[j].isPromoting === 0) {
           this.skuList[j].isPromoting = true
@@ -535,7 +567,7 @@ export default {
         ...this.form,
         isMainProduct: this.form.isMainProductRep === 0 ? true : false,
         skuList: this.skuList,
-        imgList: upImage,
+        imgList: this.imgList,
         supplierId: this.$store.state.supplierInfo.supplierId
       }
       if (this.eidtFor === 0) {
@@ -775,5 +807,43 @@ export default {
   .paper-backColor {
     background-color: rgba(220, 222, 224, 1);
   }
+  .imgs {
+    // padding: 16rpx 32rpx 32rpx;
+    min-height: 120rpx;
+  }
+  .default-upload {
+    width: 120rpx;
+    height: 120rpx;
+    border-radius: 10rpx;
+    background-color: #dcdee0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    .icon {
+      width: 56rpx;
+      height: 56rpx;
+      margin-bottom: 8rpx;
+    }
+  }
+  .upload_img {
+    width: 120rpx;
+    height: 120rpx;
+    border-radius: 10rpx;
+    background-color: #dcdee0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    margin-right: 12rpx;
+    overflow: hidden;
+    .close-icon {
+      position: absolute;
+      top: 0;
+      right: 0;
+      z-index: 5;
+    }
+  }
 }
 </style>