This commit is contained in:
余同学 2024-12-12 17:51:19 +08:00
parent f5e8f6eceb
commit 6a8dd263de
4 changed files with 775 additions and 19 deletions

View File

@ -1,6 +1,7 @@
import $http from "@/utils/httpRequest.js";
export const marketing = {
// 会员等级列表
marketingLevelPage: (data) => {
return $http.request({
url: `/merchant-api/memberUnitMemberLevel/list`,
@ -8,6 +9,13 @@ export const marketing = {
data,
});
},
addMarketingLevel: (data) => {
return $http.request({
url: `/merchant-api/memberUnitMemberLevel/saveAll`,
method: "post",
data: data,
});
},
marketingUserPage: (data) => {
return $http.request({
url: `/merchant-api/memberUnitUser/page`,

View File

@ -39,35 +39,51 @@
</div>
<div class="tipsLevel">
<div>
<span style="margin-right: 30px">全部等级(4)</span
<span style="margin-right: 30px">全部等级({{list.length}})</span
><el-button @click="add(null)" type="primary">+新增套餐</el-button>
</div>
<div>
<span style="margin-right: 30px">会员快要到期了</span>
<el-button @click="add(null)" type="primary">购买工具</el-button>
<!-- <span style="margin-right: 30px">会员快要到期了</span>
<el-button @click="add(null)" type="primary">购买工具</el-button> -->
</div>
</div>
<el-table :data="list" :border="true" style="width: 100%">
<el-table-column align="center" label="等级名称" prop="packageName" />
<el-table-column align="center" label="所需成长值" prop="packagePrice" />
<el-table-column
width="140"
align="center"
label="等级名称"
prop="levelName"
/>
<el-table-column
width="140"
align="center"
label="所需成长值"
prop="requiredGrowthValue"
/>
<el-table-column
width="140"
align="center"
label="会员人数"
prop="memberCount"
>
</el-table-column>
<el-table-column
align="center"
label="会员权益"
prop="packageEffectiveTimeQuantity"
/>
<el-table-column
align="center"
label="会员人数"
prop="packageEffectiveTimeUnit"
>
<template v-slot="scope">
<span>{{
scope.row.packageEffectiveTimeUnit == 1 ? "年" : "月"
}}</span>
<template slot-scope="scope">
<div>
<span>{{scope.row.enableMemberDiscount ? '会员折扣,' :''}}</span>
<span>{{scope.row.enablePointsRedemption ? '积分兑换,' : ''}}</span>
<span>{{scope.row.enableBirthdayCoupons ? '生日优惠卷,' : ''}}</span>
<span>{{scope.row.enableBirthdayReward ? '生日双倍积分' : ''}}</span>
</div>
</template>
</el-table-column>
<el-table-column align="center" label="操作" fixed="right" width="240">
<template v-slot="scope">
<!-- <el-table-column align="center" label="操作" fixed="right" width="240"> -->
<!-- <template v-slot="scope">
<el-button @click="add(scope.row)" type="primary">编辑</el-button>
<el-button @click="add(scope.row)" type="primary">转移</el-button>
<el-popconfirm
@ -82,15 +98,21 @@
<el-button type="danger">删除</el-button>
</template>
</el-popconfirm>
</template>
</el-table-column>
</template> -->
<!-- </el-table-column> -->
</el-table>
<!-- 添加 -->
<addOrUpdate ref="addOrUpdate"></addOrUpdate>
</div>
</template>
<script>
import addOrUpdate from "./popup/add-or-update.vue";
import { mapState } from "vuex";
export default {
components: {
addOrUpdate,
},
data() {
return {
list: [],
@ -126,7 +148,57 @@ export default {
this.list = res.data.data;
});
},
add() {},
add() {
// this.$api.marketing
// .addMarketingLevel({
// marketId: this.marketId,
// unitType: this.formInline.unitType,
// levelList: [
// {
// levelName: "",
// requiredGrowthValue: 0,
// growthValueUpperLimit: 99,
// enableMemberDiscount: true,
// enablePointsRedemption: true,
// enableBirthdayCoupons: true,
// enableBirthdayReward: true,
// discountRate: "9",
// rewardEffectiveTimeType: 1,
// memberLevelCouponsList: [
// {
// couponsName: "",
// couponsThreshold: "10",
// couponsMinus: 8,
// couponsEffectiveTimeType: 2,
// },
// ],
// },
// {
// levelName: "",
// requiredGrowthValue: 100,
// growthValueUpperLimit: 999999999,
// enableMemberDiscount: true,
// enablePointsRedemption: true,
// enableBirthdayCoupons: true,
// enableBirthdayReward: true,
// discountRate: "8",
// rewardEffectiveTimeType: 1,
// memberLevelCouponsList: [
// {
// couponsName: "",
// couponsThreshold: "20",
// couponsMinus: 10,
// couponsEffectiveTimeType: 2,
// },
// ],
// },
// ],
// })
// .then((res) => {
// console.log(res);
// });
this.$refs.addOrUpdate.toggle().add();
},
confirmEvent() {},
cancelEvent() {},
},

View File

@ -0,0 +1,191 @@
<template>
<div>
<obj-modal
ref="modal"
labelWidth="150px"
:modalCols="modalCols"
:modalConfig="modalConfig"
:modalData="modalData"
:modalHandles="modalHandles"
>
<template slot="dialog__after"> </template>
</obj-modal>
</div>
</template>
<script>
import { debounce, cloneDeep } from "lodash";
import { Divider } from "element-ui";
export default {
components: {},
data() {
return {
isAdd: true,
//
modalConfig: {
title: "添加优惠卷",
show: false,
width: "60%",
},
modalData: {},
value1: [],
};
},
methods: {
queryTableData(pageNo, pageSize) {},
toggle(e) {
if (this.modalConfig.show == false) {
this.modalConfig.show = true;
} else {
this.modalConfig.show = false;
this.$refs.modal.resetFields();
}
if (e) {
this.init(cloneDeep(e));
}
return {
add: (row) => {
this.modalConfig.title = "添加优惠卷";
this.$nextTick(() => {
this.$refs.modal?.resetFields();
});
this.isAdd = true;
if (row) {
this.modalData = row[0];
console.log("111");
return;
}
this.modalData = {
couponsName: "",
couponsThreshold: 0,
couponsMinus: 0,
couponsEffectiveTimeType: "1",
};
console.log("qqw");
},
update: () => {
this.isAdd = false;
},
};
},
init(row) {
if (row) {
this.modalData = row;
return;
}
console.log("123");
},
},
computed: {
modalCols() {
return [
{
label: "优惠卷名称",
prop: "couponsName",
type: "Input",
width: "300px",
rules: { required: true, message: "请优惠卷名称" },
},
{
label: "优惠券门槛金额",
prop: "couponsThreshold",
type: "Input",
width: "300px",
rules: { required: true, message: "请输入优惠券门槛金额" },
type: "jsx",
render: () => {
return (
<el-input-number
controls-position="right"
precision={0}
v-model={this.modalData.couponsThreshold}
min={0}
max={99999}
label="请输入"
></el-input-number>
);
},
},
{
label: "优惠券减免金额",
prop: "couponsMinus",
type: "Input",
width: "300px",
rules: { required: true, message: "请输入优惠券减免金额" },
type: "jsx",
render: () => {
return (
<el-input-number
controls-position="right"
precision={0}
v-model={this.modalData.couponsMinus}
min={0}
max={99999}
label="请输入"
></el-input-number>
);
},
},
{
label: "优惠券有效时间",
prop: "couponsEffectiveTimeType",
type: "Input",
width: "300px",
rules: { required: true, message: "请输入优惠券有效时间" },
type: "jsx",
render: () => {
return (
<el-select
v-model={this.modalData.couponsEffectiveTimeType}
placeholder="请选择"
>
{[
{ label: "当天", value: "1" },
{
label: "当周",
value: "2",
},
{
label: "当月",
value: "2",
},
].map((item) => {
return (
<el-option
label={item.label}
value={item.value}
></el-option>
);
})}
</el-select>
);
},
},
];
},
modalHandles() {
return [
{
label: "取消",
handle: () => {
this.toggle();
},
},
{
label: this.isAdd ? "确认添加" : "确认",
type: "primary",
loading: this.isLoading,
submit: true,
handle: () => {
console.log(this.modalData);
this.$emit("addCouponData", this.modalData);
this.toggle();
},
},
];
},
},
asyncComputed: {},
};
</script>
<style lang="scss" scoped>
</style>

View File

@ -0,0 +1,485 @@
<template>
<div>
<obj-modal
ref="modal"
labelWidth="150px"
:modalConfig="modalConfig"
:modalCols="modalCols"
:modalData="modalData"
:modalHandles="modalHandles"
>
<div slot="dialog__content">
<el-form :model="modalData" ref="modalForm">
<obj-table-plus
style="height: 70vh"
ref="oTableThree"
v-model="modalData.tableData"
:tableCols="tableCols"
:tableProp="tableProp"
:toolbarProp="toolbarProp"
:tableEvent="tableEvent"
>
<div slot="tableTop" class="mb-2"></div>
</obj-table-plus>
</el-form>
</div>
</obj-modal>
<addCoupon @addCouponData="addCouponData" ref="addCoupon"></addCoupon>
</div>
</template>
<script>
import addCoupon from "./add-coupon.vue";
import { debounce, cloneDeep } from "lodash";
export default {
components: { addCoupon },
data() {
return {
isAdd: true,
isLoading: false,
//
//
tableProp: {
height: "auto",
border: true,
"auto-resize": false,
"print-config": {},
},
toolbarProp: {},
tableEvent: {},
modalConfig: {
title: "新增等级",
show: false,
width: "1300px",
fullscreen: true,
},
modalCols: [],
couponIndex: 0,
modalData: {
marketId: "",
shopId: "",
unitType: "",
tableData: [
{
levelName: "",
requiredGrowthValue: 0,
growthValueUpperLimit: 999999999,
enableMemberDiscount: false,
enablePointsRedemption: false,
enableBirthdayCoupons: false,
enableBirthdayReward: false,
discountRate: "",
rewardEffectiveTimeType: "",
memberLevelCouponsList: "",
},
],
},
};
},
methods: {
queryTableData(pageNo, pageSize) {
setTimeout(() => {
setTimeout(() => {
this.$refs.oTableThree.complete([
{
levelName: "",
requiredGrowthValue: 0,
growthValueUpperLimit: 999999999,
enableMemberDiscount: false,
enablePointsRedemption: false,
enableBirthdayCoupons: false,
enableBirthdayReward: false,
discountRate: "",
rewardEffectiveTimeType: "",
memberLevelCouponsList: "",
},
]);
});
}, 10);
},
toggle(e) {
if (this.modalConfig.show == false) {
this.modalConfig.show = true;
this.$nextTick(() => {
this.$refs.oTableThree.doLayout();
});
} else {
this.modalConfig.show = false;
}
if (e) {
this.init(cloneDeep(e.row));
}
return {
add: () => {
this.modalData = {};
this.queryTableData();
this.isAdd = true;
},
update: (id) => {
this.isAdd = false;
},
};
},
init(row) {
this.modalData = row;
},
addCouponData(data) {
console.log(data);
let row = JSON.parse(JSON.stringify(data));
this.modalData.tableData[this.couponIndex].memberLevelCouponsList = [row];
},
},
computed: {
tableCols() {
return [
{
title: "序号",
type: "seq",
align: "center",
width: "60px",
},
{
title: "等级名称",
field: "typeName",
align: "center",
width: "150px",
type: "jsx",
render: (e) => {
let row = e.row;
return (
<el-form-item
prop={`tableData.${e.$rowIndex}.levelName`}
rules={{
required: true,
message: "请输入等级名称",
}}
>
<el-input
v-model={row.levelName}
placeholder="请输入等级名称"
></el-input>
</el-form-item>
);
},
},
{
title: "所需成长值",
field: "requiredGrowthValue",
align: "center",
width: "170px",
type: "jsx",
render: (e) => {
return (
<el-form-item
prop={`tableData.${e.$rowIndex}.requiredGrowthValue`}
rules={{
required: true,
message: "请输入所需成长值",
}}
>
<el-input-number
disabled={e.$rowIndex == 0}
style="width:150px"
controls-position="right"
precision={0}
v-model={e.row.requiredGrowthValue}
min={0}
max={999999999}
label="请输入"
></el-input-number>
</el-form-item>
);
},
},
{
title: "成长值上限",
field: "growthValueUpperLimit",
align: "center",
width: "170px",
type: "jsx",
render: (e) => {
return (
<el-form-item
prop={`tableData.${e.$rowIndex}.requiredGrowthValue`}
rules={{
required: true,
message: "请输入所需成长值",
}}
>
<el-input-number
disabled={this.modalData.tableData.length == e.$rowIndex + 1}
style="width:150px"
controls-position="right"
precision={0}
v-model={e.row.growthValueUpperLimit}
min={0}
max={999999999}
label="请输入"
></el-input-number>
</el-form-item>
);
},
},
{
title: "开启会员折扣",
field: "enableMemberDiscount",
align: "center",
width: "120px",
type: "jsx",
render: ({ row }) => {
let changeDiscountRate = () => {
if (!row.enableMemberDiscount) {
row.discountRate = "";
}
};
return (
<el-switch
onchange={changeDiscountRate}
v-model={row.enableMemberDiscount}
></el-switch>
);
},
},
{
title: "折扣率(折)",
field: "discountRate",
align: "center",
width: "170px",
type: "jsx",
render: (e) => {
if (e.row.enableMemberDiscount) {
return (
<el-form-item
prop={`tableData.${e.$rowIndex}.discountRate`}
rules={{
required: true,
message: "请输入所需成长值",
}}
>
<el-input-number
style="width:150px"
controls-position="right"
precision={1}
v-model={e.row.discountRate}
min={0}
max={9.9}
label="请输入"
></el-input-number>
</el-form-item>
);
} else {
return <div></div>;
}
},
},
{
title: "开启积分兑换",
field: "enableMemberDiscount",
align: "center",
width: "120px",
type: "jsx",
render: ({ row }) => {
return <el-switch v-model={row.enablePointsRedemption}></el-switch>;
},
},
{
title: "开启生日优惠券",
field: "enableBirthdayCoupons",
align: "center",
width: "120px",
type: "jsx",
render: ({ row }) => {
let changeCouponsList = () => {
if (!row.enableBirthdayCoupons) {
row.memberLevelCouponsList = "";
}
};
return (
<el-switch
onchange={changeCouponsList}
v-model={row.enableBirthdayCoupons}
></el-switch>
);
},
},
{
title: "添加生日优惠卷",
field: "memberLevelCouponsList",
align: "center",
width: "150px",
type: "jsx",
render: (e) => {
let addCouponsList = () => {
this.couponIndex = e.$rowIndex;
this.$refs.addCoupon.toggle().add(e.row.memberLevelCouponsList);
console.log(e.row.memberLevelCouponsList);
};
if (e.row.enableBirthdayCoupons) {
return (
<el-form-item
prop={`tableData.${e.$rowIndex}.memberLevelCouponsList`}
rules={{
required: true,
message: "请添加优惠卷",
}}
>
<el-button
size="mini"
onClick={addCouponsList}
type="primary"
>
添加优惠卷
</el-button>
</el-form-item>
);
} else {
return <div></div>;
}
},
},
{
title: "开启生日双倍积分",
field: "enableBirthdayReward",
align: "center",
width: "120px",
type: "jsx",
render: ({ row }) => {
let changeReward = () => {
if (!row.enableBirthdayReward) {
row.rewardEffectiveTimeType = "";
}
};
return (
<el-switch
onchange={changeReward}
v-model={row.enableBirthdayReward}
></el-switch>
);
},
},
{
title: "双倍积分有效时间",
field: "rewardEffectiveTimeType",
align: "center",
width: "120px",
type: "jsx",
render: (e) => {
if (e.row.enableBirthdayReward) {
return (
<el-form-item
prop={`tableData.${e.$rowIndex}.rewardEffectiveTimeType`}
rules={{
required: true,
message: "请输入所需成长值",
}}
>
<el-select
size="mini"
v-model={e.row.rewardEffectiveTimeType}
placeholder="请选择"
>
{[
{ label: "当天", value: "1" },
{
label: "当月",
value: "2",
},
].map((item) => {
return (
<el-option
label={item.label}
value={item.value}
></el-option>
);
})}
</el-select>
</el-form-item>
);
} else {
return <div></div>;
}
},
},
{
title: "操作",
fixed: "right",
type: "jsx",
width: "200px",
align: "center",
render: (e) => {
let add = () => {
console.log(e);
this.modalData.tableData.splice(e.$rowIndex + 1, 0, {
levelName: "",
requiredGrowthValue: "0",
growthValueUpperLimit: "999999999",
enableMemberDiscount: false,
enablePointsRedemption: false,
enableBirthdayCoupons: false,
enableBirthdayReward: false,
discountRate: "",
rewardEffectiveTimeType: "",
memberLevelCouponsList: "",
});
};
let remove = () => {
this.modalData.tableData.splice(e.$rowIndex, 1);
};
return (
<div>
<el-button
v-show={this.modalData.tableData.length == e.$rowIndex + 1}
style="margin-right: 10px"
type="primary"
size="mini"
onClick={add}
slot="reference"
>
添加
</el-button>
{this.modalData.tableData.length > 1 && e.$rowIndex != 0 ? (
<el-popconfirm title="确认要删除吗?" onConfirm={remove}>
<el-button
class="ml-1"
type="danger"
size="mini"
slot="reference"
>
删除
</el-button>
</el-popconfirm>
) : null}
</div>
);
},
},
];
},
modalHandles() {
return [
{
label: "取消",
handle: debounce(() => {
this.toggle();
}, 300),
},
{
label: this.isAdd ? "确认添加" : "确认修改",
type: "primary",
handle: debounce(() => {
this.modalData.marketId = this.marketId;
this.modalData.shopId = this.shopId;
this.modalData.unitType = JSON.parse(
sessionStorage.getItem("userInfo")
).unitType;
console.log(this.modalData);
this.$refs.modalForm.validate((valid) => {
console.log(valid);
});
}, 300),
},
];
},
},
asyncComputed: {},
};
</script>