crm-mobile/pages_crm/contacts/detail.vue

<template>
  <view v-if="!refreshPage && !$isEmpty(detailData)" class="uni-app">
    <view class="status-bar" />
    <wk-nav-bar
      :command-list="commandList"
      :refresh-prev="refreshPrevPage"
      title="联系人详情"
      theme="white"
      class="nav-bar"
      @command="handleCommand" />

    <scroll-view
      :scroll-y="true"
      class="main-container scroll-view-hook"
      @scrolltolower="handleScrollTolower">
      <view class="header-top">
        <view class="bg linear-gradient" />
        <view class="card">
          <view class="title-cell">
            <image :src="$static('images/crm/gray_contacts.png')" class="type-icon" />
            <view class="title-text">
              {{ detailData.name || '' }}
            </view>
          </view>

          <view class="main-info">
            <view class="info-item">
              联系方式：{{ detailData.mobile || '&#45;&#45;' }}
            </view>
            <view class="info-item">
              负责人：{{ detailData.ownerUserName || '&#45;&#45;' }}
            </view>
            <view class="info-item">
              最后跟进：{{ detailData.lastTime || '&#45;&#45;' }}
            </view>
          </view>

          <view class="main-info">
            <flow-progress
              v-if="detailData"
              :type="comType"
              :detail-id="id"
              :detail-data="detailData" />	
          </view>
					
          <view
            class="relevance-cell"
            @click="handleToCustomer">
            <image :src="$static('images/application/customer.png')" class="cell-icon" />
            <text class="cell-body">
              {{ detailData.customerName }}
            </text>
            <text class="cell-link wk wk-arrow-right" />
          </view>
        </view>
      </view>

      <view ref="wkTabs" class="wk-tabs">
        <view
          v-for="(tab, index) in tabs" :key="index" :class="{active: activeTab === tab.value}" class="wk-tab-item"
          @click="handleToggleTabs(tab.value)">
          {{ tab.label }}
        </view>
      </view>

      <wk-keep-alive v-if="id" v-model="activeTab">
        <wk-keep-alive-item>
          <detail-activity-list 
            ref="activity"
            :detail-id="id"
            :type="comType"
            activity-title="联系人" />
        </wk-keep-alive-item>

        <wk-keep-alive-item>
          <detail-base-info :detail-id="id" :type="comType" class="detail-container" />
        </wk-keep-alive-item>

        <wk-keep-alive-item>
          <detail-about
            :detail-id="id"
            :detail-data="detailData"
            :batch-id="detailData.batchId"
            class="detail-about-container" />
        </wk-keep-alive-item>
      </wk-keep-alive>
    </scroll-view>

    <uni-popup ref="popup" type="dialog">
      <uni-popup-dialog
        :content="dialogMsg"
        type="warning"
        @confirm="handleDialogConfirm" />
    </uni-popup>
  </view>
</template>

<script>
  import {
    QueryById,
    Transfer,
    DeleteByIds
  } from 'API/crm/concat'

  import DetailBaseInfo from '../components/detailSection/baseInfo'
  import DetailActivityList from '../components/detailSection/activityList'
  import DetailAbout from './components/tabsAbout'
  import FlowProgress from '../components/customFlow/flowProgress'

  import detailMixins from '../mixins/detail.js'

  export default {
    name: 'ContactsDetail',
    components: {
      DetailBaseInfo,
      DetailActivityList,
      DetailAbout,
      FlowProgress
    },
    mixins: [detailMixins],
    data() {
      return {
        commandList: [
          { label: '转移', auth: 'crm.contacts.transfer', imgIcon: 'transfer', value: 'transfer'},
          { label: '编辑', auth: 'crm.contacts.update', imgIcon: 'update', value: 'update'},
          { label: '删除', auth: 'crm.contacts.delete', imgIcon: 'delete', value: 'delete'},
        ],
        comType: 'crm_contacts'
      }
    },
    methods: {
      /**
       * 获取详情
       */
      getDetail() {
        QueryById({contactsId: this.id}).then(response => {
          this.detailData = response
        }).catch(() => {
          this.goBack()
        })
      },

      handleToCustomer() {
        this.$Router.navigateTo({
          url: '/pages_crm/customer/detail',
          query: {
            id: this.detailData.customerId
          }
        })
      },

      handleCommand(command) {
        this.commandValue = command.value
        switch (command.value) {
        case 'transfer':
          this.handleToChangeOwnerUser()
          break
        case 'update':
          this.handleEdit()
          break
        case 'delete':
          this.dialogMsg = '您确定要删除该联系人吗？'
          this.$refs.popup.open()
          break
        }
      },

      handleDialogConfirm(next) {
        switch (this.commandValue) {
        case 'delete':
          this.handleDelete()
          break
        }
        next()
      },

      /**
       * 转移
       * @param {Object} user
       */
      handleTransfer(user) {
        let params = {
          ids: [this.id],
          ownerUserId: user.userId,
          transferType: 1
        }
        Transfer(params).then(() => {
          this.$toast('转移成功')
          this.$refreshAndToPrev(this)
        }).catch()
      },

      /**
       * 删除
       */
      handleDelete() {
        DeleteByIds([this.id]).then(() => {
          this.$toast('删除成功')
          this.$refreshAndToPrev(this)
        }).catch()
      },
    }
  }
</script>

<style scoped lang="scss">
@import "../style/detail.scss";

.call-icon {
  width: 56rpx;
  height: 56rpx;
  @include center;
  .header-phone-icon {
    width: 100%;
    height: 100%;
  }
}
</style>