gdy_app_8/src/point/view/task/my_publish.vue

<template>
  <div class="my_task_box">

    <van-nav-bar :title="title" left-text="返回" @click-left="$route_back" left-arrow></van-nav-bar>

    <TabsList
      ref="tabsList"
      :tabsOption="tabsOption"
      :enablePullUpRefresh="true"
      :isUpload="loading"
      :showToolBar="tabsVal != 'repetitive'"
      @onRefresh="onRefresh"
      @onInfinite="onInfinite"
      @onTabChange="onTabChange"
      @onConfirm="onConfirm"
      @onCancel="onCancel"
    >
      <div slot="filter" style="background:#fff;  padding:0.32rem; padding-top: 0;" v-show="tabsVal !== 'repetitive'">
        <div class="" v-for="(item, index) in screen_list" :key="index" v-show="item.show">
          <p>{{ item.title }}</p>
          <div class="selected_list">
            <span v-for="(d, i) in item.list" :key="i" @click="onselect(item, d)" :class="{ selected: filter[item.mapping] === d.id }" if>{{ d.name }}</span>
          </div>
        </div>
      </div>

      <div slot="assign">
        <van-cell-group style="padding: 0.32rem;" class="" v-for="(item, index) in list" :key="index" @click="detail(item)">
          <div class="flex-box flex-v-ce">
            <userImage :user_name="item.employee_name" :id="item.employee_id" width="0.72rem" height="0.72rem" style="margin-right: 0.2rem"></userImage>
            <span class="flex-1">{{ item.employee_name }}的{{ item.pt_name }}任务</span>
            <template v-if="item.point_config">
              <template v-if="item.status == 4">
                <span class="point red" v-if="item.point_config.review_point > 0">+{{ item.point_config.review_point }}{{ item.pt_name }}</span>
                <span class="point green" v-if="item.point_config.review_point < 0">{{ item.point_config.review_point }}{{ item.pt_name }}</span>
              </template>
              <template v-else>
                <span class="point red" v-if="item.point_config.base_point > 0">+{{ item.point_config.base_point }}{{ item.pt_name }}</span>
                <span class="point green" v-if="item.point_config.base_point < 0">{{ item.point_config.base_point }}{{ item.pt_name }}</span>
              </template>
            </template>
          </div>
          <div style="padding-left: 0.72rem; margin-left: 0.2rem; font-size: 0.32rem">
            <div style="font-size: 0.32rem;color:#666 !important;">{{ item.task_name }}</div>
            <div class="clear" style="margin-top: 0.1rem; font-size: 0.28rem;">
              <span class="fl fontColorC">{{ item.expire_time }}截止</span>
              <span class="fr yellow" v-show="item.status == 1">进行中</span>
              <span class="fr green" v-show="item.status == 2">已完成</span>
              <span class="fr green" v-show="item.status == 4">
                <span v-if="item.review_status == 1">已审批</span>
                <span class="red" v-if="item.review_status == 2">已驳回</span>
              </span>
              <span class="fr red " v-show="item.status == 5">已撤回</span>
            </div>
          </div>
        </van-cell-group>
        <noData style="background: rgb(245, 245, 245);margin-top: 2rem;" :list="list" />
      </div>

      <div slot="reward">
        <van-cell-group style="padding: 0.32rem;" class="" v-for="(item, index) in list" :key="index" @click="task_detail(item)">

          <div class="flex-box flex-v-ce">
<!--            <userImage
              v-show="item.receiver_id != 0"
              class="fl"
              :img_url="item.receiver_img_url"
              :user_name="item.receiver_name"
              width="0.72rem"
              height="0.72rem"
              style="margin-right: 0.2rem"
            ></userImage> -->

            <userImage
              class="fl"
              :img_url="item.owner_img_url"
              :user_name="item.owner_name"
              width="0.72rem"
              height="0.72rem"
              style="margin-right: 0.2rem"
            ></userImage>


