RentWeAppFront/pages/index/index.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>