crm-mobile/pages_message/backlog/detailCustomerItem.vue

<template>
  <uni-swipe-action v-if="openSlider">
    <uni-swipe-action-item>
      <view class="list-item" @click="handleToDetail">
        <view class="list-item-main">
          <text class="left">
            {{ itemData.customerName }}
          </text>
          <text
            :class="itemData.dealStatus === 1 ? 'success' : 'waiting'"
            class="cell-right status">
            {{ itemData.dealStatus === 1 ? '已成交' : '未成交' }}
          </text>
        </view>
        <view class="list-item-desc">
          <text class="left">
            最后跟进时间：{{ itemData.lastTime || '--' }}
          </text>
          <text class="cell-right owner-user">
            {{ itemData.ownerUserName }}
          </text>
        </view>
      </view>
      <template v-slot:right>
        <view class="delete" @click="setFollow">
          跟进
        </view>
      </template>
    </uni-swipe-action-item>
  </uni-swipe-action>

  <view v-else class="list-item" @click="handleToDetail">
    <view class="list-item-main">
      <text class="left">
        {{ itemData.customerName }}
      </text>
      <text
        :class="itemData.dealStatus === 1 ? 'success' : 'waiting'"
        class="cell-right status">
        {{ itemData.dealStatus === 1 ? '已成交' : '未成交' }}
      </text>
    </view>
    <view class="list-item-desc">
      <text class="left">
        最后跟进时间：{{ itemData.lastTime || '--' }}
      </text>
      <text class="cell-right owner-user">
        {{ itemData.ownerUserName }}
      </text>
    </view>
    <view
      v-if="type === 8"
      class="list-item-desc">
      <text class="left">
        距进入公海时间：<text style="color: red">
          {{ itemData.poolDay }}天
        </text>
      </text>
    </view>
  </view>
</template>

<script>
  import {CustomerSetFollow} from 'API/crm/message'

  export default {
    name: 'DetailCustomerItem',
    props: {
      itemData: {
        type: Object,
        required: true
      },
      openSlider: {
        type: Boolean,
        default: false
      },
      type: {
        type: Number,
        default: null
      }
    },
    methods: {
      handleToDetail() {
        this.$Router.navigateTo({
          url: '/pages_crm/customer/detail',
          query: {
            id: this.itemData.customerId
          }  
        })
      },
      setFollow() {
        CustomerSetFollow([
          this.itemData.customerId
        ]).then(res => {
          this.$toast('跟进成功')
          this.$emit('refresh')
        }).catch()
      },
    }
  }
</script>

<style scoped lang="scss">
  @import "detailItem";

  .status {
    font-size: 26rpx;
    font-weight: 500;
    line-height: normal;
    padding: 5rpx 18rpx;
    border-radius: 4rpx;
    @include center;

    &.success {
      color: #14AE36;
      background-color: #DCFFDF;
    }
    &.waiting {
      color: #FF8700;
      background-color: #FFF3E5;
    }
  }

  .owner-user {
    font-size: 28rpx;
    color: $gray;
  }

  .delete {
    width: 150rpx;
    height: 100%;
    color: white;
    font-size: 28rpx;
    background-color: $theme-color;
    @include center;
  }
</style>