添加nfc弹窗组件

package.json

@@ -13,6 +13,7 @@
     "@riophae/vue-treeselect": "0.4.0",
     "amfe-flexible": "^2.2.1",
     "axios": "^1.3.4",
+    "browser-fs-access": "^0.34.1",
     "core-js": "^3.23.3",
     "dayjs": "^1.11.9",
     "js-image-compressor": "^2.0.0",

src/components/nfcPopup/alone.vue

@@ -0,0 +1,121 @@
+<template>
+  <div class="nfc-popup">
+    <van-popup v-model="visible" get-container="nfc-popup" lock-scroll>
+      <div class="nfc-panel">
+        <div>
+          <p v-if="showBottomBox" class="top-text">将手机背部靠近NFC标签扫描</p>
+          <div class="image-box">
+            <img class="nfc-image" v-show="nfcImage" :src="nfcImage" alt="">
+          </div>
+          <div v-if="showBottomBox" class="bottom-box">
+            <div>
+              <img :src="require('../../assets/img/icon/NFC扫描-01.png')" />
+              <span>NFC</span>
+            </div>
+            <div>
+              <img :src="require('../../assets/img/icon/camera.png')" />
+              <span @click="nfcTakePhotos">拍照</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <input v-show="false" ref="upload" type='file' accept="image/*" @change="fileChange"/>
+      <!--    <uploader v-show="false" ref="imageUpload" v-model="nfcImage" multiple :maxCount="1" :deletable="false"/>-->
+    </van-popup>
+  </div>
+</template>
+
+<script>
+import {baseImg} from "@/views/menu/LZRegister/api";
+export default {
+  name: "index",
+  data(){
+    return {
+      //nfc弹窗
+      visible:false,
+      //nfc图片(base64)
+      nfcImage:null,
+      //是否显示底部按钮
+      showBottomBox:true,
+    }
+  },
+  watch:{
+    visible(val){
+      if(val){
+        this.nfcImage = null;
+        this.showBottomBox = true;
+      }
+    }
+  },
+  methods:{
+    fileChange(e){
+      console.log(e.target.files[0],'file')
+      let file = e.target.files[0];
+      let fileName = e.target.files[0].name;
+      console.log(file,fileName,'file')
+      setTimeout(()=>{
+        this.nfcImage = baseImg.base;
+        this.$emit('change',baseImg)
+        this.showBottomBox = false;
+      },1000)
+    },
+    nfcTakePhotos(){
+      this.$refs.upload.click();
+    },
+  }
+}
+</script>
+<style lang="scss">
+#app{
+  .nfc-popup{
+    .van-popup--center{
+      border-radius: 20px;
+    }
+  }
+}
+</style>
+<style scoped lang="scss">
+.nfc-panel{
+  width: 400px;
+  background:url('../../assets/img/NFCphone.png') center no-repeat;
+  background-size: 50%;
+  >div{
+    padding: 30px;
+  }
+}
+.top-text{
+  text-align: center;
+  font-size: 26px;
+}
+.image-box{
+  width: 100%;
+  height: 350px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.nfc-image{
+  width: 300px;
+  height: 300px;
+}
+.bottom-box{
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  >div{
+    display: flex;
+    flex-direction: column;
+    &:active{
+      opacity: .5;
+    }
+    >img{
+      width: 70px;
+      height: 70px;
+    }
+    >span{
+      text-align: center;
+      font-size: 25px;
+    }
+  }
+}
+</style>

src/components/nfcPopup/more.vue

@@ -0,0 +1,121 @@
+<template>
+  <div class="nfc-popup">
+    <van-popup v-model="visible" get-container="nfc-popup" lock-scroll>
+      <div class="nfc-panel">
+        <div>
+          <p v-if="showBottomBox" class="top-text">将手机背部靠近NFC标签扫描</p>
+          <div class="image-box">
+            <img class="nfc-image" v-show="nfcImage" :src="nfcImage" alt="">
+          </div>
+          <div v-if="showBottomBox" class="bottom-box">
+            <div>
+              <img :src="require('../../assets/img/icon/NFC扫描-01.png')" />
+              <span>NFC</span>
+            </div>
+            <div>
+              <img :src="require('../../assets/img/icon/camera.png')" />
+              <span @click="nfcTakePhotos">拍照</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <input v-show="false" ref="upload" type='file' accept="image/*" @change="fileChange"/>
+      <!--    <uploader v-show="false" ref="imageUpload" v-model="nfcImage" multiple :maxCount="1" :deletable="false"/>-->
+    </van-popup>
+  </div>
+</template>
+
+<script>
+import {baseImg} from "@/views/menu/LZRegister/api";
+export default {
+  name: "index",
+  data(){
+    return {
+      //nfc弹窗
+      visible:false,
+      //nfc图片(base64)
+      nfcImage:null,
+      //是否显示底部按钮
+      showBottomBox:true,
+    }
+  },
+  watch:{
+    visible(val){
+      if(val){
+        this.nfcImage = null;
+        this.showBottomBox = true;
+      }
+    }
+  },
+  methods:{
+    fileChange(e){
+      console.log(e.target.files[0],'file')
+      let file = e.target.files[0];
+      let fileName = e.target.files[0].name;
+      console.log(file,fileName,'file')
+      setTimeout(()=>{
+        this.nfcImage = baseImg.base;
+        this.$emit('change',baseImg)
+        this.showBottomBox = false;
+      },1000)
+    },
+    nfcTakePhotos(){
+      this.$refs.upload.click();
+    },
+  }
+}
+</script>
+<style lang="scss">
+#app{
+  .nfc-popup{
+    .van-popup--center{
+      border-radius: 20px;
+    }
+  }
+}
+</style>
+<style scoped lang="scss">
+.nfc-panel{
+  width: 400px;
+  background:url('../../assets/img/NFCphone.png') center no-repeat;
+  background-size: 50%;
+  >div{
+    padding: 30px;
+  }
+}
+.top-text{
+  text-align: center;
+  font-size: 26px;
+}
+.image-box{
+  width: 100%;
+  height: 350px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.nfc-image{
+  width: 300px;
+  height: 300px;
+}
+.bottom-box{
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  >div{
+    display: flex;
+    flex-direction: column;
+    &:active{
+      opacity: .5;
+    }
+    >img{
+      width: 70px;
+      height: 70px;
+    }
+    >span{
+      text-align: center;
+      font-size: 25px;
+    }
+  }
+}
+</style>

src/views/login.vue

@@ -83,8 +83,8 @@ export default {
 <style scoped lang="scss">
 .login {
   height: 100vh;
-  background: url("../assets/img/登录背景2_app.png") top left no-repeat #edfcff;
-  background-size: 100% auto;
+  background: url("../assets/img/login-background.png") top left no-repeat #edfcff;
+  background-size: 100%;
   display: flex;
   justify-content: center;
   align-items: center;

src/views/menu/LZRegister/edit.vue

@@ -54,7 +54,7 @@
 
             </van-cell>
             <van-cell v-show="nfcImage.length > 0" :border="false" >
-              <uploader ref="imageUpload" v-model="nfcImage" multiple :maxCount="1" :deletable="false"/>
+              <img v-for="v in nfcImage" :src="nfcImage" alt="" :key="v.url">
             </van-cell>
           </div>
         </van-panel>
@@ -131,8 +131,7 @@
       </div >
 
       <p class="warning-msg">需要完成所有区域的履职内容才能提交内容</p>
-
-      <div class="flex-box" v-if="getDicts(taskInfo.status,'resumption_status') === '未开始' || '进行中' ">
+      <div class="flex-box" v-if="getDicts(taskInfo.status,'resumption_status') === '未开始' || getDicts(taskInfo.status,'resumption_status') === '进行中'">
         <van-button type="default" style="width: 28%;" plain  @click="goBack">取消</van-button>
         <van-button type="info" style="width: 28%;" plain hairline @click="saveData">保存</van-button>
         <van-button type="info" style="width: 28%;"  @click="submitData">提交</van-button>
@@ -140,26 +139,7 @@
     </div>
 
     <!--  nfc弹窗  -->
-    <transition name="van-fade">
-      <van-popup v-model="visible" get-container="lz-edit" lock-scroll>
-        <div class="nfc-panel">
-           <div>
-              <p class="top-text">将手机背部靠近NFC标签扫描</p>
-              <div class="bottom-box">
-                <div>
-                  <img :src="require('../../../assets/img/icon/NFC扫描-01.png')" />
-                  <span>NFC</span>
-                </div>
-                <div>
-                  <img :src="require('../../../assets/img/icon/camera.png')" />
-                  <span @click="nfcTakePhotos">拍照</span>
-                </div>
-              </div>
-            </div>
-        </div>
-      </van-popup>
-    </transition>
-
+    <nfc-popup ref="NfcPopup" @change="changeNfcImg"></nfc-popup>
   </div>
 </template>
 
@@ -168,10 +148,11 @@ import NavBar from '@/components/NavBar';
 import SelectCell from '@/components/selectCell';
 import DateCell from '@/components/dateCell';
 import Uploader from '@/components/upload';
+import NfcPopup from '@/components/nfcPopup/more';
 import {taskDetails,saveTaskData} from "@/views/menu/LZRegister/api";
 import {formatDate} from "@/filters/filter";
 export default {
-  components:{NavBar,SelectCell,DateCell,Uploader},
+  components:{NavBar,SelectCell,DateCell,Uploader,NfcPopup},
   data(){
     return {
       activeNames: ['1'],
@@ -195,8 +176,6 @@ export default {
       allCheckNum:0,
       //区域下检查项数量
       checkNum:0,
-      //nfc弹窗
-      visible:false,
       //nfc图片
       nfcImage:[
         { url: 'https://img01.yzcdn.cn/vant/leaf.jpg' },
@@ -371,7 +350,7 @@ export default {
       this.clearData();
     },
     clickNFC(){
-      this.visible = true;
+      this.$refs.NfcPopup.visible = true;
     },
     //清空数据
     clearData(){
@@ -383,25 +362,19 @@ export default {
       this.checkItemList = [];
       this.NFCNum = 0;
     },
-    nfcTakePhotos(){
-      let uploader = this.$refs.imageUpload;
-      console.log(uploader,'uploader')
-      uploader.chooseFiles();
-    },
     switchChange(item){
       console.log(item,'666')
       item.resTime = formatDate(new Date());
-    }
+    },
+    changeNfcImg(baseImg){
+      console.log(baseImg,'baseImg')
+      let arr = [];
+      arr.push({url:baseImg});
+      this.nfcImage = arr;
+    },
   }
 }
 </script>
-<style lang="scss">
-  .lz-edit{
-    .van-popup--center{
-      border-radius: 20px;
-    }
-  }
-</style>
 <style lang="scss" scoped>
   .lz-edit{
     height: 100%;
@@ -458,37 +431,4 @@ export default {
     color: #fff;
     background-color: #1989fa;
   }
-  .nfc-panel{
-    width: 400px;
-    background:url('../../../assets/img/NFCphone.png') center no-repeat;
-    background-size: 50%;
-    >div{
-      padding: 30px;
-    }
-  }
-  .top-text{
-    text-align: center;
-    font-size: 26px;
-  }
-  .bottom-box{
-    margin-top: 270px;
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
-    >div{
-      display: flex;
-      flex-direction: column;
-      &:active{
-        opacity: .5;
-      }
-      >img{
-        width: 70px;
-        height: 70px;
-      }
-      >span{
-        text-align: center;
-        font-size: 25px;
-      }
-    }
-  }
 </style>

yarn.lock

@@ -2266,6 +2266,11 @@ braces@^3.0.2, braces@~3.0.2:
   dependencies:
     fill-range "^7.0.1"
 
+browser-fs-access@^0.34.1:
+  version "0.34.1"
+  resolved "https://registry.npmmirror.com/browser-fs-access/-/browser-fs-access-0.34.1.tgz#76c14def4e664c4862c562fc51522def830a6b97"
+  integrity sha512-HPaRf2yimp8kWSuWJXc8Mi78dPbDzfduA+Gyq14H4jlMvd6XNfIRm36Y2yRLaa4x0gwcGuepj4zf14oiTlxrxQ==
+
 browserslist@^4.0.0, browserslist@^4.14.5, browserslist@^4.16.3, browserslist@^4.16.6, browserslist@^4.20.3:
   version "4.21.3"
   resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.21.3.tgz#5df277694eb3c48bc5c4b05af3e8b7e09c5a6d1a"
@@ -5801,11 +5806,6 @@ vue-hot-reload-api@^2.3.0:
   resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz#532955cc1eb208a3d990b3a9f9a70574657e08f2"
   integrity sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==
 
-vue-jstree@^2.1.6:
-  version "2.1.6"
-  resolved "https://registry.npmmirror.com/vue-jstree/-/vue-jstree-2.1.6.tgz#44827ad72953ed77da6590ce4e8f37f7787f8653"
-  integrity sha512-vtUmhLbfE2JvcnYNRXauJPkNJSRO/f9BTsbxV+ESXP/mMQPVUIYI4EkSHKSEOxVDHTU7SfLp/AxplmaAl6ctcg==
-
 vue-lazyload@1.2.3:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/vue-lazyload/-/vue-lazyload-1.2.3.tgz#901f9ec15c7e6ca78781a2bae4a343686bdedb2c"