|
|
@@ -11,9 +11,23 @@
|
|
|
<a-form-item v-bind="formItemLayout" label="房型信息">
|
|
|
<span>{{ currentOrderRoom.roomType }}</span>
|
|
|
</a-form-item>
|
|
|
- <a-form-item v-bind="formItemLayout" label="房间单价">
|
|
|
- <span>{{ currentOrderRoom.price }}</span>
|
|
|
+ <a-form-item v-bind="formItemLayout" label="入住人姓名">
|
|
|
+ <a-input
|
|
|
+ v-decorator="[
|
|
|
+ 'clientName',
|
|
|
+ { rules: [{required: true, message: '请填写入住人姓名', }] }
|
|
|
+ ]"
|
|
|
+ />
|
|
|
</a-form-item>
|
|
|
+ <a-form-item v-bind="formItemLayout" label="手机号">
|
|
|
+ <a-input
|
|
|
+ v-decorator="[
|
|
|
+ 'phoneNumber',
|
|
|
+ { rules: [{required: true, message: '请填写入住人联系手机', }] }
|
|
|
+ ]"
|
|
|
+ />
|
|
|
+ </a-form-item>
|
|
|
+
|
|
|
<a-form-item v-bind="formItemLayout" label="入住日期">
|
|
|
<a-range-picker
|
|
|
format="YYYY-MM-DD"
|
|
|
@@ -50,6 +64,17 @@
|
|
|
</a-select-option>
|
|
|
</a-select>
|
|
|
</a-form-item>
|
|
|
+ <a-form-item v-bind="formItemLayout" label="有无儿童">
|
|
|
+ <a-radio-group
|
|
|
+ v-decorator="[
|
|
|
+ 'haveChild',
|
|
|
+ { rules: [{required: true, message: '请选择有无儿童入住', }] }
|
|
|
+ ]"
|
|
|
+ >
|
|
|
+ <a-radio :value="1">有</a-radio>
|
|
|
+ <a-radio :value="0">无</a-radio>
|
|
|
+ </a-radio-group>
|
|
|
+ </a-form-item>
|
|
|
<a-form-item v-bind="formItemLayout" label="房间数">
|
|
|
<a-select
|
|
|
v-decorator="[
|
|
|
@@ -70,38 +95,32 @@
|
|
|
</a-select-option>
|
|
|
</a-select>
|
|
|
</a-form-item>
|
|
|
- <a-form-item v-bind="formItemLayout" label="房费情况">
|
|
|
+ <a-form-item v-bind="formItemLayout" label="房间单价">
|
|
|
+ <span>{{ currentOrderRoom.price }}</span>
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item v-bind="formItemLayout" label="总价">
|
|
|
<span>¥{{ totalPrice }}</span>
|
|
|
</a-form-item>
|
|
|
-
|
|
|
<a-divider></a-divider>
|
|
|
-
|
|
|
- <a-form-item v-bind="formItemLayout" label="入住人姓名">
|
|
|
- <a-input
|
|
|
- v-decorator="[
|
|
|
- 'clientName',
|
|
|
- { rules: [{required: true, message: '请填写入住人姓名', }] }
|
|
|
- ]"
|
|
|
- />
|
|
|
- </a-form-item>
|
|
|
- <a-form-item v-bind="formItemLayout" label="手机号">
|
|
|
- <a-input
|
|
|
- v-decorator="[
|
|
|
- 'phoneNumber',
|
|
|
- { rules: [{required: true, message: '请填写入住人联系手机', }] }
|
|
|
- ]"
|
|
|
- />
|
|
|
- </a-form-item>
|
|
|
- <a-form-item v-bind="formItemLayout" label="有无儿童">
|
|
|
- <a-radio-group
|
|
|
- v-decorator="[
|
|
|
- 'haveChild',
|
|
|
- { rules: [{required: true, message: '请选择有无儿童入住', }] }
|
|
|
- ]"
|
|
|
+ <h2 v-if="orderMatchCouponList.length>0">优惠</h2>
|
|
|
+ <a-checkbox-group v-model="checkedList" @change="onchange">
|
|
|
+ <a-table
|
|
|
+ :columns="columns"
|
|
|
+ :dataSource="orderMatchCouponList"
|
|
|
+ :showHeader="false"
|
|
|
+ bordered
|
|
|
+ v-if="orderMatchCouponList.length>0"
|
|
|
>
|
|
|
- <a-radio :value="1">有</a-radio>
|
|
|
- <a-radio :value="0">无</a-radio>
|
|
|
- </a-radio-group>
|
|
|
+ <a-checkbox
|
|
|
+ slot="id"
|
|
|
+ slot-scope="record"
|
|
|
+ :value="record"
|
|
|
+ >
|
|
|
+ </a-checkbox>
|
|
|
+ </a-table>
|
|
|
+ </a-checkbox-group>
|
|
|
+ <a-form-item v-bind="formItemLayout" label="结算后总价">
|
|
|
+ <span>¥{{ finalPrice }}</span>
|
|
|
</a-form-item>
|
|
|
</a-form>
|
|
|
</a-modal>
|
|
|
@@ -109,6 +128,32 @@
|
|
|
<script>
|
|
|
import { mapGetters, mapMutations, mapActions } from 'vuex'
|
|
|
const moment = require('moment')
|
|
|
+const columns = [
|
|
|
+ {
|
|
|
+ title: '勾选',
|
|
|
+ dataIndex: 'id',
|
|
|
+ scopedSlots: {customRender: 'id'}
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '优惠类型',
|
|
|
+ dataIndex: 'couponName',
|
|
|
+ scopedSlots: {customRender: 'couponName'}
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '折扣',
|
|
|
+ dataIndex: 'discount',
|
|
|
+ },
|
|
|
+
|
|
|
+ {
|
|
|
+ title: '优惠简介',
|
|
|
+ dataIndex: 'description',
|
|
|
+
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '优惠金额',
|
|
|
+ dataIndex: 'discountMoney',
|
|
|
+ },
|
|
|
+ ];
|
|
|
export default {
|
|
|
name: 'orderModal',
|
|
|
data() {
|
|
|
@@ -124,6 +169,9 @@ export default {
|
|
|
},
|
|
|
},
|
|
|
totalPrice: '',
|
|
|
+ columns,
|
|
|
+ checkedList: [],
|
|
|
+ finalPrice: ''
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
@@ -133,6 +181,7 @@ export default {
|
|
|
'currentHotelId',
|
|
|
'currentHotelInfo',
|
|
|
'userId',
|
|
|
+ 'orderMatchCouponList'
|
|
|
]),
|
|
|
|
|
|
},
|
|
|
@@ -144,7 +193,8 @@ export default {
|
|
|
'set_orderModalVisible'
|
|
|
]),
|
|
|
...mapActions([
|
|
|
- 'addOrder'
|
|
|
+ 'addOrder',
|
|
|
+ 'getOrderMatchCoupons'
|
|
|
]),
|
|
|
cancelOrder() {
|
|
|
this.set_orderModalVisible(false)
|
|
|
@@ -163,6 +213,14 @@ export default {
|
|
|
changeRoomNum(v) {
|
|
|
this.totalPrice = Number(v) * Number(this.currentOrderRoom.price) * moment(this.form.getFieldValue('date')[1]).diff(moment(this.form.getFieldValue('date')[0]),'day')
|
|
|
},
|
|
|
+ onchange() {
|
|
|
+ this.finalPrice = this.totalPrice
|
|
|
+ if(this.checkedList.length>0){
|
|
|
+ this.orderMatchCouponList.filter(item => this.checkedList.indexOf(item.id)!=-1).forEach(item => this.finalPrice= this.finalPrice-item.discountMoney)
|
|
|
+ }else{
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
handleSubmit(e) {
|
|
|
e.preventDefault();
|
|
|
this.form.validateFieldsAndScroll((err, values) => {
|
|
|
@@ -177,13 +235,26 @@ export default {
|
|
|
roomNum: this.form.getFieldValue('roomNum'),
|
|
|
peopleNum: this.form.getFieldValue('peopleNum'),
|
|
|
haveChild: this.form.getFieldValue('haveChild'),
|
|
|
- createForm: '',
|
|
|
- price: this.currentOrderRoom.price
|
|
|
+ createDate: '',
|
|
|
+ price: this.checkedList.length > 0 ? this.finalPrice: this.totalPrice
|
|
|
}
|
|
|
this.addOrder(data)
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
+ },
|
|
|
+ watch:{
|
|
|
+ totalPrice(val) {
|
|
|
+ let data = {
|
|
|
+ userId: this.userId,
|
|
|
+ hotelId: this.currentHotelId,
|
|
|
+ orderPrice: this.totalPrice,
|
|
|
+ roomNum: this.form.getFieldValue('roomNum'),
|
|
|
+ checkIn: moment(this.form.getFieldValue('date')[0]).format('YYYY-MM-DD'),
|
|
|
+ checkOut: moment(this.form.getFieldValue('date')[1]).format('YYYY-MM-DD'),
|
|
|
+ }
|
|
|
+ this.getOrderMatchCoupons(data)
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</script>
|