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" @click="commonRulesShow = true">
						{{ 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>
						<u-tag
							:text="detail.report_state == 3 ? '无效客户' : detail.report_state == 2 ? '审核中' : '有效客户'"
							:type="detail.report_state == 3 ? 'error' : detail.report_state == 2 ? 'warning' : 'success'"
							size="mini"
							class="u-m-l-20"
						></u-tag>
						<u-tag
							text="点击获取报备二维码"
							:type="'primary'"
							size="mini"
							class="u-m-l-20"
						></u-tag>
					</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.report_step <= 2" class="date u-skeleton-rect">
				保护期截止：{{detail.lock_at}}
			</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="Number(detail.report_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.report_state == 1  ? '报备审核：' : item.report_step ? `报备审核：${reportStepObj[item.report_step]}` : `争议判客：${reportStateObj[item.report_state]}`  }}</view>
							<view class="u-order-desc">{{ item.describe !== null ? item.describe : '' }}</view>
							<!-- <view class="u-order-time">{{ item._add_time | date('yyyy-mm-dd hh:MM:ss') }}</view> -->
							<view class="u-order-time">{{ item.create_at}}</view>
						</view>
					</template>
				</u-time-line-item>
			</u-time-line>
		</view>

		<!--引用组件-->
		<u-skeleton :loading="skeletonLoading" :animation="true" bgColor="#FFF"></u-skeleton>
		
		
		<!-- 弹框 -->
		<u-popup v-model="commonRulesShow" mode="center" width="80%" height="800rpx" border-radius="20" closeable>
			<view class="bwin-popup">
				<view class="popup-header">报备二维码</view>
				<view class="popup-body">
					<canvas class='qrcode-canvas'  canvas-id='qrcode'></canvas>
				</view>
			</view>
		</u-popup>
		
		
		
		
	</view>
</template>
<script>
var that;
let QRCode = require('../../../utils/qrcode.js').default
export default {
	data() {
		return {
			commonRulesShow: false,
			skeletonLoading: true,
			detail: {
			}, // 客户详情
			currentStep: 0,
			buystepList: [
				{
					name: '审核'
				},
				{
					name: '报备成功'
				},
				{
					name: '到访'
				},
				{
					name: '认购'
				},
				{
					name: '签约'
				},
				{
					name: '结佣'
				}
			],
			reportStepObj: {
				'1': '未到访',
				'2': '已到访',
				'3': '已认购',
				'4': '已签约',
				'5': '已结佣',
			},
			reportStateObj: {
				'1': '有效',
				'2': '审核中',
				'3': '无效',
			},
			stepsLogList: [] // 进展
		};
	},
	onLoad(params) {
		uni.api.estate.apireportdetail({id:params.id}).then(res =>{
			this.detail = res || {}
			this.stepsLogList = res.report_flow || []
			this.skeletonLoading = false
			
			
			let r = uni.getSystemInfoSync()
			let canvasWidth = r.windowWidth * 500 / 750
			let canvasHeight = r.windowWidth * 500 / 750
			let qrcode = new QRCode('qrcode', {
				text: res.code,
				width: canvasWidth,
				height: canvasHeight,
				colorDark: '#000',
				colorLight: '#fff',
				correctLevel: QRCode.correctLevel.H,
				logo: '',
				successTips: false
			})
			// that.QR = qrcode
			
		})
		// 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;
	color: #777;
	font-size: $u-p2;
	margin-bottom: 6rpx;
}

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




.qrcode-canvas {
	margin: 30px auto;
	height: 500rpx;
	width: 500rpx;
}
</style>