top-up.vue 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158
  1. <template>
  2. <view class="">
  3. <!-- 头部 -->
  4. <headContent>
  5. <template #left>
  6. <reverse-back />
  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. <image class="currency-icon" src="@/static/images/bi/bi_01.png" mode="aspectFit"></image>
  21. <text class="currency-name">BTC</text>
  22. </view>
  23. <view class="select-currency" @click.stop="selectCurrency">
  24. <text>请选择币种</text>
  25. <text class="iconfont">&#xe88e;</text>
  26. </view>
  27. </view>
  28. <view class="currency-code"></view>
  29. <view class="currency-btn">保存二维码</view>
  30. <view class="currency-btn currency-copy">复制地址</view>
  31. </view>
  32. </view>
  33. </template>
  34. <script>
  35. import reverseBack from "@/components/headModules/reverse-back.vue"
  36. export default {
  37. name: 'top-up',
  38. components: {
  39. reverseBack
  40. },
  41. data() {
  42. return {
  43. currencyList: [{
  44. icon: require('@/static/images/bi/bi_01.png'),
  45. name: 'BTC'
  46. },
  47. {
  48. icon: require('@/static/images/bi/bi_02.png'),
  49. name: 'BTC'
  50. },
  51. {
  52. icon: require('@/static/images/bi/bi_03.png'),
  53. name: 'BTC'
  54. },
  55. {
  56. icon: require('@/static/images/bi/bi_03.png'),
  57. name: 'BTC'
  58. }
  59. ]
  60. };
  61. },
  62. methods: {
  63. // pages/content/top-up
  64. selectCurrency(){
  65. uni.redirectTo({
  66. url: '/pages/content/select-currency'
  67. });
  68. },
  69. // 查看充值记录
  70. lookRecord(){
  71. uni.navigateTo({
  72. url:'/pages/content/charge-record'
  73. })
  74. }
  75. }
  76. }
  77. </script>
  78. <style>
  79. page {
  80. background-color: #f5f5f5;
  81. }
  82. </style>
  83. <style lang="scss" scoped>
  84. .head-record{
  85. font-size: 60rpx;
  86. }
  87. .currency-box {
  88. width: 100%;
  89. padding: 30rpx 40rpx;
  90. .currency-item {
  91. width: 100%;
  92. display: flex;
  93. justify-content: space-between;
  94. align-items: center;
  95. .currency-info {
  96. flex-shrink: 0;
  97. display: flex;
  98. align-items: center;
  99. .currency-icon {
  100. width: 46rpx;
  101. height: 46rpx;
  102. flex-shrink: 0;
  103. }
  104. .currency-name {
  105. font-size: 28rpx;
  106. padding-left: 7px;
  107. font-weight: 700;
  108. }
  109. }
  110. .select-currency{
  111. flex-shrink: 0;
  112. display: flex;
  113. align-items: center;
  114. font-size: 24rpx;
  115. .iconfont{
  116. color: #ccc;
  117. }
  118. }
  119. }
  120. .currency-code{
  121. margin: 80rpx auto 0;
  122. width: 350rpx;
  123. height: 350rpx;
  124. background-color: #fff;
  125. }
  126. .currency-btn{
  127. width: 360rpx;
  128. height: 80rpx;
  129. background-color: $Theme-Color;
  130. margin: 54rpx auto 0;
  131. border-radius: 6rpx;
  132. text-align: center;
  133. line-height: 80rpx;
  134. font-size: 30rpx;
  135. color: #fff;
  136. }
  137. .currency-copy{
  138. color: $Theme-Color;
  139. background-color: #fff;
  140. margin: 100rpx auto 0;
  141. border: 1rpx solid $Theme-Color;
  142. line-height: 78rpx;
  143. }
  144. }
  145. </style>