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">
				<view class="" >
					<img class="homeLogo" src="/static/img/homeLogo.png" alt="">
				
				</view>
				<view class="homeTab">
					<u-tabs :list="tabList" :current="current" @change="change" :show-bar="false" active-color="#333" inactive-color="#c4c0c0"></u-tabs>
				</view>
				<view class="homeAdd" >
					<u-icon custom-prefix="custom-icon" name="map-pin-2-fill"></u-icon>
					<span  @click="memberQyshowBtn">{{memberQyObj.name}}</span>
				</view>
			</view>
		</u-navbar>
		
		<view class="homeWrap">
			<u-swiper :list="wrapList" @click="clickBanner" :img-mode="'aspectFit'" :name="'picUrl'" height="300" 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}}cm {{item.weight?'· '+item.weight+'kg':''}}
					</view>
				</view>
				<u-image class="homeUser-img" :src="item.faceImage+'?x-oss-process=image/resize,m_fill,w_256,h_256'" height="330" mode="aspectFill"></u-image>
			</view>
			
		</view>
		<u-divider color="#B6BDC3"  v-if="list.length ==recordsTotal" style="margin-top:20px;">已经到底了</u-divider>
		
 	</view>
</template>

<script>
	import * as Api from '@/apis/index.js'
	import * as Api_common from '@/apis/common.js'
	
	export default {
		data() {
			return {
 				memberQyshow:false,
				memberQy:1,
				memberQyColumns:[],
				listQy:[],
				list:[],
				pageIndex: 1,
				recordsTotal:0,
				tabList: [{
					name: '最新'
				}, {
					name: '最热'
				}],
				current: 0,
				wrapList: [
				],
			}
		},
		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;
			  this.carhelp.set("index-defaultvalue-memberQy",this.memberQy);
				this.memberQyshow = false;
				this.list = [];
				this.homePage();
			},
			myLoadmore() {
					
				this.pageIndex += 1;
				this.homePage()
			},
			change(index) {
				this.current = index;
				this.pageIndex= 1;
				this.list = [];
				this.homePage()
			},
			getBaseDictionary(){
				this.memberQyColumns=[];
				var indexdefaultvaluememberQy= 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
						})
					}
				}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"
							})
					})
				}
				if(indexdefaultvaluememberQy){
					this.memberQy=indexdefaultvaluememberQy;
				}
				
			},
			homePage(){
				var indexdefaultvaluememberQy= 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
						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]
				
			}
			
		},
		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>