feat:文件上传

src/modules/home/components/SignForm.vue

@@ -97,6 +97,7 @@
           </div>
         </van-form>
         <div class="btn_operate">
+          <div v-if="isUpload === true" @click="showPopup" class="btn_import">批量导入人员</div>
           <img src="https://webapp-pub.ezijing.com/highway/h5/form_add.png" class="btn_add" @click="handleAdd" />
         </div>
       </div>
@@ -118,6 +119,27 @@
         >
       </div>
     </div>
+    <van-popup
+      round
+      closeable
+      close-icon-position="top-right"
+      v-model="idShowPopup"
+      position="bottom"
+      :style="{ height: '30%' }"
+      class="main_upload"
+    >
+      <van-uploader
+        v-model="fileList"
+        :before-read="handleBeforeRead"
+        :after-read="handleAfterRead"
+        accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
+        :max-count="1"
+        :upload-icon="icon"
+      >
+      </van-uploader>
+      <div class="upload_tips">*仅支持上传文件</div>
+      <van-button class="upload_btn" @click="idShowPopup = false">确定</van-button>
+    </van-popup>
   </div>
 </template>
 
@@ -134,15 +156,50 @@ export default {
 
   data() {
     return {
+      isUpload: true, // 是否显示批量导入人员按钮
+      icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/highway/h5/form_add.png',
       title: '报名',
       checkedPay: false, // 勾选是否跳过按钮
       index: 0,
       cIndex: 0,
-      minDate: new Date()
+      minDate: new Date(),
+      fileList: [],
+      idShowPopup: false
     }
   },
-  mounted() {},
+  mounted() {
+    console.log(this.data, 'user_fields')
+  },
   methods: {
+    // 弹出批量导入人员的弹框
+    showPopup() {
+      this.idShowPopup = true
+    },
+    // 上传前置处理
+    handleBeforeRead(file) {
+      console.log(file, 'ppppp')
+      if (file.type !== 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') {
+        Toast('请上传正确的文件格式')
+        return false
+      }
+      return true
+    },
+    // 上传文件后的处理
+    handleAfterRead(file) {
+      console.log(file)
+      const params = new FormData()
+      params.append('file', file.file)
+      // const config = {
+      //   headers: {
+      //     // 添加请求头
+      //     'Content-Type': 'multipart/form-data'
+      //   }
+      // }
+      // 接口请求
+      // handleAfterRead().then(res => {})
+
+      // 此时可以自行将文件上传至服务器
+    },
     isRemoveInfo(item) {
       return !!item.find(f => f.enable_edit === false)
     },
@@ -304,7 +361,22 @@ export default {
       }
     }
     .btn_operate {
-      float: right;
+      margin-top: 0.15rem;
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      .btn_import {
+        width: 2.35rem;
+        height: 0.81rem;
+        line-height: 0.81rem;
+        background: rgba(255, 255, 255, 0.39);
+        box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.09);
+        border-radius: 0.44rem;
+        font-size: 0.28rem;
+        font-weight: 400;
+        color: #333333;
+        text-align: center;
+      }
       img {
         width: 0.5072rem;
         height: 0.5072rem;
@@ -337,16 +409,18 @@ export default {
     .main_footer_bottom {
       margin-top: -0.18rem;
       cursor: pointer;
+      width: 6.9rem;
+      display: flex;
+      justify-content: center;
 
+      align-items: center;
       .main_content_btn {
-        width: 6.9rem;
         background: #b80140;
         color: #ffffff;
         margin-left: 0.28rem;
         margin-top: -0.18rem;
       }
       .main_content_btn1 {
-        width: 6.9rem;
         background: #b80140;
         color: #ffffff;
         margin-left: 0.28rem;
@@ -354,6 +428,22 @@ export default {
       }
     }
   }
+  .main_upload {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    flex-direction: column;
+    .upload_tips {
+      color: #b80140;
+      font-size: 0.16rem;
+    }
+    .upload_btn {
+      border-radius: 3rem;
+      width: 3rem;
+      background: #b80140;
+      color: #ffffff;
+    }
+  }
 }
 ::v-deep {
   .van-checkbox__icon {
@@ -365,5 +455,9 @@ export default {
     height: 100%;
     border-radius: 0.1rem;
   }
+  .van-uploader__upload {
+    width: 120px;
+    height: 120px;
+  }
 }
 </style>

src/modules/home/views/SignMainPage.vue

@@ -32,7 +32,6 @@
 
 <script>
 import { Dialog } from 'vant'
-
 import allFormList from '@/utils/formList'
 import SignForm from '../components/SignForm.vue'
 import ImgShow from '../components/ImgShow.vue'
@@ -208,7 +207,7 @@ export default {
         item.num = index + 1
         return item
       })
-      // console.log(this.stepList, 'steplist')
+      console.log(this.stepList, 'steplist')
     },
     handlePrev() {
       if (this.stepIndex <= 0) {