# 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

配置说明:

配置项 说明 默认值
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. 直播间管理

[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

# 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

# 权限解析结果

权限编码 说明 访问级别
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. 会员状态枚举

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

# 二、直播间管理

# 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. 直播间状态枚举

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

# 三、微信消息

# 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. 消息类型

类型 说明
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

# 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

# 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

# 🖥️ 前端组件说明

# 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

# 组件目录结构

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

# 📦 通用组件详解

# 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

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

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

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

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

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

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. v-model 双向绑定

所有选择器组件都支持 v-model 双向绑定:

<!-- 推荐用法 -->
<broadcastRoom-select v-model="roomId" />

<!-- 等价于 -->
<broadcastRoom-select 
  :value="roomId" 
  @input="roomId = $event" 
/>
1
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

# 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

# 🔍 常见问题

# 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. 直播间同步失败

问题: 同步直播间数据报错

解决:

  1. 检查微信直播接口权限
  2. 检查直播间 ID 是否正确
  3. 检查网络连通性
  4. 查看后端日志错误信息

# 3. 会员绑定失败

问题: 会员与微信用户绑定失败

解决:

  1. 检查会员号是否存在
  2. 检查 OpenID/UnionID 是否正确
  3. 检查是否已绑定其他账号
  4. 查看数据库约束

# 4. 图片上传失败

问题: 上传图片报错

解决:

# 检查上传目录是否有写权限
ls -la /upload/sns

# 检查图片大小是否超过限制
# 检查图片格式是否支持(JPG/PNG/GIF)

# 查看详细错误日志
tail -f logs/sns.log
1
2
3
4
5
6
7
8

# 📚 相关文档


# 🔗 参考链接


最后更新: 2026-03-20