gdy_qywx_m/src/components/integral/integral_entry_list.vue

<template>
  <div class="teampk_box">
    <van-nav-bar :title="title" left-text="返回" @click-left="$route_back" left-arrow style="font-size:0.32rem;"></van-nav-bar>

    <van-search placeholder="请输入事件内容搜索" v-model="filter.keyword"/>

    <van-tabs v-model="type">
      <van-tab v-for="(item,index) in tabs_arr" :key="index" :title="item.title" :name="item.code"></van-tab>
    </van-tabs>

    <div class="body_com has_header">
      <scroller ref="my_scroller" :on-refresh="refresh" :on-infinite="infinite">
        <div v-show="!show_list">
          <van-cell-group style="padding: 0.32rem;" v-for="(item,index) in list " :key="index" @click="event_detail(item)">
            <div class="re-item__header">
              <userImage class="fl" fontSize="0.28"  :user_name="item.employee_name" :img_url="item.employee_img_url" width="0.72rem" height="0.72rem"  style="margin-right: 0.2rem"></userImage>
              <!-- <span class="re-item__name">{{employee_name(item.employee_id) || item.employee_name}}</span> -->
              <span class="re-item__name"><Wxopendata type="userName" :openid="employee_name(item.employee_id) || item.employee_name"></Wxopendata></span>
              <span class="re-item__value"
                :class="{color_red:(item.event_type == 2 || item.event_type == 4 || item.event_type == 6 || item.event_type == 8 || item.event_type == 10), color_green: (item.event_type == 1 || item.event_type == 3 || item.event_type == 5 || item.event_type == 7 || item.event_type == 9)}"><span v-show="item.event_type == 1 || item.event_type == 3 || item.event_type == 5 || item.event_type == 7 || item.event_type == 9">+</span>{{item.point}} {{$isPt_id(item.pt_id)}}</span>
              <!-- <span class="re-item__value color_green"><span v-show="item.event_type == 1 || item.event_type == 3 || item.event_type == 5 || item.event_type == 7 || item.event_type == 9">+</span>{{item.point}}</span> -->
            </div>
            <div style="padding-left: 0.72rem; margin-left: 0.2rem; font-size: 0.32rem">
              <div class="remark re-item__status" style="font-size:0.32rem;color:#666">{{item.remark}}</div>
              <div class="clear" style="margin-top: 0.3rem; font-size: 0.28rem">
                <span class="fl color_ccc">{{moment(item.event_time).format('YYYY-MM-DD')}}</span>
                <span v-if="item.point < 0" class="fr color_red bg">扣分成功</span>
                <span v-else class="fr color_green bg">奖分成功</span>
                <!-- <span class="fr color_green bg">{{item.point < 0?'扣分成功':'奖分成功'}}</span> -->
              </div>
            </div>
          </van-cell-group>
        </div>
        <div v-show="show_list">
          <van-cell-group style="padding: 0.32rem;" v-for="(item,index) in list " :key="index" @click="detail(item)">
            <div class="re-item__header">
              <userImage class="fl" fontSize="0.24" :id="item.employee_id" :user_name="item.employee_name" :img_url="item.employee_img_url" width="0.72rem" height="0.72rem"  style="margin-right: 0.2rem"></userImage>
              <!-- <span>{{employee_name(item.employee_id) || item.employee_name}}</span> -->
              <span><Wxopendata type="userName" :openid="employee_name(item.employee_id) || item.employee_name"></Wxopendata></span>
            </div>
            <div style="padding-left: 0.72rem; margin-left: 0.2rem; font-size: 0.32rem">
              <div class="remark" v-show="item.remark" style="font-size:0.32rem;color:#666">{{item.remark.customize}}</div>
              <div class="clear" style="margin-top: 0.3rem; font-size: 0.24rem">
                <span class="fl color_ccc">{{moment(item.event_time).format('YYYY-MM-DD')}}</span>
                <span class="fr color_yellow bg" v-show="item.status == 0" >待审批</span>
                <span class="fr color_red bg" v-show="item.status == 2" >被驳回</span>
              </div>
            </div>
          </van-cell-group>
        </div>
        <noData :list="list"></noData>
      </scroller>
    </div>
  </div>
</template>

