gdy_qywx_m/src/components/integral/customBRankDetail.vue

<template>
  <div>
    <van-nav-bar :title="title" left-text="返回" @click-left="$route_back" left-arrow></van-nav-bar>
    <van-dropdown-menu>
      <van-dropdown-item :title="dateDropdownItemTitle" ref="dateDropdownItem">
        <van-datetime-picker
          v-model="month"
          type="year-month"
          :show-toolbar="false"
          item-height="40"/>
        <div class="date-picker__toolbar">
          <van-button
            class="reset-button button-border-none"
            block
            square
            color="rgba(38,162,255,0.2)"
            @click="onResetDate"
          >重置
          </van-button>
          <van-button class="button-border-none" block square type="info" @click="onConfirmDate">确认</van-button>
        </div>
      </van-dropdown-item>
      <!--
      <van-dropdown-item :title="deptDropdownItemTitle" ref="deptDropdownItem">
        <DeptSelectorDropdown @onConfirm="onConfirmDept"/>
      </van-dropdown-item>
       -->
      <van-dropdown-item title="规则分类" ref="ruleDropdownItem">
        <RuleCategorySelDropdown @onConfirm="onConfirmRule" @onCancel="rule = null" />
      </van-dropdown-item>
      <div @click="sortNumber" class="dropdown-menu__item">
        <span :class="{'asc-order': !sort}">{{ sort ? '降序': '升序' }}</span>
      </div>
    </van-dropdown-menu>
    <div class="tableHeader">排名不包含初始分和工龄分</div>
    <div class="body_com has_header">
      <scroller ref="scroller" :on-refresh="onRefresh" :on-infinite="onInfinite">
        <van-cell v-for="(item,index) in list" :key="index" >
          <template slot="icon">
            <div class="rank-item">
              <icon :name="mapRankIconName[index]" v-if="index < 3 && sort" class="rank-item__icon"></icon>
              <icon name="rank-first" v-if="item.rank == 1&& !sort " class="rank-item__icon"></icon>
              <icon name="rank-second" v-if="item.rank == 2&& !sort " class="rank-item__icon"></icon>
              <icon name="rank-third" v-if="item.rank == 3&& !sort " class="rank-item__icon"></icon>
              <span v-if="item.rank > 3" class="rank-item__icon-label">{{ item.rank }}</span>
            </div>
          </template>
          <template slot="title">
            <div style="display: flex;">
              <userImage :user_name="item.employee_name" :img_url="item.employee_img_url" style="margin-right: 0.1rem"></userImage>
              <span style="line-height: 0.8rem">{{item.employee_name}}</span>
            </div>
          </template>
          <template slot="right-icon">
            <span :class="item.point < 0?'text-red':'text-blue'" style=" line-height: 0.8rem;">{{item.point}}</span>
          </template>
        </van-cell>
      </scroller>
    </div>
  </div>
</template>
<script>
import request from '@/utils/request'
import moment from 'moment'
import userImage from '@/components/common/user_image'
import RuleCategorySelDropdown from '@/components/common/RuleCategorySelDropdown'

