shop_vue/src/views/plus/vip/grade/part/Edit.vue
@@ -24,13 +24,28 @@
        <template slot="append">元</template>
      </el-input>
    </el-form-item>
    <el-form-item label="VIP专区补贴" :label-width="formLabelWidth" prop="operating_subsidy">
      <el-input v-model="form.operating_subsidy" type="number" placeholder="请输入VIP专区补贴">
    <el-form-item label="下级收益补贴" :label-width="formLabelWidth" prop="operating_subsidy">
      <el-input v-model="form.operating_subsidy" type="number" placeholder="请输入下级收益补贴">
        <template slot="append">%</template>
      </el-input>
    </el-form-item>
    <el-form-item label="平台直推佣金" :label-width="formLabelWidth" prop="commission">
      <el-input v-model="form.commission" type="number" placeholder="请输入平台直推佣金">
        <template slot="append">%</template>
      </el-input>
    </el-form-item>
    <el-form-item label="直推店铺交易额佣金" :label-width="formLabelWidth" prop="commission">
      <el-input v-model="form.supplier_money" type="number" placeholder="请输入直推店铺交易额佣金">
        <template slot="append">%</template>
      </el-input>
    </el-form-item>
    <el-form-item label="复购专区级差计算" :label-width="formLabelWidth" prop="differential_prize">
      <el-input v-model="form.differential_prize" type="number" placeholder="请输入复购专区级差计算">
        <template slot="append">%</template>
      </el-input>
    </el-form-item>
    <el-form-item label="复购专区平级奖" :label-width="formLabelWidth" prop="equal_level_award">
      <el-input v-model="form.equal_level_award" type="number" placeholder="请输入级复购专区平级奖">
        <template slot="append">%</template>
      </el-input>
    </el-form-item>
@@ -48,9 +63,40 @@
        </el-radio-group>
      </div>
      <div class="d-s-c mt16">
        <el-checkbox v-model="form.is_purchase_count">购买次数</el-checkbox>
        <el-checkbox v-model="form.is_purchase_count">购买次数VIP专区商品</el-checkbox>
        <el-input v-model="form.purchase_count" type="number" :disabled="!form.is_purchase_count" style="width: 160px; margin-left: 10px;" ></el-input>
        <span class="ml10">次</span>
      </div>
      <div class="d-s-c mt16">
        <el-checkbox v-model="form.is_supplier_count">直推商家</el-checkbox>
        <el-input v-model="form.supplier_count" type="number" :disabled="!form.is_supplier_count" style="width: 160px; margin-left: 10px;" ></el-input>
        <span class="ml10">家</span>
      </div>
      <div class="d-s-c mt16">
        <el-checkbox v-model="form.is_referee_grade">直推指定会员等级</el-checkbox>
        <el-select v-model="form.referee_grade_ids" multiple :disabled="!form.is_referee_grade" style="width: 160px; margin-left: 10px;">
          <el-option
            v-for="item in userGradeList"
            :key="item.grade_id"
            :label="item.name"
            :value="item.grade_id">
          </el-option>
        </el-select>
        <el-input v-model="form.referee_grade_count" type="number" :disabled="!form.is_referee_grade" style="width: 160px; margin-left: 10px;" ></el-input>
        <span class="ml10">人</span>
      </div>
      <div class="d-s-c mt16">
        <el-checkbox v-model="form.open_buy_product">购买指定商品</el-checkbox>
        <el-button type="primary" :disabled="form.open_buy_product==0" @click="openProduct">选择商品</el-button>
        <el-checkbox style="margin-left: 10px;" v-model="form.open_type_product">购买商品就升级</el-checkbox>
      </div>
      <div v-if="form.product_image && form.product_image.length > 0" class="d-s-c f-w product-vip-image">
        <div v-for="(item, index) in form.product_image" :key="index" class="img pr">
          <a href="javascript:void(0)" class="delete-btn" @click="deleteFunc(index)"><i
            class="el-icon-error"></i></a>
          <img :src="item.image" height="100" />
          <p  class="text-ellipsis">{{ item.product_name }}</p>
        </div>
      </div>
    </el-form-item>
  </el-form>
@@ -58,28 +104,61 @@
    <el-button @click="dialogFormVisible">取 消</el-button>
    <el-button type="primary" @click="editGrade" :disabled="submit_loading">确 定</el-button>
  </div>
    <!--产品列表弹出层组件-->
    <Product :isproduct="isproduct" append-to-body @closeDialog="closeDialogFunc($event)">产品列表弹出层</Product>
