crm-mobile/pages_crm/seas/detail.vue

<template>
  <view v-if="!$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/application/customer.png')" class="type-icon" />
            <view class="title-text">
              <text class="text">
                {{ detailData.customerName || '' }}
              </text>
              <text v-if="detailData.status === 2" class="wk wk-lock" />
            </view>
            <view :class="detailData.dealStatus === 1 ? 'success' : 'info'" class="title-status">
              <text>{{ detailData.dealStatus === 1 ? '已成交' : '未成交' }}</text>
            </view>
          </view>

          <view class="main-info">
            <view class="info-item">
              <text class="label">
                客户级别：
              </text>
              <text class="value">
                {{ detailData.level || '&#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.updateTime || '&#45;&#45;' }}
              </text>
            </view>
          </view>

          <image
            v-if="detailData.mobile"
            :src="$static('images/icon/call_up.png')"
            class="call-up"
            @click="ringUp(detailData.mobile)" />
        </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"
            :hidden-add="true"
            type="crm_customer"
            activity-title="客户" />
        </wk-keep-alive-item>

        <wk-keep-alive-item>
          <detail-base-info
            v-if="poolId"
            :detail-id="id"
            :pool-id="poolId"
            :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"
            is-seas
            class="detail-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,
    DistributeByIds,
    ReceiveByIds
  } from 'API/crm/customer'
  import { DeleteByIds } from 'API/crm/pool'

  import DetailBaseInfo from '../components/detailSection/baseInfo'
  import DetailActivityList from '../components/detailSection/activityList'
  import DetailAbout from '../customer/components/tabsAbout.vue'

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

  export default {
    name: 'SeasDetail',
    components: {
      DetailBaseInfo,
      DetailActivityList,
      DetailAbout
    },
    mixins: [detailMixins],
    data() {
      return {
        comType: 'crm_pool',
        poolId: null,
        commandList: [
          {
            label: '分配',
            imgIcon: 'alloc',
            auth: 'crm.pool.distribute',
            value: 'distribute'
          },
          {
            label: '领取',
            imgIcon: 'receive',
            auth: 'crm.pool.receive',
            value: 'receive'
          },
          {
            label: '删除',
            imgIcon: 'delete',
            noCheck: true,
            value: 'delete'
          }
        ]
      }
    },
    onLoad(options) {
      this.routerQuery = options
      this.id = options.id || null
      this.poolId = options.poolId || null
      if (!this.poolId) {
        this.commandList = [
          {
            label: '删除',
            imgIcon: 'delete',
            noCheck: true,
            value: 'delete'
          }
        ]
      }
    // this.getDetail()
    },
    methods: {
      getDetail() {
        QueryById({customerId: this.id}).then(response => {
          console.log('detail: ', response)
          this.detailData = response
        }).catch(() => {
          this.goBack()
        })
      },

      handleCommand(command) {
        this.commandValue = command.value
        switch (command.value) {
        case 'distribute':
          this.handleToChangeOwnerUser()
          break
        case 'receive':
          this.dialogMsg = '您确定要领取该客户吗？'
          this.$refs.popup.open()
          break
        case 'delete':
          this.dialogMsg = '您确定要删除该客户吗？'
          this.$refs.popup.open()
          break
        }
      },

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

      handleTransfer(user) {
        DistributeByIds({
          userId: user.userId,
          ids: [this.id],
          poolId: this.poolId
        }).then(() => {
          this.$toast('分配成功！')
          this.$refreshAndToPrev(this)
        }).catch()
      },

      getCustomerForMyself() {
        ReceiveByIds({
          ids: [this.id],
          poolId: this.poolId
        }).then(() => {
          this.$toast('领取成功！')
          this.$refreshAndToPrev(this)
        }).catch()
      },

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

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

.header-top {
  .card {
    .title-status {
      &.success {
        color: #FFFFFF;
        background-color: #FF8700;
      }
      &.info {
        color: #BBBBBB;
        background-color: #EEEEEE;
      }
    }

    .main-info {
      margin-bottom: 25rpx;
    }

    .call-up {
      position: absolute;
      right: 50rpx;
      bottom: 0;
      width: 116rpx;
      height: 116rpx;
    }
  }
}
</style>