inv-app/pages/mine/mine.vue

<template>
  <view class="main-box">
    <u-navbar
      :placeholder="true"
      title="个人中心"
      :autoBack="true"
      leftIconColor="#fff"
      bgColor="#000000">
    </u-navbar>
    <view class="item">
      <view class="item-content">
        <u-row
          justify="space-between"
          gutter="25">
          <u-col
            span="4"
            class="title-item">
            <view>账号ID</view>
          </u-col>
          <u-line direction="col"></u-line>
          <u-col
            span="7"
            class="title-item">
            <view>{{ userInfo.ID }}</view>
          </u-col>
        </u-row>
        <u-line></u-line>
        <u-row
          justify="space-between"
          gutter="25">
          <u-col
            span="4"
            class="title-item">
            <view>员工姓名</view>
          </u-col>
          <u-line direction="col"></u-line>
          <u-col
            span="7"
            class="title-item">
            <view>{{ userInfo.nickName }}</view>
          </u-col>
        </u-row>
        <u-line></u-line>
        <u-row
          justify="space-between"
          gutter="25">
          <u-col
            span="4"
            class="title-item">
            <view>手机号(+86)</view>
          </u-col>
          <u-line direction="col"></u-line>
          <u-col
            span="7"
            class="title-item">
            <view>{{ userInfo.telNum }}</view>
          </u-col>
        </u-row>
      </view>
    </view>
    <u-line></u-line>
    <view class="bottom-btn-box">
      <u-button
        class="bottom-btn"
        text="退出登录"
        @click="showLogout"></u-button>
    </view>
    <u-modal
      :show="show"
      :title="'是否退登此账号？'"
      :showConfirmButton="false">
      <u-button
        class="ok-btn"
        @click="logOut"
        type="primary"
        size="small">
        确定</u-button
      >
      <u-button
        class="cancel-btn"
        @click="show = false"
        type="primary"
        size="small"
        >取消</u-button
      >
    </u-modal>
  </view>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      userInfo: {},
    };
  },
  mounted() {
    this.userInfo = uni.getStorageSync("userInfo");
  },
  methods: {
    logOut() {
      // 清空缓存
      uni.clearStorageSync();
      // 跳转到登录页
      uni.reLaunch({
        url: "/pages/login/login",
      });
    },
    showLogout() {
      this.show = true;
    },
  },
};
</script>

<style lang="scss">
page {
  background-color: #0e1746;
  background-size: auto 100%;
  background-attachment: fixed;
  height: 100vh;

  overflow: hidden;
}

.main-box {
  padding: 36rpx;
  /deep/ .u-navbar__content__title {
  color: #fff;
}
}
.bottom-btn-box {
  position: fixed;
  bottom: 150rpx;
  left: 30%;
  .bottom-btn {
    width: 300rpx;
    height: 60rpx;
    border-radius: 40rpx;
    background-color: #ff2727;
    color: #fff;
    border: none;
  }
}
.ok-btn {
  width: 440rpx;
  height: 60rpx;
  border-radius: 30rpx;
  background: #ff3b48;
  color: #ffffff;
  margin: 20rpx 20rpx 0 20rpx;
  font-size: 30rpx;
  border: 0;
}
.cancel-btn {
  width: 440rpx;
  height: 60rpx;
  border-radius: 30rpx;
  margin: 20rpx 20rpx 0 20rpx;
  background: #0e1746;
  font-size: 30rpx;
  color: #fff;
  border: 0;
}
.item {
  width: 100%;
  height: 220rpx;
  background-color: #fff;
  margin-top: 20rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  padding: 25rpx;
  box-sizing: border-box;
  .left-img {
    width: 60px;
    height: 60px;
    border-radius: 10rpx;
  }
  .item-content {
    width: 100%;
    padding-left: 20rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    .item-title {
      font-size: 28rpx;
      color: #000;
    }
    .title-item {
      padding: 10rpx;
      font-size: 24rpx;
    }
    .no-border {
      border-left: none;
      // 文字超出省略号
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      max-width: 190rpx;

      view {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        text-align: center;
      }
    }
  }
}
</style>