gain_task.vue 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  1. <template>
  2. <view class="total-page page-box gain-task">
  3. <Nav :title="'领取任务'" :genre="1" is_fixed></Nav>
  4. <!-- <view class="m-lr20 r-20">-->
  5. <!-- <k-tabs-swiper class="r-20" v-model="current" :tabs="tabs" :field="'name'" bgColor="#fff" color="#444444"-->
  6. <!-- activeColor="#10B261" fontSize="28rpx" :bold="true" :scroll="true" height="100rpx" lineHeight="10rpx"-->
  7. <!-- @change="changeTab" paddingItem="0 50rpx">-->
  8. <!-- </k-tabs-swiper>-->
  9. <!-- </view>-->
  10. <task-ima-tab @setProductId="setProductId" ref="taskTabObj" :num-type="1"></task-ima-tab>
  11. <EnScroll ref="scroll" :navHeight="110" class="main" @onRefresh="onRefresh" @onScrollBottom="onScrollBottom">
  12. <TaskItem :type="2" :task-list="taskList" is_bottom @takeTask="setTakeTask"></TaskItem>
  13. </EnScroll>
  14. </view>
  15. </template>
  16. <script>
  17. import TaskItem from "@/common/task/task-item.vue"
  18. import { getTaskReceiving} from "@/api/task"
  19. import TaskImaTab from "@/common/task/task_ima_tab.vue";
  20. export default {
  21. components: {
  22. TaskImaTab,
  23. TaskItem
  24. },
  25. data() {
  26. return {
  27. current: 0,
  28. tabs: [
  29. {
  30. id: 0,
  31. name: '全部(0)',
  32. product_name: '全部',
  33. icon: 'https://wealfavor-1257406827.cos.ap-beijing.myqcloud.com/new-xcx/task/task-all.png',
  34. num:0
  35. }
  36. ],
  37. taskList: [],
  38. page: 1,
  39. totalNum: 9999,
  40. isAjax: false,
  41. productId: 0
  42. }
  43. },
  44. mounted() {
  45. this.getTaskReceiving()
  46. },
  47. methods: {
  48. setProductId(productId) {
  49. console.log('productId:' + productId)
  50. this.productId = productId
  51. this.startList()
  52. },
  53. // 下拉刷新
  54. startList() {
  55. this.taskList = [];
  56. this.page = 1
  57. this.totalNum = 99999
  58. this.getTaskReceiving()
  59. },
  60. async getTaskReceiving() {
  61. if (this.totalNum <= this.taskList.length) {
  62. return;
  63. }
  64. const res = await getTaskReceiving({
  65. 'page': this.page,
  66. 'productId': this.productId
  67. })
  68. if (res.code === 1) {
  69. this.totalNum = res.data.totalNum
  70. this.taskList.push(...res.data.items)
  71. ++this.page
  72. }
  73. },
  74. setTakeTask(index) {
  75. console.log('index:' + index)
  76. this.taskList.splice(index, 1)
  77. this.$refs.taskTabObj.getTaskType()
  78. uni.$emit('newReceiving')
  79. },
  80. onRefresh() {
  81. setTimeout(() => {
  82. this.$refs.scroll.onEndPulling()
  83. this.startList()
  84. }, 200)
  85. },
  86. // 滚动到底部
  87. onScrollBottom() {
  88. uni.showLoading({
  89. title: '数据加载中'
  90. })
  91. this.getTaskReceiving()
  92. setTimeout(() => {
  93. uni.showToast({
  94. title: '加载完成',
  95. icon: 'none'
  96. })
  97. }, 1000)
  98. console.log("到底部了");
  99. },
  100. }
  101. }
  102. </script>
  103. <style lang="scss" scoped>
  104. .gain-task {
  105. display: flex;
  106. flex-direction: column;
  107. min-height: 100%;
  108. background-image: url('https://wealfavor-1257406827.cos.ap-beijing.myqcloud.com/new-xcx/task/task-nav-bg.png');
  109. background-repeat: no-repeat;
  110. background-size: 100% auto;
  111. }
  112. </style>