# 买家端店铺功能说明

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

## 功能特性

### 1. 店铺列表页面 (`pagesBuyer/shop/index.vue`)
- **9个店铺展示**: 展示9个不同类别的店铺
- **搜索功能**: 支持按店铺名称、描述、标签搜索
- **店铺信息**: 显示店铺头像、名称、描述、评分、销量、距离
- **营业状态**: 显示店铺是否营业中
- **标签系统**: 显示店铺特色标签
- **点击跳转**: 点击店铺进入店铺详情页

### 2. 店铺详情页面 (`pagesBuyer/shop/detail.vue`)
- **店铺头部**: 显示店铺基本信息
- **收藏功能**: 可以收藏/取消收藏店铺
- **功能按钮**: 联系店铺、查看位置、分享店铺
- **商品分类**: 显示店铺商品分类
- **商品列表**: 展示店铺热销商品
- **商品详情**: 点击商品可查看详情

### 3. 底部导航更新
- **新增店铺选项**: 在买家端导航中添加店铺选项
- **图标支持**: 使用专门的店铺图标
- **智能跳转**: 根据用户类型智能跳转

## 页面结构

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

## 店铺数据示例

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

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

## 搜索功能

### 搜索范围
- 店铺名称
- 店铺描述
- 店铺标签

### 搜索实现
```javascript
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))
  );
});
```

## 导航配置

### 买家端导航更新
```javascript
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 配置
```json
{
  "path": "pagesBuyer/shop/index"
},
{
  "path": "pagesBuyer/shop/detail"
}
```

## 页面跳转

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

### 跳转到商品详情
```javascript
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 状态管理
- 响应式设计