crm-mobile/pages_crm/components/tabAbout/aboutBusiness.vue

<template>
  <view class="section about-business">
    <view class="section-title">
      <image :src="$static('images/crm_about/business.png')" class="icon" />
      <text class="title">
        商机
      </text>
      <view
        v-if="!config.isSeas"
        class="add-btn"
        @click="handleAdd">
        <text class="wk wk-plus icon-add" />
        <text>新建</text>
      </view>
    </view>

    <view class="section-body">
      <template v-if="list.length > 0">
        <view class="list">
          <view
            v-for="(item, index) in list"
            :key="index"
            class="list-item"
            @click="handleTo(item.businessId)">
            <view class="list-item-circle">
              <template v-if="item.businessStatusCount">
                <view
                  v-if="calcProgress(item) === 'ok'"
                  class="icon-box success">
                  <text class="wk wk-check" />
                </view>

                <view
                  v-else-if="calcProgress(item) === 'fail'"
                  class="icon-box fail">
                  <text class="wk wk-close" />
                </view>

                <view
                  v-else-if="calcProgress(item) === 'invalid'"
                  class="icon-box invalid">
                  <text class="line" />
                </view>

                <view v-else class="progress">
                  <cmd-progress
                    :width="rpxToPx(66)"
                    :stroke-width="10"
                    :trail-width="10"
                    :show-info="false"
                    :percent="calcProgress(item)"
                    stroke-color="#1f72ff"
                    type="circle" />
                  <text class="progress-text">
                    {{ item.businessStatusCount.currentProgress }}/{{ item.businessStatusCount.totalProgress }}
                  </text>
                </view>
              </template>
            </view>
            <view class="list-item-info">
              <view class="box">
                <text class="name">
                  {{ item.businessName }}
                </text>
                <text class="num">
                  ￥{{ splitNumber(item.money) }}
                </text>
              </view>
              <view class="box">
                <text class="customer">
                  预计成交时间：{{ item.dealDate | formatTime }}
                </text>
                <text class="status">
                  {{ statusName(item) }}
                </text>
              </view>
            </view>
          </view>
        </view>
      </template>
      <template v-else>
        <view class="no-data">
          暂无数据
        </view>
      </template>
    </view>
  </view>
</template>

<script>
  import { splitNumber } from '@/utils/lib.js'
  import moment from 'moment'

  export default {
    name: 'AboutBusiness',
    filters: {
      formatTime(val) {
        if (!val) return '--'
        return moment(val).format('YYYY-MM-DD')
      }
    },
    props: {
      list: {
        type: Array,
        required: true
      },
      config: {
        type: Object,
        default: () => {}
      }
    },
    data() {
      return {}
    },
    methods: {
      rpxToPx(num) {
        return uni.upx2px(num)
      },
      splitNumber(num) {
        return splitNumber(num)
      },

      /**
       * 计算商机进度
       */
      calcProgress(item) {
        console.log('business item', item)
        if (item.isEnd === 0) {
          const count = item.businessStatusCount
          return count.currentProgress / count.totalProgress * 100
        }
        const arr = ['', 'ok', 'fail', 'invalid']
        return arr[item.isEnd]
      },

      statusName(item) {
        // if (item.isEnd === 0) {
        //   return item.statusName
        // }
        let arr = ['', '赢单', '输单', '无效单']
        return arr[item.isEnd]
      },

      handleTo(id) {
        const checkRes = this.$auth('crm.business.read')
        if (!checkRes) {
          this.$toast('权限不足！')
          return
        }
        this.$Router.navigateTo({
          url: '/pages_crm/business/detail',
          query: {
            id: id
          }
        })
      },

      handleAdd() {
        const checkRes = this.$auth('crm.business.save')
        if (!checkRes) {
          this.$toast('权限不足！')
          return
        }
        if (!this.config.detail) return

        const bridgeData = {
          default: {
            customerId: [{
              customerId: this.config.detail.customerId,
              customerName: this.config.detail.customerName
            }]
          }
        }

        const crmType = this.config.type
        if (crmType === 'contacts') {
          bridgeData.assignForm = {
            contactsId: this.config.detail.contactsId
          }
        }

        getApp().globalData.formBridge = bridgeData
        this.$Router.navigateTo({
          url: '/pages_crm/business/create'
        })
      },
    }
  }
</script>

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

.list {
  padding: 0 32rpx;
  &-item {
    @include left;
    &-circle {
      margin-right: 26rpx;
      .progress {
        position: relative;
        width: 66rpx;
        height: 66rpx;
        font-size: 22rpx;
        color: $gray;
        display: inline-block;
        .progress-text {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
      }
      .icon-box {
        width: 66rpx;
        height: 66rpx;
        border-radius: 50%;
        border-width: 6rpx;
        border-style: solid;
        @include center;
        &.success {
          color: #00c75c;
          border-color: #00c75c;
        }
        &.fail {
          color: #ff575d;
          border-color: #ff575d;
        }
        &.invalid {
          color: #cfcfcf;
          border-color: #cfcfcf;
          font-weight: blod;
          .line {
            width: 70rpx;
            height: 6rpx;
            transform: rotate(-45deg);
            background-color: #cfcfcf;
            vertical-align: middle;
            display: inline-block;
          }
        }
        .wk {
          font-size: 38rpx;
          font-weight: bold;
          margin-left: 2rpx;
          margin-top: 2rpx;
        }
      }
      .invalid-icon {
        width: 76rpx;
        height: 76rpx;
        color: #aaaaaa;
        line-height: 1;
        font-size: 76rpx;
        font-weight: 400;
      }
    }

    &-info {
      flex: 1;
      border-bottom: 1rpx solid $border-color;
      @include padding;
      .box {
        @include left;
        .name {
          flex: 1;
          font-size: $wk-font-medium;
          font-weight: 500;
          color: $dark;
        }
        .num {
          font-size: $wk-font-sm;
          font-weight: bold;
          color: $warning;
        }
        .customer {
          flex: 1;
          font-size: $wk-font-sm;
          color: $gray;
        }
        .status {
          font-size: $wk-font-mini;
          color: $gray;
        }
      }
    }

  }
  .list-item:last-child {
    .list-item-info {
      border-bottom: 0 none;
    }
  }
}
</style>