pay-video-applet-uniapp-24-8-22/pages_mine/mine/withdrawalRecord.vue

<template>
  <view class="withdrawalRecord">

    <!--顶部导航栏-->
    <navbar leftClick @leftClick="$utils.navigateBack" title="提现记录"/>

    <!--提现记录页面-->
    <view class="content">
      <view class="list" v-for="(item,index) in list ">
        <!--第一行-->
        <view class="item1">
          <view class="left">提现金额</view>
          <view class="right">
            <view class="money">￥{{ item.price }}</view>
            <view :class="item.type==1 ? 'yiDaoZhangClass' : 'shenHeClass'">{{ item.type==1 ? '已到账' : '审核中' }}</view>
          </view>
        </view>
        <!--第二行-->
        <view class="item2">
          <view class="left">申请时间</view>
          <view class="right">{{ item.createTime }}</view>
        </view>
        <!--第三行-->
        <view class="item2">
          <view class="left">到账时间</view>
          <view class="right">{{ item.successTime }}</view>
        </view>

      </view>

    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      queryParams: {
        pageNo: 1,
        pageSize: 10,
      },
    };
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      this.$api('infoGetWithdrawPage', {
        pageNo: this.queryParams.pageNo,
        pageSize: this.queryParams.pageSize,

      }, res => {
        if (res.code == 200) {
          this.list = res.result.records
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.withdrawalRecord {
  background-color: #f8faff;
  height: calc(100vh - 240rpx);
  width: 100vw;

  .content {
    padding: 20rpx 20rpx 50rpx 20rpx;
    box-sizing: border-box;
    width: 100vw;

    .list {
      box-sizing: border-box;
      border-bottom: 2rpx solid #e0e2e6;
      padding: 30rpx;
      display: flex;
      flex-direction: column;
      gap: 10rpx;

      .item1 {
        display: flex;

        .left {
          width: 30%;

        }

        .right {
          display: flex;
          width: 70%;

          .money {
            width: 75%;
          }

          .yiDaoZhangClass {
            width: 25%;
            background: $uni-linear-gradient-color;
            -webkit-background-clip: text;
            /*将设置的背景颜色限制在文字中*/
            -webkit-text-fill-color: transparent;
            /*给文字设置成透明*/
          }

          .shenHeClass {
            width: 25%;
          }
        }
      }

      .item2 {
        display: flex;

        .left {
          width: 30%;
        }

        .right {
          width: 70%;
        }
      }
    }
  }
}
</style>