douyinShop

抖音商城 - 多端电商应用

📱 项目简介

本项目是一个基于 uni-app 框架开发的多端电商应用，支持微信小程序、H5、App 等平台。应用整合了商品展示、购物车、订单管理、地址管理、抽奖等完整的电商功能，为用户提供一站式购物体验。

🛠 技术栈

• 前端框架: uni-app + Vue 3
• 状态管理: Vuex
• 类型支持: TypeScript
• 样式预处理: SCSS
• 构建工具: HBuilderX
• 富文本: marked + marked-katex-extension

✨ 主要功能

🛍 商城核心功能

• 商品展示: 首页轮播、商品列表、商品详情
• 分类筛选: 商品分类展示和筛选
• 购物车: 商品加购、数量调整、批量操作
• 订单系统: 订单创建、支付、查看、评价
• 地址管理: 收货地址增删改查

🎮 互动功能

• 抽奖系统: 奖品专区、抽奖记录
• 用户中心: 个人信息、订单管理
• 评价系统: 商品评价、评价展示

🔐 用户系统

• 登录注册: 支持微信授权登录
• 个人资料: 信息编辑和管理
• 权限管理: Token 验证和自动跳转

📁 项目结构

douyinShop/
├── pages/                    # 页面目录
│   ├── index/               # 首页模块
│   │   ├── index.vue        # 首页
│   │   ├── detail.vue       # 商品详情
│   │   └── eva.vue          # 商品评价
│   ├── category/            # 分类模块
│   │   ├── cat.vue          # 分类页面
│   │   └── pros.vue         # 分类商品
│   ├── cart/                # 购物车
│   │   └── cart.vue
│   ├── order/               # 订单模块
│   │   ├── confirm.vue      # 确认订单
│   │   ├── pay.vue          # 支付页面
│   │   ├── list.vue         # 订单列表
│   │   └── detail.vue       # 订单详情
│   ├── address/             # 地址模块
│   │   ├── addr.vue         # 地址列表
│   │   └── addrManage.vue   # 地址管理
│   ├── prize/               # 抽奖模块
│   │   ├── prize.vue        # 抽奖页面
│   │   └── record.vue       # 中奖记录
│   ├── me/                  # 个人中心
│   │   ├── me.vue           # 我的页面
│   │   └── edit.vue         # 个人信息编辑
│   └── login/               # 登录模块
│       └── login.vue
├── components/              # 公共组件
│   ├── mix-popup/           # 弹窗组件
│   ├── privacy-popup/       # 隐私弹窗
│   ├── s-layout/            # 布局组件
│   ├── u-image/             # 图片组件
│   ├── u-no-network/        # 无网络组件
│   └── uni-load-more/       # 加载更多组件
├── request/                 # 网络请求
│   ├── api.ts               # 接口定义
│   ├── request.ts           # 请求封装
│   ├── useApi.ts            # API Hook
│   └── usePage.ts           # 分页 Hook
├── store/                   # 状态管理
│   ├── index.ts             # Store 入口
│   └── modules/
│       └── user.ts          # 用户模块
├── common/                  # 公共文件
│   ├── config.ts            # 配置文件
│   ├── tools.ts             # 工具函数
│   ├── mixin.ts             # 混入
│   └── mixinTools.ts        # 混入工具
├── static/                  # 静态资源
│   ├── tab/                 # 底部导航图标
│   └── temp/                # 临时图片
└── style/                   # 样式文件
    ├── common.css           # 公共样式
    ├── _variables.scss      # SCSS 变量
    └── uni.scss             # uni-app 样式

🚀 快速开始

环境要求

• Node.js >= 14.x
• HBuilderX 或 微信开发者工具

安装依赖

npm install

运行项目

H5 端

npm run dev:h5

微信小程序

1. 在 HBuilderX 中打开项目
2. 点击运行 -> 运行到小程序模拟器 -> 微信开发者工具

APP 端

1. 在 HBuilderX 中打开项目
   
2. 点击运行 -> 运行到手机或模拟器

项目配置

环境配置

项目支持多环境配置，在 common/config.ts 中切换环境：

// 当前环境 - 可以通过修改这个值来切换环境
const CURRENT_ENV = ENV.LOCAL; // 本地环境
// const CURRENT_ENV = ENV.TEST; // 测试环境  
// const CURRENT_ENV = ENV.PRODUCTION; // 生产环境

支持的环境：

• 本地环境: http://thinkphp_fastadmin_tailored.test
• 测试环境: https://lingke.huxiukeji.cn
  
• 生产环境: https://wx.lingkejiaoyu.cn

详细环境配置说明请查看 ENV.md

🔧 API 使用说明

接口定义

在 request/api.ts 中定义接口：

api_module: {
  api_name: {
    url: '/api/path',
    auth: boolean,           // 是否需要 token 验证
    method: 'GET/POST',      
    isNprogress: boolean,    // 是否显示加载进度
  }
}

接口调用方式

1. 直接调用

const res = await uni.$request('module.api_name', params);

2. 使用 useApi Hook (单次请求)

import useApi from '@/request/useApi'

const { loading, result, fetchResource } = useApi({
  getListApi: 'module.api_name',
  customQueryParameters: (id) => ({ id }),
  getListFunc: (res) => {
    console.log(res.result);
  }
});

fetchResource(123);

3. 使用 usePage Hook (分页请求)

import usePage from '@/request/usePage';

const { 
  loading, 
  hasMore, 
  result: dataList, 
  reset: initList, 
  handleCurrentChange: loadMoreList 
} = usePage({
  getListApi: 'module.api_name',
  customQueryParameters: () => ({
    keyword: searchKeyword.value
  })
});

📱 多端适配

本项目支持以下平台：

• 微信小程序: 主要目标平台，优化用户体验
• H5: 支持浏览器访问，适配移动端
• APP: 支持 Android/iOS 打包
• 支付宝小程序: 兼容支付宝生态
• 百度小程序: 兼容百度智能小程序
• 字节跳动小程序: 支持抖音小程序

🎨 设计特色

• 现代化 UI: 扁平化设计风格，界面简洁美观
• 响应式布局: 适配不同屏幕尺寸
• 交互体验: 流畅的页面切换和用户交互
• 主题色彩: 采用抖音品牌色调 (#E6212A)

📈 功能特性

• ✅ 完整的电商流程
• ✅ 多端一体化开发
• ✅ TypeScript 类型支持
• ✅ 组件化开发
• ✅ 状态管理
• ✅ 路由导航
• ✅ 网络请求封装
• ✅ 图片懒加载
• ✅ 下拉刷新/上拉加载
• ✅ 支付集成

🔐 权限配置

项目已配置相关权限，包括：

• 相机权限（商品拍照）
• 位置权限（地址选择）
• 网络权限（数据请求）
• 存储权限（本地缓存）

📞 联系方式

如有问题或建议，请联系开发团队。

📄 许可证

本项目为商业项目

注意: 项目中包含的配置信息和密钥仅为示例，实际部署时请替换为真实的配置信息。