wxpay.vue 4.56 KB
Newer Older
1 2 3 4 5 6
<template>
	<view class="content">
		<view class="nav-content">
			<uni-icons color="#212121" class="search-icon-arrowleft" size="24" type="arrowleft" @click="goBack" />
			<view class="title">微信支付</view>
		</view>
郑秀明's avatar
郑秀明 committed
7 8 9
		<view class="sub-title">
			谛宝多多分期定金订单-{{order_id}}
		</view>
10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
		<view class="price">
{{amount}}
		</view>
		<button type="primary" class="submit-btn" :loading="loading" @click="handleSumit">立即支付</button>
	</view>
</template>

<script>
	import uniIcons from "@/components/uni-icons/uni-icons.vue";
	import {parse} from 'querystring'
	export default{
		components: {
			uniIcons
		},
		data(){
			return {
				loading: false,
郑秀明's avatar
郑秀明 committed
27 28
				amount: '',
				order_id: ''
29 30 31 32 33 34
			}
		},
		onLoad(){
			const { href } = location;
			const { amount, order_id, code } = parse(href.split('?')[1]);
			this.amount = amount;
郑秀明's avatar
郑秀明 committed
35
			this.order_id = order_id;
36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75
		},
		methods: {
			handleSumit(){
				const { href } = location;
				const { amount, order_id, code } = parse(href.split('?')[1]);
				if(!amount || !order_id || !code){
					uni.showToast({
						title: '参数错误请重新支付',
						icon: 'none'
					})
					return;
				}
				this.loading = true;
				uni.request({
					url: `/uni/api/repayment/GoPay`,
					method: 'post',
					dataType: 'json',
					data: {
						amount: parseFloat(amount),
						order_id: order_id,
						payment_code: "epaywxjs",
						payment_name: "微信支付",
						wx_code: code
					},
					success: (res) => {
						const {data} = res;
						this.loading = false;
						if(data.code === 0){
							this.onBridgeReady(data.data);
						}
					}
				})
			},
			onBridgeReady(res){
				if(res.package === undefined){
					uni.showToast({
						title: '获取参数失败,请重新支付',
						duration: 2000,
						icon: 'none'
					});
郑秀明's avatar
郑秀明 committed
76 77 78
					setTimeout(() => {
						history.back();
					},2000);
79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97
					return;
				}
				WeixinJSBridge.invoke(
					'getBrandWCPayRequest', {
						"appId": res.app_id,     //公众号名称,由商户传入
						"timeStamp": res.timeStamp,         //时间戳,自1970年以来的秒数
						"nonceStr": res.nonce_str, //随机串
						"package": res.package,
						"signType": res.sign_type,         //微信签名方式:
						"paySign": res.pay_sign //微信签名
					},
					function (res) {
						WeixinJSBridge.log(res.err_msg);
						const url = window.location.origin;
						if (res.err_msg === "get_brand_wcpay_request:ok") {
							uni.navigateTo({
								url: '/pages/payresult/payresult'
							})
						} else if (res.err_msg === "get_brand_wcpay_request:cancel") {
郑秀明's avatar
郑秀明 committed
98 99 100 101 102 103 104 105
							uni.showToast({
								title: '已取消支付,请重新支付',
								duration: 2000,
								icon: 'none'
							});
							setTimeout(() => {
								history.back();
							},2000);
106 107
						} else if (res.err_msg === "get_brand_wcpay_request:fail") {
							// Toast.fail('支付失败', 3);
郑秀明's avatar
郑秀明 committed
108 109 110 111 112 113 114 115 116
							uni.showToast({
								title: '支付失败,请重新支付',
								duration: 2000,
								icon: 'none'
							});
							// 回退上一页重新支付
							setTimeout(() => {
								history.back();
							},2000);
117
							// 提示支付失败,关闭当前页面
郑秀明's avatar
郑秀明 committed
118
							// setTimeout(function() {
119
								//这个可以关闭安卓系统的手机
郑秀明's avatar
郑秀明 committed
120 121 122 123 124 125 126 127 128 129 130
								 // document.addEventListener(
									// 	"WeixinJSBridgeReady",
									// 	function() {
									// 		WeixinJSBridge.call("closeWindow");
									// 	},
									//  false
								 // );
									// //这个可以关闭ios系统的手机
								 // WeixinJSBridge.call("closeWindow");
								 // this.$jump(`${url}?app=member`);
							// }, 300);
131 132 133 134 135 136 137 138 139
						} else {
							uni.showToast({
								title: '未知错误,刷新重试',
								duration: 2000,
								icon: 'none'
							});
						}
					}
				);
郑秀明's avatar
郑秀明 committed
140 141 142
			},
			goBack(){
				this.$backup();
143 144 145 146 147 148 149 150 151 152
			}
		}
	}
</script>

<style lang="scss">
	.nav-content{
		height: 100rpx;
		padding: 0 20rpx;
		display: flex;
郑秀明's avatar
郑秀明 committed
153
		justify-content: flex-start;
154 155 156 157 158 159 160 161 162 163 164 165 166
		align-items: center;
		position: relative;
		.search-icon-arrowleft{
			width: 40rpx;
			position: absolute;
			left: 20rpx;
		}
		.title{
			text-align: center;
			width: 100%;
			font-size: 30rpx;
		}
	}
郑秀明's avatar
郑秀明 committed
167 168 169 170 171 172
	.sub-title{
		font-size:30rpx;
		text-align: center;
		color: #5d5d5d;
		margin-top: 120rpx;
	}
173 174
	.price{
		text-align: center;
郑秀明's avatar
郑秀明 committed
175
		margin-top: 50rpx;
176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194
		font-size: 60rpx;
	}
	.submit-btn{
		margin: 0 48rpx;
		margin-top: 80rpx;
		font-size: 34rpx;
		
	}
	uni-button[type=primary]{
		background-color: #07c160; 
	}
	uni-button[loading][type=primary]{
		background-color: #06ae56;
	}
	.button-hover[type=primary]{
		color: rgba(0,0,0,.5);
		background-color: #06ae56;
	}
</style>