front-end/hdApp/src/admin/setting/level.vue

<template>
  <div class="app-content">
    <!-- list -->
    <div class="list-wrap">
      <div class="list-tit">
        <div>客户等级</div>
        <div :class="[isModify ? 'list-tit-inp' : '']">成长值</div>
        <div :class="[isModify ? 'list-tit-inp' : '']">折扣</div>
        <div v-if="isModify">操作</div>
      </div>
      <block v-if="!$util.isEmpty(list)">
        <div class="list" v-for="(item, index) in list" :key="index">
          <div class="list-vip">
            <app-vip-module
              class="level-img"
              :vipImg="`${constant.imgUrl}/retail/member/grade/${index + 1}.png`"
            />
          </div>
          <div class="list-growth">
            <input v-if="isModify" type="text" class="setting-inp" v-model="item.growth" />
            <span v-else class="setting-span">{{ item.growth }}</span>
          </div>
          <div class="list-discount">
            <input v-if="isModify" type="text" class="setting-inp" v-model="item.discount" />
            <span v-else class="setting-span">{{ item.discount }}</span>
          </div>
          <div class="list-option" v-if="isModify" @click="delFn(index)">
            <i class="iconfont iconshanchu1"></i>
          </div>
        </div>
      </block>
      <block v-else>
        <app-wrapper-empty title="暂无数据" :is-empty="$util.isEmpty(list)" />
      </block>
    </div>
    <!-- 提示 -->
    <div v-if="isModify" class="prompt-text">提示：只有一次修改机会，提交后不能再修改。</div>
    <!-- 按钮 -->
    <div v-if="isModify" class="btn-wrap">
      <div class="admin-button-com big" @click="addFn">添加</div>
      <div class="admin-button-com blue big" @click="showPromptFn">提交</div>
    </div>
    <!-- 删除提示 -->
    <modal-module
      :show="showPrompt"
      @cancel="modalCancel"
      @click="promptModalClick"
      title="确认无误提交？"
      content="提交后将不能再次修改"
      color="#333"
      :size="32"
      padding="30rpx 30rpx"
    ></modal-module>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import appVipModule from "@/components/module/app-vip";
import AppWrapperEmpty from "@/components/app-wrapper-empty";
import ModalModule from "@/components/plugin/modal";
// api
import { bubbleSort } from "@/utils/common";
import { getList, updateLevel } from "@/api/level";
export default {
  name: "level-setting",
  components: {
    appVipModule,
    AppWrapperEmpty,
    ModalModule
  },
  data() {
    return {
      isModify: false,
      list: [],
      addList: {
        level: 0,
        growth: 0,
        discount: 0
      },
      showPrompt: false
    };
  },
  onLoad() {
    // this.init()
  },
  methods: {
    init() {
      this._getList();
    },
    _getList() {
      return getList().then(res => {
        let data = res.data;
        if (!data) return false;
        this.isModify = res.data.gradeSwitch != 0;
        data = bubbleSort(data.list);
        this.list = data;
      });
    },
    delFn(index) {
      if (index == 0) {
        this.$msg("最少要保留一个");
        return false;
      }
      this.list.splice(index, 1);
      this.$msg("删除成功!");
    },
    addFn() {
      let addList = JSON.parse(JSON.stringify(this.addList));
      addList.level = this.list.length + 1;
      if (addList.level > 9) {
        this.$msg("最多9个等级");
        return false;
      }
      this.list.push(addList);
    },
    confirmFn() {
      for (let i in this.list) {
        this.list[i].level = parseInt(i) + 1;
      }
      let arr = [];
      for (let i in this.list) {
        let { level, growth, discount } = this.list[i];
        arr.push([level, growth, discount]);
      }
      updateLevel({ list: arr }).then(res => {
        this.isModify = false;
        this.$msg("设置成功!");
        this.showPrompt = false;
      });
    },
    showPromptFn() {
      this.showPrompt = true;
    },
    promptModalClick(e) {
      let index = e.index;
      if (index === 0) {
        this.showPrompt = false;
      } else {
        this.confirmFn();
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.list-wrap {
  background-color: #fff;
  .list-tit {
    @include disFlex(center, space-between);
    color: $fontColor3;
    background-color: $backColor;
    padding: 30px 30px 20px 30px;
    .list-tit-inp {
      width: 230px;
      text-align: center;
    }
  }
  .list {
    @include disFlex(center, space-between);
    height: 100px;
    padding: 0 30px;
    border-bottom: 2px solid $borderColor;
    .level-img {
      /deep/.vip-text {
        left: 70px;
        top: 3px;
      }
    }
    .setting-inp {
      width: 230px;
      height: 70px;
      border: 2px solid $borderColor;
      border-radius: 4px;
      text-align: center;
    }
    .setting-span {
      font-size: 32px;
    }
    .list-option {
      .iconfont {
        color: $fontColor3;
        font-size: 36px;
      }
    }
  }
}
.prompt-text {
  padding: 30px 30px 60px 30px;
  color: $fontColor3;
}
// 按钮
.btn-wrap {
  width: calc(100% - 60px);
  margin: 0 30px;
  @include disFlex(center, space-between);
  .admin-button-com {
    width: calc(48% - 40px);
  }
}
</style>