手机壳定制源码在线DIY手机壳定制商城系统

zhang*** · 14 小时前

手机壳定制源码在线DIY手机壳定制商城系统

复制代码

一、项目构成与实际业务定位
项目是一套面向手机壳定制零售的完整线上系统，品牌名为“壳研所”。系统由三个相互配合的部分组成：面向消费者的移动端定制页面、面向商家运营与生产的管理后台、以及承载全部业务数据和规则的服务端。消费者在手机上完成挑商品、选机型、上传图片并设计、预览、下单、支付、查询订单与售后；商家在后台维护机型库、商品价格、库存、订单生产、设计审核、内容素材、优惠券和账号权限。
从代码实现看，系统围绕“一个手机型号加一种壳型形成一条可售组合”这一核心模型展开。每个组合都有壳体底图、印刷安全区、镜头开孔位置和独立库存；用户必须先确定机型与壳型，才能进入编辑器设计，设计稿再经过商家审核，审核通过后转入生产，最终发货、确认收货并进入售后或评价环节。
二、用户端功能
1. 首页
首页顶部展示品牌标识和搜索入口，搜索进入商品列表。后台启用的公告会在顶部横向滚动展示，最多取最近三条；轮播图每五秒自动切换，点击后按后台配置跳到商品详情、模板选择页或直接进入机型选择。轮播图、公告、商品和模板均受后台上下架与展示时间控制。
首页提供六个固定分类入口：硬壳、软壳、磁吸、防摔、透明和模板。前五类进入对应壳型的商品列表，模板入口进入官方模板页。页面还有“选机型开始定制”快捷入口、热门商品双列卡片和官方模板横向列表。商品卡展示封面、名称、副标题、起步价和销量；模板卡展示封面、名称和套用人数。
2. 商品浏览与商品详情
商品列表支持按壳型筛选、按名称关键词搜索，展示商品封面、名称、副标题、所属壳型、销量和起步价，排序完全取后台配置。搜索框回车触发查询，清空后恢复全部商品。
商品详情展示多图轮播、起步价、壳型标签、销量、价格构成说明、材质、制作工艺、交期、图片格式与大小要求、后台富文本商品说明，以及四款相关推荐。价格构成会说明基础价、壳型加价、数量阶梯折扣和满额免邮规则。页面支持系统分享或复制链接。点击“开始定制”会带着当前商品进入机型选择。
3. 官方模板
模板页以双列瀑布流展示官方成品模板，包含封面、名称、分类和套用人数。点击模板后先进入机型与壳型选择，确定组合后再进入编辑器，编辑器会自动载入模板内容。套用模板后所有图层仍可继续修改、增删和调整。
4. 机型与壳型选择
机型选择页先展示热门机型，也可以切换到某个品牌查看该品牌全部型号。型号支持关键词实时搜索，搜索结果同时显示型号名和品牌名。每个型号下方会展示该机型支持的全部壳型，并逐一检查“机型加壳型”组合是否可售、库存多少。
组合不可售时红色提示“暂不可售”并阻止选择；可售时显示剩余库存，系统自动选中第一个可售壳型。页面会记住上一次选择的品牌、机型和壳型，再次进入时自动恢复，但会重新校验库存和可售状态。找不到机型时，用户可以填写品牌名、型号名和可选手机号提交机型需求，提交成功后显示“三个工作日内评估”的确认页。
底部固定栏显示已选机型、壳型、壳型加价，满足条件后才能点击“开始定制”。
5. 定制编辑器
编辑器是系统的核心功能，进入时必须已确定机型和壳型。页面把设计区域叠加在真实壳体底图上，壳体比例与机型印刷区域比例一致，并用虚线标出印刷安全区。选中图层超出安全区时会显示“超出印刷安全区”的提示，但不阻止继续设计。
编辑器包含六个工具面板：
图片面板：支持从相册选择或拍照上传，单次最多九张，格式限 JPG、PNG、WEBP，单张不超过 10MB。首次上传前必须确认图片版权声明，确认结果保存在本机。上传后会校验图片最短边是否达到该机型建议像素，低于建议值时提示“可能印糊”，但允许继续使用。图片图层可拖动、双指缩放、双指旋转、镜像、调整透明度、用滑杆旋转、裁成方形、铺满画布或删除。
文字面板：支持多行输入，最多 60 字，可添加多个文字图层。文字可调字号、旋转角度、八种预设颜色，可加粗、加描边、加阴影、切换竖排，也可删除。
背景面板：提供十二种纯色背景、四种渐变背景和官方图案。官方图案会作为铺满画布的底层图片加入。
贴纸面板：展示后台维护的官方贴纸素材，点击即可加入画布，默认居中并按画布比例缩放。
模板面板：展示官方模板，点击套用会替换当前画布全部内容；画布已有内容时先弹确认框，防止误覆盖。
图层面板：按从上层到下层列出全部元素，显示图片或文字名称和层级序号，可选中、上移、下移、复制、删除、一键清空。画布最多二十个元素，达到上限后新增会被拦截。
编辑器顶部提供撤销、重做和保存。撤销与重做保留最近二十步操作，拖拽结束、图层变换、背景变化等都会写入历史。底部可“预览成品”或保存草稿。已登录用户保存到账号，设计稿名称默认为“机型壳型设计”；未登录用户只能存到本机，最多保留十份。下次登录进入编辑器时，系统会询问是否把本机草稿同步到账号，逐份上传成功后再清空本机草稿。
6. 成品预览
预览页把设计稿叠加到壳体底图上，展示机型、壳型、印刷尺寸和“预览正常”状态，并按“商品基础价加壳型加价”显示预估单件价格。页面提示设计稿仅用于本订单生产，下单后会人工确认设计。
点击“生成效果图”时，如果设计稿尚未保存到账号，会先创建设计稿，再通过服务端渲染生成一张成品效果图，用户可长按保存到相册。点击“去下单”会把当前设计稿和商品写入结算清单，直接进入确认订单页。
7. 购物车
购物车每件商品独立保存设计稿、机型、壳型和数量，不合并同款。页面支持全选、单选、修改数量、删除和去结算。数量范围为一到二十，购物车最多二十项。删除时提示“设计稿仍保留在我的设计里”。底部显示已选件数、合计金额和结算按钮，空购物车展示空态插画和“去定制”入口。
8. 确认订单与结算
结算页展示收货地址、商品清单、优惠券、加急制作开关、订单备注和价格明细。地址默认选中默认地址或第一条地址，可切换或新增。优惠券只列出当前订单金额可用的券，系统会自动选中面额最大的可用券，用户也可以选择“不使用优惠券”。加急开关切换后会立即重新报价。
价格明细逐项列出商品金额、数量阶梯优惠、优惠券抵扣、运费、加急费和应付金额；运费为零时显示“免运费”，并展示满额免邮门槛。页面同时显示常规或加急的预计发货工作日。备注最多 120 字。
提交订单前只强制校验收货地址。提交时携带一次性防重复标记，重复点击不会生成多笔订单。成功后进入支付页，未支付的订单进入待付款状态。
9. 支付
支付页展示应付金额、订单号、件数、收货人和完整地址，并提供三十分钟支付倒计时；剩余不足五分钟时倒计时变红，超时后支付按钮禁用。页面加载时如果订单已不是待付款状态，会自动跳到支付结果页，避免重复支付。
用户可以取消未支付订单，取消后释放库存；也可以确认支付。当前接入的是模拟支付，确认后订单直接变为已支付并进入“待确认设计”。支付结果页区分三种情况：订单已关闭显示“订单已关闭”，仍待付款显示“支付未完成”并允许继续支付，其余状态显示支付成功并提供查看订单入口。
10. 订单列表与订单详情
订单列表按“全部、待付款、待确认设计、制作中、待收货、已完成、售后中、已取消”分栏。待收货在业务上对应已发货状态。每张订单卡展示订单号、状态、商品封面、商品名、机型壳型、数量、金额、下单时间和合计；待付款订单还会显示“剩余多少时间自动关闭”。设计被退回时，订单卡直接显示退回原因。
不同状态提供不同操作：待付款可取消或去支付；待确认设计可查看设计或申请退款；制作中可查看进度或申请售后；待收货可查看物流或确认收货；已完成可评价、申请售后或再定制；售后中进入售后进度。
订单详情展示更完整的信息：状态说明、待付款倒计时、收货地址、商品明细、设计稿缩略图与大图预览、设计退回原因、重新编辑入口、价格明细、订单号复制、提交与支付与发货时间、备注、物流公司、运单号和轨迹、状态变更记录、售后单和评价内容。待付款可取消或支付，待收货可确认收货，符合条件时可申请售后，完成后可评价。
11. 售后
售后申请页按订单状态限制可选类型。尚未进入制作时只能申请退款；进入制作后只能申请重做或补发，并提示“进入制作后不支持退款，质量问题按重做或补发处理”。用户需填写至少三个字的售后原因，最多两百字，并可上传最多九张凭证图片；上传前需确认图片为本人拍摄或拥有使用权。提交后进入售后进度页。
售后进度页展示售后单号、关联订单、订单金额、提交时间、售后原因、凭证图片九宫格、商家回复、处理结果，并可跳转订单详情或消息通知。该页面为只读，不提供撤销或再次提交。
12. 评价
订单完成后可评价，每笔订单只能评价一次。评价页展示首件商品信息，支持一到五星评分、最多两百字文字和最多九张晒图。提交成功后回到订单详情，已评价的订单再次进入评价页会自动跳回详情。
13. 用户中心
“我的”页面展示头像、昵称、手机号和消息未读角标，并提供待付款、待确认设计、制作中、待收货、售后中五个订单快捷入口及各自数量。菜单包含我的设计、优惠券、收货地址、消息通知、用户协议和联系客服；客服入口提示在线时间，并引导到订单详情提交售后。退出登录需要二次确认。
我的设计页展示最多十个设计稿及当前数量，卡片显示封面、名称、机型壳型、状态和更新时间，可继续编辑或删除。删除前提示“已下单的设计稿会保留在订单里”。
地址簿支持新增、编辑、删除和设为默认。新增或编辑地址时需要填写收货人、十一位手机号、省、市、区、详细地址和是否默认；手机号有格式校验，详细地址至少三个字。删除默认地址后，系统会把剩余地址中的一条自动设为默认。
优惠券页分“可用、已使用、已过期”三个分栏，展示面额、使用门槛、有效期和状态，并说明优惠券只抵扣商品金额、不抵扣运费与加急费、单笔订单限用一张。领券中心展示可领取的券和已领数量，同一张券只能领取一次，领完后不能继续领取。
消息页展示订单、售后、优惠券、系统四类消息，含标题、时间、内容和未读标记，支持单条已读和全部已读。订单类消息可跳转到订单列表。
14. 登录与协议
登录页支持模拟微信授权登录和手机号验证码登录。微信登录后如果账号未绑定手机号，会进入绑定流程；手机号登录使用四位验证码，测试模式固定为 1234，发送后有六十秒倒计时。登录前必须勾选同意用户协议与隐私政策。登录成功后会回到进入登录页之前想访问的页面。
协议页说明定制内容责任、价格与支付规则、制作与售后时效、争议处理方式和隐私政策，包括收集手机号、地址、设计稿与订单记录的用途。
15. 异常页面
用户端提供独立 404 页，未知路径显示“页面走丢了”，并提供返回首页和去选机型两个入口。
三、管理后台功能
1. 登录与角色权限
后台使用账号密码登录，账号分为管理员、客服、生产三类角色。菜单按角色显示，路由进入前再次校验角色，服务端接口还会做第三次权限校验。管理员可使用全部模块；客服可使用经营概览、订单管理、售后工单、优惠券和用户；生产可使用经营概览、订单管理、设计审核、机型库、库存管理，以及内容与素材里的模板和贴纸。
订单页内部还有更细的权限差异：改价和退款仅管理员可用；设计审核通过和退回由管理员与生产操作；发货、内部备注和生产文件导出三类角色均可使用。
2. 经营概览
概览页展示今日订单数、今日销售额、待确认设计数、待发货数四个统计卡，并提供近七天订单与销售额双轴趋势图、订单状态分布环形图、机型热度横向柱状图和最近六笔订单列表。页面可刷新，也可直接跳到待确认设计的订单筛选。
3. 数据报表
报表页支持近七天和近三十天切换，展示周期销售额、周期订单数、热销壳型、热销机型，以及每日销售额与订单数组合图、壳型销量柱状图、机型热度前十、机型销量明细和售后统计。售后统计按退款、重做、补发分别展示申请数和已完成数。
4. 订单管理
订单列表支持按状态、订单号或收货人手机号、日期范围筛选，分页展示订单号、创建时间、用户、收货地区、件数、加急标记、金额和状态。列表支持批量发货和批量导出生产文件。
订单详情以抽屉形式展示状态、用户信息、收货信息、提交与支付时间、支付截止时间、发货信息、用户备注和内部备注；逐件展示设计稿缩略图、商品名、审核状态、机型壳型数量、单价与壳型加价、小计和退回原因；还展示金额明细、操作记录和售后申请。
订单详情内可以执行：设计审核通过、退回设计并填写原因、导出单件生产文件、发货并填写快递公司与运单号、修改待付款订单的应付金额、添加内部备注、退款。退款后订单关闭、库存释放、优惠券退回，并生成退款记录。生产文件只有在设计审核通过后才能导出，格式为按机型印刷尺寸和 300 DPI 生成的 PNG；批量导出会把已审核通过的订单项打包成压缩包。
发货弹窗支持预设快递公司选择和运单号填写；批量发货可以共用同一运单号，未填写时系统按时间和订单号自动生成。
5. 设计审核
设计审核以“待确认设计订单中的待审核订单项”为准，而不是以设计稿自身状态为准，避免订单状态与设计稿状态错位。列表展示设计稿缩略图、商品名、机型壳型数量、金额、关联订单、用户昵称与手机号。可查看大图、审核通过或退回。退回必须填写至少两个字的原因，退回后用户会收到通知。同一订单的全部订单项都审核通过后，订单才从待确认设计转为制作中。
6. 售后工单
售后工单按待处理、处理中、已完成、已驳回筛选，列表展示售后单号、关联订单、用户、类型、原因、处理结果、订单金额和状态。处理弹窗展示申请类型、原因和凭证图片，可设置处理状态、填写回复用户的内容和处理结果。
退款类售后处理为已完成时，系统释放库存、退回优惠券并关闭订单；驳回售后时订单回到售后前的状态；重做和补发完成后记录处理结果并通知用户。
7. 机型库
机型库分五个页签。
品牌页签维护品牌名称、英文名、标识字、排序和启停，列表显示品牌下的型号数量。品牌下仍有型号时不能删除。
型号页签按品牌和关键词筛选，展示型号名称、印刷宽度与高度、建议像素、底壳库存合计、热门标记和启停状态。新增型号会自动为该型号创建五种壳型的底图记录和库存记录。批量导入支持每行“型号名称,印刷宽度,印刷高度”，宽高可省略，默认七十乘一百四十五毫米，并返回成功与失败条数。
壳型页签维护壳型名称、分类图标、说明、加价金额、排序和启停。已被机型使用的壳型不能删除，只能停用。
底图与组合页签按机型筛选，展示机型、品牌、壳型、底图缩略图、安全区上下左右比例、镜头开孔区位置与尺寸、库存和是否可下单。可替换壳体底图、设置可下单开关、设置印刷安全区和镜头区，也可对某个机型批量启用或停用全部壳型组合。
机型需求页签查看用户提交的品牌与型号需求，可采纳或驳回。采纳时会尝试按品牌名匹配已有品牌，匹配成功则自动按默认尺寸创建型号及五种壳型记录。
8. 商品与价格
商品与价格分四个页签。
商品页签维护商品名称、副标题、封面、最多六张详情图、基础价、关联壳型、材质、制作工艺、交期说明、富文本商品详情、排序和上下架状态。列表支持按名称和状态筛选。
数量阶梯价页签维护满件数、折扣率和启用状态。折扣率范围为 0.5 到 1，例如 0.97 表示九七折，只作用于商品金额。
运费模板页签维护模板名称、适用地区、首件数、首件运费、续件步长、续件运费、满额免邮金额和启用状态。适用地区可填“全国”或逗号分隔的省份。
加急与交期页签维护加急费、加急交期、常规交期和满额免邮门槛。这些数值会被用户端结算实时读取。
9. 库存管理
库存页按机型搜索，展示机型、品牌、壳型、底壳库存、库存状态和更新时间。库存大于十显示可售，一到十显示库存偏低，零显示不可售。调整弹窗可以直接设定目标库存数量并填写调整原因，系统记录变动前后的数量和流水。
10. 内容与素材
内容与素材分四个页签。
轮播页签维护轮播图、标题、跳转类型和跳转值、展示起止时间、排序和展示状态。跳转类型支持商品、模板和不限。
公告页签维护公告内容、展示起止时间和状态，内容最多一百二十字。
模板页签维护模板名称、封面、分类、设计数据、排序和上下架状态。设计数据可直接编辑 JSON，也可按封面自动生成一份单图铺满的设计数据。列表展示套用次数。
贴纸素材页签维护素材名称、分类、图片、排序和启用状态。
客服角色无法进入该页面；生产角色进入后只能看到并维护模板和贴纸，轮播与公告仅管理员可见。
11. 优惠券
优惠券页维护券名称、面额、使用门槛、发放数量、开始时间、结束时间和状态，列表展示发放数、已领取数和已使用数。优惠券只抵扣商品金额，不抵扣运费与加急费。
12. 用户
用户页支持按手机号或昵称搜索，只读展示用户头像、昵称、手机号、注册时间、订单数和累计消费。累计消费排除已取消订单。
13. 管理员与设置
管理员页维护后台账号、姓名、角色、密码和启用状态。新建账号必须设置密码，编辑时密码留空表示不修改，当前登录账号不能删除。页面底部说明三类角色的默认权限范围。
基础设置页维护加急费、加急天数、常规天数和满额免邮金额，以及图片内容审核开关。这些配置由服务端统一读取，前端不写死金额。
四、核心业务规则与后台机制
1. 价格计算
价格由商品基础价加壳型加价组成，乘以数量后应用数量阶梯折扣，再减去优惠券，最后加运费和加急费。基础价、壳型加价、阶梯折扣、运费规则、满额免邮门槛、优惠券面额和加急费全部来自后台配置，用户端只展示服务端报价结果。
运费按收货省份匹配运费模板；没有省份时使用全国规则。运费按首件价加续件价计算，商品金额达到免邮门槛时免运费。
2. 库存
每条机型与壳型的组合都有独立库存。下单时按数量逐件占用库存并记录流水；取消订单、支付超时、退款完成都会释放库存；后台调整库存也会记录变动前后数量和原因。库存不足时禁止下单，库存为零的组合在用户端不可售。
3. 订单状态流转
订单状态分为待付款、待确认设计、制作中、已发货、已完成、已取消、售后中。
正常流程是：提交订单后待付款，支付成功后直接进入待确认设计，全部设计稿审核通过后进入制作中，后台发货后进入已发货，用户确认收货或发货满十天自动进入已完成。
分支流程包括：待付款超过三十分钟未支付自动取消并释放库存；待付款用户主动取消；待确认设计时设计稿被退回并通知用户；待确认设计时可申请退款；制作中及之后只能申请重做或补发；售后驳回后回到售后前状态；退款完成关闭订单；已发货物流问题走补发。订单进入制作中后不能直接退款。
4. 定时任务
服务端每分钟检查一次超时未支付订单，自动关闭并释放库存、退回优惠券、写入状态记录、发送消息。每天凌晨三点检查发货满十天的订单，自动确认收货并写入状态记录。
5. 设计稿与生产文件
设计稿使用归一化坐标保存，图层位置和尺寸都是相对画布的比例，因此同一份设计稿切换到不同机型时不会因为画布尺寸变化而失真。服务端渲染时按机型印刷宽高比例生成图片，图片图层按 cover 方式填充，文字图层支持多行、字号、颜色、字重、描边、阴影和旋转。
生产文件按机型物理印刷尺寸换算成 300 DPI 像素后渲染，只有审核通过的订单项才能导出，既可单件下载，也可批量打包下载。
6. 上传与内容审核
上传统一限制九张、单张十 MB，只允许 JPG、PNG、WEBP，服务端还会再次校验真实图片格式和尺寸，最短边小于三百像素会被拒绝。上传前必须确认版权声明。配置了外部内容审核密钥时才走机器审核；未配置时跳过机器审核，全部设计稿进入后台人工审核。设计稿被退回时必须填写原因并通知用户。
7. 消息通知
系统会在下单成功、支付成功、支付超时、订单取消、设计被退回、设计审核通过、发货、退款完成、售后提交、售后完成、售后驳回等节点生成站内消息，用户可在消息页查看未读数和全部消息。
8. 幂等与数据一致性
下单、提交售后、创建设计稿都带一次性客户端标记，重复提交会返回原记录，不会产生重复订单、重复售后或重复设计稿。订单状态变更使用事务和行锁，定时任务按状态条件更新，避免重复关闭订单或重复确认收货。
手机壳定制源码推广标题（基于项目实际功能整理，可直接用于源码介绍页、商品标题或搜索关键词）
手机壳定制源码在线DIY手机壳定制商城系统
手机壳DIY定制系统源码含在线设计编辑器与订单管理后台
手机壳定制商城源码机型壳型选择与在线设计一体化
手机壳定制H5源码从选机型到下单发货完整业务闭环
DIY手机壳定制平台源码支持图片上传与自由排版设计
手机壳在线定制系统源码含成品预览与效果图生成
手机壳定制小程序替代方案源码手机端在线设计下单
手机壳定制商城整站源码商品机型库存订单售后全覆盖
手机壳定制系统源码支持多品牌多型号多壳型组合销售
个性化手机壳定制源码图片文字贴纸模板自由组合
手机壳定制电商源码含购物车结算支付与订单查询
手机壳DIY设计器源码图层管理撤销重做安全区提示
手机壳定制后台管理系统源码订单审核生产发货一体化
手机壳定制生产管理源码设计审核与生产文件导出
手机壳定制订单管理系统源码状态流转与售后工单处理
手机壳定制机型库源码品牌型号壳型底图库存统一维护
手机壳定制库存管理源码按机型壳型组合独立控库存
手机壳定制商城源码含优惠券运费阶梯价加急费配置
手机壳定制系统源码三角色后台权限与订单生产协同
手机壳定制源码支持设计稿保存草稿与再次编辑下单
手机壳定制平台源码含用户中心地址簿消息与评价
手机壳定制售后系统源码退款重做补发全流程管理
手机壳定制商城源码含经营概览与销售数据报表
手机壳定制系统源码内容素材轮播公告模板贴纸可配置
手机壳定制源码手机端定制编辑器加电脑端管理后台
手机壳个性化定制商城源码适配多机型多材质销售
手机壳定制创业项目源码快速搭建在线定制销售平台
手机壳定制系统源码从用户设计到工厂生产文件输出
手机壳定制商城整站源码含支付倒计时与自动关单
手机壳定制源码支持设计稿审核退回与用户重新提交
手机壳定制H5系统源码在线DIY设计下单售后完整方案
手机壳定制电商平台源码机型适配库存校验价格自动计算
手机壳定制系统源码含模板套用贴纸素材与背景编辑
手机壳定制商城源码支持加急制作与预计交期展示
手机壳定制源码多角色后台加订单生产发货全链路管理
手机壳在线定制商城源码图片设计预览下单支付一体
手机壳定制系统源码含机型需求提交与后台采纳录入
手机壳定制平台整站源码商品内容营销订单数据统一管理
DIY手机壳商城源码支持上传图片生成专属手机壳
手机壳定制源码适合定制电商与印刷生产场景二次开发

复制代码

木*** · 14 小时前

微信通过下

ldi*** · 14 小时前

你好棒！！

lou*** · 11 小时前

支持！！！

		自动登录	找回密码
密码			立即注册

手机壳定制源码 在线DIY手机壳定制商城系统

手机壳定制源码 在线DIY手机壳定制商城系统

本帖子中包含更多资源

手机壳定制源码在线DIY手机壳定制商城系统

手机壳定制源码在线DIY手机壳定制商城系统