top-up.vue 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311
  1. <template>
  2. <view class="">
  3. <!-- 头部 -->
  4. <headContent>
  5. <template #left>
  6. <reverse-back path="pages/content/top-up" />
  7. </template>
  8. <template #content>
  9. <view class="haed-title">
  10. 充币
  11. </view>
  12. </template>
  13. <template #right>
  14. <view @click.stop="lookRecord()" class="head-record iconfont">&#xe642;</view>
  15. </template>
  16. </headContent>
  17. <view class="currency-box">
  18. <view class="currency-item">
  19. <view class="currency-info">
  20. <template v-if="biInfo">
  21. <image class="currency-icon" :src="biInfo.logo" mode="aspectFit"></image>
  22. <text class="currency-name">{{ biInfo.name|| biInfo.currency_name }}</text>
  23. </template>
  24. </view>
  25. <view class="select-currency" @click.stop="selectCurrency">
  26. <text>请选择币种</text>
  27. <text class="iconfont">&#xe8b5;</text>
  28. </view>
  29. </view>
  30. <view class="link-name" v-if="linkVal">
  31. <view class="link-lable">链名称</view>
  32. <view class="link-btns">
  33. <text @click.stop="setCode('erc20')"
  34. :class="['link-btn' , linkLable === 'erc20' ? 'active-link-btn' : '']">ERC20</text>
  35. <text @click.stop="setCode('trc20')"
  36. :class="['link-btn' , linkLable === 'trc20' ? 'active-link-btn' : '']">TRC20</text>
  37. </view>
  38. </view>
  39. <view class="currency-code">
  40. <!-- https://ext.dcloud.net.cn/plugin?id=39 -->
  41. <tki-qrcode ref="qrcode" :size="350" :showLoading="false" :val="val" />
  42. </view>
  43. <view class="currency-btn" @click.stop="saveCode()">保存二维码</view>
  44. <view class="link-val">
  45. {{ val }}
  46. </view>
  47. <view class="currency-btn currency-copy" @click.stop="setCopy(val)">复制地址</view>
  48. </view>
  49. </view>
  50. </template>
  51. <script>
  52. import {
  53. Api_getTopUp
  54. } from "@/api/index.js"
  55. import reverseBack from "@/components/headModules/reverse-back.vue"
  56. export default {
  57. name: 'top-up',
  58. components: {
  59. reverseBack
  60. },
  61. data() {
  62. return {
  63. biInfo: null,
  64. linkLable: 'erc20',
  65. val: '',
  66. linkVal: null
  67. };
  68. },
  69. onLoad(opt) {
  70. const key = opt?.key || '';
  71. this.biInfo = this.$getStorageSync('select')[key];
  72. this.getTopUp()
  73. },
  74. methods: {
  75. setBiInfo(e){
  76. console.log('setBiInfo' , e)
  77. this.biInfo = e;
  78. this.getTopUp()
  79. },
  80. getTopUp() {
  81. Api_getTopUp({
  82. currency: this.biInfo.currency_id || this.biInfo.id
  83. }).then(res => {
  84. if (this.biInfo.id === 3) {
  85. this.linkVal = res;
  86. this.val = null
  87. } else {
  88. this.val = res;
  89. this.linkVal = null
  90. }
  91. this.makeCode()
  92. }).catch(err => {
  93. }).finally(() => {
  94. })
  95. },
  96. setCode(item) {
  97. this.linkLable = item;
  98. this.val = this.linkVal[item]
  99. this.makeCode()
  100. },
  101. makeCode() {
  102. this.$nextTick(() => {
  103. this.$refs.qrcode._makeCode()
  104. })
  105. },
  106. saveCode() {
  107. // #ifndef H5
  108. this.$nextTick(() => {
  109. this.$refs.qrcode._saveCode()
  110. })
  111. // #endif
  112. },
  113. setCopy(val) {
  114. if (val) {
  115. uni.setClipboardData({
  116. data: val,
  117. success: function() {
  118. uni.showToast({
  119. icon: "none",
  120. title: '复制成功'
  121. })
  122. }
  123. });
  124. }
  125. },
  126. // pages/content/top-up
  127. selectCurrency() {
  128. const pages = getCurrentPages()
  129. console.log('pages = ', pages)
  130. if (pages.length > 1 && pages[pages.length - 1].route === 'pages/content/select-currency') {
  131. uni.navigateBack()
  132. } else {
  133. uni.navigateTo({
  134. url: "/pages/content/select-currency?type=recharge"
  135. });
  136. }
  137. },
  138. // 查看充值记录
  139. lookRecord() {
  140. const pages = getCurrentPages()
  141. if (pages.length > 2 && pages[pages.length - 2].route === 'pages/content/charge-record') {
  142. uni.navigateBack({
  143. delta: 1
  144. })
  145. } else {
  146. uni.navigateTo({
  147. url: "/pages/content/charge-record"
  148. });
  149. };
  150. }
  151. }
  152. }
  153. </script>
  154. <style>
  155. page {
  156. background-color: #F6F7FB;
  157. }
  158. </style>
  159. <style lang="scss" scoped>
  160. .head-record {
  161. font-size: 60rpx;
  162. }
  163. .currency-box {
  164. width: 100%;
  165. padding: 30rpx 40rpx;
  166. .currency-item {
  167. width: 100%;
  168. display: flex;
  169. justify-content: space-between;
  170. align-items: center;
  171. .currency-info {
  172. flex-shrink: 0;
  173. display: flex;
  174. align-items: center;
  175. .currency-icon {
  176. width: 46rpx;
  177. height: 46rpx;
  178. flex-shrink: 0;
  179. }
  180. .currency-name {
  181. font-size: 28rpx;
  182. padding-left: 7px;
  183. font-weight: 700;
  184. }
  185. }
  186. .select-currency {
  187. flex-shrink: 0;
  188. display: flex;
  189. align-items: center;
  190. font-size: 24rpx;
  191. .iconfont {
  192. color: #ccc;
  193. transform: rotateY(180deg);
  194. }
  195. }
  196. }
  197. .currency-code {
  198. margin: 36rpx auto 0;
  199. width: 350rpx;
  200. height: 350rpx;
  201. background-color: #fff;
  202. }
  203. .currency-btn {
  204. width: 360rpx;
  205. height: 80rpx;
  206. background-color: $Theme-Color;
  207. margin: 54rpx auto 0;
  208. border-radius: 6rpx;
  209. text-align: center;
  210. line-height: 80rpx;
  211. font-size: 30rpx;
  212. color: #fff;
  213. }
  214. .link-val {
  215. width: 100%;
  216. min-height: 103rpx;
  217. padding: 35rpx 0;
  218. font-size: 24rpx;
  219. font-family: PingFang SC, PingFang SC-Regular;
  220. font-weight: 400;
  221. text-align: center;
  222. color: #1a1a1a;
  223. line-height: 33rpx;
  224. }
  225. .currency-copy {
  226. color: $Theme-Color;
  227. background-color: #fff;
  228. margin: 0 auto;
  229. border: 1rpx solid $Theme-Color;
  230. line-height: 78rpx;
  231. }
  232. }
  233. .link-name {
  234. width: 100%;
  235. padding-top: 40rpx;
  236. font-size: 24rpx;
  237. font-family: PingFang SC, PingFang SC-Bold;
  238. font-weight: 700;
  239. .link-lable {
  240. // width: 72px;
  241. // height: 33px;
  242. color: #1a1a1a;
  243. line-height: 1.2;
  244. }
  245. .link-btns {
  246. width: 100%;
  247. padding-top: 16rpx;
  248. .link-btn {
  249. display: inline-block;
  250. width: 180rpx;
  251. height: 72rpx;
  252. background: #f6f5f3;
  253. border-radius: 8px;
  254. text-align: center;
  255. line-height: 70rpx;
  256. font-size: 28rpx;
  257. font-weight: 400;
  258. color: #666666;
  259. border-radius: 8rpx;
  260. border: 1rpx solid #f6f5f3;
  261. &:nth-child(n + 2) {
  262. margin-left: 20rpx;
  263. }
  264. }
  265. .active-link-btn {
  266. background: #ffffff;
  267. border-color: #05c175;
  268. color: #FFBA6A;
  269. }
  270. }
  271. }
  272. // <view class="link-name">
  273. // <view class="link-lable">链名称</view>
  274. // <view class="link-btns">
  275. // <text class="link-btn">ERC20</text>
  276. // <text class="link-btn">TRC20</text>
  277. // </view>
  278. // </view>
  279. </style>