bill.vue 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327
  1. <template>
  2. <view class="pages-content" :rise-fall="stocksColor">
  3. <!-- 头部 -->
  4. <headContent borderBottom>
  5. <template #left>
  6. <reverse-back />
  7. </template>
  8. <template #content>
  9. <view class="haed-title">
  10. {{ getTitle(pageType) }}
  11. </view>
  12. </template>
  13. </headContent>
  14. <uni-table class="table-box" emptyText="" v-if="pageType">
  15. <!-- 表头行 -->
  16. <uni-tr>
  17. <uni-th class="table-title" align="left">{{ tableTh[pageType][0].lable }}</uni-th>
  18. <uni-th class="table-title" align="right">{{ tableTh[pageType][1].lable }}</uni-th>
  19. <uni-th class="table-title" align="right">{{ tableTh[pageType][2].lable }}</uni-th>
  20. </uni-tr>
  21. <!-- 表格数据行 -->
  22. <uni-tr :class="['sss', $setColor(item.change)]" v-for="(item , index) in tableData" :key="`tb_${index}`">
  23. <uni-td>
  24. <view class="table-text-01">USDT</view>
  25. <view class="table-text-02">{{ $getData_(item.create_time) }}</view>
  26. </uni-td>
  27. <uni-td style="text-align: right;">
  28. <view class="table-text-03 color">{{ item.change }}</view>
  29. <view class="table-text-04">{{ item.memo }}</view>
  30. </uni-td>
  31. <uni-td style="text-align: right;">
  32. <view class="table-text-05">{{ item.after }}</view>
  33. </uni-td>
  34. </uni-tr>
  35. </uni-table>
  36. <!-- 加载动画 -->
  37. <uni-load-more :status="moreStatus" v-show="tableData.length > 0 || moreStatus === 'loading' " />
  38. <!-- 暂无数据 -->
  39. <no-data v-show="tableData.length === 0 && moreStatus === 'noMore' " />
  40. </view>
  41. </template>
  42. <script>
  43. import reverseBack from "@/components/headModules/reverse-back.vue"
  44. import noData from "./modules/no-data.vue"
  45. import {
  46. Api_getUserBill
  47. } from "@/api/index.js"
  48. import {
  49. mapGetters
  50. } from 'vuex'
  51. export default {
  52. components: {
  53. reverseBack,
  54. noData
  55. },
  56. data() {
  57. return {
  58. pageType: undefined,
  59. moreStatus: '', // 上拉的状态:more-loading前;loading-loading中;noMore-没有更多了
  60. tableTh: [
  61. //合约账户
  62. [{
  63. lable: '账单信息',
  64. val: 'key'
  65. },
  66. {
  67. lable: '数量/类别',
  68. val: 'key'
  69. },
  70. {
  71. lable: '余额',
  72. val: 'key'
  73. }
  74. ],
  75. //币币账户
  76. [{
  77. lable: '币种/时间',
  78. val: 'key'
  79. },
  80. {
  81. lable: '金额/类型',
  82. val: 'key'
  83. },
  84. {
  85. lable: '余额',
  86. val: 'key'
  87. }
  88. ],
  89. //法币账户
  90. [{
  91. lable: '类型/时间',
  92. val: 'key'
  93. },
  94. {
  95. lable: '数量',
  96. val: 'key'
  97. },
  98. {
  99. lable: '状态',
  100. val: 'key'
  101. }
  102. ],
  103. //赠金账户
  104. [{
  105. lable: '账单信息',
  106. val: 'key'
  107. },
  108. {
  109. lable: '数量/类别',
  110. val: 'key'
  111. },
  112. {
  113. lable: '余额',
  114. val: 'key'
  115. }
  116. ]
  117. ],
  118. tableData: [],
  119. page: 1,
  120. };
  121. },
  122. onLoad(opt) {
  123. this.pageType = opt?.type || undefined
  124. // navigationArr: [
  125. // '合约账户',
  126. // '币币账户',
  127. // '法币账户',
  128. // '赠金账户'
  129. // ]
  130. if (this.pageType) {
  131. this.getUserBill()
  132. } else {
  133. this.moreStatus = 'noMore'
  134. }
  135. },
  136. computed: {
  137. ...mapGetters([
  138. 'stocksColor'
  139. ]),
  140. },
  141. onReachBottom() {
  142. console.log('页面触底')
  143. if (!['noMore', 'loading'].includes(this.moreStatus)) {
  144. this.page++;
  145. this.getUserBill();
  146. }
  147. },
  148. methods: {
  149. getTitle(type) {
  150. let title = ''
  151. switch (type) {
  152. case '0':
  153. title = '用户账单';
  154. break;
  155. case '1':
  156. title = '资产记录';
  157. break;
  158. case '2':
  159. title = '资产记录';
  160. break;
  161. case '3':
  162. title = '用户账单';
  163. break;
  164. default:
  165. title = '';
  166. }
  167. return title
  168. },
  169. // 获取用户账单
  170. getUserBill() {
  171. // moreStatus: 'more-loading', // 上拉的状态:more-loading前;loading-loading中;noMore-没有更多了
  172. this.moreStatus = 'loading';
  173. Api_getUserBill({
  174. page: this.page,
  175. limit: 15,
  176. currency: 3,
  177. type: this.pageType - 0 + 1,
  178. status: 4
  179. }).then(res => {
  180. this.tableData = this.tableData.concat(res.list);
  181. if (this.tableData.length >= res.count) {
  182. this.moreStatus = 'noMore';
  183. } else {
  184. this.moreStatus = 'more';
  185. };
  186. }).catch(err => {
  187. if (this.page > 1) {
  188. this.page = 1;
  189. this.moreStatus = 'more';
  190. } else {
  191. this.tableData = [];
  192. this.moreStatus = 'noMore';
  193. }
  194. })
  195. }
  196. }
  197. }
  198. </script>
  199. <style lang="scss" scoped>
  200. .pages-content {
  201. width: 100%;
  202. min-height: 100vh;
  203. background-color: #fff;
  204. }
  205. .table-box {
  206. background-color: $modules-box-bg;
  207. ::v-deep .uni-table-loading {
  208. display: none;
  209. }
  210. .sss {
  211. padding: 0 $pages-padding ;
  212. }
  213. ::v-deep .uni-table-tr {
  214. display: flex;
  215. // align-items: center;
  216. .uni-table-th,
  217. .uni-table-td {
  218. flex-shrink: 0;
  219. display: flex;
  220. flex-direction: column;
  221. justify-content: center;
  222. &:nth-child(1) {
  223. flex: 4;
  224. }
  225. &:nth-child(2) {
  226. flex: 3;
  227. }
  228. &:nth-child(3) {
  229. flex: 3;
  230. }
  231. }
  232. .uni-table-td {
  233. line-height: 1.2;
  234. padding: 25rpx 20rpx;
  235. word-break: break-all;
  236. white-space: pre-wrap;
  237. border-bottom: 1rpx solid $border-color4;
  238. &:last-child,
  239. &:first-child {
  240. padding-right: 0;
  241. padding-left: 0;
  242. }
  243. }
  244. .uni-table-th {
  245. border-bottom: 2rpx solid $border-color4;
  246. &:last-child {
  247. padding-right: $pages-padding;
  248. }
  249. &:first-child {
  250. padding-left: $pages-padding;
  251. }
  252. }
  253. }
  254. .table-title {
  255. font-size: 28rpx;
  256. font-family: PingFang SC, PingFang SC-Regular;
  257. font-weight: 400;
  258. color: #1a1a1a;
  259. }
  260. .table-text-02,
  261. .table-text-04 {
  262. padding-top: 10rpx;
  263. }
  264. .table-text-01 {
  265. font-size: 26rpx;
  266. font-family: PingFang SC, PingFang SC-Bold;
  267. font-weight: 700;
  268. color: #1a1a1a;
  269. }
  270. .table-text-02 {
  271. font-size: 24rpx;
  272. font-family: PingFang SC, PingFang SC-Regular;
  273. font-weight: 400;
  274. color: #808080;
  275. }
  276. .table-text-03 {
  277. font-size: 24rpx;
  278. font-family: PingFang SC, PingFang SC-Bold;
  279. font-weight: 700;
  280. color: #0abd76;
  281. }
  282. .table-text-04 {
  283. font-size: 24rpx;
  284. font-family: PingFang SC, PingFang SC-Regular;
  285. font-weight: 400;
  286. color: #808080;
  287. }
  288. .table-text-05 {
  289. font-size: 24rpx;
  290. font-family: PingFang SC, PingFang SC-Bold;
  291. font-weight: 700;
  292. color: #1a1a1a;
  293. }
  294. }
  295. </style>