crm-mobile/pages_crm/leads/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_leads.png')" class="type-icon" />
            <view class="title-text">
              {{ detailData.leadsName || '' }}
            </view>
          </view>

          <view class="main-info">
            <view class="info-item">
              <text class="label">
                联系方式：
              </text>
              <text class="value">
                {{ detailData.mobile || '&#45;&#45;' }}
              </text>
            </view>
            <view class="info-item">
              <text class="label">
                负责人：
              </text>
              <text class="value">
                {{ detailData.ownerUserName || '&#45;&#45;' }}
              </text>
            </view>
            <view class="info-item">
              <text class="label">
                最后跟进：
              </text>
              <text class="value">
                {{ detailData.lastTime || '&#45;&#45;' }}
              </text>
            </view>
          </view>
					
          <view class="main-info">
            <flow-progress
              v-if="detailData"
              :type="comType"
              :detail-id="id"
              :detail-data="detailData" />	
          </view>
        </view>
      </view>

      <view 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" :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,
    ChangeOwnerUser,
    Transfer,
    DeleteByIds
  } from 'API/crm/leads'

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

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

  export default {
    name: 'LeadsDetail',
    components: {
      DetailBaseInfo,
      DetailActivityList,
      DetailAbout,
      FlowProgress
    },
    mixins: [detailMixins],
    data() {
      return {
        comType: 'crm_leads',

        commandList: [
          {
            label: '转移',
            imgIcon: 'transfer',
            auth: 'crm.leads.transfer',
            value: 'transfer'
          },
          {
            label: '转化为客户',
            imgIcon: 'transform',
            auth: 'crm.leads.transform',
            value: 'transform'
          },
          {
            label: '编辑',
            imgIcon: 'update',
            auth: 'crm.leads.update',
            value: 'update'
          },
          {
            label: '删除',
            imgIcon: 'delete',
            auth: 'crm.leads.delete',
            value: 'delete'
          }
        ]
      }
    },
    methods: {
      /**
       * 获取详情
       */
      getDetail() {
        QueryById({
          leadsId: this.id,
        }).then(response => {
          console.log('leadsDetail: ', response)
          this.detailData = response
        }).catch(() => {
          this.goBack()
        })
      },

      handleCommand(command) {
        this.commandValue = command.value
        switch (command.value) {
        case 'transfer':
          this.handleToChangeOwnerUser()
          break
        case 'transform':
          this.dialogMsg = '您确定要把该线索转化为客户吗？'
          this.$refs.popup.open()
          break
        case 'update':
          this.handleEdit()
          break
        case 'delete':
          this.dialogMsg = '您确定要删除该线索吗？'
          this.$refs.popup.open()
          break
        }
      },

      handleDialogConfirm(next) {
        switch (this.commandValue) {
        case 'transfer':
          break
        case 'transform':
          this.transformCustomer()
          break
        case 'update':
          break
        case 'delete':
          this.handleDelete()
          break
        }
        console.log('next fn: ', next)
        next()
      },

      selectedUser(data) {
        if (this.guid === data.guid) {
          if (data.data.length > 0) {
            this.$nextTick(function() {
              this.handleTransfer(data.data[0])
            })
          }
        }
        uni.$off('selected-user')
      },

      /**
       * 转移
       */
      handleTransfer(user) {
        ChangeOwnerUser({
          ids: [this.id],
          ownerUserId: user.userId
        }).then(() => {
          this.$toast('转移成功')
          this.$refreshAndToPrev(this)
        }).catch()
      },

      /**
       * 转化为客户
       */
      transformCustomer() {
        Transfer([this.id]).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";
</style>