mall-web-ssr/components/mobile/center/Message.vue

<template>
  <div class="mobile-center">
    <div class="com-mobile-header mobile-center-header">
      <a @click="goLastPage"><i class="iconfont icon-fanhui"></i></a>
      <p>消息</p>
      <p class="en-name"><img :src="`/images/mobile/center/${user.data.enterprise.uu ? 'en' : 'self'}.png`" alt="">{{currentEnName}}</p>
    </div>
    <div class="mobile-content">
      <div v-if="msgList && msgList.length" class="message-list" v-bind:key="item.id" v-for="item in msgList">
        <div class="content">
          <div class="new-dot">
            <b v-if="item.isRead === 0"></b>
            <img src="/images/mobile/center/user/message.png" alt="">
          </div>
          <div class="message">
            <p>{{item.createTime | time}}</p>
            <a :href="item.type === 'MALL跳转买家已报价页面' ? '/mobile/center/user/seek?seekType=done' : item.type === 'MALL公共询价' ? '/mobile/center/vendor/seek?seekType=wait&messageType=my' : item.type === '商城公共询价采纳结果' ? '/mobile/center/vendor/seek?seekType=done' : ''"
               v-if="item.type"
               :title="item.content" :class="{info: item.isRead === 0}">{{item.content}}</a>
            <a v-else :title="item.content" class="noLink" :class="{info: item.isRead === 0}">{{item.content}}</a>
          </div>
        </div>
      </div>
      <empty-status v-if="!msgList.length"  :showLink="true" :text="'抱歉，暂无消息'"></empty-status>
    </div>
    <pull-up :searchMore="fetching" :allPage="allPage" :page="page" @pullUpAction="onPullUpAction"></pull-up>
  </div>
</template>
<script>
  import { RemindBox, PullUp, EmptyStatus } from '~components/mobile/common'
  export default {
    data () {
      return {
        count: 10,
        page: 1,
        isChange: false,
        msgList: []
      }
    },
    computed: {
      user () {
        return this.$store.state.option.user
      },
      messageList () {
        return this.$store.state.messageShow.messageList.list.data
      },
      fetching () {
        return this.$store.state.messageShow.messageList.list.fetching
      },
      allPage () {
        return Math.floor(this.messageList.totalElements / this.messageList.size) + Math.floor(this.messageList.totalElements % this.messageList.size > 0 ? 1 : 0)
      }
    },
    components: {
      RemindBox,
      PullUp,
      EmptyStatus
    },
    watch: {
      'messageList': {
        handler: function (val) {
          if (val) {
            if (this.isChange) {
              this.msgList = val.content || []
              this.isChange = false
            } else {
              this.msgList = [...this.msgList, ...(val.content || [])]
              this.getRead()
            }
          }
        },
        immediate: true
      }
    },
    methods: {
      reloadList: function () {
        this.$store.dispatch('messageShow/getAllMessage', { receiverUu: this.user.data.userUU, receiverEnuu: this.user.data.enterprise.uu, consumerApp: 'MALL', page: this.page, count: this.count, sorting: {'createTime': 'DESC'} })
      },
      onPullUpAction: function () {
        this.page++
        this.reloadList()
      },
      getRead () {
        let ids = []
        this.msgList.forEach((value) => {
          if (value.isRead !== 1) {
            ids.push(value.id)
          }
        })
        if (ids.length !== 0) {
          this.$http.post('/messages/read', {receiverUu: this.user.data.userUU, receiverEnuu: this.user.data.enterprise.uu, messageId: ids.join(','), consumerApp: 'MALL'})
            .then((res) => {
              console.log(res.data)
            })
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  .mobile-content {
    margin-top: .6rem !important;
    padding: .2rem;
    background: #f1f3f6;
    .com-none-state {
      padding-bottom: 100%;
    }
    .message-list {
      background: #fff;
      padding: 0 .15rem 0 .2rem;
      &:active{
         background: #e1e1e1;
      }
      .content {
        padding: .14rem 0;
        overflow: hidden;
        border-bottom: 1px solid #d3d3d3;
        .new-dot {
          position: relative;
          b{
            position: absolute;
            left: .1rem;
            top: .25rem;
            width: .16rem;
            height: .16rem;
            border-radius: 50%;
            background: #fc0405;
          }
        }
        img{
          margin: .3rem 0 0 .12rem;
          float: left;
          width: .8rem;
          height: .8rem;
        }
        .message{
          margin-left: .24rem;
          float: left;
          width: 5.4rem;
          p{
            display: inherit;
            margin-bottom: .1rem;
            text-align: right;
            font-size: .24rem;
            color: #666;
          }
          a{
            font-size: .28rem;
            color: #666;
            word-break: break-all;
            padding: 0;
            &.info {
              color: #333;
            }
            &:active {
              background: #e1e1e1;
            }
          }
        }
      }
    }
  }
  .message-list:last-child .content{
    border-bottom: none;
  }
</style>