微信支付接口

<template>
	<view class="content h100vh">
		<view class="bg-white3 ">
			<view class="bg-bule  my-balance  ">
				<view class="w50 text-c p15">
					<text class="big-text bold-text   text-white">{{balance}}</text><br />
					<text class="small-text text-white">当前余额(元)</text>
				</view>
				<view class="w50 text-c p15">
					<text class="big-text bold-text text-white">{{giftBalance}}</text><br />
					<text class="small-text text-white">赠送余额(元)</text>
				</view>
			</view>
		</view>
		<view class="bg-white3  mat-15">
			<view class="yulan-title">
				<view><text class="text-hui3  bold-text">钱包充值选项:</text></view>
				<view @click="tobiaozhun()">
					<text class="text-hui2">钱包充值选项说明</text><text class="iconfont icon-bangzhu  text-hui2"> </text>
				</view>
				<popup-component v-if="showPopupbiaozhun" :show="showPopupbiaozhun" title="钱包充值选项" submittitle="我知道了"
					@close="showPopupbiaozhun = false" @submit="tosubmitbiaozhun">
					<template #content>
						<view>
							<p>{{desc}}</p>
						</view>
					</template>
				</popup-component>
			</view>
			<view class="port-main">
				<view class="port-box-zi" v-for="(item,index) in moneys" :key=" item.id ">
					<view class="port-line-zi " :class="{ 'activemoney': item.id === isActivemoney }"
						@click="toggleActivemoney(item.id,item.payAmount)">
						<view class="port-name-zi">{{item.name}}</view>
					</view>
				</view>
				<!-- <view class="port-box-zi">
					<view class="port-line-zi">
						<input class="port-name-zi" v-model="payAmount2" @input="handleInput" @click="handleClick"
							placeholder="自定义金额" type="number" />
					</view>
				</view> -->
			</view>
		</view>
		<view class="bg-white3  mat-15">
			<view class="yulan-title">
				<view><text class="text-hui3  bold-text">支付方式:</text></view>
				<view>
				</view>
			</view>
			<view class="port-main">
				<view class="port-box-fu" v-for="(item,index) in fus" :key="index">
					<view class="port-line-fu" :class="{ 'active-fu': item.id === isActivefu }"
						@click="toggleActivefu(item.id)">
						<view>
							<image :src="item.url" class="img-left"></image>
						</view>
						<view>
							<view><text class="">{{item.name}}</text></view>
							<view><text class="port-name-fu">{{item.dec}}</text></view>
						</view>
					</view>
				</view>
			</view>

		</view>
		<view class="footer-main">

			<view class="w70 p10">
				<text>充值金额：</text><text
					class=" big-text text-orange">{{ payAmount || "0" }}</text><text>元</text>
			</view>
			<view class="w30">
				<button class="btn-charging" @click="torecharge()">充值</button>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		walletRecharge,
		rechargeInfo,
		changewallet

	} from "@/api/wallet.js"
	import PopupComponent from "@/components/popup/popup.vue"; // 根据实际路径引入组件
	export default {
		components: {
			PopupComponent
		},
		
		data() {
			return {
				balance: "",
				giftBalance: "",
				merName: "",
				desc: "",
				walletTmpOptionId: "",
				moneys: [],
				payAmount: "",
				payAmount2: "",
				fus: [{
					url: "/static/img/fu2.png",
					name: "微信",
					id: 1,
					dec: "",
				}],
				showPopupbiaozhun: false,
				isActivemoney: null,
				isActivefu: 1,
			};
		},
		onLoad(options) {
			this.walletId = options.walletId
			console.log(this.walletId);
			this.getrechargeInfolist()
			this.getwalletinfo();
		},
		methods: {
			handleClick() {
				if (this.payAmount !== null || this.payAmount !== undefined) {
					this.payAmount = null
				}
			},
			getwalletinfo() {
				changewallet(this.walletId).then(res => {
					this.balance = res.balance
					this.giftBalance = res.giftBalance
					this.merName = res.merName
					// this.walletId = res.walletId
					this.walletId = parseFloat(res.walletId);
					this.merId = parseFloat(res.merId);
					// this.merId = res.merId

				}).catch(error => {
					console.error('获取钱包列表失败:', error);
				});
			},
			getrechargeInfolist() {
				console.log(this.walletId);
				rechargeInfo(this.walletId).then(res => {
					this.moneys = res.data.lists;
					this.desc = res.data.desc;
					console.log(res.data)
				}).catch(error => {
					console.error('获取钱包充值选项失败:', error);
				});
			},
			toggleActivemoney(id, payAmount) {
				this.isActivemoney = id;
				this.walletTmpOptionId = id;
				this.payAmount = payAmount;
			
			},
			tobiaozhun() {
				this.showPopupbiaozhun = true
			},
			tosubmitbiaozhun() {
				this.showPopupbiaozhun = false
			},
			toggleActivefu(id) {
				this.isActivefu = id;
			},
			torecharge() {

				if (this.walletId === "" || this.walletId === null || this.walletId === undefined) {
					this.$modal.msgError("您未获取到钱包id，请返回重新进页面")
				} else if (this.merId === "") {
					this.$modal.msgError("您为获取到钱包id")
				} else if (this.walletTmpOptionId === "" || this.walletTmpOptionId === null || this.walletTmpOptionId ===
					undefined) {
						this.$modal.msgError("请选择钱包充值选项")
					
				} else {
					this.$modal.loading("提交中，请耐心等待...")
					this.getrechage()
				}
			},
			getrechage() {
				walletRecharge(this.walletId, this.merId, this.walletTmpOptionId).then(res => {
					// this.$modal.loading(res)
					console.log("1111"+res.msg)
					var obj = JSON.parse(res.msg);
					 this.pay(obj)
				}).catch(error => {
					console.error('失败:', error);
				});
			},
			pay(obj) {
				function onBridgeReady() {
					WeixinJSBridge.invoke('getBrandWCPayRequest', obj,
						function(res) {
							if (res.err_msg == "get_brand_wcpay_request:ok") {
								uni.switchTab({
									url:"/pages/tab/my"
								})
								// 使用以上方式判断前端返回,微信团队郑重提示：
								//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
							}
						});
				}
				if (typeof WeixinJSBridge == "undefined") {
					if (document.addEventListener) {
						document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
					} else if (document.attachEvent) {
						document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
						document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
					}
				} else {
					onBridgeReady();
				}
			}
		}
	};
</script>

<style scoped>
	.activemoney {
		background: #145cfe !important;
	}
</style>