mdapp/pages/agent/recommend/detail.vue

<template>
	<view class="scoped-box page u-skeleton">
		<!-- 客户信息 -->
		<view class="customer-info u-skeleton-fillet box-shadow">
			<view class="left">
				<view class="customer">
					<view class="relname u-skeleton-rect">
						<text @click="openInfoPopup">
						{{ detail.name }}
						</text>
						<u-icon
							@click="openInfoPopup"
							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>
							<!-- v-if="userInfo.user_id == detail.user_id" -->
						<u-tag
							@click="openPopup"
							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 }}
			
				
				<u-tag
					@click="pageTo('/pages/agent/recommend/visitimg?id=' + detail.id)"
					text="上传/查看到访凭证和结佣资料"
					:type="'primary'"
					class="u-m-l-20"
				></u-tag>
				
			</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 v-if="detail.report_state == 1"  class="buystep-info box-shadow u-skeleton-fillet"><u-steps :list="buystepList" :current="Number(detail.report_step)" active-color="#2080f0"></u-steps></view>
		<view v-else class="buystep-info box-shadow u-skeleton-fillet"><u-steps :list="buystepList" :current="0" 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.operator_nickname || ''}}({{item.operator_phone || '系统'}}){{ 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">
					<view style="text-align: center;">报备时间：{{detail.report_at}}</view>
					<view style="text-align: center;margin-bottom: -30rpx;">保护截止：{{detail.lock_at}}</view>
					<image v-if="detail.report_code" :src="detail.report_code" class="qrcode-canvas"></image>
					<canvas v-else class='qrcode-canvas' canvas-id='qrcode'></canvas>
				</view>
			</view>
		</u-popup>
		
		
		<view v-if="detail.report_step == 1 && detail.report_state == 1 && detail.is_edit == 1" class="scoped-footer">
			<u-button type="primary" @click="vHandle">确认到访</u-button>
		</view>
		
		<view v-if="(curRoles == 1 || curRoles == 5 || curRoles == 7) && detail.report_step == 2" class="scoped-footer">
			<u-button type="primary" @click="buyedHandle">确认已认购</u-button>
		</view>
		
		<view v-if="(curRoles == 1 || curRoles == 5 || curRoles == 7) && detail.report_step == 3" class="scoped-footer">
			<u-button type="primary" @click="signedHandle">确认已签约</u-button>
		</view>
		
		<!-- 修改报备 -->
		<u-popup v-model="isInfoShow" mode="center" width="80%" height="400rpx" border-radius="20">
			<view class="bwin-popup">
				<view class="popup-header">修改报备姓名和性别</view>
				<view class="popup-body">
					<view class="scoped-popup-info">
						<view class="spi-op">
							<u-input v-model="curName" border placeholder="请输入姓名"></u-input>
						</view>
						<view class="spi-op">
							<u-radio-group v-model="curSex" active-color="#2979ff">
								<u-radio name="male">先生</u-radio>
								<u-radio name="female">女士</u-radio>
							</u-radio-group>
						</view>
					</view>
				</view>
				<view class="popup-footer" style="position: absolute;">
					<u-button size="medium" @click="isInfoShow = false">关闭</u-button>
					<u-button size="medium" type="primary" @click="closeInfoPopup()">确定</u-button>
				</view>
			</view>
		</u-popup>
		
		
	</view>
</template>
<script>
var that;
let QRCode = require('../../../utils/qrcode.js').default
export default {
	data() {
		return {
			curRoles: '',
			curName: '',
			curSex: 'male',
			isInfoShow: false,
			curId: '',
			commonRulesShow: false,
			skeletonLoading: true,
			detail: {
			}, // 客户详情
			currentStep: 0,
			userInfo: {},
			buystepList: [
				{
					name: '审核'
				},
				{
					name: '报备成功'
				},
				{
					name: '到访'
				},
				{
					name: '认购'
				},
				{
					name: '签约'
				},
				{
					name: '结佣'
				}
			],
			reportStepObj: {
				'1': '未到访',
				'2': '已到访',
				'3': '已认购',
				'4': '已签约',
				'5': '已结佣',
			},
			reportStateObj: {
				'1': '有效',
				'2': '审核中',
				'3': '无效',
			},
			stepsLogList: [] // 进展
		};
	},
	onLoad(params) {
		const userInfo2 = uni.getStorageSync('MD_userInfo2')
		this.userInfo = {...userInfo2}
		this.curRoles = userInfo2 ? userInfo2.roles : ''
		this.curId = params.id
		uni.api.estate.apireport2detail({id:params.id}).then(res =>{
			this.detail = res || {}
			this.curName = res.name
			this.curSex = res.sex
			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
			
		})
	},
	methods: {
		openInfoPopup (item) {
			if (this.curRoles == 1 || this.curRoles == 5 || this.curRoles == 6) {
				this.isInfoShow = true
			}
		},
		closeInfoPopup () {
			uni.api.estate.apireportedit({
				id: this.detail.id,
				name: this.curName,
				sex: this.curSex,
			}).then(res => {
				uni.$msg('修改成功')
				this.isInfoShow = false
				this.getData()
			})
		},
		openPopup () {
			if (this.detail.report_code) {
				uni.previewImage({
					current: this.detail.report_code,
					urls: [this.detail.report_code]
				})
			} else {
				if (this.detail.is_edit == 1) {
					uni.$msg('暂无报备二维码，请联系管理员')
					return
				}
				this.commonRulesShow = true
			}
		},
		getData () {
			uni.api.estate.apireport2detail({id:this.curId}).then(res =>{
				this.detail = res || {}
				this.stepsLogList = res.report_flow || []
				this.skeletonLoading = false
			})
		},
		vHandle() {
			uni.$msgConfirm('确定已到访？', () => {				
				uni.api.cust.apireportvisit({id: this.detail.id}).then(res => {
					this.getData()
					uni.$msg('操作成功~')
				})
			})
		},
		buyedHandle () {
			uni.$msgConfirm('确定已认购？', () => {})
			uni.api.estate.apireportsubscrDeal({id: this.detail.id}).then(res => {
				this.getData()
				uni.$msg('操作成功~')
			})
		},
		signedHandle () {
			uni.$msgConfirm('确定已签约？', () => {})
			uni.api.estate.apireportsignupDeal({id: this.detail.id}).then(res => {
				this.getData()
				uni.$msg('操作成功~')
			})
		},
		pageTo(path) {
			if (path === 'dev') {
				uni.$msg('开发中~')
				return
			}
			uni.navigateTo({
				url: path
			})
		},
		dial(tel) {
			uni.makePhoneCall({
				phoneNumber: tel
			});
		}
	}
};
</script>
<style lang="scss">
.scoped-box {
	padding-bottom: 120rpx;
}
.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;
}

.scoped-footer {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 120rpx;
	background: #fff;
	z-index: 999;
	border-top: 1PX solid #dcdcdc;
	padding: 20rpx;
}



.scoped-popup-info {
	.spi-op {
		padding-bottom: 30rpx;
	}
}
</style>