uk_front/pages/media.vue

<template>
  <div class="com-main com-width-1400 com-margin-auto">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">Home</el-breadcrumb-item>
      <el-breadcrumb-item> Media Centre</el-breadcrumb-item>
    </el-breadcrumb>
    <ul class="flex around tab">
      <li v-for="(item, index) in list" :key="index" :class="{ active: index === curTab }" @click="selTab(index)">
        {{ item.typeName }}
      </li>
    </ul>
    <el-input v-model="keyword" placeholder="Search" @keyup.enter.native="getList" @clear="getList" clearable>
      <i slot="suffix" class="el-input__icon el-icon-search" @click="getList"></i>
    </el-input>
    <div v-if="listLoading" v-loading="true" slot="spinner" element-loading-text="Loading"
      element-loading-spinner="el-icon-loading" class="com-loading">
    </div>
    <div class="item" v-else>
      <section v-if="comCurObj.total">
        <ul>
          <media-card v-for="item in comCurObj.data" :key="item.id" :cardData="item" @labelEvent="receveLabel"
          @leftBtnEvent="openDialog(item)"
          @rightBtnEvent="download(item)"></media-card>
        </ul>
        <pagination v-show="comCurObj.total > 0" :total="comCurObj.total" :page.sync="comCurObj.page"
          :limit.sync="limit" @pagination="getList" />
      </section>
      <el-empty description="No Data" v-else></el-empty>
    </div>
    <el-dialog :lock-scroll="false" :visible.sync="dialogVisible" width="1000px">
      <media-card :cardData="cardData" :toggle=true @labelEvent="receveLabel" @rightBtnEvent="download(cardData)"></media-card>
    </el-dialog>
  </div>
</template>

<script>
import debounce from 'lodash.debounce'

export default {
  data() {
    return {
      list: [
        { id: 0, typeName: 'All Content' },
        { id: 3, typeName: 'EDMs' },
        { id: 1, typeName: 'Banners' },
        { id: 4, typeName: 'Catalogues' },
        { id: 2, typeName: 'Social Media' },
        { id: 8, typeName: 'Email Signature' },
        { id: 5, typeName: 'Videos' },
        { id: 7, typeName: 'News' },
      ],
      curTab: 0,
      keyword: '',
      limit: 20,
      listLoading: true,
      cardData: {},
      dialogVisible: false,
      getDebList: null,
    }
  },
  async created() {
    await this.getList()
    this.getDebList = debounce(this.getList, 500);
  },
  watch: {
    keyword(newValue, oldValue) {
      if (newValue != oldValue) {
        window.scrollTo({ top: 0, behavior: 'smooth' });
        this.getDebList()
        this.dialogVisible = false;
      }
    },
  },
  computed: {
    comCurObj() {
      return this.list[this.curTab]
    }
  },
  methods: {
    getList() {
      this.listLoading = true
      let params = {
        keyword: this.keyword,
        page: this.comCurObj.page || 1,
        limit: this.limit,
      }
      this.curTab && (params.type = this.comCurObj?.id)
      this.$axios
        .get('/uk-api/data/list', {
          params
        })
        .then(res => {
          if (res.code == 1) {
            const { data, total } = res.result
            this.comCurObj.data = data.map(i => {
              const mapLabel = i.datalabel.map(o => o.name)
              const obj = this.list.find(item => item.id === i.type)
              const typeName = this.curTab === 0 ? obj?.typeName : this.comCurObj?.typeName
              return { ...i, mapLabel, typeName }
            })
            this.comCurObj.total = total
            this.listLoading = false
          }
          if (process.client) {
            this.$nextTick(() => {
              window.scroll(0, 0)
            })
          }
        })
        .catch(() => {
          this.listLoading = false
        })
    },
    selTab(i) {
      this.curTab = i
      this.$set(this.comCurObj, 'page', 1)
      this.getList()
    },
    openDialog(data) {
      this.cardData = data;
      this.dialogVisible = true;
    },
    download(item) {
      if (!item.media_url) {
        this.$message.error('No File')
        return
      }
      var urlStr = item.media_url.match('[^/]+(?!.*/)')[0]
      this.$utils.downloadXhr(item.media_url, urlStr)
    },
    receveLabel(l){
      this.keyword = l
    }
  },
}
</script>

<style lang="scss" scoped>
.tab {
  margin-bottom: 20px;
  border-bottom: 1.5px solid #eee;
  overflow-x: auto;
  white-space: nowrap;

  li {
    position: relative;
    font-size: 16px;
    color: #00213b;
    text-align: center;
    padding: 0 15px 10px;
    cursor: pointer;

    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      width: 0;
      height: 2px;
      background-color: #e90000;
      transition: width 0.3s ease, left 0.3s ease;
      transform: translateX(-50%);
    }

    &.active {
      font-weight: bold;
    }

    &.active::after {
      width: 100%;
      left: 50%;
    }
  }
}

:deep(.el-input) {
  .el-input__inner {
    border-radius: 18px;
  }

  i {
    cursor: pointer;
  }
}

:deep(.el-dialog__header) {
  padding: 0;

  .el-dialog__headerbtn {
    top: 5px;
    right: 5px;
  }
}

:deep(.el-dialog__body) {
  padding: 20px;
}

.item {
  margin: 20px auto;

  ul {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-gap: 30px;
  }
}

:deep(.el-pagination.is-background) {
  .el-pager {
    li.number {
      background-color: #f8f8f8;
      border-radius: 50%;
      color: #a7a7a7;
    }

    li:not(.disabled).active {
      background-color: #00213b;
      color: #d4d7da;
    }
  }

  .btn-prev,
  .btn-next {
    border-radius: 50%;
    background-color: #fff;

    .el-icon-arrow-left:before {
      content: '';
    }

    .el-icon-arrow-right:before {
      content: '';
    }
  }
}
</style>