</el-dialog>
</template>
<script>
  import vipApi from '@/api/plus/vip.js';
  import UserApi from '@/api/user.js';
  import Product from '@/components/product/Product';
  export default {
    components: {
      /*产品列表组件*/
      Product: Product
    },
    data() {
      return {
        /*用户管理模块的等级列表*/
        userGradeList: [],
        /*左边长度*/
        formLabelWidth: '120px',
        /*是否显示*/
        dialogVisible: false,
        /*是否正在提交*/
        submit_loading: false
        submit_loading: false,
        /*是否显示产品列表弹出层*/
        isproduct: false
      };
    },
    props: ['open_edit', 'form'],
    created() {
      this.form.is_purchase_count = this.form.is_purchase_count == 1 ? true : false;
      this.form.is_supplier_count = this.form.is_supplier_count == 1 ? true : false;
      this.form.is_referee_grade = this.form.is_referee_grade == 1 ? true : false;
      this.form.open_buy_product = this.form.open_buy_product == 1 ? true : false;
      this.form.open_type_product = this.form.open_type_product == 1 ? true : false;
      // 等级id转换成数组
      for (let i = 0; i < this.form.referee_grade_ids.length; i++) {
        this.form.referee_grade_ids[i] = parseInt(this.form.referee_grade_ids[i]);
      }
      for (let i = 0; i < this.form.product_ids.length; i++) {
        this.form.product_ids[i] = parseInt(this.form.product_ids[i]);
      }
      this.dialogVisible = this.open_edit;
      this.getUserGradeList();
    },
    methods: {
      /*获取用户管理模块的等级列表*/
      getUserGradeList() {
        let self = this;
        UserApi.gradelist({}, true)
          .then(res => {
            self.userGradeList = res.data.list.data || res.data.list;
          })
          .catch(error => {});
      },
      /*修改等级*/
      editGrade() {
        let self = this;
@@ -88,6 +167,10 @@
          if (valid) {
            self.submit_loading = true;
            params.is_purchase_count = params.is_purchase_count == true ? 1 : 0;
            params.is_supplier_count = params.is_supplier_count == true ? 1 : 0;
            params.is_referee_grade = params.is_referee_grade == true ? 1 : 0;
            params.open_buy_product = params.open_buy_product == true ? 1 : 0;
            params.open_type_product = params.open_type_product == true ? 1 : 0;
            vipApi.editGrade(params, true)
              .then(data => {
                self.submit_loading = false;
@@ -117,9 +200,79 @@
            openDialog: false
          })
        }
      },
      /*删除商品*/
      deleteFunc(i) {
        this.form.product_ids.splice(i, 1);
        this.form.product_image.splice(i, 1);
      },
      /*产品列表弹出层*/
      openProduct() {
        this.isproduct = true;
        this.$nextTick(() => {
          setTimeout(() => {
            // 强制提升所有弹窗和遮罩层的z-index
            const dialogWrappers = document.querySelectorAll('.el-dialog__wrapper');
            const modals = document.querySelectorAll('.v-modal');
            // 为每个弹窗设置递增的z-index
            dialogWrappers.forEach((dialog, index) => {
              dialog.style.zIndex = 2000 + (index * 10) + 5;
            });
            // 为每个遮罩层设置递增的z-index(略低于对应弹窗)
            modals.forEach((modal, index) => {
              modal.style.zIndex = 2000 + (index * 10);
            });
          }, 50);
        });
      },
      /*关闭弹窗*/
      closeDialogFunc(e) {
        this.isproduct = e.openDialog;
        if (e.type == 'success') {
          if (this.form.product_ids == '') {
            this.form.product_ids = [];
            this.form.product_image = [];
          }
          console.log(this.form.product_ids == undefined);
          if (this.form.product_ids.indexOf(e.params.product_id) == -1) {
            this.form.product_ids.push(e.params.product_id);
            this.form.product_image.push({
              product_id: e.params.product_id,
              image: e.params.image,
              product_name: e.params.product_name
            });
          } else {
            this.$message({
              message: '已选择该商品',
              type: 'warning'
            });
          }
        }
      }
    }
  };
</script>
<style></style>
<style>
.product-vip-image p{
  width: 100px;
}
.product-vip-image{
  margin-top: 10px;
  .delete-btn {
    position: absolute;
    display: block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    right: -8px;
    top: -8px;
    color: red;
  }
}
</style>