更新记录

1.0.0（2026-10-27） 下载此版本

本项目仅开源 uni-app 用户端，基于 Vue3，适配电脑/手机网页、微信小程序等。用 HBuilderX 导入本目录即可运行，供学习研究。

平台兼容性

uni-app(3.8.7)

其他

美印用户端

开源说明

本项目仅开源 uni-app 用户端，基于 Vue3，适配电脑/手机网页、微信小程序等。用 HBuilderX 导入本目录即可运行，供学习研究。

能在哪些地方使用

需要定制照片书、台历、相框、马克杯、手机壳等成长纪念商品的家庭用户，可以在电脑或手机的网页里使用，也可以在微信小程序里使用。同一套用户端覆盖浏览商城、在线排版设计、共享相册、下单支付与会员权益。

底部有五个主入口：首页、作品、共享相册、消息、我的。

对接了哪些第三方

下面这些是用户日常能直接感受到的外部服务，不是技术名词堆砌：

• 收货地址 / 选点：新增收货地址时可填写省市区与详细地址，部分端支持地图选点，方便定制商品快递送达。
• 微信支付：下单付定制商品、开通会员、钱包充值时，在微信小程序或微信内置浏览器里可走微信支付。普通电脑浏览器网页一般不出现微信支付。
• 支付宝：在电脑/手机网页或 App 里下单、充值、开通会员时，可走支付宝（小程序里通常不展示支付宝）。
• 钱包余额：平台自己的余额支付；退款、活动奖励等会进钱包；余额不够时可换微信或支付宝。
• 手机短信验证码：注册账号、忘记密码时，会往手机发验证码（由服务端发送）。
• 微信一键登录：在微信小程序里，可先微信授权，再授权手机号完成登录。
• 平台在线客服：登录后可在「在线客服」里和平台客服即时发消息，也可转发订单、商品或图片。
• 电话：后台若配置了客服电话，可在「关于我们 / 帮助」相关信息里看到；需要时可拨打联系。
• 手机系统能力：从相册/相机选照片做定制、换头像、上传评价图、保存图片、复制订单号、拨打电话等。

说明：具体支付渠道、短信是否真正可用，取决于线上后台是否已配置对应账号；开源学习时，页面按钮一般都能看到，部分第三方能力可能点了没反应。

游客能做什么

下面说的「游客」，指还没登录账号的人。能看的内容很多；涉及下单、保存作品、创建相册、收藏、钱包等，会提示先登录。

打开软件先看到什么（首页）

• 顶部可「全平台产品搜索」，旁边有消息入口（登录后才有未读数）。
• 有轮播广告图，点进去可跳到对应活动或产品（具体以后台配置为准）。
• 有一排快捷入口（例如热销榜单、优选精品、创新定制、品牌新品等，名称和跳转以后台配置为准）。
• 新人专享礼包：可领取新人红包 / 百元大礼包相关优惠。
• 新品推荐：看封面、名称、简介和价格；可进「查看更多」。
• 活动卡片：如限时特卖、团单定制等入口。
• 热门分类：照片书、台历挂历、画册相册、周边定制（马克杯、抱枕、手机壳等）；分类较多时可展开全部。
• 热销好物：看封面、标题、简介、价格与销量。
• 下拉可刷新首页。

逛商城、看产品详情

• 进商品列表 / 照片书专区：可按标签、分类、尺寸、装订、页数、价格等筛选浏览。
• 打开产品详情：看主图/视频、价格、销量、规格、配送说明、用户评价与商品详情。
• 「收藏」「开始制作 / 加入购物车 / 立即购买」等需要登录后才能完整走通。
• 多规格商品先选规格数量，再进入定制或确认订单。

特卖、新人礼包、团单

• 「限时特卖」可看特价商品、进度与已抢数量；真正下单付款需要登录。
• 「新人百元大礼包」可浏览礼包与推荐商品；领券、使用一般需要登录。
• 「团单定制」可浏览批量定制相关入口；发起拼团、查看「我的团单」需要登录。

