康城大药房医药电商系统源码：Laravel+Vue双栈架构，含药品管理、订单处理与多端适配-尧图网站建设

📅 发布时间：2026/7/6 10:22:28

本文还有配套的精品资源，点击获取

简介：一套可直接部署的医药电商平台完整源码，后端基于Laravel（PHP）构建，涵盖药品分类展示、商品上下架、用户注册登录、购物车、订单全流程管理、后台权限控制等核心功能；前端采用Vue 2/3（根据项目实际配置）实现响应式界面，支持PC端和主流手机浏览器访问，交互流畅、样式统一。项目结构清晰，Backend目录集中处理API逻辑与数据库操作，resources/js和resources/css分别管理前端脚本与样式，views使用Blade模板渲染服务端页面，Models定义数据模型，Http/Controllers统一接收请求，Providers完成服务绑定，lib封装常用工具类。附带干净数据库初始化SQL（2024.05.07）、.env.example环境配置示例、Webpack构建配置（webpack.mix.js）、多语言资源（lang目录）、品牌视觉素材（logo.png、@康城大藥房有限公司.png、背景圖片地址.txt）及更新日志（項目更新說明.md）。支持本地开发调试与Nginx/Apache生产环境一键上线，无需二次架构改造。

1. 项目概述：这不是一套“能跑就行”的电商模板，而是一套真正为医药行业量身打磨的业务系统

我接手过不下二十个医药类SaaS系统的二次开发和私有化部署，绝大多数客户第一句话就是：“能不能直接用？别让我再从零搭轮子。”——这句话背后藏着的是药监合规的高压线、处方药与非处方药的严格分界、医保对接的复杂接口、以及用户对药品信息准确性的零容忍。康城大药房这套源码，恰恰踩在了这个痛点上：它不是把普通商城套个蓝白皮肤就叫“医药电商”，而是从数据库字段设计、API响应结构、前端交互逻辑，到后台审核流程，都嵌入了医药行业的业务语义。比如，它的药品模型里，“批准文号”是必填且带正则校验的字段（国药准字H|Z|S|J[0-9]{8}），而“是否处方药”直接关联到购物车添加逻辑和结算页的药师审核弹窗；订单状态机里，“待药师审方”是一个独立于“已支付”的核心中间态，不是简单加个标签，而是触发了后台任务队列去调用模拟审方服务。你拿到手的不是一个静态代码包，而是一套已经跑通了“用户搜板蓝根→加购→提交→药师在线审方→确认发货”全链路的最小可行业务闭环。它用Laravel做后端，并非因为PHP多时髦，而是因为Laravel的Eloquent ORM能极快地映射药品、规格、厂家、批号、有效期这些强关联实体；它的Vue前端没上Vuex或Pinia做全局状态管理，而是用组合式API按模块封装，比如useCart()只管购物车增删改查和库存校验，usePrescription()专责处理电子处方上传、OCR识别结果解析和药师审核状态轮询——这种设计让一个刚毕业的PHP+Vue实习生，花两天就能看懂并修改“药品详情页的禁忌症展示逻辑”。关键词里的“Laravel医药系统”和“Vue药品商城”，说的正是这种深度耦合业务场景的技术选型，而不是技术栈的简单堆砌。

2. 整体架构设计与双栈协同逻辑拆解

2.1 为什么是Laravel + Vue混合架构，而不是纯Vue SPA或传统MVC？

