commission-log.vue 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189
  1. <!-- 分销明细 -->
  2. <template>
  3. <view class="distribution-log-wrap">
  4. <view class="header-box">
  5. <image
  6. class="header-bg"
  7. :src="sheep.$url.static('/assets/addons/shopro/uniapp/commission/title2.png')"
  8. />
  9. <view class="ss-flex header-title">
  10. <view class="title">{{$t('commission.log.news')}}</view>
  11. <text class="cicon-forward"></text>
  12. </view>
  13. </view>
  14. <scroll-view
  15. scroll-y="true"
  16. @scrolltolower="loadmore"
  17. class="scroll-box log-scroll"
  18. scroll-with-animation="true"
  19. >
  20. <view v-if="state.pagination.data">
  21. <view
  22. class="log-item-box ss-flex ss-row-between"
  23. v-for="item in state.pagination.data"
  24. :key="item.id"
  25. >
  26. <view class="log-item-wrap">
  27. <view class="log-item ss-flex ss-ellipsis-1 ss-col-center">
  28. <view class="ss-flex ss-col-center">
  29. <image
  30. v-if="item.oper_type === 'user'"
  31. class="log-img"
  32. :src="sheep.$url.cdn(item.oper?.avatar)"
  33. mode="aspectFill"
  34. ></image>
  35. <image
  36. v-else-if="item.oper_type === 'admin'"
  37. class="log-img"
  38. :src="
  39. sheep.$url.static('/assets/addons/shopro/uniapp/avatar/default_user.png')
  40. "
  41. mode="aspectFill"
  42. ></image>
  43. <image
  44. v-else
  45. class="log-img"
  46. :src="sheep.$url.static('/assets/addons/shopro/uniapp/avatar/notice.png')"
  47. mode="aspectFill"
  48. ></image>
  49. </view>
  50. <view class="log-text ss-ellipsis-1">{{ item.remark }}</view>
  51. </view>
  52. </view>
  53. <text class="log-time">{{ dayjs(item.createtime).fromNow() }}</text>
  54. </view>
  55. </view>
  56. <!-- 加载更多 -->
  57. <uni-load-more
  58. v-if="state.pagination.total > 0"
  59. :status="state.loadStatus"
  60. color="#333333"
  61. @tap="loadmore"
  62. />
  63. </scroll-view>
  64. </view>
  65. </template>
  66. <script setup>
  67. import sheep from '@/sheep';
  68. import { computed, reactive } from 'vue';
  69. import _ from 'lodash';
  70. import dayjs from 'dayjs';
  71. const state = reactive({
  72. loadStatus: '',
  73. pagination: {
  74. data: [],
  75. current_page: 1,
  76. total: 1,
  77. last_page: 1,
  78. },
  79. });
  80. async function getLog(page = 1) {
  81. const res = await sheep.$api.commission.log({
  82. page,
  83. });
  84. if (res.code === 1) {
  85. let list = _.concat(state.pagination.data, res.data.data);
  86. state.pagination = {
  87. ...res.data,
  88. data: list,
  89. };
  90. if (state.pagination.current_page < state.pagination.last_page) {
  91. state.loadStatus = 'more';
  92. } else {
  93. state.loadStatus = 'noMore';
  94. }
  95. }
  96. }
  97. getLog();
  98. // 加载更多
  99. function loadmore() {
  100. if (state.loadStatus !== 'noMore') {
  101. getLog(state.pagination.current_page + 1);
  102. }
  103. }
  104. </script>
  105. <style lang="scss" scoped>
  106. .distribution-log-wrap {
  107. width: 690rpx;
  108. margin: 0 auto;
  109. margin-bottom: 20rpx;
  110. border-radius: 12rpx;
  111. z-index: 3;
  112. position: relative;
  113. .header-box {
  114. width: 690rpx;
  115. height: 76rpx;
  116. position: relative;
  117. .header-bg {
  118. width: 690rpx;
  119. height: 76rpx;
  120. }
  121. .header-title {
  122. position: absolute;
  123. left: 20rpx;
  124. top: 24rpx;
  125. }
  126. .title {
  127. font-size: 28rpx;
  128. font-weight: 500;
  129. color: #ffffff;
  130. line-height: 30rpx;
  131. }
  132. .cicon-forward {
  133. font-size: 30rpx;
  134. font-weight: 400;
  135. color: #ffffff;
  136. line-height: 30rpx;
  137. }
  138. }
  139. .log-scroll {
  140. height: 600rpx;
  141. background: #fdfae9;
  142. padding: 10rpx 20rpx 0;
  143. box-sizing: border-box;
  144. border-radius: 0 0 12rpx 12rpx;
  145. .log-item-box {
  146. margin-bottom: 20rpx;
  147. .log-time {
  148. // margin-left: 30rpx;
  149. text-align: right;
  150. font-size: 24rpx;
  151. font-family: OPPOSANS;
  152. font-weight: 400;
  153. color: #c4c4c4;
  154. }
  155. }
  156. .loadmore-wrap {
  157. // line-height: 80rpx;
  158. }
  159. .log-item {
  160. // background: rgba(#ffffff, 0.2);
  161. border-radius: 24rpx;
  162. padding: 6rpx 20rpx 6rpx 12rpx;
  163. .log-img {
  164. width: 40rpx;
  165. height: 40rpx;
  166. border-radius: 50%;
  167. margin-right: 10rpx;
  168. }
  169. .log-text {
  170. max-width: 480rpx;
  171. font-size: 24rpx;
  172. font-weight: 500;
  173. color: #333333;
  174. }
  175. }
  176. }
  177. }
  178. </style>