|
@@ -40,18 +40,24 @@
|
|
|
placeholder="请输入身份证号"
|
|
|
/>
|
|
|
</div>
|
|
|
- <div class="mui-input-row">
|
|
|
+ <div class="mui-input-row" v-if="detail.isUpPhoto">
|
|
|
<label style="width: 50%"
|
|
|
- >人脸识别照片<i class="iconfont icon-tishi color4fc5f7"></i
|
|
|
+ >人脸识别照片<i class="iconfont icon-tishi color4fc5f7" @click="valert"></i
|
|
|
></label>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
<button
|
|
|
- class="mui-btn mui-btn-block mui-navigate-right"
|
|
|
- type="button"
|
|
|
- style="width: 50%"
|
|
|
- @click="chooseImage(detail)"
|
|
|
+ class="mui-btn mui-btn-block mui-navigate-right"
|
|
|
+ type="button"
|
|
|
+ style="width: 50%"
|
|
|
+
|
|
|
+ @click="clickMyFile(detail)"
|
|
|
>
|
|
|
- 请上传
|
|
|
+ <div v-if="!detail.photo">请上传</div>
|
|
|
+ <img v-if="detail.photo" :src="detail.photo">
|
|
|
</button>
|
|
|
+ <!--请上传-->
|
|
|
</div>
|
|
|
<div class="mui-input-row">
|
|
|
<label>来访单位</label>
|
|
@@ -133,17 +139,18 @@
|
|
|
placeholder="请输入单位名称"
|
|
|
/>
|
|
|
</div>
|
|
|
- <div class="mui-input-row">
|
|
|
+ <div class="mui-input-row" v-if="detail.isUpPhoto" >
|
|
|
<label style="width: 50%"
|
|
|
- >人脸识别照片<i class="iconfont icon-tishi color4fc5f7"></i
|
|
|
+ >人脸识别照片<i class="iconfont icon-tishi color4fc5f7" @click="valert"></i
|
|
|
></label>
|
|
|
<button
|
|
|
class="mui-btn mui-btn-block mui-navigate-right"
|
|
|
type="button"
|
|
|
style="width: 50%"
|
|
|
- @click="chooseImage(item)"
|
|
|
+ @click="clickMyFile(item)"
|
|
|
>
|
|
|
- 请上传
|
|
|
+ <div v-if="!item.photo">请上传</div>
|
|
|
+ <img v-if="item.photo" :src="item.photo">
|
|
|
</button>
|
|
|
</div>
|
|
|
<div class="mui-input-row" @click="del(index)" style="text-align: center;color: red">
|
|
@@ -199,8 +206,12 @@
|
|
|
<img src="~$project/assets/img/logo_02.png" width="100"/>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
+ <!--图片裁剪-->
|
|
|
+ <cropper :cwidth="cropperWidth" :cheight="cropperHeight" :visible="cropperVisible" :field="cropperField" :cropper="cropper"
|
|
|
+ @cropperFinish="cropperFinish" @cropperCancel="cropperCancel"></cropper>
|
|
|
<loading :visible="isLoading"></loading>
|
|
|
+ <input type="file" ref="myFile" style="display: none" class="mui-btn mui-btn-block mui-navigate-right" accept="image/*" @change="uploadPicture($event)"/>
|
|
|
+
|
|
|
|
|
|
</div>
|
|
|
</template>
|
|
@@ -212,6 +223,7 @@
|
|
|
import Loading from '$project/components/Loading.vue'
|
|
|
import TopHeader from '$project/components/TopHeader.vue'
|
|
|
import QRCode from 'qrcodejs2'
|
|
|
+ import Cropper from '$project/components/Cropper.vue'
|
|
|
|
|
|
import {
|
|
|
mapGetters,
|
|
@@ -229,7 +241,7 @@
|
|
|
components: {
|
|
|
Common,
|
|
|
Loading,
|
|
|
- TopHeader
|
|
|
+ TopHeader, Cropper
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
@@ -237,6 +249,7 @@
|
|
|
id: '',
|
|
|
step:'1',
|
|
|
detail: {
|
|
|
+ name:''
|
|
|
},
|
|
|
subForm:{
|
|
|
id:'',
|
|
@@ -250,6 +263,29 @@
|
|
|
},
|
|
|
isLoading: false,
|
|
|
qrCodeImg: '',
|
|
|
+ //隐藏裁剪图片
|
|
|
+ cropperCancel() {
|
|
|
+ this.cropperVisible = false;
|
|
|
+ },
|
|
|
+ cropperVisible: '',
|
|
|
+ cropperField: '',
|
|
|
+ cropperWidth: 250,
|
|
|
+ cropperHeight: 350,
|
|
|
+ cropper: {
|
|
|
+ img: '',
|
|
|
+ info: true,
|
|
|
+ size: 1,
|
|
|
+ outputType: 'jpeg',
|
|
|
+ canScale: false,
|
|
|
+ autoCrop: false,
|
|
|
+ // 只有自动截图开启 宽度高度才生效
|
|
|
+ autoCropWidth: 250,
|
|
|
+ autoCropHeight: 350,
|
|
|
+ fixed: true,
|
|
|
+ // 真实的输出宽高
|
|
|
+ infoTrue: true,
|
|
|
+ fixedNumber: [5, 7]
|
|
|
+ },
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
@@ -257,12 +293,19 @@
|
|
|
this.subForm.id=this.id;
|
|
|
},
|
|
|
methods: {
|
|
|
+ valert(){
|
|
|
+ mui.alert("该照片仅用于访客在访问期间,快速识别人脸进入时使用,访问结束后自动清除数据。",' ',['知道了'])
|
|
|
+ },
|
|
|
+ clickMyFile(mod){
|
|
|
+ this.indexModel=mod;
|
|
|
+ this.$refs.myFile.click();
|
|
|
+ },
|
|
|
save(){
|
|
|
if(this.subForm.list.length){
|
|
|
for(var m in this.subForm.list){
|
|
|
var mod =this.subForm.list[m]
|
|
|
if(!mod.name){
|
|
|
- mui.toast("请补全同行人姓名")
|
|
|
+ mui.toast("请填写同行人员的姓名")
|
|
|
return false;
|
|
|
}
|
|
|
}
|
|
@@ -289,8 +332,48 @@
|
|
|
return sz;
|
|
|
},
|
|
|
//微信选择图片
|
|
|
- chooseImage(mod) {
|
|
|
+ uploadPicture(event) {
|
|
|
+
|
|
|
+
|
|
|
+ var files = event.target.files;
|
|
|
+ var reader = new FileReader();
|
|
|
+ var _this=this;
|
|
|
+ if(files && files[0]) {
|
|
|
+ reader.onload = function (ev) {
|
|
|
+
|
|
|
+
|
|
|
+ var localData=ev.target.result;
|
|
|
+ if (localData.indexOf('data:image') != 0) {
|
|
|
+ //判断是否有这样的头部
|
|
|
+ localData = 'data:image/jpeg;base64,' + localData
|
|
|
+ }
|
|
|
+ localData = localData.replace(/\r|\n/g, '').replace('data:image/jgp', 'data:image/jpeg')
|
|
|
+ _this.imgBase64 = localData;
|
|
|
+ //显示裁剪图片
|
|
|
+ _this.showCropper('photo');
|
|
|
+ // _this.uploadpic();
|
|
|
+ }
|
|
|
+ reader.readAsDataURL(files[0]);
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ }, //显示裁剪图片
|
|
|
+ showCropper(field) {
|
|
|
+ this.cropper.img = this.imgBase64;
|
|
|
+ this.cropperField = field;
|
|
|
+ this.cropperVisible = true;
|
|
|
+ },
|
|
|
+ //裁剪图片
|
|
|
+ cropperFinish(obj) {
|
|
|
+ console.log(obj);
|
|
|
+ this.imgBase64 = obj.data;
|
|
|
+ this.uploadpic(obj.field);
|
|
|
+ this.cropperVisible = false;
|
|
|
+ },
|
|
|
+ //微信选择图片
|
|
|
+ chooseImageWx(mod) {
|
|
|
this.indexModel=mod;
|
|
|
+
|
|
|
WxJsApi.chooseImage().then(res => {
|
|
|
var localData = res.localData;
|
|
|
|
|
@@ -362,6 +445,11 @@
|
|
|
_this.isLoading = true;
|
|
|
API_To.update(_this.subForm).then(response => {
|
|
|
_this.step='3'
|
|
|
+ _this.isLoading = false;
|
|
|
+ //生成二维码
|
|
|
+ _this.$nextTick(() => {
|
|
|
+ _this.qrcode();
|
|
|
+ });
|
|
|
mui.toast("操作成功");
|
|
|
}).catch(error => {
|
|
|
_this.isLoading = false;
|
|
@@ -374,7 +462,7 @@
|
|
|
},
|
|
|
mounted() {
|
|
|
//获取微信配置
|
|
|
- WxJsApi.getWxConfig();
|
|
|
+ // WxJsApi.getWxConfig();
|
|
|
this.getDetail();
|
|
|
|
|
|
},
|
|
@@ -388,5 +476,7 @@
|
|
|
</script>
|
|
|
|
|
|
<style scoped src="$project/assets/css/xpwyfyy.css"></style>
|
|
|
+<style src="$project/assets/css/iconfont.css"></style>
|
|
|
+
|
|
|
<style>
|
|
|
</style>
|