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>
export default {
  data() {
    return {
      list: [],
      formInline: {
        unitType: "1",
        marketId: "",
        shopId: "",
      },
      isShopId: false,
      marketList: [],
      storeList: [],
    };
  },
  created() {
    if (JSON.parse(sessionStorage.getItem("userInfo")).markets.length > 0) {
      this.isShopId = true;
      this.formInline.marketId = JSON.parse(
        sessionStorage.getItem("userInfo")
      ).markets[0].marketId;
      this.marketList = JSON.parse(sessionStorage.getItem("userInfo")).markets;
      console.log(this.marketList);
      this.getData();
    } else if (JSON.parse(sessionStorage.getItem("userInfo")).shopId) {
      (this.formInline.shopId = JSON.parse(
        sessionStorage.getItem("userInfo")
      ).shopId),
        (this.isShopId = true);
      this.$nextTick(() => {
        this.getList();
      });
    } else {
      this.isShopId = false;
    }
  },
  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) => {
        console.log(res);
      });
    },
    add() {},
    confirmEvent() {},
    cancelEvent() {},
  },
};
</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>