商家入驻和实名认证上传图片组件上去掉裁剪功能

pages/member/auth/Auth.vue

@@ -34,7 +34,7 @@
                         width:'200px',
                         height:'160px',
                         }"
-                        @select="uploadInformPic('member_idcard_image1',$event)"
+                        @select="uploadSelectImg('member_idcard_image1',$event)"
                         @delete="dropImage('member_idcard_image1')"
                       >
                       </uni-file-picker>
@@ -58,13 +58,12 @@
                             width:'200px',
                             height:'160px',
                             }"
-                            @select="uploadInformPic('member_idcard_image2',$event)"
+                            @select="uploadSelectImg('member_idcard_image2',$event)"
                             @delete="dropImage('member_idcard_image2')"
                           >
                           </uni-file-picker>
                     </view>
                 </view>
-
             </view>
             <view class="div title">身份证反面照片</view>
             <view class="div idcard-item">
@@ -82,7 +81,7 @@
                             width:'200px',
                             height:'160px',
                             }"
-                            @select="uploadInformPic('member_idcard_image3',$event)"
+                            @select="uploadSelectImg('member_idcard_image3',$event)"
                             @delete="dropImage('member_idcard_image3')"
                           >
                           </uni-file-picker>
@@ -98,7 +97,7 @@
       <uni-popup background-color="#fff" ref="isshow" class="popup" >
         <image mode="aspectFit" class="img" :src="showimage" :style="getBannerStyle" @click="hidePopup('isshow')">
       </uni-popup>
-        <tui-picture-cropper v-if="cropperOption.imgUrl" :width="cropperOption.autoCropWidth" :height="cropperOption.autoCropHeight" :imageUrl="cropperOption.img" @ready="cropReady" @cropper="useCrop" @back="cropBack"></tui-picture-cropper>
+       <!-- <tui-picture-cropper v-if="cropperOption.imgUrl" :width="cropperOption.autoCropWidth" :height="cropperOption.autoCropHeight" :imageUrl="cropperOption.img" @ready="cropReady" @cropper="useCrop" @back="cropBack"></tui-picture-cropper> -->
     </view>
 <uni-popup background-color="#fff" ref="confirm" type="dialog">
     <uni-popup-dialog :mode="dialog.mode" :title="dialog.title" :content="dialog.content" :placeholder="dialog.content" @confirm="confirmDialog" @close="closeDialog"></uni-popup-dialog>
@@ -109,7 +108,7 @@
 import {getFontSize} from '@/util/common'
 import TitleHeader from '../../TitleHeader'
 import MemberBase from '../MemberBase'
-import tuiPictureCropper from "@/components/thorui/tui-picture-cropper/tui-picture-cropper"
+// import tuiPictureCropper from "@/components/thorui/tui-picture-cropper/tui-picture-cropper"
 import { mapState, mapMutations } from 'vuex'
 import { uploadAuth, dropAuth, updateMemberAuth } from '../../../api/member'
 import flexLine from '../../flexLine'
