抖音小程序 - 农场租地
源码摘要（源码用途） 项目名称：抖音小程序 - 农场租地 【源码用途】 本源码是一套原生抖音小程序前端工程，用于生态农场的线上租地与农产品直销服务。 项目为纯前端实现，不调用任何后端 API，所有数据通过 tt.setStorageSync 持久化 在本机存储，开箱即用，无需服务器。 主要用途包括： 1. 地块认领 —— 浏览可租地块（蔬菜田/果园/稻田/亲子田/温室/花田），选作物、 选租期完成认领，认领后地块进入"我的地块"并开始种植。 2. 种植管理 —— 我的地块展示生长进度、健康值、种植阶段，支持一键浇水互动。 3. 农场商城 —— 农场直供的蔬菜、水果、米面、农副特产，分类浏览，一键下单。 4. 订单管理 —— 租赁订单与购买订单统一管理，按类型筛选。 5. 主题换肤 —— 5 套田园配色（田园绿/丰收金/泥土棕/晴空蓝/莓果红）实时切换。 【技术栈】 - 原生抖音小程序（TTML + TTSS + JS），douyinProjectType: native - 图标：IconPark 官方 PNG 图标包（assets/icon 60 枚 + tabbar 8 枚） - 图表：纯 CSS 进度条，零三方依赖 - 数据层：utils/store.js 本地存储 + 时间戳版本号强制清理机制 【自适应】 全 rpx 单位 + flex 布局，网格项统一 flex-basis:50% + min-width:0， 保证不同尺寸手机布局一致（每行稳定 2 列）。 【缓存机制】 版本号取 Date.now() 时间戳，每次冷启动必然与本地不一致，触发 clearStorageSync 全清 + 重写最新数据，保证每次真机调试都是全新状态。 【目录结构】 农场租地/ ├── app.js / app.json / app.ttss 全局配置与设计 Token ├── project.config.json 抖音开发者工具配置 ├── components/ │ ├── icon/ 图标组件（PNG 渲染） │ └── tabbar/ 自定义底部导航 ├── utils/store.js 数据层（示例数据 + 存储 + 主题） ├── assets/ │ ├── icon/ 60 个业务图标 PNG │ └── tabbar/ 8 个导航图标 PNG └── pages/ ├── index/ 首页（农场总览 + 我的地块 + 直供商品） ├── plots/ 地块列表（认领地块） ├── shop/ 农场商城 ├── plotDetail/ 地块详情 ├── rent/ 认领下单 ├── orders/ 我的订单 └── my/ 我的（地块 + 主题 + 设置） 【运行方式】 1. 用「抖音开发者工具」打开「农场租地」目录。 2. 填入自己的 AppID（或测试号）。 3. 点击编译即可预览；首次进入自动写入示例数据。 4. 真机调试：点「预览」生成新二维码，手机扫码进入，缓存自动全清为最新。
商品详情介绍
商品详情介绍
抖音小程序 - 农场租地
一款面向生态农场的「云种地」小程序。用户在线认领真实地块，全程托管种植，
24 小时监控查看，成熟后直送到家；同时可选购农场直供的新鲜农产品。
让都市人轻松拥有一片自己的田园。
一、功能介绍
1. 首页 · 农场总览
- 沉浸式渐变 Hero：农场名称、地址、天气、slogan、服务特色标签。
- 我的地块卡片：生长进度条 + 健康值 + 种植阶段 + 一键浇水互动。
- 种植流程图：播种 → 生长 → 成熟 → 配送，四步图示。
- 快捷入口：认领地块、农场商城、我的订单、实时监控。
- 农场直供：热门产品 2 列网格，封面渐变 + 价格 + 销量。
2. 认领地块
- 横幅引导：520 亩生态良田宣传。
- 地块卡片列表：6 类地块（蔬菜田/果园/稻田/亲子田/温室/花田），
每张含编号、面积、可种作物标签、价格、剩余数量。
3. 地块详情
- 沉浸式封面：地块名、描述、编号、状态标签。
- 核心数据：面积、土壤类型、可租块数。
- 可种作物：网格选择，选中高亮 + 勾选标记。
- 服务保障：24h 监控、有机种植、免费配送、专人托管。
- 底部价格 + 立即认领。
4. 认领下单（核心业务）
- 选作物：网格点选种植作物。
- 选租期：1/2/3 年，多年租赁自动折扣。
- 费用明细：租金 + 托管费 + 配送费透明展示。
- 下单成功动画：自动写入"我的地块"+ 生成订单。
5. 农场商城
- 分类筛选：时令蔬菜 / 新鲜水果 / 米面粮油 / 农副特产。
- 产品网格：每行 2 个，渐变封面 + 评分 + 销量 + 加购按钮。
- 购物车角标：实时显示已加数量。
- 一键下单：加入订单，跳转订单页。
6. 我的订单
- Tab 筛选：全部 / 租赁 / 购买。
- 订单卡片：封面图标 + 标题 + 描述 + 状态 + 金额。
- 状态标识：已完成 / 配送中 / 待处理。
7. 我的 · 农场主中心
- 会员主页：农场主身份、地块数、农友数。
- 我的地块：进度条 + 种植作物，点击查看详情。
- 主题换肤：5 套田园配色实时切换。
- 服务菜单：地块、订单、监控、钱包、优惠券、设置。
- 重置数据：一键恢复初始示例数据。
二、界面与体验亮点
- 田园风渐变设计：每页顶部主题渐变 + 光斑装饰，营造自然生机感。
- 5 套主题色：田园绿、丰收金、泥土棕、晴空蓝、莓果红，全局变量驱动。
- 60 枚农业图标：IconPark 官方 PNG，含作物、天气、自然元素，白色滤镜适配彩色背景。
- 种植进度可视化：渐变进度条 + 健康值 + 阶段标签，直观展示作物状态。
- 流畅动画：卡片逐级渐入、进度条增长、下单成功弹窗。
- 自适应网格：flex-basis + min-width:0 根治真机换行问题。
三、使用场景
| 角色 | 场景 |
|---|---|
| 都市白领 | 在线认领一块田，体验云种地，收获有机蔬菜直送到家。 |
| 亲子家庭 | 认领亲子体验田，带孩子了解农耕，寓教于乐。 |
| 健康饮食人群 | 商城购买农场直供的有机蔬菜、水果、大米。 |
| 生态农场主 | 作为数字化运营前台，吸引会员认领地块、购买产品。 |
| 小程序开发者 | 学习原生抖音小程序 UI、本地存储、主题换肤方案。 |
四、交付内容
项目源码（zip 压缩包）
- 完整抖音小程序原生工程，含 7 个页面、2 个自定义组件、数据层。
- 文件：
农场租地源码.zip
项目标题文档
- 文件：
项目标题.txt
- 文件：
源码摘要文档（源码用途）
- 含技术栈、目录结构、运行方式、缓存机制。
- 文件：
源码摘要.txt
商品详情介绍文档（本文档）
- 含功能介绍、界面亮点、使用场景、交付内容。
- 文件：
商品详情介绍.md
五、技术规格
- 平台：抖音小程序（原生，douyinProjectType: native），可迁移微信小程序。
- 网络：纯前端，无任何 API 调用，数据本地持久化。
- 图标：IconPark 官方 PNG，本地内置 68 枚（60 业务 + 8 tabbar）。
- 自适应：全 rpx + flex 布局，flex-basis + min-width:0 保证跨机型一致。
- 主题：5 套配色，CSS 变量 + 观察者广播，实时换肤。
- 缓存：Date.now() 时间戳版本号，每次冷启动强制清理旧缓存。
六、运行方式
- 安装并打开「抖音开发者工具」。
- 导入
农场租地目录，填入自己的 AppID（或测试号）。 - 点击「编译」，在模拟器中预览；首次进入自动写入示例数据。
- 真机调试：点「预览」生成新二维码，手机扫码进入，缓存自动全清为最新。