jp-xqjy/pages/index/index.vue

<template>
	<view>
		<u-select v-model="memberQyshow" 
			@confirm="confirm" :default-value="defaultvalue"
		   :list="memberQyColumns"></u-select>
		
		<u-navbar :is-back="false" :border-bottom="false" height="84" >
		
			<view class="home-head" style="width: 100%;">
				<view class="" >
					<img class="homeLogo" :src="homeLogo" alt="">
				
				</view>
				<view>
					<view class="homeTab" style="
							float: left;
						">
						<u-tabs :list="tabList" :current="current" @change="change" :show-bar="false" active-color="#333" inactive-color="#c4c0c0"></u-tabs>
					
					</view>
					<view class="homeAdd" style="
							float: right;
							    height: 34px;
							    line-height: 34px;
						" >
						<u-icon custom-prefix="custom-icon" name="map-pin-2-fill"></u-icon>
						<span  @click="memberQyshowBtn">{{memberQyObj.name}}</span>
					</view>
				</view>
				
			
			</view>
		</u-navbar>
		
		<view class="homeWrap">
			<u-swiper  v-if="wrapList.length" :list="wrapList" @click="clickBanner" :img-mode="'aspectFit'" :name="'picUrl'" height="294" border-radius="24"></u-swiper>
		</view>
		<view class="homeUser">
			<view class="homeUser-item" 
			@click="gotoUrl('pages/friend/personal?id='+item.id)"
			v-for="(item ,index) in list" :key="item.id" >
				<view class="homeUser-add">
					<u-icon custom-prefix="custom-icon" name="map-pin-2-fill"></u-icon>
					<span>{{item.orgAreaName}}</span>
				</view>
				<view class="homeUser-text">
					<view class="homeUser-name">
						<span>{{showName(item.realName)}}</span>
						<u-icon custom-prefix="custom-icon" :name="(item.gender?'women-line':'men-line')" :color="item.gender?'#FF695B':'#1677FF'"></u-icon>
					</view>
					<view class="homeUser-info">
						{{item.age}}岁 {{item.height?'· '+item.height+'cm':''}} {{item.weight?'· '+item.weight+'kg':''}}
					</view>
				</view>
				<u-image class="homeUser-img" :src="(item.faceImage?item.faceImage:'./static/img/head.png')+'?x-oss-process=image/resize,m_fill,w_256,h_256'" height="330" mode="aspectFill"></u-image>
			</view>
			
		</view>
		<u-divider color="#19be6b" style="margin-bottom:20px;" font-size="28rpx" @click="changeList">点击换一批</u-divider>
		
 	</view>
</template>

