【uniapp+vue2】小程序充值实现微信支付和余额支付

最新推荐文章于 2024-03-14 17:29:32 发布

吃不掉的小虾

最新推荐文章于 2024-03-14 17:29:32 发布

阅读量597

点赞数

分类专栏：微信小程序 uniapp 文章标签： uni-app 小程序微信

本文链接：https://blog.csdn.net/qq_44971635/article/details/132446942

版权

微信小程序同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

uniapp

1 篇文章 0 订阅

订阅专栏

布局

<view class="coin-pay" @click="handlerPayCoin">
			<text>充值</text>
		</view>
		<!-- 充值弹框 -->
		<view class="">
			<uni-popup ref="choosePay" type="bottom">
				<view class="orderPay">
					<view class="orderPay-pay">
						<view class="orderPay-pay-item" v-for="(l, i) in payList" :key="i" @click="changePay(i)">
							<view class="item-label">
								<image :src="l.icon" mode=""></image>
								<text>{{ l.text }}</text>
							</view>
							<view class="item-value">
								<image v-if="l.status"
									src="http://zxh-auth.oss-cn-beijing.aliyuncs.com/c3e5694259c242fe872d2974add1bbce.png"
									mode=""></image>
								<view v-else class="item-value-false"></view>
							</view>
						</view>
					</view>
					<view class="orderPay-btn" @click="payTotalMoney">
						<text>确认</text>
					</view>
				</view>
			</uni-popup>
		</view>

//js
payList: [{
					icon: 'http://young-czx.oss-cn-hangzhou.aliyuncs.com/61e653b7826a43d4ac957b46ef11cba3.png',
					text: '微信支付',
					status: true,
					payFrom: 'WEIXIN_MP'
},
{
					icon: 'https://zxh-user-file.oss-cn-shenzhen.aliyuncs.com/wx_mall_%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20230613114451.png',
					text: '余额支付',
					status: false,
					payFrom: 'YUE_PAY'
}],

async changePay(i) {
				if (i == 1) {
					this.payList[1].status = true
					this.payList[0].status = false
				} else {
					this.payList[0].status = true
					this.payList[1].status = false
				}
			},
payTotalMoney() {
					this.$refs.choosePay.close()
					if (this.payList[1].status) {
						let postData = {
						userId:this.userInfo.userId,
						rechargeId: this.amountObject.id,
						payCode:this.code,
						payFrom: 'YUE_PAY'
					}
					Recharge(postData).then(res=>{
						console.log(res);
							if (res.status == '0') {
								uni.showToast({
									title: "支付成功",
									duration: 1500
								})
							} else {
								uni.showToast({
									title: `${res.errMsg}`,
									duration: 1500,
									icon: "none"
								})
							}
							setTimeout(() => {
								this.getUserInfo()
							}, 500)
					})
				} else {
					let weixinData = {
						userId:this.userInfo.userId,
						rechargeId: this.amountObject.id,
						payCode:this.code,
						payFrom: 'WEIXIN_MP'
					}
					Recharge(weixinData).then(res=>{
						if(res){
							let payData = JSON.parse(res.payData)
							let that = this
							uni.requestPayment({
									provider: 'wxpay',
									timeStamp: payData.timeStamp,
									nonceStr: payData.nonceStr,
									package: payData.package,
									signType: payData.signType,
									paySign: payData.paySign,
									success: (() => {
										uni.showToast({
											title: "支付成功",
											duration: 1500
										})
										setTimeout(() => {
											that.getUserInfo()
										}, 500)
									}),
									fail() {
										uni.showToast({
											title: "取消支付",
											duration: 1500,
											icon: "none"
										})
									}
								})
							
						}else{
							uni.showToast({
								title: `${res.errMsg}`,
								duration: 1500,
								icon: "none"
							})
						}
					})
					
				}
},