daoji_h5/user/pages/alipay-result.vue

<template>
	<view v-if="isLoad">
		<view v-if="isWechatAgent">
			<view class="text-section">
				<view>点击复制网址去浏览器中打开</view>
				<view class="pl-lg pr-lg mt-sm ml-lg mr-lg f-paragraph c-desc ellipsis">{{ link }}</view>
			</view>
			<view class="button-section">
				<button class="button copy" @click="copyLink">点击复制</button>
				<!-- <button class="button off" @click="goDetail">完成支付</button> -->
			</view>
		</view>
		<view v-else>
			<view class="text-section">
				<view>{{ content }}</view>
			</view>
			<view class="alipaysubmit" v-html="alipayOrderParams.orderInfo"></view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from 'vuex'
	import siteInfo from '@/siteinfo.js';
	export default {
		components: {},
		data() {
			return {
				options: {},
				isLoad: false,
				isWechatAgent: false,
				link: '',
				content: '正在支付中'
			}
		},
		onLoad(options) {
			this.options = options
			this.initIndex()
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			commonOptions: state => state.user.commonOptions,
			userInfo: state => state.user.userInfo,
			autograph: state => state.user.autograph,
			alipayOrderParams: state => state.order.alipayOrderParams
		}),
		methods: {
			...mapActions(['getConfigInfo', 'getMineInfo']),
			...mapMutations(['updateUserItem', 'updateOrderItem']),
			async initIndex() {
				let isWechatAgent = await this.$jweixin.isWechat()
				if (isWechatAgent) {
					await this.$jweixin.initJssdk();
					this.$jweixin.wxReady(() => {
						this.$jweixin.hideOptionMenu()
					})
				}
				this.isWechatAgent = isWechatAgent

				let {
					autograph
				} = this.options
				if (autograph) {
					this.updateUserItem({
						key: 'autograph',
						val: autograph
					})
					await this.toRePay()
					return
				}
				await this.formatLink()
				this.isLoad = true
			},
			async formatLink() {
				let {
					siteroot
				} = siteInfo
				let url = siteroot.split('/index.php')[0]
				let {
					autograph
				} = this
				let {
					order_id,
					card_id = 0,
					coach_id = 0
				} = this.alipayOrderParams
				let coach_params = card_id ? `&cid=${card_id}&coach=${coach_id}` : ``
				let link = `${url}/h5/#/user/pages/alipay-result?autograph=${autograph}&id=${order_id}${coach_params}`
				this.link = link
			},
			async toRePay() {
				let {
					id,
					cid = 0,
					coach = 0
				} = this.options

				let param = cid ? {
					card_id: cid,
					coach_id: coach,
					pay_model: 3
				} : {
					id
				}

				let methodKey = cid ? 'mine' : 'order'
				let methodModel = cid ? 'payBalanceOrder' : 'rePayOrder'
				let {
					pay_list
				} = await this.$api[methodKey][methodModel](param)

				if (pay_list) {
					let alipayOrderParams = Object.assign({}, {
						orderInfo: pay_list,
						provider: 'alipay'
					}, this.options)
					this.updateOrderItem({
						key: 'alipayOrderParams',
						val: alipayOrderParams
					})
					this.isLoad = true
					this.$nextTick(() => {
						document.getElementById('alipaysubmit').submit();
					});
				}
			},
			copyLink() {
				let {
					link: url
				} = this
				this.$util.goUrl({
					url,
					openType: 'copy'
				})
			},
			goDetail() {
				let {
					page_url: url
				} = this.alipayOrderParams
				this.$util.goUrl({
					url,
					openType: `reLaunch`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #ffffff;
	}

	.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;
	}

	.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>