kxmall-ui/kxmall-rider-ui/pages/wallet/detail.vue

<template>
  <view class="container">
    <view class="detail-header">
      <view class="amount" :class="{'income': detail.amount > 0, 'expense': detail.amount < 0}">
        {{detail.amount > 0 ? '+' : ''}}{{detail.amount}}
      </view>
      <view class="type">{{getTypeText(detail.transactionType)}}</view>
    </view>

    <view class="detail-card">
      <view class="card-item">
        <view class="item-label">交易单号</view>
        <view class="item-value">{{detail.transactionNo}}</view>
      </view>
      <view class="card-item">
        <view class="item-label">交易时间</view>
        <view class="item-value">{{detail.createTime}}</view>
      </view>
      <view class="card-item" v-if="detail.orderNo">
        <view class="item-label">关联订单</view>
        <view class="item-value">{{detail.orderNo}}</view>
      </view>
      <view class="card-item">
        <view class="item-label">交易后余额</view>
        <view class="item-value">{{detail.balance}}</view>
      </view>
      <view class="card-item">
        <view class="item-label">交易来源</view>
        <view class="item-value">{{getSourceText(detail.transactionSource)}}</view>
      </view>
      <view class="card-item">
        <view class="item-label">交易状态</view>
        <view class="item-value">{{getStatusText(detail.status)}}</view>
      </view>
      <view class="card-item" v-if="detail.remark">
        <view class="item-label">备注</view>
        <view class="item-value">{{detail.remark}}</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      detail: {}
    };
  },
  onLoad(options) {
    this.getDetail(options.id);
  },
  methods: {
    getDetail(id) {
      uni.showLoading({ title: '加载中...' });
      this.request("get", `rider/wallet/transaction/${id}`, this.$store.state.token)
          .then(res => {
            if (res.code === 200) {
              this.detail = res.data;
            }
          })
          .finally(() => {
            uni.hideLoading();
          });
    },

    getTypeText(type) {
      const types = {
        1: '收入',
        2: '支出',
        3: '提现',
        4: '退款'
      };
      return types[type] || '未知';
    },

    getSourceText(source) {
      const sources = {
        1: '配送费',
        2: '小费',
        3: '系统调整',
        4: '其他'
      };
      return sources[source] || '未知';
    },

    getStatusText(status) {
      const statusMap = {
        1: '成功',
        2: '处理中',
        3: '失败'
      };
      return statusMap[status] || '未知';
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  padding: 20rpx;
}

.detail-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40rpx 0;
  background-color: $uni-bg-color;
  border-radius: 14rpx;
  margin-bottom: 20rpx;

  .amount {
    font-size: 48rpx;
    font-weight: bold;
    margin-bottom: 20rpx;

    &.income {
      color: $uni-color-success;
    }

    &.expense {
      color: $uni-color-error;
    }
  }

  .type {
    font-size: $uni-font-size-base;
    color: $font-color-light;
  }
}

.detail-card {
  background-color: $uni-bg-color;
  border-radius: 14rpx;
  padding: 0 30rpx;

  .card-item {
    display: flex;
    justify-content: space-between;
    padding: 25rpx 0;
    border-bottom: 1rpx solid $uni-border-color;

    &:last-child {
      border-bottom: none;
    }

    .item-label {
      color: $font-color-light;
      font-size: $uni-font-size-base;
    }

    .item-value {
      color: $font-color-black;
      font-size: $uni-font-size-base;
    }
  }
}
</style>