126 lines
5.0 KiB
Vue
126 lines
5.0 KiB
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> |