定制设计与作品（底部「作品」）

• 登录后可在「作品」里管理自己的定制稿，按 单品 / 智能推荐 / 套系分类 查看。
• 可搜索作品名称；可进购物车、作品收藏、作品回收站。
• 作品卡片支持继续编辑、预览、收藏、加购、下单支付等（需登录）。
• 典型制作流程：选商品 → 选设计风格 → 选相册照片 → 排版编辑（单页/整册）→ 预览 → 保存作品或去支付。

共享相册（底部「共享相册」）

• 可看「我创建的」「分享给我的」相册列表。
• 可创建相册（名称、简介、是否允许成员上传等）、用邀请口令加入相册。
• 相册详情里可管理照片、共享成员、选成书模板等；上传与协作一般需要登录。

付钱怎么付（登录后）

• 下单或开通会员、充值后弹出支付方式，按当前打开环境显示，常见包括：
  • 微信支付（小程序 / 微信内 H5 / App 等）
  • 支付宝（网页 / App 等）
  • 钱包余额 / 零钱支付
• 可选用优惠券、红包、制作券，也可抵扣兔兔币后再付款。
• 支付成功后订单生效；没付完可在订单列表里继续「去支付」。

订单里能看到什么（登录后）

• 「我的」里订单入口按状态筛选：待付款、待发货、待收货、待评价、售后。
• 订单详情里有：订单状态、订单编号、下单时间、收货地址、商品规格、数量、快递方式、费用明细、实付金额、物流进度等。
• 待付款可取消订单或继续支付；待收货可看物流详情。
• 收货完成后可「去评价」（打分、写评语、传图）。
• 可申请售后（仅退款 / 退货退款 / 换货等），进度以页面显示为准。

优惠券、钱包、会员（登录后）

• 领券中心领券；「我的优惠券 / 卡券 / 红包 / 制作券」查看已领权益。
• 「我的钱包」看账户余额和收支流水；可余额充值。
• 「会员中心」看 PLUS / 金牌等会员权益说明，选套餐后付款开通；会员常附赠制作券等礼包。
• 「兔兔币中心」可看积分；支持签到、早起打卡挑战等赚币玩法。
• 「红包广场」「推广中心」「佣金提现」等运营玩法可在「我的」相关入口进入。

账号、地址、消息、客服

• 网页端 / App：手机号 + 密码登录；可注册（短信验证码）、忘记密码重置。
• 微信小程序：微信授权登录 → 再授权手机号（未注册会按业务规则自动创建账号）。
• 登录前需同意《用户协议》《隐私协议》。
• 「我的」里可改头像、昵称；可看会员等级；可签到、赚币。
• 收货地址：新增 / 编辑收货地址（省市区、详细地址、收件人、电话、是否默认等）。
• 消息中心（底部「消息」）：看智能客服、新品推送、活动优惠等通知，未读会提示。
• 帮助 / 在线客服：看常见问题；可进「在线客服」聊天（需登录）。客服电话与服务时间以后台配置为准。
• 存储空间：查看云端照片存储用量，可购买扩容套餐。
• 电子发票：对已完成订单申请开票、管理发票抬头、查看开票历史。
• 系统设置：修改登录密码、关于与协议、退出登录等。

推广与提现入口

• 「我的」里有「推广中心」，可看推广奖励相关信息。
• 有可提现佣金时，可进入「佣金提现」并绑定收款信息（需登录且按业务规则审核）。

定制设计能做什么

登录后可在商城商品上发起定制，主要能力如下：

• 选择商品与规格：照片书、台历、摆台相框、马克杯、手机壳等；多规格先选尺寸/款式再制作。
• 选择设计风格：按通用版、儿童版、家庭版、旅行版等主题挑选模板。
• 选择照片：从共享相册选图，或从手机相册/相机上传。
• 排版编辑：封面/内页编辑，调整布局、裁剪、换图、预览整册效果。
• 单页编辑：部分周边商品走单页编辑与单页预览流程。
• 保存作品：草稿进入「作品」列表，可继续改、收藏、加购或直接下单。
• 下单履约：选收货地址与快递，用券/币后支付；后续可在订单里查进度、物流与售后。

