Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 767585cafa | |||
| b74bfcbf64 |
@@ -1,7 +1,7 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Button, Card, Space, Spin, Switch, Tag, Typography, Upload, message } from 'antd';
|
||||
import { Button, Card, InputNumber, Space, Spin, Switch, Tag, Typography, Upload, message } from 'antd';
|
||||
import { DeleteOutlined, UploadOutlined } from '@ant-design/icons';
|
||||
import { api, errMsg } from '@/lib/api';
|
||||
import { canDo } from '@/lib/auth';
|
||||
@@ -9,55 +9,58 @@ import { mediaUrl } from '@/lib/media';
|
||||
import type { GuideVideoConfig as GuideCfg } from '@/lib/types';
|
||||
|
||||
const { Text } = Typography;
|
||||
|
||||
/** 后端 media.save_guide_video 只认 MP4 魔数;这里先在浏览器挡一道,省得白传 100MB。 */
|
||||
const MAX_BYTES = 100 * 1024 * 1024;
|
||||
type Scene = 'coupon' | 'comparison';
|
||||
|
||||
/**
|
||||
* 领券等候浮层的「新手引导视频」配置。
|
||||
*
|
||||
* 用户点首页「一键自动领取」→ 出等候浮层,浮层下方那块位置**前 3 次**放这支引导视频
|
||||
* (而不是广告),每次固定发 120 金币;播完若浮层还开着,自动接着放广告(原逻辑)。
|
||||
* 「系统配置 → 领券引导视频」tab 的一个区块。
|
||||
*
|
||||
* 后台只管两件事:**开关** 和 **换片**。次数(3)/ 金币(120)走服务端默认值,产品已拍板不再
|
||||
* 开放配置,所以这里不渲染输入框、PATCH 也不带这两个字段(后端仍保留字段与默认值)。
|
||||
*/
|
||||
export default function GuideVideoConfig() {
|
||||
const META: Record<Scene, { title: string; action: string }> = {
|
||||
coupon: { title: '一键自动领取引导视频', action: '一键自动领取' },
|
||||
comparison: { title: '开始比价引导视频', action: '开始比价' },
|
||||
};
|
||||
|
||||
function SceneConfig({ scene }: { scene: Scene }) {
|
||||
const meta = META[scene];
|
||||
const [cfg, setCfg] = useState<GuideCfg | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [uploading, setUploading] = useState(false);
|
||||
|
||||
// 本地编辑态,保存时一次性 PATCH
|
||||
const [enabled, setEnabled] = useState(true);
|
||||
|
||||
const [maxPlays, setMaxPlays] = useState(3);
|
||||
const [rewardCoin, setRewardCoin] = useState(100);
|
||||
const canEdit = canDo(['operator']);
|
||||
|
||||
const sync = (c: GuideCfg) => {
|
||||
setCfg(c);
|
||||
setEnabled(c.enabled);
|
||||
const sync = (value: GuideCfg) => {
|
||||
setCfg(value);
|
||||
setEnabled(value.enabled);
|
||||
setMaxPlays(value.max_plays);
|
||||
setRewardCoin(value.reward_coin);
|
||||
};
|
||||
|
||||
const load = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const { data } = await api.get<GuideCfg>('/admin/api/guide-video');
|
||||
const { data } = await api.get<GuideCfg>('/admin/api/guide-video', { params: { scene } });
|
||||
sync(data);
|
||||
} catch (e) {
|
||||
message.error(errMsg(e));
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
load();
|
||||
}, []);
|
||||
void load();
|
||||
}, [scene]);
|
||||
|
||||
const save = async () => {
|
||||
setSaving(true);
|
||||
try {
|
||||
const { data } = await api.patch<GuideCfg>('/admin/api/guide-video', { enabled });
|
||||
const { data } = await api.patch<GuideCfg>(
|
||||
'/admin/api/guide-video',
|
||||
{ enabled, max_plays: maxPlays, reward_coin: rewardCoin },
|
||||
{ params: { scene } },
|
||||
);
|
||||
sync(data);
|
||||
message.success('已保存,用户下一次进入领券浮层即生效');
|
||||
message.success(`${meta.title}配置已保存,下次触发即生效`);
|
||||
} catch (e) {
|
||||
message.error(errMsg(e));
|
||||
} finally {
|
||||
@@ -65,11 +68,27 @@ export default function GuideVideoConfig() {
|
||||
}
|
||||
};
|
||||
|
||||
// antd Upload:beforeUpload 里自行 POST(multipart),返回 false 阻止其默认上传。
|
||||
const uploadVideo = async (file: File) => {
|
||||
const form = new FormData();
|
||||
form.append('file', file);
|
||||
setUploading(true);
|
||||
try {
|
||||
const { data } = await api.post<GuideCfg>(
|
||||
'/admin/api/guide-video/video',
|
||||
form,
|
||||
{ params: { scene } },
|
||||
);
|
||||
sync(data);
|
||||
message.success(`${meta.title}已更新`);
|
||||
} catch (e) {
|
||||
message.error(errMsg(e));
|
||||
} finally {
|
||||
setUploading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const beforeUpload = (file: File) => {
|
||||
// 有些系统给 .mp4 的 type 是空串,不能只看 type,再兜一层扩展名。
|
||||
const looksMp4 = file.type === 'video/mp4' || /\.mp4$/i.test(file.name);
|
||||
if (!looksMp4) {
|
||||
if (file.type !== 'video/mp4' && !/\.mp4$/i.test(file.name)) {
|
||||
message.error('仅支持 MP4 视频(H.264 编码)');
|
||||
return Upload.LIST_IGNORE;
|
||||
}
|
||||
@@ -81,27 +100,15 @@ export default function GuideVideoConfig() {
|
||||
return false;
|
||||
};
|
||||
|
||||
const uploadVideo = async (file: File) => {
|
||||
const form = new FormData();
|
||||
form.append('file', file);
|
||||
setUploading(true);
|
||||
try {
|
||||
const { data } = await api.post<GuideCfg>('/admin/api/guide-video/video', form);
|
||||
sync(data);
|
||||
message.success('引导视频已更新,用户下一次进入领券浮层即生效');
|
||||
} catch (e) {
|
||||
message.error(errMsg(e));
|
||||
} finally {
|
||||
setUploading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const removeVideo = async () => {
|
||||
setUploading(true);
|
||||
try {
|
||||
const { data } = await api.delete<GuideCfg>('/admin/api/guide-video/video');
|
||||
const { data } = await api.delete<GuideCfg>(
|
||||
'/admin/api/guide-video/video',
|
||||
{ params: { scene } },
|
||||
);
|
||||
sync(data);
|
||||
message.success('已移除引导视频,领券浮层恢复为只放广告');
|
||||
message.success(`已移除${meta.title}`);
|
||||
} catch (e) {
|
||||
message.error(errMsg(e));
|
||||
} finally {
|
||||
@@ -112,82 +119,48 @@ export default function GuideVideoConfig() {
|
||||
return (
|
||||
<Card
|
||||
size="small"
|
||||
title="领券引导视频(App 领券等候浮层,前 3 次替代广告)"
|
||||
title={meta.title}
|
||||
style={{ marginBottom: 16 }}
|
||||
extra={
|
||||
cfg?.updated_at ? (
|
||||
<Text type="secondary" style={{ fontSize: 12 }}>
|
||||
更新于 {new Date(cfg.updated_at).toLocaleString('zh-CN')}
|
||||
</Text>
|
||||
) : null
|
||||
}
|
||||
extra={cfg?.updated_at ? <Text type="secondary">更新于 {new Date(cfg.updated_at).toLocaleString('zh-CN')}</Text> : null}
|
||||
>
|
||||
<p style={{ color: '#999', marginTop: 0 }}>
|
||||
用户点「一键自动领取」后出现的等候浮层,下方那块广告位<b>前 3 次</b>改放这支引导视频。
|
||||
视频<b>不可快进</b>;播完或中途关闭都算看完,各发一次 <b>120 金币</b>;播完若浮层还开着,会自动接着放广告。
|
||||
次数<b>按账号</b>计(换设备不重置),<b>视频一开播就算用掉一次</b>。
|
||||
次数与金币走固定值、后台不开放调整;这里只管<b>开关</b>和<b>换片</b>,每次改动进审计日志。
|
||||
<p style={{ color: '#777', marginTop: 0 }}>
|
||||
Android 用户点击「{meta.action}」后,前若干次在等候浮层广告位播放本视频并奖励金币。
|
||||
次数按账号、按功能分别计算;开播即计次,播完或中途关闭均发放当次配置的金币。
|
||||
</p>
|
||||
{loading || !cfg ? (
|
||||
<Spin style={{ display: 'block', margin: '24px 0' }} />
|
||||
) : (
|
||||
<Space align="start" size={32} wrap>
|
||||
{/* 左:视频预览 */}
|
||||
<div>
|
||||
<Text type="secondary" style={{ fontSize: 12 }}>
|
||||
当前引导视频
|
||||
</Text>
|
||||
<div style={{ marginTop: 8, width: 240 }}>
|
||||
{cfg.video_url ? (
|
||||
// eslint-disable-next-line jsx-a11y/media-has-caption
|
||||
<video
|
||||
src={mediaUrl(cfg.video_url)}
|
||||
controls
|
||||
style={{
|
||||
width: 240,
|
||||
maxHeight: 420,
|
||||
borderRadius: 12,
|
||||
background: '#000',
|
||||
border: '1px solid #f0f0f0',
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
style={{
|
||||
width: 240,
|
||||
height: 320,
|
||||
borderRadius: 12,
|
||||
border: '1px dashed #d9d9d9',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
color: '#bbb',
|
||||
fontSize: 13,
|
||||
textAlign: 'center',
|
||||
padding: 16,
|
||||
}}
|
||||
>
|
||||
未上传视频
|
||||
<br />
|
||||
(领券浮层照旧只放广告)
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{!enabled && cfg.video_url && (
|
||||
<div style={{ color: '#fa8c16', fontSize: 12, marginTop: 6 }}>
|
||||
当前为「关闭」:浮层不放引导视频,直接放广告
|
||||
<div style={{ width: 240 }}>
|
||||
{cfg.video_url ? (
|
||||
// eslint-disable-next-line jsx-a11y/media-has-caption
|
||||
<video
|
||||
src={mediaUrl(cfg.video_url)}
|
||||
controls
|
||||
style={{ width: 240, maxHeight: 420, borderRadius: 12, background: '#000' }}
|
||||
/>
|
||||
) : (
|
||||
<div style={{ height: 280, border: '1px dashed #d9d9d9', borderRadius: 12, display: 'grid', placeItems: 'center', color: '#aaa' }}>
|
||||
未上传视频
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 右:编辑控件 */}
|
||||
<Space direction="vertical" size="middle" style={{ minWidth: 360 }}>
|
||||
<Space direction="vertical" size="middle" style={{ minWidth: 390 }}>
|
||||
<Space>
|
||||
<span>启用引导视频:</span>
|
||||
<span>启用:</span>
|
||||
<Switch checked={enabled} disabled={!canEdit} onChange={setEnabled} />
|
||||
{!enabled && <Tag color="orange">已关闭</Tag>}
|
||||
</Space>
|
||||
|
||||
<Space>
|
||||
<span>播放次数:</span>
|
||||
<InputNumber min={0} max={50} precision={0} value={maxPlays} disabled={!canEdit} onChange={(v) => setMaxPlays(v ?? 0)} />
|
||||
<Text type="secondary">每个账号前 N 次(默认 3)</Text>
|
||||
</Space>
|
||||
<Space>
|
||||
<span>每次金币:</span>
|
||||
<InputNumber min={0} max={10000} precision={0} value={rewardCoin} disabled={!canEdit} onChange={(v) => setRewardCoin(v ?? 0)} />
|
||||
<Text type="secondary">默认 100</Text>
|
||||
</Space>
|
||||
<Space wrap>
|
||||
<Upload accept="video/mp4,.mp4" showUploadList={false} beforeUpload={beforeUpload} disabled={!canEdit}>
|
||||
<Button icon={<UploadOutlined />} loading={uploading} disabled={!canEdit}>
|
||||
@@ -195,28 +168,26 @@ export default function GuideVideoConfig() {
|
||||
</Button>
|
||||
</Upload>
|
||||
{cfg.video_url && (
|
||||
<Button
|
||||
icon={<DeleteOutlined />}
|
||||
danger
|
||||
loading={uploading}
|
||||
disabled={!canEdit}
|
||||
onClick={removeVideo}
|
||||
>
|
||||
<Button icon={<DeleteOutlined />} danger loading={uploading} disabled={!canEdit} onClick={removeVideo}>
|
||||
移除视频
|
||||
</Button>
|
||||
)}
|
||||
<Text type="secondary" style={{ fontSize: 12 }}>
|
||||
MP4(H.264),≤100MB
|
||||
</Text>
|
||||
<Text type="secondary">MP4(H.264),≤100MB</Text>
|
||||
</Space>
|
||||
|
||||
<Button type="primary" loading={saving} disabled={!canEdit} onClick={save}>
|
||||
保存开关
|
||||
</Button>
|
||||
{!canEdit && <Text type="secondary">仅 operator / super_admin 可修改</Text>}
|
||||
<Button type="primary" loading={saving} disabled={!canEdit} onClick={save}>保存配置</Button>
|
||||
<Text type="secondary">累计播放 {cfg.total_plays} 次,已发币 {cfg.granted_plays} 次</Text>
|
||||
</Space>
|
||||
</Space>
|
||||
)}
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
export default function GuideVideoConfig() {
|
||||
return (
|
||||
<>
|
||||
<SceneConfig scene="coupon" />
|
||||
<SceneConfig scene="comparison" />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -165,7 +165,7 @@ export default function ConfigPage() {
|
||||
},
|
||||
{ key: 'welfare', label: '福利页', children: welfareConfig },
|
||||
{ key: 'feedback-qr', label: '反馈二维码', children: <FeedbackQrConfig /> },
|
||||
{ key: 'guide-video', label: '领券引导视频', children: <GuideVideoConfig /> },
|
||||
{ key: 'guide-video', label: '引导视频奖励', children: <GuideVideoConfig /> },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -79,8 +79,8 @@ const RULE_LIMITS: Record<RiskKind, { min: number; max: number; help: string }>
|
||||
},
|
||||
compare: {
|
||||
min: 1,
|
||||
max: 100000,
|
||||
help: '同一账户按北京时间自然日累计;该值同时作为每日比价业务上限和报警阈值。',
|
||||
max: 100,
|
||||
help: '同一账户按北京时间自然日累计;最高100次,与比价每日上限一致。',
|
||||
},
|
||||
};
|
||||
const utcTime = (value: string | null, withDate = true) =>
|
||||
@@ -412,7 +412,7 @@ export default function RiskMonitorPage() {
|
||||
};
|
||||
await api.patch<RiskRuleConfig>('/admin/api/risk-monitor/rules', payload);
|
||||
setRuleOpen(false);
|
||||
void message.success('规则与比价上限已保存,并已重新核算当前时段');
|
||||
void message.success('规则已保存,并已重新核算当前时段');
|
||||
await loadAll(true);
|
||||
} catch (error) {
|
||||
void message.error(errMsg(error, '规则保存失败'));
|
||||
@@ -857,7 +857,7 @@ export default function RiskMonitorPage() {
|
||||
</>
|
||||
)}
|
||||
<Modal
|
||||
title="风控规则与业务上限设置"
|
||||
title="风控规则设置"
|
||||
open={ruleOpen}
|
||||
okText="保存并立即生效"
|
||||
cancelText="取消"
|
||||
@@ -867,7 +867,7 @@ export default function RiskMonitorPage() {
|
||||
destroyOnHidden
|
||||
>
|
||||
<p className={styles.ruleDialogIntro}>
|
||||
修改后会立即重算北京时间当前小时或当天的数据。比价阈值还会立即成为单账户每日比价上限;提高阈值时,不再命中的待处理告警会自动收起,已忽略和已封禁记录不会改变。
|
||||
修改后会立即重算北京时间当前小时或当天的数据。提高阈值时,不再命中的待处理告警会自动收起;已忽略和已封禁记录不会改变。
|
||||
</p>
|
||||
<div className={styles.ruleSettings}>
|
||||
{RISK_KINDS.map((kind) => {
|
||||
|
||||
@@ -417,6 +417,7 @@ export interface FeedbackQrConfig {
|
||||
/** 领券等候浮层的「新手引导视频」配置(前 3 次用它替代广告,每次固定 120 金币)。
|
||||
* 后台只开放 enabled + 换片;下面几个字段接口仍返回,但页面不展示、也不回传。 */
|
||||
export interface GuideVideoConfig {
|
||||
scene: 'coupon' | 'comparison';
|
||||
enabled: boolean;
|
||||
video_url: string | null; // /media/guide_video/xxx.mp4;null = 未配片(浮层照旧只放广告)
|
||||
max_plays: number; // 每个账号前 N 次浮层放引导视频(服务端默认 3,后台不开放调整)
|
||||
|
||||
Reference in New Issue
Block a user