这个问题我被客户问过太多次。答案很实在：医药电商的“稳”和“快”必须兼顾，而纯前端SPA或纯服务端渲染都做不到。先说纯Vue SPA（单页应用）：它确实交互丝滑，但药品搜索页需要SEO支持——患者常会百度“北京治疗感冒的药”，搜索引擎必须能抓取到“康城大药房-连花清瘟胶囊-OTC-缓解风热感冒”这样的结构化内容，纯前端JS渲染的页面对爬虫不友好，且首屏加载慢，老年用户等不及。再说传统Laravel Blade全服务端渲染：它SEO好、首屏快，但“加入购物车”点一下就要整页刷新，用户会觉得卡顿，尤其在移动端网络不稳定时，一次刷新可能丢失操作。康城这套方案的精妙之处，在于它采用了“渐进式混合渲染”策略：首页、分类页、详情页这些对SEO和首屏速度要求高的页面，用Blade模板直出HTML骨架，保证秒开；而用户中心、购物车、订单列表这些强交互区域，则由Vue接管，通过Axios调用Laravel提供的RESTful API，实现局部无刷新更新。你看它的resources/views/layouts/app.blade.php，里面只引入了一个空的<div id="app"></div>容器，Vue实例挂载其上，但整个页面的导航栏、页脚、药品分类树这些公共部分，依然是Blade渲染的——这就避免了SPA里每个路由都要重复请求顶部菜单数据的冗余。更关键的是，Laravel的Auth::user()和Vue的$store.state.user之间，通过一个轻量级的window.LaravelUser = @json(auth()->user())桥接，既保证了登录态同步，又不用在每个API请求里塞JWT token，降低了前端鉴权复杂度。这种设计不是为了炫技，而是我在给三家连锁药房做系统迁移时，反复验证过的最优解：新用户打开首页平均耗时1.2秒（Blade直出），点击“加入购物车”响应时间350毫秒（Vue局部更新），比纯SPA快40%，比纯Blade快60%。

2.2 后端分层设计：Backend目录下的业务逻辑如何支撑医药合规？

Backend目录不是简单的代码存放区，它是整个系统合规性的基石。我拆开看过它的app/Models/Medicine.php模型，里面几个方法特别值得细说。首先是scopeActive()作用域，它不只是查status=1，而是联合查询expiry_date > NOW()和is_approved = true（药监局备案状态），确保前台永远不展示过期或未备案药品；其次是getIndicationsAttribute()访问器，它把数据库里存储的JSON格式适应症数组，自动转换成带HTML换行符的字符串，方便Blade模板直接{!! $medicine->indications !!}安全输出，避免XSS风险。再看app/Http/Controllers/Api/OrderController.php里的store()方法，它没有直接创建订单，而是先调用$this->validatePrescription($request)——这个私有方法会检查：如果订单含处方药，必须上传有效处方图片（校验文件类型、大小、是否为空）；如果是复方制剂，还要调用MedicineService::checkDrugInteraction($cartItems)做药物相互作用预检（内置了常见127种药品的配伍禁忌库）。这些逻辑如果放在前端或中间件里，极易被绕过。它的Providers目录也暗藏玄机：AppServiceProvider里注册了一个PharmacyAuditLogger单例，所有涉及药品上下架、价格修改、库存调整的操作，都会被记录到pharmacy_audit_logs表中，包含操作人IP、设备指纹、前后值对比，这是药监飞行检查时必须提供的审计日志。所以，当你看到Backend目录时，要理解它不是一个技术目录，而是一套可落地的医药合规执行引擎。

2.3 前端资源组织：resources/js与resources/css如何实现“一次编写，多端适配”？

很多团队以为“响应式”就是加个@media媒体查询，康城这套的前端适配思路要深得多。它的resources/js目录结构是按“功能域”而非“技术层”划分的：composables/下是useDeviceDetect.js（精准识别iOS/Android/微信内置浏览器）、useNetworkStatus.js（监听页面离线状态，自动缓存购物车）；components/common/里有MedicineCard.vue，但它不是简单显示药品名和价格，而是根据props.deviceType（由useDeviceDetect注入）动态切换布局：PC端显示4列网格+悬浮详情，安卓端显示2列+底部固定“立即购买”按钮，iOS端则隐藏“分享到微信”按钮（因Safari限制）。最绝的是它的resources/css/common.scss，里面定义了一套“医药色系变量”：

// 药品安全等级色标 $color-otc: #4CAF50; // 非处方药-绿色 $color-rx: #F44336; // 处方药-红色 $color-herb: #FF9800; // 中药-橙色 $color-supplement: #2196F3; // 保健品-蓝色

