新增新版私域引流

common/config.js

@@ -1,5 +1,5 @@
 // const debug = process.env.NODE_ENV == 'development' ? true : false;
-const debug = false;
+const debug = true; // false线上 true本地
 // #ifdef H5
 const proxyApi = "/api";
 // #endif

components/attract-popup.vue

@@ -0,0 +1,230 @@
+<!-- 私域引流 -->
+<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" :src="form.qrCode"></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)) {
+				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>

components/drainage.vue

@@ -1,40 +1,19 @@
 <template>
 	<view>
 		<!-- 私域引流 -->
-    <up-popup
+		<up-popup :show="show" mode="center" round="16rpx" closeOnClickOverlay @close="close" :safeAreaInsetBottom="false">
-      :show="show"
-      mode="center"
-      round="16rpx"
-      closeOnClickOverlay
-      @close="close"
-      :safeAreaInsetBottom="false"
-    >
 			<view class="preview-box">
 				<view class="u-flex" style="align-items: stretch">
-          <view
+					<view class="u-flex-1 u-p-r-24 u-flex u-flex-col" style="align-items: start; justify-content: space-between">
-            class="u-flex-1 u-p-r-24 u-flex u-flex-col"
-            style="align-items: start; justify-content: space-between"
-          >
 						<view>
-              <view class="font-14 font-bold color-333">{{
+							<view class="font-14 font-bold color-333">{{ drainageConfig.title }}</view>
-                drainageConfig.title
+							<view class="u-m-t-16 font-12 color-666">{{ drainageConfig.content }}</view>
-              }}</view>
-              <view class="u-m-t-16 font-12 color-666">{{
-                drainageConfig.content
-              }}</view>
 						</view>
 
-            <view class="color-999 font-12 u-m-t-16">{{
+						<view class="color-999 font-12 u-m-t-16">{{ drainageConfig.note }}</view>
-              drainageConfig.note
-            }}</view>
 					</view>
 
-          <image
+					<image :show-menu-by-longpress="true" :src="drainageConfig.qrCode" style="width: 240rpx; height: 240rpx" mode="aspectFit"></image>
-            :show-menu-by-longpress="true"
-            :src="drainageConfig.qrCode"
-            style="width: 240rpx; height: 240rpx"
-            mode="aspectFit"
-          ></image>
 				</view>
 
 				<view class="close" @click="close">
@@ -46,26 +25,26 @@
 </template>
 
 <script setup>
-import * as drainageConfigApi from "@/common/api/market/drainageConfig.js";
+import * as drainageConfigApi from '@/common/api/market/drainageConfig.js';
-import { ref, reactive, computed, watch, onMounted } from "vue";
+import { ref, reactive, computed, watch, onMounted } from 'vue';
 
 const showPreview = defineModel({
 	type: Boolean,
-  default: false,
+	default: false
 });
 
 const show = ref(false);
