charge-record.vue 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  1. <template>
  2. <view class="record-page">
  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. </headContent>
  14. <!-- &#xe636; -->
  15. <view class="record-type">
  16. <view class="type-info" @click.stop="openSelectCurrency()">
  17. <text class="type-text">{{ currencyVal || '全部币种'}}</text>
  18. <text class="type-icon iconfont ">&#xeb6d;</text>
  19. </view>
  20. <view @click.stop="openSelectTime()" class="condition-icon iconfont">&#xe611;</view>
  21. </view>
  22. <selectCurrency ref="selectCurrency" :currencyVal.sync="currencyVal"/>
  23. <selectTime ref="selectTimeRef" />
  24. </view>
  25. </template>
  26. <script>
  27. import reverseBack from "@/components/headModules/reverse-back.vue"
  28. import selectCurrency from "./components/select-currency.vue"
  29. import selectTime from "./components/select-time.vue"
  30. export default {
  31. name: 'charge-record',
  32. components: {
  33. reverseBack,
  34. selectCurrency,
  35. selectTime
  36. },
  37. data() {
  38. return {
  39. // share
  40. currencyVal:undefined
  41. }
  42. },
  43. methods: {
  44. openSelectCurrency(){
  45. this.$nextTick(() => {
  46. this.$refs.selectCurrency.open();
  47. })
  48. },
  49. openSelectTime(){
  50. }
  51. }
  52. }
  53. </script>
  54. <style lang="scss" scoped>
  55. .record-type{
  56. width: 100%;
  57. height: 90rpx;
  58. border: 1rpx solid $border-color;
  59. padding: 0 $pages-padding;
  60. border-left: none;
  61. border-right: none;
  62. display: flex;
  63. justify-content: space-between;
  64. align-items: center;
  65. padding-bottom: 10rpx;
  66. .type-info{
  67. width: 220rpx;
  68. height: 60rpx;
  69. background-color: #f5f5f5;
  70. display: flex;
  71. justify-content: space-between;
  72. align-items: center;
  73. font-size: 24rpx;
  74. padding: 0 20rpx;
  75. .type-icon{
  76. font-size: 22rpx;
  77. color: #ccc;
  78. }
  79. }
  80. .condition-icon{
  81. color: #666;
  82. // font-size: rpx;
  83. }
  84. }
  85. </style>