wx-qhb/pages/mine/mine.vue

<template>
  <!-- 我的 -->
  <view class="mine">
    <!-- 头部个人信息 -->
    <view class="mine-top">
      <image class="header-img" :src="userInformation.avatar" alt="" />
      <view class="user-info">
        <view class="name">{{ userInformation.nickname }}</view>
        <text class="user-id">ID:{{ userInformation.id }}</text>
      </view>
      <view v-if="isTeam" class="user-home" @click="toHome"
        >{{ i18n.homepage }} <text class="home-right"></text>
      </view>
    </view>
    <!-- 头部个人信息 -->

    <!-- 余额组件 -->
    <MineMoney :isTeam="isTeam" :userInformation="userInformation" />
    <!-- 余额组件 -->

    <!-- 商城订单 -->
    <MallOrderForm />
    <!-- 商城订单 -->

    <!-- 团长功能组件 -->
    <TeamFunction v-if="userInformation.merchant" />
    <!-- 团长功能组件 -->

    <!-- 非团长组件 -->
    <PersonalFunction v-else />

    <!-- 底部tab栏 -->
    <kj-tabbar :value1="4"></kj-tabbar>
    <!-- 底部tab栏 -->
  </view>
</template>

<script>
import MineMoney from "./component/mineMoney.vue";
import MallOrderForm from "./component/mallOrderForm.vue";
import TeamFunction from "./component/teamFunction.vue";
import PersonalFunction from "./component/personalFunction.vue";
export default {
  components: {
    MineMoney,
    MallOrderForm,
    TeamFunction,
    PersonalFunction,
  },
  computed: {
    i18n() {
      return this.$t("index");
    },
  },
  data() {
    return {
      isTeam: true, //用来判断当前用户是不是团长
      userInformation: {},
    };
  },
  methods: {
    toHome() {
      uni.navigateTo({
        url: "/pageD/homepage/homepage?page=false",
      });
    },
    getUserInfo() {
      uni.$u.http.get(`/api/member/info`).then((res) => {
        this.userInformation = res;
        uni.setStorage({
          key: "user_info",
          data: this.userInformation,
        });
      });
    },
  },
  created() {
    //设置顶部标题栏颜色
    uni.setNavigationBarColor({
      frontColor: "#ffffff",
      backgroundColor: "#f4f4f4",
    });
    this.getUserInfo();
  },
};
</script>

<style lang="scss">
.mine {
  padding-left: 10px;
  background-color: #f4f4f4;
  padding-right: 10px;
  position: relative;
}

.mine-top {
  display: flex;
  align-items: center;

  .header-img {
    height: 54px;
    width: 54px;
    border-radius: 50%;
    margin-right: 10px;
  }
  .user-info {
    .name {
      margin-bottom: 4px;
      color: #222;
      font-size: 18px;
      font-weight: 600;
    }
    .user-id {
      font-size: 12px;
      color: #333;
    }
  }
  .user-home {
    position: absolute;
    right: 0;
    min-width: 72px;
    height: 28px;
    background-color: #eee;
    text-align: center;
    font-size: 13px;
    font-size: #333;
    line-height: 28px;
    border-radius: 14px 0 0 14px;
    .home-right {
      display: inline-block;
      width: 10px;
      height: 10px;
      background-image: url("../../static/mine/right.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      // margin-right: 4px;
    }
  }
}
</style>