great_group/center/choosePayment.vue

<template>
	<view class="pages">
		<view class="" :style="{height: navHeight+'px' }"></view>
		<u-navbar 
			title="订单详情" 
			:safeAreaInsetTop="true" 
			@leftClick="leftClick" 
			:titleStyle="{color:'#fff'}" 
			leftIconColor="#fff" 
			bgColor="#ED0000">
		</u-navbar>
		<view class="page-wrap">
			<view class="pay-list">
				 <radio-group @change="payRadioChange">
					<view class="pay-list-item u-flex u-row-between" @click="payRadioClick('weixin')">
						<view class="left u-flex">
						 	<image class="icon" :src="staticUrl+'/img/share-ico.png'" ></image>
							<view class="name">微信支付</view>
						</view>
						<radio color="#2DCF8C" value="weixin" :checked="'weixin' === radioCurrent" />
					</view>
					<view class="pay-list-item u-flex u-row-between" @click="payRadioClick('yue')">
						<view class="left u-flex">
						 	<image class="icon" :src="staticUrl+'/img/share-ico.png'" ></image>
							<view class="name">账户余额</view>
							<view class="num">剩余￥:2000</view>
						</view>
						<radio color="#2DCF8C" value="yue" :checked="'yue' === radioCurrent" />
					</view>
					<view class="pay-list-item u-flex u-row-between" @click="payRadioClick('shouxin')">
						<view class="left u-flex">
						 	<image class="icon" :src="staticUrl+'/img/share-ico.png'" ></image>
							<view class="name">授信余额</view>
							<view class="num">剩余￥:2000</view>
						</view>
						<radio color="#2DCF8C" value="shouxin" :checked="'shouxin' === radioCurrent" />
					</view>
				 </radio-group>
			</view>
			<view class="full-btn" @click="submit">支付</view>
		</view>
	</view>
</template>

