更新记录

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

本项目仅开源 uni-app 用户端，基于 Vue2，适配网页和微信公众号。用 HBuilderX 导入本目录即可运行，供学习研究。

平台兼容性

uni-app(3.8.10)

其他

上门送水用户端

开源说明

本项目仅开源 uni-app 用户端，基于 Vue2，适配网页和微信公众号。用 HBuilderX 导入本目录即可运行，供学习研究。

能在哪些地方使用

想订水的人可以在电脑或手机的网页里使用，也可以在微信里打开网页使用。

底部有三个主入口：首页、购物车、我的。

先记住三个词，后面会反复用到：

• 站点：负责给你送水的附近门店。换了地址，可能要换站点。
• 水票：事先买好的送水券。下单时如果还有剩余，可以直接拿水票抵，不用再付钱。
• 水贝：平台里的余额，可以当钱用。购物车和付款时都能看到还剩多少。
• 押桶：桶装水的空桶要先交押金。送水时一般是空桶换满桶，押桶数量不够就不能下这类需要压桶的水。

对接了哪些第三方

下面这些是订水时能直接碰到的外部服务，按日常使用来写：

• 腾讯地图：打开后按你的位置找附近送水站点。新增收货地址时，可以在地图上点选位置，自动带出省、市、区和地点名称。
• 微信支付：确认下单后，付款窗口里可以选择微信。手机网页上要在微信里打开，才会出现微信支付。微信小程序里付款也走微信。
• 支付宝：电脑网页、手机网页和手机 App 里，付款窗口可以选择支付宝。
• 水贝：平台自己的余额。打开了这个功能时，付款窗口里会多一个「水贝」。购物车底部也会写「可用水贝支付」，并显示当前余额。
• 水票：你名下还有水票、并且这次没用优惠券时，付款窗口里会出现这张水票，旁边写着还剩多少张。选中后按水票支付。
• 优惠券：首页新人红包领到的券，下单时可以选一张。选了优惠券，就不能同时用水票。券有最低消费，金额不够会提示。
• 手机短信验证码：登录、注册、找回密码、换绑手机号时，会往手机号发一条验证码（由服务端发送）。
• 微信登录：在微信里打开网页时，如果打开了这个入口，登录页会有「微信登录」。微信小程序里是「授权登录」，还可以授权手机号。
• 企业微信客服：「我的」里点联系客服，如果配的是企业微信，会跳去和企业微信客服聊天。微信小程序里会打开微信客服会话。
• 电话客服：如果客服配的是电话，点一下就直接拨打。
• 客服二维码：如果客服配的是二维码，会打开二维码页面，用微信扫一扫添加。
• 微信订单提醒：在微信小程序里查看站点或进入订单时，可能会请你允许接收后续订单通知。点允许后，订单进度可以发到微信。
• 分享：商品可以转发给好友，也可以生成一张带商品的海报图片，保存后发给别人。
• 手机系统能力：获取当前位置、在地图上选地址、拨打客服电话、从相册选择头像。

说明：微信支付和支付宝要有对应的收款账号。这份开源代码一般能看到付款按钮，不能真的把钱收进来。短信和客服也一样，按钮可以点，能不能打通取决于账号是否配好。

订水的人能做什么

打开软件先看到什么

• 最上面是当前送水站点。没有定位到站点时，会显示「暂无站点」。点「查看更多」可以换站点，没登录会先去登录。
• 下面是轮播广告，自动切换，点图片可跳到对应内容。
• 有一排圆形快捷入口，例如桶装水、水票购买、一次性饮用水。具体有哪些，以打开后看到的为准。
• 有一条滚动公告，内容是「某某刚刚下单」。
• 再往下按类别展示商品，例如「桶装水（需压桶）」「一次性饮用水」「饮用矿泉水」「饮水机」。每个商品能看到图片、名称、一句介绍、价格、已售多少。
• 需要压桶的水，标题上会写明「需压桶」。
• 第一次进来，可能会弹出一个新人红包。点一下领取，成功后可以到优惠券里查看。
• 页面上有「一键下单」，用来快速去订水。
• 已经有订单时，右下角可以进入这笔订单。

