EveryLike/uni_modules/uni-pay-x/pages/pay-desk/pay-desk.uvue

<template>
	<!-- 自定义收银台页面模式 -->
	<view class="uni-pay">
		<view class="mobile-pay-popup">
			<view class="mobile-pay-popup-amount-box">
				<view><text class="text">待支付金额：</text></view>
				<view class="mobile-pay-popup-amount"><text class="text">{{ amountFormat(myOptions.getNumber('total_fee')) }}</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="checkProvider('wxpay')" @click="createOrderByProvider('wxpay')">
						<view class="uni-list-item__container container--right">
							<view class="uni-list-item__header">
								<image :src="insideData.getJSON('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="checkProvider('alipay')" @click="createOrderByProvider('alipay')">
						<view class="uni-list-item__container container--right">
							<view class="uni-list-item__header">
								<image :src="insideData.getJSON('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 ref="payRef" height="450px" :to-success-page="false" @mounted="onMounted" @success="onSuccess" @fail="onFail" @cancel="onCancel"></uni-pay>
	</view>
</template>

<script>
	import { objectAssign } from "../../js_sdk/js_sdk"
	export default {
		data() {
			return {
				myOptions: {
					total_fee: "",
				} as UTSJSONObject,
				insideData: {
					currentProviders: [] as Array<string>,
					images: {
						alipay: "",
						wxpay: ""
					} as UTSJSONObject
				} as UTSJSONObject, // uni-pay组件mounted事件获得的数据
				adpid: "", // 广告id
				return_url: "", // 支付成功后点击查看订单跳转的订单详情页面地址
				main_color: "", // 支付成功页面的主色调
			}
		},
		// 监听 - 页面每次【加载时】执行(如：前进)
		onLoad(options) {
			let optionsStr = options['options'] as string | null;
			if (optionsStr != null && optionsStr != "") {
				let newOptions = JSON.parse(decodeURI(optionsStr)!) as UTSJSONObject;
				this.myOptions = newOptions as UTSJSONObject;
			}
			console.log('myOptions: ', this.myOptions)
		},
		// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
		onReady() { },
		// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
		onShow() { },
		// 监听 - 页面每次【隐藏时】执行(如：返回)
		onHide() { },
		// 函数
		methods: {
			// 监听 - 支付组件加载完毕事件
			onMounted(insideData : UTSJSONObject) {
				this.insideData['currentProviders'] = insideData.getArray('currentProviders') as Array<string>;
				this.insideData['images'] = insideData.getJSON('images') as UTSJSONObject;
			},
			// 发起支付
			createOrder(data : UTSJSONObject) {
				this.myOptions = objectAssign(this.myOptions, data);
				const payInstance = this.$refs["payRef"] as UniPayComponentPublicInstance;
				payInstance.createOrder(this.myOptions);
			},
			// 根据provider发起支付
			createOrderByProvider(provider : string) {
				this.createOrder({
					provider
				})
			},
			// 监听事件 - 支付成功
			onSuccess(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'] as string;
				let total_fee = pay_order.getNumber('total_fee');
				if (total_fee == null) {
					total_fee = 0;
				}
				let return_url = this.return_url as string;
				let adpid = this.adpid as string;
				let main_color = this.main_color as string;

				console.log('success: ', res);
				let user_order_success = res.getBoolean('user_order_success');
				if (user_order_success != null && user_order_success != true) {
					// 代表用户已付款，且你自己写的回调成功并正确执行了
					uni.redirectTo({
						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=${return_url}&main_color=${main_color}`
					});
				} else {
					// 代表用户已付款，但你自己写的回调执行失败（通常是因为你的回调代码有问题）

				}
			},
			// 监听事件 - 支付失败
			onFail(err : RequestPaymentFail) {
				console.log('fail: ', err)

			},
			// 监听事件 - 取消支付
			onCancel(err : RequestPaymentFail) {
				console.log('cancel: ', err)

			},
			amountFormat(totalFee : number | null) :string{
				if (totalFee == null) {
					return "0";
				} else {
					return (totalFee / 100).toFixed(2)
				}
			},
			// 检测provider
			checkProvider(provider : string) : boolean {
				let currentProviders = this.insideData.getArray<string>('currentProviders');
				return currentProviders != null && currentProviders.indexOf(provider) > -1 ? true : false;
			}
		},
		// 监听器
		watch: {

		},
		// 计算属性
		computed: {

		}
	}
</script>
<style lang="scss" scoped>
	.uni-pay{
		flex: 1;
		display: flex;
		flex-direction: column;
		background-color: #f3f3f3;
	}
	.mobile-pay-popup {
		flex: 1;
		.mobile-pay-popup-amount-box {
			background-color: #ffffff;
			padding: 15px;

			.mobile-pay-popup-amount {
				margin-top: 10px;

				.text {
					color: #e43d33;
					font-size: 30px;
				}
			}
		}

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

			.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: 1px 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: 26px;
								height: 26px;
								margin-right: 9px;
							}
						}
					}

					.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: 14px;
						}
					}

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

					.arrowright {
						border-top: 1px solid #bbbbbb;
						border-right: 1px solid #bbbbbb;
						width: 8px;
						height: 8px;
						margin-right: 15px;
						transform: rotate(45deg);
					}
				}
			}
		}
	}
</style>