code-image-backup-public/lilishop-ui
1
0
Fork 0
mirror of https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git synced 2026-06-21 17:40:25 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(会员管理): 添加第三方账户绑定和会员等级功能

Browse Source 
- 在登录API中新增获取第三方账户绑定列表、绑定和解绑功能
- 在会员API中新增获取当前会员等级、等级规则和等级列表的接口
- 在会员中心页面中添加第三方账户绑定的UI和逻辑
- 新增会员等级页面，展示当前等级、经验值和经验值记录
This commit is contained in:
pikachu1995@126.com
2026-05-13 18:53:33 +08:00
parent fe4e0ce75c
commit aa4bc81da4
22 changed files with 3262 additions and 386 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
manager/src/api/member.js
View File

@@ -175,3 +175,56 @@ export const addMemberGroupUsers = (groupId, memberIds) => {
memberIds: Array.isArray(memberIds) ? memberIds.join(",") : memberIds,
});
};
// 客户等级
export const getMemberGradeByPage = (params) => {
return getRequest("/member/memberGrade/getByPage");
};
export const getMemberGrade = (id) => {
return getRequest(`/member/memberGrade/get/${id}`);
};
export const addMemberGrade = (params) => {
return postRequest(`/member/memberGrade`, params);
};
export const updateMemberGrade = (id, params) => {
return putRequest(`/member/memberGrade/update/${id}`, params);
};
export const updateMemberGradeState = (id, state) => {
return putRequest(`/member/memberGrade/state/${id}?state=${state}`);
};
export const deleteMemberGrade = (id) => {
return deleteRequest(`/member/memberGrade/delete/${id}`);
};
export const getMemberExperienceByPage = (params) => {
return getRequest(`/member/memberGrade/experience/getByPage`, params);
};
// 客户权益
export const getMemberBenefitByPage = (params) => {
return getRequest("/member/benefit/getByPage", params);
};
export const getMemberBenefit = (id) => {
return getRequest(`/member/benefit/get/${id}`);
};
export const addMemberBenefit = (params) => {
return postRequest("/member/benefit", params);
};
export const updateMemberBenefit = (id, params) => {
return putRequest(`/member/benefit/update/${id}`, params);
};
export const updateMemberBenefitState = (id, state) => {
return putRequest(`/member/benefit/state/${id}?state=${state}`);
};
export const deleteMemberBenefit = (id) => {
return deleteRequest(`/member/benefit/delete/${id}`);
};
/** 客户权益类型枚举（管理端） */
export const getMemberBenefitTypes = () => {
return getRequest("/member/benefit/types");
};

10
manager/src/components/lili/upload-pic-input.vue
View File

@@ -39,14 +39,20 @@
<!--</Upload>-->
</div>
<Modal title="图片预览" v-model="viewImage" :styles="{top: '30px'}" draggable>
<Modal
title="图片预览"
v-model="viewImage"
:styles="{ top: '30px' }"
:z-index="3500"
draggable
>
<img :src="currentValue" alt="该资源不存在" style="max-width: 300px;margin: 0 auto;display: block;" />
<div slot="footer">
<Button @click="viewImage=false">关闭</Button>
</div>
</Modal>
<Modal width="1200px" v-model="picModalFlag">
<Modal width="1200px" v-model="picModalFlag" :z-index="3500">
<ossManage @callback="callbackSelected" ref="ossManage" :isComponent="true" :initialize="picModalFlag" />
</Modal>

34
manager/src/router/router.js
View File

@@ -39,7 +39,7 @@ export const otherRouter = {
},
{
path: "category",
title: "类型列表",
title: "分类列表",
name: "category",
component: () => import("@/views/goods/goods-manage/category.vue")
},
@@ -105,16 +105,10 @@ export const otherRouter = {
},
{
path: "goods-parameter-edit",
title: "商品参数维护",
title: "编辑商品参数",
name: "goods-parameter-edit",
component: () => import("@/views/goods/goods-manage/parameter-edit.vue")
},
{
path: "goods-spec",
title: "商品参数",
name: "goods-spec",
component: () => import("@/views/goods/goods-manage/spec.vue")
},
{
path: "order-complaint-detail",
title: "投诉详情",
@@ -159,6 +153,30 @@ export const otherRouter = {
name: "member-group",
component: () => import("@/views/member/group/index.vue")
},
{
path: "member-grade",
title: "客户等级",
name: "member-grade",
component: () => import("@/views/member/grade/index.vue")
},
{
path: "member-benefit",
title: "客户权益管理",
name: "member-benefit",
component: () => import("@/views/member/benefit/index.vue")
},
{
path: "member-grade-experience",
title: "等级权益设置",
name: "member-grade-experience",
component: () => import("@/views/member/grade/experience-setting.vue")
},
{
path: "member-grade-experience-log",
title: "客户经验值记录",
name: "member-grade-experience-log",
component: () => import("@/views/member/grade/experience-log.vue")
},
{

33
manager/src/utils/promotions.js
View File

@@ -85,3 +85,36 @@ export function memberPromotionsStatusRender(h, status) {
),
]);
}
/**
* 平台优惠券「活动时间 / 有效期」文案（活动获取券：effectiveDays 为领取后有效天数）
*/
export function formatPromotionCouponValidityHtml(row) {
if (!row) return "-";
if (row.getType === "ACTIVITY") {
const days = row.effectiveDays;
if (days !== undefined && days !== null && days !== "") {
const n = Number(days);
if (!Number.isNaN(n) && n > 0) {
return `领取后${n}天有效`;
}
}
}
if (row.startTime && row.endTime) {
return `${row.startTime}<br/>${row.endTime}`;
}
if (row.getType === "ACTIVITY" && row.rangeDayType === "DYNAMICTIME") {
return "长期有效";
}
return "-";
}
/** Table 列 render：活动时间（与 formatPromotionCouponValidityHtml 一致） */
export function promotionsCouponActivityTimeRender(h, params) {
const html = formatPromotionCouponValidityHtml(params.row);
if (html === "-") return h("div", "-");
if (html.indexOf("<br/>") !== -1) {
return h("div", { domProps: { innerHTML: html } });
}
return h("div", html);
}

7
manager/src/views/goods/goods-manage/category.vue
View File

