NewZkgj/pages/center/consumer/consumerSearch.vue

<template>
	<view class="box">
		<view style="width: 690rpx;margin: 0 auto;margin-top: 20rpx;">
			<u-search  @search='searchinfo()' :show-action='false' placeholder="请输入" v-model="keyword"></u-search>
		</view>
		<!-- <view @click="searchinfo()">搜索</view> -->
		<view class="content">
			<view class="content-tips" v-for="(item,index) in recordList" :key='index' @click="gotoDetail(item.id)">
				<view class="content-first">
					<view class="left">
						<view v-if="item.level.length==0"></view>
						<view class="img" v-else-if="item.level==1">A</view>
						<view class="img" v-else-if="item.level==2">B</view>
						<view class="img" v-else-if="item.level==3">C</view>
						<view class="img" v-else-if="item.level==4">D</view>
						
						<view class="test">{{item.name}}</view>
					</view>
				</view>
				<view class="content-sec">
					<view class="content-sec-lab">
						手机号码：<view class="content-sec-lab1">{{item.phone || '--'}}</view>
					</view>
					<view class="content-sec-lab">
						客户标签：
						<text v-if="item.demand.cusSemanticWordsList.length==0">暂无</text>
						<view v-else>
							<view v-if="ind<3" class="content-sec-tips" v-for="(che,ind) in item.demand.cusSemanticWordsList" :key='ind'>{{che.name}}</view>
						</view>
					</view>
					<view class="content-sec-lab">
						顾问姓名：<view class="content-sec-lab1">{{item.agentName}}</view>
					</view>
					<view class="content-sec-lab">
						添加时间：<view class="content-sec-lab1">{{item.createTime}}</view>
					</view>
					<view class="content-sec-num">
						<view class="">{{item.visitRecord || '--'}}次到访</view>
						<view class="">{{item.fraction || '0'}}% | {{item.mm || '0'}}<text style="font-size: 24rpx;">min</text></view>
					</view>
				</view>
				<view style="width: 100%;height: 20rpx;background: #F8F8F8;"></view>
			</view>
		</view>	
	</view>
</template>

<script>
	export default{
		data(){
			return{
				keyword:'',
				stageList:['未知','到访','意向','定金','成交'],
				recordList:[],	
				nextPage:1,
				totalRecord:'',
				buildingID:'',
			}
		},
		onShow() {
			this.buildingID = uni.getStorageSync('buildingID').id;
			this.nextPage=1;
			this.recordList=[];
		},
		onReachBottom() {
			if(this.totalRecord==this.nextPage){
				uni.showToast({
					icon:'none',
				    title: '到底了',
				    duration: 2000
				});
				return
			}else{
				this.nextPage+=1;
				this.getMyCustom();
			}
		},
		methods:{
			// 客户详情
			gotoDetail(id) {
				uni.navigateTo({
					url: `/pages/center/consumer/consumerDetail?id=${id}`
				})
			},
			searchinfo(){
				this.nextPage=1;
				this.recordList=[];
				this.getMyCustom();
			},
			getMyCustom(){
				var parames = {
					pageNum: this.nextPage,
					pageSize: 10,
					query: {
						projectId:this.buildingID,
						nameOrPhone:this.keyword
					}
				};
				this.$u.post("/customer/customerManagement", parames).then(data => {
					var list = data.results || [];
					
					list.forEach(item=>{
						if(item.demand.cusSemanticWordsList!=null){
							item.demand.cusSemanticWordsList.forEach(che=>{
								if(che.isInterval==0){
								 che.name=che.name+che.unit+'-'+che.endName+che.unit;
								}
							})
						}   
					})
					this.recordList = [...this.recordList, ...list];
					this.totalRecord=data.totalPage;
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		width: 100%;
		height: 100%;
		background: #FFFFFF;
	}
	.content{
		 overflow: hidden;
		 margin-top: 10rpxs;
		.content-tips{
			background: #fff;
			// box-sizing: border-box;
			// margin-bottom: 20rpx;
			overflow: hidden;
			.content-first{
				padding: 19rpx 30rpx;
				display: flex;
				justify-content: space-between;
				box-sizing: border-box;
				// border-top: 1px solid #E0E0E0;
				font-weight: 400;
				color: #292929;
				height: 90rpx;
				font-size: 30rpx;
				line-height: 30rpx;
				.left{
					display: flex;
					.img{
						// margin-top: 19rpx;
						width: 52rpx;
						height: 52rpx;
						border: 1px solid #E0E0E0;
						border-radius: 50%;
						text-align: center;
						line-height: 50rpx;
						margin-right: 20rpx;
					}
					.test{
						margin-top: 11rpx;
						// margin-left: 20rpx;
						font-weight: 500;
						color: #333333;
					}
				}
				.right{
					display: flex;
					.point{
						width: 12rpx;
						height: 12rpx;
						background: #2B6EFF;
						border-radius: 50%;
						margin-right: 9rpx;
						margin-top: 20rpx;
					}
					.test{
						margin-top: 11rpx;
					}
				}
			}
			.content-sec{
				border-top: 1px solid #E0E0E0;
				padding: 0 30rpx;
				padding-bottom: 30rpx;
				// height: 270rpx;
				position: relative;
				.content-sec-lab{
					margin-top: 30rpx;
					display: flex;
					font-size: 30rpx;
					font-weight: 400;
					color: #666666;
					line-height: 46rpx;
					.content-sec-lab1{
						color: #333333;
					}
					.content-sec-tips{
						max-width:160rpx ;
						height: 46rpx;
						background: #F2F2F2;
						border-radius: 6rpx;
						text-align: center;
						line-height: 26rpx;
						overflow: hidden;
						text-overflow:ellipsis;
						white-space: nowrap;
						font-size: 26rpx;
						font-weight: 400;
						color: #333333;
						margin-right: 20rpx;
						box-sizing: border-box;
						padding: 10rpx 24rpx;
					}
				}
				.content-sec-num{
					position: absolute;
					width: 190rpx;
					height: 90rpx;
					background: #F4F8FD;
					border-radius: 12rpx;
					font-weight: 400;
					color: #2671E2;
					line-height: 45rpx;
					bottom: 30rpx;
					right: 30rpx;
					text-align: center;
				}
			}
			.content-last{
				display: flex;
				border-top: 1px solid #E0E0E0;
				// padding: 0 30rpx;
				height: 78rpx;
				.content-last-tab{
					width: 33.4%;
					text-align: center;
					font-size: 30rpx;
					font-weight: 400;
					color: #333333;
					line-height: 78rpx;
					border-right: 1px solid #E0E0E0;
				}
			}
				
		}
	}
</style>