看一种水

点首页上的一个商品，进入详情：

• 顶部是图片轮播，点图片可以放大看。
• 能看到价格、已售数量、商品名称。
• 有人评价过，会显示一条评价：头像、名字、几颗星、评价内容。评价多于一条时，可以点「查看全部」。
• 下面是商品详情长图。
• 底部可以收藏或取消收藏。
• 可以分享。网页上分享有两种：复制推广文案发到别处，或者生成海报图片。
• 可以「加入购物车」，也可以「立即下单」。

点购买后会从底部弹出选择窗：

• 看商品小图、名称、当前价格。
• 如果有多种规格（比如不同容量），点选一种，选中的会变色。
• 用加号、减号改数量，数量最少是 1。
• 窗口里会算出这一单的总价，并写出你选了什么。
• 再点一次「加入购物车」或「立即下单」。没登录会先去登录。

填地址、选什么时候送

立即下单，或在购物车里点「去结算」，都会进入确认页：

• 最上面是收货地址。还没选时写着「请选择服务地址」。选好后能看到省市区、详细地址、收货人姓名和手机号。点这一行可以换地址。
• 中间是商品：图片、名称、规格、数量、单价。数量在这里还能再加减。
• 配送时间：点一下弹出日期和时间，选好后显示在这一行。
• 附近站点：显示当前会由哪一个站点来送。这个站点送不到你的地址时，会提示「当前地址无法下单，请切换地址」。
• 优惠券：有可用的券时，点「立即使用」从底部列表里选一张。不满足最低金额会提示。
• 底部是合计金额和「确认下单」。

地址怎么管

在确认页或「我的」里的「我的地址」进入地址本：

• 每条地址显示收货人、手机号、省市区和详细地址。
• 可以设一条默认地址，下次下单会优先用它。
• 可以改一条地址，也可以删除。
• 点「添加地址」填写：收货人、手机号、地区、详细地址，并可以选择设为默认。
• 选地区时会打开地图，在地图上点一个位置。地点名称会填进详细地址，省、市、区会按这个位置自动填上。

付钱怎么付

点「确认下单」后，从底部弹出「选择支付方式」。能看到哪些，取决于你现在是用网页、微信还是手机 App 打开：

• 支付宝：网页和手机 App 里常见。
• 微信：在微信里打开，或使用微信小程序、手机 App 时出现。
• 水贝：功能打开时出现，用账户里的余额付。
• 水票：你还有剩余水票、并且这次没有用优惠券时出现，后面写着「剩余多少张」。

选好后点「确认支付」。

另外两种情况会拦住下单：

• 这瓶水需要压桶，而你的押桶数量不够，会提示先去押桶。
• 当前站点送不到这个地址，会提示换地址。

没付完的单，可以稍后在「我的订单」里继续「去支付」。

购物车

底部点「购物车」：

• 每件商品有勾选框、图片、名称、规格、单价。
• 用加号、减号改数量。
• 底部可以全选，并看到勾选商品的合计金额。
• 如果开了水贝，这里会写「可用水贝支付」和当前余额。
• 点「去结算」，只结算勾选的商品，然后进入上面的确认页。
• 购物车是空的，会显示暂无数据。

订单里还能做什么

「我的」里的「我的订单」，或点「查看全部」，进入订单列表。上面可以切换：

全部、待付款、待接单、待服务、进行中、已完成、已取消。

每一单能看到下单时间、现在什么状态、商品图、名称、规格、数量、实付金额。

不同状态可以做的事不一样：

• 待付款：可以取消，也可以继续去支付。
• 待接单：可以取消。站点还没接这一单。
• 进行中：可以看确认码。确认码是一串数字，送给水的人核对。页面允许时，也可以自己点「订单完成」。
• 已完成：可以去评价，给星、写评价内容。也可以去投诉。
• 点进某一单可以看这笔订单的详情。

