saas_entrepot_admin/src/views/salesman/commission/withdDialog.vue

<template>
  <Base-dialog
    title="申请提现"
    :disabledBtn="disabledBtn"
    :isShow.sync="isShow"
    @submit="submitForm"
    @close="close"
  >
    <el-form :inline="true" :model="form" :rules="rules" ref="form">
      <el-form-item label="提现金额：" prop="cash">
        <el-input
          @input="formatNum(form.cash, 'cash')"
          v-model.Number="form.cash"
          placeholder="请输入提现金额"
        >
        </el-input>
      </el-form-item>
    </el-form>
    <div class="step-box">
      <el-steps :active="active" align-center>
        <el-step title="微信账号授权"></el-step>
        <el-step title="提现申请"></el-step>
        <el-step title="提现审核"></el-step>
        <el-step title="提现申请成功"></el-step>
      </el-steps>
      <div class="step-code-box" v-if="active == 1">
        <vue-qr :text="wxCodeUrl" :size="200"></vue-qr>
      </div>
    </div>

    <div class="withd-tips">
      提现注意事项：
      <p>1.当佣金被结算时有一定的冻结期，被解冻的佣金方可提现</p>
      <p>2.微信打款当日单笔金额1元至200元，当日最多1000元</p>
      <p>3.通常在1-3个工作日内可到账</p>
    </div>
  </Base-dialog>
</template>

<script>
import vueQr from "vue-qr";
import { getWxCodeUrl } from "@/api/salesman/commission";
import { checkBindGzh, withdrawal } from "@/api/salesman/user";
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    disabledBtn: {
      type: Boolean,
      default: false,
    },
    cash: {
      type: Number,
      default: 0,
    },
  },
  data() {
    var checkMoney = (rule, value, callback) => {
      if (!value || value < 1 || value > 200) {
        callback(new Error("提现金额需在1至200元之间"));
      } else {
        callback();
      }
    };
    return {
      msgTitle: [
        { label: "学习拍照异常", value: 1 },
        {
          label: "学习拍照太黑无法识别人像，请确保拍照光线充足并拍到全脸",
          value: 2,
        },
        {
          label: "学习拍照太模糊无法识别人像，请确保拍照光线充足并拍到全脸",
          value: 3,
        },
        {
          label: "学习拍照人像不全无法识别，请确保拍照光线充足并拍到全脸",
          value: 4,
        },
      ],
      form: {
        cash: 0,
      },
      rules: {
        cash: [{ required: true, validator: checkMoney, trigger: "blur" }],
      },
      reverse: true,
      activities: [
        {
          content: "活动按期开始",
        },
        {
          content: "通过审核",
        },
        {
          content: "创建成功",
        },
      ],
      active: 2,
      wxCodeUrl: "",
    };
  },
  methods: {
    submitForm() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          if (this.active == 1) {
            await this.checkBindGzh();
            if (this.active == 1) {
              this.$message.warning("请先微信授权");
              return;
            }
          }
          withdrawal(this.form).then((res) => {
            if (res.code == 200) {
              this.$message.success("提现申请成功");
              this.isShow = false;
              this.$emit("getSellerInfo");
            }
          });
        } else {
          return false;
        }
      });
    },
    uploadText(msg) {
      this.formData.cheating_reason = msg;
    },
    close() {
      this.isShow = false;
      this.$refs.form.clearValidate();
    },
    checkBindGzh() {
      return checkBindGzh().then((res) => {
        this.active = res.data ? 2 : 1;
        if (this.active == 1) {
          this.getWxCodeUrl();
        }
        return Promise.resolve();
      });
    },
    formatNum(val, key) {
      let temp = val.toString();
      temp = temp.replace(/。/g, ".");
      temp = temp.replace(/[^\d.]/g, "");
      temp = temp.replace(/^\./g, "");
      temp = temp.replace(/\.{2,}/g, "");
      temp = temp.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
      temp = temp.replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3");
      this.form[key] = temp;
    },
    getWxCodeUrl() {
      getWxCodeUrl().then((res) => {
        this.wxCodeUrl = res.data;
      });
    },
  },
  computed: {
    isShow: {
      get() {
        return this.dialogVisible;
      },
      set(val) {
        this.$emit("update:dialogVisible", false);
      },
    },
  },
  created() {
    this.checkBindGzh();
  },
  components: {
    vueQr,
  },
  watch: {
    dialogVisible(val) {
      if (val) {
        this.form.cash = this.cash >= 200 ? 200 : this.cash || 0;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.input-suffix {
  display: flex;
  align-items: center;
}
.withd-tips {
  margin-top: 30px;
  line-height: 10px;
  color: #999;
}
.step-box {
  margin-top: 20px;
  .step-code-box {
    width: 200px;
    margin: 20px auto 0;
  }
}
</style>