wx-qhb/pageC/ensureMoney/ensureMoney.vue

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

    <view class="mine-balance">
      <view class="title">
        <text>我的保证金(元)</text>
        <image
          src="../../static/mine/324.png"
          @click="toExplain"
          class="mine-324"
          mode=""
        ></image>
      </view>
      <view class="money"> {{ userInformation.deposit }} </view>
      <view class="btn-list">
        <button class="withdrawal" @click="toWithdrawal">提现</button>
        <button class="recharge" @click="toRecharge">充值</button>
      </view>
    </view>
    <view class="money-detail">
      <view class="money-title">
        <text style="font-weight: 600">保证金明细</text>
        <AllRight name="全部" @toDetail="toDetail" />
      </view>
      <view class="">
        <MoneyDetail
          v-for="(item, index) in moneyDetail"
          :itemInfo="item"
          :key="index"
        />
      </view>
    </view>
    <view class="bottom-text"> 没有更多数据了 </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: [
        {
          name: "充值",
          time: "2024-1-1 09:34:31",
          money: "+400",
        },
        {
          name: "提现",
          time: "2024-1-1 09:34:31",
          money: "-400",
        },
        {
          name: "充值",
          time: "2024-1-1 09:34:31",
          money: "+400",
        },
      ],
      userInformation: {},
    };
  },
  created() {
    uni.setNavigationBarColor({
      frontColor: "#ffffff",
      backgroundColor: "#f74639",
    });
  },
  methods: {
    //跳转明细页面
    toDetail() {
      uni.navigateTo({
        url: "/pageC/balanceDetail/balanceDetail?type=deposit",
      });
    },
    //跳转充值页面
    toRecharge() {
      uni.navigateTo({
        url: "/pageD/ensureRecharge/ensureRecharge",
      });
    },
    //跳转提现页面
    toWithdrawal() {
      uni.navigateTo({
        url: "/pageC/withdrawal/withdrawal?type=deposit",
      });
    },
    //跳转保证金说明
    toExplain() {
      uni.navigateTo({
        url: "/pageC/ensureExplain/ensureExplain",
      });
    },

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

    //获取余额
    getUserInfo() {
      uni.$u.http.get(`/api/member/info`).then((res) => {
        this.userInformation = res;
      });
    },
  },
  mounted() {
    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: -webkit-linear-gradient(#f74639, #f4f4f4);
    /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(#f74639, #f4f4f4);
    /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(#f74639, #f4f4f4);
    /* Firefox 3.6 - 15 */
    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;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #222;
      height: 45prx;

      .mine-324 {
        width: 36rpx;
        height: 36rpx;
        margin-left: 10rpx;
      }
    }

    .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>