market-app-ui/pages/wallet/topup/edit.vue

<template>
	<view class="app">
		<view>
			<view class="label">充值金额（单位:元 ）：</view>
			<view><input v-model.number="total_fee" type="number" /></view>
		</view>
		<button type="primary" @click="createOrder('wxpay')">发起支付（微信）</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				total_fee: 10, // 金额				
				transaction_id:"", // 查询订单接口的查询条件
				getOrderRes:{}, // 查询订单支付成功后的返回值
			}
		},

		methods: {

			/**
			 * 发起支付（不唤起收银台，手动指定支付方式）
			 * 在调用此api前，你应该先创建自己的业务系统订单，并获得订单号 order_no，把order_no当参数传给此api，而示例中为了简化跟支付插件无关的代码，这里直接已时间戳生成了order_no
			 */
			createOrder(provider){
				this.http.request({
			   	url: '/level-one-server/app/WalletManage/topupSave',
			   	data: {
					amount: this.total_fee, // 支付金额，单位分 100 = 1元
					goodsName: '服务点充值'
			   	},
			   	success: res => {
					console.log('WxPayAppOrderResult：',res)
					// 调起支付
					this.orderPayment(res.data.data);
					this.transaction_id = res.data.data.prepayId;					
			   	}
			   });				
			},
			
			// 调起支付
			orderPayment(data){			
				console.log('fff',data)
				uni.requestPayment({
					"provider": "wxpay",
					"orderInfo": data,
					success:(res)=>{
						this.user.wallet = this.user.wallet + this.total_fee;
					console.log("this.user",this.user)
					uni.setStorageSync('info', this.user);
						uni.navigateTo({
							url: '/pages/wallet/topup/detail?transaction_id=' + data.prepayId
						})
					},
					fail:(err)=>{
						// 发起支付失败
						uni.showToast({title: '发起支付失败！'+err.errMsg,});						
					}
				});				
			},


			// 查询支付状态
			async getOrder() {
				this.getOrderRes = {};
				let res = await this.$refs.pay.getOrder({
					//out_trade_no: this.out_trade_no, // 插件支付单号 两者传1个即可
					transaction_id: this.transaction_id, // 第三方单号 两者传1个即可
					await_notify: true
				});
				if (res) {
					this.getOrderRes = res.pay_order;
					let obj = {
						"-1": "已关闭",
						"1": "已支付",
						"0": "未支付",
						"2": "已部分退款",
						"3": "已全额退款"
					};
					uni.showToast({
						title: obj[res.status] || res.errMsg,
						icon: "none"
					});
				}
			},			
		}, 
	}
</script>

<style lang="scss" scoped>
	.app{
		padding: 30rpx;
	}
	input {
		border: 1px solid #f3f3f3;
		padding: 10rpx;
		width: 100%;
		box-sizing: border-box;
		height: 80rpx;
	}

	button {
		margin-top: 20rpx;
	}
	
	.label{
		margin: 10rpx 0;
	}
	
	.tips{
		margin-top: 20rpx;
		font-size: 24rpx;
		color: #565656;
	}
	
	.get-order-popup{
		background-color: #ffffff;
		padding: 30rpx;
		height: 60vh;
		border-radius: 30rpx 30rpx 0 0;
		overflow: hidden;
	}
	.mt20{
		margin-top: 20rpx;
	}
	
	.pd2030{
		padding: 20rpx 30rpx;
	}
	
	.table{
		font-size: 24rpx;
	}
	.align-left{
		text-align: left;
		width: 50%;
	}
	.align-right{
		text-align: right;
		width: 50%;
	}
	
	
</style>