xwc/pages/pay_result/pay_result.vue

<template>
	<view class="pay-result">
		<view class="contain bg-white">
			<view class="header flex-col col-center">
				<view>
					<image class="tips-icon" src="/static/images/icon_success.png"></image>
				</view>
				<view class="xl m-t-20">订单支付成功</view>
			</view>
			<view class="info">
				<view class="order-num flex row-between m-t-20">
					<view>订单编号</view>
					<view>
						{{payInfo.order_sn}}
					</view>
				</view>
				<view v-if="payInfo.pay_time" class="order-time flex row-between m-t-20">
					<view>付款时间</view>
					<view>{{payInfo.pay_time}}</view>
				</view>
				<view class="order-pay-type flex row-between m-t-20">
					<view>支付方式</view>
					<view>{{payInfo.pay_way}}</view>
				</view>
				<view class="order-pay-money flex row-between m-t-20">
					<view>支付金额</view>
					<view>
						{{payInfo.total_amount}}
					</view>
				</view>
			</view>
			<view class="line m-t-40"></view>
			<view class="m-t-40 flex-col row-center">
				<router-link :to="getPagesUrl" navType="replace">
					<button type="primary" size="lg" class="br60">查看订单</button>
				</router-link>
				<router-link  navType="pushTab" to="/pages/index/index">
					<button size="lg" class="br60 plain primary m-t-30">返回首页</button>
				</router-link>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getPayResult
	} from '@/api/order';
	export default {
		data() {
			return {
				payInfo: {},
				from: ''
			};
		},

		onLoad() {
			const options = this.$Route.query;
			console.log(options)
			this.id = options.id
			this.from = options.from
			this.getOrderResultFun();
		},


		methods: {
			getOrderResultFun() {
				getPayResult({
					id: this.id,
					from: this.from,
				}).then(res => {
					if (res.code == 1) {
						this.payInfo = res.data
					}
				});
			},
		},
		computed: {
			getPagesUrl() {
				switch(this.from) {
					case 'integral': return '/bundle/pages/exchange_order/exchange_order'
					default: return '/bundle/pages/user_order/user_order'
				}
			}
		}
	};
</script>
<style lang="scss">
	.pay-result {
		.contain {
			border-radius: 10rpx;
			padding: 0 30rpx 40rpx;
			position: relative;
			margin: 78rpx 20rpx 0;
			.tips-icon {
				width: 112rpx;
				height: 112rpx;
			}

			.header {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				top: -50rpx;
			}
			.info {
				padding-top: 180rpx;
			}
			.line {
				border-top: $-solid-border;
			}
			.plain {
				border: 1px solid $-color-primary;
			}
		}
	}
</style>