xps-web-csat-v5/src/views/hos/components/ArtPanel.vue

<template>
  <div class="ArtPanel-group-box" :style="{height:height}">
    <div class="group-title">
      {{ title }}
      <el-link @click="showMoreArt(dataList,'最新动态');">更多 <i class="el-icon-caret-right" /></el-link>
    </div>
    <vuescroll v-if="dataList" :ops="ops" style="height: calc(100% - 40px)">
      <div class="art_list_block">
        <div
          v-for="(item, index) in dataList"
          :key="index"
          class="item"
          @click="showDetail(item)"
        >
          <div class="icon">
            <i class="el-icon-s-comment" />
          </div>

          <div class="info">
            <div class="lf clearfix">
              <h4>{{ item.artTitle }}</h4>
            </div>
            <div class="rt">
              <div class="el-tag-time">
                <span style="padding-left:0;color:#c4c1c1;font-size: 10px;">{{ item.issuedAt }}</span>
              </div>

              <div class="el-tag-art">
                <el-tag v-if="item.artCatId>=10 && item.artCatId <20" size="mini" class="custom-tag tag-1">平安医院</el-tag>
                <el-tag v-if="item.artCatId>=20 && item.artCatId <30" size="mini" class="custom-tag tag-2">质量医院</el-tag>
                <el-tag v-if="item.artCatId>=31 && item.artCatId <40" size="mini" class="custom-tag tag-3">满意医院</el-tag>
                <el-tag v-if="item.artCatId>=40 && item.artCatId <50" size="mini" class="custom-tag tag-4">智慧医院</el-tag>
                <el-tag v-if="item.artCatId>=50 && item.artCatId <60" size="mini" class="custom-tag tag-5">健康医院</el-tag>
                <el-tag v-if="item.artCatId>=60 && item.artCatId <69" size="mini" class="custom-tag tag-6">节约型医院</el-tag>
              </div>
            </div>
          </div>
        </div>
      </div>
    </vuescroll>
    <ArtDetail ref="ArtDetail" />
  </div>
</template>
<script>
import vuescroll from 'vuescroll'
import { getRecentArtByList } from '@/api/system/artApi'
import ArtDetail from '@/views/system/art/components/ArtDetail'
export default {
  name: 'ArtPanel',
  components: {
    vuescroll,
    ArtDetail
  },
  props: {
    title: {
      type: [String],
      default: '最新动态'
    },
    artCatId: {
      type: [String, Number],
      default: undefined
    },
    artCatList: {
      type: [String, Number],
      default: undefined
    },
    more: {
      type: [String],
      default: undefined
    },
    height: {
      type: [String],
      default: 'calc(100vh - 85px)'
    }
  },
  data() {
    return {
      ops: {
        bar: {
          keepShow: false,
          background: 'rgba(144, 147, 153, 0.4)',
          onlyShowBarOnScroll: false
        }
      },
      listLoading: false,
      dataList: [],
      conditions: {
        artCatId: this.artCatId,
        artCatList: this.artCatList
      }
    }
  },
  mounted() {
    this.getData()
  },
  methods: {

    getData() {
      getRecentArtByList(this.conditions).then((resp) => {
        const { code, msg, data } = resp
        if (code === 200) {
          this.dataList = data
        } else {
          this.$message.error(msg)
        }
      }).catch((error) => {
        console.log(error)
      })
    },

    showMoreArt(data, title) {
      let path = '/hos/news/index'
      if (this.more) {
        path = this.more
      }
      this.$router.push({
        path
      })
    },
    showDetail(item) {
      const { artId } = item
      this.$refs.ArtDetail.showModel(artId)
    }
  }
}
</script>
<style lang="scss" scoped>
  .ArtPanel-group-box {
    width: calc(100% - 15px);
    border-top: 4px solid #1F3C51;
    background-color: #0C3242;
    border-radius: 5px 5px 0 0;
    padding: 15px;
    .group-title {
      font-size: 16px;
      color: #FFF;
      margin-bottom: 15px;
      font-weight: bold;
      .el-link {
        float: right;
        font-size: 14px;
        color: #C1C6C8;
        -webkit-text-fill-color: #C1C6C8;
      }
    }
    .group-content{
      height: 80%;
      overflow: auto;
    }
    .art_list_block{
      margin-top: 20px;
      .item{
          display: flex;
          justify-content: flex-start;
          line-height: 1;
          margin-bottom: 15px;
          position: relative;
          cursor: pointer;

          .info{
            width: 100%;
            .lf{
              float: left;
            }
            .rt{
              margin-top: 20px;
              .el-tag-time{
                text-align: left;
                float: left;
              }
              .el-tag-art{
                float: right;
                text-align: right;
                .custom-tag{
                  color:#fff;
                  border-color:#eaeaea;
                  background-color:transparent;
                  &.tag-1{color: #b97741;border-color:#b97741;}
                  &.tag-2{color: #97cd38;border-color:#97cd38;}
                  &.tag-3{color: #dc5a2c;border-color:#dc5a2c;}
                  &.tag-4{color: #414ab9;border-color:#414ab9;}
                  &.tag-5{color: #c13ac9;border-color:#c13ac9;}
                  &.tag-6{color: #29c761;border-color:#29c761;}
                }
              }
            }
          }

          .tag{
              height: 24px;
              display: inline-block;
              position: absolute;
              right: 0;
              top: 0;
              padding: 0px 4px;
              line-height: 24px;
              font-size: 12px;
              color: #fff;
              border-radius: 4px;
              box-sizing: border-box;
              white-space: nowrap;
              border: 1px solid #d9d0c8;
              &.none{
                  background-color: transparent;
                  border-color: transparent;
              }
          }
          p,h4{
              margin: 0;
              font-size: 14px;
          }
          p{
              padding-top: 6px;
              font-size: 8px;
              color: #f5f5f5;
          }
          h4{
              .status{
                  font-size: 12px;
              }
          }
        .custom-tag{
          color:#fff;
          border-color:#eaeaea;
          background-color:transparent;
          &.tag-2{color: #b97741;border-color:#b97741;}
          &.tag-3{color: #97cd38;border-color:#97cd38;}
          &.tag-4{color: #dc5a2c;border-color:#dc5a2c;}
          &.tag-5{color: #414ab9;border-color:#414ab9;}
          &.tag-6{color: #c13ac9;border-color:#c13ac9;}
          &.tag-7{color: #29c761;border-color:#29c761;}
        }
          .icon{
              width: 45px;
              height: 45px;
              font-size: 26px;
          }
      }
    }
  }
</style>