结账界面

src/views/room/fangtailive.vue

@@ -912,7 +912,7 @@ export default {
         }
         // 清除定时器
         clearTimeout(this.timeId);
-      }, 100);
+      }, 200);
     },
     handleBillInfo(roomLive) {
       console.log("handleBillInfo", roomLive);
@@ -936,6 +936,7 @@ export default {
         this.$refs.ModalBillRoomInfo.title = "账单";
         this.$refs.ModalBillRoomInfo.disableSubmit = true;
       }
+      roomLive.roomInfo.state = 0;
     },
     handleCheckInAdd(roomLive) {
       if (this.timeId) {

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

@@ -187,28 +187,41 @@
             </div>
           </a-tab-pane>
         </a-tabs>
-        <h4
-          v-if="vipCustomer && vipCustomer.id"
-          style="
-            color: rgba(255, 141, 26, 1);
-            font-weight: 600;
-            margin-top: 50px;
-          "
+        <template v-if="vipCustomer && vipCustomer.id">
+          <h4
+            style="
+              color: rgba(255, 141, 26, 1);
+              font-weight: 600;
+              margin-top: 50px;
+            "
+          >
+            会员信息
+          </h4>
+          <a-divider />
+          <a-descriptions :column="2">
+            <a-descriptions-item label="姓名">
+              {{ vipCustomer.name }}
+            </a-descriptions-item>
+            <a-descriptions-item label="证件号"
+              >{{ vipCustomer.certificateNo }}
+            </a-descriptions-item>
+            <a-descriptions-item label="卡号">
+              {{ vipCustomer.cardNo }}
+            </a-descriptions-item>
+            <a-descriptions-item label="手机号">
+              {{ vipCustomer.mobile }}
+            </a-descriptions-item>
+            <a-descriptions-item label="会员级别">
+              {{ vipCustomer.gradeName }}
+            </a-descriptions-item>
+            <a-descriptions-item label="余额"
+              >{{ vipCustomer.balance.toFixed(2) }} 元
+            </a-descriptions-item>
+            <a-descriptions-item label="积分">
+              {{ vipCustomer.integral }} 分
+            </a-descriptions-item>
+          </a-descriptions></template
         >
-          会员信息
-        </h4>
-        <a-divider />
-        <a-descriptions :column="2">
-          <a-descriptions-item label="姓名"> {{ vipCustomer.name }} </a-descriptions-item>
-          <a-descriptions-item label="证件号"
-            >{{ vipCustomer.certificateNo }}
-          </a-descriptions-item>
-          <a-descriptions-item label="卡号">  {{ vipCustomer.cardNo }} </a-descriptions-item>
-          <a-descriptions-item label="手机号"> {{ vipCustomer.mobile }}  </a-descriptions-item>
-          <a-descriptions-item label="会员级别"> {{ vipCustomer.gradeName }}  </a-descriptions-item>
-          <a-descriptions-item label="余额">{{ vipCustomer.balance.toFixed(2) }} 元 </a-descriptions-item>
-          <a-descriptions-item label="积分"> {{ vipCustomer.integral }} 分 </a-descriptions-item>
-        </a-descriptions>
       </div>
       <div style="width: 40%">
         <div style="display: flex; justify-content: space-between">

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

@@ -0,0 +1,234 @@
+<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="billRefund"
+            >
+              <a-input
+                style="width: 100px"
+                disabled
+                v-model="model.billRefund"
+                placeholder="请输入结账应退"
+              ></a-input
+              >元
+            </a-form-model-item>
+          </a-col>
+          <a-col :span="24">
+            <a-form-model-item
+              label="押金应退"
+              :labelCol="labelCol"
+              :wrapperCol="wrapperCol"
+              prop="deposit"
+            >
+              <a-input
+                style="width: 100px"
+                disabled
+                v-model="model.deposit"
+                placeholder="请输入押金应退"
+              ></a-input
+              >元
+              <a-select
+                v-model="model.certType"
+                style="width: 200px"
+                placeholder="证件类型"
+                :allowClear="true"
+              >
+                <a-select-option :value="1">原路退款</a-select-option>
+                <a-select-option :value="2">现金</a-select-option>
+              </a-select>
+            </a-form-model-item>
+          </a-col>
+          <a-col :span="24">
+            <a-form-model-item
+              label="房费应退"
+              :labelCol="labelCol"
+              :wrapperCol="wrapperCol"
+              prop="roomFee"
+            >
+              <a-input
+                style="width: 100px"
+                disabled
+                v-model="model.roomFee"
+                placeholder="请输入房费应退"
+              ></a-input
+              >元
+              <a-select
+                v-model="model.certType"
+                style="width: 200px"
+                placeholder="证件类型"
+                :allowClear="true"
+              >
+                <a-select-option :value="1">原路退款</a-select-option>
+                <a-select-option :value="2">现金</a-select-option>
+              </a-select>
+            </a-form-model-item>
+          </a-col>
+          <a-col :span="24">
+            <a-form-model-item
+              label="实退合计"
+              :labelCol="labelCol"
+              :wrapperCol="wrapperCol"
+              prop="refund"
+            >
+              <a-input
+                style="width: 100px"
+                disabled
+                v-model="model.refund"
+                placeholder="请输入实退合计"
+              ></a-input>
+            </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: "结账退款",
+  components: {},
+  props: {
+    //表单禁用
+    disabled: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
+  },
+  data() {
+    return {
+      model: { payType: 1, livingOrderId: "", certType: 1, gender: 1 },
+      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: [],
+    };
+  },
+  computed: {
+    formDisabled() {
+      return this.disabled;
+    },
+  },
+  created() {
+    var _info = JSON.parse(localStorage.getItem("storeInfo"));
+    if (_info) {
+      this.model.hotelId = _info.id;
+    }
+    //备份model原始值
+    this.modelDefault = JSON.parse(JSON.stringify(this.model));
+    this.getbusCustomer();
+  },
+  methods: {
+    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;
+    },
+    getbusCustomer() {
+      getAction("/bus/busCustomer/list", {}).then((res) => {
+        if (res.success) {
+          this.customerList = res.result.records;
+          this.oldcustomerList = JSON.parse(JSON.stringify(this.customerList));
+        }
+      });
+    },
+    add(livingOrderId, roomId) {
+      this.modelDefault.livingOrderId = livingOrderId;
+      this.modelDefault.roomId = roomId;
+      this.edit(this.modelDefault);
+    },
+    edit(record) {
+      this.model = Object.assign({}, record);
+      this.visible = true;
+    },
+    submitForm() {
+      const that = this;
+      // 触发表单验证
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          that.confirmLoading = true;
+          // var customers = [];
+          // customers.push({
+          //   certNo: this.model.certNo,
+          //   certType: this.model.certType,
+          //   customerId: this.model.customerId,
+          //   customerName: this.model.customerName,
+          //   gender: this.model.gender,
+          //   phone: this.model.phone,
+          //   roomId: this.model.roomId,
+          // });
+          httpAction("/business/busLivingCustomer/add", this.model, "post")
+            .then((res) => {
+              if (res.success) {
+                that.$message.success("入住成功");
+                that.$emit("ok");
+              } else {
+                that.$message.warning(res.message);
+              }
+            })
+            .finally(() => {
+              that.confirmLoading = false;
+            });
+        }
+      });
+    },
+  },
+};
+</script>

