realty/virgo.wzfrontend/yui_wx/pages/clientDetail/clientDetail.vue

<template>
	<view class="client-detail detail" v-if="detail.id">
		<view class="detail-box">
			<view class="title-box">
				<view class="title">{{detail.name}}</view>
				<view class="date">{{detail.visitingTime}}</view>
				<view class="title-icon">
					<uni-icons type="staff-filled" color="#fff" size="24"></uni-icons>
				</view>
			</view>
			<view class="other">
				<div class="item">
					<div class="label">客户类型</div>
					<div class="value">{{$field.findTypeName('customerType',detail.type)}}</div>
				</div>
				<div class="item">
					<div class="label">联系人</div>
					<div class="value">{{detail.person}}</div>
				</div>
				<div class="item">
					<div class="label">联系电话</div>
					<div class="value">{{detail.phone}}</div>
				</div>

				<div class="item">
					<div class="label">微信号</div>
					<div class="value">{{detail.weChatAccount}}</div>
				</div>
				<div class="item">
					<div class="label">职位</div>
					<div class="value">{{detail.job}}</div>
				</div>
				<div class="item">
					<div class="label">跟进状态</div>
					<div class="value">{{$field.findTypeName('followUpState',detail.followUpState)}}</div>
				</div>
				<div class="item">
					<div class="label">需求区间</div>
					<div class="value">{{detail.demand}}</div>
				</div>
				<div class="item">
					<div class="label">装修需求</div>
					<div class="value">{{detail.decorationRequirements}}</div>
				</div>
				<div class="item">
					<div class="label">客户行业</div>
					<div class="value">{{detail.customerIndustry}}</div>
				</div>
				<div class="item">
					<div class="label">备注</div>
					<div class="value">{{detail.remark}}</div>
				</div>
			</view>
			<view class="state">
				<view class="create">
					<uni-icons class="inherit-icons" type="person-filled" color="#08979c" size="18"></uni-icons>
					<text class="name">{{user.userName}}</text>
				</view>
				<view class="tag">
					<view class="status-tag info" v-if="!detail.status">待邀请</view>
					<view class="status-tag warning" v-if="detail.status == 1">邀请中</view>
					<view class="status-tag success" v-if="detail.status == 2">通过邀请</view>
					<view class="status-tag error" v-if="detail.status == 3">拒绝邀请</view>
				</view>
			</view>
		</view>
		<view class="detail-box">
			<view class="sub-title">
				<uni-icons type="wallet-filled" class="inherit-icons" size="24" color="#08979c"></uni-icons>
				<text class="sub-label">首次来访</text>
			</view>
			<view class="other">
				<div class="item">
					<div class="label">跟进人</div>
					<div class="value">{{detail.followUpPerson}}</div>
				</div>
				<div class="item">
					<div class="label">来访时间</div>
					<div class="value">{{detail.visitingTime}}</div>
				</div>
				<div class="item">
					<div class="label">带看房源</div>
					<div class="value">{{detail.firsTimeRoom}}</div>
				</div>
				<div class="item">
					<div class="label">来访渠道</div>
					<div class="value">{{detail.visitingChannels}}</div>
				</div>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getCustomerDetailById
	} from '@/request/api/my.js'
	export default {
		data() {
			return {
				clientId: '',
				detail: {},
				user: {}
			}
		},
		onLoad(body) {
			if (body.clientId) this.clientId = body.clientId;
			this.init();
			this.user = this.$store.getters.user;
		},
		methods: {
			init() {
				if (!this.clientId) return;
				getCustomerDetailById(this.clientId).then(res => {
					if (res.code === 200) {
						this.detail = res.data;
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.detail {
		padding: 30rpx;

		.detail-box {
			background-color: #ffffff;
			border-radius: 16rpx;
			box-shadow: 0px 1px 12px rgba(3, 3, 3, 0.08);
			padding: 30rpx;
			position: relative;
			margin-bottom: 30rpx;
		}

		.sub-title {
			display: flex;
			align-items: center;
			margin-left: -8rpx;

			.sub-label {
				font-size: 32rpx;
				font-weight: 600;
				margin-left: 14rpx;
			}
		}

		.title-box {
			padding-left: 90rpx;
			position: relative;

			.title-icon {
				width: 70rpx;
				height: 70rpx;
				text-align: center;
				line-height: 70rpx;
				background: $uni-primary;
				border-radius: 70rpx;
				position: absolute;
				left: 0;
				top: 50%;
				margin-top: -35rpx;
			}

			.title {
				font-size: 32rpx;
				font-weight: 600;
			}

			.date {
				font-size: 24rpx;
				color: $uni-secondary-color;
			}
		}

		.other {
			margin-top: 20rpx;

			.item {
				margin-top: 10rpx;
			}

			.label {
				color: $uni-secondary-color;
				font-size: 24rpx;
			}

			.value {
				margin-top: 6rpx;
				font-weight: 400;
			}
		}

		.state {
			margin-top: 20rpx;
			display: flex;
			justify-content: space-between;

			.create {
				height: 48rpx;
				border-radius: 48rpx;
				border: 1px solid $uni-primary;
				display: flex;
				align-items: center;
				color: $uni-primary;
				padding: 0 10rpx;

				.name {
					font-size: 24rpx;
					flex: 1;
					max-width: 150rpx;
					min-width: 70rpx;
					overflow: hidden;
					margin-left: 10rpx;
					line-height: 36rpx;
					padding-right: 10rpx;
				}
			}
		}
	}
</style>