更新记录

1.0.0（2025-11-05） 下载此版本

把一些主要的核心页面api改成静态数据，让学习者可以直接运行并查看效果

平台兼容性

上门宠物照护服务平台 - 项目分析报告

📋 项目概述

项目名称：上门宠物照护服务平台（上门喂养）
项目类型：O2O上门服务预订平台
业务领域：宠物照护服务
项目版本：v1.0.0

系统简介

这是一个基于 uni-app 开发的宠物照护服务预订平台，为用户提供上门喂养宠物的服务。平台连接宠物主人和专业喂养员，提供包括上门喂猫、遛狗、异宠喂养等服务。同时，平台还集成了宠物用品商城、积分系统、会员体系等功能，打造完整的宠物服务生态。

🎯 系统主题与定位

核心业务

• 主营业务：上门宠物照护服务（喂养、遛狗、洗护等）
• 辅助业务：宠物用品商城
• 增值服务：VIP会员、积分系统、邀请分享

目标用户

1. 宠物主人（C端用户）

   • 需要短期或长期宠物照护服务
   • 出差、旅行期间无法照看宠物
   • 工作繁忙，需要上门遛狗服务

2. 宠物喂养员（B端服务提供者）

   • 独立的喂养员端小程序
   • 接单、服务、结算

使用教程

1.manifest.json源码视图中拉到最底部填写h5的腾讯地图key 2.运行h5/小程序测试

🏗️ 系统架构

技术架构

┌─────────────────────────────────────────────────┐
│                   前端应用层                      │
├─────────────────────────────────────────────────┤
│  微信小程序端  │   H5端   │   App端（未来）      │
├─────────────────────────────────────────────────┤
│              uni-app 跨平台框架                  │
│                  (Vue 2)                        │
├─────────────────────────────────────────────────┤
│   UI组件层    │  业务组件层  │  工具函数层        │
│   (uv-ui)     │  (自定义)    │  (utils)          │
├─────────────────────────────────────────────────┤

项目结构

newPetCare/
├── pages/                    # 主包页面（Tab页面）
│   ├── index/               # 首页 - 服务展示和预订
│   ├── mall/                # 商城首页
│   ├── order/               # 订单中心
│   ├── user/                # 个人中心
│   ├── login/               # 登录页
│   └── agreement/           # 协议文档
│
├── subPack/                 # 分包页面（子页面）
│   ├── AD_index/           # 首页相关子页面
│   │   ├── placeAnOrder.vue      # 下单页
│   │   ├── selectCity.vue        # 城市选择
│   │   ├── address.vue           # 地址管理
│   │   ├── addPatient.vue        # 添加宠物
│   │   └── ...
│   ├── AD_mall/            # 商城相关子页面
│   │   ├── goodsDetail.vue       # 商品详情
│   │   ├── cart.vue              # 购物车
│   │   ├── orderConfirm.vue      # 订单确认
│   │   └── ...
│   ├── AD_order/           # 订单相关子页面
│   │   ├── orderList.vue         # 订单列表
│   │   ├── orderDetail.vue       # 订单详情
│   │   └── evaluate.vue          # 评价
│   ├── AD_user/            # 用户相关子页面
│   │   ├── userInfo.vue          # 个人信息
│   │   ├── addressList.vue       # 地址列表
│   │   ├── vip.vue               # VIP会员
│   │   └── ...
│   └── AD_serviceCenter/   # 服务中心子页面
│       ├── coupon.vue            # 优惠券
│       ├── myPoints.vue          # 我的积分
│       ├── share.vue             # 分享
│       ├── withdrawal.vue        # 提现
│       └── ...
│
├── components/              # 公共组件
│   ├── myButton/           # 自定义按钮
│   ├── dialogMy/           # 对话框
│   ├── heaeder/            # 页面头部
│   ├── service/            # 客服组件
│   └── noData/             # 空数据组件
│
├── utils/                   # 工具函数
│   ├── config.js           # 配置文件
│   ├── http.js             # HTTP请求封装
│   ├── utils.js            # 通用工具函数
│   ├── user.js             # 用户相关
│   ├── unipay.js           # 支付相关
│   ├── upload.js           # 上传相关
│   └── location.js         # 定位相关
│
├── static/                  # 静态资源
│   ├── css/                # 样式文件
│   ├── tab/                # 底部导航图标
│   ├── index/              # 首页图标
│   └── other/              # 其他图标
│
├── uni_modules/             # uni-app插件
│   ├── uv-ui/              # UI组件库
│   └── ...                 # 其他插件
│
├── common/                  # 公共资源
│   └── share.js            # 分享配置
│
├── App.vue                 # 应用入口
├── main.js                 # 主入口文件
├── pages.json              # 页面配置
├── manifest.json           # 应用配置
└── uni.scss                # 全局样式变量

