<template>
	<view class="container">
		<view class="content">
			<image class="close" src="../../static/close-gray.png" mode="" @click="close()"></image>
			<view class="top">
				<view class="title">卡券回收</view>
			</view>
			<view class="middle-content">
				<view class="title">卡片回收方法如下：</view>
				<view class="first">1.点击下方“确认回收”按钮，进入58同城小程序。</view>
				<view class="second">2.在58同城小程序的搜索框中输入“卡券”进行搜索,如下图：</view>
				<image class="third" src="../../static/recover-1.png" mode=""></image>
				<view class="four">3.在搜索结果中联系商家即可上门回收，如下图：</view>
				<image class="five" src="../../static/recover-2.png" mode=""></image>
			</view>
			<view class="buy-bottom" @click="goMini()">确认回收</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"AlertRecover",
		data() {
			return {
			};
		},
		props: {
			closeName: {
				type: String
			}
		},
		methods: {
			close() {
				this.$parent[this.closeName] = false
			},
			goMini() {
				wx.navigateToMiniProgram({
				  appId: 'wxc97b21c63d084d92',
				  path: '',
				  success(res) {
				    // 打开成功
					console.log(res);
				  },
				  fail(e) {
				  	console.log(e);
				  }
				})
				this.close()
			}
		}
	}
</script>

<style lang="scss" scoped>
.container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba($color: #000000, $alpha: 0.7);
	z-index: 99999;
	.content {
		margin: 50% 55rpx;
		border-radius: 16rpx;
		background-color: #FFFFFF;
		// width: 640rpx;
		height: 1018rpx;
		padding-bottom: 40rpx;
		position: relative;
		.close {
			position: absolute;
			top: 24rpx;
			right: 24rpx;
			height: 36rpx;
			width: 36rpx;
			z-index: 999;
		}
		.top {
			position: sticky;
			top: 0;
			right: 0;
			height: 154rpx;
			width: 100%;
			background: url(data:image/png;base64,[encoded data, 74228 characters]);
			background-size: 100% 100%;
			z-index: 99;
			.title {
				padding-top: 50rpx;
				font-size: 36rpx;
				font-weight: bolder;
				color: #FFFFFF;
				line-height: 44rpx;
				text-align: center;
			}
		}
		.middle-content {
			padding: 30rpx;
			font-size: 26rpx;
			color: #333333;
			line-height: 48rpx;
			height: 700rpx;
			overflow: auto;
			.title {
				font-size: 30rpx;
				color: #333333;
			}
			.first {
				margin-top: 30rpx;
			}
			.second {
				margin-top: 20rpx;
			}
			.third {
				margin-top: 10rpx;
				height: 602rpx;
				width: 100%;
			}
			.four {
				margin-top: 28rpx;
			}
			.five {
				margin-top: 6rpx;
				height: 742rpx;
				width: 100%;
			}
		}
		.buy-bottom {
			margin: 26rpx auto 40rpx;
			border-radius: 40rpx;
			height: 80rpx;
			width: 460rpx;
			background-color: #FF0520;
			line-height: 82rpx;
			text-align: center;
			color: #FFFFFF;
			font-size: 32rpx;
			z-index: 99999;
			margin-bottom: 50rpx;
		}
	}
}
</style>
