重新提交Payment

src/views/room/modules/checkIn/Payment.vue

@@ -0,0 +1,496 @@
+<template>
+  <a-spin :spinning="confirmLoading">
+    <j-form-container :disabled="formDisabled">
+      <a-form-model
+        ref="form"
+        :model="model"
+        :rules="validatorRules"
+        slot="detail"
+      >
+        <a-row>
+          <a-col :span="24">
+            <a-form-model-item
+              label="结账应收"
+              :labelCol="labelCol"
+              :wrapperCol="wrapperCol"
+              prop="billAmount"
+            >
+              {{ model.billAmount.toFixed(2) }}元
+              <a-switch v-model="model.coupon" />优惠
+            </a-form-model-item>
+          </a-col>
+          <template v-if="model.coupon">
+            <a-col :span="24">
+              <a-form-model-item
+                label="优惠方式"
+                :labelCol="labelCol"
+                :wrapperCol="wrapperCol"
+                prop="refund"
+              >
+                <a-radio-group v-model="model.preferentialType">
+                  <a-radio :value="1"> 抹零 </a-radio>
+                  <a-radio :value="2"> 减现 </a-radio>
+                  <a-radio :value="3"> 打折 </a-radio>
+                </a-radio-group>
+                <template v-if="model.preferentialType === 3"
+                  >打<a-input-number
+                    style="width: 50px"
+                    v-model="model.discount"
+                    :min="1"
+                    :max="9"
+                  ></a-input-number
+                  >折
+                </template>
+              </a-form-model-item>
+            </a-col>
+            <a-col :span="24" v-if="model.preferentialType == 2">
+              <a-form-model-item
+                label="优惠金额"
+                :labelCol="labelCol"
+                :wrapperCol="wrapperCol"
+                prop="couponFirstAmount"
+              >
+                <a-input-number
+                  style="width: 100px"
+                  :min="0"
+                  v-model="model.couponFirstAmount"
+                  placeholder="请输入优惠金额"
+                ></a-input-number
+                >元
+              </a-form-model-item>
+            </a-col>
+            <a-col :span="24">
+              <a-form-model-item
+                label="惠后金额"
+                :labelCol="labelCol"
+                :wrapperCol="wrapperCol"
+              >
+                {{ couponAmount.toFixed(2) }}元
+              </a-form-model-item>
+            </a-col>
+            <a-col :span="24">
+              <a-form-model-item
+                label="优惠券"
+                :labelCol="labelCol"
+                :wrapperCol="wrapperCol"
+                prop="refund"
+              >
+                <a-select
+                  v-if="model.couponCard"
+                  v-model="model.couponId"
+                  style="width: 200px"
+                  placeholder="优惠券"
+                  :allowClear="true"
+                >
+                  <a-select-option
+                    :value="couponItem.id"
+                    v-for="couponItem in memeberCouponList"
+                    :key="couponItem.id"
+                    >{{ couponItem.couponsName }}</a-select-option
+                  >
+                </a-select>
+                <a-switch v-model="model.couponCard" />使用优惠券
+              </a-form-model-item>
+            </a-col>
+          </template>
+          <a-col :span="24">
+            <a-form-model-item
+              label="实收金额"
+              :labelCol="labelCol"
+              :wrapperCol="wrapperCol"
+            >
+              {{ realityAmount.toFixed(2) }}元
+            </a-form-model-item>
+          </a-col>
+          <a-col :span="24">
+            <a-form-model-item
+              label="收款金额"
+              :labelCol="labelCol"
+              :wrapperCol="wrapperCol"
+            >
+              <div v-for="(item, index) in payList" :key="index">
+                <a-row type="flex" :key="index">
+                  <a-col :span="6">
+                    <a-input-number
+                      style="width: 100px"
+                      v-model="item.money"
+                      :min="0"
+                    ></a-input-number>
+                  </a-col>
+                  <a-col :span="6">
+                    <a-select
+                      v-model="item.payType"
+                      placeholder="收款方式"
+                      @change="(event) => onChange(event, item)"
+                    >
+                      <a-select-option
+                        :value="item2.id"
+                        v-for="item2 in payTypeList"
+                        :key="item2.id"
+                      >
+                        {{ item2.name }}
+                      </a-select-option>
+                    </a-select></a-col
+                  >
+                  <a-col :span="6">
+                    <a-icon
+                      v-if="index == payList.length - 1"
+                      type="plus-circle"
+                      class="dynamic-delete-button"
+                      @click="puls()" />
+                    <a-icon
+                      v-if="payList.length > 1"
+                      type="minus-circle"
+                      style="color: #f56c6c"
+                      class="dynamic-delete-button"
+                      @click="() => remove(index)"
+                  /></a-col>
+                </a-row>
+
+                <a-row type="flex" v-if="item.isVipMemmber">
+                  <a-col :span="12"> 姓名：{{ memberCard.name }} </a-col>
+                  <a-col :span="12"> 卡号：{{ memberCard.cardNo }} </a-col>
+                  <a-col :span="12">
+                    会员级别： {{ memberCard.gradeName }}</a-col
+                  >
+                  <a-col :span="12"> 余额：{{ memberCard.balance }} </a-col>
+                  <a-col :span="12"> 积分：{{ memberCard.integral }} </a-col>
+                  <!-- <a-col :span="12"> 本次扣后剩余： </a-col>
+                <a-col :span="12"> 本次新增积分： </a-col> -->
+                </a-row>
+              </div>
+            </a-form-model-item>
+          </a-col>
+          <a-col :span="24">
+            <a-form-model-item
+              label="实收合计"
+              :labelCol="labelCol"
+              :wrapperCol="wrapperCol"
+            >
+              {{ sumAmount.toFixed(2) }}元
+            </a-form-model-item>
+          </a-col>
+        </a-row>
+      </a-form-model>
+    </j-form-container>
+  </a-spin>
+</template>
+
+<script>
+import { httpAction, getAction } from "@/api/manage";
+import { validateDuplicateValue } from "@/utils/util";
+
+export default {
+  name: "Payment",
+  components: {},
+  props: {
+    //表单禁用
+    disabled: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
+  },
+  data() {
+    return {
+      model: {
+        coupon: false,
+        discount: 1,
+        couponCard: false,
+        couponType: 1,
+        couponFirstAmount: 0,
+        billAmount: 0,
+        selectedFeeIds: [],
+      },
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 5 },
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 16 },
+      },
+      confirmLoading: false,
+      validatorRules: {
+        mobile: [
+          {
+            required: true,
+            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+            message: "请输入手机号!",
+          },
+        ],
+        cardNo: [{ required: true, message: "请输入会员卡号!" }],
+        gradeId: [{ required: true, message: "请输入等级类型!" }],
+        payType: [{ required: true, message: "请输入付款类型!" }],
+        paymentMethod: [{ required: true, message: "请输入付款方式!" }],
+        customerName: [{ required: true, message: "请输入会员姓名!" }],
+        sex: [{ required: true, message: "请输入性别!" }],
+        certificateType: [{ required: true, message: "请输入证件类型!" }],
+        validity: [{ required: true, message: "请输入有效期!" }],
+      },
+      url: {
+        add: "/business/busRoomBookingOrders/booking-to-live",
+        edit: "/business/busMemberCard/edit",
+        queryById: "/business/busMemberCard/queryById",
+      },
+      gradeList: [],
+      paymentMethodList: [],
+      staffList: [],
+      customerList: [],
+      oldcustomerList: [],
+      payTypeList: [],
+      memberCard: {},
+      isVipMemmber: false,
+      payList: [],
+      memeberCouponList: [],
+    };
+  },
+  computed: {
+    formDisabled() {
+      return this.disabled;
+    },
+    sumAmount() {
+      var sum = this.payList.reduce(function (total, item) {
+        return total + item.money;
+      }, 0);
+      return sum;
+    },
+    couponAmount() {
+      var sum = 0;
+      if (this.model.coupon) {
+        if (this.model.preferentialType == 1) {
+          sum = Math.floor(this.model.billAmount);
+        } else if (this.model.preferentialType == 2) {
+          sum = this.model.billAmount - (this.model.couponFirstAmount || 0);
+        } else if (this.model.preferentialType == 3) {
+          sum = parseFloat(
+            ((this.model.billAmount * this.model.discount) / 10).toFixed(2)
+          );
+        }
+      } else {
+        sum = this.model.billAmount;
+      }
+      return sum;
+    },
+    realityAmount() {
+      if (this.model.couponCard) {
+        var find = this.memeberCouponList.find(
+          (t) => t.id == this.model.couponId
+        );
+        if (find) {
+          return this.couponAmount - find.cost;
+        }
+      }
+      return this.couponAmount;
+    },
+  },
+  created() {
+    var _info = JSON.parse(localStorage.getItem("storeInfo"));
+    if (_info) {
+      this.model.hotelId = _info.id;
+    }
+    //备份model原始值
+    this.modelDefault = JSON.parse(JSON.stringify(this.model));
+    getAction("/business/busRoomPayType/list", {
+      pageSize: 99999,
+      pageNo: 1,
+    }).then((res) => {
+      if (res.success) {
+        this.payTypeList = res.result.records;
+      }
+    });
+    getAction("/business/busMemberCard/list", {
+      id: "11111111",
+    }).then((res) => {
+      if (res.success) {
+        if (res.result.records && res.result.records.length > 0) {
+          this.memberCard = res.result.records[0];
+        }
+      }
+    });
+  },
+  methods: {
+    getbusRoomPayType() {
+      getAction("/business/busRoomPayType/list", {
+        pageSize: 99999,
+        pageNo: 1,
+      }).then((res) => {
+        if (res.success) {
+          this.payTypeList = res.result.records;
+          if (this.payTypeList && this.payTypeList.length > 0) {
+            this.$set(this.model, "payType", this.payTypeList[0].id);
+
+            this.payList = [
+              {
+                money: this.realityAmount,
+                payType: this.payTypeList[0].id,
+                isVipMemmber: false,
+              },
+            ];
+          }
+        }
+      });
+    },
+    puls() {
+      this.payList.push({
+        money: 0,
+        payType: this.payTypeList[0].id,
+        isVipMemmber: false,
+      });
+    },
+    remove(index) {
+      this.payList.splice(index, 1);
+    },
+    onChange(e, value) {
+      console.log("value", value);
+      console.log("e", e);
+      var find = this.payTypeList.find((t) => t.id == value.payType);
+      value.isVipMemmber = find && find.name == "会员卡";
+    },
+    handleSearch(value) {
+      let result;
+      if (!value) {
+        result = this.oldcustomerList;
+      } else {
+        result = this.oldcustomerList.filter((t) => t.name.includes(value));
+      }
+      this.customerList = result;
+    },
+    handleSelectMember(e) {
+      var find = this.customerList.find((t) => t.id === e);
+      this.model.phone = find.phone;
+      this.model.customerName = find.name;
+      this.model.customerId = find.id;
+    },
+    getMemeberCouponList() {
+      getAction("/business/busMarketCouponsCashUsed/memeberCouponList", {
+        pageNo: 1,
+        pageSize: 99,
+        conditions: 900,
+        mobile: this.model.vipCustomerId,
+      }).then((res) => {
+        if (res.success) {
+          this.memeberCouponList = res.result.records;
+        }
+      });
+    },
+    add(livingOrderId, roomId) {
+      this.modelDefault.livingOrderId = livingOrderId;
+      this.modelDefault.roomId = roomId;
+      this.edit(this.modelDefault);
+    },
+    edit(record) {
+      this.model = Object.assign({}, record);
+      this.getbusRoomPayType();
+      if (this.model.vipCustomerId) {
+        this.getMemeberCouponList();
+      }
+      this.visible = true;
+    },
+    submitForm() {
+      const that = this;
+      // 触发表单验证
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          console.log("this.realityAmount ", this.realityAmount);
+          console.log("this.sumAmount ", this.sumAmount);
+          if (this.realityAmount != this.sumAmount) {
+            that.$message.warning("实收金额和实收合计必须相等");
+            return;
+          }
+          var obj = {};
+          var fees = [];
+          if (this.model.coupon) {
+            fees.push({
+              feeType: this.model.feeType,
+              preferentialType: this.model.preferentialType,
+              money: this.couponAmount.toFixed(2),
+              custorerOrderRemark: "优惠金额",
+              isPreferential: true,
+            });
+          }
+          if (this.model.couponCard && this.model.couponId) {
+            var find = this.memeberCouponList.find(
+              (t) => t.id == this.model.couponId
+            );
+            if (find) {
+              fees.push({
+                feeType: this.model.feeType,
+                money: find.cost.toFixed(2),
+                custorerOrderRemark: "优惠券",
+                isPreferential: true,
+              });
+            }
+          }
+          this.payList.forEach((item) => {
+            fees.push({
+              feeType: this.model.feeType,
+              money: item.money.toFixed(2),
+              payType: item.payType,
+              custorerOrderRemark: "结账退房",
+              isPreferential: false,
+            });
+          });
+
+          that.confirmLoading = true;
+          var url =
+            "/business/busRoomBookingOrders/settle-checkout?bookingOrderId=" +
+            this.model.bookingOrderId;
+          if (this.model.livingOrderId) {
+            url =
+              "/business/busRoomBookingOrders/living-settle-checkout?livingOrderId=" +
+              this.model.livingOrderId;
+          }
+          if (
+            this.model.selectedFeeIds &&
+            this.model.selectedFeeIds.length > 0
+          ) {
+            url = "/business/busRoomBookingOrders/partial-settle";
+            obj = {
+              fees: fees,
+              livingOrderId: this.model.livingOrderId,
+              selectedFeeIds: this.model.selectedFeeIds,
+            };
+          }
+          httpAction(
+            url,
+            this.model.selectedFeeIds && this.model.selectedFeeIds.length > 0
+              ? obj
+              : fees,
+            "post"
+          )
+            .then((res) => {
+              if (res.success) {
+                that.$message.success("结账成功");
+                that.$emit("ok");
+              } else {
+                that.$message.warning(res.message);
+              }
+            })
+            .finally(() => {
+              that.confirmLoading = false;
+            });
+        }
+      });
+    },
+  },
+};
+</script>
+<style scoped>
+.dynamic-delete-button {
+  cursor: pointer;
+  position: relative;
+  /* top: 4px; */
+  margin-left: 5px;
+  font-size: 18px;
+  color: #1890ff;
+  transition: all 0.3s;
+}
+.dynamic-delete-button:hover {
+  color: #777;
+}
+.dynamic-delete-button[disabled] {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+</style>

src/views/room/modules/checkIn/PaymentModal.vue

@@ -0,0 +1,60 @@
+<template>
+  <j-modal
+    :title="title"
+    :width="width"
+    :visible="visible"
+    switchFullscreen
+    @ok="handleOk"
+    :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
+    @cancel="handleCancel"
+    cancelText="关闭">
+    <payment ref="realForm" @ok="submitCallback" :disabled="disableSubmit"></payment>
+  </j-modal>
+</template>
+
+<script>
+
+  import payment from './Payment'
+  export default {
+    name: 'PaymentModal',
+    components: {
+      payment
+    },
+    data () {
+      return {
+        title:'',
+        width:800,
+        visible: false,
+        disableSubmit: false
+      }
+    },
+    methods: {
+      add (record) {
+        this.visible=true
+        this.$nextTick(()=>{
+          this.$refs.realForm.add(record);
+        })
+      },
+      edit (record) {
+        this.visible=true
+        this.$nextTick(()=>{
+          this.$refs.realForm.edit(record);
+        })
+      },
+      close () {
+        this.$emit('close');
+        this.visible = false;
+      },
+      handleOk () {
+        this.$refs.realForm.submitForm();
+      },
+      submitCallback(){
+        this.$emit('ok');
+        this.visible = false;
+      },
+      handleCancel () {
+        this.close()
+      }
+    }
+  }
+</script>