<script>
	import * as Api from '@/apis/index.js'
	import * as Api_common from '@/apis/common.js'
	var homeLogo=require('@/static/img/homeLogo.png')
	
	export default {
		data() {
			return {
				homeLogo:homeLogo,
 				memberQyshow:false,
				memberQy:0,
				memberQyColumns:[],
				listQy:[],
				list:[],
				pageIndex: 1,
				recordsTotal:0,
				tabList: [{
					name: '最新'
				}, {
					name: '最热'
				}],
				current: 0,
				wrapList: [
				],
				timeOut: false,
				totalPage: 1,
				uuid:'',
			}
		},
		// onReachBottom() {
		// 	if (this.list.length < this.recordsTotal) {
				
		// 		this.myLoadmore();
		// 	}
		// },
		computed:{
		 defaultvalue(){
		 	for(var i in this.listQy){
		 			
		 		if(this.listQy[i].value==this.memberQy){
		 			
		 			return [i]
		 		}
		 	}
		 	return [0]
		 },
			memberQyObj(){
				for(var i in this.listQy){
						
					if(this.listQy[i].value==this.memberQy){
					
						return this.listQy[i]
					}
				}
				return {
					id: 0,
					name:"荆州市"
				}
			}
		},
		methods: {
			memberQyshowBtn(){			
				this.memberQyshow  = true;		
			},
			// 回调参数为包含columnIndex、value、values
			confirm(e) {
				this.memberQy=e[0].value;
				console.log(this.memberQy)
				// var info= this.carhelp.getPersonInfo();
				
				// if(info){
				// this.carhelp.set("index-defaultvalue-memberQy",this.memberQy);
			 //  }
				this.memberQyshow = false;
				this.list = [];
				this.homePage();
			},
			changeList() {
				this.list = [];
				this.pageIndex += 1;
				if(this.pageIndex == this.totalPage+1) {
					this.pageIndex = 1;
				}
				this.homePage()
				
				clearInterval(this.uuid)
				this.uuid='';
				if(!this.uuid){
					this.uuid=setInterval(()=>{
						if(this.timeOut){
							this.timingchangeList();
						}
					},10*1000)
				}
			},
			timingchangeList() {
				this.list = [];
				this.pageIndex += 1;
				if(this.pageIndex == this.totalPage+1) {
					this.pageIndex = 1;
				}
				this.homePage()
			},
			change(index) {
				this.current = index;
				this.pageIndex= 1;
				this.list = [];
				this.homePage()
			},
			getBaseDictionary(){
				this.memberQyColumns=[];
				var indexdefaultvaluememberQy=false;// this.carhelp.get("index-defaultvalue-memberQy");
				 var info= this.carhelp.getPersonInfoPlus();
				
				if(info){
					//this.memberQy=info.memberQy
					this.listQy = info.qyList;
									
					for(var i in this.listQy){
							
						this.memberQyColumns.push({
								label: this.listQy[i].name,
								value: this.listQy[i].value
						})
					}
					// if(indexdefaultvaluememberQy){
					// 	this.memberQy=indexdefaultvaluememberQy;
					// }
				}else{
					Api.getBaseDictionary({
						
					}).then((res) => {
						this.listQy = res.data.qyList;
					
						for(var i in this.listQy){
								
							this.memberQyColumns.push({
									label: this.listQy[i].name,
									value: this.listQy[i].value
								})
						}
						
					}).catch(error => {
							uni.showToast({
							
								title: error,icon: "none"
							})
					})
				}
				
				
			},
			homePage(){
				//var indexdefaultvaluememberQy=false// this.carhelp.get("index-defaultvalue-memberQy");
				// var info= this.carhelp.getPersonInfoPlus();
				
				// if(info){
				// 	this.memberQy=info.memberQy
				// 	if(indexdefaultvaluememberQy){
				// 		this.memberQy=indexdefaultvaluememberQy;
				// 	}
				// }
						
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				var memberId=undefined;
				if(this.carhelp.getPersonInfo()){
					memberId=this.carhelp.getPersonInfo().id;
				}
				Api.homePage({
					pageSize:8,
					pageIndex:this.pageIndex,
					type:this.current,
					qy: this.memberQy,
					memberId:memberId
				}).then((res) => {
					if(this.pageIndex==1){
						this.list=[]
					}
					this.list = [
							...this.list,
							...res.data.data
						];
						this.recordsTotal = res.data.recordsTotal
						this.totalPage = res.data.totalPage
						uni.hideLoading()
						this.getBaseDictionary()
					}).catch(error => {
						uni.showToast({
						
							title: error,icon: "none"
						})
				})
			},getBannerInfo(){
			
				Api_common.getBannerInfo("HOMEPAGE").then((res) => {
					this.wrapList =res.data;
					
					}).catch(error => {
						uni.showToast({
						
							title: error,icon: "none"
						})
				})
			},clickBanner(index){
				var obj= this.wrapList[index]
				uni.navigateTo({
					url:obj.linkUrl
				})
				
			}
			
		},
		onUnload() {
			if(this.uuid){
				clearInterval(this.uuid)
			}
		},
		onHide() {
			this.timeOut = false;
			if(this.uuid){
				clearInterval(this.uuid)	
				this.uuid='';
			}
		},
		onShow() {
			this.timeOut=true
			if(!this.uuid){
				this.uuid=setInterval(()=>{
					if(this.timeOut){
						this.timingchangeList();
					}
				},10*1000)
			}
		},
		onLoad() {
			 var  logo=this.carhelp.getConfig().logo
			 if(logo){
				 this.homeLogo=logo
 			 }
		},
		onReady() {
			
			this.getBannerInfo()
			this.homePage()
		}
	}
</script>
<style>
	/deep/.u-slot-content{
		flex-direction: column;
		align-items: flex-start;
	}	
</style>
<style lang="scss" scoped>
	
	.homeLogo{
		margin-left: 15px;
		height: 28px;
		width: 148px;
	}
	.home-head{
		padding-right: 15px;  
		background-color: #fff;
		z-index: 99;
		.homeAdd{
			// position: absolute;
			// right: -55px;
			// top:45px;
			color: #FF5E5E;
			span{
				margin-left: 3px;
			}
		}
	}
	.homeWrap{
		padding:0 15px;
	}
	.homeUser{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		padding: 15px;
		.homeUser-item{
			width: 48%;
			height: 165px;
			margin-bottom: 15px;
			position: relative;
			color: #fff;
			border-radius: 12px;
			overflow: hidden;
			.homeUser-add{
				position: absolute;
				z-index: 9;
				right: 10px;
				top: 10px;
				background: rgba(0,0,0,0.5);
				padding:2px 5px;
				border-radius: 12px;
				span{
					margin-left: 3px;
					font-size: 14px;
				}
			}
			.homeUser-text{
				position: absolute;
				z-index: 9;
				left:0px ;
				bottom: 0px;
				right: 0;
				padding: 10px;
				background: linear-gradient( 180deg,rgba(0,0,0,0),rgba(0,0,0,0.5));
			}
			.homeUser-name{
				display: flex;
				align-items: center;
				span{
					margin-right: 3px;
				}
			}
			.homeUser-info{
				margin-top: 3px;
			}
			.homeUser-img{
				position: relative;
				z-index: 0;
			}
		}
	}
</style>