import Vue from 'vue'
import { Empty, Picker, DropdownMenu, DropdownItem, DatetimePicker, List } from 'vant'
Vue.use(Empty).use(Picker).use(DropdownMenu).use(DropdownItem).use(DatetimePicker).use(List)
export default {
  // 数据
  data () {
    return {
      title: '',
      list: [],
      filter: {
        group_id: '',
        month: moment().format('YYYY-MM'),
        sort: 'DESC',
        pt_id: '3',
        page: '1',
        page_size: '10'
      },
      sort: true,
      month: new Date(),
      loading: true,
      dateDropdownItemTitle: moment().format('YYYY年MM月'),
      mapRankIconName: {0: 'rank-first', 1: 'rank-second', 2: 'rank-third'}
    }
  },
  // 组件
  components: {userImage, RuleCategorySelDropdown},
  // 方法
  methods: {
    sortNumber () {
      this.sort = !this.sort
      if (this.sort) {
        this.filter.sort = 'DESC'
      } else {
        this.filter.sort = 'ASC'
      }
      this.filter.page = 1
      this.get_list(() => this.$toast.clear())
    },
    onResetDate () {
      this.month = new Date()
      this.dateDropdownItemTitle = moment().format('YYYY年MM月')
    },
    onConfirmDate () {
      this.filter.month = moment(this.month).format('YYYY-MM')
      this.dateDropdownItemTitle = moment(this.month).format('YYYY年MM月')
      this.$refs.dateDropdownItem.toggle()
      this.$refs.scroller.triggerPullToRefresh()
    },
    onConfirmRule (ruleIds) {
      if (!ruleIds) {
        delete this.filter.rule
      } else {
        this.filter.rule = ruleIds
      }
      this.$refs.ruleDropdownItem.toggle()
      this.$refs.scroller.triggerPullToRefresh()
    },
    // 加载
    showLoading () {
      this.$toast.loading({
        loadingType: 'spinner',
        message: '正在处理'
      })
    },
    get_list (done) {
      let self = this
      self.showLoading()
      const headers = {'Accept': 'application/vnd.test.v2+json'}
      const params = {...this.filter}
      request('get','/api/integral/statistics/ranking',params,'v2').then((res) => {
        done()
        if (res.data.code == 1) {
          self.$refs.scroller.finishInfinite(res.data.data.list.length != 10) // 停止上滚加载下一页，由于服务器端没有统一空数据和正常数据的格式，所以通过total字段来判定数据是否存在下一页
          const {list} = res.data.data
          if (self.filter.page === 1) {
            self.list = list
          } else {
            self.list = self.list.concat(list)
          }
          self.filter.page++
        } else {
          self.$refs.scroller.finishInfinite(true)
        }
      }).finally(() => {
        this.$toast.clear()
      })
    },
    onRefresh (done) {
      let self = this
      this.filter.page = 1
      this.get_list(function () {
        self.list = []
        done()
      })
    },
    onInfinite (done) {
      this.get_list(done)
    }
  },
  // 生命周期 --- 创建完成
  created () {
  },
  // 组件挂载完成
  mounted () {
    if (this.$route.query.id) {
      this.filter.group_id = this.$route.query.id
      this.title = this.$route.query.name
      this.$refs.scroller.finishInfinite(false)
    }
  }
}
</script>
<style scoped lang="less">
  .body_com{height: calc(100% - 2.55rem); position: relative;}
  .date-picker__toolbar {
    display: flex;
    flex-direction: row;

    & .reset-button {
      color: #26a2ff !important;
    }

    & .button-border-none {
      border: transparent !important;
    }
  }

  .dropdown-menu__item {
    position: relative;
    display: flex;
    flex: 1;
    min-width: 0;
    font-size: 0.3rem;
    color: #323233;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    & > span {
      position: relative;
      box-sizing: border-box;
      max-width: 100%;
      padding: 0 0.16rem;
      color: #323233;
      font-size: 0.3rem;
      line-height: 0.36rem;

      &:after {
        position: absolute;
        top: 50%;
        right: -0.08rem;
        margin-top: -0.1rem;
        border: 0.06rem solid;
        border-color: transparent transparent currentColor currentColor;
        transform: rotate(-45deg);
        opacity: .8;
        content: '';
      }

      &.asc-order:after {
        margin-top: -0.02rem;
        transform: rotate(135deg);
      }
    }
  }
  .tableHeader{
    font-size: 0.28rem;
    color: #969799;
    padding: 0.1rem 0.32rem;
  }
  .rank-item{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding-right: 0.32rem;
    width: 0.64rem;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    & .rank-item__icon{
      width: 0.64rem;
    }
  }
  .text-red{
    color: rgb(245, 108, 108);
  }
  .text-blue{
    color: #26A2FF;
  }
</style>