novel-front-app/pages_order/novel/Walletflow.vue

<!-- 钱包流水页面 -->
<template>
  <view class="walletflow-page">
    <!-- 顶部导航栏 -->
    <uv-navbar title="钱包流水" :autoBack="true" fixed placeholder titleStyle="color: #333; font-weight: 700;" :border="false" />

    <!-- 账户余额卡片 -->
    <view class="balance-card">
      <view class="balance-label">账户</view>
      <view class="balance-row">
        <text class="balance-amount">{{ balance }}</text>
        <button class="recharge-btn" @click="goRecharge">充值</button>
      </view>
    </view>

    <!-- tab和流水列表卡片 -->
    <view class="flow-card">
      <view class="tab-header">
        <view :class="['tab-item', {active: activeTab === 0}]" @click="activeTab = 0">
          充值
          <view v-if="activeTab === 0" class="tab-underline"></view>
        </view>
        <view :class="['tab-item', {active: activeTab === 1}]" @click="activeTab = 1">
          支付
          <view v-if="activeTab === 1" class="tab-underline"></view>
        </view>
      </view>
      <scroll-view scroll-y class="flow-list">
        <view v-if="activeTab === 0">
          <view class="flow-item" v-for="(item, idx) in rechargeList" :key="idx">
            <view class="flow-item-row">
              <view class="flow-item-left">
                <view class="flow-title">{{ item.title }}</view>
                <view class="flow-date">{{ item.date }}</view>
              </view>
              <view class="flow-amount plus">+{{ item.amount }}</view>
            </view>
          </view>
        </view>
        <view v-else>
          <view class="flow-item" v-for="(item, idx) in payList" :key="idx">
            <view class="flow-item-row">
              <view class="flow-item-left">
                <view class="flow-title">{{ item.title }}</view>
                <view class="flow-date">{{ item.date }}</view>
              </view>
              <view class="flow-amount minus">-{{ item.amount }}</view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      balance: 34532,
      activeTab: 0,
      rechargeList: [
        { title: '豆豆充值', date: '2025.03.18', amount: 55 },
        { title: '豆豆充值', date: '2025.03.18', amount: 55 },
        { title: '豆豆充值', date: '2025.03.18', amount: 55 },
        { title: '推荐票', date: '2025.03.18', amount: 5 },
        { title: '豆豆充值', date: '2025.03.18', amount: 55 },
        { title: '豆豆充值', date: '2025.03.18', amount: 55 },
        { title: '豆豆充值', date: '2025.03.18', amount: 55 },
        { title: '豆豆充值', date: '2025.03.18', amount: 55 },
        { title: '豆豆充值', date: '2025.03.18', amount: 55 },
        { title: '豆豆充值', date: '2025.03.18', amount: 55 },
        { title: '豆豆充值', date: '2025.03.18', amount: 55 },
        { title: '豆豆充值', date: '2025.03.18', amount: 55 },
        { title: '豆豆充值', date: '2025.03.18', amount: 55 },
        { title: '豆豆充值', date: '2025.03.18', amount: 55 },
      ],
      payList: [
        { title: '章节支付', date: '2025.03.18', amount: 10 },
        { title: '章节支付', date: '2025.03.18', amount: 10 },
        { title: '章节支付', date: '2025.03.18', amount: 10 },
        { title: '章节支付', date: '2025.03.18', amount: 10 },
        { title: '章节支付', date: '2025.03.18', amount: 10 },
        { title: '章节支付', date: '2025.03.18', amount: 10 },
        { title: '章节支付', date: '2025.03.18', amount: 10 },
        { title: '章节支付', date: '2025.03.18', amount: 10 },
        { title: '章节支付', date: '2025.03.18', amount: 10 },
        { title: '章节支付', date: '2025.03.18', amount: 10 },
        { title: '章节支付', date: '2025.03.18', amount: 10 },
        { title: '章节支付', date: '2025.03.18', amount: 10 },
        { title: '章节支付', date: '2025.03.18', amount: 10 },
        { title: '章节支付', date: '2025.03.18', amount: 10 },
        { title: '章节支付', date: '2025.03.18', amount: 10 },
      ]
    }
  },
  methods: {
    goRecharge() {
      uni.showToast({ title: '充值功能开发中', icon: 'none' })
    }
  }
}
</script>

<style lang="scss" scoped>
.walletflow-page {
  min-height: 100vh;
  background: linear-gradient(180deg, #f8f8fc 0%, #fff 100%);
  padding-bottom: 30rpx;
}
.balance-card {
  background: linear-gradient(90deg, #f7f2fa 0%, #fbeaf2 100%);
  border-radius: 18rpx;
  margin: 24rpx 12rpx 0 12rpx;
  padding: 18rpx 24rpx 14rpx 24rpx;
  box-shadow: none;
  border: 1rpx solid #ede7ef;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 130rpx;
  justify-content: center;
  .balance-label {
    color: #bbb;
    font-size: 26rpx;
    margin-bottom: 8rpx;
  }
  .balance-row {
    display: flex;
    align-items: center;
    margin-top: 0;
    position: relative;
    .balance-amount {
      color: #e94f7a;
      font-size: 48rpx;
      font-weight: bold;
    }
    .recharge-btn {
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      background: linear-gradient(90deg, #ffb6c1 0%, #fa5a99 100%);
      color: #fff;
      font-size: 28rpx;
      border-radius: 32rpx;
      padding: 0 40rpx;
      height: 56rpx;
      line-height: 56rpx;
      font-weight: 500;
      border: none;
      box-shadow: none;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
.flow-card {
  background: #fff;
  border-radius: 20rpx;
  margin: 32rpx 16rpx 0 16rpx;
  box-shadow: 0 4rpx 24rpx 0 rgba(0,0,0,0.06);
  padding-bottom: 8rpx;
  overflow: hidden;
}
.tab-header {
  display: flex;
  margin: 0;
  background: #fff;
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
  overflow: hidden;
  .tab-item {
    flex: 1;
    text-align: center;
    font-size: 30rpx;
    color: #888;
    padding: 0 0 18rpx 0;
    font-weight: bold;
    background: transparent;
    position: relative;
    &.active {
      color: #223a7a;
      font-weight: bold;
    }
    .tab-underline {
      position: absolute;
      left: 50%;
      bottom: 0;
      transform: translateX(-50%);
      width: 44rpx;
      height: 4rpx;
      background: #223a7a;
      border-radius: 2rpx;
      margin-top: 4rpx;
    }
  }
}
.flow-list {
  margin: 0;
  padding: 0 16rpx;
  max-height: 75vh;
  background: #fff;
}
.flow-item {
  border-bottom: 1px solid #f5f5f5;
  padding: 18rpx 0 8rpx 0;
  &:last-child {
    border-bottom: none;
  }
  .flow-item-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding-right: 45rpx;
    padding-left: 15rpx;
  }
  .flow-item-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    .flow-title {
      font-size: 28rpx;
      color: #222;
      font-weight: 500;
      margin-bottom: 2rpx;
     
    }
    .flow-date {
      color: #bbb;
      font-size: 22rpx;
      margin-top: 0;
    }
  }
  .flow-amount {
    font-size: 26rpx;
    font-weight: 500;
    margin-left: 24rpx;
    margin-top: 2rpx;
    &.plus {
      color: #223a7a;
    }
    &.minus {
      color: #e94f7a;
    }
  }
}
</style>