<template>
	<view class="container">
		<view class="pay-icon">
			<view class="iconfont iconqueding"></view>
		</view>
		<view class="pay-title">支付成功</view>
		<view class="pay-text">您已支付成功，您所购买的商品正在向您飞奔， 请耐心等待！</view>
		<view class="pay-handle">
			<u-button type="success" shape="circle" :ripple="true" @click="goToOrderList()" class="button1">查看订单</u-button>
			<u-button type="success" shape="circle" :ripple="true" :hair-line="false" :plain="true" @click="goToIndex()" class="button2">返回首页</u-button>
		</view>
	</view>
</template>

<script>
	const NET = require('@/utils/request')
	const API = require('@/config/api')
	export default {
		data() {
			return {}
		},
		onLoad(options) {},
		methods: {
			//  查看订单
			goToOrderList() {
				uni.navigateTo({
					url: '/pagesMain/orderList?type=1'
				});
			},
			//  返回首页
			goToIndex() {
				uni.switchTab({
					url: '/pages/index/home'
				});
			},
		}
	}
</script>

<style lang="less" scoped>
	page {
		width: 100%;
		height: 100%;
	}

	.container {
		width: 100%;
		height: 100%;
		background-color: #F3F3F3;
		position: absolute;

		.pay-icon {
			width: 100%;
			height: 120px;
			margin-top: 50px;
			float: left;
			text-align: center;

			.iconqueding {
				color: #52A63A;
				font-size: 120px;
				font-size: 240px;
				line-height: 120px;
			}
		}

		.pay-title {
			width: 100%;
			height: 20px;
			float: left;
			margin: 16px 0 20px 0;
			font-size: 16px;
			font-family: PingFang SC;
			color: #333333;
			line-height: 20px;
			text-align: center;
		}

		.pay-text {
			width: 100%;
			float: left;
			box-sizing: border-box;
			padding: 0 60px;
			font-size: 13px;
			font-family: PingFang SC;
			color: #666666;
			line-height: 22px;
			text-align: center;
		}

		.pay-handle {
			width: 230px;
			height: 100px;
			float: left;
			position: absolute;
			bottom: 60px;
			left: 50%;
			transform: translateX(-50%);

			.button1 {
				// background-color: #52A63A;
				margin-bottom: 12px;
				float: left;
				width: 100%;
				height: 34px;
			}

			.button2 {
				color: #52A63A !important;
				border-color: #52A63A !important;
				background-color: #F3F3F3 !important;
				float: left;
				width: 100%;
				height: 34px;
			}
		}
	}
</style>