<template>
	<view class="container" :style="[theme]">
		<view class="header-wrap">
			<image class="icon" src="https://ointmentweapp.oss-cn-beijing.aliyuncs.com/success.png" mode="widthFix">
			</image>
			<text class="t" v-if="info.status == 0">支付失败</text>
			<text class="t" v-if="info.status == 1">成功支付</text>
		</view>
		<view class="status-wrap" v-if="info.status == 1">
			<view class="line"></view>
			<view class="info-wrap">
				<view class="card">
					<view class="num">
						<text class="i">￥</text>
						<text class="n">{{ info.money || '-' }}</text>
					</view>
					<view class="row">
						<text>订单编号：{{ info.out_trade_no || '-' }}</text>
					</view>
					<view class="row">
						<text>下单时间：{{ info.updatetime || '-'}}</text>
					</view>
					<view class="row">
						<text>支付方式：{{ info.pay_type || '-' }}</text>
					</view>
				</view>
				<view class="btn-wrap">
					<view class="btn" @click="toOrder">
						<text>查看订单</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderId: '',
				info: ''
			};
		},
		computed: {
			theme() {
				return this.$store.getters.theme
			},
		},

		onReady() {
			//动态修改状态栏的颜色
			uni.setNavigationBarColor({
				backgroundColor:this.theme.cartpieces
			})
		},
		async onLoad(e) {
			console.log(e)
			this.info = await this.api.shoppingorderordershoppingorderstatus({
				order_id: e.id
			})
		},
		methods: {
			toOrder() {
				uni.pro.navigateTo('mall/order/index', {
					e: 0
				})
			},
		}
	};
</script>
<style>
	page {
		background-color: #f9f9f9;
	}
</style>
<style scoped lang="scss">
	.header-wrap {
		padding: 50upx 0 94upx 0;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: var(--bg-color-button);

		.icon {
			$size: 98upx;
			width: 98rpx;
			height: 93rpx;
			margin-right: 42upx;
		}

		.t {
			font-size: 40upx;
			font-weight: bold;
			color: #fff;
		}
	}

	.status-wrap {
		padding: 0 28upx;
		margin-top: -50upx;
		$h: 20upx;

		.line {
			height: $h;
			border-radius: $h;
			background-color: 79, 81, 104;
			position: relative;
			overflow: hidden;

			&::after {
				content: '';
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				background-color: rgba(0, 0, 0, 0.3);
			}
		}

		.info-wrap {
			padding: 0 32upx;
			margin-top: $h / 2 * -1;
			position: relative;

			.card {
				background-color: #fff;
				padding: 28upx 64upx 64upx;
				border-radius: 0 0 28upx 28upx;
				position: relative;
				overflow: hidden;

				&::before {
					content: '';
					width: 100%;
					height: 10px;
					box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
					position: absolute;
					top: -10px;
					left: 0;
				}

				.num {
					display: flex;
					align-items: flex-end;
					justify-content: center;

					.i {
						font-size: 24upx;
						position: relative;
						bottom: 12upx;
					}

					.n {
						font-size: 44upx;
						font-weight: bold;
					}
				}

				.row {
					padding-top: 28upx;
					font-size: 28upx;
					color: #999;
				}
			}

			.btn-wrap {
				padding: 64upx 0;
				display: flex;
				justify-content: center;

				.btn {
					width: 296upx;
					height: 70upx;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #fff;
					background: var(--bg-color-button);
					border-radius: 46rpx;
					opacity: 1;
					font-size: 28upx;
					font-weight: bold;
				}
			}
		}
	}
</style>