<template>
|
<div class="my-main content-main">
|
<div class="my-info">
|
<div class="tips-main">
|
<div class="tips">
|
<span />
|
<div>基本信息</div>
|
</div>
|
<div class="tips-btn">
|
<el-button type="text" @click="dialogFormVisible = true">编辑</el-button>
|
<el-dialog title="编辑" :visible.sync="dialogFormVisible" >
|
<el-form ref="form" :model="form" :rules="rules" label-position="left">
|
<el-form-item label="用户名：" :label-width="formLabelWidth" prop="account">
|
<el-input v-model="form.account" autocomplete="off" />
|
</el-form-item>
|
<el-form-item label="姓名：" :label-width="formLabelWidth" prop="name">
|
<el-input v-model="form.name" autocomplete="off" />
|
</el-form-item>
|
<el-form-item label="电话号码：" :label-width="formLabelWidth" prop="phone">
|
<el-input show-word-limit maxlength="11" type="text" v-model="form.phone" autocomplete="off" />
|
</el-form-item>
|
<el-form-item label="邮箱：" :label-width="formLabelWidth" prop="email">
|
<el-input v-model="form.email" autocomplete="off" />
|
</el-form-item>
|
<el-form-item label="签名：" :label-width="formLabelWidth" prop="signature">
|
<el-upload
|
class="upload-demo"
|
action="#"
|
multiple
|
:limit="3">
|
<el-button size="small" type="primary">点击上传</el-button>
|
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
|
</el-upload>
|
</el-form-item>
|
</el-form>
|
<div slot="footer" class="dialog-footer">
|
<el-button @click="dialogFormVisible = false">取 消</el-button>
|
<el-button type="primary" @click="submitForm()">确 定</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</div>
|
<div class="message">
|
<div class="message-item"><span><i class="el-icon-edit" />用户名：</span>{{ infoTable.username }}</div>
|
<div class="message-item">
|
<span><i class="el-icon-edit" />姓名：</span>
|
<el-tag type="primary"><i class="el-icon-info" :style="{marginRight:'4px', color:'#409EFF'}" />{{ infoTable.name }}</el-tag>
|
</div>
|
<div class="message-item">
|
<span><i class="el-icon-edit" />电话号码：</span>
|
{{ infoTable.cellPhone }}</div>
|
<div class="message-item">
|
<span><i class="el-icon-edit" />邮箱：</span>
|
{{ infoTable.email }}</div>
|
<div class="message-item">
|
<span><i class="el-icon-edit" />签名：</span>
|
2121212121212121</div>
|
</div>
|
</div>
|
<div class="my-business">
|
<div class="tips-main">
|
<div class="tips">
|
<span />
|
<div>企业信息</div>
|
</div>
|
</div>
|
<div class="message">
|
<div class="message-item"><span><i class="el-icon-edit" />企业简称：</span>{{ businessTable.businessSmallName }}</div>
|
<div class="message-item">
|
<span><i class="el-icon-edit" />完整名称：</span>{{ businessTable.businessBigName }}
|
</div>
|
<div class="message-item">
|
<span><i class="el-icon-edit" />联系人：</span>
|
<el-tag type="primary"><i class="el-icon-info" :style="{marginRight:'4px', color:'#409EFF'}" />{{ businessTable.businessContact }}</el-tag></div>
|
<div class="message-item">
|
<span><i class="el-icon-edit" />联系人电话：</span>
|
{{ businessTable.businessPhone }}</div>
|
<div class="message-item">
|
<span><i class="el-icon-edit" />加入状态：</span>
|
2121212121212121</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { getInfo } from '@/api/user'
|
|
// axios.defaults.baseURL = process.env.VUE_APP_BASE_API
|
|
export default {
|
data() {
|
return {
|
infoTable:
|
{
|
username: 'jack',
|
name: '张三',
|
cellPhone: '138888888',
|
email: '138888888@qq.com',
|
signature: '我是法外狂徒'
|
},
|
businessTable:
|
{
|
businessSmallName: '中天',
|
businessBigName: '中天科技',
|
businessContact: 'jack',
|
businessPhone: '1388888888',
|
businessStatus: 1
|
},
|
dialogFormVisible: false,
|
form: {
|
account: "",
|
name: "",
|
phone: "",
|
email: "",
|
signature: ""
|
},
|
formLabelWidth: 120
|
}
|
},
|
created() {
|
this.getUserInfo()
|
},
|
methods: {
|
clearFilter() {
|
// 清除所有过滤器
|
this.$refs.businessTable.clearFilter()
|
},
|
filterTag(value, row) {
|
console.log(value, row)
|
return row.businessStatus === value
|
},
|
submitForm() {
|
// Handle form submission here
|
// console.log(this.form);
|
// POST请求
|
this.dialogFormVisible = false
|
},
|
async getUserInfo() {
|
const res = await getInfo()
|
this.infoTable.name = res.data.uname
|
this.infoTable.username = res.data.account
|
this.infoTable.cellPhone = res.data.phone
|
this.infoTable.email = res.data.email
|
this.businessTable.businessSmallName = res.data.e_byname
|
this.businessTable.businessBigName = res.data.e_name
|
this.businessTable.businessContact = res.data.e_link_name
|
this.businessTable.businessPhone = res.data.e_phone
|
// console.log(res)
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.my-main{
|
.my-info,.my-business{
|
background: #fff;
|
margin: 0;
|
margin-bottom: 12px;
|
border-radius: 6px;
|
.tips-main{
|
// margin: ;
|
padding: 10px 20px 0 20px;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
height: 50px;
|
.tips-btn{
|
height: 100%;
|
}
|
.tips{
|
height: 100%;
|
display: flex;
|
height: 24px;
|
align-items: center;
|
font-size: 16px;
|
// margin-bottom: 12px;
|
>span{
|
display: inline-block;
|
margin-right: 10px;
|
width: 4px;
|
height: 16px;
|
background: #0077DB;
|
}
|
>div{
|
height: 100%;
|
line-height: 26px;
|
}
|
.el-button{
|
padding: 0;
|
}
|
}
|
}
|
|
// 基本信息和企业信息的每一个信息项样式
|
.message{
|
padding: 0px 20px 10px 20px;
|
|
display: flex;
|
flex-wrap: wrap;
|
border-top: 1px solid #F2F6FC;
|
// border-top: 1px solid #F2F6FC;
|
>div{
|
flex: 30%;
|
max-width: 30%;
|
padding: 8px;
|
color: #606266;
|
align-items: center;
|
// height: 65px;
|
font-size: 12px;
|
height: 52px;
|
display: flex;
|
align-items: center;
|
>span{
|
color: #303133;
|
font-size: 16px;
|
//
|
>i{
|
margin-right: 8px;
|
}
|
}
|
}
|
// >div:nth-child(5){
|
// flex: 60%;
|
// max-width: 60%;
|
// }
|
}
|
}
|
.my-business{
|
margin-top: 28px;
|
}
|
}
|
</style>
|
