xinkeaboard/xinkeaboard-web/pages/store/listBack.vue

<template>
  <div>
    <SldHomeTopSearch />
    <NavCatHeader />
    <div class="sld_store_list">
      <img class="store_list_banner" src="/store_list_banner.png" />
      <div class="seller_list_search clearfix">
        <input
          type="text"
          name="sellerName"
          :placeholder="L['请输入店铺名称']"
          v-model="keyWord"
          @keyup.enter="search_store(keyWord)"
        />
        <button @click="search_store(keyWord)">{{ L["搜索"] }}</button>
      </div>
      <div class="seller_list">
        <div class="fav_list fav_list_box clearfix">
          <div v-for="(item, index) in initData.data" :key="index">
            <StoreItem :item="item" :ItemIndex="index" :skeleton="firstLoading">
            </StoreItem>
          </div>
        </div>
      </div>
    </div>

    <!-- 分页 start -->
    <div class="flex_row_center_center sld_pagination">
      <el-pagination
        @current-change="handleCurrentChange"
        v-model:currentPage="pageData.current"
        :page-size="pageData.pageSize"
        layout="prev, pager, next, jumper"
        :total="pageData.total"
        :hide-on-single-page="true"
      >
      </el-pagination>
    </div>
    <!-- 分页 end -->

    <!-- 空页面 start-->
    <SldCommonEmpty v-if="!firstLoading && !initData.data.length" />
    <!-- 空页面 end-->
  </div>
</template>

<script setup>
import { getCurrentInstance, onMounted, reactive, ref } from "vue";
import { ElPagination } from "element-plus";
// import { lang_zn } from "@/assets/language/zh.js";
import { getCurLanguage } from '@/composables/common.js';
// const L = lang_zn;
const L = getCurLanguage();
const firstLoading = ref(true); //是否第一次加载
const initData = reactive({ data: [] });
const pageData = reactive({
  current: 1,
  pageSize: 8,
  total: null,
});
const params = reactive({
  current: pageData.current,
  pageSize: pageData.pageSize,
});
const indexNum = ref(0);
useHead({
      title:'热门店铺'
  })
//初始化数据
const getInitData = async (params) => {
  let searchParams = { ...params };
  let keys = ''
  if(searchParams.current){
    keys += searchParams.current
  }
  const {data:value,pending:pending} = await useFetch(apiUrl + "v3/seller/front/store/list" , {params,params,  key:keys.toString(),})
    const res = value._rawValue
    if(!pending._rawValue){
        firstLoading.value = false;
    }
    if (res.state === 200) {
      initData.data = res.data.list;
      pageData.current = res.data.pagination.current;
      pageData.pageSize = res.data.pagination.pageSize;
      pageData.total = res.data.pagination.total;
    }

  // get(apiUrl + "v3/seller/front/store/list",params).then((res) => {
  //   firstLoading.value = false;
  //   if (res.state === 200) {
  //     initData.data = res.data.list;
  //     pageData.current = res.data.pagination.current;
  //     pageData.pageSize = res.data.pagination.pageSize;
  //     pageData.total = res.data.pagination.total;
  //   }
  // });
};
getInitData(params);

//分页切换
const handleCurrentChange = (e) => {
  params.current = e;
  getInitData(params);
};

//店铺搜索
const keyWord = ref("");
const search_store = (keyWord) => {
  params.keyword = keyWord;
  getInitData(params);
};

</script>

<style lang="scss" scoped>
@import "@/assets/style/storeList.scss";
@import "@/assets/style/base.scss";

.sld_pagination {
  width: 580px;
  margin: 0 auto;
  margin-top: 30px;
  margin-bottom: 30px;
}
</style>