<script>
	import { systemInfo } from "@/mixin.js";
	// #ifdef H5
	import wxH5 from "weixin-jsapi";
	// #endif
	export default{
		mixins:[systemInfo],
		name:'',
		components:{
			
		},
		props:{
			
		},
		data(){
			return{
				staticUrl:this.$commonConfig.staticUrl,
				// 支付方式选择
				radioCurrent: 'weixin',
				
			}
		},
		onLoad(){
			this.getSystemInfo();
			
		},
		methods:{
			leftClick(e){
				let pages = getCurrentPages();
				if(pages.length==1){
					uni.$u.route('/pages/index/index')
				}else{
					uni.navigateBack()
				};
			},
			payRadioChange({ detail }) {
			  this.radioCurrent = detail.value;
			},
			payRadioClick(value) {
			  this.radioCurrent = value;
			},
			submit(){
				console.log('this.radioCurrent', this.radioCurrent);
			},
			getTemplateIdList(){
				this.$u.api.templateIdList({templateLabel:'order_pay'}).then(res=>{
					console.log('getTemplateIdList',res.data);
					this.templateIdList = res.data.list.map(item=>{
						return item.templateId
					});
					// if(this.templateIdList.length>0){
					// 	this.templateEven();
					// }
				}).catch(err=>{
					console.log('getTemplateIdList',err);
				})
			},
			pay(item){
				// #ifdef H5
					this.gotoPay(this.orderDetails.id);
				// #endif
				// #ifdef MP
					this.setTemplate(this.orderDetails.id);
				// #endif
			},
			gotoPay(orderId){
				this.$u.api.gotoPay({orderId:orderId,openid:''}).then(res=>{
					this.payResult = res.data.payInfo;
					this.payResult.package = res.data.payInfo.packageValue;
					// #ifdef H5
					this.initConfig(this.payResult)
					// #endif 
					// #ifdef MP
					this.wxPay()
					// #endif 
					// if(this.params.paymentMode==1||this.params.paymentMode==4){
					// 	this.wxPay()
					// }else{
					// 	uni.$u.route('/shopping/paysuccess');
					// }
					console.log('gotoPayres',res.data);
				}).catch(err=>{
					this.paypass = '';
					this.checkPassShow = false;
					console.log('gotoPay',err);
				})				
			},
			wxPay(){
				let that = this;
				uni.requestPayment({
					... this.payResult,
				    "provider": "wxpay", 
				    "orderInfo": {
				        // "appid": "wx499********7c70e",  // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
				        // "noncestr": "c5sEwbaNPiXAF3iv", // 随机字符串
				        // "package": "Sign=WXPay",        // 固定值
				        // "partnerid": "148*****52",      // 微信支付商户号
				        // "prepayid": "wx202254********************fbe90000", // 统一下单订单号 
				        // "timestamp": 1597935292,        // 时间戳（单位：秒）
				        // "sign": "A842B45937F6EFF60DEC7A2EAA52D5A0" // 签名，这里用的 MD5/RSA 签名
				    },
				    success(res) {
						that.payQuery();
					},
				    fail(e) {
						console.log('wxPayfail',e);
					}
				})				
			},
			payQuery(){
				let that = this;
				let retryCount = 0;
				let maxRetryCount = 5; // 设置最大重试次数
				let interval = 2000; // 设置间隔时间为2秒
				let timeout = 10000; // 设置超时时间为10秒
				let timer;
				uni.showLoading({
					title:'支付结果查询中'
				})
				timer = setInterval(() => {
					retryCount++;
					if (retryCount > maxRetryCount || retryCount * interval > timeout) {
						clearInterval(timer);
						  uni.hideLoading();
						console.log("支付查询超时或达到最大重试次数");
						// 在这里添加超时或达到最大重试次数的处理逻辑
						this.reloadList()
					} else {
						console.log("第" + retryCount + "次查询");
						// 调用查询支付状态的方法
						// 如果支付状态为成功，则清除定时器并处理成功的逻辑
						// 如果支付状态为失败，则清除定时器并处理失败的逻辑
						this.$u.api.payQuery({orderId:this.orderId}).then(res=>{
							// 0-未支付 1-已支付 2-支付中 3-支付失败 4-支付退款
							let payStatus = res.data.payStatus;
							if(payStatus===1){
								uni.$u.route('/center/paysuccess');
							}else if(payStatus===0||payStatus===2){
								this.payQuery()
							}else if(payStatus===3){
								uni.toast('支付失败')
							}
							clearInterval(timer);
						}).catch(err=>{
							console.log('payQuery',err);
						}).finally(()=>{
							uni.hideLoading()
						})
					}
				}, interval);
			},
			/**
			 * 公众号微信支付
			 */
			initConfig() {
				// #ifdef H5
				let that = this
				wxH5.config({
					debug: false, // 这里一般在测试阶段先用ture，等打包给后台的时候就改回false, 
					appId: that.payResult.appId, // 必填，公众号的唯一标识 
					timestamp: that.payResult.timeStamp, // 必填，生成签名的时间戳     
					nonceStr: that.payResult.nonceStr, // 必填，生成签名的随机串 
					signature: that.payResult.paySign, // 必填，签名 
					jsApiList: ['chooseWXPay', 'checkJsApi'] // 必填，需要使用的JS接口列表 
				})
				wxH5.ready(() => {
					wxH5.chooseWXPay({
						timestamp: that.payResult.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符     
						nonceStr: that.payResult.nonceStr, // 支付签名随机串，不长于 32 位         
						package: that.payResult.packageValue, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）     
						signType: 'SHA1', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'     
						paySign: that.payResult.paySign, // 支付签名     
						success: () => {
							that.payQuery();
						},
						fail: (e) => {
							uni.$u.route('/center/order', {
								status: 0
							});
							console.log('wxPayfail', e);
						},
						cancel: () => {
							uni.$u.route('/center/order', {
								status: 0
							});
							that.cansubmit = true;
						}
					})
				})
				// #endif
			},
		}
	}
</script>

<style lang="scss" scoped>
.pay-list{
	.pay-list-item{
		margin-bottom: 24rpx;
		.icon{
			width: 40rpx;
			height: 40rpx;
			margin-right: 24rpx;
		}
		.name{
			margin-right: 24rpx;
		}
		.num{
			
		}
	}
}
</style>