wxapp_shuibei/components/UserGrowthPanel/index.vue

<template>
  <view class="balance-box">
    <view class="first-row">
      <view class="vip" v-if="appStore.isLogin">
        VIP会员<text>{{ appStore?.$userInfo?.level || 0 }}级</text>
      </view>
      <view v-else @click="toLogin">未登录</view>
      <view class="gold-price">
        <text class="text">实时金价&nbsp;</text>
        <up-loading-icon v-if="realGoldprice === 0"></up-loading-icon>
        <text class="real-price" v-else>{{ realGoldprice }}</text>
      </view>
    </view>
    <view class="growth">
      <div class="row-value">
        <view class="current">
          成长值{{ appStore?.$userInfo?.experience || 0 }}
        </view>
        <view class="total">
          {{ appStore?.$userInfo?.experience || 0 }}/{{
            appStore?.$userInfo?.experienceCount || 0
          }}
        </view>
      </div>
      <up-line-progress
        :showText="false"
        :percentage="percentExperience"
        activeColor="#C99A30"
      ></up-line-progress>
    </view>
    <view class="wealth">
      <view class="item" @click="toVaultPage('vault')">
        <uni-icons
          class="item-icon"
          size="28"
          color="#CF9834"
          customPrefix="iconfont"
          type="icon-jinku"
        ></uni-icons>
        <text class="text">{{ appStore.$userInfo?.goldBalance || 0 }}g</text>
      </view>
      <view class="item" @click="toVaultPage('balance')">
        <uni-icons
          class="item-icon"
          size="30"
          color="#CF9834"
          customPrefix="iconfont"
          type="icon-qianbao"
        ></uni-icons>
        <text class="text">￥{{ appStore.$userInfo?.nowMoney || 0 }}</text>
      </view>
      <view class="item">
        <uni-icons
          class="item-icon"
          size="28"
          color="#CF9834"
          customPrefix="iconfont"
          type="icon-beikehui"
        ></uni-icons>
        <text class="text">{{ appStore.$userInfo?.integral || 0 }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import { useAppStore } from "@/stores/app";
import useRealGoldPrice from "@/hooks/useRealGoldPrice";
import { toLogin } from "@/libs/login";
import { getUserInfo } from "@/api/user";

const appStore = useAppStore();

const { realGoldprice, fetchGoldPrice } = useRealGoldPrice("RTJ_Au");

onShow(() => {
  fetchUserInfo();
  fetchGoldPrice(undefined, 3);
});

function toVaultPage(type) {
  uni.navigateTo({ url: `/pages/users/vault/index?type=${type}` })
}

// 获取用户信息
async function fetchUserInfo() {
  const { data } = await getUserInfo();
  appStore.UPDATE_USERINFO(data);
}

// 计算成长值百分比
const percentExperience = computed(() => {
  if (appStore.isLogin) {
    const percent = Math.floor(
      (appStore?.$userInfo?.experience / appStore?.$userInfo?.experienceCount) *
        100
    );
    return percent > 100 ? 100 : percent;
  }
  return 0;
});
</script>

<style lang="scss" scoped>
.balance-box {
  margin: 25rpx 30rpx 15rpx;
  padding: 30rpx;
  background-color: #ffffff;
  border-radius: $uni-border-radius-default;
  box-shadow: 0 4rpx 16rpx 0 rgba(0, 0, 0, 0.08);

  .first-row {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .vip {
    }

    .gold-price {
      display: flex;
      align-items: center;
      .text {
      }
      .real-price {
        font-size: 35rpx;
        color: $header-color;
        font-weight: 600;
      }
    }
  }

  .growth {
    margin: 30rpx 0 30rpx;

    .row-value {
      margin: 0 0 10rpx;
      font-size: 20rpx;
      display: flex;
      justify-content: space-between;
      color: $theme-color;
    }
  }

  .wealth {
    display: flex;
    justify-content: space-between;

    .item {
      display: flex;
      align-items: center;
      .item-icon {
        margin-right: 10rpx;
      }
      .text {
      }
    }
  }
}
</style>