体验

体验地址：https://meiyin.xianmaxiong.com

（手机或电脑浏览器直接打开即可预览；微信小程序需在微信里搜索对应小程序，以实际发布名称为准。）

技术栈

运行

这份代码已经接到线上体验环境，不用改任何配置，打开后直接运行即可。

开始前请准备

1. 一台 Windows 电脑（苹果电脑也可以，步骤差不多）。
2. 下载并安装 HBuilderX（官方用来打开这类项目的软件）：
   打开浏览器，搜索「HBuilderX 官网」，进入 https://www.dcloud.io/hbuilderx.html，下载「正式版」，安装后打开。
3. 建议再装一个 Chrome 浏览器，用来打开运行后的页面。

第一步：拿到文件夹

1. 如果你收到的是压缩包（例如 zip），先右键「解压到当前文件夹」或「解压到指定文件夹」。
2. 解压后，请找到名字叫 vue3+uviewPlus-meiuintutu 的文件夹。里面应该能看到 pages.json、App.vue、common、pages 等文件和目录。
3. 记住这个文件夹在电脑上的位置，后面要选中它。不要只打开里面某一个文件。

第二步：用 HBuilderX 打开整个项目

1. 打开已经安装好的 HBuilderX。
2. 点左上角 「文件」→「打开目录」（有的版本也叫「从本地打开」）。
3. 选中刚才的 vue3+uviewPlus-meiuintutu 文件夹，确定。
4. 左侧出现一长串文件名，就说明打开对了。如果左侧是空的，说明选错了文件夹，请重新选带 pages.json 的那一层。

第三步：用浏览器运行

1. 在 HBuilderX 顶部菜单点 「运行」→「运行到浏览器」→「Chrome」。
2. 第一次可能会提示安装浏览器运行插件，点允许或安装，等它装完再重新点一次运行。
3. 电脑会自动弹出一个网页。出现首页、底部「首页 / 作品 / 共享相册 / 消息 / 我的」，就说明运行成功了。
4. 如果浏览器问能不能获取位置或相册权限，按需要点「允许」，不影响先浏览商城首页。
5. 不要关 HBuilderX，关了网页可能会断开。

常见情况说明

• 点了运行没反应：确认打开的是整个 vue3+uviewPlus-meiuintutu 文件夹，不是只打开了一个页面文件。
• 浏览器打开了但是花屏、一直转圈：等十几秒；仍不行就关掉网页，在 HBuilderX 里再点一次运行。
• 页面是空的、提示加载失败：检查电脑能否打开体验地址 https://meiyin.xianmaxiong.com ；如果这个网页本身打不开，用户端也会没数据。
• 选不了照片或上传失败：需要允许浏览器/手机的相册与相机权限；学习看页面时可以先逛商城与「我的」。
• 微信支付、支付宝点了没反应：需要商家自己的支付账号，这份开源代码一般只能看到支付按钮，不能真的完成收款（或仅部分环境可用）。
• 短信验证码收不到、在线客服无回复：这些依赖服务端和第三方账号，界面可以点，功能不一定通。
• 想跑微信小程序：需安装「微信开发者工具」，在 HBuilderX 里选「运行到小程序模拟器 → 微信开发者工具」，并在 manifest.json 里使用你自己的小程序 AppID。

第一次建议怎么验收

1. 按第三步在 Chrome 打开。
2. 能看到首页轮播或推荐商品、底部五个按钮（首页 / 作品 / 共享相册 / 消息 / 我的）。
3. 点「作品」，能看到作品列表或空状态提示（未登录可能提示登录，也算正常）。
4. 点「我的」，能看到登录入口或个人中心。
5. 再点「共享相册」或「消息」，能进入对应页面。
   做到这里，就说明「这份用户端代码已经在你电脑上跑起来了」。