123

doc/消费者APP/店铺主页/店铺主页前端技术方案.md

@@ -0,0 +1,210 @@
+# 店铺主页 — 前端技术方案（C 端 · shop-app）
+
+> **依据：** 《店铺主页功能需求.md》v1.0、《店铺主页技术方案.md》v1.0（仅作接口对照，**本文档独立维护**）  
+> **关联：** 《搜索页前端技术方案》、《商品分类前端技术方案》、《商品详情内页前端技术方案》  
+> **范围：** C 端 **店铺介绍、关注、店内分类浏览、店内搜索、进商品详情**；**不** 改后端、**不** 实现全站搜索/购物车/我的关注列表页。  
+> **实现状态：** 页面与 API 封装已落地，待与 `/api/shop/**` 联调。
+
+---
+
+## 1. 技术栈与约定
+
+| 项 | 说明 |
+|----|------|
+| 框架 | uni-app **Vue 3** + **uview-plus** |
+| 请求 | `@/utils/request`；读接口 `header: { isToken: false }`；关注写接口 **须 Token** |
+| 商品列表响应 | **`TableDataInfo`**：`rows` + `total`（与分类/搜索一致） |
+| 分类 VO | 与平台分类相同 `CategoryVisibleVO`；商品筛选参数名为 **`shopCategoryId`**（二级 ID） |
+| 排序 | 后端固定 **销量降序**；前端 **不提供** sortBy Tab |
+| 虚拟 Tab | 一级导航首项 **「全部商品」** 由前端常量注入，不调分类接口 |
+| 参考组件 | `GoodsGrid`、`category/level1` Tab 样式、`search/index` 搜索栏 |
+
+---
+
+## 2. 页面与路由
+
+| 页面 | 需求代号 | 路径 | 入口 |
+|------|----------|------|------|
+| 店铺主页 | **A** | `subpackage/shop/index` | 搜索页店铺 Tab、详情「进店」、带 `shopId` 链入 |
+| 店内搜索 | **B+C** | `subpackage/shop/search` | A 页「搜索本店商品」；B 输入 + C 结果 **同页** |
+
+**`pages.json` 分包：** `pkg-shop` → `root: subpackage/shop`
+
+| 页面 | navigationBarTitleText |
+|------|------------------------|
+| index | 店铺（加载成功后改为店名） |
+| search | 搜本店商品 |
+
+**Query：**
+
+| 页面 | 参数 | 说明 |
+|------|------|------|
+| A | `shopId`（必填） | 缺失 → 提示并返回 |
+| B+C | `shopId`（必填） | 同上 |
+| B+C | `keyword`（可选） | 预填并自动发起搜索 |
+
+**路径常量：** `utils/pageRoute.js` → `PAGE_SHOP_HOME`、`PAGE_SHOP_SEARCH`
+
+**跳转工具：** `utils/shopNav.js`
+
+| 方法 | 行为 |
+|------|------|
+| `goShopHome(shopId)` | `navigateTo` A 页 |
+| `goShopSearch(shopId, keyword?)` | `navigateTo` 店内搜索页 |
+
+---
+
+## 3. 文件清单
+
+| 类型 | 路径 | 说明 |
+|------|------|------|
+| A 页 | `shop-app/subpackage/shop/index.vue` | 介绍区 + 关注 + 一二级 Tab + 商品列表 |
+| 店内搜索 | `shop-app/subpackage/shop/search.vue` | 输入 + 结果列表（同页） |
+| 商品列表块 | `shop-app/components/shop/ShopGoodsBlock.vue` | 分页、`GoodsGrid`、重试 |
+| 店铺 API | `shop-app/api/shop.js` | `/api/shop/**` |
+| 展示映射 | `shop-app/utils/shopDisplay.js` | 介绍区、分类树、搜索店卡片 |
+| 导航 | `shop-app/utils/shopNav.js` | 进店跳转 |
+| 常量 | `shop-app/constants/shop.js` | 营业态、全部 Tab、分页、占位文案 |
+
+**已改入口（联调）：**
+
+| 文件 | 改动 |
+|------|------|
+| `subpackage/search/result.vue` | 店铺 Tab `@item-click` → `goShopHome` |
+| `subpackage/goods/detail.vue` | `onEnterShop` → `goShopHome(shopId)` |
+
+---
+
+## 4. 接口封装（`api/shop.js`）
+
+**基路径：** `/api/shop`
+
+| 方法 | HTTP | 路径 | 鉴权 | 页面 |
+|------|------|------|------|------|
+| `getShopProfile` | GET | `/{shopId}` | 匿名（Token 可选） | A |
+| `getShopCategories` | GET | `/{shopId}/categories` | 匿名 | A |
+| `getShopLevel2Tabs` | GET | `/{shopId}/categories/{level1Id}/level2-tabs` | 匿名 | A |
+| `getShopGoods` | GET | `/{shopId}/goods` | 匿名 | A / 店内搜索 |
+| `followShop` | POST | `/{shopId}/follow` | **须 Token** | A |
+| `unfollowShop` | DELETE | `/{shopId}/follow` | **须 Token** | A |
+
+### 4.1 商品列表 Query
+
+| 场景 | 参数 |
+|------|------|
+| 全部商品 | 仅 `pageNum`、`pageSize` |
+| 某二级分类 | `shopCategoryId` |
+| 店内搜索 | `keyword`（**不传** `shopCategoryId`） |
+
+空关键词：前端 **不请求**；后端 trim 后空白会报错。
+
+### 4.2 关注交互
+
+| 规则 | 前端实现 |
+|------|----------|
+| SH-F1 未登录 | `ensureApiToken()` → 跳转登录 |
+| SH-F2/F3 | 成功后本地更新 `followed`、`fansCount ±1` |
+| 失败 | request Toast；**不** 改按钮态 |
+
+---
+
+## 5. 页面逻辑说明
+
+### 5.1 A. 店铺主页 `index.vue`
+
+```text
+onLoad(shopId)
+  → loadProfile（失败：整页错误 + 重试/返回）
+  → loadCategories（一级树，不含「全部」）
+  → 默认「全部商品」→ ShopGoodsBlock 无 shopCategoryId
+
+切换一级（非全部）
+  → loadLevel2Tabs
+  → 有二级：展示二级 Tab，传 shopCategoryId
+  → 无二级：不请求商品，空态「该分类下暂无商品」
+
+点击商品 → goGoodsDetail(goodsId)
+点击搜索条 → goShopSearch(shopId)
+```
+
+| 展示 | 说明 |
+|------|------|
+| 停业 `shopStatus=1` | 名称旁 **「休息中」** 标签；列表仍展示（SH8） |
+| 评分 | `rating` 为 null 时不展示评分行 |
+| 粉丝 | 始终展示数字（无统计为 0） |
+| 描述 | 两行截断展示 |
+
+### 5.2 店内搜索 `search.vue`
+
+| 规则 | 实现 |
+|------|------|
+| SH-S2 空关键词 | Toast，不展示结果区 |
+| SH-S3/S4 | `ShopGoodsBlock` 带 `keyword` |
+| 无匹配 | `emptyText="暂无相关"` |
+| 回车 | `@confirm` 等同点搜索 |
+
+### 5.3 `ShopGoodsBlock.vue`
+
+- 监听 `shopId`、`shopCategoryId`、`keyword`、`scrollTopKey`、`enabled`
+- 上拉 `scrolltolower` 加载更多
+- `loadFailed` 时显示「点击重试」
+- 卡片字段经 `mapGoodsCardList`：主图、名称、售价、店名
+
+---
+
+## 6. 数据映射（`shopDisplay.js`）
+
+| 函数 | 用途 |
+|------|------|
+| `mapShopProfile` | 介绍区：头像 URL、`isClosed`、`showRating`、`followed` |
+| `mapShopCategoryTree` | 复用 `mapCategoryTree` |
+| `mapShopLevel2Tabs` | 复用 `mapLevel2Tabs` |
+| `sortShopTabsWithHot` | `hot_flag=1` 靠前 |
+| `mapShopCard` | 全站搜索店铺 Tab（已有） |
+
+---
+
+## 7. 异常与边界（前端）
+
+| 情形 | 行为 |
+|------|------|
+| shopId 缺失 | Toast + `smartNavigateBack` |
+| 店铺 404 | `pageError` + 重试 / 返回 |
+| 分类/列表失败 | 分类树空；列表块内重试 |
+| 一级无二级 | `goodsBlockEnabled=false`，专用空态文案 |
+| 浏览 vs 下单 | 本模块不加购；停业/四条件在 **详情页** 拦截 |
+
+---
+
+## 8. 联调检查清单
+
+- [ ] `GET /api/shop/{id}` 返回介绍字段；登录后 `followed` 正确
+- [ ] `GET .../categories` 仅可见分类；「全部」下商品分页
+- [ ] 选二级 `shopCategoryId` 筛选正确
+- [ ] `GET .../goods?keyword=` 仅本店出售中、销量序
+- [ ] `POST/DELETE .../follow` 粉丝数与按钮态一致
+- [ ] 搜索页店铺卡片、详情「进店」跳转 A 页
+- [ ] 已删店 404 文案与返回
+
+---
+
+## 9. 非本期（前端不实现）
+
+| 项 | 说明 |
+|------|------|
+| 全站搜索 / 搜索历史 | 搜索分包 |
+| 店内按价格排序 | 需求未要求 |
+| 我的关注列表页 | 我的服务另册 |
+| 电话一键拨打、分享 | 可选增强 |
+
+---
+
+## 10. 修订记录
+
+| 版本 | 说明 |
+|------|------|
+| **v1.0** | 首版：A 主页 + 店内搜索同页、API/组件/入口联调说明 |
+
+---
+
+*文档版本：v1.0 · 不修改《店铺主页技术方案.md》（后端方案）。*

