222

src/views/Author.vue

@@ -5,9 +5,9 @@
       <mt-field label="授权人电话" placeholder="请输入法人电话" type="tel" v-model="auInfo.tel"></mt-field>
       <mt-field label="身份证号" placeholder="请输入法人身份证号" v-model="auInfo.num"></mt-field>
       <div class="wrap-box">
-        <uploader msg="身份证正面"></uploader>
+        <uploader title="身份证正面" v-model="imgurl1"></uploader>
-        <uploader msg="身份证反面"></uploader>
+        <uploader title="身份证背面" v-model="imgurl2"></uploader>
-        <uploader msg="授权书(公章)"></uploader>
+        <uploader title="授权（公章）" v-model="imgurl3"></uploader>
       </div>
     </div>
     <router-link to="/mine/company/result" class="btn-box" @click.native="addfirm">提交</router-link>
@@ -18,6 +18,9 @@
   export default{
     data(){
       return {
+        imgurl1:'',
+        imgurl2:'',
+        imgurl3:'',
         frimList: this.$store.state.frimList,
         auInfo:{
           name:"",
@@ -73,4 +76,13 @@
       box-shadow: 0 0 20px 5px rgba(96, 192, 255, 0.35);
     }
   }
+</style>
+<style>
+  .wrap-ctnr{
+    .mint-cell-title{
+      margin-right: 20px;
+      width: 1.865672rem;
+      font-size: 28px;
+    }
+  }
 </style>

src/views/FirmInfo.vue

@@ -6,7 +6,7 @@
       <mt-field label="企业地址" placeholder="请输入企业地址" v-model="firm.num"></mt-field>
       <mt-field label="营业执照" placeholder="请输入营业执照号" v-model="firm.permit"></mt-field>
       <div class="wrap-box">
-        <uploader msg="上传营业执照"></uploader>
+        <uploader title="上传营业执照" v-model="imgurl"></uploader>
       </div>
     </div>
     <router-link to="/mine/company/legal" class="btn-box" @click.native="send">下一步</router-link>
@@ -17,7 +17,7 @@
   export default{
     data(){
       return {
-        state:"legal",
+        imgurl:'',
         frimList: this.$store.state.frimList,
         firm:{
           name:"",
@@ -74,4 +74,13 @@
       box-shadow: 0 0 20px 5px rgba(96, 192, 255, 0.35);
     }
   }
+</style>
+<style>
+  .wrap-ctnr{
+    .mint-cell-title{
+      margin-right: 20px;
+      width: 1.865672rem;
+      font-size: 28px;
+    }
+  }
 </style>

src/views/Legal.vue

@@ -1,12 +1,12 @@
 <template>
-  <div class="wrap-ctnr" v-if="state == 'legal'">
+  <div class="wrap-ctnr">
     <div class="info-ctnr">
       <mt-field label="法人姓名" placeholder="请输入法人姓名" v-model="legalInfo.name"></mt-field>
       <mt-field label="法人电话" placeholder="请输入法人电话" type="tel" v-model="legalInfo.tel"></mt-field>
       <mt-field label="身份证号" placeholder="请输入法人身份证号" v-model="legalInfo.num"></mt-field>
       <div class="wrap-box">
-        <uploader msg="身份证正面"></uploader>
+        <uploader title="身份证正面" v-model="imgurl1"></uploader>
-        <uploader msg="身份证反面"></uploader>
+        <uploader title="身份证背面" v-model="imgurl2"></uploader>
       </div>
     </div>
     <router-link to="/mine/company/author" class="btn-box">下一步</router-link>
@@ -17,7 +17,8 @@
   export default{
     data(){
       return {
-        state:"legal",
+        imgurl1:'',
+        imgurl2:'',
         legalInfo:{
           name:"",
           tel:"",
@@ -68,4 +69,13 @@
       box-shadow: 0 0 20px 5px rgba(96, 192, 255, 0.35);
     }
   }
+</style>
+<style>
+  .wrap-ctnr{
+    .mint-cell-title{
+      margin-right: 20px;
+      width: 1.865672rem;
+      font-size: 28px;
+    }
+  }
 </style>

src/views/Uploader.vue

@@ -1,63 +1,81 @@
 <template>
   <div class="loader-ctnr">
-    <div class="loader-box">
+    <p class="loader-box" v-show="!value" @click="handleClick"></p>
-      <img src="../assets/img/camera.png" id="pic">
+    <div class="delete-box" v-if="value">
+      <img :src="value">
+      <i class="close-btn" @click="handleDelete">x</i>
     </div>
-    <p>{{msg}}</p>
+    <p class="loader-text">{{ title }}</p>
+    <input style="display:none" type="file" ref="upload" @change="handleSelect">
+    <!-- ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例 -->
   </div>
 </template>
 <script type="text/javascript">
   export default{
-    props:["msg"],
+    props:{
+      title:String,
+      value:{
+        required: true,
+      }
+    },
     methods:{
-      upLoadImg:function(obj){
+      handleClick() {
-        var file = obj.files[0];
+        this.$refs.upload.click()//这里为什么是用click?而不是change
-        console.log(obj);console.log(file);
+      },
-        console.log("file.size = " + file.size);  //file.size 单位为byte
+      handleSelect(ev) {//这里的ev是事件对象,但是怎么获取？如果点击获取，那么不是可以不用传入吗？
-        var reader = new FileReader();
+        var file = ev.target.files[0];
-        //读取文件过程方法
-        reader.onloadstart = function (e) {
-            console.log("开始读取....");
-        }
-        reader.onprogress = function (e) {
-            console.log("正在读取中....");
-        }
-        reader.onabort = function (e) {
-            console.log("中断读取....");
-        }
-        reader.onerror = function (e) {
-            console.log("读取异常....");
-        }
-        reader.onload = function (e) {
-            console.log("成功读取....");
 
-          var img = document.getElementById("pic");
+        if (FileReader) {
-          img.src = e.target.result;
+          const reader = new FileReader();
-          //或者 img.src = this.result;  //e.target == this
+          reader.readAsDataURL(file);
+          reader.onloadend = ev => {
+            this.$emit('input',ev.target.result);//此处的input是指input事件
+            //ev.target是对事件起源目标的引用，它是个只读属性，此处指reader，
+            //因为onloadend也是一个事件
+          }
         }
-
+      },
-        reader.readAsDataURL(file)
+      handleDelete() {
+        const obj = this.$refs.upload;
+        obj.value = '';//更改了input的value值
+        this.$emit('input','');//更改父组件的value值
       }
     }
   }
 </script>
 <style scoped>
   .loader-ctnr{
-    display: inline-block;
+    padding: 20px 0;
-    padding-top: 0.266525rem;
-    padding-bottom: 0.333156rem;
     .loader-box{
       width: 1.865672rem;
       height: 1.865672rem;
-      margin: 0 auto;
+      border: 2px solid #60c0ff;
-      border:2px solid #60c0ff;
       border-radius: 10px;
-      line-height: 2.265672rem;
+      background: url(../assets/img/camera.png) no-repeat center;
+      background-size: auto 0.746269rem;
+      margin: 0 auto;
+    }
+    .delete-box{
+      position: relative;
       img{
-        width: 0.746269rem;
+        width: 1.865672rem;
+        height: 1.865672rem;
+      }
+      .close-btn{
+        color: red;
+        position: absolute;
+        top: 0;
+        right: 0;
+        background-color: rgba(0,0,0,0.3);
+        font-size: 32px;
+        border-radius: 50%;
+        width: 0.533049rem;
+        height: 0.533049rem;
+        text-align: center;
+        line-height: 0.533049rem;
       }
     }
-    p{
+    .loader-text{
       font-size: 0.373134rem;
       margin-top: 0.199893rem;
     }