抖音小程序 - 小区二手交易
小区二手交易演示小程序，面向社区居民，提供闲置物品浏览、分类筛选、商品详情、发布上架、编辑删除、收藏购买与订单管理等功能，支持双列卡片浏览与价格排序，纯前端实现，数据本地模拟，便于社区闲置交易类小程序二次开发与教学演示。
￥0.88
原价 ￥0.00
商品详情介绍
抖音小程序 - 小区二手交易
一、商品详情介绍
「小区二手交易」是一款面向小区居民、专注于邻里闲置物品流转的演示小程序，以「发布闲置 — 浏览发现 — 下单交易 — 订单管理」为主线，完整还原社区闲置交易的核心场景。界面采用活泼亲民的橙绿配色，搭配双列瀑布商品卡、中间凸起的发布按钮、价格折扣展示与订单流程，营造轻松愉悦的邻里交易氛围。
本程序为纯前端原生抖音小程序，所有数据均通过本地 mock-api.js 模拟接口读写，无需后端服务即可独立运行，适合作为社区电商、闲置交易类小程序的二次开发模板或教学演示项目。
二、核心功能
1. 首页（邻里闲置）
- 顶部搜索栏：支持按商品标题、描述关键词搜索
- 渐变 Banner：闲置流转计划主题 + 在售 / 我的 / 收藏统计
- 八大分类九宫格：数码电子、图书教材、家具家电、服饰鞋包、母婴玩具、运动户外、食品酒水、其他闲置
- 热门好物（双列卡片，带「邻里推荐」火焰标识）
- 最新发布（双列卡片，本人发布的商品带「我的」标记）
2. 全部分类
- 分类列表：每个分类带图标、名称、在售数量
- 一键跳转到对应分类商品列表
3. 分类列表
- 分类标签横向筛选
- 排序切换：最新 / 价格低 / 价格高
- 关键词实时搜索（带清除按钮）
- 双列商品瀑布卡片
4. 商品详情
- 渐变 Hero 头部：商品图标 + 在售 / 售出状态 + 新旧程度
- 价格卡：售价、原价、折扣百分比
- 商品描述、交易地点、发布时间、浏览数
- 卖家信息卡（含「邻里认证」标签）
- 相关推荐（同类商品双列展示）
- 底部操作栏：
- 买家：收藏 / 立即购买（带二次确认）
- 卖家：标记售出 / 编辑商品
5. 发布闲置
- 表单填写：标题、分类、新旧程度、售价、原价、交易地点、描述
- 商品图标可视化选择（6 种预设图标）
- 输入校验与提交反馈
6. 编辑商品
- 复用发布表单，回填原商品数据
- 支持保存修改与删除商品（带二次确认）
7. 订单管理
- 三 Tab 筛选：全部 / 我买入 / 我卖出
- 订单卡片：订单号、状态、商品信息、交易对方、交易地点、金额
- 待确认订单支持「确认完成」
8. 个人中心
- 渐变 Hero 用户卡片（含小区、楼栋、信用分）
- 数据统计：在售、收藏、卖出、买入
- 我的闲置（双列卡片，带在售 / 已售标记）
- 我的收藏
- 更多功能菜单：编辑资料、订单、帮助、关于、重置演示数据
三、使用场景
| 场景 | 适用对象 |
|---|---|
| 小区邻里闲置物品交易 | 物业社区、小区业主群 |
| 二手书店 / 跳蚤市场线上化 | 校园、社区跳蚤市场组织者 |
| 母婴闲置、数码二手交易 | 母婴群、数码爱好者社群 |
| 社区电商类小程序二次开发模板 | 独立开发者、外包团队 |
| 电商交易类小程序教学实训项目 | 编程培训机构、高校实训课程 |
四、交付内容
1. 源码包
- 文件名：
源码_小区二手交易.zip - 内容：完整可运行的抖音小程序源代码
- 目录结构：
源码_小区二手交易/ ├── app.js # 小程序入口（含版本号缓存清理机制） ├── app.json # 全局配置（8 个页面 + 自定义 tabbar） ├── app.ttss # 全局样式（CSS 变量主题） ├── project.config.json # 抖音开发者工具配置 ├── assets/ │ └── icons/ # 图标库（9 色 × 67 图标） ├── components/ │ ├── tabbar/ # 底部导航组件（含中间凸起发布按钮） │ └── empty/ # 空状态组件 ├── utils/ │ └── mock-api.js # 模拟接口（商品 / 订单 增删改查） └── pages/ # 8 个业务页面 ├── index/ # 首页 ├── category/ # 全部分类 ├── category-list/ # 分类列表 ├── goods-detail/ # 商品详情 ├── publish/ # 发布闲置 ├── edit-goods/ # 编辑商品 ├── order/ # 订单管理 └── my/ # 个人中心
2. 文档
项目标题.txt：项目正式名称源码摘要.txt：100 字以内源码用途简介商品详情介绍.md：本文档（功能介绍 / 使用场景 / 交付内容）
五、技术特点
- 原生开发：使用抖音小程序原生框架，无第三方 UI 库依赖
- 数据模拟：完整的 mock-api 接口层，模拟商品 / 订单的增删改查、收藏、浏览、购买、售出
- 缓存管理：
APP_VER版本号机制，版本升级时自动清空旧数据，保证真机调试始终使用最新数据 - 响应式布局：采用
rpx+ 百分比 +calc()布局，双列商品卡片在不同机型保持一致 - 自定义导航：
navigationStyle: custom，完美适配状态栏与原生胶囊按钮 - 特色交互：中间凸起的发布按钮，增强发布引导
- 组件化：封装 tabbar、empty 公共组件，便于复用
六、运行方式
- 下载并安装「抖音开发者工具」
- 解压
源码_小区二手交易.zip - 开发者工具中选择「导入项目」，目录指向解压后的
源码_小区二手交易文件夹 - AppID 填写自己申请的小程序 AppID（或使用测试号）
- 点击「预览」或「真机调试」即可运行
提示：本项目为纯演示用途，不涉及真实支付与接口调用，所有商品信息与交易数据均为虚拟内容。