DigitalScholl/Learun.Framework.Ultimate V7/LearunApp-2.2.0/pages/my/qrcode.vue

<template>
  <view class="page">
    <view class="bg">
      <view class="info">
        <img :src="avatar" class="avatar" />
        <view class="infotext">
          <view class="text-xl">{{ currentUser.realName }}</view>
          <l-tag line="green">{{ userTag }}</l-tag>
        </view>
      </view>

      <view class="qrcode"><tki-qrcode :val="qrCodeValue" :size="550" loadMake /></view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      qrCodeValue: 'http://www.learun.cn/'
    }
  },

  computed: {
    // 当前用户对象
    currentUser() {
      return this.GET_GLOBAL('loginUser')
    },

    // 头像图片 url
    avatar() {
      return this.API + `/user/img?data=${this.currentUser.userId}`
    },

    // 用户公司部门 tag
    userTag() {
      const { companyId, departmentId } = this.currentUser
      if (!companyId) {
        return `总集团公司`
      }

      const company = this.GET_GLOBAL('company')
      const dep = this.GET_GLOBAL('department')
      const companyName = company[companyId].name
      if (!dep) {
        return companyName
      }

      return `${companyName} / ${dep[departmentId].name}`
    }
  }
}
</script>

<style lang="less" scoped>
.page {
  background-color: #2f2d2d;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  bottom: 0;
  top: 0;
  right: 0;
  left: 0;

  .bg {
    background: #ffffff;
    border-radius: 5px;
    padding: 20rpx;
    display: inline-block;

    .info {
      display: flex;
      align-items: center;
      margin-bottom: 10px;

      .avatar {
        width: 120rpx;
        height: 120rpx;
        margin-right: 15px;
        border-radius: 2px;
      }

      .infotext > view {
        margin-bottom: 10px;
      }
    }
  }
}
</style>