VAVABUY/pagesBuyer/shop

买家端店铺功能说明

功能概述

为买家端添加了店铺功能，包括店铺列表、搜索、店铺详情等核心功能。

功能特性

1. 店铺列表页面 (pagesBuyer/shop/index.vue)

• 9个店铺展示: 展示9个不同类别的店铺
• 搜索功能: 支持按店铺名称、描述、标签搜索
• 店铺信息: 显示店铺头像、名称、描述、评分、销量、距离
• 营业状态: 显示店铺是否营业中
• 标签系统: 显示店铺特色标签
• 点击跳转: 点击店铺进入店铺详情页

2. 店铺详情页面 (pagesBuyer/shop/detail.vue)

• 店铺头部: 显示店铺基本信息
• 收藏功能: 可以收藏/取消收藏店铺
• 功能按钮: 联系店铺、查看位置、分享店铺
• 商品分类: 显示店铺商品分类
• 商品列表: 展示店铺热销商品
• 商品详情: 点击商品可查看详情

3. 底部导航更新

• 新增店铺选项: 在买家端导航中添加店铺选项
• 图标支持: 使用专门的店铺图标
• 智能跳转: 根据用户类型智能跳转

页面结构

pagesBuyer/shop/
├── index.vue      # 店铺列表页面
├── detail.vue     # 店铺详情页面
└── README.md      # 说明文档

店铺数据示例

店铺列表数据

const shops = ref([
  {
    id: 1,
    name: "时尚潮流店",
    description: "专注时尚潮流服饰，品质保证",
    avatar: "/static/shop/shop1.png",
    rating: 4.8,
    sales: 1234,
    distance: "1.2km",
    status: "online",
    tags: ["时尚", "潮流", "品质"]
  },
  // ... 更多店铺数据
]);

店铺详情数据

const shopInfo = ref({
  id: 1,
  name: "时尚潮流店",
  description: "专注时尚潮流服饰，品质保证，为您提供最优质的商品和服务",
  avatar: "/static/shop/shop1.png",
  rating: 4.8,
  sales: 1234,
  distance: "1.2km",
  status: "online",
  tags: ["时尚", "潮流", "品质", "正品"]
});

搜索功能

搜索范围

• 店铺名称
• 店铺描述
• 店铺标签

搜索实现

const filteredShops = computed(() => {
  if (!searchValue.value.trim()) {
    return shops.value;
  }
  
  const keyword = searchValue.value.toLowerCase();
  return shops.value.filter(shop => 
    shop.name.toLowerCase().includes(keyword) ||
    shop.description.toLowerCase().includes(keyword) ||
    shop.tags.some(tag => tag.toLowerCase().includes(keyword))
  );
});

导航配置

买家端导航更新

const buyerNavList = ref([
  {
    name: "home",
    title: "tabbar.首页",
    img: home,
    img_active: home_active,
    num: 0,
  },
  {
    name: "shop",
    title: "tabbar.店铺",
    img: shop,
    img_active: shop_active,
    num: 0,
  },
  {
    name: "cart",
    title: "tabbar.购物车",
    img: cart,
    img_active: cart_active,
    num: cartNum.value,
  },
  {
    name: "profile",
    title: "tabbar.我的",
    img: user,
    img_active: user_active,
    num: 0,
  },
]);

路由配置

pages.json 配置

{
  "path": "pagesBuyer/shop/index"
},
{
  "path": "pagesBuyer/shop/detail"
}

页面跳转

跳转到店铺详情

const toShopDetail = (shop) => {
  uni.navigateTo({
    url: `/pagesBuyer/shop/detail?id=${shop.id}&name=${shop.name}`
  });
};

跳转到商品详情

const toProductDetail = (product) => {
  uni.navigateTo({
    url: `/pagesBuyer/shop/product?id=${product.id}`
  });
};

样式特点

1. 响应式设计

• 使用 Grid 布局展示商品
• 支持不同屏幕尺寸
• 移动端优化

2. 统一风格

• 遵循项目设计规范
• 使用项目颜色变量
• 保持UI一致性

3. 交互反馈

• 点击效果
• 状态变化
• 加载状态

扩展功能

1. 店铺收藏

• 支持收藏/取消收藏
• 收藏状态持久化
• 收藏列表管理

2. 店铺评价

• 用户评价系统
• 评分统计
• 评价展示

3. 店铺活动

• 优惠活动展示
• 促销信息
• 活动倒计时

注意事项

1. 图片资源: 需要准备店铺头像、商品图片等资源
2. 数据接口: 实际使用时需要对接后端API
3. 权限控制: 某些功能可能需要登录权限
4. 性能优化: 大量数据时考虑分页加载
5. 错误处理: 添加网络错误、数据异常等处理

技术栈

• Vue 3 Composition API
• uni-app 框架
• Less 样式预处理器
• Pinia 状态管理
• 响应式设计