shop-app/PAGES.md

@@ -33,13 +33,15 @@ subpackage/
 └── search/              # 搜索
     ├── index.vue
     └── result.vue
+└── shop/                # 店铺主页
+    ├── index.vue
+    └── search.vue
 ```
 
 后续示例（待建）：
 
 ```
 subpackage/
-├── shop/                # 店铺主页
 ├── order/               # 订单、确认订单
 ├── cart/                # 购物车子页（Tab 仍在 pages/cart）
 └── user/                # 地址、设置等（Tab 仍在 pages/mine）
@@ -58,6 +60,8 @@ subpackage/
 | `PAGE_HOME` | `/pages/index/index` |
 | `PAGE_GOODS_DETAIL` | `/subpackage/goods/detail` |
 | `PAGE_SEARCH_INDEX` | `/subpackage/search/index` |
+| `PAGE_SHOP_HOME` | `/subpackage/shop/index` |
+| `PAGE_SHOP_SEARCH` | `/subpackage/shop/search` |
 | `PAGE_REGISTER` | `/subpackage/account/register` |
 
 配置详见 `pages.json` 中 `subPackages` 与 `preloadRule`。

shop-app/api/shop.js

@@ -0,0 +1,60 @@
+import request from '@/utils/request'
+
+/** 店铺介绍 A 页（匿名可访问；本地有 Token 时自动带上以返回 followed） */
+export function getShopProfile(shopId) {
+  return request({
+    url: `/api/shop/${shopId}`,
+    method: 'GET',
+    silent: true
+  })
+}
+
+/** 店铺可见分类树（匿名） */
+export function getShopCategories(shopId) {
+  return request({
+    url: `/api/shop/${shopId}/categories`,
+    method: 'GET',
+    header: { isToken: false },
+    silent: true
+  })
+}
+
+/** 指定一级下二级 Tab（匿名） */
+export function getShopLevel2Tabs(shopId, level1Id) {
+  return request({
+    url: `/api/shop/${shopId}/categories/${level1Id}/level2-tabs`,
+    method: 'GET',
+    header: { isToken: false },
+    silent: true
+  })
+}
+
+/**
+ * 店内商品列表 / 店内搜索（匿名）
+ * @returns {Promise<{code,msg,rows,total}>}
+ */
+export function getShopGoods(shopId, params) {
+  return request({
+    url: `/api/shop/${shopId}/goods`,
+    method: 'GET',
+    params,
+    header: { isToken: false },
+    silent: true
+  })
+}
+
+/** 关注店铺（须会员 Token） */
+export function followShop(shopId) {
+  return request({
+    url: `/api/shop/${shopId}/follow`,
+    method: 'POST'
+  })
+}
+
+/** 取消关注（须会员 Token） */
+export function unfollowShop(shopId) {
+  return request({
+    url: `/api/shop/${shopId}/follow`,
+    method: 'DELETE'
+  })
+}

