lilishop-uniapp/pages/tabbar/user/my.vue

<template>
  <view class="user" :style="{ 'padding-top': statusBarHeight }">
    <!--  -->
    <u-navbar title-color="#333" :border-bottom="false" immersive :is-back="false" title="个人中心"
      :background="background"></u-navbar>
    <div class="wrapper background" :style="{ 'padding-top': '61px' }">
      <div class="flex flex-a-c flex-j-sb">
        <!-- 会员信息 -->
        <div class="flex flex-a-c">
          <div>
            <u-image :src="userInfo.face || '/static/missing-face.png'" shape="circle" width="108"
              height="108"></u-image>
          </div>
          <div class="user-info">
            <div>
              {{ userInfo && userInfo.id ? userInfo.nickName : '登录/注册' }}
            </div>
            <div class="info-tag">
              个人主页
            </div>
          </div>
        </div>
        <!-- 右侧会员权益 -->
        <div>
          <u-image :src="'/static/feature/vip.png'" width="240" height="68" />
        </div>
      </div>
      <!-- 钱包栏 -->
      <div class="wallet-info">
        <div>
          <div class="wallet-info_label">198</div>
        </div>
      </div>
    </div>

    <tool />
  </view>
</template>
<script>
import tool from "@/pages/tabbar/user/utils/tool.vue";
import { getCouponsNum, getFootprintNum } from "@/api/members.js";
import { getUserWallet } from "@/api/members";
import configs from '@/config/config'
let statusBarHeight = uni.getSystemInfoSync().statusBarHeight + "px";
export default {
  components: {
    tool,
  },
  data() {
    return {
      configs,
      userImage: configs.defaultUserPhoto,
      userInfo: {},
      couponNum: "",
      footNum: "",
      walletNum: "",
      background: {
        backgroundColor: "transparent",
      },

    };
  },
  onLoad() { },
  onShow() {
    this.userInfo = this.$options.filters.isLogin() || {};
    if (this.$options.filters.isLogin("auth")) {
      this.getUserOrderNum();
    } else {
      this.walletNum = 0;
      this.couponNum = 0;
      this.footNum = 0;
    }
  },
  onPullDownRefresh() {
    this.getUserOrderNum();
    this.userInfo = this.$options.filters.isLogin();
  },
  // #ifndef MP
  onNavigationBarButtonTap(e) {
    const index = e.index;
    if (index === 0) {
      this.navigateTo("/pages/mine/set/setUp");
    }
  },
  // #endif

  mounted() { },
  methods: {
    /**
     * 统一跳转接口,拦截未登录路由
     * navigator标签现在默认没有转场动画，所以用view
     */
    navigateTo(url) {
      uni.navigateTo({
        url,
      });
    },
    userDetail() {
      this.userInfo.id
        ? this.navigateTo("/pages/mine/set/personMsg")
        : this.$options.filters.navigateToLogin();;
    },
    async getUserOrderNum() {
      uni.stopPullDownRefresh();

      Promise.all([
        getCouponsNum(), //优惠券
        getFootprintNum(), //浏览数量
        getUserWallet(), //预存款
      ]).then((res) => {
        this.couponNum = res[0].data.result;
        this.footNum = res[1].data.result;
        this.walletNum = res[2].data.result.memberWallet;
      });
    },
  },
};
</script>


<style lang="scss" scoped>
.background {
  background-image: url('/static/feature/bg.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
}

.info-tag {
  background-image: linear-gradient(135deg, #FAFAFA 0%, #F8E2F1 49%, #ECEFF6 100%);
  border-radius: 8rpx;
  font-family: PingFangSC-Medium;
  font-size: 24rpx;
  color: #333333;
  letter-spacing: 0;
  font-weight: 500;
}

.wrapper {
  height: 396rpx;
}

.wrapper,
.wallet-info {
  padding: 0 44rpx;
  width: calc(100% - 88rpx);
}

.user-info {
  padding-left: 20rpx;
}

.wallet-info {
  height: 168rpx;
  background: #fff;
  border-radius: 16rpx;
  margin-top: 36rpx;

  &_label {
    font-family: DINCond-Bold;
    font-size: 40rpx;
    color: #333333;
    letter-spacing: 0;
    font-weight: 700;
  }
}
</style>