order.vue 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263
  1. <template>
  2. <view class="pos-r padding-lr-sm">
  3. <use-tabbar :tabbar="false" />
  4. <!-- 我的余额区域 -->
  5. <view class="gold-section" v-if="fetch && fetch.cash">
  6. <view class="item dflex dflex-flow-c">
  7. <text>{{fetch.cash}}</text>
  8. </view>
  9. </view>
  10. <!-- 记录列表 -->
  11. <view class="record-list margin-top-sm" v-if="fetch">
  12. <view class="record-title fs fwbd ft-black margin-bottom-sm">账单记录</view>
  13. <u-empty v-if="fetch['list_-1'] && fetch['list_-1'].length <= 0" marginTop="30" mode="data" text="暂无记录"></u-empty>
  14. <view v-else>
  15. <view class="record-item" v-for="(item, index) in fetch['list_-1']" :key="index">
  16. <view class="record-left">
  17. <view class="record-name">{{ item.action_name }}</view>
  18. <view class="record-desc" v-if="item.desc">{{ item.desc }}</view>
  19. <view class="record-time">{{ item.cdate }}</view>
  20. </view>
  21. <view class="record-amount" :class="{ income: item.type == 1, expense: item.type == 2, lock: item.type == 3 }">
  22. <text v-if="item.type == 1">+</text>
  23. <text v-if="item.type == 3">待入账</text>
  24. <text>{{ item.amount }}</text>
  25. </view>
  26. </view>
  27. </view>
  28. </view>
  29. <view class="safe-area-inset-bottom"></view>
  30. </view>
  31. </template>
  32. <script>
  33. export default {
  34. data() {
  35. return {
  36. fetch: {},
  37. }
  38. },
  39. onLoad(options) {
  40. },
  41. onShow() {
  42. this.loadData();
  43. this.loadList(1);
  44. },
  45. //下拉刷新
  46. onPullDownRefresh() {
  47. this.loadList(1);
  48. },
  49. //加载更多
  50. onReachBottom() {
  51. this.loadList(2);
  52. },
  53. methods: {
  54. loadData() {
  55. this.DeverApi.get(this, 'score.getCash', {
  56. name: '返利',
  57. });
  58. },
  59. loadList(page) {
  60. this.DeverApi.page([page, 'list_-1'], this, 'score.log', {
  61. id: -1,
  62. type: -1,
  63. name: '返利',
  64. });
  65. },
  66. }
  67. }
  68. </script>
  69. <style lang="scss">
  70. .gold-section {
  71. background: #ffffff;
  72. border-radius: 24rpx;
  73. padding: 32rpx;
  74. .dflex-b {
  75. display: flex;
  76. justify-content: space-between;
  77. align-items: center;
  78. }
  79. .title {
  80. font-size: 32rpx;
  81. font-weight: bold;
  82. color: #333;
  83. }
  84. .link {
  85. font-size: 24rpx;
  86. color: #ff9800;
  87. text-decoration: underline;
  88. }
  89. .balance-number {
  90. margin-top: 20rpx;
  91. .price {
  92. font-size: 48rpx;
  93. color: #ff9800;
  94. font-weight: bold;
  95. }
  96. }
  97. .amount-summary {
  98. display: flex;
  99. justify-content: space-between;
  100. margin-top: 32rpx;
  101. .summary-item {
  102. flex: 1;
  103. display: flex;
  104. flex-direction: column;
  105. .label {
  106. font-size: 24rpx;
  107. color: #888;
  108. }
  109. .value {
  110. margin-top: 10rpx;
  111. font-size: 30rpx;
  112. font-weight: 600;
  113. color: #333;
  114. }
  115. }
  116. }
  117. }
  118. .card-tile {
  119. border-radius: 24rpx;
  120. padding: 30rpx;
  121. background: #ffffff;
  122. display: flex;
  123. align-items: center;
  124. justify-content: center;
  125. transition: all 0.2s ease-in-out;
  126. .icon {
  127. font-size: 60rpx;
  128. margin-right: 24rpx;
  129. }
  130. .text-content {
  131. display: flex;
  132. flex-direction: column;
  133. .title {
  134. font-size: 30rpx;
  135. font-weight: 600;
  136. color: #333;
  137. }
  138. .desc {
  139. font-size: 24rpx;
  140. color: #999;
  141. margin-top: 6rpx;
  142. }
  143. }
  144. &:active {
  145. transform: scale(0.97);
  146. }
  147. &:first-child {
  148. margin-right: 10rpx;
  149. }
  150. }
  151. .wpre-50 .card-tile {
  152. &:first-child {
  153. margin-bottom: 12rpx;
  154. margin-right: 0rpx;
  155. }
  156. }
  157. .record-list {
  158. background: #ffffff;
  159. border-radius: 20rpx;
  160. padding: 30rpx;
  161. .record-title {
  162. font-size: 30rpx;
  163. font-weight: bold;
  164. color: #333;
  165. }
  166. .record-item {
  167. display: flex;
  168. justify-content: space-between;
  169. align-items: center;
  170. padding: 20rpx 0;
  171. border-bottom: 1px solid #f0f0f0;
  172. &:last-child {
  173. border-bottom: none;
  174. }
  175. .record-left {
  176. display: flex;
  177. flex-direction: column;
  178. .record-name {
  179. font-size: 28rpx;
  180. color: #333;
  181. }
  182. .record-desc {
  183. font-size: 28rpx;
  184. color: #999;
  185. }
  186. .record-time {
  187. font-size: 24rpx;
  188. color: #999;
  189. margin-top: 6rpx;
  190. }
  191. }
  192. .record-amount {
  193. font-size: 28rpx;
  194. font-weight: bold;
  195. &.income {
  196. color: #4caf50;
  197. }
  198. &.expense {
  199. color: #f44336;
  200. }
  201. &.lock {
  202. color: #999;
  203. }
  204. }
  205. }
  206. }
  207. .empty-record {
  208. text-align: center;
  209. padding: 60rpx 0;
  210. .empty-icon {
  211. width: 160rpx;
  212. height: 160rpx;
  213. margin-bottom: 20rpx;
  214. opacity: 0.6;
  215. }
  216. .empty-text {
  217. font-size: 28rpx;
  218. color: #999;
  219. }
  220. }
  221. </style>