<config>
{
    "navigationStyle": "custom",
     "navigationBarTextStyle": "white",
}
</config>
<template>
    <div class="deposit">
        <van-sticky :offset-top="0">
            <div class="top-img">
                <img src="../native/yajing-png-bg@3x.png" alt="" />
                <div class="top">
                    <div class="top1">
                        <img
                            @click="jump"
                            class="top-img1"
                            src="../native/00-Navigation bar／4.Icons／back@3x.png"
                            alt=""
                        />
                        <div class="top-name">租房押金</div>
                        <div></div>
                    </div>
                    <div class="top-money">
                        <img class="money-img" src="../native/icon_jiage@3x (2).png" alt="" />
                        <div class="money">{{ roomInfo ? roomInfo.depositAmount : 0 }}</div>
                    </div>
                </div>
            </div>
            <div class="title-con">
                <div class="title">押金说明</div>
                <div class="title1">
                    尊敬的住户，欢迎您入住本公寓！为营造安全舒适的居住空间，请仔细阅读本须知并遵守各项条规：
                </div>
            </div>
        </van-sticky>
        <div class="box">
            <div v-for="(item, index) in list" :key="index">{{ item.title }}</div>
            <div class="title2">
                以上所有条款适用于怡辰馨舍全国所有门店！若遇特定城市的法令规范不一而有出入的，以该城市的规范为准！若遇个别门店所在地的公安部门、街道、小区或物业等，对住户提出其他规定的，住户必需配合！
            </div>
            <div class="title3">
                严正声明：住户因其违反公寓公约或各项法令，造成公寓、公寓方人员、或其他住户任何形式的伤害或损失的，无论其是否已提出退宿，该住户仍应承担法律和经济赔偿等全部责任！
            </div>
            <div class="box1">
                <div class="title4">
                    前台留有夜间值班人员电话，若有紧急情况欢迎 拨打！
                </div>
                <div class="title4">欢迎您对我们的服务提出更多意见：</div>
                <div class="title4">（400-8365-186）</div>
            </div>
            <div class="border"></div>
        </div>
        <div class="list-btn">
            <div class="btn" @click="pay">确认支付</div>
        </div>
    </div>
