<template>
	<view class="min-page bg-f7 u-font-28 color-333">
		<up-navbar title="兑换成功" bgColor="transparent" leftIconColor="#333" @leftClick="back()"
			titleStyle="color:#333"></up-navbar>
		<view class="content">
			<view class="bg" :style="{ backgroundImage: `url(${imgs.bg})` }">
				<image :src="imgs.success" class="success"></image>
				<view class="u-font-40 font-700">兑换成功</view>
				<view class="u-font-32 font-700">{{item.pointsGoodsName}}</view>
				<view class="u-m-t-14" v-if="item.goodsCategory!='优惠券'">需前往店铺自行兑换领取</view>
				<view class="u-m-t-14" v-else>优惠券直接到账您的账户中</view>
			</view>
			<view class="info u-flex u-flex-col">
				<view class="u-p-22">
					<text class="color-666">兑换商品：</text>
					<text>{{item.pointsGoodsName}}</text>
				</view>
				<view class="u-p-22">
					<text class="color-666">兑换数量：</text>
					<text>{{item.number}}份</text>
				</view>
				<view class="u-p-22">
					<text class="color-666">消耗积分：</text>
					<text>{{item.spendPoints}}</text>
				</view>
				<view class="u-p-22" v-if="item.extraPaymentAmount">
					<text class="color-666">支付金额：</text>
					<text>{{item.extraPaymentAmount}}</text>
				</view>
				<view class="u-p-22">
					<text class="color-666">下单时间：</text>
					<text>{{item.createTime}}</text>
				</view>
				<view class="u-p-22">
					<text class="color-666">订单号：</text>
					<text>：{{item.orderNo}}</text>
				</view>
			</view>
			<view class="u-flex bottom u-row-center">
				<view class="back btn" @click="back">继续兑换</view>
				<view class="look btn" @click="lookOrder">查看订单</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	const imgs = {
		bg: "https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/2/b625560a5b75418c9e643841f8674a0c.png",
		success: "https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/2/c2f0865efb444de58ff0d8bb3a51d300.png",
	};

	function back() {
		const pages = getCurrentPages();
		if(pages.length<2){
			uni.redirectTo({
				url: '/scoreShop/index/index?shopId=' + item.shopId
			})
		}else{
			uni.navigateBack();
		}
	}

	function lookOrder() {
		uni.redirectTo({
			url: '/scoreShop/order/index?shopId=' + item.shopId
		})
	}
	const item = reactive({

	})
	onLoad(opt => {
		const exchange_goods_success_data = uni.getStorageSync('exchange_goods_success')
		Object.assign(item, exchange_goods_success_data)

	})
</script>

<style lang="scss" scoped>
	.content {
		background: linear-gradient(180deg, #f5cd82 0%, rgba(247, 219, 165, 0) 100%);
		height: 670rpx;
		$color: #9c571f;

		.bg {
			width: 100%;
			height: 586rpx;
			background-size: cover;
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			align-items: center;
			padding-bottom: 26rpx;
			color: $color;

			.success {
				width: 310rpx;
				height: 206rpx;
			}
		}

		.info {
			padding-left: 174rpx;
			padding-right: 32rpx;
		}
	}

	.bottom {
		gap: 48rpx;
		margin-top: 44rpx;

		.btn {
			padding: 14rpx 76rpx;
			border-radius: 100rpx;
			font-size: 32rpx;
			border: 1px solid transparent;

			&.back {
				border-color: $my-main-color;
				color: $my-main-color;
			}

			&.look {
				background-color: $my-main-color;
				border-color: $my-main-color;
				color: #fff;
			}
		}
	}
</style>