fstarter 2.10.45 → 2.10.48

package/src/plugins/components/BSUpload2.vue

@@ -1,392 +1,398 @@
-<template>
-  <div class="uploadWrapper">
-    <!-- v-if="model.preview" -->
-    <van-uploader 
-      
-      v-model="fileList"
-      preview-size="100%"
-      :after-read="afterRead"
-      :max-count="model.preview ? 1 : 1000"
-      :show-upload="true"
-      :upload-icon="model.bgImage"
-      :accept="model.accept"
-      :preview-image="model.preview"
-      capture="camera"
-      @delete="deleteFn"
-    >
-      <van-image :src="model.bgImage"/>
-    </van-uploader>
-
-    <div
-      v-show="showCooper"
-      class="pop"
-      closeable
-      :overlay="false"
-      :style="{ 
-        width: '100%',
-        height: '100%',
-        zIndex: '999' 
-      }"
-      @click-close-icon="cancel"
-    >
-      <vueCropper
-        :img="cooperImage"
-        :autoCrop="true"
-        :canScale="false"
-        :canMove="false"
-        :canMoveBox="true"
-        :fixedBox="false"
-        :info="false"
-        :autoCropWidth="270"
-        :autoCropHeight="160"
-        :fixed="true"
-        :fixedNumber='[1.6,1]'
-        :enlarge="1"
-        :outputSize="1"
-        :centerBox="false"
-        class="cropper"
-        ref="cropper"
-        outputType="jpg"
-      
-      >
-      
-      </vueCropper>
-      <div class="control">
-        <div class="btnWrapper">
-          <van-button 
-            type="primary"
-            @click="right"  
-          >
-            旋转
-          </van-button>
-        </div>
-        <div class="btnWrapper">
-          <van-button 
-            type="info"
-            loading-text="上传中..." 
-            :loading="loading"
-            @click="copper"
-          >
-            确定
-          </van-button>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-    import Vue from 'vue'
-    import base2 from './base2.js'
-    import config from '../assets/config'
-    import { compressImg } from '../assets/compressImg'
-
-    import vueCropper from 'vue-cropper' // 截图插件
-    Vue.use(vueCropper)
-
-    export default {
-        name: "bs-upload2",
-        mixins: [base2],
-        props: {
-
-        },
-        data() {
-          return {
-            fileList:[],
-            fileList2:[],
-            showCooper: false,
-            cooperImage: '',
-            fileObj: null,
-            loading: false,
-          }
-        },
-        mounted() {
-
-        },
-        methods: {
-          right() {
-            this.$refs.cropper.rotateRight()
-          },
-          copper() {
-            this.loading = true
-            this.$refs.cropper.getCropData((file) => {
-              let arr = file.split(",")
-              let mime = arr[0].match(/:(.*?);/)[1]
-
-              let bstr = atob(arr[1])
-              let n = bstr.length
-              let u8arr = new Uint8Array(n)
-              while (n--) {
-                u8arr[n] = bstr.charCodeAt(n)
-              }
-
-              var fileObj1 =  new File([u8arr], this.file.file.name, { type: mime })
-              this._upLoadFile(fileObj1)
-            })
-
-          },
-          cancel() {
-            debugger
-            this.showCooper = false
-            this.fileList.splice(0, this.fileList.length)
-          },
-          deleteFn() {
-
-            //将废弃delete
-            this.$emit('delete', this.model.actions)
-            this.$emit('del',function(){
-
-            },this.fullName)
-          },
-          createDefaultModel() {
-            return {
-              value:'',
-              data:{},
-              label:'点击上传',
-              bgImage: 'https://img.yzcdn.cn/vant/cat.jpeg',
-              remark:'只能上传jpg/png文件，且不超过500kb',
-              expired : -1,
-              buzId:'1111',
-              buz:'SelfReturnVisit',
-              domain:'capp',
-              actions: '',
-              preview:true,
-              accept:'image/*',
-              type:'BSUpload',
-              needCooper: true,
-            };
-          },
-          isGetRightInfo(data) {
-            const actions = this.model.actions
-            switch (actions) {
-              case 'ocr_id0':
-                if (data[actions].data.hasOwnProperty('issued_by')) {
-                  return false
-                }
-                break
-              case 'ocr_id1':
-                if (data[actions].data.hasOwnProperty('issued_by')) {
-                  return false
-                }
-                break
-              case 'ocr_bc':
-                if (data[actions].data.bank_cards.length === 0) {
-                  return false
-                }
-                break
-              default: {
-                return true
-              }
-            }
-            return true
-          },
-          _upLoadFile(fileObj){
-            let self = this
-            this.$http.uploadFile(
-              {
-                process: function(msg){
-
-                  if(self.model.preview){
-                    self.fileList[0].message = msg
-                  }
-                  self.session.sys.loadmsg = msg
-                },
-                file: fileObj,
-                name: this.file.file.name,
-                domain: this.model.domain,
-                buz: this.model.buz,
-                buzId: this.model.buzId,
-                expired: this.model.expired,
-                actions: this.model.actions
-              }, false, true, false).then((data) => {
-
-              self.model.data = data
-              self.model.value = data.fileId + '.' + data.ext
-
-              this.showCooper = false
-              if (this.isGetRightInfo(data.actions)) {
-                self.$ak.msg.toast('上传成功')
-              }
-
-              this.loading = false
-              self.$emit('done', function(){
-
-              },self.fullName)
-
-            }).catch(function(err) {
-              console.log(err)
-              this.loading = false
-              self.fileList.splice(0,self.fileList.length)
-              self.$emit('fail',function(){
-
-              },self.fullName)
-            })
-          },
-          async afterRead(file) {
-            
-            if(this.model.preview)  this.fileList[0].status = 'uploading'
-            this.file = file
-            if (this.model.needCooper) {
-              this.showCooper = true
-              let arr = file.content.split(",")
-              let mime = arr[0].match(/:(.*?);/)[1]
-
-              // let bstr = atob(arr[1])
-              // let n = bstr.length
-              // let u8arr = new Uint8Array(n)
-              // while (n--) {
-              //   u8arr[n] = bstr.charCodeAt(n)
-              // }
-
-              // var fileObj1 =  new File([u8arr], file.file.name, { type: mime })
-              console.log(file)
-              
-              // 下面两行为压缩代码
-              var fileObj =  await compressImg(file.file, file.file.name, mime)  
-              this.cooperImage = fileObj.base64
-              
-              // this.cooperImage = file.content
-            } else {
-              // 不需要裁剪
-              let arr = file.content.split(",")
-              let mime = arr[0].match(/:(.*?);/)[1]
-
-              // let bstr = atob(arr[1])
-              // let n = bstr.length
-              // let u8arr = new Uint8Array(n)
-              // while (n--) {
-              //   u8arr[n] = bstr.charCodeAt(n)
-              // }
-
-              // var fileObj1 =  new File([u8arr], file.file.name, { type: mime })
-              console.log(file)
-              var fileObj =  await compressImg(file.file, file.file.name, mime)
-              this._upLoadFile(fileObj.file)
-            }
-
-            
-          }
-        },
-        watch:{
-
-          'model.value':{
-            handler(val,oldval){
-
-              if(this.$ak.utils.isEmpty(val))
-                return
-
-              this.fileList.splice(0,this.fileList.length)
-              this.fileList.push({
-                url: config.file.baseURL + '/file/v1/hasl/fileAdmin/fileAdmin/get/' + this.model.data.fileId + "." + this.model.data.ext,
-                status: 'done'
-              })
-
-
-              this.setEventString(this.fullName,this.sname,'value',val,oldval)
-            },
-            deep:false
-          }
-        }
-    }
-
-</script>
-
-<style scoped lang="less">
-/deep/ .van-uploader__preview {
-  margin: 0;
-}
-/deep/ .van-uploader__preview-delete-icon {
-  font-size: 20px;
-}
-/deep/ .van-uploader__preview-delete {
-  width: 18px;
-  height: 18px;
-  border-radius: 0 0 0 14px;
-}
-.uploadWrapper {
-  width: 60%;
-  margin: 0 auto;
-  .cropper {
-      margin: 40% auto 0 auto;
-      width: 260px;
-      height: 260px;
-  }
-  .cropper-container{
-    width: 100vw;
-    height: 100vh;
-    div{
-      width: 100%;
-      height: 100%;
-    }
-  }
-  .cropper > :nth-child(1) {
-    background-color: #f6f6f6 !important;
-  }
-  .cropper-container .footer{
-    width: 100%;
-    height:88px;
-    display: flex;
-    position: fixed;
-    bottom: 0px;
-    left:0px;
-  }
-  .cropper {
-    width: 100%;
-    height: 260px;
-  }
-  .cropper-container{
-    width: 100vw;
-    height: 100vh;
-    div{
-      width: 100%;
-      height: 100%;
-    }
-  }
-  .cropper > :nth-child(1) {
-    background-color: #f6f6f6 !important;
-  }
-  .cropper-container .footer{
-    width: 100%;
-    height:88px;
-    display: flex;
-    position: fixed;
-    bottom: 0px;
-    left:0px;
-  }
-}
-.van-button {
-  width: 100%;
-}
-.control {
-  position: fixed;
-  bottom: 0;
-  display: flex;
-  justify-content: space-between;
-  width: 100%;
-  .btnWrapper {
-    width: 50%;
-  }
-}
-.pop {
-  position: fixed;
-  top: 50%;
-  left:0;
-  transform: translate3d(0,-50%,0);
-  max-height: 100%;
-  overflow-y: auto;
-  background-color: #fff;
-}
-</style>
-<style scoped>
-/* .cropper-container >>> .van-button--info{
-  width: 50%;
-  background:rgba(54,95,170,1);
-  box-shadow:0px 9px 24px 0px rgba(54,95,170,0.39);
-  border: 1px solid rgba(69,104,186,1);
-}
-.cropper-container >>> .van-button{
-  height: 88px;
-  line-height: 88px;
-} */
-
-</style>
+<template>
+  <div class="uploadWrapper">
+    <!-- v-if="model.preview" -->
+    <van-uploader 
+      
+      v-model="fileList"
+      preview-size="100%"
+      :after-read="afterRead"
+      :max-count="model.preview ? 1 : 1000"
+      :show-upload="true"
+      :upload-icon="model.bgImage"
+      :accept="model.accept"
+      :preview-image="model.preview"
+      @click-upload="clickUpload"
+      capture="camera"
+      @delete="deleteFn"
+    >
+      <van-image :src="model.bgImage"/>
+    </van-uploader>
+
+    <div
+      v-show="showCooper"
+      class="pop"
+      closeable
+      :overlay="false"
+      :style="{ 
+        width: '100%',
+        height: '100%',
+        zIndex: '999' 
+      }"
+      @click-close-icon="cancel"
+    >
+      <vueCropper
+        :img="cooperImage"
+        :autoCrop="true"
+        :canScale="false"
+        :canMove="false"
+        :canMoveBox="true"
+        :fixedBox="false"
+        :info="false"
+        :autoCropWidth="270"
+        :autoCropHeight="160"
+        :fixed="true"
+        :fixedNumber='[1.6,1]'
+        :enlarge="1"
+        :outputSize="1"
+        :centerBox="false"
+        class="cropper"
+        ref="cropper"
+        outputType="jpg"
+      
+      >
+      
+      </vueCropper>
+      <div class="control">
+        <div class="btnWrapper">
+          <van-button 
+            type="primary"
+            @click="right"  
+          >
+            旋转
+          </van-button>
+        </div>
+        <div class="btnWrapper">
+          <van-button 
+            type="info"
+            loading-text="上传中..." 
+            :loading="loading"
+            @click="copper"
+          >
+            确定
+          </van-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+    import Vue from 'vue'
+    import base2 from './base2.js'
+    import config from '../assets/config'
+    import { compressImg } from '../assets/compressImg'
+
+    import vueCropper from 'vue-cropper' // 截图插件
+    Vue.use(vueCropper)
+
+    export default {
+        name: "bs-upload2",
+        mixins: [base2],
+        props: {
+
+        },
+        data() {
+          return {
+            fileList:[],
+            fileList2:[],
+            showCooper: false,
+            cooperImage: '',
+            fileObj: null,
+            loading: false,
+          }
+        },
+        mounted() {
+
+        },
+        methods: {
+          right() {
+            this.$refs.cropper.rotateRight()
+          },
+          copper() {
+            this.loading = true
+            this.$refs.cropper.getCropData((file) => {
+              let arr = file.split(",")
+              let mime = arr[0].match(/:(.*?);/)[1]
+
+              let bstr = atob(arr[1])
+              let n = bstr.length
+              let u8arr = new Uint8Array(n)
+              while (n--) {
+                u8arr[n] = bstr.charCodeAt(n)
+              }
+
+              var fileObj1 =  new File([u8arr], this.file.file.name, { type: mime })
+              this._upLoadFile(fileObj1)
+            })
+
+          },
+          cancel() {
+            debugger
+            this.showCooper = false
+            this.fileList.splice(0, this.fileList.length)
+          },
+          deleteFn() {
+
+            //将废弃delete
+            this.$emit('delete', this.model.actions)
+            this.$emit('del',function(){
+
+            },this.fullName)
+          },
+          createDefaultModel() {
+            return {
+              value:'',
+              data:{},
+              label:'点击上传',
+              bgImage: 'https://img.yzcdn.cn/vant/cat.jpeg',
+              remark:'只能上传jpg/png文件，且不超过500kb',
+              expired : -1,
+              buzId:'1111',
+              buz:'SelfReturnVisit',
+              domain:'capp',
+              actions: '',
+              preview:true,
+              accept:'image/*',
+              type:'BSUpload',
+              needCooper: true,
+            };
+          },
+          isGetRightInfo(data) {
+            const actions = this.model.actions
+            switch (actions) {
+              case 'ocr_id0':
+                if (data[actions].data.hasOwnProperty('issued_by')) {
+                  return false
+                }
+                break
+              case 'ocr_id1':
+                if (data[actions].data.hasOwnProperty('issued_by')) {
+                  return false
+                }
+                break
+              case 'ocr_bc':
+                if (data[actions].data.bank_cards.length === 0) {
+                  return false
+                }
+                break
+              default: {
+                return true
+              }
+            }
+            return true
+          },
+          _upLoadFile(fileObj){
+            let self = this
+            this.$http.uploadFile(
+              {
+                process: function(msg){
+
+                  if(self.model.preview){
+                    self.fileList[0].message = msg
+                  }
+                  self.session.sys.loadmsg = msg
+                },
+                file: fileObj,
+                name: this.file.file.name,
+                domain: this.model.domain,
+                buz: this.model.buz,
+                buzId: this.model.buzId,
+                expired: this.model.expired,
+                actions: this.model.actions
+              }, false, true, false).then((data) => {
+
+              self.model.data = data
+              self.model.value = data.fileId + '.' + data.ext
+
+              this.showCooper = false
+              if (this.isGetRightInfo(data.actions)) {
+                self.$ak.msg.toast('上传成功')
+              }
+
+              this.loading = false
+              self.$emit('done', function(){
+
+              },self.fullName)
+
+            }).catch(function(err) {
+              console.log(err)
+              this.loading = false
+              self.fileList.splice(0,self.fileList.length)
+              self.$emit('fail',function(){
+
+              },self.fullName)
+            })
+          },
+          clickUpload () {
+            this.$emit('clickUpload', function(){
+
+            },this.fullName)
+          },
+          async afterRead(file) {
+            
+            if(this.model.preview)  this.fileList[0].status = 'uploading'
+            this.file = file
+            if (this.model.needCooper) {
+              this.showCooper = true
+              let arr = file.content.split(",")
+              let mime = arr[0].match(/:(.*?);/)[1]
+
+              // let bstr = atob(arr[1])
+              // let n = bstr.length
+              // let u8arr = new Uint8Array(n)
+              // while (n--) {
+              //   u8arr[n] = bstr.charCodeAt(n)
+              // }
+
+              // var fileObj1 =  new File([u8arr], file.file.name, { type: mime })
+              console.log(file)
+              
+              // 下面两行为压缩代码
+              var fileObj =  await compressImg(file.file, file.file.name, mime)  
+              this.cooperImage = fileObj.base64
+              
+              // this.cooperImage = file.content
+            } else {
+              // 不需要裁剪
+              let arr = file.content.split(",")
+              let mime = arr[0].match(/:(.*?);/)[1]
+
+              // let bstr = atob(arr[1])
+              // let n = bstr.length
+              // let u8arr = new Uint8Array(n)
+              // while (n--) {
+              //   u8arr[n] = bstr.charCodeAt(n)
+              // }
+
+              // var fileObj1 =  new File([u8arr], file.file.name, { type: mime })
+              console.log(file)
+              var fileObj =  await compressImg(file.file, file.file.name, mime)
+              this._upLoadFile(fileObj.file)
+            }
+
+            
+          }
+        },
+        watch:{
+
+          'model.value':{
+            handler(val,oldval){
+
+              if(this.$ak.utils.isEmpty(val))
+                return
+
+              this.fileList.splice(0,this.fileList.length)
+              this.fileList.push({
+                url: config.file.baseURL + '/file/v1/hasl/fileAdmin/fileAdmin/get/' + this.model.data.fileId + "." + this.model.data.ext,
+                status: 'done'
+              })
+
+
+              this.setEventString(this.fullName,this.sname,'value',val,oldval)
+            },
+            deep:false
+          }
+        }
+    }
+
+</script>
+
+<style scoped lang="less">
+/deep/ .van-uploader__preview {
+  margin: 0;
+}
+/deep/ .van-uploader__preview-delete-icon {
+  font-size: 20px;
+}
+/deep/ .van-uploader__preview-delete {
+  width: 18px;
+  height: 18px;
+  border-radius: 0 0 0 14px;
+}
+.uploadWrapper {
+  width: 60%;
+  margin: 0 auto;
+  .cropper {
+      margin: 40% auto 0 auto;
+      width: 260px;
+      height: 260px;
+  }
+  .cropper-container{
+    width: 100vw;
+    height: 100vh;
+    div{
+      width: 100%;
+      height: 100%;
+    }
+  }
+  .cropper > :nth-child(1) {
+    background-color: #f6f6f6 !important;
+  }
+  .cropper-container .footer{
+    width: 100%;
+    height:88px;
+    display: flex;
+    position: fixed;
+    bottom: 0px;
+    left:0px;
+  }
+  .cropper {
+    width: 100%;
+    height: 260px;
+  }
+  .cropper-container{
+    width: 100vw;
+    height: 100vh;
+    div{
+      width: 100%;
+      height: 100%;
+    }
+  }
+  .cropper > :nth-child(1) {
+    background-color: #f6f6f6 !important;
+  }
+  .cropper-container .footer{
+    width: 100%;
+    height:88px;
+    display: flex;
+    position: fixed;
+    bottom: 0px;
+    left:0px;
+  }
+}
+.van-button {
+  width: 100%;
+}
+.control {
+  position: fixed;
+  bottom: 0;
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  .btnWrapper {
+    width: 50%;
+  }
+}
+.pop {
+  position: fixed;
+  top: 50%;
+  left:0;
+  transform: translate3d(0,-50%,0);
+  max-height: 100%;
+  overflow-y: auto;
+  background-color: #fff;
+}
+</style>
+<style scoped>
+/* .cropper-container >>> .van-button--info{
+  width: 50%;
+  background:rgba(54,95,170,1);
+  box-shadow:0px 9px 24px 0px rgba(54,95,170,0.39);
+  border: 1px solid rgba(69,104,186,1);
+}
+.cropper-container >>> .van-button{
+  height: 88px;
+  line-height: 88px;
+} */
+
+</style>