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

<template>
  <view v-if="currentUser" id="my" class="page">
    <!-- 顶部用户名、头像 banner -->
    <view @click="goTo('info')" class="mybanner">
      <view class="avatarslot">
        <image
          :src="avatarSrc()"
          :style="{ borderRadius: roundAvatar ? '50%' : '3px' }"
          mode="aspectFill"
          class="avatar"
        ></image>
      </view>
      <view class="info">
        <view class="username text-xl text-white">{{ currentUser.realName }}</view>
        <view class="usertag">
          <l-tag color="green">{{ userTag }}</l-tag>
        </view>
      </view>
      <view class="badge text-white text-lg"><l-icon type="right" round /></view>
    </view>

    <!-- 用户信息菜单 -->
    <l-list border card>
      <l-list-item @click="goTo('contact')" arrow>
        <l-icon type="phone" color="blue" />
        联系方式
      </l-list-item>
      <!-- <l-list-item @click="goTo('qrcode')" arrow>
        <l-icon type="qrcode" color="blue" />
        我的二维码
      </l-list-item> -->
      <l-list-item @click="goTo('password')" arrow>
        <l-icon type="edit" color="blue" />
        修改密码
      </l-list-item>
    </l-list>

    <!-- 关于菜单 -->
    <!-- <l-list border card>
      <l-list-item @click="goTo('learun')" arrow>
        <l-icon type="home" color="blue" />
        关于泉江
      </l-list-item>
      <l-list-item @click="goTo('framework')" arrow>
        <l-icon type="info" color="blue" />
        数字化智慧校园
      </l-list-item>
    </l-list> -->

    <view class="padding" style="padding-top: 0;">
      <!-- 小程序账号绑定/解除按钮 -->
      <!-- #ifdef MP-ALIPAY || MP-WEIXIN -->
      <l-button
        v-if="MPBind && !currentUser.miniProgram"
        @click="userBind"
        size="lg"
        line="blue"
        class="block margin-top"
        block
      >
        绑定{{ PLATFORM_TEXT }}账号
      </l-button>
      <l-button
        v-if="MPUnbind && currentUser.miniProgram"
        @click="userUnBind"
        size="lg"
        line="red"
        class="block margin-top"
        block
      >
        解绑{{ PLATFORM_TEXT }}账号
      </l-button>
      <!-- #endif -->

      <l-button @click="logout" size="lg" color="red" class="block margin-top" block>退出登录</l-button>
    </view>

    <view class="footer">{{ copyRightDisplay }}</view>
  </view>
</template>

<script>
export default {
  methods: {
    // 点击「注销登录」按钮
    async logout() {
      if (!(await this.CONFIRM('注销确认', '确定要注销登录吗？', true))) {
        return
      }

      this.CLEAR_GLOBAL()
      this.RELAUNCH_TO('/pages/login')
    },

    // #ifdef MP-ALIPAY || MP-WEIXIN
    // 小程序绑定方法，只会编译到小程序
    async userBind() {
      const type = this.PLATFORM
      const confirm = await this.CONFIRM(
        '绑定确认',
        `确定要将智慧校园账号与当前登录的${this.PLATFORM_TEXT}账号绑定吗？\n(绑定后可以使用一键登录功能)`,
        true
      )
      if (!confirm) {
        return
      }

      this.LOADING('绑定中…')
      const [codeErr, { code }] = await uni.login({ provider: type })
      if (codeErr || !code) {
        this.HIDE_LOADING()
        this.TOAST('获取用户授权码失败')
        return
      }

      const success = await this.HTTP_POST('learun/adms/user/openid_bind', { code, type }, '绑定失败')
      if (!success) {
        return
      }

      this.HIDE_LOADING()
      this.SET_GLOBAL('loginUser', Object.assign({}, this.currentUser, { miniProgram: true }))
      this.TOAST(`已成功绑定到当前的${this.PLATFORM_TEXT}账号`)
    },

    // 解绑小程序
    async userUnBind() {
      const confirm = await this.CONFIRM(
        '解绑确认',
        '确定要解除小程序账号绑定吗？ （解绑将自动退出登录，需使用力软账号和密码再次登录）',
        true
      )
      if (!confirm) {
        return
      }

      const success = await this.HTTP_POST('learun/adms/user/openid_unbind', { type: this.PLATFORM }, '解除绑定失败')
      if (!success) {
        return
      }

      this.CLEAR_GLOBAL()
      this.RELAUNCH_TO('/pages/login')
      this.TOAST('已成功解除绑定')
    },
    // #endif

    // 跳转到
    goTo(urlPath) {
      this.NAV_TO(`/pages/my/${urlPath}`)
    },

    // 用户头像 url
    avatarSrc() {
      if (!this.currentUser) {
        return ''
      }

      return this.API + `/user/img?data=${this.currentUser.userId}`
    }
  },

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

    // 获取组织结构 tag 的显示
    userTag() {
      if (!this.currentUser) {
        return ''
      }

      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}`
    },

    // 头像圆形/方形显示参数
    roundAvatar() {
      return this.CONFIG('pageConfig.roundAvatar')
    },

    // 页面底部公司/版权显示
    copyRightDisplay() {
      const year = new Date().getFullYear()
      const company = this.CONFIG('company')

      return `Copyright © ${year} ${company}`
    },

    // #ifdef MP-ALIPAY || MP-WEIXIN
    // 是否显示小程序绑定按钮
    MPBind() {
      return this.CONFIG(`miniProgramAccount.${this.PLATFORM}`).includes('bind')
    },

    // 是否显示小程序解绑按钮
    MPUnbind() {
      return this.CONFIG(`miniProgramAccount.${this.PLATFORM}`).includes('unbind')
    }
    // #endif
  }
}
</script>

<style lang="less" scoped>
.mybanner {
  background: #0c86d8;
  height: 120px;
  padding: 25px 15px;
  display: flex;
  align-items: center;

  .avatarslot {
    .avatar {
      height: 60px;
      width: 60px;
    }
  }

  .info {
    padding-left: 20px;

    .username {
      margin-bottom: 5px;
    }
  }

  .badge {
    flex-grow: 1;
    display: flex;
    justify-content: flex-end;
  }
}

.footer {
  text-align: center;
  font-size: 14px;
  color: #ccc;
  margin-bottom: 10rpx;
}
</style>