wx-qhb/pages/mine/component/mineMoney.vue

<template>
  <!-- 余额组件 -->
  <view
    class="mine-money"
    id="mine-money"
    :style="{ height: userInformation.merchant ? '110px' : '66px' }"
  >
    <view class="top" v-if="userInformation.merchant" @click="toEnsure">
      <view class="content">
        <image
          class="money-icon"
          src="../../../static/mine/308.png"
          mode=""
        ></image>
        <text>{{ i18n.myDeposit }}</text>
      </view>
      <view class="content"
        >{{ userInformation.deposit || 0 }} <text class="right-icon"></text>
      </view>
    </view>
    <view class="bottom">
      <view class="basis" @click="jumpBalance">
        <view class="num">{{ userInformation.balance || 0 }}</view>
        <view class="characters">{{ i18n.balance }}</view>
      </view>
      <view class="basis" @click="toFollow">
        <view class="num">{{ userInformation.interest_num }}</view>
        <view class="characters">{{ i18n.mineFollow }}</view>
      </view>
      <view class="basis" @click="toPackage">
        <view class="num">{{ userInformation.express_num }}</view>
        <view class="characters">{{ i18n.myPackage }}</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    isTeam: {
      type: Boolean,
      default: false,
    },
    userInformation: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {};
  },
  computed: {
    i18n() {
      return this.$t("index");
    },
  },
  methods: {
    jumpBalance() {
      uni.navigateTo({
        url: "/pageC/accountBalance/accountBalance",
      });
    },
    toEnsure() {
      uni.navigateTo({
        url: "/pageC/ensureMoney/ensureMoney",
      });
    },
    toFollow() {
      uni.navigateTo({
        url: "/pageC/mineFollow/mineFollow",
      });
    },
    toPackage() {
      uni.navigateTo({
        url: "/pageC/myPackage/myPackage",
      });
    },
  },
  created() {},
};
</script>

<style lang="scss">
.mine-money {
  height: 110px;
  width: 100%;
  background-color: #3b3d55;
  margin-top: 15px;
  border-radius: 10px;
  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    font-size: 14px;
    height: 44px;
    .content {
      display: flex;
      align-items: center;
      margin: 0 10px;
    }
    .money-icon {
      width: 18px;
      height: 18px;
      margin-right: 6px;
    }
    .right-icon {
      display: inline-block;
      width: 20px;
      height: 20px;
      background-image: url("../../../static/mine/309.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
  }
  .bottom {
    display: flex;
    justify-content: space-around;
    background-color: #fff;
    border-radius: 10px;
    height: 66px;
    align-items: center;
    .num {
      font-size: 18px;
      color: #333;
      text-align: center;
      font-weight: 600;
    }
    .characters {
      font-size: 13px;
      color: #333;
      text-align: center;
    }
  }
}
</style>