微信支付

pages/paymentMethod/paymentMethod.vue

@@ -3,13 +3,7 @@
 		支付方式选择  微信or贵阳银行
 	 -->
 	<view>
-		<u-modal
-			v-model="payWayPop"
-			:title-style="{color: '#404040'}"
-			title="缴费方式"
-			width="660rpx"
-			:show-confirm-button="false"
-			:show-cancel-button="false">
+		<u-modal v-model="payWayPop" :title-style="{ color: '#404040' }" title="缴费方式" width="660rpx" :show-confirm-button="false" :show-cancel-button="false">
 			<view class="slot-content">
 				<view class="pay-way-new">
 					<!-- <view class="pay-way-item pay-way-item-hy" @click="gyBankPay">
@@ -37,17 +31,11 @@
 					</view>
 				</view>
 				<view class="pay-way-subtitle">
-					<view class="pay-way-subtitle-item">
-						前三个月每天首次一分钱，长期八折优惠
-					</view>
+					<view class="pay-way-subtitle-item">前三个月每天首次一分钱，长期八折优惠</view>
 					<!-- #ifdef H5 || MP-WEIXIN -->
-					<view class="pay-way-subtitle-item" v-if="wxEnv">
-						&nbsp;
-					</view>
+					<view class="pay-way-subtitle-item" v-if="wxEnv">&nbsp;</view>
 					<!-- #endif -->
-					<view class="pay-way-subtitle-item">
-						&nbsp;
-					</view>
+					<view class="pay-way-subtitle-item">&nbsp;</view>
 				</view>
 				<button class="pay-way-close-btn" @click="closePaymentMethod">关闭</button>
 			</view>
@@ -57,232 +45,242 @@
 </template>
 
 <script>
