gdy_qywx_m/src/components/body/message_list.vue

<template>
  <div style="height: 100%;">
    <!-- <van-nav-bar class="headerbar no-down-icon left-text-bold" :left-text="'消息通知'">
      <template slot="right">
        <van-icon v-if="is_app" name="scan" @click="$router.push({ name: 'scanqr' })"></van-icon>
      </template>
    </van-nav-bar> -->
    <div class="work_body_com">
      <scroller :on-refresh="chat_msg_session_list">
        <div class="message-header-box"></div>
        <div class="bgfff">
          <div class="message-header">
            <van-row gutter="20">
              <van-col span="12" class="event_list">
                <van-button class="event" block @click="$router.push({ name: 'approval_list' })" icon="static/images/a1.png">审批<van-tag class="num92" :class="{ num10: review_count > 9 }" color="#F56C6C" round v-show="review_count > 0">{{ review_count }}</van-tag> </van-button>
              </van-col>
              <van-col span="12" class="event_list">
                <van-button class="event" block @click="$router.push({ name: 'my_task' })" icon="static/images/a7.png">任务<van-tag class="num92" :class="{ num10: task_count > 9 }" color="#F56C6C" round v-show="task_count > 0">{{ task_count }}</van-tag></van-button>
              </van-col>
            </van-row>
          </div>
        </div>
        <van-cell v-if="list_map[index]" is-link v-for="(item, index) in list" :key="index" :title="list_map[index].name" @click="readMsg(index,list_map[index].name)" class="employee_cell">
          <!-- 时间 -->
          <span style="font-size:0.24rem;" v-if="item.newInfo">{{ item.newInfo.create_time | msg_time }}</span>
          <!-- ICON -->
          <template slot="icon">
            <img :src="list_map[index].avatar" class="employee_cell_head_img"/>
          </template>
          <!-- 数量 -->
          <template slot="default">
            <div class="tag_box">
              <van-tag class="tag num9" :class="{ num10: item.total > 9 }" v-if="item.total > 0" round color="#F56C6C"></van-tag>
            </div>
          </template>
          <!-- 内容 -->
          <template slot="label" v-if="item.newInfo">
            <span v-if="item.newInfo.title != ''" style="white-space:nowrap;text-overflow:ellipsis; width:3rem; display: inline-block; overflow: hidden;font-size:0.28rem;">
                {{item.newInfo.title}}
            </span>
            <span v-else style="white-space:nowrap;text-overflow:ellipsis; width:3rem; display: inline-block; overflow: hidden;font-size:0.28rem;">
                {{item.newInfo.title }}
            </span>
          </template>
          <template slot="label" v-else>
            <span style="white-space:nowrap;text-overflow:ellipsis; width:3rem; display: inline-block; overflow: hidden;font-size:0.28rem;">没有新通知</span>
          </template>
        </van-cell>
        <van-cell v-if="list != null && !list[index]" is-link v-for="(item, index) in list_map" :key="index" :title="item.name" class="employee_cell">
          <template slot="icon">
            <img :src="item.avatar" class="employee_cell_head_img" />
          </template>
          <template slot="label">
            <span style="white-space:nowrap;text-overflow:ellipsis; width:3rem; display: inline-block; overflow: hidden;font-size:0.28rem;">没有新通知</span>
          </template>
        </van-cell>
      </scroller>
    </div>
  </div>
</template>