这些变量被MedicineCard.vue的:class绑定，让不同药品类型在视觉上立刻可区分，这比文字标注更符合用户认知习惯。它的Webpack配置webpack.mix.js也做了针对性优化：对resources/js/app.js启用mix.version()生成带哈希的文件名，防止CDN缓存旧版JS导致处方审核逻辑失效；对resources/css/app.css则用mix.options({ processCssUrls: false })禁用CSS内URL重写，因为背景图路径url(/storage/backgrounds/...)是动态生成的，不能被Webpack误处理。这种细节上的考究，让同一套代码在iPhone 12和Windows 10 Chrome上，都能提供符合各自平台交互习惯的体验，而不是“PC版网页缩小版”。

3. 核心功能模块详解与实操要点

3.1 药品管理模块：从录入到上架的全流程控制

药品管理是医药电商的生命线，康城这套源码把“录入-审核-上架-下架”做成了一条不可逆的流水线。后台入口在/admin/medicines，但重点不在界面，而在背后的三个关键约束：

录入阶段的强校验：新增药品时，表单提交前会本地校验“批准文号”格式（正则/^国药准字[H|Z|S|J]\d{8}$/），提交后Laravel后端还会调用MedicineValidator::validateApprovalNumber($number)，它会连接国家药监局公开API（https://api.nmpa.gov.cn/v1/medicines?approval_number=）实时核验该文号是否存在且未注销。我实测过，输入一个虚构文号国药准字H12345678，后端会在2秒内返回“该批准文号未查询到备案信息”，并阻止保存。这一步杜绝了假药信息入库。
审核阶段的权限隔离：药品提交后不会直接上架，而是进入“待审核”队列。系统预置了三种角色：admin（超级管理员）、pharmacist（执业药师）、warehouse（仓储管理员）。只有pharmacist角色能审核药品，且审核时必须填写“审核意见”并电子签名（调用Crypto::sign($data, $pharmacist->private_key)生成数字签名存入数据库）。这个设计满足《药品经营质量管理规范》（GSP）关于“质量负责人对药品质量负首要责任”的要求。
上架阶段的智能风控：药品审核通过后，上架操作会触发后台事件MedicineWasApproved，监听器UpdateInventoryStockListener会自动检查该药品在inventory_stocks表中的库存记录。如果库存为0，系统不会强制上架，而是弹出提示：“该药品当前库存为0，上架后将无法购买，是否继续？”——这个看似简单的交互，避免了大量“显示有货却无法下单”的客诉。我帮客户部署时，曾把这条逻辑扩展为对接WMS系统：当库存低于安全阈值（如5盒）时，自动向采购员企业微信发送预警消息，这才是真正的业务闭环。

提示：药品图片上传有特殊要求。系统强制要求主图尺寸为750×750像素（适配微信小程序），且使用Intervention Image库进行压缩，保证单图不超过300KB。如果你上传一张5MB的原图，后端会自动裁剪居中区域并压缩，避免拖慢页面加载。

3.2 订单处理模块：覆盖“药师审方”这一医药特有环节

普通电商的订单流程是“下单→支付→发货”，而康城的订单状态机多了两个医药专属状态：pending_pharmacist_review（待药师审方）和pharmacist_rejected（药师拒审）。这个流程的实现，是整套系统最体现专业性的部分。

当用户提交订单时，OrderController@store()方法会执行以下关键步骤：
1. 检查购物车中是否有处方药（$cart->containsPrescriptionMedicine()）；
2. 如果有，跳过支付直接进入pending_pharmacist_review状态，并生成一个唯一的review_token；
3. 同时，通过Notification::send()向值班药师推送审方任务（支持邮件、短信、企业微信三通道）；
4. 用户端订单页此时显示“药师正在审核您的处方，请耐心等待”，并提供“重新上传处方”按钮。

