select-currency.vue 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
  1. <template>
  2. <view class="">
  3. <!-- 头部 -->
  4. <headContent>&#xe642;
  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. <block v-for="(item , index) in currencyList" :key="`currency_${index}`">
  19. <view class="currency-item" @click.stop="topUp(item.name)">
  20. <image class="currency-icon" :src="item.icon" mode="aspectFit"></image>
  21. <text class="currency-name">{{ item.name }}</text>
  22. </view>
  23. </block>
  24. </view>
  25. </view>
  26. </template>
  27. <script>
  28. import reverseBack from "@/components/headModules/reverse-back.vue"
  29. export default {
  30. name: 'selectCurrency',
  31. components: {
  32. reverseBack
  33. },
  34. data() {
  35. return {
  36. currencyList: [{
  37. icon: require('@/static/images/bi/bi_01.png'),
  38. name: 'BTC'
  39. },
  40. {
  41. icon: require('@/static/images/bi/bi_02.png'),
  42. name: 'BTC'
  43. },
  44. {
  45. icon: require('@/static/images/bi/bi_03.png'),
  46. name: 'BTC'
  47. },
  48. {
  49. icon: require('@/static/images/bi/bi_03.png'),
  50. name: 'BTC'
  51. }
  52. ]
  53. };
  54. },
  55. methods:{
  56. // pages/content/top-up
  57. topUp(name){
  58. uni.navigateTo({
  59. url:`/pages/content/top-up?name=${name}`
  60. })
  61. },
  62. // 查看充值记录
  63. lookRecord(){
  64. uni.navigateTo({
  65. url:'/pages/content/charge-record'
  66. })
  67. }
  68. }
  69. }
  70. </script>
  71. <style>
  72. page {
  73. background-color: #f5f5f5;
  74. }
  75. </style>
  76. <style lang="scss" scoped>
  77. .head-record{
  78. font-size: 60rpx;
  79. }
  80. .currency-box {
  81. width: 100%;
  82. padding: 40rpx $pages-padding 0;
  83. .currency-item{
  84. width: 100%;
  85. display: flex;
  86. align-items: center;
  87. padding: 30rpx 0;
  88. .currency-icon{
  89. width: 46rpx;
  90. height: 46rpx;
  91. flex-shrink: 0;
  92. }
  93. .currency-name{
  94. font-size: 28rpx;
  95. padding-left: 7px;
  96. font-weight: 700;
  97. }
  98. }
  99. // <view class="currency-box">
  100. // <block v-for="(item , index) in currencyList" :key="`currency_${index}`">
  101. // <view class="currency-item">
  102. // <image class="currency-icon" :src="item.icon" mode="aspectFit"></image>
  103. // <text class="currency-name">{{ item.name }}</text>
  104. // </view>
  105. // </block>
  106. // </view>
  107. }
  108. </style>