业务组件封装

<template>

  <!-- 业务组件 -->

  <mf-pane width="890px"

           :style="style">

    <!-- 头像 -->

    <mf-image width="100px"

              height="100px"

              borderRadius="50%"

              :src="data && data.avatar"

              margin="0 25px 0 0" />

    <mf-pane width="stretch"

             justify="center"

             layoutEnabled

             :cols="3">

      <!-- 用户名 -->

      <mf-panel>

        <mf-text v-bind="labelProps">用户名</mf-text>

        <mf-text v-bind="contentProps">{{data && data.userName || '—'}}</mf-text>

      </mf-panel>

      <!-- 所属用户组 -->

      <mf-panel>

        <mf-text v-bind="labelProps">所属用户组</mf-text>

        <mf-text v-bind="contentProps">{{data && data.groupName || '—'}}</mf-text>

      </mf-panel>

      <!-- 创建时间 -->

      <mf-panel>

        <mf-text v-bind="labelProps">创建时间</mf-text>

        <mf-text v-bind="contentProps">{{data && data.createTime || '—'}}</mf-text>

      </mf-panel>

      <!-- 角色 -->

      <mf-panel>

        <mf-text v-bind="labelProps">角色</mf-text>

        <mf-text v-bind="contentProps">{{data && data.roleName || '—'}}</mf-text>

      </mf-panel>

      <!-- 最近登录 -->

      <mf-panel>

        <mf-text v-bind="labelProps">最近登录</mf-text>

        <mf-text v-bind="contentProps">{{data && data.lastLoginTime || '—'}}</mf-text>

      </mf-panel>

      <!-- 邮箱 -->

      <mf-panel>

        <mf-text v-bind="labelProps">邮箱</mf-text>

        <mf-text v-bind="contentProps">{{data && data.email || '—'}}</mf-text>

      </mf-panel>

      <!-- 状态 -->

      <mf-panel>

        <mf-text v-bind="labelProps">状态</mf-text>

        <mf-tag v-if="data && data.status" tagType="success">{{data && data.status}}</mf-tag>

        <mf-text v-else v-bind="contentProps">—</mf-text>

      </mf-panel>

    </mf-pane>

  </mf-pane>

</template>

<script>

  export default {

    name: 'mf-user-card',

    data() {

      return {

        labelProps: {

          width: '90px',

          fontWeight: 'bold'

        },

        contentProps: {

          fontColor: 'rgb(102, 102, 102)'

        }

      }

    },

    props: {

      // 背景色

      backgrundColor: String,

      /**

       * 卡片数据

       * avatar         头像

       * email           邮箱

       * lastLoginTime  最近登录

       * roleName       管理员

       * createTime     创建时间

       * userName       用户名

       * groupName      所属用户组

       * status         状态

       */

      data: {

        type: Object,

        default: _ => {}

      }

    },

    computed: {

      style() {

        let style = {};

        if (this.backgrundColor) style.backgrundColor = this.backgrundColor;

        return style;

      }

    },

    created() {},

    methods: {

    }

  }

</script>