<script>
import request from '@/utils/request'
import { getToken } from '@/utils/auth'
import Vue from 'vue'
import { Search, DropdownMenu, Empty, DropdownItem, SwipeCell, NoticeBar, Tag } from 'vant'
import moment from 'moment'
Vue.use(Search).use(DropdownMenu).use(DropdownItem).use(SwipeCell).use(NoticeBar).use(Tag).use(Empty)
export default {
  name: 'message_list',
  data () {
    return {
      tips: '没有通知',
      is_app: false,
      no_network: false,
      qr_scan_mark: false,
      plus_show: false,
      barcode: null,
      set_flash: false,
      list: [],
      total: 0,
      cid: '',
      db: null,
      review_count: 0,
      task_count: 0,
      list_map: {}
    }
  },
  filters: {
    msg_time (time) {
      let now = moment().valueOf() / 1000
      let sub = now - time
      let ret = ''
      if (sub < 3 * 24 * 3600) {
        ret = moment(time * 1000).format('MM-DD')
      } else if (sub < 24 * 3600) {
        ret = moment(time * 1000).format('HH:MM')
      } else if (sub < 3600) {
        ret = '1小时前'
      } else if (sub < 1800) {
        ret = '刚刚'
      }
      return ret
    }
  },
  sockets: {
    new_msg (data) {
      let self = this
      self.chat_msg_session_list(function () {})
    },
    send_msg_success (data) {
      let self = this
      self.chat_msg_session_list(function () {})
    },
    get_badge_num (data) {
      let json = JSON.parse(data)
      setBadgeNumber(json.num)
    }
  },
  methods: {
    clu () {
      this.$emit('shwoCunt', {data: 456})
    },
    get_message_cate () {
      let cate_list = false
      if (window.plus) {
        cate_list = plus.storage.getItem('message_cate_list')
      } else {
        cate_list = localStorage.getItem('message_cate_list')
      }
      if (cate_list) {
        this.list_map = JSON.parse(cate_list)
        return
      }
      request('get', '/api/notice/cate').then(res => {
        if (res.data.code == 1) {
          try {
            this.list_map = {}
            for (let i in res.data.data) {
              if (res.data.data[i].is_list == 1 && res.data.data[i].remark != "考勤通知") {//当前无考勤通知，在此处先做限制
                this.list_map[res.data.data[i].cate] = { name: res.data.data[i].remark, avatar: res.data.data[i].icon }
              }
            }
            if (window.plus) {
              plus.storage.setItem('message_cate_list', JSON.stringify(this.list_map))
            } else {
              localStorage.setItem('message_cate_list', JSON.stringify(this.list_map))
            }
          } catch (e) {
            console.log(e)
          }
        }
      })
    },
    readMsg (item, title) {
      console.log('11111111111')
      console.log(item)
      console.log(title)
      this.$router.push({ name: 'message_detail', query: { cate: item, title: title }})
    },
    chat_msg_session_list (done) {
      var http1 = request('get', '/api/notice/index', '', 'v2')// 获取未读信息
      var http2 = request('get', '/api/integral/review/list', {type: 'waiting', page: 1, pt_id: 0, source_type: 0})// 获取为审批数量
      var http3 = request('get', '/api/integral/work/list', {status: 'running', page: 1, pt_id: 0})// 获取任务数
      Promise.all([http1, http2, http3]).then(item => {
        if (item[0]) {
          var data = item[0].data.data.list
          this.list = data
          this.total = 0
          for (let i in data) { this.total += data[i].total }
          // 设置APP的角标
          if (window.plus) { setBadgeNumber(this.total) }
        }
        if (item[1]) {
          this.review_count = item[1].data.data.total
        }
        if (item[2]) {
          this.task_count = item[2].data.data.total
          done()
        }
      })
    },
    get_review_count () {
      request('get', '/api/integral/review/list', {
        type: 'waiting',
        page: 1,
        pt_id: 0,
        source_type: 0
      }).then(res => {
        if (res.data.code == 1) {
          this.review_count = res.data.data.total
        }
      })
    },
    get_task_count () {
      request('get', '/api/integral/work/list', {
        status: 'running',
        page: 1,
        pt_id: 0
      }).then(res => {
        if (res.data.code == 1) {
          this.task_coun = res.data.data.total
        }
      })
    }
  },
  created () {
    this.get_message_cate()
  },
  mounted () {
    if (window.plus) {
      this.is_app = true
    }
  },
  keep_alive_update: {
    // 运用缓存更新方法来完成返回后的更新
    update_approval_list: function (vm, data) {
      vm.chat_msg_session_list(function () {})
      vm.clu();
    },
    update_task_message: function (vm, data) {
      vm.chat_msg_session_list(function () {})
      vm.clu();
    },
    update_message_list: function (vm, data) {
      vm.$store.dispatch('get_user_info', getToken()).then(res => {
        vm.chat_msg_session_list(function () {})
        vm.clu();
      })
    },
    update_msgInformation: function (vm, data) {
      vm.chat_msg_session_list(function () {})
      vm.clu();
    }
  }
}
</script>

<style scoped>
.left-text-bold /deep/ .van-nav-bar__left {
  font-size: 0.4rem !important;
  font-weight: bold;
}
.cur_company_name {
  line-height: 1rem;
  text-indent: 0.5em;
  cursor: pointer;
}

