cashier-mer/src/views/home/component/shop.vue

<script setup>
import { ref, watch, onMounted, onUnmounted, nextTick } from "vue";
import mitt from "@/utils/mitt.js";
import _ from 'lodash';
import { ElMessage } from "element-plus";

const props = defineProps({
  storeList: {
    type: Array,
    default: () => [],
  },
});

const codeRef = ref(null);

const emit = defineEmits(["getStoreList", "changeItem", "loadMore"]);

const bar_code = ref("");

const loadMore = () => {
  emit("loadMore", {
    bar_code: bar_code.value,
  });
};

const changeItem = (item) => {
  if(item.is_used==0) return ElMessage.error("该商品已被平台关闭");
  if(item.stock==0) return ElMessage.warning("该商品无库存");
  emit("changeItem", item);
};

const handleEnter = _.throttle(() => {
  emit("getStoreList", {
    bar_code: bar_code.value,
  }, true);
}, 300)

defineExpose({
  bar_code,
});

const isfocus = ref(false);
const focus = () => {
  isfocus.value = true;
};
const blur = () => {
  isfocus.value = false;
};

// 键盘事件
const ashift = () => {
  codeRef.value?.focus();
};
onMounted(() => {
  nextTick(() => {
    codeRef.value?.focus();
    focus();
  });
  mitt.on("shift", ashift);
});

onUnmounted(() => {
  mitt.off("shift", ashift);
});
</script>

<template>
  <div class="my-order">
    <div class="header-nav" :class="{ 'input-focus': isfocus }">
      <div class="nav-item-label">搜索 (Shift)</div>
      <div class="nav-item-input">
        <el-input
          v-model="bar_code"
          placeholder=" 搜索商品名称/条形码或点击聚焦扫码, 按回车(Enter)搜索"
          clearable
          ref="codeRef"
          @focus="focus"
          @blur="blur"
          @keyup.enter="handleEnter"
          @clear="handleEnter"
        />
      </div>
      <div class="nav-item-btn" @click="handleEnter">
        <el-button class="btn" type="primary"
          ><el-icon><Search /></el-icon
        ></el-button>
      </div>
    </div>
    <div
      class="shop-list"
      v-infinite-scroll="loadMore"
      infinite-scroll-distance="100"
      infinite-scroll-delay="500"
      :infinite-scroll-immediate="false"
      style="overflow: auto"
    >
      <el-space wrap>
        <div
          class="shop-item"
          v-for="(item, index) in storeList"
          :key="index"
          @click="changeItem(item)"
        >
          <el-image loading="lazy" :src="item.image"></el-image>
          <div class="shop-name">{{ item.store_name }}</div>
          <div class="shop-price">
            ¥<span>{{ item.price }}</span>
          </div>
          <div class="no-stock" v-if="item.stock == 0">
            <div>
              <span>暂无</span>
              <span>库存</span>
            </div>
          </div>
          <div class="no-stock" v-if="item.is_used == 0">
            <div>
              <span>平台</span>
              <span>关闭</span>
            </div>
          </div>
        </div>
      </el-space>
    </div>
  </div>
</template>

<style scoped lang="scss">
.my-order {
  height: 100%;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;

  .header-nav {
    border-radius: 0.8rem;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    overflow: hidden;
    width: auto;
    border: 1px solid rgba($color: #000000, $alpha: 0);

    .nav-item-label {
      width: 7rem;
      height: 3rem;
      box-sizing: border-box;
      text-align: center;
      line-height: 3rem;
    }
    .nav-item-input {
      flex: 1;
      .el-input {
        width: 100%;
        height: 100%;
      }
      ::v-deep .el-input__wrapper {
        border: none !important;
        box-shadow: none !important;
        text-align: center;
      }
    }
    .nav-item-btn {
      width: 5rem;
      .btn {
        width: 100%;
        height: 100%;
        border-radius: 0;
        font-size: 1.6rem;
      }
    }
  }

  .input-focus {
    border: 1px solid #1890ff;
  }

  .shop-list {
    height: calc(100vh - 9.75rem);
    width: auto;
    overflow-y: auto;
    box-sizing: border-box;
    padding-top: 1rem;

    .shop-item {
      width: 11rem;
      height: 16rem;
      cursor: pointer;
      background-color: #fff;
      border-radius: 1rem;
      padding: 0.5rem;
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      position: relative;
      overflow: hidden;

      .el-image {
        border-radius: 0.5rem;
        width: 11rem;
        height: 11rem;
      }

      .shop-name {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2; /* 将文本限制为两行 */
      }

      .shop-price {
        font-size: 0.8rem;
        color: #f5222d;
        span {
          font-size: 1.2rem;
          margin-left: 0.187rem;
        }
      }

      &:hover {
        background-color: #1890ff;
        color: #fff;
        .shop-price {
          color: #fff;
        }
      }

      .no-stock {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba($color: #000000, $alpha: 0.2);
        display: flex;
        justify-content: center;
        align-items: center;
        div {
          background-color: #4e4e4e;
          color: #fff;
          border-radius: 50%;
          width: 5rem;
          height: 5rem;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }
}
</style>
, nextTick