feat: 技术支持工单/企微权限/开发版本管理/消息推送等迭代
This commit is contained in:
BIN
Binary file not shown.
@@ -1,6 +0,0 @@
|
||||
// babel-preset-taro 用于 weapp 等平台编译；H5 由 vite + @vitejs/plugin-react 处理
|
||||
module.exports = {
|
||||
presets: [
|
||||
['taro', { framework: 'react', ts: true, compiler: 'vite' }],
|
||||
],
|
||||
};
|
||||
@@ -1,58 +0,0 @@
|
||||
import { defineConfig } from '@tarojs/cli';
|
||||
|
||||
// 总部管理端 Taro 配置：先 H5，后续 weapp（微信小程序）
|
||||
export default defineConfig(async () => ({
|
||||
projectName: 'mini-hq',
|
||||
date: '2026-7-5',
|
||||
designWidth: 375,
|
||||
deviceRatio: {
|
||||
640: 2.34 / 2,
|
||||
750: 1,
|
||||
375: 2,
|
||||
828: 1.81 / 2,
|
||||
},
|
||||
sourceRoot: 'src',
|
||||
outputRoot: 'dist',
|
||||
plugins: ['@tarojs/plugin-html'],
|
||||
defineConstants: {
|
||||
/** H5 静态托管无 /api 代理时直连后端；dev 构建可通过 VITE_API_TARGET 覆盖 */
|
||||
TARO_APP_API_ORIGIN: JSON.stringify(process.env.VITE_API_TARGET ?? 'http://localhost:3000'),
|
||||
},
|
||||
copy: {
|
||||
patterns: [],
|
||||
options: {},
|
||||
},
|
||||
framework: 'react',
|
||||
compiler: {
|
||||
type: 'vite',
|
||||
vitePlugins: [],
|
||||
},
|
||||
cache: {
|
||||
enable: false,
|
||||
},
|
||||
mini: {
|
||||
postcss: {
|
||||
pxtransform: { enable: true, config: {} },
|
||||
cssModules: { enable: false },
|
||||
},
|
||||
},
|
||||
h5: {
|
||||
publicPath: '/',
|
||||
staticDirectory: 'static',
|
||||
devServer: {
|
||||
port: 5176,
|
||||
host: '0.0.0.0',
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: process.env.VITE_API_TARGET ?? 'http://localhost:3000',
|
||||
changeOrigin: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
postcss: {
|
||||
autoprefixer: { enable: true, config: {} },
|
||||
pxtransform: { enable: true, config: {} },
|
||||
cssModules: { enable: false },
|
||||
},
|
||||
},
|
||||
}));
|
||||
@@ -1,48 +0,0 @@
|
||||
{
|
||||
"name": "@dukang/mini-hq",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"description": "杜康好客 · 总部管理端（Taro，先 H5 后小程序）",
|
||||
"scripts": {
|
||||
"dev": "taro build --type h5 --watch",
|
||||
"dev:weapp": "taro build --type weapp --watch",
|
||||
"build": "taro build --type h5",
|
||||
"build:weapp": "taro build --type weapp",
|
||||
"preview": "node ../../scripts/preview-hq.mjs",
|
||||
"lint": "echo ok"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.24.4",
|
||||
"@dukang/shared-types": "workspace:*",
|
||||
"@dukang/weixin-sdk": "workspace:*",
|
||||
"@tarojs/components": "4.2.0",
|
||||
"@tarojs/helper": "4.2.0",
|
||||
"@tarojs/plugin-framework-react": "4.2.0",
|
||||
"@tarojs/plugin-html": "4.2.0",
|
||||
"@tarojs/plugin-platform-h5": "4.2.0",
|
||||
"@tarojs/plugin-platform-weapp": "4.2.0",
|
||||
"@tarojs/react": "4.2.0",
|
||||
"@tarojs/router": "4.2.0",
|
||||
"@tarojs/runtime": "4.2.0",
|
||||
"@tarojs/shared": "4.2.0",
|
||||
"@tarojs/taro": "4.2.0",
|
||||
"qrcode": "^1.5.4",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/preset-react": "^7.24.1",
|
||||
"@tarojs/cli": "4.2.0",
|
||||
"@tarojs/vite-runner": "4.2.0",
|
||||
"@types/react": "^18.3.3",
|
||||
"@vitejs/plugin-react": "^4.3.1",
|
||||
"babel-preset-taro": "4.2.0",
|
||||
"typescript": "^5.4.5",
|
||||
"vite": "^5.4.0"
|
||||
},
|
||||
"browserslist": [
|
||||
"last 3 versions",
|
||||
"Android >= 4.1",
|
||||
"ios >= 8"
|
||||
]
|
||||
}
|
||||
@@ -1,14 +0,0 @@
|
||||
{
|
||||
"miniprogramRoot": "dist/",
|
||||
"projectname": "mini-hq",
|
||||
"description": "杜康好客总部管理端",
|
||||
"appid": "touristappid",
|
||||
"setting": {
|
||||
"urlCheck": true,
|
||||
"es6": false,
|
||||
"enhance": false,
|
||||
"postcss": false,
|
||||
"minified": false
|
||||
},
|
||||
"compileType": "miniprogram"
|
||||
}
|
||||
@@ -1,41 +0,0 @@
|
||||
export default defineAppConfig({
|
||||
pages: [
|
||||
'pages/dashboard/index',
|
||||
'pages/stores/index',
|
||||
'pages/settlement/index',
|
||||
'pages/tickets/index',
|
||||
'pages/login/index',
|
||||
'pages/user-agreement/index',
|
||||
'pages/privacy-policy/index',
|
||||
'pages/stores/detail',
|
||||
'pages/orders/index',
|
||||
'pages/orders/detail',
|
||||
'pages/cities/index',
|
||||
'pages/products/index',
|
||||
'pages/reports/index',
|
||||
'pages/promo/index',
|
||||
'pages/promo/generate',
|
||||
'pages/promo/detail',
|
||||
'pages/refund/index',
|
||||
],
|
||||
window: {
|
||||
backgroundTextStyle: 'light',
|
||||
navigationBarBackgroundColor: '#A61D24',
|
||||
navigationBarTitleText: '杜康好客·总部',
|
||||
navigationBarTextStyle: 'white',
|
||||
navigationStyle: 'custom',
|
||||
},
|
||||
tabBar: {
|
||||
custom: true,
|
||||
color: '#8D706E',
|
||||
selectedColor: '#A61D24',
|
||||
backgroundColor: '#FFFFFF',
|
||||
borderStyle: 'black',
|
||||
list: [
|
||||
{ pagePath: 'pages/dashboard/index', text: '管理中心' },
|
||||
{ pagePath: 'pages/stores/index', text: '门店审核' },
|
||||
{ pagePath: 'pages/settlement/index', text: '结算中心' },
|
||||
{ pagePath: 'pages/tickets/index', text: '客服中心' },
|
||||
],
|
||||
},
|
||||
});
|
||||
@@ -1,428 +0,0 @@
|
||||
/* 杜康好客 · 总部管理端全局样式（Taro H5 / 小程序通用） */
|
||||
:root {
|
||||
--hq-red: #a61d24;
|
||||
--hq-red-dark: #820012;
|
||||
--hq-amber: #c9a227;
|
||||
--hq-bg: #f5f3f0;
|
||||
--hq-surface: #ffffff;
|
||||
--hq-text: #1f1a17;
|
||||
--hq-muted: #8d706e;
|
||||
--hq-line: #ece7e2;
|
||||
--hq-green: #2d6a4f;
|
||||
--hq-blue: #2a6ebb;
|
||||
--hq-orange: #c26a1b;
|
||||
--hq-radius: 16px;
|
||||
--hq-shadow: 0 2px 12px rgba(93, 64, 55, 0.08);
|
||||
--hq-safe-top: env(safe-area-inset-top, 0px);
|
||||
--hq-safe-bottom: env(safe-area-inset-bottom, 0px);
|
||||
}
|
||||
|
||||
page,
|
||||
body {
|
||||
background: var(--hq-bg);
|
||||
color: var(--hq-text);
|
||||
font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'PingFang SC', sans-serif;
|
||||
margin: 0;
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
/* 隐藏滚动条，保留触摸/滚轮滚动 */
|
||||
html,
|
||||
body,
|
||||
page,
|
||||
#app,
|
||||
.taro_page,
|
||||
.hq-page,
|
||||
scroll-view,
|
||||
.taro-scroll,
|
||||
.taro-scroll-view,
|
||||
.taro-scroll-view__scroll-x,
|
||||
.taro-scroll-view__scroll-y {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
html::-webkit-scrollbar,
|
||||
body::-webkit-scrollbar,
|
||||
page::-webkit-scrollbar,
|
||||
#app::-webkit-scrollbar,
|
||||
.hq-page::-webkit-scrollbar,
|
||||
scroll-view::-webkit-scrollbar,
|
||||
.taro-scroll::-webkit-scrollbar,
|
||||
.taro-scroll-view::-webkit-scrollbar,
|
||||
.taro-scroll-view__scroll-x::-webkit-scrollbar,
|
||||
.taro-scroll-view__scroll-y::-webkit-scrollbar {
|
||||
display: none;
|
||||
width: 0 !important;
|
||||
height: 0 !important;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.material-symbols-outlined {
|
||||
font-family: 'Material Symbols Outlined';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
line-height: 1;
|
||||
letter-spacing: normal;
|
||||
text-transform: none;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
|
||||
/* 页面骨架 */
|
||||
.hq-page {
|
||||
min-height: 100vh;
|
||||
padding-bottom: calc(24px + var(--hq-safe-bottom));
|
||||
background: var(--hq-bg);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.hq-page--tab {
|
||||
padding-bottom: calc(96px + var(--hq-safe-bottom));
|
||||
}
|
||||
|
||||
/* 顶部安全区头部（刘海 / 状态栏适配） */
|
||||
.hq-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 50;
|
||||
padding-top: var(--hq-safe-top);
|
||||
background: linear-gradient(135deg, var(--hq-red), var(--hq-red-dark));
|
||||
color: #fff;
|
||||
box-shadow: var(--hq-shadow);
|
||||
}
|
||||
|
||||
.hq-header__bar {
|
||||
height: 52px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.hq-header__title {
|
||||
font-size: 17px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.hq-header__back,
|
||||
.hq-header__action {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.hq-header__back {
|
||||
left: 12px;
|
||||
}
|
||||
|
||||
.hq-header__action {
|
||||
right: 12px;
|
||||
font-size: 14px;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.hq-header--plain {
|
||||
background: var(--hq-surface);
|
||||
color: var(--hq-text);
|
||||
}
|
||||
|
||||
.hq-header--plain .hq-header__title {
|
||||
color: var(--hq-red);
|
||||
}
|
||||
|
||||
.hq-header--plain .hq-header__back,
|
||||
.hq-header--plain .hq-header__action {
|
||||
color: var(--hq-red);
|
||||
}
|
||||
|
||||
/* 卡片 */
|
||||
.hq-card {
|
||||
background: var(--hq-surface);
|
||||
border-radius: var(--hq-radius);
|
||||
margin: 12px 16px;
|
||||
padding: 16px;
|
||||
box-shadow: var(--hq-shadow);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.hq-section-title {
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
margin: 20px 16px 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.hq-muted {
|
||||
color: var(--hq-muted);
|
||||
}
|
||||
|
||||
.hq-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/* 统计网格 */
|
||||
.hq-stat-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 12px;
|
||||
margin: 12px 16px;
|
||||
}
|
||||
|
||||
.hq-stat {
|
||||
background: var(--hq-surface);
|
||||
border-radius: var(--hq-radius);
|
||||
padding: 16px;
|
||||
box-shadow: var(--hq-shadow);
|
||||
}
|
||||
|
||||
.hq-stat__label {
|
||||
font-size: 12px;
|
||||
color: var(--hq-muted);
|
||||
}
|
||||
|
||||
.hq-stat__value {
|
||||
font-size: 24px;
|
||||
font-weight: 800;
|
||||
color: var(--hq-red);
|
||||
margin-top: 6px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.hq-stat__sub {
|
||||
font-size: 11px;
|
||||
color: var(--hq-muted);
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
/* 列表项 */
|
||||
.hq-list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 14px 16px;
|
||||
background: var(--hq-surface);
|
||||
border-bottom: 1px solid var(--hq-line);
|
||||
}
|
||||
|
||||
.hq-list-item:active {
|
||||
background: #faf8f6;
|
||||
}
|
||||
|
||||
.hq-avatar {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 12px;
|
||||
background: rgba(166, 29, 36, 0.08);
|
||||
color: var(--hq-red);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 22px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* 徽标 / 状态 */
|
||||
.hq-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 2px 10px;
|
||||
border-radius: 999px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.hq-badge--warn {
|
||||
background: rgba(194, 106, 27, 0.12);
|
||||
color: var(--hq-orange);
|
||||
}
|
||||
.hq-badge--ok {
|
||||
background: rgba(45, 106, 79, 0.12);
|
||||
color: var(--hq-green);
|
||||
}
|
||||
.hq-badge--info {
|
||||
background: rgba(42, 110, 187, 0.12);
|
||||
color: var(--hq-blue);
|
||||
}
|
||||
.hq-badge--danger {
|
||||
background: rgba(166, 29, 36, 0.12);
|
||||
color: var(--hq-red);
|
||||
}
|
||||
|
||||
/* 按钮 */
|
||||
.hq-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
padding: 12px 18px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.hq-btn--primary {
|
||||
background: var(--hq-red);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.hq-btn--ghost {
|
||||
background: rgba(166, 29, 36, 0.08);
|
||||
color: var(--hq-red);
|
||||
}
|
||||
|
||||
.hq-btn--outline {
|
||||
background: transparent;
|
||||
border: 1px solid var(--hq-line);
|
||||
color: var(--hq-text);
|
||||
}
|
||||
|
||||
.hq-btn--block {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.hq-btn:active {
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.hq-btn[disabled] {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* 快捷入口宫格 */
|
||||
.hq-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 8px;
|
||||
margin: 12px 16px;
|
||||
background: var(--hq-surface);
|
||||
border-radius: var(--hq-radius);
|
||||
padding: 16px 8px;
|
||||
box-shadow: var(--hq-shadow);
|
||||
}
|
||||
|
||||
.hq-grid__item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.hq-grid__icon {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 14px;
|
||||
background: rgba(166, 29, 36, 0.08);
|
||||
color: var(--hq-red);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.hq-grid__label {
|
||||
font-size: 12px;
|
||||
color: var(--hq-text);
|
||||
}
|
||||
|
||||
/* 分段 Tab */
|
||||
.hq-tabs {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
padding: 8px 16px;
|
||||
background: var(--hq-surface);
|
||||
border-bottom: 1px solid var(--hq-line);
|
||||
position: sticky;
|
||||
top: calc(52px + var(--hq-safe-top));
|
||||
z-index: 40;
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.hq-tabs::-webkit-scrollbar {
|
||||
display: none;
|
||||
width: 0 !important;
|
||||
height: 0 !important;
|
||||
}
|
||||
|
||||
.hq-tab {
|
||||
flex-shrink: 0;
|
||||
padding: 6px 14px;
|
||||
border-radius: 999px;
|
||||
font-size: 13px;
|
||||
color: var(--hq-muted);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.hq-tab--active {
|
||||
background: var(--hq-red);
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* 空态 / 加载 */
|
||||
.hq-empty {
|
||||
text-align: center;
|
||||
padding: 60px 24px;
|
||||
color: var(--hq-muted);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* 表单 */
|
||||
.hq-field {
|
||||
margin: 12px 16px;
|
||||
}
|
||||
|
||||
.hq-field__label {
|
||||
font-size: 13px;
|
||||
color: var(--hq-muted);
|
||||
margin-bottom: 6px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.hq-input {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
background: var(--hq-surface);
|
||||
border: 1px solid var(--hq-line);
|
||||
border-radius: 12px;
|
||||
padding: 12px 14px;
|
||||
font-size: 15px;
|
||||
color: var(--hq-text);
|
||||
}
|
||||
|
||||
.store-cover {
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* 底部固定操作栏 */
|
||||
.hq-footer-bar {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
padding: 12px 16px calc(12px + var(--hq-safe-bottom));
|
||||
background: var(--hq-surface);
|
||||
border-top: 1px solid var(--hq-line);
|
||||
z-index: 60;
|
||||
}
|
||||
@@ -1,8 +0,0 @@
|
||||
import { PropsWithChildren } from 'react';
|
||||
import './app.css';
|
||||
|
||||
function App({ children }: PropsWithChildren) {
|
||||
return children;
|
||||
}
|
||||
|
||||
export default App;
|
||||
@@ -1,31 +0,0 @@
|
||||
import { View, Text } from '@tarojs/components';
|
||||
import Taro from '@tarojs/taro';
|
||||
|
||||
type Props = {
|
||||
title: string;
|
||||
back?: boolean;
|
||||
plain?: boolean;
|
||||
actionText?: string;
|
||||
onAction?: () => void;
|
||||
};
|
||||
|
||||
/** 带顶部安全区（刘海/状态栏）适配的通用头部 */
|
||||
export default function HqHeader({ title, back, plain, actionText, onAction }: Props) {
|
||||
return (
|
||||
<View className={`hq-header${plain ? ' hq-header--plain' : ''}`}>
|
||||
<View className="hq-header__bar">
|
||||
{back && (
|
||||
<View className="hq-header__back" onClick={() => Taro.navigateBack()}>
|
||||
<Text className="material-symbols-outlined">arrow_back_ios_new</Text>
|
||||
</View>
|
||||
)}
|
||||
<Text className="hq-header__title">{title}</Text>
|
||||
{actionText && (
|
||||
<View className="hq-header__action" onClick={onAction}>
|
||||
<Text>{actionText}</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
@@ -1,51 +0,0 @@
|
||||
.hq-tabbar {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
padding: 10px 12px calc(10px + var(--hq-safe-bottom));
|
||||
background: #fff;
|
||||
border-top: 1px solid rgba(226, 190, 188, 0.2);
|
||||
border-radius: 16px 16px 0 0;
|
||||
box-shadow: 0 -4px 20px rgba(166, 29, 36, 0.05);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.hq-tabbar__item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 2px;
|
||||
padding: 6px 4px;
|
||||
border-radius: 12px;
|
||||
color: #4e5852;
|
||||
opacity: 0.75;
|
||||
transition: background 0.15s, color 0.15s, opacity 0.15s;
|
||||
}
|
||||
|
||||
.hq-tabbar__item--active {
|
||||
color: var(--hq-red);
|
||||
background: rgba(255, 218, 215, 0.35);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.hq-tabbar__icon {
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.hq-tabbar__icon--active {
|
||||
font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
|
||||
.hq-tabbar__label {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
line-height: 1.2;
|
||||
}
|
||||
@@ -1,41 +0,0 @@
|
||||
import { View, Text } from '@tarojs/components';
|
||||
import Taro from '@tarojs/taro';
|
||||
import './HqTabBar.css';
|
||||
|
||||
export const HQ_TABS = [
|
||||
{ pagePath: '/pages/dashboard/index', text: '管理中心', icon: 'dashboard' },
|
||||
{ pagePath: '/pages/stores/index', text: '门店审核', icon: 'fact_check' },
|
||||
{ pagePath: '/pages/settlement/index', text: '结算中心', icon: 'account_balance_wallet' },
|
||||
{ pagePath: '/pages/tickets/index', text: '客服中心', icon: 'support_agent' },
|
||||
] as const;
|
||||
|
||||
type HqTabBarProps = {
|
||||
selected: number;
|
||||
};
|
||||
|
||||
/** 总部底栏（H5 需页面内显式渲染；Taro custom-tab-bar 在 H5 不自动挂载） */
|
||||
export default function HqTabBar({ selected }: HqTabBarProps) {
|
||||
return (
|
||||
<View className="hq-tabbar">
|
||||
{HQ_TABS.map((tab, index) => {
|
||||
const active = selected === index;
|
||||
return (
|
||||
<View
|
||||
key={tab.pagePath}
|
||||
className={`hq-tabbar__item${active ? ' hq-tabbar__item--active' : ''}`}
|
||||
onClick={() => {
|
||||
if (!active) Taro.switchTab({ url: tab.pagePath });
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
className={`material-symbols-outlined hq-tabbar__icon${active ? ' hq-tabbar__icon--active' : ''}`}
|
||||
>
|
||||
{tab.icon}
|
||||
</Text>
|
||||
<Text className="hq-tabbar__label">{tab.text}</Text>
|
||||
</View>
|
||||
);
|
||||
})}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
@@ -1,15 +0,0 @@
|
||||
import { Component } from 'react';
|
||||
import HqTabBar from '../components/HqTabBar';
|
||||
|
||||
/** 小程序 custom-tab-bar 入口；H5 由各 Tab 页直接渲染 HqTabBar */
|
||||
export default class CustomTabBar extends Component {
|
||||
state = { selected: 0 };
|
||||
|
||||
setSelected(index: number) {
|
||||
this.setState({ selected: index });
|
||||
}
|
||||
|
||||
render() {
|
||||
return <HqTabBar selected={this.state.selected} />;
|
||||
}
|
||||
}
|
||||
@@ -1,21 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
|
||||
/>
|
||||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
||||
<title>杜康好客·总部管理端</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&family=Noto+Sans+SC:wght@400;500;700&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script><%= htmlWebpackPlugin.options.script %></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,99 +0,0 @@
|
||||
import Taro from '@tarojs/taro';
|
||||
|
||||
function resolveApiBase(): string {
|
||||
const origin =
|
||||
typeof TARO_APP_API_ORIGIN !== 'undefined' && TARO_APP_API_ORIGIN
|
||||
? TARO_APP_API_ORIGIN
|
||||
: process.env.TARO_ENV === 'h5'
|
||||
? 'http://localhost:3000'
|
||||
: '';
|
||||
if (origin) {
|
||||
return `${origin.replace(/\/$/, '')}/api/v1`;
|
||||
}
|
||||
return '/api/v1';
|
||||
}
|
||||
|
||||
export const API_BASE = resolveApiBase();
|
||||
const TOKEN_KEY = 'hq_access_token';
|
||||
const CLIENT_APP = 'HQ_WEB';
|
||||
|
||||
export function getToken(): string {
|
||||
try {
|
||||
return Taro.getStorageSync(TOKEN_KEY) || '';
|
||||
} catch {
|
||||
return '';
|
||||
}
|
||||
}
|
||||
|
||||
export function saveToken(token: string) {
|
||||
Taro.setStorageSync(TOKEN_KEY, token);
|
||||
}
|
||||
|
||||
export function clearToken() {
|
||||
Taro.removeStorageSync(TOKEN_KEY);
|
||||
}
|
||||
|
||||
export function isLoggedIn(): boolean {
|
||||
return !!getToken();
|
||||
}
|
||||
|
||||
export function redirectToLogin() {
|
||||
Taro.reLaunch({ url: '/pages/login/index' });
|
||||
}
|
||||
|
||||
export function logout() {
|
||||
clearToken();
|
||||
redirectToLogin();
|
||||
}
|
||||
|
||||
type ReqOptions = {
|
||||
method?: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH';
|
||||
data?: Record<string, unknown> | unknown;
|
||||
auth?: boolean;
|
||||
};
|
||||
|
||||
function parseBody(data: unknown): { code?: number; message?: string } {
|
||||
if (data && typeof data === 'object') {
|
||||
return data as { code?: number; message?: string };
|
||||
}
|
||||
return {};
|
||||
}
|
||||
|
||||
/** 统一请求：注入 X-Client-App + Bearer，解包 { code, message, data }，401 自动回登录 */
|
||||
export async function request<T = unknown>(path: string, options: ReqOptions = {}): Promise<T> {
|
||||
const header: Record<string, string> = {
|
||||
'Content-Type': 'application/json',
|
||||
'X-Client-App': CLIENT_APP,
|
||||
};
|
||||
const token = getToken();
|
||||
if (token) header.Authorization = `Bearer ${token}`;
|
||||
|
||||
const res = await Taro.request({
|
||||
url: `${API_BASE}${path}`,
|
||||
method: options.method ?? 'GET',
|
||||
data: options.data as Record<string, unknown>,
|
||||
header,
|
||||
});
|
||||
|
||||
const status = res.statusCode;
|
||||
const body = parseBody(res.data);
|
||||
|
||||
if (status === 401 || body?.code === 401) {
|
||||
clearToken();
|
||||
redirectToLogin();
|
||||
throw new Error(body?.message || '登录已过期，请重新登录');
|
||||
}
|
||||
if (status === 404 && body.code === undefined) {
|
||||
throw new Error('接口不可达，请确认 API 服务已启动');
|
||||
}
|
||||
if (status >= 400 || body.code !== 0) {
|
||||
throw new Error(body?.message || `请求失败(${status})`);
|
||||
}
|
||||
return (res.data as { data: T }).data;
|
||||
}
|
||||
|
||||
export type Paginated<T> = { items: T[]; total: number };
|
||||
|
||||
export function toast(title: string, icon: 'success' | 'error' | 'none' = 'none') {
|
||||
Taro.showToast({ title, icon, duration: 1800 });
|
||||
}
|
||||
@@ -1,45 +0,0 @@
|
||||
export const ORDER_STATUS_LABELS: Record<string, string> = {
|
||||
PENDING_PAY: '待付款',
|
||||
PENDING_SHIP: '待发货',
|
||||
OUT_WAREHOUSE: '已出库',
|
||||
SHIPPING: '配送中',
|
||||
PENDING_RECEIVE: '待收货',
|
||||
COMPLETED: '已完成',
|
||||
CANCELLED: '已取消',
|
||||
REFUNDING: '退款中',
|
||||
REFUNDED: '已退款',
|
||||
};
|
||||
|
||||
export const STORE_STATUS_LABELS: Record<string, string> = {
|
||||
OPEN: '营业中',
|
||||
PAUSED: '暂停',
|
||||
CLOSED: '已关闭',
|
||||
};
|
||||
|
||||
export const CITY_STATUS_LABELS: Record<string, string> = {
|
||||
PENDING: '待开城',
|
||||
ACTIVE: '已开城',
|
||||
PAUSED: '已暂停',
|
||||
};
|
||||
|
||||
export const PRODUCT_STATUS_LABELS: Record<string, string> = {
|
||||
DRAFT: '草稿',
|
||||
ON_SALE: '在售',
|
||||
OFF_SALE: '下架',
|
||||
};
|
||||
|
||||
export function badgeClass(status: string): string {
|
||||
if (['OPEN', 'ACTIVE', 'ON_SALE', 'COMPLETED', 'PAID', 'CONFIRMED'].includes(status)) return 'hq-badge--ok';
|
||||
if (['PENDING', 'PENDING_PAY', 'PENDING_SHIP', 'DRAFT', 'PENDING_RECEIVE'].includes(status)) return 'hq-badge--warn';
|
||||
if (['CLOSED', 'CANCELLED', 'REFUNDED', 'OFF_SALE', 'VOID'].includes(status)) return 'hq-badge--danger';
|
||||
return 'hq-badge--info';
|
||||
}
|
||||
|
||||
export function fmtTime(v?: string | null): string {
|
||||
return v ? new Date(v).toLocaleString('zh-CN') : '—';
|
||||
}
|
||||
|
||||
export function fmtMoney(v?: number | string | null): string {
|
||||
const n = Number(v ?? 0);
|
||||
return n.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
|
||||
}
|
||||
@@ -1,14 +0,0 @@
|
||||
import QRCode from 'qrcode';
|
||||
|
||||
export async function buildPromoQrDataUrl(landingUrl: string): Promise<string> {
|
||||
return QRCode.toDataURL(landingUrl, {
|
||||
width: 400,
|
||||
margin: 1,
|
||||
color: { dark: '#1f1a17', light: '#ffffff' },
|
||||
});
|
||||
}
|
||||
|
||||
export function promoConversion(scan: number, orders: number): string {
|
||||
if (scan <= 0) return '0%';
|
||||
return `${Math.round((orders / scan) * 1000) / 10}%`;
|
||||
}
|
||||
@@ -1,76 +0,0 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import Taro from '@tarojs/taro';
|
||||
import { isLoggedIn, redirectToLogin, request } from './api';
|
||||
|
||||
export type HqAccount = {
|
||||
id: string;
|
||||
name: string;
|
||||
phone: string;
|
||||
adminRole: string;
|
||||
status: string;
|
||||
};
|
||||
|
||||
let cache: HqAccount | null = null;
|
||||
|
||||
export async function fetchHqAccount(force = false): Promise<HqAccount | null> {
|
||||
if (cache && !force) return cache;
|
||||
if (!isLoggedIn()) return null;
|
||||
try {
|
||||
cache = await request<HqAccount>('/admin/auth/me');
|
||||
return cache;
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
export function clearHqAccountCache() {
|
||||
cache = null;
|
||||
}
|
||||
|
||||
/** 页面级会话守卫：未登录跳登录页；返回当前 HQ 账号 */
|
||||
export function useHqSession(guard = true) {
|
||||
const [account, setAccount] = useState<HqAccount | null>(cache);
|
||||
const [loading, setLoading] = useState(!cache);
|
||||
|
||||
useEffect(() => {
|
||||
if (guard && !isLoggedIn()) {
|
||||
redirectToLogin();
|
||||
return;
|
||||
}
|
||||
let alive = true;
|
||||
void fetchHqAccount().then((acc) => {
|
||||
if (!alive) return;
|
||||
setAccount(acc);
|
||||
setLoading(false);
|
||||
});
|
||||
return () => {
|
||||
alive = false;
|
||||
};
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
return { account, loading };
|
||||
}
|
||||
|
||||
export function roleLabel(role?: string): string {
|
||||
switch (role) {
|
||||
case 'SUPER_ADMIN':
|
||||
return '超级管理员';
|
||||
case 'OPS':
|
||||
return '运营';
|
||||
case 'FINANCE':
|
||||
return '财务';
|
||||
case 'SUPPORT':
|
||||
return '客服';
|
||||
default:
|
||||
return role || '管理员';
|
||||
}
|
||||
}
|
||||
|
||||
export function navTo(url: string) {
|
||||
Taro.navigateTo({ url });
|
||||
}
|
||||
|
||||
export function switchToTab(url: string) {
|
||||
Taro.switchTab({ url });
|
||||
}
|
||||
@@ -1,57 +0,0 @@
|
||||
import type { WechatLoginResult } from '@dukang/shared-types';
|
||||
import Taro from '@tarojs/taro';
|
||||
import { WECHAT_INAPP_REQUIRED_MSG } from '@dukang/weixin-sdk';
|
||||
import { request, saveToken } from './api';
|
||||
import { isWechatEnv, weixinSdk } from './weixin';
|
||||
|
||||
/** 处理微信登录/绑定结果，返回是否已拿到 token 可进入首页 */
|
||||
export function handleHqWechatLoginResult(result: WechatLoginResult): boolean {
|
||||
if (!result.accessToken) return false;
|
||||
saveToken(result.accessToken);
|
||||
return true;
|
||||
}
|
||||
|
||||
/** 微信内 OAuth 回调：URL 带 code 时兑换 token */
|
||||
export async function handleHqWechatCallback(): Promise<WechatLoginResult | null> {
|
||||
if (process.env.TARO_ENV === 'weapp') {
|
||||
return null;
|
||||
}
|
||||
if (!isWechatEnv()) return null;
|
||||
return weixinSdk.handleOAuthCallback();
|
||||
}
|
||||
|
||||
/**
|
||||
* 微信授权登录（对齐 C 端：H5 仅微信内置浏览器走 OAuth）。
|
||||
* 返回 true = 已登录；void = 已跳转授权页等待回调。
|
||||
*/
|
||||
export async function loginHqWithWechat(): Promise<boolean | void> {
|
||||
if (process.env.TARO_ENV === 'weapp') {
|
||||
const res = await Taro.login();
|
||||
const result = await request<WechatLoginResult>('/admin/auth/login/wechat', {
|
||||
method: 'POST',
|
||||
data: { code: res.code, platform: 'mini' },
|
||||
});
|
||||
return handleHqWechatLoginResult(result);
|
||||
}
|
||||
|
||||
if (!isWechatEnv()) {
|
||||
throw new Error(WECHAT_INAPP_REQUIRED_MSG);
|
||||
}
|
||||
const result = await weixinSdk.login();
|
||||
if (result) return handleHqWechatLoginResult(result);
|
||||
}
|
||||
|
||||
/** 短信登录成功后于微信内自动发起 OAuth，绑定 openId 便于后续免登 */
|
||||
export async function bindHqWechatAfterSmsLogin(): Promise<void> {
|
||||
if (process.env.TARO_ENV === 'weapp') {
|
||||
const res = await Taro.login();
|
||||
const result = await request<WechatLoginResult>('/admin/auth/login/wechat', {
|
||||
method: 'POST',
|
||||
data: { code: res.code, platform: 'mini' },
|
||||
});
|
||||
handleHqWechatLoginResult(result);
|
||||
return;
|
||||
}
|
||||
if (!isWechatEnv()) return;
|
||||
await weixinSdk.login();
|
||||
}
|
||||
@@ -1,11 +0,0 @@
|
||||
import { createWeixinSdk, isWechatEnv } from '@dukang/weixin-sdk';
|
||||
import { API_BASE, getToken } from './api';
|
||||
|
||||
export const weixinSdk = createWeixinSdk({
|
||||
apiBase: API_BASE,
|
||||
clientApp: 'HQ_WEB',
|
||||
getAccessToken: () => getToken(),
|
||||
wechatLoginPath: '/admin/auth/login/wechat',
|
||||
});
|
||||
|
||||
export { isWechatEnv };
|
||||
@@ -1,65 +0,0 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { View, Text } from '@tarojs/components';
|
||||
import { useDidShow } from '@tarojs/taro';
|
||||
import HqHeader from '../../components/HqHeader';
|
||||
import { request, type Paginated } from '../../lib/api';
|
||||
import { useHqSession } from '../../lib/session';
|
||||
import { CITY_STATUS_LABELS, badgeClass } from '../../lib/constants';
|
||||
|
||||
type CityRow = {
|
||||
id: string;
|
||||
code: string;
|
||||
name: string;
|
||||
province?: string;
|
||||
status: string;
|
||||
storeCount?: number;
|
||||
orderCount?: number;
|
||||
partner?: { companyName: string };
|
||||
};
|
||||
|
||||
export default function CitiesPage() {
|
||||
useHqSession();
|
||||
const [rows, setRows] = useState<CityRow[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
function load() {
|
||||
setLoading(true);
|
||||
request<Paginated<CityRow>>('/admin/cities?pageSize=100')
|
||||
.then((d) => setRows(d.items))
|
||||
.catch(() => setRows([]))
|
||||
.finally(() => setLoading(false));
|
||||
}
|
||||
|
||||
useEffect(load, []);
|
||||
useDidShow(load);
|
||||
|
||||
return (
|
||||
<View className="hq-page">
|
||||
<HqHeader title="开城管理" back />
|
||||
|
||||
<Text className="hq-section-title">
|
||||
<Text>开城城市</Text>
|
||||
<Text className="hq-muted" style="font-size:12px;font-weight:400">共 {rows.length} 城</Text>
|
||||
</Text>
|
||||
|
||||
{loading && <View className="hq-empty">加载中…</View>}
|
||||
{!loading && rows.length === 0 && <View className="hq-empty">暂无开城城市</View>}
|
||||
|
||||
{rows.map((c) => (
|
||||
<View key={c.id} className="hq-card" style="margin-top:8px;margin-bottom:0">
|
||||
<View className="hq-row">
|
||||
<Text style="font-size:16px;font-weight:700">{c.name}<Text className="hq-muted" style="font-size:12px;font-weight:400"> · {c.code}</Text></Text>
|
||||
<Text className={`hq-badge ${badgeClass(c.status)}`}>{CITY_STATUS_LABELS[c.status] || c.status}</Text>
|
||||
</View>
|
||||
<Text className="hq-muted" style="display:block;margin-top:6px;font-size:13px">
|
||||
{c.province || ''} · 合伙人：{c.partner?.companyName || '—'}
|
||||
</Text>
|
||||
<View className="hq-row" style="margin-top:10px">
|
||||
<Text className="hq-muted" style="font-size:13px">门店 <Text style="color:var(--hq-red);font-weight:700">{c.storeCount ?? 0}</Text></Text>
|
||||
<Text className="hq-muted" style="font-size:13px">订单 <Text style="color:var(--hq-red);font-weight:700">{c.orderCount ?? 0}</Text></Text>
|
||||
</View>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
@@ -1,323 +0,0 @@
|
||||
.dash-page {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.dash-topbar {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 40;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: calc(env(safe-area-inset-top, 0px) + 12px) 16px 12px;
|
||||
background: var(--hq-bg);
|
||||
box-shadow: 0 1px 0 rgba(166, 29, 36, 0.06);
|
||||
}
|
||||
|
||||
.dash-topbar__title {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: var(--hq-red);
|
||||
}
|
||||
|
||||
.dash-topbar__notify {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 999px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.dash-topbar__notify .material-symbols-outlined {
|
||||
font-size: 24px;
|
||||
color: var(--hq-red);
|
||||
}
|
||||
|
||||
.dash-section {
|
||||
margin: 16px 16px 0;
|
||||
}
|
||||
|
||||
.dash-section--last {
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.dash-section__head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.dash-section__title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
.dash-section__title--solo {
|
||||
display: block;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.dash-section__meta {
|
||||
font-size: 12px;
|
||||
color: var(--hq-muted);
|
||||
}
|
||||
|
||||
.dash-section__link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
color: var(--hq-red);
|
||||
}
|
||||
|
||||
.dash-section__arrow {
|
||||
font-size: 16px;
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
.dash-mini-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.dash-mini-card {
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(142, 112, 110, 0.1);
|
||||
box-shadow: 0 4px 20px rgba(166, 29, 36, 0.05);
|
||||
padding: 12px 4px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.dash-mini-card__label {
|
||||
display: block;
|
||||
font-size: 10px;
|
||||
color: var(--hq-muted);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.dash-mini-card__value {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
.dash-gmv-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.dash-gmv-card {
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(142, 112, 110, 0.1);
|
||||
box-shadow: 0 4px 20px rgba(166, 29, 36, 0.05);
|
||||
padding: 12px 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.dash-gmv-card__label {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
color: var(--hq-muted);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.dash-gmv-card__value {
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
.dash-gmv-card__value--red {
|
||||
color: var(--hq-red);
|
||||
}
|
||||
|
||||
.dash-alert {
|
||||
background: rgba(255, 218, 214, 0.35);
|
||||
border: 1px solid rgba(186, 26, 26, 0.1);
|
||||
border-radius: 12px;
|
||||
padding: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.dash-alert--ok {
|
||||
justify-content: flex-start;
|
||||
gap: 8px;
|
||||
background: #f4f3f1;
|
||||
border-color: rgba(142, 112, 110, 0.12);
|
||||
}
|
||||
|
||||
.dash-alert__main {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.dash-alert__icon {
|
||||
font-size: 22px;
|
||||
color: #ba1a1a;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.dash-alert--ok .dash-alert__icon {
|
||||
color: #2d6a4f;
|
||||
}
|
||||
|
||||
.dash-alert__title {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
.dash-alert__desc {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
color: var(--hq-muted);
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.dash-alert__dots {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
flex-shrink: 0;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.dash-alert__dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 999px;
|
||||
background: rgba(186, 26, 26, 0.25);
|
||||
}
|
||||
|
||||
.dash-alert__dot--active {
|
||||
background: #ba1a1a;
|
||||
}
|
||||
|
||||
.dash-bento {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.dash-bento__item {
|
||||
position: relative;
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(142, 112, 110, 0.1);
|
||||
box-shadow: 0 4px 20px rgba(166, 29, 36, 0.05);
|
||||
padding: 16px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.dash-bento__item--wide {
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
.dash-bento__badge {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: 12px;
|
||||
min-width: 20px;
|
||||
height: 20px;
|
||||
padding: 0 6px;
|
||||
border-radius: 999px;
|
||||
background: var(--hq-red);
|
||||
color: #fff;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.dash-bento__icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 10px;
|
||||
background: rgba(255, 179, 174, 0.25);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.dash-bento__icon--lg {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.dash-bento__icon .material-symbols-outlined {
|
||||
font-size: 22px;
|
||||
color: var(--hq-red);
|
||||
}
|
||||
|
||||
.dash-bento__icon--fill .material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
|
||||
.dash-bento__row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.dash-bento__text {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.dash-bento__title {
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
.dash-bento__desc {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
color: var(--hq-muted);
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.dash-bento__chevron {
|
||||
color: var(--hq-muted);
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.dash-status-card {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.dash-order-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid var(--hq-line);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.dash-order-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.dash-order-count {
|
||||
font-weight: 700;
|
||||
color: var(--hq-red);
|
||||
}
|
||||
@@ -1,258 +0,0 @@
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import { View, Text } from '@tarojs/components';
|
||||
import HqTabBar from '../../components/HqTabBar';
|
||||
import { request } from '../../lib/api';
|
||||
import { navTo } from '../../lib/session';
|
||||
import { ORDER_STATUS_LABELS } from '../../lib/constants';
|
||||
import './index.css';
|
||||
|
||||
type Stats = {
|
||||
usersTotal: number;
|
||||
guestUsers: number;
|
||||
verifiedUsers: number;
|
||||
ordersToday: number;
|
||||
storesTotal: number;
|
||||
partnersTotal: number;
|
||||
redeemToday: number;
|
||||
deliveriesTotal: number;
|
||||
mergedUsers: number;
|
||||
ordersByStatus: Array<{ status: string; count: number }>;
|
||||
};
|
||||
|
||||
const CORE_MODULES = [
|
||||
{
|
||||
key: 'cities',
|
||||
icon: 'location_city',
|
||||
title: '开城管理',
|
||||
desc: '区域拓展与商圈管理',
|
||||
url: '/pages/cities/index',
|
||||
wide: false,
|
||||
},
|
||||
{
|
||||
key: 'orders',
|
||||
icon: 'receipt_long',
|
||||
title: '订单中心',
|
||||
desc: '全链路订单监控',
|
||||
url: '/pages/orders/index',
|
||||
wide: false,
|
||||
badge: true,
|
||||
},
|
||||
{
|
||||
key: 'products',
|
||||
icon: 'liquor',
|
||||
title: '商品管理',
|
||||
desc: '杜康系列酒品与餐券库',
|
||||
url: '/pages/products/index',
|
||||
wide: true,
|
||||
filledIcon: true,
|
||||
},
|
||||
{
|
||||
key: 'promo',
|
||||
icon: 'qr_code_2',
|
||||
title: '推广码',
|
||||
desc: '渠道推广链路跟踪',
|
||||
url: '/pages/promo/index',
|
||||
wide: false,
|
||||
},
|
||||
{
|
||||
key: 'reports',
|
||||
icon: 'analytics',
|
||||
title: '数据报表',
|
||||
desc: '全链路经营数据看板',
|
||||
url: '/pages/reports/index',
|
||||
wide: false,
|
||||
},
|
||||
] as const;
|
||||
|
||||
function fmtMoney(n: number): string {
|
||||
if (n >= 10000) return `¥${(n / 1000).toFixed(1)}k`;
|
||||
return `¥${n.toLocaleString('zh-CN')}`;
|
||||
}
|
||||
|
||||
function countByStatus(rows: Stats['ordersByStatus'], ...keys: string[]): number {
|
||||
return rows.filter((r) => keys.includes(r.status)).reduce((s, r) => s + r.count, 0);
|
||||
}
|
||||
|
||||
export default function DashboardPage() {
|
||||
const [stats, setStats] = useState<Stats | null>(null);
|
||||
const [updatedAt, setUpdatedAt] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
request<Stats>('/admin/dashboard/stats')
|
||||
.then((data) => {
|
||||
setStats(data);
|
||||
const now = new Date();
|
||||
setUpdatedAt(`${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}`);
|
||||
})
|
||||
.catch(() => undefined);
|
||||
}, []);
|
||||
|
||||
const pendingOrders = useMemo(
|
||||
() => countByStatus(stats?.ordersByStatus ?? [], 'PENDING_PAY', 'PENDING_SHIP', 'PENDING_RECEIVE'),
|
||||
[stats],
|
||||
);
|
||||
|
||||
const totalOrders = useMemo(
|
||||
() => (stats?.ordersByStatus ?? []).reduce((s, r) => s + r.count, 0),
|
||||
[stats],
|
||||
);
|
||||
|
||||
const alert = useMemo(() => {
|
||||
const pendingShip = countByStatus(stats?.ordersByStatus ?? [], 'PENDING_SHIP');
|
||||
if (pendingShip > 0) {
|
||||
return {
|
||||
title: `${pendingShip} 笔订单待发货`,
|
||||
desc: '请尽快处理待发货订单',
|
||||
};
|
||||
}
|
||||
const pendingPay = countByStatus(stats?.ordersByStatus ?? [], 'PENDING_PAY');
|
||||
if (pendingPay > 0) {
|
||||
return {
|
||||
title: `${pendingPay} 笔订单待支付`,
|
||||
desc: '请关注超时未支付订单',
|
||||
};
|
||||
}
|
||||
return null;
|
||||
}, [stats]);
|
||||
|
||||
const todayGmv = (stats?.ordersToday ?? 0) * 599;
|
||||
const totalGmv = totalOrders * 599;
|
||||
const redeemAmount = (stats?.redeemToday ?? 0) * 500;
|
||||
|
||||
return (
|
||||
<View className="hq-page hq-page--tab dash-page">
|
||||
<View className="dash-topbar">
|
||||
<Text className="dash-topbar__title">杜康总部管理</Text>
|
||||
<View className="dash-topbar__notify">
|
||||
<Text className="material-symbols-outlined">notifications</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View className="dash-section">
|
||||
<View className="dash-section__head">
|
||||
<Text className="dash-section__title">今日概况</Text>
|
||||
<Text className="dash-section__meta">{updatedAt ? `更新于 ${updatedAt}` : '—'}</Text>
|
||||
</View>
|
||||
|
||||
<View className="dash-mini-grid">
|
||||
<View className="dash-mini-card">
|
||||
<Text className="dash-mini-card__label">订单数</Text>
|
||||
<Text className="dash-mini-card__value">{stats?.ordersToday ?? 0}</Text>
|
||||
</View>
|
||||
<View className="dash-mini-card">
|
||||
<Text className="dash-mini-card__label">有效用户</Text>
|
||||
<Text className="dash-mini-card__value">{stats?.usersTotal ?? 0}</Text>
|
||||
</View>
|
||||
<View className="dash-mini-card">
|
||||
<Text className="dash-mini-card__label">核销笔数</Text>
|
||||
<Text className="dash-mini-card__value">{stats?.redeemToday ?? 0}</Text>
|
||||
</View>
|
||||
<View className="dash-mini-card">
|
||||
<Text className="dash-mini-card__label">门店总数</Text>
|
||||
<Text className="dash-mini-card__value">{stats?.storesTotal ?? 0}</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View className="dash-gmv-grid">
|
||||
<View className="dash-gmv-card">
|
||||
<Text className="dash-gmv-card__label">今日GMV</Text>
|
||||
<Text className="dash-gmv-card__value dash-gmv-card__value--red">{fmtMoney(todayGmv)}</Text>
|
||||
</View>
|
||||
<View className="dash-gmv-card">
|
||||
<Text className="dash-gmv-card__label">累计GMV</Text>
|
||||
<Text className="dash-gmv-card__value">{fmtMoney(totalGmv)}</Text>
|
||||
</View>
|
||||
<View className="dash-gmv-card">
|
||||
<Text className="dash-gmv-card__label">核销金额</Text>
|
||||
<Text className="dash-gmv-card__value dash-gmv-card__value--red">{fmtMoney(redeemAmount)}</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View className="dash-section">
|
||||
<View className="dash-section__head">
|
||||
<Text className="dash-section__title">待办预警</Text>
|
||||
<View className="dash-section__link" onClick={() => navTo('/pages/orders/index')}>
|
||||
<Text>查看全部</Text>
|
||||
<Text className="material-symbols-outlined dash-section__arrow">arrow_forward</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{alert ? (
|
||||
<View className="dash-alert" onClick={() => navTo('/pages/orders/index')}>
|
||||
<View className="dash-alert__main">
|
||||
<Text className="material-symbols-outlined dash-alert__icon">warning</Text>
|
||||
<View>
|
||||
<Text className="dash-alert__title">{alert.title}</Text>
|
||||
<Text className="dash-alert__desc">{alert.desc}</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View className="dash-alert__dots">
|
||||
<View className="dash-alert__dot dash-alert__dot--active" />
|
||||
<View className="dash-alert__dot" />
|
||||
<View className="dash-alert__dot" />
|
||||
</View>
|
||||
</View>
|
||||
) : (
|
||||
<View className="dash-alert dash-alert--ok">
|
||||
<Text className="material-symbols-outlined dash-alert__icon">check_circle</Text>
|
||||
<Text className="dash-alert__desc">暂无待办预警</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
|
||||
<View className="dash-section">
|
||||
<Text className="dash-section__title dash-section__title--solo">核心管理</Text>
|
||||
<View className="dash-bento">
|
||||
{CORE_MODULES.map((m) => (
|
||||
<View
|
||||
key={m.key}
|
||||
className={`dash-bento__item${m.wide ? ' dash-bento__item--wide' : ''}`}
|
||||
onClick={() => navTo(m.url)}
|
||||
>
|
||||
{m.badge && pendingOrders > 0 ? (
|
||||
<View className="dash-bento__badge">{pendingOrders > 99 ? '99+' : pendingOrders}</View>
|
||||
) : null}
|
||||
{m.wide ? (
|
||||
<View className="dash-bento__row">
|
||||
<View className={`dash-bento__icon dash-bento__icon--lg${m.filledIcon ? ' dash-bento__icon--fill' : ''}`}>
|
||||
<Text className="material-symbols-outlined">{m.icon}</Text>
|
||||
</View>
|
||||
<View className="dash-bento__text">
|
||||
<Text className="dash-bento__title">{m.title}</Text>
|
||||
<Text className="dash-bento__desc">{m.desc}</Text>
|
||||
</View>
|
||||
<Text className="material-symbols-outlined dash-bento__chevron">chevron_right</Text>
|
||||
</View>
|
||||
) : (
|
||||
<>
|
||||
<View className="dash-bento__icon">
|
||||
<Text className="material-symbols-outlined">{m.icon}</Text>
|
||||
</View>
|
||||
<Text className="dash-bento__title">{m.title}</Text>
|
||||
<Text className="dash-bento__desc">{m.desc}</Text>
|
||||
</>
|
||||
)}
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{(stats?.ordersByStatus ?? []).length > 0 ? (
|
||||
<View className="dash-section dash-section--last">
|
||||
<Text className="dash-section__title dash-section__title--solo">订单状态分布</Text>
|
||||
<View className="hq-card dash-status-card">
|
||||
{stats!.ordersByStatus.map((row) => (
|
||||
<View key={row.status} className="dash-order-row">
|
||||
<Text>{ORDER_STATUS_LABELS[row.status] || row.status}</Text>
|
||||
<Text className="dash-order-count">{row.count}</Text>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
) : null}
|
||||
|
||||
<HqTabBar selected={0} />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
@@ -1,299 +0,0 @@
|
||||
.login-page {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: calc(64px + var(--hq-safe-top)) 24px calc(24px + var(--hq-safe-bottom));
|
||||
background: linear-gradient(160deg, #7a0f16 0%, #a61d24 45%, #f5f3f0 45%, #f5f3f0 100%);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.login-brand {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.login-logo {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
border-radius: 22px;
|
||||
background: rgba(255, 255, 255, 0.16);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.login-logo .material-symbols-outlined {
|
||||
font-size: 40px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.login-title {
|
||||
font-size: 26px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.login-subtitle {
|
||||
font-size: 13px;
|
||||
opacity: 0.85;
|
||||
margin-top: 4px;
|
||||
letter-spacing: 4px;
|
||||
}
|
||||
|
||||
.login-card {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
background: #fff;
|
||||
border-radius: 20px;
|
||||
padding: 24px 20px;
|
||||
box-shadow: 0 8px 30px rgba(93, 64, 55, 0.15);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.login-card-title {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.login-input-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
padding: 0 12px;
|
||||
gap: 8px;
|
||||
border-radius: 12px;
|
||||
background: var(--hq-bg, #faf9f7);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.login-input-icon {
|
||||
flex-shrink: 0;
|
||||
color: var(--hq-muted);
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.login-input {
|
||||
flex: 1;
|
||||
width: 0;
|
||||
min-width: 0;
|
||||
height: 48px;
|
||||
min-height: 48px;
|
||||
padding: 0;
|
||||
font-size: 15px;
|
||||
line-height: 48px;
|
||||
box-sizing: border-box;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* Taro H5 输入框内部垂直居中 */
|
||||
.login-input-wrap .taro-input,
|
||||
.login-input-wrap taro-input-core {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
height: 100%;
|
||||
min-height: 48px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.login-input-wrap input,
|
||||
.login-input-wrap .weui-input {
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
min-height: 48px;
|
||||
line-height: 48px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: none;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
font-size: 15px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.login-input-row {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.login-input-row .login-input-wrap {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.login-code-btn {
|
||||
flex-shrink: 0;
|
||||
min-width: 96px;
|
||||
height: 48px;
|
||||
padding: 0 12px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(226, 190, 188, 0.2);
|
||||
background: var(--hq-surface-low, #f4f3f1);
|
||||
color: var(--hq-red);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.login-code-btn.is-disabled {
|
||||
color: var(--hq-muted);
|
||||
}
|
||||
|
||||
.login-submit {
|
||||
margin-top: 0;
|
||||
height: 48px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.login-remember,
|
||||
.login-agreement {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
font-size: 12px;
|
||||
color: var(--hq-muted);
|
||||
}
|
||||
|
||||
.login-agreement {
|
||||
margin: 8px 0 12px;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.login-remember {
|
||||
align-items: center;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
.login-checkbox {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 1px solid var(--hq-line);
|
||||
border-radius: 4px;
|
||||
flex-shrink: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.login-checkbox.is-checked {
|
||||
background: var(--hq-red);
|
||||
border-color: var(--hq-red);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.login-checkbox.is-checked::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 4px;
|
||||
top: 1px;
|
||||
width: 5px;
|
||||
height: 9px;
|
||||
border: solid #fff;
|
||||
border-width: 0 2px 2px 0;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.login-msg {
|
||||
font-size: 13px;
|
||||
color: #d33;
|
||||
text-align: center;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.login-agreement {
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
.login-agreement-text {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.login-agreement-link {
|
||||
color: var(--hq-red);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.login-divider {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
color: var(--hq-muted);
|
||||
font-size: 12px;
|
||||
margin: 6px 0 0;
|
||||
}
|
||||
|
||||
.login-divider::before,
|
||||
.login-divider::after {
|
||||
content: '';
|
||||
flex: 1;
|
||||
height: 1px;
|
||||
background: var(--hq-line);
|
||||
margin: 0 12px;
|
||||
}
|
||||
|
||||
.login-wechat-btn {
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(226, 190, 188, 0.2);
|
||||
background: var(--hq-surface-low, #f4f3f1);
|
||||
color: var(--hq-ink, #1a1c1b);
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.login-wechat-btn.is-disabled {
|
||||
opacity: 0.6;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.login-wechat-svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.login-wechat-fallback {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
color: #07c160;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.login-footer {
|
||||
margin-top: auto;
|
||||
padding-top: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
color: var(--hq-muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
@@ -1,267 +0,0 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { View, Text, Input, Button } from '@tarojs/components';
|
||||
import Taro from '@tarojs/taro';
|
||||
import { request, saveToken, toast } from '../../lib/api';
|
||||
import {
|
||||
bindHqWechatAfterSmsLogin,
|
||||
handleHqWechatCallback,
|
||||
handleHqWechatLoginResult,
|
||||
loginHqWithWechat,
|
||||
} from '../../lib/wechat';
|
||||
import { isWechatEnv } from '../../lib/weixin';
|
||||
import { MOCK_SMS_FIXED_CODE } from '@dukang/shared-types';
|
||||
import { WECHAT_INAPP_REQUIRED_MSG } from '@dukang/weixin-sdk';
|
||||
import { clearHqAccountCache } from '../../lib/session';
|
||||
import './index.css';
|
||||
|
||||
const DEMO_PHONE = '13600000001';
|
||||
const REMEMBER_PHONE_KEY = 'hq_remember_phone';
|
||||
const REMEMBER_FLAG_KEY = 'hq_remember_account';
|
||||
|
||||
function loadRememberedPhone(): { phone: string; remember: boolean } {
|
||||
try {
|
||||
const remember = Taro.getStorageSync(REMEMBER_FLAG_KEY) === '1';
|
||||
const phone = remember ? Taro.getStorageSync(REMEMBER_PHONE_KEY) || '' : '';
|
||||
return { phone, remember };
|
||||
} catch {
|
||||
return { phone: '', remember: false };
|
||||
}
|
||||
}
|
||||
|
||||
function WechatIcon() {
|
||||
if (process.env.TARO_ENV === 'h5') {
|
||||
return (
|
||||
<svg className="login-wechat-svg" viewBox="0 0 24 24" fill="#07C160" aria-hidden>
|
||||
<path d="M8.25 4.5C4.52 4.5 1.5 7.04 1.5 10.17c0 1.78.98 3.37 2.5 4.48l-.63 1.88 2.19-1.09c.84.24 1.74.38 2.69.38.25 0 .5 0 .75-.03-.16-.53-.25-1.09-.25-1.66 0-3.13 3.02-5.67 6.75-5.67.57 0 1.13.06 1.66.17C15.17 6.13 12 4.5 8.25 4.5zm10.5 6.33c-3.11 0-5.62 2.12-5.62 4.73 0 2.61 2.51 4.73 5.62 4.73.79 0 1.54-.14 2.24-.38l1.83.91-.53-1.57c1.27-.92 2.08-2.25 2.08-3.73 0-2.61-2.51-4.73-5.62-4.73z" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
return <Text className="login-wechat-fallback">微</Text>;
|
||||
}
|
||||
|
||||
export default function LoginPage() {
|
||||
const remembered = loadRememberedPhone();
|
||||
const [phone, setPhone] = useState(remembered.phone || DEMO_PHONE);
|
||||
const [code, setCode] = useState(MOCK_SMS_FIXED_CODE);
|
||||
const [rememberAccount, setRememberAccount] = useState(remembered.remember);
|
||||
const [agreed, setAgreed] = useState(false);
|
||||
const [cooldown, setCooldown] = useState(0);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [wxLoading, setWxLoading] = useState(false);
|
||||
const [msg, setMsg] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
if (!isWechatEnv()) return;
|
||||
void handleHqWechatCallback()
|
||||
.then((result) => {
|
||||
if (!result) return;
|
||||
if (handleHqWechatLoginResult(result)) enterApp();
|
||||
})
|
||||
.catch((e) => setMsg(formatWechatError(e)));
|
||||
}, []);
|
||||
|
||||
function formatWechatError(e: unknown): string {
|
||||
const text = e instanceof Error ? e.message : '微信登录失败';
|
||||
if (text.includes('首次登录') || text.includes('手机验证码')) {
|
||||
return '该微信尚未绑定管理员账号，请先使用手机验证码登录，登录后将自动关联微信';
|
||||
}
|
||||
return text;
|
||||
}
|
||||
|
||||
function ensureAgreed(): boolean {
|
||||
if (!agreed) {
|
||||
setMsg('请先勾选并同意用户协议');
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
function persistRememberAccount(nextPhone: string) {
|
||||
try {
|
||||
if (rememberAccount) {
|
||||
Taro.setStorageSync(REMEMBER_FLAG_KEY, '1');
|
||||
Taro.setStorageSync(REMEMBER_PHONE_KEY, nextPhone);
|
||||
} else {
|
||||
Taro.removeStorageSync(REMEMBER_FLAG_KEY);
|
||||
Taro.removeStorageSync(REMEMBER_PHONE_KEY);
|
||||
}
|
||||
} catch {
|
||||
/* ignore */
|
||||
}
|
||||
}
|
||||
|
||||
function enterApp() {
|
||||
clearHqAccountCache();
|
||||
Taro.reLaunch({ url: '/pages/dashboard/index' });
|
||||
}
|
||||
|
||||
async function sendCode() {
|
||||
if (!ensureAgreed()) return;
|
||||
if (cooldown > 0) return;
|
||||
setMsg('');
|
||||
try {
|
||||
await request('/admin/auth/sms/send', {
|
||||
method: 'POST',
|
||||
data: { phone, scene: 'HQ_LOGIN' },
|
||||
});
|
||||
toast(`验证码已发送（Mock:${MOCK_SMS_FIXED_CODE}）`, 'success');
|
||||
setCooldown(60);
|
||||
const t = setInterval(() => {
|
||||
setCooldown((s) => {
|
||||
if (s <= 1) {
|
||||
clearInterval(t);
|
||||
return 0;
|
||||
}
|
||||
return s - 1;
|
||||
});
|
||||
}, 1000);
|
||||
} catch (e) {
|
||||
setMsg(e instanceof Error ? e.message : '发送失败');
|
||||
}
|
||||
}
|
||||
|
||||
async function smsLogin() {
|
||||
if (!ensureAgreed()) return;
|
||||
setLoading(true);
|
||||
setMsg('');
|
||||
try {
|
||||
const data = await request<{ accessToken: string }>('/admin/auth/login/sms', {
|
||||
method: 'POST',
|
||||
data: { phone, code },
|
||||
});
|
||||
saveToken(data.accessToken);
|
||||
persistRememberAccount(phone);
|
||||
if (isWechatEnv() || process.env.TARO_ENV === 'weapp') {
|
||||
setMsg('登录成功，正在关联微信…');
|
||||
await bindHqWechatAfterSmsLogin();
|
||||
if (process.env.TARO_ENV === 'weapp') {
|
||||
enterApp();
|
||||
}
|
||||
return;
|
||||
}
|
||||
enterApp();
|
||||
} catch (e) {
|
||||
setMsg(e instanceof Error ? e.message : '登录失败');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function wechatLogin() {
|
||||
if (!ensureAgreed()) return;
|
||||
setMsg('');
|
||||
if (!isWechatEnv()) {
|
||||
setMsg(WECHAT_INAPP_REQUIRED_MSG);
|
||||
return;
|
||||
}
|
||||
setWxLoading(true);
|
||||
try {
|
||||
const ok = await loginHqWithWechat();
|
||||
if (ok) enterApp();
|
||||
} catch (e) {
|
||||
setMsg(formatWechatError(e));
|
||||
} finally {
|
||||
setWxLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<View className="login-page">
|
||||
<View className="login-brand">
|
||||
<View className="login-logo">
|
||||
<Text className="material-symbols-outlined">local_bar</Text>
|
||||
</View>
|
||||
<Text className="login-title">杜康好客</Text>
|
||||
<Text className="login-subtitle">总部管理中心</Text>
|
||||
</View>
|
||||
|
||||
<View className="login-card">
|
||||
<Text className="login-card-title">管理员登录</Text>
|
||||
|
||||
<View className="login-input-wrap">
|
||||
<Text className="material-symbols-outlined login-input-icon">smartphone</Text>
|
||||
<Input
|
||||
className="login-input"
|
||||
type="number"
|
||||
placeholder="请输入手机号"
|
||||
value={phone}
|
||||
onInput={(e) => setPhone(e.detail.value)}
|
||||
/>
|
||||
</View>
|
||||
|
||||
<View className="login-input-row">
|
||||
<View className="login-input-wrap">
|
||||
<Text className="material-symbols-outlined login-input-icon">shield</Text>
|
||||
<Input
|
||||
className="login-input"
|
||||
type="number"
|
||||
placeholder="验证码"
|
||||
value={code}
|
||||
onInput={(e) => setCode(e.detail.value)}
|
||||
/>
|
||||
</View>
|
||||
<View
|
||||
className={`login-code-btn${cooldown > 0 ? ' is-disabled' : ''}`}
|
||||
onClick={sendCode}
|
||||
>
|
||||
<Text>{cooldown > 0 ? `${cooldown}s 后重发` : '获取验证码'}</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View className="login-remember" onClick={() => setRememberAccount((v) => !v)}>
|
||||
<View className={`login-checkbox${rememberAccount ? ' is-checked' : ''}`} />
|
||||
<Text>记住账号</Text>
|
||||
</View>
|
||||
|
||||
<View className="login-agreement" onClick={() => setAgreed((v) => !v)}>
|
||||
<View className={`login-checkbox${agreed ? ' is-checked' : ''}`} />
|
||||
<Text className="login-agreement-text">
|
||||
我已阅读并同意
|
||||
<Text
|
||||
className="login-agreement-link"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
Taro.navigateTo({ url: '/pages/user-agreement/index' });
|
||||
}}
|
||||
>
|
||||
《用户协议》
|
||||
</Text>
|
||||
与
|
||||
<Text
|
||||
className="login-agreement-link"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
Taro.navigateTo({ url: '/pages/privacy-policy/index' });
|
||||
}}
|
||||
>
|
||||
《隐私政策》
|
||||
</Text>
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
{msg ? <Text className="login-msg">{msg}</Text> : null}
|
||||
|
||||
<Button className="hq-btn hq-btn--primary hq-btn--block login-submit" loading={loading} onClick={smsLogin}>
|
||||
登录
|
||||
</Button>
|
||||
|
||||
<View className="login-divider">
|
||||
<Text>其他登录方式</Text>
|
||||
</View>
|
||||
|
||||
<View
|
||||
className={`login-wechat-btn${wxLoading ? ' is-disabled' : ''}`}
|
||||
onClick={wxLoading ? undefined : wechatLogin}
|
||||
>
|
||||
<WechatIcon />
|
||||
<Text>{wxLoading ? '登录中...' : '微信一键授权'}</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View className="login-footer">
|
||||
<Text className="material-symbols-outlined" style="font-size:16px">verified_user</Text>
|
||||
<Text>杜康好客 · 传承千年</Text>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
@@ -1,135 +0,0 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { View, Text, Button } from '@tarojs/components';
|
||||
import { useRouter } from '@tarojs/taro';
|
||||
import HqHeader from '../../components/HqHeader';
|
||||
import { request, toast } from '../../lib/api';
|
||||
import { ORDER_STATUS_LABELS, badgeClass, fmtMoney, fmtTime } from '../../lib/constants';
|
||||
|
||||
type StatusLog = { fromStatus?: string; toStatus?: string; createdAt: string };
|
||||
type OrderDetail = {
|
||||
id: string;
|
||||
orderNo: string;
|
||||
status: string;
|
||||
payAmount: number | string;
|
||||
totalAmount?: number | string;
|
||||
quantity?: number;
|
||||
receiverName?: string;
|
||||
receiverPhone?: string;
|
||||
receiverAddress?: string;
|
||||
createdAt: string;
|
||||
product?: { name: string; skuCode: string };
|
||||
city?: { name: string };
|
||||
delivery?: { provider?: string; trackingNo?: string } | null;
|
||||
statusLogs?: StatusLog[];
|
||||
};
|
||||
|
||||
const NEXT: Record<string, Array<{ status: string; label: string }>> = {
|
||||
PENDING_SHIP: [{ status: 'OUT_WAREHOUSE', label: '标记出库' }],
|
||||
OUT_WAREHOUSE: [{ status: 'SHIPPING', label: '标记配送中' }],
|
||||
SHIPPING: [{ status: 'PENDING_RECEIVE', label: '标记待收货' }],
|
||||
PENDING_RECEIVE: [{ status: 'COMPLETED', label: '标记已完成' }],
|
||||
};
|
||||
|
||||
export default function OrderDetailPage() {
|
||||
const router = useRouter();
|
||||
const id = router.params.id;
|
||||
const [order, setOrder] = useState<OrderDetail | null>(null);
|
||||
const [saving, setSaving] = useState(false);
|
||||
|
||||
function load() {
|
||||
if (!id) return;
|
||||
request<OrderDetail>(`/admin/orders/${id}`).then(setOrder).catch(() => undefined);
|
||||
}
|
||||
|
||||
useEffect(load, [id]);
|
||||
|
||||
async function transition(status: string) {
|
||||
if (!id || saving) return;
|
||||
setSaving(true);
|
||||
try {
|
||||
const d = await request<OrderDetail>(`/admin/orders/${id}/status`, { method: 'PUT', data: { status } });
|
||||
setOrder(d);
|
||||
toast('订单状态已更新', 'success');
|
||||
} catch (e) {
|
||||
toast(e instanceof Error ? e.message : '操作失败');
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
}
|
||||
|
||||
const actions = order ? NEXT[order.status] ?? [] : [];
|
||||
|
||||
return (
|
||||
<View className="hq-page" style={actions.length ? 'padding-bottom:calc(96px + var(--hq-safe-bottom))' : ''}>
|
||||
<HqHeader title="订单详情" back />
|
||||
|
||||
{!order && <View className="hq-empty">加载中…</View>}
|
||||
|
||||
{order && (
|
||||
<>
|
||||
<View className="hq-card">
|
||||
<View className="hq-row">
|
||||
<Text style="font-size:13px;color:var(--hq-muted)">{order.orderNo}</Text>
|
||||
<Text className={`hq-badge ${badgeClass(order.status)}`}>
|
||||
{ORDER_STATUS_LABELS[order.status] || order.status}
|
||||
</Text>
|
||||
</View>
|
||||
<Text style="display:block;margin-top:12px;font-size:15px;font-weight:600">{order.product?.name || '—'}</Text>
|
||||
<Text className="hq-muted" style="font-size:12px">SKU {order.product?.skuCode || '—'} · 数量 {order.quantity ?? 1}</Text>
|
||||
<View className="hq-row" style="margin-top:12px">
|
||||
<Text className="hq-muted" style="font-size:13px">实付金额</Text>
|
||||
<Text style="font-size:18px;font-weight:700;color:var(--hq-red)">¥{fmtMoney(order.payAmount)}</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View className="hq-card">
|
||||
<View className="hq-row" style="margin-bottom:8px">
|
||||
<Text className="hq-muted" style="font-size:13px">收货人</Text>
|
||||
<Text style="font-size:14px">{order.receiverName || '—'} {order.receiverPhone || ''}</Text>
|
||||
</View>
|
||||
<View className="hq-row" style="margin-bottom:8px">
|
||||
<Text className="hq-muted" style="font-size:13px">收货地址</Text>
|
||||
<Text style="font-size:14px;text-align:right;max-width:60%">{order.receiverAddress || '—'}</Text>
|
||||
</View>
|
||||
<View className="hq-row" style="margin-bottom:8px">
|
||||
<Text className="hq-muted" style="font-size:13px">所属城市</Text>
|
||||
<Text style="font-size:14px">{order.city?.name || '—'}</Text>
|
||||
</View>
|
||||
<View className="hq-row">
|
||||
<Text className="hq-muted" style="font-size:13px">物流</Text>
|
||||
<Text style="font-size:14px">{order.delivery?.provider || '—'} {order.delivery?.trackingNo || ''}</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<Text className="hq-section-title">状态流转</Text>
|
||||
<View className="hq-card">
|
||||
{(order.statusLogs ?? []).length === 0 && <Text className="hq-muted">暂无记录</Text>}
|
||||
{(order.statusLogs ?? []).map((log, i) => (
|
||||
<View key={i} className="hq-row" style="padding:8px 0;border-bottom:1px solid var(--hq-line)">
|
||||
<Text style="font-size:13px">
|
||||
{ORDER_STATUS_LABELS[log.toStatus || ''] || log.toStatus}
|
||||
</Text>
|
||||
<Text className="hq-muted" style="font-size:12px">{fmtTime(log.createdAt)}</Text>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
|
||||
{actions.length > 0 && (
|
||||
<View className="hq-footer-bar">
|
||||
{actions.map((a) => (
|
||||
<Button
|
||||
key={a.status}
|
||||
className="hq-btn hq-btn--primary hq-btn--block"
|
||||
disabled={saving}
|
||||
onClick={() => transition(a.status)}
|
||||
>
|
||||
{a.label}
|
||||
</Button>
|
||||
))}
|
||||
</View>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
@@ -1,96 +0,0 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { View, Text, ScrollView } from '@tarojs/components';
|
||||
import Taro, { useDidShow } from '@tarojs/taro';
|
||||
import HqHeader from '../../components/HqHeader';
|
||||
import { request, type Paginated } from '../../lib/api';
|
||||
import { useHqSession } from '../../lib/session';
|
||||
import { ORDER_STATUS_LABELS, badgeClass, fmtMoney, fmtTime } from '../../lib/constants';
|
||||
|
||||
type OrderRow = {
|
||||
id: string;
|
||||
orderNo: string;
|
||||
status: string;
|
||||
deliveryType?: string;
|
||||
payAmount: number | string;
|
||||
receiverName?: string;
|
||||
receiverPhone?: string;
|
||||
createdAt: string;
|
||||
};
|
||||
|
||||
const TABS = [
|
||||
{ key: '', label: '全部' },
|
||||
{ key: 'PENDING_PAY', label: '待付款' },
|
||||
{ key: 'PENDING_SHIP', label: '待发货' },
|
||||
{ key: 'SHIPPING', label: '配送中' },
|
||||
{ key: 'COMPLETED', label: '已完成' },
|
||||
{ key: 'REFUNDING', label: '退款中' },
|
||||
];
|
||||
|
||||
export default function OrdersPage() {
|
||||
useHqSession();
|
||||
const [status, setStatus] = useState('');
|
||||
const [rows, setRows] = useState<OrderRow[]>([]);
|
||||
const [total, setTotal] = useState(0);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
function load() {
|
||||
setLoading(true);
|
||||
const qs = new URLSearchParams({ pageSize: '50' });
|
||||
if (status) qs.set('status', status);
|
||||
request<Paginated<OrderRow>>(`/admin/orders?${qs.toString()}`)
|
||||
.then((d) => {
|
||||
setRows(d.items);
|
||||
setTotal(d.total);
|
||||
})
|
||||
.catch(() => setRows([]))
|
||||
.finally(() => setLoading(false));
|
||||
}
|
||||
|
||||
useEffect(load, [status]);
|
||||
useDidShow(load);
|
||||
|
||||
return (
|
||||
<View className="hq-page">
|
||||
<HqHeader title="订单中心" back />
|
||||
|
||||
<ScrollView scrollX enhanced showScrollbar={false} className="hq-tabs">
|
||||
{TABS.map((t) => (
|
||||
<View
|
||||
key={t.key}
|
||||
className={`hq-tab${status === t.key ? ' hq-tab--active' : ''}`}
|
||||
onClick={() => setStatus(t.key)}
|
||||
>
|
||||
<Text>{t.label}</Text>
|
||||
</View>
|
||||
))}
|
||||
</ScrollView>
|
||||
|
||||
<Text className="hq-section-title">
|
||||
<Text>订单列表</Text>
|
||||
<Text className="hq-muted" style="font-size:12px;font-weight:400">共 {total} 单</Text>
|
||||
</Text>
|
||||
|
||||
{loading && <View className="hq-empty">加载中…</View>}
|
||||
{!loading && rows.length === 0 && <View className="hq-empty">暂无订单</View>}
|
||||
|
||||
{rows.map((o) => (
|
||||
<View
|
||||
key={o.id}
|
||||
className="hq-card"
|
||||
style="margin-top:8px;margin-bottom:0"
|
||||
onClick={() => Taro.navigateTo({ url: `/pages/orders/detail?id=${o.id}` })}
|
||||
>
|
||||
<View className="hq-row">
|
||||
<Text style="font-size:13px;color:var(--hq-muted)">{o.orderNo}</Text>
|
||||
<Text className={`hq-badge ${badgeClass(o.status)}`}>{ORDER_STATUS_LABELS[o.status] || o.status}</Text>
|
||||
</View>
|
||||
<View className="hq-row" style="margin-top:10px">
|
||||
<Text style="font-size:14px">{o.receiverName || '—'} · {o.receiverPhone || ''}</Text>
|
||||
<Text style="font-size:16px;font-weight:700;color:var(--hq-red)">¥{fmtMoney(o.payAmount)}</Text>
|
||||
</View>
|
||||
<Text className="hq-muted" style="font-size:11px;display:block;margin-top:6px">{fmtTime(o.createdAt)}</Text>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
@@ -1,3 +0,0 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '隐私政策',
|
||||
});
|
||||
@@ -1,32 +0,0 @@
|
||||
import { View, Text, ScrollView } from '@tarojs/components';
|
||||
import Taro from '@tarojs/taro';
|
||||
import { getLegalDocument } from '@dukang/shared-types';
|
||||
import '../user-agreement/legal.css';
|
||||
|
||||
export default function PrivacyPolicyPage() {
|
||||
const doc = getLegalDocument('privacy-policy');
|
||||
return (
|
||||
<View className="hq-legal-page">
|
||||
<View className="hq-legal-header">
|
||||
<Text className="hq-legal-back" onClick={() => Taro.navigateBack()}>
|
||||
‹
|
||||
</Text>
|
||||
<Text className="hq-legal-title">{doc.title}</Text>
|
||||
</View>
|
||||
<ScrollView scrollY className="hq-legal-body">
|
||||
<Text className="hq-legal-updated">更新日期：{doc.updatedAt}</Text>
|
||||
<Text className="hq-legal-intro">{doc.intro}</Text>
|
||||
{doc.sections.map((section) => (
|
||||
<View key={section.heading} className="hq-legal-section">
|
||||
<Text className="hq-legal-heading">{section.heading}</Text>
|
||||
{section.paragraphs.map((p, i) => (
|
||||
<Text key={`${section.heading}-${i}`} className="hq-legal-paragraph">
|
||||
{p}
|
||||
</Text>
|
||||
))}
|
||||
</View>
|
||||
))}
|
||||
</ScrollView>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
@@ -1,63 +0,0 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { View, Text } from '@tarojs/components';
|
||||
import { useDidShow } from '@tarojs/taro';
|
||||
import HqHeader from '../../components/HqHeader';
|
||||
import { request, type Paginated } from '../../lib/api';
|
||||
import { useHqSession } from '../../lib/session';
|
||||
import { PRODUCT_STATUS_LABELS, badgeClass, fmtMoney } from '../../lib/constants';
|
||||
|
||||
type ProductRow = {
|
||||
id: string;
|
||||
skuCode: string;
|
||||
name: string;
|
||||
spec?: string;
|
||||
price: number | string;
|
||||
benefitAmount?: number | string;
|
||||
status: string;
|
||||
sortOrder?: number;
|
||||
};
|
||||
|
||||
export default function ProductsPage() {
|
||||
useHqSession();
|
||||
const [rows, setRows] = useState<ProductRow[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
function load() {
|
||||
setLoading(true);
|
||||
request<Paginated<ProductRow>>('/admin/products?pageSize=100')
|
||||
.then((d) => setRows(d.items))
|
||||
.catch(() => setRows([]))
|
||||
.finally(() => setLoading(false));
|
||||
}
|
||||
|
||||
useEffect(load, []);
|
||||
useDidShow(load);
|
||||
|
||||
return (
|
||||
<View className="hq-page">
|
||||
<HqHeader title="商品管理" back />
|
||||
|
||||
<Text className="hq-section-title">
|
||||
<Text>商品列表</Text>
|
||||
<Text className="hq-muted" style="font-size:12px;font-weight:400">共 {rows.length} 款</Text>
|
||||
</Text>
|
||||
|
||||
{loading && <View className="hq-empty">加载中…</View>}
|
||||
{!loading && rows.length === 0 && <View className="hq-empty">暂无商品</View>}
|
||||
|
||||
{rows.map((p) => (
|
||||
<View key={p.id} className="hq-card" style="margin-top:8px;margin-bottom:0">
|
||||
<View className="hq-row">
|
||||
<Text style="font-size:15px;font-weight:700;max-width:70%">{p.name}</Text>
|
||||
<Text className={`hq-badge ${badgeClass(p.status)}`}>{PRODUCT_STATUS_LABELS[p.status] || p.status}</Text>
|
||||
</View>
|
||||
<Text className="hq-muted" style="display:block;margin-top:4px;font-size:12px">SKU {p.skuCode} · {p.spec || ''}</Text>
|
||||
<View className="hq-row" style="margin-top:10px">
|
||||
<Text style="font-size:16px;font-weight:700;color:var(--hq-red)">¥{fmtMoney(p.price)}</Text>
|
||||
<Text className="hq-muted" style="font-size:13px">权益额 ¥{fmtMoney(p.benefitAmount ?? p.price)}</Text>
|
||||
</View>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
@@ -1,179 +0,0 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { View, Text, Button } from '@tarojs/components';
|
||||
import Taro, { useRouter } from '@tarojs/taro';
|
||||
import type { PromoCodeItem, PromoCodeStats } from '@dukang/shared-types';
|
||||
import HqHeader from '../../components/HqHeader';
|
||||
import { request, toast } from '../../lib/api';
|
||||
import { useHqSession } from '../../lib/session';
|
||||
import { buildPromoQrDataUrl, promoConversion } from '../../lib/promo-qr';
|
||||
import './index.css';
|
||||
import './index.css';
|
||||
|
||||
type PromoDetail = PromoCodeItem & { stats?: PromoCodeStats };
|
||||
|
||||
export default function PromoDetailPage() {
|
||||
useHqSession();
|
||||
const router = useRouter();
|
||||
const id = router.params.id ?? '';
|
||||
const [row, setRow] = useState<PromoDetail | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [updating, setUpdating] = useState(false);
|
||||
const [qrUrl, setQrUrl] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
if (!id) return;
|
||||
setLoading(true);
|
||||
request<PromoDetail>(`/admin/promo-codes/${id}`)
|
||||
.then(setRow)
|
||||
.catch(() => setRow(null))
|
||||
.finally(() => setLoading(false));
|
||||
}, [id]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!row?.landingUrl) {
|
||||
setQrUrl('');
|
||||
return;
|
||||
}
|
||||
void buildPromoQrDataUrl(row.landingUrl).then(setQrUrl).catch(() => setQrUrl(''));
|
||||
}, [row?.landingUrl]);
|
||||
|
||||
async function toggleStatus() {
|
||||
if (!row) return;
|
||||
const next = row.status === 'ACTIVE' ? 'DISABLED' : 'ACTIVE';
|
||||
const label = next === 'DISABLED' ? '停用' : '启用';
|
||||
const ok = await Taro.showModal({
|
||||
title: `确认${label}`,
|
||||
content: next === 'DISABLED' ? '停用后扫码将不再追踪数据' : '启用后恢复追踪',
|
||||
});
|
||||
if (!ok.confirm) return;
|
||||
setUpdating(true);
|
||||
try {
|
||||
const updated = await request<PromoCodeItem>(`/admin/promo-codes/${id}/status`, {
|
||||
method: 'PUT',
|
||||
data: { status: next },
|
||||
});
|
||||
setRow((prev) => (prev ? { ...prev, ...updated } : updated));
|
||||
toast(`已${label}`, 'success');
|
||||
} catch (e) {
|
||||
toast(e instanceof Error ? e.message : '操作失败');
|
||||
} finally {
|
||||
setUpdating(false);
|
||||
}
|
||||
}
|
||||
|
||||
function copyLink() {
|
||||
if (!row?.landingUrl) return;
|
||||
Taro.setClipboardData({ data: row.landingUrl }).then(() => toast('推广链接已复制', 'success'));
|
||||
}
|
||||
|
||||
function downloadQr() {
|
||||
if (!qrUrl) return;
|
||||
if (process.env.TARO_ENV === 'h5') {
|
||||
const a = document.createElement('a');
|
||||
a.href = qrUrl;
|
||||
a.download = `promo-${row?.code ?? 'qr'}.png`;
|
||||
a.click();
|
||||
toast('已开始下载', 'success');
|
||||
return;
|
||||
}
|
||||
Taro.previewImage({ urls: [qrUrl] });
|
||||
}
|
||||
|
||||
const stats = row?.stats ?? (row ? {
|
||||
scanCount: row.scanCount,
|
||||
orderCount: row.orderCount,
|
||||
conversionRate: parseFloat(promoConversion(row.scanCount, row.orderCount)) || 0,
|
||||
} : null);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<View className="hq-page promo-page">
|
||||
<HqHeader title="推广码详情" back />
|
||||
<View className="promo-empty">加载中…</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
if (!row) {
|
||||
return (
|
||||
<View className="hq-page promo-page">
|
||||
<HqHeader title="推广码详情" back />
|
||||
<View className="promo-empty">推广码不存在</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<View className="hq-page promo-page">
|
||||
<HqHeader title="推广码详情" back />
|
||||
|
||||
<View className="promo-detail-card">
|
||||
<View className="promo-detail-card__qr">
|
||||
{qrUrl ? (
|
||||
<View className="promo-result__qr" style={{ backgroundImage: `url(${qrUrl})` }} />
|
||||
) : null}
|
||||
</View>
|
||||
<View className="promo-detail-card__info">
|
||||
<Text className="promo-detail-card__name">{row.name}</Text>
|
||||
<Text
|
||||
className={`promo-card__badge ${
|
||||
row.status === 'ACTIVE' ? 'promo-card__badge--active' : 'promo-card__badge--disabled'
|
||||
}`}
|
||||
>
|
||||
{row.status === 'ACTIVE' ? '运行中' : '已停用'}
|
||||
</Text>
|
||||
<Text className="promo-detail-card__meta">码值 {row.code}</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{stats && (
|
||||
<View className="promo-stats-grid">
|
||||
<View className="promo-stat-card">
|
||||
<Text className="material-symbols-outlined promo-stat-card__icon">visibility</Text>
|
||||
<Text className="promo-stat-card__label">扫码UV</Text>
|
||||
<Text className="promo-stat-card__value">{stats.scanCount}</Text>
|
||||
</View>
|
||||
<View className="promo-stat-card">
|
||||
<Text className="material-symbols-outlined promo-stat-card__icon">shopping_cart</Text>
|
||||
<Text className="promo-stat-card__label">下单数</Text>
|
||||
<Text className="promo-stat-card__value">{stats.orderCount}</Text>
|
||||
</View>
|
||||
<View className="promo-stat-card">
|
||||
<Text className="material-symbols-outlined promo-stat-card__icon">trending_up</Text>
|
||||
<Text className="promo-stat-card__label">转化率</Text>
|
||||
<Text className="promo-stat-card__value">{stats.conversionRate}%</Text>
|
||||
</View>
|
||||
<View className="promo-stat-card">
|
||||
<Text className="material-symbols-outlined promo-stat-card__icon">schedule</Text>
|
||||
<Text className="promo-stat-card__label">创建时间</Text>
|
||||
<Text className="promo-stat-card__value promo-stat-card__value--sm">
|
||||
{new Date(row.createdAt).toLocaleDateString('zh-CN')}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
|
||||
<View className="hq-card" style="margin:0 16px">
|
||||
<Text className="hq-muted" style="display:block;font-size:12px;margin-bottom:8px">落地链接</Text>
|
||||
<Text style="display:block;font-size:13px;word-break:break-all">{row.landingUrl}</Text>
|
||||
</View>
|
||||
|
||||
<View className="promo-detail-actions">
|
||||
<Button className="hq-btn hq-btn--outline hq-btn--block" onClick={copyLink}>
|
||||
复制推广链接
|
||||
</Button>
|
||||
<Button className="hq-btn hq-btn--primary hq-btn--block" onClick={downloadQr}>
|
||||
下载二维码
|
||||
</Button>
|
||||
<Button
|
||||
className="hq-btn hq-btn--ghost hq-btn--block"
|
||||
loading={updating}
|
||||
disabled={updating}
|
||||
onClick={toggleStatus}
|
||||
>
|
||||
{row.status === 'ACTIVE' ? '停用推广码' : '启用推广码'}
|
||||
</Button>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
@@ -1,126 +0,0 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { View, Text, Input, Button } from '@tarojs/components';
|
||||
import Taro from '@tarojs/taro';
|
||||
import type { PromoCodeItem } from '@dukang/shared-types';
|
||||
import HqHeader from '../../components/HqHeader';
|
||||
import { request, toast } from '../../lib/api';
|
||||
import { useHqSession } from '../../lib/session';
|
||||
import { navTo } from '../../lib/session';
|
||||
import { buildPromoQrDataUrl } from '../../lib/promo-qr';
|
||||
import './index.css';
|
||||
import './index.css';
|
||||
|
||||
export default function PromoGeneratePage() {
|
||||
useHqSession();
|
||||
const [name, setName] = useState('');
|
||||
const [code, setCode] = useState('');
|
||||
const [creating, setCreating] = useState(false);
|
||||
const [created, setCreated] = useState<PromoCodeItem | null>(null);
|
||||
const [qrUrl, setQrUrl] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
if (!created?.landingUrl) {
|
||||
setQrUrl('');
|
||||
return;
|
||||
}
|
||||
void buildPromoQrDataUrl(created.landingUrl).then(setQrUrl).catch(() => setQrUrl(''));
|
||||
}, [created]);
|
||||
|
||||
async function handleGenerate() {
|
||||
const trimmed = name.trim();
|
||||
if (!trimmed) {
|
||||
toast('请填写渠道名称');
|
||||
return;
|
||||
}
|
||||
setCreating(true);
|
||||
try {
|
||||
const payload: { name: string; code?: string } = { name: trimmed };
|
||||
if (code.trim()) payload.code = code.trim().toUpperCase();
|
||||
const row = await request<PromoCodeItem>('/admin/promo-codes', {
|
||||
method: 'POST',
|
||||
data: payload,
|
||||
});
|
||||
setCreated(row);
|
||||
toast('推广码已生成', 'success');
|
||||
} catch (e) {
|
||||
toast(e instanceof Error ? e.message : '生成失败');
|
||||
} finally {
|
||||
setCreating(false);
|
||||
}
|
||||
}
|
||||
|
||||
function copyLink() {
|
||||
if (!created?.landingUrl) return;
|
||||
Taro.setClipboardData({ data: created.landingUrl }).then(() => toast('推广链接已复制', 'success'));
|
||||
}
|
||||
|
||||
return (
|
||||
<View className="hq-page promo-page">
|
||||
<HqHeader title="生成推广码" back />
|
||||
|
||||
<View className="hq-card" style="margin:16px">
|
||||
<Text style="display:block;font-size:14px;color:var(--hq-muted);margin-bottom:16px">
|
||||
填写渠道信息，生成专属溯源推广码与落地链接。
|
||||
</Text>
|
||||
|
||||
<Text className="hq-label">渠道名称 *</Text>
|
||||
<Input
|
||||
className="hq-input"
|
||||
placeholder="如：郑州品鉴会、门店地推"
|
||||
value={name}
|
||||
onInput={(e) => setName(e.detail.value)}
|
||||
/>
|
||||
|
||||
<Text className="hq-label" style="margin-top:16px">自定义码值（选填）</Text>
|
||||
<Input
|
||||
className="hq-input"
|
||||
placeholder="留空则系统自动生成，如 DKDEMO1"
|
||||
value={code}
|
||||
onInput={(e) => setCode(e.detail.value.toUpperCase())}
|
||||
/>
|
||||
|
||||
<Button
|
||||
className="hq-btn hq-btn--primary hq-btn--block"
|
||||
style="margin-top:20px"
|
||||
loading={creating}
|
||||
disabled={creating}
|
||||
onClick={handleGenerate}
|
||||
>
|
||||
生成推广码
|
||||
</Button>
|
||||
</View>
|
||||
|
||||
{created && (
|
||||
<View className="promo-result">
|
||||
<View className="promo-result__qr-wrap">
|
||||
{qrUrl ? (
|
||||
<View
|
||||
className="promo-result__qr"
|
||||
style={{ backgroundImage: `url(${qrUrl})` }}
|
||||
/>
|
||||
) : (
|
||||
<View className="promo-result__qr promo-result__qr--loading">
|
||||
<Text className="material-symbols-outlined">hourglass_top</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
<Text className="promo-result__title">{created.name}</Text>
|
||||
<Text className="promo-result__code">码值：{created.code}</Text>
|
||||
|
||||
<View className="promo-result__actions">
|
||||
<View className="promo-card__btn promo-card__btn--outline" onClick={copyLink}>
|
||||
<Text className="material-symbols-outlined" style="font-size:18px">link</Text>
|
||||
<Text>复制链接</Text>
|
||||
</View>
|
||||
<View
|
||||
className="promo-card__btn promo-card__btn--ghost"
|
||||
onClick={() => navTo(`/pages/promo/detail?id=${created.id}`)}
|
||||
>
|
||||
<Text>查看详情</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
@@ -1,412 +0,0 @@
|
||||
.promo-page {
|
||||
padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
|
||||
}
|
||||
|
||||
.promo-hero {
|
||||
margin: 12px 16px 16px;
|
||||
padding: 20px 16px;
|
||||
border-radius: var(--hq-radius);
|
||||
background: linear-gradient(135deg, var(--hq-red) 0%, var(--hq-red-dark) 100%);
|
||||
color: #fff;
|
||||
box-shadow: var(--hq-shadow);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.promo-hero__label {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
opacity: 0.85;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.promo-hero__value {
|
||||
display: block;
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.promo-hero__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 8px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.promo-hero__stat-label {
|
||||
display: block;
|
||||
font-size: 10px;
|
||||
opacity: 0.75;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.promo-hero__stat-value {
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.promo-toolbar {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin: 0 16px 12px;
|
||||
}
|
||||
|
||||
.promo-search {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 0 12px;
|
||||
box-shadow: var(--hq-shadow);
|
||||
}
|
||||
|
||||
.promo-search .material-symbols-outlined {
|
||||
font-size: 20px;
|
||||
color: var(--hq-muted);
|
||||
}
|
||||
|
||||
.promo-search__input {
|
||||
flex: 1;
|
||||
border: none;
|
||||
background: transparent;
|
||||
padding: 10px 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.promo-filter {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 12px;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: var(--hq-shadow);
|
||||
}
|
||||
|
||||
.promo-tabs {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin: 0 16px 12px;
|
||||
}
|
||||
|
||||
.promo-tab {
|
||||
padding: 6px 14px;
|
||||
border-radius: 999px;
|
||||
font-size: 12px;
|
||||
background: #fff;
|
||||
color: var(--hq-muted);
|
||||
border: 1px solid var(--hq-line);
|
||||
}
|
||||
|
||||
.promo-tab--active {
|
||||
background: rgba(166, 29, 36, 0.1);
|
||||
color: var(--hq-red);
|
||||
border-color: rgba(166, 29, 36, 0.2);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.promo-card {
|
||||
margin: 0 16px 12px;
|
||||
padding: 16px;
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 20px rgba(166, 29, 36, 0.05);
|
||||
border: 1px solid rgba(142, 112, 110, 0.08);
|
||||
}
|
||||
|
||||
.promo-card__head {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.promo-card__left {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: flex-start;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.promo-card__icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 10px;
|
||||
background: #f4f3f1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.promo-card__icon .material-symbols-outlined {
|
||||
font-size: 24px;
|
||||
color: var(--hq-red);
|
||||
}
|
||||
|
||||
.promo-card__name {
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
.promo-card__code {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
color: var(--hq-muted);
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.promo-card__badge {
|
||||
font-size: 10px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 999px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.promo-card__badge--active {
|
||||
background: rgba(45, 106, 79, 0.12);
|
||||
color: var(--hq-green);
|
||||
}
|
||||
|
||||
.promo-card__badge--disabled {
|
||||
background: rgba(141, 112, 110, 0.12);
|
||||
color: var(--hq-muted);
|
||||
}
|
||||
|
||||
.promo-card__stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 8px;
|
||||
background: #faf9f7;
|
||||
border-radius: 10px;
|
||||
padding: 10px 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.promo-card__stat {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.promo-card__stat-label {
|
||||
display: block;
|
||||
font-size: 10px;
|
||||
color: var(--hq-muted);
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.promo-card__stat-value {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
.promo-card__stat-value--red {
|
||||
color: var(--hq-red);
|
||||
}
|
||||
|
||||
.promo-card__actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.promo-card__btn {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.promo-card__btn--outline {
|
||||
border: 1px solid var(--hq-red);
|
||||
color: var(--hq-red);
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.promo-card__btn--ghost {
|
||||
background: #f4f3f1;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
.promo-fab {
|
||||
position: fixed;
|
||||
right: 20px;
|
||||
bottom: calc(24px + env(safe-area-inset-bottom, 0px));
|
||||
z-index: 50;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 12px 18px;
|
||||
border-radius: 999px;
|
||||
background: var(--hq-red);
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
box-shadow: 0 8px 24px rgba(166, 29, 36, 0.35);
|
||||
}
|
||||
|
||||
.promo-fab .material-symbols-outlined {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.promo-empty {
|
||||
text-align: center;
|
||||
padding: 48px 16px;
|
||||
color: var(--hq-muted);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.promo-result {
|
||||
margin: 16px;
|
||||
padding: 24px 16px;
|
||||
background: #fff;
|
||||
border-radius: var(--hq-radius);
|
||||
box-shadow: var(--hq-shadow);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.promo-result__qr-wrap {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.promo-result__qr {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
border-radius: 12px;
|
||||
border: 2px solid rgba(166, 29, 36, 0.1);
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.promo-result__qr--loading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #f4f3f1;
|
||||
}
|
||||
|
||||
.promo-result__title {
|
||||
display: block;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
.promo-result__code {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
color: var(--hq-muted);
|
||||
margin-top: 4px;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.promo-result__actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.promo-detail-card {
|
||||
margin: 12px 16px;
|
||||
padding: 20px;
|
||||
background: #fff;
|
||||
border-radius: var(--hq-radius);
|
||||
box-shadow: var(--hq-shadow);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.promo-detail-card__info {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.promo-detail-card__name {
|
||||
display: block;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
.promo-detail-card__meta {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
color: var(--hq-muted);
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.promo-stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 12px;
|
||||
margin: 0 16px 16px;
|
||||
}
|
||||
|
||||
.promo-stat-card {
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
box-shadow: 0 4px 20px rgba(166, 29, 36, 0.05);
|
||||
}
|
||||
|
||||
.promo-stat-card__icon {
|
||||
font-size: 20px;
|
||||
color: var(--hq-red);
|
||||
font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
|
||||
.promo-stat-card__label {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
color: var(--hq-muted);
|
||||
margin: 8px 0 4px;
|
||||
}
|
||||
|
||||
.promo-stat-card__value {
|
||||
display: block;
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
color: var(--hq-red);
|
||||
}
|
||||
|
||||
.promo-stat-card__value--sm {
|
||||
font-size: 14px;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
.promo-detail-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
margin: 16px;
|
||||
padding-bottom: 24px;
|
||||
}
|
||||
|
||||
.hq-label {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: var(--hq-muted);
|
||||
margin-bottom: 8px;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
@@ -1,161 +0,0 @@
|
||||
import { useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import { View, Text, Input } from '@tarojs/components';
|
||||
import { useDidShow } from '@tarojs/taro';
|
||||
import type { PromoCodeItem, PromoCodeStatus } from '@dukang/shared-types';
|
||||
import HqHeader from '../../components/HqHeader';
|
||||
import { request, type Paginated } from '../../lib/api';
|
||||
import { useHqSession, navTo } from '../../lib/session';
|
||||
import { promoConversion } from '../../lib/promo-qr';
|
||||
import './index.css';
|
||||
|
||||
type StatusFilter = 'ALL' | PromoCodeStatus;
|
||||
|
||||
const STATUS_TABS: { key: StatusFilter; label: string }[] = [
|
||||
{ key: 'ALL', label: '全部' },
|
||||
{ key: 'ACTIVE', label: '运行中' },
|
||||
{ key: 'DISABLED', label: '已停用' },
|
||||
];
|
||||
|
||||
export default function PromoListPage() {
|
||||
useHqSession();
|
||||
const [allRows, setAllRows] = useState<PromoCodeItem[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [keyword, setKeyword] = useState('');
|
||||
const [status, setStatus] = useState<StatusFilter>('ALL');
|
||||
|
||||
const load = useCallback(() => {
|
||||
setLoading(true);
|
||||
const qs = new URLSearchParams({ pageSize: '100' });
|
||||
if (status !== 'ALL') qs.set('status', status);
|
||||
request<Paginated<PromoCodeItem>>(`/admin/promo-codes?${qs}`)
|
||||
.then((d) => setAllRows(d.items))
|
||||
.catch(() => setAllRows([]))
|
||||
.finally(() => setLoading(false));
|
||||
}, [status]);
|
||||
|
||||
useEffect(load, [load]);
|
||||
useDidShow(load);
|
||||
|
||||
const rows = useMemo(() => {
|
||||
const q = keyword.trim().toLowerCase();
|
||||
if (!q) return allRows;
|
||||
return allRows.filter(
|
||||
(r) => r.name.toLowerCase().includes(q) || r.code.toLowerCase().includes(q),
|
||||
);
|
||||
}, [allRows, keyword]);
|
||||
|
||||
const summary = useMemo(() => {
|
||||
const scanTotal = rows.reduce((s, r) => s + r.scanCount, 0);
|
||||
const orderTotal = rows.reduce((s, r) => s + r.orderCount, 0);
|
||||
return { scanTotal, orderTotal, conversion: promoConversion(scanTotal, orderTotal) };
|
||||
}, [rows]);
|
||||
|
||||
return (
|
||||
<View className="hq-page promo-page">
|
||||
<HqHeader title="推广码管理" back />
|
||||
|
||||
<View className="promo-hero">
|
||||
<Text className="promo-hero__label">渠道推广汇总</Text>
|
||||
<Text className="promo-hero__value">{rows.length} 个推广码</Text>
|
||||
<View className="promo-hero__grid">
|
||||
<View>
|
||||
<Text className="promo-hero__stat-label">总扫码</Text>
|
||||
<Text className="promo-hero__stat-value">{summary.scanTotal}</Text>
|
||||
</View>
|
||||
<View>
|
||||
<Text className="promo-hero__stat-label">总订单</Text>
|
||||
<Text className="promo-hero__stat-value">{summary.orderTotal}</Text>
|
||||
</View>
|
||||
<View>
|
||||
<Text className="promo-hero__stat-label">转化率</Text>
|
||||
<Text className="promo-hero__stat-value">{summary.conversion}</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View className="promo-toolbar">
|
||||
<View className="promo-search">
|
||||
<Text className="material-symbols-outlined">search</Text>
|
||||
<Input
|
||||
className="promo-search__input"
|
||||
placeholder="搜索渠道名称或码值"
|
||||
value={keyword}
|
||||
onInput={(e) => setKeyword(e.detail.value)}
|
||||
confirmType="search"
|
||||
onConfirm={load}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View className="promo-tabs">
|
||||
{STATUS_TABS.map((tab) => (
|
||||
<View
|
||||
key={tab.key}
|
||||
className={`promo-tab${status === tab.key ? ' promo-tab--active' : ''}`}
|
||||
onClick={() => setStatus(tab.key)}
|
||||
>
|
||||
<Text>{tab.label}</Text>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
|
||||
{loading && <View className="promo-empty">加载中…</View>}
|
||||
{!loading && rows.length === 0 && <View className="promo-empty">暂无推广码，点击下方生成</View>}
|
||||
|
||||
{rows.map((row) => (
|
||||
<View key={row.id} className="promo-card">
|
||||
<View className="promo-card__head">
|
||||
<View className="promo-card__left">
|
||||
<View className="promo-card__icon">
|
||||
<Text className="material-symbols-outlined">qr_code_2</Text>
|
||||
</View>
|
||||
<View>
|
||||
<Text className="promo-card__name">{row.name}</Text>
|
||||
<Text className="promo-card__code">ID: {row.code}</Text>
|
||||
</View>
|
||||
</View>
|
||||
<Text
|
||||
className={`promo-card__badge ${
|
||||
row.status === 'ACTIVE' ? 'promo-card__badge--active' : 'promo-card__badge--disabled'
|
||||
}`}
|
||||
>
|
||||
{row.status === 'ACTIVE' ? '运行中' : '已停用'}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<View className="promo-card__stats">
|
||||
<View className="promo-card__stat">
|
||||
<Text className="promo-card__stat-label">扫码UV</Text>
|
||||
<Text className="promo-card__stat-value">{row.scanCount}</Text>
|
||||
</View>
|
||||
<View className="promo-card__stat">
|
||||
<Text className="promo-card__stat-label">订单数</Text>
|
||||
<Text className="promo-card__stat-value">{row.orderCount}</Text>
|
||||
</View>
|
||||
<View className="promo-card__stat">
|
||||
<Text className="promo-card__stat-label">转化率</Text>
|
||||
<Text className="promo-card__stat-value promo-card__stat-value--red">
|
||||
{promoConversion(row.scanCount, row.orderCount)}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View className="promo-card__actions">
|
||||
<View
|
||||
className="promo-card__btn promo-card__btn--outline"
|
||||
onClick={() => navTo(`/pages/promo/detail?id=${row.id}`)}
|
||||
>
|
||||
<Text className="material-symbols-outlined" style="font-size:18px">visibility</Text>
|
||||
<Text>查看详情</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
))}
|
||||
|
||||
<View className="promo-fab" onClick={() => navTo('/pages/promo/generate')}>
|
||||
<Text className="material-symbols-outlined">add_circle</Text>
|
||||
<Text>生成新推广码</Text>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
@@ -1,86 +0,0 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { View, Text, Button } from '@tarojs/components';
|
||||
import { useDidShow } from '@tarojs/taro';
|
||||
import HqHeader from '../../components/HqHeader';
|
||||
import { request, type Paginated, toast } from '../../lib/api';
|
||||
import { useHqSession } from '../../lib/session';
|
||||
import { ORDER_STATUS_LABELS, badgeClass, fmtMoney, fmtTime } from '../../lib/constants';
|
||||
|
||||
type OrderRow = {
|
||||
id: string;
|
||||
orderNo: string;
|
||||
status: string;
|
||||
payAmount: number | string;
|
||||
receiverName?: string;
|
||||
receiverPhone?: string;
|
||||
createdAt: string;
|
||||
};
|
||||
|
||||
export default function RefundPage() {
|
||||
useHqSession();
|
||||
const [rows, setRows] = useState<OrderRow[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [busy, setBusy] = useState('');
|
||||
|
||||
function load() {
|
||||
setLoading(true);
|
||||
request<Paginated<OrderRow>>('/admin/orders?status=REFUNDING&pageSize=50')
|
||||
.then((d) => setRows(d.items))
|
||||
.catch(() => setRows([]))
|
||||
.finally(() => setLoading(false));
|
||||
}
|
||||
|
||||
useEffect(load, []);
|
||||
useDidShow(load);
|
||||
|
||||
async function confirmRefund(id: string) {
|
||||
setBusy(id);
|
||||
try {
|
||||
await request(`/admin/orders/${id}/status`, { method: 'PUT', data: { status: 'REFUNDED' } });
|
||||
toast('退款已确认', 'success');
|
||||
load();
|
||||
} catch (e) {
|
||||
toast(e instanceof Error ? e.message : '操作失败');
|
||||
} finally {
|
||||
setBusy('');
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<View className="hq-page">
|
||||
<HqHeader title="补发 / 退款" back />
|
||||
|
||||
<Text className="hq-section-title">
|
||||
<Text>退款中订单</Text>
|
||||
<Text className="hq-muted" style="font-size:12px;font-weight:400">共 {rows.length} 单</Text>
|
||||
</Text>
|
||||
|
||||
{loading && <View className="hq-empty">加载中…</View>}
|
||||
{!loading && rows.length === 0 && <View className="hq-empty">暂无退款中订单</View>}
|
||||
|
||||
{rows.map((o) => (
|
||||
<View key={o.id} className="hq-card" style="margin-top:8px;margin-bottom:0">
|
||||
<View className="hq-row">
|
||||
<Text style="font-size:13px;color:var(--hq-muted)">{o.orderNo}</Text>
|
||||
<Text className={`hq-badge ${badgeClass(o.status)}`}>{ORDER_STATUS_LABELS[o.status] || o.status}</Text>
|
||||
</View>
|
||||
<View className="hq-row" style="margin-top:10px">
|
||||
<Text style="font-size:14px">{o.receiverName || '—'} · {o.receiverPhone || ''}</Text>
|
||||
<Text style="font-size:16px;font-weight:700;color:var(--hq-red)">¥{fmtMoney(o.payAmount)}</Text>
|
||||
</View>
|
||||
<View className="hq-row" style="margin-top:10px">
|
||||
<Text className="hq-muted" style="font-size:11px">{fmtTime(o.createdAt)}</Text>
|
||||
<Button
|
||||
className="hq-btn hq-btn--primary"
|
||||
style="padding:6px 14px;font-size:13px"
|
||||
disabled={busy === o.id}
|
||||
onClick={() => confirmRefund(o.id)}
|
||||
>
|
||||
确认退款
|
||||
</Button>
|
||||
</View>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
@@ -1,35 +0,0 @@
|
||||
.report-bar-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.report-bar-label {
|
||||
width: 64px;
|
||||
font-size: 12px;
|
||||
color: var(--hq-muted);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.report-bar-track {
|
||||
flex: 1;
|
||||
height: 10px;
|
||||
border-radius: 999px;
|
||||
background: var(--hq-line);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.report-bar-fill {
|
||||
height: 100%;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(90deg, var(--hq-amber), var(--hq-red));
|
||||
}
|
||||
|
||||
.report-bar-count {
|
||||
width: 36px;
|
||||
text-align: right;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: var(--hq-red);
|
||||
}
|
||||
@@ -1,76 +0,0 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { View, Text } from '@tarojs/components';
|
||||
import HqHeader from '../../components/HqHeader';
|
||||
import { request } from '../../lib/api';
|
||||
import { useHqSession } from '../../lib/session';
|
||||
import { ORDER_STATUS_LABELS } from '../../lib/constants';
|
||||
import './index.css';
|
||||
|
||||
type Stats = {
|
||||
usersTotal: number;
|
||||
guestUsers: number;
|
||||
verifiedUsers: number;
|
||||
ordersToday: number;
|
||||
storesTotal: number;
|
||||
partnersTotal: number;
|
||||
redeemToday: number;
|
||||
deliveriesTotal: number;
|
||||
mergedUsers: number;
|
||||
ordersByStatus: Array<{ status: string; count: number }>;
|
||||
};
|
||||
|
||||
export default function ReportsPage() {
|
||||
useHqSession();
|
||||
const [stats, setStats] = useState<Stats | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
request<Stats>('/admin/dashboard/stats').then(setStats).catch(() => undefined);
|
||||
}, []);
|
||||
|
||||
const dist = stats?.ordersByStatus ?? [];
|
||||
const max = Math.max(1, ...dist.map((d) => d.count));
|
||||
|
||||
return (
|
||||
<View className="hq-page">
|
||||
<HqHeader title="数据报表" back />
|
||||
|
||||
<Text className="hq-section-title">核心指标</Text>
|
||||
<View className="hq-stat-grid">
|
||||
<View className="hq-stat">
|
||||
<Text className="hq-stat__label">有效用户</Text>
|
||||
<Text className="hq-stat__value">{stats?.usersTotal ?? 0}</Text>
|
||||
<Text className="hq-stat__sub">已验手机 {stats?.verifiedUsers ?? 0}</Text>
|
||||
</View>
|
||||
<View className="hq-stat">
|
||||
<Text className="hq-stat__label">今日下单</Text>
|
||||
<Text className="hq-stat__value">{stats?.ordersToday ?? 0}</Text>
|
||||
<Text className="hq-stat__sub">今日核销 {stats?.redeemToday ?? 0}</Text>
|
||||
</View>
|
||||
<View className="hq-stat">
|
||||
<Text className="hq-stat__label">门店 / 合伙人</Text>
|
||||
<Text className="hq-stat__value">{stats?.storesTotal ?? 0}/{stats?.partnersTotal ?? 0}</Text>
|
||||
<Text className="hq-stat__sub">配送单 {stats?.deliveriesTotal ?? 0}</Text>
|
||||
</View>
|
||||
<View className="hq-stat">
|
||||
<Text className="hq-stat__label">访客未验证</Text>
|
||||
<Text className="hq-stat__value">{stats?.guestUsers ?? 0}</Text>
|
||||
<Text className="hq-stat__sub">已合并 {stats?.mergedUsers ?? 0}</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<Text className="hq-section-title">订单状态分布</Text>
|
||||
<View className="hq-card">
|
||||
{dist.length === 0 && <Text className="hq-muted">暂无数据</Text>}
|
||||
{dist.map((d) => (
|
||||
<View key={d.status} className="report-bar-row">
|
||||
<Text className="report-bar-label">{ORDER_STATUS_LABELS[d.status] || d.status}</Text>
|
||||
<View className="report-bar-track">
|
||||
<View className="report-bar-fill" style={`width:${(d.count / max) * 100}%`} />
|
||||
</View>
|
||||
<Text className="report-bar-count">{d.count}</Text>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
@@ -1,96 +0,0 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { View, Text, Button } from '@tarojs/components';
|
||||
import { useDidShow } from '@tarojs/taro';
|
||||
import HqHeader from '../../components/HqHeader';
|
||||
import HqTabBar from '../../components/HqTabBar';
|
||||
import { request, type Paginated, toast } from '../../lib/api';
|
||||
import { useHqSession } from '../../lib/session';
|
||||
import { fmtMoney, fmtTime } from '../../lib/constants';
|
||||
|
||||
type RedeemRow = {
|
||||
id: string;
|
||||
redeemNo: string;
|
||||
amount: number | string;
|
||||
createdAt: string;
|
||||
store?: { name: string; cityName?: string };
|
||||
user?: { nickname?: string; phone?: string };
|
||||
payout?: unknown;
|
||||
};
|
||||
|
||||
// 门店核销到账比例（V2 手册：门店核销结算 60%）
|
||||
const STORE_PAYOUT_RATE = 0.6;
|
||||
|
||||
export default function SettlementPage() {
|
||||
useHqSession();
|
||||
const [rows, setRows] = useState<RedeemRow[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
function load() {
|
||||
setLoading(true);
|
||||
request<Paginated<RedeemRow>>('/admin/redeem-records?pageSize=50')
|
||||
.then((d) => setRows(d.items))
|
||||
.catch(() => setRows([]))
|
||||
.finally(() => setLoading(false));
|
||||
}
|
||||
|
||||
useEffect(load, []);
|
||||
useDidShow(load);
|
||||
|
||||
const totalRedeem = rows.reduce((s, r) => s + Number(r.amount || 0), 0);
|
||||
const totalPayout = totalRedeem * STORE_PAYOUT_RATE;
|
||||
const pendingCount = rows.filter((r) => !r.payout).length;
|
||||
|
||||
return (
|
||||
<View className="hq-page hq-page--tab">
|
||||
<HqHeader title="结算中心" />
|
||||
|
||||
<View className="hq-stat-grid">
|
||||
<View className="hq-stat">
|
||||
<Text className="hq-stat__label">核销总额</Text>
|
||||
<Text className="hq-stat__value">¥{fmtMoney(totalRedeem)}</Text>
|
||||
<Text className="hq-stat__sub">近 {rows.length} 笔核销</Text>
|
||||
</View>
|
||||
<View className="hq-stat">
|
||||
<Text className="hq-stat__label">门店应结(60%)</Text>
|
||||
<Text className="hq-stat__value">¥{fmtMoney(totalPayout)}</Text>
|
||||
<Text className="hq-stat__sub">待打款 {pendingCount} 笔</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style="margin:12px 16px">
|
||||
<Button
|
||||
className="hq-btn hq-btn--primary hq-btn--block"
|
||||
onClick={() => toast('preV1 阶段批量打款为演示，暂不实际出款')}
|
||||
>
|
||||
批量打款（演示）
|
||||
</Button>
|
||||
</View>
|
||||
|
||||
<Text className="hq-section-title">门店核销结算明细</Text>
|
||||
|
||||
{loading && <View className="hq-empty">加载中…</View>}
|
||||
{!loading && rows.length === 0 && <View className="hq-empty">暂无核销记录</View>}
|
||||
|
||||
{rows.map((r) => (
|
||||
<View key={r.id} className="hq-card" style="margin-top:8px;margin-bottom:0">
|
||||
<View className="hq-row">
|
||||
<Text style="font-size:14px;font-weight:600">{r.store?.name || '门店'}</Text>
|
||||
<Text className={`hq-badge ${r.payout ? 'hq-badge--ok' : 'hq-badge--warn'}`}>
|
||||
{r.payout ? '已结算' : '待结算'}
|
||||
</Text>
|
||||
</View>
|
||||
<Text className="hq-muted" style="display:block;margin-top:4px;font-size:12px">
|
||||
{r.store?.cityName || ''} · {r.redeemNo}
|
||||
</Text>
|
||||
<View className="hq-row" style="margin-top:8px">
|
||||
<Text className="hq-muted" style="font-size:12px">{fmtTime(r.createdAt)}</Text>
|
||||
<Text style="font-size:15px;font-weight:700;color:var(--hq-red)">
|
||||
核销 ¥{fmtMoney(r.amount)} · 应结 ¥{fmtMoney(Number(r.amount || 0) * STORE_PAYOUT_RATE)}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
))}
|
||||
<HqTabBar selected={2} />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
@@ -1,122 +0,0 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { View, Text, Image, Button } from '@tarojs/components';
|
||||
import Taro, { useRouter } from '@tarojs/taro';
|
||||
import HqHeader from '../../components/HqHeader';
|
||||
import { request, toast } from '../../lib/api';
|
||||
import { STORE_STATUS_LABELS, badgeClass, fmtTime } from '../../lib/constants';
|
||||
|
||||
type StoreDetail = {
|
||||
id: string;
|
||||
name: string;
|
||||
phone: string;
|
||||
status: string;
|
||||
province?: string;
|
||||
cityName?: string;
|
||||
district?: string;
|
||||
address?: string;
|
||||
intro?: string | null;
|
||||
coverUrl?: string | null;
|
||||
redeemCount?: number;
|
||||
createdAt: string;
|
||||
partner?: { companyName: string };
|
||||
account?: { name: string; phone: string };
|
||||
};
|
||||
|
||||
const ACTIONS: Array<{ status: string; label: string }> = [
|
||||
{ status: 'OPEN', label: '通过 / 营业' },
|
||||
{ status: 'PAUSED', label: '暂停营业' },
|
||||
{ status: 'CLOSED', label: '关闭门店' },
|
||||
];
|
||||
|
||||
export default function StoreDetailPage() {
|
||||
const router = useRouter();
|
||||
const id = router.params.id;
|
||||
const [store, setStore] = useState<StoreDetail | null>(null);
|
||||
const [saving, setSaving] = useState(false);
|
||||
|
||||
function load() {
|
||||
if (!id) return;
|
||||
request<StoreDetail>(`/admin/stores/${id}`).then(setStore).catch(() => undefined);
|
||||
}
|
||||
|
||||
useEffect(load, [id]);
|
||||
|
||||
async function changeStatus(status: string) {
|
||||
if (!id || saving) return;
|
||||
setSaving(true);
|
||||
try {
|
||||
await request(`/admin/stores/${id}/status`, { method: 'PUT', data: { status } });
|
||||
toast('状态已更新', 'success');
|
||||
setStore((s) => (s ? { ...s, status } : s));
|
||||
} catch (e) {
|
||||
toast(e instanceof Error ? e.message : '更新失败');
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<View className="hq-page" style="padding-bottom:calc(96px + var(--hq-safe-bottom))">
|
||||
<HqHeader title="门店详情" back />
|
||||
|
||||
{!store && <View className="hq-empty">加载中…</View>}
|
||||
|
||||
{store && (
|
||||
<>
|
||||
{store.coverUrl ? (
|
||||
<Image className="store-cover" src={store.coverUrl} mode="aspectFill" />
|
||||
) : null}
|
||||
|
||||
<View className="hq-card">
|
||||
<View className="hq-row">
|
||||
<Text style="font-size:18px;font-weight:700">{store.name}</Text>
|
||||
<Text className={`hq-badge ${badgeClass(store.status)}`}>
|
||||
{STORE_STATUS_LABELS[store.status] || store.status}
|
||||
</Text>
|
||||
</View>
|
||||
<Text className="hq-muted" style="display:block;margin-top:8px;font-size:13px">
|
||||
{store.province || ''}{store.cityName || ''}{store.district || ''}{store.address || ''}
|
||||
</Text>
|
||||
<Text className="hq-muted" style="display:block;margin-top:4px;font-size:13px">联系电话：{store.phone}</Text>
|
||||
{store.intro ? (
|
||||
<Text style="display:block;margin-top:8px;font-size:13px;line-height:1.6">{store.intro}</Text>
|
||||
) : null}
|
||||
</View>
|
||||
|
||||
<View className="hq-card">
|
||||
<View className="hq-row" style="margin-bottom:8px">
|
||||
<Text className="hq-muted" style="font-size:13px">开城合伙人</Text>
|
||||
<Text style="font-size:14px">{store.partner?.companyName || '—'}</Text>
|
||||
</View>
|
||||
<View className="hq-row" style="margin-bottom:8px">
|
||||
<Text className="hq-muted" style="font-size:13px">店长</Text>
|
||||
<Text style="font-size:14px">{store.account?.name || '—'} {store.account?.phone || ''}</Text>
|
||||
</View>
|
||||
<View className="hq-row" style="margin-bottom:8px">
|
||||
<Text className="hq-muted" style="font-size:13px">累计核销</Text>
|
||||
<Text style="font-size:14px">{store.redeemCount ?? 0} 笔</Text>
|
||||
</View>
|
||||
<View className="hq-row">
|
||||
<Text className="hq-muted" style="font-size:13px">创建时间</Text>
|
||||
<Text style="font-size:14px">{fmtTime(store.createdAt)}</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<Text className="hq-section-title">审核操作</Text>
|
||||
<View className="hq-card" style="display:flex;flex-direction:column;gap:10px">
|
||||
{ACTIONS.map((a) => (
|
||||
<Button
|
||||
key={a.status}
|
||||
className={`hq-btn hq-btn--block ${a.status === 'OPEN' ? 'hq-btn--primary' : 'hq-btn--outline'}`}
|
||||
disabled={saving || store.status === a.status}
|
||||
onClick={() => changeStatus(a.status)}
|
||||
>
|
||||
{a.label}
|
||||
</Button>
|
||||
))}
|
||||
</View>
|
||||
</>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
@@ -1,99 +0,0 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { View, Text, ScrollView } from '@tarojs/components';
|
||||
import Taro, { useDidShow } from '@tarojs/taro';
|
||||
import HqHeader from '../../components/HqHeader';
|
||||
import HqTabBar from '../../components/HqTabBar';
|
||||
import { request, type Paginated } from '../../lib/api';
|
||||
import { useHqSession } from '../../lib/session';
|
||||
import { STORE_STATUS_LABELS, badgeClass, fmtTime } from '../../lib/constants';
|
||||
|
||||
type StoreRow = {
|
||||
id: string;
|
||||
name: string;
|
||||
phone: string;
|
||||
status: string;
|
||||
cityName?: string;
|
||||
createdAt: string;
|
||||
partner?: { companyName: string };
|
||||
};
|
||||
|
||||
const TABS = [
|
||||
{ key: '', label: '全部' },
|
||||
{ key: 'OPEN', label: '营业中' },
|
||||
{ key: 'PAUSED', label: '暂停' },
|
||||
{ key: 'CLOSED', label: '已关闭' },
|
||||
];
|
||||
|
||||
export default function StoresPage() {
|
||||
useHqSession();
|
||||
const [status, setStatus] = useState('');
|
||||
const [rows, setRows] = useState<StoreRow[]>([]);
|
||||
const [total, setTotal] = useState(0);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
function load() {
|
||||
setLoading(true);
|
||||
const qs = new URLSearchParams({ pageSize: '50' });
|
||||
if (status) qs.set('status', status);
|
||||
request<Paginated<StoreRow>>(`/admin/stores?${qs.toString()}`)
|
||||
.then((d) => {
|
||||
setRows(d.items);
|
||||
setTotal(d.total);
|
||||
})
|
||||
.catch(() => setRows([]))
|
||||
.finally(() => setLoading(false));
|
||||
}
|
||||
|
||||
useEffect(load, [status]);
|
||||
useDidShow(load);
|
||||
|
||||
return (
|
||||
<View className="hq-page hq-page--tab">
|
||||
<HqHeader title="门店审核" />
|
||||
|
||||
<ScrollView scrollX enhanced showScrollbar={false} className="hq-tabs">
|
||||
{TABS.map((t) => (
|
||||
<View
|
||||
key={t.key}
|
||||
className={`hq-tab${status === t.key ? ' hq-tab--active' : ''}`}
|
||||
onClick={() => setStatus(t.key)}
|
||||
>
|
||||
<Text>{t.label}</Text>
|
||||
</View>
|
||||
))}
|
||||
</ScrollView>
|
||||
|
||||
<Text className="hq-section-title">
|
||||
<Text>门店列表</Text>
|
||||
<Text className="hq-muted" style="font-size:12px;font-weight:400">共 {total} 家</Text>
|
||||
</Text>
|
||||
|
||||
{loading && <View className="hq-empty">加载中…</View>}
|
||||
{!loading && rows.length === 0 && <View className="hq-empty">暂无门店</View>}
|
||||
|
||||
{rows.map((s) => (
|
||||
<View
|
||||
key={s.id}
|
||||
className="hq-list-item"
|
||||
onClick={() => Taro.navigateTo({ url: `/pages/stores/detail?id=${s.id}` })}
|
||||
>
|
||||
<View className="hq-avatar">
|
||||
<Text className="material-symbols-outlined">storefront</Text>
|
||||
</View>
|
||||
<View style="flex:1;min-width:0">
|
||||
<View className="hq-row">
|
||||
<Text style="font-weight:600;font-size:15px">{s.name}</Text>
|
||||
<Text className={`hq-badge ${badgeClass(s.status)}`}>{STORE_STATUS_LABELS[s.status] || s.status}</Text>
|
||||
</View>
|
||||
<Text className="hq-muted" style="font-size:12px;display:block;margin-top:4px">
|
||||
{s.partner?.companyName || '—'} · {s.cityName || ''} · {s.phone}
|
||||
</Text>
|
||||
<Text className="hq-muted" style="font-size:11px">{fmtTime(s.createdAt)}</Text>
|
||||
</View>
|
||||
<Text className="material-symbols-outlined hq-muted">chevron_right</Text>
|
||||
</View>
|
||||
))}
|
||||
<HqTabBar selected={1} />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
@@ -1,115 +0,0 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { View, Text, ScrollView, Button } from '@tarojs/components';
|
||||
import { useDidShow } from '@tarojs/taro';
|
||||
import HqHeader from '../../components/HqHeader';
|
||||
import HqTabBar from '../../components/HqTabBar';
|
||||
import { request, type Paginated, toast } from '../../lib/api';
|
||||
import { useHqSession } from '../../lib/session';
|
||||
import { badgeClass, fmtTime } from '../../lib/constants';
|
||||
|
||||
type TicketRow = {
|
||||
id: string;
|
||||
ticketNo: string;
|
||||
ticketType?: string;
|
||||
refType?: string;
|
||||
status: string;
|
||||
remark?: string;
|
||||
createdAt: string;
|
||||
};
|
||||
|
||||
const STATUS_LABELS: Record<string, string> = {
|
||||
PENDING: '待处理',
|
||||
PROCESSING: '处理中',
|
||||
RESOLVED: '已解决',
|
||||
COMPLETED: '已完成',
|
||||
CLOSED: '已关闭',
|
||||
};
|
||||
|
||||
const TABS = [
|
||||
{ key: '', label: '全部' },
|
||||
{ key: 'PENDING', label: '待处理' },
|
||||
{ key: 'PROCESSING', label: '处理中' },
|
||||
{ key: 'COMPLETED', label: '已完成' },
|
||||
];
|
||||
|
||||
export default function TicketsPage() {
|
||||
useHqSession();
|
||||
const [status, setStatus] = useState('');
|
||||
const [rows, setRows] = useState<TicketRow[]>([]);
|
||||
const [total, setTotal] = useState(0);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
function load() {
|
||||
setLoading(true);
|
||||
const qs = new URLSearchParams({ pageSize: '50' });
|
||||
if (status) qs.set('status', status);
|
||||
request<Paginated<TicketRow>>(`/common/tickets?${qs.toString()}`)
|
||||
.then((d) => {
|
||||
setRows(d.items);
|
||||
setTotal(d.total);
|
||||
})
|
||||
.catch(() => setRows([]))
|
||||
.finally(() => setLoading(false));
|
||||
}
|
||||
|
||||
useEffect(load, [status]);
|
||||
useDidShow(load);
|
||||
|
||||
async function markProcessing(id: string) {
|
||||
try {
|
||||
await request(`/common/tickets/${id}/status`, { method: 'PUT', data: { status: 'PROCESSING' } });
|
||||
toast('已受理', 'success');
|
||||
load();
|
||||
} catch (e) {
|
||||
toast(e instanceof Error ? e.message : '操作失败');
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<View className="hq-page hq-page--tab">
|
||||
<HqHeader title="客服中心" />
|
||||
|
||||
<ScrollView scrollX enhanced showScrollbar={false} className="hq-tabs">
|
||||
{TABS.map((t) => (
|
||||
<View
|
||||
key={t.key}
|
||||
className={`hq-tab${status === t.key ? ' hq-tab--active' : ''}`}
|
||||
onClick={() => setStatus(t.key)}
|
||||
>
|
||||
<Text>{t.label}</Text>
|
||||
</View>
|
||||
))}
|
||||
</ScrollView>
|
||||
|
||||
<Text className="hq-section-title">
|
||||
<Text>工单列表</Text>
|
||||
<Text className="hq-muted" style="font-size:12px;font-weight:400">共 {total} 单</Text>
|
||||
</Text>
|
||||
|
||||
{loading && <View className="hq-empty">加载中…</View>}
|
||||
{!loading && rows.length === 0 && <View className="hq-empty">暂无工单</View>}
|
||||
|
||||
{rows.map((t) => (
|
||||
<View key={t.id} className="hq-card" style="margin-top:8px;margin-bottom:0">
|
||||
<View className="hq-row">
|
||||
<Text style="font-size:13px;color:var(--hq-muted)">{t.ticketNo}</Text>
|
||||
<Text className={`hq-badge ${badgeClass(t.status)}`}>{STATUS_LABELS[t.status] || t.status}</Text>
|
||||
</View>
|
||||
<Text style="display:block;margin-top:8px;font-size:14px">
|
||||
{t.ticketType || '工单'} · {t.refType || ''}
|
||||
</Text>
|
||||
{t.remark ? <Text className="hq-muted" style="display:block;margin-top:4px;font-size:13px">{t.remark}</Text> : null}
|
||||
<View className="hq-row" style="margin-top:10px">
|
||||
<Text className="hq-muted" style="font-size:11px">{fmtTime(t.createdAt)}</Text>
|
||||
{t.status === 'PENDING' && (
|
||||
<Button className="hq-btn hq-btn--ghost" style="padding:6px 14px;font-size:13px" onClick={() => markProcessing(t.id)}>
|
||||
受理
|
||||
</Button>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
))}
|
||||
<HqTabBar selected={3} />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
@@ -1,3 +0,0 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '用户协议',
|
||||
});
|
||||
@@ -1,32 +0,0 @@
|
||||
import { View, Text, ScrollView } from '@tarojs/components';
|
||||
import Taro from '@tarojs/taro';
|
||||
import { getLegalDocument } from '@dukang/shared-types';
|
||||
import './legal.css';
|
||||
|
||||
export default function UserAgreementPage() {
|
||||
const doc = getLegalDocument('user-agreement');
|
||||
return (
|
||||
<View className="hq-legal-page">
|
||||
<View className="hq-legal-header">
|
||||
<Text className="hq-legal-back" onClick={() => Taro.navigateBack()}>
|
||||
‹
|
||||
</Text>
|
||||
<Text className="hq-legal-title">{doc.title}</Text>
|
||||
</View>
|
||||
<ScrollView scrollY className="hq-legal-body">
|
||||
<Text className="hq-legal-updated">更新日期：{doc.updatedAt}</Text>
|
||||
<Text className="hq-legal-intro">{doc.intro}</Text>
|
||||
{doc.sections.map((section) => (
|
||||
<View key={section.heading} className="hq-legal-section">
|
||||
<Text className="hq-legal-heading">{section.heading}</Text>
|
||||
{section.paragraphs.map((p, i) => (
|
||||
<Text key={`${section.heading}-${i}`} className="hq-legal-paragraph">
|
||||
{p}
|
||||
</Text>
|
||||
))}
|
||||
</View>
|
||||
))}
|
||||
</ScrollView>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
@@ -1,68 +0,0 @@
|
||||
.hq-legal-page {
|
||||
min-height: 100vh;
|
||||
background: #faf9f7;
|
||||
}
|
||||
|
||||
.hq-legal-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
height: 52px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #faf9f7;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.hq-legal-back {
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
font-size: 28px;
|
||||
line-height: 1;
|
||||
padding: 4px 8px;
|
||||
}
|
||||
|
||||
.hq-legal-title {
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.hq-legal-body {
|
||||
height: calc(100vh - 52px);
|
||||
padding: 16px 20px 40px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.hq-legal-updated {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
color: #8d706e;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.hq-legal-intro {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
line-height: 1.7;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.hq-legal-section {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.hq-legal-heading {
|
||||
display: block;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.hq-legal-paragraph {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
line-height: 1.7;
|
||||
color: #5c504c;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
@@ -1,27 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2017",
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "node",
|
||||
"removeComments": false,
|
||||
"preserveConstEnums": true,
|
||||
"moduleDetection": "force",
|
||||
"useDefineForClassFields": true,
|
||||
"outDir": "lib",
|
||||
"sourceMap": true,
|
||||
"baseUrl": ".",
|
||||
"rootDir": ".",
|
||||
"jsx": "react-jsx",
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"esModuleInterop": true,
|
||||
"skipLibCheck": true,
|
||||
"strict": true,
|
||||
"resolveJsonModule": true,
|
||||
"typeRoots": ["node_modules/@types"],
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
}
|
||||
},
|
||||
"include": ["./src", "./types", "./config"],
|
||||
"compileOnSave": false
|
||||
}
|
||||
Vendored
-21
@@ -1,21 +0,0 @@
|
||||
/// <reference types="@tarojs/taro" />
|
||||
|
||||
declare module '*.png';
|
||||
declare module '*.gif';
|
||||
declare module '*.jpg';
|
||||
declare module '*.jpeg';
|
||||
declare module '*.svg';
|
||||
declare module '*.css';
|
||||
declare module '*.less';
|
||||
declare module '*.scss';
|
||||
|
||||
declare const defineAppConfig: (config: Record<string, unknown>) => Record<string, unknown>;
|
||||
|
||||
declare const TARO_APP_API_ORIGIN: string;
|
||||
|
||||
declare namespace NodeJS {
|
||||
interface ProcessEnv {
|
||||
TARO_ENV: 'weapp' | 'h5' | string;
|
||||
VITE_API_TARGET?: string;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user