药师在后台/admin/orders/review页看到待审订单，系统会自动OCR识别用户上传的处方图片（集成Tesseract.js），提取出药品名称、剂量、用法用量，并高亮标出与购物车药品不一致的地方（比如用户买了“阿莫西林胶囊0.25g”，处方写的是“阿莫西林片0.5g”，系统会标红提示“剂量不匹配”）。药师只需点击“通过”或“拒绝”，选择原因（如“处方信息不全”、“药品超量”、“禁忌症冲突”），系统就会自动更新订单状态并通知用户。

注意：审方操作有严格时效控制。系统在生成review_token时，会设置Redis过期时间为30分钟。如果药师30分钟内未处理，订单自动转为pharmacist_timeout状态，并向用户发送“处方审核超时，请重新提交”的短信。这个机制防止了因药师临时离岗导致的订单积压。

3.3 多端适配实现：PC、安卓、iOS的差异化交互策略

多端适配不是靠一套CSS搞定的，康城的做法是“检测-分流-定制”。它的resources/js/composables/useDeviceDetect.js会执行三重检测：

User-Agent解析：用正则匹配/MicroMessenger/i判断是否微信内置浏览器，/iPhone|iPad|iPod/i判断iOS，/Android/i判断安卓；
特性检测：调用'ontouchstart' in window判断是否支持触摸事件；
屏幕尺寸兜底：window.innerWidth < 768视为移动设备。

基于检测结果，系统在main.js中动态引入不同的入口文件：
- PC端：import('./bootstrap-pc.js')
- 安卓端：import('./bootstrap-android.js')
- iOS端：import('./bootstrap-ios.js')

每个入口文件都做了针对性优化。比如bootstrap-android.js里，它会重写window.open()方法，强制在Chrome Custom Tabs中打开外部链接（如药品说明书PDF），避免微信内置浏览器打不开PDF；而bootstrap-ios.js则会禁用-webkit-overflow-scrolling: touch，解决iOS Safari滚动卡顿问题。最实用的是它的“一键拨号”功能：在药品详情页，安卓端点击“咨询药师”按钮，会直接调起拨号界面tel:400-xxx-xxxx；而iOS端则会弹出<a href="tel:400-xxx-xxxx">链接，因为iOS不允许JS直接拨号。这种细节上的差异处理，让每个端的用户体验都像原生应用一样自然。

4. 部署与环境配置实战指南

4.1 本地开发环境搭建：从零开始的完整步骤

我建议用Docker Compose快速搭建本地环境，避免PHP版本、扩展依赖的坑。项目根目录下的docker-compose.yml已配置好：

version: '3.8' services: app: build: context: . dockerfile: ./docker/php/Dockerfile volumes: - .:/var/www/html - ./docker/php/php.ini:/usr/local/etc/php/php.ini environment: - APP_ENV=local - APP_DEBUG=true nginx: image: nginx:alpine ports: - "8080:80" volumes: - .:/var/www/html - ./docker/nginx/default.conf:/etc/nginx/conf.d/default.conf mysql: image: mysql:8.0 environment: - MYSQL_ROOT_PASSWORD=root - MYSQL_DATABASE=kancheng volumes: - mysql-data:/var/lib/mysql volumes: mysql-data:

实操步骤：
1. 确保已安装Docker Desktop（Mac/Windows）或Docker Engine（Linux）；
2. 在项目根目录执行docker-compose up -d，等待MySQL和Nginx启动；
3. 进入PHP容器：docker-compose exec app bash；
4. 执行Laravel初始化：
bash cp .env.example .env php artisan key:generate composer install npm install npm run dev # 编译前端资源 php artisan migrate --seed # 执行SQL初始化脚本（乾淨表-更新時間：2024.05.07.sql）
5. 浏览器访问http://localhost:8080，默认后台账号admin@kancheng.com/password。

实操心得：第一次运行npm run dev时，如果遇到Error: Cannot find module 'node-sass'，不要慌。这是因为Node.js版本升级导致二进制绑定失败。直接执行npm rebuild node-sass即可修复，无需降级Node。这是我在Mac M1芯片上踩过的坑，官方文档没写，但非常普遍。

4.2 生产环境Nginx配置要点：性能与安全的平衡

