mirror of
http://36.133.248.69:3088/admin/RentWeAppFront.git
synced 2026-03-08 01:42:28 +08:00
628 lines
16 KiB
Vue
628 lines
16 KiB
Vue
<template>
|
||
<view class="index">
|
||
<image src="/static/index/index_bg.png" mode="aspectFill" class="bg"></image>
|
||
<!-- 搜索栏 -->
|
||
<view class="index-title">
|
||
启辰资产
|
||
</view>
|
||
<view class="content-wrapper">
|
||
|
||
<view class="search-wrapper">
|
||
<search-bar
|
||
:city="vuex_city==''?'选择':vuex_city"
|
||
placeholder="你想住在哪儿"
|
||
@chooseCity="location"
|
||
@search="search"
|
||
/>
|
||
</view>
|
||
<!-- 房源信息导航栏 -->
|
||
<view class="nav-area">
|
||
<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: 86rpx;height: 86rpx;" mode="heightFix"></image>
|
||
<view class="tabName" :style="{color:'#FFFFFF'}">{{item.name}}</view>
|
||
</view>
|
||
</u-col>
|
||
</u-row>
|
||
</view>
|
||
<view class="rowClass navbox2">
|
||
<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>
|
||
<view class="tabName" :style="{color:'#222222'}">{{item.name}}</view>
|
||
</view>
|
||
</u-col>
|
||
</u-row>
|
||
</view>
|
||
</view>
|
||
|
||
<u-gap height="10"></u-gap>
|
||
<!-- 公告栏 -->
|
||
<view @click="notice" class="noticeStyle">
|
||
<image src="/static/index/公告.png" style="width: 38rpx;height: 37rpx;"></image>
|
||
<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>
|
||
|
||
<u-gap height="5"></u-gap>
|
||
<scroll-view
|
||
scroll-y
|
||
style="height: 100vh;"
|
||
: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="12" image="/static/img/index/swiper/swiper3.jpg" :index="index" mode="widthFix"
|
||
@click="clickImage(item.id)"></u-lazy-load>
|
||
<view class="item-title">{{ item.assetsName}}</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" style="margin-left: 10rpx;">
|
||
<u-lazy-load threshold="750" border-radius="10" image="/static/img/index/swiper/swiper3.jpg" :index="index" mode="widthFix"
|
||
@click="clickImage(item.id)"></u-lazy-load>
|
||
<view class="item-title">{{ item.assetsName}}</view>
|
||
<view class="item-desc">{{ item.footPrint}}㎡</view>
|
||
<view class="item-price">¥{{item.rentFee}}</view>
|
||
</view>
|
||
</template>
|
||
</u-waterfall>
|
||
</scroll-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},
|
||
data() {
|
||
return {
|
||
loginType: null,
|
||
authCode: '', // 身份证号 / 社会信用代码
|
||
showFillAuthInfo: false,
|
||
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/index/住房.png",type:"0",underline_color:"linear-gradient(to right, #ff8c00, #ffcc33)"},
|
||
{name:"商铺",src:"/static/index/商铺.png",type:"1",underline_color:"linear-gradient(to right, #89CFF0, #5AA4D1)"},
|
||
{name:"厂房",src:"/static/index/厂房.png",url:"/pages/center/tips",underline_color:"linear-gradient(to right, #0000FF, #800080)"},
|
||
{name:"停车场",src:"/static/index/停车场.png",type:"2",underline_color:"linear-gradient(to bottom, #000080, #00008080)"}
|
||
],
|
||
gridList:[
|
||
{name:"看房预约",src:"/static/index/看房预约.png",url:"pages/reserve/reserveRecords"},
|
||
{name:"合同签约",src:"/static/index/合同签约.png",url:"pages/center/contract"},
|
||
{name:"退租申请",src:"/static/index/退租申请.png",url:"pages/form/leaseCancel"},
|
||
{name:"留言板",src:"/static/index/留言板.png",url:"pages/form/leaseCancel"}
|
||
],
|
||
loadStatus: 'loadmore',
|
||
flowList: [
|
||
],
|
||
uvCode: uni.getStorageSync('uvCode')
|
||
}
|
||
},
|
||
onLoad() {
|
||
// 自动定位到所在的城市
|
||
// this.checkCity();
|
||
// 获取数据
|
||
this.findHouseList();
|
||
this.getNoticecList();
|
||
// 流量统计
|
||
// this.appSysFlowInfo();
|
||
uni.$on('findIndexHouseList', (obj) => {
|
||
// 获取数据
|
||
this.findHouseList(1);
|
||
})
|
||
|
||
},
|
||
onShow(){
|
||
this.needFillAuthInfo();
|
||
},
|
||
onUnload() {
|
||
// 移除监听事件
|
||
uni.$off('findIndexHouseList');
|
||
},
|
||
onPageScroll(e) {
|
||
this.scrollTop = e.scrollTop;
|
||
},
|
||
onReachBottom() {
|
||
this.loadStatus = 'loading';
|
||
// 获取数据
|
||
this.findHouseList()
|
||
},
|
||
// 下拉刷新
|
||
onPullDownRefresh() {
|
||
// 获取数据
|
||
this.findHouseList(1);
|
||
// 关闭刷新
|
||
uni.stopPullDownRefresh();
|
||
},
|
||
mounted(){
|
||
|
||
},
|
||
computed: {
|
||
authLabel() {
|
||
return this.loginType === 'person'
|
||
? '身份证号'
|
||
: '企业社会信用代码'
|
||
},
|
||
authPlaceholder() {
|
||
return this.loginType === 'person'
|
||
? '请输入身份证号'
|
||
: '请输入企业社会信用代码'
|
||
}
|
||
},
|
||
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');
|
||
}
|
||
},
|
||
// 简单身份证校验（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',
|
||
})
|
||
},
|
||
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 = "/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'
|
||
})
|
||
|
||
// 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 = "/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";
|
||
this.$u.post(url, {
|
||
code: this.authCode,
|
||
userType: this.loginType,
|
||
},{'WT': token}).then(obj => {
|
||
if (obj.flag) {
|
||
this.showFillAuthInfo = false;
|
||
this.authCode = '';
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.index {
|
||
background: #F8F8F8;
|
||
min-height: 100vh; // 防止内容少时顶部空白
|
||
position: relative;
|
||
|
||
}
|
||
.bg{
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 550rpx; /* ✅ 用固定高度更稳，你可改 320/400 */
|
||
z-index: 0;
|
||
}
|
||
.index-title{
|
||
position: absolute;
|
||
z-index: 1;
|
||
top: 5%;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
transform: translateX(-50%);
|
||
font-family: Noto Sans S Chinese;
|
||
font-weight: 400;
|
||
font-size: 34rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
.content-wrapper{
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
.search-wrapper {
|
||
|
||
}
|
||
|
||
.content-wrapper {
|
||
padding: 197rpx 30rpx 22rpx 30rpx; // 统一左右内边距
|
||
}
|
||
.navbox2 {
|
||
height: 170rpx;
|
||
padding-top: 2%;
|
||
background: #FFFFFF;
|
||
border-radius: 10rpx;
|
||
}
|
||
.nomore {
|
||
background-color: $u-bg-color;
|
||
}
|
||
|
||
|
||
|
||
.noticeStyle{
|
||
display: flex;
|
||
margin-top: 22rpx;
|
||
height: 86rpx;
|
||
background-color: #FFFFFF;
|
||
border-radius: 10rpx;
|
||
|
||
}
|
||
/* 下划线 */
|
||
.underline {
|
||
margin-top: 5rpx;
|
||
width: 130rpx;
|
||
height: 6rpx;
|
||
border-radius: 5rpx;
|
||
transition: all 0.25s ease;
|
||
}
|
||
|
||
.rowClass{
|
||
margin-top: 20rpx;
|
||
}
|
||
.rowBgColor{
|
||
background-color: rgb(248, 248, 248);
|
||
}
|
||
.leftOffSetRow{
|
||
margin-left: 20%;
|
||
}
|
||
.hoverClass{
|
||
background-color: #E4E7ED;
|
||
}
|
||
|
||
.tabName{
|
||
font-size: 28rpx;
|
||
}
|
||
.u-close {
|
||
position: absolute;
|
||
top: 20rpx;
|
||
right: 20rpx;
|
||
}
|
||
|
||
.item-cover {
|
||
font-size: 55rpx;
|
||
color: $u-type-warning;
|
||
}
|
||
|
||
.item-tag {
|
||
font-size: 24rpx;
|
||
color: $u-tips-color;
|
||
margin-top: 3px;
|
||
}
|
||
.demo-warter {
|
||
margin-bottom: 20rpx;
|
||
background: #fff;
|
||
border-radius: 16rpx;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.u-waterfall {
|
||
padding: 0 20rpx; /* 左右留白一致 */
|
||
}
|
||
|
||
.item-title {
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
margin-top: 14rpx;
|
||
padding: 0 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;
|
||
}
|
||
|
||
.item-desc, .item-price {
|
||
padding: 0 10rpx;
|
||
margin-top: 8rpx;
|
||
}
|
||
.auth-popup {
|
||
width: 600rpx;
|
||
padding: 48rpx 40rpx 40rpx;
|
||
background-color: #fff;
|
||
border-radius: 24rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* 标题 */
|
||
.auth-title {
|
||
font-size: 34rpx;
|
||
font-weight: 600;
|
||
color: #1a1a1a;
|
||
text-align: center;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
/* 描述 */
|
||
.auth-desc {
|
||
font-size: 26rpx;
|
||
color: #888;
|
||
text-align: center;
|
||
line-height: 1.6;
|
||
margin-bottom: 40rpx;
|
||
}
|
||
|
||
/* 输入区域 */
|
||
.auth-input {
|
||
margin-bottom: 48rpx;
|
||
|
||
::v-deep .u-input {
|
||
padding-bottom: 12rpx;
|
||
}
|
||
}
|
||
|
||
/* 提交按钮 */
|
||
.auth-btn {
|
||
width: 100%;
|
||
height: 88rpx;
|
||
line-height: 88rpx;
|
||
background: linear-gradient(135deg, #FF2F31, #FF9379);
|
||
color: #fff;
|
||
font-size: 30rpx;
|
||
font-weight: 500;
|
||
border-radius: 44rpx;
|
||
border: none;
|
||
box-shadow: 0 10rpx 24rpx rgba(41, 121, 255, 0.3);
|
||
}
|
||
|
||
/* 按压效果 */
|
||
.auth-btn:active {
|
||
opacity: 0.85;
|
||
}
|
||
.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>
|