popup-transactions.vue 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532
  1. <template>
  2. <div class="com-wrapper" ref="listWrapper" @scroll="listScroll">
  3. <template v-if="!dataList.length">
  4. <img class="icon-empty" :src="require('@/assets/svg/icon-empty-list.svg')" />
  5. </template>
  6. <div class="list-wrapper" ref="listContent">
  7. <div>
  8. <div class="cell" v-for="(item, index) in dataList" :key="index">
  9. <red-dot class="red-dots" v-if="item.unReadMsgCount > 0 && isReadMsg"></red-dot>
  10. <div class="img-wrapper">
  11. <!-- 收入- 任务红包领取 -->
  12. <template
  13. v-if="item.bizType == 1 || item.bizType == 5 || item.bizType == 10 || item.bizType == 11 || item.bizType == 12">
  14. <img class="icon-avatar" style="margin-right: 0"
  15. :src="item.bizType != 12 && item.bizData ? item.bizData.avatarUrl : require('@/assets/svg/icon-treasure-return.svg')" />
  16. <img class="icon-give" style="right: -4px"
  17. :src="item.bizType == 10 || item.bizType == 11 || item.bizType == 12 ? require('@/assets/svg/icon-small-treasure.svg') : require('@/assets/svg/icon-get-giveaways-s.svg')" />
  18. </template>
  19. <!-- 收入- 任务红包结余退款, -->
  20. <template v-else-if="item.bizType == 2 || item.bizType == 6">
  21. <img style="margin-left:-4px; width: 38px" :src="
  22. require('@/assets/svg/icon-give-refund-list.svg')
  23. " />
  24. </template>
  25. <!-- 收入 - 提现 -- 失败退款 -->
  26. <template v-else-if="item.bizType == 3">
  27. <img style="margin-left:-4px" :src="
  28. require('@/assets/svg/icon-list-withdraw.svg')
  29. " />
  30. </template>
  31. <!-- 收入-充值 -->
  32. <template v-else-if="item.bizType == 4">
  33. <img style="margin-left:-4px" :src="
  34. require('@/assets/svg/icon-list-top-up.svg')
  35. " />
  36. </template>
  37. <!-- 收入 - 盲盒 -->
  38. <template v-else-if="item.bizType == 7">
  39. <img class="icon-avatar" style="margin-left:-4px" :src="item.bizData.imagePath"
  40. v-if="item.bizData && item.bizData.imagePath" />
  41. <img class="icon-avatar" style="margin-left:-4px"
  42. :src="require('@/assets/svg/icon-wallter-list-blind-box.svg')" v-else />
  43. <img class="icon-give" :src="require('@/assets/svg/icon-list-withdraw-s.svg')" />
  44. </template>
  45. <!-- 收入 - 盲盒 -->
  46. <template v-else-if="item.bizType == 8">
  47. <img class="icon-avatar" style="margin-left:-4px" :src="item.bizData.imagePath"
  48. v-if="item.bizData && item.bizData.imagePath" />
  49. <img class="icon-avatar" style="margin-left:-4px"
  50. :src="require('@/assets/svg/icon-wallter-list-blind-box.svg')" v-else />
  51. <img class="icon-give" :src="require('@/assets/svg/icon-get-giveaways-s.svg')" />
  52. </template>
  53. <!-- 支出 - 提现 -->
  54. <template v-else-if="item.bizType == -1">
  55. <img style="margin-left:-4px" :src="
  56. require('@/assets/svg/icon-list-withdraw.svg')
  57. " />
  58. </template>
  59. <!-- 支出-任务红包余额支付 -->
  60. <template v-else-if="item.bizType == -2">
  61. <img class="icon-avatar" style="margin-left:-4px" :src="
  62. require('@/assets/svg/icon-big-give.svg')
  63. " />
  64. <img class="icon-give" :src="
  65. require('@/assets/svg/icon-list-withdraw-s.svg')
  66. " />
  67. </template>
  68. <!-- 支出-买盲盒 -->
  69. <template v-else-if="item.bizType == -3">
  70. <img style="margin-left:-4px" :src="
  71. require('@/assets/svg/icon-wallter-list-blind-box.svg')
  72. " />
  73. </template>
  74. <template v-else-if="item.bizType == -4">
  75. <img class="icon-avatar" style="margin-left:-4px" :src="
  76. require('@/assets/svg/icon-big-give.svg')
  77. " />
  78. <img class="icon-give" :src="
  79. require('@/assets/svg/icon-list-withdraw-s.svg')
  80. " />
  81. </template>
  82. <!-- 交易链手续费 -->
  83. <template v-else-if="item.bizType == -5">
  84. <img class="icon-avatar" style="margin-left:-4px" :src="item.bizData.imagePath"
  85. v-if="item.bizData && item.bizData.imagePath" />
  86. <img class="icon-avatar" style="margin-left:-4px"
  87. :src="require('@/assets/img/icon-box2.png')" v-else />
  88. <img class="icon-give" :src="require('@/assets/svg/icon-transaction-s.svg')" />
  89. </template>
  90. <!-- 支出-夺宝 -->
  91. <template v-else-if="item.bizType == -6">
  92. <img class="icon-avatar" style="margin-left:-4px" :src="
  93. require('@/assets/svg/icon-big-give.svg')
  94. " />
  95. <img class="icon-give" :src="
  96. require('@/assets/svg/icon-list-withdraw-s.svg')
  97. " />
  98. </template>
  99. </div>
  100. <div class="info-wrapper">
  101. <div class="left">
  102. <div class="nickname">
  103. <template v-if="item.bizType == 1">
  104. Giveaways ({{ item.bizData.nickName }})
  105. </template>
  106. <template v-else-if="item.bizType == 2">
  107. Giveaways Refund
  108. </template>
  109. <template v-else-if="item.bizType == 3">
  110. Withdrawal Refund
  111. </template>
  112. <template v-else-if="item.bizType == 4">
  113. Deposit
  114. </template>
  115. <template v-else-if="item.bizType == 5">
  116. Winning the lottery
  117. </template>
  118. <template v-else-if="item.bizType == 6">
  119. Lottery Refund
  120. </template>
  121. <template v-else-if="item.bizType == 7">
  122. Sell NFT Mystery box*{{ (item.bizData && item.bizData.nftItemCount || '') }}
  123. </template>
  124. <template v-else-if="item.bizType == 8">
  125. NFT Refund
  126. </template>
  127. <template v-else-if="item.bizType == 10 || item.bizType == 11">
  128. Get Treasure Chest
  129. </template>
  130. <template v-else-if="item.bizType == 12">
  131. Treasure Chest Refund
  132. </template>
  133. <template v-else-if="item.bizType == -1">
  134. Withdrawal
  135. </template>
  136. <template v-else-if="item.bizType == -2">
  137. Giveaways
  138. </template>
  139. <template v-else-if="item.bizType == -3">
  140. Buy NFT Mystery box*{{ (item.bizData && item.bizData.nftItemCount || '') }}
  141. </template>
  142. <template v-else-if="item.bizType == -4">
  143. Lottery Giveaway
  144. </template>
  145. <template v-else-if="item.bizType == -5">
  146. Transaction Royalties
  147. </template>
  148. <template v-else-if="item.bizType == -6">
  149. Send Treasure Chest
  150. </template>
  151. </div>
  152. <div class="time">{{ moment(item.createTimestamp).format('MM-DD HH:mm:ss') }}</div>
  153. </div>
  154. <div class="right">
  155. <div class="msg">
  156. <template v-if="item.bizType == -1">
  157. <!-- 提现支出-状态(0:已申请,1:支付中,2:提现成功,3:提现失败) -->
  158. <template
  159. v-if="item.bizData.withdrawStatus == 0 || item.bizData.withdrawStatus == 1">
  160. <div>
  161. <div class="balance"
  162. :class="{ 'balance-direction': item.trxAmountCurrencyInfo.tokenSymbol.length + ('' + item.trxAmountValue).length > 12 }">
  163. <span class="amount">
  164. <a-tooltip :title="'-' + item.trxAmountValue">
  165. -{{ getBit(item.trxAmountValue) || 0 }}
  166. </a-tooltip>
  167. </span>
  168. <div class="trx-amount-currency-info">
  169. <span class="name">{{ item.trxAmountCurrencyInfo.tokenSymbol
  170. }}</span>
  171. <img :src="item.trxAmountCurrencyInfo.iconPath" alt="">
  172. </div>
  173. </div>
  174. <div class="desc">
  175. in progress
  176. </div>
  177. </div>
  178. </template>
  179. <template v-else-if="item.bizData.withdrawStatus == 2">
  180. <div class="balance"
  181. :class="{ 'balance-direction': item.trxAmountCurrencyInfo.tokenSymbol.length + ('' + item.trxAmountValue).length > 12 }">
  182. <span class="amount">
  183. <a-tooltip :title="'-' + item.trxAmountValue">
  184. -{{ getBit(item.trxAmountValue) || 0 }}
  185. </a-tooltip>
  186. </span>
  187. <div class="trx-amount-currency-info">
  188. <span class="name">{{ item.trxAmountCurrencyInfo.tokenSymbol }}</span>
  189. <img :src="item.trxAmountCurrencyInfo.iconPath" alt="">
  190. </div>
  191. </div>
  192. </template>
  193. <template v-else-if="item.bizData.withdrawStatus == 3">
  194. <div>
  195. <div class="balance"
  196. :class="{ 'balance-direction': item.trxAmountCurrencyInfo.tokenSymbol.length + ('' + item.trxAmountValue).length > 12 }">
  197. <span class="amount">
  198. <a-tooltip :title="'-' + item.trxAmountValue">
  199. -{{ getBit(item.trxAmountValue) || 0 }}
  200. </a-tooltip>
  201. </span>
  202. <div class="trx-amount-currency-info">
  203. <span class="name">{{ item.trxAmountCurrencyInfo.tokenSymbol
  204. }}</span>
  205. <img :src="item.trxAmountCurrencyInfo.iconPath" alt="">
  206. </div>
  207. </div>
  208. <div class="desc">
  209. Withdrawal failed
  210. </div>
  211. </div>
  212. </template>
  213. <template v-else>
  214. <div class="balance"
  215. :class="{ 'balance-direction': item.trxAmountCurrencyInfo.tokenSymbol.length + ('' + item.trxAmountValue).length > 12 }">
  216. <span class="amount">
  217. <a-tooltip :title="'-' + item.trxAmountValue">
  218. -{{ getBit(item.trxAmountValue) || 0 }}
  219. </a-tooltip>
  220. </span>
  221. <div class="trx-amount-currency-info">
  222. <span class="name">{{ item.trxAmountCurrencyInfo.tokenSymbol }}</span>
  223. <img :src="item.trxAmountCurrencyInfo.iconPath" alt="">
  224. </div>
  225. </div>
  226. </template>
  227. </template>
  228. <template v-else>
  229. <div class="balance"
  230. :class="{ 'balance-direction': item.trxAmountCurrencyInfo.tokenSymbol.length + ('' + item.trxAmountValue).length > 12 }">
  231. <!--支出—— -2:零钱余额支付 、-3: NFT盲盒余额支付 -->
  232. <span class="amount"
  233. v-if="item.bizType == -2 || item.bizType == -3 || item.bizType == -4 || item.bizType == -5 || item.bizType == -6">
  234. <a-tooltip :title="'-' + item.trxAmountValue">
  235. -{{ getBit(item.trxAmountValue) || 0 }}
  236. </a-tooltip>
  237. </span>
  238. <!-- 收入—— bizType:1、2、3、4 -->
  239. <span class="amount" v-else>
  240. <a-tooltip :title="'+' + item.trxAmountValue">
  241. +{{ getBit(item.trxAmountValue) || 0 }}
  242. </a-tooltip>
  243. </span>
  244. <div class="trx-amount-currency-info">
  245. <span class="name">{{ item.trxAmountCurrencyInfo.tokenSymbol }}</span>
  246. <img :src="item.trxAmountCurrencyInfo.iconPath" alt="">
  247. </div>
  248. </div>
  249. </template>
  250. </div>
  251. </div>
  252. </div>
  253. </div>
  254. </div>
  255. </div>
  256. </div>
  257. </template>
  258. <script setup>
  259. import { onMounted, ref } from "vue";
  260. import redDot from "@/components/red-dot.vue";
  261. import messageCenter from "@/uilts/messageCenter";
  262. import MESSAGE_ENUM from "@/uilts/messageCenter/messageEnum";
  263. import { transactionsList } from "@/http/account";
  264. import { readAllMsgByType, getAllMessageInfo } from "@/http/messageApi"
  265. import { getBit } from "@/uilts/help";
  266. let moment = require('moment');
  267. let dataList = ref([]);
  268. let listWrapper = ref(null);
  269. let listContent = ref(null);
  270. let listReqParams = {
  271. params: {
  272. pageNum: 1,
  273. pageSize: 20,
  274. },
  275. loadMore: false,
  276. };
  277. let isReadMsg = ref(true);
  278. const getTransactionsList = () => {
  279. transactionsList({
  280. params: listReqParams.params,
  281. }).then((res) => {
  282. console.log(res);
  283. if (res.code == 0) {
  284. let resData = res.data;
  285. if (resData.length) {
  286. for (let i = 0; i < resData.length; i++) {
  287. resData[i]["bizData"] = JSON.parse(resData[i]["bizData"]);
  288. }
  289. if (listReqParams.params.pageNum < 2) {
  290. dataList.value = resData;
  291. } else {
  292. let data = dataList.value;
  293. data = data.concat(resData);
  294. dataList.value = data;
  295. }
  296. listReqParams.loadMore = false;
  297. }
  298. }
  299. });
  300. };
  301. onMounted(() => {
  302. messageCenter.send({
  303. info: {
  304. actionType: MESSAGE_ENUM.IFRAME_RUNTIME_CONNECT_POPUP
  305. },
  306. data: {}
  307. });
  308. setTimeout(() => {
  309. isReadMsg.value = false;
  310. readAllMsgByType({
  311. params: {
  312. msgType: 2 // 1:任务红包 2:钱包明细
  313. }
  314. }).then(() => {
  315. setMessageCount();
  316. })
  317. }, 2000)
  318. getTransactionsList();
  319. });
  320. const setMessageCount = () => {
  321. getAllMessageInfo({
  322. params: {
  323. }
  324. }).then(res => {
  325. if (res.code == 0) {
  326. let { unReadCountTotal = 0 } = res.data;
  327. if (unReadCountTotal > 0) {
  328. let text = unReadCountTotal > 99 ? '99+' : unReadCountTotal + '';
  329. messageCenter.send({
  330. info: {
  331. actionType: MESSAGE_ENUM.IFRAME_MESSAGE_PAGE_SETBADGEINFO
  332. },
  333. data: { text }
  334. })
  335. } else {
  336. messageCenter.send({
  337. info: {
  338. actionType: MESSAGE_ENUM.IFRAME_MESSAGE_PAGE_HIDEBADGE
  339. },
  340. data: {}
  341. })
  342. }
  343. }
  344. });
  345. }
  346. const listScroll = (e) => {
  347. let wrapperHeight = listWrapper.value.offsetHeight;
  348. let listContentHeight = listContent.value.offsetHeight;
  349. let scrollTop = e.target.scrollTop || 0;
  350. if (
  351. listReqParams.loadMore === false &&
  352. wrapperHeight + scrollTop >= listContentHeight - 30
  353. ) {
  354. listReqParams.loadMore = true;
  355. listReqParams.params.pageNum++;
  356. getTransactionsList();
  357. }
  358. };
  359. </script>
  360. <style lang="scss" scoped>
  361. .com-wrapper {
  362. height: 100%;
  363. position: relative;
  364. overflow-y: auto;
  365. .icon-empty {
  366. position: absolute;
  367. left: 50%;
  368. top: 20%;
  369. transform: translateX(-50%);
  370. }
  371. .com-nav-bar {
  372. padding: 14px;
  373. box-sizing: border-box;
  374. display: flex;
  375. align-items: center;
  376. font-weight: 500;
  377. font-size: 13px;
  378. .icon {
  379. width: 16px;
  380. margin-right: 6px;
  381. cursor: pointer;
  382. }
  383. }
  384. .list-wrapper {
  385. width: 100%;
  386. // height: calc(100% - 51px);
  387. // height: 100%;
  388. .cell {
  389. display: flex;
  390. justify-content: space-between;
  391. min-height: 66px;
  392. box-sizing: border-box;
  393. padding-left: 20px;
  394. position: relative;
  395. .red-dots {
  396. position: absolute;
  397. right: 4px;
  398. top: 4px;
  399. }
  400. .img-wrapper {
  401. position: relative;
  402. margin-right: 16px;
  403. box-sizing: border-box;
  404. margin-top: 11px;
  405. .icon-avatar {
  406. width: 34px;
  407. height: 34px;
  408. border-radius: 50%;
  409. margin-right: 4px;
  410. }
  411. .icon-give {
  412. position: absolute;
  413. right: -2px;
  414. top: 19px;
  415. }
  416. }
  417. .info-wrapper {
  418. flex: 1;
  419. height: 100%;
  420. display: flex;
  421. justify-content: space-between;
  422. align-items: center;
  423. box-sizing: border-box;
  424. padding: 10px 12px 10px 0;
  425. .left {
  426. .nickname {
  427. font-weight: 500;
  428. font-size: 14px;
  429. margin-bottom: 5px;
  430. word-break: break-all;
  431. max-width: 140px;
  432. }
  433. .time {
  434. font-size: 12px;
  435. color: #B0B0B0;
  436. }
  437. }
  438. .right {
  439. display: flex;
  440. align-items: center;
  441. cursor: pointer;
  442. .msg {
  443. font-weight: 500;
  444. font-size: 14px;
  445. display: flex;
  446. align-items: center;
  447. .amount {
  448. color: #E86F00;
  449. max-width: 110px;
  450. min-width: 20px;
  451. display: inline-block;
  452. word-break: break-all;
  453. text-align: right;
  454. }
  455. .name {
  456. margin-left: 3px;
  457. max-width: 130px;
  458. line-height: 14px;
  459. font-size: 13px;
  460. word-break: break-all;
  461. }
  462. img {
  463. width: 14px;
  464. height: 14px;
  465. margin-left: 4px;
  466. }
  467. .balance {
  468. text-align: right;
  469. display: flex;
  470. align-items: center;
  471. .trx-amount-currency-info {
  472. display: flex;
  473. align-items: center;
  474. }
  475. }
  476. .balance-direction {
  477. flex-direction: column;
  478. align-items: flex-end;
  479. }
  480. .desc {
  481. text-align: right;
  482. font-weight: 400;
  483. font-size: 12px;
  484. color: #797979;
  485. margin-top: 4px;
  486. }
  487. }
  488. .icon {
  489. width: 18px;
  490. height: 24px;
  491. }
  492. }
  493. }
  494. }
  495. }
  496. }
  497. </style>