生产环境不能直接用php artisan serve，必须用Nginx反向代理。项目附带的docker/nginx/default.conf是黄金配置，我把它拆解给你：

server { listen 80; server_name kancheng-pharmacy.com; root /var/www/html/public; index index.php; # 关键：禁止直接访问敏感目录 location ~ ^/(vendor|node_modules|storage|resources|database|config|app|bootstrap) { return 403; } # 关键：PHP-FPM处理 location ~ \.php$ { fastcgi_pass php-upstream; fastcgi_index index.php; include fastcgi_params; fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name; fastcgi_param DOCUMENT_ROOT $realpath_root; # 医药系统特有：增加请求体大小限制（处方图片可能很大） client_max_body_size 20M; } # 关键：静态资源缓存 location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ { expires 1y; add_header Cache-Control "public, immutable"; } # 关键：强制HTTPS（生产必备） if ($scheme != "https") { return 301 https://$server_name$request_uri; } }

这里有几个必须注意的点：第一，client_max_body_size 20M是为了支持用户上传高清处方图片，普通电商设2M就够了，但医药场景必须放宽；第二，add_header Cache-Control "public, immutable"告诉浏览器这些JS/CSS文件永不过期，配合Webpack的哈希文件名，确保用户永远拿到最新版；第三，if ($scheme != "https")强制跳转HTTPS，这是药监局对医疗数据传输的基本要求，明文HTTP传输处方信息是违规的。

4.3 数据库初始化与SQL脚本解读

乾淨表-更新時間：2024.05.07.sql这个文件名就很有意思——它强调“干净”，意味着不含测试数据，只建表结构和基础字典。我逐行分析过这个SQL：

CREATE TABLE medicines (...)：药品表里有approval_number VARCHAR(32) NOT NULL（批准文号）、rx_required TINYINT(1) DEFAULT 0（是否处方药）、prescription_type ENUM('paper','electronic') DEFAULT 'paper'（处方类型），这些字段都是医药行业刚需；
CREATE TABLE pharmacy_audit_logs (...)：审计日志表包含operation_type ENUM('create','update','delete','approve','reject')，覆盖了所有关键操作；
INSERT INTO permissions (...) VALUES ('manage_medicines','药品管理','admin'), ('review_prescriptions','审方权限','pharmacist')：权限表预置了角色能力矩阵，不是简单RBAC，而是按业务动作授权。

执行这个SQL后，数据库里只有表结构和权限定义，没有任何商品或用户数据。这意味着你可以放心地在生产环境执行php artisan migrate:fresh --seed，不用担心污染真实数据。这是我见过最稳妥的初始化方式。

5. 常见问题与排查技巧实录

5.1 前端报错“Cannot read property ‘name’ of undefined”如何定位？

这个错误90%发生在药品详情页，根源是API返回的数据结构变化。比如，后端MedicineController@show()原本返回：

{ "data": { "id": 1, "name": "连花清瘟胶囊", "price": 32.5 } }

但某次更新后，为了兼容小程序，改成：

{ "code": 200, "message": "success", "data": { "id": 1, "name": "连花清瘟胶囊", "price": 32.5 } }

前端MedicineDetail.vue里写的response.data.name就崩了，因为response.data现在是整个对象，不是药品数据。排查技巧：在浏览器开发者工具Network面板，找到/api/medicines/1请求，点Response标签页，看实际返回结构。然后去resources/js/api/medicine.js里，把getMedicine(id)方法的.then(res => res.data)改成.then(res => res.data.data)。记住，医药系统API版本迭代频繁，前端必须做好防御性编程。

5.2 后台无法上传药品图片，提示“500 Internal Server Error”

这不是代码bug，而是PHP配置问题。错误日志storage/logs/laravel.log里通常会看到：

[2024-05-07 10:23:45] production.ERROR: Unable to write in the "/var/www/html/storage/app/public" directory

原因是Laravel的storage/app/public目录没有写入权限。解决方案：进入服务器，执行：

sudo chown -R www-data:www-data storage bootstrap/cache sudo chmod -R 775 storage bootstrap/cache php artisan storage:link # 创建软链接

注意：www-data是Ubuntu/Debian的Web用户组，CentOS是apache，要根据你的系统调整。这个权限问题在阿里云ECS上出现概率极高，因为默认安全组会限制目录权限。

5.3 移动端页面字体模糊、按钮点击无反馈

这是iOS Safari的著名Bug。当页面有transform: translateZ(0)或-webkit-transform: translateZ(0)时，iOS会启用硬件加速，但有时会导致字体渲染模糊。终极解法：在resources/css/app.scss末尾添加：

@media screen and (-webkit-min-device-pixel-ratio: 2) { * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } }

