<template>
	<view>
		<u-popup :show="showconcern" mode="center" :round="10" @close="tuexchange" :closeOnClickOverlay="false">
			<view class="carmimodal">
				<view class="carmiclose" @click="tuexchange"><u-icon name="close-circle-fill" color="#fff"
						size="22"></u-icon></view>

				<view class="carmititle">长按识别二维码关注</view>

				<view v-if="qrcode" class="kf_qrcode tn-flex justify-center">
					<u--image :showLoading="true" radius="10" showMenuByLongpress :src="qrcode" width="280px"
						height="280px" @click="clickuimage(qrcode)"></u--image>
				</view>
				<view @click="exchange" class="carmiexchange">我已关注·不再提醒</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name: "wike-modal-qrcode",
		props: {
			showconcern: {
				type: Boolean,
				default: false
			},
			qrcode: {
				type: String,
				default: ''
			}
		},
		data() {
			return {

			};
		},

		methods: {
			exchange() {
				uni.setStorageSync('focuson', true);
				this.$emit('concernclose');
			},
			tuexchange() {
				this.$emit('concernclose');
			}
		}
	}
</script>

<style lang="scss">
	.carmimodal {
		width: 600rpx;
		border-radius: 20rpx;
		position: relative;

		.carmiclose {
			position: absolute;
			right: 15rpx;
			top: 15rpx;
		}

		.carmititle {
			background: linear-gradient(to right, $tc, $tc2);
			color: #fff;
			height: 120rpx;
			line-height: 120rpx;
			font-size: 38rpx;
			font-weight: bold;
			text-align: center;
			border-radius: 20rpx 20rpx 0 0;
			// margin-bottom: 60rpx;
		}

		.carmiinput {
			margin: 30rpx;
		}

		.carmiexchange {
			margin: 40rpx 30rpx;
			background: linear-gradient(to right, $tc, $tc2);
			color: #fff;
			border-radius: 60rpx;
			height: 90rpx;
			line-height: 90rpx;
			text-align: center;
			font-size: 32rpx;
		}

		.kf_qrcode {
			// margin-left: 200rpx;
			margin: 30rpx;
		}
	}
</style>