merchant-web/src/views/modules/marketing/user/popup/modify-points.vue

<template>
  <div>
    <obj-modal
      ref="modal"
      labelWidth="150px"
      :modalCols="modalCols"
      :modalConfig="modalConfig"
      :modalData="modalData"
      :modalHandles="modalHandles"
    >
      <template slot="dialog__after">
        <el-form
          label-width="210px"
          :rules="rules"
          :model="modalData"
          ref="modalForm"
        >
          <el-form-item
            v-if="isAdd"
            :label="`当前用户剩余积分${form.memberPoints},修改为`"
            prop="memberPoints"
          >
            <el-input-number
              style="width: 150px"
              controls-position="right"
              :precision="0"
              v-model="modalData.memberPoints"
              :min="0"
              label="请输入"
            ></el-input-number>
          </el-form-item>
          <el-alert
            v-if="isAdd"
            title="该操作无法撤回，请输入”确定“并提交，提交后会发送系统通知，通知该用户积分发生变化 "
            :closable="false"
            type="error"
          >
          </el-alert>
          <el-form-item
            v-if="!isAdd"
            :label="`当前用户成长值为${form.growthValue},修改为`"
            prop="growthValue"
          >
            <el-input-number
              style="width: 150px"
              controls-position="right"
              :precision="0"
              v-model="modalData.growthValue"
              :min="0"
              label="请输入"
            ></el-input-number>
          </el-form-item>
          <el-alert
            v-if="!isAdd"
            title="该操作无法撤回，请输入”确定“并提交，提交后会发送系统通知，通知该用户成长值发生变化 "
            :closable="false"
            type="error"
          >
          </el-alert>
          <el-form-item
            style="margin-top: 20px"
            label="请输入确定"
            prop="determine"
          >
            <el-input
              style="width: 150px"
              v-model="modalData.determine"
              label="请输入"
            ></el-input>
          </el-form-item>
        </el-form>
      </template>
    </obj-modal>
  </div>
</template>
<script>
import { debounce, cloneDeep } from "lodash";
import { Divider } from "element-ui";
export default {
  components: {},
  data() {
    return {
      isAdd: true,
      //表格属性
      modalConfig: {
        title: "",
        show: false,
        width: "700px",
      },
      modalData: {},
      form: {},
      rules: {
        memberPoints: [
          {
            required: true,
            message: "请输入积分",
            trigger: "blur",
          },
        ],
        growthValue: [
          {
            required: true,
            message: "请输入成长值",
            trigger: "blur",
          },
        ],
        determine: [
          {
            required: true,
            message: "请输入确定",
            trigger: "blur",
          },
          {
            validator: (rule, value, callback) => {
              if (value !== "确定") {
                callback(new Error("请输入确定"));
              } else {
                callback();
              }
            },
          },
        ],
      },
    };
  },
  watch: {
    "modalConfig.show"(newVal) {
      if (!newVal) {
        //关闭弹窗清空校验
        setTimeout(() => {
          this.$refs.modalForm.resetFields();
        });
      }
    },
  },
  methods: {
    queryTableData(pageNo, pageSize) {},
    toggle(e) {
      if (this.modalConfig.show == false) {
        this.modalConfig.show = true;
      } else {
        this.modalConfig.show = false;
      }
      if (e) {
        this.init(cloneDeep(e));
      }
      return {
        add: (row) => {
          this.modalConfig.title = "修改积分";
          this.isAdd = true;
        },
        update: () => {
          this.modalConfig.title = "修改成长值";
          this.isAdd = false;
        },
      };
    },
    init(row) {
      console.log(row);
      this.modalData = row;
      this.form = {
        memberPoints: row.memberPoints,
        growthValue: row.growthValue,
      };
    },
  },
  computed: {
    modalCols() {
      return [];
    },
    modalHandles() {
      return [
        {
          label: "取消",
          handle: () => {
            this.toggle();
          },
        },
        {
          label: "确认",
          type: "primary",
          handle: () => {
            console.log(this.modalData);
            this.$refs.modalForm.validate((valid) => {
              console.log(valid);
              if (valid) {
                if (this.isAdd) {
                  this.$api.marketing
                    .changeMemberPoints({
                      id: this.modalData.id,
                      memberPoints: this.modalData.memberPoints,
                    })
                    .then((res) => {
                      this.$emit("queryList");
                      this.toggle();
                    });
                }
              } else {
                this.$api.marketing
                  .changeGrowthValue({
                    id: this.modalData.id,
                    growthValue: this.modalData.growthValue,
                  })
                  .then((res) => {
                    this.$emit("queryList");
                    this.toggle();
                  });
              }
            });
          },
        },
      ];
    },
  },
  asyncComputed: {},
};
</script>
<style lang="scss" scoped>
</style>