E-commerce/src/views/page3/leftBox.vue

<template>
  <div>
    <boxTop title="打孔机管理" />
    <div class="leftBox">
      <div class="search-bar">
        <input
          v-model="leftBox.input"
          type="text"
          placeholder="输入关键字进行搜索"
          @keyup.enter="searchFn"
        />
        <div class="icons">
          <span class="icon i-mdi-search" @click="searchFn"></span>
          <span class="icon i-mdi-delete" @click="clearFn"></span>
          <span class="icon i-mdi-swap-horizontal" @click="sortFn"></span>
        </div>
      </div>
      <item class="listItem" :list="leftBox.list" />
    </div>
  </div>
</template>

<script>
import item from './item.vue'
import boxTop from '@/components/boxTop/index.vue'

export default {
  data() {
    return {
      leftBox: {
        input: ``,
        list: [],
        sortIndex: 0,
        sortList: [`投入时间`, `状态`],
      },
    }
  },
  components: {
    boxTop,
    item,
  },
  async created() {
    this.searchFn()
  },
  methods: {
    async searchFn() {
      console.log(`search`, this.leftBox.input)
      const data = await this.$http.get(`/holePunchingMachine`, {
        params: {
          _sort:
            this.leftBox.sortList[
              this.leftBox.sortIndex % this.leftBox.sortList.length
            ] || undefined,
          名称_like: this.leftBox.input || undefined,
        },
      })
      this.leftBox.list = data
    },
    clearFn() {
      this.leftBox.input = ``
      this.searchFn()
      console.log(`clearFn`)
    },
    sortFn() {
      this.leftBox.sortIndex++
      this.searchFn()
      console.log(`sortFn`)
    },
  },
}
</script>

<style lang="less" scoped>
.leftBox {
  background: rgba(48, 42, 42, 0.3);
  backdrop-filter: blur(8px);

  .listItem {
    height: 800px;
  }
  .search-bar {
    display: flex;
    align-items: center;
    background-color: #2c2f3f;
    height: 48px;
    padding: 10px;
    border-radius: 4px;
    background: rgba(37, 34, 59, 0.31);
    border: 0.5px solid;
    box-sizing: border-box;
    border-image: linear-gradient(
        180deg,
        #8a8989,
        #bec1cc 27%,
        rgba(255, 255, 255, 0.72) 59%,
        #bec1cc 82%,
        rgba(255, 255, 255, 0.76) 99%
      )
      0.5 0.5;

    input {
      flex: 1;
      padding: 10px;
      border: none;
      background-color: transparent;
      color: #fff;
      font-size: 14px;
      height: 35px;
      line-height: 35px;
      outline: none;
    }
    .icons {
      display: flex;
      align-items: center;
      margin-left: 10px;

      span {
        margin-right: 10px;
        color: #fff;
        font-size: 18px;
      }
      .icon {
        cursor: pointer;
      }
    }
  }
}
</style>