标准库的第三次提交

hailin

2023-07-21 17e62da2a097844b0f6f7a58926e7d0a40598d2c

 src/views/personal/myInformation/index.vue

@@ -1,11 +1,44 @@
<template>
  <div class="my-main content-main">
    <div class="my-info">
      <div class="tips">
        <span />
        <div>基本信息</div>
      <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>
      <el-table
      <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"
@@ -49,17 +82,23 @@
        >
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
            <!-- <el-button type="text" size="small">编辑</el-button> -->
            <el-button type="text" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      </el-table> -->
    </div>
    <div class="my-business">
      <div class="tips">
        <span />
        <div>企业信息</div>
      <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
      <!-- <el-table
        ref="businessTable"
        :header-cell-style="{border:'0px',background:'#f5f7fa',color:'#606266',boxShadow: 'inset 0 1px 0 #ebeef5'}"
        :data="businessTable"
@@ -109,40 +148,60 @@
        >
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">退出</el-button>
            <!-- <el-button type="text" size="small">编辑</el-button> -->
            <el-button type="text" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      </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: [
      infoTable:
        {
          username: 'jack',
          name: '张三',
          cellPhone: '138888888',
          email: '138888888@qq.com',
          signature: '我是法外狂徒'
        }

      ],
      businessTable: [
        },
      businessTable:
        {
          businessSmallName: '中天',
          businessBigName: '中天科技',
          businessContact: 'jack',
          businessPhone: '1388888888',
          businessStatus: 1
        }
      ]
        },
      dialogFormVisible: false,
      form: [],
      formLabelWidth: 120
    }
  },
  created() {
    this.getUserInfo()
  },
  methods: {
    clearFilter() {
@@ -152,6 +211,24 @@
    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)
    }
  }
}
@@ -161,34 +238,95 @@
.my-main{
  .my-info,.my-business{
    background: #fff;
    padding: 20px 20px 10px 20px;
    // padding: 10px 20px 10px 20px;
    margin: 0;
    margin-bottom: 12px;
    .tips{
    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{
      // margin-bottom: 12px;
      >span{
        display: inline-block;
        margin-right: 10px;
        width: 4px;
        height: 16px;
        background: #0077DB;
      }
      div{
      >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-info{

  }
  .my-business{

    margin-top: 28px;
  }
}
</style>