@@ -150,8 +149,8 @@ export default {
   components:{
     TitleHeader,
     MemberBase,
-    flexLine,
-    tuiPictureCropper
+    flexLine
+    // tuiPictureCropper
   },
   computed:{
     fontSize(){
@@ -289,19 +288,55 @@ export default {
         this.cropperOption.img = this.cropperOption.imgUrl
       },
       cropBack(){
+		  console.log('this.cropperOptio' , this.cropperOption)
         this.cropperOption.imgUrl=''
         this.$forceUpdate()
       },
-    uploadInformPic (index, event) {
-        let that = this
-        this.cropType = index
-        let file = event.tempFiles[0]
-          that.cropperOption.imgUrl = file.path
-          that.cropperOption.autoCropWidth = uni.getSystemInfoSync().windowWidth
-          that.cropperOption.autoCropHeight = uni.getSystemInfoSync().windowWidth
-          that.cropperOption.maxImgSize = uni.getSystemInfoSync().windowHeight - 40
-          that.$forceUpdate()
-      }
+	  // 直接上传
+	  uploadSelectImg(index, event){
+		 const file = event.tempFiles[0]
+		  const  formdata = {
+		    filePath:file.path,
+		    name:index,
+		    id:index
+		  }
+		  uploadAuth(formdata).then(res => {
+		    this.user[index + '_url'] = res.result.file_path
+		    this.imageValue[index]=[{
+		      name:index,
+		      extname:'jpg',
+		      url:res.result.file_path
+		    }]
+		    var temp = {}
+		    temp[index + '_url'] = res.result.file_path
+		    this.memberEdit(temp)
+		    this.cropperOption.imgUrl=''
+		    this.$forceUpdate()
+		    uni.hideLoading()
+		  }).catch(function (error) {
+		    uni.showToast({icon:'none',title: error.message})
+		    uni.hideLoading()
+		    this.cropperOption.imgUrl=''
+		    this.$forceUpdate()
+		  })
+	  },
+	  
+  //   uploadInformPic (index, event) {
+  //       let that = this
+  //       this.cropType = index
+		// if(index === 'member_idcard_image1'){ // 直接上传
+		// this.uploadSelectImg(index, event)
+			
+		// }else{
+		
+		// let file = event.tempFiles[0]
+		//   that.cropperOption.imgUrl = file.path
+		//   that.cropperOption.autoCropWidth = uni.getSystemInfoSync().windowWidth
+		//   that.cropperOption.autoCropHeight = uni.getSystemInfoSync().windowWidth
+		//   that.cropperOption.maxImgSize = uni.getSystemInfoSync().windowHeight - 40
+		//   that.$forceUpdate()	
+		// }
+  //     }
   }
 }
 </script>

pages/member/sellerjoinin/Step2.vue

@@ -55,11 +55,20 @@
         <view class="div" slot="right">
           <view class="div user-avatar-wrapper">
             <view class="div user-avatar">
-                <uni-file-picker class="common-avatar" v-model="imageValue" fileMediatype="image" mode="grid" :limit="1" :auto-upload="false" @select="uploadImage" @delete="dropImage()" :image-styles="{
+                <uni-file-picker 
+				class="common-avatar" 
+				v-model="business_licence_number_electronic_lsit" 
+				fileMediatype="image" 
+				mode="grid" 
+				:limit="1" 
+				:auto-upload="false" 
+				@select="uploadSelectImg('business_licence_number_electronic', $event)"  
+				@delete="dropImage('business_licence_number_electronic')"  
+				:image-styles="{
                         width:'200px',
                         height:'160px',
-                        }"></uni-file-picker>
-                    </view>
+                }"></uni-file-picker>
+            </view>
           </view>
         </view>
       </flex-line>
@@ -72,11 +81,21 @@
 	    <view class="div" slot="right">
 	      <view class="div user-avatar-wrapper">
 	        <view class="div user-avatar">
-	            <uni-file-picker class="common-avatar" v-model="imageValue1" fileMediatype="image" mode="grid" :limit="1" :auto-upload="false" @select="uploadImage1" @delete="dropImage1()" :image-styles="{
-	                    width:'200px',
-	                    height:'160px',
-	                    }"></uni-file-picker>
-	                </view>
+	            <uni-file-picker 
+					class="common-avatar" 
+					v-model="business_author_letter_list" 
+					fileMediatype="image" 
+					mode="grid" 
+					:limit="1" 
+					:auto-upload="false" 
+					@select="uploadSelectImg('business_author_letter', $event)" 
+					@delete="dropImage('business_author_letter')" 
+					:image-styles="{
+							width:'200px',
+							height:'160px',
+							}">
+				</uni-file-picker>
+	        </view>
 	      </view>
 		
 	    </view>
@@ -112,8 +131,8 @@
 		</view>
       </view>
       </uni-popup>
