<template>
	<view class="mine-pay-result">
		<view class="space-body"></view>
		<view class="flex-center flex-column">
			<image mode="aspectFill" lazy-load class="result-img" src="/static/image/mine/pay-result.png"></image>
			<view class="f-title c-title text-bold mt-lg">订单支付成功</view>
			<view class="f-paragraph c-caption mt-sm">您可以在我的订单中查询订单详情或跟踪物流信息</view>
		</view>
		<view class="btn-list flex-center flex-column">
			<view @tap.stop="goDetail" class="btn-item flex-center f-sm-title c-base radius"
				:style="{background:primaryColor,border: `1rpx solid ${primaryColor}`}">查看订单</view>
			<view @tap.stop="goHome" class="btn-item flex-center f-sm-title c-base mt-md radius"
				:style="{color:primaryColor,border: `1rpx solid ${primaryColor}`}">返回首页</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from "vuex"
	export default {
		components: {},
		data() {
			return {
				options: {},
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			userInfo: state => state.user.userInfo,
		}),
		onLoad(options) {
			this.options = options
			this.getUserInfo()
		},
		methods: {
			...mapActions(['getUserInfo']),
			goHome() {
				let {
					type
				} = this.options
				let url = `/pages/home`
				this.$util.goUrl({
					url,
					openType: 'switchTab'
				})
			},
			goDetail() {
				let {
					type
				} = this.options
				let tab = type != 'shop' ? 1 : 2
				let url = `/${type}/pages/order/list?tab=${tab}`
				this.$util.goUrl({
					url,
					openType: 'redirectTo'
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #fff;
	}

	.mine-pay-result {
		.result-img {
			width: 204rpx;
			height: 204rpx;
		}

		.btn-list {
			margin-top: 100rpx;

			.btn-item {
				width: 580rpx;
				height: 88rpx;
				transform: rotateZ(360deg);
			}
		}
	}
</style>
