VAVABUY/pagesBuyer/shop/index.vue

<template>
  <Theme>
    <view class="wrap">
      <Navbar fixed leftShow leftIconColor="var(--bg)">
        <template #center>
          <view class="nav_title">
            <trans _t="店铺" />
          </view>
        </template>
      </Navbar>

      <!-- 搜索栏 - 固定在顶部 -->
      <view class="search-section">
        <view class="search-box">
          <Search
            v-model="searchValue"
            border="none"
            @input="onSearchInput"
            @click="onSearchClick"
            :placeholder="t('搜索店铺')"
          >
            <template #prefix>
              <i class="icon-font icon-search"></i>
            </template>
          </Search>
        </view>
      </view>

      <!-- 店铺列表 - 使用封装的List组件 -->
      <view class="content">
        <List
          ref="listRef"
          :defaultParams="defaultParams"
          @datas="getList"
          :isLoading="false"
        >
          <template #item="{ item }">
            <shopItem :item="item" @click="toShopDetail" />
          </template>
        </List>
      </view>
    </view>
    <Tabbar page="shop" />
  </Theme>
</template>

<script setup>
import { ref, reactive, watch } from "vue";
import Tabbar from "@/components/tabbar";
import Navbar from "@/components/navbar";
import Search from "@/components/input";
import List from "@/components/list";
import shopItem from "./components/shop_item";
import { t } from "@/locale";
import { onShow } from "@dcloudio/uni-app";

// 搜索值
const searchValue = ref("");

// List组件引用
const listRef = ref(null);

// 默认参数
const defaultParams = reactive({
  keyWord: "",
});

// 店铺数据
const shops = ref([
  {
    id: 1,
    name: "时尚潮流店",
    description: "专注时尚潮流服饰，品质保证",
    avatar: "/static/shop/shop1.png",
    rating: 4.8,
    sales: 1234,
    distance: "1.2km",
    status: "online",
    tags: ["时尚", "潮流", "品质"],
  },
  {
    id: 2,
    name: "美妆护肤专营",
    description: "专业美妆护肤产品，正品保证",
    avatar: "/static/shop/shop2.png",
    rating: 4.9,
    sales: 2567,
    distance: "0.8km",
    status: "online",
    tags: ["美妆", "护肤", "正品"],
  },
  {
    id: 3,
    name: "数码科技馆",
    description: "最新数码产品，科技前沿",
    avatar: "/static/shop/shop3.png",
    rating: 4.7,
    sales: 1890,
    distance: "2.1km",
    status: "offline",
    tags: ["数码", "科技", "新品"],
  },
  {
    id: 4,
    name: "家居生活馆",
    description: "温馨家居，品质生活",
    avatar: "/static/shop/shop4.png",
    rating: 4.6,
    sales: 987,
    distance: "1.5km",
    status: "online",
    tags: ["家居", "生活", "温馨"],
  },
  {
    id: 5,
    name: "运动健身中心",
    description: "专业运动装备，健康生活",
    avatar: "/static/shop/shop5.png",
    rating: 4.5,
    sales: 1456,
    distance: "3.2km",
    status: "online",
    tags: ["运动", "健身", "健康"],
  },
  {
    id: 6,
    name: "美食天地",
    description: "特色美食，味蕾享受",
    avatar: "/static/shop/shop6.png",
    rating: 4.9,
    sales: 3456,
    distance: "0.5km",
    status: "online",
    tags: ["美食", "特色", "美味"],
  },
  {
    id: 7,
    name: "母婴用品店",
    description: "专业母婴用品，呵护宝宝",
    avatar: "/static/shop/shop7.png",
    rating: 4.8,
    sales: 2134,
    distance: "1.8km",
    status: "online",
    tags: ["母婴", "用品", "专业"],
  },
  {
    id: 8,
    name: "图书文具店",
    description: "学习用品，知识宝库",
    avatar: "/static/shop/shop8.png",
    rating: 4.4,
    sales: 678,
    distance: "2.5km",
    status: "offline",
    tags: ["图书", "文具", "学习"],
  },
  {
    id: 9,
    name: "宠物用品店",
    description: "宠物用品，关爱毛孩子",
    avatar: "/static/shop/shop9.png",
    rating: 4.7,
    sales: 1234,
    distance: "1.9km",
    status: "online",
    tags: ["宠物", "用品", "关爱"],
  },
]);

// 过滤后的店铺列表
const filteredShops = ref([]);

// 搜索输入
const onSearchInput = (value) => {
  searchValue.value = value;
  defaultParams.keyWord = value;
  // 触发列表刷新
  if (listRef.value) {
    listRef.value.handleRefresh();
  }
};

// 搜索点击
const onSearchClick = () => {
  console.log("搜索:", searchValue.value);
};

// 获取列表数据
const getList = (data) => {
  // 模拟搜索过滤
  if (searchValue.value.trim()) {
    const keyword = searchValue.value.toLowerCase();
    filteredShops.value = shops.value.filter(
      (shop) =>
        shop.name.toLowerCase().includes(keyword) ||
        shop.description.toLowerCase().includes(keyword) ||
        shop.tags.some((tag) => tag.toLowerCase().includes(keyword))
    );
  } else {
    filteredShops.value = shops.value;
  }

  // 设置到List组件
  if (listRef.value) {
    listRef.value.setList(filteredShops.value);
  }
};

// 跳转到店铺详情
const toShopDetail = (shop) => {
  uni.navigateTo({
    url: `/pagesBuyer/shop/detail?id=${shop.id}&name=${shop.name}`,
  });
};

onShow(() => {
  // 页面显示时初始化数据
  getList();
});
</script>

<style lang="less" scoped>
@import url("@/style.less");

.wrap {
  min-height: 100vh;
  background: var(--bg);
  display: flex;
  flex-direction: column;

  .nav_title {
    color: var(--black);
    font-size: 36rpx;
    font-weight: bold;
  }

  .search-section {
    position: sticky;
    top: 0;
    z-index: 10;
    padding: 20rpx 30rpx;
    background: var(--light);
    border-bottom: 1rpx solid var(--border);

    .search-box {
      :deep(.u-input) {
        padding: 0 20px 0 16px !important;
        background: var(--inputBg);
        border-radius: 20rpx;

        .u-input__content__field-wrapper__field {
          height: 47px;
        }
      }

      .icon-search {
        color: var(--text);
        font-size: 40rpx;
      }
    }
  }

  .content {
    flex: 1;
    padding: 20rpx 30rpx;
    padding-bottom: calc(90rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(90rpx + env(safe-area-inset-bottom));
  }

  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 60vh;

    .empty-image {
      width: 200rpx;
      height: 200rpx;
      margin-bottom: 32rpx;
    }

    .empty-text {
      font-size: 32rpx;
      color: var(--text-01);
      margin-bottom: 16rpx;
    }

    .empty-desc {
      font-size: 24rpx;
      color: var(--text-01);
    }
  }
}
</style>