LINK ONE 是一个集商城系统、3D名片系统、NFC碰一碰营销系统于一体的智能商业解决方案。基于乔布斯产品哲学，致力于打造"魔法"般的用户体验，让每一次触碰连接都变得美好而难忘。
触碰动画+震动反馈系统，让NFC触碰有生命感
品牌光效动画，增强用户互动体验
支持多种触碰场景（支付、名片、营销活动等）
无感支付模块，极致快速的支付体验
支付成功动画，增强支付的"奖赏感"
支持微信支付、支付宝等多种支付方式
多层卡片设计，沉浸式浏览体验
3D Transform动效，自然流畅的层级切换
支持个人信息、擅长领域、代表作品展示
三级品牌优先级体系：商家自定义品牌 > 代理商品牌 > 系统默认品牌
支持自定义品牌名称和Logo
登录页面动态品牌展示
集成AI核心模块
语音交互支持（讯飞语音）
智能推荐和服务
技术 | 说明 |
|---|---|
UniApp | 跨端开发框架，支持小程序/H5/App |
Vue 2 | 渐进式JavaScript框架 |
Vuex | 状态管理 |
SCSS | CSS预处理器 |
CSS Animation | 动画效果实现 |
技术 | 说明 |
|---|---|
ThinkPHP 6.0 | PHP框架（要求PHP 7.1+，兼容PHP 8.0） |
MySQL | 关系型数据库 |
Redis | 缓存服务 |
微信支付/支付宝支付
腾讯地图API
讯飞语音服务
NFC碰一碰是本项目的核心功能，支持多种营销场景的一触即达体验。
business/ # 商家后台H5端 ├── bundle/pages/ # 功能包页面 │ ├── nfc_manage/ # NFC卡片管理列表 │ │ └── nfc_manage.vue # 管理所有NFC卡片 │ ├── nfc_add/ # 添加NFC卡片 │ │ └── nfc_add.vue # 新增NFC配置 │ ├── nfc_edit/ # 编辑NFC卡片 │ │ └── nfc_edit.vue # 修改NFC功能配置 │ └── nfc_detail/ # NFC详情展示 │ └── nfc_detail.vue # 用户触碰后的展示页面 ├── pages/ │ └── nfc_share/ # NFC分享页面 │ └── nfc_share.vue # 分享NFC卡片 uniapp/ # 前端小程序 ├── utils/ │ └── nfc-manager.js # 🔥 NFC核心管理工具 │ ├── isSupported() # 检查NFC支持 │ ├── startDiscovery() # 开始监听NFC标签 │ ├── stopDiscovery() # 停止监听 │ ├── onDiscovered() # NFC标签发现回调 │ ├── decodeTextRecord() # 解码NDEF文本 │ └── parseUrlParams() # 解析URL参数 ├── bundle_b/pages/ │ └── webview/ │ └── nfc.vue # NFC内嵌H5页面 └── components/ └── magic-touch-effect/ # 🔥 魔法触碰效果组件 └── magic-touch-effect.vue # 触碰动画+震动反馈
server/app/ ├── shopapi/controller/ │ └── ShopNfc.php # 🔥 NFC API控制器 │ ├── lists() # NFC列表 │ ├── add() # 添加NFC │ ├── edit() # 编辑NFC │ ├── detail() # 🔥 NFC详情（核心接口） │ ├── bind() # 二维码绑定NFC │ ├── wifiInfo() # WiFi信息 │ ├── getShopInfo() # 店铺信息 │ └── generateContent() # AI生成营销文案 ├── admin/ │ ├── controller/shop/ │ │ └── NfcQrcode.php # 后台NFC二维码管理 │ ├── logic/shop/ │ │ └── NfcQrcodeLogic.php # NFC二维码业务逻辑 │ └── view/shop/nfc_qrcode/ │ └── lists.html # 二维码列表视图 └── common/model/ ├── ShopNfc.php # 🔥 NFC数据模型 │ └── 功能字段: 小红书/朋友圈/大众点评/高德/抖音/微信/WiFi/社群/支付/商品 ├── NfcQrcode.php # NFC二维码模型 └── ShopNfcConfig.php # NFC配置模型
功能 | 字段 | 说明 |
|---|---|---|
小红书种草 | is_xhs | 一键跳转小红书发布种草笔记 |
朋友圈打卡 | is_timeline | 引导分享朋友圈 |
大众点评 | is_dianping | 跳转大众点评门店页 |
高德地图 | is_amap | 导航到店 |
关注抖音 | is_douyin | 关注商家抖音号 |
添加微信 | is_wechat | 添加商家微信好友 |
连接WiFi | is_wifi | 一键连接店铺WiFi |
微信社群 | is_group | 加入商家社群 |
买单付款 | is_pay | 快速支付 |
店铺主页 | is_goods | 查看商品/服务 |
3D动态名片提供沉浸式的个人信息展示体验，支持多层卡片滑动切换。
uniapp/ # 前端小程序 ├── pages/ │ └── index/ │ └── index.vue # 🔥 3D动态名片页面/数字名片 ├── bundle_b/pages/ # 功能包B │ ├── card_list/ # 名片列表 │ │ └── card_list.vue # 收藏的名片列表 │ └── apple_car/ # 编辑名片 │ └── apple_car.vue # 编辑名片 └── components/ └── pay-success-animation/ # 支付成功动画组件 └── pay-success-animation.vue # 金币掉落动画
3D层叠效果: CSS 3D Transform实现自然过渡
滑动切换: 上下滑动切换信息层级
触摸反馈: 贝塞尔曲线动画 cubic-bezier(0.4, 0, 0.2, 1)
脉冲光效: 头像光环动画
一键操作: 拨打电话、复制微信、发送邮件
PHP >= 7.1（推荐 7.4+，兼容 PHP 8.0）
MySQL >= 5.6
Redis >= 5.0
Composer
Node.js >= 14.0
npm 或 yarn
HBuilderX（推荐用于UniApp开发）
克隆项目
git clone <repository-url> cd LINK ONE/server
安装依赖
composer install
配置环境
# 复制环境配置文件 cp .example.env .env # 编辑.env文件，配置数据库和Redis连接
导入数据库
# 导入数据库结构 mysql -u root -p your_database < public/install/db/like.sql
配置Web服务器
配置网站根目录指向 server/public
设置伪静态规则（参考ThinkPHP官方文档）
安装依赖
cd business # 或 merchant、uniapp npm install
配置API地址 编辑 config/app.js，配置后端API地址
开发调试
# 使用HBuilderX运行到浏览器或模拟器 # 或使用命令行 npm run dev:h5
打包发布
# H5版本 npm run build:h5 # 微信小程序 npm run dev:mp-weixin # App打包使用HBuilderX的云打包功能
首页: 数据概览、快捷入口
品牌定制: 品牌名称、Logo设置
商品管理: 商品增删改查
订单管理: 订单处理、退款
店铺管理: 店铺信息设置
首页: 经营数据展示
收银台: 快速收款
订单管理: 订单查询
用户中心: 个人设置
品牌管理: 设置代理商品牌
商家管理: 管理旗下商家
数据统计: 经营数据分析
# 后端 cd server php think run # 启动开发服务器 composer update # 更新依赖 # 前端 cd business npm run dev:h5 # H5开发模式 npm run build:h5 # H5打包
遵循Vue官方风格指南
PHP代码遵循PSR-12规范
组件命名采用PascalCase
文件命名采用kebab-case
feat: 新功能 fix: 修复bug docs: 文档更新 style: 代码格式调整 refactor: 重构 test: 测试相关 chore: 构建/工具相关
LINK ONE - 一个触碰，无限可能 ✨
