gain_task.vue 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124
  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. uni.showLoading({
  82. title: '数据加载中'
  83. })
  84. setTimeout(() => {
  85. uni.showToast({
  86. title: '加载完成',
  87. icon: 'none'
  88. })
  89. this.$refs.scroll.onEndPulling()
  90. this.startList()
  91. }, 1000)
  92. console.log("下拉刷新");
  93. },
  94. // 滚动到底部
  95. onScrollBottom() {
  96. uni.showLoading({
  97. title: '数据加载中'
  98. })
  99. this.getTaskReceiving()
  100. setTimeout(() => {
  101. uni.showToast({
  102. title: '加载完成',
  103. icon: 'none'
  104. })
  105. }, 1000)
  106. console.log("到底部了");
  107. },
  108. }
  109. }
  110. </script>
  111. <style lang="scss" scoped>
  112. .gain-task {
  113. display: flex;
  114. flex-direction: column;
  115. min-height: 100%;
  116. background-image: url('https://wealfavor-1257406827.cos.ap-beijing.myqcloud.com/new-xcx/task/task-nav-bg.png');
  117. background-repeat: no-repeat;
  118. background-size: 100% auto;
  119. }
  120. </style>