mirror of
https://gitee.com/java110/MicroCommunityWeb.git
synced 2026-02-24 05:46:03 +08:00
优化业主页面
This commit is contained in:
java110
parent
8138721cba
commit
991ee837b9
@ -1,27 +1,16 @@
|
||||
<div id="addOwnerModel" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
|
||||
aria-hidden="true">
|
||||
aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-body">
|
||||
<h3 class="m-t-none m-b ">添加{{addOwnerInfo.componentTitle}}</h3>
|
||||
<div class="ibox-content">
|
||||
<div class="row">
|
||||
<div class="col-sm-6" style="text-align:center">
|
||||
<video id="ownerPhoto" 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="uploadOwnerPhoto" hidden v-on:change="_choosePhoto($event)">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-2 col-form-label">姓名</label>
|
||||
<div class="col-sm-10"><input v-model="addOwnerInfo.name" type="text"
|
||||
placeholder="必填，请填写姓名" class="form-control"></div>
|
||||
placeholder="必填，请填写姓名" class="form-control"></div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-2 col-form-label">性别</label>
|
||||
@ -36,7 +25,7 @@
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-2 col-form-label">年龄</label>
|
||||
<div class="col-sm-10"><input v-model="addOwnerInfo.age" type="number"
|
||||
placeholder="可选，请填写年龄" class="form-control"></div>
|
||||
placeholder="可选，请填写年龄" class="form-control"></div>
|
||||
</div>
|
||||
<div class="form-group row" v-if="addOwnerInfo.componentTitle == '成员'">
|
||||
<label class="col-sm-2 col-form-label">类型</label>
|
||||
@ -51,32 +40,60 @@
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-2 col-form-label">身份证</label>
|
||||
<div class="col-sm-10"><input v-model="addOwnerInfo.idCard" type="text"
|
||||
placeholder="必填，请填写身份证" class="form-control"></div>
|
||||
placeholder="必填，请填写身份证" class="form-control"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6" style="text-align:center">
|
||||
<div class="form-group row">
|
||||
<div v-if="addOwnerInfo.ownerPhoto != ''">
|
||||
<img width="80%" height="150rem" v-bind:src="addOwnerInfo.ownerPhoto" alt="业主照片">
|
||||
</div>
|
||||
<div style="width: 100%;" v-else>
|
||||
<div v-if="addOwnerInfo.videoPlaying == true">
|
||||
<video id="ownerPhoto" style="width: 100%;"></video>
|
||||
<canvas id="canvas" style="display:none;"></canvas>
|
||||
</div>
|
||||
<div>
|
||||
<img width="80%" height="150rem" src="/img/noPhoto.jpg" alt="业主照片">
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin: 10px auto 0px auto;" class="text-center">
|
||||
|
||||
<button class="btn btn-primary" type="button" v-if="addOwnerInfo.videoPlaying == true && addOwnerInfo.ownerPhoto != ''" v-on:click="_reOpenVedio()"><span
|
||||
class="glyphicon glyphicon-camera"></span>摄像头</button>
|
||||
<button class="btn btn-primary" type="button" v-if="addOwnerInfo.videoPlaying == true" 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="uploadOwnerPhoto" hidden
|
||||
v-on:change="_choosePhoto($event)">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="margin-top: -15px;">
|
||||
<div class="col-sm-6">
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-2 col-form-label">手机</label>
|
||||
<div class="col-sm-10"><input v-model="addOwnerInfo.link" type="number"
|
||||
placeholder="必填，请填写联系方式" class="form-control"></div>
|
||||
placeholder="必填，请填写联系方式" class="form-control"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-2 col-form-label">备注</label>
|
||||
<div class="col-sm-10"><input v-model="addOwnerInfo.remark" type="tel"
|
||||
placeholder="可填，请填写备注" class="form-control"></div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-2 col-form-label">照片</label>
|
||||
<div class="col-sm-10"><img width="100%" height="100%"
|
||||
v-bind:src="addOwnerInfo.ownerPhoto" alt="业主照片"></div>
|
||||
placeholder="可填，请填写备注" class="form-control"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<button class="btn btn-primary float-right" type="button" v-on:click="saveOwnerInfo()">
|
||||
<i class="fa fa-check"></i> 保存
|
||||
</button>
|
||||
<button type="button" class="btn btn-warning float-right" style="margin-right:20px;"
|
||||
data-dismiss="modal">取消
|
||||
data-dismiss="modal">取消
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
ownerId: '',
|
||||
ownerPhoto: '',
|
||||
idCard: '',
|
||||
videoPlaying: false
|
||||
videoPlaying: false,
|
||||
}
|
||||
},
|
||||
_initMethod: function () {
|
||||
@ -149,7 +149,7 @@
|
||||
ownerId: '',
|
||||
ownerPhoto: '',
|
||||
idCard: '',
|
||||
videoPlaying: false
|
||||
videoPlaying: false,
|
||||
};
|
||||
},
|
||||
_addUserMedia: function () {
|
||||
@ -168,7 +168,6 @@
|
||||
var video = document.getElementById('ownerPhoto');
|
||||
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) {
|
||||
@ -177,6 +176,7 @@
|
||||
video.play();
|
||||
vc.component.addOwnerInfo.videoPlaying = true;
|
||||
}, function (error) {
|
||||
vc.component.addOwnerInfo.videoPlaying = false;
|
||||
console.log("ERROR");
|
||||
console.log(error);
|
||||
});
|
||||
@ -194,6 +194,8 @@
|
||||
var data = canvas.toDataURL('image/jpeg', 1.0);
|
||||
vc.component.addOwnerInfo.ownerPhoto = data;
|
||||
//document.getElementById('photo').setAttribute('src', data);
|
||||
}else{
|
||||
vc.toast('未检测到摄像头');
|
||||
}
|
||||
},
|
||||
_uploadPhoto: function (event) {
|
||||
@ -216,6 +218,9 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
_reOpenVedio:function(){
|
||||
vc.component.addOwnerInfo.ownerPhoto="";
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
BIN
public/img/noPhoto.jpg
Normal file
BIN
public/img/noPhoto.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
Loading…
Reference in New Issue
Block a user