Bladeren bron

上传图片组件-未完

liucf 6 jaren geleden
bovenliggende
commit
ea78834659
7 gewijzigde bestanden met toevoegingen van 205 en 18 verwijderingen
  1. 23 4
      src/common/CheckBox.vue
  2. 157 0
      src/common/UploadImg.vue
  3. 11 4
      src/components/DiagTreat.vue
  4. 6 4
      src/components/Others.vue
  5. 7 5
      src/components/Symptom.vue
  6. BIN
      src/images/pic.png
  7. 1 1
      src/less/base.less

+ 23 - 4
src/common/CheckBox.vue

@@ -3,21 +3,37 @@
     <p class="quest">{{indx + '.' + item.name}}</p>
     <img :src="item.url.replace('{imageUrlPrefix}',imgUrl)" v-if="item.url">
     <p v-for="(it,index) in item.questionDetailList" class="list">
-      <img src="../images/check-default.png">
-      <span>{{it.name}}</span>
+      <img :src="checkId.includes(it.id)?check:defaultPic" @click="handleClick(it,index)">
+      <span :class="{'check':checkId.includes(it.id)}">{{it.name}}</span>
     </p>
   </div>
 </template>
 <script type="text/javascript">
 import tools from '@utils/tools.js';
+import icon from '../images/check-default.png'
+import checkIcon from '../images/check.png'
   export default{
     name:'CheckBox',
     data(){
       return{
-        imgUrl:tools.imageUrlPrefix
+        imgUrl:tools.imageUrlPrefix,
+        defaultPic:icon,
+        check:checkIcon,
+        checkId:[]
       }
     },
-    props:['item','indx']
+    props:['item','indx'],
+    methods:{
+      handleClick(it){
+        const id = it.id;
+        let ids = this.checkId;
+        if(ids.includes(id)){
+          this.checkId.splice(ids.indexOf(id),1);
+        }else{
+          this.checkId.push(id);
+        }
+      }
+    }
   }
 </script>
 <style lang="less" scoped>
@@ -40,5 +56,8 @@ import tools from '@utils/tools.js';
         vertical-align: middle;
       }
     }
+    .check{
+      color: #4F50FF;
+    }
   }
 </style>

+ 157 - 0
src/common/UploadImg.vue

