web/src/components/common/Monitor.vue

<template>
  <div class="monitor-page">
    <ul class="monitor-ul">
      <li :class="{'first-bottom': showList.length && showList.includes(1)}" v-show="showList.length && showList.includes(1)">监控业主一旦发布与“我的订阅”相关的招标动态，会推送业主的招标项目、时间等公告信息。</li>
      <li :class="{'border-2': !showList.includes(1)}" v-show="showList.length && showList.includes(2)" @click="$emit('monitorStatus')">查看监控动态</li>
      <li v-show="showList.length && showList.includes(3)">
        <div class="list-top" @click="monitorList">
          <span>查看监控列表</span>
          <i class="el-icon-arrow-right"></i>
        </div>
        <div class="list-center">
          已监控 <span style="color: #2ABED1;font-weight: 700;">{{alreadyNum}}</span> 个，剩余 <span style="color: #2ABED1;font-weight: 700;">{{remainNum}}</span> 个
        </div>
        <div class="list-bottom" @click="monitorApply">申请监控更多业主＞</div>
      </li>
      <li @click="$emit('monitorCancel')" v-show="showList.length && showList.includes(4)">取消监控</li>
    </ul>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  props: {
    showList: {
      type: Array,
      default: () => [1]
    },
    alreadyNum: {
      type: Number,
      default: 0
    },
    // 剩余
    remainNum: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      monitor: {
      }
    }
  },
  computed: {
    ...mapState({
      info: state => state.user.info
    })
  },
  mounted () {
  },
  methods: {
    // 查看监控列表
    monitorList () {
      window.open('/swordfish/page_big_pc/my_client')
    },
    // 申请监控更多业主
    monitorApply () {
      if (this.info.vipStatus > 0) {
        this.$emit('showNeedSubmit')
      } else {
        this.$emit('show')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.monitor-page{
  .monitor-ul{
    li {
      padding: 12px 0;
      border-top: 1px solid #ECECEC;
      font-size: 16px;
      color: #1D1D1D;
      cursor: pointer;
      &:first-child{
        border: none;
        padding: 0 0 12px;
        font-size: 14px;
        color: #686868;
      }
      &.first-bottom{
        padding: 0;
      }
      &:last-child{
        padding: 12px 0 0;
      }
      &.border-2{
        border: none;
      }
      .list-top{
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #2ABED1;
      }
      .list-center {
        margin: 8px 0;
        color: #686868;
        font-size: 14px;
      }
      .list-bottom {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 32px;
        color: #2ABED1;
        font-size: 14px;
        background-color: #EAF8FA;
      }
    }
  }
}
</style>