<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> <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.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"> <canvas class='qrcode-canvas' canvas-id='qrcode'></canvas> </view> </view> </u-popup> <u-button v-if="detail.report_step == 1 && detail.report_state == 1" class="bwin-btn-100 u-m-b-10" type="primary" @click="confirmHandle">确认到访</u-button> <u-button v-if="detail.report_step == 2 && detail.report_state == 1" class="bwin-btn-100 u-m-b-10" type="success" @click="confirmHandle">二次确认到访</u-button> </view> </template> <script> var that; let QRCode = require('../../../utils/qrcode.js').default export default { data() { return { curCode: '', 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) { this.curCode = params.id this.getData() // 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: { getData () { uni.api.estate.apireportsite({code:this.curCode}).then(res =>{ this.detail = res || {} this.stepsLogList = res.report_flow || [] this.skeletonLoading = false }) }, confirmHandle () { uni.api.estate.apireportconfirm({report_id:this.detail.id}).then(res =>{ uni.$msgConfirm('操作成功~') this.getData() }) }, 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>