# 看图看视频 SAAS 多租户多城市 H5 · 功能介绍

## 一、这个产品是做什么的

这是一套"一套程序、开很多个站"的内容展示与引流平台。核心业务是：把图片、视频这类内容集中管理，然后按城市分发到多个独立的小网站（站点）上给访客看；访客看到中意的内容后，复制客服的微信号，去微信里找客服成交。

平台本身不做任何在线交易——没有注册、没有登录（访客端）、没有下单、没有支付。它扮演的角色是"内容橱窗 + 客服引流"。访客负责看，成交环节全部引流到微信里人工完成。

每个站点由一个"入口参数"（URL 上的一段随机码）来区分，拥有独立的站点名称、客服联系方式、开通的城市、广告位和一系列开关。内容默认来自一个公共的"总后台内容池"，各站点根据自己开通了哪些城市，自动过滤出对应城市的内容来展示。

## 二、两套使用者、三种角色

整个系统面向两类人：

一类是**运营管理者**，通过 PC 端的管理后台操作。后台里又细分两种角色：

- **管理员**：掌控全局，管理所有站点、所有原始内容、城市字典、广告位、域名、账号和存储配置。

- **租户账号**：每个租户相当于"一个站点的负责人"，只能看到和管理自己那一个站点的数据，完全看不到其他租户的任何内容。

另一类是**终端访客**，通过手机 H5 页面浏览，不需要任何账号，拿到链接直接看。

管理员和租户使用的是同一套后台程序，登录后系统根据角色下发不同的菜单。超管能看到"数据概览、租户管理、城市与地区、内容管理、广告位管理、域名管理、账号管理、存储配置"这些全局菜单；租户只能看到"数据概览、内容管理（仅自己发布的）、站点配置、推广入口"这几个与自己站点相关的菜单。

## 三、核心业务全流程

### 1. 开一个新站

管理员创建一个租户，填写站点名称、客服电话、客服微信号，勾选这个站要开通哪些城市，设置内容来源等几个开关，绑定域名和广告位。系统会自动生成一个入口参数，拼出完整访问链接（形如"域名 + 入口参数"），并且同时为该租户创建一个能登录后台的主账号。最1后把这个链接复制、或者生成二维码，交给租户拿去投放推广。

### 2. 准备内容

管理员在总后台维护内容池：上传图片或视频、上传封面、填标题、选择这条内容属于哪个城市的哪个地区、填一个整数价格，然后上架。内容一旦上架，就会自动出现在"所有开通了该城市"的站点前台，不需要逐个站点手动分发。

这里有一个严格的依赖顺序：必须先建好城市，再在城市下建地区，才能上传归属这些地区的内容。城市和地区是全站共用的基础字典。

### 3. 访客看内容、复制微信

访客打开链接后，服务端根据入口参数识别出是哪个租户的站点，返回这个站的信息和它已开通的城市。访客按照"城市 → 地区 → 价格"三级逐级筛选，浏览图片或视频，看中后复制客服微信号。复制这个动作会被记录一次（不管剪贴板是否真的写入成功都算一次，写不成功用户还能长按手动复制）。之后访客在微信里联系成交。

### 4. 租户自己发内容（可选）

如果超管给某个租户打开了"允许自主发布"开关，租户就能在自己已开通的城市下，自己上传内容。这些内容只出现在自己那个站上，和其他租户完全隔离。

## 四、内容来源的两个开关

每个站点有两个关键开关，决定它前台到底展示什么内容：

- **内容同步开关**：开启后，这个站会同步总后台内容池里、属于它已开通城市的内容。

- **允许自主发布开关**：开启后，这个站会展示租户自己发布的内容。

两个开关可以自由组合出三种有效状态：只同步内容池、只展示自发布内容、或者两者都要（内容池同步内容 ∪ 租户自发布内容）。系统有一条硬性校验：不允许同时把两个开关都关掉，否则这个站会一条内容都没有，保存时会被直接拦截并提示。

