推拿小程序前端代码仓库
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.

135 lines
2.7 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="queryParams.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.title }}</view>
  27. <view>{{ item.createTime }}</view>
  28. </view>
  29. <view class="list-item-value">{{ `+${item.score}` }}</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. queryParams: {
  45. pageNo: 1,
  46. pageSize: 10,
  47. selectedTime: new Date(),
  48. },
  49. mixinsListApi: 'queryScoreList',
  50. }
  51. },
  52. computed: {
  53. displaySelectedTime() {
  54. return this.$dayjs(this.queryParams.selectedTime).format("YYYY年M月")
  55. }
  56. },
  57. methods: {
  58. openTimePicker() {
  59. this.$refs.datetimePicker.open();
  60. },
  61. onTimeChange(e) {
  62. this.queryParams.selectedTime = e.value
  63. this.queryParams.pageNo = 1
  64. this.queryParams.pageSize = 10
  65. this.getData()
  66. },
  67. }
  68. }
  69. </script>
  70. <style lang="scss" scoped>
  71. .page {
  72. background-color: $uni-bg-color;
  73. min-height: 100vh;
  74. /deep/ .nav-bar__view {
  75. background-image: linear-gradient(#84A73F, #D8FF8F);
  76. }
  77. }
  78. .tools {
  79. background-color: $uni-fg-color;
  80. padding: 25rpx 42rpx;
  81. display: flex;
  82. .btn {
  83. display: inline-block;
  84. border: none;
  85. color: #000000;
  86. font-size: 28rpx;
  87. line-height: 40rpx;
  88. &-icon {
  89. width: 28rpx;
  90. height: 28rpx;
  91. margin-left: 12rpx;
  92. }
  93. }
  94. }
  95. .list {
  96. margin: 9rpx 13rpx;
  97. padding: 31rpx 20rpx;
  98. &-item {
  99. padding-bottom: 19rpx;
  100. border-bottom: 1rpx solid #E0E0E0;
  101. margin-bottom: 20rpx;
  102. font-size: 28rpx;
  103. &-icon {
  104. width: 56rpx;
  105. height: auto;
  106. margin-right: 10rpx;
  107. }
  108. &-info {
  109. flex: 1;
  110. color: #949494;
  111. .highlight {
  112. color: #333333;
  113. }
  114. }
  115. &-value {
  116. color: #FF2A2A;
  117. }
  118. }
  119. }
  120. </style>