shop-app/components/shop/ShopGoodsBlock.vue

@@ -0,0 +1,186 @@
+<template>
+	<view class="shop-goods-block">
+		<scroll-view
+			class="shop-goods-block__scroll"
+			scroll-y
+			:scroll-top="listScrollTop"
+			:style="{ height: scrollHeight }"
+			@scrolltolower="onLoadMore"
+		>
+			<view v-if="loading && !goodsList.length" class="shop-goods-block__loading">
+				<u-loading-icon mode="circle" />
+			</view>
+			<goods-grid v-else-if="goodsList.length" :list="goodsList" @item-click="onGoodsClick" />
+			<view v-else class="shop-goods-block__empty">
+				<u-empty mode="list" :text="emptyText" icon-size="80" />
+				<text v-if="loadFailed" class="shop-goods-block__retry" @click="reloadGoods(true)">点击重试</text>
+			</view>
+			<view v-if="goodsList.length" class="shop-goods-block__footer">
+				<text v-if="loadingMore">加载中...</text>
+				<text v-else-if="finished">没有更多了</text>
+			</view>
+		</scroll-view>
+	</view>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+import { getShopGoods } from '@/api/shop'
+import { mapGoodsCardList } from '@/utils/goodsDisplay'
+import { SHOP_GOODS_PAGE_SIZE } from '@/constants/shop'
+import GoodsGrid from '@/components/mall/GoodsGrid.vue'
+
+const props = defineProps({
+	shopId: {
+		type: [Number, String],
+		default: ''
+	},
+	/** 本店二级分类 ID；空表示全店 */
+	shopCategoryId: {
+		type: [Number, String],
+		default: ''
+	},
+	/** 店内搜索关键词；有值时忽略 shopCategoryId */
+	keyword: {
+		type: String,
+		default: ''
+	},
+	scrollHeight: {
+		type: String,
+		default: '600px'
+	},
+	scrollTopKey: {
+		type: Number,
+		default: 0
+	},
+	pageSize: {
+		type: Number,
+		default: SHOP_GOODS_PAGE_SIZE
+	},
+	emptyText: {
+		type: String,
+		default: '暂无商品'
+	},
+	/** 为 false 时不拉取（如一级下无二级 Tab） */
+	enabled: {
+		type: Boolean,
+		default: true
+	}
+})
+
+const emit = defineEmits(['goods-click'])
+
+const goodsList = ref([])
+const loading = ref(false)
+const loadingMore = ref(false)
+const finished = ref(false)
+const pageNum = ref(1)
+const listScrollTop = ref(0)
+const loadFailed = ref(false)
+
+watch(
+	() => [props.shopId, props.shopCategoryId, props.keyword, props.scrollTopKey, props.enabled],
+	() => {
+		if (!props.shopId || !props.enabled) {
+			goodsList.value = []
+			return
+		}
+		reloadGoods(true)
+	},
+	{ immediate: true }
+)
+
+function buildParams() {
+	const params = {
+		pageNum: pageNum.value,
+		pageSize: props.pageSize
+	}
+	const kw = (props.keyword || '').trim()
+	if (kw) {
+		params.keyword = kw
+	} else if (props.shopCategoryId) {
+		params.shopCategoryId = props.shopCategoryId
+	}
+	return params
+}
+
+async function fetchPage(isReset) {
+	if (!props.shopId || !props.enabled) return
+	if (isReset) {
+		loading.value = true
+		loadFailed.value = false
+		pageNum.value = 1
+		finished.value = false
+	} else {
+		if (finished.value || loadingMore.value) return
+		loadingMore.value = true
+	}
+	try {
+		const res = await getShopGoods(props.shopId, buildParams())
+		const rows = mapGoodsCardList(res.rows || [])
+		const total = Number(res.total) || 0
+		if (isReset) {
+			goodsList.value = rows
+		} else {
+			goodsList.value = goodsList.value.concat(rows)
+		}
+		finished.value =
+			rows.length < props.pageSize || (total > 0 && goodsList.value.length >= total)
+		if (!finished.value) {
+			pageNum.value += 1
+		}
+	} catch (e) {
+		loadFailed.value = true
+		if (isReset) {
+			goodsList.value = []
+		}
+	} finally {
+		loading.value = false
+		loadingMore.value = false
+	}
+}
+
+function reloadGoods(resetScroll) {
+	if (resetScroll) {
+		listScrollTop.value = listScrollTop.value === 0 ? 0.1 : 0
+	}
+	pageNum.value = 1
+	fetchPage(true)
+}
+
+function onLoadMore() {
+	if (!loading.value && !loadingMore.value && !finished.value) {
+		fetchPage(false)
+	}
+}
+
+function onGoodsClick(item) {
+	emit('goods-click', item)
+}
+
+defineExpose({ reloadGoods })
+</script>
+
+<style lang="scss" scoped>
+.shop-goods-block__scroll {
+	width: 100%;
+}
+.shop-goods-block__loading,
+.shop-goods-block__empty {
+	padding: 80rpx 0;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+.shop-goods-block__retry {
+	margin-top: 24rpx;
+	font-size: 28rpx;
+	color: #2e7d32;
+}
+.shop-goods-block__footer {
+	padding: 24rpx;
+	text-align: center;
+	font-size: 24rpx;
+	color: #999;
+}
+</style>

shop-app/constants/shop.js

@@ -0,0 +1,16 @@
+/** 店铺营业状态：0 开业 / 1 停业 */
+export const SHOP_STATUS_OPEN = '0'
+export const SHOP_STATUS_CLOSED = '1'
+
+/** 停业时介绍区标签文案 */
+export const SHOP_CLOSED_LABEL = '休息中'
+
+/** 一级导航虚拟 Tab：全部商品 */
+export const SHOP_ALL_TAB_ID = '__all__'
+export const SHOP_ALL_TAB_NAME = '全部商品'
+
+/** 店内商品列表每页条数 */
+export const SHOP_GOODS_PAGE_SIZE = 10
+
+/** 店内搜索输入占位 */
+export const SHOP_SEARCH_PLACEHOLDER = '搜索本店商品'

shop-app/pages.json

@@ -152,12 +152,30 @@
 					}
 				}
 			]
