368 lines
9.1 KiB
Vue
368 lines
9.1 KiB
Vue
|
<template>
|
|||
|
|
<div class="level-setting">
|
|||
|
|
<!-- 等级设置标题 -->
|
|||
|
|
<div class="header">
|
|||
|
|
<h3>等级设置</h3>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 摊铺选择 -->
|
|||
|
|
<div class="shop-selector" v-if="storeList.length > 1">
|
|||
|
|
<el-form :inline="true" :model="formInline" class="demo-form-inline">
|
|||
|
|
<el-form-item label="摊铺名称">
|
|||
|
|
<el-select
|
|||
|
|
v-model="formInline.shopIds"
|
|||
|
|
placeholder="请选择摊铺位名称..."
|
|||
|
|
style="width: 300px"
|
|||
|
|
multiple
|
|||
|
|
collapse-tags
|
|||
|
|
@change="handleShopChange"
|
|||
|
|
>
|
|||
|
|
<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>
|
|||
|
|
<el-button type="primary" @click="getList">查询</el-button>
|
|||
|
|
<el-button @click="handleBatchLevelSetting"
|
|||
|
|
>批量会员等级编辑</el-button
|
|||
|
|
>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-form>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 数据表格 -->
|
|||
|
|
<div class="table-container">
|
|||
|
|
<el-table :data="tableData" border style="width: 100%">
|
|||
|
|
<el-table-column
|
|||
|
|
prop="shopName"
|
|||
|
|
label="摊铺名称"
|
|||
|
|
width="140"
|
|||
|
|
align="center"
|
|||
|
|
>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column label="是否启用会员" width="140" align="center">
|
|||
|
|
<template slot-scope="scope">
|
|||
|
|
<el-switch
|
|||
|
|
v-model="scope.row.enableMember"
|
|||
|
|
@change="handleMemberToggle(scope.row)"
|
|||
|
|
>
|
|||
|
|
</el-switch>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column prop="memberLevels" label="会员等级" align="center">
|
|||
|
|
<template slot-scope="scope">
|
|||
|
|
<span
|
|||
|
|
v-if="scope.row.memberLevels && scope.row.memberLevels.length > 0"
|
|||
|
|
>
|
|||
|
|
{{ scope.row.memberLevels.join(", ") }}
|
|||
|
|
</span>
|
|||
|
|
<span v-else>-</span>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column label="操作" width="140" align="center">
|
|||
|
|
<template slot-scope="scope">
|
|||
|
|
<el-button
|
|||
|
|
type="primary"
|
|||
|
|
size="mini"
|
|||
|
|
@click="handleLevelSetting(scope.row)"
|
|||
|
|
>
|
|||
|
|
设置等级明细
|
|||
|
|
</el-button>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
</el-table>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 会员等级明细弹窗 -->
|
|||
|
|
<el-dialog
|
|||
|
|
title="会员等级明细"
|
|||
|
|
:visible.sync="levelDialogVisible"
|
|||
|
|
width="80%"
|
|||
|
|
:before-close="handleDialogClose"
|
|||
|
|
>
|
|||
|
|
<div class="level-detail-dialog">
|
|||
|
|
<div class="dialog-header">
|
|||
|
|
<div class="shop-info">
|
|||
|
|
<span>摊铺：{{ currentShop.shopName }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="dialog-actions">
|
|||
|
|
<el-button type="primary" size="small" @click="handleEditLevel"
|
|||
|
|
>等级编辑</el-button
|
|||
|
|
>
|
|||
|
|
<el-button type="success" size="small" @click="handleSaveLevel"
|
|||
|
|
>提交</el-button
|
|||
|
|
>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 会员等级明细表格 -->
|
|||
|
|
<el-table
|
|||
|
|
:data="levelDetailData"
|
|||
|
|
border
|
|||
|
|
style="width: 100%; margin-top: 20px;"
|
|||
|
|
>
|
|||
|
|
<el-table-column
|
|||
|
|
prop="levelName"
|
|||
|
|
label="等级名称"
|
|||
|
|
width="100"
|
|||
|
|
align="center"
|
|||
|
|
>
|
|||
|
|
<template slot-scope="scope">
|
|||
|
|
<span :style="{ color: getLevelColor(scope.row.levelName) }">
|
|||
|
|
{{ scope.row.levelName }}
|
|||
|
|
</span>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column
|
|||
|
|
prop="requiredGrowthValue"
|
|||
|
|
label="所需成长值"
|
|||
|
|
width="120"
|
|||
|
|
align="center"
|
|||
|
|
>
|
|||
|
|
<template slot-scope="scope">
|
|||
|
|
<span style="color: #1890ff;">{{
|
|||
|
|
scope.row.requiredGrowthValue
|
|||
|
|
}}</span>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column
|
|||
|
|
prop="memberCount"
|
|||
|
|
label="会员人数"
|
|||
|
|
width="100"
|
|||
|
|
align="center"
|
|||
|
|
>
|
|||
|
|
<template slot-scope="scope">
|
|||
|
|
<span style="color: #52c41a;">{{ scope.row.memberCount }}</span>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column
|
|||
|
|
prop="memberBenefits"
|
|||
|
|
label="会员权益"
|
|||
|
|
align="center"
|
|||
|
|
>
|
|||
|
|
<template slot-scope="scope">
|
|||
|
|
<span style="color: #666;">{{ scope.row.memberBenefits }}</span>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
</el-table>
|
|||
|
|
</div>
|
|||
|
|
</el-dialog>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import { mapState } from "vuex";
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
name: "LevelSetting",
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
formInline: {
|
|||
|
|
shopIds: []
|
|||
|
|
},
|
|||
|
|
tableData: [],
|
|||
|
|
levelDialogVisible: false,
|
|||
|
|
currentShop: {},
|
|||
|
|
levelDetailData: [
|
|||
|
|
{
|
|||
|
|
levelName: "LV1",
|
|||
|
|
requiredGrowthValue: "100",
|
|||
|
|
memberCount: "1,250",
|
|||
|
|
memberBenefits: "新会员双倍积分，享受基础会员价格优惠"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
levelName: "LV2",
|
|||
|
|
requiredGrowthValue: "500",
|
|||
|
|
memberCount: "850",
|
|||
|
|
memberBenefits: "享受9.5折优惠，每月专属优惠券，生日礼品"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
levelName: "LV3",
|
|||
|
|
requiredGrowthValue: "1,200",
|
|||
|
|
memberCount: "450",
|
|||
|
|
memberBenefits: "享受9折优惠，免费配送服务，专属客服支持"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
levelName: "LV4",
|
|||
|
|
requiredGrowthValue: "2,500",
|
|||
|
|
memberCount: "180",
|
|||
|
|
memberBenefits: "享受8.5折优惠，优先配送，专属活动邀请，年度礼品"
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
...mapState("userData", ["storeList", "shopId", "marketId"])
|
|||
|
|
},
|
|||
|
|
created() {
|
|||
|
|
this.initData();
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
initData() {
|
|||
|
|
// 默认选择所有摊铺
|
|||
|
|
this.formInline.shopIds = this.storeList.map(store => store.shopId);
|
|||
|
|
this.getList();
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
getList() {
|
|||
|
|
// 根据选择的摊铺ID筛选数据
|
|||
|
|
if (this.formInline.shopIds.length === 0) {
|
|||
|
|
this.tableData = [];
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const selectedStores = this.storeList.filter(store =>
|
|||
|
|
this.formInline.shopIds.includes(store.shopId)
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
this.tableData = selectedStores.map(store => ({
|
|||
|
|
shopId: store.shopId,
|
|||
|
|
shopName: store.shopName,
|
|||
|
|
enableMember: Math.random() > 0.5, // 随机生成启用状态
|
|||
|
|
memberLevels: this.generateRandomLevels()
|
|||
|
|
}));
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
generateRandomLevels() {
|
|||
|
|
const levels = ["lv1", "lv2", "lv3", "lv4"];
|
|||
|
|
const count = Math.floor(Math.random() * 4) + 1;
|
|||
|
|
return levels.slice(0, count);
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
handleShopChange() {
|
|||
|
|
this.getList();
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
handleMemberToggle(row) {
|
|||
|
|
// 处理会员启用/禁用
|
|||
|
|
console.log(
|
|||
|
|
"Toggle member for shop:",
|
|||
|
|
row.shopName,
|
|||
|
|
"Enable:",
|
|||
|
|
row.enableMember
|
|||
|
|
);
|
|||
|
|
// 这里应该调用API更新状态
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
handleLevelSetting(row) {
|
|||
|
|
this.currentShop = row;
|
|||
|
|
this.levelDialogVisible = true;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
handleBatchLevelSetting() {
|
|||
|
|
// 批量设置功能
|
|||
|
|
this.$message.info("批量会员等级编辑功能待实现");
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
handleDialogClose() {
|
|||
|
|
this.levelDialogVisible = false;
|
|||
|
|
this.currentShop = {};
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
handleEditLevel() {
|
|||
|
|
// 等级编辑功能
|
|||
|
|
this.$message.info("等级编辑功能待实现");
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
handleSaveLevel() {
|
|||
|
|
// 提交保存功能
|
|||
|
|
this.$message.success("等级明细保存成功");
|
|||
|
|
this.handleDialogClose();
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
getLevelColor(levelName) {
|
|||
|
|
const colorMap = {
|
|||
|
|
LV1: "#52c41a",
|
|||
|
|
LV2: "#1890ff",
|
|||
|
|
LV3: "#fa8c16",
|
|||
|
|
LV4: "#f5222d"
|
|||
|
|
};
|
|||
|
|
return colorMap[levelName] || "#666";
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.level-setting {
|
|||
|
|
padding: 20px;
|
|||
|
|
|
|||
|
|
.header {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
|
|||
|
|
h3 {
|
|||
|
|
margin: 0;
|
|||
|
|
font-size: 18px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.dropdown-container {
|
|||
|
|
color: #999;
|
|||
|
|
font-size: 14px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.shop-selector {
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
padding: 15px;
|
|||
|
|
background: #f5f5f5;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.table-container {
|
|||
|
|
.el-table {
|
|||
|
|
.el-switch {
|
|||
|
|
margin: 0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.level-detail-dialog {
|
|||
|
|
.dialog-header {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
|
|||
|
|
.shop-info {
|
|||
|
|
padding: 8px 12px;
|
|||
|
|
background: #f0f9ff;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
color: #1890ff;
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.dialog-actions {
|
|||
|
|
.el-button {
|
|||
|
|
margin-left: 8px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.el-table {
|
|||
|
|
.el-table__header {
|
|||
|
|
th {
|
|||
|
|
background-color: #fafafa;
|
|||
|
|
color: #333;
|
|||
|
|
font-weight: 600;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.el-table__body {
|
|||
|
|
td {
|
|||
|
|
padding: 12px 0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|