wx-qhb/pageC/accountBalance/accountBalance.vue

<template>
  <view class="balance">
    <!-- 页面渐变色背景 -->
    <view class="shadow"> </view>
    <!-- 页面渐变色背景 -->

    <view class="mine-balance">
      <view class="title"> {{ i18n.myBalance }}（元） </view>
      <view class="money"> {{ userInformation.balance }} </view>
      <view class="btn-list">
        <button class="withdrawal" @click="toWithdrawal">
          {{ i18n.withdrawal }}
        </button>
        <button class="recharge" @click="toRecharge">
          {{ i18n.recharge }}
        </button>
      </view>
    </view>
    <view class="money-detail">
      <view class="money-title">
        <text style="font-weight: 600; color: #222">{{
          i18n.balanceDetails
        }}</text>
        <AllRight :name="i18n.all" @toDetail="toDetail" />
      </view>
      <view class="">
        <MoneyDetail
          v-for="(item, index) in moneyDetail"
          :itemInfo="item"
          :key="index"
        />
      </view>
    </view>
    <view class="bottom-text"> {{ i18n.theres }} </view>
  </view>
</template>

<script>
import AllRight from "../mineComponent/allRight/allRight.vue";
import MoneyDetail from "../mineComponent/moneyDetail/index.vue";
export default {
  components: {
    AllRight,
    MoneyDetail,
  },
  data() {
    return {
      moneyDetail: [],
      userInformation: {},
    };
  },
  computed: {
    i18n() {
      return this.$t("index");
    },
  },
  created() {
    uni.setNavigationBarColor({
      frontColor: "#ffffff",
      backgroundColor: "#f74639",
    });
    uni.setNavigationBarTitle({
      title: this.i18n.accountBalance,
    });
  },
  methods: {
    //跳转明细页面
    toDetail() {
      uni.navigateTo({
        url: "/pageC/balanceDetail/balanceDetail?type=balance",
      });
    },
    //跳转充值页面
    toRecharge() {
      uni.navigateTo({
        url: "/pageC/recharge/recharge",
      });
    },
    //跳转提现页面
    toWithdrawal() {
      uni.navigateTo({
        url: "/pageC/withdrawal/withdrawal?type=balance",
      });
    },

    //获取余额明细
    getMoneyList() {
      uni.$u.http
        .get(`/api/finance?is_page=1&page=1&limit=10&account_type=balance`)
        .then((res) => {
          this.moneyDetail = res.data.slice(0, 3);
        });
    },
    //获取余额
    getUserInfo() {
      uni.$u.http.get(`/api/member/info`).then((res) => {
        this.userInformation = res;
      });
    },
  },
  onShow() {
    this.getMoneyList();
    this.getUserInfo();
  },
};
</script>

<style lang="scss">
page {
  background-color: "#f4f4f4";
}

.balance {
  position: relative;
  padding-top: 10px;

  .shadow {
    position: absolute;
    top: 0;
    height: 400px;
    width: 100%;
    background: linear-gradient(#f74639, #f4f4f4);
    z-index: -1;
  }

  .mine-balance {
    width: 96%;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 10px;
    padding-top: 82rpx;
    padding-bottom: 62rpx;

    .title {
      text-align: center;
      font-size: 28rpx;
      color: #222;
    }

    .money {
      font-size: 84rpx;
      color: #222;
      font-weight: 600;
      text-align: center;
      margin-top: 36rpx;
    }

    .btn-list {
      display: flex;
      justify-content: space-around;
      margin-top: 76rpx;

      .withdrawal {
        width: 298rpx;
        height: 88rpx;
        background-color: rgba(248, 50, 36, 0.1);
        border-radius: 44px;
        color: #f83224;
        font-size: 32rpx;
      }

      .recharge {
        width: 298rpx;
        height: 88rpx;
        background-color: #f83224;
        border-radius: 44px;
        color: #fff;
        font-size: 32rpx;
        box-shadow: 0rpx 12rpx 28rpx -12rpx #f83224;
      }
    }
  }

  .money-detail {
    background-color: #fff;
    border-radius: 10px;
    width: 88%;
    margin: 10px auto;
    padding: 0 28rpx;

    .money-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 108rpx;
    }
  }

  .bottom-text {
    text-align: center;
    font-size: 24rpx;
    color: #777;
    margin-top: 44rpx;
  }
}
</style>