|
|
|
|
@ -27,19 +27,20 @@
|
|
|
|
|
<a-col :span="12" offset="1" class="perMsg colRight">
|
|
|
|
|
<div class="colRightTbox">
|
|
|
|
|
<div class="titleLogo">头像信息</div>
|
|
|
|
|
<div class="mypicture">
|
|
|
|
|
<img v-if="txfull" :src="imgSrc" alt=""
|
|
|
|
|
<a-row class="leftPic">
|
|
|
|
|
<a-col :span="12" class="mypicture">
|
|
|
|
|
<img :src="imgSrc" alt=""
|
|
|
|
|
style="display:inline-block;width: 100%;height: 100%;"
|
|
|
|
|
ref="imgChange">
|
|
|
|
|
<img v-if="!txfull" src="./images/emptyPic.png"
|
|
|
|
|
style="display:inline-block;width: 100%;height: 100%;">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="editIcon">
|
|
|
|
|
</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)">
|
|
|
|
|
</div>
|
|
|
|
|
</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">更换图片
|
|
|
|
|
@ -47,22 +48,30 @@
|
|
|
|
|
<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">
|
|
|
|
|
<div class="mypicture">
|
|
|
|
|
<img ref="modifyPhoto" alt=""
|
|
|
|
|
:src="idPhotoUrl"
|
|
|
|
|
style="display:inline-block;width: 100%;height: 100%;">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="fixBtn">
|
|
|
|
|
<a-button class="fixBtnChange" type="primary" @click="onShowCropper">修改证件照</a-button>
|
|
|
|
|
<br>
|
|
|
|
|
<a-button class="fixBtnSave" type="primary" @click="saveIdPhoto">保存证件照</a-button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</a-col>
|
|
|
|
|
</a-row>
|
|
|
|
|
</a-modal>
|
|
|
|
|
<modal-panel addChildType="slot" modalTitle="上传证件照" :show="show" modalWidth="60%" class="person-id-photo-container"
|
|
|
|
|
<modal-panel addChildType="slot" modalTitle="上传证件照" :show="show" modalWidth="60%"
|
|
|
|
|
class="person-id-photo-container"
|
|
|
|
|
:destroyOnClose="destroyOnClose" @callback="onCallback">
|
|
|
|
|
<img-cropper selectBtnName="选择证件照" :option="option" ref="cropper" :cropperName="photoTitle" :can-upload="false"/>
|
|
|
|
|
<img-cropper selectBtnName="选择证件照" :option="option" ref="cropper" :cropperName="photoTitle"
|
|
|
|
|
:can-upload="false"/>
|
|
|
|
|
</modal-panel>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
@ -77,6 +86,7 @@
|
|
|
|
|
import IDPhoto from '../../../../teacherInfo/fieldComponent/IDPhoto.vue'
|
|
|
|
|
import ModalPanel from '../../../../../components/common/modal/ModalPanel';
|
|
|
|
|
import ImgCropper from '../../../../../components/common/imgCropper/ImgCropper';
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
name: "PersonMsgModal",
|
|
|
|
|
props: ['login_name', 'person_name', 'identity', 'bureau_name', 'district_name', 'id_number', 'TEL', 'visible'],
|
|
|
|
|
@ -107,7 +117,6 @@
|
|
|
|
|
file: '',
|
|
|
|
|
fileList: [],
|
|
|
|
|
fileListPic: [],
|
|
|
|
|
txfull: true,
|
|
|
|
|
imgSrc: '',
|
|
|
|
|
modifyPhotoObj: {},
|
|
|
|
|
idPhotoJson: {},
|
|
|
|
|
@ -218,15 +227,11 @@
|
|
|
|
|
let res = result[0].data;
|
|
|
|
|
if (res.code === 2000) {
|
|
|
|
|
let file = res.data.id_photo_json;
|
|
|
|
|
console.log("file",file)
|
|
|
|
|
console.log("JSON.parse(file)",JSON.parse(file))
|
|
|
|
|
if (file && file !== "") {
|
|
|
|
|
this.idPhotoUrl = JSON.parse(file).url;
|
|
|
|
|
this.fileSize = JSON.parse(file).file_size;
|
|
|
|
|
this.option.img = this.idPhotoUrl;
|
|
|
|
|
}
|
|
|
|
|
console.log("idPhotoUrl:",this.idPhotoUrl)
|
|
|
|
|
console.log("fileSize:",this.fileSize)
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
@ -269,16 +274,11 @@
|
|
|
|
|
//console.log('获取头像', result)
|
|
|
|
|
if (result[0].data.file_id !== "") {
|
|
|
|
|
this.imgSrc = result[0].data.file_id + ',' + result[0].data.extension
|
|
|
|
|
// console.log('fileId', this.$refs.imgChange.src)
|
|
|
|
|
} else {
|
|
|
|
|
this.txfull = false
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
//更换头像
|
|
|
|
|
setPersonTx(val) {
|
|
|
|
|
console.log('huan', val)
|
|
|
|
|
this.txfull = true
|
|
|
|
|
let targetUrl = val.fileList[val.fileList.length - 1]
|
|
|
|
|
this.$refs.imgChange.src = targetUrl.thumbUrl
|
|
|
|
|
},
|
|
|
|
|
@ -330,6 +330,7 @@
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/deep/ .ant-modal-content .ant-modal-body .perMsgBox .colRight .colRightTbox span {
|
|
|
|
|
color: #fff !important;
|
|
|
|
|
|
|
|
|
|
@ -491,12 +492,17 @@
|
|
|
|
|
height: calc(50% - 8px);
|
|
|
|
|
margin-bottom: 16px;
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
|
|
|
|
|
display: flex;
|
|
|
|
|
.leftPic {
|
|
|
|
|
width: 42%;
|
|
|
|
|
display: flex;
|
|
|
|
|
height: auto;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
.mypicture {
|
|
|
|
|
width: 110px;
|
|
|
|
|
height: 110px;
|
|
|
|
|
margin-top: 20px;
|
|
|
|
|
margin-left: 50px;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
border: 1px solid #03EFFD;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
@ -507,32 +513,34 @@
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.editIcon {
|
|
|
|
|
width: 220px;
|
|
|
|
|
width: 110px;
|
|
|
|
|
height: 30px;
|
|
|
|
|
margin-top: 9px;
|
|
|
|
|
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
img {
|
|
|
|
|
width: 24px;
|
|
|
|
|
height: 24px;
|
|
|
|
|
margin-right: 5px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
.rightText {
|
|
|
|
|
width: 50%;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: flex-end;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
.fixBtnChange, .fixBtnSave {
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 120px;
|
|
|
|
|
height: 39px;
|
|
|
|
|
line-height: 39px;
|
|
|
|
|
top: 21%;
|
|
|
|
|
right: 65px;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
display: block;
|
|
|
|
|
border: 1px solid #03EFFD;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
.fixBtnSave {
|
|
|
|
|
top: 51%;
|
|
|
|
|
background: none;
|
|
|
|
|
span {
|
|
|
|
|
right: 30px;
|
|
|
|
|
@ -541,10 +549,8 @@
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
span {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: 20px;
|
|
|
|
|
bottom: 10px;
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@ -553,12 +559,20 @@
|
|
|
|
|
border: 1px dashed #03EFFD;
|
|
|
|
|
height: calc(50% - 8px);
|
|
|
|
|
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;
|
|
|
|
|
/*margin-top: 32px;*/
|
|
|
|
|
/*margin-left: 50px;*/
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
border: 1px solid #03EFFD;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
@ -572,21 +586,21 @@
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.fixBtnChange, .fixBtnSave {
|
|
|
|
|
position: absolute;
|
|
|
|
|
/*position: absolute;*/
|
|
|
|
|
width: 120px;
|
|
|
|
|
height: 39px;
|
|
|
|
|
line-height: 39px;
|
|
|
|
|
top: 21%;
|
|
|
|
|
/*top: 21%;*/
|
|
|
|
|
background: none;
|
|
|
|
|
right: 65px;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
/*right: 65px;*/
|
|
|
|
|
display: block;
|
|
|
|
|
border: 1px solid #03EFFD;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
.fixBtnSave {
|
|
|
|
|
top: 51%;
|
|
|
|
|
/*top: 51%;*/
|
|
|
|
|
background: none;
|
|
|
|
|
}
|
|
|
|
|
.save-button {
|
|
|
|
|
@ -595,6 +609,7 @@
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
zhusiyu