🎨 功能模块详解

1. 首页模块 (pages/index/)

主要功能

• 服务类型切换

  • 宠物喂养服务（主要服务）
  • 其他服务（扩展服务）

• 位置服务

  • 自动获取当前位置（支持微信小程序和H5）
  • 手动选择位置（地图选点）
  • 城市切换

• 服务预订

  • 选择期望上门时间
  • 快速下单入口
  • 立即预订功能

• 喂养员展示

  • 周边喂养员列表（横向滚动）
  • 显示喂养员信息：头像、昵称、性别、距离、标签、简介
  • 点击查看喂养员详情

• 商品推荐

  • 每日热销商品展示
  • 商品图片、名称、价格
  • 跳转商品详情

• 服务介绍

  • 服务说明卡片
  • 跳转详细介绍页面

技术特点

• 集成腾讯地图API进行定位
• 支持H5平台的位置获取（已修复）
• 使用 swiper 组件实现轮播图
• scroll-view 实现横向滚动列表

2. 商城模块 (pages/mall/)

主要功能

• 商品列表

  • 瀑布流布局展示商品
  • 商品分类
  • 搜索功能

• 商品详情 (subPack/AD_mall/goodsDetail.vue)

  • 商品图片轮播
  • 商品详情展示
  • 规格选择
  • 加入购物车
  • 立即购买

• 购物车 (subPack/AD_mall/cart.vue)

  • 商品列表
  • 数量调整
  • 全选/反选
  • 合计金额
  • 去结算

• 订单确认 (subPack/AD_mall/orderConfirm.vue)

  • 收货地址选择
  • 商品清单
  • 优惠券选择
  • 支付方式选择
  • 提交订单

• 商城订单 (subPack/AD_mall/mallOrderList.vue)

  • 订单列表（待付款、待发货、待收货、已完成）
  • 订单详情
  • 订单操作（支付、确认收货、申请售后等）

3. 订单模块 (pages/order/)

主要功能

• 订单列表 (subPack/AD_order/orderList.vue)

  • 多状态筛选（全部、待接单、服务中、已完成等）
  • 下拉刷新
  • 上拉加载更多
  • 订单搜索

• 订单详情 (subPack/AD_order/orderDetail.vue)

  • 订单状态展示
  • 服务信息（时间、地址、服务项目）
  • 喂养员信息
  • 宠物信息
  • 费用明细
  • 订单操作（取消、支付、联系喂养员等）

• 订单评价 (subPack/AD_order/evaluate.vue)

  • 星级评分
  • 文字评价
  • 图片上传
  • 标签选择

4. 用户中心模块 (pages/user/)

主要功能

• 个人资料

  • 用户信息展示（头像、昵称、手机号）
  • 个人信息编辑 (subPack/AD_user/editUserInfo.vue)
  • VIP会员状态 (subPack/AD_user/vip.vue)

• 宠物管理

  • 宠物卡片 (subPack/AD_user/userCard.vue)
  • 添加宠物 (subPack/AD_index/addPatient.vue)

• 地址管理

  • 地址列表 (subPack/AD_user/addressList.vue)
  • 添加/编辑地址 (subPack/AD_user/addressEdit.vue)

• 积分系统

  • 我的积分 (subPack/AD_serviceCenter/myPoints.vue)
  • 积分明细
  • 积分兑换

• 优惠券

  • 我的优惠券 (subPack/AD_serviceCenter/coupon.vue)
  • 领取优惠券 (subPack/AD_serviceCenter/getCoupon.vue)
  • 优惠券使用记录

• 分享邀请

  • 分享海报 (subPack/AD_serviceCenter/share.vue)
  • 我的分享记录 (subPack/AD_serviceCenter/myShare.vue)
  • 邀请奖励

• 资金管理

  • 余额显示
  • 收益记录 (subPack/AD_serviceCenter/moneyRecord.vue)
  • 提现功能 (subPack/AD_serviceCenter/withdrawal.vue)
  • 提现记录 (subPack/AD_serviceCenter/withdrawalRecord.vue)

• 消息通知

  • 消息中心 (subPack/AD_user/messageNotic.vue)
  • 系统通知 (subPack/AD_user/systemNotic.vue)
  • 通知详情 (subPack/AD_user/systemNoticDetail.vue)

