# ThinkAdminMobile

**Repository Path**: zoujingli/ThinkAdminMobile

## Basic Information

- **Project Name**: ThinkAdminMobile
- **Description**: ThinkAdminMobile 是基于 nutui-uniapp 实现，目前已经支持 微信小程序、微信服务号，移动端 H5 网站，安卓 App 应用，苹果 App 应用。
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: nutui.cli
- **Homepage**: https://thinkadmin.top
- **GVP Project**: No

## Statistics

- **Stars**: 48
- **Forks**: 20
- **Created**: 2021-01-13
- **Last Updated**: 2026-02-06

## Categories & Tags

**Categories**: backend

**Tags**: ThinkAdminMobile, ThinkAdmin

## README

# ThinkAdminMobile 2.0

[ThinkAdminMobile](https://gitee.com/zoujingli/ThinkAdminMobile) 是基于 [nutui](https://uniapp-nutui.tech) 构建的 [ThinkAdminWemall](https://thinkadmin.top/plugin/think-plugs-wemall.html) 配套前端商城应用。

**注意事项**：项目本身未携带 `node_modules` 目录，下载代码后需要执行 `npm install` 安装依赖组件。

**开发模式**：推荐使用 **CLI 模式** 进行开发，通过命令行编译为指定平台应用程序。建议使用 **VSCode** 作为主要开发工具配合 **uni-app CLI** 进行开发和调试。

项目完全使用 `typescript` 语法编写，具有完善的类型提示和检查机制，建议开发者熟悉 TypeScript 语法以获得更好的开发体验。

**已适配终端**：移动端 **H5** 页面、微信公众号、微信小程序，其他终端适配后另行通知。

## 核心功能模块

### 🛍️ 商品管理
- 商品浏览、分类筛选、关键词搜索
- 丰富的商品详情展示（轮播图、规格选择、价格信息）
- 灵活的多维规格管理系统
- VIP升级礼包、代理权益等营销标识

### 🛒 购物体验
- 购物车管理（添加、数量调整、批量操作）
- 完整订单流程（下单、支付、确认收货）
- 收货地址管理（增删改查、智能选择）
- 实体商品配送与虚拟商品交付支持

### 👤 用户系统
- 多渠道登录（手机验证码、微信授权、密码登录）
- 个人中心（信息管理、头像上传、资料编辑）
- 账户安全（手机绑定、密码修改、安全设置）
- 会员等级体系（VIP特权、成长值管理）

### 💰 营销推广
- 优惠券系统（领取、使用、管理）
- 推广返利（用户推广、返利记录、收益明细）
- 积分体系（获取、兑换、消费记录）
- 余额管理（充值、提现、消费明细）

### 🎯 客户服务
- 在线客服（实时消息沟通、客服咨询）
- 问题反馈（意见建议提交、问题上报）
- 帮助中心（常见问题解答、使用指南）
- 订单售后（退款申请、退货处理、纠纷解决）

## 技术架构

### 核心技术栈
```
核心框架: Vue 3.4.21 + TypeScript 5.0
跨平台: uni-app 3.0.0-alpha
构建工具: Vite 5.2.8
UI组件: NutUI-Uniapp 1.10.0
样式预处理: Sass 1.69.0
```

### 架构特色
- **响应式设计**: 适配多种屏幕尺寸
- **多端兼容**: 一套代码多端运行
- **性能优化**: 懒加载、缓存策略、图片压缩
- **类型安全**: 完整的 TypeScript 类型定义
- **现代化架构**: Composition API + 状态管理

### 核心实现

#### 状态管理模式
```typescript
// 用户状态管理
export const UserGvar = {
  islogin: ref<boolean>(false),
  account: ref<any>({ id: 0 }),
  userinfo: ref<any>({ extra: {}, create_time: '', nickname: '' }),
  relation: ref<any>({ level_code: 0, level_name: '' }),
  
  // 智能状态同步
  isLogin(): boolean {
    const hasAccountId = UserGvar.account.value?.id > 0
    const hasToken = !!UserGvar.token()
    const isLoggedIn = UserGvar.islogin.value
    
    // 自动状态同步机制
    if (hasAccountId && hasToken && !isLoggedIn) {
      UserGvar.islogin.value = true
    }
    return hasAccountId && hasToken && isLoggedIn
  }
}
```

#### 数据接口封装
```typescript
// 商品数据接口
export const DataGoods = {
  // 商品列表获取
  get(data: any = {}): Promise<any> {
    return TaPost('/plugin-wemall/api.goods/get', data)
  },
  
  // 分类标签加载
  cate(): Promise<any> {
    return TaPost('/plugin-wemall/api.goods/cate')
  },
  
  // 规格解析
  specs(spec: string): string {
    let names: any[] = []
    spec.split(';;').forEach((v: string) => names.push(v.split('::').pop()))
    return names.join(' ')
  }
}
```

#### 组件化设计
```vue
<!-- 商品规格选择组件 -->
<template>
  <view class="spec-selector">
    <view v-for="spec in goods.specs" :key="spec.name" class="spec-group">
      <view class="spec-title">{{ spec.name }}</view>
      <view class="spec-options">
        <nut-tag 
          v-for="option in spec.list" 
          :key="option.unid"
          :type="option.select ? 'primary' : 'default'"
          @click="toggleSpec(spec.y, option.x)"
        >
          {{ option.name }}
        </nut-tag>
      </view>
    </view>
  </view>
</template>
```

### 性能优化策略

#### 数据缓存机制
- **本地存储**: AES加密存储敏感数据
- **内存缓存**: 频繁访问数据的内存级缓存
- **过期策略**: 合理的缓存过期时间设置

#### 图片优化
- **懒加载**: 滚动加载减少初始资源消耗
- **格式优化**: 支持WebP等现代图片格式
- **尺寸适配**: 响应式图片尺寸处理

#### 网络优化
- **请求合并**: 相关联请求的合理合并
- **错误重试**: 网络异常的自动重试机制
- **加载状态**: 友好的加载提示和骨架屏

## 开发环境配置

### 环境要求
- Node.js >= 16.0.0
- npm >= 8.0.0

### 安装依赖
```bash
npm install
```

### 开发命令
```bash
# H5 开发
npm run dev:h5

# 微信小程序开发
npm run dev:mp-weixin

# 支付宝小程序开发
npm run dev:mp-alipay

# 其他平台开发
npm run dev:mp-baidu
npm run dev:mp-qq
npm run dev:mp-toutiao
```

### 构建命令
```bash
# H5 构建
npm run build:h5

# 微信小程序构建
npm run build:mp-weixin

# 生产环境构建
npm run build:prod
```

### 类型检查
```bash
# TypeScript 类型检查
npm run type-check
```

## 开发规范

### 代码规范
- 统一使用 TypeScript 方式编写程序，充分利用类型安全特性
- 使用 `<script setup lang="ts">` 语法
- Props 使用 TypeScript 接口定义
- 事件使用 `defineEmits` 定义

### 命名规范
- 自定义变量对象统一使用 `Ta` 前缀（如：`TaCache`、`TaToast`、`TaAjax`）
- 组件命名采用 PascalCase
- 文件命名采用 kebab-case

### 技术规范
- 推荐使用 **VSCode** 作为主要开发工具，配合 uni-app CLI 进行开发和调试
- 本地存储统一使用 AES 加密存储，防止数据被复制与泄露

## 多端适配

### 已支持平台
- ✅ H5 网页版
- ✅ 微信小程序
- ✅ 支付宝小程序
- ✅ 百度小程序
- ✅ 字节跳动小程序
- ✅ QQ 小程序
- ✅ 快手小程序

### 部署说明
- **H5 部署**: 构建文件位于 `dist/build/h5/` 目录
- **小程序部署**: 构建文件位于对应平台目录，通过开发者工具上传

## 项目价值

### 企业价值
- **降低成本**: 一套代码多端运行，显著降低开发维护成本
- **提升体验**: 原生应用般的流畅用户体验
- **快速迭代**: 现代化工具链支持敏捷开发
- **易于维护**: 规范化代码结构便于后期维护

### 开发者价值
- **技术先进**: 采用主流前端技术栈
- **学习价值**: 完整的电商项目实践经验
- **扩展性强**: 模块化设计便于功能扩展
- **文档完善**: 详细的开发文档和示例

## 代码仓库

**前端代码仓库**：[https://gitee.com/zoujingli/ThinkAdminMobile](https://gitee.com/zoujingli/ThinkAdminMobile)

**后台代码仓库**：[https://gitee.com/zoujingli/think-plugs-wemall](https://gitee.com/zoujingli/think-plugs-wemall)

## 演示案例

**后端临时体验**：[https://dev.v6.thinkadmin.top](https://dev.v6.thinkadmin.top)

**后端账号密码**：admin / admin

**前端临时体验**：[https://h5.dev.v6.thinkadmin.top](https://h5.dev.v6.thinkadmin.top)

**使用注意事项**：在使用体验环境时不要添加非法内容或随意删除配置信息，需要验证码的地方填写 `123456`。

<img alt="" style="background:#fff;border-radius:15px;padding-top:15px" width="350px" src="https://thinkadmin.top/static/app/wemall-demo.png"/>

> 旧版本 ThinkAdminMobile 1.0 请跳转到 [master](https://gitee.com/zoujingli/ThinkAdminMobile/tree/master) 分支。

---

**技术支持**: 如有问题请提交 Issue 或联系项目维护团队