uni-app配置点金计划动态Url,多个服务,一个页面通过Nginx代理到不同服务

87 阅读1分钟
<template>
	<view>
		<view class="center">
			<view class="orderStat">
				<uni-icons type="checkmarkempty" style="font-weight: bold;" size="30" color="#18bc37" />
			</view>
			<text class="state">xxxx</text>
			<text class="num">{{(data.payerAmount / 100).toFixed(2)}}元</text>
			<view class="orderInfo">
				<view class="item">
					<text>xxxx</text>
					<text>{{data.xxx}}</text>
				</view>
				<view class="item">
					<text>xxx</text>
					<text>{{data.xxx}}</text>
				</view>
				<view class="item">
					<text>xxxx</text>
				</view>
				<view class="item">
					<text>xxxx</text>
				</view>
				<view class="item">
					<text>xxxx</text>
				</view>
			</view>
			<view class="isButton">
				<view class="button" @click="toPage" :plain="true">返回首页</view>
			</view>
			<view class="time">
				<uni-countdown :font-size="30" :day="1" :hour="2" :minute="30" :second="3700" color="#FFFFFF"
					background-color="#18bc37" />
			</view>
			<view class="wweek">
				{{getTime()}}
			</view>
		</view>
	</view>
</template>

<script>
	import tip from '@/utils/tip';
	export default {
		data() {
			return {
				data: null,
				isUrl: "",
				linkedSalesmanId:0,
				data: {
					oilName:"--",
					orderNo:"--",
					amount:0,
					wholeDiscount:0,
					payerAmount:0
				},
			};
		},
		onLoad(options) {
                //此处不加入会受到微信处罚
			const script = document.createElement('script')
			script.src = 'https://wx.gtimg.com/pay_h5/goldplan/js/jgoldplan-1.0.0.js'
			document.head.appendChild(script)
			this.getUrl(options)
		},
		mounted() {
                 //给微信传值通知微信加载商户小票
			const mchData = { action: "onIframeReady", displayStyle: "SHOW_CUSTOM_PAGE", height: 750 };
			const postData = JSON.stringify(mchData);
			window.parent.postMessage(postData, "*");
		},
		methods: {
			//名下有多个商户动态获取配置的点金计划url
			getUrl(options){
                        //接受微信传过来的值通过跨域错误截取到url,必须在catch中才能拿到报错的内容
				window.addEventListener('message', (event) => {
					try{
						JSON.stringify(event.source)
					}catch(err){
						this.isUrl = JSON.stringify(err.stack.match(/"([^"]+)"/)[1])
						uni.request({
						    url: (`${this.isUrl}/xxx/xxx`).replace(/"/g, ''),
							method:"POST",
						    data: {orderNo: options.out_trade_no},
						    success: (req) => {
								let res = req.data
								console.log("参数",req.data);
								if(res.code != 0 ) return
						    }
						});
					}
				});
			},
			// 跳转到指定的h5页面
			toPage() {
                        //拼接的url必须去掉双引号
				let url = (`${this.isUrl}/xxxx?xxxx=${this.linkedSalesmanId}`).replace(/"/g, '')
				console.log(url);
                                //给微信传值
				const mchData = { action: "jumpOut", jumpOutUrl: url};
				const postData = JSON.stringify(mchData);
				window.parent.postMessage(postData, "*");
			},
			//获取时间
			getTime() {
				return tip.$Time()
			},
		}
	};
</script>
<style lang="scss" scoped>
	.center {
		max-height: 900rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #f6f6f6;
		border-radius: 20rpx;
		padding: 20rpx;

		.orderStat {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			border: 10rpx solid #18bc37;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.state {
			margin-top: 10rpx;
			font-size: 30rpx;
		}

		.num {
			margin-top: 10rpx;
			font-weight: bold;
			color: #666666;
		}

		.orderInfo {
			min-width: 500rpx;
			max-width: 500rpx;
			padding-bottom: 20rpx;

			.item {
				display: flex;
				justify-content: space-between;
				font-size: 30rpx;
			}
		}

		.isButton {
			min-width: 500rpx;
			max-width: 500rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 20rpx 0;
			.button {
				border: 2rpx #18bc37 solid;
				border-radius: 10rpx;
				padding: 5rpx 30rpx;
				color: #18bc37;
			}
		}


		.time {
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 10rpx 40rpx;
			border: 2rpx #ED6723 solid;
			border-radius: 20rpx;

			.uni-countdown {
				padding: 10rpx;
				font-size: 40px;
			}

		}

		.wweek {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 10rpx;
			font-weight: bold;
			color: #666666;
		}
	}
</style>