<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"> {{ 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 @click="openPopup" v-if="userInfo.user_id == detail.user_id" 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="detail.report_step == 2" class="scoped-footer"> <u-button type="primary" @click="buyedHandle">确认已认购</u-button> </view> <view v-if="detail.report_step == 3" class="scoped-footer"> <u-button type="primary" @click="signedHandle">确认已签约</u-button> </view> </view> </template> <script> var that; let QRCode = require('../../../utils/qrcode.js').default export default { data() { return { 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.curId = params.id uni.api.estate.apigoverndetail({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: { 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('操作成功~') }) }, 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.apireportdetail({id:this.curId}).then(res =>{ this.detail = res || {} this.stepsLogList = res.report_flow || [] this.skeletonLoading = false }) }, vHandle() { uni.api.cust.apireportvisit({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; } </style>