cashier-web/src/views/data/credit/components/detail/credit_repayment.vue

<!-- eslint-disable vue/no-use-v-if-with-v-for -->
<template>
  <div>
    <el-dialog
      :show-close="false"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="30%"
      center
    >
      <div slot="title" class="dialog-title">挂账还款</div>
      <div class="content">
        <div v-if="form.repaymentMethod == 'total' && !form.creditBuyerId" class="credit_info">
          <div>挂账人：{{ form.debtor }}</div>
          <div>挂账金额：￥{{ form.owedAmount || 0 }}</div>
          <div>账户余额: ￥{{ form.accountBalance || 0 }}</div>
        </div>
        <el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="left">
          <el-form-item
            v-if="form.repaymentMethod == 'total' && !form.creditBuyerId"
            label="还款方式"
            style="width: 100%"
          >
            <el-radio-group v-model="form.repaymentMethod">
              <el-radio
                v-for="item in repaymentMethodList"
                v-if="form.repaymentMethod == item.value"
                :key="item.value"
                :label="item.value"
              >
                {{ item.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="还款金额" prop="repaymentAmount" style="width: 100%">
            <el-input
              v-model="form.repaymentAmount"
              placeholder=""
              oninput="value= value.replace(/[^\d|\.]/g, '')"
            >
              <template slot="prepend">￥</template>
            </el-input>
          </el-form-item>
          <el-form-item label="支付方式" prop="paymentMethod" style="width: 100%">
            <el-input v-model="form.paymentMethod" placeholder="请输入支付方式" />
          </el-form-item>
          <el-form-item label="备注" prop="remark" style="width: 100%">
            <el-input v-model="form.remark" placeholder="请输入备注" />
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="onSubmitHandle">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import creditOrderApi from "@/api/order/credit-order";

import _ from "lodash";
export default {
  // eslint-disable-next-line vue/require-prop-types
  props: ["couponId"],
  data() {
    return {
      dialogVisible: false,
      loading: false,
      repaymentMethodList: [
        { label: "按总金额还款", value: "total" },
        { label: "按订单还款", value: "order" },
      ],
      form: {
        id: "",
        creditBuyerId: "",
        orderId: "",
        repaymentMethod: "",
        repaymentAmount: "",
        paymentMethod: "",
        remark: "",
      },
      rules: {
        repaymentAmount: [
          {
            required: true,
            message: "请输入还款金额",
            trigger: "blur",
          },
        ],
        paymentMethod: [
          {
            required: true,
            message: "请输入支付方式",
            trigger: "blur",
          },
        ],
      },
      resetForm: null,
    };
  },
  mounted() {
    this.resetForm = { ...this.form };
  },
  methods: {
    /**
     * 确定
     */
    // eslint-disable-next-line no-undef
    onSubmitHandle: _.debounce(function async() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          try {
            this.loading = true;
            // if (!this.form.shopId) { this.form.shopId = localStorage.getItem('shopId') }
            let res;
            if (this.form.repaymentMethod === "total") {
              res = await creditRePayment(this.form);
            } else {
              res = await creditPayment(this.form);
            }
            this.$notify({
              title: "成功",
              message: res.repaymentMsg,
              type: "success",
            });
            this.dialogVisible = false;
            this.loading = false;
            this.$emit("success", res);
          } catch (error) {
            this.loading = false;
            console.log(error);
          }
        }
      });
    }, 1000),

    /**
     * 打开
     * @param row
     */
    show(row, order) {
      this.form = { ...this.resetForm };
      if (row.creditBuyerId) {
        this.form.creditBuyerId = row.creditBuyerId;
        this.form.orderId = order.id;
      } else {
        this.form.id = row.id;
      }
      this.form.repaymentMethod = row.repaymentMethod;
      this.form.debtor = row.debtor;
      this.form.owedAmount = row.owedAmount;
      this.form.accountBalance = row.accountBalance;
      this.dialogVisible = true;
    },

    /**
     * 关闭
     */
    close() {
      this.dialogVisible = false;
    },

    reset() {
      this.query = { ...this.resetQuery };
    },
  },
};
</script>

<style scoped lang="scss">
.credit_info {
  width: 100%;
  background: #f7f7fa;
  border-radius: 3px 3px 3px 3px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 15px 25px;
  box-sizing: border-box;
  margin-bottom: 30px;
  view {
    font-weight: 400;
    font-size: 14px;
    color: #000000;
  }
}
.dialog-title {
  text-align: left;
}
</style>