manghe/pages/users/alipay_invoke/index.vue

<template>
	<view>
		<!-- #ifdef H5 -->
		<view v-if="!this.$wechat.isWeixin()">
			<view class="text-section">
				<view>{{ $t(content) }}</view>
			</view>
			<view class="alipaysubmit" v-html="formContent"></view>
		</view>
		<!-- #endif -->
		<view v-else>
			<view class="text-section">
				<view>{{$t(`点击复制网址去浏览器中打开`)}}</view>
				<view class="link">{{ link }}</view>
			</view>
			<view class="button-section">
				<!-- #ifdef H5 -->
				<button class="button copy" :data-clipboard-text="link">{{$t(`点击复制`)}}</button>
				<!-- #endif -->
				<!-- #ifdef MP -->
				<button class="button copy" @click="copyLink">{{$t(`点击复制`)}}</button>
				<!-- #endif -->
				<button class="button off" @click="goDetail">{{$t(`完成支付`)}}</button>
			</view>
		</view>
		<!-- #ifdef H5 -->
		<view v-show="hintShow" class="hint" @click="hintShow = false">
			<view>{{$t(`点击右上角`)}}<text class="iconfont icon-gengduo"></text></view>
			<view>{{$t(`选择 在浏览器 打开，去支付宝支付`)}}</view>
		</view>
		<!-- #endif -->
		<home></home>
	</view>
</template>

<script>
	// #ifdef H5
	import ClipboardJS from '@/plugin/clipboard/clipboard.js';
	import {
		mapGetters
	} from 'vuex';
	import home from '@/components/home/index.vue';
	import {
		aliPay
	} from '@/api/order';
	import {
		toLogin
	} from '@/libs/login.js';
	export default {
		components: {
			home
		},
		data() {
			return {
				// #ifdef H5
				isWeixin: this.$wechat.isWeixin(),
				hintShow: true,
				// #endif
				orderId: '',
				link: '',
				pay_key: '',
				content: this.$t(`正在支付中`),
				formContent: ''
			};
		},
		computed: mapGetters(['isLogin']),
		onLoad(option) {
			if (!this.isLogin && this.$wechat.isWeixin()) {
				toLogin();
			}
			this.orderId = option.id;
			this.link = location.protocol + '//' + window.location.host + '/pages/users/alipay_invoke/index?pay_key=' + option.pay_key;
			this.payKey = option.pay_key;
			if (option.from) this.from = option.from || '';
			if (!this.$wechat.isWeixin()) {
				if (!this.payKey) {
					this.content = this.$t(`支付订单不存在,页面将在2秒后自动关闭`);
					uni.showToast({
						title: this.$t(`支付订单不存在,页面将在2秒后自动关闭`),
						icon: 'none'
					});
					setTimeout(() => {
						uni.redirectTo({
							url: '/pages/index/index'
						});
					}, 2000);
				}
				uni.showLoading({
					title: this.$t(`正在支付中`)
				});
				aliPay(this.payKey, location.protocol + '//' + window.location.host + '/pages/index/index')
					.then(res => {
						uni.hideLoading();
						this.formContent = res.data.pay_content;
						this.$nextTick(() => {
							document.getElementById('alipaysubmit').submit();
						});
					})
					.catch(err => {
						uni.hideLoading();
						uni.showToast({
							title: err,
							icon: 'none'
						});
						setTimeout(() => {
							uni.redirectTo({
								url: '/pages/index/index'
							});
						}, 2000);
					});
			}
		},
		onReady() {
			this.$nextTick(() => {
				// #ifdef H5
				const clipboard = new ClipboardJS(".copy");
				clipboard.on("success", () => {
					uni.showToast({
						title: this.$t(`复制成功`)
					});
				});
				// #endif
			});
		},
		methods: {
			// #ifdef MP
			copyLink() {
				uni.setClipboardData({
					data: this.link,
					success() {
						uni.showToast({
							title: this.$t(`复制成功`),
							icon: 'success'
						});
					},
					fail() {
						uni.showToast({
							title: this.$t(`复制失败`),
							icon: 'none'
						});
					}
				});
			},
			// #endif
			goDetail() {
				uni.navigateTo({
					url: this.from === 'member' ? '/pages/annex/vip_paid/index' : `/pages/goods/order_details/index?order_id=${this.orderId}`
				});
			}
		}
	};
	//#endif
</script>

<style>
	page {
		background-color: #ffffff;
	}
</style>

<style lang="scss" scoped>
	.alipaysubmit {
		display: none;
	}

	.text-section {
		padding-top: 148rpx;
		margin-top: 185rpx;
		background: url('data:image/png;base64,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
		font-weight: bold;
		font-size: 32rpx;
		text-align: center;
		color: #111111;

		.link {
			margin-top: 16rpx;
			margin-right: 98rpx;
			margin-left: 98rpx;
			white-space: pre-wrap;
			overflow-wrap: break-word;
			font-weight: normal;
			color: #666666;
		}
	}

	.button-section {
		margin-top: 95rpx;
		margin-right: 98rpx;
		margin-left: 98rpx;

		.button {
			height: 80rpx;
			border-radius: 40rpx;
			font-size: 30rpx;
			line-height: 80rpx;

			~.button {
				margin-top: 32rpx;
			}

			&.copy {
				background-color: #333333;
				color: #ffffff;
			}

			&.off {
				border: 2rpx solid #999999;
				color: #666666;
			}
		}
	}

	.hint {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		padding-top: 156rpx;
		padding-left: 144rpx;
		background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAcoAAAFkCAYAAACgintCAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyVpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ4IDc5LjE2NDAzNiwgMjAxOS8wOC8xMy0wMTowNjo1NyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjAgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MjM0OUI3N0QxQjFDMTFFQjg5Q0RFQzkyMDYxNDI0NzMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MjM0OUI3N0UxQjFDMTFFQjg5Q0RFQzkyMDYxNDI0NzMiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoyMzQ5Qjc3QjFCMUMxMUVCODlDREVDOTIwNjE0MjQ3MyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoyMzQ5Qjc3QzFCMUMxMUVCODlDREVDOTIwNjE0MjQ3MyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PjAoHQAAADGgSURBVHja7J0H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
		font-weight: 500;
		font-size: 30rpx;
		line-height: 68rpx;
		color: #c1c1c1;
		background-color: rgba(0, 0, 0, 0.8);

		.iconfont {
			margin-left: 10rpx;
			font-weight: bold;
			font-size: 30rpx;
		}
	}
</style>