|  | @@ -1,5 +1,6 @@
 | 
	
		
			
				|  |  |  import { Icon, Image, Toast, Uploader } from "vant";
 | 
	
		
			
				|  |  |  import { defineComponent } from "vue";
 | 
	
		
			
				|  |  | +import vueCropper from 'vue-cropper';
 | 
	
		
			
				|  |  |  import styles from "./index.module.less";
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |  import iconUploader from '@common/images/icon_uploader.png';
 | 
	
	
		
			
				|  | @@ -16,6 +17,10 @@ export default defineComponent({
 | 
	
		
			
				|  |  |      deletable: {
 | 
	
		
			
				|  |  |        type: Boolean,
 | 
	
		
			
				|  |  |        default: true
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    cropper: { // 是否进行裁切
 | 
	
		
			
				|  |  | +      type: Boolean,
 | 
	
		
			
				|  |  | +      default: false
 | 
	
		
			
				|  |  |      }
 | 
	
		
			
				|  |  |    },
 | 
	
		
			
				|  |  |    mounted() {
 | 
	
	
		
			
				|  | @@ -25,14 +30,14 @@ export default defineComponent({
 | 
	
		
			
				|  |  |      beforeRead(file: any) {
 | 
	
		
			
				|  |  |        const isLt2M = file.size / 1024 / 1024 < 5
 | 
	
		
			
				|  |  |        if (!isLt2M) {
 | 
	
		
			
				|  |  | -          Toast('上传文件大小不能超过 5MB')
 | 
	
		
			
				|  |  | -          return false
 | 
	
		
			
				|  |  | +        Toast('上传文件大小不能超过 5MB')
 | 
	
		
			
				|  |  | +        return false
 | 
	
		
			
				|  |  |        }
 | 
	
		
			
				|  |  |        return true
 | 
	
		
			
				|  |  |      },
 | 
	
		
			
				|  |  |      beforeDelete(file: any, detail: { index: any; }) {
 | 
	
		
			
				|  |  | -        // this.dataModel.splice(detail.index, 1)
 | 
	
		
			
				|  |  | -        return true
 | 
	
		
			
				|  |  | +      // this.dataModel.splice(detail.index, 1)
 | 
	
		
			
				|  |  | +      return true
 | 
	
		
			
				|  |  |      },
 | 
	
		
			
				|  |  |      async afterRead(file: any, detail: any) {
 | 
	
		
			
				|  |  |        try {
 | 
	
	
		
			
				|  | @@ -56,18 +61,25 @@ export default defineComponent({
 | 
	
		
			
				|  |  |    render() {
 | 
	
		
			
				|  |  |      return (
 | 
	
		
			
				|  |  |        <div class={styles['uploader-section']}>
 | 
	
		
			
				|  |  | -        {/* @ts-ignore */}
 | 
	
		
			
				|  |  | -        <Uploader afterRead={this.afterRead} beforeRead={this.beforeRead} beforeDelete={this.beforeDelete}
 | 
	
		
			
				|  |  | -          v-slots={{
 | 
	
		
			
				|  |  | -            default: () => (this.value ? <div class={styles['img-section']} onClick={this.onClose}>
 | 
	
		
			
				|  |  | -              { this.deletable ? <Icon name="cross" class={styles["img-close"]} /> : null }
 | 
	
		
			
				|  |  | -              <Image fit="cover" class={styles.uploadImg} src={this.value} />
 | 
	
		
			
				|  |  | -            </div> : <div class={styles.uploader}>
 | 
	
		
			
				|  |  | -            <Icon name={iconUploader} size="32" />
 | 
	
		
			
				|  |  | -            <p class={styles.uploaderText}>{this.tips}</p>
 | 
	
		
			
				|  |  | -          </div> )
 | 
	
		
			
				|  |  | -          }}
 | 
	
		
			
				|  |  | -        />
 | 
	
		
			
				|  |  | +        {this.cropper ? <vueCropper
 | 
	
		
			
				|  |  | +          ref="cropper"
 | 
	
		
			
				|  |  | +          img="option.img"
 | 
	
		
			
				|  |  | +          outputSize="option.size"
 | 
	
		
			
				|  |  | +          outputType="option.outputType"
 | 
	
		
			
				|  |  | +        ></vueCropper> : (
 | 
	
		
			
				|  |  | +          // @ts-ignore
 | 
	
		
			
				|  |  | +          <Uploader afterRead={this.afterRead} beforeRead={this.beforeRead} beforeDelete={this.beforeDelete}
 | 
	
		
			
				|  |  | +            v-slots={{
 | 
	
		
			
				|  |  | +              default: () => (this.value ? <div class={styles['img-section']} onClick={this.onClose}>
 | 
	
		
			
				|  |  | +                {this.deletable ? <Icon name="cross" class={styles["img-close"]} /> : null}
 | 
	
		
			
				|  |  | +                <Image fit="cover" class={styles.uploadImg} src={this.value} />
 | 
	
		
			
				|  |  | +              </div> : <div class={styles.uploader}>
 | 
	
		
			
				|  |  | +                <Icon name={iconUploader} size="32" />
 | 
	
		
			
				|  |  | +                <p class={styles.uploaderText}>{this.tips}</p>
 | 
	
		
			
				|  |  | +              </div>)
 | 
	
		
			
				|  |  | +            }}
 | 
	
		
			
				|  |  | +          />
 | 
	
		
			
				|  |  | +        )}
 | 
	
		
			
				|  |  |        </div>
 | 
	
		
			
				|  |  |      )
 | 
	
		
			
				|  |  |    }
 |