uni-pay.uvue

<template>
	<view class="uni-pay">

		<!-- PC版收银台弹窗开始 -->
		<uni-pay-popup v-if="modeCom == 'pc'" ref="payPopup" type="center" :safe-area="false">
			<view class="pc-pay-popup">
				<view class="pc-pay-popup-title"><text class="text">收银台</text></view>
				<view class="pc-pay-popup-flex">
					<view class="pc-pay-popup-qrcode-box">
						<image class="pc-pay-popup-qrcode-image" :src="orderRes['qr_code_image']"></image>
						<view class="pc-pay-popup-amount-box">
							<view class="pc-pay-popup-amount-tips">
								<text class="text" v-if="orderRes['provider'] == 'wxpay'">微信扫一扫付款</text>
								<text class="text" v-else-if="orderRes['provider'] == 'alipay'">支付宝扫一扫付款</text>
								<text class="text" v-else>扫一扫付款</text>
							</view>
							<view class="pc-pay-popup-amount"><text class="text">{{ (totalFeeCom / 100).toFixed(2) }}</text></view>
						</view>
						<view class="pc-pay-popup-complete-button" v-if="orderRes['qr_code_image']">
							<button type="primary" @click="_getOrder()">我已完成支付</button>
						</view>
					</view>
					<view class="pc-pay-popup-provider-list">
						<view class="pc-pay-popup-provider-item" v-if="currentProviders.indexOf('wxpay') > -1" :class="myOptions['provider'] == 'wxpay' ? 'active' : ''"
							@click="_pcChooseProvider('wxpay')">
							<image :src="images['wxpay']" class="pc-pay-popup-provider-image"></image>
							<text class="pc-pay-popup-provider-text">微信支付</text>
						</view>
						<view class="pc-pay-popup-provider-item" v-if="currentProviders.indexOf('alipay') > -1" :class="myOptions['provider'] == 'alipay' ? 'active' : ''"
							@click="_pcChooseProvider('alipay')">
							<image :src="images['alipay']" class="pc-pay-popup-provider-image"></image>
							<text class="pc-pay-popup-provider-text">支付宝支付</text>
						</view>
						<view class="pc-pay-popup-logo">
							<image class="image" :src="logo" mode="widthFix"></image>
						</view>
					</view>
				</view>
			</view>
		</uni-pay-popup>
		<!-- PC版收银台弹窗结束 -->

		<!-- 手机版收银台弹窗开始 -->
		<uni-pay-popup v-else ref="payPopup" type="bottom" :safe-area="false">
			<view class="mobile-pay-popup" :style="'min-height: '+height+';'">
				<view class="mobile-pay-popup-title"><text class="text">收银台</text></view>
				<view class="mobile-pay-popup-amount-box">
					<view><text class="text">待支付金额：</text></view>
					<view class="mobile-pay-popup-amount"><text class="text">{{ (totalFeeCom / 100).toFixed(2) }}</text></view>
				</view>
				<view class="mobile-pay-popup-provider-list">
					<view class="uni-list">
						<!-- #ifdef MP-WEIXIN || H5 || APP -->
						<view class="uni-list-item" v-if="currentProviders.indexOf('wxpay') > -1" @click="createOrderByProvider('wxpay')">
							<view class="uni-list-item__container container--right">
								<view class="uni-list-item__header">
									<image :src="images['wxpay']" class="image"></image>
								</view>
								<view class="uni-list-item__content uni-list-item__content--center">
									<text class="text">微信支付</text>
								</view>
							</view>
							<view class="arrowright"></view>
						</view>
						<!-- #endif -->
						<!-- #ifdef MP-ALIPAY || H5 || APP -->
						<view class="uni-list-item" v-if="currentProviders.indexOf('alipay') > -1" @click="createOrderByProvider('alipay')">
							<view class="uni-list-item__container container--right">
								<view class="uni-list-item__header">
									<image :src="images['alipay']" class="image"></image>
								</view>
								<view class="uni-list-item__content uni-list-item__content--center">
									<text class="text">支付宝</text>
								</view>
							</view>
							<view class="arrowright"></view>
						</view>
						<!-- #endif -->
					</view>
				</view>
			</view>
		</uni-pay-popup>
		<!-- 手机版收银台弹窗结束 -->

		<!-- 二维码支付弹窗开始 -->
		<uni-pay-popup ref="qrcodePopup" type="center" :safe-area="false" :animation="false" :mask-click="false" @close="clearQrcode">
			<view class="qrcode-popup-content">
				<image :src="orderRes['qr_code_image']" class="qrcode-image"></image>
				<view class="qrcode-popup-info">
					<view class="qrcode-popup-info-fee-box">
						<view class="qrcode-popup-info-fee">
							<text class="text">{{ (totalFeeCom / 100).toFixed(2) }}</text>
						</view>
						<view class="qrcode-popup-info-fee-unit">
							<text class="text">元</text>
						</view>
					</view>
					<view v-if="myOptions['provider'] == 'wxpay'"><text>请用微信扫码支付</text></view>
					<view v-else-if="myOptions['provider'] == 'alipay'"><text>请用支付宝扫码支付</text></view>
				</view>
				<button type="primary" @click="_getOrder()" class="qrcode-popup-btn-primary">我已完成支付</button>
				<view class="qrcode-popup-cancel" @click="closePopup('qrcodePopup')"><text class="qrcode-popup-cancel-text">暂不支付</text></view>
			</view>
		</uni-pay-popup>
		<!-- 二维码支付弹窗结束 -->

		<!-- 外部浏览器确认支付弹窗开始 -->
		<uni-pay-popup ref="payConfirmPopup" type="center" :safe-area="false" :animation="false" :mask-click="false">
			<view class="pay-confirm-popup-content">
				<view class="pay-confirm-popup-title"><text>请确认支付是否已完成</text></view>
				<view><button type="primary" @click="_getOrder()">已完成支付</button></view>
				<view class="pay-confirm-popup-refresh"><button type="default" @click="_afreshPayment()">支付遇到问题，重新支付</button></view>
				<view class="pay-confirm-popup-cancel" @click="closePopup('payConfirmPopup')"><text>暂不支付</text></view>
			</view>
		</uni-pay-popup>
		<!-- 外部浏览器确认支付弹窗结束 -->


	</view>
