recycle-front/pages/subcomponent/wallet.vue

<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <view class="nav-bar" :style="{height: (statusBarHeight + 88) + 'rpx', paddingTop: statusBarHeight + 'px'}">
      <view class="back" @tap="goBack">
        <uni-icons type="left" size="25" color="#fff"></uni-icons>
      </view>
      <text class="title">钱包流水</text>
    </view>
    <!-- banner -->
    <view class="banner" :style="{marginTop: (statusBarHeight + 88) + 'rpx', height: (bannerBaseHeight + statusBarHeight + 88) + 'rpx'}">
      <image class="banner-bg" src="/static/my/钱包流水.png" mode="aspectFill"></image>
      <!-- <view class="banner-content">
        <image class="wallet-icon" src="/static/wallet/wallet-3d.png" mode="aspectFit"></image>
      </view> -->
    </view>

    <!-- 账户余额 -->
    <view class="balance-card">
      <view class="balance-info">
        <text class="label">账户</text>
        <view class="amount">
          <text class="symbol">¥</text>
          <text class="value">8848</text>
        </view>
      </view>
      <button class="withdraw-btn" @tap="withdraw">提现</button>
    </view>

    <!-- 记录切换标签 -->
    <view class="record-tabs">
      <view 
        class="tab-item" 
        :class="{ active: currentTab === 'settlement' }"
        @tap="switchTab('settlement')"
      >
        结算日志
      </view>
      <view 
        class="tab-item" 
        :class="{ active: currentTab === 'withdrawal' }"
        @tap="switchTab('withdrawal')"
      >
        提现记录
      </view>
    </view>

    <!-- 记录列表 -->
    <scroll-view class="record-list" scroll-y>
      <template v-if="currentTab === 'settlement'">
        <view class="record-item" v-for="(item, index) in settlementRecords" :key="index">
          <view class="record-info">
            <text class="type">{{ item.type }}</text>
            <text class="amount">¥{{ item.amount }}</text>
          </view>
          <text class="date">{{ item.date }}</text>
        </view>
      </template>
      <template v-else>
        <view class="record-item" v-for="(item, index) in withdrawalRecords" :key="index">
          <view class="record-info">
            <text class="type">{{ item.type }}</text>
            <text class="amount">¥{{ item.amount }}</text>
          </view>
          <text class="date">{{ item.date }}</text>
        </view>
      </template>
    </scroll-view>
  </view>
</template>

<script>
import pullRefreshMixin from '@/pages/mixins/pullRefreshMixin.js'

export default {
  mixins: [pullRefreshMixin],
  data() {
    return {
      statusBarHeight: 0,
      bannerBaseHeight: 300,
      currentTab: 'settlement',
      settlementRecords: [
        { type: '回收结算', date: '04-27', amount: '100.24' },
        { type: '回收结算', date: '04-23', amount: '171.42' },
        { type: '回收结算', date: '04-17', amount: '122.02' },
        { type: '回收结算', date: '04-12', amount: '128.87' },
        { type: '回收结算', date: '04-12', amount: '106.37' },
        { type: '佣金结算', date: '04-09', amount: '119.90' },
        { type: '佣金结算', date: '04-09', amount: '160.76' },
        { type: '佣金结算', date: '04-07', amount: '132.02' },
        { type: '佣金结算', date: '03-29', amount: '172.29' }
      ],
      withdrawalRecords: [
        { type: '提现记录', date: '04-27', amount: '10' },
        { type: '提现记录', date: '04-23', amount: '60' },
        { type: '提现记录', date: '04-17', amount: '10' },
        { type: '提现记录', date: '04-12', amount: '110' },
        { type: '提现记录', date: '04-12', amount: '180' },
        { type: '提现记录', date: '04-09', amount: '30' },
        { type: '提现记录', date: '04-09', amount: '130' },
        { type: '提现记录', date: '04-07', amount: '160' },
        { type: '提现记录', date: '03-29', amount: '170' }
      ]
    }
  },
  onLoad() {
    this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
  },
  methods: {
    async onRefresh() {
      // 模拟刷新数据
      await new Promise(resolve => setTimeout(resolve, 1000))
      uni.stopPullRefresh()
    },
    goBack() {
      uni.navigateBack()
    },
    switchTab(tab) {
      this.currentTab = tab
    },
    withdraw() {
      uni.navigateTo({
        url: '/pages/subcomponent/withdraw'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background: #fff;
}

.nav-bar {
  display: flex;
  align-items: center;
  background: linear-gradient(to right, #f68240 0%, #fc8940 10%);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
}

.back {
  padding: 20rpx;
  margin-left: -20rpx;
}

.title {
  flex: 1;
  text-align: center;
  font-size: 34rpx;
  font-weight: 500;
  color: #fff;
}

.banner {
  position: relative;
  background: linear-gradient(to right, #f78b49, #fc8940);
  overflow: hidden;
  border-radius: 0 0 30rpx 30rpx;
  margin-top: 0;
}

.banner-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  // opacity: 0.8;
}

.banner-content {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  .wallet-icon {
    width: 240rpx;
    height: 240rpx;
  }
}

.balance-card {
  margin: -60rpx 30rpx 0;
  padding: 30rpx;
  background: #fff;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 2;

  .balance-info {
    .label {
      font-size: 28rpx;
      color: #666;
    }

    .amount {
      margin-top: 8rpx;
      display: flex;
      align-items: baseline;

      .symbol {
        font-size: 32rpx;
        color: #333;
      }

      .value {
        font-size: 48rpx;
        font-weight: bold;
        color: #333;
        margin-left: 4rpx;
      }
    }
  }

  .withdraw-btn {
    width: 160rpx;
    height: 70rpx;
    background: #FFB74D;
    color: #fff;
    font-size: 28rpx;
    border-radius: 35rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
	
    &::after {
      border: none;
    }
  }
}

.record-tabs {
  display: flex;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f5f5f5;

  .tab-item {
    position: relative;
    padding: 16rpx 0;
    font-size: 28rpx;
    color: #666;
    flex: 1;
    text-align: center;

    &.active {
      color: #333;
      font-weight: 500;

      &::after {
        content: '';
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: -21rpx;
        width: 48rpx;
        height: 2rpx;
        background: #FFB74D;
      }
    }
  }
}

.record-list {
  height: calc(100vh - 88rpx - 300rpx + 60rpx - 120rpx - 71rpx);

  .record-item {
    display: flex;
    flex-direction: column;
    padding: 30rpx;
    border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);

    .record-info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12rpx;

      .type {
        font-size: 28rpx;
        color: #333;
      }

      .amount {
        font-size: 28rpx;
        color: #333;
      }
    }

    .date {
      font-size: 24rpx;
      color: #999;
    }
  }
}
</style>