<config>
{
    "navigationBarTitleText": "用户认证",
}
</config>
<template>
    <div>
        <div class="logo">
            <img src="../native/登陆用户绑定@3x (2).png" />
        </div>
        <div class="title">欢迎来到走马公寓服务平台</div>
        <div class="input-cell">
            <img class="icon" src="../native/login/login_icon_mima@3x.png" />
            <input placeholder="请输入你的姓名" v-model="name" />
        </div>
        <div class="input-cell">
            <img class="icon" src="../native/login/login_icon_zhanghao@3x.png" />
            <input placeholder="请输入你的身份证号码" v-model="id" />
        </div>
        <div class="input-cell">
            <img class="icon" src="../native/login/login_icon_zhanghao@3x (1).png" />
            <input placeholder="请输入手机号" type="tel" v-model="phone" />
            <div class="btn-send-code disable" v-if="sending">
                <vue-loading type="bubbles" color="#ffffff" :size="{ width: '20px', height: '20px' }"></vue-loading>
            </div>
            <div class="btn-send-code" :class="{ disable: time > 0 }" @click="sendCode" v-else>
                {{ time === 0 ? '发送验证码' : `已发送(${time}s)` }}
            </div>
        </div>
        <div class="input-cell">
            <img class="icon" src="../native/login/login_icon_yanzhengma@3x.png" />
            <input placeholder="请输入验证码" type="tel" v-model="code" />
        </div>
        <div class="tip" @click="checked = !checked">
            <img class="cb" src="../native/login/icon-xuanzhong@3x.png" v-if="checked" />
            <img class="cb" src="../native/login/login_icon_butongyi@3x.png" v-else />
            我已阅读并同意<span class="link" @click.stop="onShowTip(1)">&nbsp;入住须知&nbsp;</span>和<span
                class="link"
                @click.stop="onShowTip(2)"
                >&nbsp;退宿须知</span
            >
        </div>
        <van-button :lock-scroll="true" :disabled="disabled" type="default" @click="submit">确认绑定</van-button>
        <transition name="fade"> <div class="mask" v-if="showTip" @click="showTip = false"></div></transition>
        <transition name="zoom">
            <div class="dialog" v-if="showTip">
                <div class="title1">{{ tipType === 1 ? '入住须知' : '退宿须知' }}</div>
                <div class="body" v-if="tipType === 1">
                    <div style="margin-bottom:20px" class="con-block">
                        尊敬的住户，欢迎您入住本公寓！为给大家营造安全舒适的居住环境，防止各类事故的发生，根据国家相关法律法规和公寓方规章管理制度的有关规定，保障大家的人身财产安全特制定本入住须知，请您仔细阅读本须知并遵守各项条规：
                    </div>
                    <div class="con-block" v-for="(item, index) in list" :key="index">{{ item.title }}</div>

                    <div style="margin-top:10px" class="con-block">
                        以上所有条款适用于怡辰馨舍全国所有门店！若遇特定城市的法令规范不一而有出入的，以该城市的规范为准！若遇个别门店所在地的公安部门、街道、小区或物业等，对住户提出其他规定的，住户必需配合！
                    </div>
                    <div style="margin-top:10px" class="con-block">
                        严正声明：住户因其违反公寓公约或各项法令，造成公寓、公寓方人员、或其他住户任何形式的伤害或损失的，无论其是否已提出退宿，该住户仍应承担法律和经济赔偿等全部责任！
                    </div>
                    <div class="box1">
                        <div class="con-block">
                            前台留有夜间值班人员电话，若有紧急情况欢迎 拨打！
                        </div>
                        <div class="con-block">欢迎您对我们的服务提出更多意见：</div>
                        <div class="con-block">（13061897059）</div>
                    </div>
                </div>
                <div class="body" v-else>
                    <div style="margin-bottom:20px" class="con-block">
                        尊敬的客户：
                    </div>
                    <div class="con-block">
                        感谢您陪伴我们在怡辰馨舍渡过了一段美好的时光，当您点开这份文件时，代表着我们即将要告别，期待我们下次再相聚！
                    </div>
                    <div style="margin-top:10px" class="con-block">
                        搬离公寓的伙伴须知：
                    </div>
                    <div class="bottom">
                        <div class="con-block" v-for="(item, index) in lists" :key="index">
                            {{ item.title }}
                        </div>
                    </div>
                </div>
                <div class="btn-wrapper">
                    <div class="dialog-btn" @click="confirm">确认并同意</div>
                </div>
            </div>
        </transition>
    </div>
