income_payments_enterprise_terminal/src/views/standardsAssociation/BasicInfoFromIncome.vue

<template>

  <div class="main-box member-basic-info">
    <a-spin :spinning="isLoading">
      <div class="panel-cell">
        <div class="title">秘书处信息</div>
        <div class="content">
          <div class="info-row">
            <span class="label-span">挂靠单位：</span>
            <span class="value-span">中国汽车技术研究中心有限公司标准化研究院</span>
          </div>
          <div class="info-row">
            <span class="label-span">地址：</span>
            <span class="value-span">{{ secretariatInfo.address }}</span>
          </div>
          <div class="info-row">
            <span class="label-span">联系人：</span>
            <span class="value-span">{{ secretariatInfo.contactPerson }}</span>
          </div>
          <div class="info-row">
            <span class="label-span">联系人电话：</span>
            <span class="value-span">{{ secretariatInfo.contactPhone }}</span>
          </div>
          <div class="info-row">
            <span class="label-span">联系人邮箱：</span>
            <span class="value-span">{{ secretariatInfo.contactMail }}</span>
          </div>
        </div>
      </div>
      <div class="panel-cell">
        <div class="title">本企业信息</div>
        <div class="panel-cell-top" v-if="isShowEdit">
          <a-button type="link" @click="handleEdit">
            编辑
            <img src="../../assets/imgs/icon/icon-edit.png" class="title-icon">
          </a-button>
        </div>
        <div class="content">
          <div class="info-row">
            <span class="label-span">企业名称：</span>
            <span class="value-span">{{ memberInfo.companyName|| loginUserInfo.companyName }}</span>
          </div>
          <div class="info-row">
            <span class="value-span">如若需要注册标协会员，请前往<a :href="memberRegisterUrl" target="_blank">网站</a>注册</span>
          </div>

        </div>
      </div>
    </a-spin>
    <basic-model ref="basicModel" @ok="refreshInfo"></basic-model>
  </div>
</template>

<script>
import { getMemberBaseInfo } from '../../api/standardsAssociationApi'
import BasicModel from './modules/BasicModel'
import { mapGetters, mapState } from 'vuex'

export default {
  name: 'BasicInfo',
  components: {
    BasicModel
  },
  data() {
    return {
      isLoading: false,
      // 秘书处信息
      secretariatInfo: {
        address: '', // 地址
        contactPerson: '', // 联系人
        contactPhone: '', // 联系人电话
        contactMail: '' // 联系人邮箱
      },
      // 本企业信息
      memberInfo: {
        companyName: '', //  企业名称
        contactPerson: '', //  企业管理员
        contactPhone: '', //  管理员电话
        contactMail: '', //  管理员邮箱
        validDate: 'xxxx年xx月xx日到xxxx年xx月xx日' //  会员有效期
      },
      // 当前登录用户的信息
      loginUserInfo: {},
      memberInfoInit: {} // 会员的初始化信息，用于编辑使用
    }
  },
  computed: {
    // 是否显示编辑按钮，当A企业角色为会员企业：（1--普通企业；2--会员企业）B当前登录人是企业管理员 的时候返回true
    isShowEdit() {
      if(Number((this.loginUserInfo || {}).companyRole) === 2 && (this.loginUserInfo || {}).roleCode + '' === '2') {
        return true
      } else {
        return false
      }
    },
    memberRegisterUrl() {
      return window._CONFIG['memberRegisterUrl']
    }
  },
  methods: {
    // 获得会员相关数据的字段
    getBasicInfo() {
      this.isLoading = true
      getMemberBaseInfo({}).then(res => {
        if(res.success) {
          const secretariatInfo = res.result.tbContacts || {}
          this.secretariatInfo.address = secretariatInfo.address || '天津市东丽开发区先锋东路68号'
          this.secretariatInfo.contactPerson = res.result.secretariat.realname || '郭琳'
          this.secretariatInfo.contactPhone = secretariatInfo.telephone
          this.secretariatInfo.contactMail = secretariatInfo.email
          const memberInfo = res.result.memberInfo || {}
          this.memberInfoInit = memberInfo
          this.memberInfo.companyName = memberInfo.companyName
          this.memberInfo.contactPerson = memberInfo.liaisonMan
          this.memberInfo.contactPhone = memberInfo.mobile
          this.memberInfo.contactMail = memberInfo.email
          this.memberInfo.validDate = memberInfo.validDate
        }
      }).finally(() => {
        this.isLoading = false
      })
    },
    // 编辑成功后的回调-刷新页面的数据
    refreshInfo() {
      this.getBasicInfo()
    },
    handleEdit() {
      this.$refs.basicModel.edit(this.memberInfoInit)
    },
    ...mapGetters(['userInfo'])
  },
  created() {
    console.log("----window._CONFIG['memberRegisterUrl']--------", window._CONFIG['memberRegisterUrl'])
    this.getBasicInfo()
    this.loginUserInfo = this.userInfo()
  }
}
</script>

<style scoped lang="less">
@import '~@assets/less/common.less';

.member-basic-info {
  margin-bottom: 20px;
  font-size: 14px;
  color: #999;
  opacity: 1;
  /deep/.ant-spin-container{
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  .panel-cell {
    flex: 1;
    width: 0;
    height: 419px;
    //padding: 10px;
    background: #ffffff;
    border-radius: 4px;
    box-shadow: -2px 0px 10px 10px rgba(51, 51, 51, 0.10);
    background: #ffffff;

    .title {
      height: 56px;
      line-height: 56px;
      background: #fff;
      border-bottom: 2px solid #f2f2f2;
      padding: 0 20px;
      font-size: 16px;
      color: black;
    }

    .content {
      padding: 10px;
      // 每行数据
      .info-row {
        padding: 10px;
        display: flex;
        flex-direction: row;
        align-items: baseline;

        & > span {
          display: inline-block;
          white-space: pre-wrap;
        }

        .label-span {
          width: 100px;
        }

        .value-span {
          width: 0;
          flex: 1;
          overflow: hidden;
          white-space: pre-wrap;
          word-break: break-all;
        }
      }
    }
  }

  .panel-cell + .panel-cell {
    margin-left: 10px;
  }
}
.panel-cell-top{
  position: absolute;
  top: 12px;
  right: 5px;
  img{
    width: 18px;
    height: 18px;
    margin-left: 3px;
  }
}

</style>