123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223 |
- <template>
- <view class="">
- <navbar :config="config" backColor="#999999"></navbar>
- <view class="pages-lable-box">
- <view class="pages-lable">
- <block v-for="(item , index ) in taskStatus">
- <view @click.stop="onSelect(item.value)"
- :class="['pages-lable-item' , activeTaskStatus === item.value ? 'active-lable-item' : '' ]">
- {{item.lable}}
- </view>
- </block>
- </view>
- </view>
- <view class="task-list-box">
- <task-list-item :dataList="dataList" showTaskStatus privateTask :task-tag="taskTag" />
-
- <loadMore v-if="dataList.length > 0 || loadingStatus === 'loading' " :status="loadingStatus" />
- <view class="empty-data" v-if="(!dataList || dataList.length===0) && loadingStatus=== 'noMore' ">
- <EmptyDate />
- </view>
- </view>
- </view>
- </template>
- <script>
- import {
- getMyTask_Api
- } from "@/api/task.js"
- import taskListItem from "./components/task-list-item.vue"
- const app = getApp()
- export default {
- components: {
- taskListItem
- },
- data() {
- return {
- top: null,
- config: {
- back: true,
- title: '任务中心',
- color: 'black',
- backgroundColor: [1, '#fff'],
- statusBarFontColor: 'black'
- },
- activeTaskStatus: 1,
- taskStatus: [{
- value: 1,
- lable: '进行中'
- }, {
- value: 2,
- lable: '已完成'
- }, {
- value: 3,
- lable: '已过期'
- }],
- dataList: [],
- pageNum: 0,
- pageSize: 10,
- loadingStatus: '',
- taskTag: {
- name: '',
- color: "",
- bgColor: ''
- }
- }
- },
- onLoad() {
- const global = app.globalData
- this.top = global.navHeight + global.statusBarHeight + 'px'
- this.init()
- },
- onReachBottom() {
- if (this.loadingStatus === "more") {
- this.getMyTask();
- }
- },
- onPullDownRefresh() {
- this.init();
- },
- watch: {
- activeTaskStatus: {
- handler(newS, oldS) {
- switch (newS) {
- case 1:
- this.taskTag = {
- name: '进行中',
- color: "#FFFFFF",
- bgColor: '#0096B7'
- };
- break;
- case 2:
- this.taskTag = {
- name: '已完成',
- color: "#FFFFFF",
- bgColor: '#299E00'
- };
- break;
- case 3:
- this.taskTag = {
- name: '已过期',
- color: "#FFF",
- bgColor: '#474747'
- };
- break;
- }
- },
- immediate: true
- }
- },
- methods: {
- onSelect(val) {
- this.dataList = [];
- this.pageNum = 0;
- this.pageSize = 10;
- this.loadingStatus = '';
- this.activeTaskStatus = val;
- this.getMyTask();
- },
- init() {
- this.dataList = [];
- this.pageNum = 0;
- this.pageSize = 10;
- this.loadingStatus = '';
- this.activeTaskStatus = 1;
- this.getMyTask();
- },
- getMyTask() {
- if (this.loadingStatus === 'noMore' || this.loadingStatus === 'loading') return
- this.loadingStatus = 'loading';
- this.pageNum++;
- if (this.pageNum <= 1) {
- this.dataList = [];
- }
- getMyTask_Api({
- pageNum: this.pageNum,
- pageSize: this.pageSize,
- myTaskStatus: this.activeTaskStatus
- }).then(res => {
- const t_o = 300;
- setTimeout(() => {
- if (res.code === 200) {
- this.dataList = this.dataList.concat(res.rows || []);
- };
- this.setLoadingStatus(this.$mUtil.pagination(res.total, this.pageNum, this
- .pageSize))
- } , this.dataList.length === 0 ? t_o : 0)
- }).catch(err => {
- this.setLoadingStatus("noMore")
- })
- },
- setLoadingStatus(status) {
- setTimeout(() => {
- this.loadingStatus = status
- }, 100)
- }
- }
- }
- </script>
- <style>
- page {
- background-color: #f9f9f9;
- }
- </style>
- <style lang="scss" scoped>
- @import "./common.scss";
- $padd_: 30rpx;
- .pages-lable-box {
- width: 100%;
- height: 94rpx;
- .pages-lable {
- position: fixed;
- left: 0;
- right: 0;
- z-index: 5;
- width: 100%;
- height: 94rpx;
- padding: 0 $padd_;
- display: flex;
- justify-content: space-between;
- align-items: stretch;
- border-bottom: 1rpx solid #E6E6E6;
- background-color: #fff;
- .pages-lable-item {
- height: 100%;
- line-height: 94rpx;
- font-size: 30rpx;
- font-family: PingFang SC, PingFang SC-Regular;
- font-weight: Regular;
- color: #1a1a1a;
- position: relative;
- &::before {
- content: '';
- position: absolute;
- left: 0;
- bottom: 0;
- right: 0;
- height: 4rpx;
- border-radius: 2px;
- }
- }
- .active-lable-item {
- font-family: PingFang SC, PingFang SC-Bold;
- font-weight: Bold;
- color: #3bb7ce;
- &::before {
- background-color: #3bb7ce;
- }
- }
- }
- }
- .task-list-box {
- padding: 30rpx $padd_ 0;
- }
- </style>
|