完成大体功能和样式

This commit is contained in:
2026-01-15 17:18:24 +08:00
parent 036eb3a206
commit 44a4b33502
211 changed files with 5480 additions and 7826 deletions

View File

@@ -1,9 +1,9 @@
<template>
<view class="index">
<image src="/static/index/index_bg.png" mode="aspectFill" class="bg"></image>
<image :src="staticHost + '/public/static/index/index_bg.png'" mode="aspectFill" class="bg"></image>
<!-- 搜索栏 -->
<view class="index-title">
启辰资产
伍家国投
</view>
<view class="content-wrapper">
@@ -17,7 +17,7 @@
<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: 86rpx;height: 86rpx;" mode="heightFix"></image>
<image :src="staticHost + '/public' + item.src " style="width: 86rpx;height: 86rpx;" mode="heightFix"></image>
<view class="tabName" :style="{color:'#FFFFFF'}">{{item.name}}</view>
</view>
</u-col>
@@ -27,7 +27,7 @@
<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: 50rpx;height: 50rpx;" mode="heightFix"></image>
<image :src="staticHost + '/public' + item.src" style="width: 50rpx;height: 50rpx;" mode="heightFix"></image>
<view class="tabName" :style="{color:'#222222'}">{{item.name}}</view>
</view>
</u-col>
@@ -38,219 +38,184 @@
<u-gap height="10"></u-gap>
<!-- 公告栏 -->
<view @click="notice" class="noticeStyle">
<image src="/static/index/公告.png" style="width: 38rpx;height: 37rpx;margin-left: 22rpx;"></image>
<image :src="staticHost + '/public' + '/static/index/notice.png'" style="width: 38rpx;height: 37rpx;margin-left: 22rpx;"></image>
<view class="notice-content">
<u-notice-bar mode="vertical" :list="noticeList" type="primary" more-icon bg-color="none"
:duration="5000" :fontSize="30" color="#2D2B2C" :volumeIcon="false"></u-notice-bar>
<u-notice-bar mode="vertical" :list="noticeList" type="primary" more-icon bg-color="none"
:duration="5000" :fontSize="30" color="#2D2B2C" :volumeIcon="false"></u-notice-bar>
</view>
</view>
<u-gap height="5"></u-gap>
<view class="tab-content">
<!-- 顶部标签栏 -->
<view class="recommend-tabs">
<view
class="tab-item"
:class="{ active: activeRecommendTab === index }"
v-for="(tab, index) in recommendTabs"
:key="index"
@click="onRecommendTabClick(index)"
>
{{ tab }}
<!-- 顶部标签栏 -->
<view class="recommend-tabs">
<view class="tab-item" :class="{ active: activeRecommendTab === index }"
v-for="(tab, index) in recommendTabs" :key="index" @click="onRecommendTabClick(index)">
{{ tab.label }}
</view>
</view>
</view>
<!-- 筛选标签 -->
<view class="filter-tabs">
<view
class="filter-item"
:class="{ active: activeFilterTabs.includes(index) }"
v-for="(tab, index) in filterTabs"
:key="index"
@click="onFilterTabClick(index)"
>
{{ tab }}
<!-- 筛选标签 -->
<view class="filter-tabs">
<view class="filter-item" :class="{ active: activeFilterTabs.includes(index) }"
v-for="(tab, index) in filterTabs" :key="index" @click="onFilterTabClick(index)">
{{ tab.label}}
</view>
</view>
</view>
<scroll-view scroll-y style="height: calc(100vh - 200rpx);" :scroll-top="scrollTop" @scrolltolower="findHouseList"
lower-threshold="50">
<u-waterfall v-model="flowList" ref="uWaterfall">
<template v-slot:left="{leftList}">
<view class="demo-warter" v-for="(item, index) in leftList" :key="index"
style="margin-right: 10rpx;">
<u-lazy-load threshold="750" border-radius="8" :image="item.image"
:index="index" mode="aspectFill" @click="clickImage(item.id)"></u-lazy-load>
<view class="item-title">{{ item.assetsName}}</view>
<view class="item-desc">{{ item.footPrint}} {{ item.propertyType || '商业用房' }}</view>
<view class="item-price">¥{{item.rentFee}}/<text></text></view>
</view>
</template>
<template v-slot:right="{rightList}">
<view class="demo-warter" v-for="(item, index) in rightList" :key="index"
style="margin-left: 10rpx;">
<u-lazy-load threshold="750" border-radius="8" :image="item.image"
:index="index" mode="aspectFill" @click="clickImage(item.id)"></u-lazy-load>
<view class="item-title">{{ item.assetsName}}</view>
<view class="item-desc">{{ item.footPrint}} {{ item.propertyType || '商业用房' }}</view>
<view class="item-price">¥{{item.rentFee}}/<text></text></view>
</view>
</template>
</u-waterfall>
</scroll-view>
<scroll-view scroll-y style="height: calc(100vh - 200rpx);" :scroll-top="scrollTop"
@scrolltolower="loadMore" lower-threshold="50">
<u-waterfall v-model="flowList" ref="uWaterfall">
<template v-slot:left="{leftList}">
<view class="demo-warter" v-for="(item, index) in leftList" :key="index"
style="margin-right: 10rpx;">
<u-lazy-load threshold="750" border-radius="8" :image="item.coverImgUrl"
:index="index" mode="aspectFill" @click="clickImage(item.assetsNo)"></u-lazy-load>
<view class="item-title">{{ item.assetsName}}</view>
<view class="item-desc">{{ item.footPrint || '0'}} {{ item.assetsType || '商业用房' }}
</view>
<view class="item-price">¥{{item.rentFee || '未知'}}/<text></text></view>
</view>
</template>
<template v-slot:right="{rightList}">
<view class="demo-warter" v-for="(item, index) in rightList" :key="index"
style="margin-left: 10rpx;">
<u-lazy-load threshold="750" border-radius="8" :image="item.coverImgUrl"
:index="index" mode="aspectFill" @click="clickImage(item.assetsNo)"></u-lazy-load>
<view class="item-title">{{ item.assetsName}}</view>
<view class="item-desc">{{ item.footPrint || '0'}} {{ item.assetsType || '商业用房' }}
</view>
<view class="item-price">¥{{item.rentFee || '未知'}}/<text></text></view>
</view>
</template>
</u-waterfall>
<u-loadmore :status="loadStatus" />
</scroll-view>
</view>
<u-back-top :scroll-top="scrollTop" top="1000"></u-back-top>
<u-no-network></u-no-network>
</view>
<u-popup v-model="showFillAuthInfo" mode="center" :mask-close-able="false" border-radius="24">
<view class="auth-popup">
<!-- 标题 -->
<view class="auth-title">
请完善{{authLabel}}信息
</view>
<!-- 描述 -->
<view class="auth-desc">
您当前尚未完善相关信息为避免影响后续功能使用请尽快补充
</view>
<!-- 输入区域 -->
<view class="auth-input">
<u-input v-model="authCode" :placeholder="authPlaceholder" clearable border="bottom" font-size="30"
placeholder-style="color:#bbb" />
</view>
<!-- 按钮 -->
<button class="auth-btn" @click="recordAuthInfo">
提交
</button>
</view>
</u-popup>
</view>
</template>
<script>
import SearchBar from '../../components/searchBar/SearchBar.vue';
import indexNavbarVue from '../../components/navbar/indexNavbar.vue';
export default {
components: {
SearchBar,
indexNavbarVue
SearchBar
},
data() {
return {
init: true,
cusNo: null,
openId: null,
loginType: null,
authCode: '', // 身份证号 / 社会信用代码
showFillAuthInfo: false,
keyword: '',
pageNum: 1,
pageNo: 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: [
'景秀天成新上优质房源,欢迎咨询',
'限时优惠活动租房立减500元',
'新用户注册即送200元租房券',
'寒雨连江夜入吴'
],
noticeList: [],
defaultImgUrl: '/public/static/index/assets.jpg',
navList: [{
name: "住房",
src: "/static/index/住房.png",
type: "0",
underline_color: "linear-gradient(to right, #ff8c00, #ffcc33)"
src: "/static/index/house.png",
type: "住房"
},
{
name: "商铺",
src: "/static/index/商铺.png",
type: "1",
underline_color: "linear-gradient(to right, #89CFF0, #5AA4D1)"
src: "/static/index/shop.png",
type: "住房"
},
{
name: "厂房",
src: "/static/index/厂房.png",
url: "/pages/center/tips",
underline_color: "linear-gradient(to right, #0000FF, #800080)"
src: "/static/index/factory.png",
type: "厂房"
},
{
name: "停车场",
src: "/static/index/停车场.png",
type: "2",
underline_color: "linear-gradient(to bottom, #000080, #00008080)"
src: "/static/index/parking.png",
type: "停车场"
}
],
gridList: [{
name: "看房预约",
src: "/static/index/看房预约.png",
url: "pages/reserve/reserveRecords"
src: "/static/index/reserve.png",
url: "/pages-biz/reserve/reserveRecords"
},
{
name: "合同签约",
src: "/static/index/合同签约.png",
url: "pages/center/contract"
src: "/static/index/contract.png",
url: "/pages-biz/contract/contract"
},
{
name: "退租申请",
src: "/static/index/退租申请.png",
url: "pages/form/leaseCancel"
src: "/static/index/discharge.png",
url: "/pages-assets/discharge/leaseCancelList"
},
{
name: "留言板",
src: "/static/index/留言板.png",
url: "pages/message/guestbook"
src: "/static/index/fallback.png",
url: "/pages-assets/fallback/fallback"
}
],
loadStatus: 'loadmore',
// 顶部标签栏状态
activeRecommendTab: 0,
recommendTabs: ['为您推荐', '附近', '上新'],
recommendTabs: [{
label: '为您推荐',
type: 'recommend'
},
{
label: '附近',
type: 'nearby'
},
{
label: '上新',
type: 'new'
}
],
// 筛选标签状态
activeFilterTabs: [0], // 支持多选
filterTabs: ['上新', '整租', '一室一厅'],
flowList: [
{ id: 1, assetsName: '景秀天成保租房景秀天成保租房', footPrint: 105, rentFee: 1500, image: '/static/img/index/swiper/swiper3.jpg', propertyType: '商业用房' },
{ id: 2, assetsName: '景秀天成保租房景秀天成保租房', footPrint: 105, rentFee: 1500, image: '/static/img/index/swiper/swiper3.jpg', propertyType: '商业用房' },
{ id: 3, assetsName: '景秀天成保租房景秀天成保租房', footPrint: 105, rentFee: 1500, image: '/static/img/index/swiper/swiper3.jpg', propertyType: '商业用房' },
{ id: 4, assetsName: '景秀天成保租房景秀天成保租房', footPrint: 105, rentFee: 1500, image: '/static/img/index/swiper/swiper3.jpg', propertyType: '商业用房' },
{ id: 5, assetsName: '景秀天成保租房景秀天成保租房', footPrint: 105, rentFee: 1500, image: '/static/img/index/swiper/swiper3.jpg', propertyType: '商业用房' },
{ id: 6, assetsName: '景秀天成保租房景秀天成保租房', footPrint: 105, rentFee: 1500, image: '/static/img/index/swiper/swiper3.jpg', propertyType: '商业用房' },
{ id: 7, assetsName: '景秀天成保租房景秀天成保租房', footPrint: 105, rentFee: 1500, image: '/static/img/index/swiper/swiper3.jpg', propertyType: '商业用房' },
{ id: 8, assetsName: '景秀天成保租房景秀天成保租房', footPrint: 105, rentFee: 1500, image: '/static/img/index/swiper/swiper3.jpg', propertyType: '商业用房' },
{ id: 9, assetsName: '景秀天成保租房景秀天成保租房', footPrint: 105, rentFee: 1500, image: '/static/img/index/swiper/swiper3.jpg', propertyType: '商业用房' },
{ id: 10, assetsName: '景秀天成保租房景秀天成保租房', footPrint: 105, rentFee: 1500, image: '/static/img/index/swiper/swiper3.jpg', propertyType: '商业用房' }
filterTabs: [{
label: '两室两厅',
room: 2,
hall: 2
},
{
label: '一室一厅',
room: 1,
hall: 1
}
],
flowList: [],
uvCode: uni.getStorageSync('uvCode')
}
},
onLoad() {
// 自动定位到所在的城市
// this.checkCity();
// 获取数据
// this.findHouseList();
// this.getNoticecList();
this.getNoticecList();
// 流量统计
// this.appSysFlowInfo();
// uni.$on('findIndexHouseList', (obj) => {
// // 获取数据
// this.findHouseList(1);
// })
uni.$on('findIndexHouseList', (obj) => {
// 获取数据
this.findHouseList();
})
},
onShow() {
this.needFillAuthInfo();
let userInfo = uni.getStorageSync('userInfo');
if (userInfo) {
this.cusNo = userInfo.cusNo;
this.openId = userInfo.cusNo;
}
this.resetAndLoad()
},
onUnload() {
// 移除监听事件
@@ -259,15 +224,9 @@
onPageScroll(e) {
this.scrollTop = e.scrollTop;
},
onReachBottom() {
this.loadStatus = 'loading';
// 获取数据
this.findHouseList()
},
// 下拉刷新
onPullDownRefresh() {
// 获取数据
this.findHouseList(1);
this.resetAndLoad();
// 关闭刷新
uni.stopPullDownRefresh();
},
@@ -275,15 +234,8 @@
},
computed: {
authLabel() {
return this.loginType === 'person' ?
'身份证号' :
'企业社会信用代码'
},
authPlaceholder() {
return this.loginType === 'person' ?
'请输入身份证号' :
'请输入企业社会信用代码'
staticHost() {
return this.$config.staticUrl
}
},
methods: {
@@ -295,11 +247,18 @@
// 重置筛选条件
this.activeFilterTabs = [0];
// 重新加载数据
this.pageNum = 1;
this.flowList = [];
this.findHouseList(1);
this.resetAndLoad();
},
resetAndLoad() {
this.pageNo = 1;
this.flowList = [];
this.loadStatus = 'loadmore';
this.$nextTick(() => {
this.$refs.uWaterfall && this.$refs.uWaterfall.clear();
this.findHouseList();
});
},
// 筛选标签点击事件
onFilterTabClick(index) {
// 检查是否已选中
@@ -314,8 +273,9 @@
// 这里可以添加根据筛选标签筛选数据的逻辑
console.log('筛选标签点击:', this.filterTabs[index]);
console.log('当前选中的筛选标签:', this.activeFilterTabs.map(i => this.filterTabs[i]));
this.resetAndLoad();
},
checkCity() {
// 检查是否已选择城市,如果未选择,跳转到选择城市页面
let lifeData = uni.getStorageSync('lifeData');
@@ -323,93 +283,82 @@
// console.log(vuex_city.length);
if (!vuex_city || vuex_city.length == 0) {
// 没有token 则跳转到登录
return this.$u.route('/pages/location/location');
return this.$u.route('/pages-biz/location/location');
}
},
// 简单身份证校验18 位)
checkIdCard(code) {
return /^[1-9]\d{5}(19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}[\dXx]$/.test(
code
);
},
// 统一社会信用代码校验18 位)
checkCreditCode(code) {
return /^[0-9A-Z]{18}$/.test(code);
},
location() {
this.$u.route({
url: 'pages/location/location',
})
},
search() {
this.$u.route({
url: 'pages/search/search',
})
this.$u.route('/pages-biz/search/search');
},
notice() {
this.$u.route({
url: 'pages/notice/notice'
url: '/pages-biz/notice/notice'
})
},
//查找房源信息
findHouseList(type = 0) {
if (type == 1) {
this.pageNum = 1
this.flowList = []
this.$refs.uWaterfall.clear();
}
let url = "/assets/findAssetList";
this.$u.post(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.data.result;
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
// }
this.flowList.push(item);
}
++this.pageNum
this.loadStatus = 'loadmore';
}).catch(err => {
console.log("失败:", err)
})
},
clickSearch() {
this.$u.route('/pages/search/search');
},
clickImage(houseId) {
this.$u.route({
url: '/pages/detail/assetsDetail'
})
findHouseList(type = null) {
if (this.loadStatus !== 'loadmore') return;
// this.$u.route({
// url: '/pages/detail/detail',
// params: {
// houseId: houseId
// }
// })
this.loadStatus = 'loading';
this.$u.post('/assets/queryPage', {
assetsType: type,
pageNo: this.pageNo,
pageSize: this.pageSize,
assetsStatus: '闲置中'
}).then(result => {
let rows = result.data.result || [];
// 第一页无数据
if (this.pageNo === 1 && rows.length === 0) {
this.flowList = [];
this.loadStatus = 'nomore';
return;
}
rows.forEach(row =>{
if(row.coverImgUrl) {
row.coverImgUrl = this.$config.staticUrl + row.coverImgUrl
}else {
row.coverImgUrl = this.$config.staticUrl + this.defaultImgUrl
}
})
// 追加数据
this.flowList = this.flowList.concat(rows);
// 判断是否还有下一页(核心)
if (rows.length < this.pageSize) {
this.loadStatus = 'nomore';
} else {
this.pageNo++; // ✅ 只有这里能 +1
this.loadStatus = 'loadmore';
}
}).catch(err => {
console.log("获取资产信息失败:", err);
this.loadStatus = 'loadmore';
}).finally(() => {
uni.stopPullDownRefresh();
});
},
clickImage(assetsNo) {
console.log(assetsNo)
this.$u.route({
url: '/pages-assets/assets/assetsDetail',
params: {
assetsNo: assetsNo
}
})
},
clickNav(item, index) {
this.activeIndex = index;
this.findHouseList(item.type);
this.pageNo = 1;
this.flowList = [];
this.loadStatus = 'loadmore';
this.$nextTick(() => {
this.$refs.uWaterfall && this.$refs.uWaterfall.clear();
this.findHouseList(item.name);
});
},
clickGrid(item) {
console.log('跳转我的预约,url:' + item.url)
this.$u.route({
url: item.url
})
@@ -418,6 +367,12 @@
code() {
this.$mytip.toast('请咨询作者')
},
loadMore() {
// 只有在 loadStatus 为 'loadmore' 时才触发
if (this.loadStatus !== 'loadmore') return;
// 调用接口获取下一页
this.findHouseList();
},
appSysFlowInfo() {
// 流量统计
let uvCode = uni.getStorageSync("uvCode");
@@ -430,95 +385,21 @@
},
});
},
server() {
// window.open ('https://sourcebyte.cn')
uni.makePhoneCall({
phoneNumber: "18720989281",
});
},
getNoticecList() {
let url = "/notice/findNoticeList";
this.$u.get(url, {
pageNum: 1,
pageSize: 50,
orderByColumn: 'create_time',
isAsc: 'desc'
}).then(obj => {
let data = obj.data.result
data.filter(item => {
this.noticeList.push(item.noticeTitle)
})
});
},
needFillAuthInfo() {
let lifeData = uni.getStorageSync('lifeData');
let token = lifeData.vuex_token
if (!token || token === null || token === undefined ||
(typeof token === 'object' && Object.keys(token).length === 0)) {
return;
}
let url = "/login/needFillAuthInfo";
this.$u.get(url, {}, {
'WT': token
}).then(obj => {
console.log(obj.data)
if (obj.data) {
this.showFillAuthInfo = obj.data
const indexParam = uni.getStorageSync('indexParam') || {}
this.loginType = indexParam.loginType || 'person'
}
});
},
moreInfo() {
uni.navigateToMiniProgram({
appId: 'wxbca64173e772915e', // 此为开源字节appid
path: '/pages/index/index', // 此为开源字节首页路径
envVersion: "release",
success: res => {
// 打开成功
console.log("打开成功", res);
},
fail: err => {
console.log(err);
}
})
},
recordAuthInfo() {
// 身份证校验
if (this.loginType === 'person' && !this.checkIdCard(this.authCode)) {
uni.showToast({
title: '身份证号格式不正确',
icon: 'none'
});
return;
}
// 企业社会信用代码校验
if (this.loginType === 'company' && !this.checkCreditCode(this.authCode)) {
uni.showToast({
title: '社会信用代码格式不正确',
icon: 'none'
});
return;
}
let lifeData = uni.getStorageSync('lifeData');
let token = lifeData.vuex_token
if (!token || token === null || token === undefined ||
(typeof token === 'object' && Object.keys(token).length === 0)) {
return;
}
let url = "/login/recordAuthInfo";
let url = "/notice/pageQuery";
this.$u.post(url, {
code: this.authCode,
userType: this.loginType,
}, {
'WT': token
pageNo: 1,
pageSize: 10
}).then(obj => {
if (obj.flag) {
this.showFillAuthInfo = false;
this.authCode = '';
let data = obj.data.result
data.filter(item => {
this.noticeList.push(item.noticeTitle)
})
}
})
}).catch(err => {
console.log("获取招商公告失败:", err)
});
}
}
}
@@ -653,18 +534,18 @@
font-size: 32rpx;
font-weight: 600;
}
.tab-item {
margin-right: 40rpx;
padding: 10rpx 0;
color: #333;
}
.tab-item.active {
color: #FF2F31;
border-bottom: 4rpx solid #FF2F31;
}
/* 筛选标签样式 */
.filter-tabs {
display: flex;
@@ -673,7 +554,7 @@
background: #fff;
flex-wrap: wrap;
}
.filter-item {
margin-right: 20rpx;
margin-bottom: 10rpx;
@@ -683,7 +564,7 @@
font-size: 26rpx;
color: #666;
}
.filter-item.active {
background: #FFECEC;
color: #FF2F31;
@@ -701,7 +582,7 @@
padding: 0 20rpx;
/* 左右留白一致 */
}
/* 图片样式 */
.u-lazy-load {
width: 100%;