+		},
+		{
+			"root": "subpackage/shop",
+			"name": "pkg-shop",
+			"pages": [
+				{
+					"path": "index",
+					"style": {
+						"navigationBarTitleText": "店铺"
+					}
+				},
+				{
+					"path": "search",
+					"style": {
+						"navigationBarTitleText": "搜本店商品"
+					}
+				}
+			]
 		}
 	],
 	"preloadRule": {
 		"pages/index/index": {
 			"network": "all",
-			"packages": ["pkg-category", "pkg-goods", "pkg-search"]
+			"packages": ["pkg-category", "pkg-goods", "pkg-search", "pkg-shop"]
 		},
 		"pages/category/index": {
 			"network": "all",

shop-app/subpackage/goods/detail.vue

@@ -181,6 +181,7 @@ import {
 } from '@/utils/goodsDetail'
 import { ensureCanPurchase } from '@/utils/purchaseAction'
 import { PAGE_GOODS_REVIEWS } from '@/utils/pageRoute'
+import { goShopHome } from '@/utils/shopNav'
 import ReviewCard from '@/components/goods/ReviewCard.vue'
 import DetailBottomBar from '@/components/goods/DetailBottomBar.vue'
 
@@ -342,7 +343,12 @@ function showBlockReason() {
 }
 
 function onEnterShop() {
-	uni.showToast({ title: '店铺主页开发中', icon: 'none' })
+	const sid = detail.value?.shop?.shopId
+	if (sid) {
+		goShopHome(sid)
+	} else {
+		uni.showToast({ title: '店铺信息不可用', icon: 'none' })
+	}
 }
 
 function goAllReviews() {

shop-app/subpackage/search/result.vue

@@ -61,6 +61,7 @@ import { mapShopCardList } from '@/utils/shopDisplay'
 import { addSearchHistory } from '@/utils/searchHistory'
 import { goSearchInput } from '@/utils/searchNav'
 import { goGoodsDetail } from '@/utils/goodsDetail'
+import { goShopHome } from '@/utils/shopNav'
 import {
   SEARCH_TAB_SALES,
   SEARCH_TAB_PRICE,
@@ -255,8 +256,10 @@ function onGoodsClick(item) {
   }
 }
 
-function onShopClick() {
-  uni.showToast({ title: '店铺主页开发中', icon: 'none' })
+function onShopClick(item) {
+  if (item && item.shopId) {
+    goShopHome(item.shopId)
+  }
 }
 
 onLoad((options) => {

shop-app/subpackage/shop/index.vue

@@ -0,0 +1,444 @@
+<template>
+	<view class="page-shop">
+		<view v-if="pageError" class="page-shop__error">
+			<u-empty mode="page" :text="pageError" icon-size="80" />
+			<u-button type="primary" text="重试" size="small" custom-style="margin-top:24rpx" @click="initPage" />
+			<u-button plain text="返回" size="small" custom-style="margin-top:16rpx" @click="onBack" />
+		</view>
+
+		<template v-else>
+			<view v-if="profileLoading" class="page-shop__loading">
+				<u-loading-icon mode="circle" />
+			</view>
+
+			<template v-else-if="profile">
+				<view class="shop-header">
+					<image class="shop-header__avatar" :src="profile.shopAvatar" mode="aspectFill" />
+					<view class="shop-header__main">
+						<view class="shop-header__title-row">
+							<text class="shop-header__name">{{ profile.shopName }}</text>
+							<text v-if="profile.isClosed" class="shop-header__tag">{{ closedLabel }}</text>
+						</view>
+						<view v-if="profile.showRating || profile.showFans" class="shop-header__meta">
+							<text v-if="profile.showRating" class="shop-header__meta-item">评分 {{ profile.ratingText }}</text>
+							<text v-if="profile.showFans" class="shop-header__meta-item">粉丝 {{ profile.fansCount }}</text>
+						</view>
+						<text v-if="profile.shopDesc" class="shop-header__desc">{{ profile.shopDesc }}</text>
+					</view>
+					<view
+						class="shop-header__follow"
+						:class="{ 'shop-header__follow--on': profile.followed }"
+						@click="onFollowTap"
+					>
+						<text>{{ profile.followed ? '已关注' : '+ 关注' }}</text>
+					</view>
+				</view>
+
+				<view class="shop-search-bar" @click="onGoShopSearch">
+					<u-icon name="search" color="#2e7d32" size="18" />
+					<text class="shop-search-bar__text">搜索本店商品</text>
+				</view>
+
+				<scroll-view class="page-shop__l1" scroll-x show-scrollbar="false">
+					<view class="tabs-inner">
+						<view
+							v-for="(tab, index) in level1Tabs"
+							:key="tab.categoryId"
+							class="tab-item"
+							:class="{ 'tab-item--active': activeLevel1Index === index }"
+							@click="onLevel1Change(index)"
+						>
+							<text>{{ tab.categoryName }}</text>
+						</view>
+					</view>
+				</scroll-view>
+
+				<view v-if="!isAllLevel1 && tabsLoading" class="page-shop__hint">
+					<u-loading-icon mode="circle" size="20" />
+				</view>
+				<scroll-view
+					v-else-if="!isAllLevel1 && level2Tabs.length"
+					class="page-shop__l2"
+					scroll-x
+					show-scrollbar="false"
+				>
+					<view class="tabs-inner">
+						<view
+							v-for="(tab, index) in level2Tabs"
+							:key="tab.categoryId"
+							class="tab-item tab-item--sm"
+							:class="{ 'tab-item--active': activeLevel2Index === index }"
+							@click="onLevel2Change(index)"
+						>
+							<text>{{ tab.categoryName }}</text>
+						</view>
+					</view>
+				</scroll-view>
+
+				<shop-goods-block
+					:shop-id="shopId"
+					:shop-category-id="activeShopCategoryId"
+					:scroll-top-key="goodsScrollKey"
+					:scroll-height="goodsScrollHeight"
+					:enabled="goodsBlockEnabled"
+					:empty-text="goodsEmptyText"
+					@goods-click="onGoodsClick"
+				/>
+			</template>
+		</template>
+	</view>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import { getShopProfile, getShopCategories, getShopLevel2Tabs, followShop, unfollowShop } from '@/api/shop'
+import {
+	mapShopProfile,
+	mapShopCategoryTree,
+	mapShopLevel2Tabs,
+	sortShopTabsWithHot
+} from '@/utils/shopDisplay'
+import {
+	SHOP_ALL_TAB_ID,
+	SHOP_ALL_TAB_NAME,
+	SHOP_CLOSED_LABEL
+} from '@/constants/shop'
+import { goShopSearch } from '@/utils/shopNav'
+import { goGoodsDetail } from '@/utils/goodsDetail'
+import { ensureApiToken } from '@/utils/apiAuth'
+import { smartNavigateBack } from '@/utils/navBack'
+import ShopGoodsBlock from '@/components/shop/ShopGoodsBlock.vue'
+
+const shopId = ref('')
+const profile = ref(null)
+const profileLoading = ref(true)
+const pageError = ref('')
+const followLoading = ref(false)
+const closedLabel = SHOP_CLOSED_LABEL
+
+const categoryTree = ref([])
+const level2Tabs = ref([])
+const activeLevel1Index = ref(0)
+const activeLevel2Index = ref(0)
+const tabsLoading = ref(false)
+const tabsFailed = ref(false)
+const goodsScrollKey = ref(0)
+const goodsScrollHeight = ref('500px')
+
+const allTab = { categoryId: SHOP_ALL_TAB_ID, categoryName: SHOP_ALL_TAB_NAME }
+
+const level1Tabs = computed(() => [allTab, ...categoryTree.value])
+
+const isAllLevel1 = computed(() => {
+	const tab = level1Tabs.value[activeLevel1Index.value]
+	return !tab || tab.categoryId === SHOP_ALL_TAB_ID
+})
+
+const activeLevel1Id = computed(() => {
+	const tab = level1Tabs.value[activeLevel1Index.value]
+	return tab && tab.categoryId !== SHOP_ALL_TAB_ID ? tab.categoryId : ''
+})
+
+const activeShopCategoryId = computed(() => {
+	if (isAllLevel1.value) return ''
+	if (!level2Tabs.value.length) return ''
+	const tab = level2Tabs.value[activeLevel2Index.value]
+	return tab ? tab.categoryId : ''
+})
+
+const goodsBlockEnabled = computed(() => {
+	if (isAllLevel1.value) return true
+	return level2Tabs.value.length > 0
+})
+
+const goodsEmptyText = computed(() => {
+	if (!isAllLevel1.value && !level2Tabs.value.length && !tabsLoading.value) {
+		return '该分类下暂无商品'
+	}
+	return '暂无商品'
+})
+
+function calcScrollHeight() {
+	try {
+		const sys = uni.getSystemInfoSync()
+		const h = sys.windowHeight || 600
+		goodsScrollHeight.value = `${h - 280}px`
+	} catch (e) {
+		goodsScrollHeight.value = '500px'
+	}
+}
+
+function onBack() {
+	smartNavigateBack()
+}
+
+async function loadProfile() {
+	profileLoading.value = true
+	pageError.value = ''
+	try {
+		const res = await getShopProfile(shopId.value)
+		const mapped = mapShopProfile(res.data)
+		if (!mapped) {
+			throw new Error('店铺数据异常')
+		}
+		profile.value = mapped
+		const title = mapped.shopName || '店铺'
+		uni.setNavigationBarTitle({ title })
+	} catch (e) {
+		profile.value = null
+		const msg = (e && e.msg) || (e && e.message) || '店铺不存在或已关闭'
+		pageError.value = msg
+	} finally {
+		profileLoading.value = false
+	}
+}
+
+async function loadCategories() {
+	try {
+		const res = await getShopCategories(shopId.value)
+		categoryTree.value = sortShopTabsWithHot(mapShopCategoryTree(res.data || []))
+	} catch (e) {
+		categoryTree.value = []
+	}
+}
+
+async function loadLevel2Tabs() {
+	if (!activeLevel1Id.value) {
+		level2Tabs.value = []
+		return
+	}
+	tabsLoading.value = true
+	tabsFailed.value = false
+	try {
+		const res = await getShopLevel2Tabs(shopId.value, activeLevel1Id.value)
+		level2Tabs.value = sortShopTabsWithHot(mapShopLevel2Tabs(res.data || []))
+		if (activeLevel2Index.value >= level2Tabs.value.length) {
+			activeLevel2Index.value = 0
+		}
+	} catch (e) {
+		tabsFailed.value = true
+		level2Tabs.value = []
+	} finally {
+		tabsLoading.value = false
+	}
+}
+
+function bumpGoodsList() {
+	goodsScrollKey.value += 1
+}
+
+async function onLevel1Change(index) {
+	if (activeLevel1Index.value === index) return
+	activeLevel1Index.value = index
+	activeLevel2Index.value = 0
+	if (isAllLevel1.value) {
+		level2Tabs.value = []
+		bumpGoodsList()
+		return
+	}
+	await loadLevel2Tabs()
+	bumpGoodsList()
+}
+
+function onLevel2Change(index) {
+	if (activeLevel2Index.value === index) return
+	activeLevel2Index.value = index
+	bumpGoodsList()
+}
+
+async function onFollowTap() {
+	if (!profile.value || followLoading.value) return
+	if (!ensureApiToken()) return
+	followLoading.value = true
+	try {
+		if (profile.value.followed) {
+			await unfollowShop(shopId.value)
+			profile.value.followed = false
+			profile.value.fansCount = Math.max(0, profile.value.fansCount - 1)
+		} else {
+			await followShop(shopId.value)
+			profile.value.followed = true
+			profile.value.fansCount += 1
+		}
+	} catch (e) {
+		// request 已 Toast
+	} finally {
+		followLoading.value = false
+	}
+}
+
+function onGoShopSearch() {
+	goShopSearch(shopId.value)
+}
+
+function onGoodsClick(item) {
+	if (item && item.goodsId) {
+		goGoodsDetail(item.goodsId)
+	}
+}
+
+async function initPage() {
+	if (!shopId.value) return
+	await loadProfile()
+	if (!profile.value) return
+	await loadCategories()
+	if (!isAllLevel1.value) {
+		await loadLevel2Tabs()
+	}
+}
+
+onLoad((options) => {
+	shopId.value = options.shopId || ''
+	calcScrollHeight()
+	if (!shopId.value) {
+		pageError.value = '无法打开店铺'
+		profileLoading.value = false
+		setTimeout(() => onBack(), 800)
+		return
+	}
+	initPage()
+})
+</script>
+
+<style lang="scss" scoped>
+.page-shop {
+	display: flex;
+	flex-direction: column;
+	min-height: 100vh;
+	background: #f5f6f8;
+}
+.page-shop__error,
+.page-shop__loading,
+.page-shop__hint {
+	padding: 80rpx 24rpx;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+.shop-header {
+	display: flex;
+	align-items: flex-start;
+	padding: 24rpx;
+	background: #fff;
+	margin-bottom: 2rpx;
+}
+.shop-header__avatar {
+	width: 120rpx;
+	height: 120rpx;
+	border-radius: 12rpx;
+	background: #eee;
+	flex-shrink: 0;
+}
+.shop-header__main {
+	flex: 1;
+	margin: 0 20rpx;
+	min-width: 0;
+}
+.shop-header__title-row {
+	display: flex;
+	align-items: center;
+	flex-wrap: wrap;
+	gap: 12rpx;
+}
+.shop-header__name {
+	font-size: 32rpx;
+	font-weight: 600;
+	color: #333;
+}
+.shop-header__tag {
+	font-size: 22rpx;
+	color: #e65100;
+	background: #fff3e0;
+	padding: 4rpx 12rpx;
+	border-radius: 6rpx;
+}
+.shop-header__meta {
+	margin-top: 12rpx;
+	display: flex;
+	flex-wrap: wrap;
+	gap: 16rpx;
+}
+.shop-header__meta-item {
+	font-size: 24rpx;
+	color: #999;
+}
+.shop-header__desc {
+	margin-top: 12rpx;
+	font-size: 24rpx;
+	color: #666;
+	line-height: 1.5;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: 2;
+	-webkit-box-orient: vertical;
+}
+.shop-header__follow {
+	flex-shrink: 0;
+	padding: 12rpx 24rpx;
+	border-radius: 32rpx;
+	border: 2rpx solid #2e7d32;
+	background: #fff;
+}
+.shop-header__follow text {
+	font-size: 26rpx;
+	color: #2e7d32;
+}
+.shop-header__follow--on {
+	background: #e8f5e9;
+	border-color: #a5d6a7;
+}
+.shop-header__follow--on text {
+	color: #666;
+}
+.shop-search-bar {
+	display: flex;
+	align-items: center;
+	margin: 16rpx 24rpx;
+	padding: 0 24rpx;
+	height: 72rpx;
+	background: #fff;
+	border-radius: 36rpx;
+	border: 2rpx solid #c8e6c9;
+}
+.shop-search-bar__text {
+	margin-left: 12rpx;
+	font-size: 28rpx;
+	color: #999;
+}
+.page-shop__l1,
+.page-shop__l2 {
+	background: #fff;
+	white-space: nowrap;
+}
+.page-shop__l2 {
+	border-top: 1rpx solid #f0f0f0;
+}
+.tabs-inner {
+	display: inline-flex;
+	padding: 16rpx 12rpx;
+}
+.tab-item {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	padding: 12rpx 28rpx;
+	margin: 0 8rpx;
+	border-radius: 32rpx;
+	background: #f5f5f5;
+}
+.tab-item--sm {
+	padding: 8rpx 24rpx;
+}
+.tab-item text {
+	font-size: 26rpx;
+	color: #666;
+}
+.tab-item--active {
+	background: #e8f5e9;
+}
+.tab-item--active text {
+	color: #2e7d32;
+	font-weight: 500;
+}
+</style>

shop-app/subpackage/shop/search.vue

@@ -0,0 +1,144 @@
+<template>
+	<view class="page-shop-search">
+		<view class="search-header">
+			<u-icon name="arrow-left" size="20" color="#333" @click="onBack" />
+			<view class="search-header__input-wrap">
+				<u-icon name="search" color="#999" size="18" />
+				<input
+					class="search-header__input"
+					v-model="keyword"
+					:placeholder="placeholder"
+					confirm-type="search"
+					:focus="inputFocus"
+					@confirm="onSubmit"
+				/>
+				<u-icon
+					v-if="keyword"
+					name="close-circle-fill"
+					color="#ccc"
+					size="18"
+					@click="keyword = ''"
+				/>
+			</view>
+			<text class="search-header__btn" @click="onSubmit">搜索</text>
+		</view>
+
+		<text class="search-tip">仅搜索本店出售中商品</text>
+
+		<shop-goods-block
+			v-if="searched"
+			:shop-id="shopId"
+			:keyword="searchKeyword"
+			:scroll-height="scrollHeight"
+			:scroll-top-key="scrollKey"
+			empty-text="暂无相关"
+			@goods-click="onGoodsClick"
+		/>
+	</view>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import { SHOP_SEARCH_PLACEHOLDER } from '@/constants/shop'
+import { goGoodsDetail } from '@/utils/goodsDetail'
+import { smartNavigateBack } from '@/utils/navBack'
+import ShopGoodsBlock from '@/components/shop/ShopGoodsBlock.vue'
+
+const shopId = ref('')
+const keyword = ref('')
+const searchKeyword = ref('')
+const searched = ref(false)
+const scrollKey = ref(0)
+const scrollHeight = ref('600px')
+const inputFocus = ref(false)
+const placeholder = SHOP_SEARCH_PLACEHOLDER
+
+function calcScrollHeight() {
+	try {
+		const sys = uni.getSystemInfoSync()
+		const h = sys.windowHeight || 600
+		scrollHeight.value = `${h - 120}px`
+	} catch (e) {
+		scrollHeight.value = '500px'
+	}
+}
+
+function onBack() {
+	smartNavigateBack()
+}
+
+function onSubmit() {
+	const text = (keyword.value || '').trim()
+	if (!text) {
+		uni.showToast({ title: '请输入搜索内容', icon: 'none' })
+		return
+	}
+	searchKeyword.value = text
+	searched.value = true
+	scrollKey.value += 1
+}
+
+function onGoodsClick(item) {
+	if (item && item.goodsId) {
+		goGoodsDetail(item.goodsId)
+	}
+}
+
+onLoad((options) => {
+	shopId.value = options.shopId || ''
+	calcScrollHeight()
+	if (!shopId.value) {
+		uni.showToast({ title: '无法打开店铺', icon: 'none' })
+		setTimeout(() => onBack(), 500)
+		return
+	}
+	const kw = options.keyword ? decodeURIComponent(options.keyword) : ''
+	keyword.value = (kw || '').trim()
+	if (keyword.value) {
+		onSubmit()
+	} else {
+		inputFocus.value = true
+	}
+})
+</script>
+
+<style lang="scss" scoped>
+.page-shop-search {
+	display: flex;
+	flex-direction: column;
+	min-height: 100vh;
+	background: #f5f6f8;
+}
+.search-header {
+	display: flex;
+	align-items: center;
+	padding: 16rpx 24rpx;
+	background: #e8f5e9;
+}
+.search-header__input-wrap {
+	flex: 1;
+	display: flex;
+	align-items: center;
+	height: 72rpx;
+	margin: 0 16rpx;
+	padding: 0 20rpx;
+	background: #fff;
+	border-radius: 36rpx;
+}
+.search-header__input {
+	flex: 1;
+	margin-left: 12rpx;
+	font-size: 28rpx;
+}
+.search-header__btn {
+	font-size: 28rpx;
+	color: #2e7d32;
+	font-weight: 500;
+}
+.search-tip {
+	padding: 16rpx 24rpx;
+	font-size: 24rpx;
+	color: #999;
+}
+</style>

shop-app/utils/pageRoute.js

@@ -52,7 +52,13 @@ export const PAGE_GOODS_REVIEWS = '/subpackage/goods/reviews'
 export const PAGE_SEARCH_INDEX = '/subpackage/search/index'
 export const PAGE_SEARCH_RESULT = '/subpackage/search/result'
 
-// —— 分包：待建模块（示例，落地后取消注释并注册 pages.json）——
-// export const PAGE_SHOP_HOME = '/subpackage/shop/index'
+// —— 分包：店铺 ——
+
+/** 店铺主页 */
+export const PAGE_SHOP_HOME = '/subpackage/shop/index'
+/** 店内搜索 */
+export const PAGE_SHOP_SEARCH = '/subpackage/shop/search'
+
+// —— 分包：待建模块（示例，落地后注册 pages.json）——
 // export const PAGE_ORDER_LIST = '/subpackage/order/list'
 // export const PAGE_ORDER_CONFIRM = '/subpackage/order/confirm'

shop-app/utils/shopDisplay.js

@@ -1,7 +1,51 @@
 import { resolveFileUrl } from '@/utils/image'
+import { SHOP_STATUS_CLOSED } from '@/constants/shop'
+import { mapCategoryTree, mapLevel2Tabs } from '@/utils/categoryDisplay'
 
 const SHOP_PLACEHOLDER = '/static/logo.png'
 
+/** 店铺主页介绍区 */
+export function mapShopProfile(row) {
+  if (!row) return null
+  const rating = row.rating
+  const fansCount = row.fansCount != null ? Number(row.fansCount) : 0
+  return {
+    shopId: row.shopId,
+    shopName: row.shopName || '',
+    shopAvatar: resolveFileUrl(row.shopAvatar) || SHOP_PLACEHOLDER,
+    shopDesc: (row.shopDesc || '').trim(),
+    shopStatus: row.shopStatus,
+    shopPhone: row.shopPhone || '',
+    rating,
+    fansCount,
+    followed: !!row.followed,
+    isClosed: String(row.shopStatus) === SHOP_STATUS_CLOSED,
+    showRating: rating != null && rating !== '',
+    showFans: true,
+    ratingText: rating != null && rating !== '' ? String(rating) : ''
+  }
+}
+
+/** 店铺分类树 / 二级 Tab（字段同平台分类 VO） */
+export function mapShopCategoryTree(list) {
+  return mapCategoryTree(list)
+}
+
+export function mapShopLevel2Tabs(list) {
+  return mapLevel2Tabs(list)
+}
+
+/** 热门分类靠前（同序保持 sortNo） */
+export function sortShopTabsWithHot(list) {
+  if (!Array.isArray(list) || !list.length) return []
+  return [...list].sort((a, b) => {
+    if (!!a.isHot !== !!b.isHot) return a.isHot ? -1 : 1
+    const sa = Number(a.sortNo) || 0
+    const sb = Number(b.sortNo) || 0
+    return sa - sb
+  })
+}
+
 /** 搜索店铺卡片 */
 export function mapShopCard(row) {
   if (!row) return null

shop-app/utils/shopNav.js

@@ -0,0 +1,20 @@
+import { PAGE_SHOP_HOME, PAGE_SHOP_SEARCH } from '@/utils/pageRoute'
+
+/** 跳转店铺主页 */
+export function goShopHome(shopId) {
+  if (!shopId) return
+  uni.navigateTo({
+    url: `${PAGE_SHOP_HOME}?shopId=${shopId}`
+  })
+}
+
+/** 跳转店内搜索页 */
+export function goShopSearch(shopId, keyword) {
+  if (!shopId) return
+  let url = `${PAGE_SHOP_SEARCH}?shopId=${shopId}`
+  const kw = (keyword || '').trim()
+  if (kw) {
+    url += `&keyword=${encodeURIComponent(kw)}`
+  }
+  uni.navigateTo({ url })
+}