新增新版私域引流
This commit is contained in:
230
components/attract-popup.vue
Normal file
230
components/attract-popup.vue
Normal file
@@ -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>
|
||||
Reference in New Issue
Block a user