## 五、管理后台各功能模块

### 登录

账号密码登录，登录成功后按角色进入数据概览页。没登录时访问任何页面都会被拉回登录页。

### 数据概览

超管看到的是全平台汇总：站点总数、内容池总数、域名总数、广告位数四个数字卡片，加上近 7 天新增内容趋势图、各城市内容数柱状图、以及各站点复制次数排行榜。

租户只看到自己站点的数据：本站内容数、本站复制次数、已开通城市数，加上近 7 天复制趋势图。

这里的"复制次数"就是访客在 H5 上复制客服微信号的次数，是衡量引流效果的核心指标。

### 租户管理（超管）

以列表形式管理所有站点，能看到站点名、入口参数、客服电话、开通城市数、内容来源、到期时间、状态等。支持的操作有：复制链接、显示二维码、编辑、启用停用、重置入口参数、删除。

- **复制链接**时，如果一个站绑了多个域名，会弹出列表让超管选一个再复制。复制出的链接会根据访问后台的环境自动适配：在本地开发时复制出来是本机或局域网能直接点开、能扫码的地址；在生产环境则一律是正式域名。

- **重置入口参数**会生成新的随机码，旧链接立刻失效（二次确认）。

- **删除**是软删除，只把状态置为停用，不物理删数据。

新建和编辑表单里，除了站点基础信息，还要多选开通城市、多选绑定域名、单选广告位、设置三个开关、可选填到期时间，新建时还要设置该租户主账号的用户名和密码。

### 城市与地区（超管）

左右两栏布局：左边是城市列表，选中某个城市后，右边显示它下面的地区列表。城市和地区都支持增删改、启停、排序。删除城市或地区前会校验是否被内容引用，被引用则拒绝删除并提示引用数量。

页面底部还会展示该城市下各地区已有的价格档分布，只读。这个统计口径和访客在 H5 上实际能选到的价格档完全一致：只统计已上架的内容，被停用的地区、停用的城市都不体现。相当于让管理者直观看到"访客实际会看到什么价格筛选"。

### 内容管理

顶部一排筛选（关键词、城市、地区、价格、类型、状态），支持新增、批量上架、批量下架、批量删除。列表展示封面缩略图、标题、类型、城市、地区、价格、状态、发布时间。

新增编辑时选内容类型是"视频"就要求上传视频文件，选"图片"则无需视频。价格要求是整数元。租户账号登录后，这里的城市下拉只列出自己开通的城市，且只能看到、只能操作自己发布的内容，总后台内容池的内容对它完全不可见。

### 广告位管理（超管）

管理站点上展示的广告图：名称、广告图、点击后的跳转链接、状态。删除广告位前会校验是否被站点绑定占用，被占用则拒绝。

### 域名管理（超管）

维护可用于开站的域名池。每个域名可以分配给某个站点，也可以取消分配。一个域名同一时刻只能属于一个租户——分配时在事务和行锁里做二次校验，如果已被别的租户占用会拒绝并指名当前归属。分配关系一变，系统会立刻刷新跨域白名单，保证新域名下的站点能正常访问接口。已分配的域名不允许直接删除。

### 账号管理（超管）

管理所有后台账号（包括超管自己和其他租户的主账号），能看到用户名、角色、所属站点、状态、最1后登录时间。支持新增、编辑、启停、重置密码（重置后弹出新密码供复制）、删除（不允许删除自己）。

### 存储配置（超管）

选择上传的文件存到哪里：本地服务器，还是阿里云云存储。选了本地，云存储那几项就置灰。云存储要填 AccessKey、Bucket、Endpoint、访问域名等，已保存的密钥会以脱敏形式回显。提供"测试连通性"按钮，用当前配置试传一张测试图验证是否可用。切换存储方式只影响后续新上传，老文件地址保持不变。

### 站点配置（租户）

租户在这里能修改自己站点的：站点名、客服电话、客服微信号、绑定的广告位。而入口参数、开通城市、各种开关、域名、到期时间这些属于超管权限的字段，对租户只读展示，改不了。

