jacy/dukang
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v3.5.4 规格主图、门店使用规则与收银台 logo

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
jacy
2026-08-21 17:36:53 +08:00
parent 62e61a9e63
commit 4d434c9c67
16 changed files with 276 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/admin-web/src/components/ProductSpecsEditor.tsx
+163 -4
View File
@@ -1,10 +1,11 @@
import { useMemo, useState } from 'react';
import {
Button, Input, InputNumber, Radio, Select, Space, Switch, Table, Typography, message,
Button, Image, Input, InputNumber, Modal, Radio, Select, Space, Switch, Table, Typography, message,
} from 'antd';
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
import { EditOutlined, MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
import { request } from '../lib/api';
import { PRODUCT_STATUS_LABELS } from '../lib/constants';
import OssUpload from './OssUpload';
type SpecValue = { id?: string; name: string; sortOrder?: number };
type SpecAttr = { id?: string; name: string; sortOrder?: number; values: SpecValue[] };
@@ -24,6 +25,7 @@ type SkuRow = {
isDefault: boolean;
sortOrder?: number;
specText?: string;
imageUrl?: string | null;
};
function cartesian(attrs: SpecAttr[]): string[][] {
@@ -73,6 +75,7 @@ export default function ProductSpecsEditor({ productId, initialAttrs, initialSku
saleUnit: s.saleUnit === 'BOX' ? 'BOX' : 'BOTTLE',
bottlesPerUnit: s.bottlesPerUnit || (s.saleUnit === 'BOX' ? 6 : 1),
isDefault: !!s.isDefault,
imageUrl: s.imageUrl ?? '',
}))
: [
{
@@ -86,10 +89,12 @@ export default function ProductSpecsEditor({ productId, initialAttrs, initialSku
saleUnit: 'BOTTLE',
bottlesPerUnit: 1,
isDefault: true,
imageUrl: '',
},
],
);
const [saving, setSaving] = useState(false);
const [editIndex, setEditIndex] = useState<number | null>(null);
const combos = useMemo(() => cartesian(attrs.filter((a) => a.name.trim() && a.values.some((v) => v.name.trim()))), [attrs]);
@@ -111,12 +116,21 @@ export default function ProductSpecsEditor({ productId, initialAttrs, initialSku
bottlesPerUnit: 1,
isDefault: i === 0,
sortOrder: i,
imageUrl: '',
};
});
if (next.length && !next.some((s) => s.isDefault)) next[0].isDefault = true;
setSkus(next.length ? next : skus);
}
function patchSku(index: number, patch: Partial<SkuRow>) {
setSkus((prev) => {
const next = [...prev];
next[index] = { ...next[index], ...patch };
return next;
});
}
async function handleSave() {
setSaving(true);
try {
@@ -168,6 +182,7 @@ export default function ProductSpecsEditor({ productId, initialAttrs, initialSku
bottlesPerUnit: s.saleUnit === 'BOX' ? s.bottlesPerUnit || 6 : 1,
isDefault: !!s.isDefault,
sortOrder: i,
imageUrl: s.imageUrl?.trim() || null,
}));
const barcodes = payloadSkus.map((row) => row.barcode69);
@@ -189,11 +204,13 @@ export default function ProductSpecsEditor({ productId, initialAttrs, initialSku
}
}
const editing = editIndex != null ? skus[editIndex] : null;
return (
<div>
<Typography.Paragraph type="secondary">
SKU 码由系统自动生成（DK 开头），无需填写。每个规格必须填写<strong>互不相同</strong>的 69 码。
先配置销售规格轴（如「包装」），再生成 SKU 矩阵；未配置规格时仅保留默认一行。
SKU 码由系统自动生成（DK 开头），无需填写。每个规格必须填写<strong>互不相同</strong>的 69 码，并可单独上传主图。
点「填写」在弹窗中编辑。先配置销售规格轴（如「包装」），再生成 SKU 矩阵。
</Typography.Paragraph>
<Typography.Title level={5}>规格轴</Typography.Title>
@@ -446,12 +463,154 @@ export default function ProductSpecsEditor({ productId, initialAttrs, initialSku
/>
),
},
{
title: '主图',
width: 72,
render: (_, row) =>
row.imageUrl ? (
<Image src={row.imageUrl} width={40} height={40} style={{ objectFit: 'cover', borderRadius: 4 }} />
) : (
<Typography.Text type="secondary">无</Typography.Text>
),
},
{
title: '编辑',
width: 80,
fixed: 'right',
render: (_, row, index) => (
<Button type="link" size="small" icon={<EditOutlined />} onClick={() => setEditIndex(index)}>
填写
</Button>
),
},
]}
/>
<Button type="primary" loading={saving} style={{ marginTop: 16 }} onClick={() => void handleSave()}>
保存规格与 SKU
</Button>
<Modal
title={`编辑规格${editing?.specText ? ` · ${editing.specText}` : editing?.skuCode ? ` · ${editing.skuCode}` : ''}`}
open={editIndex != null}
onCancel={() => setEditIndex(null)}
onOk={() => setEditIndex(null)}
okText="完成"
width={560}
destroyOnClose
>
{editing && editIndex != null ? (
<Space direction="vertical" size={14} style={{ width: '100%' }}>
<div>
<Typography.Text type="secondary">SKU</Typography.Text>
<div>{editing.skuCode || '保存后自动生成'}</div>
</div>
<div>
<Typography.Text>69 码 <Typography.Text type="danger">*</Typography.Text></Typography.Text>
<Input
placeholder="本规格独立 69 码"
value={editing.barcode69}
onChange={(e) => patchSku(editIndex, { barcode69: e.target.value })}
/>
</div>
<div>
<Typography.Text>主图</Typography.Text>
<OssUpload
bizType="COVER"
value={editing.imageUrl || ''}
onChange={(url) => patchSku(editIndex, { imageUrl: url })}
/>
</div>
<Space>
<div>
<Typography.Text>售价</Typography.Text>
<InputNumber
min={0}
style={{ width: 140 }}
value={editing.price}
onChange={(v) => patchSku(editIndex, { price: Number(v) || 0 })}
/>
</div>
<div>
<Typography.Text>权益</Typography.Text>
<InputNumber
min={0}
style={{ width: 140 }}
value={editing.benefitAmount}
onChange={(v) => patchSku(editIndex, { benefitAmount: v == null ? undefined : Number(v) })}
/>
</div>
</Space>
<div>
<Typography.Text>状态</Typography.Text>
<Select
style={{ width: '100%' }}
value={editing.status}
options={Object.entries(PRODUCT_STATUS_LABELS).map(([value, label]) => ({ value, label }))}
onChange={(status) => patchSku(editIndex, { status })}
/>
</div>
<Space>
<Select
style={{ width: 100 }}
value={editing.saleUnit}
options={[
{ value: 'BOTTLE', label: '瓶' },
{ value: 'BOX', label: '箱' },
]}
onChange={(saleUnit) =>
patchSku(editIndex, {
saleUnit,
bottlesPerUnit: saleUnit === 'BOX' ? editing.bottlesPerUnit || 6 : 1,
})
}
/>
{editing.saleUnit === 'BOX' ? (
<InputNumber
min={1}
value={editing.bottlesPerUnit}
onChange={(v) => patchSku(editIndex, { bottlesPerUnit: Number(v) || 6 })}
/>
) : null}
</Space>
<Space>
<Switch
checkedChildren="线上"
unCheckedChildren="线上"
checked={editing.allowOnlinePurchase}
onChange={(checked) =>
patchSku(editIndex, {
allowOnlinePurchase: checked,
allowCrossCityDelivery: checked ? editing.allowCrossCityDelivery : false,
})
}
/>
<Switch
checkedChildren="跨城"
unCheckedChildren="跨城"
disabled={!editing.allowOnlinePurchase}
checked={editing.allowCrossCityDelivery}
onChange={(checked) => patchSku(editIndex, { allowCrossCityDelivery: checked })}
/>
<Switch
checkedChildren="现场"
unCheckedChildren="现场"
checked={editing.allowOnSitePickup}
onChange={(checked) => patchSku(editIndex, { allowOnSitePickup: checked })}
/>
<Switch
checkedChildren="默认"
unCheckedChildren="默认"
checked={editing.isDefault}
onChange={(checked) => {
if (!checked) return;
setSkus((prev) => prev.map((s, i) => ({ ...s, isDefault: i === editIndex })));
}}
/>
</Space>
</Space>
) : null}
</Modal>
</div>
);
}
apps/admin-web/src/pages/ProductsPage.tsx
+1 -1
View File
@@ -408,7 +408,7 @@ export default function ProductsPage() {
</Form>
<Table rowKey="id" className="admin-table-nowrap" loading={loading} columns={columns} dataSource={data?.items ?? []} scroll={{ x: 1320 }}
pagination={{ current: page, pageSize, total: data?.total ?? 0, showSizeChanger: true, onChange: (p, ps) => { setPage(p); setPageSize(ps); } }} />
<Drawer title="编辑商品" width={720} open={drawerOpen} onClose={() => setDrawerOpen(false)}
<Drawer title="编辑商品" width={1100} open={drawerOpen} onClose={() => setDrawerOpen(false)}
extra={detail && (
<Button type="primary" onClick={async () => {
const v = await editForm.validateFields();
apps/mini-user/src/assets/logo2.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 69 KiB

apps/mini-user/src/pages/pay/index.tsx
+2 -7
View File
@@ -16,10 +16,10 @@ import {
saveWechatLoginResult,
} from '../../lib/pay-wechat';
import { applyWechatLoginResult } from '../../lib/wechat-auth';
import { getBrandAssetsSync, loadBrandAssets } from '../../lib/brand-assets';
import { isWechatEnv } from '../../lib/weixin';
import { goLogin } from '../../lib/auth-nav';
import { request, toast } from '../../lib/api';
import payLogo from '../../assets/logo2.png';
export default function PayPage() {
const router = useRouter();
@@ -31,7 +31,6 @@ export default function PayPage() {
const [orderNo, setOrderNo] = useState('');
const [payAmount, setPayAmount] = useState('—');
const [deliveryType, setDeliveryType] = useState('');
const [brandMarkUrl, setBrandMarkUrl] = useState(() => getBrandAssetsSync().brandLogoMarkUrl);
const returnPath = orderId
? `/pages/pay/index?orderId=${orderId}`
@@ -51,10 +50,6 @@ export default function PayPage() {
void refreshPayReadiness();
});
useEffect(() => {
void loadBrandAssets().then((brand) => setBrandMarkUrl(brand.brandLogoMarkUrl));
}, []);
useEffect(() => {
if (!orderId) return;
if (process.env.TARO_ENV === 'weapp') {
@@ -178,7 +173,7 @@ export default function PayPage() {
<View className="sub-page-body">
<View className="pay-status">
<View className="pay-status-icon">
<Image className="pay-status-brand" src={brandMarkUrl} mode="aspectFit" />
<Image className="pay-status-brand" src={payLogo} mode="aspectFit" />
</View>
<Text className="pay-status-title">
{needsWechatAuth ? '需完成微信授权' : '待支付'}
apps/mini-user/src/pages/product-detail/index.tsx
+8 -3
View File
@@ -165,6 +165,12 @@ export default function ProductDetailPage() {
allowOnSitePickup: activeSku.allowOnSitePickup,
}
: product;
const carouselImages = (() => {
const base = getProductCarouselImages(product);
const skuImg = activeSku?.imageUrl?.trim();
if (!skuImg) return base;
return [skuImg, ...base.filter((url) => url !== skuImg)];
})();
const sharePayload = useMemo(
() =>
@@ -172,9 +178,9 @@ export default function ProductDetailPage() {
path: `/pages/product-detail/index?id=${productId}`,
dynamicTitle: product?.name,
dynamicDesc: product?.subtitle,
dynamicImageUrl: product ? getProductMainImage(product) : undefined,
dynamicImageUrl: (activeSku?.imageUrl?.trim() || (product ? getProductMainImage(product) : undefined)),
}),
[product, productId],
[product, productId, activeSku],
);
useShareAppMessage(() => toWeappShareMessage(sharePayload));
@@ -249,7 +255,6 @@ export default function ProductDetailPage() {
const allowOnline = canBuyOnline(fulfillment ?? {});
const allowOnSite = canPickupOnSite(fulfillment ?? {});
const carouselImages = getProductCarouselImages(product);
const detailImages = getProductDetailImages(product);
const detail = product.detailContent ?? {};
const features = detail.features ?? [];
apps/mini-user/src/pages/store-detail/index.tsx
+9 -7
View File
@@ -1,5 +1,5 @@
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { View, Text, Image } from '@tarojs/components';
import { View, Text, Image, ScrollView } from '@tarojs/components';
import '../../styles/store-detail.css';
import Taro, {
useDidShow,
@@ -444,17 +444,19 @@ export default function StoreDetailPage() {
</View>
) : null}
{intro ? (
{benefitRule ? (
<View className="store-detail-section">
<Text className="store-detail-section-title">门店详情</Text>
<Text className="store-detail-intro">{intro}</Text>
<Text className="store-detail-section-title store-detail-section-title--rule">使用规则</Text>
<Text className="store-detail-intro">{benefitRule}</Text>
</View>
) : null}
{benefitRule ? (
{intro ? (
<View className="store-detail-section">
<Text className="store-detail-section-title">好客权益使用规则</Text>
<Text className="store-detail-intro">{benefitRule}</Text>
<Text className="store-detail-section-title">门店详情</Text>
<ScrollView className="store-detail-intro-scroll" scrollY showScrollbar>
<Text className="store-detail-intro">{intro}</Text>
</ScrollView>
</View>
) : null}
apps/mini-user/src/styles/order.css
+5 -7
View File
@@ -488,12 +488,10 @@
}
.pay-status-icon {
width: 72px;
height: 72px;
width: 88px;
height: 88px;
border-radius: 50%;
background: rgba(166, 29, 36, 0.08);
color: var(--color-heritage-red);
font-size: 36px;
background: #f7f4ee;
display: flex;
align-items: center;
justify-content: center;
@@ -502,8 +500,8 @@
}
.pay-status-brand {
width: 44px;
height: 44px;
width: 72px;
height: 72px;
}
.pay-status-title {
apps/mini-user/src/styles/product-detail.css
+2 -1
View File
@@ -130,6 +130,7 @@
.product-detail-promo {
position: relative;
margin-top: 8px;
padding: 16px;
border-radius: var(--radius-lg);
background: linear-gradient(135deg, #fff9e6 0%, #fff0c2 100%);
@@ -377,7 +378,7 @@
}
.product-detail-specs {
margin: 12px 0 4px;
margin: 16px 0 28px;
display: flex;
flex-direction: column;
gap: 12px;
apps/mini-user/src/styles/store-detail.css
+11
View File
@@ -211,6 +211,17 @@
color: var(--color-on-surface);
}
.store-detail-section-title--rule {
color: var(--color-heritage-red, #a61d24);
}
.store-detail-intro-scroll {
max-height: 168px;
height: 168px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.store-detail-env-grid {
display: flex;
flex-direction: column;