第一次提交
This commit is contained in:
gxwebsoft
231
pages/index/index.vue
Normal file
231
pages/index/index.vue
Normal file
@@ -0,0 +1,231 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<!-- 搜索 -->
|
||||
<u-sticky offset-top="5" zIndex="999">
|
||||
<view class="search-fix fixed" v-if="scrollTop < 30">
|
||||
<view class="search">
|
||||
<view class="region">青秀区</view>
|
||||
<view class="input">
|
||||
<u-search placeholder="您想找哪里" bgColor="#ffffff" v-model="keyword" :animation="true"></u-search>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="search-fix" v-else>
|
||||
<view class="search">
|
||||
<view class="region">青秀区</view>
|
||||
<view class="input">
|
||||
<u-search placeholder="您想找哪里" bgColor="#ffffff" v-model="keyword" :animation="true"></u-search>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-sticky>
|
||||
<!-- 幻灯片 -->
|
||||
<view class="swiper">
|
||||
<u-swiper :list="swiperList" :height="180" :radius="0" @change="change" @click="click"></u-swiper>
|
||||
</view>
|
||||
<!-- 选项卡 -->
|
||||
<view class="tabs">
|
||||
<u-tabs :list="menu" @click="click"></u-tabs>
|
||||
</view>
|
||||
<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
|
||||
@scrolltolower="lower" @scroll="onScroll">
|
||||
<view class="house-list" v-if="list.length > 0">
|
||||
<block v-for="(item,index) in list" :key="index">
|
||||
<view class="item" @click="$push('sub_pages/house/detail?houseId=' + item.houseId)">
|
||||
<image :src="item.files[0].url" mode="widthFix">
|
||||
</image>
|
||||
<view class="info">
|
||||
<view class="title">{{ item.houseTitle }}</view>
|
||||
<view class="desc"><text>{{ item.extent }}m²|{{ item.toward }}</text></view>
|
||||
<view class="price">{{ item.rent }}元/月</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" v-if="list.length == 0">
|
||||
</u-empty>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as Util from '@/utils/util.js'
|
||||
import store from '@/store'
|
||||
import storage from '@/utils/storage'
|
||||
import * as HouseInfoApi from '@/api/house-info.js'
|
||||
|
||||
const menu = [{
|
||||
name: '推荐',
|
||||
reset: true
|
||||
},
|
||||
{
|
||||
name: '必看房源',
|
||||
reset: false
|
||||
}
|
||||
];
|
||||
const loginUserId = uni.getStorageSync('userId')
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: [],
|
||||
loadMore: true,
|
||||
status: '加载更多',
|
||||
page: 1,
|
||||
where: {},
|
||||
// 控制onShow事件是否刷新订单列表
|
||||
canReset: false,
|
||||
disabled: false,
|
||||
swiperList: [
|
||||
'https://file.wsdns.cn/20230802/f33f5ac239c843438b36f40941d946ef.png',
|
||||
'https://file.wsdns.cn/20230802/1116a02b07904991b2ebdc2c3da4a691.png',
|
||||
],
|
||||
menu,
|
||||
scrollTop: 0,
|
||||
old: {
|
||||
scrollTop: 0
|
||||
}
|
||||
};
|
||||
|
||||
},
|
||||
onLoad() {
|
||||
this.list = []
|
||||
this.onRefreshList()
|
||||
},
|
||||
onShow() {},
|
||||
onBackPress() {},
|
||||
onUnload() {
|
||||
|
||||
},
|
||||
onPageScroll(e) {
|
||||
this.scrollTop = e.scrollTop
|
||||
},
|
||||
// 触底函数
|
||||
onReachBottom() {
|
||||
console.log("触底函数: ");
|
||||
const app = this
|
||||
if (app.loadMore) {
|
||||
app.page = ++app.page;
|
||||
app.onRefreshList()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onRefreshList() {
|
||||
const app = this
|
||||
const userId = uni.getStorageSync('userId')
|
||||
app.where.page = app.page
|
||||
return new Promise((resolve, reject) => {
|
||||
HouseInfoApi.pageHouseInfo(app.where)
|
||||
.then(result => {
|
||||
const list = result.data.list.map(d => {
|
||||
d.files = JSON.parse(d.files) || []
|
||||
return d
|
||||
})
|
||||
// 合并新数据
|
||||
app.list = app.list.concat(list)
|
||||
if (result.data.count > app.list.length) {
|
||||
app.canReset = true
|
||||
} else {
|
||||
app.canReset = false
|
||||
}
|
||||
resolve(list)
|
||||
})
|
||||
})
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.page {
|
||||
.search-fix {
|
||||
width: 500rpx;
|
||||
margin: auto;
|
||||
background-color: #ffffff;
|
||||
display: flex;
|
||||
border-radius: 100rpx;
|
||||
box-shadow: 0 3rpx 10rpx 0px #cccccc;
|
||||
|
||||
.search {
|
||||
width: 400rpx;
|
||||
margin: 15rpx auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.region {
|
||||
width: 170rpx;
|
||||
color: #666666;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fixed {
|
||||
position: fixed;
|
||||
top: 300rpx;
|
||||
left: 125rpx;
|
||||
}
|
||||
|
||||
.no-fixed {
|
||||
position: absolute;
|
||||
top: 0rpx;
|
||||
left: 125rpx;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
margin-top: 80rpx;
|
||||
}
|
||||
|
||||
.house-list {
|
||||
width: 700rpx;
|
||||
margin: 20rpx auto;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
|
||||
.item {
|
||||
margin-bottom: 40rpx;
|
||||
border-radius: 20rpx;
|
||||
// box-shadow: 0 3rpx 10rpx 0px #cccccc;
|
||||
background-color: #ffffff;
|
||||
width: 338rpx;
|
||||
|
||||
image {
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
height: 420rpx;
|
||||
width: 338rpx;
|
||||
}
|
||||
|
||||
.info {
|
||||
padding: 20rpx 20rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.title {
|
||||
font-size: 30rpx;
|
||||
text-overflow: -o-ellipsis-lastline;
|
||||
overflow: hidden; //溢出内容隐藏
|
||||
text-overflow: ellipsis; //文本溢出部分用省略号表示
|
||||
display: -webkit-box; //特别显示模式
|
||||
-webkit-line-clamp: 2; //行数
|
||||
line-clamp: 2;
|
||||
-webkit-box-orient: vertical; //盒子中内容竖直排列
|
||||
}
|
||||
|
||||
.desc {
|
||||
color: #999999;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.price {
|
||||
color: #ff0000;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user