优化代码

This commit is contained in:
java110 2020-08-15 17:43:37 +08:00
parent b7a2d3a519
commit 9061409a93
2 changed files with 49 additions and 21 deletions

View File

@ -6,19 +6,6 @@
<h3 class="m-t-none m-b ">修改信息</h3>
<div class="ibox-content">
<div class="row">
<div class="col-sm-6" style="text-align:center">
<video id="ownerPhotoForEdit" style="width: 100%;"></video>
<canvas id="canvasForEdit" style="display:none;"></canvas>
<div style="margin-top:20px">
<button class="btn btn-primary" type="button" v-on:click="_takePhotoForEdit()"><span
class="glyphicon glyphicon-camera"></span> 拍照
</button>
<span class="btn btn-default btn-file" v-on:click="_uploadEditPhoto($event)">
<span class="fileinput-new" >上传照片</span>
</span>
<input type="file" class="file" accept="images/*" id="uploadEditOwnerPhoto" hidden v-on:change="_chooseEditPhoto($event)">
</div>
</div>
<div class="col-sm-6">
<div class="form-group row">
<label class="col-sm-2 col-form-label">名称</label>
@ -55,23 +42,52 @@
<div class="col-sm-10"><input v-model="editOwnerInfo.idCard" type="text"
placeholder="必填,请填写身份证" class="form-control"></div>
</div>
</div>
<div class="col-sm-6" style="text-align:center">
<div class="form-group row">
<div style="width: 100%;" v-show="addOwnerInfo.ownerPhoto != ''">
<img width="80%" height="150rem" v-bind:src="editOwnerInfo.ownerPhoto" alt="业主照片">
</div>
<div style="width: 100%;" v-show="editOwnerInfo.ownerPhoto == ''">
<div v-show="editOwnerInfo.videoPlaying == true">
<video id="ownerPhotoForEdit" style="width: 100%;height: 10rem;"></video>
<canvas id="canvasForEdit" style="display:none;"></canvas>
</div>
<div v-show="editOwnerInfo.videoPlaying == false">
<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="editOwnerInfo.videoPlaying == true && editOwnerInfo.ownerPhoto != ''" v-on:click="_reOpenVedioForEdit()"><span
class="glyphicon glyphicon-camera"></span>摄像头</button>
<button class="btn btn-primary" type="button" v-if="editOwnerInfo.videoPlaying == true && editOwnerInfo.ownerPhoto == ''" v-on:click="_takePhotoForEdit()"><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=".jpg" id="uploadEditOwnerPhoto" hidden
v-on:change="_chooseEditPhoto($event)">
</div>
</div>
</div>
</div>
<div class="row">
<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="editOwnerInfo.link" type="number"
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="editOwnerInfo.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="editOwnerInfo.ownerPhoto" alt="业主照片"></div>
</div>
</div>
</div>
<div class="ibox-content">
<button class="btn btn-primary float-right" type="button" v-on:click="editOwnerMethod()"><i

View File

@ -19,7 +19,8 @@
remark: '',
ownerPhoto: '',
idCard: '',
videoPlaying: false
videoPlaying: true,
mediaStreamTrack: null
}
},
_initMethod: function () {
@ -155,7 +156,8 @@
remark: '',
ownerPhoto: '',
idCard: '',
videoPlaying: false
videoPlaying: true,
mediaStreamTrack: null
};
},
_editUserMedia: function () {
@ -178,6 +180,7 @@
var media = navigator.getUserMedia(constraints, function (stream) {
var url = window.URL || window.webkitURL;
//video.src = url ? url.createObjectURL(stream) : stream;
$that.editOwnerInfo.mediaStreamTrack = typeof stream.stop === 'function' ? stream : stream.getTracks()[0];
try {
video.src = url ? url.createObjectURL(stream) : stream;
} catch (error) {
@ -224,6 +227,15 @@
}
}
},
_reOpenVedioForEdit:function(){
vc.component.editOwnerInfo.ownerPhoto="";
vc.component._initAddOwnerMediaForEdit();
},
_closeVedioForEdit:function(){
if (vc.component.editOwnerInfo.mediaStreamTrack != null) {
vc.component.editOwnerInfo.mediaStreamTrack.stop();
}
}
}
});