### 推广入口（租户）

租户在这里看到自己站点的所有可用链接，每条可以一键复制，也能生成二维码下载，方便拿去投放。

### 修改密码

任何登录账号都能通过右上角菜单修改自己的密码，需要验证原密码，两次新密码要一致。

## 六、访客端 H5 页面功能

访客端是一个单页面，所有操作都在同一页里完成，没有跳转和路由。

页面从上到下依次是：站点名称通栏、客服提示行（显示客服电话，可点击复制微信）、城市标签行、地区标签行、价格标签行、广告位、内容卡片流、底部客服条、右侧悬浮按钮组。

### 三级筛选联动

筛选是层层递进的：先选城市，才出现这个城市下的地区标签；选具体地区，才出现这个地区已有的价格档。切换城市会清空下面地区和价格并重新加载列表；切换地区清空价格重新加载。城市选"全部"时，地区行和价格行都隐藏。点击已经选中的标签不重复响应。

广告位只在城市选"全部"时显示，一旦选了具体城市就隐藏。

### 内容卡片

内容分两种卡片：

- **图片卡**：封面铺满，点击封面弹出全屏大图看，黑色遮罩，可以点大图本身、点遮罩、点右上角关闭按钮任意一种方式关闭（桌面端还支持键盘退出）。看大图时锁定背景滚动，关闭后回到原来的滚动位置。

- **视频卡**：封面铺满，中间有播放按钮，点击就地播放。播放时卡片内显示自定义控制条（播放暂停、当前时间、进度条、总时长、全屏、收起）。同一时刻全站只允许一个视频在播，播新的会自动收起旧的；卡片滚出屏幕会暂停但不清进度。播放结束停在最1后一帧并变成重播图标。

两类卡片底部都有一行"城市 地区 价格"信息条，这行只是展示，不可点击、没有任何跳转。封面加载失败会显示占位图，视频加载失败会提示。

### 列表加载

首次进入加载第2一页，往下滑到底自动加载下一页；加载中、没有更多数据、该条件下暂无内容（空状态配图）都有对应提示。每页固定 10 条。

### 三处复制客服微信

顶部客服提示行、右侧悬浮复制按钮、底部客服条，三个入口行为完全一致：点击后写入剪贴板、弹出"已复制微信号"提示、并上报记录一次复制事件。复制的内容优先取客服微信号，微信号为空时回退取客服电话。

底部客服条是否显示，由该站点的开关决定。右侧悬浮按钮组里，复制按钮常驻，"返回顶部"按钮只有滚动超过一屏后才出现。

### 不可访问页面

当链接无效或站点不可用时，访客会看到一个统一的提示页（居中配图加一句主提示），不泄露任何站点名、电话、微信等信息。具体分三种情况：入口参数错误或已被重置，提示"链接已失效"；站点被停用，提示"站点已停用"；站点服务到期，提示"站点服务已到期"。停用和到期同时命中时按停用处理。

## 七、数据与权限边界（关键设计）

整套系统在数据隔离上做了严格约束：

所有列表接口都按登录角色自动注入数据范围，租户的归属由登录态决定，不信任前端传参；所有写操作都会校验目标数据是不是这个租户自己的，越权访问统一返回 403。当租户被停用、软删除或到期时，它名下的账号无法登录，已签发的令牌立即失效，前台链接也同时不可访问；但超管一侧仍然能正常查看和管理这个租户。

城市、地区的停用状态会传导到前台：一旦某个城市或地区在后台被停用，它下面的内容就不再对外输出，访客端筛选里也看不到它；但管理后台的内容列表不受影响，仍完整展示，方便恢复启用后内容自动回到前台。

## 八、运营配置项

系统还提供了全局的系统配置（存储方式、云存储密钥等以键值对形式保存），以及完整的示例数据：8 个城市、每城若干地区、多个站点、广告位、域名、数百条内容池内容与复制记录等，保证所有页面打开就有内容可看，方便演示和验证。所有后台账号的初始登录密码统一为一个约定值。

