wx_mini_app/components/hotelDetail/hotelDetail.vue

<template>
<view class="pages">
    <div class="top-image" @click="handleToHotelImage">
        <div class="top-right">
            <div class="heart" style="margin-right:3px;">
                <u-icon name="star" color="#fff" size="20"></u-icon>
            </div>
            <div class="heart">
                <u-icon name="share" color="#fff" size="20"></u-icon>
            </div>
        </div>
        <div class="top-right-bottom">
            <u-icon name="photo" color="#fff" size="20"></u-icon> 1/64
        </div>
    </div>

    <div class="detail-card">
        <h4>恒枫酒店（红房子医院店）</h4>
        <div class="detail-card-call">
            <h4>2019年开业</h4>
            <u-icon @click="openPhone" name="phone" color="#000" size="30"></u-icon>
        </div>
        <div class="installation">
            <div class="installation-box" v-for="item in 5" :key="item.id">
                <div>
                    <u-icon name="wifi" color="#000" size="30"></u-icon>
                </div>
                <div>
                    WIFI
                </div>
            </div>
        </div>
        <div class="grade">
            <div class="grade-left">
                0分
            </div>
            <div class="grade-center">
                0.00%好评,0条评论
            </div>
            <div @click="handleToHotelAppraise">
                <u-icon name="arrow-right" color="#00000068" size="30"></u-icon>
            </div>
        </div>
        <div class="address">
            <div style="color:#0000068">
                四川省甘孜州理塘县理塘路口
            </div>
            <div style="display:flex;align-items:center;">
                查看地图<u-icon name="arrow-right" color="#00000068" size="26"></u-icon>
            </div>
        </div>
    </div>

    <div class="card-data-list">
        <div class="card-list-top">
            <div @click="handleCalendar">
                <div>入住</div>
                <div>{{`2023-04-10`}}</div>
            </div>
            <div>
                {{`共17晚`}}
            </div>
            <div>
                <div>离开</div>
                <div>{{`2023-04-28`}}</div>
            </div>
        </div>
        <div v-for="(item, index) in dataList" :key="item.id">
            <div class="card-list">
                <div class="card-list-left">
                    <u-image :showLoading="true" radius="5px" mode="scaleToFill" src="@/static/niu.jpg" width="80px" height="80px" @click="click"></u-image>
                    <div class="card-list-left-detail">详情</div>
                </div>
                <div class="card-list-center">
                    <h2>家庭房</h2>
                    <div>15 1.5+1.2 可住2人</div>
                </div>
                <div class="card-list-right" @click="showDetail(item, index)">
                    <div>
                        <div v-if="!item.checked">￥159.00</div>
                        <div v-else style="font-size: 12px;text-decoration-line:line-through;color:#00000068;">门市价:￥{{item.price}}</div>
                        <div style="font-size:14px;">房量紧张</div>
                    </div>
                    <div>
                        <u-icon name="arrow-right" color="#00000068" size="26"></u-icon>
                    </div>
                </div> 
            </div>
			<div class="card-list-bottom" v-if="item.checked">
				<div>
					<div style="display:flex;align-items:center;">专享价
						<u-icon name="arrow-right" color="#00000068" size="26"></u-icon>
					</div>
					<div style="color:red">
						仅剩6间
					</div>
				</div>
				<div style="display:flex;align-items:center;">
					<div style="margin-right:10px;text-align:right;">
						<div style="color:#30a7f5">￥159.00</div>
						<div style="color:#00000068;text-decoration-line: line-through;font-size: 12px;">￥179.00</div>
						<div style="color:#30a7f5">已优惠20元</div>
					</div>
					<div class="card-list-bottom-right" @click="handleToHotelBooking(item)">
						<div>预定</div>
						<div>到店支付</div>
					</div>
				</div>
			</div>
        </div>
    </div>
    <u-action-sheet :actions="list" @close="show = false" safeAreaInsetBottom @select="phoneSelect" :title="title" :show="show"></u-action-sheet>
</view>
</template>

