幺娘子灶台租赁
Go to file
2025-11-19 10:00:53 +08:00
.idea 配置更新 2025-08-13 11:23:14 +08:00
api 优化协议签署,使用动态协议路径 2025-09-15 17:23:09 +08:00
common/style 添加租赁申请背景图,修改导航栏样式, 2025-08-16 14:39:34 +08:00
components 增添续费时选择旧套餐 2025-09-13 17:47:26 +08:00
composables 通用分类分页加载器的完善3.0 2025-08-26 11:46:20 +08:00
config 修改租赁页面跳转到签订合同 2025-09-12 10:07:09 +08:00
enum profile_page icon update 2025-09-09 16:52:18 +08:00
mixins 首页静态设计完毕 2025-08-13 11:05:40 +08:00
page_user 实名认证0.6 2025-09-09 14:40:31 +08:00
pages Merge remote-tracking branch 'origin/master' 2025-11-19 09:58:41 +08:00
static page页面精简 2025-08-13 13:28:12 +08:00
store v2-v3登录配置的修改 2025-08-19 16:02:50 +08:00
uni_modules 安装协议表单 2025-09-10 11:06:11 +08:00
utils 添加lodash-es 2025-11-19 10:00:53 +08:00
.eslintrc.js 配置更新 2025-08-13 11:23:14 +08:00
.gitignore uni_modules 2025-09-09 18:03:31 +08:00
.prettierrc 配置更新 2025-08-13 11:23:14 +08:00
App.vue 优化定位弹窗显示位置,优化弹窗和表单提示文本 2025-09-04 14:47:02 +08:00
index.html 项目初始化 2025-08-12 15:38:25 +08:00
main.js 采用this.$uv.xxx方式使用api实现节流 2025-09-04 13:48:30 +08:00
manifest.json 优化定位弹窗显示位置,优化弹窗和表单提示文本 2025-09-04 14:47:02 +08:00
package-lock.json 添加lodash-es 2025-11-19 10:00:53 +08:00
package.json 添加lodash-es 2025-11-19 10:00:53 +08:00
pages.json 实现可签署代理商协议 2025-09-12 14:48:29 +08:00
README_ADD_CARD_UPLOAD.md 在添加账户的添加二维码输入框右侧上传图片,上传完毕成功返回二维码路径 2025-08-21 14:14:12 +08:00
README_AVATAR_UPLOAD.md 设置页面上传头像实现-多余测试页面和功能删减 2025-08-20 11:57:07 +08:00
README_IMAGE_UPLOAD.md 图片上传七牛云成功 2025-08-21 13:37:29 +08:00
README.md 配置更新 2025-08-13 11:23:14 +08:00
uni.promisify.adaptor.js 首页静态设计完毕 2025-08-13 11:05:40 +08:00
uni.scss 导航栏修正 2025-08-14 09:24:37 +08:00
vue.config.js 暂时能跑,但是布局存在问题 2025-09-02 10:31:44 +08:00

设备租赁应用

这是一个基于 uni-app 开发的设备租赁管理应用,提供设备租赁、管理和续费等功能。

功能特性

首页功能

  • 状态栏显示:显示时间和系统状态图标
  • 公司信息:显示当前公司名称和位置信息
  • 公告栏:滚动显示系统公告信息
  • 轮播图:展示推荐设备和产品信息
  • 设备列表:显示用户当前租赁的设备
  • 底部导航:快速切换不同功能模块

主要页面

  1. 首页 (pages/index/index.vue) - 应用主页面
  2. 登录页 (pages/login/login.vue) - 用户登录和注册

技术栈

  • 框架uni-app Vue3
  • 状态管理Vuex 4
  • 样式SCSS + CSS3
  • 图标SVG 矢量图标
  • 动画CSS3 动画效果
  • 代码规范ESLint + Prettier

依赖说明

核心依赖

  • @dcloudio/uni-app: uni-app 框架核心包
  • vue: Vue 3 框架
  • vuex: 状态管理库

开发依赖

  • eslint: 代码检查工具
  • eslint-plugin-vue: Vue 代码检查插件
  • @vue/eslint-config-prettier: ESLint 与 Prettier 集成
  • prettier: 代码格式化工具

安装依赖

npm install

开发命令

# 格式化代码
npm run format

# 代码检查
npm run lint

# 开发模式
npm run dev

# 构建项目
npm run build

项目结构

HomeLease/
├── pages/                 # 页面文件
│   ├── index/            # 首页
│   └── login/            # 登录页
├── static/               # 静态资源
│   ├── stove.svg         # 灶具图标
│   ├── burner.svg        # 燃烧器图标
│   └── logo.png          # 应用logo
├── components/           # 组件文件
├── api/                  # API接口
├── utils/                # 工具函数
├── store/                # 状态管理
├── config/               # 配置文件
├── mixins/               # 混入文件
├── pages.json            # 页面配置
├── manifest.json         # 应用配置
├── uni.scss              # 全局样式
└── main.js               # 入口文件

设计特色

视觉设计

  • 现代化UI:采用卡片式设计,圆角边框
  • 渐变色彩:使用粉色渐变作为主色调
  • 响应式布局:适配不同屏幕尺寸
  • 动画效果:添加点击反馈和过渡动画

交互体验

  • 轮播图:自动播放,支持手动切换
  • 设备卡片:点击查看详情,续费按钮
  • 底部导航:图标和文字组合,状态指示
  • 状态标签:不同颜色表示设备状态

开发说明

运行项目

  1. 使用 HBuilderX 打开项目
  2. 选择运行到浏览器或模拟器
  3. 或使用命令行:npm run dev:h5

构建发布

  1. 在 HBuilderX 中选择发行
  2. 或使用命令行:npm run build:h5

页面功能详解

首页 (pages/index/index.vue)

  • 状态栏:模拟手机状态栏显示
  • 头部区域:公司信息和操作按钮
  • 公告栏:滚动显示公告内容
  • 轮播图:产品展示和推广
  • 设备列表:用户租赁设备管理
  • 底部导航:应用功能导航

登录页 (pages/login/login.vue)

  • 登录表单:用户名密码登录
  • 注册功能:新用户注册
  • 服务条款:弹窗显示服务条款
  • 隐私政策:弹窗显示隐私政策

样式规范

颜色方案

  • 主色调#ff9a9e (粉色)
  • 辅助色#fecfef (浅粉色)
  • 文字色#333 (深灰)
  • 背景色#f5f5f5 (浅灰)

字体大小

  • 标题32rpx
  • 正文28rpx
  • 小字24rpx
  • 标签20rpx

间距规范

  • 页面边距30rpx
  • 卡片内边距30rpx
  • 元素间距20rpx
  • 小间距10rpx

更新日志

v1.0.0 (2025-01-27)

  • 初始版本发布
  • 完成首页和登录页设计
  • 实现基础交互功能
  • 添加轮播图和设备列表
  • 优化响应式布局

许可证

MIT License