</template>
<script>
export default {
    name: 'login',
    metaInfo: {
        title: '用户绑定'
    },
    data() {
        return {
            name: '',
            id: '',
            phone: '',
            code: '',
            time: 0,
            checked: false,
            tipType: 2,
            showTip: false,
            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）公寓内禁止饮酒、不得赌博、不打架斗殴、不得传播色情信息、不得捏造传播虚假恐慌信息等。相关违法行为一经发现作严重警告处理，情节严重者作劝退处理。如发生治安事件请及时联系工作人员。'
                }
            ],
            lists: [
                {
                    title:
                        ' 1.自您办理退宿手续当日请携带好私人物品，如有遗留，视为您遗弃，公寓不负责保管，若因此产生的财务纠纷由您自行承担！'
                },
                {
                    title:
                        ' 2.您在入住公寓时已经熟知公寓管理制度，须在搬离前结清相关费用。若对屋内设施设备有损坏的需要维修恢复原样并可以正常使用。若因搬离前有费用未结清及产生的损失您理解并同意支付。'
                },
                { title: '3.办理退宿流程时，请您携带以下物品到前台：' },
                { title: '①房卡/钥匙、门禁卡、水卡、储物柜钥匙' },
                { title: '②个人交款的押金单据' },
                { title: '4.请确保以下物品都已整理完毕：' },
                { title: '①床上用品6件套完好无损' },
                { title: '②个人用品已全部撤空' },
                { title: '③柜子物品清理干净，无任何衣物或杂物滞留衣柜' },
                { title: '④个人使用设施完好（床铺、柜子）' },
                { title: '⑤公寓设施完好无损（固定设施、电视机、空调及遥控器）' },
                { title: '⑥公共设施费用结清（冷水费、热水费、电费、网络费等）' }
            ]
        };
    },
    computed: {
        disabled() {
            return !(
                this.name &&
                /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X|x)$/.test(
                    this.id
                ) &&
                /^1[3-9]\d{9}$/.test(this.phone) &&
                this.code &&
                this.checked
            );
        }
    },
    methods: {
        submit() {
            if (!this.name) {
                wx.showToast({
                    icon: 'none',
                    title: '请输入姓名'
                });
                return;
            }
            if (!/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|[xX])$/.test(this.id)) {
                wx.showToast({
                    icon: 'none',
                    title: '身份证号错误'
                });
                return;
            }
            if (!/^1[3-9]\d{9}$/.test(this.phone)) {
                wx.showToast({
                    icon: 'none',
                    title: '手机号错误'
                });
                return;
            }
            if (!this.code) {
                wx.showToast({
                    icon: 'none',
                    title: '请输入验证码'
                });
                return;
            }
            if (this.disabled) {
                return;
            }
            this.$http
                .post('/user/bindIdentity', {
                    realName: this.name,
                    idNo: this.id,
                    phone: this.phone,
                    code: this.code
                })
                .then(res => {
                    wx.hideLoading();
                    this.$store.dispatch('updateUserInfo');
                    wx.switchTab({
                        url: '/pages/home'
                    });
                })
                .catch(e => {
                    wx.hideLoading();
                    wx.showToast({
                        icon: 'none',
                        title: e.error
                    });
                });
        },
        sendCode() {
            // if (this.sending) {
            //     return;
            // }
            if (!/^1[3-9]\d{9}$/.test(this.phone)) {
                wx.showToast({
                    icon: 'none',
                    title: '手机号错误'
                });
                return;
            }
            this.$http
                .get('/sms/sendVerify', { phone: this.phone })
                .then(_ => {
                    this.time = 60;
                    let i = setInterval(() => {
                        this.time--;
                        if (this.time === 0) {
                            clearInterval(i);
                        }
                    }, 1000);
                })
                .catch(e => {
                    wx.hideLoading();
                    wx.showToast({
                        icon: 'none',
                        title: e.error
                    });
                });
        },
        onShowTip(i) {
            this.tipType = i;
            this.showTip = true;
        },
        confirm() {
            this.showTip = false;
            this.checked = true;
        }
    }
};
</script>
<style lang="less" scoped>
.logo {
    // width: 100%;
    padding-left: 20px;
    img {
        width: 200px;
        height: 60px;
        margin: 60px 0 30px;
    }
}
.title {
    font-size: 18px;
    font-weight: bold;
    color: #000000;
    line-height: 25px;
    margin: 0 0 30px 20px;
}