• 其他功能

  • 关注的喂养员 (subPack/AD_serviceCenter/follow.vue)
  • 设置 (subPack/AD_serviceCenter/setting.vue)
  • 帮助中心 (subPack/AD_serviceCenter/helpCenter.vue)
  • 关于我们 (subPack/AD_serviceCenter/aboutWe.vue)
  • 客服 (subPack/AD_serviceCenter/serviceWe.vue)

5. 登录模块 (pages/login/)

主要功能

• 微信小程序登录

  • 微信授权登录
  • 获取手机号授权
  • 一键登录

• H5登录

  • 手机号输入
  • 短信验证码登录
  • 60秒倒计时

• 协议确认

  • 用户服务协议
  • 隐私政策
  • 勾选确认

• 游客模式

  • "我先看看"功能
  • 无需登录浏览部分内容

技术特点

• 平台识别（H5/小程序）
• 条件渲染不同登录方式
• 验证码发送和校验
• Token存储和管理

6. 下单流程模块 (subPack/AD_index/)

核心页面

• 下单页 (placeAnOrder.vue)

  • 服务项目选择
  • 宠物信息选择/添加
  • 服务地址选择/添加
  • 服务时间选择
  • 特殊需求备注
  • 费用计算
  • 优惠券使用
  • 提交订单

• 宠物管理 (addPatient.vue)

  • 宠物照片上传
  • 宠物信息（名称、品种、年龄、性别）
  • 健康状况
  • 特殊说明

• 地址管理 (address.vue)

  • 地址列表
  • 添加新地址
  • 编辑地址
  • 设置默认地址

• 城市选择 (selectCity.vue)

  • 三级联动（省市区）
  • 搜索功能
  • 定位当前城市

7. 商家/喂养员模块

主要功能

• 喂养员列表 (searchHospital.vue - 已改造)

  • 搜索喂养员
  • 喂养员列表展示
  • 分页加载

• 喂养员详情 (hospitalDetail.vue)

  • 喂养员基本信息
  • 服务评价
  • 服务案例
  • 擅长服务
  • 服务范围
  • 关注/取消关注

• 添加关注 (addFollow.vue)

  • 关注喂养员
  • 查看关注列表

🔧 技术栈详解

前端技术

核心框架

• uni-app
  • 版本：基于 Vue 2
  • 编译器版本：3
  • 跨平台支持：微信小程序、H5、App

UI框架

• uv-ui - 全功能UI组件库
  • Button（按钮）
  • Navbar（导航栏）
  • Swiper（轮播）
  • Icon（图标）
  • Form（表单）
  • Input（输入框）
  • Popup（弹窗）
  • Toast（提示）
  • Modal（模态框）
  • Tabs（标签页）
  • Rate（评分）
  • Calendar（日历）
  • Picker（选择器）
  • Upload（上传）
  • Waterfall（瀑布流）
  • 等50+组件

样式方案

• SCSS/SASS
  • Sass实现：node-sass
  • 全局样式：static/css/index.css
  • 样式变量：uni.scss

地图服务

• 腾讯地图 API
  • 定位功能
  • 地图选点
  • 地址解析
  • 距离计算
  • H5 Key: 6OBBZ-X5AWW-ZYYRY-RRJ77-F7425-2LBF4

状态管理

• Vuex（轻量级）
  • 使用 Vue.mixin 实现全局状态共享
  • localStorage 持久化存储
  • Event Bus 事件通信

工具库

• 加密库

  • MD5加密（md5utf8.js）
  • Base64编码（base64.js）
  • Crypto加密（crypto.js）

• 其他工具

  • 拼音转换（pinyin.js）
  • 表情列表（emojoList.js）
  • 事件总线（event-bus.js）

后端技术

API接口

• 协议：HTTPS
• 架构：RESTful API
• 认证方式：JWT Token (Authorization Header)
• 数据格式：JSON

主要接口模块

1. 登录认证

   • Login/SendSmsCode - 发送短信验证码
   • Login/SmsCodeLogin - 短信验证码登录
   • WechatOpen/GetWxOpenId - 获取微信OpenID
   • WechatOpen/GetWxPhone - 获取微信手机号

2. 用户管理

   • BUser/LogonBUserInfo - 获取用户信息
   • BUser/UpdateParentBUserId - 更新邀请关系
   • 用户信息编辑、VIP管理等

3. 服务预订

   • 服务列表查询
   • 订单创建
   • 订单查询
   • 订单状态更新

4. 商城

   • 商品列表
   • 购物车管理
   • 订单管理

5. 系统配置

   • SysConfigure/GetConfigureByKey - 获取系统配置
   • 主题色、图标、文案等配置

6. 喂养员

   • Hospital/HospitalPaged - 喂养员列表
   • 喂养员详情
   • 关注管理

文件存储

