mirror of
http://36.133.248.69:3088/admin/RentWeAppFront.git
synced 2026-03-07 17:32:25 +08:00
498 lines
13 KiB
Vue
498 lines
13 KiB
Vue
<template>
|
||
<view class="u-p-l-10 u-p-r-10 index">
|
||
|
||
<!-- 流量主-腾讯banner广告 -->
|
||
<view>
|
||
<!-- <ad unit-id="adunit-fcfdcc4d7095b6b1" ad-intervals="30"></ad> -->
|
||
<!-- 轮播图 -->
|
||
<!-- #ifndef MP-WEIXIN -->
|
||
<!-- <u-swiper :list="swiperList" height="350"></u-swiper> -->
|
||
<!-- #endif -->
|
||
<u-swiper :list="swiperList" height="350" @click="moreInfo"></u-swiper>
|
||
</view>
|
||
|
||
<!-- 房源信息导航栏 -->
|
||
<view>
|
||
<view class="rowClass">
|
||
<u-row>
|
||
<u-col span="3" text-align="center" v-for="(item,index) in navList" :key="index">
|
||
<view class="u-padding-20" @tap="clickNav(item, index)" hover-class="hoverClass">
|
||
<image :src="item.src" style="width: 130rpx;height: 130rpx;" mode="widthFix"></image>
|
||
<view class="tabName">{{item.name}}</view>
|
||
<!-- 点击后出现下划线 -->
|
||
<view
|
||
v-if="activeIndex === index"
|
||
class="underline"
|
||
:style="{ background: item.underline_color }"
|
||
></view>
|
||
</view>
|
||
</u-col>
|
||
</u-row>
|
||
<!-- 下划线（动态颜色 + 动画滑动） -->
|
||
<!-- <view
|
||
class="underline"
|
||
:style="{
|
||
transform: `translateX(${activeIndex * 100}%)`,
|
||
background: navList[activeIndex].underline_color
|
||
}"
|
||
></view> -->
|
||
</view>
|
||
<view class="rowClass">
|
||
<u-row>
|
||
<u-col span="3" text-align="center" v-for="(item,index) in gridList" :key="index">
|
||
<view class="u-padding-20" @tap="clickGrid(item)" hover-class="hoverClass">
|
||
<image :src="item.src" style="width: 110rpx;height: 110rpx;" mode="widthFix"></image>
|
||
<view class="tabName">{{item.name}}</view>
|
||
</view>
|
||
</u-col>
|
||
</u-row>
|
||
</view>
|
||
<u-gap height="10"></u-gap>
|
||
<!-- 公告栏 -->
|
||
<view @click="notice">
|
||
<u-notice-bar mode="vertical" :list="noticeList" type="primary" more-icon
|
||
bg-color="#fff" :duration="5000" border-radius="15"></u-notice-bar>
|
||
</view>
|
||
<!-- 搜索栏 -->
|
||
<!-- <u-navbar :is-back="false" :fixed="false" :safeAreaInsetTop="false"> -->
|
||
<view class="search-bar" style="display: flex;justify-content: center;align-items: center;">
|
||
<!-- 选择地区 -->
|
||
<view class="u-p-20 location-chose" @click="location">
|
||
{{vuex_city==''?'选择':vuex_city}}
|
||
<u-icon name="arrow-down-fill" class="u-p-l-10" color="#515356"></u-icon>
|
||
</view>
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<u-search placeholder="你想住在哪儿" v-model="keyword" input-align="center" :show-action="false" :clearabled="true"
|
||
:disabled="true" style="width: 380rpx;" @click="search"></u-search>
|
||
<!-- #endif -->
|
||
<!-- #ifndef MP-WEIXIN -->
|
||
<u-search placeholder="你想住在哪儿" v-model="keyword" input-align="center" :show-action="false" :clearabled="true"
|
||
:disabled="true" style="width: 580rpx;" @click="search"></u-search>
|
||
<!-- #endif -->
|
||
</view>
|
||
|
||
<!-- </u-navbar> -->
|
||
<u-gap height="5"></u-gap>
|
||
<u-waterfall v-model="flowList" ref="uWaterfall">
|
||
<template v-slot:left="{leftList}">
|
||
<view class="demo-warter" v-for="(item, index) in leftList" :key="index">
|
||
<u-lazy-load threshold="750" border-radius="12" :image="item.coverImgUrl" :index="index"
|
||
@click="clickImage(item.id)"></u-lazy-load>
|
||
<view class="item-title">{{item.name}}</view>
|
||
<view class="item-desc">{{ item.footPrint}}㎡</view>
|
||
<view class="item-price">¥{{item.rentFee}}</view>
|
||
</view>
|
||
</template>
|
||
<template v-slot:right="{rightList}">
|
||
<view class="demo-warter" v-for="(item, index) in rightList" :key="index">
|
||
<u-lazy-load threshold="750" border-radius="10" :image="item.coverImgUrl" :index="index"
|
||
@click="clickImage(item.id)"></u-lazy-load>
|
||
<view class="item-title">{{item.name}}</view>
|
||
<view class="item-desc">{{ item.footPrint}}㎡</view>
|
||
<view class="item-price">¥{{item.rentFee}}</view>
|
||
</view>
|
||
</template>
|
||
</u-waterfall>
|
||
|
||
</view>
|
||
|
||
<u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" @loadmore="findHouseList" style="height: 80rpx;line-height: 80rpx;"></u-loadmore>
|
||
<u-back-top :scroll-top="scrollTop" top="1000"></u-back-top>
|
||
<u-no-network></u-no-network>
|
||
<!-- 联系客服 -->
|
||
<!-- <view class="buttom">
|
||
<view class="loginType">
|
||
<view class="wechat item">
|
||
<view class="icon"><u-icon size="60" name="server-man" color="#999" @click="server"></u-icon></view>
|
||
</view>
|
||
</view>
|
||
</view> -->
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import config from "@/common/config.js" // 全局配置文件
|
||
export default {
|
||
data() {
|
||
return {
|
||
keyword:'',
|
||
pageNum: 1,
|
||
pageSize: 20,
|
||
scrollTop: 0,
|
||
houseList: [],
|
||
activeIndex: 0, // 当前选中的索引
|
||
swiperList: [
|
||
{
|
||
image: '/static/img/index/swiper/swiper3.jpg',
|
||
title: '身无彩凤双飞翼，心有灵犀一点通'
|
||
},
|
||
{
|
||
image: '/static/img/index/swiper/swiper.jpg',
|
||
title: '身无彩凤双飞翼，心有灵犀一点通'
|
||
},
|
||
],
|
||
noticeList: ['伍家岗招租'],
|
||
navList:[
|
||
{name:"保租房",src:"/static/icon/保租房.png",type:"0",underline_color:"linear-gradient(to right, #ff8c00, #ffcc33)"},
|
||
{name:"商铺",src:"/static/icon/商铺.png",type:"1",underline_color:"linear-gradient(to right, #ff8c00, #ffcc33)"},
|
||
{name:"厂房",src:"/static/icon/厂房.png",url:"/pages/center/tips",underline_color:"linear-gradient(to right, #ff8c00, #ffcc33)"},
|
||
{name:"停车场",src:"/static/icon/停车场.png",type:"2",underline_color:"linear-gradient(to right, #ff8c00, #ffcc33)"}
|
||
],
|
||
gridList:[
|
||
{name:"看房预约",src:"/static/icon/预约看房.png",url:"pages/reserve/reserveRecords"},
|
||
{name:"合同签约",src:"/static/icon/合同签约.png",url:"pages/center/contract"},
|
||
{name:"退租申请",src:"/static/icon/退租申请.png",url:"pages/form/leaseCancel"}
|
||
],
|
||
loadStatus: 'loadmore',
|
||
flowList: [
|
||
{
|
||
"id":"0001",
|
||
"name":"测试房屋",
|
||
"type":"0",
|
||
"rentFee": "1400",
|
||
"footPrint": "80",
|
||
"coverImgUrl":"/static/img/index/swiper/swiper3.jpg"
|
||
|
||
},
|
||
{
|
||
"id":"0002",
|
||
"name":"测试房屋",
|
||
"type":"0",
|
||
"rentFee": "1400",
|
||
"footPrint": "80",
|
||
"coverImgUrl":"/static/img/index/swiper/swiper3.jpg"
|
||
|
||
},
|
||
{
|
||
"id":"0003",
|
||
"name":"测试房屋",
|
||
"type":"0",
|
||
"rentFee": "1400",
|
||
"footPrint": "80",
|
||
"coverImgUrl":"/static/img/index/swiper/swiper3.jpg"
|
||
|
||
},
|
||
{
|
||
"id":"0001",
|
||
"name":"测试房屋",
|
||
"type":"0",
|
||
"rentFee": "1400",
|
||
"footPrint": "80",
|
||
"coverImgUrl":"/static/img/index/swiper/swiper3.jpg"
|
||
|
||
}
|
||
],
|
||
uvCode: uni.getStorageSync('uvCode')
|
||
}
|
||
},
|
||
onLoad() {
|
||
// 自动定位到所在的城市
|
||
// this.checkCity();
|
||
// 获取数据
|
||
this.findHouseList();
|
||
this.getNoticecList();
|
||
// 流量统计
|
||
this.appSysFlowInfo();
|
||
uni.$on('findIndexHouseList', (obj) => {
|
||
// 获取数据
|
||
this.findHouseList(1);
|
||
})
|
||
},
|
||
onUnload() {
|
||
// 移除监听事件
|
||
uni.$off('findIndexHouseList');
|
||
},
|
||
onPageScroll(e) {
|
||
this.scrollTop = e.scrollTop;
|
||
},
|
||
onReachBottom() {
|
||
this.loadStatus = 'loading';
|
||
// 获取数据
|
||
this.findHouseList()
|
||
},
|
||
// 下拉刷新
|
||
onPullDownRefresh() {
|
||
// 获取数据
|
||
this.findHouseList(1);
|
||
// 关闭刷新
|
||
uni.stopPullDownRefresh();
|
||
},
|
||
methods: {
|
||
checkCity(){
|
||
// 检查是否已选择城市，如果未选择，跳转到选择城市页面
|
||
let lifeData = uni.getStorageSync('lifeData');
|
||
let vuex_city = lifeData.vuex_city
|
||
// console.log(vuex_city.length);
|
||
if(!vuex_city || vuex_city.length == 0){
|
||
// 没有token 则跳转到登录
|
||
return this.$u.route('/pages/location/location');
|
||
}
|
||
},
|
||
location(){
|
||
this.$u.route({
|
||
url: 'pages/location/location',
|
||
})
|
||
},
|
||
search(){
|
||
this.$u.route({
|
||
url: 'pages/search/search',
|
||
})
|
||
},
|
||
notice(){
|
||
this.$u.route({
|
||
url: 'pages/notice/notice'
|
||
})
|
||
},
|
||
//查找房源信息
|
||
findHouseList(type = 0) {
|
||
if(type == 1){
|
||
this.pageNum = 1
|
||
this.flowList = []
|
||
this.$refs.uWaterfall.clear();
|
||
}
|
||
let url = "/api/houseApi/findHouseRoomList";
|
||
this.$u.get(url, {
|
||
state:1,
|
||
villageCity:uni.getStorageSync('lifeData').vuex_city,
|
||
pageNum: this.pageNum,
|
||
pageSize: this.pageSize,
|
||
orderByColumn: 'update_time,create_time',
|
||
isAsc: 'desc'
|
||
}).then(result => {
|
||
const data = result.rows;
|
||
if(this.pageNum>1 && data.length < this.pageSize){
|
||
return this.loadStatus = 'nomore';
|
||
}
|
||
this.houseList = data;
|
||
for (let i = 0; i < this.houseList.length; i++) {
|
||
// 先转成字符串再转成对象，避免数组对象引用导致数据混乱
|
||
let item = this.houseList[i]
|
||
if(!item.faceUrl.includes(config.staticUrl)){
|
||
item.image = config.staticUrl+item.faceUrl
|
||
}else{
|
||
item.image = item.faceUrl
|
||
}
|
||
if(item.type == 0){
|
||
item.type = '整租'
|
||
}else if(item.type == 1){
|
||
item.type = '合租'
|
||
}
|
||
if(item.roomType == 1){
|
||
item.roomType = '主卧'
|
||
}else if(item.roomType == 2){
|
||
item.roomType = '次卧'
|
||
}else{
|
||
item.roomType = '未知'
|
||
}
|
||
if(this.$u.test.isEmpty(item.houseNum)){
|
||
item.houseNum = ''
|
||
}
|
||
if(this.$u.test.isEmpty(item.houseHall)){
|
||
item.houseHall = ''
|
||
}
|
||
if(this.$u.test.isEmpty(item.toiletNum)){
|
||
item.toiletNum = ''
|
||
}
|
||
this.flowList.push(item);
|
||
}
|
||
++ this.pageNum
|
||
this.loadStatus = 'loadmore';
|
||
});
|
||
},
|
||
clickSearch() {
|
||
this.$u.route('/pages/search/search');
|
||
},
|
||
clickImage(houseId) {
|
||
this.$u.route({
|
||
url: '/pages/detail/assetsDetail'
|
||
})
|
||
|
||
// this.$u.route({
|
||
// url: '/pages/detail/detail',
|
||
// params: {
|
||
// houseId: houseId
|
||
// }
|
||
// })
|
||
},
|
||
clickNav(item,index){
|
||
this.activeIndex = index;
|
||
this.findHouseList(item.type);
|
||
},
|
||
clickGrid(item){
|
||
console.log('跳转我的预约,url:' + item.url)
|
||
this.$u.route({
|
||
url: item.url
|
||
})
|
||
|
||
},
|
||
code(){
|
||
this.$mytip.toast('请咨询作者')
|
||
},
|
||
appSysFlowInfo(){
|
||
// 流量统计
|
||
let uvCode = uni.getStorageSync("uvCode");
|
||
let url = "https://sourcebyte.cn/api/flow/upFlow?type=MINI&uvCode=" + uvCode;
|
||
uni.request({
|
||
url: url,
|
||
method: "POST",
|
||
success: (res) => {
|
||
uni.setStorageSync("uvCode", res.data.data);
|
||
},
|
||
});
|
||
},
|
||
server(){
|
||
// window.open ('https://sourcebyte.cn')
|
||
uni.makePhoneCall({
|
||
phoneNumber: "18720989281",
|
||
});
|
||
},
|
||
getNoticecList(){
|
||
// let url = "/api/notice/findNoticeList";
|
||
// this.$u.get(url,{
|
||
// pageNum:1,
|
||
// pageSize:50,
|
||
// orderByColumn:'create_time',
|
||
// isAsc:'desc'
|
||
// }).then(obj => {
|
||
// let data = obj.rows
|
||
// data.filter(item=>{
|
||
// this.noticeList.push(item.noticeTitle)
|
||
// })
|
||
// });
|
||
},
|
||
moreInfo(){
|
||
uni.navigateToMiniProgram({
|
||
appId:'wxbca64173e772915e',// 此为开源字节appid
|
||
path:'/pages/index/index',// 此为开源字节首页路径
|
||
envVersion:"release",
|
||
success: res => {
|
||
// 打开成功
|
||
console.log("打开成功", res);
|
||
},
|
||
fail: err => {
|
||
console.log(err);
|
||
}
|
||
})
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.index{
|
||
margin-top: 20rpx;
|
||
}
|
||
.nomore {
|
||
background-color: $u-bg-color;
|
||
}
|
||
.search-bar {
|
||
margin-top: 10rpx;
|
||
background-color: rgb(255, 255, 255);
|
||
border-radius: 8px;
|
||
}
|
||
.location-chose{
|
||
margin-right: 20rpx;
|
||
}
|
||
.search{
|
||
width: 70px;
|
||
height: 44px;
|
||
&:active{
|
||
background-color: $u-bg-color;
|
||
}
|
||
}
|
||
.function-grid {
|
||
margin: 0 20rpx;
|
||
padding: 20rpx 0;
|
||
}
|
||
|
||
/* 下划线 */
|
||
.underline {
|
||
margin-top: 5rpx;
|
||
width: 130rpx;
|
||
height: 6rpx;
|
||
border-radius: 5rpx;
|
||
transition: all 0.25s ease;
|
||
}
|
||
|
||
.rowClass{
|
||
border-radius: 8px;
|
||
background-color: rgb(255, 255, 255);
|
||
margin-top: 10rpx;
|
||
}
|
||
|
||
.hoverClass{
|
||
background-color: #E4E7ED;
|
||
}
|
||
|
||
.tabName{
|
||
font-size: 28rpx;
|
||
color: $u-main-color;
|
||
}
|
||
|
||
.demo-warter {
|
||
border-radius: 8px;
|
||
margin-top: 3px;
|
||
background-color: #ffffff;
|
||
padding: 3px;
|
||
position: relative;
|
||
}
|
||
|
||
.u-close {
|
||
position: absolute;
|
||
top: 20rpx;
|
||
right: 20rpx;
|
||
}
|
||
|
||
.item-cover {
|
||
font-size: 55rpx;
|
||
color: $u-type-warning;
|
||
}
|
||
|
||
.item-title {
|
||
font-size: 28rpx;
|
||
color: $u-main-color;
|
||
font-weight: bold;
|
||
padding-top: 5rpx;
|
||
padding-left: 10rpx;
|
||
}
|
||
|
||
.item-price {
|
||
font-weight: normal;
|
||
font-size: 32rpx;
|
||
color: $u-type-warning;
|
||
}
|
||
|
||
.item-desc {
|
||
font-weight: normal;
|
||
font-size: 26rpx;
|
||
color: $u-tips-color;
|
||
padding-bottom: 5rpx;
|
||
padding-left: 10rpx;
|
||
}
|
||
|
||
.item-tag {
|
||
font-size: 24rpx;
|
||
color: $u-tips-color;
|
||
margin-top: 3px;
|
||
}
|
||
|
||
.buttom {
|
||
.loginType {
|
||
font-size: 14px;
|
||
position: fixed;
|
||
right: 30rpx;
|
||
bottom: 300rpx;
|
||
width: 60px;
|
||
height: 60px;
|
||
padding: 4px;
|
||
cursor: pointer;
|
||
background: #FFF;
|
||
text-align: center;
|
||
line-height: 60px;
|
||
border-radius: 100%;
|
||
-webkit-box-shadow: 0px 1px 20px 0px rgba(0,0,0,0.1),inset 0px -1px 0px 0px rgba(0,0,0,0.1);
|
||
box-shadow: 0px 1px 20px 0px rgba(0,0,0,0.1),inset 0px -1px 0px 0px rgba(0,0,0,0.1);
|
||
}
|
||
}
|
||
</style>
|