zhwl-miniapp/pages/hotel/list.vue

<template>
    <view class="waper">
		<u-navbar :autoBack="true" bgColor="#FFFFFF">
			<view slot='center' style="font-size: 36rpx; font-weight: bold;">
				酒店民宿
			</view>
		</u-navbar>
        <mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption" :top="paddingTop + 'px'">
			<view class="content">
				<navigator :url="'/pages/hotel/detail?id='+i.id" hover-class="none" class="list" v-for="(i, index) in hotelList" :key="index">
					<view class="img">
						<image :src="$utils.setImgUrl(i.coverImage)" mode=""></image>
					</view>
					<view class="info">
						<view class="title">{{i.name}}</view>
						<view class="tag">
							<view class="tag_box" v-if="i.label">
								<view v-for="(m, x) in i.label.split(',')" :key="x">{{m}}</view>
							</view>
						</view>
						<view class="msg">
                            <view class="icon">
                                <image src="../../static/image/eatery/local.png" mode=""></image>
                            </view>
							<view class="text">地址：{{i.address}}</view>
						</view>
						<view class="money">
							<view class="left">
								<text v-if="i.orderQuantity">{{i.orderQuantity}}+消费</text>
							</view>
							<view class="right">
								<view>¥{{ i.underlyingPrice }}</view>
								<view>
									<text>¥</text>{{ i.price }}
								</view>
								<view>起</view>
							</view>
						</view>
					</view>
				</navigator>
			</view>
        </mescroll-body>
    </view>
</template>

<script>
    import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
        mixins: [MescrollMixin],
		data () {
			return {
                paddingTop: 0,
				hotelList: [],
				downOption: { auto: false }
			}
		},
		onShow() {
            this.mescroll && this.mescroll.resetUpScroll();
		},
		onLoad () {
            this.paddingTop = this.$paddingTop;
		},
		methods: {
			async upCallback(page) {
				let obj = {
					pageNum: page.num,
					pageSize: page.size
				};
				let info = await this.$http.hotelList(obj);
				if (page.num == 1) this.hotelList = [];
				this.hotelList = this.hotelList.concat(info.rows)
				this.mescroll.endBySize(info.rows.length, info.total);
			}
		},
	}
</script>

<style lang="scss">
.content{
    width: 100%; box-sizing: border-box; padding: 24rpx;
    .list{
        width: 100%; box-sizing: border-box; padding: 24rpx; background: #fff; border-radius: 10rpx; padding-left: 248rpx; position: relative; margin-bottom: 24rpx;
        &:last-child{ margin-bottom: 0; }
        .img{
            width: 200rpx; height: 268rpx; position: absolute; left: 24rpx; top: 24rpx;
            image{ border-radius: 10rpx; }
        }
        .info{
            width: 100%; height: 268rpx; box-sizing: border-box; padding-bottom: 50rpx; position: relative;
            .title{ line-height: 48rpx; color: rgba(0, 0, 0, 0.85); font-size: 32rpx; font-weight: 600; min-height: 48rpx; max-height: 96rpx; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
            .tag{
                width: 100%; margin-top: 16rpx; height: 36rpx; font-size: 0;
				.tag_box {
					overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
					view{
						height: 36rpx; box-sizing: border-box; border: 2rpx solid rgba(0, 0, 0, 0.25); border-radius: 4rpx; padding: 0 10rpx; margin-right: 10rpx; display: inline-flex; align-items: center; color: rgba(0, 0, 0, 0.45); font-size: 20rpx;
						&:last-child{ margin-right: 0; }
					}
				}
            }
            .msg{
				margin-top: 20rpx; height: 36rpx; width: 100%; box-sizing: border-box; padding-left: 32rpx; position: relative;
                .icon{ width: 24rpx; height: 24rpx; position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
                .text{ line-height: 36rpx; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgba(0, 0, 0, 0.65); font-size: 24rpx; }
			}
            .money{
                width: 100%; display: flex; justify-content: space-between; align-items: flex-end; height: 46rpx; position: absolute; bottom: 4rpx; left: 0;
                .left{
					text {color: rgba(0, 0, 0, 0.45); line-height: 36rpx; font-size: 24rpx;}
				}
                .right{
                    display: flex; align-items: flex-end;
                    view{
                        &:nth-child(1){ color: rgba(0, 0, 0, 0.45); line-height: 36rpx; font-size: 24rpx; text-decoration: line-through; margin-right: 4rpx; }
                        &:nth-child(2){
                            color: #E54042; font-size: 40rpx; font-weight: bold; line-height: 46rpx; margin-right: 4rpx;
                            text{ line-height: 36rpx; font-weight: 400; font-size: 24rpx; }
                        }
                        &:nth-child(3){ color: rgba(0, 0, 0, 0.45); line-height: 40rpx; font-size: 26rpx; }
                    }
                }
            }
        }
    }
}
</style>