更新记录
1.0.0(2026-10-22) 下载此版本
本项目仅开源 uni-app 用户端,基于 Vue3,适配网页和微信公众号。用 HBuilderX 导入本目录即可运行。
平台兼容性
uni-app(3.8.7)
| Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 |
|---|---|---|---|---|---|---|---|---|
| - | √ | √ | - | - | - | √ | √ | - |
| 微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 小红书小程序 | 快应用-华为 | 快应用-联盟 |
|---|---|---|---|---|---|---|---|---|---|---|---|
| √ | - | - | - | - | - | - | - | - | - | - | - |
其他
| 多语言 | 暗黑模式 | 宽屏模式 | 蒸汽模式 |
|---|---|---|---|
| × | × | √ | × |
旅游用户端
开源说明
本项目仅开源 uni-app 用户端,基于 Vue3,适配网页和微信公众号。用 HBuilderX 导入本目录即可运行,供学习研究。
能在哪些地方使用
普通游客、本地居民可以在电脑或手机的网页里使用,也可以在微信里打开网页使用。商家也可以在同一套用户端里申请入驻、管理自己的门店和订单。
底部有三个主入口:首页、订单、我的。
对接了哪些第三方
下面这些是用户日常能直接感受到的外部服务,不是技术名词堆砌:
- 腾讯地图:自动识别当前城市;搜索附近景区、美食、停车场;在地图上选门店位置;看路线;一键打开手机里的地图去导航。
- 微信支付:订酒店、买商品、交商户保证金、给钱包充值时,可以走微信支付。在手机网页上,需在微信里打开,并用公众号相关账号,才能出现微信支付。
- 支付宝:同样用于下单付款、充值和交保证金。
- 钱包余额:平台自己的余额支付,钱不够会提示换微信支付或支付宝。
- 手机短信验证码:登录、注册、找回密码时,会往手机号发验证码(由服务端发送)。
- 企业微信客服:后台若配好了,可跳到企业微信和客服聊天;小程序里会走微信提供的企业微信客服入口。
- 电话客服:可直接拨打后台配置的客服电话。
- 个人微信客服:可复制客服***,或扫客服二维码添加。
- 平台在线客服:登录后可在 App 里和平台客服即时发消息。
- 豆包人工智能:首页有 AI 助手,可咨询旅游问题,并按回答跳到对应页面。
- 手机系统能力:获取定位、打开系统地图导航、拨打电话、复制单号和***、从相册选头像和证件照片。
说明:登录页有「微信登录」入口,当前会提示改用手机号登录,还不能直接用微信一键登录。
游客能做什么
打开软件先看到什么
- 自动定位当前城市,也可以自己选目的地。
- 顶部能搜索景点、酒店、美食等。
- 有轮播广告,点进去可跳到对应内容。
- 有一排快捷入口(酒店、线路、景区、活动、非遗、地图等,具体以后台配置为准)。
- 有滚动公告,可进公告列表和公告详情。
- 首页按分类展示推荐内容:酒店、线路、景区、活动、非遗等,能看到封面、名称、地址、价格、标签。
- 下拉可刷新首页。
- 右下角可进「美食地图」和「AI 助手」。
订酒店
- 看酒店列表和酒店详情(图片、地址、设施、介绍)。
- 看房型、价格、全部评价。
- 选入住日期、离店日期、间数。
- 填写入住人真实姓名(需和证件一致)、联系人和手机号,可写备注(比如晚到)。
- 入住前 1 天晚上 6 点前可免费取消(页面上有预订须知)。
- 到店出示核销码或二维码办理入住,也可给商家打电话、看地图导航。
- 订单状态大致包括:待入住、已入住/已完成、已取消、已退款。
预约旅游线路
- 看线路列表、线路详情、几天几晚、途经景点、行程安排、所属门店。
- 选出行日期、出行人数,填写预约人、同行人和身份证信息。
- 页面会提示集合点,出发前可能短信通知具体位置。
- 出行前 1 天晚上 6 点前可免费取消或改期。
- 出行当天向旅行社出示核销码。
- 订单状态大致包括:待支付、待出行、已完成、已取消、已退款。
- 可查看门店、联系商家、申请退款。
看景区、报名活动
- 看景区列表和景区详情。
- 看活动详情,选日期和人数后确认预约。
- 活动也可能是到现场再交费,页面会说明。
订餐和本地美食
- 食堂预约:选日期提交预约,之后在「餐饮预约」里看记录和详情,待处理数量会在「我的」里提示。
- 卤鹅等本地商家:看商家详情、全部菜品、菜品详情,再确认订单。
买非遗商品、了解非遗
- 看非遗介绍、非遗名录。
- 看非遗好店和好店详情。
- 看非遗好物、商品详情、全部评价。
- 下单时选收货地址,可新增、编辑地址。
- 商家发货后可看物流公司、运单号、物流轨迹,可复制单号、确认收货。
- 好物订单状态大致包括:待发货、待收货、已完成。
出行和地图
- 地图服务里可切换:地图导航、美食地图、停车通行等。
- 能在腾讯地图上找附近点、看位置、规划路线,并打开手机地图导航过去。
- 公共交通:看线路、时刻表、沿途站点、公交车大概在哪个位置。
搜索和公告
- 统一搜索景点、酒店、美食等内容。
- 看平台公告列表和公告详情。
付钱怎么付
- 下单后弹出支付窗口,可选:余额、微信支付、支付宝(按当前打开方式显示,不是每种环境都有微信支付)。
- 可先选一张优惠券再付款。
- 余额不够会提示换其他方式。
- 支付成功后订单生效;没付完可在订单里继续「去支付」。
优惠券和钱包
- 领券中心领券,我的优惠券里查看已领的券。
- 钱包可充值(微信或支付宝)、提现、绑定提现账号、看资金明细和提现记录。
- 资产中心里可看收藏,按酒店、线路、景区等分类筛选,也可取消收藏。
邀请朋友赚钱
- 邀请好友、看我的团队、看收益明细。
- 登录、注册时可填邀请码;从分享链接进来也会带上邀请关系。
账号和设置
- 手机号 + 短信验证码登录(没注册过会自动注册)。
- 手机号 + 密码登录。
- 单独注册、忘记密码并重置。
- 登录前需同意用户协议、隐私政策。
- 个人中心改头像、改昵称(手机号一般不能随意改)。
- 设置中心:帮助、协议、关于、退出登录。
- 可申请注销账号,提交后由平台审核,通过后不能再登录。
订单里还能做什么
- 订单分成三大类:好物订单、酒店订单、线路预约,每类再按状态筛选。
- 可复制订单号、看核销码、联系客服、联系商家、导航到店。
- 待付款可取消或继续支付。
- 符合条件可申请退款;线路退款有专门弹窗。
- 完成后可打分、写评价、再订一次。
- 非遗商品可看物流详情。
消息、客服、帮助
- 「我的」里有消息入口,未读数量会提示。
- 客服中心按后台配置,可能是:打电话、***、企业微信、或平台在线聊天。
- 帮助中心看常见问题。
- 意见反馈可提交建议或投诉。
- AI 助手用豆包回答旅游相关问题。
商家能做什么
- 在「我的」里申请商户入驻,选经营类型(酒店、餐饮、旅游线路、非遗等)。
- 用地图点选门店真实位置,上传资质照片,提交后看审核结果。
- 审核通过后进入商户中心:看待处理订单、核销顾客核销码、改商户信息。
- 缴纳保证金(微信、支付宝或余额),之后可申请退保证金。
- 商户钱包:看资金、提现、绑定收款方式、看资金明细和提现明细。
- 酒店商家:管房间、客房标准、装修门店介绍、处理订单。
- 餐饮商家:管菜品、装修门店介绍、处理订单。
- 线路商家:管路线、看出行人信息、装修介绍、处理订单。
- 非遗商家:管商品、填写发货物流、装修介绍、处理订单。
体验
体验地址:https://lvyouwl.xianmaxiong.com
技术栈
| 端 | 技术 |
|---|---|
| 用户端 | uni-app + Vue3 |
运行
这份代码已经接到线上体验环境,不用改任何配置,打开后直接运行即可。
开始前请准备
- 一台 Windows 电脑(苹果电脑也可以,步骤差不多)。
- 下载并安装 HBuilderX(官方用来打开这类项目的软件):
打开浏览器,搜索「HBuilderX 官网」,进入 https://www.dcloud.io/hbuilderx.html,下载「正式版」,安装后打开。 - 建议再装一个 Chrome 浏览器,用来打开运行后的页面。
第一步:拿到文件夹
- 如果你收到的是压缩包(例如 zip),先右键「解压到当前文件夹」或「解压到指定文件夹」。
- 解压后,请找到名字叫
旅游的文件夹。里面应该能看到pages.json、App.vue、common等文件。 - 记住这个文件夹在电脑上的位置,后面要选中它。不要只打开里面某一个文件。
第二步:用 HBuilderX 打开整个项目
- 打开已经安装好的 HBuilderX。
- 点左上角 「文件」→「打开目录」(有的版本也叫「从本地打开」)。
- 选中刚才的
旅游文件夹,确定。 - 左侧出现一长串文件名,就说明打开对了。如果左侧是空的,说明选错了文件夹,请重新选带
pages.json的那一层。
第三步:用浏览器运行
- 在 HBuilderX 顶部菜单点 「运行」→「运行到浏览器」→「Chrome」。
- 第一次可能会提示安装浏览器运行插件,点允许或安装,等它装完再重新点一次运行。
- 电脑会自动弹出一个网页。出现首页、底部「首页 / 订单 / 我的」,就说明运行成功了。
- 如果浏览器问能不能获取位置,点「允许」,首页才能显示当前城市。
- 不要关 HBuilderX,关了网页可能会断开。
常见情况说明
- 点了运行没反应:确认打开的是整个
旅游文件夹,不是只打开了一个页面文件。 - 浏览器打开了但是花屏、一直转圈:等十几秒;仍不行就关掉网页,在 HBuilderX 里再点一次运行。
- 页面是空的、提示加载失败:检查电脑能否打开体验地址 https://lvyouwl.xianmaxiong.com ;如果这个网页本身打不开,用户端也会没数据。
- 地图不显示或定位失败:需要腾讯地图的钥匙(项目里已预填,有过期或额度用完的可能)。学习看页面时可以先忽略地图。
- 微信支付、支付宝点了没反应:需要商家自己的支付账号,这份开源代码一般只能看到支付按钮,不能真的完成收款。
- 客服、短信验证码收不到:这些依赖服务端和第三方账号,界面可以点,功能不一定通。
第一次建议怎么验收
- 按第三步在 Chrome 打开。
- 能看到首页轮播、底部三个按钮。
- 点「我的」,能看到登录入口。
- 再点「订单」,能进入订单页。
做到这里,就说明「这份用户端代码已经在你电脑上跑起来了」。

收藏人数:
下载插件并导入HBuilderX
下载插件ZIP
赞赏(0)
下载 1
赞赏 0
下载 12703542
赞赏 1957
赞赏
京公网安备:11010802035340号