• OSS存储：阿里云OSS
• Base URL：https://newpeizhen.oss-cn-beijing.aliyuncs.com
• 用途：图片、视频等静态资源

支付系统

• 微信支付
  • 小程序支付
  • H5支付
  • 统一下单
  • 支付回调

平台配置

微信小程序

{
  "appid": "",
  "permissions": ["位置权限"],
  "requiredPrivateInfos": ["chooseLocation", "getLocation"]
}

H5平台

{
  "router": { "mode": "hash" },
  "devServer": { "port": 8080 },
  "title": "宠物喂养",
  "sdkConfigs": {
    "maps": {
      "qqmap": { "key": "" }
    }
  }
}

App平台

• 支持Android和iOS
• 需要配置相关权限
• 需要打包和签名

📱 用户使用流程

典型用户场景

场景1：首次使用 - 预订宠物喂养服务

1. 打开小程序/H5
   ↓
2. 查看首页服务介绍
   ↓
3. 点击"我先看看"游客模式浏览
   ↓
4. 决定下单，点击"立即下单"
   ↓
5. 跳转登录页面
   ↓
6. 微信授权登录/手机号验证码登录
   ↓
7. 勾选协议，完成登录
   ↓
8. 跳转下单页面
   ↓
9. 选择/添加宠物信息
   ↓
10. 选择/添加服务地址
    ↓
11. 选择服务时间
    ↓
12. 填写特殊需求
    ↓
13. 选择优惠券
    ↓
14. 确认订单，选择支付方式
    ↓
15. 完成支付
    ↓
16. 等待喂养员接单
    ↓
17. 查看订单详情，联系喂养员
    ↓
18. 服务完成后，收到通知
    ↓
19. 进行服务评价
    ↓
20. 完成整个服务流程

场景2：老用户 - 快速下单

1. 打开小程序（已登录）
   ↓
2. 首页点击"立即下单"
   ↓
3. 选择已保存的宠物信息
   ↓
4. 选择已保存的地址
   ↓
5. 选择服务时间
   ↓
6. 使用优惠券
   ↓
7. 提交订单并支付
   ↓
8. 完成下单（全程不到1分钟）

场景3：商城购物

1. 点击底部"商城"Tab
   ↓
2. 浏览商品列表
   ↓
3. 点击商品查看详情
   ↓
4. 选择规格，加入购物车
   ↓
5. 继续浏览或前往购物车
   ↓
6. 购物车调整数量
   ↓
7. 去结算
   ↓
8. 选择收货地址
   ↓
9. 选择优惠券
   ↓
10. 提交订单并支付
    ↓
11. 等待发货
    ↓
12. 确认收货
    ↓
13. 评价商品

🎨 设计特色

UI设计风格

• 色彩方案：动态主题色（可配置）

  • 主题色：从系统配置获取（bgColor）
  • 文字色：从系统配置获取（textColor）
  • 背景色：#edeaf1（淡紫灰色）

• 设计语言

  • 卡片式设计
  • 圆角元素（border-radius）
  • 阴影效果
  • 渐变背景

• 图标系统

  • uv-icon 组件
  • 自定义图标素材
  • 统一图标风格

交互设计

• 导航方式

  • 底部Tab导航（3个Tab）
  • 页面返回（左上角）
  • 手势滑动返回

• 反馈机制

  • Toast提示
  • Loading加载
  • 空数据提示
  • 错误提示

• 动画效果

  • 页面过渡动画
  • 组件展开/收起动画
  • 轮播图切换动画

用户体验优化

1. 性能优化

   • 分包加载（主包 + 子包）
   • 图片懒加载
   • 列表分页加载
   • 防抖/节流处理

2. 便捷功能

   • 自动定位
   • 记住登录状态
   • 保存常用地址
   • 保存宠物信息
   • 一键下单

3. 容错处理

   • 位置获取失败，提供手动选择
   • 网络请求失败，友好提示
   • 支付失败，可重新支付

🔐 安全性设计

用户认证

• JWT Token认证
• Token存储在本地
• 请求头携带Token
• Token过期自动跳转登录

数据加密

• 密码MD5加密
• 敏感数据Base64编码
• HTTPS加密传输

权限控制

• 角色标识（U-RoleType: User）
• 接口权限验证
• 页面访问控制

隐私保护

• 位置信息授权
• 手机号授权
• 隐私政策和用户协议

📊 系统配置管理

动态配置系统

系统支持通过后台配置动态调整前端展示，无需重新发布：

配置项列表

