<!-- 私域引流 -->
<template>
	<u-popup :show="show" mode="center" :safeAreaInsetBottom="false">
		<view class="new_preview">
			<view class="header">{{ shopInfo.shopName }}</view>
			<view class="content">
				<view class="title">{{ group.title }}</view>
				<view class="img_wrap">
					<image class="img" :show-menu-by-longpress="true" :src="group.groupUrl" @click=""></image>
				</view>
				<view class="intro">
					{{ group.content }}
				</view>
				<view class="foot">
					如果长按不能识别，可截图或保存二维码图片至相册，通过微信扫码入群。
				</view>
			</view>
			<view class="close" @click="closeHandle">
				<u-icon name="close" color="#fff" size="14"></u-icon>
			</view>
		</view>
	</u-popup>
</template>

<script setup>
import dayjs from 'dayjs';
import { ref, onMounted } from 'vue';
import { centerConfig,distributionEditIn } from '@/common/api/market/distribution.js';
import { checkArrayElementsExist } from '@/utils/util.js';

const shopInfo = defineModel('shopInfo');

const props = defineProps({
	type: {
		type: String,
		default: 'home' // 调用的位置 home首页 order支付成功后
	},
	group:{
		type:Object,
		default:()=>{}
	}
});

const show = defineModel(false) ;
function closeHandle() {
	const shopUserInfo=uni.cache.get('shopUserInfo')
	distributionEditIn({
		shopUserId:shopUserInfo.id
	})
	show.value = false;
}




onMounted(() => {
	shopInfo.value = uni.cache.get('shopInfo');
});
</script>

<style scoped lang="scss">
.new_preview {
	--bg: #3f3b37;
	--color: #f6dfc4;
	--borderColor: #f6dfc45b;
	width: 90vw;
	background-color: var(--bg);
	border-radius: 4px;
	position: relative;
	.close {
		--size: 70upx;
		width: var(--size);
		height: var(--size);
		border-radius: 50%;
		background-color: var(--bg);
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		bottom: calc(var(--size) * -1 - 20upx);
		left: 50%;
		margin-left: calc(var(--size) / 2 * -1);
	}

	.header {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 16px;
		color: var(--color);
		height: 50px;
		border-bottom: 1px dashed var(--borderColor);
	}

	.content {
		padding-bottom: 14px;

		.title {
			font-size: 14px;
			color: var(--color);
			height: 50px;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.img_wrap {
			display: flex;
			justify-content: center;

			.img {
				--size: 220px;
				width: var(--size);
				height: var(--size);
				border-radius: 4px;
			}
		}

		.intro {
			height: 40px;
			font-size: 14px;
			color: var(--color);
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0 14px;
		}

		.foot {
			height: 40px;
			color: var(--borderColor);
			font-size: 14px;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0 14px;
			text-align: center;
		}
	}
}
</style>
