czg_team/cashier-web
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1.优化角色模板 2.增加新版私域引流页面

Browse Source
This commit is contained in:
gyq
2025-12-15 14:56:29 +08:00
parent dd2ca5062f
commit fe200990e0
8 changed files with 225 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

169
src/views/marketing_center/drainage/index.vue
View File

@@ -2,10 +2,10 @@
<template>
<div class="gyq_container">
<div class="gyq_content">
<headerCard icon="syyl" name="私域引流" intro="可设置用户下单成功后的群二维码" showSwitch v-model:isOpen="form.isEnable" />
<headerCard icon="syyl" name="私域引流" intro="可设置用户下单成功后的群二维码" />
<div class="form_content">
<div class="left">
<div class="preview">
<!-- <div class="preview">
<div class="info">
<div class="top">
<div class="title">{{ form.title || defaultTitle }}</div>
@@ -16,34 +16,71 @@
<div class="img_wrap">
<el-image :src="form.qrCode" style="width: 100%;height: 100%;"></el-image>
</div>
</div> -->
<div class="new_preview">
<div class="header">{{ shopInfo.shopName }}</div>
<div class="content">
<div class="title">{{ form.title }}</div>
<div class="img_wrap">
<div class="img">
<el-image :src="form.qrCode" style="width: 100%;height: 100%;border-radius: 4px;"></el-image>
</div>
</div>
<div class="intro">
{{ form.content }}
</div>
<div class="foot">
{{ form.note }}
</div>
</div>
</div>
</div>
<div class="form">
<el-form ref="formRef" :model="form" :rules="rules" label-position="right" label-width="120px">
<el-form-item label="可使用类型" prop="useType">
<el-checkbox-group v-model="form.useType">
<el-checkbox value="dine-in" label="堂食" />
<el-checkbox value="take-out" label="外带" />
<el-checkbox value="take-away" label="外卖" />
<el-checkbox value="post" label="配送" />
</el-checkbox-group>
</el-form-item>
<el-form-item label="群二维码" prop="qrCode">
<single-image-upload style="width: 120px; height: 120px" v-model="form.qrCode"></single-image-upload>
</el-form-item>
<el-form-item label="模块标题" prop="title">
<el-input :placeholder="defaultTitle" :maxlength="20" v-model.trim="form.title"></el-input>
<el-input :placeholder="defaultTitle" :maxlength="20" v-model.trim="form.title"
style="width: 300px;"></el-input>
</el-form-item>
<el-form-item label="模块内容">
<div class="textarea">
<el-input type="textarea" :rows="4" :maxlength="50" placeholder="请输入内容"
v-model.trim="form.content"></el-input>
<span class="num">{{ form.content.length }}/50</span>
<span class="num">{{ form.content.length }}/20</span>
</div>
</el-form-item>
<el-form-item label="模块提示语">
<el-input :placeholder="defaultNote" :maxlength="20" v-model.trim="form.note"></el-input>
<div class="tips">{{ defaultNote }}</div>
</el-form-item>
<el-form-item label="支付完成弹窗">
<el-switch v-model="form.orderEnable" :active-value="1" :inactive-value="0"></el-switch>
</el-form-item>
<el-form-item label="可使用类型" prop="orderType">
<el-checkbox-group v-model="form.orderType">
<el-checkbox value="dine-in" label="堂食" :disabled="!form.orderEnable" />
<el-checkbox value="take-out" label="外带" :disabled="!form.orderEnable" />
<el-checkbox value="take-away" label="外卖" :disabled="!form.orderEnable" />
<el-checkbox value="post" label="配送" :disabled="!form.orderEnable" />
</el-checkbox-group>
</el-form-item>
<el-form-item label="首页弹窗">
<div class="center">
<el-switch v-model="form.homeEnable" :active-value="1" :inactive-value="0"></el-switch>
<div class="tips">开启后至少勾选1个显示时机</div>
</div>
</el-form-item>
<el-form-item label="显示时机" prop="homeType">
<el-checkbox-group v-model="form.homeType">
<el-checkbox value="only" label="仅显示1次" :disabled="!form.homeEnable" />
<el-checkbox value="day" label="每天显示1次" :disabled="!form.homeEnable" />
<el-checkbox value="every" label="每次达成触发条件都显示" :disabled="!form.homeEnable" />
</el-checkbox-group>
</el-form-item>
<!-- <el-form-item label="模块提示语">
<el-input :placeholder="defaultNote" :maxlength="20" v-model.trim="form.note"></el-input>
</el-form-item> -->
<el-form-item>
<el-button type="primary" :loading="loading" @click="submitHandle">保存</el-button>
</el-form-item>
@@ -60,26 +97,31 @@ import { ElNotification } from 'element-plus'
import { drainageConfigGet, drainageConfigPost } from '@/api/coupon/index'
const defaultTitle = ref('扫码进群，优惠多多')
const defaultNote = ref('长按识别，微信内扫一扫加好友')
const defaultNote = ref('如果长按不能识别，可截图或保存二维码图片至相册，通过微信扫码入群')
const defaultContent = ref('长按识别上方企微好友码，添加【福利官】')
const shopInfo = ref('')
const form = ref({
id: '',
useType: ['dine-in'],
orderType: ['dine-in'],
qrCode: '',
title: defaultTitle.value,
content: '',
note: '长按识别，微信内扫一扫加好友',
content: defaultContent.value,
note: defaultNote.value,
orderEnable: 1,
homeEnable: 1,
homeType: [],
isEnable: '',
mainShopId: '',
shopId: ''
})
const rules = reactive({
useType: [
orderType: [
{
required: true,
validator: (rule, value, callback) => {
if (form.value.useType.length <= 0) {
if (form.value.orderType.length <= 0) {
callback(new Error('请选择可使用类型'))
} else {
callback()
@@ -116,6 +158,18 @@ const rules = reactive({
triiger: 'change'
}
],
homeType: [
{
validator: (rule, value, callback) => {
if (form.value.homeEnable == 1 && form.value.homeType.length <= 0) {
callback(new Error('请选择显示时机'))
} else {
callback()
}
},
triiger: 'change'
}
]
})
// 开始提交
@@ -156,11 +210,15 @@ function submitHandle() {
async function drainageConfigGetAjax() {
try {
const res = await drainageConfigGet()
if (res.useType == null) {
res.useType = []
if (res.orderType == null) {
res.orderType = []
}
form.value = res
if (form.value.homeType == null) {
form.value.homeType = []
}
if (form.value.title == '') {
form.value.title = defaultTitle.value
}
@@ -173,6 +231,7 @@ async function drainageConfigGetAjax() {
}
onMounted(() => {
shopInfo.value = JSON.parse(localStorage.getItem('userInfo'))
drainageConfigGetAjax()
})
</script>
@@ -287,6 +346,74 @@ onMounted(() => {
}
}
}
.new_preview {
--bg: #3F3B37;
--color: #F6DFC4;
--borderColor: #f6dfc45b;
width: 90%;
background-color: var(--bg);
border-radius: 4px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
.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);
}
}
.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;
}
}
}
}
}