const configKeys = [
  'default_head',        // 默认头像
  'groupBag_icon',       // 图标
  'user_vipIcon',        // VIP图标
  'bgColor',             // 主题背景色
  'textColor',           // 主题文字色
  'service_phone',       // 客服电话
  'companyName',         // 公司名称
  'companyUrl',          // 公司网址
  'companyEmail',        // 公司邮箱
  'loginPageBg',         // 登录页背景图
  'invite_user_text',    // 邀请文案
  'nodata',              // 空数据图标
  // ... 更多配置项
]

配置加载

• 时机：App启动时（App.vue onLaunch）
• 接口：SysConfigure/GetConfigureByKey
• 存储：全局数据 + localStorage
• 使用：getApp().globalData.sysConfig

🚀 部署和发布

开发环境

{
  "开发服务器": "localhost:8080",
  "调试模式": true,
  "热更新": "支持"
}

生产环境

{
  "API地址": "https://XXX/api/",
  "OSS地址": "https://newpeizhen.oss-cn-beijing.aliyuncs.com",
  "HTTPS": true
}

发布渠道

1. 微信小程序

   • 微信开发者工具编译
   • 上传审核
   • 发布上线

2. H5

   • npm run build:h5
   • 部署到Web服务器
   • 配置域名和HTTPS

3. App

   • HBuilderX云打包
   • 应用商店上架

📈 业务数据流

核心业务流程

订单流程

创建订单
   ↓
待支付 → 已取消
   ↓
已支付 → 待接单
   ↓
喂养员接单 → 待服务
   ↓
服务中
   ↓
服务完成 → 待评价
   ↓
已评价 → 订单完成

商城订单流程

创建订单
   ↓
待付款 → 已取消
   ↓
待发货
   ↓
待收货
   ↓
待评价
   ↓
已完成 / 售后

🔌 扩展性设计

分包策略

• 主包：Tab页面、登录、基础组件（< 2MB）
• 子包：功能页面、详情页面、设置页面

组件化设计

• 全局组件：myButton、dialogMy、heaeder、service、noData
• 页面组件：复用性强的UI组件
• 业务组件：特定业务逻辑组件

插件系统

• uni_modules：支持插件化开发
• 第三方组件：uv-ui等
• 自定义插件：可按需添加

📝 技术亮点

1. 跨平台能力

• 一套代码，多端运行
• 平台差异化处理（条件编译）
• 统一的API封装

2. H5位置获取优化

• 解决H5平台定位问题
• 权限友好提示
• 降级方案（手动选点）

3. 动态主题配置

• 后台配置主题色
• 无需重新发布
• 实时生效

4. 分包优化

• 主包体积控制
• 按需加载子包
• 提升首屏加载速度

5. 组件化开发

• 高复用性
• 统一风格
• 易于维护

6. 工具函数封装

• HTTP请求统一封装
• 错误处理
• Token管理
• 工具函数库

🐛 已知问题和优化建议

已解决问题

✅ H5平台位置获取失败 - 已修复
✅ Therapist未定义错误 - 已修复
✅ 商家板块页面改造 - 已完成

优化建议

性能优化

• [ ] 图片懒加载优化
• [ ] 长列表虚拟滚动
• [ ] 接口请求缓存
• [ ] 减少不必要的渲染

功能优化

• [ ] 添加订单搜索功能
• [ ] 增加历史订单统计
• [ ] 完善用户反馈机制
• [ ] 增加在线客服功能

用户体验优化

• [ ] 添加骨架屏
• [ ] 优化加载动画
• [ ] 完善空状态提示
• [ ] 添加操作引导

代码优化

• [ ] 统一命名规范（hospital → merchant）
• [ ] 抽取公共方法
• [ ] 优化组件结构
• [ ] 完善注释文档

📚 相关文档

项目文档

• 商家板块页面改造说明.md - 商家功能改造文档
• H5平台位置获取修复说明.md - H5定位问题修复文档
• H5位置获取问题快速排查.md - 问题排查指南
• H5平台Therapist未定义错误修复说明.md - 错误修复文档

技术文档

• uni-app官方文档：https://uniapp.dcloud.net.cn/
• uv-ui组件文档：https://www.uvui.cn/
• 腾讯地图API：https://lbs.qq.com/

👥 团队协作

开发规范

• 使用统一的代码风格
• 遵循组件化开发原则
• 及时更新文档
• 代码注释清晰

版本控制

• Git版本管理
• 分支管理策略
• 提交信息规范

📞 联系方式

项目名称：上门喂养服务平台
技术架构：uni-app + Vue2 + uv-ui
开发公司：广州硕米信息技术有限公司 API域名：https://XXX

📄 许可证

本项目为商业项目，版权所有。

文档生成日期：2025-11-04
文档版本：v1.0
最后更新：2025-11-04