<config>
{
    "navigationBarTextStyle": "black",
    "backgroundColorTop":'#ffffff',
    "backgroundColorBottom":'#ffffff',
}
</config>
<template>
    <div class="app">
        <div class="swiper-content">
            <swiper class="my-swiper" indicator-dots autoplay :interval="5000" :duration="500">
                <block v-for="(item, index) in banners" :key="index">
                    <swiper-item>
                        <img class="banner-img" :src="item.pic" alt="" />
                    </swiper-item>
                </block>
            </swiper>
            <div class="search">
                <icon class="icon-small" type="search" size="12" color="#000"></icon>
                <span>输入搜索内容</span>
            </div>
        </div>
        <div class="grids">
            <div class="grid">
                <img src="../native/ic-1.png" alt="" />
                <div class="text1">白领公寓</div>
            </div>
            <div class="grid">
                <img src="../native/ic-2.png" alt="" />
                <div class="text1">蓝领公寓</div>
            </div>
            <div class="grid">
                <img src="../native/ic-3.png" alt="" />
                <div class="text1">企业直租</div>
            </div>
            <div class="grid">
                <img src="../native/ic-4.png" alt="" />
                <div class="text1">商务合作</div>
            </div>
        </div>
        <div class="list">
            <div class="list-title">
                <img src="../native/ic-5.png" alt="" />
                <span>门店详情</span>
            </div>

            <div class="room" v-for="(item, index) in list" :key="index">
                <div class="room-img-content">
                    <img :src="item.pic" alt="" class="room-img" />
                    <div class="price">
                        ¥{{ item.money }}
                        <span>/月起</span>
                    </div>
                </div>
                <div class="room-info">
                    <div class="text1">{{ item.storeName }}</div>
                    <div class="tabs">
                        <div class="tab-item" :key="1">
                            <img src="../native/room1.png" alt="" />
                            <span>床</span>
                        </div>
                        <div class="tab-item" :key="2">
                            <img src="../native/room2.png" alt="" />
                            <span>衣柜</span>
                        </div>
                        <div class="tab-item" :key="3">
                            <img src="../native/room3.png" alt="" />
                            <span>书桌</span>
                        </div>
                        <div class="tab-item" :key="4">
                            <img src="../native/room4.png" alt="" />
                            <span>空调</span>
                        </div>
                    </div>
                    <div class="status">
                        <div class="statu">市中心商圈</div>
                        <div class="statu">高层电梯房</div>
                        <div class="statu">5分钟商圈</div>
                        <div class="statu">拎包入住</div>
                    </div>
                    <div class="text2">
                        <div class="text">
                            <img src="../native/local.png" alt="" />
                            <div>
                                {{ item.address }}
                            </div>
                        </div>
                        <div class="phone" @click="makePhone(item.phone)">
                            <img src="../native/phone.png" alt="" />
                            <span>电话</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            list: [],
            banners: []
        };
    },
    onShow() {
        this.getBanner();
        this.getList();
    },
    methods: {
        getBanner() {
            this.$http
                .get('/banner/all', {
                    sort: 'sort,asc'
                })
                .then(res => {
                    this.banners = res.content;
                });
        },
        getList() {
            this.$http.get('/clientStoreInfo/all').then(res => {
                this.list = res.content;
            });
        },
        makePhone(phone) {
            wx.makePhoneCall({
                phoneNumber: phone
            });
        }
    }
};
</script>

<style lang="less" scoped>
.app {
    background: #fff !important;
    // padding-bottom: 200px;
    padding-bottom: 50px;
    min-height: 100vh;
    position: relative;
    .bg {
        width: 100%;
        height: 220px;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
    }
}
.my-swiper {
    overflow: hidden;
    height: 60vw;
    .banner-img {
        height: 60vw;
        width: 100%;
    }
}
.swiper-content {
    position: relative;
    .search {
        position: absolute;
        left: 16px;
        right: 16px;
        bottom: 50px;
        height: 54px;
        background: rgba(255, 255, 255, 0.49);
        border-radius: 15px;
        backdrop-filter: blur(4px);
        .flex();
        font-size: 12px;
        color: #666666;
        line-height: 17px;
        padding: 0 16px;
        .icon-small {
            width: 14px;
            height: 14px;
            display: block;
        }
        span {
            margin-left: 14px;
        }
    }
}

.grids {
    display: flex;
    align-items: center;
    background-color: #fff;
    transform: translateY(-30px);
    border-radius: 30px 30px 0px 0px;
    padding-top: 30px;
    .grid {
        width: 25%;
        display: flex;
        flex-direction: column;
        align-items: center;
        img {
            width: 45px;
            height: 45px;
        }
        .text1 {
            font-size: 12px;
            color: #666666;
            line-height: 17px;
            margin-top: 10px;
        }
    }
}

.list {
    padding: 0 16px 16px;
    .list-title {
        font-size: 15px;
        font-weight: bold;
        color: #000000;
        line-height: 24px;
        display: flex;
        align-items: center;
        img {
            width: 19px;
            height: 15px;
            margin-right: 9px;
        }
    }
    .room-img-content {
        position: relative;
        .price {
            position: absolute;
            right: 0;
            bottom: 0;
            width: 108px;
            height: 36px;
            background: linear-gradient(180deg, #ffbc4c 0%, #ff8725 100%);
            border-radius: 15px 0px 15px 0px;
            font-size: 16px;
            font-weight: bold;
            color: #ffffff;
            line-height: 22px;
            letter-spacing: 1px;
            display: flex;
            align-items: center;
            justify-content: center;
            span {
                font-size: 12px;
                transform: scale(0.8);
                margin-top: 4px;
            }
        }
    }
    .room-img {
        width: 100%;
        height: 160px;
        display: block;
        border-radius: 16px;
    }
    .room {
        overflow: hidden;
        margin-top: 12px;
    }
    .room-info {
        background-color: #ffffff;
        padding: 10px;
        .text1 {
            font-size: 14px;
            font-weight: bold;
            color: #333333;
            line-height: 20px;
        }
        .text2 {
            display: flex;
            align-items: flex-end;
            margin-top: 14px;
            .text {
                flex-grow: 1;
                font-size: 13px;
                color: #939599;
                line-height: 18px;
                display: flex;
                align-items: center;
                img {
                    width: 10px;
                    height: 12px;
                    margin-right: 6px;
                }
            }

            .phone {
                display: flex;
                align-items: center;
                img {
                    width: 13px;
                    height: 16px;
                    margin-right: 5px;
                }
                span {
                    font-size: 13px;
                    font-weight: bold;
                    color: #444444;
                    line-height: 18px;
                }
            }
        }

        .status {
            .flex();
            margin-top: 10px;
            .statu {
                font-size: 10px;
                color: #666666;
                line-height: 14px;
                padding: 6px 14px;
                background: #f3f3f5;
                border-radius: 13px;
            }
            .statu + .statu {
                margin-left: 5px;
            }
        }
    }
}

.tabs {
    display: flex;
    align-items: center;
    margin-top: 10px;
    .tab-item {
        display: flex;
        align-items: center;
        img {
            width: 16px;
            height: 16px;
            display: block;
        }
        image {
            width: 16px;
            height: 16px;
        }
        span {
            font-size: 11px;
            color: #666666;
            line-height: 16px;
            margin-left: 7px;
        }
    }
    .tab-item + .tab-item {
        margin-left: 18px;
    }
}
</style>