-      <tui-picture-cropper v-if="cropperOption.imgUrl" :width="cropperOption.autoCropWidth" :height="cropperOption.autoCropHeight" :imageUrl="cropperOption.img" @ready="cropReady" @cropper="useCrop" @back="cropBack"></tui-picture-cropper>
-	     <tui-picture-cropper v-if="cropperOption1.imgUrl" :width="cropperOption1.autoCropWidth" :height="cropperOption1.autoCropHeight" :imageUrl="cropperOption1.img" @ready="cropReady1" @cropper="useCrop1" @back="cropBack1"></tui-picture-cropper>
+      <!-- <tui-picture-cropper v-if="cropperOption.imgUrl" :width="cropperOption.autoCropWidth" :height="cropperOption.autoCropHeight" :imageUrl="cropperOption.img" @ready="cropReady" @cropper="useCrop" @back="cropBack"></tui-picture-cropper> -->
+	     <!-- <tui-picture-cropper v-if="cropperOption1.imgUrl" :width="cropperOption1.autoCropWidth" :height="cropperOption1.autoCropHeight" :imageUrl="cropperOption1.img" @ready="cropReady1" @cropper="useCrop1" @back="cropBack1"></tui-picture-cropper> -->
     </view>
   </view></member-base>
 </template>
@@ -142,28 +161,28 @@ export default {
   data(){
     return {
       navHeight: 0,
-      imageValue:[],
-	  imageValue1:[],
+	   business_author_letter_list:[],
+      business_licence_number_electronic_lsit:[],
       screenWidth:0,
       screenHeight:0,
-      cropperOption: {
-        img: '',
-        canMove: false,
-        autoCrop: true,
-        autoCropWidth: 100,
-        autoCropHeight: 50,
-        maxImgSize: 500,
-        outputType: 'png'
-      },
-	  cropperOption1: {
-	    img: '',
-	    canMove: false,
-	    autoCrop: true,
-	    autoCropWidth: 100,
-	    autoCropHeight: 50,
-	    maxImgSize: 500,
-	    outputType: 'png'
-	  },
+   //    cropperOption: {
+   //      img: '',
+   //      canMove: false,
+   //      autoCrop: true,
+   //      autoCropWidth: 100,
+   //      autoCropHeight: 50,
+   //      maxImgSize: 500,
+   //      outputType: 'png'
+   //    },
+	  // cropperOption1: {
+	  //   img: '',
+	  //   canMove: false,
+	  //   autoCrop: true,
+	  //   autoCropWidth: 100,
+	  //   autoCropHeight: 50,
+	  //   maxImgSize: 500,
+	  //   outputType: 'png'
+	  // },
       options: [{ title: '公司资质' }, { title: '财务资质' }, { title: '店铺信息' }, { title: '合同签订' }],
       showimage: '',
       selectData: '',
@@ -197,14 +216,14 @@ export default {
         data = this.storeJoinin0
       }
       if(data.business_licence_number_electronic_url){
-          this.imageValue = [{
+          this.business_licence_number_electronic_list = [{
             name: 'business_licence_number_electronic',
             extname: 'jpg',
             url: data.business_licence_number_electronic_url
           }]
         }   
 		if(data.business_author_letter_url){
-          this.imageValue1 = [{
+          this.business_author_letter_list = [{
             name: 'business_author_letter',
             extname: 'jpg',
             url: data.business_author_letter_url
@@ -279,7 +298,6 @@ export default {
       sellerJoininSave: 'sellerJoininSave'
     }),
     nextStep () {
-	console.log('this.storeJoinin' ,this.storeJoinin)
       saveStoreJoinin2(this.storeJoinin).then(res => {
         this.sellerJoininSave({ storeJoinin: this.storeJoinin })
         uni.navigateTo({url:'/pages/member/sellerjoinin/Step3'})
@@ -333,105 +351,143 @@ export default {
 			loop:false,    
 		})
 	},
-    dropImage () {
-      this.storeJoinin.business_licence_number_electronic = ''
+    dropImage (type) {
+	  this.storeJoinin[type] =  this.storeJoinin[type + '_url']  = ''
+	  // 缓存也要清除下
       this.$forceUpdate()
     },
-	dropImage1 () {
-	  this.storeJoinin.business_author_letter = ''
-	  this.$forceUpdate()
+	// dropImage1 () {
+	//   this.storeJoinin.business_author_letter = ''
+	//   this.$forceUpdate()
+	// },
+    // uploadImage(type,event) {
+    //     var file = event.tempFiles[0]
+    //     var that = this
+    //       that.cropperOption.imgUrl = file.path
+    //       that.cropperOption.autoCropWidth = uni.getSystemInfoSync().windowWidth
+    //       that.cropperOption.autoCropHeight =( uni.getSystemInfoSync().windowWidth) * (this.storeJoinin.store_type==0 ? 1 :.63)
+    //       that.cropperOption.maxImgSize = uni.getSystemInfoSync().windowHeight - 40
+    //       that.$forceUpdate()
+    // },
+	uploadSelectImg(type,event){
+		const that = this
+		const  file = event.tempFiles[0]
+		const  formdata = {
+		  filePath: file.path,
+		  name: 'file'
+		}
+		uni.showLoading({
+		  title: 'lodding....'
+		})
+		uploadInfoFile(formdata).then(res => {
+		  that.storeJoinin[type] = res.result.path
+		  that.storeJoinin[type + '_url'] = res.result.url
+		  
+		that[type + '_list'] = [{
+		    name: type,
+		    extname: 'jpg',
+		    url: that.storeJoinin[type + '_url']
+		  }]
+		  // this.cropperOption.imgUrl = ''
+		  that.$forceUpdate()
+		  uni.hideLoading()
+		}).catch(function(error) {
+		  uni.showToast({
+		    icon: 'none',
+		    title: error.message
+		  })
+		  uni.hideLoading()
+		  // this.cropperOption.imgUrl = ''
+		  that.$forceUpdate()
+		})
 	},
-    uploadImage(event) {
-        var file = event.tempFiles[0]
-        var that = this
-          that.cropperOption.imgUrl = file.path
-          that.cropperOption.autoCropWidth = uni.getSystemInfoSync().windowWidth
-          that.cropperOption.autoCropHeight =( uni.getSystemInfoSync().windowWidth) * (this.storeJoinin.store_type==0 ? 1 :.63)
-          that.cropperOption.maxImgSize = uni.getSystemInfoSync().windowHeight - 40
-          that.$forceUpdate()
-      },
-	  uploadImage1(event) {
-	      var file = event.tempFiles[0]
-	      var that = this
-	        that.cropperOption1.imgUrl = file.path
-	        that.cropperOption1.autoCropWidth = uni.getSystemInfoSync().windowWidth
-	        that.cropperOption1.autoCropHeight = uni.getSystemInfoSync().windowWidth * (this.storeJoinin.store_type==0 ? 1.6 :.63)
-	        that.cropperOption1.maxImgSize =uni.getSystemInfoSync().windowHeight -40
-	        that.$forceUpdate()
-	    },
-      useCrop(res) {
-        var formdata = {
-          filePath: res.url,
-          name: 'file'
-        }
-        uni.showLoading({
-          title: '加载中'
-        })
-        uploadInfoFile(formdata).then(res => {
-          this.storeJoinin.business_licence_number_electronic = res.result.path
-          this.storeJoinin.business_licence_number_electronic_url = res.result.url
-          this.imageValue = [{
-            name: 'business_licence_number_electronic',
-            extname: 'jpg',
-            url: this.storeJoinin.business_licence_number_electronic_url
-          }]
-          this.cropperOption.imgUrl = ''
-          this.$forceUpdate()
-          uni.hideLoading()
-        }).catch(function(error) {
-          uni.showToast({
-            icon: 'none',
-            title: error.message
-          })
-          uni.hideLoading()
-          this.cropperOption.imgUrl = ''
-          this.$forceUpdate()
-        })
-      },
+	
+	  
+	  
+	  
+	  // uploadImage1(event) {
+	  //     var file = event.tempFiles[0]
+		 //  console.log('这是我上传的图片',file)
+	  //     var that = this
+	  //       that.cropperOption1.imgUrl = file.path
+	  //       that.cropperOption1.autoCropWidth = uni.getSystemInfoSync().windowWidth
+	  //       that.cropperOption1.autoCropHeight = uni.getSystemInfoSync().windowWidth * (this.storeJoinin.store_type==0 ? 1.6 :.63)
+	  //       that.cropperOption1.maxImgSize =uni.getSystemInfoSync().windowHeight -40
+	  //       that.$forceUpdate()
+	  //   },
+      // useCrop(res) {
+      //   var formdata = {
+      //     filePath: res.url,
+      //     name: 'file'
+      //   }
+      //   uni.showLoading({
+      //     title: '加载中'
+      //   })
+      //   uploadInfoFile(formdata).then(res => {
+      //     this.storeJoinin.business_licence_number_electronic = res.result.path
+      //     this.storeJoinin.business_licence_number_electronic_url = res.result.url
+      //     this.imageValue = [{
+      //       name: 'business_licence_number_electronic',
+      //       extname: 'jpg',
+      //       url: this.storeJoinin.business_licence_number_electronic_url
+      //     }]
+      //     this.cropperOption.imgUrl = ''
+      //     this.$forceUpdate()
+      //     uni.hideLoading()
+      //   }).catch(function(error) {
+      //     uni.showToast({
+      //       icon: 'none',
+      //       title: error.message
+      //     })
+      //     uni.hideLoading()
+      //     this.cropperOption.imgUrl = ''
+      //     this.$forceUpdate()
+      //   })
+      // },
 	  
-	  useCrop1(res) {
-	    var formdata = {
-	      filePath: res.url,
-	      name: 'file'
-	    }
-	    uni.showLoading({
-	      title: '加载中'
-	    })
-	    uploadInfoFile(formdata).then(res => {
-	      this.storeJoinin.business_author_letter = res.result.path
-	      this.storeJoinin.business_author_letter_url = res.result.url
-	      this.imageValue1 = [{
-	        name: 'business_author_letter',
-	        extname: 'jpg',
-	        url: this.storeJoinin.business_author_letter_url
-	      }]
-	      this.cropperOption1.imgUrl = ''
-	      this.$forceUpdate()
-	      uni.hideLoading()
-	    }).catch(function(error) {
-	      uni.showToast({
-	        icon: 'none',
-	        title: error.message
-	      })
-	      uni.hideLoading()
-	      this.cropperOption1.imgUrl = ''
-	      this.$forceUpdate()
-	    })
-	  },
-      cropReady() {
-        this.cropperOption.img = this.cropperOption.imgUrl
-      },
-	  cropReady1() {
-	    this.cropperOption1.img = this.cropperOption1.imgUrl
-	  },
-      cropBack(){
-        this.cropperOption.imgUrl=''
-        this.$forceUpdate()
-      },
-	  cropBack1(){
-	 this.cropperOption1.imgUrl=''
-	    this.$forceUpdate()
-	  },
+	  // useCrop1(res) {
+	  //   var formdata = {
+	  //     filePath: res.url,
+	  //     name: 'file'
+	  //   }
+	  //   uni.showLoading({
+	  //     title: '加载中'
+	  //   })
+	  //   uploadInfoFile(formdata).then(res => {
+	  //     this.storeJoinin.business_author_letter = res.result.path
+	  //     this.storeJoinin.business_author_letter_url = res.result.url
+	  //     this.imageValue1 = [{
+	  //       name: 'business_author_letter',
+	  //       extname: 'jpg',
+	  //       url: this.storeJoinin.business_author_letter_url
+	  //     }]
+	  //     this.cropperOption1.imgUrl = ''
+	  //     this.$forceUpdate()
+	  //     uni.hideLoading()
+	  //   }).catch(function(error) {
+	  //     uni.showToast({
+	  //       icon: 'none',
+	  //       title: error.message
+	  //     })
+	  //     uni.hideLoading()
+	  //     this.cropperOption1.imgUrl = ''
+	  //     this.$forceUpdate()
+	  //   })
+	  // },
+      // cropReady() {
+      //   this.cropperOption.img = this.cropperOption.imgUrl
+      // },
+	  // cropReady1() {
+	  //   this.cropperOption1.img = this.cropperOption1.imgUrl
+	  // },
+      //cropBack(){
+      //   this.cropperOption.imgUrl=''
+      //   this.$forceUpdate()
+      // },
+	 //  cropBack1(){
+	 // this.cropperOption1.imgUrl=''
+	 //    this.$forceUpdate()
+	 //  },
     selectCity (city_name) {
       getPointByAddress(city_name).then(res => {
         if (res.result.location) {