多用户商城前端设计方案

0. 本版核心决策

来自用户指令，作为后续一切设计的 spine：

① 商城前端 = 新建/重写，但只借鉴现有 uni-app 工程的写法风格，不照搬其业务实现。
② 所有请求 API 全部用新的（本地 ThinkPHP 后端），彻底弃用旧 jft.js 远程后端（test.sjslsd.com，成功码 code==0 + jwtToken + teamId 多租户）。
③ 商城接口与管理后台分离：商城只调 /api + /member，永不调 /admin、/merchant。

1. 现状盘点

1.1 后端路由实况

/api/goods/list         GET   商品目录（公开）
/api/goods/detail       GET   商品详情（公开）
/api/shipping/fee       POST  运费试算（公开）
/api/order/create       POST  下单（拆单，前端传 user_id）
/api/order/list         GET   订单列表（前端传 user_id）
/api/order/detail       GET   订单详情
/api/order/paid         POST  支付成功回调（演示）
/member/login       POST  会员登录（免密签发 token）—— 商城鉴权入口
/member/transfer/do POST  会员转账（MemberAuthMiddleware）
/member/withdraw/apply POST 会员提现申请（MemberAuthMiddleware）

2. 核心原则：写法学旧，API 用新

2.1 可借鉴的前端"写法"（与后端无关的纯前端约定）

Vue2 Options API（data/onLoad/methods） ColorUI：cu-btn bg-gradual-red cu-list menu / cu-item cu-tag bg-orange light cuIcon-back 等图标 jft-mall-spec 规格矩阵 jft-mall-cart 购物车行 uni-popup / uni-number-box / mp-html imgUrl() 图片拼接 uni.showToast 错误反馈

// 范本：Options API + imgUrl 助手
export default {
  data() { return { id: 0, list: [], loading: false } },
  onLoad(opts) { this.id = parseInt(opts.id || 0); this.load() },
  methods: {
    imgUrl(u) { return u && u.indexOf('http')===0 ? u : (API_BASE + u) },
    load() { /* ... */ }
  }
}

2.2 必须弃用的旧范式

2.3 新的统一请求层（替换一切散落请求）

// config/env.js — 环境化基地址
let MALL_API_BASE = 'http://127.0.0.1:8000'
// #ifdef H5
MALL_API_BASE = (location.hostname==='localhost'||location.hostname==='127.0.0.1')
  ? 'http://127.0.0.1:8000' : 'https://mall.xshop.com'
// #endif
// #ifdef MP-WEIXIN / #ifdef APP-PLUS
MALL_API_BASE = 'https://mall.xshop.com'
export { MALL_API_BASE }

// common/mallRequest.js — Promise 化、统一约定
import { MALL_API_BASE } from '@/config/env.js'
export function mallRequest(url, method='GET', data={}) {
  return new Promise((resolve, reject) => {
    uni.request({
      url: MALL_API_BASE + url, method,
      data: method==='POST' ? JSON.stringify(data) : data,
      header: { 'Content-Type':'application/json',
        ...(getToken() ? { 'Authorization':'Bearer '+getToken() } : {}) },
      success: (res) => {
        const r = res.data || {}
        if (r.code < 1000) return resolve(r.data)        // 成功：直接返回 data
        if (r.code === 401) { toLogin(); return reject(r) } // 未登录跳登录
        uni.showToast({ title: r.msg||'请求失败', icon:'none' }); reject(r)
      },
      fail: () => { uni.showToast({title:'网络错误',icon:'none'}); reject({code:-1,msg:'网络错误'}) }
    })
  })
}

// common/memberAuth.js — 会员登录态（新 token 模型）
import { post } from '@/common/mallRequest.js'
export async function memberLogin(payload) {
  const data = await post('/member/login', payload) // {user_id} 或 {mobile}
  uni.setStorageSync('memberToken', data.token)
  uni.setStorageSync('userInfo', data)
  return data
}

2.4 页面改造示例（商品详情）

// 原：const API_BASE='http://127.0.0.1:8000'; uni.request({url:API_BASE+'/api/goods/detail',...})
// 新：
import { get } from '@/common/mallRequest.js'
const g = await get('/api/goods/detail', { id: this.id })
this.goods = g; this.buildAttrlist(g); this.initSkuinfo(g)
// 视觉/交互（ColorUI、jft-mall-spec、运费估算弹窗）完全保留，仅替换网络调用与去 IP 硬编码

3. 商城系统新 API 契约

3.1 已有（可直接接）

3.2 待后端新补（按优先级）

P0 购物车 /member/cart/* · 收货地址 /member/address/* · 我的订单（鉴权版）/member/order/* + 退款 /member/order/refund

P1 收藏 /member/favorite/* · 优惠券 /member/coupon/* · 钱包/积分 /member/wallet /member/points · 个人资料 /member/profile/*

P2 团队/邀请 /member/team /member/invite/qrcode · 消息 /member/message/* · 交易/分红 /member/dividend /member/transaction · 拼团 / 快捷支付 / 权益

4. 商城与后台的分离边界

5. 分阶段落地计划

阶段 1 — MVP 购物闭环（写法学旧 + API 用新）⭐ 推荐起点

• 基础设施：config/env.js、common/mallRequest.js、common/memberAuth.js
• 登录：会员登录页 → 存 memberToken
• 商品：goods/catalog.vue、goods/detail.vue 改写为新请求层（范本已通）
• 购物车：改写 goods/cart.vue，接新购物车 API（需后端 P0）
• 下单/支付/订单：接 /api/order/*，地址选择接新地址 API（需后端 P0）
• 三端编译验证（H5 / 小程序 / APP）
• 验收：游客浏览→登录→加购→选地址→下单→支付→查订单，全链路三端跑通

阶段 2 — 用户中心

我的、收藏、优惠券、钱包/积分、个人资料（接 P1）

阶段 3 — 高级业务

团队邀请、消息、交易/分红、拼团、快捷支付、权益（接 P2）

6. 需评审拍板的两点

已决定 会员登录方式（2026-08-10）：先采用本地后端，直接使用 /member/login 免密垫片（凭 user_id/mobile 签发 memberToken），暂不接微信授权 / 远程会员网关。memberAuth.js 按免密实现，预留 code 换 token 分支供后续接入。理由：用户明确"远程后端先采用本地的"。

问题 2 订单鉴权升级：是否将 /api/order/* 从"前端传 user_id"升级为"按 memberToken 取 user_id"（更安全）？涉及后端小改。

7. 风险与对策