Client-Teapay/src/pagesB/hotel/hotelDetail.vue

<template>
    <div class="hotelDetail">
        <div class="hotelinnfo">
            <div class="p p1 flex_r flex_js flex_ac">
                <div class="day">
                    <span>{{ daydate(roomInfo.checkInDate) }}</span>
                    <span class="teg">{{ getThatDay(roomInfo.checkInDate) }}</span>
                </div>
                <div class="daynum">{{ numberdays }} 晚</div>
                <div class="day">
                    <span>{{ daydate(roomInfo.checkOutDate) }}</span>
                    <span class="teg">{{ getThatDay(roomInfo.checkOutDate) }}</span>
                </div>
            </div>
            <div class="p p2 iconfont">{{roomInfo.roomName}}&#xe605;{{roomInfo.ratePlanName}}</div>
            <div class="p p3">
                <span>{{ roomInfo.bedType }}</span>
                <span>{{ roomInfo.windowType }}</span>
                <span>{{ roomInfo.breakfast }}</span>
                <span>可入住{{ roomInfo.capacity }}人</span>
            </div>
            <div class="p4">
                <span class="iconfont">&#xe636;</span>
                <span>{{ roomInfo.cancelRule.desc }}</span>
            </div>
        </div>
        <div class="userinfo">
            <div class="tit">入住信息</div>
            <div class="p flex_r flex_js flex_ac">
                <span class="label">房间数量</span>
                <scroll-view class="scroll_H" :scroll-x="true">
                    <div class="rommnum">
                        <template v-for="i in 8">
                            <div :class="{'r_num':true,'active':qda.roomNum==i}" :key="i" v-if="i>0" @click="roomNumf(i)">{{ i }} 间</div>
                        </template>
                    </div>
                </scroll-view>
            </div>
            <div class="p flex_r flex_jb flex_ac">
                <span class="label">住客姓名</span>
                <input v-model="qda.contactName" />
            </div>
            <div class="p flex_r flex_jb flex_ac">
                <span class="label">联系电话</span>
                <input v-model="qda.contactMobile" />
            </div>
            <div class="p flex_r flex_js flex_ac">
                <span class="label">最晚到店</span>
                <scroll-view class="scroll_H" :scroll-x="true">
                    <div class="rommnum">
                        <div v-for="(a,b) in Timearr" :key="b" class="r_num" :class="[a.active?'active':'']" @click="Timeitem(b,a.t)">{{ a.v }}</div>
                    </div>
                </scroll-view>
            </div>
            <div class="p flex_r flex_jb flex_ac">
                <span class="label">备注</span>
                <input v-model="qda.orderRemark" />
            </div>
        </div>
        <div class="money card">
            <div class="li flex_r flex_jb">
                <span>消费金额</span>
                <span>￥{{ cartTotal || 0 }}</span>
            </div>
            <div class="li flex_r flex_jb">
                <span>消费金抵扣<span class="corg">{{Integral}}%</span></span>
                <span class="corg">-￥{{ deduction || 0 }}</span>
            </div>
            <div class="li flex_r flex_jb">
                <span>实付金额</span>
                <span>￥{{ actuallypaid || 0 }}</span>
            </div>
        </div>
        <div class="money card">
            <div class="li flex_r flex_jb">
                <span>赠送茶宝</span>
                <span>{{ chabao || 0 }}</span>
            </div>
        </div>
        <div class="footbtn" @click="onpay">立即支付</div>
    </div>
</template>
<script>
import { ToPayOpre } from "@/utils/reqTools.js";
let toPayOpre = new ToPayOpre();
import { getCache } from "@/utils/storage.js";
import { post } from "@/request/api.js";
import { getThatDay, getDaysBetween } from "@/utils/myfun.js"
export default {
    name: "hotelDetail",
    props: {},
    components: {},
    data() {
        return {
            numberdays: 1,
            qda: {},
            roomInfo: getCache("roomInfo"),
            userinfo: uni.getStorageSync("userinfo"),
            ratio: {},
            cartTotal: 0,
            Integral: 0,
            deduction: 0,
            actuallypaid: 0,
            chabao: 0,

            Timearr: [], //最晚时间数组

            guestNames: [], // 房客姓名，每个房间预留一个房客姓名。长度需和房间数量保持一致
        };
    },
    methods: {
        getThatDay,
        getDaysBetween,
        getIntegral() {
            post("local/getIntegral", { type: 4 }).then(res => {
                if (res.code == 0) {
                    this.ratio = res.data;
                    this.computef();
                }
            })
        },
        computef() {
            let { integral, chabao } = this.ratio
            let i1 = integral,
                i2 = chabao;
            let Total = this.$h.Mul(this.roomInfo.aveOriginalPrice, this.numberdays);
            this.cartTotal = this.$h.Mul(Total, this.qda.roomNum);
            this.Integral = this.$h.Mul(i1, 100);
            this.deduction = this.$h.Mul(this.cartTotal, i1);
            this.actuallypaid = this.$h.Sub(this.cartTotal, this.deduction);
            this.chabao = this.$h.Mul(this.actuallypaid, i2).toFixed(2);
        },
        arriveTimearr(){
            let tim = this.$day(this.roomInfo.checkInDate + " 18:00:00"), arr = [];
            for (let a = 0; a < 9; a++) {
                let t = tim.add(a,"h")
                arr.push({
                    t: t.format("YYYY-MM-DD HH:mm"),
                    v: t.format("HH:mm"),
                    active: false
                })
            }
            this.Timearr = arr;
            this.qda.arriveTime = arr[2].t
            this.Timearr[2].active = true
        },
        daydate(va) {
            return this.$day(va).format("M月DD日")
        },
        roomNumf(va) {
            this.qda.roomNum = va
            this.computef();
            this.guestNames = []
            for (let a = 0; a < va; a++) {
                this.guestNames.push(this.qda.contactName)
            }
        },
        Timeitem(inx,va){
            for (let i of this.Timearr) {
                i.active = false
            }
            this.$set(this.Timearr[inx],"active",true)
            this.qda.arriveTime = va
        },
        onpay() {
            let RI = Object.assign({},this.roomInfo)
            let da = {
                ...this.qda,
                hotelID: RI.hotelID,
                ratePlanID: RI.ratePlanId,
                checkInDate: RI.checkInDate,
                checkOutDate: RI.checkOutDate,
                guestNames: this.guestNames,
                // orderAmount: this.actuallypaid
            }
            delete RI.ratePlans;
            delete RI.ratePlanId;
            da.attachment = JSON.stringify(RI);
            post("local/hotel/addOrder", da).then(res => {
                if (res.code == 0 && res.data.prepayid) {
                    toPayOpre.toPay(res.data, (rea) => {
                        if (!rea) {
                            // 支付成功
                            this.goto("/pagesB/orderingfood/orderlist")
                        } else {
                            // 支付失败
                        }
                    });
                }
            })
        }
    },
    onLoad(da) {
        // this.roomInfo = getCache("roomInfo");
        this.getIntegral();
        this.qda = {
            roomNum: 1,
            contactName: this.userinfo.nickname,
            contactMobile: this.userinfo.mobile
        }
        this.roomNumf(1);
        this.numberdays = getDaysBetween(this.roomInfo.checkInDate, this.roomInfo.checkOutDate);
        this.arriveTimearr();
    },
    onShow() {},
    mounted() {},
};
</script>
<style scoped lang='scss'>
.hotelDetail {
    padding: 28rpx 32rpx;
}

