detection-business/pages/index/UserInfo.vue

<template>
  <view class="content">
    <view class="top-heder">
      <view class="t-left" @click="handleBack">
        <uni-icons type="left" size="18"></uni-icons>
      </view>
      <view class="c-title">个人信息</view>
      <view style="width: 5%; height: 10px;"></view>
    </view>

    <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 style="width: 64rpx;height: 64rpx;border-radius: 50%;"
                 v-if="customInfo && customInfo.avatar === null" :src="defaultAvatar" mode="scaleToFill" class="avatar"></image>
          <image v-else :src="customInfo.avatar" class="avatar" mode="scaleToFill"
                 style="width: 64rpx;height: 64rpx;border-radius: 50%;"></image>
        </view>
      </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>-->
<!--        &lt;!&ndash;        <image style="width: 200px; height: 200px;margin: auto" class="formIcon" mode="scaleToFill" src="@/pages-home/static/yaoqingma.png"></image>&ndash;&gt;-->
<!--      </view>-->

      <view class="btns">
        <view class="btn" @click="logout">
          退出登录
        </view>
        <view class="btn" @click="changePassword">
          修改密码
        </view>
      </view>
    </view>

    <uni-popup ref="alertDialog" type="dialog">
      <uni-popup-dialog :type="msgType" cancelText="关闭" confirmText="同意" title="通知" content="您确认要退出登录吗" @confirm="dialogConfirm"
                        @close="dialogClose"></uni-popup-dialog>
    </uni-popup>
  </view>
</template>

<script>
import {getStorageWithExpiry, setStorageWithExpiry} from "../../utils/auth";
import request from '../../utils/request';
import config from '@/config'
export default {
  name: "UserInfo",
  data(){
    return{
      customInfo: {},
      defaultAvatar: require('@/static/icons/avatar.png'),
      msgType: 'success',
    }
  },
  mounted(){
    this.getCustomInfo()
  },
  methods:{
    changePassword(){
      uni.navigateTo({
        url:'/pages/Login/modify'
      })
    },
    dialogConfirm() {
      uni.clearStorageSync();
      uni.reLaunch({
        url:'/pages/Login/login'
      })

    },
    dialogClose() {
    },
    logout(){
      this.$refs.alertDialog.open()
    },
    getCustomInfo(){
      let roleNames = getStorageWithExpiry("roleNames")
      if (!roleNames){
        request({
          url: '/inspection/util/getRoleName',
          method: 'get'
        }).then(res => {
          roleNames = res.data
          setStorageWithExpiry("roleNames", roleNames)
        })
      }
      const data = getStorageWithExpiry("userInfo")
      if (!data) {
        request({
          url: '/system/user/profile/get',
          method: 'get'
        }).then(res => {
          this.customInfo = res.data
          if (this.customInfo.avatar) {
            this.customInfo.avatar = config.baseImageUrl + this.customInfo.avatar
          }
          this.customInfo.roleNames = roleNames
          setStorageWithExpiry("userInfo", this.customInfo)
        })
      } else {
        this.customInfo = data
      }
    },
    handleBack(){
      uni.navigateBack()
    }
  }
}
</script>

<style scoped lang="scss">
.top-heder{
  width: 100%;
  height: 88px;
  background: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 5px 15px;
  padding-top: 45px;
}
.t-left{
  width: 10%;
}
.c-title{
  font-weight: bold;
  font-size: 18px;
}
.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;
}

.btns{
  display: flex;
  justify-content: space-between;
  gap: 20px;
}
</style>