| 
					
				 | 
			
			
				@@ -1,20 +1,20 @@ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-# 微信公众号H5充值页面 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+# 微信公众号 H5 充值页面 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				  
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-这是一个基于Vue.js开发的微信公众号H5充值页面,包含用户搜索和充值两个页面。 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+这是一个基于 Vue.js 开发的微信公众号 H5 充值页面,包含用户搜索和充值两个页面。 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				  
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 ## 功能特性 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				  
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-- 用户搜索页面:通过ID搜索用户 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+- 用户搜索页面:通过 ID 搜索用户 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 - 充值页面:选择充值金额,支持支付宝支付 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 - 响应式设计,适配各种移动设备 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-- 美观的UI界面,专业的用户体验 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+- 美观的 UI 界面,专业的用户体验 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				  
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 ## 技术栈 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				  
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 - Vue.js 2.x 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 - Vue Router 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-- Vant UI组件库 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-- Less CSS预处理器 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+- Vant UI 组件库 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+- Less CSS 预处理器 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				  
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 ## 项目结构 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				  
			 | 
		
	
	
		
			
				| 
					
				 | 
			
			
				@@ -50,8 +50,58 @@ npm run serve 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 npm run build 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 ``` 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				  
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-## 注意事项 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+## 打包配置说明(包含 6 个版本) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				  
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-- 当前项目使用静态数据模拟,实际使用时需要对接后端API 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-- 支付功能仅为界面展示,需要集成实际的支付接口 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-- logo.png需要替换为实际的应用logo  
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+- 配置文件路径:`src/utils/config.js` 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+- 需调整的两个开关: 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  - `PAYMENT_TYPE`(支付方式,`'wechat' | 'alipay'`)位于 `src/utils/config.js#L9-10` 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  - `ALI_CUSTOM`(是否开启“任意金额”,仅在支付宝时生效)位于 `src/utils/config.js#L13` 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+### 版本清单与构建步骤 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+- 微信支付-需要登录(有金币兑换) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  - 分支:该版本在`main`分支,请先切换到对应分支 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  - 设置:`PAYMENT_TYPE = 'wechat'` 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  - 任意金额:不适用(仅支付宝) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  - 构建:`npm run build` 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+- 微信支付-无需登录(无金币兑换) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  - 分支:该版本在`master`分支,请先切换到对应分支 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  - 设置:无需配置 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  - 构建:`npm run build` 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+- 支付宝支付-需要登录(有金币兑换)-无任意金额 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  - 分支:该版本在`main`分支,请先切换到对应分支 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  - 设置:`PAYMENT_TYPE = 'alipay'`,`ALI_CUSTOM = false` 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  - 构建:`npm run build` 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+- 支付宝支付-需要登录(有金币兑换)-有任意金额 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  - 分支:该版本在`main`分支,请先切换到对应分支 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  - 设置:`PAYMENT_TYPE = 'alipay'`,`ALI_CUSTOM = true` 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  - 构建:`npm run build` 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+- 支付宝支付-无需登录(无金币兑换)-无任意金额 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  - 分支:该版本在`alipay`分支,请先切换到对应分支 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  - 设置:无需配置 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  - 构建:`npm run build` 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+- 支付宝支付-无需登录(无金币兑换)-有任意金额 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  - 分支:该版本在`alipay-anymoney`分支,请先切换到对应分支 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  - 设置:无需配置 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  - 构建:`npm run build` 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+### 说明与建议 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+- 金币兑换:登录版的“金币兑换”由后端登录态返回的权限 `canExchange` 控制,无需额外打包开关;无需登录版本不包含兑换入口。 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+- 产物命名:每次构建会生成 `dist/`,建议按以下名称保存归档,便于区分: 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  - `微信支付-无需登录(无金币兑换)` 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  - `微信支付-需要登录(有金币兑换)` 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  - `支付宝支付-无需登录(无金币兑换)-无任意金额` 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  - `支付宝支付-无需登录(无金币兑换)-有任意金额` 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  - `支付宝支付-需要登录(有金币兑换)-无任意金额` 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  - `支付宝支付-需要登录(有金币兑换)-有任意金额` 
			 |