vibe-coding-cn/yshop/yshop-drink-uniapp/CLAUDE.md

YShop Drink UniApp 用户端 - Claude Code 配置

项目信息

属性	值
项目名称	yshop-miniapp
项目类型	mobile (用户端小程序/H5)
版本	3.2.2
框架	UniApp

技术栈

技术	版本	用途
UniApp	-	跨端框架
Vue 3	-	核心框架
Vant	4.6.2	移动端 UI
Pinia	2.1.6	状态管理
微信 JSSDK	1.6.3	微信 API

支持平台

• 微信小程序
• H5

项目结构

yshop-drink-uniapp/
├── api/                       # API 接口
├── components/                # 公共组件
├── config/                    # 配置文件
├── hooks/                     # 组合式函数
├── pages/                     # 页面
│   ├── index/                 # 首页 (点餐)
│   ├── menu/                  # 菜单
│   ├── order/                 # 订单
│   ├── mine/                  # 我的
│   └── components/            # 页面级组件
├── static/                    # 静态资源
├── store/                     # Pinia 状态
├── uni_modules/               # uni_modules 组件
├── utils/                     # 工具函数
├── App.vue                    # 根组件
├── main.js                    # 入口文件
├── manifest.json              # 应用配置
├── pages.json                 # 页面配置
├── uni.scss                   # 全局样式
└── package.json

页面说明

页面	路径	功能
首页	/pages/index/	门店选择、扫码点餐
菜单	/pages/menu/	商品列表、加购物车
订单	/pages/order/	订单列表、订单详情
我的	/pages/mine/	个人中心、余额、优惠券

开发命令

# 安装依赖
npm install

# 开发 (使用 HBuilderX)
# 运行 → 运行到小程序模拟器 → 微信开发者工具
# 运行 → 运行到浏览器 → Chrome

# 发布 (使用 HBuilderX)
# 发行 → 小程序-微信
# 发行 → 网站-H5

配置文件

manifest.json

{
  "mp-weixin": {
    "appid": "wx...",
    "setting": {
      "urlCheck": false
    }
  },
  "h5": {
    "router": {
      "mode": "hash"
    }
  }
}

pages.json

{
  "pages": [
    { "path": "pages/index/index" },
    { "path": "pages/menu/index" },
    { "path": "pages/order/index" },
    { "path": "pages/mine/index" }
  ],
  "tabBar": {
    "list": [...]
  }
}

API 规范

// api/order.js
import request from '@/utils/request'

// 获取订单列表
export function getOrderList(data) {
  return request({
    url: '/app/order/list',
    method: 'get',
    data
  })
}

// 创建订单
export function createOrder(data) {
  return request({
    url: '/app/order/create',
    method: 'post',
    data
  })
}

状态管理

// store/modules/cart.js
import { defineStore } from 'pinia'

export const useCartStore = defineStore('cart', {
  state: () => ({
    items: [],
    shopId: null
  }),

  getters: {
    totalCount: (state) => state.items.reduce((sum, item) => sum + item.count, 0),
    totalPrice: (state) => state.items.reduce((sum, item) => sum + item.price * item.count, 0)
  },

  actions: {
    addItem(product) {
      // ...
    }
  },

  persist: true
})

UV 组件

项目使用 uv-ui 组件库，通过 uni_modules 方式引入:

组件	用途
uv-button	按钮
uv-cell	单元格
uv-popup	弹出层
uv-tabs	标签页
uv-icon	图标
uv-loading-icon	加载
uv-navbar	导航栏
uv-skeleton	骨架屏

核心功能

功能	说明
扫码点餐	扫桌号二维码进入点餐
商品浏览	按分类查看商品
购物车	加购、改数量、规格选择
下单支付	微信支付/余额支付
订单查询	订单列表、状态跟踪
会员中心	余额、优惠券、地址
充值	余额充值

微信相关

// 微信登录
uni.login({
  provider: 'weixin',
  success: (res) => {
    // res.code
  }
})

// 微信支付
uni.requestPayment({
  provider: 'wxpay',
  orderInfo: payInfo,
  success: () => {},
  fail: () => {}
})

注意事项

1. 小程序需要在微信公众平台配置域名白名单
2. 支付功能需要商户号配置
3. H5 需要配置 CORS