lanan-repair-app/pages/my/myInfo.vue

<template>
  <view class="container">
    <VNavigationBarVue backgroundColor="#fff" title="个人信息" titleColor="#333"></VNavigationBarVue>
    <view class="body">
      <view class="formItem">
        <image class="formIcon" mode="aspectFit" src="/static/icons/userInfo_1.png"></image>
        <text class="formLabel">头像</text>
        <view class="formValue">
          <image v-if="''==customInfo.avatar || null == customInfo.avatar" :src="defaultAvatar" class="avatar" mode="scaleToFill"
                 style="width: 64rpx;height: 64rpx;border-radius: 50%;"></image>
          <image v-else :src="imgUrlPrex+customInfo.avatar" class="avatar" mode="scaleToFill"
                 style="width: 64rpx;height: 64rpx;border-radius: 50%;"></image>
        </view>
<!--        <u-icon color="#999" name="arrow-right" size="12"></u-icon>-->
      </view>
      <view class="formItem">
        <image class="formIcon" mode="aspectFit" src="/static/icons/userInfo_2.png"></image>
        <text class="formLabel">账号昵称</text>
        <text class="formValue">{{ customInfo.nickname }}</text>
<!--        <u-icon color="#999" name="arrow-right" size="12"></u-icon>-->
      </view>
      <view class="formItem">
        <image class="formIcon" mode="aspectFit" src="/static/icons/userInfo_3.png"></image>
        <text class="formLabel">绑定电话</text>
        <text class="formValue">{{ customInfo.mobile }}</text>
<!--        <u-icon color="#999" name="arrow-right" size="12"></u-icon>-->
      </view>
      <view class="formItem" v-if="showUniCode">
        <image class="formIcon" mode="aspectFit" src="/static/icons/userInfo_3.png"></image>
        <text class="formLabel">我的邀请码</text>
        <text class="formValue"></text>
      </view>
      <view style="padding-bottom: 60rpx;border-bottom: 1px solid #ddd;" class="formItem" v-if="showUniCode">
        <canvas id="qrcode" canvas-id="qrcode" style="width: 200px;height: 200px;margin: auto"></canvas>
<!--        <image style="width: 200px; height: 200px;margin: auto" class="formIcon" mode="scaleToFill" src="@/pages-home/static/yaoqingma.png"></image>-->
      </view>

      <view class="btn" @click="logout">
        退出登录
      </view>
    </view>
  </view>
</template>

<script>
import VNavigationBarVue from '../../components/VNavigationBar.vue';
import config from '@/config'
import request from '@/utils/request';
import {
  getToken,
  getUserInfo,
  getJSONData,
  removeTenantId,
  removeToken,removeUserInfo,removeJSONData,removeStrData
} from '@/utils/auth'
const UQRCode = require('uqrcodejs');
export default {
  components: {
    VNavigationBarVue
  },
  data() {
    return {
      imgUrlPrex:config.baseImageUrl,
      shareUrl:config.shareUrl,
      customInfo: {},
      //员工个人信息
      staff:{},
      //是否显示二维码
      showUniCode:false,
      defaultAvatar: require('@/static/icons/avatar.png')
    };
  },
  onShow() {
    if(!getToken()){
      uni.reLaunch({
        url: '/pages/login/login'
      })
    }else{
      //直接取缓存中的用户信息
      this.customInfo = getUserInfo()
      this.staff = getJSONData("staffInfo")
      uni.showToast({
        title: this.staff.uniqueCode,
        icon: 'none'
      })
      if(this.staff.uniqueCode){
        this.showUniCode =true
        this.generateUniCode(this.staff.uniqueCode)
        this.$forceUpdate()
      }
    }
  },
  methods:{
    generateUniCode(code){
      this.$nextTick(() => {
        // 获取uQRCode实例
        const qr = new UQRCode();
        // 设置二维码内容
        qr.data = this.shareUrl + code;
        // 设置二维码大小，必须与canvas设置的宽高一致
        qr.size = 200;
        // 调用制作二维码方法
        qr.make();
        // 获取canvas上下文
        const canvasContext = uni.createCanvasContext('qrcode', this); // 如果是组件，this必须传入
        // 设置uQRCode实例的canvas上下文
        qr.canvasContext = canvasContext;
        // 调用绘制方法将二维码图案绘制到canvas上
        qr.drawCanvas();
      })
    },
    logout(){
      request({
        url: '/admin-api/company/staff/logout',
        method: 'post'
      }).then((res) => {
        if (res.code == 200) {
          uni.showToast({
            title: '退出成功',
            icon: 'none'
          })
          removeToken()
          removeUserInfo()
          removeJSONData("staffInfo")
          removeStrData("userId")
          removeTenantId()
          //跳转首页
          uni.navigateTo({
            url: '/pages/login/login'
          })
        }else{
          uni.showToast({
            title: res.msg,
            icon: 'none'
          })
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  height: 100%;
  background: #fff;

  .body {
    border-top: 1px solid #ddd;
    padding: 20rpx 32rpx;
  }

  .formItem {
    box-sizing: border-box;
    padding: 40rpx 0;

    display: flex;
    align-items: center;
    justify-content: space-between;
    column-gap: 20rpx;
  }

  .formIcon {
    width: 44rpx;
    height: 44rpx;
  }

  .formLabel {
    font-size: 32rpx;
    color: #333333;
  }

  .formValue {
    flex: 1;
    width: 0;
    text-align: right;
    font-size: 32rpx;
    color: #999999;
  }

  .formBtn {
    width: 24rpx;
    height: 24rpx;
  }

  .avatar {
    width: 108rpx;
    height: 108rpx;
  }

  .btn {
    width: 520rpx;
    height: 80rpx;
    border-radius: 40rpx 40rpx 40rpx 40rpx;
    border: 1rpx solid #999999;

    margin: 60rpx auto;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 32rpx;
    color: #999999;
  }
}
</style>