.menu_title {
  text-indent: 0.5em;
  margin-bottom: 0.16rem;
}

.work_body_com {
  /* height: calc(100% - 0.92rem); */
  height: calc(100%);
  position: relative;
}

.van-radio-group {
  padding: 0.24rem 0.32rem;
}

.van-radio {
  height: 0.8rem;
}

.employee_cell_head_img {
  width: 0.96rem;
  height: 0.96rem;
  -webkit-border-radius: 0.1rem;
  -moz-border-radius: 0.1rem;
  border-radius: 0.1rem;
  margin-right: 0.32rem;
}

.employee_cell {
  padding: 0.2rem 0.32rem;
}

.employee_cell .van-cell__title {
  line-height: 0.5rem;
  font-size: 0.36rem;
  font-weight: bold;
}

.employee_cell .van-cell__title .van-cell__value {
  font-size: 0.28rem;
}

.employee_cell .van-cell__right-icon {
  display: none;
}

.employee_cell .van-cell__label {
  font-weight: normal;
  font-size: 0.28rem;
}

.user_index_scroller_com .van-icon-scan {
  color: #fff !important;
  padding-right: 0.32rem;
}

.user_index_scroller_com .van-icon-scan:before {
  font-size: 0.4rem;
}

.message-header .van-tag {
  display: inline-block;
  text-align: center;
  line-height: 0.4rem;
  font-size: 0.28rem;
  width: 0.4rem;
  height: 0.4rem;
  padding: 0;
  -webkit-border-radius: 0.4rem !important;
  -moz-border-radius: 50px;
  border-radius: 50px;
  position: absolute;
  /* font-family: Arial; */
}

.message-header .van-tag.gt9 {
  padding: 0 0.1rem;
  width: auto;
}

.message-header-box {
  position: relative;
  width: 100vw;
  height: 0.8rem;
  background: #26a2ff;
  z-index: 1;
}

.message-header {
  position: relative;
  width: calc(100vw - 0.64rem);
  height: 1.44rem;
  padding: 0;
  margin-top: -0.6rem;
  margin-left: auto;
  margin-right: auto;
  background: #fff;
  border-radius: 0.16rem;
  box-shadow: 0rem 0.04rem 0.12rem rgba(0, 0, 0, 0.03);
  z-index: 2;
  background-color: #fff;
}

.message-header /deep/ .van-row {
  margin: 0 !important;
  padding: 0;
}

.message-header .event_list {
  width: calc(100% / 2);
  padding: 0 !important;
  margin-left: -0.2rem;
}

.message-header .event_list .event {
  display: block;
  text-align: center;
  margin: 0.24rem 0;
  padding: 0;
  border: none;
  background: transparent;
}

.message-header .event_list .event:before {
  display: none;
  background: none;
}

.message-header .event_list .event img {
  display: inline-block;
  width: 0.98rem;
  height: 0.98rem;
  margin-right: 0.1rem;
}

.message-header .event_list .event /deep/ .van-button__text {
  display: inline-block;
  font-size: 0.32rem;
  font-weight: bold;
  margin-top: 0.1rem;
}

.message-header .event_list .event /deep/ .van-tag--round {
  margin: 0.2rem 0 0 0.1rem;
}
.bgfff {
  background-color: #fff;
  padding-bottom: 0.32rem;
}
.employee_cell:after {
  left: 0rem;
}

.num9 {
  display: inline-block;
  text-align: center;
  line-height: 0.2rem;
  font-size: 0.28rem;
  width: 0.2rem;
  height: 0.2rem;
  padding: 0px;
  border-radius: 0.4rem;
  z-index: 1;
  background-color: #f56c6c;
  /* font-family: Arial; */
  font-weight: normal;
}
.num92 {
  display: inline-block;
  text-align: center;
  line-height: 0.4rem;
  font-size: 0.28rem;
  width: 0.4rem;
  height: 0.4rem;
  padding: 0px;
  border-radius: 0.4rem;
  z-index: 1;
  background-color: #f56c6c;
  /* font-family: Arial; */
  font-weight: normal;
}
.num10 {
  padding: 0 0.08rem !important;
  width: auto !important;
  max-width: 0.8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>