同时，为所有按钮添加-webkit-tap-highlight-color: transparent;消除点击高亮延迟。这两行CSS能解决90%的iOS端显示问题。

5.4 支付回调失败，订单状态不更新

支付回调地址/api/payment/callback需要能被支付宝/微信服务器公网访问。常见错误是：
- 本地开发时用http://localhost:8080，但支付平台无法回调；
- Nginx配置了HTTPS，但PHP没正确获取协议头，导致生成的回调URL是http://而非https://。

验证方法：在app/Http/Controllers/Api/PaymentController.php的callback()方法开头，加一行日志：

Log::info('Callback received from: ' . request()->header('User-Agent'));

如果日志里没有支付宝或微信的UA（如AlipayNotify），说明回调根本没到达你的服务器，要检查防火墙和域名解析；如果有，但订单没更新，就检查APP_URL环境变量是否配置为https://kancheng-pharmacy.com，而不是http://localhost。

6. 定制化扩展建议：让系统真正属于你的药房

这套源码的价值，不在于它“能用”，而在于它“好改”。我给客户做的所有定制，都没动过核心架构，只在约定好的扩展点注入逻辑。

6.1 接入医保定点药店接口

医保对接是硬需求。康城预留了app/Services/HealthInsuranceService.php，你只需实现submitClaim()和queryBalance()两个抽象方法。比如对接北京医保局，submitClaim()里调用他们的SOAP接口：

public function submitClaim($claimData) { $client = new \SoapClient('https://bjyb.gov.cn/wsdl/claim.wsdl'); return $client->__soapCall('SubmitClaim', [$claimData]); }

然后在订单支付成功后，OrderPaid事件监听器里调用它。所有医保相关字段（如医保卡号、个人账户余额）都已存在users表中，只需加个is_insured布尔字段标记是否参保用户。

6.2 增加“慢病用药提醒”功能

针对高血压、糖尿病患者，可以增加用药提醒。在app/Console/Commands/SendMedicationReminders.php里，每天凌晨2点执行：

$users = User::whereHas('orders', function ($q) { $q->where('created_at', '>', now()->subDays(30)) ->whereHas('items', function ($q2) { $q2->where('medicine_id', [101, 102]); // 指定慢病药品ID }); })->get(); foreach ($users as $user) { Notification::send($user, new MedicationReminder()); }

提醒模板在resources/views/notifications/medication-reminder.blade.php里，用Blade语法动态生成“您该服用XX药了”，并附上一键续方链接。这个功能上线后，某客户复购率提升了27%。

6.3 小程序端快速适配

项目已预留小程序入口。只需在resources/js/app.js里，把Vue实例挂载目标从#app改为#miniapp，然后在app/Http/Controllers/MiniProgramController.php里，用WeChat::miniProgram()SDK处理登录和支付。所有API接口都已支持application/json和application/x-www-form-urlencoded两种Content-Type，小程序POST数据时用后者即可，无需额外开发。

我个人在实际部署中发现，最大的价值不是代码本身，而是它建立了一套医药电商的“标准语义”。当你和药监部门沟通时，他们提到“药品追溯码”，你能立刻指向medicines表里的trace_code字段；当药师说“需要审方留痕”，你打开pharmacy_audit_logs表就能展示完整的数字签名记录。这套源码把抽象的法规要求，转化成了具体的数据库字段、API接口和前端组件，这才是它真正不可替代的地方。

本文还有配套的精品资源，点击获取