integrateListDetail.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440
  1. <template>
  2. <view class="">
  3. <view style="background-color: $color-white !important;">
  4. <u-navbar :back-text="i18n('Back')" :back-text-style="backStyle" back-icon-color="#fff" title-color="#fff"
  5. :background="background" title-width="300" :title="i18n('integrateListDetails')"></u-navbar>
  6. </view>
  7. <view class="content">
  8. <view class="content-title">
  9. <view class="example-body">
  10. <uni-datetime-picker v-model="range" type="daterange" @change="changeLog" />
  11. </view>
  12. <view class="detail-info">
  13. <view class="detail-integrate">
  14. <view class="get-integrate">
  15. {{$i18n.locale=='zh'?'积分获取':'Integral gain'}}:<text
  16. class="integrate-num">{{userDetail.addPoint==null?'0':userDetail.addPoint}}</text>
  17. </view>
  18. <view class="pay-integrate">
  19. {{$i18n.locale=='zh'?'积分支出':'Integral spending'}}:<text
  20. class="integrate-num">{{userDetail.deductPoint==null?'0':userDetail.deductPoint}}</text>
  21. </view>
  22. </view>
  23. <view class="subtotal-integrate">
  24. {{$i18n.locale=='zh'?'当月小计':'Monthly subtotal'}}:
  25. <text
  26. class="subtotal-integrate-num">{{userDetail.addPoint==null?'0':Number(userDetail.addPoint)-Number(userDetail.deductPoint)}}</text>{{$i18n.locale=='zh'?'积分':'Integral'}}
  27. </view>
  28. </view>
  29. </view>
  30. <view class="user-detail">
  31. <uni-section>
  32. <view class="ui-btn">
  33. <uni-segmented-control :current="current" :values="items" :style-type="styleType"
  34. :active-color="activeColor" @clickItem="onClickItem" class="ui-pay-btn" />
  35. </view>
  36. </uni-section>
  37. <view>
  38. <view v-if="current === 0">
  39. <view class="detail-list" v-for="(getList,index) in getInfo" :key="index">
  40. <view class="user-detail-list">
  41. <!-- <view class="list-pic">
  42. <image :src="newDownTask[getList.taskDict]" alt="" class="un-pic" />
  43. </view> -->
  44. <view class="list-user-info">
  45. <view class="list-title">{{$i18n.locale=='zh'?getList.title:getList.titleEn}}</view>
  46. <view class="list-info">{{$i18n.locale=='zh'?'任务中心':'The task center'}}</view>
  47. <view class="list-time">
  48. {{getList.updateDate|time('YYYY-MM-DD HH:mm:ss')}}
  49. </view>
  50. </view>
  51. <view class="list-num">+{{getList.point}}
  52. <image src='@/static/intetral-user.png' class="list-num-pic" />
  53. </view>
  54. </view>
  55. </view>
  56. <uni-load-more :status="status" v-show="this.total>10"></uni-load-more>
  57. </view>
  58. <view v-if="current === 1">
  59. <view class="detail-list" v-for="(payList,index) in getInfo" :key="index">
  60. <view class="user-detail-list">
  61. <!-- <view class="list-pic">
  62. <image :src="newDownTask[payList.taskDict]" alt="" class="un-pic" />
  63. </view> -->
  64. <view class="list-user-info">
  65. <view class="list-title">{{payList.title}}</view>
  66. <view class="list-info">任务中心</view>
  67. <view class="list-time">
  68. {{payList.updateDate|time('YYYY-MM-DD HH:mm:ss')}}
  69. </view>
  70. </view>
  71. <view class="list-num">-{{payList.point}}
  72. <image src='@/static/intetral-user.png' class="list-num-pic" />
  73. </view>
  74. </view>
  75. </view>
  76. <uni-load-more :status="status" v-show="this.total>10"></uni-load-more>
  77. </view>
  78. </view>
  79. <view class="ui-bgi-pic"></view>
  80. </view>
  81. </view>
  82. </view>
  83. </template>
  84. <script>
  85. import moment from "moment"
  86. const newDownTask = {
  87. point_task_upload_head_portrait: '@/static/blue/user-title.png',
  88. point_task_complete_info: '@/static/blue/user-1.png',
  89. point_task_verified_name: '@/static/blue/user-2.png',
  90. point_task_bind_email: '@/static/blue/user-3.png',
  91. point_task_set_nickname: '@/static/blue/user-4.png',
  92. point_task_bind_phone: '@/static/blue/user-5.png',
  93. platform_problem_feedback: '@/static/green/user-1.png',
  94. point_task_upload_resources_project: '@/static/green/user-2.png',
  95. project_recommended: '@/static/green/user-3.png',
  96. aubmit_a_message_once: '@/static/green/user-2.png',
  97. point_task_upload_journal: '@/static/green/user-2.png',
  98. point_task_upload_resources_result: '@/static/green/user-2.png',
  99. activity_registration_successful: '@/static/green/user-4.png',
  100. point_task_share_project: '@/static/green/user-5.png',
  101. meeting_registration_successful: '@/static/green/user-6.png',
  102. the_message_was_liked: '@/static/green/user-7.png',
  103. point_task_share_information: '@/static/green/user-6.png',
  104. point_task_sign: '@/static/green/user-8.png',
  105. message_is_saved: '@/static/green/user-9.png',
  106. point_task_upload_information: '@/static/green/user-11.png',
  107. point_task_development_cooperation_message: '@/static/green/user-12.png',
  108. point_task_project_message: '@/static/green/user-13.png',
  109. point_task_project_ask: '@/static/green/user-14.png',
  110. point_read_information: '@/static/green/user-15.png',
  111. point_task_attention: '@/static/green/user-16.png',
  112. point_task_view_resources_project: '@/static/green/user-17.png'
  113. }
  114. export default {
  115. components: {
  116. moment
  117. },
  118. data() {
  119. return {
  120. items: ['收获', '支出'],
  121. interType: '',
  122. styles: [{
  123. value: 'button',
  124. text: '按钮',
  125. checked: true
  126. },
  127. {
  128. value: 'text',
  129. text: '文字'
  130. }
  131. ],
  132. colors: ['#007aff', '#4cd964', '#dd524d'],
  133. current: 0,
  134. activeColor: '#007aff',
  135. styleType: 'button',
  136. background: {
  137. backgroundImage: 'linear-gradient(270deg, #4BC0E2 0%, #538BE7 100%)',
  138. },
  139. backStyle: {
  140. color: '#FFFFFF',
  141. },
  142. form: {},
  143. getInfo: {},
  144. range: [],
  145. newDownTask: newDownTask,
  146. flag: false,
  147. userDetail: {},
  148. pageSize: "10",
  149. pageNo: "1",
  150. total: null,
  151. status: 'more',
  152. };
  153. },
  154. onShow() {
  155. this.getNowFormatDate();
  156. this.interType = 1
  157. },
  158. watch: {
  159. range(newval) {
  160. console.log('范围选:', this.range);
  161. },
  162. },
  163. filters: {
  164. twoDecimal(value) {
  165. return parseFloat(string(value)).toFixed(2);
  166. },
  167. time(data, type) {
  168. return moment(data).format(type);
  169. }
  170. },
  171. onReachBottom() {
  172. let allTotal = this.pageNo * this.pageSize
  173. if (allTotal < this.total) {
  174. console.log(this.total);
  175. //当前条数小于总条数 则增加请求页数
  176. this.status = 'loading';
  177. this.pageSize++;
  178. this.getIntegrate() //调用加载数据方法
  179. } else {
  180. this.status = 'noMore';
  181. // console.log('已加载全部数据')
  182. }
  183. },
  184. onPullDownRefresh() {
  185. //调用获取数据方法
  186. this.getIntegrate()
  187. setTimeout(() => {
  188. uni.stopPullDownRefresh();
  189. }, 1000);
  190. },
  191. methods: {
  192. getNowFormatDate() {
  193. let date = new Date(),
  194. seperator1 = '-', //格式分隔符
  195. year = date.getFullYear(), //获取完整的年份(4位)
  196. month = date.getMonth() + 1, //获取当前月份(0-11,0代表1月)
  197. month1 = date.getMonth() + 1,
  198. strDate = date.getDate() // 获取当前日(1-31)
  199. if (month >= 1 && month <= 9) month = '0' + month // 如果月份是个位数,在前面补0
  200. if (strDate >= 0 && strDate <= 9) strDate = '0' + strDate // 如果日是个位数,在前面补0
  201. let currentdate = year + seperator1 + month + seperator1 + strDate
  202. let currentInfo = year + seperator1 + month1 + seperator1 + strDate
  203. console.log('===2===', currentdate, currentInfo);
  204. this.range[0] = currentInfo
  205. this.range[1] = currentdate
  206. this.findBasicInfo();
  207. },
  208. i18n(data) {
  209. return this.$t('common.' + data);
  210. },
  211. onClickItem(e) {
  212. if (this.current !== e.currentIndex) {
  213. this.current = e.currentIndex
  214. }
  215. if (this.interType == '0') {
  216. this.interType = 1
  217. this.getIntegrate()
  218. } else {
  219. this.interType = 0
  220. this.getIntegrate()
  221. }
  222. console.log(this.interType, '好多数据');
  223. },
  224. //选择时间
  225. async changeLog(e) {
  226. this.range = e
  227. // console.log('----change事件:', this.range);
  228. this.getIntegrate();
  229. },
  230. async findBasicInfo() {
  231. const result = await this.$myRequest({
  232. url: '/uc/userCenter/findBasicInfo',
  233. data: {},
  234. });
  235. this.form = result.data;
  236. // console.log(this.form, '====================');
  237. this.getIntegrate()
  238. },
  239. async getIntegrate() {
  240. const res = await this.$myRequest({
  241. url: '/uc/umsUserPointDetailss/getUserPointDetailsPage',
  242. data: {
  243. "pageSize": this.pageSize,
  244. "pageNo": this.pageNo,
  245. "pointType": this.interType,
  246. // "userId": this.form.id,
  247. 'createStartDate': this.range[0],
  248. 'createEndDate': this.range[1]
  249. }
  250. });
  251. // console.log(res);
  252. this.getInfo = res.data.umsUserPointDetailss
  253. this.userDetail = res.data.pointAndGrowth
  254. this.total = res.data.page.totalCount
  255. },
  256. }
  257. }
  258. </script>
  259. <style lang="scss" scoped>
  260. .content {
  261. width: 100%;
  262. .example-body {
  263. width: 92%;
  264. margin-left: 4%;
  265. }
  266. .content-title {
  267. height: 365rpx;
  268. background-color: skyblue;
  269. .detail-info {
  270. width: 92%;
  271. height: 200rpx;
  272. margin-top: 7%;
  273. margin-left: 4%;
  274. border-radius: 20rpx;
  275. overflow: hidden;
  276. .detail-integrate {
  277. height: 100rpx;
  278. display: flex;
  279. background-color: rgba(255, 255, 255, 0.3);
  280. padding-left: 40rpx;
  281. .get-integrate {
  282. line-height: 100rpx;
  283. width: 40%;
  284. }
  285. .pay-integrate {
  286. line-height: 100rpx;
  287. }
  288. .integrate-num {
  289. font-size: 34rpx;
  290. font-weight: 700;
  291. }
  292. }
  293. .subtotal-integrate {
  294. height: 100rpx;
  295. background-color: rgba(255, 255, 255, 0.6);
  296. line-height: 100rpx;
  297. padding-left: 40rpx;
  298. .subtotal-integrate-num {
  299. font-size: 40rpx;
  300. // margin-left: 20rpx;
  301. font-weight: 700;
  302. padding: 0 10px;
  303. }
  304. }
  305. }
  306. }
  307. .user-detail {
  308. background-color: #fff;
  309. .ui-btn {
  310. width: 100%;
  311. .ui-pay-btn {
  312. width: 100%;
  313. background-color: #FFF;
  314. }
  315. }
  316. .get-integrate-detail {
  317. height: 70rpx;
  318. line-height: 70rpx;
  319. }
  320. .pay-integrate-detail {
  321. height: 70rpx;
  322. line-height: 70rpx;
  323. }
  324. .integrate-detail {
  325. height: 70rpx;
  326. line-height: 70rpx;
  327. width: 90rpx;
  328. height: 70rpx;
  329. text-align: center;
  330. color: deepskyblue;
  331. border-bottom: 2rpx solid deepskyblue;
  332. }
  333. }
  334. .detail-list {
  335. background-color: #fff;
  336. .user-detail-list {
  337. display: flex;
  338. height: 160rpx;
  339. width: 96%;
  340. margin-left: 2%;
  341. .list-pic {
  342. width: 20%;
  343. height: 160rpx;
  344. line-height: 160rpx;
  345. .un-pic {
  346. width: 100%;
  347. height: 100%;
  348. }
  349. }
  350. .list-user-info {
  351. width: 80%;
  352. margin-left: 10%;
  353. .list-title {
  354. height: 70rpx;
  355. line-height: 60rpx;
  356. font-size: 30rpx;
  357. font-weight: 700;
  358. }
  359. .list-info {
  360. height: 40rpx;
  361. line-height: 40rpx;
  362. font-size: 22rpx;
  363. }
  364. .list-time {
  365. height: 40rpx;
  366. line-height: 40rpx;
  367. font-size: 22rpx;
  368. }
  369. }
  370. .list-num {
  371. width: 30%;
  372. height: 160rpx;
  373. line-height: 160rpx;
  374. font-size: 40rpx;
  375. font-weight: 700;
  376. .list-num-pic {
  377. width: 16%;
  378. height: 20%;
  379. margin-left: 6rpx;
  380. }
  381. }
  382. }
  383. }
  384. .little-title {
  385. width: 96%;
  386. height: 100rpx;
  387. line-height: 100rpx;
  388. margin-left: 2%;
  389. font-size: 32rpx;
  390. text-align: center;
  391. letter-spacing: 3rpx;
  392. font-weight: 700;
  393. color: #0000004D;
  394. background-color: #f1f1f1;
  395. }
  396. }
  397. </style>