consume-list.vue 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180
  1. <template>
  2. <view class="consume-list-box">
  3. <view class="consume-list">
  4. <view class="consume-title">
  5. <text class="consume-title-left"></text>
  6. <view class="consume-title-text">{{ title }}</view>
  7. <text class="consume-title-right"></text>
  8. </view>
  9. <block v-for="item in list">
  10. <view class="consume-list-item">
  11. <view class="item-val">
  12. <text class="item-val-title">{{ item[keys.title] }}</text>
  13. <text class="item-val-time">{{ item[keys.time] }}</text>
  14. </view>
  15. <view :class="['item-val-num' , item[keys.type] === 1 ? '' : 'red-color']">
  16. {{ item[keys.type] === 1 ? '+' : '-'}}{{ item[keys.val]}}
  17. </view>
  18. </view>
  19. </block>
  20. <loadMore v-if="list.length>0 || status === 'loading'" :status="status"></loadMore>
  21. <nodata v-else :config="{ top: 1, content: '暂无数据~' }"></nodata>
  22. </view>
  23. </view>
  24. </template>
  25. <script>
  26. import {
  27. refillCardInfo
  28. } from "@/api/personal-center.js"
  29. export default {
  30. name: "consume-list",
  31. props: {
  32. title: {
  33. type: String,
  34. default: ''
  35. },
  36. keys: {
  37. type: Object,
  38. default: () => {
  39. return {
  40. title: 'remark',
  41. time: 'formatCreateTimeMillis',
  42. val: 'entryValue',
  43. type: 'billType'
  44. }
  45. }
  46. },
  47. status: {
  48. type: String,
  49. default: ''
  50. },
  51. list: {
  52. type: Array,
  53. default: () => {
  54. return []
  55. }
  56. },
  57. },
  58. data() {
  59. return {
  60. };
  61. },
  62. methods: {
  63. }
  64. }
  65. </script>
  66. <style lang="scss" scoped>
  67. .consume-list-box{
  68. width: 100%;
  69. position: relative;
  70. }
  71. .consume-list {
  72. width: 100%;
  73. padding: 0 60rpx;
  74. position: absolute;
  75. top: -113rpx;
  76. // transform: translateY(-113rpx);
  77. background-color: #fff;
  78. border-radius: 40rpx 40rpx 0 0;
  79. min-height: 120rpx;
  80. .consume-title {
  81. background-color: #fff;
  82. width: 100%;
  83. height: 113rpx;
  84. display: flex;
  85. justify-content: center;
  86. align-items: center;
  87. font-size: 32rpx;
  88. font-family: PingFang SC, PingFang SC-Bold;
  89. font-weight: 700;
  90. color: #FA6138;
  91. }
  92. .consume-title-text {
  93. padding: 0 22rpx;
  94. }
  95. .consume-title-left {
  96. width: 60rpx;
  97. height: 2rpx;
  98. background: linear-gradient(90deg, #ffffff, #3775f6);
  99. border-radius: 1px;
  100. position: relative;
  101. &:before {
  102. content: '';
  103. position: absolute;
  104. right: 0;
  105. top: -50%;
  106. width: 6rpx;
  107. height: 6rpx;
  108. background: #FA6138;
  109. border-radius: 50%;
  110. }
  111. }
  112. .consume-title-right {
  113. width: 60rpx;
  114. height: 2rpx;
  115. background: linear-gradient(270deg, #ffffff, #3775f6);
  116. border-radius: 1px;
  117. position: relative;
  118. &:before {
  119. content: '';
  120. position: absolute;
  121. left: 0;
  122. top: -50%;
  123. width: 6rpx;
  124. height: 6rpx;
  125. background: #FA6138;
  126. border-radius: 50%;
  127. }
  128. }
  129. .consume-list-item {
  130. width: 100%;
  131. height: 151rpx;
  132. border-bottom: 1rpx solid #e6e6e6;
  133. display: flex;
  134. justify-content: space-between;
  135. align-items: center;
  136. font-family: PingFang SC, PingFang SC-Regular;
  137. font-weight: 400;
  138. .item-val {
  139. font-family: PingFang SC, PingFang SC-Regular;
  140. font-weight: 400;
  141. display: flex;
  142. flex-direction: column;
  143. .item-val-title {
  144. font-size: 28rpx;
  145. color: #1a1a1a;
  146. padding-bottom: 14rpx;
  147. }
  148. .item-val-time {
  149. font-size: 24rpx;
  150. color: #999999;
  151. }
  152. }
  153. .item-val-num {
  154. flex-shrink: 0;
  155. font-size: 30rpx;
  156. color: #FA6138;
  157. }
  158. .red-color{
  159. color: #FF3B3B;
  160. }
  161. }
  162. }
  163. </style>