|
@@ -1,11 +1,11 @@
|
|
|
<template>
|
|
<template>
|
|
|
<div class="nfc-popup">
|
|
<div class="nfc-popup">
|
|
|
- <van-popup v-model="visible" get-container="nfc-popup" lock-scroll>
|
|
|
|
|
|
|
+ <van-popup v-model="visible" get-container="nfc-popup" lock-scroll :close-on-click-overlay="closeOverlay">
|
|
|
<div class="nfc-panel">
|
|
<div class="nfc-panel">
|
|
|
<div>
|
|
<div>
|
|
|
<p v-if="showBottomBox" class="top-text">将手机背部靠近NFC标签扫描</p>
|
|
<p v-if="showBottomBox" class="top-text">将手机背部靠近NFC标签扫描</p>
|
|
|
<div class="image-box">
|
|
<div class="image-box">
|
|
|
- <img class="nfc-image" v-show="nfcImage" :src="nfcImage" alt="">
|
|
|
|
|
|
|
+ <img class="nfc-image" v-show="nfcImage" :src="nfcImage" alt="" @click="nfcTakePhotos">
|
|
|
</div>
|
|
</div>
|
|
|
<div v-if="showBottomBox" class="bottom-box">
|
|
<div v-if="showBottomBox" class="bottom-box">
|
|
|
<div>
|
|
<div>
|
|
@@ -17,6 +17,10 @@
|
|
|
<span @click="nfcTakePhotos">拍照</span>
|
|
<span @click="nfcTakePhotos">拍照</span>
|
|
|
</div>
|
|
</div>
|
|
|
</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>
|
|
|
|
|
+ </div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
<input v-show="false" ref="upload" type='file' accept="image/*" @change="fileChange"/>
|
|
<input v-show="false" ref="upload" type='file' accept="image/*" @change="fileChange"/>
|
|
@@ -25,49 +29,86 @@
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
<script>
|
|
|
|
|
+import SelectCell from "@/components/selectCell";
|
|
|
import {baseImg} from "@/views/menu/LZRegister/api";
|
|
import {baseImg} from "@/views/menu/LZRegister/api";
|
|
|
import {upload} from "@/api/public";
|
|
import {upload} from "@/api/public";
|
|
|
import ImageCompressor from "js-image-compressor";
|
|
import ImageCompressor from "js-image-compressor";
|
|
|
export default {
|
|
export default {
|
|
|
- name: "index",
|
|
|
|
|
|
|
+ components:{SelectCell},
|
|
|
data(){
|
|
data(){
|
|
|
return {
|
|
return {
|
|
|
//nfc弹窗
|
|
//nfc弹窗
|
|
|
visible:false,
|
|
visible:false,
|
|
|
- //nfc图片(base64)
|
|
|
|
|
|
|
+ //上传的nfc图片
|
|
|
nfcImage:null,
|
|
nfcImage:null,
|
|
|
//是否显示底部按钮
|
|
//是否显示底部按钮
|
|
|
showBottomBox:true,
|
|
showBottomBox:true,
|
|
|
|
|
+ //nfc数据
|
|
|
|
|
+ dataList:[],
|
|
|
|
|
+ //选中的nfc
|
|
|
|
|
+ selectNFC:null,
|
|
|
|
|
+ //自定义字段
|
|
|
|
|
+ prop:{
|
|
|
|
|
+ label:'checkName',
|
|
|
|
|
+ value:'nfccdoe'
|
|
|
|
|
+ },
|
|
|
|
|
+ //是否可点击遮罩层关闭
|
|
|
|
|
+ closeOverlay:true,
|
|
|
|
|
+ showBtn:false,
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
watch:{
|
|
watch:{
|
|
|
visible(val){
|
|
visible(val){
|
|
|
- if(val){
|
|
|
|
|
- this.nfcImage = null;
|
|
|
|
|
- this.showBottomBox = true;
|
|
|
|
|
|
|
+ if(!this.visible){
|
|
|
|
|
+ this.clear();
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
methods:{
|
|
methods:{
|
|
|
|
|
+ onConfirm(){
|
|
|
|
|
+ let data = {
|
|
|
|
|
+ nfcCode:this.selectNFC,
|
|
|
|
|
+ url:this.nfcImage,
|
|
|
|
|
+ }
|
|
|
|
|
+ this.$emit('change',data);
|
|
|
|
|
+ this.visible = false;
|
|
|
|
|
+ this.clear();
|
|
|
|
|
+ },
|
|
|
|
|
+ //切换nfc后可点击退出
|
|
|
|
|
+ changeNFC(){
|
|
|
|
|
+ this.showBtn = true;
|
|
|
|
|
+ },
|
|
|
|
|
+ //清空数据
|
|
|
|
|
+ clear(){
|
|
|
|
|
+ this.nfcImage = null;
|
|
|
|
|
+ this.showBottomBox = true;
|
|
|
|
|
+ this.selectNFC = null;
|
|
|
|
|
+ this.dataList = [];
|
|
|
|
|
+ this.closeOverlay = true;
|
|
|
|
|
+ },
|
|
|
|
|
+ //显示弹窗
|
|
|
|
|
+ show(list){
|
|
|
|
|
+ this.visible = true;
|
|
|
|
|
+ this.dataList = list;
|
|
|
|
|
+ console.log(this.dataList,'datalist')
|
|
|
|
|
+ },
|
|
|
//上传前
|
|
//上传前
|
|
|
async fileChange(e){
|
|
async fileChange(e){
|
|
|
let file = e.target.files[0];
|
|
let file = e.target.files[0];
|
|
|
- let fileName = e.target.files[0].name;
|
|
|
|
|
|
|
+ // let fileName = e.target.files[0].name;
|
|
|
let imgFile = await this.imageCompress(file);
|
|
let imgFile = await this.imageCompress(file);
|
|
|
- console.log(imgFile,'imgFile')
|
|
|
|
|
let formData = new FormData();
|
|
let formData = new FormData();
|
|
|
formData.append('file',imgFile);
|
|
formData.append('file',imgFile);
|
|
|
upload(formData,'image').then(res=>{
|
|
upload(formData,'image').then(res=>{
|
|
|
- console.log(res,'resssss')
|
|
|
|
|
- this.nfcImage = baseImg.base;
|
|
|
|
|
- this.$emit('change',baseImg)
|
|
|
|
|
|
|
+ //上传成功后,将图片显示在页面上并禁用退出
|
|
|
|
|
+ this.nfcImage = res.data.url;
|
|
|
this.showBottomBox = false;
|
|
this.showBottomBox = false;
|
|
|
|
|
+ this.closeOverlay = false;
|
|
|
})
|
|
})
|
|
|
-
|
|
|
|
|
},
|
|
},
|
|
|
//压缩图片
|
|
//压缩图片
|
|
|
imageCompress(file){
|
|
imageCompress(file){
|
|
|
- let imageCom = new Promise((resolve,reject)=>{
|
|
|
|
|
|
|
+ return new Promise((resolve,reject)=>{
|
|
|
new ImageCompressor({
|
|
new ImageCompressor({
|
|
|
file,
|
|
file,
|
|
|
quality: 0.6,
|
|
quality: 0.6,
|
|
@@ -88,7 +129,6 @@ export default {
|
|
|
},
|
|
},
|
|
|
});
|
|
});
|
|
|
});
|
|
});
|
|
|
- return imageCom;
|
|
|
|
|
},
|
|
},
|
|
|
//拍照
|
|
//拍照
|
|
|
nfcTakePhotos(){
|
|
nfcTakePhotos(){
|
|
@@ -122,6 +162,7 @@ export default {
|
|
|
.image-box{
|
|
.image-box{
|
|
|
width: 100%;
|
|
width: 100%;
|
|
|
height: 350px;
|
|
height: 350px;
|
|
|
|
|
+ padding: 20px;
|
|
|
display: flex;
|
|
display: flex;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
justify-content: center;
|
|
@@ -129,6 +170,7 @@ export default {
|
|
|
.nfc-image{
|
|
.nfc-image{
|
|
|
width: 300px;
|
|
width: 300px;
|
|
|
height: 300px;
|
|
height: 300px;
|
|
|
|
|
+ background-color: #fff;
|
|
|
}
|
|
}
|
|
|
.bottom-box{
|
|
.bottom-box{
|
|
|
display: flex;
|
|
display: flex;
|