<!--            <span class="flex-1" v-show="item.status == 2 || item.status == 3 || (item.receiver_id != 0 && item.status == 4)">
              {{ item.receiver_name }}的{{ item.pt_name }}任务
            </span> -->
            <!-- <span class="flex-1" v-show="item.status == 1 || item.status == -1 || (item.receiver_id == 0 && item.status == 4)">我发布的{{ item.pt_name }}任务</span> -->
            <span class="flex-1">我发布的{{ item.pt_name }}任务</span>
            <template>
              <span class="point red" v-if="item.base_point > 0">+{{ item.base_point }}{{ item.pt_name }}</span>
              <span class="point green" v-if="item.base_point < 0">{{ item.base_point }}{{ item.pt_name }}</span>
            </template>
          </div>
          <div style="padding-left: 0.72rem; margin-left: 0.2rem; font-size: 0.32rem">
            <div style="font-size: 0.28rem;color:#666;">{{ item.task_name }}</div>
            <div class="clear" style="margin-top:0.1rem; font-size: 0.28rem;">
              <span class="fl fontColorC">{{ item.expire_time }}截止</span>
              <span class="fr red" v-show="item.status == -1">已过期</span>
              <span class="fr orange" v-show="item.status == 1">待领取</span>
              <span class="fr yellow " v-show="item.status == 2">进行中</span>
              <span class="fr green" v-show="item.status == 3">已完成</span>
              <span class="fr red " v-show="item.status == 4">已撤回</span>
            </div>
          </div>
        </van-cell-group>
        <noData style="background: rgb(245, 245, 245);margin-top: 2rem;" :list="list" />
      </div>

      <div slot="repetitive">
        <van-cell-group class="list_box" :border="false">
          <van-cell v-for="(item, index) in list" style="border-bottom: 17px solid #F5F7FA;" :key="index" @click="repetitive_detail(item)" v-bind:class="scheduleClassName(item)">
            <template slot="title">
              <span class="title_name">{{ item.name }}</span>
            </template>
            <template slot="label">
              <div class="cycle flex-box-ce">
                <icon name="repetition_cycle" class="icon"></icon>
                <span class="fontColorC" v-if="item.task_cycle == 1">每天0点自动发布，{{item.task_cycle_value > 9 ? item.task_cycle_value + ': 00' : '0' + item.task_cycle_value + ': 00'}}截止</span>
                <span class="fontColorC" v-if="item.task_cycle == 2">每周一自动发布，周{{weekList[item.task_cycle_value - 1]}}截止</span>
                <span class="fontColorC" v-if="item.task_cycle == 3">每月1号自动发布，{{item.task_cycle_value }}号截止</span>
              </div>
            </template>
            <template slot="right-icon">
              <span class="point">{{ item.base_point }}</span>
            </template>
          </van-cell>
        </van-cell-group>
        <noData style="margin-top: 2rem; background-color: rgb(245, 245, 245)" :list="list" />
      </div>

    </TabsList>
  </div>
</template>
<script>

import TabsList from '@/components/TabsList';
import moment from 'moment';
import Vue from 'vue';
import { Tab, Tabs, DropdownMenu, DropdownItem } from 'vant';
Vue.use(Tab)
  .use(Tabs)
  .use(DropdownMenu)
  .use(DropdownItem);
