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>
			<!-- <u-divider color="#19be6b" style="margin-bottom:20px;" font-size="28rpx" ><span @click="changeList" v-show="timeOut" >点击刷新</span><span style="margin-left:20px" @click="onHideMethod" v-show="timeOut" >暂停</span><span style="margin-left:20px" v-show="!timeOut" @click="changeList" >自动刷新</span></u-divider> -->		
		</view>

		<!-- 新闻  相亲活动-->
		<view class="news" v-if="newsList.length != 0">

			<view class="news-head">
				<view class="title">
					新闻资讯
				</view>
				<view class="more" @click="toNews">
					更多<u-icon name="arrow-right" color="#999999" size="28"></u-icon>
				</view>
			</view>
			<view class="news-item" v-for="(item,index) in newsList" :key="item.id"
				@click="gotoUrl('pages/news/detalis?id='+item.id)">
				<view class="main">
					<view class="content">
						<view class="text">
							<p class="u-line-2" v-text="item.title"></p>
						</view>
						<view class="time">
							{{item.createTime}}
						</view>
					</view>
					<view class="img">
						<img :src="item.images ? item.images : '/static/img/default_img.png'" alt="">
					</view>
				</view>
			</view>
		</view>

		<view class="activity" v-if="activityList.length != 0">

			<view class="news-head">
				<view class="title">
					相亲活动
				</view>
				<view class="more" @click="toNews">
					更多<u-icon name="arrow-right" color="#999999" size="28"></u-icon>
				</view>
			</view>
			<view class="news-item" v-for="(item,index) in activityList" :key="item.id" 
			@click="gotoUrl('pages/news/activityDetails?id='+item.id)">
				<view class="main">
					<view class="content">
						<view class="text">
							<p class="u-line-2" v-text="item.title"></p>
						</view>
						<view class="time">
							{{item.createTime}}
						</view>
					</view>
					<view class="img">
						<img :src="item.images ? item.images : '/static/img/default_img.png'" alt="">
					</view>
				</view>
			</view>
		</view>
		<view class="bottom">
			<u-divider>已经到底了</u-divider>
		</view>		
 	</view>
</template>

<script>
	import * as Api from '@/apis/index.js'
	import * as newsAPI from '@/apis/news.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: '',
				newsList: [],
				activityList: [],
			}
		},
		// 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: {
			toNews() {
				uni.switchTab({
					url: '/pages/news/index'
				})
			},
			getActivityList() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				newsAPI.activityList({
					pageSize: 2,
					pageIndex: 1
				}).then((res) => {
					uni.hideLoading();

					this.activityList = res.data.data;
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			getNewsList() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				newsAPI.newscontent({
					type: 'TZGG',
					pageSize: 3,
					pageIndex: 1
				}).then((res) => {
					uni.hideLoading()

					this.newsList = res.data.data;
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			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()
			// 	if(this.uuid){
			// 		clearInterval(this.uuid)
			// 	}

			// 	this.uuid='';
			// 	if(!this.uuid){
			// 		this.timeOut=true;
			// 		this.uuid=setInterval(()=>{
			// 			if(this.timeOut){
			// 				this.timingchangeList();
			// 			}
			// 		},10*1500)
			// 	}
			// },
			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()

				}).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
				})

			},
			onHideMethod() {
				this.timeOut = false;
				if (this.uuid) {
					clearInterval(this.uuid)
					this.uuid = '';
				}
			},
			onShowMethod() {
				this.timeOut = true
				if (!this.uuid) {
					this.uuid = setInterval(() => {
						if (this.timeOut) {
							this.timingchangeList();
						}
					}, 10 * 1500)
				}
			}

		},
		onUnload() {
			if (this.uuid) {
				clearInterval(this.uuid)
			}
		},
		onHide() {
			console.log("onHide")
			this.onHideMethod()
		},
		onShow() {
			this.onShowMethod()
		},
		onLoad() {
			var logo = this.carhelp.getConfig().logo
			if (logo) {
				this.homeLogo = logo
 		 
}
		}
,
		onReady() {
			this.getBaseDictionary()
			this.getBannerInfo()
			this.homePage()
			this.getNewsList()
			this.getActivityList()
		}
	}
</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;
			}
		}
	}

	// 新闻
	.news,
	.activity {
		background-color: #fff;
		margin: 20px 16px;

		.news-item {
			margin-bottom: 48rpx;
		}

		.news-head {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.title {
				font-size: 20px;
				color: #101010;
			}

			.more {
				color: #999999;
				font-size: 16px
			}
		}

		.main {
			display: flex;
			justify-content: space-between;
			margin-top: 26rpx;

			.content {
				width: 67.3%;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.text {
					width: 100%;
					color: #101010;
				}

				.time {
					// margin-top: 40rpx;
					font-size: 12px;
					color: #999999;
				}
			}

			.img {
				width: 200rpx;
				height: 150rpx;
				border-radius: 4px;
				overflow: hidden;

				img {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.bottom {
		margin-bottom: 90px;
	}
</style>