laboratory_maintenance_app/pages/my/my.vue

<template>
  <view class="page-css sp-my-new">
    <view class="info-top sp-my-new-header">
      <view class="top-item">
        <img :src="userIfo.avatar
          ? userIfo.avatar
          : require('@/static/images/avatr.png')
          " alt="" />
      </view>
      <view class="top-item">
        <view class="top-name">{{ userIfo.businessName }}{{ userIfo.nick_name }}
          <!-- <u-tag text="签约" type="warning" mode="plain"/> -->
        </view>
        <view class="top-phone">{{ userIfo.phoneNumber }}15053473693</view>
      </view>
      <view class="top-item"> {{ userIfo.area }} 山东济南</view>
    </view>
    <view class="feature-box">
      <text>客户功能</text>
      <view class="feature-list clearfix">
        <view v-for="(item, index) in featureData" :key="index" class="list-item" @click="pageTo(item)">
          <!-- <img :src="item.icon" alt=""> -->
          <u-image width="60rpx" height="60rpx" :src="item.icon"></u-image>
          <view class="list-item-txt">{{ item.title }}</view>
        </view>
      </view>
    </view>
    <view class="logout-btn"><u-button type="primary" @click="logout()">退出登录</u-button></view>
    <betone-tabbar ref="tabbarRef" />
    <betone-loading ref="BetLoading"></betone-loading>
  </view>
</template>
<script>
export default {
  data() {
    return {
      userIfo: {}, //用户信息
      featureData: [
        {
          title: "登录记录",
          icon: require("@/static/images/my/login.svg"),
          pagePath: "/pages/my/records?type=login",
        },
        {
          title: "修改日志",
          icon: require("@/static/images/my/edit.svg"),
          pagePath: "/pages/my/records?type=edit",
        },
        {
          title: "意见反馈",
          icon: require("@/static/images/my/rmark.svg"),
          pagePath: "/pages/my/feedback",
        },
      ],
    };
  },
  mounted() {

  },
  onShow() {
    this.$nextTick(() => {
      let info = uni.getStorageSync("userinfo");
      if (info) {
        this.userIfo = info;
      }
      this.$refs.tabbarRef.getPermission();
      this.$refs.BetLoading.show();
      setTimeout(() => {
        this.$refs.BetLoading.hide();
      }, 1000);
    });
  },
  methods: {
    pageTo(item) {
      uni.navigateTo({
        url: item.pagePath,
      });
    },
    logout() {
      uni.showModal({
        title: "提示：",
        content: "请确认是否要退出登录?",
        success: (res) => {
          if (res.confirm) {
            this.$refs.BetLoading.show();
            this.$u.api.logout().then(res => {
              this.$refs.BetLoading.hide();
              //TODO
              uni.removeStorageSync("token");
              uni.removeStorageSync("userinfo");
              uni.removeStorageSync("tabBarList");
              uni.redirectTo({
                url: "/pages/login/login",
              });
            })


          } else if (res.cancel) {
            //TODO
          }
        },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.page-css {
  background: #efefef;
  padding: 0 0 32rpx 0;

  .info-top {
    min-height: 210rpx;
    background-color: rgba(248, 248, 248, 1);
    display: flex;
    flex-direction: row;

    .top-item {
      &:nth-child(1) {
        width: 136rpx;
        height: 136rpx;
        margin: 36rpx;

        img {
          width: 100%;
        }
      }

      &:nth-child(2) {
        flex: 1;
      }

      &:nth-child(3) {
        margin: 40rpx 14rpx 0 0;
        color: rgb(16, 16, 16);
        font-size: 24rpx;
      }

      .top-name {
        color: rgba(16, 16, 16, 1);
        font-size: 36rpx;
        font-weight: 550;
        margin-top: 42rpx;
      }

      .top-phone {
        color: rgba(16, 16, 16, 1);
        font-size: 28rpx;
      }
    }
  }

  .feature-box {
    margin: 28rpx 24rpx 0 24rpx;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 1);
    overflow: hidden;

    text {
      display: block;
      color: rgba(0, 0, 0, 1);
      font-size: 32rpx;
      font-weight: 550;
      margin: 28rpx 0 36rpx 36rpx;
      padding-top: 28rpx;
    }

    .feature-list {
      margin: 28rpx 0 112rpx 36rpx;

      .list-item {
        width: 25%;
        float: left;
        cursor: pointer;

        /deep/.u-image {
          margin: 0 auto 0;
        }

        .list-item-txt {
          color: rgba(0, 0, 0, 1);
          font-size: 26rpx;
          text-align: center;
          margin-top: 16rpx;
        }
      }
    }
  }

  .logout-btn {
    margin: 28rpx 24rpx 0 24rpx;
  }
}
</style>