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>
      <!-- <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="单位类型：">
          <el-select
            v-model="formInline.unitType"
            placeholder="请选择单位类型："
          >
            <el-option
              v-for="item in [
                { label: '市场', value: '1' },
                { label: '摊主', value: '2' },
                { label: '云店', value: '3' },
              ]"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="getData" type="primary">查询</el-button>
          <el-button @click="getData" type="primary">导出</el-button>
        </el-form-item>
      </el-form> -->
    </div>
    <div class="tipsLevel">
      <div>
        <span style="margin-right: 30px">全部等级(4)</span
        ><el-button @click="add(null)" type="primary">+新增套餐</el-button>
      </div>
      <div>
        <span style="margin-right: 30px">会员快要到期了</span>
        <el-button @click="add(null)" type="primary">购买工具</el-button>
      </div>
    </div>
    <el-table :data="list" :border="true" style="width: 100%">
      <el-table-column align="center" label="等级名称" prop="packageName" />
      <el-table-column align="center" label="所需成长值" prop="packagePrice" />
      <el-table-column
        align="center"
        label="会员权益"
        prop="packageEffectiveTimeQuantity"
      />
      <el-table-column
        align="center"
        label="会员人数"
        prop="packageEffectiveTimeUnit"
      >
        <template v-slot="scope">
          <span>{{
            scope.row.packageEffectiveTimeUnit == 1 ? "年" : "月"
          }}</span>
        </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>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      list: [],
      formInline: {
        unitType: "1",
        marketId: "",
        shopId: "",
      },
    };
  },
  created() {
    this.formInline = {
      unitType: JSON.parse(sessionStorage.getItem("userInfo")).unitType,
      marketId: this.marketId,
      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;
      });
    },
    add() {},
    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>