.hotelinnfo {
    background-color: #fff;
    border-radius: 16rpx;
    padding: 26rpx 30rpx;
    box-shadow: 4rpx 4rpx 16rpx 10rpx rgba($color: #000, $alpha: 0.15);

    .daynum {
        margin: 0 36rpx;
        font-size: 32rpx;
        padding: 3rpx 16rpx;
        border-radius: 8rpx;
        background-color: rgba($color: #000, $alpha: 0.06);
    }

    .day {
        font-size: 36rpx;
        font-weight: 600;

        span {
            vertical-align: middle;
        }
    }

    .teg {
        font-weight: 400;
        font-size: 26rpx;
        margin-left: 10rpx;
    }

    .p2 {
        font-size: 34rpx;
        font-weight: 600;
    }

    .p3 {
        font-size: 28rpx;

        span {
            margin-right: 16rpx;

            :last-child {
                margin-right: 0;
            }
        }
    }

    .p4 {
        color: #00B76C;
        font-size: 26rpx;

        .iconfont {
            margin-right: 16rpx;
            color: #00B76C;
        }
    }

    .p {
        margin-bottom: 16rpx;

        &:last-child {
            margin-bottom: 0;
        }
    }
}

.userinfo {
    background-color: #fff;
    border-radius: 16rpx;
    padding: 26rpx 30rpx;
    margin: 30rpx 0;
    box-shadow: 4rpx 4rpx 16rpx 10rpx rgba($color: #000, $alpha: 0.15);

    .tit {
        font-size: 34rpx;
        font-weight: 600;
        margin-bottom: 16rpx;
    }

    .p {
        padding: 10rpx 0;
        margin-bottom: 6rpx;
        border-bottom: 1px solid rgba($color: #000, $alpha: 0.05);

        &:last-child {
            margin-bottom: 0;
            border-bottom: none;
        }

        .label {
            display: inline-block;
            width: 136rpx;
            font-size: 28rpx;
            color: #999;
        }

        .scroll_H {
            width: calc(100% - 136rpx);
        }

        input {
            font-size: 30rpx;
            width: calc(100% - 136rpx);
            padding-left: 12rpx;
        }
    }

    .rommnum {
        white-space: nowrap;

        .r_num {
            display: inline-block;
            margin-right: 18rpx;
            padding: 10rpx 20rpx;
            font-size: 26rpx;
            border-radius: 8rpx;
            border: 1rpx solid rgba($color: #000, $alpha: 0.032);
            background-color: rgba($color: #000, $alpha: 0.032);

            &:last-child {
                margin-right: 0;
            }

            &.active {
                border-color: rgba($color: #00B76C, $alpha: 0.36);
                background-color: rgba($color: #00B76C, $alpha: 0.06);
            }
        }
    }

}

.money {
    .li {
        margin-bottom: 16rpx;

        &:last-child {
            margin-bottom: 0;
        }

        span {
            font-size: 30rpx;
        }
    }

    .corg {
        color: #18bb88;
        margin-left: 12rpx;
    }
}

.card {
    background-color: #fff;
    border-radius: 20rpx;
    margin-bottom: 30rpx;
    padding: 28rpx 30rpx;
    font-size: 32rpx;
    box-shadow: 4rpx 4rpx 16rpx 10rpx rgba($color: #000, $alpha: 0.15);

    &:last-child {
        margin-bottom: 0;
    }
}

.footbtn {
    width: calc(100% - 60rpx);
    height: 80rpx;
    background: #17bb87;
    border-radius: 45rpx;
    position: fixed;
    bottom: 50rpx;
    left: 30rpx;
    color: #fff;
    font-size: 36rpx;
    text-align: center;
    line-height: 80rpx;
}
</style>