微信小程序交易记录样式

ネф̶-イω

于 2024-07-25 20:52:17 发布

阅读量441

点赞数 13

文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/weixin_45019897/article/details/140699781

版权

在这里插入图片描述

<view class="container">
  <block wx:for="{{ transactions }}" wx:key="id">
    <view class="payment-card" hover-class="none">
      <view class="card-content">
        <view class="item">
          <text class="label">交易时间:</text>
          <text class="value">{{ item.transactionTime }}</text>
        </view>
        <view class="item">
          <text class="label">交易金额:</text>
          <text class="value">{{ item.amount }}</text>
        </view>
        <view class="item">
          <text class="label">交易方式:</text>
          <text class="value">{{ item.paymentMethod }}</text>
        </view>
        <view class="item">
          <text class="label">交易终端:</text>
          <text class="value">{{ item.terminal }}</text>
        </view>
        <view class="item">
          <text class="label">交易种类:</text>
          <text class="value">{{ item.transactionType }}</text>
        </view>
        <view class="item">
          <text class="label">交易卡号:</text>
          <text class="value">{{ item.cardNumber }}</text>
        </view>
        <view class="item">
          <text class="label">交易单号:</text>
          <text class="value">{{ item.transactionID }}</text>
        </view>
        <view class="item">
          <text class="label">交易状态:</text>
          <text class="value status-{{ item.status }}">{{ item.status }}</text>
        </view>
        <view class="item">
          <text class="label">交易来源:</text>
          <text class="value">{{ item.source }}</text>
        </view>
        <view class="item">
          <text class="label">商户名称:</text>
          <text class="value">{{ item.merchantName }}</text>
        </view>
        <view class="item">
          <text class="label">交易订单:</text>
          <text class="value">{{ item.orderID }}</text>
        </view>
      </view>
    </view>
  </block>
</view>

.container {
  display: flex;
  justify-content: center;
  padding: 0 20rpx;
  flex-wrap: wrap;
}

.payment-card {
  width: 680rpx;
  border-radius: 10rpx;
  background-color: #E5F5F5;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
  padding: 20rpx;
  margin-bottom: 20rpx;
}

.card-content .item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10rpx;
}

.label {
  color: #999999;
  font-size: 28rpx;
}

.value {
  color: #333333;
  font-size: 28rpx;
}

.payment-card.status-success {
  background-color: #E8F5E9;
}

.payment-card.status-failed {
  background-color: #FFEDE7;
}

.payment-card.status-pending {
  background-color: #FFF9C4;
}

.status-success {
  color: green;
}

.status-failed {
  color: red;
}

.status-pending {
  color: orange;
}

Page({
  data: {
    transactions: [
      {
        transactionTime: '2023-07-25 14:30',
        amount: '￥123.45',
        paymentMethod: '微信支付',
        terminal: 'iPhone 13 Pro',
        transactionType: '在线购物',
        cardNumber: '**** **** **** 1234',
        transactionID: '1234567890',
        status: 'success',
        source: 'App Store',
        merchantName: 'Apple Inc.',
        orderID: 'A123456789'
      },
      {
        transactionTime: '2023-07-25 14:30',
        amount: '￥123.45',
        paymentMethod: '支付宝',
        terminal: 'iPad Air 4',
        transactionType: '线下购物',
        cardNumber: '**** **** **** 5678',
        transactionID: '0987654321',
        status: 'pending',
        source: '线下商店',
        merchantName: 'Best Buy',
        orderID: 'B987654321'
      },
      {
        transactionTime: '2023-07-25 14:30',
        amount: '￥123.45',
        paymentMethod: '信用卡',
        terminal: 'Desktop PC',
        transactionType: '在线充值',
        cardNumber: '**** **** **** 7890',
        transactionID: '2468135790',
        status: 'failed',
        source: '官方网站',
        merchantName: 'Steam',
        orderID: 'S2468135790'
      },
    ]
  }
});