---

📱 扫码体验

---

📖 项目简介

光影集市是一款专注于照片浏览与交易的微信小程序。摄影师可以将作品上传至平台，用户通过浏览或 AI 人脸识别 精准找到与自己相关的照片，一键加入购物车后用账户余额完成支付，购买后即可下载原图到相册。整个项目基于 API工厂 后端服务驱动，无需自建服务器，开箱即用。

---

📸 页面截图

首页	登录页	照片详情	人脸找照片

确认结算	购买记录	订单详情	我的

---

✨ 功能特性

模块	功能说明
🏠 首页	Banner 轮播 + 双列瀑布流照片展览，支持下拉刷新和上拉加载更多
🔐 登录 / 注册	用户名密码登录与注册，支持切换，含用户协议勾选确认
🖼 照片详情	大图预览（可点击查看原图）、价格展示、一键加购或立即购买
🤳 人脸找照片	拍摄或上传自拍 → AI 提取人脸向量 → 在照片库中精准匹配本人照片
🛒 购物车 / 结算	批量选购，支持移除单张，账户余额一键确认支付
📋 购买记录	已支付 / 待支付订单列表，待支付订单可直接跳转补款
📦 订单详情	订单内所有照片网格展示，点击预览、长按保存到相册
👤 个人中心	头像昵称、账户余额展示，快捷入口：购买记录、购物车、人脸找照片
📃 协议 / 关于	用户协议、隐私政策、关于我们，内容由 CMS 后台统一管理

---

🛠️ 技术栈

• 框架：uni-app (Vue 3)
• 目标平台：微信小程序 / H5
• 后端服务：API工厂 — apifm-uniapp ^26.9.15
• 工具库：dayjs 日期格式化
• AI 能力：人脸向量提取 + 照片库相似度搜索（由 API工厂上传接口提供）

---

🚀 快速开始

环境准备

工具	版本要求	下载地址
HBuilderX	≥ 4.0	下载
微信开发者工具	最新稳定版	下载
Node.js	≥ 16	下载

---

第一步：克隆项目

git clone https://github.com/your-username/photoTrading.git
cd photoTrading

---

第二步：安装依赖

npm install

---

第三步：⚠️ 必须修改配置（否则无法运行）

3.1 修改 config.js — API工厂域名和商户 ID

打开根目录下的 config.js，将 subDomain 和 merchantId 替换为你自己在 API工厂 注册后获得的值：

// config.js
const config = {
  subDomain: 'your-subdomain',   // ⚠️ 改成你自己的子域名
  merchantId: 123456,             // ⚠️ 改成你自己的商户 ID
  sysconfigkeys: 'mallName',
}

登录 API工厂后台 → 个人中心 → 即可找到你的子域名和商户 ID。

---

3.2 修改 manifest.json — 微信小程序 AppID

打开 manifest.json，找到 mp-weixin 节点，将 appid 替换为你自己微信小程序的 AppID：

"mp-weixin": {
  "appid": "your-wx-appid",
  "setting": {
    "urlCheck": false
  },
  "usingComponents": true
}

在 微信公众平台 注册小程序后，进入「开发管理 → 开发设置」即可获取 AppID。

---

第四步：运行项目

微信小程序（开发调试）

npm run dev:mp-weixin

然后打开「微信开发者工具」，导入 dist/dev/mp-weixin 目录即可预览。

H5 模式（浏览器调试）

npm run dev:h5

生产构建

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

# H5
npm run build:h5

---

📂 项目结构

photoTrading/
├── common/              # 公共工具函数（auth、支付、导航栏等）
├── components/          # 全局组件
│   └── nav-bar/         # 自定义导航栏组件
├── pages/               # 页面目录
│   ├── index/           # 首页（照片列表）
│   ├── login/           # 登录 / 注册
│   ├── photo/           # 照片详情
│   ├── face/            # 人脸找照片
│   ├── cart/            # 购物车 / 确认结算
│   ├── order/           # 购买记录 & 订单详情
│   ├── user/            # 个人中心
│   └── cms/             # CMS 内容页（协议、关于我们）
├── static/              # 静态资源（图片、图标）
├── store/               # Vuex 状态管理
├── utils/               # 工具函数
├── uni_modules/         # uni-app 插件模块
├── config.js            # ⚠️ API工厂配置（必须修改）
├── manifest.json        # ⚠️ 小程序 AppID 配置（必须修改）
├── pages.json           # 页面路由与 TabBar 配置
└── App.vue              # 应用入口

---

⚙️ 后端配置说明

本项目后端采用 API工厂 SaaS 服务，无需自建服务器。

1. 前往 API工厂官网 注册账号
2. 创建应用，获取 子域名（subDomain） 和 商户 ID（merchantId）
3. 在后台上传照片商品，设置定价
4. 配置 CMS 页面（关于我们 aboutus、用户协议 yhxy、隐私政策 ysxy）
5. 将以上信息填入 config.js 即可完成对接

详细文档：https://www.yuque.com/apifm

---

🤳 人脸找照片说明

人脸找照片功能需要 API工厂支持人脸向量能力：

1. 上传自拍照时开启 faceDetect: true 参数，接口返回人脸 embedding 向量
2. 将向量作为 faceToken 参数调用 photoList 接口，后端按相似度排序返回匹配照片
3. 如需测试该功能，可加微信 gooking 提供测试样本图片

---

📋 常见问题

Q：运行后提示"商户不存在"或接口报错？

检查 config.js 中的 subDomain 和 merchantId 是否已替换为你自己的值。

Q：微信开发者工具提示 AppID 不匹配？

确认 manifest.json 中 mp-weixin.appid 已改为你自己在微信公众平台申请的 AppID。

Q：支付功能无法使用？

本项目使用账户余额支付，需在 API工厂后台开通充值功能并配置微信支付商户号。

Q：人脸识别结果为空？

确保自拍照人脸清晰、正面、光线充足；如需测试数据请联系微信 gooking。

Q：购买后怎么下载照片？

进入「购买记录」→「订单详情」，点击照片可预览，长按即可保存到相册。

Q：dist 目录不存在？

先执行 npm run dev:mp-weixin 构建一次，dist 目录会自动生成。

---

🌟 其他优秀开源模板推荐

• 天使童装 / 码云镜像
• 天使童装（uni-app 版本） / 码云镜像
• 简约精品商城（uni-app 版本） / 码云镜像
• AI名片 / 码云镜像
• 仿海底捞订座排队（uni-app） / 码云镜像
• 面馆风格小程序
• 面包店风格小程序 / 码云镜像
• 朋友圈发圈素材小程序 / 码云镜像
• 旧物回收、废品回收 / 码云镜像
• 会员卡（饭卡）储值消费系统 / 码云镜像
• 盲盒交友 uni-app / 码云镜像
• 无人棋牌室 / 码云镜像
• 酒店客房服务小程序 / 码云镜像
• 企业微展 / 码云镜像
• 小红书企业微展 / 码云镜像
• 静筑 Apistatic / 码云镜像 / GitCode镜像
• 光影集市 / 码云镜像 / GitCode镜像

---

📄 许可证

本项目基于 MIT License 开源，欢迎 Fork、Star 和贡献代码。

---