-const emit = defineEmits(["close"]);
+const emit = defineEmits(['close']);
 
 function close() {
 	show.value = false;
-  emit("close");
+	emit('close');
 }
 const drainageConfig = ref({});
 async function getDrainageConfig() {
-  const shopId = uni.cache.get("shopId");
+	const shopId = uni.cache.get('shopId');
 	const drainageConfigRes = await drainageConfigApi.config({
-    shopId: shopId,
+		shopId: shopId
 	});
 	drainageConfig.value = drainageConfigRes;
 	if (drainageConfig.value.isEnable) {

components/order-finish-modal.vue

@@ -3,41 +3,47 @@
 		<!-- 生成公众号二维码 -->
 		<we-qrcode @generate="(e) => qrcodeResult(e)"></we-qrcode>
 
-    <officialAccount
+		<officialAccount followIndex="order" :wechatAcQrcode="wechatAcQrcode" v-if="showOfficialAccount" @close="modelClose($event, 'officialAccount')" />
-      followIndex="order"
+		<!-- <Drainage  v-model="showDrainage" @close="modelClose($event, 'drainage')" /> -->
-      :wechatAcQrcode="wechatAcQrcode"
+		<attractPopup type="order" ref="attractPopupRef" />
-      v-if="showOfficialAccount"
-      @close="modelClose($event, 'officialAccount')"
-    />
-    <Drainage  v-model="showDrainage" @close="modelClose($event, 'drainage')" />
 	</view>
 </template>
 <script setup>
-import weQrcode from "@/components/wechat-ac-qrcode.vue";
+import weQrcode from '@/components/wechat-ac-qrcode.vue';
 
-import { ref, watch, computed, reactive, toRaw } from "vue";
+import attractPopup from '@/components/attract-popup.vue';
-import officialAccount from "@/components/official-account.vue";
+import { ref, watch, computed, reactive, toRaw } from 'vue';
-import Drainage from "@/components/drainage.vue";
+import officialAccount from '@/components/official-account.vue';
+import Drainage from '@/components/drainage.vue';
+
+const attractPopupRef = ref(null);
 
 const showDrainage = defineModel({
 	type: Boolean,
-  default: false,
+	default: false
 });
+
+watch(showDrainage, (newVal, oldVal) => {
+	console.log('modelValue 变化：', { newVal, oldVal });
+	if (newVal == true) {
+		attractPopupRef.value.configAjax();
+	}
+});
+
 const showOfficialAccount = ref(false);
 
 function modelClose(e, type) {
-  console.log("modelClose", type);
+	console.log('modelClose', type);
-  if (type == "drainage") {
+	if (type == 'drainage') {
 		showOfficialAccount.value = true;
 		return;
 	}
 }
-const wechatAcQrcode = ref("");
+const wechatAcQrcode = ref('');
-const userinfo = uni.cache.get("userInfo") || {};
+const userinfo = uni.cache.get('userInfo') || {};
-const codeVal = ref(userinfo.wechatAcQrcode || "");
+const codeVal = ref(userinfo.wechatAcQrcode || '');
-console.log("codeVal", codeVal.value);
+console.log('codeVal', codeVal.value);
 function qrcodeResult(e) {
 	wechatAcQrcode.value = e;
 }
 </script>
-

pages/index/indexs.vue

@@ -2,23 +2,20 @@
 	<view class="content min-page bg-f7">
 		<view class="contentbox">
 			<template v-if="shopExtend.length">
-				<image class="bg" :src="shopExtend[0].value" mode="aspectFill"
+				<image class="bg" :src="shopExtend[0].value" mode="aspectFill" v-if="!isJsonArrayString(shopExtend[0].value)"></image>
-					v-if="!isJsonArrayString(shopExtend[0].value)"></image>
 				<swiper class="swiper" autoplay circular v-else>
-					<swiper-item class="swiper-item" v-for="item in JSON.parse(shopExtend[0].value)">
+					<swiper-item class="swiper-item" v-for="(item, index) in JSON.parse(shopExtend[0].value)" :key="index">
 						<image class="swiper-bg" :src="item"></image>
 					</swiper-item>
 				</swiper>
 			</template>
-
 		</view>
-
 		<view class="userInfo u-flex">
 			<up-avatar size="61px" :default-url="imgs.defaultAvatar"></up-avatar>
 			<view class="u-flex-1 u-flex u-row-between u-p-l-16 u-p-r-16">
 				<view>
 					<view class="u-flex">
-						<view class="u-font-32 color-333 font-bold u-line-1" style="max-width: 320rpx;">HI，欢迎回来</view>
+						<view class="u-font-32 color-333 font-bold u-line-1" style="max-width: 320rpx">HI，欢迎回来</view>
 						<view class="vip" v-if="shopUserInfo.isVip">会员身份</view>
 					</view>
 
@@ -26,7 +23,6 @@
 						<text>优惠券：{{ allConfig.couponNum }}</text>
 						<text class="u-m-l-22">积分：{{ allConfig.pointNum }}</text>
 					</view>
-
 				</view>
 				<image :src="imgs.code" class="code"></image>
 			</view>
@@ -52,8 +48,6 @@
 					<view class="desc">-自助下单 快人一步-</view>
 				</view>
 				<image :src="imgs.big_orderFood" class="big_img"></image>
-
-
 			</view>
 
 			<view class="groupBuying" v-if="allConfig.group">
@@ -90,10 +84,9 @@
 				<view class="title">股东共享</view>
 				<view class="desc">邀请好友，获得佣金</view>
 			</view>
-
 		</view>
 
-		<view style="height: 90px;"></view>
+		<view style="height: 90px"></view>
 		<u-popup :show="popupShow" :safe-area-inset-bottom="false" mode="center" @close="popupShow = false">
 			<view class="popup-content">
 				<view class="header-wrap">
@@ -112,27 +105,20 @@
 				</view>
 			</view>
 		</u-popup>
+		<!-- 私域引流弹窗 -->
+		<attractPopup type="home" ref="attractPopupRef" />
 	</view>
 </template>
 
 <script setup>
-	import {
+import attractPopup from '@/components/attract-popup.vue';
-		homeData
+import { homeData } from '@/common/api/market/index.js';
-	} from '@/common/api/market/index.js'
+import { getMemberConfig, getRechargeConfig } from '@/common/api/index/index.js';
-	import {
+import { ref, reactive, defineProps, defineEmits, onMounted } from 'vue';
-		getMemberConfig,
+import { isJsonArrayString } from '@/utils/util.js';
-		getRechargeConfig,
+
-	} from "@/common/api/index/index.js";
+const attractPopupRef = ref(null);
-	import {
+
-		ref,
-		reactive,
-		defineProps,
-		defineEmits,
-		onMounted
-	} from "vue";
-	import {
-		isJsonArrayString
-	} from "@/utils/util.js";
 const imgs = {
 	recharge: 'https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/4/2f22c0ced494497e8d6f981832b191c9.png',
 	share: 'https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/4/bcb8d461e96d445ba40256079da775b3.png',
@@ -144,33 +130,29 @@
 	points: 'https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/4/df0758f7b86449f89f882e50226e17c7.png',
 	code: 'https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/4/044dcaf913054f03a9db7983f048b1e6.png',
 	defaultAvatar: 'https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/4/b98d2c7110e847f996e8d7ba4342f0a5.png'
-	}
+};
 // 定义接收的属性
 const props = defineProps({
 	shopExtend: {
 		type: Array,
-			default: [],
+		default: []
-		},
+	}
 });
 
 function toFenxiao() {
 	uni.navigateTo({
-			url: "/distribution/shop-detail/index?shopId=" + uni.cache.get("shopId"),
+		url: '/distribution/shop-detail/index?shopId=' + uni.cache.get('shopId')
 	});
 }
 
 function toIntegralMall() {
 	uni.navigateTo({
-			url: "/scoreShop/index/index?shopId=" + uni.cache.get("shopId"),
+		url: '/scoreShop/index/index?shopId=' + uni.cache.get('shopId')
 	});
 }
 
-	import {
+import { productStore } from '@/stores/user.js';
-		productStore
+import { onShow } from '@dcloudio/uni-app';
-	} from "@/stores/user.js";
-	import {
-		onShow
-	} from '@dcloudio/uni-app';
 
 // 显示弹窗
 const popupShow = ref(false);
@@ -181,10 +163,10 @@
 // 预点单
 function beforehandOrderHandle() {
 	popupShow.value = false;
-		uni.cache.set("dinersNum", 1);
+	uni.cache.set('dinersNum', 1);
-		uni.cache.set("tableCode", shopUserInfo.id);
+	uni.cache.set('tableCode', shopUserInfo.id);
 	uni.navigateTo({
-			url: "/pages/product/index?type=beforehand",
+		url: '/pages/product/index?type=beforehand'
 	});
 }
 
@@ -197,49 +179,49 @@
 
 const memberindex = (url) => {
 	uni.pro.navigateTo(url, {
-			shopId: uni.cache.get("shopId"),
+		shopId: uni.cache.get('shopId'),
-			type: "index",
+		type: 'index'
 	});
 };
-	const shopUserInfo = reactive({})
+const shopUserInfo = reactive({});
-	Object.assign(shopUserInfo, uni.cache.get("shopUserInfo") || {})
+Object.assign(shopUserInfo, uni.cache.get('shopUserInfo') || {});
 
 function tomember() {
 	if (isMember.value) {
-			const shopId = uni.cache.get("shopId");
+		const shopId = uni.cache.get('shopId');
 		if (!shopUserInfo.isVip) {
 			uni.navigateTo({
-					url: "/user/vip/buy-vip?shopId=" + shopId,
+				url: '/user/vip/buy-vip?shopId=' + shopId
 			});
 			return;
 		}
 		uni.navigateTo({
-				url: "/user/vip/vip?shopId=" + shopId,
+			url: '/user/vip/vip?shopId=' + shopId
 		});
 	} else {
 		uni.showToast({
-				title: "暂未开放",
+			title: '暂未开放',
-				icon: "none",
+			icon: 'none'
 		});
 	}
 }
 
 function toCharge() {
 	if (isCharge.value) {
-			const shopId = uni.cache.get("shopId");
+		const shopId = uni.cache.get('shopId');
 		uni.navigateTo({
-				url: "/pages/user/member/czzx?shopId=" + shopId,
+			url: '/pages/user/member/czzx?shopId=' + shopId
 		});
 	} else {
 		uni.showToast({
-				title: "暂未开放",
+			title: '暂未开放',
-				icon: "none",
+			icon: 'none'
 		});
 	}
 }
 const getQueryString = (url, name) => {
 	//解码
-		var reg = new RegExp("(^|&|/?)" + name + "=([^&|/?]*)(&|/?|$)", "i");
+	var reg = new RegExp('(^|&|/?)' + name + '=([^&|/?]*)(&|/?|$)', 'i');
 	var r = url.substr(1).match(reg);
 	if (r != null) {
 		return r[2];
@@ -253,10 +235,10 @@
 async function getVipConfig() {
 	try {
 		const res1 = await getMemberConfig({
-				shopId: uni.cache.get("shopId")
+			shopId: uni.cache.get('shopId')
 		});
 		const res2 = await getRechargeConfig({
-				shopId: uni.cache.get("shopId")
+			shopId: uni.cache.get('shopId')
 		});
 
 		isMember.value = +res1.memberConfig.isOpen;
@@ -266,7 +248,6 @@
 	}
 }
 
-
 const allConfig = reactive({
 	takeout: 0,
 	group: 0,
@@ -274,21 +255,21 @@
 	distribution: 0,
 	couponNum: 0,
 	pointNum: 0
-	})
+});
 
 function getHomeData() {
-		homeData().then(res => {
+	homeData().then((res) => {
-			Object.assign(allConfig, res)
+		Object.assign(allConfig, res);
-		})
+	});
 }
 onMounted(() => {
-		updateData()
+	updateData();
 });
 
 function updateData() {
-		Object.assign(shopUserInfo, uni.cache.get("shopUserInfo") || {})
+	Object.assign(shopUserInfo, uni.cache.get('shopUserInfo') || {});
 	getVipConfig();
-		getHomeData()
+	getHomeData();
 }
 defineExpose({
 	updateData
@@ -469,11 +450,11 @@
 	align-items: center;
 	align-self: stretch;
 	border-radius: 24rpx;
-		background: #FFF;
+	background: #fff;
 	transform: translateY(-36rpx);
 
 	.vip {
-			background: #FA720A;
+		background: #fa720a;
 		font-size: 24rpx;
 		color: #ffffff;
 		padding: 6rpx 10rpx;
@@ -487,8 +468,6 @@
 	}
 }
 
-
-
 .new-menus-box {
 	margin: 0 16rpx 34rpx 16rpx;
 
@@ -518,10 +497,11 @@
 			.line {
 				width: 2rpx;
 				height: 156rpx;
-					background: #EDEDED;
+				background: #ededed;
 			}
 
-				.takeout {}
+			.takeout {
+			}
 		}
 
 		&.layout1 {
@@ -550,7 +530,7 @@
 
 .groupBuying {
 	padding: 16rpx 38rpx;
-		border-top: 2rpx solid #EDEDED;
+	border-top: 2rpx solid #ededed;
 	background-color: #fff;
 	display: flex;
 	justify-content: space-between;
@@ -601,7 +581,7 @@
 		flex-direction: column;
 		align-items: center;
 		border-radius: 18rpx;
-			background: #FFF;
+		background: #fff;
 
 		.img {
 			width: 39px;

utils/util.js

@@ -476,3 +476,23 @@ export function includesString(target, searchStr, options = {}) {
 	// 4. 执行包含判断
 	return processedTarget.includes(processedSearch);
 }
+
+/**
+ * 校验一维基础类型数组A的元素是否存在于数组B（支持部分/全部存在，默认全部存在）
+ * @param {Array<string|number|boolean>} arrA - 待校验的一维数组
+ * @param {Array<string|number|boolean>} arrB - 参考的一维数组
+ * @param {boolean} [partial=false] - 是否校验「部分存在」（true=部分存在，false=全部存在，默认false）
+ * @returns {boolean} 校验结果
+ */
+export function checkArrayElementsExist(arrA, arrB, partial = false) {
+	// 边界处理：空数组特殊逻辑
+	if (arrA.length === 0) return !partial
+
+	// 转Set优化查找性能（一维数组核心优化）
+	const bSet = new Set(arrB)
+
+	// 核心逻辑：partial=true → some（部分存在），partial=false → every（全部存在）
+	return partial ?
+		arrA.some(item => bSet.has(item)) :
+		arrA.every(item => bSet.has(item))
+}