virtual-payment-uni-pay.uvue

<template>
	<view class="content">
		<view class="uni-list">
			<radio-group @change="applePriceChange">
				<view class="uni-list-cell" v-for="(item, index) in productList" :key="index">
					<radio :value="item['product_id']" :checked="product_id == item['product_id']"/>
					<view class="price" @click="applePriceClick(item)">{{item['title']}} {{item['goods_price']}}元</view>
				</view>
			</radio-group>
		</view>
		<view class="uni-padding-wrap">
			<button class="button btn-pay" @click="createOrder" :loading="loading" :disabled="disabled">立即支付</button>
		</view>

		<!-- 统一支付组件 -->
		<uni-pay ref="payRef" :debug="true" :adpid="adpid" return-url="/pages/API/request-payment/request-payment/order-detail" @mounted="onMounted" @success="onSuccess" @fail="onFail" @cancel="onCancel"></uni-pay>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				order_no: "", // 业务系统订单号（即你自己业务系统的订单表的订单号）
				out_trade_no: "", // 插件支付单号
				adpid: "1000000001", // uni-ad的广告位id

				loading: false, // 支付按钮是否在loading中
				disabled: true, // 支付按钮是否禁用
				product_id: "", // 用户选择的商品id
				// 出售的苹果虚拟商品列表
				productList: [
					{
						"description": "为DCloud提供的免费软件进行赞助",
						"goods_price": 1, // 单价（元）
						"buy_quantity": 1, // 数量（消耗性类型: 数量默认是1，最大值是10）
						"product_id": "uniappx.consumable.sponsor_1",
						"title": "消耗性产品：赞助"
					},
					{
						"description": "为DCloud提供的免费软件进行赞助",
						"goods_price": 5, // 单价（元）
						"buy_quantity": 1, // 数量（消耗性类型: 数量默认是1，最大值是10）
						"product_id": "uniappx.consumable.sponsor_50",
						"title": "消耗性产品：赞助"
					},
					{
						"description": "为DCloud提供的免费软件进行赞助",
						"goods_price": 1, // 单价（元）
						"buy_quantity": 1, // 数量（非消耗性: 数量只能是1，且一个该类型产品一个appleId只能购买一次）
						"product_id": "uniappx.nonconsumable.sponsorskin_1",
						"title": "非消耗性产品: 赞助"
					},
					{
						"description": "为DCloud提供的免费软件进行赞助",
						"goods_price": 1, // 单价（元）
						"buy_quantity": 1, // 数量（自动续期订阅产品: 数量只能是1）
						"product_id": "uniappx.autorenewable.monthly_1",
						"title": "自动续期订阅产品：每月定期赞助", // 注意自动续期订阅产品在沙盒模式下，实际周期会缩短到几分钟续期一次（即现实世界几分钟 = 沙盒世界1个月）
					},
					{
						"description": "为DCloud提供的免费软件进行赞助",
						"goods_price": 1, // 单价（元）
						"buy_quantity": 1, // 数量（非自动续期订阅产品: 数量只能是1）
						"product_id": "uniappx.nonrenewable.monthly_1",
						"title": "非自动续期订阅产品：月赞助",
					},
					{
						"description": "为DCloud提供的免费软件进行赞助",
						"goods_price": 1, // 单价（元）
						"buy_quantity": 1, // 数量
						"product_id": "uniappx.nonrenewable.none",
						"title": "测试不存在的产品"
					}
				] as Array<UTSJSONObject>,
			}
		},
		onLoad: function() {

		},
		onShow() {

		},
		onUnload() {},
		methods: {
			// 支付组件加载完毕后执行
			onMounted(insideData: any){
				this.init();
			},
			// 初始化
			init() {
				this.product_id = this.productList[0]["product_id"] as string;
				this.disabled = false;
				let payRef = this.$refs['payRef'] as UniPayComponentPublicInstance;
				// 苹果虚拟支付未完成订单检测
				payRef.appleiapRestore();
			},
			/**
			 * 发起支付
			 * 在调用此api前，你应该先创建自己的业务系统订单，并获得订单号 order_no，把order_no当参数传给此api，而示例中为了简化跟支付插件无关的代码，这里直接已时间戳生成了order_no
			 */
			createOrder(){
				this.order_no = `test`+Date.now();
				this.out_trade_no = this.order_no;
				let productInfo: UTSJSONObject = this.productList.find((item: UTSJSONObject) : boolean => {
					return item['product_id'] == this.product_id;
				});
				let buy_quantity = productInfo.getNumber('buy_quantity') || 1;
				let goods_price = productInfo.getNumber('goods_price');
				// 发起支付
				this.$refs.payRef.createOrder({
					provider: "appleiap", // 支付供应商（这里固定为appleiap，代表苹果虚拟支付）
					order_no: this.order_no, // 业务系统订单号（即你自己业务系统的订单表的订单号）
					out_trade_no: this.out_trade_no, // 插件支付单号
					type: "appleiap", // 支付回调类型（可自定义，建议填写appleiap）
					description: productInfo.description,
					total_fee: parseInt((goods_price * 100 * buy_quantity).toFixed(0)), // 插件是以分为单位，故这里需要乘以100
					// apple_virtual字段仅苹果虚拟支付生效
					apple_virtual: {
						product_id: this.product_id, // 产品id
						goods_price: goods_price, // 单价
						buy_quantity: buy_quantity, // 购买数量
					},
					// 自定义数据
					custom: {}
				});
			},
			// 监听事件 - 支付成功
			onSuccess(res){
				console.log('success: ', res);
				if (res.user_order_success) {
					// 代表用户已付款，且你自己写的回调成功并正确执行了

				} else {
					// 代表用户已付款，但你自己写的回调执行失败（通常是因为你的回调代码有问题）

				}
			},

			onFail(err){
				uni.showModal({
					content: `${err.errSubject} : ${err.errCode} : ${err.errMsg}`,
					showCancel: false,
					title: `发起支付失败`,
				});
			},

			onCancel(err){
				uni.showToast({
					title: "用户取消了支付",
					icon: 'none'
				});
			},

			// 监听-多选框选中的值改变
			applePriceChange(e) {
				this.product_id = e.detail.value;
			},
			applePriceClick(item: any){
				this.product_id = item['product_id'] as string;
			}
		}
	}
</script>

<style>
	.content {
		padding: 15px;
	}

	.button {
		background-color: #007aff;
		color: #ffffff;
	}

	.uni-list-cell {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 10px;
		border-bottom: 1px solid #eee;
	}

	.price {
		margin-left: 10px;
	}

	.btn-pay {
		margin-top: 30px;
	}
</style>