merchant-web/src/views/modules/marketing/level/index.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>