export default {
  // 数据
  data() {
    return {
      weekList: ['一', '二', '三', '四', '五', '六', '日'],
      title: '我发布的任务',
      list: [],
      loading: false,
      url: '/api/pro/integral/work/list/publisher',
      date: moment().format('YYYY-MM-DD HH:mm:ss'),
      filter: {
        page: 1,
        status: 'all',
        sort: 'publish',
        source_type: 1,
        pt_id: '0',
        order_by: 'create_time'
      },
      tabsOption: [{ title: '我指派的', value: 'assign' }, { title: '我悬赏的', value: 'reward' }, { title: '重复任务', value: 'repetitive' }],
      screen_list: [
        {
          title: '积分类型',
          mapping: 'pt_id',
          show: true,
          list: [{ name: '全部', id: '0' }]
        },
        {
          title: '任务状态',
          mapping: 'status',
          show: true,
          list: [{ name: '全部', id: 'all' }, { name: '进行中', id: 'running' }, { name: '已完成', id: 'complete' }]
        },
        {
          title: '排序',
          mapping: 'sort',
          show: true,
          list: [{ name: '按发布时间', id: 'publish' }, { name: '按截止时间', id: 'expire' }]
        },
        {
          title: '排序',
          mapping: 'order_by',
          show: false,
          list: [{ name: '按发布时间', id: 'create_time' }, { name: '按截止时间', id: 'expire_time' }]
        }
      ],
      tabsVal: 'assign'
    };
  },
  // 组件
  components: { TabsList, moment },
  computed: {
    hasData() {
      return this.loading || (Array.isArray(this.list) && this.list.length > 0);
    },
  },
  // 方法
  methods: {
    // 选择条件
    onselect(item, subItem) {
      this.filter[item.mapping] = subItem.id;
    },
    onConfirm() {
      this.$refs.tabsList.triggerPullToRefresh();
    },
    onCancel() {
      this.screen_list.forEach(e => {
        this.filter[e.mapping] = e.list[0].id;
      });
      this.$refs.tabsList.triggerPullToRefresh();
    },
    // 加载
    showLoading() {
      this.$toast.loading({
        loadingType: 'spinner',
        message: '正在处理'
      });
    },
    onTabChange(value) {
      let self = this;
      if (value.activeTab == 'repetitive') {
        self.$refs.tabsList.$refs.popupContainer.hidden = true;
      } else {
        self.$refs.tabsList.$refs.popupContainer.hidden = false;
      }
      self.tabsVal = value.activeTab;
      switch (value.activeTab) {
        case 'reward':
          self.screen_list[3].show = true;
          self.screen_list[2].show = false;
          self.screen_list[1].show = false;
          self.list = [];
          self.screen_list[0].list = [{ name: '全部', id: '0' }];
          self.screen_list[0].list.push(...this.$getTypes.filter(item => item.code != 'JX'));
          self.filter = {
            page: 1,
            status: 'all',
            sort: 'publish',
            source_type: 1,
            pt_id: '0',
            order_by: 'create_time'
          };
          self.url = '/api/pro/integral/task/publish/list';
          self.$refs.tabsList.triggerPullToRefresh();
          break;
        case 'repetitive':
          self.list = [];
          self.url = '/api/pro/integral/schedule/list';
          self.$refs.tabsList.triggerPullToRefresh();
          break;
        default:
          self.list = [];
          self.screen_list[3].show = false;
          self.screen_list[2].show = true;
          self.screen_list[1].show = true;
          self.screen_list[0].list = [{ name: '全部', id: '0' }];
          self.screen_list[0].list.push(...this.$getTypes);
          self.filter = {
            page: 1,
            status: 'all',
            sort: 'publish',
            source_type: 1,
            pt_id: '0'
          };
          self.url = '/api/pro/integral/work/list/publisher';
          self.$refs.tabsList.triggerPullToRefresh();
          break;
      }
    },
    onInfinite(params) {
      this.get_list(params);
    },
    onRefresh(params) {
      this.get_list(params);
    },
    get_list(params) {
      // 需要告诉scroller 组件是否还有数据未加载
      let hasMore = false;
      let data = null;
      // params.pageIndex 当前页码
      if (this.tabsVal == 'repetitive') {
        data = { page: params.pageIndex };
      } else {
        this.filter.page = params.pageIndex;
        data = this.filter;
      }
      this.loading = true;
      this.$axiosUser('get', this.url, data)
        .then(res => {
          if (res.data.code == 1) {
            const list = res.data.data.list;
            // params.isRefresh  true为下拉刷新 false为下一页刷新
            if (params.isRefresh) {
              this.list = list;
            } else {
              this.list = [].concat(this.list, list);
            }
            // 需要告诉scroller 组件是否还有数据未加载 true没有 flase 还有
            hasMore = list.length !== 10;
          }
        })
        .finally(() => {
          this.loading = false;
          params.done && params.done(hasMore);
        });
    },

    //  进入详情
    detail(item) {
      this.$router.push({ name: 'taskFile', query: { task_id: item.id } });
    },
    task_detail(item) {
      this.$router.push({ name: 'task_detail_a', query: { task_id: item.id } });
    },
    // 重复任务详情
    repetitive_detail(item) {
      this.$router.push({ name: 'repetitive_tasks_detail', query: { schedule_id: item.id } });
    },
    // 时间对比
    date_contrast(date) {
      return moment(this.date) > moment(date);
    },
    scheduleClassName(schedule){
      if (!schedule.schedule_expire_time) return "";
      let now = new Date();
      let expire_date = new Date(schedule.schedule_expire_time);
      return now >= expire_date ? "schedule-expire" : "";
    }

  },
  // 组件挂载完成
  mounted() {
    this.screen_list[0].list.push(...this.$getTypes.filter(item => item.code != 'JX'));
  },
  activated() {
	this.onConfirm();
  },

};
</script>
<style scoped lang="less">
/deep/ .van-tab__text {
  font-size: 0.3rem;
}
.body_com {
  height: calc(100% - 2.8rem);
  position: relative;
}
.my_publish_list {
  .van-cell__title {
    line-height: 36px;
  }
  .value {
    flex: none;
    line-height: 36px;
  }
}
.selected_list {
  span {
    display: inline-block;
    height: 0.72rem;
    background: #f5f7fa;
    border-radius: 0.08rem;
    line-height: 0.72rem;
    touch-action: none;
    padding: 0 0.2rem;
    margin-right: 0.2rem;
    font-size: 0.3rem;
    &.selected {
      color: #26a2ff;
      background: #26a2ff33;
    }
  }
}
.title {
  span {
    line-height: 36px;
    display: inline-block;
    font-weight: 400;
    font-size: 0.36rem;
  }
}
.van-cell-group {
  margin-top: 0;
}
.list_box {
  .title_name {
    font-size: 0.36rem;
    display: -webkit-box;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .name {
    padding-top: 0.15rem;
    line-height: 0.4rem;
    span {
      color: #303133;
      font-size: 0.28rem;
    }
  }
  .cycle {
    padding-top: 0.1rem;
    line-height: 0.4rem;
    span {
      color: #303133;
      font-size: 0.28rem;
    }
  }
  .point {
    font-size: 0.4rem;
    font-weight: bold;
    color: #303133;
  }
}
.icon {
  width: 0.3rem;
  color: #c0c4cc;
  padding: 0;
  margin-right: 0.1rem;
}

.schedule-expire{
  background-color: oldlace;
}

</style>