<template>
  <view class="container">
    <view class="item-box">
      <view class="item" :key="item" v-for="item of price_list">
        <view class="item-text">{{ item.name }}</view>
        <view class="item-price">{{ item.price }}</view>
      </view>
    </view>

    <view class="item-box">
      <view class="item" :key="item" v-for="item of price_list1">
        <view class="item-text">{{ item.name }}</view>
        <view class="item-price">{{ item.price }}</view>
      </view>
    </view>

    <view class="item-box2">
      <view class="item" :key="item" v-for="item of price_list2">
        <view class="item-text">{{ item.name }}</view>
        <view class="item-price">{{ item.price }}</view>
      </view>
    </view>

    <view class="item-box3">
      <view class="item">
        <view class="item-text">可提现金额</view>
        <view class="item-price">150.00</view>
      </view>
      <view class="btn-box">
        <button class="btn" @click="handlerWithdrawFunds">提现</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      price_list: [
        {
          name: '钱包余额(元)',
          price: '258.00',
        },
        {
          name: '总收益(元)',
          price: '258.00',
        },
        {
          name: '待转入(元)',
          price: '258.00',
        },
      ],
      price_list1: [
        {
          name: '总收益(元)',
          price: '258.00',
        },
        {
          name: '已提现(元)',
          price: '258.00',
        },
        {
          name: '待总结(元)',
          price: '258.00',
        },
      ],
      price_list2: [
        {
          name: '已提现',
          price: '150.00',
        },
        {
          name: '待结算',
          price: '108.00',
        },
        {
          name: '已失效',
          price: '10.00',
        },
      ],
    };
  },
  methods: {
    // 点击提现
    handlerWithdrawFunds() {
      uni.navigateTo({
        url: '/PageMine/profit/withdraw',
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  margin-top: 25rpx;
  background-color: #efefef;
  min-height: calc(100vh - 10rpx);
  .item-box,
  .item-box2 {
    width: 90%;
    padding: 20rpx;
    background-color: #347caf;
    border-radius: 20rpx;
    margin: 10rpx auto 0;
    display: flex;
    justify-content: space-around;
    .item {
      color: #fff;
      text-align: center;
      .item-text {
        font-size: 28rpx;
      }
      .item-price {
        font-size: 36rpx;
        font-weight: bold;
        margin-top: 20rpx;
      }
    }
  }
  .item-box2 {
    margin-top: 20rpx;
  }
  .item-box3 {
    width: 90%;
    padding: 20rpx;
    background-color: #347caf;
    border-radius: 20rpx;
    color: #fff;
    margin: 20rpx auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .btn {
      width: 260rpx;
      height: 80rpx;
      border-radius: 60rpx;
    }
    .item {
      color: #fff;
      text-align: center;
      .item-text {
        font-size: 28rpx;
      }
      .item-price {
        font-size: 36rpx;
        font-weight: bold;
        margin-top: 20rpx;
      }
    }
  }

  .footer-item {
    width: 95%;
    background-color: #347caf;
    border-radius: 20rpx;
    color: #fff;
    margin: 20rpx auto;
    .img {
      width: 100%;
    }
  }
  .item-box4 {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 20rpx;
    .btn {
      width: 260rpx;
      height: 80rpx;
      border-radius: 60rpx;
    }
    .item {
      color: #fff;
      text-align: center;
      .item-text {
        font-size: 28rpx;
      }
      .item-price {
        font-size: 36rpx;
        font-weight: bold;
        margin-top: 20rpx;
      }
    }
  }
}
</style>