</template>
<script>
import { mapState } from 'vuex';
export default {
    data() {
        return {
            list: [
                {
                    title: '（1）入住期内违约或退宿，剩余房费及押金不予退还，若续租，应于入住期满前一周提出申请。'
                },
                {
                    title:
                        '（2）办理入住需根据公寓要求支付押金(押金在退宿办完日起最长于第15个工作日返还) 。每周期租金应提前15天缴纳，超出天数的，从超过应支付日起按房租的10%缴纳滞纳金，计算到缴清下周期的租金为止。'
                },
                {
                    title:
                        '（3）入住本公寓应按月交付水、电、网等各项其他费用。逾期不交的，本公寓有权要求住户补足所欠费用及缴纳滞纳金（从超过应当支付日起开始收取，每天滞纳金额以拖欠费用总额的5%计算）。'
                },
                {
                    title:
                        '（4）本公寓不接待55岁以上人员、孕妇及婴幼儿及外籍人员入住，不接待患有传染病、心脑血管疾病、心理或精神异常者。办理入住须持本人身份证证件，如发现身份不符，立即勒令其退宿处理。'
                },
                {
                    title:
                        '（5）访客须到前台登记，当天22点前须离开。私带访客进入或留宿访客的，本公寓有权向住户收取1000元违约金；二次违规的直接勒令退宿。'
                },
                {
                    title:
                        '（6）退宿当天应搬离个人物品，逾期视为放弃所有权。若遗留5件以上物品，押金将被扣除100元作为清洁费。如不办退宿视为在住，房租及水电网等费用持续计算到办完退宿为止。无论任何原因不再住本公寓，超过3天仍不办理退宿的，视为同意放弃物品所有权，本公寓有权做清理处理且押金不予退还。'
                },
                {
                    title:
                        '（7）住户不得私自更换床位，如私自占用空床位，需从自占用日起向本公寓足额缴床位费，直到清空为止。若经我方二次催告，住户拒不清空，我方有权直接丢弃住户物品，并勒令住户退宿。'
                },
                {
                    title:
                        '（8）本公寓每15天免费提供一次布草清洗服务。如要求更换或退宿时，布草有不清洁者（如：划线、油渍、血渍等），需按照赔偿价目表上的全新布草价格向本公寓赔偿。'
                },
                {
                    title:
                        '（9）入住期间不得私自更换房屋内的设施设备、并应爱惜使用。若因使用不当或不合理而造成的损失及故障，由本公寓代为维修，费用由住户承担（损坏依赔偿价目表照价赔偿）。'
                },
                {
                    title:
                        '（10）根据相关条例，住户需配合本公寓做好垃圾分类工作。若不配合的，本公寓当天将拒绝进入房屋内进行保洁工作，直到住户改善为止。不配合或拒绝改善达三次的，本公寓有权勒令对方退宿。'
                },
                {
                    title: '（11）公寓前台提供收、放快递和放置外卖固定点，概不承担遗失、损坏。但不提供寄快递服务。'
                },
                {
                    title:
                        '（12）住户应爱护公共财产（如：文明乘坐电梯）、爱护公共区域卫生（如：不乱扔垃圾果皮等）、不干扰他人正常学习和休息（如：不饲养宠物、不酗酒、不打牌、不奏乐器。不在房内起哄、喧哗、敲打物品等）。'
                },
                {
                    title: '（13）严禁窗外丢物、高空抛物！因此类行为造成的一切后果，由住户本人承担完全责任。'
                },
                {
                    title:
                        '（14）严禁在房屋内私拉乱接电源线，并严禁使用以下违规电器：包括但不限于拖线板、微波炉、电饭锅、电磁炉、电热毯、电暖器、热得快、热水壸等，一经发现，本公寓有权没收。其他电器（如充电器、电吹风、卷发器），使用后应立即拔除，一经发现未拔除，本公寓暂收到前台，请住户自行前往认领，三天内未认领的，本公寓有权直接丢弃。若再次违规的，本公寓有权直接没收物品不予归还。'
                },
                {
                    title:
                        '（15）住户应配合公寓有关部门做好安全防范，公寓内禁用明火、禁止存放易燃易爆物品（如打火机油、打火机充气罐）、存放点火源（如打火机、酒精炉灶等）。若携带或私藏国家法律法规禁止的物品，由住户承担所有责任。如发生火灾请及时联系工作人员。'
                },
                {
                    title:
                        '（16）公寓内所有区域均为无烟区，若在房屋内或公区发现烟头或抽烟者，按第一次100元、第二次200元作为违约金收取。抽烟累计达三次的，本公寓有权勒令住户立即退宿，押金作为违约金概不退还。'
                },
                {
                    title:
                        '（17）严禁电瓶车和电瓶车电池进入本公寓内！不得在房屋内或私拉电线为电瓶车充电，一经发现，本公寓有权直接没收电线、电瓶或收取500元违约金。'
                },
                {
                    title:
                        '（18）公寓内所有走道、窗户均为消防逃生通道，严禁晾晒衣物、鞋袜及其他物品阻挡的违法行为。一经发现违规，本公寓暂收到前台，请住户自行前往认领，三天内未认领的，本公寓有权直接丢弃。若再次违规的，本公寓有权直接没收物品不予归还。'
                },
                {
                    title: '（19）人员离开锁闭门窗、关水关电。贵重物品及个人钱财自行保管，若有遗失，公寓概不负责。'
                },
                {
                    title:
                        '（20）公寓内禁止饮酒、不得赌博、不打架斗殴、不得传播色情信息、不得捏造传播虚假恐慌信息等。相关违法行为一经发现作严重警告处理，情节严重者作劝退处理。如发生治安事件请及时联系工作人员。'
                }
            ],
            payMethod: 'WEIXIN'
        };
    },
    computed: {
        ...mapState(['roomInfo'])
    },
    methods: {
        pay() {
            // console.log(this.roomInfo);
            this.$http
                .get('/api/mp/payDeposit', {
                    checkinInfoId: this.roomInfo.checkinInfoId,
                    payMethod: this.payMethod
                })
                .then(res => {
                    res.package = res.packageValue;
                    wx.requestPayment({
                        ...res,
                        success: () => {
                            wx.hideLoading();
                            wx.showToast({
                                title: '支付成功'
                            });
                            setTimeout(() => {
                                this.navigateTo('/pages/paySuccess');
                            }, 1000);
                        },
                        fail: e => {
                            console.log(e);
                            wx.hideLoading();
                            wx.showToast({
                                icon: 'none',
                                title: '支付失败'
                            });
                        }
                    });
                })
                .catch(e => {
                    wx.hideLoading();
                    wx.showToast({
                        title: e.error,
                        icon: 'none'
                    });
                });
        },
        jump() {
            wx.navigateBack(
                {
                    delta: 1
                },
                1000
            );
        }
    }
};
</script>
<style lang="less" scoped>
.deposit {
    padding-bottom: 100px;
    .top-img {
        background: #fff;
        img {
            height: 240px;
            width: 100%;
        }
        .top {
            position: absolute;
            margin-top: 52px;
            left: 20px;
            top: 0;
            width: 90%;
            .top1 {
                display: flex;
                align-items: center;
                justify-content: space-between;
                width: 90%;
                .top-img1 {
                    width: 24px;
                    height: 24px;
                }
            }
            .top-name {
                font-size: 17px;
                font-family: SFProDisplay-Medium, SFProDisplay;
                font-weight: bold;
                color: #ffffff;
                line-height: 20px;
            }
            .top-money {
                display: flex;
                align-items: center;
                justify-content: center;
                margin-top: 39px;
                .money-img {
                    width: 16px;
                    height: 19px;
                    margin-top: 18px;
                }
                .money {
                    font-size: 48px;
                    font-family: DIN-Bold, DIN;
                    font-weight: bold;
                    color: #ffffff;
                    line-height: 59px;
                }
            }
        }
    }
    .title-con {
        margin: 0px 20px;
        background: #fff;
        .title {
            font-size: 16px;
            font-weight: bold;
            padding: 20px 0 16px;
            color: #000000;
            line-height: 22px;
        }
        .title1 {
            font-size: 14px;
            font-weight: bold;
            color: #333333;
            line-height: 22px;
            padding-bottom: 15px;
        }
    }
    .box {
        background: #ffffff;
        margin: 0px 20px;
        border-radius: 4px;
        font-size: 13px;
        font-weight: normal;
        color: #333333;
        line-height: 18px;
        .title2 {
            font-size: 13px;
            font-weight: bold;
            color: #333333;
            padding: 34px 0 16px;
        }
        .title3 {
            font-weight: bold;
            color: #f7931d;
        }
        .box1 {
            text-align: center;
            margin: 0 15px;
            padding: 30px 0 16px;
            .title4 {
                font-size: 13px;
                font-weight: normal;
                color: #333333;
                line-height: 18px;
            }
        }
        .border {
            height: 1px;
            background: #f2f4f5;
        }
    }
    .list-btn {
        .bottom();
        position: fixed;
        width: 100%;
        bottom: 0;
        background: #ffffff;
        padding-left: 43px;
        z-index: 999;
        .btn {
            width: 290px;
            height: 48px;
            line-height: 48px;
            text-align: center;
            background: #00ba64;
            border-radius: 24px;
            color: #fff;
            font-size: 16px;
        }
    }
}
</style>
