xiaochengxu/components/KeHu/KeHu.vue

<template name="KeHu">
	<view class="main_background">
		<view class="top">
			<image class="top_banner" src="../../static/images/kehu/bg_2.png">
				<view class="button_add_new" @click="onClickAddNew">
					<text class="button_text">新增 +</text>
				</view>
			</image>
		</view>
		<u-gap height="40rpx"></u-gap>
		<u-tabs
			:list="tabs"
			:scrollable="false"
			lineColor="#D49B4B"
			:activeStyle="{
				color:'#333333',
				fontSize:'32rpx',
				fontWeight:'bold',
				lineHeight:'45rpx',
				transform: 'scale(1.05)'
			}" 
			:inactiveStyle="{
				color:'#999999',
				fontSize:'30rpx',
				lineHeight:'42rpx',
				fontWeight:'400',
				trasform: 'scale(1)'
			}"
			:current="currentTabIndex"
			@click="onChangeTabIndex"
		>
		</u-tabs>
		<u-gap height="24rpx"/>
		<u-line color="#E2E2E2" length="702rpx" customStyle="position: relative;left: 24rpx;border: 1px solid #E2E2E2;" :hairline="true" margin="0 0 0 0"></u-line>
		<view
			class="tab_title_box"
		>
			<text class="tab_title_text"
				v-for="(item,index) in infoTitles" :key="index"
			>{{item}}</text>
		</view>
		<u-line color="#E2E2E2" length="702rpx" customStyle="position: relative;left: 24rpx;border: 1px solid #E2E2E2;" :hairline="true" margin="0 0 0 0"></u-line>
		<u-list 
			height="900rpx" 
			:enableFlex="true" 
			:key="currentTabIndex" 
			preLoadScreen=10
			@scrolltolower='listScrollToBottom'
			
		>
			<!--customStyle="background-color: #0081FF;"-->
			<u-list-item
				v-for="(item,index) in getCustomerToShow()" :key="index"
			>
				<view class="inner_tab_box_border">
					<view
						class="inner_tab_box"
					>
						<text class="inner_text_normal">{{item.name}}</text>
						<text class="inner_text_normal">{{item.demand}}</text>
						<text class="inner_text_normal">{{item.industry}}</text>
						<text class="inner_text_normal">{{item.city}}</text>
						<text v-if="item.status > 2" class="inner_text_normal">{{getStatusName(item.status).str}}</text>
						<text v-else-if="item.status == 2" class="inner_text_green">{{getStatusName(item.status).str}}</text>
						<text v-else-if="item.status == 1" class="inner_text_orange">{{getStatusName(item.status).str}}</text>
					</view>
					<u-line color="#E2E2E2" length="702rpx" customStyle="position: relative;border: 1px solid #E2E2E2;" :hairline="true" margin="0 0 0 0"></u-line>
				</view>
				
			</u-list-item>
		</u-list>
		<u-gap height="80rpx"/>
	</view>
</template>