-	import getUrlParams from "@/utils/getUrlParams.js";
-	import {
-		getEnvIsWx
-	} from '@/utils/judgEnvironment.js'
-	export default {
-		props: {
-			// 弹框显示
-			payWayPop: {
-				type: Boolean,
-				default: false
-			},
-			// 订单数组
-			curOrderList: {
-				type: Array,
-				default: null
-			},
-			// 设备编号
-			deviceNo: {
-				type: String,
-				default: null
-			},
-			// 地磁支付需要字段
-			payeeId: {
-				type: String,
-				default: undefined
-			},
-			// 地磁支付需要字段
-			payeeName: {
-				type: String,
-				default: undefined
-			},
-			// 跳转页面
-			jumpUrl: {
-				type: String,
-				default: null
-			}
+import getUrlParams from '@/utils/getUrlParams.js';
+import { getEnvIsWx } from '@/utils/judgEnvironment.js';
+export default {
+	props: {
+		// 弹框显示
+		payWayPop: {
+			type: Boolean,
+			default: false
 		},
-		data() {
-			return {
-				wxEnv: true
-			}
+		// 订单数组
+		curOrderList: {
+			type: Array,
+			default: null
 		},
-		created() {
-			this.wxEnv = getEnvIsWx()
+		// 设备编号
+		deviceNo: {
+			type: String,
+			default: null
 		},
-		methods: {
-			/**
-			 * 贵阳银行支付
-			 * @param {Array} orderList 需要支付的订单号组成的数组
-			 * @param {String} deviceNo 设备编号(只有车位锁部分有)
-			 * */
-			gyBankPay() {
-				uni.showLoading({
-				    title: '加载中'
-				});
-				const params = {
-					orderList: this.curOrderList,
-					deviceNo: this.deviceNo,
-					jumpUrl: this.jumpUrl,
-					payeeId: this.payeeId,
-					payeeName: this.payeeName
-				};
-				this.$u.api.payGzbank(params).then(res=>{
+		// 地磁支付需要字段
+		payeeId: {
+			type: String,
+			default: undefined
+		},
+		// 地磁支付需要字段
+		payeeName: {
+			type: String,
+			default: undefined
+		},
+		// 跳转页面
+		jumpUrl: {
+			type: String,
+			default: null
+		}
+	},
+	data() {
+		return {
+			wxEnv: true
+		};
+	},
+	created() {
+		this.wxEnv = getEnvIsWx();
+	},
+	methods: {
+		/**
+		 * 贵阳银行支付
+		 * @param {Array} orderList 需要支付的订单号组成的数组
+		 * @param {String} deviceNo 设备编号(只有车位锁部分有)
+		 * */
+		gyBankPay() {
+			uni.showLoading({
+				title: '加载中'
+			});
+			const params = {
+				orderList: this.curOrderList,
+				deviceNo: this.deviceNo,
+				jumpUrl: this.jumpUrl,
+				payeeId: this.payeeId,
+				payeeName: this.payeeName
+			};
+			this.$u.api
+				.payGzbank(params)
+				.then(res => {
 					if (res.data.needPay) {
 						let payUrl = res.data.url;
 						location.href = payUrl;
 					} else {
 						this.$refs.uToast.show({
 							title: '无需支付',
-							type: 'info',
+							type: 'info'
 						});
 						setTimeout(() => {
 							uni.hideLoading();
-							location.reload()
-						}, 1000)
+							location.reload();
+						}, 1000);
 					}
-				}).catch(err=>{
+				})
+				.catch(err => {
 					this.$refs.uToast.show({
 						title: err.msg,
-						type: 'error',
+						type: 'error'
 					});
 				});
-			},
-			/**
-			 * 聚合支付
-			 * 判断vuex中是否存在openId
-			 * 存在直接调起微信支付
-			 * 不存在则通过微信登录去获取用户的code
-			 * 完成后通过code去获取用户的openId等信息
-			 * 最后再调起微信支付
-			 * */
-			juhePay() {
-				uni.showLoading({
-				    title: '加载中'
-				});
-				this.getWXPayByJava(this.curOrderList, this.deviceNo)
-			},
-			/**
-			 * 微信支付
-			 */
-			wechatPay() {
-				this.$refs.uToast.show({
-					title: '暂不支持',
-					type: 'info',
-				});
-			},
-			/**
-			 * 调起微信支付接口
-			 * @param {Array} list 需要支付的订单组合数组
-			 * @param {Number} deviceNo 设备编号(在停车锁部分需要)
-			 * */
-			async getWXPay(orderList, deviceNo){
-				let params = {
-					orderList: orderList,
-					openid: this.$store.state.vuex_wxinfo.openId,
-					deviceNo: deviceNo ? deviceNo : null
-				};
-				
-				await this.$wxApi.config();
-				this.$pay.wechatPay(params).then(res =>{
-					switch (Number(res.code)) {
-						case 0: // 成功
-							//#ifdef H5
-								
-								window.location.reload();
-							//#endif
-							break;
-						case 1: // 取消
-							this.$refs.uToast.show({
-								title: '已取消支付',
-								type: 'info',
-							});
-							break;
-						case 2: // 支付失败
-							this.$refs.uToast.show({
-								title: '支付失败，请检查!',
-								type: 'error',
-							});
-							break;
-					}
-				});
-			},
-			/**
-			 * 直接通过后台获取贵阳银行微信支付地址
-			 * @param {Array} list 需要支付的订单组合数组
-			 * @param {Number} deviceNo 设备编号(在停车锁部分需要)
-			 * */
-			getWXPayByJava(orderList, deviceNo) {
-				let params = {
-					orderList: orderList,
-					openid: '',
-					jumpUrl: this.jumpUrl,
-					deviceNo: deviceNo ? deviceNo : null,
-					payeeId: this.payeeId,
-					payeeName: this.payeeName
-				};
-				this.$u.api.ordinaryWxPay(params)
-					.then(res => {
-						if (res.code === 200) {
-							// if (getEnvIsWx()) {
-							// 	location.href = res.data.qrCodeUrl + '&jump_url=' + encodeURIComponent(this.jumpUrl)
-							// } else {
-							// 	location.href = res.data.qrCodeUrl
-							// }
-							localStorage.setItem('jumpUrl', this.jumpUrl)
-							location.href = res.data.qrCodeUrl
-							// this.cookie.set("jumpUrl",this.jumpUrl);
-						} else {
-							uni.hideLoading();
-						}
-					})
-					.catch(err => {
+		},
+		/**
+		 * 聚合支付
+		 * 判断vuex中是否存在openId
+		 * 存在直接调起微信支付
+		 * 不存在则通过微信登录去获取用户的code
+		 * 完成后通过code去获取用户的openId等信息
+		 * 最后再调起微信支付
+		 * */
+		juhePay() {
+			uni.showLoading({
+				title: '加载中'
+			});
+			this.getWXPayByJava(this.curOrderList, this.deviceNo);
+		},
+		/**
+		 * 微信支付
+		 */
+		wechatPay() {
+			// this.$refs.uToast.show({
+			// 	title: '暂不支持',
+			// 	type: 'info',
+			// });
+			this.$pay.wxPay({ orderList: this.curOrderList, openid: this.vuex_wxinfo.openId }).then(res => {
+				console.log(res);
+			});
+		},
+		/**
+		 * 调起微信支付接口
+		 * @param {Array} list 需要支付的订单组合数组
+		 * @param {Number} deviceNo 设备编号(在停车锁部分需要)
+		 * */
+		async getWXPay(orderList, deviceNo) {
+			let params = {
+				orderList: orderList,
+				openid: this.$store.state.vuex_wxinfo.openId,
+				deviceNo: deviceNo ? deviceNo : null
+			};
+
+			await this.$wxApi.config();
+			this.$pay.wechatPay(params).then(res => {
+				switch (Number(res.code)) {
+					case 0: // 成功
+						//#ifdef H5
+
+						window.location.reload();
+						//#endif
+						break;
+					case 1: // 取消
+						this.$refs.uToast.show({
+							title: '已取消支付',
+							type: 'info'
+						});
+						break;
+					case 2: // 支付失败
 						this.$refs.uToast.show({
-							title: '无法调起微信支付!',
-							type: 'error',
+							title: '支付失败，请检查!',
+							type: 'error'
 						});
-					})
-			},
-			/**
-			 * 获取code
-			 * 1 微信登录获取code
-			 * 2 url中截取
-			 * */
-			getCode () {
-				// 获取页面完整url
-				const local = window.location.href
-				// 获取url后面的参数
-				const locationLocaturl = window.location.search;
-				// 截取url中的code
-				this.code = getUrlParams(locationLocaturl, "code");
-				// 如果没有code，则去请求
-				if (this.code == null || this.code === '') {
-					window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${this.config.wxAppid}&redirect_uri=${encodeURIComponent(local)}&response_type=code&scope=snsapi_userinfo&#wechat_redirect`
-				} else {
-					// 把code传给后台获取用户信息
-					this.handleGetWXInfo(this.code)
+						break;
 				}
-			},
-			/**
-			 * 通过code获取openId等用户信息
-			 * 拿到用户信息后再调起微信支付
-			 * */
-			handleGetWXInfo (code) {
-				let _this = this
-				this.$u.api.getWXInfo(code).then((res) => {
-					if (res.code === 200 ) {
+			});
+		},
+		/**
+		 * 直接通过后台获取贵阳银行微信支付地址
+		 * @param {Array} list 需要支付的订单组合数组
+		 * @param {Number} deviceNo 设备编号(在停车锁部分需要)
+		 * */
+		getWXPayByJava(orderList, deviceNo) {
+			let params = {
+				orderList: orderList,
+				openid: '',
+				jumpUrl: this.jumpUrl,
+				deviceNo: deviceNo ? deviceNo : null,
+				payeeId: this.payeeId,
+				payeeName: this.payeeName
+			};
+			this.$u.api
+				.ordinaryWxPay(params)
+				.then(res => {
+					if (res.code === 200) {
+						// if (getEnvIsWx()) {
+						// 	location.href = res.data.qrCodeUrl + '&jump_url=' + encodeURIComponent(this.jumpUrl)
+						// } else {
+						// 	location.href = res.data.qrCodeUrl
+						// }
+						localStorage.setItem('jumpUrl', this.jumpUrl);
+						location.href = res.data.qrCodeUrl;
+						// this.cookie.set("jumpUrl",this.jumpUrl);
+					} else {
+						uni.hideLoading();
+					}
+				})
+				.catch(err => {
+					this.$refs.uToast.show({
+						title: '无法调起微信支付!',
+						type: 'error'
+					});
+				});
+		},
+		/**
+		 * 获取code
+		 * 1 微信登录获取code
+		 * 2 url中截取
+		 * */
+		getCode() {
+			// 获取页面完整url
+			const local = window.location.href;
+			// 获取url后面的参数
+			const locationLocaturl = window.location.search;
+			// 截取url中的code
+			this.code = getUrlParams(locationLocaturl, 'code');
+			// 如果没有code，则去请求
+			if (this.code == null || this.code === '') {
+				window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${this.config.wxAppid}&redirect_uri=${encodeURIComponent(
+					local
+				)}&response_type=code&scope=snsapi_userinfo&#wechat_redirect`;
+			} else {
+				// 把code传给后台获取用户信息
+				this.handleGetWXInfo(this.code);
+			}
+		},
+		/**
+		 * 通过code获取openId等用户信息
+		 * 拿到用户信息后再调起微信支付
+		 * */
+		handleGetWXInfo(code) {
+			let _this = this;
+			this.$u.api
+				.getWXInfo(code)
+				.then(res => {
+					if (res.code === 200) {
 						this.$u.vuex('vuex_wxinfo', res.data);
-						this.getWXPay(this.currentItem)
+						this.getWXPay(this.currentItem);
 					}
-				}).catch((err) => {
+				})
+				.catch(err => {
 					this.$refs.uToast.show({
 						title: err.msg,
-						type: 'error',
+						type: 'error'
 					});
-				})
-			},
-			/**
-			 * 关闭弹框
-			 * */
-			closePaymentMethod() {
-				this.$emit('closePaymentMethod')
-			}
+				});
+		},
+		/**
+		 * 关闭弹框
+		 * */
+		closePaymentMethod() {
+			this.$emit('closePaymentMethod');
 		}
 	}
+};
 </script>
 
 <style lang="scss" scoped>
-@import './paymentMethod.scss'
+@import './paymentMethod.scss';
 </style>

pay.js

@@ -11,19 +11,36 @@ import $http from "./uview-ui/libs/request"
 
 export default {
 	//微信支付
+	// wxPay(obj = {}) {
+	// 	uni.showLoading({
+	// 		title: '支付中'
+	// 	});
+	// 	return new Promise(r => {
+	// 		$http.post("/client/wechat/pay",obj)
+	// 			.then(res=>{
+	// 				//#ifdef H5
+	// 				$wxApi.JSAPI(res.data).then(r);
+	// 				//#endif
+	// 				this.payError(res);
+	// 			}).catch(err =>{
+	// 				// alert(err.msg);
+	// 				console.log('pay err',err);
+	// 			})
+	// 	});
+	// },
+	// 微信支付
 	wxPay(obj = {}) {
 		uni.showLoading({
 			title: '支付中'
 		});
 		return new Promise(r => {
-			$http.post("/client/wechat/pay",obj)
+			$http.post("/client/pay/wechat", obj)
 				.then(res=>{
 					//#ifdef H5
 					$wxApi.JSAPI(res.data).then(r);
 					//#endif
 					this.payError(res);
 				}).catch(err =>{
-					// alert(err.msg);
 					console.log('pay err',err);
 				})
 		});