@@ -0,0 +1,157 @@
+<template>
+  <div class="img-wrap">
+    <p class="name">{{item.name|| msg}}</p>
+    <div class="box">
+      <ul class="upload-imgs">
+        <li v-if="imgLen>=6 ? false : true">
+          <input type="file" class="upload" @change="addImg" accept="image/*" ref="inp" style="display:none"/>
+          <p @click="handleUpload">点击上传</p>
+        </li>
+        <li v-for='(value, key) in imgs'>
+          <!-- <p class="img"><img :src="getObjectURL(value)"><a class="close" @click="delImg(key)">×</a></p> -->
+          <p class="img"><img :src="value"><a class="close" @click="delImg(key)">×</a></p>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+<script type="text/javascript">
+  export default{
+    name:'UploadImg',
+    data(){
+      return{
+        mag:"上传图片",
+        imgs:{},
+        imgLen:0
+      }
+    },
+    props:['item'],
+    methods:{
+      handleUpload(){
+        const inp = this.$refs.inp;
+        inp.click();
+      },
+      delImg(key){
+        console.log(2222,key)
+      },
+      addImg(){
+        // 上传图片进行压缩,压缩后超过4M则不允许上传
+        let fileTag = this.$refs.inp;
+        let img = this.$refs.img;
+        let file = fileTag.files[0];console.log("文件信息:",file)
+        const that = this;
+        this.imgBase64(file, function (image, canvas) {
+            var maxSize = 4*1024; // 4M
+            var fileSize = file.size/1024; //kb 图片大小
+            var uploadSrc;
+            var uploadFile;
+            if(fileSize > maxSize) { // 如果图片大小大于4m,进行压缩
+              console.log(maxSize,fileSize, maxSize/fileSize );
+              uploadSrc = canvas.toDataURL(file.type, maxSize/fileSize);
+                uploadFile = that.dataURLtoFile(uploadSrc, file.name.split('.')[0]); // 转成file文件
+                // uploadFile = that.convertBase64UrlToBlob(uploadSrc); // 转成blob
+                //console.log("大于:",uploadFile)
+              } else {
+                uploadSrc = image.src; //canvas.toDataURL(file.type,0.5);
+                uploadFile = file;
+              }
+
+              var compressedSize = uploadFile.size / 1024 / 1024;
+              //console.log("压缩后大小:",compressedSize)
+              if(compressedSize.toFixed(2) > 4.00) {
+                alert('上传图片不可超过4M');
+              } else {
+                // img.setAttribute('src',uploadSrc);
+                // img.className = 'img';
+                let key = file.name + new Date().getTime();
+                this.$set(this.imgs,key,uploadSrc);
+                this.imgLen++;
+              }
+          });
+      },
+      imgBase64(file, callback) {
+        var self = this;
+        // 看支持不支持FileReader
+        if (!file || !window.FileReader) return;
+        // 创建一个 Image 对象
+        var image = new Image();
+        // 绑定 load 事件处理器,加载完成后执行
+        image.onload = function(){
+            // 获取 canvas DOM 对象
+            var canvas = document.createElement('canvas')
+            // 返回一个用于在画布上绘图的环境, '2d' 指定了您想要在画布上绘制的类型
+            var ctx = canvas.getContext('2d')
+            // 如果高度超标 // 参数,最大高度
+            var MAX_HEIGHT = 3000;
+            if(image.height > MAX_HEIGHT) {
+                // 宽度等比例缩放 *=
+                image.width *= MAX_HEIGHT / image.height;
+                image.height = MAX_HEIGHT;
+              }
+            // 获取 canvas的 2d 环境对象,
+            // canvas清屏
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            // 重置canvas宽高
+            canvas.width = image.width;
+            canvas.height = image.height;
+            // 将图像绘制到canvas上
+            ctx.drawImage(image, 0, 0, image.width, image.height);
+            callback(image, canvas);
+          };
+          if (/^image/.test(file.type)) {
+            // 创建一个reader
+            var reader = new FileReader();
+            // 将图片将转成 base64 格式
+            reader.readAsDataURL(file);
+            // 读取成功后的回调
+            reader.onload = function () {
+                // self.imgUrls.push(this.result);
+                // 设置src属性,浏览器会自动加载。
+                // 记住必须先绑定事件,才能设置src属性,否则会出同步问题。
+                image.src = this.result;
+              }
+            }
+          },
+      // 将以base64的图片url数据转换为Blob
+      convertBase64UrlToBlob(urlData) {
+        var bytes = window.atob(urlData.split(',')[1]); //去掉url的头,并转换为byte
+        //处理异常,将ascii码小于0的转换为大于0
+        var ab = new ArrayBuffer(bytes.length);
+        var ia = new Uint8Array(ab);
+        for (var i = 0; i < bytes.length; i++) {
+          ia[i] = bytes.charCodeAt(i);
+        }
+        return new Blob([ab], {type: 'image/jpg'});
+      },
+      // 将以base64的图片url数据转换为file
+      dataURLtoFile(dataurl, filename) { //将base64转换为文件
+        var arr = dataurl.split(','),
+        mime = arr[0].match(/:(.*?);/)[1],
+        bstr = atob(arr[1]),
+        n = bstr.length,
+        u8arr = new Uint8Array(n);
+        while (n--) {
+          u8arr[n] = bstr.charCodeAt(n);
+        }
+        return new File([u8arr], filename, {type: mime});
+      },
+
+    }
+  }
+</script>
+<style lang="less" scoped>
+  .img-wrap{
+    font-size: .3rem;
+    .name{
+      color: #000;
+      margin-bottom: .36rem;
+      font-weight: 700;
+    }
+    .upload-imgs{
+      margin-bottom: .2rem;
+      li{
+        
+      }
+    }
+  }
+</style>

+ 11 - 4
src/components/DiagTreat.vue

@@ -4,12 +4,13 @@
         v-if="datas&&datas.moduleDetailDTOList"
         :key="it.id">
       <div class="label" v-if="it.controlType==0">
-        <h3>{{it.name}}</h3>
+        <p class="quest">{{it.name}}</p>
         <span class="symp" v-for="item in it.questionMapping">{{item.name}}</span>
       </div>
+      <UploadImg v-if="it.controlType==4" :item="it"/>
     </div>
     <div class="result">
