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>
|