---

以上就是基于代码实际实现的功能全貌。概括一句话：这是一个**多城市内容集中供给、多站点独立展示、以复制客服微信为转化手段的看图看视频引流平台**，超管管内容和站点，租户管自己站，访客拿链接看内容并复制微信。

基于代码实现的功能，我提炼出项目可搜索的核心关键词（看图看视频、SAAS、多租户、多城市、H5、内容引流、客服微信复制、图片视频展示平台、广告位、域名、内容池、按需分发等），据此产出多组 SEO 优化标题，按用途分类。

---

## 一、主标题（产品定位类）

看图看视频 SAAS 多租户多城市 H5 内容展示与引流平台 一套程序开 N 个站站群系统源码

1. 看图看视频 SAAS 多租户多城市 H5 内容展示与引流平台

2. 多城市看图看视频 SAAS 系统 · 一套程序开 N 个站

3. SAAS 多租户多城市图片视频展示 H5 引流源码

4. 看图看视频多城市内容分发平台 · 多租户独立站点源码

5. 多租户 SAAS 图片视频 H5 展示站群系统源码

## 二、关键词堆叠类（覆盖搜索词）

6. 看图看视频系统_多城市内容平台_SAAS 多租户_H5 引流源码

7. 图片视频展示 H5_多城市筛选_客服微信复制_站群 SAAS 源码

8. 多租户看图看视频平台_内容池分发_广告位引流_H5 源码

9. 城市地区价格三级筛选_图片视频 H5 展示_多租户 SAAS 源码

10. SAAS 站群系统_多城市内容管理_微信引流_H5 源码

## 三、痛点/场景类（转化导向）

11. 一套程序管所有城市内容，看图看视频 SAAS 多城市 H5 源码

12. 不用逐个站上传内容：多城市自动分发看图看视频 SAAS 系统

13. 访客复制微信直接成交的看图看视频 H5 引流平台源码

14. 内容集中管理、多站按城市分发 · SAAS 多租户看图看视频系统

15. 手机端看图看视频内容站群，客服微信引流一体源码

## 四、功能卖点类（突出特性）

16. 多租户数据隔离 · 城市地区价格三级筛选 · 看图看视频 SAAS 源码

17. 内容池自动同步 + 租户自主发布 · 多城市看图看视频 H5 系统

18. 图片全屏看 + 视频就地播 · 多城市看图看视频引流源码

19. 独立站点名/客服电话/广告位 · SAAS 多城市看图看视频平台

20. 复制链接即投放、二维码一键生成 · 多租户 H5 内容引流源码

21. 支持本地与云存储、多域名分配 · 看图看视频 SAAS 站群源码

22. 到期自动下线、停用即时失效 · 多城市内容管理 SAAS 系统

## 五、长尾/问句式（匹配搜索意图）

23. 看图看视频系统源码怎么做多城市内容分发

24. 多租户 SAAS 图片视频展示平台源码哪家好

25. 如何用一套程序开多个看图看视频 H5 站点

26. 客服微信引流的内容展示 H5 源码是什么

27. 支持城市地区价格三级筛选的看图看视频源码

## 六、描述性副标题（可作 meta descri-ption 或副标）

28. 集中管理图片视频内容，按城市自动分发到各站点，访客复制客服微信即完成引流。

29. SAAS 多租户架构，每个站独立站点名、客服电话、开通城市与广告位，数据互不干扰。

30. 一套源码同时提供多租户管理后台与手机端 H5 展示，覆盖内容供给、筛选、看视频、复制引流全流程。

---

说明：以上标题均以代码实际功能为依据拟定，核心可检索词为"看图看视频、SAAS、多租户、多城市、H5、内容展示、引流、客服微信、站群、源码"，可按投放渠道挑选或组合（如主标题取 1-5 一条，副标取 28-30 一条）。

定制看需求，一般几小时内完成，也不贵。