</template>

<script>
	// 引入支付云对象
	const uniPayCo = uniCloud.importObject("uni-pay-co");
	import { checkPlatform, objectAssign, getWeixinCode, getAlipayCode } from "../../js_sdk/js_sdk"
	export default {
		name: "uni-pay",
		emits: ["success", "cancel", "fail", "create", "mounted", "qrcode"],
		props: {
			/**
			 * Banner广告位id
			 */
			adpid: {
				type: String,
				default: ""
			},
			/**
			 * 是否自动跳转到插件内置的支付成功页面（具有看广告功能，可以增加开发者收益）默认true
			 */
			toSuccessPage: {
				type: Boolean,
				default: true
			},
			/**
			 * 支付成功后，点击查看订单按钮时跳转的页面地址
			 */
			returnUrl: {
				type: String,
				default: ""
			},
			/**
			 * 支付结果页主色调，默认支付宝小程序为#108ee9，其他端均为#01be6e
			 * 建议：绿色系 #01be6e 蓝色系 #108ee9 咖啡色 #816a4e 粉红 #fe4070 橙黄 #ffac0c 橘黄 #ff7100
			 */
			mainColor: {
				type: String,
				default: ""
			},
			/**
			 * 收银台模式
			 * mobile 手机版
			 * pc 电脑版
			 */
			mode: {
				type: String,
				default: ""
			},
			/**
			 * PC收银台模式时，展示的logo
			 */
			logo: {
				type: String,
				default: "/static/logo.png"
			},
			/**
			 * 收银台高度（默认70vh）
			 */
			height: {
				type: [String],
				default: "70vh"
			},
			/**
			 * 是否打印运行过程日志
			 */
			debug: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				// 支付参数
				myOptions: {} as UTSJSONObject,
				// 支付云对象返回结果
				orderRes: {
					order: "",
					order_no: "",
					out_trade_no: "",
					provider: "",
					provider_pay_type: "",
					errCode: 0,
				} as UTSJSONObject,
				images: {
					wxpay: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAABC9JREFUeF7tWk1a20AMlUzv0bDr13AAYAOcpLCBcoqQU1DYEE6C2QAHIP26q3sPPOqniU2cZMYj+SeGxN5kEXlm9ObpjaQxwpY/uOX+Qw9Az4AtR6APgS0nQC+CfQi0FQLfrvcHXwAGPP4bQMK/fy5f7O9HehphwPfb/dOIogEhHQHBcamDCDESPoIxMQPTNSi1ABj+OrwDpNMaO5og4P2bMZOugFADwNTewWhU0/FVzAgnKZnxuoFQAbB3vX9MET7U2PHgq4R09vv8ZRI0bMhADMDw9uAhGN8NLQrWyAYRAGt1PgcRIU5TOms7JIIAdOL8nElJauikTRBKAdi7ObwioFFTzHaMw3mBzRV8DwKOXy+ertpagxcAq/YR/g2d6TlNrUDu4EiiE0Why4T1rgyINoXRC4DgjE+mF8+7RYAkp4RrRyVztRUKTgCkuz89fz4pAiB5z7WbklBrKxScAEgWxI6joZPXy5c4B0H0nkPdhzcHFIxxhHgZ8OA7AgMnAMObA479UnF6H5twQpF5RBMdibPDvB4AAAL6IZ0rNbTb9IngAyC8IwJ0K5okQBgzqFEKSV4wcXg17bxl8fIiJXFc0bHAgYLjYlHEFaZlVUQDoAIbcVZaN1VRrgAgUfImASiKW6Yh4pAohmHVQqpLABI0dMYiKhJPCeoV0ueuQsDmEJrkSeJ/bqNJnOqfApqVzWznzrdYWkvzhnUDYGnPKLTdV5gpfLiOqJUIaTefF8RKH6wxtAOX2IdA8NcCmmRItmBLfVF5jRBnR58kGQtWlGUJlBeAxpQ5A4eFKTu/ufLzPQv1f2mRRDiZ/nyyYwYrypI0OlQOc/9PsgshDsh2v+BUwTFnD3K5DglVlD4WlDZEsqywNgiK2F9gQBkLi7EtyV59WhBsiTURCjy5QZMgYRn9cxbZWgCQ+IKlnH2sFQYTURHmCYMgAJaKs9aYPkXNXGK6QhQdt9xeC4UhTC+eV/wVASASmrKj6IMA4NIBMQDsX1VN4IlbuU0K7vmiQS0G5EOpmiW6I1Dpjtp8pYc5yxYVj0RtXcMJcwDFSiqYLh2x+QgqAJwnAuEEydxbkZtdj+fKPVfwbPIq7KngqvMVX4WoAmDBAcH9HTMmXw23s0LJSlPOOsZx0l8VAu/0Fzjuc2Td3aY5zf1VoZgBvPgmvuhoIrFSMSXQThcDoJo0YLxGLfBSv5IINgVC1XxCOb/oZrkTBtRJqkQgKG6ROgPgPbGq/6HVIiYK51WngAj5ikbBhoZi3FALbHmozhlQXFChTc75g6wRM2ufzb9N/IwMcG0wg8HZJf9HBF/tFZnBBBH+cW/BpBDnd4XLDNJcon4oBiiY7jS194mEI0IaSz+12ygAclSYEcXvFsqA3UgANEzqAdCgtYm2PQM2cVc1PvUM0KC1ibY9AzZxVzU+bT0D/gPs/oxfcUEcJAAAAABJRU5ErkJggg==",
					alipay: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAAA2FJREFUeF7tmU122jAQx2cMB2hp9yULeK+naHISwhJyiIRDBJaQkwRO0fdgEWff0h4ANH0yFc+m+hhbckKNvJUsaX76z4ckhAv/8MLthwggKuDCCUQXuHABxCAYXSC6wIUTiC7wFgL4MPveTaj9optrO+696ya8yeQRQFRAdIEYAxoVBD/PNtdCwHWpDIJwr+1PMCk1DgAkCSx/jHrLsv/p+lfKAp3HzQOYDAqxKtcYBJPtXe/B1Y3TXgmATGst0WIrgAC7JmBINOQsNN8HE0zfVQFlFxzrgFgHNLQOkNJuQ7vrcgkS1CXEua5fgnDj+l+172CX/h59Tbn9Of0qBUE1cGe2ngPhLWeiEH0krFDBT63HC8Cnx/VtFuFDfgl90UOldDvuX4WcSo7lBSD0YuR4H6ebZwRNkRUw9xdSah1G+IzZmW5IW7ERDX/e9Rc+YwerBEMvQo1nrhfqkf/ZuYCxxK5J/t4AjkFQBi71CXxFoFSWq2XTlkn+AndXodNf5SwgT4J7gnttoNL6BqUEmCZET/tkvzQZYj5g1Sf/0goIkfcJYIkEK5HsFnkYnen6BXQptUb5lwJgMz4zCihXD/BqAwVDuoy+Uqx399kACrkZaYECVjY5qxJZXpoQwrcDHB6UghfVvPssAMo35W4R7oZVg5EMmAJxUCZ2CNzfVJ2Pm6qdleDBNwFClaHZdRrQAEhWe25VSPCuAMo1tnQhdIzMNUixfDYBqAOGVQEKQB15OFMCwXPV3QsFww7g73E39Pudr/Gn0EyplQPXCkBF/5AKsBtPKRA+AdKAEx/0BhYLL9nHFkhZLiBvbkOcxFzG5wPtoe7gBUrrTiMttqO+8ebZCkAtWErs17jHvrrSLcj+lkCpKeV5g/ABIA05lqgVM4Er2nPhZgev7DHGnToLG+ALIC9budgWwoRzyuMUPlzj8waVBuELIFOB5iksi7xIKQh8PS4wu8/j+a3vBScbRAgABVfg5BZbH6SFgP0kVIl7UCjNja4RCkAGwecaPLDhp4yNsSYkADlp/mncdNLLu8fpud9XQK7//wERGoBrAefSfgRBsLI9pTtPg+diUNV1yLuJypVg1Un/p/8arwDXZkQALkJNb48KaPoOu+yLCnARanp7VEDTd9hlX1SAi1DT2/8AaakVXysj5qkAAAAASUVORK5CYII="
				} as UTSJSONObject,
				originalRroviders: ["wxpay", "alipay"] as Array<string>,
				currentProviders: ["wxpay", "alipay"] as Array<string>,
				openid: ""
			}
		},
		mounted() {
			// #ifdef MP-WEIXIN || MP-ALIPAY
			if (this.openid == "") {
				new Promise(async (resolve, reject) => {
					let code = await this.getCode();
					let res = await this.getOpenid({
						// #ifdef MP-WEIXIN
						provider: "wxpay",
						// #endif
						// #ifdef MP-ALIPAY
						provider: "alipay",
						// #endif
						code
					});
					resolve(res);
				}).then((res) => {
					if (res['openid'] != null) {
						this.openid = res['openid'];
					}
				}).catch((err) => {
					reject(err);
				})
			}
			// #endif

			// #ifdef MP-WEIXIN
			// 如果是微信小程序，则设置只支持微信支付
			this.originalRroviders = ["wxpay"];
			this.currentProviders = JSON.parse(JSON.stringify(this.originalRroviders));
			// #endif
			// #ifdef MP-ALIPAY
			// 如果是支付宝小程序，则设置只支持支付宝支付
			this.originalRroviders = ["alipay"];
			this.currentProviders = JSON.parse(JSON.stringify(this.originalRroviders));
			// #endif
			let insideData = {
				images: this.images as UTSJSONObject,
				originalRroviders: this.originalRroviders as Array<string>,
				currentProviders: this.currentProviders as Array<string>,
			} as UTSJSONObject;
			this.$emit("mounted", insideData);
		},
		methods: {
			// 发起支付 - 打开支付选项弹窗
			async open(options : UTSJSONObject) : Promise<void> {
				let provider = options['provider'] as string | null;
				if (provider != null && provider != "") {
					let providers : Array<string> = [];
					this.originalRroviders.map((item : string) => {
						if (provider == item) {
							providers.push(item);
						}
					});
					this.currentProviders = providers;
					options['provider'] = "";
				} else {
					this.currentProviders = JSON.parse(JSON.stringify(this.originalRroviders)) as Array<string>;
				}
				this.myOptions = options;
				if (this.currentProviders.length == 1) {
					this.createOrder({ provider: this.currentProviders[0] });
				} else {
					if (this.modeCom == "pc") {
						this._pcChooseProvider(this.currentProviders[0]);
					}
					this.openPopup("payPopup");
				}
			},
			createOrderByProvider(provider : string) {
				this.createOrder({
					provider
				})
			},
			// 创建支付
			async createOrder(data : UTSJSONObject) : Promise<void> {
				let options = this.myOptions;
				options['qr_code'] = false;
				options = objectAssign(options, data);
				if (options['provider'] == "appleiap") {
					// 苹果虚拟支付走特殊逻辑
					// #ifdef APP-IOS
					return this._appleiapCreateOrder(options);
					// #endif
					// #ifndef APP-IOS
					uni.showModal({
						title: "提示",
						content: "请在iOS系统中执行",
						showCancel: false
					})
					// #endif
				}
				// #ifdef APP
				if (options['provider'] == "wxpay") {
					// #ifdef  uniVersion < 4.11
					uni.showModal({
						title: "提示",
						content: "请先升级HBX至4.11",
						showCancel: false
					})
					return;
					// #endif
				}
				// #endif

				// #ifdef H5
				// 判断如果是pc访问，则强制扫码模式
				if (checkPlatform() == "pc") {
					options['qr_code'] = true;
				}
				// #endif
				let createOrderData = {
					provider: options['provider'],
					total_fee: options.getNumber('total_fee'),
					order_no: options['order_no'],
					out_trade_no: options['out_trade_no'],
					description: options['description'],
					type: options['type'],
					qr_code: options.getBoolean('qr_code'),
					custom: options.getJSON('custom'),
					other: options.getJSON('other'),
					wxpay_virtual: options.getJSON('wxpay_virtual'), // 微信小程序虚拟支付需要
				} as UTSJSONObject;
				// #ifdef H5
				if (options['openid'] != "" && options['provider'] == "wxpay") {
					createOrderData['openid'] = options['openid'];
				}
				// #endif
				// #ifdef MP
				if (this.openid != "") {
					createOrderData['openid'] = this.openid;
				}
				// #endif
				try {
					let res = await uniPayCo.createOrder(createOrderData);
					if (res['errCode'] == 0) {
						this.$emit("create", res);
						if (res['qr_code'] != null && res['qr_code'] == true && options.getBoolean('cancel_popup') != true) {
							this.orderRes = res;
							// 展示组件内置的二维码弹窗
							if (this.modeCom == "pc") {
								this.openPopup("payPopup");
								this._pcChooseProvider(options['provider'] as string);
							} else {
								this.openPopup("qrcodePopup");
							}
						} else {
							// 调起支付
							this.orderPayment(res);
						}
					} else {
						this.$emit("fail", res);
					}
				} catch (err) {
					this.$emit("fail", {
						errCode: -1,
						errMsg: (err as Error).message
					});
				}
			},
			// 调起支付
			orderPayment(res : UTSJSONObject) {
				this.orderRes = res;
				if (res['qr_code'] != null && res['qr_code'] != "") {
					this.$emit("qrcode", res);
				}
				// #ifdef H5
				let order = res.get('order') as UTSJSONObject;
				if (res['provider_pay_type'] == "jsapi") {
					// 微信公众号支付
					(window.WeixinJSBridge as any).invoke("getBrandWCPayRequest", order, (res : any) => {
						if (res.err_msg == "get_brand_wcpay_request:ok") {
							// 用户支付成功回调
							this._getOrder();
						} else if (res.err_msg == "get_brand_wcpay_request:cancel") {
							// 用户取消支付回调
							this.$emit("cancel", res);
						} else if (res.err_msg == "get_brand_wcpay_request:fail") {
							// 用户支付失败回调
							console.error('getBrandWCPayRequest-fail: ', res);
							this.$emit("fail", res);
						}
					});
				} else {
					// 外部浏览器支付
					let codeUrl = order['codeUrl'];
					let mwebUrl = order['h5Url'] || order['mwebUrl'] || order['mweb_url'];
					setTimeout(() => {
						this.openPopup("payConfirmPopup");
						window.location.href = codeUrl || mwebUrl;
					}, 200);
				}
				// #endif
				// #ifndef H5
				let _order = res.get('order');
				let orderStr = typeof _order == "string" ? _order as string : JSON.stringify(_order) as string;
				console.log('orderStr: ', orderStr)
				uni.requestPayment({
					provider: res['provider'] as string,
					orderInfo: orderStr,
					// #ifdef MP-WEIXIN
					..._order,
					// #endif
					success: (res) => {
						console.log("requestPaymentSuccess", JSON.stringify(res))
						this._getOrder();
					},
					fail: (err) => {
						console.log("requestPaymentFail", JSON.stringify(err))
						let errCode = err.errCode;
						let errMsg = err.errMsg;
						if (errCode == 701110) {
							// 用户取消支付
							this.$emit("cancel", err);
						} else if (errMsg.indexOf("fail cancel") > -1) {
							// 用户取消支付
							this.$emit("cancel", err);
						} else {
							// 发起支付失败
							console.error("uni.requestPayment:fail", err);
							this.$emit("fail", {
								errCode: errCode,
								errMsg: errMsg
							});
						}
					}
				});
				// #endif
			},
			// 打开弹窗
			openPopup(name : string) {
				let popupRef = this.$refs[name] as UniPayPopupComponentPublicInstance;
				popupRef.open();
			},
			// 关闭弹窗
			closePopup(name : string) {
				let popupRef = this.$refs[name] as UniPayPopupComponentPublicInstance;
				popupRef.close();
			},
			// 查询订单（查询支付情况）
			async getOrder(data : UTSJSONObject) : Promise<UTSJSONObject> {
				try {
					let res = await uniPayCo.getOrder(data);
					return res;
				} catch (err) {
					return {
						errCode: -1,
						errMsg: (err as Error).message
					} as UTSJSONObject
				}
			},
			// 发起退款（此接口需要admin角色才可以访问）
			async refund(data : UTSJSONObject) : Promise<UTSJSONObject> {
				try {
					let res = await uniPayCo.refund(data);
					return res;
				} catch (err) {
					return {
						errCode: -1,
						errMsg: (err as Error).message
					} as UTSJSONObject
				}
			},
			// 查询退款（查询退款情况）
			async getRefund(data : UTSJSONObject) : Promise<UTSJSONObject> {
				try {
					let res = await uniPayCo.getRefund(data);
					return res;
				} catch (err) {
					return {
						errCode: -1,
						errMsg: (err as Error).message
					} as UTSJSONObject
				}
			},
			// 关闭订单
			async closeOrder(data : UTSJSONObject) : Promise<UTSJSONObject> {
				try {
					let res = await uniPayCo.closeOrder(data);
					return res;
				} catch (err) {
					return {
						errCode: -1,
						errMsg: (err as Error).message
					} as UTSJSONObject
				}
			},
			// 获取支持的支付供应商
			async getPayProviderFromCloud(data : UTSJSONObject) : Promise<UTSJSONObject> {
				try {
					let res = await uniPayCo.getPayProviderFromCloud(data);
					return res;
				} catch (err) {
					return {
						errCode: -1,
						errMsg: (err as Error).message
					} as UTSJSONObject
				}
			},
			// 获取支付配置内的appid（主要用于获取获取微信公众号的appid，用以获取code）
			async getProviderAppId(data : UTSJSONObject) : Promise<UTSJSONObject> {
				try {
					let res = await uniPayCo.getProviderAppId(data);
					return res;
				} catch (err) {
					return {
						errCode: -1,
						errMsg: (err as Error).message
					} as UTSJSONObject
				}
			},
			// 根据code获取openid
			async getOpenid(data : UTSJSONObject) : Promise<UTSJSONObject> {
				try {
					let res = await uniPayCo.getOpenid(data);
					return res;
				} catch (err) {
					return {
						errCode: -1,
						errMsg: (err as Error).message
					} as UTSJSONObject
				}
			},
			// 验证iosIap苹果内购支付凭据
			async verifyReceiptFromAppleiap(data : UTSJSONObject) : Promise<UTSJSONObject> {
				try {
					let res = await uniPayCo.verifyReceiptFromAppleiap(data);
					return res;
				} catch (err) {
					return {
						errCode: -1,
						errMsg: (err as Error).message
					} as UTSJSONObject
				}
			},
			// 支付成功后的逻辑
			paySuccess(res : UTSJSONObject) {
				this.closePopup("payPopup");
				this.closePopup("payConfirmPopup");
				this.clearQrcode();
				let toSuccessPage = this.toSuccessPage as boolean;
				if (toSuccessPage) {
					// 跳转到支付成功的内置页面
					this.pageToSuccess(res);
				}
				this.$emit("success", res);
			},
			pageToSuccess(res : UTSJSONObject) {
				let out_trade_no = res['out_trade_no'] as string;
				let pay_order = res.getJSON('pay_order') as UTSJSONObject;
				let order_no = pay_order['order_no'] as string;
				//let pay_date = pay_order['pay_date'];
				let total_fee = pay_order.getNumber('total_fee');
				if (total_fee == null) {
					total_fee = 0;
				}
				let returnUrl = this.returnUrl as string;
				let adpid = this.adpid as string;
				let mainColor = this.mainColor as string;

				if (this.modeCom != "pc") {
					uni.navigateTo({
						url: `/uni_modules/uni-pay-x/pages/success/success?out_trade_no=${out_trade_no}&order_no=${order_no}&total_fee=${total_fee}&adpid=${adpid}&return_url=${returnUrl}&main_color=${mainColor}`
					});
				} else {
					if (returnUrl != "") {
						let url = returnUrl + `?out_trade_no=${out_trade_no}&order_no=${order_no}`;
						if (url.indexOf("/") != 0) url = `/${url}`;
						uni.navigateTo({
							url
						});
					}
				}
			},
			// 监听 - 关闭二维码弹窗
			clearQrcode() {
				this.orderRes["codeUrl"] = "";
				this.orderRes["qr_code_image"] = "";
			},
			// 内部函数查询支付状态
			async _getOrder() : Promise<void> {
				let out_trade_no = this.orderRes["out_trade_no"] as string;
				let res = await this.getOrder({
					out_trade_no,
					await_notify: true
				});
				if (res['errCode'] == 0) {
					let has_paid = res.getBoolean('has_paid');
					if (has_paid != null && has_paid == true) {
						this.closePopup("qrcodePopup");
						this.paySuccess(res);
					}
				}
			},
			// 重新发起支付
			_afreshPayment() {
				this.orderPayment(this.orderRes);
			},
			// pc版弹窗选择支付方式
			_pcChooseProvider(provider : string) {
				let _provider : string = this.myOptions["provider"] as string;
				if (provider != _provider) {
					this.createOrder({ provider: provider })
				}
			},
			// 苹果虚拟支付支付逻辑
			async _appleiapCreateOrder(options : UTSJSONObject) : Promise<void>{
				// #ifndef APP-IOS
				uni.showToast({
					title: "请在iOS系统中打开",
					icon: "none"
				})
				// #endif
				// #ifdef APP-IOS
				const virtualPaymentManager = uni.getVirtualPaymentManager();
				if (options.apple_virtual['product_type'] == 'nonconsumable') {
					uni.showLoading({
						title: "请求中...",
						mask: true
					})
					let purchased = await new Promise((resolve, reject) => {
						 // 如果是非消耗性产品只能购买一次，需要先判断下
						 virtualPaymentManager.restoreTransactions({
							 success: (res) => {
								 let transactions = res.transactions;
								 let index = res.transactions.findIndex(transaction => {
									 return transaction.productId == options.apple_virtual['product_id']
								 })
								 resolve(index > -1 ? true : false);
							 }
						 });
					});
					uni.hideLoading()
					if (purchased) {
						uni.showModal({
							title: "提示",
							content: "您已购买过此商品，请勿重复购买",
							showCancel: false
						});
						return;
					}
				}
				let createOrderData = {
					provider: options.provider,
					total_fee: options.total_fee,
					order_no: options.order_no,
					out_trade_no: options.out_trade_no,
					description: options.description,
					type: options.type,
					apple_virtual: options.apple_virtual,
					custom: options.custom,
				} as UTSJSONObject;
				let	res = await uniPayCo.createOrder(createOrderData);
				if (res.errCode === 0) {
					this.$emit("create", res);
					this.res = res;
					uni.showLoading({
						title: '支付请求中...'
					});
					try {
						// 请求苹果支付
						if (this.debug) console.log("正在请求苹果服务器", res.out_trade_no);
						uni.requestVirtualPayment({
							apple: {
								productId: options.getJSON('apple_virtual')!.getString('product_id')!,
								appAccountToken: res.appleiap_account_token,
								quantity: options.getJSON('apple_virtual')!.getNumber('buy_quantity')! || 1,
							},
							success: async (requestPaymentRes) => {
								uni.hideLoading()
								let transaction = requestPaymentRes?.apple;
								if (this.debug) console.log('用户支付成功', transaction);
								let transactionIdentifier : string = transaction.transactionIdentifier;
								let transactionDate : string = transaction.transactionDate;
								let outTradeNo : string = res.out_trade_no;
								uni.showLoading({
									title: '正在处理支付结果...'
								});
								// 云端请求苹果服务器验证票据
								let verifyRes = await this.verifyReceiptFromAppleiap({
									out_trade_no: outTradeNo,
									transaction_receipt: transaction.jsonRepresentation,
									transaction_identifier: transactionIdentifier
								});
								if (verifyRes.errCode === 0) {
									if (verifyRes.repeat) {
										uni.showModal({
											title: "提示",
											content: `当前道具只能购买一次`,
											showCancel: false,
											confirmText: "好的"
										});
									} else {
										//经过开发者server验证成功后请结束该交易
										virtualPaymentManager.finishTransaction({
											transaction: transaction,
											success: (r) => {
												if (this.debug) console.log("关单成功, 该productId= " + transaction.productId)
											},
											fail: (e) => {
												if (this.debug) console.log("关单失败, 该productId= " + transaction.roductId)
											}
										});
										uni.hideLoading();
										this.paySuccess(verifyRes);
									}
								} else {
									if (this.debug) console.log('verifyRes: ', verifyRes)
								}
							},
							fail: (err) => {
								uni.hideLoading();
								if (this.debug) console.log("购买失败：errSubject= " + err.errSubject + ", errCode= " + err.errCode + ", errMsg= " + err.errMsg);
								if ([700601].indexOf(err.errCode) > -1 || err.errMsg.indexOf("cancel") > -1) {
									this.$emit("cancel", err);
								} else {
									this.$emit("fail", {
										errCode: err.errCode,
										errMsg: err.errMsg
									});
								}
							}
						});
					} catch (err) {
						let code = err.errCode || err.code;
						if (code === 2) {
							// 用户取消支付
							if (this.debug) console.log("用户取消支付");
							this.$emit("cancel", err);
						} else {
							// 发起支付失败
							console.error("appleiapCreateOrder:fail", err);
							this.$emit("fail", {
								errCode: code,
								errMsg: err.errMsg || err.message
							});
						}
						uni.hideLoading();
					}
				}
				// #endif
			},
			// 苹果虚拟支付未完成订单检测
			appleiapRestore() {
				// #ifdef APP-IOS
				uni.showLoading({
					title: "",
					mask: true
				});
				try {
					const virtualPaymentManager = uni.getVirtualPaymentManager();
					virtualPaymentManager.getUnfinishedTransactions({
						success: async (res) => {
							uni.hideLoading()
							console.log("获取未结束的订单列表个数：" + res.transactions.length)
							res.transactions.forEach(async transaction => {
								console.log("getUnfinishedTransactions成功的交易productId= " + transaction.productId);

								let appAccountToken : string = transaction.appAccountToken;
								let transactionIdentifier : string = transaction.transactionIdentifier;
								//let originalTransactionIdentifier : string = transaction.originalTransactionIdentifier;
								let transactionDate : string = transaction.transactionDate;

								// 云端请求苹果服务器验证票据
								let verifyRes = await this.verifyReceiptFromAppleiap({
									appleiap_account_token: appAccountToken,
									transaction_receipt: transaction.jsonRepresentation,
									transaction_identifier: transactionIdentifier,
								});
								if (verifyRes.errCode === 0 || !appAccountToken) {
									// 经过开发者server验证成功后请结束该交易
									virtualPaymentManager.finishTransaction({
										transaction: transaction,
										success: (r) => {
											if (this.debug) console.log("关单成功, 该productId= " + transaction.productId)
										},
										fail: (e) => {
											if (this.debug) console.log("关单失败, 该productId= " + transaction.productId)
										}
									});
									uni.hideLoading();
									// 如果是自动续期，则不跳页面
									if (!verifyRes.is_subscribe && verifyRes.pay_order) {
										this.paySuccess(verifyRes);
									}
								} else {
									if (this.debug) console.log('verifyRes: ', verifyRes)
								}
							})
						},
						fail: (e) => {
							uni.hideLoading()
							console.log("获取未结束的订单列表失败：errSubject= " + e.errSubject + ", errCode= " + e.errCode + ", errMsg= " + e.errMsg)
							uni.showToast({
								title: "获取未结束的订单列表失败：errCode= " + e.errCode,
								icon: 'error'
							});
						}
					})
				} catch(err){
					console.error('err: ', err)
					uni.hideLoading()
				}
				// #endif
			},
			// #ifdef MP-WEIXIN || MP-ALIPAY
			// 获取code
			async getCode() : Promise<string>{
				// #ifdef MP-WEIXIN
				return getWeixinCode();
				// #endif
				// #ifdef MP-ALIPAY
				return getAlipayCode();
				// #endif
			},
			// #endif
		},
		watch: {

		},
		computed: {
			modeCom() : string {
				let mode = this.mode as string;
				if (mode != "") return mode;
        let systemInfo = uni.getDeviceInfo();
				return systemInfo.deviceType == "pc" ? "pc" : "mobile";
			},
			totalFeeCom() : number {
				let totalFee = this.myOptions.getNumber('total_fee');
				return totalFee != null ? totalFee : 0;
			}
		},
	}
