mdapp/pages/agent/recommend/detail.vue

<template>
	<view class="page u-skeleton">
		<!-- 客户信息 -->
		<view class="customer-info u-skeleton-fillet box-shadow">
			<view class="left">
				<view class="customer">
					<view class="relname u-skeleton-rect">
						{{ detail.name }}
						<u-icon
							class="u-m-l-10"
							:name="detail.sex == 'male' ? 'man' : 'woman'"
							size="24"
							:color="detail.sex == 'male' ? '#2080f0' : '#f85f69'"
						></u-icon>
					</view>
					<view class="mobile u-skeleton-rect">{{ detail.phone }}</view>
				</view>
			</view>
			<view class="right"><u-icon name="phone" size="32" @click="dial(detail.phone)"></u-icon></view>
		</view>
		<!-- 项目信息 -->
		<view class="property-info u-skeleton-fillet box-shadow">
			<view class="name u-skeleton-rect">{{ detail.estate_name }}</view>
			<u-line margin="10rpx"></u-line>
			<!-- <view class="saler u-skeleton-rect" v-if="detail.salerInfo !== undefined">
				当前置业顾问：{{ detail.salerInfo.name }}-{{ detail.salerInfo.job }}（{{ detail.salerInfo.mobile }}）
			</view> -->
			<view v-if="detail.current_step <= 2" class="date u-skeleton-rect">
				保护期截止：保护期未生效 }}
			</view>
			<view v-else class="date u-skeleton-rect">保护期：已认筹客户无法被其他经纪人二次报备</view>
		</view>
		<!-- 当前进度 -->
		<view class="buystep-info box-shadow u-skeleton-fillet"><u-steps :list="buystepList" :current="detail.current_step" active-color="#2080f0"></u-steps></view>
		<!-- 当前进度 -->
		<view class="buystep-info u-p-32 box-shadow u-skeleton-fillet">
			<view class="name">进度流水</view>
			<u-empty v-if="stepsLogList.length == 0" mode="list" text="暂无流水记录"></u-empty>
			<u-time-line>
				<u-time-line-item v-for="(item, index) in stepsLogList" :key="index">
					<template v-slot:node>
						<view class="u-node"><u-icon name="checkmark-circle" size="28" color="#2080f0"></u-icon></view>
					</template>
					<!-- 此处没有自定义左边的内容，会默认显示一个点 -->
					<template v-slot:content>
						<view>
							<view class="u-order-title">{{ item.type == 'step' ? '新的进展：' : item.type == 'verify' ? '报备审核：' : '争议判客：' }}</view>
							<view class="u-order-desc">{{ item.verify_remark !== null ? item.verify_remark : '' }}</view>
							<view class="u-order-time">{{ item._add_time | date('yyyy-mm-dd hh:MM:ss') }}</view>
						</view>
					</template>
				</u-time-line-item>
			</u-time-line>
		</view>

		<!--引用组件-->
		<u-skeleton :loading="skeletonLoading" :animation="true" bgColor="#FFF"></u-skeleton>
	</view>
</template>
<script>
var that;
export default {
	data() {
		return {
			skeletonLoading: true,
			detail: {
			}, // 客户详情
			currentStep: 0,
			buystepList: [
				{
					name: '审核'
				},
				{
					name: '报备成功'
				},
				{
					name: '到访'
				},
				{
					name: '认筹'
				},
				{
					name: '转签'
				},
				{
					name: '结佣'
				}
			],
			stepsLogList: [] // 进展
		};
	},
	onLoad(params) {
		uni.api.estate.apireportdetail({id:params.id}).then(res =>{
			this.detail = res || {}
			this.skeletonLoading = false
		})
		// if (!xxxxx.vuex.get('$app.systemConfig.use_skeleton')) {
		// 	that.skeletonLoading = false;
		// }
		// if (params.id !== undefined) {
		// 	vk.callFunction({
		// 		url: 'client/agent/kh/getRecommendLogInfo',
		// 		title: '请求中...',
		// 		data: {
		// 			_id: params.id,
		// 			agent_id: vk.vuex.get('$user.agentInfo._id')
		// 		}
		// 	}).then(res => {
		// 		that.detail = res.info;
		// 		// detail.current_step = res.info.status;
		// 		that.stepsLogList = res.info.stepsLogList;
		// 		that.skeletonLoading = false;
		// 	});
		// } else {
		// 	vk.toast('缺少必要参数');
		// 	setTimeout(() => {
		// 		vk.navigateBack();
		// 	}, 1500);
		// }
	},
	methods: {
		dial(tel) {
			uni.makePhoneCall({
				phoneNumber: tel
			});
		}
	}
};
</script>
<style lang="scss">
.customer-info {
	width: 100%;
	padding: 32rpx;
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20rpx;
	border-radius: 10rpx;

	.left {
		display: flex;
		align-items: center;

		.customer {
			font-size: $u-p2;

			.relname {
				font-size: $u-p;
				font-weight: bold;
				margin-bottom: 10rpx;
			}
		}
	}
}

.property-info {
	width: 100%;
	padding: 32rpx;
	background-color: #fff;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin-bottom: 20rpx;
	font-size: $u-p2;
	border-radius: 10rpx;

	.name {
		font-size: $u-p;
		font-weight: bold;
	}

	.saler {
		margin-bottom: 20rpx;
	}
}

.buystep-info {
	width: 100%;
	padding: 32rpx 0rpx;
	background-color: #fff;
	margin-bottom: 20rpx;
	border-radius: 10rpx;

	.name {
		font-weight: bold;
		margin-bottom: 20rpx;
	}
}

.u-order-title {
	color: $u-main-color;
	font-size: $u-p2;
}

.u-order-desc {
	color: $u-content-color;
	font-size: $u-p2;
	margin-bottom: 6rpx;
}

.u-order-time {
	color: rgb(200, 200, 200);
	font-size: $u-p2;
}
</style>