kaifabu/RentWeAppFront
2
0
Fork 0
mirror of http://36.133.248.69:3088/admin/RentWeAppFront.git synced 2026-03-07 17:32:25 +08:00
Code Issues Packages Projects Releases Wiki Activity

调整ui

Browse Source
This commit is contained in:
RuicyWu
2025-12-25 08:26:09 +08:00
parent ab5c01bf5c
commit 964e4f9c33
72 changed files with 2474 additions and 1065 deletions
Download Patch File Download Diff File Expand all files Collapse all files

618
pages/index/index.vue
View File

@@ -1,120 +1,134 @@
<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 class="index">
<image src="/static/index/index_bg.png" mode="aspectFill" class="bg"></image>
<!-- 搜索栏 -->
<view class="index-title">
启辰资产
</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 class="content-wrapper">
<view class="search-wrapper">
<search-bar
:city="vuex_city==''?'选择':vuex_city"
placeholder="你想住在哪儿"
@chooseCity="location"
@search="search"
/>
</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 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 config from "@/common/config.js" // 全局配置文件
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,
@@ -131,56 +145,21 @@
title: '身无彩凤双飞翼，心有灵犀一点通'
},
],
noticeList: ['伍家岗招租'],
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)"}
{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/icon/预约看房.png",url:"pages/reserve/reserveRecords"},
{name:"合同签约",src:"/static/icon/合同签约.png",url:"pages/center/contract"},
{name:"退租申请",src:"/static/icon/退租申请.png",url:"pages/form/leaseCancel"}
{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: [
{
"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')
}
@@ -192,11 +171,15 @@
this.findHouseList();
this.getNoticecList();
// 流量统计
this.appSysFlowInfo();
// this.appSysFlowInfo();
uni.$on('findIndexHouseList', (obj) => {
// 获取数据
this.findHouseList(1);
})
},
onShow(){
this.needFillAuthInfo();
},
onUnload() {
// 移除监听事件
@@ -217,6 +200,21 @@
// 关闭刷新
uni.stopPullDownRefresh();
},
mounted(){
},
computed: {
authLabel() {
return this.loginType === 'person'
? '身份证号'
: '企业社会信用代码'
},
authPlaceholder() {
return this.loginType === 'person'
? '请输入身份证号'
: '请输入企业社会信用代码'
}
},
methods: {
checkCity(){
// 检查是否已选择城市，如果未选择，跳转到选择城市页面
@@ -228,6 +226,18 @@
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',
@@ -250,8 +260,8 @@
this.flowList = []
this.$refs.uWaterfall.clear();
}
let url = "/api/houseApi/findHouseRoomList";
this.$u.get(url, {
let url = "/assets/findAssetList";
this.$u.post(url, {
state:1,
villageCity:uni.getStorageSync('lifeData').vuex_city,
pageNum: this.pageNum,
@@ -259,45 +269,26 @@
orderByColumn: 'update_time,create_time',
isAsc: 'desc'
}).then(result => {
const data = result.rows;
const data = result.data.result;
if(this.pageNum>1 && data.length < this.pageSize){
return this.loadStatus = 'nomore';
// 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 = ''
}
// 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');
@@ -347,18 +338,35 @@
});
},
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)
// })
// });
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({
@@ -374,37 +382,103 @@
}
})
},
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{
margin-top: 20rpx;
.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;
}
.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;
}
.noticeStyle{
display: flex;
margin-top: 22rpx;
height: 86rpx;
background-color: #FFFFFF;
border-radius: 10rpx;
}
/* 下划线 */
.underline {
margin-top: 5rpx;
@@ -415,45 +489,53 @@
}
.rowClass{
border-radius: 8px;
background-color: rgb(255, 255, 255);
margin-top: 10rpx;
margin-top: 20rpx;
}
.rowBgColor{
background-color: rgb(248, 248, 248);
}
.leftOffSetRow{
margin-left: 20%;
}
.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-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;
color: $u-main-color;
font-weight: bold;
padding-top: 5rpx;
padding-left: 10rpx;
font-size: 28rpx;
font-weight: 600;
margin-top: 14rpx;
padding: 0 10rpx;
}
.item-price {
@@ -461,21 +543,69 @@
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;
.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;