首页优化
This commit is contained in:
@@ -0,0 +1,172 @@
|
||||
# 小程序首页接口文档
|
||||
|
||||
> 适用端：微信小程序（h5 仓库，Taro）
|
||||
> 后台配置入口：PC 后台「客户端配置」菜单（首页轮播图 / 宫格导航 / 促销推荐卡片）
|
||||
> 更新日期：2026-08-14
|
||||
|
||||
## 通用约定
|
||||
|
||||
| 项 | 说明 |
|
||||
|---|---|
|
||||
| 根地址 | `BASE_URL`（见 `src/utils/request.ts`，如 `http://localhost:8000/index.php`） |
|
||||
| 认证 | 请求头 `Authorization: Bearer {token}`，token 来自登录接口，本地存储 key `auth_token` |
|
||||
| 响应包络 | `{ success: boolean, data: T, msg?: string, showType?: number }` |
|
||||
| 失败处理 | `success=false` 时 `msg` 为中文错误信息；HTTP 401 表示登录过期，需重新登录 |
|
||||
|
||||
## GET /mini/home
|
||||
|
||||
首页配置聚合接口：一次返回轮播图、宫格导航、促销推荐卡片三组数据，均为**启用状态（status=1）**且按 `sort` 升序（越小越靠前）。
|
||||
|
||||
- **权限**：需登录（Bearer token）
|
||||
- **请求参数**：无
|
||||
|
||||
### 响应示例
|
||||
|
||||
```json
|
||||
{
|
||||
"success": true,
|
||||
"msg": "ok",
|
||||
"data": {
|
||||
"banners": [
|
||||
{
|
||||
"id": 1,
|
||||
"title": "新鲜直采",
|
||||
"image_id": 123,
|
||||
"link": "/pages/goods/detail?id=1",
|
||||
"sort": 0,
|
||||
"image_url": "http://localhost:8000/storage/uploads/2026/08/14/xxx.jpg"
|
||||
}
|
||||
],
|
||||
"navs": [
|
||||
{
|
||||
"id": 1,
|
||||
"name": "蔬菜专区",
|
||||
"image_id": 124,
|
||||
"link": "/pages/category/index?id=1",
|
||||
"sort": 0,
|
||||
"image_url": "http://localhost:8000/storage/uploads/2026/08/14/yyy.png"
|
||||
}
|
||||
],
|
||||
"promos": [
|
||||
{
|
||||
"id": 1,
|
||||
"title": "限时特惠",
|
||||
"sub_title": "全场 8 折起",
|
||||
"image_id": 125,
|
||||
"link": "/pages/promo/detail?id=1",
|
||||
"sort": 0,
|
||||
"image_url": "http://localhost:8000/storage/uploads/2026/08/14/zzz.jpg"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 字段说明
|
||||
|
||||
**banners（轮播图）**
|
||||
|
||||
| 字段 | 类型 | 说明 |
|
||||
|---|---|---|
|
||||
| id | number | 轮播图 ID |
|
||||
| title | string | 标题（后台维护，可用于无障碍/占位） |
|
||||
| image_id | number | 图片文件 ID（sys_file），一般无需使用 |
|
||||
| **image_url** | string \| null | 轮播图片完整 URL，直接用于 `<Image src>`；未传图时为 null |
|
||||
| link | string | 小程序页面跳转路径，**空字符串表示点击不跳转** |
|
||||
| sort | number | 排序值（已按此升序返回，前端无需再排） |
|
||||
|
||||
**navs（宫格导航）**
|
||||
|
||||
| 字段 | 类型 | 说明 |
|
||||
|---|---|---|
|
||||
| id | number | 导航 ID |
|
||||
| name | string | 导航名称（宫格文字） |
|
||||
| **image_url** | string \| null | 导航图标完整 URL |
|
||||
| link | string | 小程序页面跳转路径，空字符串不跳转 |
|
||||
| sort | number | 排序值 |
|
||||
|
||||
**promos（促销推荐卡片）**
|
||||
|
||||
| 字段 | 类型 | 说明 |
|
||||
|---|---|---|
|
||||
| id | number | 卡片 ID |
|
||||
| title | string | 卡片标题 |
|
||||
| sub_title | string | 副标题/促销文案，可能为空字符串 |
|
||||
| **image_url** | string \| null | 卡片图片完整 URL |
|
||||
| link | string | 小程序页面跳转路径，空字符串不跳转 |
|
||||
| sort | number | 排序值 |
|
||||
|
||||
### 前端接入示例
|
||||
|
||||
`src/services/home.ts`（新增）：
|
||||
|
||||
```ts
|
||||
import { get } from '@/utils/request'
|
||||
|
||||
/** 首页轮播图项 */
|
||||
export interface HomeBanner {
|
||||
id: number
|
||||
title: string
|
||||
image_id: number
|
||||
image_url: string | null
|
||||
link: string
|
||||
sort: number
|
||||
}
|
||||
|
||||
/** 首页宫格导航项 */
|
||||
export interface HomeNav {
|
||||
id: number
|
||||
name: string
|
||||
image_id: number
|
||||
image_url: string | null
|
||||
link: string
|
||||
sort: number
|
||||
}
|
||||
|
||||
/** 首页促销推荐卡片 */
|
||||
export interface HomePromo {
|
||||
id: number
|
||||
title: string
|
||||
sub_title: string
|
||||
image_id: number
|
||||
image_url: string | null
|
||||
link: string
|
||||
sort: number
|
||||
}
|
||||
|
||||
/** 首页配置聚合数据 */
|
||||
export interface HomeConfig {
|
||||
banners: HomeBanner[]
|
||||
navs: HomeNav[]
|
||||
promos: HomePromo[]
|
||||
}
|
||||
|
||||
/** 首页配置（轮播图 + 宫格导航 + 促销卡片）：GET /mini/home */
|
||||
export function getHomeConfigApi() {
|
||||
return get<HomeConfig>('/mini/home')
|
||||
}
|
||||
```
|
||||
|
||||
页面中使用（跳转需兼容空链接）：
|
||||
|
||||
```tsx
|
||||
const [config, setConfig] = useState<HomeConfig>({ banners: [], navs: [], promos: [] })
|
||||
|
||||
useEffect(() => {
|
||||
getHomeConfigApi().then(res => setConfig(res.data))
|
||||
}, [])
|
||||
|
||||
/** 统一跳转：link 为空不跳转 */
|
||||
function handleLink(link: string) {
|
||||
if (!link) return
|
||||
Taro.navigateTo({ url: link })
|
||||
}
|
||||
```
|
||||
|
||||
### 注意事项
|
||||
|
||||
1. **三组数据均可能为空数组**（后台未配置或全部停用），页面需做空态处理。
|
||||
2. `image_url` 可能为 `null`（后台未上传图片），渲染前判空。
|
||||
3. `link` 为小程序内部页面路径（以 `/` 开头），用 `Taro.navigateTo` 跳转；若目标为 tabBar 页面需改用 `Taro.switchTab`（建议后台配置时避免填 tabBar 路径）。
|
||||
4. 数据实时生效：后台修改后，小程序下次进入首页请求即为最新内容，无缓存。
|
||||
5. 接口需登录后调用；未登录（401）会由 request 封装自动跳登录页。
|
||||
@@ -7,6 +7,7 @@ export default defineAppConfig({
|
||||
'pages/profile/index',
|
||||
'pages/order-list/index',
|
||||
'pages/statement/index',
|
||||
'pages/statement-detail/index',
|
||||
'pages/settings/index',
|
||||
'pages/login/index',
|
||||
'pages/register/index',
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '首页',
|
||||
navigationStyle: 'custom',
|
||||
})
|
||||
|
||||
+152
-19
@@ -4,17 +4,62 @@
|
||||
padding-bottom: calc(140rpx + env(safe-area-inset-bottom));
|
||||
box-sizing: border-box;
|
||||
|
||||
// ===== 顶部搜索 =====
|
||||
.home-search {
|
||||
background: linear-gradient(135deg, #ee0a24, #ff4d4f);
|
||||
padding: 16rpx 24rpx;
|
||||
// ===== 自定义顶部导航栏 =====
|
||||
.home-header {
|
||||
background: linear-gradient(160deg, #d60410 0%, #ee0a24 55%, #ff4d4f 100%);
|
||||
// 底部留白供轮播图上移叠放
|
||||
padding-bottom: 88rpx;
|
||||
|
||||
&__bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16rpx 32rpx 8rpx;
|
||||
}
|
||||
|
||||
&__brand {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
&__title {
|
||||
color: #ffffff;
|
||||
font-size: 44rpx;
|
||||
font-weight: 700;
|
||||
letter-spacing: 4rpx;
|
||||
}
|
||||
|
||||
&__slogan {
|
||||
margin-left: 16rpx;
|
||||
color: rgba(255, 255, 255, 0.75);
|
||||
font-size: 22rpx;
|
||||
letter-spacing: 2rpx;
|
||||
}
|
||||
|
||||
&__notice {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.18);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&__search {
|
||||
padding: 8rpx 16rpx 0;
|
||||
}
|
||||
}
|
||||
|
||||
// ===== 轮播图 =====
|
||||
.home-banner {
|
||||
margin: 20rpx 24rpx 0;
|
||||
// 上移叠在红色导航栏上，形成视觉连贯
|
||||
margin: -72rpx 24rpx 0;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 8rpx 24rpx rgba(238, 10, 36, 0.15);
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
&__swiper {
|
||||
border-radius: 20rpx;
|
||||
@@ -22,52 +67,127 @@
|
||||
|
||||
&__image {
|
||||
width: 100%;
|
||||
height: 320rpx;
|
||||
height: 300rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
&__placeholder {
|
||||
width: 100%;
|
||||
height: 320rpx;
|
||||
background: linear-gradient(135deg, #ff9a9e, #ff4d4f);
|
||||
height: 300rpx;
|
||||
background: linear-gradient(135deg, #ff8a5c, #ff4d4f);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&__placeholder-text {
|
||||
&__placeholder-title {
|
||||
color: #fff;
|
||||
font-size: 40rpx;
|
||||
font-weight: 600;
|
||||
font-size: 44rpx;
|
||||
font-weight: 700;
|
||||
letter-spacing: 8rpx;
|
||||
}
|
||||
|
||||
&__placeholder-sub {
|
||||
margin-top: 16rpx;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
font-size: 24rpx;
|
||||
letter-spacing: 2rpx;
|
||||
}
|
||||
}
|
||||
|
||||
// ===== 导航菜单 =====
|
||||
// ===== 宫格导航 =====
|
||||
.home-menu {
|
||||
margin: 20rpx 24rpx 0;
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
padding: 20rpx 0 8rpx;
|
||||
padding: 28rpx 0 16rpx;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
width: 84rpx;
|
||||
height: 84rpx;
|
||||
border-radius: 24rpx;
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
border-radius: 28rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&__image {
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
&__text {
|
||||
color: #fff;
|
||||
font-size: 36rpx;
|
||||
font-size: 38rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
// ===== 促销推荐卡片 =====
|
||||
.home-promo {
|
||||
margin: 20rpx 24rpx 0;
|
||||
}
|
||||
|
||||
.promo-card {
|
||||
position: relative;
|
||||
height: 180rpx;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
margin-bottom: 16rpx;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&__bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&__mask {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, rgba(160, 4, 16, 0.82) 0%, rgba(238, 10, 36, 0.45) 55%, rgba(238, 10, 36, 0) 100%);
|
||||
}
|
||||
|
||||
&__content {
|
||||
position: absolute;
|
||||
left: 32rpx;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&__title {
|
||||
color: #ffffff;
|
||||
font-size: 38rpx;
|
||||
font-weight: 700;
|
||||
letter-spacing: 2rpx;
|
||||
text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
&__sub {
|
||||
margin-top: 10rpx;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
font-size: 24rpx;
|
||||
letter-spacing: 1rpx;
|
||||
}
|
||||
}
|
||||
|
||||
// ===== 推荐商品 =====
|
||||
.home-recommend {
|
||||
margin: 20rpx 24rpx 0;
|
||||
margin: 28rpx 24rpx 0;
|
||||
|
||||
&__header {
|
||||
display: flex;
|
||||
@@ -76,6 +196,19 @@
|
||||
padding: 8rpx 8rpx 20rpx;
|
||||
}
|
||||
|
||||
&__title-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&__title-bar {
|
||||
width: 8rpx;
|
||||
height: 30rpx;
|
||||
border-radius: 4rpx;
|
||||
background: linear-gradient(180deg, #ee0a24, #ff6034);
|
||||
margin-right: 14rpx;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
@@ -178,7 +311,7 @@
|
||||
width: 52rpx;
|
||||
height: 52rpx;
|
||||
border-radius: 50%;
|
||||
background: #ee0a24;
|
||||
background: linear-gradient(135deg, #ee0a24, #ff6034);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
+135
-73
@@ -1,46 +1,68 @@
|
||||
import { useCallback, useMemo, useState } from 'react'
|
||||
import Taro, { useDidShow } from '@tarojs/taro'
|
||||
import { View, Text, Image } from '@tarojs/components'
|
||||
import { Grid, GridItem, Search, Swiper, SwiperItem } from '@antmjs/vantui'
|
||||
import { Grid, GridItem, Icon, Search, Swiper, SwiperItem } from '@antmjs/vantui'
|
||||
import useAuthStore from '@/stores/auth/useAuthStore'
|
||||
import useCartStore from '@/stores/cart/useCartStore'
|
||||
import { getCategoriesApi, getProductListApi } from '@/services/product'
|
||||
import { getHomeConfigApi } from '@/services/home'
|
||||
import type { HomeConfig } from '@/services/home'
|
||||
import { getProductListApi } from '@/services/product'
|
||||
import { getProductCover } from '@/types/product'
|
||||
import type { Category, Product } from '@/types/product'
|
||||
import type { Product } from '@/types/product'
|
||||
import './index.less'
|
||||
|
||||
/** 首页 → 商品页的本地存储传参 key（switchTab 无法带参） */
|
||||
const PENDING_CATEGORY_KEY = 'product_category_id'
|
||||
const PENDING_KEYWORD_KEY = 'product_keyword'
|
||||
|
||||
/** 分类菜单色块配色 */
|
||||
const MENU_COLORS = ['#ee0a24', '#ff9f43', '#07c160', '#1989fa', '#8a5cf6', '#00b8d9']
|
||||
/** tabBar 页面路径（link 跳转需改用 switchTab） */
|
||||
const TAB_PATHS = [
|
||||
'pages/index/index',
|
||||
'pages/product/index',
|
||||
'pages/cart/index',
|
||||
'pages/message/index',
|
||||
'pages/profile/index',
|
||||
]
|
||||
|
||||
/** 宫格导航无图时的兜底色块配色（生鲜红橙系） */
|
||||
const NAV_COLORS = ['#ee0a24', '#ff7a1a', '#07c160', '#1989fa', '#8a5cf6', '#ff976a', '#00b8d9', '#f56c6c']
|
||||
|
||||
/** 获取状态栏高度（H5 端为 0） */
|
||||
function getStatusBarHeight(): number {
|
||||
try {
|
||||
const info = typeof Taro.getWindowInfo === 'function' ? Taro.getWindowInfo() : Taro.getSystemInfoSync()
|
||||
return info.statusBarHeight || 0
|
||||
} catch {
|
||||
return 0
|
||||
}
|
||||
}
|
||||
|
||||
export default function IndexPage() {
|
||||
const token = useAuthStore(s => s.token)
|
||||
const addItem = useCartStore(s => s.addItem)
|
||||
|
||||
/** 顶级分类（导航菜单前 6 个） */
|
||||
const [categories, setCategories] = useState<Category[]>([])
|
||||
/** 首页配置（轮播图 / 宫格导航 / 促销卡片） */
|
||||
const [config, setConfig] = useState<HomeConfig>({ banners: [], navs: [], promos: [] })
|
||||
/** 推荐商品 */
|
||||
const [products, setProducts] = useState<Product[]>([])
|
||||
/** 搜索框输入 */
|
||||
const [keyword, setKeyword] = useState('')
|
||||
|
||||
const loggedIn = !!token
|
||||
const statusBarHeight = useMemo(() => getStatusBarHeight(), [])
|
||||
|
||||
useDidShow(() => {
|
||||
loadCategories()
|
||||
if (loggedIn) {
|
||||
loadHomeConfig()
|
||||
loadRecommend()
|
||||
}
|
||||
})
|
||||
|
||||
/** 商品分类 */
|
||||
const loadCategories = useCallback(async () => {
|
||||
/** 首页配置聚合数据（需登录） */
|
||||
const loadHomeConfig = useCallback(async () => {
|
||||
try {
|
||||
const res = await getCategoriesApi()
|
||||
setCategories(res.data.filter(c => c.parent_id === 0))
|
||||
const res = await getHomeConfigApi()
|
||||
setConfig(res.data)
|
||||
} catch {
|
||||
// 错误已由 request 层 toast
|
||||
}
|
||||
@@ -56,17 +78,26 @@ export default function IndexPage() {
|
||||
}
|
||||
}, [])
|
||||
|
||||
/** 轮播数据：取有图商品的前 4 张图 */
|
||||
const bannerImages = useMemo(
|
||||
() => products.filter(p => getProductCover(p)).slice(0, 4),
|
||||
[products],
|
||||
)
|
||||
/**
|
||||
* 后台配置的 link 统一跳转：
|
||||
* - 空字符串不跳转
|
||||
* - tabBar 页面用 switchTab，其余用 navigateTo
|
||||
*/
|
||||
const handleLink = useCallback((link: string) => {
|
||||
if (!link) return
|
||||
const path = link.split('?')[0].replace(/^\//, '')
|
||||
if (TAB_PATHS.includes(path)) {
|
||||
Taro.switchTab({ url: `/${path}` })
|
||||
} else {
|
||||
Taro.navigateTo({ url: link })
|
||||
}
|
||||
}, [])
|
||||
|
||||
/** 跳转商品页并带上分类/关键词 */
|
||||
const goProduct = useCallback((categoryId?: number, kw?: string) => {
|
||||
/** 跳转商品页并带上关键词 */
|
||||
const goProduct = useCallback((kw?: string) => {
|
||||
try {
|
||||
if (categoryId !== undefined) Taro.setStorageSync(PENDING_CATEGORY_KEY, categoryId)
|
||||
if (kw !== undefined) Taro.setStorageSync(PENDING_KEYWORD_KEY, kw)
|
||||
Taro.removeStorageSync(PENDING_CATEGORY_KEY)
|
||||
} catch {
|
||||
// noop
|
||||
}
|
||||
@@ -75,7 +106,7 @@ export default function IndexPage() {
|
||||
|
||||
/** 搜索框聚焦/提交 → 商品页搜索 */
|
||||
const handleSearchFocus = useCallback(() => {
|
||||
goProduct(undefined, keyword.trim())
|
||||
goProduct(keyword.trim())
|
||||
}, [goProduct, keyword])
|
||||
|
||||
/** 快捷加购 */
|
||||
@@ -94,82 +125,113 @@ export default function IndexPage() {
|
||||
|
||||
return (
|
||||
<View className='home-page'>
|
||||
{/* ========== 顶部搜索 ========== */}
|
||||
<View className='home-search'>
|
||||
<Search
|
||||
value={keyword}
|
||||
placeholder='搜索商品名称/规格'
|
||||
shape='round'
|
||||
background='transparent'
|
||||
onChange={e => setKeyword(String(e.detail))}
|
||||
onFocus={handleSearchFocus}
|
||||
onSearch={handleSearchFocus}
|
||||
/>
|
||||
{/* ========== 自定义顶部导航栏 ========== */}
|
||||
<View className='home-header' style={{ paddingTop: `${statusBarHeight}px` }}>
|
||||
<View className='home-header__bar'>
|
||||
<View className='home-header__brand'>
|
||||
<Text className='home-header__title'>鲜采直供</Text>
|
||||
<Text className='home-header__slogan'>产地直采 · 新鲜直达</Text>
|
||||
</View>
|
||||
<View className='home-header__notice' onClick={() => Taro.switchTab({ url: '/pages/message/index' })}>
|
||||
<Icon name='bell' size='44rpx' color='#ffffff' />
|
||||
</View>
|
||||
</View>
|
||||
<View className='home-header__search'>
|
||||
<Search
|
||||
value={keyword}
|
||||
placeholder='搜索商品名称/规格'
|
||||
shape='round'
|
||||
background='transparent'
|
||||
onChange={e => setKeyword(String(e.detail))}
|
||||
onFocus={handleSearchFocus}
|
||||
onSearch={handleSearchFocus}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* ========== 轮播图 ========== */}
|
||||
<View className='home-banner'>
|
||||
<Swiper
|
||||
className='home-banner__swiper'
|
||||
height='320rpx'
|
||||
height='300rpx'
|
||||
autoPlay={3000}
|
||||
loop
|
||||
paginationVisible
|
||||
paginationColor='#ffffff'
|
||||
>
|
||||
{bannerImages.length > 0 ? (
|
||||
bannerImages.map((product, idx) => (
|
||||
<SwiperItem key={product.id}>
|
||||
<Image
|
||||
className='home-banner__image'
|
||||
src={getProductCover(product)}
|
||||
mode='aspectFill'
|
||||
onClick={() => goProduct()}
|
||||
/>
|
||||
</SwiperItem>
|
||||
))
|
||||
{config.banners.length > 0 ? (
|
||||
config.banners.map(banner =>
|
||||
banner.image_url ? (
|
||||
<SwiperItem key={banner.id}>
|
||||
<Image
|
||||
className='home-banner__image'
|
||||
src={banner.image_url}
|
||||
mode='aspectFill'
|
||||
onClick={() => handleLink(banner.link)}
|
||||
/>
|
||||
</SwiperItem>
|
||||
) : null,
|
||||
)
|
||||
) : (
|
||||
<SwiperItem>
|
||||
<View className='home-banner__placeholder' onClick={() => goProduct()}>
|
||||
<Text className='home-banner__placeholder-text'>订货采购</Text>
|
||||
<View className='home-banner__placeholder'>
|
||||
<Text className='home-banner__placeholder-title'>新鲜直采</Text>
|
||||
<Text className='home-banner__placeholder-sub'>每日凌晨采货 · 天亮前到店</Text>
|
||||
</View>
|
||||
</SwiperItem>
|
||||
)}
|
||||
</Swiper>
|
||||
</View>
|
||||
|
||||
{/* ========== 导航菜单 ========== */}
|
||||
<View className='home-menu'>
|
||||
<Grid columnNum={4} border={false} iconSize={52}>
|
||||
{categories.slice(0, 6).map((cat, idx) => (
|
||||
<GridItem
|
||||
key={cat.id}
|
||||
text={cat.name}
|
||||
onClick={() => goProduct(cat.id)}
|
||||
renderIcon={
|
||||
<View className='menu-icon' style={{ background: MENU_COLORS[idx % MENU_COLORS.length] }}>
|
||||
<Text className='menu-icon__text'>{cat.name.slice(0, 1)}</Text>
|
||||
</View>
|
||||
}
|
||||
/>
|
||||
{/* ========== 宫格导航（一行四个） ========== */}
|
||||
{config.navs.length > 0 && (
|
||||
<View className='home-menu'>
|
||||
<Grid columnNum={4} border={false} iconSize={88}>
|
||||
{config.navs.map((nav, idx) => (
|
||||
<GridItem
|
||||
key={nav.id}
|
||||
text={nav.name}
|
||||
onClick={() => handleLink(nav.link)}
|
||||
renderIcon={
|
||||
nav.image_url ? (
|
||||
<Image className='menu-icon__image' src={nav.image_url} mode='aspectFit' />
|
||||
) : (
|
||||
<View className='menu-icon' style={{ background: NAV_COLORS[idx % NAV_COLORS.length] }}>
|
||||
<Text className='menu-icon__text'>{nav.name.slice(0, 1)}</Text>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
/>
|
||||
))}
|
||||
</Grid>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* ========== 促销推荐卡片 ========== */}
|
||||
{config.promos.length > 0 && (
|
||||
<View className='home-promo'>
|
||||
{config.promos.map(promo => (
|
||||
<View key={promo.id} className='promo-card' onClick={() => handleLink(promo.link)}>
|
||||
{promo.image_url && (
|
||||
<Image className='promo-card__bg' src={promo.image_url} mode='aspectFill' lazyLoad />
|
||||
)}
|
||||
{promo.title && <View className='promo-card__mask' />}
|
||||
<View className='promo-card__content'>
|
||||
<Text className='promo-card__title'>{promo.title}</Text>
|
||||
{promo.sub_title && <Text className='promo-card__sub'>{promo.sub_title}</Text>}
|
||||
</View>
|
||||
</View>
|
||||
))}
|
||||
<GridItem
|
||||
icon='apps-o'
|
||||
text='全部商品'
|
||||
onClick={() => goProduct()}
|
||||
/>
|
||||
<GridItem
|
||||
icon='orders-o'
|
||||
text='我的订单'
|
||||
onClick={() => Taro.navigateTo({ url: '/pages/order-list/index?status=all' })}
|
||||
/>
|
||||
</Grid>
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* ========== 推荐商品 ========== */}
|
||||
<View className='home-recommend'>
|
||||
<View className='home-recommend__header'>
|
||||
<Text className='home-recommend__title'>推荐商品</Text>
|
||||
<View className='home-recommend__title-wrap'>
|
||||
<View className='home-recommend__title-bar' />
|
||||
<Text className='home-recommend__title'>推荐商品</Text>
|
||||
</View>
|
||||
<Text className='home-recommend__more' onClick={() => goProduct()}>查看更多 ›</Text>
|
||||
</View>
|
||||
|
||||
|
||||
@@ -19,7 +19,7 @@ const MENU_ITEMS = [
|
||||
},
|
||||
{
|
||||
key: 'statement',
|
||||
label: '对账单',
|
||||
label: '账单',
|
||||
icon: 'balance-list-o',
|
||||
onClick: () => Taro.navigateTo({ url: '/pages/statement/index' }),
|
||||
},
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '账单详情',
|
||||
})
|
||||
@@ -0,0 +1,179 @@
|
||||
.bill-detail {
|
||||
min-height: 100vh;
|
||||
background: #f7f8fa;
|
||||
padding: 20rpx 24rpx 120rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.bill-card {
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 24rpx;
|
||||
margin-bottom: 16rpx;
|
||||
|
||||
&__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
&__no {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #323233;
|
||||
}
|
||||
|
||||
&__status {
|
||||
font-size: 24rpx;
|
||||
|
||||
&--unpaid {
|
||||
color: #ee0a24;
|
||||
}
|
||||
|
||||
&--paid {
|
||||
color: #07c160;
|
||||
}
|
||||
}
|
||||
|
||||
&__row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 10rpx 0;
|
||||
|
||||
&--total {
|
||||
margin-top: 12rpx;
|
||||
padding-top: 20rpx;
|
||||
border-top: 1rpx solid #ebedf0;
|
||||
}
|
||||
}
|
||||
|
||||
&__label {
|
||||
font-size: 26rpx;
|
||||
color: #969799;
|
||||
}
|
||||
|
||||
&__value {
|
||||
font-size: 26rpx;
|
||||
color: #323233;
|
||||
|
||||
&--credit {
|
||||
color: #07c160;
|
||||
}
|
||||
}
|
||||
|
||||
&__total {
|
||||
font-size: 34rpx;
|
||||
font-weight: 600;
|
||||
color: #ee0a24;
|
||||
}
|
||||
}
|
||||
|
||||
.bill-section {
|
||||
&__title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #323233;
|
||||
display: block;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
&__desc {
|
||||
font-size: 22rpx;
|
||||
color: #c8c9cc;
|
||||
display: block;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.bill-goods {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 14rpx 0;
|
||||
border-bottom: 1rpx solid #f2f3f5;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
&__main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
&__name {
|
||||
font-size: 28rpx;
|
||||
color: #323233;
|
||||
display: block;
|
||||
}
|
||||
|
||||
&__spec {
|
||||
font-size: 22rpx;
|
||||
color: #c8c9cc;
|
||||
display: block;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
|
||||
&__side {
|
||||
text-align: right;
|
||||
margin-left: 16rpx;
|
||||
}
|
||||
|
||||
&__qty {
|
||||
font-size: 24rpx;
|
||||
color: #969799;
|
||||
display: block;
|
||||
}
|
||||
|
||||
&__amount {
|
||||
font-size: 28rpx;
|
||||
color: #323233;
|
||||
font-weight: 500;
|
||||
display: block;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.bill-order {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 14rpx 0;
|
||||
border-bottom: 1rpx solid #f2f3f5;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
&__no {
|
||||
font-size: 26rpx;
|
||||
color: #323233;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
&__date {
|
||||
font-size: 24rpx;
|
||||
color: #969799;
|
||||
margin: 0 16rpx;
|
||||
}
|
||||
|
||||
&__amount {
|
||||
font-size: 26rpx;
|
||||
color: #323233;
|
||||
}
|
||||
}
|
||||
|
||||
.bill-pay {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
padding: 16rpx 24rpx calc(16rpx + env(safe-area-inset-bottom));
|
||||
background: #fff;
|
||||
|
||||
&__btn {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,178 @@
|
||||
import { useCallback, useEffect, useState } from 'react'
|
||||
import Taro, { useRouter } from '@tarojs/taro'
|
||||
import { View, Text } from '@tarojs/components'
|
||||
import { Button, Empty } from '@antmjs/vantui'
|
||||
import { getStatementDetailApi, payStatementApi } from '@/services/statement'
|
||||
import { STATEMENT_STATUS_MAP } from '@/types/statement'
|
||||
import type { StatementDetail } from '@/types/statement'
|
||||
import './index.less'
|
||||
|
||||
/**
|
||||
* 账单详情
|
||||
* 商品汇总（金额直接合并，单价明细见订单记录）+ 回筐计费 + 关联订单 + 付款确认
|
||||
*/
|
||||
export default function StatementDetailPage() {
|
||||
const router = useRouter()
|
||||
const id = Number(router.params.id ?? 0)
|
||||
|
||||
const [detail, setDetail] = useState<StatementDetail | null>(null)
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [paying, setPaying] = useState(false)
|
||||
|
||||
const loadDetail = useCallback(async () => {
|
||||
if (!id) return
|
||||
setLoading(true)
|
||||
try {
|
||||
const res = await getStatementDetailApi(id)
|
||||
setDetail(res.data)
|
||||
} catch {
|
||||
// 错误已由 request 层 toast
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [id])
|
||||
|
||||
useEffect(() => {
|
||||
loadDetail()
|
||||
}, [loadDetail])
|
||||
|
||||
/** 付款确认 */
|
||||
const handlePay = useCallback(async () => {
|
||||
if (!detail || paying) return
|
||||
const confirm = await Taro.showModal({
|
||||
title: '付款确认',
|
||||
content: `确认已支付账单 ${detail.statement_no} 共 ￥${detail.total_amount}？`,
|
||||
confirmText: '确认付款',
|
||||
})
|
||||
if (!confirm.confirm) return
|
||||
setPaying(true)
|
||||
try {
|
||||
await payStatementApi(detail.id)
|
||||
Taro.showToast({ title: '付款确认成功', icon: 'success' })
|
||||
loadDetail()
|
||||
} catch {
|
||||
// 错误（重复付款等）已由 request 层 toast
|
||||
} finally {
|
||||
setPaying(false)
|
||||
}
|
||||
}, [detail, paying, loadDetail])
|
||||
|
||||
if (loading && !detail) {
|
||||
return <View className='bill-detail'><Empty description='加载中...' /></View>
|
||||
}
|
||||
if (!detail) {
|
||||
return <View className='bill-detail'><Empty description='账单不存在' /></View>
|
||||
}
|
||||
|
||||
const crateNegative = Number(detail.crate_amount) < 0
|
||||
|
||||
return (
|
||||
<View className='bill-detail'>
|
||||
{/* ===== 账单信息 ===== */}
|
||||
<View className='bill-card'>
|
||||
<View className='bill-card__header'>
|
||||
<Text className='bill-card__no'>{detail.statement_no}</Text>
|
||||
<Text
|
||||
className={detail.status === 0 ? 'bill-card__status bill-card__status--unpaid' : 'bill-card__status bill-card__status--paid'}
|
||||
>
|
||||
{STATEMENT_STATUS_MAP[detail.status]}
|
||||
</Text>
|
||||
</View>
|
||||
<View className='bill-card__row'>
|
||||
<Text className='bill-card__label'>账单周期</Text>
|
||||
<Text className='bill-card__value'>{detail.period_start} ~ {detail.period_end}</Text>
|
||||
</View>
|
||||
<View className='bill-card__row'>
|
||||
<Text className='bill-card__label'>应结算日期</Text>
|
||||
<Text className='bill-card__value'>{detail.settlement_date ?? '-'}</Text>
|
||||
</View>
|
||||
{detail.status === 1 && detail.settled_at && (
|
||||
<View className='bill-card__row'>
|
||||
<Text className='bill-card__label'>付款时间</Text>
|
||||
<Text className='bill-card__value'>{detail.settled_at}</Text>
|
||||
</View>
|
||||
)}
|
||||
<View className='bill-card__row'>
|
||||
<Text className='bill-card__label'>商品金额</Text>
|
||||
<Text className='bill-card__value'>￥{detail.goods_amount}</Text>
|
||||
</View>
|
||||
<View className='bill-card__row'>
|
||||
<Text className='bill-card__label'>回筐金额</Text>
|
||||
<Text className={crateNegative ? 'bill-card__value bill-card__value--credit' : 'bill-card__value'}>
|
||||
{crateNegative ? `-￥${Math.abs(Number(detail.crate_amount)).toFixed(2)}` : `￥${detail.crate_amount}`}
|
||||
{crateNegative ? '（抵扣）' : ''}
|
||||
</Text>
|
||||
</View>
|
||||
<View className='bill-card__row bill-card__row--total'>
|
||||
<Text className='bill-card__label'>账单总额</Text>
|
||||
<Text className='bill-card__total'>￥{detail.total_amount}</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* ===== 商品汇总 ===== */}
|
||||
<View className='bill-card'>
|
||||
<Text className='bill-section__title'>商品汇总（{detail.goods?.length ?? 0}）</Text>
|
||||
<Text className='bill-section__desc'>同一商品多次订单金额直接合并；单价明细请查看订单记录</Text>
|
||||
{(detail.goods ?? []).map((item, index) => (
|
||||
<View key={index} className='bill-goods'>
|
||||
<View className='bill-goods__main'>
|
||||
<Text className='bill-goods__name'>{item.product_name}</Text>
|
||||
<Text className='bill-goods__spec'>{item.product_spec || ''}</Text>
|
||||
</View>
|
||||
<View className='bill-goods__side'>
|
||||
<Text className='bill-goods__qty'>{item.quantity} {item.unit}</Text>
|
||||
<Text className='bill-goods__amount'>￥{item.amount}</Text>
|
||||
</View>
|
||||
</View>
|
||||
))}
|
||||
{(detail.goods ?? []).length === 0 && <Empty description='暂无商品记录' />}
|
||||
</View>
|
||||
|
||||
{/* ===== 回筐计费 ===== */}
|
||||
<View className='bill-card'>
|
||||
<Text className='bill-section__title'>回筐计费</Text>
|
||||
<View className='bill-card__row'>
|
||||
<Text className='bill-card__label'>周转框</Text>
|
||||
<Text className='bill-card__value'>{detail.box_num} 个{detail.box_num < 0 ? '（抵扣）' : ''}</Text>
|
||||
</View>
|
||||
<View className='bill-card__row'>
|
||||
<Text className='bill-card__label'>托盘</Text>
|
||||
<Text className='bill-card__value'>{detail.tray_num} 个{detail.tray_num < 0 ? '（抵扣）' : ''}</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* ===== 关联订单 ===== */}
|
||||
<View className='bill-card'>
|
||||
<Text className='bill-section__title'>关联订单（{detail.orders?.length ?? 0}）</Text>
|
||||
{(detail.orders ?? []).map(order => (
|
||||
<View
|
||||
key={order.id}
|
||||
className='bill-order'
|
||||
onClick={() => Taro.navigateTo({ url: `/pages/order-list/index` })}
|
||||
>
|
||||
<Text className='bill-order__no'>{order.order_no}</Text>
|
||||
<Text className='bill-order__date'>{order.order_date}</Text>
|
||||
<Text className='bill-order__amount'>￥{order.total_amount}</Text>
|
||||
</View>
|
||||
))}
|
||||
{(detail.orders ?? []).length === 0 && <Empty description='暂无订单记录' />}
|
||||
</View>
|
||||
|
||||
{/* ===== 付款按钮 ===== */}
|
||||
{detail.status === 0 && (
|
||||
<View className='bill-pay'>
|
||||
<Button
|
||||
type='danger'
|
||||
block
|
||||
round
|
||||
loading={paying}
|
||||
className='bill-pay__btn'
|
||||
onClick={handlePay}
|
||||
>
|
||||
付款（￥{detail.total_amount}）
|
||||
</Button>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
)
|
||||
}
|
||||
@@ -1,3 +1,3 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '对账单',
|
||||
navigationBarTitleText: '账单',
|
||||
})
|
||||
|
||||
@@ -16,12 +16,9 @@
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
&__btn {
|
||||
font-size: 26rpx;
|
||||
color: #fff;
|
||||
background: #ee0a24;
|
||||
padding: 12rpx 28rpx;
|
||||
border-radius: 999rpx;
|
||||
&__tip {
|
||||
font-size: 24rpx;
|
||||
color: #969799;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -45,7 +42,7 @@
|
||||
color: #c8c9cc;
|
||||
}
|
||||
|
||||
// ===== 对账单项 =====
|
||||
// ===== 账单单项 =====
|
||||
.statement-item {
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
@@ -66,7 +63,14 @@
|
||||
|
||||
&__status {
|
||||
font-size: 24rpx;
|
||||
color: #ee0a24;
|
||||
|
||||
&--unpaid {
|
||||
color: #ee0a24;
|
||||
}
|
||||
|
||||
&--paid {
|
||||
color: #07c160;
|
||||
}
|
||||
}
|
||||
|
||||
&__body {
|
||||
@@ -94,46 +98,4 @@
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
// ===== 生成弹层 =====
|
||||
.gen-popup {
|
||||
padding: 32rpx 32rpx 24rpx;
|
||||
|
||||
&__title {
|
||||
font-size: 34rpx;
|
||||
font-weight: 600;
|
||||
display: block;
|
||||
}
|
||||
|
||||
&__desc {
|
||||
margin-top: 12rpx;
|
||||
font-size: 24rpx;
|
||||
color: #969799;
|
||||
display: block;
|
||||
}
|
||||
|
||||
&__row {
|
||||
margin-top: 28rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
&__label {
|
||||
font-size: 28rpx;
|
||||
color: #323233;
|
||||
}
|
||||
|
||||
&__value {
|
||||
font-size: 28rpx;
|
||||
color: #646566;
|
||||
padding: 12rpx 24rpx;
|
||||
background: #f7f8fa;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
&__submit {
|
||||
margin-top: 40rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,24 +1,18 @@
|
||||
import { useCallback, useRef, useState } from 'react'
|
||||
import Taro, { useDidShow, useReachBottom } from '@tarojs/taro'
|
||||
import { View, Text, Picker } from '@tarojs/components'
|
||||
import { Button, Empty, Popup } from '@antmjs/vantui'
|
||||
import { View, Text } from '@tarojs/components'
|
||||
import { Empty } from '@antmjs/vantui'
|
||||
import useAuthStore from '@/stores/auth/useAuthStore'
|
||||
import { generateStatementApi, getStatementListApi } from '@/services/statement'
|
||||
import { getStatementListApi } from '@/services/statement'
|
||||
import { STATEMENT_STATUS_MAP } from '@/types/statement'
|
||||
import type { Statement } from '@/types/statement'
|
||||
import './index.less'
|
||||
|
||||
const PAGE_SIZE = 10
|
||||
|
||||
/** 日期 → Y-m-d */
|
||||
function toYMD(d: Date): string {
|
||||
const pad = (n: number) => String(n).padStart(2, '0')
|
||||
return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`
|
||||
}
|
||||
|
||||
/**
|
||||
* 对账单页（框架）
|
||||
* 门店自助：对账单列表 + 按日期区间生成
|
||||
* 账单页
|
||||
* 账单按门店回款周期自动生成：列表 + 查看详情 + 付款
|
||||
*/
|
||||
export default function StatementPage() {
|
||||
const token = useAuthStore(s => s.token)
|
||||
@@ -29,15 +23,9 @@ export default function StatementPage() {
|
||||
const [finished, setFinished] = useState(false)
|
||||
const loadingRef = useRef(false)
|
||||
|
||||
/** 生成弹层 */
|
||||
const [showGen, setShowGen] = useState(false)
|
||||
const [genStart, setGenStart] = useState(() => toYMD(new Date(Date.now() - 30 * 864e5)))
|
||||
const [genEnd, setGenEnd] = useState(() => toYMD(new Date()))
|
||||
const [genLoading, setGenLoading] = useState(false)
|
||||
|
||||
const loggedIn = !!token
|
||||
|
||||
/** 拉取对账单列表 */
|
||||
/** 拉取账单列表 */
|
||||
const loadList = useCallback(
|
||||
async (pageNum: number, reset: boolean) => {
|
||||
if (!loggedIn || loadingRef.current) return
|
||||
@@ -69,57 +57,43 @@ export default function StatementPage() {
|
||||
}
|
||||
})
|
||||
|
||||
/** 生成对账单 */
|
||||
const handleGenerate = useCallback(async () => {
|
||||
if (genStart > genEnd) {
|
||||
Taro.showToast({ title: '结束日期不能早于开始日期', icon: 'none' })
|
||||
return
|
||||
}
|
||||
if (genLoading) return
|
||||
setGenLoading(true)
|
||||
try {
|
||||
await generateStatementApi({ period_start: genStart, period_end: genEnd })
|
||||
Taro.showToast({ title: '对账单已生成', icon: 'success' })
|
||||
setShowGen(false)
|
||||
loadList(1, true)
|
||||
} catch {
|
||||
// 错误（周期内无订单等）已由 request 层 toast
|
||||
} finally {
|
||||
setGenLoading(false)
|
||||
}
|
||||
}, [genStart, genEnd, genLoading, loadList])
|
||||
|
||||
const goLogin = useCallback(() => {
|
||||
Taro.navigateTo({ url: '/pages/login/index' })
|
||||
}, [])
|
||||
|
||||
const goDetail = useCallback((id: number) => {
|
||||
Taro.navigateTo({ url: `/pages/statement-detail/index?id=${id}` })
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<View className='statement-page'>
|
||||
{/* ========== 头部 ========== */}
|
||||
<View className='statement-header'>
|
||||
<Text className='statement-header__title'>对账单</Text>
|
||||
<View className='statement-header__btn' onClick={() => setShowGen(true)}>
|
||||
<Text>生成对账单</Text>
|
||||
</View>
|
||||
<Text className='statement-header__title'>账单</Text>
|
||||
<Text className='statement-header__tip'>按回款周期自动生成</Text>
|
||||
</View>
|
||||
|
||||
{/* ========== 列表 ========== */}
|
||||
{!loggedIn ? (
|
||||
<Empty description='登录后查看对账单' className='statement-empty'>
|
||||
<Empty description='登录后查看账单' className='statement-empty'>
|
||||
<View className='statement-empty__btn' onClick={goLogin}>去登录</View>
|
||||
</Empty>
|
||||
) : statements.length === 0 ? (
|
||||
loading ? (
|
||||
<View className='statement-loading'><Text>加载中...</Text></View>
|
||||
) : (
|
||||
<Empty description='暂无对账单' className='statement-empty' />
|
||||
<Empty description='暂无账单' className='statement-empty' />
|
||||
)
|
||||
) : (
|
||||
statements.map(st => (
|
||||
<View key={st.id} className='statement-item'>
|
||||
<View key={st.id} className='statement-item' onClick={() => goDetail(st.id)}>
|
||||
<View className='statement-item__header'>
|
||||
<Text className='statement-item__no'>{st.statement_no}</Text>
|
||||
<Text className='statement-item__status'>{STATEMENT_STATUS_MAP[st.status]}</Text>
|
||||
<Text
|
||||
className={st.status === 0 ? 'statement-item__status statement-item__status--unpaid' : 'statement-item__status statement-item__status--paid'}
|
||||
>
|
||||
{STATEMENT_STATUS_MAP[st.status]}
|
||||
</Text>
|
||||
</View>
|
||||
<View className='statement-item__body'>
|
||||
<Text className='statement-item__period'>
|
||||
@@ -137,44 +111,6 @@ export default function StatementPage() {
|
||||
{loggedIn && finished && statements.length > 0 && (
|
||||
<View className='statement-loading'><Text>没有更多了</Text></View>
|
||||
)}
|
||||
|
||||
{/* ========== 生成弹层 ========== */}
|
||||
<Popup
|
||||
show={showGen}
|
||||
position='bottom'
|
||||
round
|
||||
closeable
|
||||
closeOnClickOverlay
|
||||
safeAreaInsetBottom
|
||||
onClose={() => setShowGen(false)}
|
||||
>
|
||||
<View className='gen-popup'>
|
||||
<Text className='gen-popup__title'>生成对账单</Text>
|
||||
<Text className='gen-popup__desc'>按门店客户等级价汇总周期内订单明细</Text>
|
||||
<View className='gen-popup__row'>
|
||||
<Text className='gen-popup__label'>开始日期</Text>
|
||||
<Picker mode='date' value={genStart} end={genEnd} onChange={e => setGenStart(e.detail.value)}>
|
||||
<View className='gen-popup__value'>{genStart}</View>
|
||||
</Picker>
|
||||
</View>
|
||||
<View className='gen-popup__row'>
|
||||
<Text className='gen-popup__label'>结束日期</Text>
|
||||
<Picker mode='date' value={genEnd} start={genStart} onChange={e => setGenEnd(e.detail.value)}>
|
||||
<View className='gen-popup__value'>{genEnd}</View>
|
||||
</Picker>
|
||||
</View>
|
||||
<Button
|
||||
type='danger'
|
||||
block
|
||||
round
|
||||
loading={genLoading}
|
||||
className='gen-popup__submit'
|
||||
onClick={handleGenerate}
|
||||
>
|
||||
生成
|
||||
</Button>
|
||||
</View>
|
||||
</Popup>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -0,0 +1,44 @@
|
||||
import { get } from '@/utils/request'
|
||||
|
||||
/** 首页轮播图项 */
|
||||
export interface HomeBanner {
|
||||
id: number
|
||||
title: string
|
||||
image_id: number
|
||||
image_url: string | null
|
||||
link: string
|
||||
sort: number
|
||||
}
|
||||
|
||||
/** 首页宫格导航项 */
|
||||
export interface HomeNav {
|
||||
id: number
|
||||
name: string
|
||||
image_id: number
|
||||
image_url: string | null
|
||||
link: string
|
||||
sort: number
|
||||
}
|
||||
|
||||
/** 首页促销推荐卡片 */
|
||||
export interface HomePromo {
|
||||
id: number
|
||||
title: string
|
||||
sub_title: string
|
||||
image_id: number
|
||||
image_url: string | null
|
||||
link: string
|
||||
sort: number
|
||||
}
|
||||
|
||||
/** 首页配置聚合数据 */
|
||||
export interface HomeConfig {
|
||||
banners: HomeBanner[]
|
||||
navs: HomeNav[]
|
||||
promos: HomePromo[]
|
||||
}
|
||||
|
||||
/** 首页配置（轮播图 + 宫格导航 + 促销卡片）：GET /mini/home */
|
||||
export function getHomeConfigApi() {
|
||||
return get<HomeConfig>('/mini/home')
|
||||
}
|
||||
+13
-13
@@ -1,23 +1,23 @@
|
||||
import { get, post } from '@/utils/request'
|
||||
import type { PaginatedData } from '@/types/api'
|
||||
import type { Statement, StatementDetail } from '@/types/statement'
|
||||
import type { PendingContainers, Statement, StatementDetail } from '@/types/statement'
|
||||
|
||||
/** 对账单列表（仅本店）：GET /mini/statement */
|
||||
/** 账单列表（仅本店，按回款周期自动生成）：GET /mini/statement */
|
||||
export function getStatementListApi(params: { page?: number; pageSize?: number } = {}) {
|
||||
return get<PaginatedData<Statement>>('/mini/statement', { data: params })
|
||||
}
|
||||
|
||||
/** 生成对账单：POST /mini/statement/generate */
|
||||
export function generateStatementApi(params: { period_start: string; period_end: string }) {
|
||||
return post<{
|
||||
id: number
|
||||
statement_no: string
|
||||
total_amount: string
|
||||
settlement_date: string | null
|
||||
}>('/mini/statement/generate', params)
|
||||
}
|
||||
|
||||
/** 对账单详情（校验归属）：GET /mini/statement/{id} */
|
||||
/** 账单详情（校验归属，含商品汇总/回筐计费/关联订单）：GET /mini/statement/{id} */
|
||||
export function getStatementDetailApi(id: number) {
|
||||
return get<StatementDetail>(`/mini/statement/${id}`)
|
||||
}
|
||||
|
||||
/** 付款确认：POST /mini/statement/{id}/pay */
|
||||
export function payStatementApi(id: number) {
|
||||
return post<{ id: number; total_amount: string }>(`/mini/statement/${id}/pay`)
|
||||
}
|
||||
|
||||
/** 当前门店待回筐/托盘台账：GET /mini/statement/pending-containers */
|
||||
export function getPendingContainersApi() {
|
||||
return get<PendingContainers>('/mini/statement/pending-containers')
|
||||
}
|
||||
|
||||
+38
-19
@@ -1,45 +1,64 @@
|
||||
/** 对账单状态：0 待对账 / 1 已对账 / 2 已结算 */
|
||||
export type StatementStatus = 0 | 1 | 2
|
||||
/** 账单状态：0 待付款 / 1 已付款 */
|
||||
export type StatementStatus = 0 | 1
|
||||
|
||||
export const STATEMENT_STATUS_MAP: Record<StatementStatus, string> = {
|
||||
0: '待对账',
|
||||
1: '已对账',
|
||||
2: '已结算',
|
||||
0: '待付款',
|
||||
1: '已付款',
|
||||
}
|
||||
|
||||
/** 对账单 */
|
||||
/** 账单 */
|
||||
export interface Statement {
|
||||
id: number
|
||||
statement_no: string
|
||||
period_start: string
|
||||
period_end: string
|
||||
/** 商品金额合计 */
|
||||
goods_amount: string
|
||||
/** 账单计费周转框数（可为负=抵扣） */
|
||||
box_num: number
|
||||
/** 账单计费托盘数（可为负=抵扣） */
|
||||
tray_num: number
|
||||
/** 回筐金额合计（可为负=抵扣） */
|
||||
crate_amount: string
|
||||
/** 账单总金额 = 商品金额 + 回筐金额 */
|
||||
total_amount: string
|
||||
/** 生成时快照的回款周期 */
|
||||
payment_cycle_days: number
|
||||
/** 应结算日期 = 周期结束 + 回款周期天 */
|
||||
settlement_date: string | null
|
||||
status: StatementStatus
|
||||
reconciled_at: string | null
|
||||
settled_at: string | null
|
||||
remark: string
|
||||
}
|
||||
|
||||
/** 对账单明细行 */
|
||||
export interface StatementItem {
|
||||
order_id: number
|
||||
order_item_id: number
|
||||
product_id: number
|
||||
/** 账单商品汇总记录（按商品聚合，不记单价） */
|
||||
export interface StatementGoods {
|
||||
product_name: string
|
||||
price: string
|
||||
product_spec: string
|
||||
unit: string
|
||||
quantity: string
|
||||
weight: string
|
||||
amount: string
|
||||
/** 0 未对账 / 1 已对账 */
|
||||
is_reconciled: number
|
||||
store_remark: string
|
||||
}
|
||||
|
||||
/** 对账单详情 */
|
||||
export interface StatementDetail extends Statement {
|
||||
items: StatementItem[]
|
||||
/** 账单关联订单（下单单价明细在订单记录中查看） */
|
||||
export interface StatementOrder {
|
||||
id: number
|
||||
order_no: string
|
||||
order_date: string
|
||||
total_amount: string
|
||||
}
|
||||
|
||||
/** 账单详情 */
|
||||
export interface StatementDetail extends Statement {
|
||||
goods: StatementGoods[]
|
||||
orders: StatementOrder[]
|
||||
}
|
||||
|
||||
/** 门店待回筐台账 */
|
||||
export interface PendingContainers {
|
||||
pending_box_num: number
|
||||
pending_tray_num: number
|
||||
box_price: string
|
||||
tray_price: string
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user