<script>
export default {
    data() {
        return {
            dataList:[
                {
                    id:1,
                    name:'家庭房',
                    price:159,
                    img:'@/static/niu.jpg',
                    type:'15 1.5+1.2 可住2人',
                    status:'房量紧张',
                    checked:false
                },
                {
                    id:2,
                    name:'家庭房',
                    price:159,
                    img:'@/static/niu.jpg',
                    type:'15 1.5+1.2 可住2人',
                    status:'房量紧张',
                    checked:false
                },
                {
                    id:3,
                    name:'家庭房',
                    price:159,
                    img:'@/static/niu.jpg',
                    type:'15 1.5+1.2 可住2人',
                    status:'房量紧张',
                    checked:false
                },
                {
                    id:4,
                    name:'家庭房',
                    price:159,
                    img:'@/static/niu.jpg',
                    type:'15 1.5+1.2 可住2人',
                    status:'房量紧张',
                    checked:false
                },
                {
                    id:5,
                    name:'家庭房',
                    price:159,
                    img:'@/static/niu.jpg',
                    type:'15 1.5+1.2 可住2人',
                    status:'房量紧张',
                    checked:false
                }
            ],
            list: [
				{
					name:'酒店客服:400-000-0000',
                    phone:'400-000-0000'
				},
				{
					name: '平台客服:400-000-0000',
                    phone:'400-000-0000'
				}
			],
			show: false
        }
    },
    methods: {
        showDetail(item, index) {
            this.dataList[index].checked = !this.dataList[index].checked
        },
        handleToHotelBooking(item) {
            uni.navigateTo({
                url: '/components/hotelBooking/hotelBooking'
            })
        },
        handleToHotelAppraise(){
            uni.navigateTo({
                url: '/components/hotelAppraise/hotelAppraise'
            })
        },
        handleToHotelImage(){
            uni.navigateTo({
                url: '/components/hotelImage/hotelImage'
            })
        },
        openPhone(){
            this.show = true
        },
        phoneSelect(e){
            uni.makePhoneCall({
                phoneNumber: e.phone //仅为示例，并非真实的电话号码
            });
        }
    }
}
</script>

<style lang="scss" scoped>
.pages {
    width: 100vw;
    height: 100vh;
    background: #f3f3f3;
}

.top-image {
    width: 100vw;
    height: 260px;
    background: rgb(243, 142, 134);
    position: relative;
}

.top-right {
    position: absolute;
    top: 20px;
    right: 10px;
    display: flex;
}

.heart {
    background: #00000068;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.top-right-bottom {
    position: absolute;
    right: 10px;
    bottom: 30px;
    background: #00000068;
    padding: 3px 5px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    color: #fff;
}

.detail-card {
    background: #fff;
    width: 96vw;
    min-height: 220px;
    margin: auto;
    padding: 20px 15px 5px 15px;
    box-sizing: border-box;
    position: relative;
    top: -20px;
    border-radius: 8px;
    box-shadow: 0 0 10px #00000029;

    .detail-card-call {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}

.installation {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .installation-box {
        display: flex;
        align-items: center;
    }
}

.grade {
    display: flex;
    // justify-content: space-between;
    align-items: center;
    margin-top: 10px;

    .grade-left {
        width: 60px;
        height: 60px;
        background: #30a7f5;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
    }

    .grade-center {
        flex: 1;
        margin: 0 10px;
        color: #00000068;
    }
}

.address {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-data-list {
    background: #fff;
    width: 96vw;
    box-sizing: border-box;
    margin: auto;
    padding: 20px 10px;

    .card-list-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .card-list {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 10px;
        border-bottom: 1px solid #00000011;
        min-height: 100px;

        .card-list-left-detail {
            position: absolute;
            bottom: 0;
            right: 0;
            // width: 100%;
            // height: 100%;
            padding: 3px;
            background: #00000068;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fff;
            font-size: 14px;
        }

        .card-list-left {
            position: relative;
        }

        .card-list-center {
            flex: 1;
            margin: 0 10px;
            color: #00000068;

            h2 {
                font-size: 18px;
                color: #000;
            }
        }

        .card-list-right {
            display: flex;
            // justify-content: space-between;
            align-items: center;
            color: red;
        }
    }
}
.card-list-bottom{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px;
	background: #00000011;
}
.card-list-bottom-right{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	overflow: hidden;
	// height: 100%;
	width: 70px;
	height: 60px;
	>div:nth-child(1){
		background: #30a7f5;
		color: #fff;
		height: 100%;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		// padding: 5px 10px;
		// border-radius: 8px;
		// margin-bottom: 5px;
	}
	>div:nth-child(2){
		color: #30a7f5;
		background: #fff;
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
}
</style>