transfer.vue 8.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331
  1. <template>
  2. <div class="info">
  3. <v-head
  4. :title="'Transfer'"
  5. :show_more="true"
  6. :transactionsRouterParams="{
  7. backUrl: 'back'
  8. }">
  9. </v-head>
  10. <template v-if="!isSuccess">
  11. <div class="content">
  12. <div class="token">
  13. <div class="title">Network</div>
  14. <div class="box">
  15. <img :src="transChainInfo?.iconPath" alt="" />
  16. <span>{{ transChainInfo?.chainName }}</span>
  17. </div>
  18. </div>
  19. <div class="token">
  20. <div class="title">Address</div>
  21. <div class="box">
  22. <input type="text" v-model="address" placeholder="Click to enter" />
  23. </div>
  24. </div>
  25. </div>
  26. <div class="footer">
  27. <div class="left">
  28. <div class="txt">Network fee</div>
  29. <span class="money">
  30. <a-tooltip :title="feeAmountValue || 0">{{ getBit(feeAmountValue || 0) }}</a-tooltip> {{
  31. feeCurrencyInfo?.tokenSymbol }}
  32. </span>
  33. <div class="tips" v-if="showTips">Insufficient balance</div>
  34. </div>
  35. <div class="right">
  36. <div class="btn enter" @click="next" v-if="isNext">Confirm</div>
  37. <div class="btn" v-else>Confirm</div>
  38. </div>
  39. </div>
  40. </template>
  41. <template v-else>
  42. <div class="withdraw-status">
  43. <img :src="require('@/assets/svg/icon-withdraw-status.svg')" alt="" />
  44. <div>
  45. <div class="title">Submitted successfully</div>
  46. <div class="desc">
  47. Please check the status at the message tab
  48. </div>
  49. </div>
  50. </div>
  51. <div class="confirm-btn" @click="doneHandle">Done</div>
  52. </template>
  53. </div>
  54. </template>
  55. <script setup>
  56. import Report from "@/log-center/log"
  57. import { ref, onMounted, watchEffect } from 'vue'
  58. import { message } from 'ant-design-vue';
  59. import { getCurrencyInfoByCode } from '@/http/publishApi'
  60. import { transferRequest } from '@/http/nft'
  61. import { useRouter } from "vue-router";
  62. import messageCenter from "@/uilts/messageCenter";
  63. import MESSAGE_ENUM from "@/uilts/messageCenter/messageEnum";
  64. import VHead from '@/components/v-head.vue'
  65. import { getBit } from "@/uilts/help";
  66. const isNext = ref(false)
  67. const isSuccess = ref(false)
  68. const isPayment = ref(false)
  69. const showTips = ref(false)
  70. const transChainInfo = ref({})
  71. const feeAmountValue = ref(0)
  72. const feeCurrencyInfo = ref({})
  73. const address = ref('')
  74. const nftId = ref('')
  75. const router = useRouter()
  76. const getCurrentyInfo = (data) => {
  77. getCurrencyInfoByCode({
  78. params: {
  79. currencyCode: data?.currencyCode
  80. }
  81. }).then(res => {
  82. let { code, data } = res;
  83. if (code === 0) {
  84. isPayment.value = Number(data?.balance) >= Number(feeAmountValue.value)
  85. showTips.value = Number(data?.balance) < Number(feeAmountValue.value)
  86. }
  87. })
  88. }
  89. const next = () => {
  90. transferRequest({
  91. params: {
  92. nftItemId: nftId.value,
  93. receiveAddress: address.value
  94. }
  95. }).then(res => {
  96. let { code } = res;
  97. let transfer;
  98. if (code === 0) {
  99. isSuccess.value = true;
  100. transfer = 'success'
  101. } else if (code === 5302) {
  102. transfer = 'fail'
  103. message.error(`NFT transfer is under system maintenance, try again in two or three hours.`);
  104. } else {
  105. transfer = 'fail'
  106. message.error(`Transfer failed, please try again`);
  107. }
  108. // report
  109. Report.reportLog({
  110. pageSource: Report.pageSource.denetNftTransferPage,
  111. businessType: Report.businessType.buttonClick,
  112. objectType: Report.objectType.confirm_transfer_button,
  113. }, {
  114. transfer: transfer
  115. });
  116. })
  117. }
  118. const doneHandle = () => {
  119. messageCenter.send({
  120. info: {
  121. actionType: MESSAGE_ENUM.IFRAME_SHOW_FOOTER_MENU
  122. },
  123. data: {
  124. showMenu: true,
  125. }
  126. })
  127. router.push({ name: 'navNftIndex' })
  128. }
  129. watchEffect(() => {
  130. isNext.value = address.value !== '' && isPayment.value
  131. })
  132. onMounted(() => {
  133. let { params = '{}' } = router.currentRoute.value.query;
  134. let { chainInfo, nftItemId, transferFeeAmountValue, transferFeeCurrencyInfo } = JSON.parse(params);
  135. // set
  136. nftId.value = nftItemId;
  137. transChainInfo.value = chainInfo
  138. feeAmountValue.value = transferFeeAmountValue
  139. feeCurrencyInfo.value = transferFeeCurrencyInfo
  140. getCurrentyInfo(feeCurrencyInfo.value)
  141. // report
  142. Report.reportLog({
  143. pageSource: Report.pageSource.denetNftTransferPage,
  144. businessType: Report.businessType.pageView,
  145. });
  146. })
  147. </script>
  148. <style lang="scss" scoped>
  149. .info {
  150. position: relative;
  151. height: 100%;
  152. .content {
  153. height: calc(100% - 48px - 80px);
  154. overflow: auto;
  155. padding: 13px 16px 0 13px;
  156. .token {
  157. margin-bottom: 20px;
  158. .title {
  159. font-weight: 500;
  160. font-size: 12px;
  161. margin-bottom: 6px;
  162. color: #8B8B8B;
  163. }
  164. .box {
  165. border: 1px solid #DBDBDB;
  166. border-radius: 8px;
  167. height: 44px;
  168. display: flex;
  169. align-items: center;
  170. padding: 0 15px 0 10px;
  171. display: flex;
  172. flex-wrap: nowrap;
  173. justify-content: space-between;
  174. img {
  175. width: 20px;
  176. height: 20px;
  177. }
  178. .up {
  179. width: 13px;
  180. height: 12px;
  181. cursor: pointer;
  182. }
  183. input {
  184. outline: none;
  185. border: 0;
  186. flex: 1;
  187. height: 18px;
  188. padding: 0 6px;
  189. font-weight: 500;
  190. font-size: 15px;
  191. &::placeholder {
  192. color: #B8B8B8;
  193. }
  194. }
  195. input::-webkit-outer-spin-button,
  196. input::-webkit-inner-spin-button {
  197. -webkit-appearance: none;
  198. }
  199. input[type='number'] {
  200. -moz-appearance: textfield;
  201. }
  202. span {
  203. flex: 1;
  204. margin-left: 6px;
  205. font-size: 14px;
  206. font-weight: 500;
  207. }
  208. }
  209. }
  210. }
  211. .footer {
  212. z-index: 11;
  213. background: #fff;
  214. border-top: 1px solid #DBDBDB;
  215. bottom: 0;
  216. height: 80px;
  217. display: flex;
  218. position: absolute;
  219. justify-content: space-between;
  220. width: 100%;
  221. bottom: 0;
  222. align-items: center;
  223. .left {
  224. margin-left: 16px;
  225. .txt {
  226. color: #9D9D9D;
  227. font-weight: 400;
  228. font-size: 12px;
  229. }
  230. .money {
  231. color: #000000;
  232. margin-right: auto;
  233. font-size: 15px;
  234. font-weight: bold;
  235. }
  236. .tips {
  237. color: #FF0000;
  238. font-weight: 500;
  239. font-size: 12px;
  240. }
  241. }
  242. .right {
  243. margin-right: 16px;
  244. .btn {
  245. cursor: pointer;
  246. width: 140px;
  247. height: 46px;
  248. line-height: 46px;
  249. text-align: center;
  250. font-weight: 600;
  251. font-size: 18px;
  252. color: #FFFFFF;
  253. background: #D2D2D2;
  254. border-radius: 100px;
  255. }
  256. .enter {
  257. background: #1D9BF0;
  258. }
  259. }
  260. }
  261. }
  262. .withdraw-status {
  263. text-align: center;
  264. img {
  265. margin-top: 40px;
  266. margin-bottom: 34px;
  267. }
  268. .title {
  269. font-weight: 500;
  270. font-size: 20px;
  271. margin-bottom: 10px;
  272. }
  273. .desc {
  274. font-size: 15px;
  275. color: rgba($color: #000000, $alpha: 0.5);
  276. }
  277. }
  278. .confirm-btn {
  279. width: 335px;
  280. height: 60px;
  281. text-align: center;
  282. line-height: 60px;
  283. border-radius: 100px;
  284. background: #1D9BF0;
  285. font-weight: 600;
  286. font-size: 18px;
  287. color: #fff;
  288. position: absolute;
  289. left: 50%;
  290. bottom: 35px;
  291. transform: translateX(-50%);
  292. display: flex;
  293. align-items: center;
  294. justify-content: center;
  295. cursor: pointer;
  296. }
  297. </style>