-      <h4>治疗情况</h4>
+      <p class="title">治疗情况</p>
       <p>经典款了估计的结果</p>
     </div>
     <div class="foot">
@@ -19,6 +20,7 @@
   </div>
 </template>
 <script type="text/javascript">
+  import UploadImg from '../common/UploadImg.vue'
   export default {
     name:'DiagTreat',
     data(){
@@ -35,6 +37,9 @@
       toNext(){
         this.$emit('next');
       }
+    },
+    components:{
+      UploadImg
     }
   }
 </script>
@@ -42,9 +47,10 @@
 @import '../less/base.less';
   .treat-wrap{
     font-size: .3rem;
-    h3{
+    .quest{
       color: #000;
       margin-bottom: .36rem;
+      font-weight: 700;
     }
     .label{
       padding-bottom: .2rem;
@@ -65,11 +71,12 @@
       }
     }
     .result{
-      h4{
+      .title{
         color: #4F50FF;
         padding-left: .1rem;
         border-left: .08rem solid #4F50FF;
         margin-bottom: .19rem;
+        font-weight: 700;
       }
       p{
         color: #666;

+ 6 - 4
src/components/Others.vue

@@ -4,12 +4,12 @@
         v-if="datas&&datas.moduleDetailDTOList"
         :key="it.id">
       <div class="label" v-if="it.controlType==0">
-        <h3>{{it.name}}</h3>
+        <p class="quest">{{it.name}}</p>
         <span class="symp" v-for="item in it.questionMapping">{{item.name}}</span>
       </div>
     </div>
     <div class="result">
-      <h4>治疗情况</h4>
+      <p class="title">其他病史</p>
       <p>结果</p>
     </div>
     <div class="foot">
@@ -42,9 +42,10 @@
 @import '../less/base.less';
   .other-wrap{
     font-size: .3rem;
-    h3{
+    .quest{
       color: #000;
       margin-bottom: .36rem;
+      font-weight: 700;
     }
     .label{
       padding-bottom: .2rem;
@@ -65,11 +66,12 @@
       }
     }
     .result{
-      h4{
+      .title{
         color: #4F50FF;
         padding-left: .1rem;
         border-left: .08rem solid #4F50FF;
         margin-bottom: .19rem;
+        font-weight: 700;
       }
       p{
         color: #666;

+ 7 - 5
src/components/Symptom.vue

@@ -1,21 +1,21 @@
 <template>
   <div class="symp-wrap">
     <div class="choose" v-if="chooseSymp.length>0">
-      <h3>已选症状</h3>
+      <p class="quest">已选症状</p>
       <p class="choo-symp" v-for="(v,i) in chooseSymp">
         <span>{{v.name}}</span>
         <span @click="deletSymp(v,i)"><img src="../images/delete.png" alt=""></span>
       </p>
     </div>
     <div class="label">
-      <h3>请问您有哪些不适?</h3>
+      <p class="quest">请问您有哪些不适?</p>
       <span class="symp" 
       v-for="(it,ind) in symp" 
       :key="it.conceptId"
       @click="showDetil(it)">{{it.name}}</span>
     </div>
     <div class="result" v-if="JSON.stringify(checkText) !== '{}'">
-      <h4>症状情况</h4>
+      <p class="title">症状情况</p>
       <p v-for="(value,key,index) in checkText">{{value}}</p>
     </div>
     <div :class="['footer',{'nofoot':chooseSymp.length==0}]" @click="toNext">下一步</div>
@@ -196,9 +196,10 @@ import Toast from '../common/Toast.vue';
 @import '../less/base.less';
   .symp-wrap{
     font-size: .3rem;
-    h3{
+    .quest{
       color: #000;
       margin-bottom: .36rem;
+      font-weight: 700;
     }
   }
   .choose{
@@ -248,11 +249,12 @@ import Toast from '../common/Toast.vue';
     }
   }
   .result{
-    h4{
+    .title{
       color: #4F50FF;
       padding-left: .1rem;
       border-left: .08rem solid #4F50FF;
       margin-bottom: .19rem;
+      font-weight: 700;
     }
     p{
       color: #666;

BIN
src/images/pic.png


+ 1 - 1
src/less/base.less

@@ -1,6 +1,6 @@
 // 公用less
 @font-size: 13.33333333vw !important;
-
+@theme-color:#4F50FF;
 .mask{
   width:100%;
   height: 100%;