src/views/room/modules/checkIn/RefundModal.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="关闭">
+    <refund ref="realForm" @ok="submitCallback" :disabled="disableSubmit"></refund>
+  </j-modal>
+</template>
+
+<script>
+
+  import Refund from './Refund'
+  export default {
+    name: 'RefundModal',
+    components: {
+      Refund
+    },
+    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>

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

@@ -0,0 +1,374 @@
+<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="billRefund"
+            >
+              <a-input
+                style="width: 100px"
+                disabled
+                v-model="model.billAmount"
+                placeholder="请输入结账应收"
+              ></a-input
+              >元 <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.couponType">
+                  <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.couponType === 3"
+                  >打<a-input-number
+                    style="width: 50px"
+                    v-model="model.discount"
+                    :min="1"
+                    :max="10"
+                  ></a-input-number
+                  >折
+                </template>
+              </a-form-model-item>
+            </a-col>
+            <a-col :span="24" v-if="model.couponType !== 3">
+              <a-form-model-item
+                label="优惠金额"
+                :labelCol="labelCol"
+                :wrapperCol="wrapperCol"
+                prop="deposit"
+              >
+                <a-input-number
+                  style="width: 100px"
+                  :min="0"
+                  v-model="model.deposit"
+                  placeholder="请输入优惠金额"
+                ></a-input-number
+                >元
+              </a-form-model-item>
+            </a-col>
+            <a-col :span="24">
+              <a-form-model-item
+                label="惠后金额"
+                :labelCol="labelCol"
+                :wrapperCol="wrapperCol"
+                prop="roomFee"
+              >
+                <a-input-number
+                  style="width: 100px"
+                  disabled
+                  v-model="model.roomFee"
+                  placeholder="请输入惠后金额"
+                ></a-input-number
+                >元
+              </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.certType"
+                  style="width: 200px"
+                  placeholder="优惠券"
+                  :allowClear="true"
+                >
+                  <a-select-option :value="1">原路退款</a-select-option>
+                  <a-select-option :value="2">现金</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"
+              prop="roomFee"
+            >
+              <a-input-number
+                style="width: 100px"
+                v-model="model.roomFee"
+                placeholder="请输入实收金额"
+              ></a-input-number
+              >元
+            </a-form-model-item>
+          </a-col>
+          <a-col :span="24">
+            <a-form-model-item
+              label="收款金额"
+              :labelCol="labelCol"
+              :wrapperCol="wrapperCol"
+              prop="roomFee"
+            >
+              <a-row type="flex">
+                <a-col :span="6">
+                  <a-input-number
+                    style="width: 100px"
+                    v-model="model.roomFee"
+                    :min="0"
+                  ></a-input-number>
+                </a-col>
+                <a-col :span="6">
+                  <a-select
+                    v-model="model.orderFees"
+                    placeholder="收款方式"
+                    @change="onChange"
+                  >
+                    <a-select-option
+                      :value="item.id"
+                      v-for="item in payTypeList"
+                      :key="item.id"
+                    >
+                      {{ item.name }}
+                    </a-select-option>
+                  </a-select></a-col
+                >
+                <a-col :span="6">
+                  <a-icon
+                    type="plus-circle"
+                    class="dynamic-delete-button"
+                    @click="puls()" />
+                  <a-icon
+                    type="minus-circle"
+                    style="color: #f56c6c"
+                    class="dynamic-delete-button"
+                    @click="() => remove(room, index)"
+                /></a-col>
+              </a-row>
+
+              <a-row type="flex">
+                <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>
+            </a-form-model-item>
+          </a-col>
+          <a-col :span="24">
+            <a-form-model-item
+              label="实收合计"
+              :labelCol="labelCol"
+              :wrapperCol="wrapperCol"
+              prop="roomFee"
+            >
+              <a-input-number
+                style="width: 100px"
+                v-model="model.roomFee"
+                placeholder="请输入实收合计"
+              ></a-input-number
+              >元
+            </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: "结账退款",
+  components: {},
+  props: {
+    //表单禁用
+    disabled: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
+  },
+  data() {
+    return {
+      model: { coupon: false, discount: 1, couponCard: false, couponType: 1 },
+      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:{},
+    };
+  },
+  computed: {
+    formDisabled() {
+      return this.disabled;
+    },
+  },
+  created() {
+    var _info = JSON.parse(localStorage.getItem("storeInfo"));
+    if (_info) {
+      this.model.hotelId = _info.id;
+    }
+    //备份model原始值
+    this.modelDefault = JSON.parse(JSON.stringify(this.model));
+    this.getMemeberCouponList();
+    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: {
+    onChange(checked) {
+      console.log(`a-switch to ${checked}`);
+    },
+    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: "15802576620",
+      }).then((res) => {
+        if (res.success) {
+          this.customerList = 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.visible = true;
+    },
+    submitForm() {
+      const that = this;
+      // 触发表单验证
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          that.confirmLoading = true;
+          // var customers = [];
+          // customers.push({
+          //   certNo: this.model.certNo,
+          //   certType: this.model.certType,
+          //   customerId: this.model.customerId,
+          //   customerName: this.model.customerName,
+          //   gender: this.model.gender,
+          //   phone: this.model.phone,
+          //   roomId: this.model.roomId,
+          // });
+          httpAction("/business/busLivingCustomer/add", this.model, "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: 'RefundModal',
+    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>