transactionRecord.vue 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173
  1. <template>
  2. <view class="container">
  3. <!-- 头部 -->
  4. <view class="header">
  5. <text class="active">消费</text>
  6. <text>充值</text>
  7. </view>
  8. <!-- 主体内容 -->
  9. <scroll-view class="scroll-content" scroll-y>
  10. <view class="month-list">
  11. <!-- 3月记录 -->
  12. <view class="month-card">
  13. <view class="month-header">
  14. <text class="month-title">2025年3月</text>
  15. <text class="month-total">总计:¥4.00</text>
  16. </view>
  17. <view class="record-list">
  18. <view
  19. class="record-item"
  20. v-for="(item, index) in marchRecords"
  21. :key="index"
  22. >
  23. <view class="item-left">
  24. <text class="amount-label">消费</text>
  25. <text class="time">{{item.time}}</text>
  26. </view>
  27. <text class="amount">¥{{item.amount}}</text>
  28. </view>
  29. </view>
  30. </view>
  31. <!-- 2月记录 -->
  32. <view class="month-card">
  33. <view class="month-header">
  34. <text class="month-title">2025年2月</text>
  35. <text class="month-total">总计:¥6.00</text>
  36. </view>
  37. <view class="record-list">
  38. <view
  39. class="record-item"
  40. v-for="(item, index) in febRecords"
  41. :key="index"
  42. >
  43. <view class="item-left">
  44. <text class="amount-label">消费</text>
  45. <text class="time">{{item.time}}</text>
  46. </view>
  47. <text class="amount">¥{{item.amount}}</text>
  48. </view>
  49. </view>
  50. </view>
  51. </view>
  52. </scroll-view>
  53. </view>
  54. </template>
  55. <script>
  56. export default {
  57. data() {
  58. return {
  59. marchRecords: [
  60. { amount: 1.00, time: '2025/03/04 08:00:29' },
  61. { amount: 1.00, time: '2025/03/03 18:42:57' },
  62. { amount: 1.00, time: '2025/03/03 18:16:31' },
  63. { amount: 1.00, time: '2025/03/03 08:06:20' }
  64. ],
  65. febRecords: [
  66. { amount: 1.00, time: '2025/02/28 20:36:46' },
  67. { amount: 1.00, time: '2025/02/28 07:55:45' }
  68. ]
  69. }
  70. }
  71. }
  72. </script>
  73. <style lang="scss">
  74. .container {
  75. height: 100vh;
  76. display: flex;
  77. flex-direction: column;
  78. background-color: #f5f5f5;
  79. }
  80. .header {
  81. padding: 30px 10px 20px;
  82. display: flex;
  83. align-items: center;
  84. justify-content: center;
  85. > text {
  86. font-size: 16px;
  87. font-weight: bold;
  88. color: #333;
  89. margin: 0 10px;
  90. }
  91. .active{
  92. color: #ff0000;
  93. }
  94. }
  95. .scroll-content {
  96. flex-grow: 1;
  97. .month-list{
  98. padding: 0 15px;
  99. }
  100. }
  101. .month-card {
  102. margin-bottom: 15px;
  103. overflow: hidden;
  104. }
  105. .month-header {
  106. padding: 12px 0;
  107. display: flex;
  108. justify-content: space-between;
  109. .month-title {
  110. font-size: 16px;
  111. color: #333;
  112. font-weight: 500;
  113. }
  114. .month-total {
  115. font-size: 14px;
  116. color: #666;
  117. }
  118. }
  119. .record-list {
  120. padding: 0 15px;
  121. background-color: #fff;
  122. border-radius: 8px;
  123. }
  124. .record-item {
  125. padding: 12px 0;
  126. display: flex;
  127. justify-content: space-between;
  128. align-items: center;
  129. border-bottom: 1px solid #f0f0f0;
  130. &:last-child {
  131. border-bottom: none;
  132. }
  133. .item-left {
  134. display: flex;
  135. flex-direction: column;
  136. }
  137. .amount-label {
  138. font-size: 14px;
  139. color: #333;
  140. font-weight: bold;
  141. }
  142. .amount {
  143. font-size: 14px;
  144. color: #333;
  145. font-weight: 500;
  146. }
  147. .time {
  148. font-size: 12px;
  149. color: #999;
  150. margin-top: 5px;
  151. }
  152. }
  153. </style>