admingit/MicroCommunityWeb
1
0
Fork 0
mirror of https://gitee.com/java110/MicroCommunityWeb.git synced 2026-02-24 05:46:03 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

加入访客拍照功能

Browse Source
This commit is contained in:
java110 2020-06-04 23:14:51 +08:00
parent 8af7a67397
commit 7f7472db2e
3 changed files with 87 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
public/components/property/addVisitCase/addVisitCase.html
View File

@ -11,9 +11,29 @@
<label class="col-sm-2 col-form-label">访客拜访事由</label>
<div class="col-sm-10">
<textarea v-model="addVisitCase.visitCase" type="text" placeholder="请填写访客拜访事由" rows="3"
class="form-control"></textarea>
class="form-control"></textarea>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">照片信息</label>
<div class="col-sm-5" style="text-align:center">
<video id="visitPhoto" style="width: 100%;"></video>
<canvas id="canvas" style="display:none;"></canvas>
<div style="margin-top:20px">
<button class="btn btn-primary" type="button" v-on:click="_takePhoto()"><span
class="glyphicon glyphicon-camera"></span> 拍照</button>
<span class="btn btn-default btn-file" v-on:click="_uploadPhoto($event)">
<span class="fileinput-new">上传照片</span>
</span>
<input type="file" class="file" accept="images/*" id="uploadVisitPhoto" hidden
v-on:change="_choosePhoto($event)">
</div>
</div>
<div class="col-sm-5"><img width="100%" height="100%"
v-bind:src="addVisitCase.visitPhoto" alt="访客照片"></div>
</div>
</div>
</div>
</div>

63
public/components/property/addVisitCase/addVisitCase.js
View File

@ -6,14 +6,16 @@
vc.extends({
data:{
addVisitCase:{
visitCase:""
visitCase:"",
videoPlaying:false,
visitPhoto:""
}
},
watch:{
addVisitCase:{
deep: true,
handler:function(){
vc.emit('addVisitSpace', 'visitCase', vc.component.addVisitCase.visitCase);
vc.emit('addVisitSpace', 'visitCase', vc.component.addVisitCase);
}
}
},
@ -38,6 +40,63 @@
vc.emit($props.callBackComponent,$props.callBackFunction, vc.component.addCarInfo);
return ;
}
},
_initAddVisitMedia: function () {
if (vc.component._addUserMedia()) {
vc.component.addVisitCase.videoPlaying = false;
var constraints = {
video: true,
audio: false
};
var video = document.getElementById('visitPhoto');
var media = navigator.getUserMedia(constraints, function (stream) {
var url = window.URL || window.webkitURL;
//video.src = url ? url.createObjectURL(stream) : stream;
try {
video.src = url ? url.createObjectURL(stream) : stream;
} catch (error) {
video.srcObject = stream;
}
video.play();
vc.component.addVisitCase.videoPlaying = true;
}, function (error) {
console.log("ERROR");
console.log(error);
});
} else {
console.log("初始化视频失败");
}
},
_takePhoto: function () {
if (vc.component.addVisitCase.videoPlaying) {
var canvas = document.getElementById('canvas');
var video = document.getElementById('visitPhoto');
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
canvas.getContext('2d').drawImage(video, 0, 0);
var data = canvas.toDataURL('image/jpeg',1.0);
vc.component.addVisitCase.visitPhoto = data;
//document.getElementById('photo').setAttribute('src', data);
}
},
_uploadPhoto: function (event) {
$("#uploadVisitPhoto").trigger("click")
},
_choosePhoto: function (event) {
var photoFiles = event.target.files;
if (photoFiles && photoFiles.length > 0) {
// 获取目前上传的文件
var file = photoFiles[0];// 文件大小校验的动作
if (file.size > 1024 * 1024 * 1) {
vc.toast("图片大小不能超过 2MB!")
return false;
}
var reader = new FileReader(); //新建FileReader对象
reader.readAsDataURL(file); //读取为base64
reader.onloadend = function (e) {
vc.component.addVisitCase.visitPhoto = reader.result;
}
}
}
}

7
public/pages/property/addVisitSpace/addVisitSpace.js
View File

@ -24,7 +24,9 @@
vc.component.newVisitInfo.infos[0]["ownerId"] = _ownerId;
});
vc.on("addVisitSpace", "visitCase", function(_visitCase){
vc.component.newVisitInfo.infos[0]["visitCase"] = _visitCase;
vc.component.newVisitInfo.infos[0]["visitCase"] = _visitCase.visitCase;
vc.component.newVisitInfo.infos[0]["photo"] = _visitCase.visitPhoto;
});
},
@ -85,7 +87,8 @@
ownerId:vc.component.newVisitInfo.infos[0]['ownerId'],
visitCase:vc.component.newVisitInfo.infos[0]['visitCase'],
visitTime:vc.component.newVisitInfo.infos[0]['visitTime'],
departureTime:vc.component.newVisitInfo.infos[0]['departureTime']
departureTime:vc.component.newVisitInfo.infos[0]['departureTime'],
photo:vc.component.newVisitInfo.infos[0]['photo']
}
console.log(param);
vc.http.post(