cashier_wx/components/attract-popup.vue

<!-- 私域引流 -->
<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">{{ form.title }}</view>
				<view class="img_wrap">
					<image class="img" :show-menu-by-longpress="true" :src="form.qrCode" @click=""></image>
				</view>
				<view class="intro">
					{{ form.content }}
				</view>
				<view class="foot">
					{{ form.note }}
				</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 { config } from '@/common/api/market/drainageConfig.js';
import { checkArrayElementsExist } from '@/utils/util.js';

const shopInfo = ref('');

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

const show = ref(false);
const form = ref({});
const drainageHomeKey = 'drainageHome';
function closeHandle() {
	switch (props.type) {
		case 'home':
			// 在首页关闭
			switch (form.value.homeType) {
				case 'only':
					// 仅显示1次
					uni.cache.set(drainageHomeKey, {
						value: form.value.homeType
					});
					break;
				case 'day':
					// 每天显示1次
					uni.cache.set(drainageHomeKey, {
						value: form.value.homeType,
						time: dayjs().format('YYYY-MM-DD')
					});
					break;
				case 'every':
					// 每次onload都显示
					uni.cache.set(drainageHomeKey, {
						value: form.value.homeType
					});
					break;
				default:
					break;
			}
			break;
		case 'order':
			break;
		default:
			break;
	}
	show.value = false;
}

// 显示逻辑
function showHandle() {
	switch (props.type) {
		case 'home':
			// 首页
			if (form.value.homeEnable == 0) return;
			let drainage = uni.cache.get(drainageHomeKey);

			console.log('drainage', drainage);

			if (!drainage || form.value.homeType != drainage.value) {
				uni.cache.set(drainageHomeKey, '');
				show.value = true;
			} else {
				switch (drainage.value) {
					case 'only':
						// 存在则证明已经显示过一次，则不在显示
						break;
					case 'day':
						// 判断是不是用一天，同一天不显示，不是同一天则显示
						let localDay = drainage.time;
						let currentDay = dayjs().format('YYYY-MM-DD');
						if (localDay != currentDay) {
							show.value = true;
						}
						break;
					case 'every':
						// 页面每次onload会触发显示
						show.value = true;
						break;
					default:
						break;
				}
			}
			break;
		case 'order':
			// 订单 只要包含用餐类型就显示
			let shopMode = shopInfo.value.eatModel.split(',');
			if (checkArrayElementsExist(shopMode, form.value.orderType, true) && form.value.orderEnable) {
				show.value = true;
			}
			break;
		default:
			break;
	}
}

// 获取私域引流配置
async function configAjax() {
	try {
		const shopId = uni.cache.get('shopId');
		const res = await config({ shopId: shopId });
		form.value = res;
		showHandle();
	} catch (error) {
		console.log(error);
	}
}

defineExpose({
	configAjax
});

onMounted(() => {
	shopInfo.value = uni.cache.get('shopInfo');
	if (props.type == 'home') {
		configAjax();
	}
});
</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>