<template>
<div class="mainBox">
<div class="auth-set">
<Card :bordered="false" dis-hover>
<p slot="title">
<Icon type="ios-list"></Icon>
个人信息修改
</p>
<Row :gutter="20">
<Col span="12">
<Form ref="formCustom" :model="formCustom" :rules="ruleCustom" :label-width="100">
<FormItem label="姓名：" prop="name">
<Input type="text" v-model="formCustom.name"></Input>
</FormItem>
<FormItem label="电话：" prop="phone">
<Input type="text" v-model="formCustom.phone"></Input>
</FormItem>
<FormItem label="微信：" prop="wechat">
<Input type="text" v-model="formCustom.wechat"></Input>
</FormItem>
<FormItem label="邮箱：" prop="email">
<Input type="text" v-model="formCustom.email"></Input>
</FormItem>
<FormItem label="ZOOM入口：" prop="zoom">
<Input type="text" v-model="formCustom.zoom"></Input>
</FormItem>
<FormItem label="上传头像：">
<Upload
ref="uploads"
:before-upload="handleUpload"
:format="['jpg','jpeg','png']"
:on-success = 'upSuccess'
action="/"
:on-format-error="handleFormatError"
@on-error = 'errorSuccess'>
<Button type="ghost" icon="ios-cloud-upload-outline">选择上传头像</Button>
</Upload>
<img :src="imgUrl" alt="" class="imhHead">
</FormItem>
<FormItem>
<Button type="primary" @click="handleSubmit('formCustom')">提交</Button>
<!--<Button type="ghost" @click="handleReset('formCustom')" style="margin-left: 8px">Reset</Button>-->
</FormItem>
</Form>
</Col>
</Row>
</Card>
</div>
</div>
</template>
<script>
import {mapActions} from 'vuex'
import {cdInfo,cdInfoEdit} from '@/api/data-cd'
import {getOss} from '@/api/data'
export default {
name: "cd-info",
data() {
return {
formCustom: {
id:"",
name:"",
phone:"",
wechat:"",
email:"",
fileName:"",
zoom:"",
},
ruleCustom: {
},
id:'',
idPara:{
id:''
},
cdId:'',
imgUrl:''
}
},
mounted () {
this.getUser().then(resolve => {
console.log(resolve);
this.id = resolve.id
this.idPara.id = this.id
this.formCustom.id = this.id
console.log(this.id);
}).catch(error => console.log('caught', error));
cdInfo(this.idPara).then(res=>{
console.log(res);
this.formCustom.name=res.data.info.name
this.formCustom.phone=res.data.info.phone
this.formCustom.wechat=res.data.info.wechat
this.formCustom.email=res.data.info.email
this.formCustom.zoom=res.data.info.zoom
this.formCustom.fileName=res.data.info.fileName
this.cdId=res.data.info.cdId;
this.imgUrl = res.data.info.fileName;
})
},
methods: {
...mapActions([
'getUser',
]),
handleSubmit(name) {
this.$refs[name].validate((valid) => {
if (valid) {
let data = Object.assign({},this.formCustom);
data.fileName = this.imgUrl;
cdInfoEdit(data).then(res=>{
if(res.code===0){
this.$Message.success('保存成功!')
}
})
}
})
},
handleUpload(file){
let data = {
'role':'cd',
'id':this.cdId
};
getOss(data).then(res=>{
if(res.code === 0 ){
this.getUpHead(res.data,file);
}else{
this.$Message.info('上传头像失败');
}
})
return false;
},
getUpHead(a,f){
const client = new OSS.Wrapper({
region:'oss-cn-beijing',
accessKeyId: a.accessid,
accessKeySecret: a.accessKey,
stsToken: '',
bucket:a.bucket
})
let the = this;
let random_name= this.random_string(5);
client.multipartUpload(random_name, f, {
}).then((results) => {
console.log(results);
the.imgUrl = results.url;
})
},
random_string(len) {
len = len || 32;
let chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
let maxPos = chars.length;
let pwd = '';
for (let i = 0; i < len; i++) {
pwd += chars.charAt(Math.floor(Math.random() * maxPos));
}
pwd+=(new Date()).getTime();
return pwd;
},
upSuccess(a){
this.file = null;
this.loadingStatus = false;
this.$Message.success('上传文件成功')
let arr = [];
a.data.fails.forEach((val)=>{
let data = {};
data.name = val.data.name;
data.message = val.message;
arr.push(data)
})
this.errorData = arr;
},
errorSuccess(){
this.file = null;
this.loadingStatus = false;
this.$Message.success('上传文件失败')
},
handleFormatError(file) {
this.$Notice.info('上传类型不对');
},
}
}
</script>
<style scoped>
.auth-set .ivu-row {
margin-bottom: 20px;
}
.pageWrap{
text-align: center;
margin-top: 30px;
}
.imhHead{
width: 120px;
height: 120px;
border-radius: 5px;
}
</style>
效果如下：
