caimei-authentic-manager/src/views/normal/personal/index.vue

<template>
  <div class="app-container personal-info">
    <div class="title">个人资料</div>
    <el-divider />
    <el-row>
      <el-col :span="5">公司名称：</el-col>
      <el-col :span="19">{{ supplierInfo.shopName }}</el-col>
    </el-row>
    <el-divider />
    <el-row>
      <el-col :span="5">所属类型：</el-col>
      <el-col :span="8">{{ supplierInfo.shopType === 1 ? '品牌方' : '代理商' }}</el-col>
    </el-row>
    <el-divider />
    <el-row>
      <el-col :span="5">手机号：</el-col>
      <el-col :span="8">{{ supplierInfo.mobile }}</el-col>
      <el-col :span="8">
        <router-link class="link" to="/personal/mobile"><i class="el-icon-edit" /><span>修改手机号</span></router-link>
      </el-col>
    </el-row>
    <el-divider />
    <el-row>
      <el-col :span="5">登录账号：</el-col>
      <el-col :span="8">{{ supplierInfo.loginAccount ? supplierInfo.loginAccount : '暂未绑定' }}</el-col>
      <el-col v-if="!supplierInfo.loginAccount" :span="8">
        <router-link class="link" to="/personal/account"><i class="el-icon-link" /><span>去绑定</span></router-link>
      </el-col>
    </el-row>
    <el-divider />
    <template v-if="supplierInfo.shopType === 2">
      <el-row>
        <el-col :span="5">代理品牌：</el-col>
        <el-col :span="8">{{ brandList }}</el-col>
      </el-row>
      <el-divider />
    </template>
    <el-row>
      <el-col :span="5">会员状态：</el-col>
      <el-col :span="8">
        <span v-if="supplierInfo.vipStatus === 1">会员</span>
        <span v-if="supplierInfo.vipStatus === 3">非会员</span>
      </el-col>
      <el-col :span="8">
        <router-link v-if="supplierInfo.vipStatus === 3" class="link" to="/vip/vip-open">
          <i class="el-icon-thumb" /><span>开通会员</span>
        </router-link>
        <router-link v-if="supplierInfo.vipStatus === 1" class="link" to="/vip/vip-open">
          <i class="el-icon-thumb" /><span>续费会员</span>
        </router-link>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getSupplierById } from '@/api/supplier'
export default {
  data() {
    return {
      supplierInfo: {}
    }
  },
  computed: {
    brandList() {
      return this.supplierInfo.shopInfo.map(item => item.brandName).join('/')
    }
  },
  created() {
    this.fetchSupplierInfo()
  },
  methods: {
    // 获取供应商信息
    fetchSupplierInfo() {
      getSupplierById({ authUserId: this.$store.getters.authUserId }).then(res => {
        console.log(res)
        this.supplierInfo = res.data
      })
    }
  }
}
</script>

<style scoped lang="scss">
.personal-info {
  width: 600px;
  margin: 0 auto;
  margin-top: 60px;
  color: #101010;
  .link {
    color: #409eff;
    font-size: 14px;
    &:hover {
      text-decoration: underline;
    }
  }

  .el-row {
    .el-col:nth-child(2) {
      color: #404040;
    }
  }
}
.title {
  font-size: 24px;
  font-weight: bold;
}
</style>