.input-cell {
    width: calc(100vw - 40px);
    height: 56px;
    margin: 1px auto 0 auto;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #f2f4f5;
    position: relative;
    margin-bottom: 16px;
    .icon {
        width: 24px;
        height: 24px;
    }
    input {
        flex-basis: 0;
        min-width: 0;
        flex-grow: 1;
        font-size: 14px;
        color: black;
        margin-left: 30px;
        background: transparent;
        &::-webkit-input-placeholder {
            color: #aaacad;
            font-size: 13px;
        }
    }
    &.id {
        .icon {
            width: 27px;
            height: 20px;
            margin-left: 17px;
        }
        input {
            margin-left: 16px;
        }
    }
    .btn-send-code {
        width: 86px;
        height: 34px;
        background: #00ba64;
        border-radius: 17px;
        font-size: 12px;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        &.disable {
            background: shade(#00ba64, 16);
        }
    }
}
.tip {
    // width: calc(100vw - 40px);
    margin: 20px auto 0 auto;
    font-size: 12px;
    padding-left: 73px;
    line-height: 20px;
    color: #aaacad;
    display: flex;
    align-items: center;
    .link {
        color: #00ba64;
    }
    .cb {
        width: 16px;
        height: 16px;
        margin-right: 5px;
    }
}
/deep/.van-button {
    width: 290px;
    height: 48px !important;
    background: @prim !important;
    border-radius: 24px !important;
    line-height: 48px !important;
    text-align: center;
    font-size: 16px !important;
    font-weight: normal !important;
    color: #ffffff !important;
    display: flex !important;
    margin-top: 60px !important;
}
.mask {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.68);
}
.dialog {
    width: calc(100% - 76px);
    height: calc(100% - 200px);
    background: white;
    border-radius: 16px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    left: 0;
    margin: auto;
    display: flex;
    flex-direction: column;
    .title-block {
        font-size: 16px;
        font-weight: normal;
        color: #000000;
        text-align: center;
        line-height: 22px;
        padding-bottom: 10px;
    }
    .con-block {
        width: 270px;
        font-size: 12px;
        font-weight: normal;
        color: #000000;
        line-height: 20px;
    }
    .box1 {
        text-align: center;
        margin-top: 10px;
        .con-block {
            width: 270px;
            font-size: 12px;
            font-weight: normal;
            color: #000000;
            line-height: 20px;
        }
    }
    .title1 {
        height: 52px;
        line-height: 52px;
        text-align: center;
        font-size: 16px;
        font-weight: 500;
        color: black;
    }
    .body {
        flex-basis: 0;
        flex-grow: 1;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        padding: 0 15px;
        font-size: 12px;
        color: black;
    }
    .btn-wrapper {
        padding: 12px 0;
        .dialog-btn {
            width: 200px;
            height: 44px;
            min-height: 44px;
            margin: auto;
            text-align: center;
            line-height: 44px;
            background: rgba(255, 143, 0, 1);
            border-radius: 22px;
            font-size: 16px;
            font-weight: bold;
            color: white;
        }
    }
}
</style>
