推拿小程序前端代码仓库
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

127 lines
2.5 KiB

  1. <template>
  2. <view class="page">
  3. <!-- 导航栏 -->
  4. <navbar title="积分明细" leftClick @leftClick="$utils.navigateBack" color="#fff" />
  5. <view class="tools">
  6. <uv-datetime-picker
  7. ref="datetimePicker"
  8. v-model="selectedTime"
  9. mode="year-month"
  10. confirmColor="#84A73F"
  11. @confirm="onTimeChange"
  12. ></uv-datetime-picker>
  13. <button plain class="flex btn" @click="openTimePicker">
  14. <text>{{ displaySelectedTime }}</text>
  15. <image class="btn-icon" src="../static/runningWater/icon-arrow.png" mode="widthFix"></image>
  16. </button>
  17. </view>
  18. <view class="card list">
  19. <template v-if="list.length">
  20. <view class="flex list-item"
  21. v-for="(item, index) in list"
  22. :key="index"
  23. >
  24. <image class="list-item-icon" src="../static/pointsRecord/icon-points.png" mode="widthFix"></image>
  25. <view class="list-item-info">
  26. <view class="highlight">{{ item.projectName }}</view>
  27. <view>{{ item.createTime }}</view>
  28. </view>
  29. <view class="list-item-value">{{ `+${item.money}` }}</view>
  30. </view>
  31. </template>
  32. <template v-else>
  33. <uv-empty mode="history" textSize="28rpx" iconSize="100rpx" />
  34. </template>
  35. </view>
  36. </view>
  37. </template>
  38. <script>
  39. import mixinsList from "@/mixins/list.js"
  40. export default {
  41. mixins: [mixinsList],
  42. data() {
  43. return {
  44. selectedTime: new Date(),
  45. }
  46. },
  47. computed: {
  48. displaySelectedTime() {
  49. return this.$dayjs(this.selectedTime).format("YYYY年M月")
  50. }
  51. },
  52. methods: {
  53. openTimePicker() {
  54. this.$refs.datetimePicker.open();
  55. },
  56. onTimeChange(e) {
  57. // todo
  58. console.log('--onTimeChange', e)
  59. },
  60. }
  61. }
  62. </script>
  63. <style lang="scss" scoped>
  64. .page {
  65. background-color: $uni-bg-color;
  66. min-height: 100vh;
  67. /deep/ .nav-bar__view {
  68. background-image: linear-gradient(#84A73F, #D8FF8F);
  69. }
  70. }
  71. .tools {
  72. background-color: $uni-fg-color;
  73. padding: 25rpx 42rpx;
  74. .btn {
  75. display: inline-block;
  76. border: none;
  77. color: #000000;
  78. font-size: 28rpx;
  79. line-height: 40rpx;
  80. &-icon {
  81. width: 28rpx;
  82. height: 28rpx;
  83. margin-left: 12rpx;
  84. }
  85. }
  86. }
  87. .list {
  88. margin: 9rpx 13rpx;
  89. padding: 31rpx 20rpx;
  90. &-item {
  91. padding-bottom: 19rpx;
  92. border-bottom: 1rpx solid #E0E0E0;
  93. margin-bottom: 20rpx;
  94. font-size: 28rpx;
  95. &-icon {
  96. width: 56rpx;
  97. height: auto;
  98. margin-right: 10rpx;
  99. }
  100. &-info {
  101. flex: 1;
  102. color: #949494;
  103. .highlight {
  104. color: #333333;
  105. }
  106. }
  107. &-value {
  108. color: #FF2A2A;
  109. }
  110. }
  111. }
  112. </style>