userCenterGrowthRecord.vue 4.3 KB

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