|
@@ -0,0 +1,222 @@
|
|
|
+<template>
|
|
|
+ <view class="client-detail detail" v-if="detail.id">
|
|
|
+ <view class="detail-box">
|
|
|
+ <view class="title-box">
|
|
|
+ <view class="title">{{detail.name}}</view>
|
|
|
+ <view class="date">{{detail.visitingTime}}</view>
|
|
|
+ <view class="title-icon">
|
|
|
+ <uni-icons type="staff-filled" color="#fff" size="24"></uni-icons>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="other">
|
|
|
+ <div class="item">
|
|
|
+ <div class="label">客户类型</div>
|
|
|
+ <div class="value">{{$field.findTypeName('customerType',detail.type)}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="item">
|
|
|
+ <div class="label">联系人</div>
|
|
|
+ <div class="value">{{detail.person}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="item">
|
|
|
+ <div class="label">联系电话</div>
|
|
|
+ <div class="value">{{detail.phone}}</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="item">
|
|
|
+ <div class="label">微信号</div>
|
|
|
+ <div class="value">{{detail.weChatAccount}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="item">
|
|
|
+ <div class="label">职位</div>
|
|
|
+ <div class="value">{{detail.job}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="item">
|
|
|
+ <div class="label">跟进状态</div>
|
|
|
+ <div class="value">{{$field.findTypeName('followUpState',detail.followUpState)}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="item">
|
|
|
+ <div class="label">需求区间</div>
|
|
|
+ <div class="value">{{detail.demand}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="item">
|
|
|
+ <div class="label">装修需求</div>
|
|
|
+ <div class="value">{{detail.decorationRequirements}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="item">
|
|
|
+ <div class="label">客户行业</div>
|
|
|
+ <div class="value">{{detail.customerIndustry}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="item">
|
|
|
+ <div class="label">备注</div>
|
|
|
+ <div class="value">{{detail.remark}}</div>
|
|
|
+ </div>
|
|
|
+ </view>
|
|
|
+ <view class="state">
|
|
|
+ <view class="create">
|
|
|
+ <uni-icons class="inherit-icons" type="person-filled" color="#08979c" size="18"></uni-icons>
|
|
|
+ <text class="name">{{user.userName}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="tag">
|
|
|
+ <view class="status-tag info" v-if="!detail.status">待邀请</view>
|
|
|
+ <view class="status-tag warning" v-if="detail.status == 1">邀请中</view>
|
|
|
+ <view class="status-tag success" v-if="detail.status == 2">通过邀请</view>
|
|
|
+ <view class="status-tag error" v-if="detail.status == 3">拒绝邀请</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="detail-box">
|
|
|
+ <view class="sub-title">
|
|
|
+ <uni-icons type="wallet-filled" class="inherit-icons" size="24" color="#08979c"></uni-icons>
|
|
|
+ <text class="sub-label">首次来访</text>
|
|
|
+ </view>
|
|
|
+ <view class="other">
|
|
|
+ <div class="item">
|
|
|
+ <div class="label">跟进人</div>
|
|
|
+ <div class="value">{{detail.followUpPerson}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="item">
|
|
|
+ <div class="label">来访时间</div>
|
|
|
+ <div class="value">{{detail.visitingTime}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="item">
|
|
|
+ <div class="label">带看房源</div>
|
|
|
+ <div class="value">{{detail.firsTimeRoom}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="item">
|
|
|
+ <div class="label">来访渠道</div>
|
|
|
+ <div class="value">{{detail.visitingChannels}}</div>
|
|
|
+ </div>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import {
|
|
|
+ getCustomerDetailById
|
|
|
+ } from '@/request/api/my.js'
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ clientId: '',
|
|
|
+ detail: {},
|
|
|
+ user: {}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(body) {
|
|
|
+ if (body.clientId) this.clientId = body.clientId;
|
|
|
+ this.init();
|
|
|
+ this.user = this.$store.getters.user;
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ init() {
|
|
|
+ if (!this.clientId) return;
|
|
|
+ getCustomerDetailById(this.clientId).then(res => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ this.detail = res.data;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ .detail {
|
|
|
+ padding: 30rpx;
|
|
|
+
|
|
|
+ .detail-box {
|
|
|
+ background-color: #ffffff;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ box-shadow: 0px 1px 12px rgba(3, 3, 3, 0.08);
|
|
|
+ padding: 30rpx;
|
|
|
+ position: relative;
|
|
|
+ margin-bottom: 30rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sub-title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-left: -8rpx;
|
|
|
+
|
|
|
+ .sub-label {
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ margin-left: 14rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .title-box {
|
|
|
+ padding-left: 90rpx;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .title-icon {
|
|
|
+ width: 70rpx;
|
|
|
+ height: 70rpx;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 70rpx;
|
|
|
+ background: $uni-primary;
|
|
|
+ border-radius: 70rpx;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 50%;
|
|
|
+ margin-top: -35rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+
|
|
|
+ .date {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: $uni-secondary-color;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .other {
|
|
|
+ margin-top: 20rpx;
|
|
|
+
|
|
|
+ .item {
|
|
|
+ margin-top: 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .label {
|
|
|
+ color: $uni-secondary-color;
|
|
|
+ font-size: 24rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .value {
|
|
|
+ margin-top: 6rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .state {
|
|
|
+ margin-top: 20rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .create {
|
|
|
+ height: 48rpx;
|
|
|
+ border-radius: 48rpx;
|
|
|
+ border: 1px solid $uni-primary;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ color: $uni-primary;
|
|
|
+ padding: 0 10rpx;
|
|
|
+
|
|
|
+ .name {
|
|
|
+ font-size: 24rpx;
|
|
|
+ flex: 1;
|
|
|
+ max-width: 150rpx;
|
|
|
+ min-width: 70rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ margin-left: 10rpx;
|
|
|
+ line-height: 36rpx;
|
|
|
+ padding-right: 10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|