userCenterIntegralSubsidiary.vue 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190
  1. <template>
  2. <div class="userCenterIntegralSubsidiary">
  3. <div class="search">
  4. <span :class="{active:params.search1==='全部'}"
  5. @click="activeChange('全部')">{{ $i18n.locale == 'zh' ? '全部' : 'All' }}</span>
  6. <span :class="{active:params.search1==='获取'}"
  7. @click="activeChange('获取')">{{ $i18n.locale == 'zh' ? '获取' : 'Gain' }}</span>
  8. <span :class="{active:params.search1==='支出'}"
  9. @click="activeChange('支出')">{{ $i18n.locale == 'zh' ? '支出' : 'Expend' }}</span>
  10. </div>
  11. <div class="list">
  12. <el-table
  13. :data="userTaskComplete"
  14. v-loading="loading"
  15. style="width: 100%"
  16. :header-cell-style="{backgroundColor:'#f8f8f8'}">
  17. <el-table-column
  18. align="center"
  19. :label="$i18n.locale==='zh'?'变化类型':'Change The Type'"
  20. width="160">
  21. <template slot-scope="scope">
  22. <span>{{
  23. scope.row.pointType == 1 ? $i18n.locale == 'zh' ? '获取' : 'Gain' : $i18n.locale == 'zh' ? '支出' : 'Expend'
  24. }}</span>
  25. </template>
  26. </el-table-column>
  27. <el-table-column
  28. align="center"
  29. :label="$i18n.locale==='zh'?'积分变化':'Integral Change'"
  30. width="130">
  31. <template slot-scope="scope">
  32. <span
  33. :style="scope.row.pointType==1?'color:#d61016;':'color:#80b738;'">{{
  34. scope.row.pointType == 1 ? '+' : '-'
  35. }}</span>
  36. <span
  37. :style="scope.row.pointType==1?'color:#d61016;':'color:#80b738;'">{{
  38. scope.row.point
  39. }}</span>
  40. </template>
  41. </el-table-column>
  42. <el-table-column
  43. align="center"
  44. :label="$i18n.locale==='zh'?'日期':'Date'"
  45. width="230">
  46. <template slot-scope="scope">
  47. <span>{{ scope.row.createDate | time('YYYY-MM-DD') }}</span>
  48. </template>
  49. </el-table-column>
  50. <el-table-column
  51. align="center"
  52. :label="$i18n.locale==='zh'?'时间':'Time'"
  53. width="90">
  54. <template slot-scope="scope">
  55. <span>{{ scope.row.createDate | time('HH:mm:ss') }}</span>
  56. </template>
  57. </el-table-column>
  58. <el-table-column
  59. :prop="$i18n.locale==='zh'?'title':'titleEn'"
  60. align="center"
  61. :label="$i18n.locale==='zh'?'备注':'Remark'">
  62. </el-table-column>
  63. </el-table>
  64. <el-pagination
  65. background
  66. @size-change="(val)=>{page.pageSize = val;}"
  67. @current-change="(val)=>{page.pageNo = val;}"
  68. layout="prev, pager, next, sizes, jumper"
  69. :total="page.total"
  70. :current-page="page.pageNo"
  71. :page-sizes="[10, 20, 50, 100]"
  72. :page-size="page.pageSize"
  73. style="text-align: center;margin-top: 20px;">
  74. </el-pagination>
  75. </div>
  76. </div>
  77. </template>
  78. <script>
  79. import {getUserPointDetailsPage, umsPointCommoditys} from "@/api/user";
  80. import moment from "moment";
  81. import {formatDate} from "@/utils/formatUtils";
  82. export default {
  83. name: "userCenterIntegralSubsidiary",
  84. data() {
  85. return {
  86. loading: false,
  87. params: {
  88. search1: '全部'
  89. },
  90. page: {
  91. pageNo: 1,
  92. pageSize: 10,
  93. total: 3
  94. },
  95. userTaskComplete: []
  96. }
  97. },
  98. filters: {
  99. time(date, type) {
  100. return moment(date).format(type)
  101. },
  102. },
  103. watch: {
  104. page: {
  105. handler: function () {
  106. this.loading = true
  107. this.getUserPointDetailsPage()
  108. },
  109. deep: true
  110. },
  111. params: {
  112. handler: function () {
  113. this.loading = true
  114. this.getUserPointDetailsPage()
  115. },
  116. deep: true
  117. },
  118. },
  119. mounted() {
  120. this.init()
  121. },
  122. methods: {
  123. init() {
  124. this.getUserPointDetailsPage()
  125. },
  126. getUserPointDetailsPage() {
  127. let param = {
  128. pageSize: this.page.pageSize,
  129. pageNo: this.page.pageNo,
  130. // userUid: 'GEI_5tCB408b',
  131. // userId: JSON.parse(window.localStorage.getItem('user')).userId,
  132. }
  133. if (this.params.search1 == '获取') {
  134. param.pointType = 1
  135. }
  136. if (this.params.search1 == '支出') {
  137. param.pointType = 0
  138. }
  139. getUserPointDetailsPage(param).then((res) => {
  140. if (res) {
  141. this.userTaskComplete = res.data.umsUserPointDetailss
  142. this.page.total = Number(res.data.page.totalCount)
  143. }
  144. }).then(() => {
  145. this.loading = false
  146. }).catch(() => {
  147. this.loading = false
  148. })
  149. },
  150. activeChange(value) {
  151. this.params.search1 = value
  152. this.page.pageNo = 1
  153. this.getUserPointDetailsPage()
  154. }
  155. },
  156. computed:{
  157. integralState(){
  158. }
  159. }
  160. }
  161. </script>
  162. <style scoped lang="less">
  163. .userCenterIntegralSubsidiary {
  164. .search {
  165. font-size: 14px;
  166. font-weight: 600;
  167. height: 70px;
  168. line-height: 70px;
  169. span {
  170. cursor: pointer;
  171. margin: 0 30px;
  172. &.active {
  173. color: #60aae3;
  174. }
  175. }
  176. }
  177. .list {
  178. width: 100%;
  179. padding: 0 18px;
  180. box-sizing: border-box;
  181. }
  182. }
  183. </style>