From 001107d3f9399142a80b719cd8cee71fa1093f5d Mon Sep 17 00:00:00 2001
From: hejianhao <15708179461@qq.com>
Date: 星期三, 19 八月 2026 16:38:23 +0800
Subject: [PATCH] feat0806: app微赞直播从管理后台获取数据
---
tcm-training-admin/src/pages/live/live-room-setting/index.tsx | 26 +++++++++++++++++---------
tcm-training-admin/src/pages/live/live-room-setting/style.less | 7 ++++---
2 files changed, 21 insertions(+), 12 deletions(-)
diff --git a/tcm-training-admin/src/pages/live/live-room-setting/index.tsx b/tcm-training-admin/src/pages/live/live-room-setting/index.tsx
index 69f46ad..c0744bf 100644
--- a/tcm-training-admin/src/pages/live/live-room-setting/index.tsx
+++ b/tcm-training-admin/src/pages/live/live-room-setting/index.tsx
@@ -64,11 +64,14 @@
<div className="live-room-setting-title">微赞直播间设置</div>
<Spin spinning={loading}>
<Form form={form} layout="vertical" disabled={loading || !canEdit} className="live-room-setting-form">
- <Form.Item label="Banner图片" name="bannerImageUrl" rules={[{ required: true, message: '请上传Banner图片' }]}>
- <Input type="hidden" />
- </Form.Item>
- <div className="live-room-setting-upload-row">
- {bannerImageUrl ? <Image src={bannerImageUrl} className="live-room-setting-preview" /> : null}
+ <Form.Item
+ label="Banner图片"
+ className="live-room-setting-form__full"
+ required
+ >
+ <Form.Item name="bannerImageUrl" rules={[{ required: true, message: '请上传Banner图片' }]} hidden>
+ <Input />
+ </Form.Item>
<Upload
accept="image/*"
showUploadList={false}
@@ -79,7 +82,6 @@
const url = res.data?.url;
if (!url) throw new Error('上传失败');
form.setFieldValue('bannerImageUrl', url);
- await form.validateFields(['bannerImageUrl']);
options.onSuccess?.(res);
} catch (error) {
message.error((error as Error)?.message || '图片上传失败');
@@ -89,10 +91,16 @@
}
}}
>
- <Button icon={<PlusOutlined />} loading={uploading}>上传图片</Button>
+ <div className="live-room-setting-form__cover-box">
+ {bannerImageUrl ? (
+ <Image key={bannerImageUrl} src={bannerImageUrl} width={200} height={112} preview={false} />
+ ) : (
+ <PlusOutlined />
+ )}
+ </div>
</Upload>
- <span className="live-room-setting-tip">建议尺寸 750 × 320px，支持 JPG、PNG</span>
- </div>
+ <div className="live-room-setting-tip">建议尺寸 750 × 320px，支持 JPG、PNG，点击图片可替换</div>
+ </Form.Item>
<Form.Item label="直播间地址" name="liveRoomUrl" rules={[{ type: 'url', message: '请输入正确的直播间地址' }, { max: 500 }]}>
<Input placeholder="请输入微赞直播间地址（可不填）" allowClear />
</Form.Item>
diff --git a/tcm-training-admin/src/pages/live/live-room-setting/style.less b/tcm-training-admin/src/pages/live/live-room-setting/style.less
index 0283bb0..dd2119f 100644
--- a/tcm-training-admin/src/pages/live/live-room-setting/style.less
+++ b/tcm-training-admin/src/pages/live/live-room-setting/style.less
@@ -2,7 +2,8 @@
.live-room-setting-card { min-height: 620px; padding: 24px; border-radius: 10px; background: #fff; box-shadow: 0 2px 10px rgba(15, 23, 42, .04); }
.live-room-setting-title { margin-bottom: 28px; color: #303133; font-size: 18px; font-weight: 500; }
.live-room-setting-form { width: 620px; }
-.live-room-setting-upload-row { display: flex; align-items: center; gap: 16px; margin: -14px 0 28px; }
-.live-room-setting-preview { width: 300px; height: 128px; border-radius: 8px; object-fit: cover; border: 1px solid #ebeef5; }
+.live-room-setting-form__full { grid-column: 1 / -1; }
+.live-room-setting-form__cover-box { display: flex; align-items: center; justify-content: center; width: 200px; height: 112px; overflow: hidden; color: #94a3b8; font-size: 26px; background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: 8px; cursor: pointer; }
+
.live-room-setting-tip { color: #909399; font-size: 13px; }
-@media (max-width: 800px) { .live-room-setting-form { width: 100%; } .live-room-setting-upload-row { align-items: flex-start; flex-direction: column; } }
\ No newline at end of file
+@media (max-width: 800px) { .live-room-setting-form { width: 100%; } }
\ No newline at end of file
--
Gitblit v1.7.1