|
|
|
@ -27,28 +27,41 @@
|
|
|
|
|
<a-col :span="12" offset="1" class="perMsg colRight">
|
|
|
|
|
<div class="colRightTbox">
|
|
|
|
|
<div class="titleLogo">头像信息</div>
|
|
|
|
|
<a-row class="leftPic">
|
|
|
|
|
<a-col :span="12" class="mypicture">
|
|
|
|
|
<img :src="imgSrc" alt=""
|
|
|
|
|
style="display:inline-block;width: 100%;height: 100%;"
|
|
|
|
|
ref="imgChange">
|
|
|
|
|
</a-col>
|
|
|
|
|
<a-col :span="12" class="editIcon">
|
|
|
|
|
<img src="./images/rotate-left.png" alt="" @click="rotateLeftFn(0)">
|
|
|
|
|
<img src="./images/rotate-right.png" alt="" @click="rotateLeftFn(1)">
|
|
|
|
|
<img src="./images/search-plus.png" alt="" @click="searchPlusFn(0)">
|
|
|
|
|
<img src="./images/search-minus.png" alt="" @click="searchPlusFn(1)">
|
|
|
|
|
</a-col>
|
|
|
|
|
</a-row>
|
|
|
|
|
<div class="rightText">
|
|
|
|
|
<a-upload maxCount="1" accept=".jpg,.jpeg,.png,.bmp" list-type="picture"
|
|
|
|
|
v-model:file-list="fileListPic"
|
|
|
|
|
class="fixBtnChange" @change="setPersonTx">更换图片
|
|
|
|
|
</a-upload>
|
|
|
|
|
<a-button class="fixBtnSave" type="primary" @click="saveTx">保存头像</a-button>
|
|
|
|
|
<span>仅支持.jpg.jpeg.png.bmp图片格式</span>
|
|
|
|
|
<!--<a-row class="leftPic">-->
|
|
|
|
|
<!--<a-col :span="12" class="mypicture">-->
|
|
|
|
|
<!--<img :src="imgSrc" alt=""-->
|
|
|
|
|
<!--style="display:inline-block;width: 100%;height: 100%;"-->
|
|
|
|
|
<!--ref="imgChange">-->
|
|
|
|
|
<!--</a-col>-->
|
|
|
|
|
<!--<a-col :span="12" class="editIcon">-->
|
|
|
|
|
<!--<img src="./images/rotate-left.png" alt="" @click="rotateLeftFn(0)">-->
|
|
|
|
|
<!--<img src="./images/rotate-right.png" alt="" @click="rotateLeftFn(1)">-->
|
|
|
|
|
<!--<img src="./images/search-plus.png" alt="" @click="searchPlusFn(0)">-->
|
|
|
|
|
<!--<img src="./images/search-minus.png" alt="" @click="searchPlusFn(1)">-->
|
|
|
|
|
<!--</a-col>-->
|
|
|
|
|
<!--</a-row>-->
|
|
|
|
|
<div class="colRightBbox_content">
|
|
|
|
|
<div class="mypicture">
|
|
|
|
|
<img ref="modifyPhoto" alt=""
|
|
|
|
|
:src="txPhotoUrl"
|
|
|
|
|
style="display:inline-block;width: 100%;height: 100%;">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="fixBtn">
|
|
|
|
|
<a-button class="fixBtnChange" type="primary" @click="onShowCropper(1)">上传头像</a-button>
|
|
|
|
|
<br>
|
|
|
|
|
<a-button class="fixBtnSave" type="primary" @click="saveTxPhoto">保存头像</a-button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!--<div class="rightText">-->
|
|
|
|
|
<!--<a-upload maxCount="1" accept=".jpg,.jpeg,.png,.bmp" list-type="picture"-->
|
|
|
|
|
<!--v-model:file-list="fileListPic"-->
|
|
|
|
|
<!--class="fixBtnChange" @change="setPersonTx">更换图片-->
|
|
|
|
|
<!--</a-upload>-->
|
|
|
|
|
|
|
|
|
|
<!--<a-button class="fixBtnSave" type="primary" @click="saveTx">保存头像</a-button>-->
|
|
|
|
|
<!--<span>仅支持.jpg.jpeg.png.bmp图片格式</span>-->
|
|
|
|
|
<!--</div>-->
|
|
|
|
|
</div>
|
|
|
|
|
<div class="colRightBbox">
|
|
|
|
|
<div class="titleLogo">证件照信息</div>
|
|
|
|
|
<div class="colRightBbox_content">
|
|
|
|
@ -58,7 +71,7 @@
|
|
|
|
|
style="display:inline-block;width: 100%;height: 100%;">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="fixBtn">
|
|
|
|
|
<a-button class="fixBtnChange" type="primary" @click="onShowCropper">修改证件照</a-button>
|
|
|
|
|
<a-button class="fixBtnChange" type="primary" @click="onShowCropper(0)">修改证件照</a-button>
|
|
|
|
|
<br>
|
|
|
|
|
<a-button class="fixBtnSave" type="primary" @click="saveIdPhoto">保存证件照</a-button>
|
|
|
|
|
</div>
|
|
|
|
@ -67,10 +80,10 @@
|
|
|
|
|
</a-col>
|
|
|
|
|
</a-row>
|
|
|
|
|
</a-modal>
|
|
|
|
|
<modal-panel addChildType="slot" modalTitle="上传证件照" :show="show" modalWidth="60%"
|
|
|
|
|
<modal-panel addChildType="slot" :modalTitle="photoType === 0?'上传证件照':'上传头像'" :show="show" modalWidth="60%"
|
|
|
|
|
class="person-id-photo-container"
|
|
|
|
|
:destroyOnClose="destroyOnClose" @callback="onCallback">
|
|
|
|
|
<img-cropper selectBtnName="选择证件照" :option="option" ref="cropper" :cropperName="photoTitle"
|
|
|
|
|
<img-cropper selectBtnName="选择照片" :option="option" ref="cropper" :cropperName="photoTitle"
|
|
|
|
|
:can-upload="false"/>
|
|
|
|
|
</modal-panel>
|
|
|
|
|
</div>
|
|
|
|
@ -92,6 +105,7 @@
|
|
|
|
|
props: ['login_name', 'person_name', 'identity', 'bureau_name', 'district_name', 'id_number', 'TEL', 'visible'],
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
photoType:0,//0 证件照 1 头像
|
|
|
|
|
destroyOnClose: false,
|
|
|
|
|
show: false,
|
|
|
|
|
photoTitle: "",
|
|
|
|
@ -121,13 +135,19 @@
|
|
|
|
|
modifyPhotoObj: {},
|
|
|
|
|
idPhotoJson: {},
|
|
|
|
|
idPhotoUrl: '',
|
|
|
|
|
fileSize: ""
|
|
|
|
|
txPhotoUrl:'',
|
|
|
|
|
fileSize: "",
|
|
|
|
|
idFileId:"",
|
|
|
|
|
idExtension:"",
|
|
|
|
|
txFileId:"",
|
|
|
|
|
txExtension:""
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
watch: {
|
|
|
|
|
visible(newVal) {
|
|
|
|
|
if (newVal) {
|
|
|
|
|
this.getModifyPhoto()
|
|
|
|
|
this.getPersonTx()
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
@ -151,7 +171,13 @@
|
|
|
|
|
this.getPersonTx()
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
onShowCropper: function () {
|
|
|
|
|
onShowCropper: function (type) {
|
|
|
|
|
if(type === 0){
|
|
|
|
|
this.option.img = this.idPhotoUrl;
|
|
|
|
|
}else {
|
|
|
|
|
this.option.img = this.txPhotoUrl;
|
|
|
|
|
}
|
|
|
|
|
this.photoType = type;
|
|
|
|
|
this.show = true;
|
|
|
|
|
},
|
|
|
|
|
onCallback: function ([type]) {
|
|
|
|
@ -165,8 +191,17 @@
|
|
|
|
|
if (this.$refs.cropper.file) {
|
|
|
|
|
StaticParams.uploadFile(file, (data) => {
|
|
|
|
|
if (data.success === true) {
|
|
|
|
|
this.idPhotoUrl = this.BaseConfig.url_path_down + data.data.data.url;
|
|
|
|
|
this.fileSize = data.data.data.file_size;
|
|
|
|
|
if(this.photoType === 0){
|
|
|
|
|
this.idFileId = data.data.data.file_id;
|
|
|
|
|
this.idExtension = data.data.data.extension;
|
|
|
|
|
let url = BaseConfig.url_path_suffix + this.idFileId.substring(0, 2) + "/" + this.idFileId + "." + this.idExtension;
|
|
|
|
|
this.idPhotoUrl = this.BaseConfig.url_path_down + url;
|
|
|
|
|
}else{
|
|
|
|
|
this.txFileId = data.data.data.file_id;
|
|
|
|
|
this.txExtension = data.data.data.extension;
|
|
|
|
|
let url = BaseConfig.url_path_suffix + this.txFileId.substring(0, 2) + "/" + this.txFileId + "." + this.txExtension;
|
|
|
|
|
this.txPhotoUrl = this.BaseConfig.url_path_down + url;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}, false)//不插入资源库
|
|
|
|
|
}
|
|
|
|
@ -228,9 +263,11 @@
|
|
|
|
|
if (res.code === 2000) {
|
|
|
|
|
let file = res.data.id_photo_json;
|
|
|
|
|
if (file && file !== "") {
|
|
|
|
|
this.idPhotoUrl = JSON.parse(file).url;
|
|
|
|
|
this.fileSize = JSON.parse(file).file_size;
|
|
|
|
|
this.option.img = this.idPhotoUrl;
|
|
|
|
|
this.idFileId = JSON.parse(file).fileId;
|
|
|
|
|
this.idExtension = JSON.parse(file).extension;
|
|
|
|
|
let url = BaseConfig.url_path_suffix + this.idFileId.substring(0, 2) + "/" + this.idFileId + "." + this.idExtension;
|
|
|
|
|
this.idPhotoUrl = this.BaseConfig.url_path_down + url;
|
|
|
|
|
// this.option.img = this.idPhotoUrl;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
@ -242,8 +279,8 @@
|
|
|
|
|
identity_id: this.BaseConfig.userInfo.identity_id,//"登录人身份ID
|
|
|
|
|
org_id: this.BaseConfig.person_info_my.bureau_id, //登录人机构ID
|
|
|
|
|
id_photo_json: JSON.stringify({
|
|
|
|
|
file_size: this.fileSize,
|
|
|
|
|
url: this.idPhotoUrl
|
|
|
|
|
extension: this.idExtension,
|
|
|
|
|
fileId: this.idFileId
|
|
|
|
|
}),
|
|
|
|
|
}
|
|
|
|
|
this.InterfaceConfig.callInterface([{
|
|
|
|
@ -259,50 +296,53 @@
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
//获取头像信息
|
|
|
|
|
getPersonTx() {
|
|
|
|
|
//保存头像
|
|
|
|
|
saveTxPhoto: function () {
|
|
|
|
|
let param = {
|
|
|
|
|
person_id: BaseConfig.userInfo.person_id_cookie,
|
|
|
|
|
identity_id: BaseConfig.userInfo.identity_id_cookie
|
|
|
|
|
identity_id: BaseConfig.userInfo.identity_id_cookie,
|
|
|
|
|
file_id: this.txFileId,
|
|
|
|
|
extension: this.txExtension
|
|
|
|
|
}
|
|
|
|
|
this.InterfaceConfig.callInterface([{
|
|
|
|
|
url: InterConfig.getPersonTxByYw.url,
|
|
|
|
|
url: InterConfig.setPersonTxByYw.url,
|
|
|
|
|
params: param,
|
|
|
|
|
method: InterConfig.getPersonTxByYw.method,
|
|
|
|
|
isTestLogin: InterConfig.getPersonTxByYw.isTestLogin,
|
|
|
|
|
method: InterConfig.setPersonTxByYw.method,
|
|
|
|
|
isTestLogin: InterConfig.setPersonTxByYw.isTestLogin,
|
|
|
|
|
}], (result) => {
|
|
|
|
|
//console.log('获取头像', result)
|
|
|
|
|
if (result[0].data.file_id !== "") {
|
|
|
|
|
this.imgSrc = result[0].data.file_id + ',' + result[0].data.extension
|
|
|
|
|
if (result[0].data.success === true) {
|
|
|
|
|
message.success('修改成功')
|
|
|
|
|
this.getPersonTx();
|
|
|
|
|
} else {
|
|
|
|
|
message.error('修改失败')
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
//更换头像
|
|
|
|
|
setPersonTx(val) {
|
|
|
|
|
let targetUrl = val.fileList[val.fileList.length - 1]
|
|
|
|
|
this.$refs.imgChange.src = targetUrl.thumbUrl
|
|
|
|
|
},
|
|
|
|
|
//保存头像
|
|
|
|
|
saveTx() {
|
|
|
|
|
//获取头像信息
|
|
|
|
|
getPersonTx() {
|
|
|
|
|
let param = {
|
|
|
|
|
person_id: BaseConfig.userInfo.person_id_cookie,
|
|
|
|
|
identity_id: BaseConfig.userInfo.identity_id_cookie,
|
|
|
|
|
file_id: this.$refs.imgChange.src,
|
|
|
|
|
extension: 'png',
|
|
|
|
|
identity_id: BaseConfig.userInfo.identity_id_cookie
|
|
|
|
|
}
|
|
|
|
|
this.InterfaceConfig.callInterface([{
|
|
|
|
|
url: InterConfig.setPersonTxByYw.url,
|
|
|
|
|
url: InterConfig.getPersonTxByYw.url,
|
|
|
|
|
params: param,
|
|
|
|
|
method: InterConfig.setPersonTxByYw.method,
|
|
|
|
|
isTestLogin: InterConfig.setPersonTxByYw.isTestLogin,
|
|
|
|
|
method: InterConfig.getPersonTxByYw.method,
|
|
|
|
|
isTestLogin: InterConfig.getPersonTxByYw.isTestLogin,
|
|
|
|
|
}], (result) => {
|
|
|
|
|
if (!result[0].data.success) {
|
|
|
|
|
message.error('保存失败')
|
|
|
|
|
} else {
|
|
|
|
|
message.success('保存成功')
|
|
|
|
|
let res = result[0]
|
|
|
|
|
if(res.status === 200){
|
|
|
|
|
let obj = res.data;
|
|
|
|
|
if(obj.file_id && obj.file_id !== ""){
|
|
|
|
|
this.txFileId = obj.file_id;
|
|
|
|
|
this.txExtension = obj.extension;
|
|
|
|
|
let url = BaseConfig.url_path_suffix + this.txFileId.substring(0, 2) + "/" + this.txFileId + "." + this.txExtension;
|
|
|
|
|
this.txPhotoUrl = this.BaseConfig.url_path_down + url;
|
|
|
|
|
this.$store.commit('userStore/setPortraitUrl', this.txPhotoUrl);
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
@ -490,9 +530,55 @@
|
|
|
|
|
position: relative;
|
|
|
|
|
border: 1px dashed #03EFFD;
|
|
|
|
|
height: calc(50% - 8px);
|
|
|
|
|
margin-bottom: 16px;
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
.colRightBbox_content {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-around;
|
|
|
|
|
align-items: center;
|
|
|
|
|
.fixBtn {
|
|
|
|
|
width: 150px;
|
|
|
|
|
}
|
|
|
|
|
.mypicture {
|
|
|
|
|
width: 110px;
|
|
|
|
|
height: 110px;
|
|
|
|
|
/*margin-top: 32px;*/
|
|
|
|
|
/*margin-left: 50px;*/
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
border: 1px solid #03EFFD;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
.upload-container-style {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
.img-style {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.fixBtnChange, .fixBtnSave {
|
|
|
|
|
/*position: absolute;*/
|
|
|
|
|
width: 120px;
|
|
|
|
|
height: 39px;
|
|
|
|
|
line-height: 39px;
|
|
|
|
|
/*top: 21%;*/
|
|
|
|
|
background: none;
|
|
|
|
|
/*right: 65px;*/
|
|
|
|
|
display: block;
|
|
|
|
|
border: 1px solid #03EFFD;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
.fixBtnSave {
|
|
|
|
|
/*top: 51%;*/
|
|
|
|
|
background: none;
|
|
|
|
|
}
|
|
|
|
|
.save-button {
|
|
|
|
|
margin-top: 50px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.leftPic {
|
|
|
|
|
width: 42%;
|
|
|
|
|
display: flex;
|
|
|
|
@ -525,40 +611,13 @@
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.rightText {
|
|
|
|
|
width: 50%;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: flex-end;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
.fixBtnChange, .fixBtnSave {
|
|
|
|
|
width: 120px;
|
|
|
|
|
height: 39px;
|
|
|
|
|
line-height: 39px;
|
|
|
|
|
display: block;
|
|
|
|
|
border: 1px solid #03EFFD;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
.fixBtnSave {
|
|
|
|
|
background: none;
|
|
|
|
|
span {
|
|
|
|
|
right: 30px;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
span {
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.colRightBbox {
|
|
|
|
|
position: relative;
|
|
|
|
|
border: 1px dashed #03EFFD;
|
|
|
|
|
height: calc(50% - 8px);
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
margin-top: 16px;
|
|
|
|
|
.colRightBbox_content {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
@ -607,6 +666,38 @@
|
|
|
|
|
margin-top: 50px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.leftPic {
|
|
|
|
|
width: 42%;
|
|
|
|
|
display: flex;
|
|
|
|
|
height: auto;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
.mypicture {
|
|
|
|
|
width: 110px;
|
|
|
|
|
height: 110px;
|
|
|
|
|
margin-top: 20px;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
border: 1px solid #03EFFD;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
.upload-container-style {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.editIcon {
|
|
|
|
|
width: 110px;
|
|
|
|
|
height: 30px;
|
|
|
|
|
margin-top: 9px;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
img {
|
|
|
|
|
width: 24px;
|
|
|
|
|
height: 24px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|