新增分享配置
This commit is contained in:
@@ -801,6 +801,68 @@ export function attendanceDetail(params) {
|
||||
});
|
||||
}
|
||||
|
||||
// 分享奖励基础:新增/修改
|
||||
export function shareBasePost(data) {
|
||||
return request({
|
||||
url: `${Market_BaseUrl}/admin/shareBase`,
|
||||
method: 'POST',
|
||||
data
|
||||
});
|
||||
}
|
||||
|
||||
// 分享奖励基础 查询
|
||||
export function shareBaseGet(params) {
|
||||
return request({
|
||||
url: `${Market_BaseUrl}/admin/shareBase`,
|
||||
method: 'GET',
|
||||
params
|
||||
});
|
||||
}
|
||||
|
||||
// 轮播图配置:新增/修改
|
||||
export function shareCarouselPost(data) {
|
||||
return request({
|
||||
url: `${Market_BaseUrl}/admin/carousel`,
|
||||
method: 'POST',
|
||||
data
|
||||
});
|
||||
}
|
||||
|
||||
// 分享轮播图配置
|
||||
export function shareCarouselGet(params) {
|
||||
return request({
|
||||
url: `${Market_BaseUrl}/admin/carousel`,
|
||||
method: 'GET',
|
||||
params
|
||||
});
|
||||
}
|
||||
|
||||
// 分享 轮播图配置 删除
|
||||
export function shareCarouselDel(id) {
|
||||
return request({
|
||||
url: `${Market_BaseUrl}/admin/carousel/${id}`,
|
||||
method: 'DELETE'
|
||||
});
|
||||
}
|
||||
|
||||
// 全民股东群聊 配置信息获取
|
||||
export function disGroupGet(params) {
|
||||
return request({
|
||||
url: `${Market_BaseUrl}/admin/disGroup`,
|
||||
method: 'get',
|
||||
params
|
||||
});
|
||||
}
|
||||
|
||||
// 全民股东群聊:新增/修改
|
||||
export function disGroupPost(data) {
|
||||
return request({
|
||||
url: `${Market_BaseUrl}/admin/disGroup`,
|
||||
method: 'POST',
|
||||
data
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
34
src/components/selectCoupon/index.vue
Normal file
34
src/components/selectCoupon/index.vue
Normal file
@@ -0,0 +1,34 @@
|
||||
<template>
|
||||
<el-select v-model="modelValue" placeholder="请选择优惠券" clearable style="width: 300px;" @change="changHandle">
|
||||
<el-option v-for="coupon in couponList" :key="coupon.id" :label="coupon.title" :value="coupon.id" />
|
||||
</el-select>
|
||||
</template>
|
||||
<script setup>
|
||||
import couponApi from "@/api/market/coupon";
|
||||
import { ref, onMounted } from "vue";
|
||||
|
||||
const modelValue = defineModel({
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
});
|
||||
|
||||
const name = defineModel('name', {
|
||||
type: String,
|
||||
default: ''
|
||||
});
|
||||
|
||||
function changHandle(value) {
|
||||
name.value = couponList.value.find(item => item.id === value)?.title || '';
|
||||
}
|
||||
|
||||
// 优惠券列表
|
||||
const couponList = ref([]);
|
||||
|
||||
onMounted(() => {
|
||||
couponApi.getList({ size: 999 }).then((res) => {
|
||||
if (res) {
|
||||
couponList.value = res.records || [];
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@@ -70,11 +70,11 @@ const env = process.env.NODE_ENV
|
||||
// DEV-START
|
||||
const accountList = reactive([
|
||||
{ username: "admin", type: 'primary', label: 'admin' },
|
||||
// { username: "19191703856", type: 'warning', label: '喜气洋洋' },
|
||||
// { username: "19107220837", type: 'danger', label: '快乐时光店铺' },
|
||||
{ username: "18049104914", type: 'warning', label: '东风的店铺' },
|
||||
{ username: "19107220837", type: 'danger', label: '快乐时光店铺' },
|
||||
// { username: "18199991111", type: 'success', label: '草莓加盟主店可直接管理' },
|
||||
{ username: "18821670757", type: 'success', label: '高歌的小店' },
|
||||
// { username: "19112345678", type: 'danger', label: '酸橘子·云贵小馆' },
|
||||
{ username: "191123456", type: 'primary', label: '酸橘子' },
|
||||
]);
|
||||
|
||||
// 快捷模拟登录
|
||||
|
||||
@@ -32,10 +32,10 @@ export const newMenus = [
|
||||
intro: '协助商家拉来新客户，拓展客户群体',
|
||||
childrenList: [
|
||||
{
|
||||
name: "分销",
|
||||
name: "全民分销",
|
||||
icon: "zhcz",
|
||||
pathName: "distribution_page",
|
||||
intro: "用户成为业务员，可促进消费"
|
||||
intro: "用户成为股东，可促进消费"
|
||||
},
|
||||
{
|
||||
name: "套餐推广",
|
||||
@@ -55,6 +55,12 @@ export const newMenus = [
|
||||
pathName: "group_booking",
|
||||
intro: "拼团"
|
||||
},
|
||||
{
|
||||
name: "分享配置",
|
||||
icon: "sppt",
|
||||
pathName: "share_setting",
|
||||
intro: "商家可配置用户分享后可获得的奖励"
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
|
||||
@@ -0,0 +1,290 @@
|
||||
<template>
|
||||
<div class="form_content">
|
||||
<div class="left">
|
||||
<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.groupUrl" style="width: 100%;height: 100%;border-radius: 4px;"></el-image>
|
||||
</div>
|
||||
</div>
|
||||
<div class="intro">
|
||||
{{ form.content }}
|
||||
</div>
|
||||
<div class="foot">
|
||||
{{ defaultNote }}
|
||||
</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="groupUrl">
|
||||
<single-image-upload style="width: 120px; height: 120px" v-model="form.groupUrl"></single-image-upload>
|
||||
</el-form-item>
|
||||
<el-form-item label="模块标题" prop="title">
|
||||
<el-input :placeholder="defaultTitle" :maxlength="15" v-model.trim="form.title"
|
||||
style="width: 300px;"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="模块内容">
|
||||
<el-input type="textarea" :rows="4" :maxlength="20" show-word-limit placeholder="请输入内容"
|
||||
v-model.trim="form.content" style="width: 300px;"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="模块提示语">
|
||||
<div class="tips">{{ defaultNote }}</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="启用状态">
|
||||
<el-switch v-model="form.isEnable" :active-value="1" :inactive-value="0"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" :loading="loading" @click="submitHandle">保存</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { ElNotification } from 'element-plus'
|
||||
import { disGroupGet, disGroupPost } from '@/api/coupon/index'
|
||||
|
||||
const defaultTitle = ref('扫码进群，优惠多多')
|
||||
const defaultNote = ref('如果长按不能识别，可截图或保存二维码图片至相册，通过微信扫码入群')
|
||||
const defaultContent = ref('长按识别上方企微好友码，添加【福利官】')
|
||||
const shopInfo = ref('')
|
||||
|
||||
const form = ref({
|
||||
id: '',
|
||||
groupUrl: '',
|
||||
title: defaultTitle.value,
|
||||
content: defaultContent.value,
|
||||
isEnable: 1,
|
||||
})
|
||||
|
||||
const rules = reactive({
|
||||
groupUrl: [
|
||||
{
|
||||
required: true,
|
||||
message: '请上传群二维码',
|
||||
triiger: 'change'
|
||||
}
|
||||
],
|
||||
title: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入模块标题',
|
||||
triiger: 'change'
|
||||
}
|
||||
],
|
||||
content: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入内容',
|
||||
triiger: 'change'
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
// 开始提交
|
||||
const formRef = ref(null)
|
||||
const emits = defineEmits(["success"]);
|
||||
const loading = ref(false);
|
||||
function submitHandle() {
|
||||
formRef.value.validate(async (valid) => {
|
||||
try {
|
||||
if (valid) {
|
||||
loading.value = true;
|
||||
|
||||
let data = { ...form.value }
|
||||
|
||||
if (data.title == '') {
|
||||
data.title = defaultTitle.value
|
||||
}
|
||||
|
||||
if (data.content == '') {
|
||||
data.content = defaultContent.value
|
||||
}
|
||||
|
||||
await disGroupPost(data);
|
||||
ElNotification({
|
||||
title: '注意',
|
||||
message: '保存成功',
|
||||
type: 'success'
|
||||
})
|
||||
}
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
}
|
||||
loading.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
// 获取配置信息
|
||||
async function drainageConfigGetAjax() {
|
||||
try {
|
||||
const res = await disGroupGet()
|
||||
form.value = res
|
||||
if (form.value.title == '') {
|
||||
form.value.title = defaultTitle.value
|
||||
}
|
||||
if (form.value.content == '') {
|
||||
form.value.content = defaultContent.value
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
shopInfo.value = JSON.parse(localStorage.getItem('userInfo'))
|
||||
drainageConfigGetAjax()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.form_content {
|
||||
padding: 14px 0 0;
|
||||
display: flex;
|
||||
|
||||
.left {
|
||||
width: 374px;
|
||||
height: 720px;
|
||||
position: relative;
|
||||
background: url('https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/3/7da616a1c56a409dbdea8bf2f41cf14b.png') no-repeat center center / 100% 100%;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.preview {
|
||||
width: 350px;
|
||||
height: 130px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background-color: #fff;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 14px;
|
||||
|
||||
.info {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding: 5px 0;
|
||||
|
||||
.top {
|
||||
flex: 1;
|
||||
|
||||
.title {
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.content {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
.btm {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.img_wrap {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
|
||||
.img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="gyq_container">
|
||||
<div class="gyq_content">
|
||||
<HeaderCard name="分销" intro="用户成为业务员，可促进消费" icon="xffx" showSwitch v-model:isOpen="form.isEnable">
|
||||
<HeaderCard name="全民股东" intro="用户成为股东，可促进消费" icon="xffx" showSwitch v-model:isOpen="form.isEnable">
|
||||
</HeaderCard>
|
||||
<div class="tips">
|
||||
<el-alert title="请记得前往《分销明细》充值余额，余额不足时用户收益将无法正常入账" type="primary" show-icon :closable="false" />
|
||||
@@ -18,6 +18,8 @@
|
||||
<activation_record key="activationRecord" v-if="tabActiveIndex == 2" />
|
||||
<!-- 分销明细 -->
|
||||
<distribution_details key="distributionDetails" v-if="tabActiveIndex == 3" />
|
||||
<!-- 股东管理群 -->
|
||||
<groupSetting name="groupSetting" key="groupSetting" v-if="tabActiveIndex == 4" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -30,6 +32,7 @@ import setting from "./components/setting.vue";
|
||||
import distributor from "./components/distributor.vue";
|
||||
import activation_record from "./components/activation_record.vue";
|
||||
import distribution_details from "./components/distribution_details.vue";
|
||||
import groupSetting from "./components/groupSetting.vue";
|
||||
import { ref, onMounted, watch } from 'vue'
|
||||
import { distributionGet, distributionPut } from '@/api/coupon'
|
||||
|
||||
@@ -53,6 +56,10 @@ const tabList = ref([
|
||||
label: '分销明细',
|
||||
value: 3
|
||||
},
|
||||
{
|
||||
label: '股东管理群',
|
||||
value: 3
|
||||
},
|
||||
])
|
||||
|
||||
const form = ref({
|
||||
|
||||
@@ -0,0 +1,175 @@
|
||||
<template>
|
||||
<el-dialog :title="form.id ? '编辑' : '添加'" width="800px" v-model="visible" @closed="resetForm">
|
||||
<el-form ref="formRef" :model="form" :rules="rules" label-width="100px" label-position="left">
|
||||
<el-form-item label="名称" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入轮播图名称" :maxlength="20" style="width: 300px;"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="轮播图片" prop="imageUrl">
|
||||
<div class="column">
|
||||
<div class="center">
|
||||
<SingleImageUpload v-model="form.imageUrl" />
|
||||
</div>
|
||||
<div class="tips" style="margin-bottom: 8px;">建议尺寸：750x300像素，支持jpg、png、gif格式，大小不超过2MB</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="是否可分享" prop="isShareable">
|
||||
<div class="column">
|
||||
<div>
|
||||
<el-radio-group v-model="form.isShareable">
|
||||
<el-radio label="开启" :value="1"></el-radio>
|
||||
<el-radio label="关闭" :value="0"></el-radio>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div class="tips">开启时，用户端会显示单独的分享按钮</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="跳转页面" prop="jumpPageId">
|
||||
<linkCard :includes-names="includesNames" v-model="form.jumpPageId" v-model:extendParam="form.extendParam" />
|
||||
</el-form-item>
|
||||
<el-form-item label="排序值" prop="sort">
|
||||
<el-input v-model="form.sort" @input="e => form.sort = filterNumberInput(e, 1)" style="width: 300px;"
|
||||
placeholder="排序值越大越靠前"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="是否启用">
|
||||
<el-radio-group v-model="form.isEnabled">
|
||||
<el-radio label="启用" :value="1"></el-radio>
|
||||
<el-radio label="禁用" :value="0"></el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="visible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="submitForm" :loading="loading">确 定</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import _ from 'lodash';
|
||||
import { ref } from 'vue';
|
||||
import { filterNumberInput } from '@/utils';
|
||||
import SingleImageUpload from '@/components/Upload/SingleImageUpload.vue';
|
||||
import linkCard from './linkCard.vue';
|
||||
import { shareCarouselPost } from '@/api/coupon/index.js';
|
||||
|
||||
const visible = ref(false);
|
||||
const loading = ref(false);
|
||||
const formObj = ref({
|
||||
id: '', // 轮播图ID，编辑时传递
|
||||
name: '', // 轮播图名称（20字内）
|
||||
imageUrl: '', // 轮播图片地址
|
||||
isShareable: 1, // 是否可分享 1=开启 0=关闭
|
||||
jumpPageId: '', // 跳转页面 tb_mini_app_pages的 id
|
||||
extendParam: '', // 扩展参数
|
||||
sort: '', // 排序值，数值越大越靠前
|
||||
isEnabled: 1, // 是否启用 1=启用 0=禁用
|
||||
});
|
||||
const form = ref(_.cloneDeep(formObj.value));
|
||||
function resetForm() {
|
||||
form.value = _.cloneDeep(formObj.value);
|
||||
}
|
||||
const formRef = ref(null);
|
||||
const rules = {
|
||||
name: [
|
||||
{ required: true, message: '请输入轮播图名称', trigger: 'blur' }
|
||||
],
|
||||
imageUrl: [
|
||||
{ required: true, message: '请上传轮播图片', trigger: 'change' }
|
||||
],
|
||||
jumpPageId: [
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (form.value.jumpPageId && _.includes(includesNames.value.map(item => item.id), form.value.jumpPageId)) {
|
||||
if (!form.value.extendParam) {
|
||||
callback(new Error('请选择具体菜品'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
trigger: 'change'
|
||||
}
|
||||
],
|
||||
sort: [
|
||||
{ required: true, message: '请输入排序值', trigger: 'blur' }
|
||||
],
|
||||
}
|
||||
|
||||
const includesNames = ref([
|
||||
{
|
||||
id: '4',
|
||||
name: '套餐推广商品详情页'
|
||||
},
|
||||
{
|
||||
id: '6',
|
||||
name: '商品拼团详情页'
|
||||
},
|
||||
{
|
||||
id: '10',
|
||||
name: '点餐商品详情弹窗页'
|
||||
}
|
||||
]);
|
||||
|
||||
function submitForm() {
|
||||
console.log(form.value);
|
||||
|
||||
formRef.value.validate((valid) => {
|
||||
if (valid) {
|
||||
shareCarouselPostAjax();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const emits = defineEmits(['success']);
|
||||
|
||||
// 轮播图配置:新增/修改
|
||||
async function shareCarouselPostAjax() {
|
||||
try {
|
||||
loading.value = true;
|
||||
await shareCarouselPost(form.value);
|
||||
ElNotification({
|
||||
title: '成功',
|
||||
message: '保存成功',
|
||||
type: 'success',
|
||||
duration: 2000
|
||||
});
|
||||
emits('success');
|
||||
visible.value = false;
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function show(obj) {
|
||||
visible.value = true;
|
||||
if (obj && obj.id) {
|
||||
form.value = _.cloneDeep(obj)
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
show
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.center {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.tips {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,136 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="row">
|
||||
<el-form :model="queryForm" inline>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="Plus" @click="AddBannerRef.show()">添加</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-select v-model="queryForm.isShareable" style="width: 150px;">
|
||||
<el-option label="全部" :value="''" />
|
||||
<el-option label="开启" :value="1" />
|
||||
<el-option label="关闭" :value="0" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-select v-model="queryForm.isEnabled" style="width: 150px;">
|
||||
<el-option label="全部" :value="''" />
|
||||
<el-option label="启用" :value="1" />
|
||||
<el-option label="禁用" :value="0" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-input v-model="queryForm.name" placeholder="请输入名称搜索" style="width: 200px;" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="Search" :loading="tableData.loading" @click="queryHandle">搜索</el-button>
|
||||
<el-button icon="Refresh" :loading="tableData.loading" @click="resetHandle">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="row">
|
||||
<el-table :data="tableData.list" border stripe v-loading="tableData.loading">
|
||||
<el-table-column label="ID" prop="id"></el-table-column>
|
||||
<el-table-column label="名称" prop="name"></el-table-column>
|
||||
<el-table-column label="图片" prop="imageUrl">
|
||||
<template v-slot="scope">
|
||||
<el-image :src="scope.row.imageUrl" style="width: 50px;height: 50px;"></el-image>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column label="分享" prop="isShareable">
|
||||
<template v-slot="scope">
|
||||
<span v-if="scope.row.isShareable == 1">开启</span>
|
||||
<span v-else>关闭</span>
|
||||
</template>
|
||||
</el-table-column> -->
|
||||
<el-table-column label="启用状态" prop="isEnabled">
|
||||
<template v-slot="scope">
|
||||
<el-tag v-if="scope.row.isEnabled == 1" type="primary" disable-transitions>已启用</el-tag>
|
||||
<el-tag v-if="scope.row.isEnabled == 0" type="info" disable-transitions>已禁用</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="排序值" prop="sort"></el-table-column>
|
||||
<el-table-column label="创建时间" prop="createTime" width="200"></el-table-column>
|
||||
<el-table-column label="操作" width="150">
|
||||
<template v-slot="scope">
|
||||
<el-button link type="primary" @click="AddBannerRef.show(scope.row)">编辑</el-button>
|
||||
<el-popconfirm title="确认要删除吗？" @confirm="deleteHandle(scope.row)">
|
||||
<template #reference>
|
||||
<el-button type="danger" link>删除</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<AddBanner @success="queryHandle" ref="AddBannerRef" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import AddBanner from './add_banner.vue';
|
||||
import { shareCarouselGet, shareCarouselDel } from '@/api/coupon/index.js';
|
||||
|
||||
const AddBannerRef = ref(null);
|
||||
|
||||
const queryForm = ref({
|
||||
name: '',
|
||||
isShareable: '', // 是否可分享 1=开启 0=关闭
|
||||
isEnabled: '', // 是否启用 1=启用 0=禁用
|
||||
})
|
||||
|
||||
const tableData = ref({
|
||||
loading: false,
|
||||
list: []
|
||||
})
|
||||
|
||||
// 搜索
|
||||
function queryHandle() {
|
||||
getTableData();
|
||||
}
|
||||
|
||||
// 重置
|
||||
function resetHandle() {
|
||||
queryForm.value = {
|
||||
name: '',
|
||||
isShareable: '',
|
||||
isEnabled: '',
|
||||
};
|
||||
queryHandle();
|
||||
}
|
||||
|
||||
// 轮播图配置
|
||||
async function getTableData() {
|
||||
try {
|
||||
tableData.value.loading = true;
|
||||
const res = await shareCarouselGet(queryForm.value);
|
||||
tableData.value.list = res;
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
tableData.value.loading = false;
|
||||
}
|
||||
|
||||
// 删除轮播图配置
|
||||
async function deleteHandle(row) {
|
||||
try {
|
||||
await shareCarouselDel(row.id);
|
||||
getTableData();
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getTableData();
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.row {
|
||||
&.mt14 {
|
||||
margin-top: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
189
src/views/marketing_center/share_setting/components/linkCard.vue
Normal file
189
src/views/marketing_center/share_setting/components/linkCard.vue
Normal file
@@ -0,0 +1,189 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-select v-model="jumpPageId" style="width: 300px;" placeholder="请选择跳转页面" @change="jumpPageIdChange">
|
||||
<el-option v-for="item in miniPageList" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
||||
</el-select>
|
||||
<div class="tips">选填，轮播图点击后跳转的目标页面</div>
|
||||
<el-select v-model="goodsId" style="width: 300px;" placeholder="请选择具体菜品，可搜索" clearable filterable remote
|
||||
:remote-method="remoteMethod" :loading="loading" v-if="jumpPageId && isIncludeFlag" @change="goodsIdChange">
|
||||
<el-option v-for="item in goodsList" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import _ from 'lodash';
|
||||
import { ref, onMounted, watch } from 'vue';
|
||||
import API from '@/views/application/list/advertisement/indexconfig/api';
|
||||
import { packageGet, getGbWarePage } from '@/api/market/ware'
|
||||
import productApi from '@/api/product';
|
||||
|
||||
const props = defineProps({
|
||||
includesNames: {
|
||||
type: Array,
|
||||
default: () => ([])
|
||||
}
|
||||
});
|
||||
|
||||
const jumpPageId = defineModel({
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
});
|
||||
|
||||
const jumpPageName = ref('');
|
||||
const isIncludeFlag = ref(false);
|
||||
|
||||
function checkIsInclude() {
|
||||
// 增加边界判断：避免includesNames为空或item.id不存在导致的错误
|
||||
if (!jumpPageId.value || !Array.isArray(props.includesNames) || props.includesNames.length === 0) {
|
||||
return false;
|
||||
}
|
||||
// 提取id数组并判断包含关系
|
||||
const idList = props.includesNames.map(item => item?.id); // 可选链避免item.id不存在
|
||||
return _.includes(idList, jumpPageId.value);
|
||||
}
|
||||
|
||||
watch(jumpPageId, async (newVal, oldVal) => {
|
||||
if (newVal) {
|
||||
await nextTick()
|
||||
watchJumpPageIdChange(newVal)
|
||||
}
|
||||
}, {
|
||||
immediate: true, // 可选：首次加载时立即执行一次（根据需求决定）
|
||||
deep: false // 无需深度监听，因为值是String/Number
|
||||
})
|
||||
|
||||
const miniPageList = ref([]);
|
||||
|
||||
// 获取小程序跳转页面列表
|
||||
async function getList() {
|
||||
try {
|
||||
const res = await API.miniAppPagesPage({ page: 1, size: 999 });
|
||||
miniPageList.value = res.records;
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
|
||||
function jumpPageIdChange(value) {
|
||||
goodsId.value = '';
|
||||
extendParam.value = ''
|
||||
jumpPageName.value = miniPageList.value.find(item => item.id == value)?.name || '';
|
||||
// 清空具体菜品选择
|
||||
if (checkIsInclude()) {
|
||||
isIncludeFlag.value = true;
|
||||
getGoodsList()
|
||||
} else {
|
||||
isIncludeFlag.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// watch监听jumpPageId变化
|
||||
async function watchJumpPageIdChange(value) {
|
||||
if (miniPageList.value.length === 0) {
|
||||
await getList()
|
||||
}
|
||||
// 清空具体菜品选择
|
||||
if (checkIsInclude()) {
|
||||
jumpPageName.value = miniPageList.value.find(item => item.id == value)?.name || '';
|
||||
isIncludeFlag.value = true;
|
||||
getGoodsList()
|
||||
} else {
|
||||
isIncludeFlag.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
const loading = ref(false);
|
||||
const goodsList = ref([]); // 具体菜品列表
|
||||
const goodsId = defineModel('goodsId', {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
});
|
||||
const extendParam = defineModel('extendParam', {
|
||||
type: String,
|
||||
default: ''
|
||||
});
|
||||
|
||||
// 监听extendParam的变化，解析并赋值给goodsId
|
||||
watch(extendParam, (newExtendParam, oldExtendParam) => {
|
||||
// console.log('extendParam变化：', newExtendParam);
|
||||
|
||||
// 1. 空值判断：如果extendParam为空，重置goodsId
|
||||
if (!newExtendParam) {
|
||||
goodsId.value = '';
|
||||
return;
|
||||
}
|
||||
|
||||
// 2. 解析字符串：匹配goodsId=xxx的格式
|
||||
// 正则表达式说明：匹配goodsId=后接任意字符（非空），直到字符串结束或遇到&等分隔符
|
||||
const reg = /goodsId=([^&]+)/;
|
||||
const matchResult = newExtendParam.match(reg);
|
||||
|
||||
// 3. 提取值并赋值：匹配成功则赋值，否则重置
|
||||
if (matchResult && matchResult[1]) {
|
||||
const extractedGoodsId = matchResult[1];
|
||||
goodsId.value = extractedGoodsId; // 赋值给goodsId模型属性
|
||||
// console.log('解析出的goodsId：', extractedGoodsId);
|
||||
} else {
|
||||
goodsId.value = ''; // 匹配失败时清空
|
||||
// console.log('未解析到goodsId');
|
||||
}
|
||||
}, {
|
||||
immediate: true, // 初始加载时立即执行一次解析
|
||||
deep: false // 字符串是基本类型，无需深度监听
|
||||
});
|
||||
|
||||
// 具体菜品选择变化
|
||||
function goodsIdChange(value) {
|
||||
// 设置扩展参数
|
||||
extendParam.value = `goodsId=${value}`;
|
||||
}
|
||||
|
||||
function remoteMethod(value) {
|
||||
getGoodsList(value);
|
||||
}
|
||||
|
||||
// 获取商品咧白哦
|
||||
async function getGoodsList(value = '') {
|
||||
try {
|
||||
// 获取套餐列表
|
||||
loading.value = true;
|
||||
let list = [];
|
||||
if (jumpPageName.value == '套餐推广商品详情页') {
|
||||
const res = await packageGet({ page: 1, size: 999, packageName: value });
|
||||
list = res.records.map(item => ({
|
||||
id: item.id,
|
||||
name: item.packageName
|
||||
}));
|
||||
} else if (jumpPageName.value == '商品拼团详情页') {
|
||||
const res = await getGbWarePage({ page: 1, size: 999, wareName: value });
|
||||
list = res.records.map(item => ({
|
||||
id: item.id,
|
||||
name: item.wareName
|
||||
}));
|
||||
} else if (jumpPageName.value == '点餐商品详情弹窗页') {
|
||||
const res = await productApi.getPage({ name: value });
|
||||
list = res.records.map(item => ({
|
||||
id: item.id,
|
||||
name: item.name
|
||||
}));
|
||||
}
|
||||
goodsList.value = list;
|
||||
loading.value = false;
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getList()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.tips {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
}
|
||||
</style>
|
||||
135
src/views/marketing_center/share_setting/components/setting.vue
Normal file
135
src/views/marketing_center/share_setting/components/setting.vue
Normal file
@@ -0,0 +1,135 @@
|
||||
<template>
|
||||
<el-form ref="formRef" :model="form" :rules="rules" label-width="160px" label-position="left">
|
||||
<el-form-item label="功能开启">
|
||||
<el-switch v-model="form.isEnabled" :active-value="1" :inactive-value="0" />
|
||||
</el-form-item>
|
||||
<el-form-item label="可获得奖励的分享" prop="rewardSharePages">
|
||||
<el-checkbox-group v-model="form.rewardSharePages">
|
||||
<el-checkbox :label="item.label" :value="item.value" v-for="item in typesList" :key="item.value"></el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
<div class="header">分享人可获得奖励</div>
|
||||
<el-form-item label="选择优惠券" prop="sharerCouponId">
|
||||
<SelectCoupon v-model="form.sharerCouponId" v-model:name="form.sharerCouponName" />
|
||||
</el-form-item>
|
||||
<el-form-item label="单次获得优惠券数量" prop="sharerCouponNum">
|
||||
<el-input v-model="form.sharerCouponNum" placeholder="请输入数量"
|
||||
@input="e => form.sharerCouponNum = filterNumberInput(e, 1)" style="width: 300px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="可获得奖励次数">
|
||||
<el-radio-group v-model="form.rewardTimesType">
|
||||
<el-radio label="仅1次" :value="1"></el-radio>
|
||||
<el-radio label="每次分享成功" :value="2"></el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<div class="header">被分享人可获得奖励</div>
|
||||
<el-form-item label="选择优惠券">
|
||||
<SelectCoupon v-model="form.sharedUserCouponId" v-model:name="form.sharedUserCouponName" />
|
||||
</el-form-item>
|
||||
<el-form-item label="单次获得优惠券数量">
|
||||
<el-input v-model="form.sharedUserCouponNum" placeholder="请输入数量"
|
||||
@input="e => form.sharedUserCouponNum = filterNumberInput(e, 1)" style="width: 300px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="获得奖励时是否弹窗">
|
||||
<el-radio-group v-model="form.isSharedUserPopup">
|
||||
<el-radio label="是" :value="1"></el-radio>
|
||||
<el-radio label="否" :value="0"></el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submitForm">保存</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import _ from 'lodash'
|
||||
import { ref, onMounted } from 'vue'
|
||||
import typesList from '../data.js'
|
||||
import SelectCoupon from '@/components/selectCoupon/index.vue'
|
||||
import { filterNumberInput } from '@/utils/index.js'
|
||||
import { shareBasePost, shareBaseGet } from '@/api/coupon/index.js'
|
||||
|
||||
const formRef = ref(null)
|
||||
const form = ref({
|
||||
isEnabled: 0,
|
||||
rewardSharePages: [], // 可获得奖励的分享页面，用逗号分隔 typesList
|
||||
sharerCouponId: '', // 分享人可获得的优惠券ID
|
||||
sharerCouponName: '', // 分享人可获得的优惠券名称
|
||||
sharerCouponNum: '', // 分享人可获得的优惠券数量
|
||||
rewardTimesType: 1, // 可获得奖励次数 1=仅1次 2=每次分享成功
|
||||
sharedUserCouponId: '', // 被分享人可获得的优惠券ID
|
||||
sharedUserCouponName: '', // 被分享人可获得的优惠券名称
|
||||
sharedUserCouponNum: '', // 被分享人可获得的优惠券数量
|
||||
isSharedUserPopup: 1, // 被分享人获得奖励时是否弹窗 1=是 0=否
|
||||
})
|
||||
|
||||
const rules = {
|
||||
rewardSharePages: [
|
||||
{ required: true, message: '请选择可获得奖励的分享', trigger: 'change' }
|
||||
],
|
||||
sharerCouponId: [
|
||||
{ required: true, message: '请选择优惠券', trigger: 'change' }
|
||||
],
|
||||
sharerCouponNum: [
|
||||
{ required: true, message: '请输入单次获得优惠券数量', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
|
||||
function submitForm() {
|
||||
console.log(form.value);
|
||||
formRef.value.validate((valid) => {
|
||||
if (valid) {
|
||||
console.log('提交表单', form.value)
|
||||
shareBasePostAjax()
|
||||
} else {
|
||||
console.log('表单验证失败')
|
||||
return false
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 分享奖励基础:新增/修改
|
||||
async function shareBasePostAjax() {
|
||||
try {
|
||||
const data = _.cloneDeep(form.value);
|
||||
data.rewardSharePages = data.rewardSharePages.join(',');
|
||||
await shareBasePost(data);
|
||||
ElNotification({
|
||||
title: '成功',
|
||||
message: '保存成功',
|
||||
type: 'success',
|
||||
duration: 2000
|
||||
});
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
|
||||
// 分享奖励基础 查询
|
||||
async function shareBaseGetAjax() {
|
||||
try {
|
||||
const res = await shareBaseGet();
|
||||
if (res) {
|
||||
form.value = { ...form.value, ...res };
|
||||
form.value.rewardSharePages = res.rewardSharePages ? res.rewardSharePages.split(',') : [];
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
// 初始化数据
|
||||
shareBaseGetAjax();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.header {
|
||||
color: #333;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin: 0 0 20px 0;
|
||||
}
|
||||
</style>
|
||||
38
src/views/marketing_center/share_setting/data.js
Normal file
38
src/views/marketing_center/share_setting/data.js
Normal file
@@ -0,0 +1,38 @@
|
||||
export default [
|
||||
{
|
||||
label: '店铺首页',
|
||||
value: 'index'
|
||||
},
|
||||
// {
|
||||
// label: '我的',
|
||||
// value: 'dine'
|
||||
// },
|
||||
{
|
||||
label: '点餐页',
|
||||
value: 'eat'
|
||||
},
|
||||
{
|
||||
label: '点餐页-详情',
|
||||
value: 'eat-detail'
|
||||
},
|
||||
{
|
||||
label: '套餐推广-列表',
|
||||
value: 'pp-list'
|
||||
},
|
||||
{
|
||||
label: '套餐推广-详情',
|
||||
value: 'pp-detail'
|
||||
},
|
||||
{
|
||||
label: '商品拼团-列表',
|
||||
value: 'gb-list'
|
||||
},
|
||||
{
|
||||
label: '商品拼团-详情',
|
||||
value: 'gb-detail'
|
||||
},
|
||||
{
|
||||
label: '全民股东',
|
||||
value: 'dis'
|
||||
}
|
||||
]
|
||||
56
src/views/marketing_center/share_setting/index.vue
Normal file
56
src/views/marketing_center/share_setting/index.vue
Normal file
@@ -0,0 +1,56 @@
|
||||
<template>
|
||||
<div class="gyq_container">
|
||||
<div class="gyq_content">
|
||||
<HeaderCard name="分享配置" intro="商家可配置用户分享后可获得的奖励" icon="sppt">
|
||||
</HeaderCard>
|
||||
<div class="row mt14">
|
||||
<tabHeader v-model="tabActiveIndex" :list="tabList" />
|
||||
</div>
|
||||
<div class="row mt14">
|
||||
<!-- 基础设置 -->
|
||||
<setting key="setting" name="setting" v-if="tabActiveIndex == 0" />
|
||||
<!-- 点餐页轮播图 -->
|
||||
<bannerSetting key="bannerSetting" name="bannerSetting" v-if="tabActiveIndex == 1" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import HeaderCard from "../components/headerCard.vue";
|
||||
import tabHeader from "../components/tabHeader.vue";
|
||||
import setting from "./components/setting.vue";
|
||||
import bannerSetting from "./components/banner_setting.vue";
|
||||
|
||||
const tabActiveIndex = ref(0)
|
||||
|
||||
const tabList = ref([
|
||||
{
|
||||
label: '基础设置',
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
label: '点餐页轮播图',
|
||||
value: 1
|
||||
},
|
||||
])
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.gyq_container {
|
||||
padding: 14px;
|
||||
|
||||
.gyq_content {
|
||||
padding: 14px;
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.row {
|
||||
&.mt14 {
|
||||
margin-top: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -183,7 +183,6 @@ import editModalConfig from "./indexconfig/edit";
|
||||
import searchConfig from "./indexconfig/search";
|
||||
import MyDialog from "@/components/mycomponents/myDialog.vue";
|
||||
import Statistics from "./indexconfig/statistics.vue";
|
||||
import { min } from "lodash";
|
||||
|
||||
const {
|
||||
searchRef,
|
||||
@@ -242,13 +241,17 @@ if (isSyncStatus()) {
|
||||
contentConfig.cols[contentConfig.cols.length - 1].operat[2].hidden = false;
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
onMounted(async () => {
|
||||
console.log(route.query);
|
||||
if (route.query.id) {
|
||||
contentRef.value?.fetchPageData({ id: route.query.id });
|
||||
}
|
||||
// 获取耗材列表
|
||||
gethaocaiList();
|
||||
|
||||
const res = await UserAPI.getPage()
|
||||
form.warnLine = res.warnLine || ''
|
||||
// console.log('contentRef.value===', res);
|
||||
});
|
||||
|
||||
function newHandleQueryClick(e: IObject | undefined) {
|
||||
|
||||
@@ -75,11 +75,10 @@ const contentConfig: IContentConfig<UserPageQuery> = {
|
||||
{
|
||||
icon: "edit",
|
||||
text: "库存预警",
|
||||
type: "info",
|
||||
type: "danger",
|
||||
name: "custom1",
|
||||
auth: "import",
|
||||
},
|
||||
|
||||
],
|
||||
cols: [
|
||||
// { type: "selection", width: 50, align: "center" },
|
||||
@@ -127,7 +126,7 @@ const contentConfig: IContentConfig<UserPageQuery> = {
|
||||
fixed: "right",
|
||||
width: 280,
|
||||
templet: "tool",
|
||||
operat: [{ text: "报损", name: ''}, { text: "编辑", icon: 'edit', name: "edit"}, { text: "删除", icon: 'delete', type: 'danger', name: "delete"}],
|
||||
operat: [{ text: "报损", name: '' }, { text: "编辑", icon: 'edit', name: "edit" }, { text: "删除", icon: 'delete', type: 'danger', name: "delete" }],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user