原型链接：

• 后台：https://orgnext.modao.cc/app/kv7f04u4y10fel 《老人天地后台》
• 用户端：https://orgnext.modao.cc/app/kv7f1bcy4855yo 《老人天地》

一、用户端

1. 图片分类

• 展示内容：分类封面图、分类标题，调取图片分类管理的接口，根据所属模块对应展示；
• 排序：按照后台设置的排序从大到小进行排列，其次根据ID的从大到小进行排列；
• 分页展示，每页10条，支持上拉加载，下拉刷新；
• 点击分类进入图片列表；

2. 图片列表

• 排列和后台管理系统的排序一致；
• 分页展示，每页10条，支持上拉加载，下拉刷新；
• 点击图片列表进入图片详情；

3. 图片详情

• 图片下载参照视频详情；
• 详情页面的标题和描述展示分类时创建的分类标题和分类图片介绍，每张图片的标题和描述是一样的；
• 支持上下切换，切换到第一张的时候提示‘已经是第一张图片’，最后一张提示‘已经是最后一张图片’；
• 分享：https://docs.uninote.com.cn/book/9/2930#E053FD8CBA
• 加载
  • 加载当前页面前后3页；

4. 老年天地视频板块的分享

• 参照公共样式：https://docs.uninote.com.cn/book/9/2930#905463EC04

二、cms后台系统

1. 在其他配置的短视频分类管理下新增页面‘图片分类管理’

1.1 查询

• ID、所属模块（全部+组别）、状态（全部、上线、下线）进行精确查询，分类标题进行模糊查询；

1.2 新增

• 所属模块：单项下拉选择，来源老年天地子集的分类；
• 封面配图（只可选择一张）:
  • 从本地选择图片后，进入图片的裁剪界面；
  • 如用户上传的图片没有将蓝色框铺满，默认自动放大图片铺满蓝色框；
  • 图片只截取蓝色框部分（尺寸与用户端图片尺寸同步），不管图片有没有铺满蓝色框；
  • 鼠标滚动可以将图片进行放大、缩小的操作；
  • 也可以对蓝色框进行上下左右的拖动，但不可放大缩小，图片的边缘不能超过蒙版展示的边缘；
  • 点击取消，取消当前操作；
  • 点击确定，裁剪图片，返回到新增界面，图片回显；
  • 图片上传成功，鼠标悬停的时候出现放大及删除按钮；
• 分类标题：手动输入，不超过20个字，英文、标点符号、数字、汉字、空格均算一个字；
• 分类图片介绍：手动输入，不超过50个字，英文、标点符号、数字、汉字、空格均算一个字；
• 排序：
  • 手动输入，只支持自然数，默认为空（后台记为0），可以重复；
  • 如输入非自然数，红色文本提示‘仅支持自然数’；
• 状态：
  • 手动选择，选项为：上线、下线；
  • 默认选择下线状态；
  • 上线状态该分类才在前端显示，下线状态前端不显示；

1.3 列表

• 列表展示内容：ID、图片封面图预览、分类标题、所属模块、图片张数、状态、排序、操作（编辑、删除、上传、查看）；
• 列表排序：后台系统列表统一按照ID的倒序进行排列；

1.4 列表操作栏

1.4.1 编辑

• 内容回填，图片张数不可修改；

1.4.2 删除

• 删除当前分类以及当前分类的所有图片，二次弹框确认，弹框内容：确定删除当前分类及当前分类的所有图片吗？

1.4.3 上传

• 针对当前分类进行上传图片；

• 仅支持jpg、png、jpeg后缀的文件；

• 支持批量上传，点击上传页面的打开按钮后，回到点击上传的页面，并弹出后台上传的遮罩层；

  • 点击X，遮罩层关闭，后台继续上传，且上传按钮更改成‘上传中’直至图片上传完成；
  • 再次点击‘上传中’按钮的时候，弹出遮罩层；
  • 上传成功的部分，展示在列表；
  • 查看明细：展示失败的图片明细，以excel表格形式呈现，表格内容：序号、图片昵称（为本地的图片昵称）、失败原因

• 后端根据MD5值对当前分类的所有图片进行自动去重，列表里面自动覆盖相同的MD5值；

• 上传的每一张图片自适应列表单张图片的宽高，等比自动缩放；

• 上传按钮改为‘上传中’，上传完成的时候展示‘上传’

  • 用户退出当前页面或刷新页面，参照笔记文档的弹框；
    • 点击‘重新加载’或‘离开’，刷新页面或跳转到目标页面，后台将终止未上传的图片，并且查看上传详情的记录消失；
    • 点击‘取消’，取消当前操作，继续停留在当前页面；
    • 弹窗参照笔记文档的弹框；

  1.4.4 查看

• 查看当前分类的所有图片；
• 标题旁边的数字：展示选中分类的图片张数，并且列表展示当前分类的图片；
• 点击标题右边的按钮，跳转到下图列表，再次点击又跳转到当前页面的图片布局；
• 下图列表默认展示10条，分页展示；
• 两种布局方式，只是前端页面布局展示问题，切换不请求接口；
  • 如：当前选择的布局方式1，page=5，page_size=10，切换到布局方式2，page依然是5，page_size依然是10，反之也成立；
• 查看上传详情：查看当前这一次已经上传的所有图片详情，excel表格形式呈现，表格内容：序号、图片昵称（为本地的图片昵称）、失败原因
  • 如：当前上传总条数100张，上传成功20张，上传失败1张，还有79张正在上传，此时点击查看上传详情的时候，excel表格展示21条数据；

1.4.4.1 查询

• 图片昵称：针对当前分类的所有图片昵称模糊搜索，支持回车查询；
• 下图区域
  • 已选择内容的数量大于0的时候，才展示当前栏，可以在此区域对选中的图片进行统一操作，如取消选择、删除、移动分类；
  • 全选是选择当前页面的所有图片，反选或点击取消选择的时候，此区域自动隐藏；

1.4.4.2 列表

• 默认展示2行，每行展示5张图片，默认展示10张，进行分页；
• 按照文件选择的顺序进行倒序排列；
• 如当前分类没有图片，展示缺省页，缺省页文字‘暂无相关数据’；
• 列表中图片操作，只针对单一图片操作；
• 鼠标悬停到图片的时候，出现图3、5、7样式，图片上方出现选择框、放大按钮和‘...’及蓝色边框，可以对当前图片进行相应操作；
• 点击放大按钮，出现遮罩层全屏查看当前图片，可以左右手动切换当前分类下的所有图片，切换到最后一张的时候，右箭头置灰；第一张图片的时候，左箭头置灰；点击非图片区域，回到列表页，见下图；
• 点击移动分组，出现图6弹框样式，进行下拉选择，调用图片分类管理的接口，移动后，相应数据同步更改；
• 点击删除，出现图2弹框样式，删除后，涉及当前分类的图片张数同步更改；
• 图片名称为本地的图片名称，图片名称不能超出单张图片的边框，超出省略；
• 鼠标双击图片昵称的时候出现下图样式，默认选中当前图片昵称，可以一键删除，点击回车保存该内容；
  • 选中后，再单击图片昵称就取消选中，见下图
    • 再次双击，昵称再次被选中