|  | @@ -1,12 +1,15 @@
 | 
	
		
			
				|  |  |  <template>
 | 
	
		
			
				|  |  |    <div class="nfc-popup">
 | 
	
		
			
				|  |  | -    <van-popup v-model="visible" get-container="nfc-popup" lock-scroll :close-on-click-overlay="closeOverlay">
 | 
	
		
			
				|  |  | +    <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="" @click="nfcTakePhotos">
 | 
	
		
			
				|  |  | +            <img class="background-image" v-if="!nfcImage" src="../../assets/img/NFCphone.png" alt="" >
 | 
	
		
			
				|  |  | +            <img class="nfc-image" v-else :src="nfcImage" alt="" @click="nfcTakePhotos">
 | 
	
		
			
				|  |  |            </div>
 | 
	
		
			
				|  |  | +          <p v-if="file" style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{'文件名:'+file}}</p>
 | 
	
		
			
				|  |  | +          <p v-if="imageError">{{'Error:'+imageError}}</p>
 | 
	
		
			
				|  |  |            <div v-if="showBottomBox" class="bottom-box">
 | 
	
		
			
				|  |  |              <div>
 | 
	
		
			
				|  |  |                <img :src="require('../../assets/img/icon/NFC扫描-01.png')" />
 | 
	
	
		
			
				|  | @@ -18,8 +21,8 @@
 | 
	
		
			
				|  |  |              </div>
 | 
	
		
			
				|  |  |            </div>
 | 
	
		
			
				|  |  |            <div v-else>
 | 
	
		
			
				|  |  | -            <select-cell title="点击选择NFC列表" @change="changeNFC" v-model="selectNFC" :prop="prop" :dataList="dataList"/>
 | 
	
		
			
				|  |  | -            <van-button v-if="showBtn" type="primary"  size="small" block plain @click="onConfirm">确定</van-button>
 | 
	
		
			
				|  |  | +            <select-cell title="需要拍照的NFC" @change="changeNFC" v-model="selectNFC" :prop="prop" :dataList="dataList"/>
 | 
	
		
			
				|  |  | +            <van-button v-if="showBtn" type="info"  size="small" block @click="onConfirm">确认该照片</van-button>
 | 
	
		
			
				|  |  |            </div>
 | 
	
		
			
				|  |  |          </div>
 | 
	
		
			
				|  |  |        </div>
 | 
	
	
		
			
				|  | @@ -33,6 +36,7 @@ import SelectCell from "@/components/selectCell";
 | 
	
		
			
				|  |  |  import {baseImg} from "@/views/menu/LZRegister/api";
 | 
	
		
			
				|  |  |  import {upload} from "@/api/public";
 | 
	
		
			
				|  |  |  import ImageCompressor from "js-image-compressor";
 | 
	
		
			
				|  |  | +import config from "@/config";
 | 
	
		
			
				|  |  |  export default {
 | 
	
		
			
				|  |  |    components:{SelectCell},
 | 
	
		
			
				|  |  |    data(){
 | 
	
	
		
			
				|  | @@ -54,7 +58,10 @@ export default {
 | 
	
		
			
				|  |  |        },
 | 
	
		
			
				|  |  |        //是否可点击遮罩层关闭
 | 
	
		
			
				|  |  |        closeOverlay:true,
 | 
	
		
			
				|  |  | +      //提交按钮
 | 
	
		
			
				|  |  |        showBtn:false,
 | 
	
		
			
				|  |  | +      file:null,
 | 
	
		
			
				|  |  | +      imageError:null
 | 
	
		
			
				|  |  |      }
 | 
	
		
			
				|  |  |    },
 | 
	
		
			
				|  |  |    watch:{
 | 
	
	
		
			
				|  | @@ -66,9 +73,15 @@ export default {
 | 
	
		
			
				|  |  |    },
 | 
	
		
			
				|  |  |    methods:{
 | 
	
		
			
				|  |  |      onConfirm(){
 | 
	
		
			
				|  |  | +      if(!this.selectNFC) return this.$toast('请选择NFC');
 | 
	
		
			
				|  |  | +      let url =
 | 
	
		
			
				|  |  | +        process.env.NODE_ENV === "development"
 | 
	
		
			
				|  |  | +          ?  config.baseUrl + this.nfcImage
 | 
	
		
			
				|  |  | +          : window.origin + this.nfcImage;
 | 
	
		
			
				|  |  |        let data = {
 | 
	
		
			
				|  |  |          nfcCode:this.selectNFC,
 | 
	
		
			
				|  |  | -        url:this.nfcImage,
 | 
	
		
			
				|  |  | +        urlPath:this.nfcImage,
 | 
	
		
			
				|  |  | +        url
 | 
	
		
			
				|  |  |        }
 | 
	
		
			
				|  |  |        this.$emit('change',data);
 | 
	
		
			
				|  |  |        this.visible = false;
 | 
	
	
		
			
				|  | @@ -85,6 +98,8 @@ export default {
 | 
	
		
			
				|  |  |        this.selectNFC = null;
 | 
	
		
			
				|  |  |        this.dataList = [];
 | 
	
		
			
				|  |  |        this.closeOverlay = true;
 | 
	
		
			
				|  |  | +      this.file = null;
 | 
	
		
			
				|  |  | +      this.imageError = null;
 | 
	
		
			
				|  |  |      },
 | 
	
		
			
				|  |  |      //显示弹窗
 | 
	
		
			
				|  |  |      show(list){
 | 
	
	
		
			
				|  | @@ -95,6 +110,7 @@ export default {
 | 
	
		
			
				|  |  |      //上传前
 | 
	
		
			
				|  |  |      async fileChange(e){
 | 
	
		
			
				|  |  |        let file = e.target.files[0];
 | 
	
		
			
				|  |  | +      this.file = e.target.files[0].name;
 | 
	
		
			
				|  |  |       // let fileName = e.target.files[0].name;
 | 
	
		
			
				|  |  |        let imgFile = await this.imageCompress(file);
 | 
	
		
			
				|  |  |        let formData = new FormData();
 | 
	
	
		
			
				|  | @@ -108,6 +124,7 @@ export default {
 | 
	
		
			
				|  |  |      },
 | 
	
		
			
				|  |  |      //压缩图片
 | 
	
		
			
				|  |  |      imageCompress(file){
 | 
	
		
			
				|  |  | +       this.file = file.name;
 | 
	
		
			
				|  |  |         return new Promise((resolve,reject)=>{
 | 
	
		
			
				|  |  |          new ImageCompressor({
 | 
	
		
			
				|  |  |            file,
 | 
	
	
		
			
				|  | @@ -125,6 +142,7 @@ export default {
 | 
	
		
			
				|  |  |            error: (e) => {
 | 
	
		
			
				|  |  |              console.log('imageError:'+e);
 | 
	
		
			
				|  |  |              this.$toast('图片压缩失败')
 | 
	
		
			
				|  |  | +            this.imageError = e;
 | 
	
		
			
				|  |  |              reject(e);
 | 
	
		
			
				|  |  |            },
 | 
	
		
			
				|  |  |          });
 | 
	
	
		
			
				|  | @@ -132,6 +150,8 @@ export default {
 | 
	
		
			
				|  |  |      },
 | 
	
		
			
				|  |  |      //拍照
 | 
	
		
			
				|  |  |      nfcTakePhotos(){
 | 
	
		
			
				|  |  | +      this.file = null;
 | 
	
		
			
				|  |  | +      this.imageError = null;
 | 
	
		
			
				|  |  |        this.$refs.upload.click();
 | 
	
		
			
				|  |  |      },
 | 
	
		
			
				|  |  |    }
 | 
	
	
		
			
				|  | @@ -149,8 +169,6 @@ export default {
 | 
	
		
			
				|  |  |  <style scoped lang="scss">
 | 
	
		
			
				|  |  |  .nfc-panel{
 | 
	
		
			
				|  |  |    width: 400px;
 | 
	
		
			
				|  |  | -  background:url('../../assets/img/NFCphone.png') center no-repeat;
 | 
	
		
			
				|  |  | -  background-size: 50%;
 | 
	
		
			
				|  |  |    >div{
 | 
	
		
			
				|  |  |      padding: 30px;
 | 
	
		
			
				|  |  |    }
 | 
	
	
		
			
				|  | @@ -162,19 +180,22 @@ export default {
 | 
	
		
			
				|  |  |  .image-box{
 | 
	
		
			
				|  |  |    width: 100%;
 | 
	
		
			
				|  |  |    height: 350px;
 | 
	
		
			
				|  |  | -  padding: 20px;
 | 
	
		
			
				|  |  |    display: flex;
 | 
	
		
			
				|  |  |    align-items: center;
 | 
	
		
			
				|  |  |    justify-content: center;
 | 
	
		
			
				|  |  |  }
 | 
	
		
			
				|  |  | +.background-image{
 | 
	
		
			
				|  |  | +  width:240px;
 | 
	
		
			
				|  |  | +  height: 240px;
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  |  .nfc-image{
 | 
	
		
			
				|  |  | -  width: 300px;
 | 
	
		
			
				|  |  | -  height: 300px;
 | 
	
		
			
				|  |  | +  width: 100%;
 | 
	
		
			
				|  |  | +  height: 100%;
 | 
	
		
			
				|  |  |    background-color: #fff;
 | 
	
		
			
				|  |  |  }
 | 
	
		
			
				|  |  |  .bottom-box{
 | 
	
		
			
				|  |  |    display: flex;
 | 
	
		
			
				|  |  | -  justify-content: space-around;
 | 
	
		
			
				|  |  | +  justify-content: space-around;//
 | 
	
		
			
				|  |  |    align-items: center;
 | 
	
		
			
				|  |  |    >div{
 | 
	
		
			
				|  |  |      display: flex;
 |