<script>
import request from '@/utils/request'
import userImage from '@/components/common/user_image'
import Vue from 'vue'
import {Tab, Tabs, Search} from 'vant'
import {_debounce} from '@/utils/auth'
import moment from 'moment'
Vue.use(Tab).use(Tabs).use(Search)
export default {
  data () {
    return {
      title: '我奖扣的',
      list: null,
      type: 'all',
      show_list: false,
      isInfinite: true,
      moment:moment,
      filter: {
        page: 1,
        type: 'all',
        page_size: '10',
        pt_id: 0,
        keyword: '',
        recorder_id: ''
      },
      url: '/api/integral/statistics/integral',
      tabs_arr: [
        {title: '奖扣成功', code: 'all'},
        {title: '待审批', code: 'waiting'},
        {title: '被驳回', code: 'refuse'}
      ]
    }
  },
  watch: {
    'type': function (val) {
      let self = this
      this.list = []
      switch (val) {
        case 'waiting':
          self.filter.type = val
          self.filter.page = 1
          self.url = '/api/integral/review/entry/list'
          self.show_list = true
          self.refresh(function () { self.$toast.clear() })
          break
        case 'refuse':
          self.filter.type = val
          self.filter.page = 1
          self.url = '/api/integral/review/entry/list'
          self.show_list = true
          self.refresh(function () { self.$toast.clear() })
          break
        default:
          self.filter.type = val
          self.filter.page = 1
          self.url = '/api/integral/statistics/integral'
          self.show_list = false
          self.refresh(function () { self.$toast.clear() })
          break
      }
    },
    'filter.keyword': {
      deep: true,
      handler: _debounce(function () {
        this.filter.page = 1
        this.isInfinite = true
        this.get_pk_list(function () {})
      })
    }
  },
  components: {userImage},
  mounted () {
    this.filter.recorder_id = this.$store.getters.user_info.id
  },
  methods: {
    searchVal (val) {
      this.filter.keyword = val || ''
      this.filter.page = 1
      this.isInfinite = true
      this.get_pk_list(function () {})
    },
    employee_name (id) {
      let employee = this.$store.getters.employee_map
      if (employee[id]) {
        return employee[id].name
      }
    },
    // 获取列表
    get_pk_list (done) {
      let self = this
      request('get', self.url, self.filter).then((res) => {
        if (res.data.code == 1) {
          var lists = res.data.data.list
          if (lists.length != 10) {
            this.isInfinite = false
          };
          if (self.filter.page === 1) {
            self.list = lists
          } else {
            self.list = self.list.concat(lists)
          }
          self.$refs.my_scroller.finishInfinite(lists.length != 10) // 停止上滚加载下一页，由于服务器端没有统一空数据和正常数据的格式，所以通过total字段来判定数据是否存在下一页
        } else {
          self.$refs.my_scroller.finishInfinite(true)
        }
        done()
      })
    },
    refresh (done) {
      this.filter.page = 1
      this.isInfinite = true
      this.get_pk_list(done)
    },
    infinite (done) {
      if (this.isInfinite) {
        this.filter.page++
        this.get_pk_list(done)
      }
    },
    event_detail (item) {
      this.$router.push({name: 'event_detail', query: {id: item.id}})
    },
    detail (item) {
      console.log(item)
      this.$router.push({name: 'approval_detail', query: {review_id: item.id}})
    }
  },
  created () {
    this.$nextTick(() => {
      this.$refs.my_scroller.finishInfinite(false)
    })
    this.employee_name()
  },
  keep_alive_update: {
    // 运用缓存更新方法来完成返回后的更新
    update_list_pk: function (vm, data) {
      for (let i in vm.list) {
        if (vm.list[i].id == data) {
          console.log(data)
          vm.list.splice(i, 1)
        }
      }
    }
  }
}
</script>

<style scoped>
  .body_com{height: calc(100% - 2rem); position: relative;}

  .re-item__header {
    display: flex;
    align-items: center;
  }

  .re-item__name {
    font-size:0.36rem;
    display: flex;
    flex: 1;
  }

  .re-item__status {

  }

  .remark{
    display: -webkit-box;
    /* padding-top: 0.24rem; */
    /* color:#666; */
    text-overflow: ellipsis;
    overflow : hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 0.44rem;
    /* border-top:1px #f8f8f8 solid; */
  }
  .color_green.bg{
    /* background-color: #4BD9641a; */
    border-radius: 0.06rem;
    padding: 0.06rem;
  }
  .color_red.bg{
    /* background-color: #F56C6C1a; */
    border-radius: 0.06rem;
    padding: 0.06rem;
  }
  .color_yellow{
    /* background-color: #ff96001a; */
    border-radius: 0.06rem;
    padding: 0.06rem;
  }

  .color_green {
    color: #53b87f !important;
  }

</style>