gdy_qywx_m/src/components/pk/pk_log.vue

<template>
  <div style="height: 100%">
    <div class="pk_log_scroller">
      <scroller ref="scroller" :on-refresh="refresh" :on-infinite="infinite">
        <div style="padding: 0 0.32rem">
          <van-panel v-for="(item,index) in list " :key="index" :title="item.target_name" :desc="item.remark" :status="item.point.toString()">
            <template slot="header">
              <div class="panelHead">
                <div style="-webkit-box-flex: 1;flex: 1;">
                  <span style="font-size: .32rem;"><Wxopendata type="userName" :openid="item.target_name"></Wxopendata></span>
                  <div style="margin-top: .06rem;color: #969799;font-size: .24rem;line-height: .36rem;">
                    {{item.remark}}
                  </div>
                </div>
                <div style="overflow: visible;color: #ee0a24;position: relative;text-align: right;vertical-align: middle;word-wrap: break-word;">
                  <span style="">{{item.point.toString()}}</span>
                </div>
              </div>
            </template>

            <div class="list_detail">
              <span>时间：{{item.event_time}}</span>
              <span v-if="item.team_name">团队名称：{{item.team_name}}</span>
              <span class="flex-box">
                  <span class="flex-1"> 操作人：<Wxopendata type="userName" :openid="item.recorder_name"></Wxopendata></span>
                  <span v-if="item.target_id>0" class="color-blue">个</span>
                  <span v-else class="color-blue">团</span>
              </span>
            </div>
          </van-panel>
        </div>
        <noData :list="list" />
      </scroller>
    </div>

    <div class="record_list" v-if="(hasPermission || enbaleLeaderRecord) && filter.pk_status === 'running'">
      <van-row gutter="8" type="flex" justify="center">
        <van-col :span="12">
          <van-button type="info" block @click="add_log_employee">录入个人积分</van-button>
        </van-col>
        <van-col :span="12">
          <van-button type="info" block @click="add_log_teams">录入团队积分</van-button>
        </van-col>
      </van-row>
    </div>
  </div>
</template>
<script>
import request from '@/utils/request'
import Vue from 'vue'
import { panel } from 'vant'
Vue.use(panel)
export default {
  props: {
    createInfo: {
      type: Object,
      default: {}
    }
  },
  comments: {},
  // 数据
  data () {
    return {
      get_id: this.$route.query.id,
      list: null,
      filter: {
        pk_id: this.$route.query.id,
        pk_status: this.$route.query.pk_status,
        page: 1
      },
      pk_info: {}
    }
  },
  computed: {
    hasPermission () {
      const { createInfo } = this
      const { is_creator, id } = this.$store.getters.user_info
      let is=is_creator == 1 || id == createInfo.creatorId || createInfo.manages.has(id.toString())
      console.log('hasPermission',is_creator, id,JSON.stringify(this.createInfo),is)
      return is
    },
    enbaleLeaderRecord () {
      const { id } = this.$store.getters.user_info
      const { leader_can_record, leader_ids } = this.pk_info
      let is=leader_can_record == 1 && leader_ids.findIndex(o => o === id) > -1
      console.log('enbaleLeaderRecord',id,leader_can_record, leader_ids,is)
      return is
    }
  },
  // 方法
  methods: {
    convertToString (value) {
      if (typeof value === 'string' || !value) {
        return value
      }
      return value.toString()
    },
    // 获取列表
    get_list (done) {
      let self = this
      request('get', '/api/integral/pk/log', self.filter).then((res) => {
        done()
        const { scroller } = this.$refs
        if (res.data.code == 1) {
          scroller && scroller.finishInfinite(!res.data.data.list.length != '10') // 停止上滚加载下一页，由于服务器端没有统一空数据和正常数据的格式，所以通过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 {
          scroller && scroller.finishInfinite(true)
        }
      })
    },
    get_pk_info () {
      let self = this
      let data = {
        pk_id: self.$route.query.id
      }
      request('get', '/api/integral/pk/info', data).then((res) => {
        if (res.data.code == 1) {
          self.pk_info = res.data.data
        } else {
          self.$toast(res.data.msg)
        }
      })
    },
    refresh (done) {
      let self = this
      setTimeout(() => {
        this.filter.page = 1
        this.get_list(function () {
          self.list = []
          done()
        })
      }, 100)
    },
    infinite (done) {
      this.get_list(done)
    },

    // 个人积分添加
    add_log_employee () {
      this.$router.push({ name: 'add_log', query: { log_type: 'employee', pk_id: this.get_id } })
    },
    // 团队积分添加
    add_log_teams () {
      this.$router.push({ name: 'add_log', query: { log_type: 'team', pk_id: this.get_id } })
    },
    // 加载
    showLoading () {
      this.$toast.loading({
        loadingType: 'spinner',
        message: '正在处理'
      })
    }
  },
  // 生命周期 --- 创建完成
  created () {
    // created 创建完毕状态
    this.$nextTick(() => {
      this.$refs.scroller.finishInfinite(false)
    })
    console.log('filter',JSON.stringify(this.filter))
    this.get_pk_info()
  }
}
</script>
<style scoped>
.body_com {
  height: calc(100% - 1rem);
  position: relative;
}
.pk_log_scroller {
  height: calc(100% - 1rem);
}
.record_list {
  padding: 0 0.32rem;
}
.panelHead{
  border-bottom:.02rem solid #edebf0;
  padding: .24rem .32rem;
  position: relative;
  display: flex;
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
  color: #323233;
  line-height: .48rem;
  background-color: #fff;
}
</style>