水票、水贝、押桶、优惠券

这些都在「我的」页面上直接能看到数字：

• 我的水贝：余额是多少。点进去可以看和获取水贝。有的账号显示的是「我的水票」和还剩多少张，二选一，以打开后看到的为准。
• 优惠券：还剩多少张。首页领的新人红包也会进这里。
• 我的收藏：收藏了多少个商品，点进去可以再看。
• 我的押桶：现在押了多少个桶。买「需压桶」的水之前，数量要够。
• 水票中心：买水票、看水票。
• 我要押桶：去交桶押金。这个入口不一定每次都显示，以打开后看到的为准。

账号和登录

• 登录页点「手机号登录」。
• 手机号 + 短信验证码登录。没注册过的手机号，注册时会自动要求填资料。
• 手机号 + 密码登录。
• 注册要填：用户名、手机号、验证码、密码。邀请码有时必填，有时选填。从别人的分享链接进来，邀请码会自动带上。
• 忘记密码后，用手机验证码重置。
• 也可以换绑手机号，同样要验证码。
• 登录前要勾选同意《隐私政策》和《用户服务协议》。
• 在微信里打开时，可能同时有「微信登录」和「手机号登录」。
• 微信小程序里是授权登录，并可以授权手机号。
• 登录后，「我的」顶部是头像、昵称和邀请码。点头像可以改个人资料。
• 没登录时，这里只显示「登录」。

我的、客服、帮助

「我的」下半部分是推荐工具，常见有这些：

• 代理商中心：申请成为代理商。
• 推广中心：把送水分享给别人。
• 投诉记录：看自己投诉过的订单。
• 邀请好友：把邀请关系发给朋友。
• 招商加盟：看加盟说明。
• 系统消息：看平台发给你的通知。
• 我的地址：管理收货地址。
• 联系客服：按当前配置，可能是打电话、打开企业微信，或显示客服二维码。
• 意见反馈：写下建议或问题提交。
• 帮助中心：看常见问题。
• 设置中心：协议、关于、退出登录等设置。

这些入口是否全部出现，以你打开「我的」后实际看到的为准。

体验

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

技术栈

运行

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

开始前请准备

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

第一步：拿到文件夹

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

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

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

第三步：用浏览器运行

1. 在 HBuilderX 顶部菜单点 「运行」→「运行到浏览器」→「Chrome」。
2. 第一次可能会提示安装浏览器运行插件，点允许或安装，等它装完再重新点一次运行。
3. 电脑会自动弹出一个网页。出现首页、底部「首页 / 购物车 / 我的」，就说明运行成功了。
4. 如果浏览器问能不能获取位置，点「允许」，首页才能显示当前站点。
5. 不要关 HBuilderX，关了网页可能会断开。

常见情况说明

• 点了运行没反应：确认打开的是整个 上门送水 文件夹，不是只打开了一个页面文件。
• 浏览器打开了但是花屏、一直转圈：等十几秒；仍不行就关掉网页，在 HBuilderX 里再点一次运行。
• 页面是空的、提示加载失败：检查电脑能否打开体验地址 https://songshui.xianmaxiong.com ；如果这个网页本身打不开，用户端也会没数据。
• 地图不显示或定位失败：需要腾讯地图的钥匙（项目里已预填，有过期或额度用完的可能）。学习看页面时可以先忽略地图。
• 微信支付、支付宝点了没反应：需要商家自己的支付账号，这份开源代码一般只能看到支付按钮，不能真的完成收款。
• 客服、短信验证码收不到：这些依赖服务端和第三方账号，界面可以点，功能不一定通。

第一次建议怎么验收

1. 按第三步在 Chrome 打开。
2. 能看到首页商品、底部三个按钮。
3. 点「我的」，能看到登录入口。
4. 再点「购物车」，能进入购物车页。
   做到这里，就说明「这份用户端代码已经在你电脑上跑起来了」。