202 lines
5.9 KiB
Vue
202 lines
5.9 KiB
Vue
<template>
|
||
<div>
|
||
<div class="tips">
|
||
<div>请谨慎操作此页面数据，避免频繁修改导致会员流失等不必要的损失。</div>
|
||
<div style="margin-top: 10px">
|
||
请注意，用户一旦达到某会员等级，后续修改会员等级要求不会影响用户已达到的会员等级，但可享有该等级对应的会员权益
|
||
</div>
|
||
<div style="margin-top: 20px">
|
||
举例：24年2月，用户在本商铺的成长值达到500升级为VIP2,此时,VIP2会员权益享有的生日优惠卷1；
|
||
</div>
|
||
<div style="margin-top: 10px">
|
||
24年3月，本商铺修改VIP2所需成长值为700，并新增会员生日优惠卷2；修改提交后,该用户会员等级保持VIP2不变且享有会员优惠卷1和会员优惠卷2；
|
||
</div>
|
||
</div>
|
||
<div v-if="storeList.length > 1">
|
||
<el-form :inline="true" :model="formInline" class="demo-form-inline">
|
||
<el-form-item label="摊铺：">
|
||
<el-select v-model="formInline.shopId" placeholder="请选择摊铺：：">
|
||
<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 @click="getList" type="primary">查询</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
<div class="tipsLevel">
|
||
<div>
|
||
<span style="margin-right: 30px">全部等级({{ list.length }})</span
|
||
><el-button @click="add" type="primary">+新增等级</el-button>
|
||
</div>
|
||
<div>
|
||
<span v-if="!form.effective" style="margin-right: 30px"
|
||
>未开通会员</span
|
||
>
|
||
<span v-if="form.effective" style="margin-right: 30px"
|
||
>会员到期时间 {{ form.effectiveEndTime }}</span
|
||
>
|
||
<el-button @click="addSetMenu" type="primary">购买工具</el-button>
|
||
</div>
|
||
</div>
|
||
<el-table :data="list" :border="true" style="width: 100%">
|
||
<el-table-column
|
||
width="140"
|
||
align="center"
|
||
label="等级名称"
|
||
prop="levelName"
|
||
/>
|
||
<el-table-column
|
||
width="140"
|
||
align="center"
|
||
label="所需成长值"
|
||
prop="requiredGrowthValue"
|
||
/>
|
||
<el-table-column
|
||
width="140"
|
||
align="center"
|
||
label="会员人数"
|
||
prop="memberCount"
|
||
>
|
||
</el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
label="会员权益"
|
||
prop="packageEffectiveTimeQuantity"
|
||
>
|
||
<template slot-scope="scope">
|
||
<div>
|
||
<span>{{ scope.row.enableMemberDiscount ? "会员折扣," : "" }}</span>
|
||
<span>{{
|
||
scope.row.enablePointsRedemption ? "积分兑换," : ""
|
||
}}</span>
|
||
<span>{{
|
||
scope.row.enableBirthdayCoupons ? "生日优惠卷," : ""
|
||
}}</span>
|
||
<span>{{
|
||
scope.row.enableBirthdayReward ? "生日双倍积分" : ""
|
||
}}</span>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<!-- <el-table-column align="center" label="操作" fixed="right" width="240"> -->
|
||
<!-- <template v-slot="scope">
|
||
<el-button @click="add(scope.row)" type="primary">编辑</el-button>
|
||
<el-button @click="add(scope.row)" type="primary">转移</el-button>
|
||
<el-popconfirm
|
||
confirm-button-text="确定"
|
||
cancel-button-text="取消"
|
||
icon-color="#626AEF"
|
||
title="确定删除吗?"
|
||
@confirm="confirmEvent(scope.row)"
|
||
@cancel="cancelEvent"
|
||
>
|
||
<template #reference>
|
||
<el-button type="danger">删除</el-button>
|
||
</template>
|
||
</el-popconfirm>
|
||
</template> -->
|
||
<!-- </el-table-column> -->
|
||
</el-table>
|
||
<!-- 添加 -->
|
||
<addOrUpdate @getList="getList" ref="addOrUpdate"></addOrUpdate>
|
||
<!-- 添加套餐 -->
|
||
<set-menu @getList="getList" ref="setMenu"></set-menu>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import setMenu from "./popup/set-menu.vue";
|
||
import addOrUpdate from "./popup/add-or-update.vue";
|
||
import { mapState } from "vuex";
|
||
export default {
|
||
components: {
|
||
addOrUpdate,
|
||
setMenu,
|
||
},
|
||
data() {
|
||
return {
|
||
list: [],
|
||
formInline: {
|
||
unitType: "",
|
||
marketId: "",
|
||
shopId: "",
|
||
},
|
||
form: {},
|
||
};
|
||
},
|
||
created() {
|
||
this.formInline = {
|
||
unitType:
|
||
JSON.parse(sessionStorage.getItem("userInfo")).role == "ROLE_MERCHANT"
|
||
? 3
|
||
: 2,
|
||
marketId: this.marketId,
|
||
shopId: this.shopId,
|
||
};
|
||
this.getList();
|
||
},
|
||
methods: {
|
||
// getData() {
|
||
// this.$api.mer_admin
|
||
// .storeList({ marketId: this.formInline.marketId })
|
||
// .then((res) => {
|
||
// this.storeList = res.data.data;
|
||
// this.formInline.shopId = res.data.data[0].shopId;
|
||
// this.$nextTick(() => {
|
||
// this.getList();
|
||
// });
|
||
// });
|
||
// },
|
||
getList() {
|
||
this.$api.marketing.marketingLevelPage(this.formInline).then((res) => {
|
||
this.list = res.data.data ? res.data.data : [];
|
||
});
|
||
this.$api.marketing.getEffective(this.formInline).then((res) => {
|
||
console.log(res);
|
||
this.form = res.data.data;
|
||
});
|
||
},
|
||
add() {
|
||
this.$refs.addOrUpdate.toggle().add(this.formInline);
|
||
},
|
||
addSetMenu() {
|
||
this.$refs.setMenu.toggle().add(this.formInline);
|
||
},
|
||
confirmEvent() {},
|
||
cancelEvent() {},
|
||
},
|
||
computed: {
|
||
...mapState("userData", [
|
||
"isMerchant",
|
||
"marketList",
|
||
"storeList",
|
||
"marketId",
|
||
"shopId",
|
||
]),
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss" >
|
||
.tips {
|
||
padding: 15px;
|
||
margin-bottom: 20px;
|
||
border-radius: 10px;
|
||
width: 100%;
|
||
font-size: 16px;
|
||
background: #e5e5e5;
|
||
color: #faa639;
|
||
}
|
||
.tipsLevel {
|
||
margin: 20px 0;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
</style> |