<script>
	import config from "@/components/KeHu/KeHu.cofig.js"
	let tabs 			= config.tabs;
	let currentTabIndex = 0;
	let infoTitles		= config.infoTitles;
	let statusDefines 	= config.statusDefines;
	///客户端数据管理器
	var customermanager = getApp().globalData.customermanager;
	export default {
		name:"KeHu",
		created(){
			this.onChangeTabIndex({index:0});
			var Define 	= getApp().globalData.Define;
			var key		= Define.FireKeys.AddNewCustomerSuccess;
			this.$fire.on(key,result=>{
				///把所有数据清理一遍
				this.customermanager.allCustom.clear();
				this.customermanager.waitCustom.clear();
				//重新获取数据
				this.customermanager.allCustom.getNextPage();
				this.customermanager.waitCustom.getNextPage();
			});
		},
		destroyed(){
			var key = getApp().globalData.Define.FireKeys.AddNewCustomerSuccess;
			this.$fire.off(key);
		},
		data() {
			return {
				customermanager,
				tabs,
				currentTabIndex,
				infoTitles,
				statusDefines,
			};
		},
		methods:{
			///获取列表的key
			getListKey(){
				var index = this.currentTabIndex;
				return index +'_'+ this.specialKey;
			},
			///点击了新增按钮
			onClickAddNew(){
				//console.log("你要新增吗？");
				uni.navigateTo({
					url:"/pages/AddNewCustomer/AddNewCustomer",
				})
			},
			/**
			 * 根据当前选中的标签，获取需要显示的客户的数据
			 */
			getCustomerToShow(){
				var index = this.currentTabIndex;
				//根据选择的tab，设置需要显示什么内容
				var group = this.customermanager.getTargetGroupByIndex(index);
				return group.customerinfo;
			},
			onChangeTabIndex(item){
				var index 				= item.index;
				this.currentTabIndex 	= index;
				var group				= this.customermanager.getTargetGroupByIndex(index);
				if(group.allCount == 0){
					///没有数据，就那一次
					group.getNextPage();
				}
			},
			getStatusName(index){
				let len = this.statusDefines.length;
				if(index >= len || index < 0){
					return {str:"错误",color:"#ff0000"};
				}
				return this.statusDefines[index];
			},

			///当列表滑动到最下方时触发
			listScrollToBottom(){
				console.log("end of the custom list");
				var group = this.customermanager.getTargetGroupByIndex(this.currentTabIndex);
				group.getNextPage();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main_background{
			opacity: 1;
			overflow: scroll;
			touch-action: auto;
			flex-direction: column;
			display: flex;
			margin: 0 auto;
			left: 0;
			top: 0;
			bottom: 0;
			right: 0;
	}
	
	.top{
		width: 750rpx;
		height: 295rpx;
		position: relative;
	}
	.top_banner{
		position: relative;
		left: 0;
		top: 0;
		width: 750rpx;
		height: 295rpx;
	}
	.button_add_new{
		width: 134rpx;
		height: 54rpx;
		background: #FFFFFF;
		border: 1rpx solid #D49B4B;
		opacity: 1;
		border-radius: 28rpx;
		position: absolute;
		top: 266rpx;
		right: 24rpx;
		display: flex;
		justify-content: center;
		text-align: center;
	}
	.button_text{
		height: 40rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #D49B4B;
		opacity: 1;
	}
	
	.tab_title_box{
		width: 702rpx;
		height: 100rpx;
		//background-color: #1CBBB4;
		position: relative;
		left: 24rpx;
		right: 24rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		flex-wrap: nowrap;
	}
	
	
	.tab_title_text{
		width: 168rpx;
		//height: 100rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
		opacity: 1;
		text-align: center;
		text-overflow: ellipsis;
		//white-space: nowrap;
		overflow: hidden;
	}
	
	///列表里面一行的外框，因为需要加一个下划线
	.inner_tab_box_border{
		width: 702rpx;
		height: 100rpx;
		position: relative;
		left: 24rpx;
		right: 24rpx;
		//background-color: #366092;
	}
	
	.inner_tab_box{
		width: 702rpx;
		height: 100rpx;
		//background-color: #1CBBB4;
		position: relative;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		flex-wrap: nowrap;
	}
	
	.inner_text_normal{
		width: 168rpx;
		max-height: 100rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #333333;
		opacity: 1;
		text-align: center;
		///为了限制当前只显示两行数据，显示多了会导致看到的东西有点奇怪
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	///跟进中，绿色
	.inner_text_green{
		width: 168rpx;
		max-height: 100rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #41CF41;
		opacity: 1;
		text-align: center;
		///为了限制当前只显示两行数据，显示多了会导致看到的东西有点奇怪
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	///橘色
	.inner_text_orange{
		width: 168rpx;
		max-height: 100rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #D49B4B;
		opacity: 1;
		text-align: center;
		///为了限制当前只显示两行数据，显示多了会导致看到的东西有点奇怪
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	
	.list{
		width: 750rpx;
		background-color: #39B54A;
		//top: 500rpx;
	}
</style>