洋浦学校八大中心 个人证件照上传功能更新

init
gongdi 3 years ago
parent 1bd9f3df72
commit 0a52435bf4

@ -9,7 +9,7 @@
<title> <title>
<%= htmlWebpackPlugin.options.title %> <%= htmlWebpackPlugin.options.title %>
</title> </title>
<script src="https://cdn.ronghub.com/RongIMLib-4.4.7.prod.js"></script> <!--<script src="https://cdn.ronghub.com/RongIMLib-4.4.7.prod.js"></script>-->
</head> </head>

@ -13,7 +13,7 @@
ref="fileInputRef" ref="fileInputRef"
@change="uploadFile" @change="uploadFile"
/> />
<div id="fileNameId" class="file-name-style"></div> <div id="fileNameId" class="file-name-style" style="color: #31a8fa"></div>
</div> </div>
</div> </div>
<div class="tips-style"> <div class="tips-style">

@ -8,10 +8,14 @@ function getContextHtmlPath (){//获取桶名信息
if (result != "/dsideal_yy") { if (result != "/dsideal_yy") {
result = pathName.substr(0, 0); result = pathName.substr(0, 0);
} }
console.log("result:",result)
return result; return result;
} }
axios.defaults.baseURL = getContextHtmlPath(); axios.defaults.baseURL = getContextHtmlPath();
//axios.defaults.baseURL = '/dsideal_yy/'
axios.defaults.timeout = 800000
axios.defaults.withCredentials = false
// axios.defaults.headers['Content-Type'] = 'application/json;charset=UTF-8';
//axios.defaults.headers["Access-Control-Allow-Origin-Type"] = "*";
function createRandomNum(){ function createRandomNum(){
let random_num = 0; let random_num = 0;
@ -60,7 +64,7 @@ export default {
let result = arguments[i].data; let result = arguments[i].data;
if (result.code && result.code !== 2000){ if (result.code && result.code !== 2000){
Modal.warning({ Modal.warning({
title:"接口调用错误", title:"提示",
content:result.code === 5000?"请联系管理员":result.msg, content:result.code === 5000?"请联系管理员":result.msg,
centered:true centered:true
}) })

@ -267,6 +267,7 @@ const ConfigFn = {
//素材服务器IP地址 //素材服务器IP地址
// BaseConfig.url_path_down = "http://dsideal-yy.oss-cn-qingdao.aliyuncs.com/"; // BaseConfig.url_path_down = "http://dsideal-yy.oss-cn-qingdao.aliyuncs.com/";
BaseConfig.url_path_down = window.location.protocol + "//video.edusoa.com/"; BaseConfig.url_path_down = window.location.protocol + "//video.edusoa.com/";
//资源上传地址 //资源上传地址
// BaseConfig.url_path = "http://dsideal-yy.oss-cn-qingdao.aliyuncs.com"; // BaseConfig.url_path = "http://dsideal-yy.oss-cn-qingdao.aliyuncs.com";
BaseConfig.url_path = "https://dsideal.obs.cn-north-1.myhuaweicloud.com"; BaseConfig.url_path = "https://dsideal.obs.cn-north-1.myhuaweicloud.com";

@ -65,7 +65,7 @@ export default {
let result = arguments[i].data; let result = arguments[i].data;
if (!result.success){ if (!result.success){
Modal.warning({ Modal.warning({
title:"接口调用错误", title:"提示",
content:result.message, content:result.message,
centered:true centered:true
}) })

@ -74,6 +74,7 @@ if (document.body.clientWidth > document.body.clientHeight) {
StaticParams.selectPanelContainer = null; StaticParams.selectPanelContainer = null;
StaticParams.scrollOption = { StaticParams.scrollOption = {
sizeStrategy:"percent",
vuescroll: {}, vuescroll: {},
scrollPanel: {}, scrollPanel: {},
rail: { rail: {
@ -679,8 +680,12 @@ StaticParams.closePopModal = (com) => {
* 不通过上传组件上传文件 * 不通过上传组件上传文件
* file 要上传的文件 * file 要上传的文件
* callback (result)=>{} 上传完毕后的回调函数 result{success:boolean,data:{}} success为true是上传成功false上传失败 data 返回的信息 * callback (result)=>{} 上传完毕后的回调函数 result{success:boolean,data:{}} success为true是上传成功false上传失败 data 返回的信息
* insert:是否调插入资源表接口 默认true
* */ * */
StaticParams.uploadFile = (file, callback = null) => { StaticParams.uploadFile = (file, callback = null,insert = true) => {
console.log("file:",file)
console.log("callback:",callback)
console.log("insert:",insert)
let split = file.name.split('.'); let split = file.name.split('.');
let guid = GUID_UUID.guid(); let guid = GUID_UUID.guid();
let key = BaseConfig.url_path_suffix + guid.substring(0, 2) + "/" + guid + "." + split[1] let key = BaseConfig.url_path_suffix + guid.substring(0, 2) + "/" + guid + "." + split[1]
@ -712,7 +717,12 @@ StaticParams.uploadFile = (file, callback = null) => {
}, },
}).then((rsp) => { }).then((rsp) => {
//rsp云上传这里传的值和局上传不一样 //rsp云上传这里传的值和局上传不一样
StaticParams.insertResource(rsp, file, guid, split[0], split[1], callback) console.log("insert111:",insert)
if(insert === true){
StaticParams.insertResource(rsp, file, guid, split[0], split[1], callback)
}else {
callback({ success: true, data: rsp })
}
}).catch((error) => { }).catch((error) => {
if (callback) { if (callback) {
callback({ success: false, data: error }) callback({ success: false, data: error })
@ -738,7 +748,11 @@ StaticParams.uploadFile = (file, callback = null) => {
'Content-Type': 'multipart/form-data;boundary=' + new Date().getTime(), 'Content-Type': 'multipart/form-data;boundary=' + new Date().getTime(),
}, },
}).then((rsp) => { }).then((rsp) => {
StaticParams.insertResource(rsp.data, file, guid, split[0], split[1], callback) if(insert === true){
StaticParams.insertResource(rsp.data, file, guid, split[0], split[1], callback)
}else {
callback({ success: true, data: rsp })
}
}).catch((error) => { }).catch((error) => {
if (callback) { if (callback) {
callback({ success: false, data: error }) callback({ success: false, data: error })

@ -38,9 +38,24 @@
beforeRouteEnter(to, from, next) { beforeRouteEnter(to, from, next) {
//to.query.oneLevel = 'newsInformation_two'; //to.query.oneLevel = 'newsInformation_two';
//storequery query //storequery query
//console.log("to",to)
next(vm => { next(vm => {
vm.$store.commit('userStore/setQueryStore', to.query); vm.$store.commit('userStore/setQueryStore', to.query);
}) })
// console.log("to",to)
//
// let queryStore = vm.$store.state.userStore.query;
// console.log("queryStore:",queryStore)
// if(queryStore){
// console.log("keys",Object.keys(queryStore))
// let keys = Object.keys(queryStore);
// if(keys && keys.length > 0){
// for(let i = 0,len = keys.length;i < len;i ++){
// to.query[keys[i]] = queryStore[keys[i]];
// }
// }
// }
//console.log("toquery:",to.query)
if (to.query.oneLevel) { if (to.query.oneLevel) {
oneLevel = to.query.oneLevel; oneLevel = to.query.oneLevel;
} else { } else {

@ -113,7 +113,11 @@
let thumbnail = newsList[i].thumbnail; let thumbnail = newsList[i].thumbnail;
let src = ""; let src = "";
if(thumbnail && thumbnail.length > 0){ if(thumbnail && thumbnail.length > 0){
src = StaticParams.getThumbUrl(JSON.parse(thumbnail)[0].file_id +"."+JSON.parse(thumbnail)[0].resource_format,100,100,100); if(thumbnail[0].indexOf("http") === 0){
src = thumbnail[0]
}else{
src = StaticParams.getThumbUrl(JSON.parse(thumbnail)[0].file_id +"."+JSON.parse(thumbnail)[0].resource_format,100,100,100);
}
if(this.BaseConfig.pt_type + "" === "1"){ if(this.BaseConfig.pt_type + "" === "1"){
src = src.substring(0, src.indexOf("?")) src = src.substring(0, src.indexOf("?"))
}else{ }else{

@ -116,7 +116,11 @@
let thumbnail = item.thumbnail; let thumbnail = item.thumbnail;
let src = ""; let src = "";
if (thumbnail && thumbnail.length > 0 && thumbnail !== '0') { if (thumbnail && thumbnail.length > 0 && thumbnail !== '0') {
src = StaticParams.getThumbUrl(JSON.parse(thumbnail)[0].file_id + "." + JSON.parse(thumbnail)[0].resource_format, 100, 100, 100); if(thumbnail[0].indexOf("http") === 0){
src = thumbnail[0]
}else {
src = StaticParams.getThumbUrl(JSON.parse(thumbnail)[0].file_id + "." + JSON.parse(thumbnail)[0].resource_format, 100, 100, 100);
}
if(this.BaseConfig.pt_type + "" === "1"){ if(this.BaseConfig.pt_type + "" === "1"){
src = src.substring(0, src.indexOf("?")) src = src.substring(0, src.indexOf("?"))
}else{ }else{

@ -50,22 +50,20 @@
<div class="colRightBbox"> <div class="colRightBbox">
<div class="titleLogo">证件照信息</div> <div class="titleLogo">证件照信息</div>
<div class="mypicture"> <div class="mypicture">
<!--<img-preview :imgObj="modifyPhotoObj"-->
<!--style="display:inline-block;width: 100%;height: 100%;"/>-->
<img ref="modifyPhoto" alt="" <img ref="modifyPhoto" alt=""
:src="idPhotoUrl"
style="display:inline-block;width: 100%;height: 100%;"> style="display:inline-block;width: 100%;height: 100%;">
</div> </div>
<a-upload maxCount="1" accept=".jpg,.jpeg,.png,.bmp" <a-button class="fixBtnChange" type="primary" @click="onShowCropper"></a-button>
list-type="picture" class="Uploader" <a-button class="fixBtnSave" type="primary" @click="saveIdPhoto"></a-button>
@change="savePersonIDPhoto">修改证件照
</a-upload>
<!--<Uploader :type="2" :canUpload="true" :option="{}" :multiple="false" title="修改证件照"-->
<!--@uploadComplete="uploadComplete" class="Uploader" :fileData="fileList"-->
<!--&gt;</Uploader>-->
</div> </div>
</a-col> </a-col>
</a-row> </a-row>
</a-modal> </a-modal>
<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"/>
</modal-panel>
</div> </div>
</template> </template>
@ -75,14 +73,30 @@
import ImgPreview from '../../../common/imgPreview.vue'; import ImgPreview from '../../../common/imgPreview.vue';
import GUID_UUID from '../../../../../global-llibs/guid-uuid' import GUID_UUID from '../../../../../global-llibs/guid-uuid'
import BaseConfig from '../../../../../global-llibs/base-config' import BaseConfig from '../../../../../global-llibs/base-config'
import Uploader from '../../../../../components/common/uploader/Upload.vue'
import StaticParams from '../../../../../global-llibs/staticParams'; import StaticParams from '../../../../../global-llibs/staticParams';
import IDPhoto from '../../../../teacherInfo/fieldComponent/IDPhoto.vue'
import ModalPanel from '../../../../../components/common/modal/ModalPanel';
import ImgCropper from '../../../../../components/common/imgCropper/ImgCropper';
export default { export default {
name: "PersonMsgModal", name: "PersonMsgModal",
props: ['login_name', 'person_name', 'identity', 'bureau_name', 'district_name', 'id_number', 'TEL', 'visible'], props: ['login_name', 'person_name', 'identity', 'bureau_name', 'district_name', 'id_number', 'TEL', 'visible'],
data() { data() {
return { return {
destroyOnClose: false,
show:false,
photoTitle:"",
option: {
img: "",
outputType: 'png',
autoCrop: true,
autoCropWidth: 99,
autoCropHeight: 139,
full: false,
fixedBox: true,
original: true,
centerBox: true,
maxImgSize: 500,
},
bodyStyle: { bodyStyle: {
background: '#01366B !important', background: '#01366B !important',
}, },
@ -97,6 +111,8 @@
imgSrc: '', imgSrc: '',
modifyPhotoObj: {}, modifyPhotoObj: {},
idPhotoJson: {}, idPhotoJson: {},
idPhotoUrl:'',
fileSize:""
} }
}, },
watch: { watch: {
@ -114,8 +130,10 @@
AIcon: Icon, AIcon: Icon,
AUpload: Upload, AUpload: Upload,
// AMessage: message, // AMessage: message,
Uploader,
ImgPreview, ImgPreview,
IDPhoto,
ModalPanel,
ImgCropper
}, },
created() { created() {
this.uploadComplete() this.uploadComplete()
@ -124,6 +142,31 @@
this.getPersonTx() this.getPersonTx()
}, },
methods: { methods: {
onShowCropper: function () {
this.show = true;
},
onCallback: function ([type]) {
if (type === 'ok'){
this.destroyOnClose = false;
// if (this.$refs.cropper.file){
// this.spinning = true;
// }
this.$refs.cropper.getFile((file)=>{
// this.data.props.imgFile = file
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;
}
},false)//
}
});
}else{
this.destroyOnClose = true;
}
this.show = false;
},
cancelModal() { cancelModal() {
this.$emit('cancelModal') this.$emit('cancelModal')
}, },
@ -172,22 +215,31 @@
method: InterConfig.getModifyPhoto.method, method: InterConfig.getModifyPhoto.method,
isTestLogin: InterConfig.getModifyPhoto.isTestLogin, isTestLogin: InterConfig.getModifyPhoto.isTestLogin,
}], (result) => { }], (result) => {
if (result[0].data.code === 2000 && result[0].data.id_photo_json !== "") { let res = result[0].data;
this.modifyPhotoObj = JSON.parse(result[0].data.id_photo_json) 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)
} }
}) })
}, },
// //
savePersonIDPhoto(val) { saveIdPhoto:function () {
// let targetUrl = val.file//List[val.fileList.length - 1]
// this.$refs.modifyPhoto.src = targetUrl.thumbUrl
console.log('val', val)
// if (val.file.percent === 100 && val.event) {
let param = { let param = {
person_id: this.BaseConfig.userInfo.person_id,//ID person_id: this.BaseConfig.userInfo.person_id,//ID
identity_id: this.BaseConfig.userInfo.identity_id,//"ID identity_id: this.BaseConfig.userInfo.identity_id,//"ID
org_id: this.BaseConfig.person_info_my.bureau_id, //ID org_id: this.BaseConfig.person_info_my.bureau_id, //ID
id_photo_json: val.file, id_photo_json: JSON.stringify({
file_size:this.fileSize,
url:this.idPhotoUrl
}),
} }
this.InterfaceConfig.callInterface([{ this.InterfaceConfig.callInterface([{
url: InterConfig.savePersonIDPhoto.url, url: InterConfig.savePersonIDPhoto.url,
@ -195,22 +247,12 @@
method: InterConfig.savePersonIDPhoto.method, method: InterConfig.savePersonIDPhoto.method,
isTestLogin: InterConfig.savePersonIDPhoto.isTestLogin, isTestLogin: InterConfig.savePersonIDPhoto.isTestLogin,
}], (result) => { }], (result) => {
console.log('修改证件照', param)
// if (result[0].data.code === 2000 && val.file.percent === 100 && !val.event) {
if (result[0].data.code === 2000) { if (result[0].data.code === 2000) {
message.success('修改成功') message.success('修改成功')
} else if (result[0].data.code !== 2000) { } else {
message.error('修改失败') message.error('修改失败')
} }
}) })
// }
// let param = {
// name: this.name,
// key: this.key,
// chunk: 0,
// chunks: 1,
// file: this.file,
// }
}, },
// //
getPersonTx() { getPersonTx() {
@ -266,6 +308,28 @@
</script> </script>
<style scoped lang="scss" type="text/scss"> <style scoped lang="scss" type="text/scss">
.person-id-photo-container{
/deep/ .ant-modal-content{
background-color: white !important;
position: relative;
.ant-modal-close{
margin-right: 0 !important;
margin-top: 0 !important;
}
.ant-modal-header{
background-color: white !important;
.ant-modal-title{
color: black !important;
margin-top: 0 !important;
padding-bottom: 0 !important;
}
}
.ant-modal-body{
position: initial !important;
}
}
}
/deep/ .ant-modal-content .ant-modal-body .perMsgBox .colRight .colRightTbox span { /deep/ .ant-modal-content .ant-modal-body .perMsgBox .colRight .colRightTbox span {
color: #fff !important; color: #fff !important;
@ -436,7 +500,10 @@
border-radius: 50%; border-radius: 50%;
border: 1px solid #03EFFD; border: 1px solid #03EFFD;
overflow: hidden; overflow: hidden;
.upload-container-style{
width: 100%;
height: 100%;
}
} }
.editIcon { .editIcon {
@ -464,11 +531,6 @@
border-radius: 5px; border-radius: 5px;
cursor: pointer; cursor: pointer;
} }
.fixBtnChange {
}
.fixBtnSave { .fixBtnSave {
top: 51%; top: 51%;
background: none; background: none;
@ -500,53 +562,35 @@
border-radius: 50%; border-radius: 50%;
border: 1px solid #03EFFD; border: 1px solid #03EFFD;
overflow: hidden; overflow: hidden;
.upload-container-style{
width: 100%;
height: 100%;
.img-style{
width: 100%;
height: 100%;
}
}
} }
.Uploader { .fixBtnChange, .fixBtnSave {
cursor: pointer;
position: absolute; position: absolute;
width: 110px !important; width: 120px;
height: 39px; height: 39px;
line-height: 39px; line-height: 39px;
top: 50%; top: 21%;
right: 70px; background: none;
margin-top: -24px; right: 65px;
/*display: inline-block;*/ display: inline-block;
border: 1px solid #03EFFD; border: 1px solid #03EFFD;
/*border-radius: 5px;*/ border-radius: 5px;
/*cursor: pointer;*/ cursor: pointer;
/*.img-style { text-align: center;
border: none; }
top: -37px; .fixBtnSave {
left: -208px; top: 51%;
img { background: none;
display: inline-block !important; }
border-radius: 50% !important; .save-button{
border: 2px solid #25e1ff !important; margin-top: 50px;
width: 100% !important;
height: 100% !important;
}
.ant-progress {
font-size: 30px;
}
}*/
.upload-btn {
/*display: block !important;*/
.upload-Image-style {
width: 118px !important;
height: 47px !important;
background: none !important;
border: 1px solid #03EFFD !important;
.icon-style {
color: rgba(0, 0, 0, 0) !important;
}
.ant-upload-text {
color: #fff !important;
margin-top: -1.5rem !important;
}
}
}
} }
} }
} }

Loading…
Cancel
Save