</script>
<style lang="scss" scoped>
	$bgcolor: #f3f3f3;

	.uni-pay {}

	/* 手机版收银台弹窗开始 */
	.mobile-pay-popup {
		width: 750rpx;
		min-height: 900rpx;
		background-color: $bgcolor;
		border-radius: 30rpx 30rpx 0 0;
		overflow: hidden;

		.mobile-pay-popup-title {
			background-color: #ffffff;
			padding: 20rpx;

			.text {
				text-align: center;
				font-weight: bold;
				font-size: 40rpx;
			}
		}

		.mobile-pay-popup-amount-box {
			background-color: #ffffff;
			padding: 30rpx;

			.mobile-pay-popup-amount {
				margin-top: 20rpx;

				.text {
					color: #e43d33;
					font-size: 60rpx;
				}
			}
		}

		.mobile-pay-popup-provider-list {
			background-color: #ffffff;
			margin-top: 20rpx;

			.uni-list {
				display: flex;
				background-color: #fff;
				position: relative;
				flex-direction: column;

				.uni-list-item {
					display: flex;
					position: relative;
					justify-content: space-between;
					align-items: center;
					background-color: #fff;
					flex-direction: row;
					border-bottom: 2rpx solid #f8f8f8;

					/* #ifdef H5 */
					cursor: pointer;
					/* #endif */

					&:hover {
						background-color: #f1f1f1;
					}

					.uni-list-item__container {
						position: relative;
						display: flex;
						flex-direction: row;
						padding: 12px 15px;
						padding-left: 15px;
						flex: 1;
						overflow: hidden;

						.uni-list-item__header {
							display: flex;
							flex-direction: row;
							align-items: center;

							.image {
								width: 52rpx;
								height: 52rpx;
								margin-right: 18rpx;
							}
						}
					}

					.container--right {
						padding-right: 0;
					}

					.uni-list-item__content {
						display: flex;
						padding-right: 8px;
						flex: 1;
						flex-direction: column;
						justify-content: space-between;
						overflow: hidden;

						.text {
							color: #3b4144;
							font-size: 28rpx;
						}
					}

					.uni-list-item__content--center {
						justify-content: center;
					}

					.arrowright {
						border-top: 2rpx solid #bbbbbb;
						border-right: 2rpx solid #bbbbbb;
						width: 16rpx;
						height: 16rpx;
						margin-right: 30rpx;
						transform: rotate(45deg);
					}
				}
			}
		}
	}

	/* 手机版收银台弹窗结束 */

	/* PC版收银台弹窗开始 */
	.pc-pay-popup {
		width: 800px;
		height: 600px;
		background-color: $bgcolor;
		border-radius: 10px;
		overflow: hidden;

		.pc-pay-popup-title {
			background-color: #ffffff;
			height: 66px;

			.text {
				text-align: center;
				font-weight: bold;
				font-size: 20px;
				line-height: 66px;
			}
		}

		.pc-pay-popup-flex {
			width: 100%;
			display: flex;
			flex-direction: row;

			.pc-pay-popup-qrcode-box {
				height: calc(600px - 66px);
				flex: 1;
				background-color: #ffffff;
				display: flex;
				flex-direction: row;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.pc-pay-popup-qrcode-image {
					width: 225px;
					height: 225px;
				}

				.pc-pay-popup-amount-box {
					.pc-pay-popup-amount-tips {
						margin-top: 20px;

						.text {
							text-align: center;
							color: #333;
							font-size: 20px;
						}
					}

					.pc-pay-popup-amount {
						margin-top: 20px;

						.text {
							text-align: center;
							color: #dd524d;
							font-weight: bold;
							font-size: 32px;
						}
					}
				}

				.pc-pay-popup-complete-button {
					margin-top: 20px;
				}

			}

			.pc-pay-popup-provider-list {
				width: 300px;
				display: flex;
				flex-direction: column;

				.pc-pay-popup-provider-item {
					padding: 20px;
					display: flex;
					flex-direction: row;
					align-items: center;

					.pc-pay-popup-provider-image {
						width: 60px;
						height: 60px;
					}

					.pc-pay-popup-provider-text {
						color: #333;
						font-size: 20px;
						margin-left: 10px;
					}
				}

				.pc-pay-popup-provider-item.active {
					background-color: #ffffff;
				}

				.pc-pay-popup-provider-item:hover {
					background-color: #ffffff;

					/* #ifdef H5 */
					cursor: pointer;
					/* #endif */
				}

				.pc-pay-popup-logo {
					flex: 1;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: center;

					.image {
						width: 120px;
					}
				}

			}
		}
	}

	/* PC版收银台弹窗结束 */

	/* 二维码支付弹窗开始 */
	.qrcode-popup-content {
		width: 600rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
		padding: 40rpx;
		box-sizing: border-box;
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.qrcode-image {
			width: 450rpx;
			height: 450rpx;
		}

		.qrcode-popup-info {
			padding: 20rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.qrcode-popup-info-fee-box {
				display: flex;
				flex-direction: row;
				margin-bottom: 6rpx;

				.qrcode-popup-info-fee {
					.text {
						color: red;
						font-size: 60rpx;
						font-weight: bold;
						text-align: center;
					}
				}

				.qrcode-popup-info-fee-unit {
					display: flex;
					flex-direction: row;
					align-items: flex-end;
					padding-bottom: 10rpx;
				}
			}
		}

		.qrcode-popup-btn-primary {
			width: 520rpx;
		}

		.qrcode-popup-cancel {
			margin-top: 20rpx;
			width: 520rpx;

			.qrcode-popup-cancel-text {
				text-align: center;
			}
		}
	}

	/* 二维码支付弹窗结束 */

	/* 外部浏览器H5支付弹窗确认开始 */
	.pay-confirm-popup-content {
		width: 550rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
		padding: 40rpx;

		.pay-confirm-popup-title {
			text-align: center;
			padding: 20rpx 0;
			margin-bottom: 30rpx;
		}

		.pay-confirm-popup-refresh {
			margin-top: 20rpx;
		}

		.pay-confirm-popup-cancel {
			margin-top: 20rpx;
			text-align: center;
		}
	}

	/* 外部浏览器H5支付弹窗确认结束 */
</style>