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="980rpx" :enableFlex="true">
			<u-list-item
				v-for="(item,index) in datasOfShowing" :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.needs}}</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 == 1" class="inner_text_green">{{getStatusName(item.status).str}}</text>
						<text v-else-if="item.status == 0" 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 kehus = config.kehus;
	let currentTabIndex = 0;
	let datasOfShowing = kehus;
	let infoTitles	= config.infoTitles;
	let statusDefines = config.statusDefines;
	export default {
		name:"KeHu",
		data() {
			return {
				kehus,
				tabs,
				currentTabIndex,
				datasOfShowing,
				infoTitles,
				statusDefines,
			};
		},
		methods:{
			onClickAddNew(){
				//console.log("你要新增吗？");
				uni.navigateTo({
					url:"/pages/AddNewCustomer/AddNewCustomer",
				})
			},
			onChangeTabIndex(item){
				var index = item.index;
				this.currentTabIndex = index;
				//根据选择的tab，设置需要显示什么内容
				if(index == 0){
					//显示所有的客户
					this.datasOfShowing = this.kehus;
					return;
				}
				if(index == 1){
					//获取已经成交的
					this.datasOfShowing = this.getCustomerByStatus(2);
					return;
				}
				if(index == 2){
					//跟进中
					this.datasOfShowing = this.getCustomerByStatus(1);
					return;
				}
				if(index == 3){
					this.datasOfShowing = this.getCustomerByStatus(0);
					return;
				}
			},
			getStatusName(index){
				let len = this.statusDefines.length;
				if(index >= len || index < 0){
					return {str:"错误",color:"#ff0000"};
				}
				return this.statusDefines[index];
			},
			///根据传递过来的状态，返回所有当前状态的用户，当前只是测试方法，因为客户可能会非常的多，需要找服务器要下一页数据
			getCustomerByStatus(status){
				var result = [];
				for(var i = 0; i<this.kehus.length; i++){
					let info = this.kehus[i];
					if(info.status == status){
						result.push(info);
					}
				}
				return result;
			}
			
		}
	}
</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>