NewZkgj/pages/center/consumer/consumerDetail.vue

<template>
	<view class="box">
		<view class="content">
			<view class="content-tips" @click="godetail()">
				<view class="content-first">
					<view class="left">
						<view class="img">
							A
						</view>
						<view class="test">
							李先生
						</view>
					</view>
					<view class="right">
						<view class="point"></view>
						<view class="test">
							定金
						</view>
					</view>
				</view>
				<view class="content-sec">
					<view class="content-sec-lab">
						手机号码：<view class="content-sec-lab1">18777897865</view>
					</view>
					<view class="content-sec-lab">
						客户标签：
						<view class="content-sec-tips">投资</view>
						<view class="content-sec-tips">理财专用</view>
						<view class="content-sec-tips">学区</view>
					</view>
					<view class="content-sec-lab">
						顾问姓名：<view class="content-sec-lab1">齐横三</view>
					</view>
					<view class="content-sec-lab">
						添加时间：<view class="content-sec-lab1">2021-07-20 14:00:30</view>
					</view>
					<view class="content-sec-num">
						<view class="">
							3次到访
						</view>
						<view class="">
							55分/88%
						</view>
					</view>
				</view>
				<view class="content-last">
					<view class="content-last-con">
						这个客户很有意向，约了明天下午5点半看房，继续跟进～
					</view>
				</view>
			</view>
		</view>
		
		<view class="tabchange">
			<view class="tab">
				<view class="tabbox">
					<view :class="{ activecllasscet: activeTotal == 0 }" @click="tabtimetap(0)">接待记录</view>
				</view>
				<view class="tabbox">
					<view :class="{ activecllasscet: activeTotal == 1 }" @click="tabtimetap(1)">跟进记录</view>
				</view>
				<view class="tabbox">
					<view :class="{ activecllasscet: activeTotal == 2 }" @click="tabtimetap(2)">执行率</view>
				</view>
			</view>
			
			<view class="tabactive1" v-if="activeTotal==0">
					<view class="content-tips">
						<view class="content-first">
						<view class="left">
							<view class="img">
								宋
							</view>
							<view class="name">
								宋幸运
							</view>
							<view class="status">
								代接待
							</view>
						</view>
						<view class="right">
							<view class="point">
							</view>
							<view class="">
								优秀案例
							</view>
						</view>
						</view>
						
						<view class="content-sec">
							<view class="left">
								<view class="cus">
									客户：王先生 |
								</view>
								<view class="arriveNum">
									首次到访
								</view>
							</view>
							<view class="right">
								88% | 55分
							</view>
						</view>
						
						<view class="content-last">
							2021-07-20 16:00:30 | 80分钟
						</view>
					</view>
					<view class="content-tips">
						<view class="content-first">
						<view class="left">
							<view class="img">
								宋
							</view>
							<view class="name">
								宋幸运
							</view>
							<view class="status">
								代接待
							</view>
						</view>
						<view class="right">
							<view class="point">
							</view>
							<view class="">
								优秀案例
							</view>
						</view>
						</view>
						
						<view class="content-sec">
							<view class="left">
								<view class="cus">
									客户：王先生 |
								</view>
								<view class="arriveNum">
									首次到访
								</view>
							</view>
							<view class="right">
								88% | 55分
							</view>
						</view>
						
						<view class="content-last">
							2021-07-20 16:00:30 | 80分钟
						</view>
					</view>
			</view>
			<view class="tabactive2" v-if="activeTotal==1">
				<view class="tab2-tips">
					<view class="tab2-first">
						<view class="tab2-first-1">
							<view class="tab2-first-left">
								<view class="img">
									宋
								</view>
								<view class="name">
									宋幸运
								</view>
							</view>
							<view class="tab2-first-right">
								2021-07-20 16:00:30
							</view>
						</view>
						<view class="tab2-first-foot">
							有意向，想要更多优惠
						</view>
					</view>
					<view class="tab2-sec">
						<view class="tab-sec-edit">
							编辑记录
						</view>
					</view>
				</view>
				<view class="tab2-tips">
					<view class="tab2-first">
						<view class="tab2-first-1">
							<view class="tab2-first-left">
								<view class="img">
									宋
								</view>
								<view class="name">
									宋幸运
								</view>
							</view>
							<view class="tab2-first-right">
								2021-07-20 16:00:30
							</view>
						</view>
						<view class="tab2-first-foot">
							有意向，想要更多优惠
						</view>
					</view>
					<view class="tab2-sec">
						<view class="tab-sec-edit">
							编辑记录
						</view>
					</view>
				</view>
			</view>
			<view class="tabactive" v-if="activeTotal==2">
				执行率
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				activeTotal: 0,
			}
		},
		methods:{
			tabtimetap(idx){
				console.log(idx)
				this.activeTotal=idx
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		width: 100%;
		height: 100%;
		background: #F8F8F8;
	}
	.tab{
		height: 88rpx;
		border-bottom: 1px solid #E0E0E0;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		.tabbox {
			flex: 1;
			height: 100%;
			text-align: center;
			line-height: 92rpx;
			color: #666666;
			font-size: 28rpx;
			display: flex;
			justify-content: center;
			
			.activecllasscet {
				border-bottom: 2px solid #2671E2;
				color: #2671E2;
				font-weight: 600;
			}
		}
	}
	.content{
		// height: 1000rpx;/
		 overflow: hidden;
		 border-top: 1px solid #E0E0E0;
		.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;
					}
					.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;
				height: 270rpx;
				position: relative;
				.content-sec-lab{
					margin-top: 30rpx;
					display: flex;
					font-size: 30rpx;
					font-weight: 400;
					color: #666666;
					line-height: 30rpx;
					.content-sec-lab1{
						color: #333333;
					}
					.content-sec-tips{
						max-width:174rpx ;
						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: 24rpx;
						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{
				padding: 30rpx;
				height: 168rpx;
				.content-last-con{
					width: 690rpx;
					height: 108rpx;
					background: #F8F8F8;
					border-radius: 8rpx;
					padding: 14rpx 20rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #333333;
					line-height: 40rpx;
				}
			}
				
		}
	}
	.tabchange{
		// background: #FFFFFF;
		overflow: hidden;
		.tabactive1{
			.content-tips{
				background: #fff;
				padding: 0 30rpx;
				box-sizing: border-box;
				overflow: hidden;
				margin-bottom: 20rpx;
				.content-first{
					margin-top: 19rpx;
					display: flex;
					justify-content: space-between;
					.left{
						display: flex;
						.img{
							width: 52rpx;
							height: 52rpx;
							background: #FFFFFF;
							border: 1px solid #C9C9C9;
							border-radius: 50%;
							text-align: center;
							line-height: 52rpx;
						}
						.name{
							font-weight: 600;
							color: #333333;
							margin-left: 20rpx;
							margin-top: 11rpx;
						}
						.status{
							width: 110rpx;
							height: 42rpx;
							background: #FFF9F5;
							border-radius: 4rpx;
							font-size: 26rpx;
							font-weight: 400;
							color: #EC8D49;
							line-height: 42rpx;
							text-align: center;
							margin-left: 19rpx;
							margin-top: 11rpx;
						}
					}
					.right{
						display: flex;
						margin-top: 11rpx;
						.point{
							width: 12rpx;
							height: 12rpx;
							background: #2B6EFF;
							border-radius: 50%;
							margin-right: 9rpx;
							margin-top: 16rpx;
							
						}
					}
				}
				
				
				.content-sec{
					display: flex;
					justify-content: space-between;
					margin-top: 19rpx;
					.left{
						display: flex;
						.cus{
							font-size: 30rpx;
							font-weight: 400;
							color: #666666;
							line-height: 30rpx;
						}
						.arriveNum{
							font-size: 30rpx;
							font-weight: 400;
							line-height: 30rpx;
							margin-left: 10rpx;
						}
					}
					.right{
						width: 192rpx;
						height: 46rpx;
						background: #F4F8FD;
						border-radius: 6rpx;
						text-align: center;
						line-height: 46rpx;
						font-weight: 400;
						color: #2671E2;
					}
				}
				.content-last{
					margin: 30rpx 0;
					font-size: 30rpx;
					font-weight: 400;
					color: #666666;
					line-height: 30rpx;
				}
					
			}
		}
		
		.tabactive2{
			.tab2-tips{
				background: #fff;
				height: 270rpx;
				overflow: auto;
				margin-bottom: 20rpx;
				.tab2-first{
					// height: 150rpx;
					border-bottom: 1px solid #E0E0E0;
					padding: 0 30rpx;
					margin-top: 19rpx;
					box-sizing: border-box;
					.tab2-first-1{
						display: flex;
						justify-content: space-between;
						// height: 75rpx;
						.tab2-first-left{
							display: flex;
							.img{
								width: 52rpx;
								height: 52rpx;
								background: #FFFFFF;
								border: 1px solid #C9C9C9;
								border-radius: 50%;
								text-align: center;
								line-height: 52rpx;
							}
							.name{
								font-weight: 600;
								color: #333333;
								margin-left: 20rpx;
								margin-top: 11rpx;
							}
						}
						.tab2-first-right{
							font-size: 30rpx;
							font-weight: 400;
							color: #666666;
							margin-top: 11rpx;
						}
					}
					.tab2-first-foot{
						margin-top: 19rpx;
						margin-bottom: 30rpx;
						font-size: 30rpx;
						font-weight: 400;
						color: #666666;
						line-height: 30rpx;
					}
				}
				.tab2-sec{
					height: 120rpx;
					padding: 30rpx;
					float: right;
					.tab-sec-edit{
						width: 156rpx;
						height: 60rpx;
						background: #FFFFFF;
						border-radius: 4px;
						border: 1px solid #2671E2;
						text-align: center;
						line-height: 60rpx;
						font-weight: 400;
						color: #2671E2;
					}
				}
			}
		}
	}
</style>