<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">
|
<span><i class="el-icon-edit" />操作：</span>
|
<el-button type="text" @click="dialogFormVisible = true">编辑</el-button>
|
<el-dialog title="编辑" :visible.sync="dialogFormVisible">
|
<el-form ref="form" :model="form" :rules="rules">
|
<el-form-item label="账号" :label-width="formLabelWidth" prop="account">
|
<el-input v-model="form.account" autocomplete="off" />
|
</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>
|
<!-- <el-table
|
ref="infoTable"
|
:header-cell-style="{border:'0px',background:'#f5f7fa',color:'#606266',boxShadow: 'inset 0 1px 0 #ebeef5'}"
|
:data="infoTable"
|
style="width: 100%"
|
>
|
<el-table-column
|
prop="username"
|
label="用户名"
|
width="200"
|
/>
|
<el-table-column
|
prop="name"
|
label="姓名"
|
width="460"
|
>
|
<template slot-scope="scope">
|
<el-tag type="info"><i class="el-icon-info" :style="{marginRight:'4px'}" />{{ scope.row.name }}</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="cellPhone"
|
label="电话号码"
|
width="400"
|
/>
|
<el-table-column
|
prop="email"
|
label="邮箱"
|
width="300"
|
/>
|
<el-table-column
|
prop="signature"
|
label="签名"
|
width="120"
|
:filters="[{ text: 0, value: 0 }, { text: 1, value: 1 }]"
|
:filter-method="filterTag"
|
filter-placement="bottom-end"
|
/>
|
<el-table-column
|
label="操作"
|
width="120"
|
>
|
<template slot-scope="scope">
|
<el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
|
<el-button type="text" size="small">编辑</el-button>
|
</template>
|
</el-table-column>
|
</el-table> -->
|
</div>
|
<div class="my-business">
|
<div class="tips-main">
|
<div class="tips">
|
<span />
|
<div>企业信息</div>
|
</div>
|
<div class="tips-btn">
|
<span><i class="el-icon-edit" />操作：</span>
|
<el-button type="text">退出</el-button>
|
</div>
|
</div>
|
<!-- <el-table
|
ref="businessTable"
|
:header-cell-style="{border:'0px',background:'#f5f7fa',color:'#606266',boxShadow: 'inset 0 1px 0 #ebeef5'}"
|
:data="businessTable"
|
style="width: 100%"
|
>
|
<el-table-column
|
prop="businessSmallName"
|
label="企业简称"
|
width="200"
|
/>
|
<el-table-column
|
prop="businessBigName"
|
label="企业名称"
|
width="460"
|
/>
|
<el-table-column
|
label="企业联系人"
|
width="400"
|
>
|
<template slot-scope="scope">
|
<el-tag type="info"><i class="el-icon-info" :style="{marginRight:'4px'}"/>{{ scope.row.businessContact }}</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="businessPhone"
|
label="企业联系号码"
|
width="300"
|
/>
|
<el-table-column
|
prop="businessStatus"
|
label="加入状态"
|
width="120"
|
:filters="[{ text: 0, value: 0 }, { text: 1, value: 1 }]"
|
:filter-method="filterTag"
|
filter-placement="bottom-end"
|
>
|
<template slot-scope="scope">
|
<el-tag
|
:type="scope.row.businessStatus === 0 ? 'primary' : 'success'"
|
disable-transitions
|
>{{ scope.row.businessStatus === 0 ? '未同意' : '已同意' }}</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="操作"
|
width="120"
|
>
|
<template slot-scope="scope">
|
<el-button @click="handleClick(scope.row)" type="text" size="small">退出</el-button>
|
<el-button type="text" size="small">编辑</el-button>
|
</template>
|
</el-table-column>
|
</el-table> -->
|
<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: [],
|
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;
|
// padding: 10px 20px 10px 20px;
|
margin: 0;
|
margin-bottom: 12px;
|
border-radius: 6px;
|
overflow: hidden;
|
.tips-main{
|
// margin: ;
|
padding: 10px 20px 0 20px;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
height: 50px;
|
// height: ;
|
&:hover{
|
background: #85bff810;
|
.tips-btn{
|
display: block;
|
left: 0;
|
opacity:1;
|
}
|
}
|
.tips-btn{
|
height: 100%;
|
// display: none;
|
position: relative;
|
opacity:0;
|
left: 100px;
|
transition: all 0.3s ease-in-out;
|
}
|
.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>
|
