gdy_qywx_m/src/components/integral/integral_application_list.vue

<template>
  <div class="integral_application_list_box">
    <van-nav-bar title="我申请的" left-text="返回" @click-left="$route_back" left-arrow></van-nav-bar>

    <van-search v-model="filter.keyword" maxlength="20" placeholder="请输入申请事由搜索" />

    <van-tabs v-model="filter.type">
      <van-tab title="全部申请" name="all"></van-tab>
      <van-tab title="已通过" name="complete"></van-tab>
      <van-tab title="待审批" name="waiting"></van-tab>
      <van-tab title="被驳回" name="refuse"></van-tab>
    </van-tabs>

    <div class="body_com has_header">
      <scroller ref="my_scroller" :on-refresh="refresh" :on-infinite="infinite">
        <van-cell-group :border="false">
          <van-cell
            class="task_list"
            v-for="(item, index) in list"
            :key="index"
            @click="detail(item)"
          >
            <template slot="title">
              <span class="title" style="padding-right: 0.2rem;">{{item.remark.customize || item.remark.rule}}</span>
            </template>
            <template slot="right-icon">
				<span class="point_text">
				  <span class="red" v-if="item.review_point > 0">+{{ item.review_point }}{{$isPt_id(item.pt_id)}}</span>
				  <span class="green" v-if="item.review_point < 0">{{ item.review_point }}{{$isPt_id(item.pt_id)}}</span>
				</span>
            </template>
            <template slot="label">
              <div class="clear" style="margin-top: 0.3rem">
                <span class="fl date color_ccc" style="font-size: 0.28rem;">{{item.event_time}}</span>
              </div>
              <div class="clear" style=" position: absolute; right: 0.32rem; bottom: 0.28rem;">
                <span class="fr text_yellow" v-if="item.status == 0">待审批</span>
                <span class="fr text_green" v-if="item.status == 1">申请成功</span>
                <span class="fr text_red" v-if="item.status == 2">被驳回</span>
              </div>
            </template>
          </van-cell>
        </van-cell-group>
        <noData :list="list" />
      </scroller>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Tab, Tabs, Search } from 'vant'
import request from '@/utils/request'
import {_debounce} from '@/utils/auth'
Vue.use(Tab)
Vue.use(Tabs).use(Search)
export default {
  name: 'integral_application_list',
  comments: {},
  data () {
    return {
      title: '我的申请',
      list: null,
      filter: {
        page: 1,
        pt_id: 0,
        page_size: 30,
        type: 'all',
        keyword: ''
      },
      types_list: {},
      types_list_array: []
    }
  },
  watch: {
    'filter.type': function (val) {
      let self = this
      this.list = null
      this.$toast.loading({
        message: '正在加载'
      })
      this.refresh(function () {
        self.$toast.clear()
      })
    },
    'filter.keyword': {
      deep: true,
      handler: _debounce(function () {
        this.refresh(function () {})
      })
    }
  },
  methods: {
    get_point_types () {
      let self = this
      request('get', '/api/integral/types').then(res => {
        if (res.data.code == 1) {
          for (let i in res.data.data.list) {
            self.types_list[res.data.data.list[i].id] = res.data.data.list[i].name
          }
          self.types_list_array = res.data.data.list
        }
      })
    },
    get_list (done) {
      let self = this
      request('get', '/api/integral/review/apply/list', self.filter).then((res) => {
        done()
        if (res.data.code == 1) {
          self.$refs.my_scroller.finishInfinite(res.data.data.list.length != 30) // 停止上滚加载下一页，由于服务器端没有统一空数据和正常数据的格式，所以通过total字段来判定数据是否存在下一页
          if (res.data.data.total) {
            for (let i in res.data.data.list) {
              self.list.push(res.data.data.list[i])
            }
          }
          self.filter.page++
        } else {
          self.$refs.my_scroller.finishInfinite(true)
        }
      })
    },
    refresh (done) {
      let self = this
      this.filter.page = 1
      this.get_list(function () {
        self.list = []
        done()
      })
    },
    infinite (done) {
      this.get_list(done)
    },
    // 积分申请详情
    detail (data) {
      this.$router.push({ name: 'approval_detail', query: { review_id: data.id, title: '申请详情' } })
    }
  },
  mounted () {
    this.$nextTick(function () {
      this.$refs.my_scroller.finishInfinite(false)
      this.get_point_types()
      this.$refs.my_scroller.triggerPullToRefresh()
    })
  },
  activated () {
    // 使用keep_alive_update更新列表，不请求接口了，吴俊源
    /* if (this.isMounted) {
      this.$refs.my_scroller.triggerPullToRefresh()
    } else {
      this.isMounted = true
    } */
  },
  keep_alive_update: {
    // 运用缓存更新方法来完成返回后的更新
    update_approval_list: function (vm, data) {
      for (let i in vm.list) {
        if (vm.list[i].id == data.review_id) {
          vm.list.splice(i, 1)
        }
      }
      vm.$forceUpdate()
    }
  }
}
</script>

<style scoped lang="less">
.body_com {
  height: calc(100% - 1.8rem);
  position: relative;
}
.task_list {
  /deep/ & .van-cell__value {
    flex: none;
  }
  .title {
    font-size: 0.36rem;
    min-height: 22px;
    display: inline-block;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
}
.text_red{
  color: #F56C6C;
  background-color:rgba(245,108,108, 0.3);
  // border-radius:4px;
  // padding: 3px;
}
.text_yellow{
  color: #FF9600;
  background-color:rgba(255,150,0, 0.3);
  // border-radius:4px;
  // padding: 3px;
}
.text_green{
  color: #4BD964;
  background-color:rgba(75,217,100, 0.3);
  // border-radius:4px;
  // padding: 3px;
}
.color_red{
  color: #F56C6C;
}
.color_green{
  color: #4BD964;
}
.overText {
  word-break: break-all;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
  .point_text{font-size:0.4rem;}
</style>