pointsDetails.vue 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136
  1. <template>
  2. <view class="points-details">
  3. <navbar ref="navbar" :config="config" backColor="#999999"></navbar>
  4. <view class="middle">
  5. <view class="item" v-for="(item, index) in pointsList" :key="index" >
  6. <view class="left">
  7. <view class="day">
  8. <!-- <text v-if="item.model_type == 0">作品</text>
  9. <text v-if="item.model_type == 1">文章</text>
  10. <text v-if="item.model_type == 2">商品</text>
  11. <text v-if="item.model_type == 3">订单</text>
  12. <text v-if="item.model_type == 4">维权订单</text>
  13. <text v-if="item.inner_mode == 1">被浏览</text>
  14. <text v-if="item.inner_mode == 2">被点赞</text>
  15. <text v-if="item.inner_mode == 3">被评论</text>
  16. <text v-if="item.inner_mode == 4">被分享</text>
  17. <text v-if="item.inner_mode == 5">浏览</text>
  18. <text v-if="item.inner_mode == 6">点赞</text>
  19. <text v-if="item.inner_mode == 7">评论</text>
  20. <text v-if="item.inner_mode == 8">分享</text>
  21. <text v-if="item.inner_mode == 9">购买商品</text>
  22. <text v-if="item.inner_mode == 10">积分商品支付过期退还</text>
  23. <text v-if="item.inner_mode == 11">取消订单退还</text> -->
  24. <text>{{item.mode}}</text>
  25. </view>
  26. <view class="time">
  27. {{ item.create_time }}
  28. </view>
  29. </view>
  30. <view class="right" :class="{red:item.bill_type==1}">
  31. {{item.bill_type==1?'+':'-'}}{{item.value}}
  32. </view>
  33. </view>
  34. <loadMore v-if="pointsList.length>0" :status="status"></loadMore>
  35. <nodata v-else :config="{ top: 1, content: '暂无数据~' }"></nodata>
  36. </view>
  37. </view>
  38. </template>
  39. <script>
  40. import {
  41. detailedInfo
  42. } from "@/api/notice.js";
  43. export default {
  44. data() {
  45. return {
  46. config: {
  47. back: true, //false是tolbar页面 是则不写
  48. title: "积分明细",
  49. color: "#1A1A1A",
  50. //背景颜色;参数一:透明度(0-1);参数二:背景颜色(array则为线性渐变,string为单色背景)
  51. backgroundColor: [1, "#FFFFFF"],
  52. statusBarFontColor: "#1A1A1A",
  53. },
  54. pointsList: [],
  55. params: {
  56. page: 1,
  57. limit: 10
  58. },
  59. status: 'more', //more|loading|noMore
  60. };
  61. },
  62. onLoad() {
  63. this.pointsList = [];
  64. this.getMydetailed();
  65. },
  66. onReachBottom() {
  67. this.params.page++
  68. this.getMydetailed()
  69. },
  70. onPullDownRefresh() {
  71. this.params.page = 1
  72. this.pointsList = []
  73. this.getMydetailed()
  74. },
  75. methods: {
  76. getMydetailed() {
  77. this.$http.get(detailedInfo, this.params).then((res) => {
  78. if (res && res.code == 200) {
  79. uni.stopPullDownRefresh()
  80. this.pointsList = this.pointsList.concat(res.page.list);
  81. if (res.page.totalPage <= res.page.currPage) {
  82. this.status = 'noMore'
  83. } else {
  84. this.status = 'more'
  85. }
  86. }
  87. });
  88. },
  89. },
  90. };
  91. </script>
  92. <style lang="scss" scoped>
  93. .middle {
  94. padding: 0 30rpx;
  95. .item {
  96. display: flex;
  97. align-items: center;
  98. justify-content: space-between;
  99. border-bottom: 1rpx solid #e6e6e6;
  100. padding-bottom: 36rpx;
  101. .left {
  102. .day {
  103. // opacity: 0.9;
  104. margin: 34rpx 0 18rpx 0;
  105. font-size: 28rpx;
  106. color: #1a1a1a;
  107. line-height: 30rpx;
  108. font-weight: 500;
  109. }
  110. .time {
  111. font-size: 24rpx;
  112. color: #999999;
  113. font-weight: 400;
  114. }
  115. }
  116. .right {
  117. font-size: 28rpx;
  118. font-weight: 500;
  119. }
  120. .red{
  121. color: #ff0000;
  122. }
  123. }
  124. .item:nth-last-child(2){
  125. border-bottom: none;
  126. }
  127. }
  128. </style>