select-currency.vue 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158
  1. <template>
  2. <uni-popup ref="popupRef" type="bottom">
  3. <view class="popup-box">
  4. <view class="popup-title">
  5. <text class="title-side"></text>
  6. <text class="title-name">选择币种</text>
  7. <text class="title-side iconfont">&#xeca0;</text>
  8. </view>
  9. <view class="currency-content">
  10. <view :class="['currency-item' , activeCurrencyVal === undefined ? 'active-currency-item' : '']"
  11. @click.stop="activeCurrency()">
  12. <text class="currency-icon all-currency"></text>
  13. <!-- <image class="currency-icon" :src="item.icon" mode="aspectFit"></image> -->
  14. <text class="currency-text">全部币种</text>
  15. <text v-show="activeCurrencyVal === undefined" class="active-currency iconfont">&#xe627;</text>
  16. </view>
  17. <block v-for="item in currencyList">
  18. <view :class="['currency-item' , activeCurrencyVal === item.name ? 'active-currency-item' : '']"
  19. @click.stop="activeCurrency(item.name)">
  20. <image class="currency-icon" :src="item.icon" mode="aspectFit"></image>
  21. <text class="currency-text">{{ item.name }}</text>
  22. <text v-show="activeCurrencyVal === item.name" class="active-currency iconfont">&#xe627;</text>
  23. </view>
  24. </block>
  25. </view>
  26. </view>
  27. </uni-popup>
  28. </template>
  29. <script>
  30. export default {
  31. props: {
  32. currencyVal: {
  33. type: [String],
  34. default: undefined
  35. }
  36. },
  37. data() {
  38. return {
  39. activeCurrencyVal: undefined,
  40. currencyList: [{
  41. icon: require('@/static/images/bi/bi_01.png'),
  42. name: 'BTC'
  43. },
  44. {
  45. icon: require('@/static/images/bi/bi_02.png'),
  46. name: 'ETH'
  47. },
  48. {
  49. icon: require('@/static/images/bi/bi_03.png'),
  50. name: 'LTC'
  51. },
  52. {
  53. icon: require('@/static/images/bi/bi_03.png'),
  54. name: 'USDT'
  55. }
  56. ]
  57. };
  58. },
  59. watch: {
  60. currencyVal: {
  61. handler(newVal) {
  62. this.activeCurrencyVal = newVal || undefined
  63. },
  64. immediate: true,
  65. deep: true
  66. }
  67. },
  68. mounted() {
  69. // this.$refs.popupRef.open()
  70. },
  71. methods: {
  72. open() {
  73. this.$nextTick(() => {
  74. this.$refs.popupRef.open();
  75. })
  76. },
  77. activeCurrency(name = undefined) {
  78. this.activeCurrencyVal = name;
  79. this.$refs.popupRef.close();
  80. this.$emit("update:currencyVal", this.activeCurrencyVal);
  81. }
  82. }
  83. }
  84. </script>
  85. <style lang="scss" scoped>
  86. .popup-box {
  87. width: 100%;
  88. background-color: #Fff;
  89. border-radius: 50rpx 50rpx 0px 0px;
  90. .popup-title {
  91. width: 100%;
  92. height: 113rpx;
  93. border-radius: 50rpx 50rpx 0px 0px;
  94. background-color: #F7F7F7 !important;
  95. display: flex;
  96. justify-content: space-between;
  97. align-items: center;
  98. padding: 0 40rpx;
  99. font-weight: 700;
  100. .title-side {
  101. flex-shrink: 0;
  102. font-size: 28rpx;
  103. width: 40rpx;
  104. height: 100%;
  105. line-height: 113rpx;
  106. color: #666;
  107. font-weight: 400;
  108. }
  109. }
  110. .currency-content {
  111. width: 100%;
  112. .currency-item {
  113. padding: 0 $pages-padding;
  114. display: flex;
  115. align-items: center;
  116. justify-content: space-between;
  117. height: 80rpx;
  118. border-bottom: 1rpx solid $border-color;
  119. .all-currency {
  120. background-color: #ccc;
  121. border-radius: 50%;
  122. }
  123. .currency-icon {
  124. width: 36rpx;
  125. height: 36rpx;
  126. border-radius: 50%;
  127. }
  128. .currency-text {
  129. flex: 1;
  130. padding: 0 20rpx;
  131. font-size: 26rpx;
  132. }
  133. .active-currency {
  134. font-size: 34rpx;
  135. color: $Theme-Color;
  136. }
  137. }
  138. .active-currency-item {
  139. color: $Theme-Color;
  140. }
  141. }
  142. }
  143. </style>