@@ -15,9 +15,6 @@
>
<template slot="action" slot-scope="scope">
<div class="ops">
<template v-if="scope.row.level == 2">
<a class="ops-link" @click="parameterOperation(scope.row)">编辑绑定参数</a>
</template>
<a class="ops-link" @click="edit(scope.row)">编辑</a>
<a class="ops-link" @click="remove(scope.row)">删除</a>
<a v-show="scope.row.level != 2" class="ops-link" @click="addChildren(scope.row)">添加子分类</a>
@@ -340,10 +337,6 @@ export default {
}
});
},
// 编辑绑定参数
parameterOperation(v) {
this.$router.push({ name: "parameter", query: { id: v.id } });
},
// 添加子分类
addChildren(v) {
this.modalType = 0;

341
manager/src/views/goods/goods-manage/spec.vue
View File

@@ -1,341 +0,0 @@
<template>
<div class="search">
<Card>
<Form @submit.native.prevent @keydown.enter.native="handleSearch" ref="searchForm" :model="searchForm" inline :label-width="70"
class="search-form">
<Form-item label="规格名称" prop="specName">
<Input type="text" v-model="searchForm.specName" placeholder="请输入规格名称" clearable style="width: 240px" />
</Form-item>
<Button @click="handleSearch" type="primary" class="search-btn">搜索</Button>
</Form>
</Card>
<Card>
<Row class="operation padding-row">
<Button @click="add" type="primary">添加</Button>
<Button @click="delAll">批量删除</Button>
</Row>
<Table :loading="loading" border :columns="columns" :data="data" ref="table" sortable="custom"
@on-sort-change="changeSort" @on-selection-change="changeSelect">
</Table>
<Row type="flex" justify="end" class="mt_10">
<Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" @on-change="changePage"
@on-page-size-change="changePageSize" :page-size-opts="[20, 50, 100]" size="small" show-total show-elevator
show-sizer></Page>
</Row>
</Card>
<Modal :title="modalTitle" v-model="modalVisible" :mask-closable="false" :width="500">
<Form ref="form" :model="form" :label-width="100" :rules="formValidate">
<FormItem label="规格名称" prop="specName">
<Input v-model="form.specName" maxlength="30" clearable style="width: 100%" />
</FormItem>
<FormItem label="规格值" prop="specValue">
<Select v-model="form.specValue" placeholder="输入后回车添加" multiple filterable allow-create
:popper-append-to-body="false" popper-class="spec-values-popper"
style="width: 100%; text-align: left; margin-right: 10px" @on-create="handleCreate2">
<Option v-for="item in specValue" :value="item" :label="item" :key="item">
</Option>
</Select>
</FormItem>
</Form>
<div slot="footer">
<Button type="text" @click="modalVisible = false">取消</Button>
<Button type="primary" :loading="submitLoading" @click="saveSpec">提交</Button>
</div>
</Modal>
</div>
</template>
<script>
import { getSpecListData, insertSpec, updateSpec, delSpec } from "@/api/goods";
import { regular } from "@/utils";
export default {
name: "spec",
components: {},
data () {
return {
loading: true, // 表单加载状态
modalType: 0, // 添加或编辑标识
modalVisible: false, // 添加或编辑显示
modalTitle: "", // 添加或编辑标题
searchForm: {
// 搜索框初始化对象
pageNumber: 1, // 当前页数
pageSize: 20, // 页面大小
sort: "createTime", // 默认排序字段
order: "asc", // 默认排序方式
},
// 表单验证规则
formValidate: {
specName: [
regular.REQUIRED,
// regular.VARCHAR20
],
specValue: [regular.REQUIRED, regular.VARCHAR255],
},
form: {
// 添加或编辑表单对象初始化数据
specName: "",
specValue: "",
},
/** 编辑规格值 */
specValue: [],
submitLoading: false, // 添加或编辑提交状态
selectList: [], // 多选数据
selectCount: 0, // 多选计数
columns: [
// 表头
{
type: "selection",
width: 60,
align: "center",
},
{
title: "规格名称",
key: "specName",
width: 200,
},
{
title: "规格值",
key: "specValue",
minWidth: 250,
tooltip: true,
},
{
title: "操作",
key: "action",
align: "center",
fixed: "right",
width: 250,
render: (h, params) => {
return h("div", [
h(
"a",
{
style: {
color: "#2d8cf0",
cursor: "pointer",
textDecoration: "none",
marginRight: "5px",
},
on: {
click: () => {
this.edit(params.row);
},
},
},
"编辑"
),
h(
"span",
{ style: { margin: "0 8px", color: "#dcdee2" } },
"|"
),
h(
"a",
{
style: {
color: "#2d8cf0",
cursor: "pointer",
textDecoration: "none",
},
on: {
click: () => {
this.remove(params.row);
},
},
},
"删除"
),
]);
},
},
],
data: [], // 表单数据
total: 0, // 表单数据总数
};
},
methods: {
handleCreate2 (v) {
console.log(v);
},
//初始化，获取数据
init () {
this.getDataList();
},
//修改分页
changePage (v) {
this.searchForm.pageNumber = v;
this.getDataList();
this.clearSelectAll();
},
//修改页面大小
changePageSize (v) {
this.searchForm.pageSize = v;
this.getDataList();
},
//搜索参数
handleSearch () {
this.searchForm.pageNumber = 1;
this.searchForm.pageSize = 20;
this.getDataList();
},
//重置搜索参数
handleReset () {
this.$refs.searchForm.resetFields();
this.searchForm.pageNumber = 1;
this.searchForm.pageSize = 20;
// 重新加载数据
this.getDataList();
},
//更改排序
changeSort (e) {
this.searchForm.sort = e.key;
this.searchForm.order = e.order;
if (e.order === "normal") {
this.searchForm.order = "";
}
this.getDataList();
},
//清除已选择
clearSelectAll () {
this.$refs.table.selectAll(false);
},
//修改已选择
changeSelect (e) {
this.selectList = e;
this.selectCount = e.length;
},
//获取数据
getDataList () {
this.loading = true;
// 带多条件搜索参数获取表单数据 请自行修改接口
getSpecListData(this.searchForm).then((res) => {
this.loading = false;
if (res.success) {
this.data = res.result.records;
this.total = res.result.total;
}
});
this.loading = false;
},
//新增规格
saveSpec () {
this.$refs.form.validate((valid) => {
if (valid) {
this.submitLoading = true;
if (this.modalType === 0) {
if (this.data.find((item) => item.specName == this.form.specName)) {
this.$Message.error("请勿添加重复规格名称!");
this.submitLoading = false;
return;
}
// 添加 避免编辑后传入id等数据
delete this.form.id;
insertSpec(this.form).then((res) => {
this.submitLoading = false;
if (res.success) {
this.$Message.success("操作成功");
this.getDataList();
this.modalVisible = false;
}
});
} else {
// 编辑
updateSpec(this.form.id, this.form).then((res) => {
this.submitLoading = false;
if (res.success) {
this.$Message.success("操作成功");
this.getDataList();
this.modalVisible = false;
}
});
}
}
});
},
//弹出添加框
add () {
this.modalType = 0;
this.modalTitle = "添加";
this.$refs.form.resetFields();
this.specValue = "";
delete this.form.id;
this.modalVisible = true;
},
//弹出编辑框
edit (v) {
this.modalType = 1;
this.modalTitle = "编辑";
// 转换null为""
for (let attr in v) {
if (v[attr] === null) {
v[attr] = "";
}
}
let localVal = v.specValue;
this.form.specName = v.specName;
this.form.id = v.id;
this.$nextTick(() => {
this.$set(this.form, 'specValue', v.specValue);
})
if (localVal && localVal.indexOf("," > 0)) {
this.$set(this.form, 'specValue', localVal.split(","));
this.specValue = this.form.specValue;
} else {
this.specValue = [];
}
this.modalVisible = true;
},
// 删除规格
remove (v) {
this.$Modal.confirm({
title: "确认删除",
content: "您确认要删除 " + v.specName + " ?",
loading: true,
onOk: () => {
delSpec(v.id).then((res) => {
this.$Modal.remove();
if (res.success) {
this.$Message.success("操作成功");
this.getDataList();
}
});
},
});
},
// 批量删除
delAll () {
if (this.selectCount <= 0) {
this.$Message.warning("您还未选择要删除的数据");
return;
}
this.$Modal.confirm({
title: "确认删除",
content: "您确认要删除所选的 " + this.selectCount + " 条数据?",
loading: true,
onOk: () => {
let ids = "";
this.selectList.forEach(function (e) {
ids += e.id + ",";
});
ids = ids.substring(0, ids.length - 1);
delSpec(ids).then((res) => {
this.$Modal.remove();
if (res.success) {
this.$Message.success("删除成功");
this.clearSelectAll();
this.searchForm.pageNumber = 1;
this.getDataList();
}
});
},
});
},
},
mounted () {
this.init();
},
};
</script>

4
manager/src/views/main-parts/shrinkable-menu/shrinkable-menu.vue
View File

@@ -10,7 +10,7 @@
<Menu
ref="childrenMenu"
:active-name="$route.name"
width="100px"
width="120px"
@on-select="changeMenu"
>
<template v-for="item in menuList">
@@ -71,7 +71,7 @@ export default {
<style lang="scss" scoped>
.ivu-shrinkable-menu{
height: calc(100% - 60px);
width: 180px;
width: 200px;
display: flex;
}

6
manager/src/views/main.scss
View File

@@ -52,7 +52,7 @@
box-sizing: border-box;
position: fixed;
display: block;
padding-left: 180px;
padding-left: 200px;
width: 100%;
height: 100px;
z-index: 20;
@@ -218,12 +218,12 @@
.single-page-con {
min-width: 740px;
position: relative;
left: 180px;
left: 220px;
top: 100px;
right: 0;
bottom: 0;
height: calc(100% - 110px);
width: calc(100% - 180px);
width: calc(100% - 220px);
overflow: auto;
background-color: #f0f0f0;
z-index: 1;

992
manager/src/views/member/benefit/index.vue Normal file
View File

@@ -0,0 +1,992 @@
<template>
<div class="search member-benefit">
<Card>
<Row class="operation padding-row">
<Button type="primary" @click="openAdd">添加权益设置</Button>
</Row>
<Table
:loading="loading"
stripe
:columns="columns"
:data="data"
no-data-text="暂无数据"
class="mt_10 benefit-list-table benefit-list-table--no-vertical-borders"
></Table>
<Row type="flex" justify="end" class="mt_10">
<Page
:current="searchForm.pageNumber"
:total="total"
:page-size="searchForm.pageSize"
@on-change="changePage"
@on-page-size-change="changePageSize"
:page-size-opts="[20, 30, 50]"
size="small"
show-total
show-elevator
show-sizer
></Page>
</Row>
</Card>
<!-- 平台优惠券选择（与「添加优惠券活动」coupon-publish 相同组件） -->
<Modal
v-model="couponPickerVisible"
title="选择优惠券"
width="80%"
:z-index="3000"
:mask-closable="false"
@on-ok="handleCouponPickerClose"
@on-cancel="handleCouponPickerClose"
>
<couponTemplate
v-if="couponPickerVisible"
:selectedList="couponPickerSelectedList"
getType="ACTIVITY"
promotionStatus="START"
@selected="onCouponTemplateSelected"
/>
</Modal>
<Drawer
v-model="addFlag"
title="添加权益设置"
width="1120"
placement="right"
:z-index="950"
:mask-closable="false"
:closable="true"
scrollable
class-name="benefit-form-drawer"
>
<Form ref="addForm" :model="formAdd" :rules="rulesAdd" :label-width="110">
<FormItem label="权益类型" prop="benefitType">
<Select
v-model="formAdd.benefitType"
clearable
placeholder="请选择权益类型"
style="width: 100%"
@on-change="onAddBenefitTypeChange"
>
<Option v-for="item in benefitTypeOptions" :key="item.value" :value="item.value">{{ item.description }}</Option>
</Select>
</FormItem>
<FormItem
v-show="formAdd.benefitType === 'GIFT_POINT'"
label="赠送积分"
prop="giftPoint"
:required="formAdd.benefitType === 'GIFT_POINT'"
>
<InputNumber
v-model="formAdd.giftPoint"
:min="0"
:max="99999"
:precision="0"
style="width: 220px"
placeholder="必填，范围 0-99999"
/>
</FormItem>
<FormItem
v-show="formAdd.benefitType === 'COUPON_PACKAGE'"
label="赠送优惠券"
prop="couponPackageRows"
:required="formAdd.benefitType === 'COUPON_PACKAGE'"
>
<div>
<Button type="dashed" icon="ios-add" class="mb_10" @click="openCouponPicker('add')">添加优惠券</Button>
<Table
border
size="small"
:columns="couponPackageTableColumns"
:data="formAdd.couponPackageRows"
no-data-text="请添加优惠券"
></Table>
</div>
</FormItem>
<FormItem label="权益名称" prop="benefitName">
<Input v-model="formAdd.benefitName" maxlength="50" placeholder="请输入权益名称" />
</FormItem>
<FormItem label="权益LOGO" prop="benefitLogo">
<div class="benefit-logo-field">
<div v-if="formAdd.benefitLogo" class="benefit-logo-thumb">
<img :src="formAdd.benefitLogo" alt="" />
</div>
<div class="benefit-logo-upload">
<upload-pic-input v-model="formAdd.benefitLogo" placeholder="请上传权益 LOGO 图片地址" style="width: 100%" />
</div>
</div>
</FormItem>
<FormItem label="权益介绍" prop="benefitDesc">
<Input v-model="formAdd.benefitDesc" type="textarea" :rows="4" maxlength="500" placeholder="请输入权益介绍" />
</FormItem>
<FormItem label="启用状态" prop="benefitState">
<RadioGroup v-model="formAdd.benefitState">
<Radio label="OPEN">开启</Radio>
<Radio label="CLOSE">关闭</Radio>
</RadioGroup>
</FormItem>
<FormItem label="排序" prop="benefitSort">
<InputNumber v-model="formAdd.benefitSort" :min="1" :max="9999" :precision="0" style="width: 220px" />
</FormItem>
</Form>
<div class="benefit-drawer-footer-btns">
<Button @click="addFlag = false">取消</Button>
<Button type="primary" :loading="submitAddLoading" @click="submitAdd">提交</Button>
</div>
</Drawer>
<Drawer
v-model="editFlag"
title="编辑权益设置"
width="1120"
placement="right"
:z-index="950"
:mask-closable="false"
:closable="true"
scrollable
class-name="benefit-form-drawer"
>
<Form ref="editForm" :model="formEdit" :rules="rulesEdit" :label-width="110">
<Input v-model="formEdit.id" v-show="false" />
<FormItem label="权益类型" prop="benefitType">
<Select
v-model="formEdit.benefitType"
clearable
placeholder="请选择权益类型"
style="width: 100%"
@on-change="onEditBenefitTypeChange"
>
<Option v-for="item in benefitTypeOptions" :key="item.value" :value="item.value">{{ item.description }}</Option>
</Select>
</FormItem>
<FormItem
v-show="formEdit.benefitType === 'GIFT_POINT'"
label="赠送积分"
prop="giftPoint"
:required="formEdit.benefitType === 'GIFT_POINT'"
>
<InputNumber
v-model="formEdit.giftPoint"
:min="0"
:max="99999"
:precision="0"
style="width: 220px"
placeholder="必填，范围 0-99999"
/>
</FormItem>
<FormItem
v-show="formEdit.benefitType === 'COUPON_PACKAGE'"
label="赠送优惠券"
prop="couponPackageRows"
:required="formEdit.benefitType === 'COUPON_PACKAGE'"
>
<div>
<Button type="dashed" icon="ios-add" class="mb_10" @click="openCouponPicker('edit')">添加优惠券</Button>
<Table
border
size="small"
:columns="couponPackageTableColumnsEdit"
:data="formEdit.couponPackageRows"
no-data-text="请添加优惠券"
></Table>
</div>
</FormItem>
<FormItem label="权益名称" prop="benefitName">
<Input v-model="formEdit.benefitName" maxlength="50" placeholder="请输入权益名称" />
</FormItem>
<FormItem label="权益LOGO" prop="benefitLogo">
<div class="benefit-logo-field">
<div v-if="formEdit.benefitLogo" class="benefit-logo-thumb">
<img :src="formEdit.benefitLogo" alt="" />
</div>
<div class="benefit-logo-upload">
<upload-pic-input v-model="formEdit.benefitLogo" placeholder="请上传权益 LOGO 图片地址" style="width: 100%" />
</div>
</div>
</FormItem>
<FormItem label="权益介绍" prop="benefitDesc">
<Input v-model="formEdit.benefitDesc" type="textarea" :rows="4" maxlength="500" placeholder="请输入权益介绍" />
</FormItem>
<FormItem label="启用状态" prop="benefitState">
<RadioGroup v-model="formEdit.benefitState">
<Radio label="OPEN">开启</Radio>
<Radio label="CLOSE">关闭</Radio>
</RadioGroup>
</FormItem>
<FormItem label="排序" prop="benefitSort">
<InputNumber v-model="formEdit.benefitSort" :min="1" :max="9999" :precision="0" style="width: 220px" />
</FormItem>
</Form>
<div class="benefit-drawer-footer-btns">
<Button @click="editFlag = false">取消</Button>
<Button type="primary" :loading="submitEditLoading" @click="submitEdit">提交</Button>
</div>
</Drawer>
</div>
</template>
<script>
import * as API_Member from "@/api/member.js";
import { getPlatformCoupon } from "@/api/promotion";
import { formatPromotionCouponValidityHtml } from "@/utils/promotions";
import couponTemplate from "@/views/promotions/coupon/coupon.vue";
import uploadPicInput from "@/components/lili/upload-pic-input.vue";
const GIFT_POINT = "GIFT_POINT";
const COUPON_PACKAGE = "COUPON_PACKAGE";
const buildDefaultForm = () => ({
id: "",
benefitName: "",
benefitCode: "",
benefitType: "",
benefitLogo: "",
benefitDesc: "",
benefitSort: 1,
benefitState: "OPEN",
benefitConfig: "",
/** 仅 UI：赠送积分数量；提交时写入 benefitConfig */
giftPoint: null,
/** 仅 UI：券礼包已选优惠券（含展示字段）；提交时写入 benefitConfig.coupons */
couponPackageRows: [],
});
export default {
name: "memberBenefit",
components: {
uploadPicInput,
couponTemplate,
},
data() {
return {
benefitTypeOptions: [],
loading: false,
total: 0,
searchForm: {
pageNumber: 1,
pageSize: 20,
},
columns: [
{
title: "权益类型",
key: "benefitType",
width: 132,
render: (h, params) => {
const v = params.row.benefitType;
let text = "-";
if (v) {
const opt = this.benefitTypeOptions.find((o) => o.value === v);
text = opt ? opt.description : v;
}
return h(
"span",
{
attrs: { title: text },
class: "benefit-list-cell-ellipsis benefit-list-cell-ellipsis--type",
},
text
);
},
},
{
title: "权益名称",
key: "benefitName",
width: 188,
render: (h, params) => {
const text = params.row.benefitName || "-";
return h(
"span",
{
attrs: { title: text },
class: "benefit-list-cell-ellipsis benefit-list-cell-ellipsis--name",
},
text
);
},
},
{
title: "权益LOGO",
key: "benefitLogo",
width: 116,
align: "center",
render: (h, params) => {
const src = params.row.benefitLogo;
if (!src) return h("span", "-");
return h(
"div",
{
class: "benefit-logo-thumb benefit-logo-thumb--table",
},
[
h("img", {
attrs: { src, alt: "" },
}),
]
);
},
},
{
title: "状态",
key: "benefitState",
width: 118,
align: "center",
render: (h, params) => {
const row = params.row;
return h("i-switch", {
props: {
value: row.benefitState === "OPEN",
size: "large",
loading: !!row._benefitStateLoading,
},
on: {
"on-change": (checked) => {
this.onBenefitStateSwitch(row, checked);
},
},
}, [
h("span", { slot: "open" }, "开启"),
h("span", { slot: "close" }, "关闭"),
]);
},
},
{
title: "操作",
key: "action",
align: "center",
width: 140,
render: (h, params) => {
const linkStyle = {
color: "#2d8cf0",
cursor: "pointer",
textDecoration: "none",
};
const sep = h("span", { style: { margin: "0 8px", color: "#dcdee2" } }, "|");
return h("div", { style: { display: "flex", justifyContent: "center" } }, [
h("a", { style: linkStyle, on: { click: () => this.openEdit(params.row) } }, "编辑"),
sep,
h("a", { style: linkStyle, on: { click: () => this.remove(params.row) } }, "删除"),
]);
},
},
],
data: [],
addFlag: false,
editFlag: false,
submitAddLoading: false,
submitEditLoading: false,
formAdd: buildDefaultForm(),
formEdit: buildDefaultForm(),
couponPickerVisible: false,
couponPickerWhich: "add",
};
},
computed: {
rulesAdd() {
return this.buildFormRules("add");
},
rulesEdit() {
return this.buildFormRules("edit");
},
couponPackageTableColumns() {
return this.buildCouponPackageTableColumns("add");
},
couponPackageTableColumnsEdit() {
return this.buildCouponPackageTableColumns("edit");
},
/** 传给优惠券列表组件，用于勾选回显（与 coupon-publish 一致用 id） */
couponPickerSelectedList() {
const form = this.couponPickerWhich === "add" ? this.formAdd : this.formEdit;
return (form.couponPackageRows || []).map((r) => ({
id: r.couponId,
couponName: r.couponName || "",
}));
},
},
methods: {
buildFormRules(which) {
const formKey = which === "add" ? "formAdd" : "formEdit";
return {
benefitType: [{ required: true, message: "请选择权益类型", trigger: "change" }],
benefitName: [{ required: true, message: "请输入权益名称", trigger: "blur" }],
benefitLogo: [{ required: true, message: "请配置权益LOGO", trigger: "change" }],
benefitSort: [{ required: true, type: "number", message: "请输入排序", trigger: "change" }],
benefitState: [{ required: true, message: "请选择启用状态", trigger: "change" }],
giftPoint: [
{
validator: (rule, value, callback) => {
const form = this[formKey];
this.validateGiftPoint(form, value, callback);
},
trigger: ["change", "blur"],
},
],
couponPackageRows: [
{
validator: (rule, value, callback) => {
const form = this[formKey];
this.validateCouponPackage(form, callback);
},
trigger: "change",
},
],
};
},
validateGiftPoint(form, value, callback) {
if (form.benefitType !== GIFT_POINT) return callback();
if (value === null || value === undefined || value === "") {
return callback(new Error("请输入赠送积分"));
}
const n = Number(value);
if (Number.isNaN(n) || n < 0 || n > 99999) {
return callback(new Error("赠送积分范围为 0-99999"));
}
callback();
},
validateCouponPackage(form, callback) {
if (form.benefitType !== COUPON_PACKAGE) return callback();
const rows = form.couponPackageRows || [];
if (!rows.length) {
return callback(new Error("请添加至少一张优惠券"));
}
for (let i = 0; i < rows.length; i++) {
const q = Number(rows[i].quantity);
if (Number.isNaN(q) || q < 1 || q > 10) {
return callback(new Error("每张券赠送张数需在 1～10 之间"));
}
}
callback();
},
formatCouponFace(row) {
if (!row) return "-";
if (row.price !== undefined && row.price !== null && row.price !== "") {
return `¥${row.price}`;
}
if (row.couponDiscount !== undefined && row.couponDiscount !== null && row.couponDiscount !== "") {
return `${row.couponDiscount}折`;
}
return "-";
},
formatCouponValidity(row) {
return formatPromotionCouponValidityHtml(row);
},
buildCouponDisplayRow(detail, quantity) {
const qty = Math.min(10, Math.max(1, Number(quantity) || 1));
return {
couponId: detail.id,
quantity: qty,
couponName: detail.couponName || "",
faceValueLabel: this.formatCouponFace(detail),
validRange: this.formatCouponValidity(detail),
};
},
buildCouponPackageTableColumns(which) {
const formKey = which === "add" ? "formAdd" : "formEdit";
const linkStyle = { color: "#2d8cf0", cursor: "pointer" };
return [
{ title: "优惠券名称", key: "couponName", minWidth: 100, tooltip: true },
{
title: "有效期",
minWidth: 100,
render: (h, p) =>
h("span", {
domProps: { innerHTML: p.row.validRange || "-" },
}),
},
{ title: "面额", key: "faceValueLabel", minWidth: 100 },
{
title: "赠送张数",
key: "quantity",
width: 150,
render: (h, params) =>
h("InputNumber", {
props: {
min: 1,
max: 10,
precision: 0,
value: params.row.quantity,
},
style: { width: "100px" },
on: {
"on-change": (val) => {
this.$set(this[formKey].couponPackageRows[params.index], "quantity", val);
this.$nextTick(() => {
const ref = which === "add" ? this.$refs.addForm : this.$refs.editForm;
if (ref) ref.validateField("couponPackageRows");
});
},
},
}),
},
{
title: "操作",
key: "action",
width: 90,
align: "center",
render: (h, params) =>
h(
"a",
{
style: linkStyle,
on: {
click: () => {
this.removeCouponRow(which, params.index);
},
},
},
"删除"
),
},
];
},
/** 构造 benefitConfig JSON 字符串 */
buildBenefitConfigString(slice) {
const { benefitType, giftPoint, couponPackageRows } = slice;
if (benefitType === GIFT_POINT) {
return JSON.stringify({ giftPoint: Number(giftPoint) });
}
if (benefitType === COUPON_PACKAGE) {
const coupons = (couponPackageRows || []).map((r) => ({
couponId: String(r.couponId),
quantity: Math.min(10, Math.max(1, Number(r.quantity) || 1)),
}));
return JSON.stringify({ coupons });
}
return "";
},
/** 从详情 benefitConfig 解析赠送积分，解析失败时返回 null */
parseGiftPointFromConfig(benefitType, benefitConfigStr) {
if (benefitType !== GIFT_POINT || !benefitConfigStr) return null;
try {
const o = JSON.parse(benefitConfigStr);
if (o && typeof o.giftPoint !== "undefined") {
const n = Number(o.giftPoint);
return Number.isNaN(n) ? null : n;
}
} catch (e) {
/* ignore */
}
return null;
},
onAddBenefitTypeChange(val) {
if (val !== GIFT_POINT) {
this.formAdd.giftPoint = null;
}
if (val !== COUPON_PACKAGE) {
this.formAdd.couponPackageRows = [];
}
this.$nextTick(() => {
if (this.$refs.addForm && val !== GIFT_POINT) {
this.$refs.addForm.validateField("giftPoint");
}
if (this.$refs.addForm && val !== COUPON_PACKAGE) {
this.$refs.addForm.validateField("couponPackageRows");
}
});
},
onEditBenefitTypeChange(val) {
if (val !== GIFT_POINT) {
this.formEdit.giftPoint = null;
}
if (val !== COUPON_PACKAGE) {
this.formEdit.couponPackageRows = [];
}
this.$nextTick(() => {
if (this.$refs.editForm && val !== GIFT_POINT) {
this.$refs.editForm.validateField("giftPoint");
}
if (this.$refs.editForm && val !== COUPON_PACKAGE) {
this.$refs.editForm.validateField("couponPackageRows");
}
});
},
parseCouponsFromConfig(str) {
if (!str) return [];
try {
const o = JSON.parse(str);
if (o && Array.isArray(o.coupons)) {
return o.coupons.map((c) => ({
couponId: c.couponId,
quantity: c.quantity,
}));
}
} catch (e) {
/* ignore */
}
return [];
},
/** 与添加时 formatCouponFace 一致；仅有 faceValueText 时去掉「减免」前缀 */
normalizeCouponFaceFromDetail(item) {
let face = this.formatCouponFace(item);
if (face !== "-") return face;
const raw = item.faceValueText;
if (raw == null || raw === "") return "-";
return String(raw)
.replace(/^减免现金\s*/, "")
.replace(/^减免\s*/, "")
.trim() || "-";
},
/** 管理端详情 couponItems → 表格行（面额展示与添加一致） */
mapCouponItemsToPackageRows(items) {
if (!Array.isArray(items)) return [];
return items.map((item) => {
const face = this.normalizeCouponFaceFromDetail(item);
const validHtml = item.validityText
? String(item.validityText).replace(/\n/g, "<br/>")
: "-";
return {
couponId: item.couponId,
quantity: Math.min(10, Math.max(1, Number(item.quantity) || 1)),
couponName: item.couponName || "",
faceValueLabel: face,
validRange: validHtml,
};
});
},
async hydrateCouponRowsForEdit(snippets) {
const rows = [];
for (const s of snippets) {
const cid = s.couponId;
const qty = s.quantity;
try {
const res = await getPlatformCoupon(cid);
if (res && res.success && res.result) {
rows.push(this.buildCouponDisplayRow(res.result, qty));
} else {
rows.push({
couponId: cid,
quantity: Math.min(10, Math.max(1, Number(qty) || 1)),
couponName: String(cid),
faceValueLabel: "-",
validRange: "-",
});
}
} catch (e) {
rows.push({
couponId: cid,
quantity: Math.min(10, Math.max(1, Number(qty) || 1)),
couponName: String(cid),
faceValueLabel: "-",
validRange: "-",
});
}
}
this.$set(this.formEdit, "couponPackageRows", rows);
},
handleCouponPickerClose() {
this.couponPickerVisible = false;
},
openCouponPicker(which) {
this.couponPickerWhich = which;
this.couponPickerVisible = true;
},
/** 与 coupon-publish `selectedCoupon`：表格多选变更时同步到券礼包配置 */
onCouponTemplateSelected(selectedRows) {
const which = this.couponPickerWhich;
const form = which === "add" ? this.formAdd : this.formEdit;
const refName = which === "add" ? "addForm" : "editForm";
const list = selectedRows || [];
const rows = list.map((row) => {
const existing = (form.couponPackageRows || []).find((r) => String(r.couponId) === String(row.id));
const qty = existing ? existing.quantity : 1;
return this.buildCouponDisplayRow(row, qty);
});
this.$set(form, "couponPackageRows", rows);
this.$nextTick(() => {
const ref = this.$refs[refName];
if (ref) ref.validateField("couponPackageRows");
});
},
removeCouponRow(which, index) {
const form = which === "add" ? this.formAdd : this.formEdit;
const refName = which === "add" ? "addForm" : "editForm";
form.couponPackageRows.splice(index, 1);
this.$nextTick(() => {
const ref = this.$refs[refName];
if (ref) ref.validateField("couponPackageRows");
});
},
init() {
this.loadBenefitTypes();
this.getData();
},
loadBenefitTypes() {
API_Member.getMemberBenefitTypes().then((res) => {
if (res && res.success && Array.isArray(res.result)) {
this.benefitTypeOptions = res.result;
} else {
this.benefitTypeOptions = [];
}
});
},
changePage(page) {
this.searchForm.pageNumber = page;
this.getData();
},
changePageSize(size) {
this.searchForm.pageSize = size;
this.searchForm.pageNumber = 1;
this.getData();
},
getData() {
this.loading = true;
const params = { ...this.searchForm };
API_Member.getMemberBenefitByPage(params).then((res) => {
this.loading = false;
if (res && res.success && res.result) {
this.data = Array.isArray(res.result.records) ? res.result.records : [];
this.total = Number(res.result.total) || 0;
} else {
this.data = [];
this.total = 0;
}
});
},
openAdd() {
this.addFlag = true;
this.submitAddLoading = false;
this.$nextTick(() => {
if (this.$refs.addForm) this.$refs.addForm.resetFields();
this.formAdd = buildDefaultForm();
});
},
submitAdd() {
if (!this.$refs.addForm) {
this.$Message.warning("表单未就绪，请稍后重试");
return;
}
this.$refs.addForm.validate((valid) => {
if (!valid) return;
this.submitAddLoading = true;
const { giftPoint, couponPackageRows, ...rest } = this.formAdd;
const payload = {
...rest,
benefitConfig: this.buildBenefitConfigString({
benefitType: this.formAdd.benefitType,
giftPoint,
couponPackageRows,
}),
};
API_Member.addMemberBenefit(payload).then((res) => {
this.submitAddLoading = false;
if (res && res.success) {
this.$Message.success("添加成功");
this.addFlag = false;
this.getData();
} else if (res && res.message) {
this.$Message.error(res.message);
} else {
this.$Message.error("添加失败");
}
}).catch(() => {
this.submitAddLoading = false;
this.$Message.error("网络异常，请稍后重试");
});
});
},
openEdit(row) {
this.editFlag = true;
this.submitEditLoading = false;
this.$nextTick(() => {
if (this.$refs.editForm) this.$refs.editForm.resetFields();
});
API_Member.getMemberBenefit(row.id).then((res) => {
if (res && res.success && res.result) {
const raw = res.result;
/** 新接口：{ benefit, couponItems }；旧接口：扁平 MemberBenefit */
const detail = raw.benefit != null ? raw.benefit : raw;
const couponItems = raw.couponItems;
const bt = detail.benefitType || "";
const parsed = this.parseGiftPointFromConfig(bt, detail.benefitConfig || "");
const couponSnippets = this.parseCouponsFromConfig(detail.benefitConfig || "");
let couponRows = [];
if (bt === COUPON_PACKAGE && Array.isArray(couponItems) && couponItems.length) {
couponRows = this.mapCouponItemsToPackageRows(couponItems);
}
this.formEdit = {
id: detail.id || row.id || "",
benefitName: detail.benefitName || "",
benefitCode: detail.benefitCode || "",
benefitType: bt,
benefitLogo: detail.benefitLogo || "",
benefitDesc: detail.benefitDesc || "",
benefitSort: Number(detail.benefitSort) > 0 ? Number(detail.benefitSort) : 1,
benefitState: detail.benefitState || "OPEN",
benefitConfig: detail.benefitConfig || "",
giftPoint: bt === GIFT_POINT ? (parsed !== null ? parsed : null) : null,
couponPackageRows: couponRows,
};
if (bt === COUPON_PACKAGE && couponRows.length === 0 && couponSnippets.length) {
this.hydrateCouponRowsForEdit(couponSnippets);
}
}
});
},
submitEdit() {
if (!this.$refs.editForm) {
this.$Message.warning("表单未就绪，请稍后重试");
return;
}
this.$refs.editForm.validate((valid) => {
if (!valid) return;
this.submitEditLoading = true;
const { id, giftPoint, couponPackageRows, ...rest } = this.formEdit;
const payload = {
...rest,
benefitConfig: this.buildBenefitConfigString({
benefitType: this.formEdit.benefitType,
giftPoint,
couponPackageRows,
}),
};
API_Member.updateMemberBenefit(id, payload).then((res) => {
this.submitEditLoading = false;
if (res && res.success) {
this.$Message.success("修改成功");
this.editFlag = false;
this.getData();
} else if (res && res.message) {
this.$Message.error(res.message);
} else {
this.$Message.error("修改失败");
}
}).catch(() => {
this.submitEditLoading = false;
this.$Message.error("网络异常，请稍后重试");
});
});
},
onBenefitStateSwitch(row, checked) {
const nextState = checked ? "OPEN" : "CLOSE";
const prevState = row.benefitState;
if (nextState === prevState) return;
const text = checked ? "开启" : "关闭";
this.$Modal.confirm({
title: "提示",
content: `<p>确定${text}该客户权益？</p>`,
onOk: () => {
this.$set(row, "_benefitStateLoading", true);
return API_Member.updateMemberBenefitState(row.id, nextState)
.then((res) => {
this.$set(row, "_benefitStateLoading", false);
if (res && res.success) {
this.$Message.success(`${text}成功`);
this.$set(row, "benefitState", nextState);
} else {
this.getData();
}
})
.catch(() => {
this.$set(row, "_benefitStateLoading", false);
});
},
});
},
remove(row) {
this.$Modal.confirm({
title: "提示",
content: "<p>确定删除该客户权益？</p>",
onOk: () => {
API_Member.deleteMemberBenefit(row.id).then((res) => {
if (res && res.success) {
this.$Message.success("删除成功");
this.getData();
} else if (res && res.message) {
this.$Message.error(res.message);
}
});
},
});
},
},
mounted() {
this.init();
},
};
</script>
<style lang="scss" scoped>
.benefit-drawer-footer-btns {
margin-top: 24px;
padding-top: 16px;
border-top: 1px solid #e8eaec;
text-align: right;
}
.benefit-drawer-footer-btns .ivu-btn + .ivu-btn {
margin-left: 8px;
}
</style>
<!--
权益 LOGO 缩略图：固定 100×100。
不使用 .member-benefit 前缀：Modal 默认 transfer 到 body，弹窗内节点不在 .member-benefit 下。
Table 列 render 生成的节点在子组件内，同样用非 scoped。
-->
<style lang="scss">
.benefit-logo-thumb {
width: 100px;
height: 100px;
min-width: 100px;
min-height: 100px;
max-width: 100px;
max-height: 100px;
flex-shrink: 0;
border: 1px solid #dcdee2;
border-radius: 4px;
background: #f8f8f9;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
}
.benefit-logo-thumb img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.benefit-logo-thumb--table {
margin: 0 auto;
}
/* 权益列表：固定类型/名称列宽并省略过长文案（悬浮 title 可看全文） */
.member-benefit .benefit-list-table table {
table-layout: fixed;
}
.member-benefit .benefit-list-cell-ellipsis {
display: inline-block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
vertical-align: middle;
}
.member-benefit .benefit-list-cell-ellipsis--type {
max-width: 118px;
}
.member-benefit .benefit-list-cell-ellipsis--name {
max-width: 172px;
}
/* 列表不出现列与列之间的竖线（保留行间分隔） */
.member-benefit .benefit-list-table--no-vertical-borders .ivu-table th,
.member-benefit .benefit-list-table--no-vertical-borders .ivu-table td {
border-right: none !important;
}
</style>
<style lang="scss" scoped>
.benefit-logo-field {
display: flex;
align-items: flex-start;
gap: 12px;
flex-wrap: wrap;
}
.benefit-logo-upload {
flex: 1;
min-width: 200px;
}
</style>

197
manager/src/views/member/grade/experience-log.vue Normal file
View File

@@ -0,0 +1,197 @@
<template>
<div class="search">
<Card>
<Form
ref="searchForm"
:model="searchForm"
inline
:label-width="90"
@keydown.enter.native="handleSearch"
@submit.native.prevent
class="search-form"
>
<FormItem label="客户手机号" prop="mobile">
<Input
v-model="searchForm.memberMobile"
clearable
placeholder="请输入客户手机号"
style="width: 220px"
/>
</FormItem>
<FormItem label="规则" prop="ruleKey">
<Select v-model="searchForm.ruleKey" clearable filterable style="width: 220px">
<Option v-for="item in ruleOptions" :key="item.value" :value="item.value">
{{ item.label }}
</Option>
</Select>
</FormItem>
<Button type="primary" icon="ios-search" @click="handleSearch">搜索</Button>
</Form>
</Card>
<Card>
<Table
:loading="loading"
border
:columns="columns"
:data="data"
class="mt_10"
></Table>
<Row type="flex" justify="end" class="mt_10">
<Page
:current="searchForm.pageNumber"
:total="total"
:page-size="searchForm.pageSize"
@on-change="changePage"
@on-page-size-change="changePageSize"
:page-size-opts="[20, 50, 100]"
size="small"
show-total
show-elevator
show-sizer
></Page>
</Row>
</Card>
</div>
</template>
<script>
import * as API_Member from "@/api/member";
const RULE_OPTIONS = [
{ value: "CONSUME", label: "消费" },
{ value: "REGISTER", label: "注册" },
{ value: "SIGN_IN", label: "签到" },
{ value: "COMMENT", label: "评价" },
{ value: "SHARE", label: "分享商城" },
{ value: "PROFILE", label: "完善信息" },
{ value: "FOLLOW_STORE", label: "关注店铺" },
{ value: "BIND_WECHAT", label: "绑定微信" },
{ value: "ADD_ADDRESS", label: "添加收货地址" },
{ value: "SHARE_REGISTER", label: "分享注册" },
{ value: "SHARE_BUY", label: "分享购买" },
];
export default {
name: "memberGradeExperienceLog",
data() {
return {
loading: false,
total: 0,
data: [],
ruleOptions: RULE_OPTIONS,
searchForm: {
pageNumber: 1,
pageSize: 20,
memberMobile: "",
ruleKey: "",
},
columns: [
{
title: "客户手机号",
key: "memberMobile",
width: 140,
tooltip: true,
render: (h, params) => {
const v = params.row.memberMobile || params.row.mobile || "-";
return h("span", v);
},
},
{
title: "规则名称",
key: "ruleName",
width: 150,
tooltip: true,
render: (h, params) => {
const text = params.row.ruleName || this.findRuleName(params.row.ruleKey) || "-";
return h("span", text);
},
},
{
title: "变化经验值",
key: "value",
width: 120,
render: (h, params) => {
const v =
params.row.value ??
params.row.variableExperience ??
params.row.experience ??
params.row.variableValue;
return h("span", v == null ? "-" : v);
},
},
{
title: "经验值限额",
key: "maxValue",
width: 120,
render: (h, params) => {
const v = params.row.maxValue ?? params.row.maxExperience ?? params.row.limitValue;
return h("span", v == null ? "-" : v);
},
},
{
title: "操作说明",
key: "content",
minWidth: 200,
tooltip: true,
render: (h, params) => {
const text = params.row.content || params.row.remark || params.row.description || "-";
return h("span", text);
},
},
{ title: "创建时间", key: "createTime", width: 170 },
],
};
},
mounted() {
this.init();
},
methods: {
findRuleName(ruleKey) {
const hit = this.ruleOptions.find((item) => item.value === ruleKey);
return hit ? hit.label : "";
},
init() {
this.getData();
},
buildParams() {
const params = {
pageNumber: this.searchForm.pageNumber,
pageSize: this.searchForm.pageSize,
};
if (this.searchForm.memberMobile) params.mobile = this.searchForm.memberMobile;
if (this.searchForm.ruleKey) params.ruleKey = this.searchForm.ruleKey;
return params;
},
getData() {
this.loading = true;
API_Member.getMemberExperienceByPage(this.buildParams())
.then((res) => {
if (res && res.success && res.result) {
this.data = res.result.records || [];
this.total = res.result.total || 0;
} else {
this.data = [];
this.total = 0;
}
})
.finally(() => {
this.loading = false;
});
},
handleSearch() {
this.searchForm.pageNumber = 1;
this.getData();
},
changePage(v) {
this.searchForm.pageNumber = v;
this.getData();
},
changePageSize(v) {
this.searchForm.pageNumber = 1;
this.searchForm.pageSize = v;
this.getData();
},
},
};
</script>

556
manager/src/views/member/grade/experience-setting.vue Normal file
View File

@@ -0,0 +1,556 @@
<template>
<div class="experience-setting">
<Card>
<Form :label-width="120" label-position="right">
<Table :loading="loading" :columns="columns" :data="form.items" class="mt_10 experience-table"></Table>
<FormItem label="经验值说明" style="margin-top: 16px" class="desc-item">
<Input
v-model="form.description"
type="textarea"
:rows="4"
maxlength="500"
show-word-limit
placeholder="请输入经验值说明"
/>
</FormItem>
<FormItem>
<Button type="primary" :loading="submitLoading" @click="submit">保存</Button>
</FormItem>
</Form>
</Card>
</div>
</template>
<script>
import { getSetting, setSetting } from "@/api/index";
const RULE_OPTIONS = [
{ ruleKey: "CONSUME", ruleName: "消费" },
{ ruleKey: "REGISTER", ruleName: "注册" },
{ ruleKey: "SIGN_IN", ruleName: "签到" },
{ ruleKey: "COMMENT", ruleName: "评价" },
{ ruleKey: "SHARE", ruleName: "分享商城" },
{ ruleKey: "PROFILE", ruleName: "完善信息" },
{ ruleKey: "FOLLOW_STORE", ruleName: "关注店铺" },
{ ruleKey: "BIND_WECHAT", ruleName: "绑定微信" },
{ ruleKey: "ADD_ADDRESS", ruleName: "添加收货地址" },
{ ruleKey: "SHARE_REGISTER", ruleName: "分享注册" },
{ ruleKey: "SHARE_BUY", ruleName: "分享购买" },
];
const defaultRuleItem = (rule) => ({
ruleKey: rule.ruleKey,
ruleName: rule.ruleName,
enabled: false,
value: 1,
maxValue: null,
});
const defaultForm = () => ({
items: RULE_OPTIONS.map((item) => defaultRuleItem(item)),
description: "",
});
export default {
name: "memberGradeExperienceSetting",
data() {
return {
loading: false,
submitLoading: false,
form: defaultForm(),
columns: [
{
title: "是否开启",
key: "enabled",
width: 90,
align: "center",
render: (h, params) => {
return h("Checkbox", {
props: { value: !!this.form.items[params.index].enabled },
on: {
"on-change": (checked) => {
this.updateRuleEnabled(params.index, checked);
},
},
});
},
},
{
title: "类型",
key: "ruleName",
width: 160,
},
{
title: "经验值(1-100)",
key: "value",
minWidth: 700,
render: (h, params) => {
const row = this.form.items[params.index] || {};
const inputNode = h("Input", {
style: { width: "120px" },
props: {
value: row.value == null ? "" : String(row.value),
number: true,
},
on: {
input: (val) => {
this.updateRuleValue(params.index, val);
},
"on-change": (v) => {
this.updateRuleValue(params.index, v);
},
"on-blur": () => {
this.commitRuleValue(params.index);
},
},
});
const maxInputNode = h("Input", {
style: { width: "120px" },
props: {
value: row.maxValue == null ? "" : String(row.maxValue),
number: true,
},
on: {
input: (val) => {
this.updateRuleMaxValue(params.index, val);
},
"on-change": (v) => {
this.updateRuleMaxValue(params.index, v);
},
"on-blur": () => {
this.commitRuleMaxValue(params.index);
},
},
});
if (params.row.ruleKey === "REGISTER") {
return h(
"div",
{ style: { display: "flex", flexDirection: "column", alignItems: "flex-start" } },
[
h(
"div",
{ style: { display: "flex", alignItems: "center" } },
[h("span", { style: { marginRight: "8px" } }, "获得经验值:"), inputNode]
),
h(
"div",
{ style: { marginTop: "6px", color: "#808695", fontSize: "12px" } },
"会员注册成功后可获得经验值"
),
]
);
}
if (params.row.ruleKey === "SHARE") {
return h(
"div",
{ style: { display: "flex", flexDirection: "column", alignItems: "flex-start" } },
[
h(
"div",
{ style: { display: "flex", alignItems: "center", flexWrap: "wrap" } },
[
h(
"div",
{ style: { display: "flex", alignItems: "center", marginRight: "16px" } },
[h("span", { style: { marginRight: "8px" } }, "分享商品详情页获得经验值："), inputNode]
),
h(
"div",
{ style: { display: "flex", alignItems: "center" } },
[h("span", { style: { marginRight: "8px" } }, "可获得经验值限额："), maxInputNode]
),
]
),
h(
"div",
{ style: { marginTop: "6px", color: "#808695", fontSize: "12px" } },
"会员分享商城页面可获得的经验值"
),
]
);
}
if (params.row.ruleKey === "COMMENT") {
return h(
"div",
{ style: { display: "flex", flexDirection: "column", alignItems: "flex-start" } },
[
h(
"div",
{ style: { display: "flex", alignItems: "center", flexWrap: "wrap" } },
[h("span", { style: { marginRight: "8px" } }, "对已购买商品完成提交评论获得经验值："), inputNode]
),
h(
"div",
{ style: { marginTop: "6px", color: "#808695", fontSize: "12px" } },
"仅针对评论字数大于30字的评论进行发放"
),
]
);
}
if (params.row.ruleKey === "FOLLOW_STORE") {
return h(
"div",
{ style: { display: "flex", flexDirection: "column", alignItems: "flex-start" } },
[
h(
"div",
{ style: { display: "flex", alignItems: "center", flexWrap: "wrap" } },
[
h(
"div",
{ style: { display: "flex", alignItems: "center", marginRight: "16px" } },
[h("span", { style: { marginRight: "8px" } }, "获得经验值："), inputNode]
),
h(
"div",
{ style: { display: "flex", alignItems: "center" } },
[h("span", { style: { marginRight: "8px" } }, "可获得经验值限额："), maxInputNode]
),
]
),
h(
"div",
{ style: { marginTop: "6px", color: "#808695", fontSize: "12px" } },
"关注店铺可获得经验值，每个客户D相同店铺仅第一次关注可进行获得"
),
]
);
}
if (params.row.ruleKey === "PROFILE") {
return h(
"div",
{ style: { display: "flex", flexDirection: "column", alignItems: "flex-start" } },
[
h(
"div",
{ style: { display: "flex", alignItems: "center", flexWrap: "wrap" } },
[h("span", { style: { marginRight: "8px" } }, "获得经验值："), inputNode]
),
h(
"div",
{ style: { marginTop: "6px", color: "#808695", fontSize: "12px" } },
"完善个人基本信息可获得经验值，每个会员仅可获得一次"
),
]
);
}
if (params.row.ruleKey === "BIND_WECHAT") {
return h(
"div",
{ style: { display: "flex", flexDirection: "column", alignItems: "flex-start" } },
[
h(
"div",
{ style: { display: "flex", alignItems: "center", flexWrap: "wrap" } },
[h("span", { style: { marginRight: "8px" } }, "获取经验值："), inputNode]
),
h(
"div",
{ style: { marginTop: "6px", color: "#808695", fontSize: "12px" } },
"绑定微信成功获得经验值，每个会员仅可获得一次"
),
]
);
}
if (params.row.ruleKey === "ADD_ADDRESS") {
return h(
"div",
{ style: { display: "flex", flexDirection: "column", alignItems: "flex-start" } },
[
h(
"div",
{ style: { display: "flex", alignItems: "center", flexWrap: "wrap" } },
[h("span", { style: { marginRight: "8px" } }, "获取经验值："), inputNode]
),
h(
"div",
{ style: { marginTop: "6px", color: "#808695", fontSize: "12px" } },
"添加收货地址后获得经验值，每个会员仅可获得一次"
),
]
);
}
if (params.row.ruleKey === "SHARE_REGISTER") {
return h(
"div",
{ style: { display: "flex", flexDirection: "column", alignItems: "flex-start" } },
[
h(
"div",
{ style: { display: "flex", alignItems: "center", flexWrap: "wrap" } },
[
h(
"div",
{ style: { display: "flex", alignItems: "center", marginRight: "16px" } },
[h("span", { style: { marginRight: "8px" } }, "获取的经验值："), inputNode]
),
h(
"div",
{ style: { display: "flex", alignItems: "center" } },
[h("span", { style: { marginRight: "8px" } }, "可获得经验值限额："), maxInputNode]
),
]
),
h(
"div",
{ style: { marginTop: "6px", color: "#808695", fontSize: "12px" } },
"仅被注册成功后才可获得相应奖励经验值"
),
]
);
}
if (params.row.ruleKey === "SHARE_BUY") {
return h(
"div",
{ style: { display: "flex", flexDirection: "column", alignItems: "flex-start" } },
[
h(
"div",
{ style: { display: "flex", alignItems: "center", flexWrap: "wrap" } },
[
h(
"div",
{ style: { display: "flex", alignItems: "center", marginRight: "16px" } },
[h("span", { style: { marginRight: "8px" } }, "获取的经验值："), inputNode]
),
h(
"div",
{ style: { display: "flex", alignItems: "center" } },
[h("span", { style: { marginRight: "8px" } }, "可获得经验值限额："), maxInputNode]
),
]
),
h(
"div",
{ style: { marginTop: "6px", color: "#808695", fontSize: "12px" } },
"仅被购买成功后才可获得相应奖励经验值"
),
]
);
}
if (params.row.ruleKey === "SIGN_IN") {
return h(
"div",
{ style: { display: "flex", flexDirection: "column", alignItems: "flex-start" } },
[
h(
"div",
{ style: { display: "flex", alignItems: "center", flexWrap: "wrap" } },
[h("span", { style: { marginRight: "8px" } }, "获取的经验值："), inputNode]
),
h(
"div",
{ style: { marginTop: "6px", color: "#808695", fontSize: "12px" } },
"客户每日签到后可获的经验值"
),
]
);
}
if (params.row.ruleKey === "CONSUME") {
return h(
"div",
{ style: { display: "flex", flexDirection: "column", alignItems: "flex-start" } },
[
h(
"div",
{ style: { display: "flex", alignItems: "center", flexWrap: "wrap" } },
[h("span", { style: { marginRight: "8px" } }, "1元获取经验值："), inputNode]
),
h(
"div",
{ style: { marginTop: "6px", color: "#808695", fontSize: "12px" } },
"客户消费1元可获取经验值，向下取整"
),
]
);
}
return inputNode;
},
},
],
};
},
mounted() {
this.loadData();
},
methods: {
getRawInputValue(v) {
return v && v.target ? v.target.value : v;
},
updateRuleEnabled(index, enabled) {
const item = this.form.items[index] || {};
this.$set(this.form.items, index, {
...item,
enabled: !!enabled,
});
},
updateRuleValue(index, v) {
const raw = this.getRawInputValue(v);
const next = Number(raw);
const item = this.form.items[index] || {};
this.$set(this.form.items, index, {
...item,
value: Number.isFinite(next) ? next : null,
});
},
commitRuleValue(index) {
const item = this.form.items[index] || {};
const next = Number(item.value);
let value = 1;
if (Number.isFinite(next)) {
if (next < 1) value = 1;
else if (next > 100) value = 100;
else value = Math.floor(next);
}
this.$set(this.form.items, index, {
...item,
value,
});
},
updateRuleMaxValue(index, v) {
const raw = this.getRawInputValue(v);
const item = this.form.items[index] || {};
if (raw == null || raw === "") {
this.$set(this.form.items, index, {
...item,
maxValue: null,
});
return;
}
const next = Number(raw);
this.$set(this.form.items, index, {
...item,
maxValue: Number.isFinite(next) ? next : null,
});
},
commitRuleMaxValue(index) {
const item = this.form.items[index] || {};
if (item.maxValue == null || item.maxValue === "") {
this.$set(this.form.items, index, {
...item,
maxValue: null,
});
return;
}
const next = Number(item.maxValue);
this.$set(this.form.items, index, {
...item,
maxValue: Number.isFinite(next) && next >= 1 ? Math.floor(next) : null,
});
},
normalizeConfig(val) {
if (!val) return {};
if (typeof val === "string") {
try {
return JSON.parse(val);
} catch (e) {
return {};
}
}
if (typeof val === "object") return val;
return {};
},
normalizeItems(items) {
const map = {};
if (Array.isArray(items)) {
items.forEach((item) => {
if (!item || !item.ruleKey) return;
map[item.ruleKey] = item;
});
}
return RULE_OPTIONS.map((rule) => {
const hit = map[rule.ruleKey] || {};
return {
ruleKey: rule.ruleKey,
ruleName: hit.ruleName || rule.ruleName,
enabled: !!hit.enabled,
value: Number(hit.value) > 0 ? Number(hit.value) : 1,
maxValue: hit.maxValue == null || hit.maxValue === "" ? null : Number(hit.maxValue),
};
});
},
loadData() {
this.loading = true;
getSetting("EXPERIENCE_SETTING")
.then((res) => {
if (res && res.success) {
const cfg = this.normalizeConfig(res.result);
this.form = {
items: this.normalizeItems(cfg.items),
description: cfg.description || "",
};
} else {
this.form = defaultForm();
}
})
.finally(() => {
this.loading = false;
});
},
validateForm() {
const invalid = this.form.items.find((item) => {
const v = Number(item.value);
if (!Number.isInteger(v) || v < 1 || v > 100) return true;
if (item.maxValue != null && item.maxValue !== "") {
const m = Number(item.maxValue);
if (!Number.isInteger(m) || m < 1) return true;
}
return false;
});
if (invalid) {
this.$Message.error("请检查经验值配置，经验值范围为1-100，限额需为正整数");
return false;
}
return true;
},
submit() {
if (!this.validateForm()) return;
const payload = {
items: this.form.items.map((item) => ({
ruleKey: item.ruleKey,
ruleName: item.ruleName,
enabled: !!item.enabled,
value: Number(item.value),
maxValue: item.maxValue == null || item.maxValue === "" ? null : Number(item.maxValue),
})),
description: this.form.description || "",
};
this.submitLoading = true;
setSetting("EXPERIENCE_SETTING", payload)
.then((res) => {
if (res && res.success) {
this.$Message.success("保存成功");
}
})
.finally(() => {
this.submitLoading = false;
});
},
},
};
</script>
<style scoped lang="scss">
.experience-setting {
padding: 2px 0;
}
::v-deep .experience-table .ivu-table th {
background: #fafbfc;
}
::v-deep .experience-table .ivu-table td {
padding-top: 12px;
padding-bottom: 12px;
}
::v-deep .experience-table .ivu-table-cell {
font-size: 13px;
line-height: 1.7;
}
::v-deep .desc-item .ivu-form-item-label {
font-size: 16px;
font-weight: 600;
}
</style>

547
manager/src/views/member/grade/index.vue Normal file
View File

@@ -0,0 +1,547 @@
<template>
<div class="search">
<Card>
<Row class="operation padding-row">
<Button type="primary" @click="openAdd">添加客户等级</Button>
</Row>
<Table
:loading="loading"
border
:columns="columns"
:data="data"
class="mt_10"
></Table>
</Card>
<Modal v-model="addFlag" title="添加客户等级" width="720" :z-index="950" :mask-closable="false">
<Form ref="addForm" :model="formAdd" :rules="rules" :label-width="110">
<FormItem label="等级名称" prop="gradeName">
<Input v-model="formAdd.gradeName" maxlength="50" placeholder="请输入等级名称" />
</FormItem>
<FormItem label="是否默认" prop="isDefault">
<RadioGroup v-model="formAdd.isDefault">
<Radio :label="true">是</Radio>
<Radio :label="false">否</Radio>
</RadioGroup>
</FormItem>
<FormItem label="等级图标" prop="gradeImage">
<upload-pic-input v-model="formAdd.gradeImage"></upload-pic-input>
</FormItem>
<FormItem label="等级背景图" prop="gradeBackground">
<upload-pic-input v-model="formAdd.gradeBackground"></upload-pic-input>
</FormItem>
<FormItem label="字体颜色" prop="gradeFontColor">
<Input v-model="formAdd.gradeFontColor" maxlength="20" placeholder="如：#333333" />
</FormItem>
<FormItem label="所需经验值" prop="requiredExperience">
<InputNumber v-model="formAdd.requiredExperience" :min="1" :precision="0" style="width: 220px"></InputNumber>
</FormItem>
<FormItem label="等级排序" prop="gradeSort">
<InputNumber v-model="formAdd.gradeSort" :min="1" :max="9999" :precision="0" style="width: 220px"></InputNumber>
</FormItem>
<FormItem label="等级开关" prop="gradeState">
<RadioGroup v-model="formAdd.gradeState">
<Radio label="OPEN">开启</Radio>
<Radio label="CLOSE">关闭</Radio>
</RadioGroup>
</FormItem>
<FormItem label="关联权益" prop="benefitIds">
<Select
:value="addBenefitOrder"
multiple
filterable
placeholder="请选择客户权益"
style="width: 100%"
@on-change="onAddBenefitIdsChange"
>
<Option v-for="b in benefitOptions" :key="b.id" :value="String(b.id)">{{ benefitOptionLabel(b) }}</Option>
</Select>
</FormItem>
</Form>
<div slot="footer">
<Button @click="addFlag = false">取消</Button>
<Button type="primary" :loading="submitAddLoading" @click="submitAdd">确定</Button>
</div>
</Modal>
<Modal v-model="editFlag" title="编辑客户等级" width="720" :z-index="950" :mask-closable="false">
<Form ref="editForm" :model="formEdit" :rules="rules" :label-width="110">
<Input v-model="formEdit.id" v-show="false" />
<FormItem label="等级名称" prop="gradeName">
<Input v-model="formEdit.gradeName" maxlength="50" placeholder="请输入等级名称" />
</FormItem>
<FormItem label="是否默认" prop="isDefault">
<RadioGroup v-model="formEdit.isDefault">
<Radio :label="true">是</Radio>
<Radio :label="false">否</Radio>
</RadioGroup>
</FormItem>
<FormItem label="等级图标" prop="gradeImage">
<upload-pic-input v-model="formEdit.gradeImage"></upload-pic-input>
</FormItem>
<FormItem label="等级背景图" prop="gradeBackground">
<upload-pic-input v-model="formEdit.gradeBackground"></upload-pic-input>
</FormItem>
<FormItem label="字体颜色" prop="gradeFontColor">
<Input v-model="formEdit.gradeFontColor" maxlength="20" placeholder="如：#333333" />
</FormItem>
<FormItem label="所需经验值" prop="requiredExperience">
<InputNumber v-model="formEdit.requiredExperience" :min="1" :precision="0" style="width: 220px"></InputNumber>
</FormItem>
<FormItem label="等级排序" prop="gradeSort">
<InputNumber v-model="formEdit.gradeSort" :min="1" :max="9999" :precision="0" style="width: 220px"></InputNumber>
</FormItem>
<FormItem label="等级开关" prop="gradeState">
<RadioGroup v-model="formEdit.gradeState">
<Radio label="OPEN">开启</Radio>
<Radio label="CLOSE">关闭</Radio>
</RadioGroup>
</FormItem>
<FormItem label="关联权益" prop="benefitIds">
<Select
:value="editBenefitOrder"
multiple
filterable
placeholder="请选择客户权益"
style="width: 100%"
@on-change="onEditBenefitIdsChange"
>
<Option v-for="b in benefitOptions" :key="b.id" :value="String(b.id)">{{ benefitOptionLabel(b) }}</Option>
</Select>
</FormItem>
</Form>
<div slot="footer">
<Button @click="editFlag = false">取消</Button>
<Button type="primary" :loading="submitEditLoading" @click="submitEdit">确定</Button>
</div>
</Modal>
</div>
</template>
<script>
import * as API_Member from "@/api/member.js";
import uploadPicInput from "@/components/lili/upload-pic-input";
const buildDefaultForm = () => ({
id: "",
gradeName: "",
isDefault: false,
gradeImage: "",
gradeBackground: "",
gradeFontColor: "",
requiredExperience: 1,
gradeSort: 1,
gradeState: "OPEN",
benefitIds: "",
});
/** 权益多选：新勾选追加到末尾，取消勾选移除，保持已有顺序 */
function syncOrderedBenefitIds(prevOrder, selected) {
const sel = Array.isArray(selected) ? selected.map((id) => String(id)) : [];
const out = [];
(prevOrder || []).forEach((id) => {
const s = String(id);
if (sel.includes(s)) out.push(s);
});
sel.forEach((s) => {
if (!out.includes(s)) out.push(s);
});
return out;
}
export default {
name: "memberGrade",
components: {
uploadPicInput,
},
data() {
return {
loading: true,
columns: [
{
title: "等级名称",
key: "gradeName",
width: 130,
tooltip: true,
},
{
title: "默认等级",
key: "isDefault",
width: 95,
render: (h, params) => {
const yes = params.row.isDefault === true;
return h(
"Tag",
{
props: {
color: yes ? "success" : "default",
},
},
yes ? "是" : "否"
);
},
},
{
title: "等级图标",
key: "gradeImage",
width: 100,
render: (h, params) => {
if (!params.row.gradeImage) return h("span", "-");
return h("img", {
attrs: {
src: params.row.gradeImage,
alt: "等级图标",
},
style: {
width: "48px",
height: "48px",
objectFit: "contain",
border: "1px solid #dcdee2",
borderRadius: "4px",
background: "#fff",
},
});
},
},
{
title: "等级背景图",
key: "gradeBackground",
width: 120,
render: (h, params) => {
if (!params.row.gradeBackground) return h("span", "-");
return h("img", {
attrs: {
src: params.row.gradeBackground,
alt: "等级背景图",
},
style: {
width: "64px",
height: "40px",
objectFit: "cover",
border: "1px solid #dcdee2",
borderRadius: "4px",
background: "#fff",
},
});
},
},
{
title: "所需经验值",
key: "requiredExperience",
width: 110,
},
{
title: "等级排序",
key: "gradeSort",
width: 95,
},
{
title: "状态",
key: "gradeState",
width: 118,
align: "center",
render: (h, params) => {
const row = params.row;
return h("i-switch", {
props: {
value: row.gradeState === "OPEN",
size: "large",
loading: !!row._gradeStateLoading,
},
on: {
"on-change": (checked) => {
this.onGradeStateSwitch(row, checked);
},
},
}, [
h("span", { slot: "open" }, "开启"),
h("span", { slot: "close" }, "关闭"),
]);
},
},
{
title: "操作",
key: "action",
align: "center",
width: 130,
render: (h, params) => {
const linkStyle = {
color: "#2d8cf0",
cursor: "pointer",
textDecoration: "none",
};
const sep = h(
"span",
{ style: { margin: "0 8px", color: "#dcdee2" } },
"|"
);
return h(
"div",
{ class: "ops", style: { display: "flex", justifyContent: "center" } },
[
h(
"a",
{ style: linkStyle, on: { click: () => this.openEdit(params.row) } },
"编辑"
),
sep,
h(
"a",
{ style: linkStyle, on: { click: () => this.remove(params.row) } },
"删除"
),
]
);
},
},
],
data: [],
addFlag: false,
editFlag: false,
submitAddLoading: false,
submitEditLoading: false,
formAdd: buildDefaultForm(),
formEdit: buildDefaultForm(),
/** 关联权益 id 顺序（与 benefitIds 一致） */
addBenefitOrder: [],
editBenefitOrder: [],
benefitOptions: [],
benefitTypeOptions: [],
benefitOptionsLoading: false,
editDetailLoading: false,
rules: {
gradeName: [{ required: true, message: "请输入等级名称", trigger: "blur" }],
gradeImage: [{ required: true, message: "请上传等级图标", trigger: "change" }],
requiredExperience: [{ required: true, type: "number", message: "请输入所需经验值", trigger: "change" }],
gradeSort: [{ required: true, type: "number", message: "请输入等级排序", trigger: "change" }],
gradeState: [{ required: true, message: "请选择等级开关", trigger: "change" }],
},
};
},
methods: {
benefitOptionLabel(b) {
if (!b) return "";
const name = b.benefitName || String(b.id);
const opt = this.benefitTypeOptions.find((o) => o.value === b.benefitType);
const typeText = opt ? opt.description : b.benefitType || "";
return typeText ? `${name}（${typeText}）` : name;
},
onAddBenefitIdsChange(val) {
this.addBenefitOrder = syncOrderedBenefitIds(this.addBenefitOrder, val);
},
onEditBenefitIdsChange(val) {
this.editBenefitOrder = syncOrderedBenefitIds(this.editBenefitOrder, val);
},
loadBenefitTypes() {
API_Member.getMemberBenefitTypes().then((res) => {
if (res && res.success && Array.isArray(res.result)) {
this.benefitTypeOptions = res.result;
} else {
this.benefitTypeOptions = [];
}
});
},
loadBenefitOptions() {
this.benefitOptionsLoading = true;
const pageSize = 500;
const fetchPage = (pageNumber) =>
API_Member.getMemberBenefitByPage({ pageNumber, pageSize, sort: "benefitSort", order: "asc" });
return fetchPage(1)
.then((res) => {
if (!(res && res.success && res.result)) {
this.benefitOptions = [];
return;
}
const records = Array.isArray(res.result.records) ? res.result.records : [];
const total = Number(res.result.total) || records.length;
let all = records.slice();
if (total > pageSize) {
const pages = Math.ceil(total / pageSize);
const rest = [];
for (let p = 2; p <= pages; p++) {
rest.push(fetchPage(p));
}
return Promise.all(rest).then((results) => {
results.forEach((r) => {
if (r && r.success && r.result && Array.isArray(r.result.records)) {
all = all.concat(r.result.records);
}
});
this.benefitOptions = all;
});
}
this.benefitOptions = all;
})
.catch(() => {
this.benefitOptions = [];
})
.finally(() => {
this.benefitOptionsLoading = false;
});
},
parseBenefitIdsFromString(str) {
return String(str || "")
.split(",")
.map((s) => s.trim())
.filter(Boolean);
},
fillEditFormFromGrade(grade, benefitsOrderedIds) {
this.formEdit = {
id: grade.id || "",
gradeName: grade.gradeName || "",
isDefault: grade.isDefault === true,
gradeImage: grade.gradeImage || "",
gradeBackground: grade.gradeBackground || "",
gradeFontColor: grade.gradeFontColor || "",
requiredExperience: Number(grade.requiredExperience) > 0 ? Number(grade.requiredExperience) : 1,
gradeSort: Number(grade.gradeSort) > 0 ? Number(grade.gradeSort) : 1,
gradeState: grade.gradeState || "OPEN",
benefitIds: grade.benefitIds || "",
};
this.editBenefitOrder = (benefitsOrderedIds || []).map((id) => String(id));
},
init() {
this.getData();
this.loadBenefitTypes();
this.loadBenefitOptions();
},
getData() {
this.loading = true;
API_Member.getMemberGradeByPage().then((res) => {
this.loading = false;
if (res && res.success) {
this.data = Array.isArray(res.result) ? res.result : [];
}
});
},
openAdd() {
this.addFlag = true;
this.submitAddLoading = false;
if (!this.benefitOptions.length && !this.benefitOptionsLoading) {
this.loadBenefitOptions();
}
this.$nextTick(() => {
if (this.$refs.addForm) this.$refs.addForm.resetFields();
this.formAdd = buildDefaultForm();
this.addBenefitOrder = [];
});
},
submitAdd() {
this.$refs.addForm.validate((valid) => {
if (!valid) return;
this.submitAddLoading = true;
const { benefitIds: _omit, ...rest } = this.formAdd;
const payload = {
...rest,
benefitIds: (this.addBenefitOrder || []).join(","),
};
API_Member.addMemberGrade(payload).then((res) => {
this.submitAddLoading = false;
if (res && res.success) {
this.$Message.success("添加成功");
this.addFlag = false;
this.getData();
}
});
});
},
openEdit(row) {
this.editFlag = true;
this.submitEditLoading = false;
this.editDetailLoading = true;
if (!this.benefitOptions.length && !this.benefitOptionsLoading) {
this.loadBenefitOptions();
}
this.$nextTick(() => {
if (this.$refs.editForm) this.$refs.editForm.resetFields();
});
API_Member.getMemberGrade(row.id)
.then((res) => {
this.editDetailLoading = false;
if (res && res.success && res.result) {
const raw = res.result;
const grade = raw.grade != null ? raw.grade : raw;
const benefits = Array.isArray(raw.benefits) ? raw.benefits : [];
const orderedIds = benefits.length
? benefits.map((b) => b.id).filter((id) => id != null && id !== "")
: String(grade.benefitIds || "")
.split(",")
.map((s) => s.trim())
.filter(Boolean);
this.fillEditFormFromGrade(grade, orderedIds);
} else {
this.fillEditFormFromGrade(row, this.parseBenefitIdsFromString(row.benefitIds));
}
})
.catch(() => {
this.editDetailLoading = false;
this.fillEditFormFromGrade(row, this.parseBenefitIdsFromString(row.benefitIds));
});
},
submitEdit() {
this.$refs.editForm.validate((valid) => {
if (!valid) return;
this.submitEditLoading = true;
const { id, benefitIds: _omit, ...rest } = this.formEdit;
const payload = {
...rest,
benefitIds: (this.editBenefitOrder || []).join(","),
};
API_Member.updateMemberGrade(id, payload).then((res) => {
this.submitEditLoading = false;
if (res && res.success) {
this.$Message.success("修改成功");
this.editFlag = false;
this.getData();
}
});
});
},
onGradeStateSwitch(row, checked) {
const nextState = checked ? "OPEN" : "CLOSE";
const prevState = row.gradeState;
if (nextState === prevState) return;
const text = checked ? "开启" : "关闭";
this.$Modal.confirm({
title: "提示",
content: `<p>确定${text}该客户等级？</p>`,
onOk: () => {
this.$set(row, "_gradeStateLoading", true);
return API_Member.updateMemberGradeState(row.id, nextState)
.then((res) => {
this.$set(row, "_gradeStateLoading", false);
if (res && res.success) {
this.$Message.success(`${text}成功`);
this.$set(row, "gradeState", nextState);
} else {
this.getData();
}
})
.catch(() => {
this.$set(row, "_gradeStateLoading", false);
});
},
});
},
remove(row) {
this.$Modal.confirm({
title: "提示",
content: "<p>确定删除该客户等级？</p>",
onOk: () => {
API_Member.deleteMemberGrade(row.id).then((res) => {
if (res && res.success) {
this.$Message.success("删除成功");
this.getData();
} else if (res && res.message) {
this.$Message.error(res.message);
}
});
},
});
},
},
mounted() {
this.init();
},
};
</script>

31
manager/src/views/member/list/index.vue
View File

@@ -23,6 +23,11 @@
<Option v-for="item in memberGroupList" :value="item.id" :key="item.id">{{ item.groupName }}</Option>
</Select>
</Form-item>
<Form-item label="会员等级" prop="gradeId">
<Select v-model="searchForm.gradeId" clearable filterable style="width: 240px">
<Option v-for="item in memberGradeList" :value="item.id" :key="item.id">{{ item.gradeName }}</Option>
</Select>
</Form-item>
<Button @click="handleSearch" class="search-btn" type="primary" icon="ios-search">搜索</Button>
</Form>
</Row>
@@ -255,6 +260,7 @@ export default {
groupId: [{ required: true, message: "请选择会员分组", trigger: "change" }],
},
memberGroupList: [],
memberGradeList: [],
memberPointRule: {
type: [{ required: true, message: "请选择类型", trigger: "change" }],
point: [
@@ -358,6 +364,23 @@ export default {
);
},
},
{
title: "经验值",
key: "experience",
minWidth: 100,
render: (h, params) => {
return h("div", {}, params.row.experience == null ? "0" : params.row.experience);
},
},
{
title: "会员等级",
key: "gradeName",
minWidth: 120,
tooltip: true,
render: (h, params) => {
return h("div", {}, params.row.gradeName || "-");
},
},
{
title: "余额",
key: "memberWallet",
@@ -589,6 +612,13 @@ export default {
}
});
},
loadMemberGradeList() {
API_Member.getMemberGradeByPage({ pageNumber: 1, pageSize: 1000 }).then((res) => {
if (res && res.success && res.result) {
this.memberGradeList = res.result || [];
}
});
},
clearSelection() {
if (this.$refs.table && this.$refs.table.clearSelection) {
this.$refs.table.clearSelection();
@@ -867,6 +897,7 @@ export default {
this.getData();
if (!this.selectedMember) {
this.loadMemberGroupList();
this.loadMemberGradeList();
}
},
};

22
manager/src/views/promotions/coupon/coupon.vue
View File

@@ -127,6 +127,7 @@ import {
import {
promotionsStatusRender,
promotionsScopeTypeRender,
promotionsCouponActivityTimeRender,
} from "@/utils/promotions";
export default {
@@ -148,13 +149,14 @@ export default {
// 表头
{
type: "selection",
width: 100,
width: 52,
align: "center",
fixed: "left",
/* 不使用 fixed：左侧固定列与主体表格分开渲染，叠加全局 .ivu-table table{width:100%} 易在接缝处留白；勾选列无需横向钉住 */
},
{
title: "优惠券名称",
key: "couponName",
minWidth: 140,
width: 180,
tooltip: true,
},
@@ -238,21 +240,7 @@ export default {
{
title: "活动时间",
width: 200,
render: (h, params) => {
if (
params?.row?.getType === "ACTIVITY" &&
params?.row?.rangeDayType === "DYNAMICTIME"
) {
return h("div", "长期有效");
} else if (params?.row?.startTime && params?.row?.endTime) {
return h("div", {
domProps: {
innerHTML:
params.row.startTime + "<br/>" + params.row.endTime,
},
});
}
},
render: promotionsCouponActivityTimeRender,
},
{
title: "状态",

8
manager/src/views/sys/setting-manage/authLogin/WECHAT_CONNECT.vue
View File

@@ -55,10 +55,10 @@ export default {
return {
ruleValidate: {}, // 验证规则
way: { // 类型
APP: "移动应用端",
H5: "移动端",
WECHAT_MP: "小程序端",
PC: "PC端",
APP: "APP",
H5: "手机网页（微商城）",
WECHAT_MP: "微信小程序",
PC: "WEB网页",
},
formValidate: {} // 表单数据
};