cashier-mer/src/views/home/index.vue

<script setup>
import order from './component/order.vue';
import shop from './component/shop.vue';
import padding from './component/padding.vue';
import pupop from './component/pupop.vue';
import { ref, nextTick } from 'vue';
import { storeListApi } from "@/api/store.js";
import { useUserStore } from "@/store/user.js";

const pupopRef = ref(null);
const orderRef = ref(null);
const shopRef = ref(null);

const storeList = ref([]);

const where = ref({
  page: 1,
  limit: 30,
})
const getStoreList = (data)=>{
  where.value = {
    ...where.value,
    ...data
  }
  storeListApi(where.value).then(res=>{
    storeList.value = res.data.list;
  })
}
getStoreList();

const changeItem = (item)=>{
  orderRef.value.getList(item);
}

nextTick(() => {
    // pupopRef.value.show(true);
})

</script>


<template>
    <div class="my-card">
        <order ref="orderRef"/>
        <padding />
        <shop ref="shopRef" style="flex: 1" :storeList="storeList" @getStoreList="getStoreList" @changeItem="changeItem"/>
        <pupop ref="pupopRef"/>
    </div>
</template>

<style lang="scss">
.my-card{
    display: flex;
}
  /* 修改滚动条的样式 */
  ::-webkit-scrollbar {
    width: 5px; /* 设置滚动条的宽度 */
  }

  /* 设置滚动条的轨道样式 */
  ::-webkit-scrollbar-track {
    background-color: #f1f1f1; /* 设置轨道的背景色 */
    margin: 20px 0;
  }

  /* 设置滚动条的滑块样式 */
  ::-webkit-scrollbar-thumb {
    background-color: #ccc; /* 设置滑块的背景色 */
    border-radius: 5px; /* 设置滑块的圆角 */
  }

  /* 设置滚动条鼠标悬停时的滑块样式 */
  ::-webkit-scrollbar-thumb:hover {
    background-color: #999; /* 设置鼠标悬停时滑块的背景色 */
  }
</style>