<template>
	<view class="page page-box">
		<view class="banner_inner"></view>

		<view class="head">
			<u-icon name="checkmark-circle-fill" size="56" color="#fff"></u-icon>
			<view class="text">支付成功</view>
			<view class="price"><text class="iconPrice">￥</text>{{ `${price} 元` }}</view>
		</view>

		<view class="icon">
			<image class="logo" :src="info.logo_url"></image>
		</view>

		<!-- <view class="goodsList">
			<view class="goodsTitle">推荐商品</view>
			<twoGoods :list="goodsList"></twoGoods>
		</view> -->
	</view>
</template>

<script>
	import twoGoods from '../compontents/twoGoods.vue';
	export default {
		components: {
			twoGoods
		},
		data() {
			return {
				price: "",
				info: {},
				goodsList: []
			}
		},
		onLoad({
			price,
			mch_id
		}) {
			this.price = price
			this.mch_id = mch_id
			this.init()
			this.fetchData()
		},
		methods: {
			async init() {
				const res = await this.$api.inPersonToPay.storeInfo({
					mch_id: this.mch_id,
				})

				this.info = {
					...res.data.store,
					...res.data.shop
				}
			},

			async fetchData(keyword = "1") {
				const res = await this.$api.goods.searchGoodsList({
					keywords: keyword
				})

				this.goodsList = res.data.rows
				console.log(res);
			},
		}
	}
</script>
<style lang="scss" scoped>
	.page {
		padding: 20rpx;
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		color: hsla(0, 0%, 100%, .9);
		overflow: auto;

		.icon {
			margin-bottom: 24rpx;
		}
	}

	.head {
		z-index: 2;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 60rpx;
		right: 0;
		left: 0;

		.text {
			margin: 24rpx 0;
		}

		.price {
			font-weight: 600;
			font-size: 60rpx;
			font-family: PingFang SC, Arial, 'Helvetica Neue', Helvetica, sans-serif;
			letter-spacing: 4rpx;

			.iconPrice {
				font-size: 32rpx;
			}
		}
	}

	.banner_inner {
		content: "";
		display: block;
		position: absolute;
		height: 40vh;
		top: 0;
		width: 150%;
		min-width: 780px;
		left: 50%;
		transform: translateX(-50%);
		background: linear-gradient(60deg, #18b566 0%, #71d5a1 100%);
		border-radius: 0 0 65% 65%;
		z-index: 0;
		overflow: hidden;
	}

	.logo {
		position: absolute;
		top: 40vh;
		left: 0;
		right: 0;
		transform: translateY(-50%);
		height: 180rpx;
		width: 180rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
		border-radius: 60rpx;
		box-shadow: 0 0.3125rem 1.25rem 0px rgba(166, 199, 251, 0.12);
	}

	.goodsTitle {

		position: relative;
		color: #000;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 20rpx;

		&::after {
			content: "";
			height: 6px;
			left: 0;
			right: 0;
			bottom: 6px;
			position: absolute;
			background: linear-gradient(60deg, #ff5740 0%, rgb(252, 143, 76) 100%);
			width: 100rpx;
			margin: 0 auto;
			opacity: 0.4;
		}
	}

	.goodsList {
		margin-top: calc(40vh + 100rpx);
		left: 0;
		right: 0;
	}
</style>
<style>
	page {
		background-color: #f8f8f8;
	}
</style>