feat: 积分商品对接完成
This commit is contained in:
parent
5c200241a8
commit
70133838a0
|
@ -240,5 +240,23 @@ export const marketing = {
|
||||||
method: "post",
|
method: "post",
|
||||||
data
|
data
|
||||||
});
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
// 双倍积分商品列表
|
||||||
|
getDoublePointsProductPage: data => {
|
||||||
|
return $http.request({
|
||||||
|
url: `/merchant-api/product/double-points/page`,
|
||||||
|
method: "post",
|
||||||
|
data
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
// 双倍积分商品启用/禁用状态切换
|
||||||
|
changeEnableDoublePointsProduct: data => {
|
||||||
|
return $http.request({
|
||||||
|
url: `/merchant-api/product/change/enable/double-points`,
|
||||||
|
method: "post",
|
||||||
|
data
|
||||||
|
});
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
@ -1,70 +1,165 @@
|
||||||
<template>
|
<template>
|
||||||
<div style="height: calc(100vh - 200px)">
|
<div style="height: calc(100vh - 200px)">
|
||||||
<obj-table-plus
|
<!-- Tab切换组件 -->
|
||||||
ref="oTable"
|
<el-tabs v-model="activeTab" @tab-click="handleTabClick">
|
||||||
style="height: 100%"
|
<!-- 积分优惠Tab -->
|
||||||
:tableCols="tableCols"
|
<el-tab-pane label="积分优惠" name="points-discount">
|
||||||
:tableProp="tableProp"
|
<obj-table-plus
|
||||||
@query="queryList"
|
ref="oTable"
|
||||||
v-model="dataList"
|
style="height: calc(100vh - 280px)"
|
||||||
:tableEvent="tableEvent"
|
:tableCols="tableCols"
|
||||||
:enableAutoQuery="false"
|
:tableProp="tableProp"
|
||||||
>
|
@query="queryList"
|
||||||
<template slot="tableTop">
|
v-model="dataList"
|
||||||
<el-form :inline="true" :model="formInline" class="demo-form-inline">
|
:tableEvent="tableEvent"
|
||||||
<el-form-item v-if="storeList.length > 1" label="商铺">
|
:enableAutoQuery="false"
|
||||||
<el-select
|
>
|
||||||
v-model="formInline.shopIdList"
|
<template slot="tableTop">
|
||||||
placeholder="请选择商铺"
|
<el-form
|
||||||
multiple
|
:inline="true"
|
||||||
collapse-tags
|
:model="formInline"
|
||||||
style="width: 200px"
|
class="demo-form-inline"
|
||||||
>
|
>
|
||||||
<el-option
|
<el-form-item v-if="storeList.length > 1" label="商铺">
|
||||||
v-for="item in storeList"
|
<el-select
|
||||||
:key="item.shopId"
|
v-model="formInline.shopIdList"
|
||||||
:label="item.shopName"
|
placeholder="请选择商铺"
|
||||||
:value="item.shopId"
|
multiple
|
||||||
|
collapse-tags
|
||||||
|
style="width: 200px"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="item in storeList"
|
||||||
|
:key="item.shopId"
|
||||||
|
:label="item.shopName"
|
||||||
|
:value="item.shopId"
|
||||||
|
>
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="商品ID">
|
||||||
|
<el-input
|
||||||
|
placeholder="请输入商品ID"
|
||||||
|
v-model="formInline.productId"
|
||||||
|
></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="商品名称">
|
||||||
|
<el-input
|
||||||
|
placeholder="请输入商品名称"
|
||||||
|
v-model="formInline.productName"
|
||||||
|
></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" @click="$refs.oTable.reload()"
|
||||||
|
>查询</el-button
|
||||||
|
>
|
||||||
|
<el-button type="primary" @click="reset">重置</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<div class="mb-2">
|
||||||
|
<el-button @click="add" type="primary" size="small"
|
||||||
|
>+添加</el-button
|
||||||
>
|
>
|
||||||
</el-option>
|
</div>
|
||||||
</el-select>
|
</template>
|
||||||
</el-form-item>
|
</obj-table-plus>
|
||||||
<el-form-item label="商品ID">
|
<!-- 商品选择弹框 -->
|
||||||
<el-input
|
<product-selector
|
||||||
placeholder="请输入商品ID"
|
:storeList="storeList"
|
||||||
v-model="formInline.productId"
|
@success="$refs.oTable.reload()"
|
||||||
></el-input>
|
ref="productSelector"
|
||||||
</el-form-item>
|
></product-selector>
|
||||||
<el-form-item label="商品名称">
|
|
||||||
<el-input
|
<!-- 积分商品配置弹框 -->
|
||||||
placeholder="请输入商品名称"
|
<points-product-config
|
||||||
v-model="formInline.productName"
|
@success="$refs.oTable.reload()"
|
||||||
></el-input>
|
ref="pointsProductConfig"
|
||||||
</el-form-item>
|
></points-product-config>
|
||||||
<el-form-item>
|
</el-tab-pane>
|
||||||
<el-button type="primary" @click="$refs.oTable.reload()"
|
|
||||||
>查询</el-button
|
<!-- 双倍积分Tab -->
|
||||||
>
|
<el-tab-pane label="双倍积分" name="double-points">
|
||||||
<el-button type="primary" @click="reset">重置</el-button>
|
<obj-table-plus
|
||||||
</el-form-item>
|
ref="doublePointsTable"
|
||||||
</el-form>
|
style="height: calc(100vh - 280px)"
|
||||||
<div class="mb-2">
|
:tableCols="doublePointsTableCols"
|
||||||
<el-button @click="add" type="primary" size="small">+添加</el-button>
|
:tableProp="doublePointsTableProp"
|
||||||
</div>
|
@query="queryDoublePointsList"
|
||||||
</template>
|
v-model="doublePointsDataList"
|
||||||
</obj-table-plus>
|
:tableEvent="doublePointsTableEvent"
|
||||||
<!-- 商品选择弹框 -->
|
:enableAutoQuery="false"
|
||||||
<product-selector
|
>
|
||||||
:storeList="storeList"
|
<template slot="tableTop">
|
||||||
@success="$refs.oTable.reload()"
|
<el-form
|
||||||
ref="productSelector"
|
:inline="true"
|
||||||
></product-selector>
|
:model="doublePointsFormInline"
|
||||||
|
class="demo-form-inline"
|
||||||
|
>
|
||||||
|
<el-form-item v-if="storeList.length > 1" label="商铺">
|
||||||
|
<el-select
|
||||||
|
v-model="doublePointsFormInline.shopIdList"
|
||||||
|
placeholder="请选择商铺"
|
||||||
|
multiple
|
||||||
|
collapse-tags
|
||||||
|
style="width: 200px"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="item in storeList"
|
||||||
|
:key="item.shopId"
|
||||||
|
:label="item.shopName"
|
||||||
|
:value="item.shopId"
|
||||||
|
>
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="店铺名称">
|
||||||
|
<el-input
|
||||||
|
v-model="doublePointsFormInline.shopName"
|
||||||
|
placeholder="请输入店铺名称"
|
||||||
|
clearable
|
||||||
|
style="width: 200px"
|
||||||
|
></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="商品名称">
|
||||||
|
<el-input
|
||||||
|
v-model="doublePointsFormInline.productName"
|
||||||
|
placeholder="请输入商品名称"
|
||||||
|
clearable
|
||||||
|
style="width: 200px"
|
||||||
|
></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="商品ID">
|
||||||
|
<el-input
|
||||||
|
v-model="doublePointsFormInline.id"
|
||||||
|
placeholder="请输入商品ID"
|
||||||
|
clearable
|
||||||
|
style="width: 200px"
|
||||||
|
></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="是否启用双倍积分">
|
||||||
|
<el-select
|
||||||
|
v-model="doublePointsFormInline.enableDoublePoints"
|
||||||
|
placeholder="请选择"
|
||||||
|
clearable
|
||||||
|
style="width: 150px"
|
||||||
|
>
|
||||||
|
<el-option label="全部" :value="null"></el-option>
|
||||||
|
<el-option label="已启用" :value="true"></el-option>
|
||||||
|
<el-option label="未启用" :value="false"></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" @click="getDoublePointsDataList()"
|
||||||
|
>查询</el-button
|
||||||
|
>
|
||||||
|
<el-button @click="resetDoublePoints()">重置</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</template>
|
||||||
|
</obj-table-plus>
|
||||||
|
</el-tab-pane>
|
||||||
|
</el-tabs>
|
||||||
|
|
||||||
<!-- 积分商品配置弹框 -->
|
|
||||||
<points-product-config
|
|
||||||
@success="$refs.oTable.reload()"
|
|
||||||
ref="pointsProductConfig"
|
|
||||||
></points-product-config>
|
|
||||||
<!-- 查看详情 -->
|
<!-- 查看详情 -->
|
||||||
<!-- <viewDetails ref="viewDetails"></viewDetails> -->
|
<!-- <viewDetails ref="viewDetails"></viewDetails> -->
|
||||||
</div>
|
</div>
|
||||||
|
@ -81,6 +176,7 @@ export default {
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
activeTab: "points-discount", // 默认显示积分优惠tab
|
||||||
dataList: [],
|
dataList: [],
|
||||||
formInline: {
|
formInline: {
|
||||||
marketId: "",
|
marketId: "",
|
||||||
|
@ -101,7 +197,23 @@ export default {
|
||||||
},
|
},
|
||||||
productFilterType: "SALE",
|
productFilterType: "SALE",
|
||||||
selectList: [],
|
selectList: [],
|
||||||
value1: []
|
value1: [],
|
||||||
|
// 双倍积分相关数据
|
||||||
|
doublePointsDataList: [],
|
||||||
|
doublePointsFormInline: {
|
||||||
|
shopIdList: [],
|
||||||
|
shopName: "",
|
||||||
|
productName: "",
|
||||||
|
id: "",
|
||||||
|
enableDoublePoints: null
|
||||||
|
},
|
||||||
|
doublePointsTableProp: {
|
||||||
|
"auto-resize": true,
|
||||||
|
border: true,
|
||||||
|
height: "auto",
|
||||||
|
"row-id": "id",
|
||||||
|
"show-overflow": false
|
||||||
|
}
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
|
@ -207,6 +319,76 @@ export default {
|
||||||
productSpecName: ""
|
productSpecName: ""
|
||||||
};
|
};
|
||||||
this.$refs.oTable.reload();
|
this.$refs.oTable.reload();
|
||||||
|
},
|
||||||
|
// Tab切换处理
|
||||||
|
handleTabClick(tab) {
|
||||||
|
if (tab.name === "double-points") {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.$refs.doublePointsTable.reload();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 双倍积分相关方法
|
||||||
|
queryDoublePointsList(pageNo, pageSize) {
|
||||||
|
const queryParams = {
|
||||||
|
shopIdList: this.doublePointsFormInline.shopIdList || [],
|
||||||
|
shopName: this.doublePointsFormInline.shopName || "",
|
||||||
|
productName: this.doublePointsFormInline.productName || "",
|
||||||
|
id: this.doublePointsFormInline.id || "",
|
||||||
|
enableDoublePoints: this.doublePointsFormInline.enableDoublePoints
|
||||||
|
};
|
||||||
|
|
||||||
|
// 如果enableDoublePoints为null,则不传该参数
|
||||||
|
if (queryParams.enableDoublePoints === null) {
|
||||||
|
delete queryParams.enableDoublePoints;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.$api.marketing
|
||||||
|
.getDoublePointsProductPage(queryParams)
|
||||||
|
.then(res => {
|
||||||
|
console.log("双倍积分列表:", res);
|
||||||
|
this.$refs.doublePointsTable.complete(
|
||||||
|
res.data.data.data || [],
|
||||||
|
res.data.data.data ? res.data.data.data.length : 0
|
||||||
|
);
|
||||||
|
})
|
||||||
|
.catch(err => {
|
||||||
|
console.error("查询双倍积分商品失败:", err);
|
||||||
|
this.$refs.doublePointsTable.complete(false);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
getDoublePointsDataList() {
|
||||||
|
this.$refs.doublePointsTable.reload();
|
||||||
|
},
|
||||||
|
resetDoublePoints() {
|
||||||
|
this.doublePointsFormInline = {
|
||||||
|
shopIdList: [],
|
||||||
|
shopName: "",
|
||||||
|
productName: "",
|
||||||
|
id: "",
|
||||||
|
enableDoublePoints: null
|
||||||
|
};
|
||||||
|
this.$refs.doublePointsTable.reload();
|
||||||
|
},
|
||||||
|
handleDoublePointsEnableChange(row) {
|
||||||
|
// 使用双倍积分启用/禁用接口
|
||||||
|
const changeData = {
|
||||||
|
id: row.id,
|
||||||
|
enableDoublePoints: row.enableDoublePoints
|
||||||
|
};
|
||||||
|
|
||||||
|
this.$api.marketing
|
||||||
|
.changeEnableDoublePointsProduct(changeData)
|
||||||
|
.then(() => {
|
||||||
|
this.$message.success("状态切换成功");
|
||||||
|
this.$refs.doublePointsTable.reload();
|
||||||
|
})
|
||||||
|
.catch(err => {
|
||||||
|
console.error("状态切换失败:", err);
|
||||||
|
this.$message.error("状态切换失败");
|
||||||
|
// 恢复原状态
|
||||||
|
row.enableDoublePoints = !row.enableDoublePoints;
|
||||||
|
});
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
@ -366,6 +548,58 @@ export default {
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
},
|
},
|
||||||
|
// 双倍积分表格列配置
|
||||||
|
doublePointsTableCols() {
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
title: "商品ID",
|
||||||
|
align: "center",
|
||||||
|
field: "id"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "商品名称",
|
||||||
|
align: "center",
|
||||||
|
field: "productName"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "归属店铺",
|
||||||
|
align: "center",
|
||||||
|
field: "shopName"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "商品原价",
|
||||||
|
align: "center",
|
||||||
|
field: "marketPrice",
|
||||||
|
type: "jsx",
|
||||||
|
render: ({ row }) => {
|
||||||
|
return <span>¥{row.marketPrice}</span>;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "原有商品状态",
|
||||||
|
align: "center",
|
||||||
|
field: "productStatus",
|
||||||
|
type: "jsx",
|
||||||
|
render: ({ row }) => {
|
||||||
|
return <span>{row.productStatus === "UP" ? "上架" : "下架"}</span>;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "是否启用",
|
||||||
|
align: "center",
|
||||||
|
field: "enableDoublePoints",
|
||||||
|
type: "jsx",
|
||||||
|
render: ({ row }) => {
|
||||||
|
return (
|
||||||
|
<el-switch
|
||||||
|
v-model={row.enableDoublePoints}
|
||||||
|
onChange={() => this.handleDoublePointsEnableChange(row)}
|
||||||
|
></el-switch>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
];
|
||||||
|
},
|
||||||
tableEvent() {
|
tableEvent() {
|
||||||
return {
|
return {
|
||||||
"checkbox-all": ({ records, reserves }) => {
|
"checkbox-all": ({ records, reserves }) => {
|
||||||
|
@ -376,6 +610,9 @@ export default {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
doublePointsTableEvent() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
...mapState("userData", [
|
...mapState("userData", [
|
||||||
"isMerchant",
|
"isMerchant",
|
||||||
"marketList",
|
"marketList",
|
||||||
|
|
Loading…
Reference in New Issue