# SNS 社交媒体模块
SNS 模块是 DarkM 框架的社交媒体管理模块,提供了完整的微信生态管理功能。支持会员管理、直播间管理、微信消息、微信菜单、素材管理、群发消息、数据统计等功能,满足企业社交媒体运营需求。
# 📋 模块概述
| 属性 | 说明 |
|---|---|
| 模块名称 | SNS(社交媒体) |
| 模块类型 | 业务模块 |
| 依赖关系 | 依赖 Admin 模块、Common 模块、Quartz 模块 |
| 必需性 | 可选(微信运营必需) |
| Git 仓库 | framework/darkm/darkm (opens new window) |
# 🎯 核心功能
# 功能清单
| 功能分类 | 功能 | 说明 | 重要性 |
|---|---|---|---|
| 会员管理 | 会员信息管理 | 会员档案管理 | ⭐⭐⭐⭐⭐ |
| 会员分组 | 会员分组管理 | ⭐⭐⭐⭐ | |
| 会员标签 | 会员标签管理 | ⭐⭐⭐⭐ | |
| 直播管理 | 直播间管理 | 直播间配置 | ⭐⭐⭐⭐⭐ |
| 直播商品 | 直播商品管理 | ⭐⭐⭐⭐ | |
| 直播助理 | 直播助理管理 | ⭐⭐⭐ | |
| 直播互动 | 直播互动消息 | ⭐⭐⭐⭐ | |
| 微信管理 | 微信消息 | 微信消息定义 | ⭐⭐⭐⭐⭐ |
| 微信菜单 | 微信菜单配置 | ⭐⭐⭐⭐⭐ | |
| 微信标签 | 微信标签管理 | ⭐⭐⭐⭐ | |
| 微信模板 | 微信模板消息 | ⭐⭐⭐⭐ | |
| 微信数据 | 微信数据统计 | ⭐⭐⭐⭐ | |
| 素材管理 | 素材管理 | 素材库管理 | ⭐⭐⭐⭐ |
| 素材列表 | 素材分类管理 | ⭐⭐⭐ | |
| 群发管理 | 群发设置 | 群发配置 | ⭐⭐⭐⭐ |
| 群发批次 | 群发批次管理 | ⭐⭐⭐⭐ | |
| 数据统计 | 访问记录 | 访问统计 | ⭐⭐⭐⭐ |
| 搜索统计 | 搜索统计 | ⭐⭐⭐ |
# 📦 安装配置
# NuGet 包安装
Install-Package DarkM.Module.SNS.Web -Version 1.0.0
1
# NPM 包安装
npm i -S darkm-module-sns
1
# 配置文件
{
"Db": {
"Modules": [
{
"Name": "SNS",
"Database": "Nm_SNS",
"Prefix": ""
}
]
},
"SNS": {
// 是否开启 SNS 服务
"Enable": true,
// 微信 AppID
"WechatAppId": "wx_xxxxxxxxxxxxx",
// 微信 AppSecret
"WechatAppSecret": "xxxxxxxxxxxxxxxxxxxxx",
// 微信 Token
"WechatToken": "xxxxxxxxxxxxxxxxxxxxx",
// 微信 EncodingAESKey
"WechatEncodingAESKey": "xxxxxxxxxxxxxxxxxxxxx"
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
配置说明:
| 配置项 | 说明 | 默认值 |
|---|---|---|
Enable | 是否开启 SNS 服务 | true |
WechatAppId | 微信 AppID | - |
WechatAppSecret | 微信 AppSecret | - |
WechatToken | 微信 Token | - |
WechatEncodingAESKey | 微信 EncodingAESKey | - |
# 🗄️ 数据库表结构
# 会员管理表
| 表名 | 说明 | 主键 |
|---|---|---|
Member | 会员信息表 | Id (Guid) |
MemberGroup | 会员分组表 | Id (long) |
MemberGroupDetail | 会员分组详情表 | Id (long) |
SnsUser | SNS 用户表 | Id (Guid) |
SnsBinding | SNS 绑定表 | Id (Guid) |
UserTags | 用户标签表 | Id (long) |
# 直播管理表
| 表名 | 说明 | 主键 |
|---|---|---|
BroadcastRoom | 直播间表 | Id (Guid) |
BroadcastRoomGoods | 直播间商品表 | Id (long) |
BroadcastRoomAssistant | 直播助理表 | Id (long) |
BroadcastRoomFollower | 直播间粉丝表 | Id (long) |
BroadcastRoomFollowerMessage | 直播间粉丝消息表 | Id (long) |
BroadcastRoomReplay | 直播间回放表 | Id (long) |
BroadcastRole | 直播角色表 | Id (long) |
BroadcastGoods | 直播商品表 | Id (long) |
# 微信管理表
| 表名 | 说明 | 主键 |
|---|---|---|
WechatMessage | 微信消息表 | Id (Guid) |
WechatMenu | 微信菜单表 | Id (long) |
WechatTags | 微信标签表 | Id (long) |
WechatTemplate | 微信模板表 | Id (long) |
WechatTemplateRecord | 微信模板记录表 | Id (long) |
WechatSendTemplate | 微信发送模板表 | Id (long) |
WechatChatRecord | 微信聊天统计表 | Id (long) |
WechatCubeData | 微信魔方数据表 | Id (long) |
# 素材管理表
| 表名 | 说明 | 主键 |
|---|---|---|
Material | 素材表 | Id (Guid) |
MaterialList | 素材列表表 | Id (long) |
# 群发管理表
| 表名 | 说明 | 主键 |
|---|---|---|
SendSetting | 群发设置表 | Id (long) |
SendBatch | 群发批次表 | Id (long) |
Grouping | 分组表 | Id (long) |
# 数据统计表
| 表名 | 说明 | 主键 |
|---|---|---|
Record | 访问记录表 | Id (long) |
HistorySearchStatistics | 历史搜索统计表 | Id (long) |
AuthToken | 认证令牌表 | Id (long) |
# 🔐 权限系统设计
# Controller 定义
# 1. 会员信息管理
[Description("会员信息管理")]
public class MemberController : ModuleController
{
private readonly IMemberService _service;
public MemberController(IMemberService service)
{
_service = service;
}
[HttpGet]
[Description("查询")]
public Task<IResultModel> Query([FromQuery]MemberQueryModel model)
{
return _service.Query(model);
}
[HttpPost]
[Description("添加")]
public Task<IResultModel> Add(MemberAddModel model)
{
return _service.Add(model);
}
[HttpDelete]
[Description("删除")]
public Task<IResultModel> Delete([BindRequired]Guid id)
{
return _service.Delete(id);
}
[HttpGet]
[Description("编辑")]
public Task<IResultModel> Edit([BindRequired]Guid id)
{
return _service.Edit(id);
}
[HttpPost]
[Description("修改")]
public Task<IResultModel> Update(MemberUpdateModel model)
{
return _service.Update(model);
}
[HttpPost]
[Description("导出")]
public async Task<IActionResult> Export(MemberQueryModel model)
{
model.Export.ModuleCode = "SNS";
model.Export.Group = "Member";
var result = await _service.Export(model);
if (result.Successful)
{
return ExportFile(result.Data.Path, result.Data.FileName, model.Export.Format.ToDescription());
}
return Ok(result);
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
# 2. 直播间管理
[Description("直播间管理")]
public class BroadcastRoomController : ModuleController
{
private readonly IBroadcastRoomService _service;
public BroadcastRoomController(IBroadcastRoomService service)
{
_service = service;
}
[HttpGet]
[Description("查询")]
public Task<IResultModel> Query([FromQuery]BroadcastRoomQueryModel model)
{
return _service.Query(model);
}
[HttpPost]
[Description("添加")]
public Task<IResultModel> Add(BroadcastRoomAddModel model)
{
return _service.Add(model);
}
[HttpDelete]
[Description("删除")]
public Task<IResultModel> Delete([BindRequired]Guid id)
{
return _service.Delete(id);
}
[HttpGet]
[Description("编辑")]
public Task<IResultModel> Edit([BindRequired]Guid id)
{
return _service.Edit(id);
}
[HttpPost]
[Description("修改")]
public Task<IResultModel> Update(BroadcastRoomUpdateModel model)
{
return _service.Update(model);
}
[HttpPost]
[Description("同步直播间")]
public async Task<IResultModel> SyncRooms(SyncRoomsModel obj)
{
return await _service.SyncRooms(obj.Id);
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
# 3. 微信消息管理
[Description("消息定义管理")]
public class WechatMessageController : ModuleController
{
private readonly IWechatMessageService _service;
public WechatMessageController(IWechatMessageService service)
{
_service = service;
}
[HttpGet]
[Description("查询")]
public Task<IResultModel> Query([FromQuery]WechatMessageQueryModel model)
{
return _service.Query(model);
}
[HttpPost]
[Description("添加")]
public Task<IResultModel> Add(WechatMessageAddModel model)
{
return _service.Add(model);
}
[HttpDelete]
[Description("删除")]
public Task<IResultModel> Delete([BindRequired]Guid id)
{
return _service.Delete(id);
}
[HttpGet]
[Description("编辑")]
public Task<IResultModel> Edit([BindRequired]Guid id)
{
return _service.Edit(id);
}
[HttpPost]
[Description("修改")]
public Task<IResultModel> Update(WechatMessageUpdateModel model)
{
return _service.Update(model);
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
# 权限解析结果
| 权限编码 | 说明 | 访问级别 |
|---|---|---|
sns_member_query_get | 会员管理 - 查询 | 需授权 |
sns_member_add_post | 会员管理 - 添加 | 需授权 |
sns_member_edit_get | 会员管理 - 编辑 | 需授权 |
sns_member_update_post | 会员管理 - 修改 | 需授权 |
sns_member_delete_delete | 会员管理 - 删除 | 需授权 |
sns_member_export_post | 会员管理 - 导出 | 需授权 |
sns_broadcastroom_query_get | 直播间 - 查询 | 需授权 |
sns_broadcastroom_add_post | 直播间 - 添加 | 需授权 |
sns_broadcastroom_update_post | 直播间 - 修改 | 需授权 |
sns_broadcastroom_syncRooms_post | 直播间 - 同步 | 需授权 |
sns_wechatmessage_query_get | 微信消息 - 查询 | 需授权 |
sns_wechatmessage_add_post | 微信消息 - 添加 | 需授权 |
sns_wechatmenu_query_get | 微信菜单 - 查询 | 需授权 |
sns_wechatmenu_update_post | 微信菜单 - 修改 | 需授权 |
# 🎨 核心功能详解
# 一、会员管理
# 1. 会员实体
[Table("Member")]
public partial class MemberEntity : EntityBase
{
/// <summary>
/// 会员号
/// </summary>
[Length(50)]
public string MemberCode { get; set; }
/// <summary>
/// 会员姓名
/// </summary>
[Length(100)]
public string MemberName { get; set; }
/// <summary>
/// 手机号
/// </summary>
[Length(20)]
public string Phone { get; set; }
/// <summary>
/// 微信 OpenID
/// </summary>
[Length(100)]
public string OpenId { get; set; }
/// <summary>
/// 微信 UnionID
/// </summary>
[Length(100)]
public string UnionId { get; set; }
/// <summary>
/// 会员等级
/// </summary>
public int MemberLevel { get; set; }
/// <summary>
/// 会员状态
/// </summary>
public MemberStatus Status { get; set; }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
# 2. 会员状态枚举
public enum MemberStatus
{
/// <summary>
/// 正常
/// </summary>
Normal = 0,
/// <summary>
/// 冻结
/// </summary>
Frozen = 1,
/// <summary>
/// 注销
/// </summary>
Cancelled = 2
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 二、直播间管理
# 1. 直播间实体
[Table("BroadcastRoom")]
public partial class BroadcastRoomEntity : EntityBase
{
/// <summary>
/// 直播间名称
/// </summary>
[Length(100)]
public string RoomName { get; set; }
/// <summary>
/// 直播间号
/// </summary>
public int RoomId { get; set; }
/// <summary>
/// 主播 ID
/// </summary>
public Guid AnchorId { get; set; }
/// <summary>
/// 开始时间
/// </summary>
public DateTime? StartTime { get; set; }
/// <summary>
/// 结束时间
/// </summary>
public DateTime? EndTime { get; set; }
/// <summary>
/// 直播间状态
/// </summary>
public BroadcastRoomStatus Status { get; set; }
/// <summary>
/// 观看人数
/// </summary>
public int ViewerCount { get; set; }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
# 2. 直播间状态枚举
public enum BroadcastRoomStatus
{
/// <summary>
/// 未开始
/// </summary>
NotStarted = 0,
/// <summary>
/// 直播中
/// </summary>
Live = 1,
/// <summary>
/// 已结束
/// </summary>
Ended = 2,
/// <summary>
/// 已禁用
/// </summary>
Disabled = 3
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# 三、微信消息
# 1. 微信消息实体
[Table("WechatMessage")]
public partial class WechatMessageEntity : EntityBase
{
/// <summary>
/// 消息名称
/// </summary>
[Length(100)]
public string MessageName { get; set; }
/// <summary>
/// 消息类型
/// </summary>
[Length(50)]
public string MessageType { get; set; }
/// <summary>
/// 消息内容
/// </summary>
[Length(5000)]
public string MessageContent { get; set; }
/// <summary>
/// 消息参数(JSON 格式)
/// </summary>
[Length(1000)]
public string MessageParams { get; set; }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
# 2. 消息类型
| 类型 | 说明 |
|---|---|
| text | 文本消息 |
| image | 图片消息 |
| voice | 语音消息 |
| video | 视频消息 |
| music | 音乐消息 |
| news | 图文消息 |
| template | 模板消息 |
# 🔧 核心服务接口
# IMemberService(会员服务)
public interface IMemberService
{
/// <summary>
/// 查询会员列表
/// </summary>
Task<IResultModel> Query(MemberQueryModel model);
/// <summary>
/// 添加会员
/// </summary>
Task<IResultModel> Add(MemberAddModel model);
/// <summary>
/// 删除会员
/// </summary>
Task<IResultModel> Delete(Guid id);
/// <summary>
/// 编辑会员
/// </summary>
Task<IResultModel> Edit(Guid id);
/// <summary>
/// 修改会员
/// </summary>
Task<IResultModel> Update(MemberUpdateModel model);
/// <summary>
/// 导出会员
/// </summary>
Task<IResultModel<ExcelExportResultModel>> Export(MemberQueryModel model);
/// <summary>
/// 通过会员号获取会员信息
/// </summary>
Task<IResultModel<MemberEntity>> GetByMemberCode(string code);
/// <summary>
/// 通过 OpenID 获取会员信息
/// </summary>
Task<IResultModel<MemberEntity>> GetByOpenId(string openId);
/// <summary>
/// 通过 UnionID 获取会员信息
/// </summary>
Task<IResultModel<MemberEntity>> GetByUnionId(string unionId);
/// <summary>
/// 会员绑定
/// </summary>
Task<BindResult> Binding(MemberEntity member, SnsUserEntity snsUser, string endRank = null);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
# IBroadcastRoomService(直播间服务)
public interface IBroadcastRoomService
{
/// <summary>
/// 查询直播间列表
/// </summary>
Task<IResultModel> Query(BroadcastRoomQueryModel model);
/// <summary>
/// 添加直播间
/// </summary>
Task<IResultModel> Add(BroadcastRoomAddModel model);
/// <summary>
/// 删除直播间
/// </summary>
Task<IResultModel> Delete(Guid id);
/// <summary>
/// 编辑直播间
/// </summary>
Task<IResultModel> Edit(Guid id);
/// <summary>
/// 修改直播间
/// </summary>
Task<IResultModel> Update(BroadcastRoomUpdateModel model);
/// <summary>
/// 获取下拉列表
/// </summary>
Task<IResultModel> Select();
/// <summary>
/// 同步直播间
/// </summary>
Task<IResultModel> SyncRooms(Guid? id);
/// <summary>
/// 导出
/// </summary>
Task<IResultModel<ExcelExportResultModel>> Export(BroadcastRoomQueryModel model);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
# IWechatMessageService(微信消息服务)
public interface IWechatMessageService
{
/// <summary>
/// 查询微信消息列表
/// </summary>
Task<IResultModel> Query(WechatMessageQueryModel model);
/// <summary>
/// 添加微信消息
/// </summary>
Task<IResultModel> Add(WechatMessageAddModel model);
/// <summary>
/// 删除微信消息
/// </summary>
Task<IResultModel> Delete(Guid id);
/// <summary>
/// 编辑微信消息
/// </summary>
Task<IResultModel> Edit(Guid id);
/// <summary>
/// 修改微信消息
/// </summary>
Task<IResultModel> Update(WechatMessageUpdateModel model);
/// <summary>
/// 导出
/// </summary>
Task<IResultModel<ExcelExportResultModel>> Export(WechatMessageQueryModel model);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
# 🖥️ 前端组件说明
# NPM 包信息
{
"name": "darkm-module-sns",
"version": "1.5.0-beta-2.0",
"code": "sNS",
"title": "SNS 模块",
"dependencies": {
"darkm-module-admin": "^1.5.0-beta-2.0",
"darkm-module-common": "^1.5.0-beta-2.0",
"darkm-module-quartz": "^1.5.0-beta-2.0",
"darkm-ui": "^1.5.0-beta-2.0"
}
}
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# 组件目录结构
src/UI/module-sns/
├── src/
│ ├── views/ # 页面组件
│ │ ├── member/ # 会员管理
│ │ ├── broadcastRoom/ # 直播间管理
│ │ ├── wechatMessage/ # 微信消息
│ │ ├── wechatMenu/ # 微信菜单
│ │ ├── wechatTags/ # 微信标签
│ │ ├── material/ # 素材管理
│ │ └── sendBatch/ # 群发管理
│ └── components/ # 通用组件
│ ├── broadcastRoom-select/ # 直播间选择器
│ ├── broadcastRoom-search-select/ # 直播间搜索选择器
│ ├── broadcastGoods-select/ # 直播商品选择器
│ ├── broadcastRole-select/ # 直播角色选择器
│ ├── wechatMenu-select/ # 微信菜单选择器
│ ├── wechatTags-select/ # 微信标签选择器
│ ├── wechatTemplate-select/ # 微信模板选择器
│ └── picture-upload/ # 图片上传组件
└── package.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# 📦 通用组件详解
# 1. BroadcastRoomSelect 直播间选择器
组件路径: components/broadcastRoom-select
功能: 下拉选择直播间
使用示例:
<template>
<broadcastRoom-select v-model="roomId" />
</template>
<script>
import { components } from 'darkm-module-sns'
const { BroadcastRoomSelect } = components
export default {
components: { BroadcastRoomSelect },
data() {
return {
roomId: ''
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Props 参数:
| 参数 | 类型 | 必填 | 默认值 | 说明 |
|---|---|---|---|---|
value | String | 否 | - | 选中的直播间 ID(v-model) |
disabled | Boolean | 否 | false | 是否禁用 |
Events 事件:
| 事件名 | 参数 | 说明 |
|---|---|---|
input | (value: String) | 选中值变化时触发(v-model) |
change | (value: String, data: Object) | 选中值变化时触发,返回完整数据 |
特点:
- ✅ 基于 mixins.select
- ✅ 支持缓存
# 2. BroadcastRoomSearchSelect 直播间搜索选择器
组件路径: components/broadcastRoom-search-select
功能: 弹窗式直播间搜索选择
使用示例:
<template>
<broadcastRoom-search-select
v-model="roomId"
@change="handleChange"
/>
</template>
<script>
import { components } from 'darkm-module-sns'
const { BroadcastRoomSearchSelect } = components
export default {
components: { BroadcastRoomSearchSelect },
data() {
return {
roomId: ''
}
},
methods: {
handleChange(value, data) {
console.log('选中的直播间:', data)
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
Props 参数:
| 参数 | 类型 | 必填 | 默认值 | 说明 |
|---|---|---|---|---|
value | String | 否 | - | 选中的直播间 ID(v-model) |
disabled | Boolean | 否 | false | 是否禁用 |
Events 事件:
| 事件名 | 参数 | 说明 |
|---|---|---|
input | (value: String) | 选中值变化时触发 |
change | (value: String, data: Object) | 选中值变化时触发,返回完整数据 |
功能特点:
- ✅ 支持搜索直播间名称
- ✅ 弹窗式选择界面
- ✅ 显示直播间状态和观看人数
# 3. WechatMenuSelect 微信菜单选择器
组件路径: components/wechatMenu-select
功能: 下拉选择微信菜单
使用示例:
<template>
<wechatMenu-select v-model="menuId" />
</template>
<script>
import { components } from 'darkm-module-sns'
const { WechatMenuSelect } = components
export default {
components: { WechatMenuSelect },
data() {
return {
menuId: ''
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Props 参数:
| 参数 | 类型 | 必填 | 默认值 | 说明 |
|---|---|---|---|---|
value | Number | 否 | - | 选中的菜单 ID(v-model) |
disabled | Boolean | 否 | false | 是否禁用 |
Events 事件:
| 事件名 | 参数 | 说明 |
|---|---|---|
input | (value: Number) | 选中值变化时触发(v-model) |
change | (value: Number, data: Object) | 选中值变化时触发,返回完整数据 |
# 4. WechatTagsSelect 微信标签选择器
组件路径: components/wechatTags-select
功能: 下拉选择微信标签
使用示例:
<template>
<wechatTags-select v-model="tagId" />
</template>
<script>
import { components } from 'darkm-module-sns'
const { WechatTagsSelect } = components
export default {
components: { WechatTagsSelect },
data() {
return {
tagId: ''
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Props 参数:
| 参数 | 类型 | 必填 | 默认值 | 说明 |
|---|---|---|---|---|
value | Number | 否 | - | 选中的标签 ID(v-model) |
disabled | Boolean | 否 | false | 是否禁用 |
Events 事件:
| 事件名 | 参数 | 说明 |
|---|---|---|
input | (value: Number) | 选中值变化时触发(v-model) |
change | (value: Number, data: Object) | 选中值变化时触发,返回完整数据 |
# 5. BroadcastGoodsSelect 直播商品选择器
组件路径: components/broadcastGoods-select
功能: 下拉选择直播商品
使用示例:
<template>
<broadcastGoods-select
v-model="goodsId"
:roomId="roomId"
/>
</template>
<script>
import { components } from 'darkm-module-sns'
const { BroadcastGoodsSelect } = components
export default {
components: { BroadcastGoodsSelect },
data() {
return {
goodsId: '',
roomId: 'xxx'
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
Props 参数:
| 参数 | 类型 | 必填 | 默认值 | 说明 |
|---|---|---|---|---|
value | Number | 否 | - | 选中的商品 ID(v-model) |
roomId | String | 否 | - | 直播间 ID 筛选 |
disabled | Boolean | 否 | false | 是否禁用 |
Events 事件:
| 事件名 | 参数 | 说明 |
|---|---|---|
input | (value: Number) | 选中值变化时触发(v-model) |
change | (value: Number, data: Object) | 选中值变化时触发,返回完整数据 |
# 6. PictureUpload 图片上传组件
组件路径: components/picture-upload
功能: 图片上传,支持多图、裁剪、压缩
使用示例:
<template>
<picture-upload
v-model="imageUrl"
:limit="1"
:size="5"
/>
</template>
<script>
import { components } from 'darkm-module-sns'
const { PictureUpload } = components
export default {
components: { PictureUpload },
data() {
return {
imageUrl: ''
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
Props 参数:
| 参数 | 类型 | 必填 | 默认值 | 说明 |
|---|---|---|---|---|
value | String/Array | 否 | - | 图片 URL(v-model) |
limit | Number | 否 | 1 | 最大上传数量 |
size | Number | 否 | 5 | 单张图片大小限制(MB) |
accept | String | 否 | image/* | 接受的文件类型 |
disabled | Boolean | 否 | false | 是否禁用 |
Events 事件:
| 事件名 | 参数 | 说明 |
|---|---|---|
input | (value: String/Array) | 上传完成时触发(v-model) |
change | (value: String/Array, file: Object) | 文件变化时触发 |
exceed | (files: Array) | 超出限制时触发 |
功能特点:
- ✅ 支持多图上传
- ✅ 支持图片压缩
- ✅ 支持图片裁剪
- ✅ 支持进度显示
- ✅ 支持预览
# 📋 组件使用注意事项
# 1. 组件引入方式
// 方式一:引入单个组件
import { components } from 'darkm-module-sns'
const { BroadcastRoomSelect, WechatMenuSelect } = components
// 方式二:全局注册
import SNS from 'darkm-module-sns'
Vue.use(SNS)
1
2
3
4
5
6
7
2
3
4
5
6
7
# 2. v-model 双向绑定
所有选择器组件都支持 v-model 双向绑定:
<!-- 推荐用法 -->
<broadcastRoom-select v-model="roomId" />
<!-- 等价于 -->
<broadcastRoom-select
:value="roomId"
@input="roomId = $event"
/>
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 3. 级联选择
多个选择器可以级联使用:
<template>
<div>
<broadcastRoom-select v-model="roomId" />
<broadcastGoods-select v-model="goodsId" :roomId="roomId" />
</div>
</template>
1
2
3
4
5
6
2
3
4
5
6
# 4. 数据格式
所有组件返回的数据格式:
- 单选: 返回 ID(String/Number)
- 多选: 返回 ID 数组(Array)
- change 事件: 返回
(value, data),data 为完整对象
# 5. 组件依赖
SNS 模块依赖以下模块:
darkm-module-admin- 权限管理darkm-module-common- 通用模块darkm-module-quartz- 定时任务darkm-ui- UI 组件库
确保先安装依赖:
npm install darkm-module-admin --registry http://npm.woowis.com
npm install darkm-module-common --registry http://npm.woowis.com
npm install darkm-module-quartz --registry http://npm.woowis.com
npm install darkm-ui --registry http://npm.woowis.com
1
2
3
4
2
3
4
# 🔍 常见问题
# 1. 微信接口调用失败
问题: 调用微信 API 报错
解决:
# 检查微信配置是否正确
cat appsettings.json | grep Wechat
# 检查 Access Token 是否有效
# 检查 AppID 和 AppSecret 是否正确
# 查看详细错误日志
tail -f logs/sns.log
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 2. 直播间同步失败
问题: 同步直播间数据报错
解决:
- 检查微信直播接口权限
- 检查直播间 ID 是否正确
- 检查网络连通性
- 查看后端日志错误信息
# 3. 会员绑定失败
问题: 会员与微信用户绑定失败
解决:
- 检查会员号是否存在
- 检查 OpenID/UnionID 是否正确
- 检查是否已绑定其他账号
- 查看数据库约束
# 4. 图片上传失败
问题: 上传图片报错
解决:
# 检查上传目录是否有写权限
ls -la /upload/sns
# 检查图片大小是否超过限制
# 检查图片格式是否支持(JPG/PNG/GIF)
# 查看详细错误日志
tail -f logs/sns.log
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 📚 相关文档
- Admin 权限管理 - 权限配置
- Quartz 任务调度 - 定时任务
- Message 消息服务 - 消息通知
- 系统架构 - 整体架构
# 🔗 参考链接
- 微信开放平台 (opens new window)
- 微信公众号 API (opens new window)
- 微信直播 API (opens new window)
- GitLab 仓库 (opens new window)
最后更新: 2026-03-20