crm-mobile/pages_crm/business/progress.vue

<template>
  <view class="uni-app">
    <view class="status-bar" />
    <view class="main-container">
      <wk-nav-bar title="商机阶段详情" :refresh-prev="refreshPrevPage" />

      <view class="container">
        <view class="list">
          <view
            v-for="(item, index) in statusList"
            :key="index"
            :class="{now: item.status === 1}"
            class="list-item">
            <view
              class="icon-box"
              :class="{failed: item.status === 3, success: item.status === 2, wait: item.status === 1}">
              <view class="icon">
                {{ item.is_end ? '终' : index + 1 }}
              </view>
            </view>

            <view class="content">
              <view class="info">
                <text class="label">
                  {{ item.name }}
                </text>
                <text class="value">
                  赢单率{{ item.rate }}%
                </text>
              </view>
              <view v-if="item.status !== 0" class="status">
                <template v-if="item.status === 1">
                  <image :src="$static('images/crmBusiness/business-wait.png')" alt="" class="status-icon" />
                  <text style="color: #FF7842" class="status-text">
                    进行中
                  </text>
                </template>
                <template v-if="item.status === 2">
                  <image :src="$static('images/crmBusiness/business-success.png')" alt="" class="status-icon" />
                  <text style="color: #46CDCF" class="status-text">
                    已完成
                  </text>
                </template>
                <template v-if="item.status === 3">
                  <image :src="$static('images/crmBusiness/business-failed-large.png')" alt="" class="status-icon" />
                  <text style="color: #ff6767" class="status-text">
                    输单
                  </text>
                </template>
              </view>
            </view>
          </view>
        </view>
      </view>

      <view
        v-if="statusList.length > 0 && isEnd === 0"
        class="footer"
        @click="handlePopup">
        阶段变更
      </view>
    </view>

    <uni-popup ref="popup">
      <uni-popup-dialog
        v-if="showEditPop"
        :title="editPopTitle"
        placeholder="请输入内容"
        mode="input"
        @confirm="handleDialogConfirm" />
      <view v-else class="pop-wrapper">
        <view
          v-for="(item, index) in popOptions"
          :key="index"
          class="pop-item"
          @click.stop="handleSelectOptions(item)">
          {{ item.name }}
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
  import {QueryBusinessStatus, BoostBusinessStatus} from 'API/crm/business'
  import sortMixins from '@/mixins/listSort'

  export default {
    name: 'BusinessProgress',
    mixins: [sortMixins],
    data() {
      return {
        statusList: [],
        isEnd: null,

        params: {},
        editPopTitle: '',
        showEditPop: false,

        refreshPrevPage: false
      }
    },
    computed: {
      popOptions() {
        let arr = []
        if (this.isEnd === 0) {
          // this.statusList.forEach(item => {
          //   if (item.status === 0) {
          //     arr.push(item)
          //   }
          // })
          // return arr
          return this.statusList
        }
        return []
      }
    },
    onLoad(options) {
      this.id = options.id || null
      this.getDetail()
    },
    onBackPress(evt) {
      if (evt.from === 'backbutton' && this.refreshPrevPage) {
        this.$refreshAndToPrev(this)
        return true // 返回值为 true 时，表示不执行默认的返回
      }
      return false
    },
    methods: {
      getDetail() {
        // is_end  0 未结束  1 赢单 2 输 3 无效
        this.statusList = []
        QueryBusinessStatus({id: this.id}).then(response => {
          let list = this.mixinsSort(response.statusList, 'orderNum')
          console.log(list)

          this.isEnd = response.isEnd;
          let currentStatusId = response.statusId

          let arr = [
            {name: '赢单', rate: 100, status: 0, is_end: 1},
            {name: '输单', rate: 0, status: 0, is_end: 2},
            {name: '无效单', rate: 0, status: 0, is_end: 3}
          ]
          if (this.isEnd === 1) {
            // 赢单
            arr[0].status = 2
            list.forEach(item => {
              item.status = 2
            })
          } else if (this.isEnd === 2) {
            // 输单
            arr[1].status = 3
            list.forEach(item => {
              item.status = 2
            })
          } else if (this.isEnd === 0) {
            // 进行中
            let stepIndex = list.findIndex(status => {
              return status.statusId == currentStatusId
            }) || 0
            list.forEach((item, index) => {
              if (index < stepIndex) {
                item.status = 2
              } else if (index === stepIndex) {
                item.status = 1
              } else {
                item.status = 0
              }
            })
          }

          list = list.concat(arr)
          this.statusList = list
        }).catch()
      },

      handlePopup() {
        this.showEditPop = false
        this.$refs.popup.open()
      },

      handleSelectOptions(item) {
        let params = {
          businessId: this.id,
        }
        if (item.is_end) {
          params.isEnd = item.is_end
        } else {
          params.statusId = item.statusId
        }
        this.params = params
        if (params.isEnd === 2) {
          // 输单
          this.editPopTitle = '输单原因'
          this.showEditPop = true
        } else if (params.isEnd === 3) {
          // 无效单
          this.editPopTitle = '无效原因'
          this.showEditPop = true
        } else {
          this.bootBusiness()
        }
      },

      handleDialogConfirm(next, value) {
        this.params.statusRemark = value
        this.bootBusiness()
      },

      bootBusiness() {
        console.log('save: ', this.params)
        this.$refs.popup.close()

        BoostBusinessStatus(this.params).then(response => {
          this.$toast('商机推进成功')
          this.refreshPrevPage = true
          this.getDetail()
        }).catch(() => {})
      }
    }
  }
</script>

<style scoped lang="scss">
.container {
  flex: 1;
  background-color: white;
  overflow: auto;
  padding: 40rpx 30rpx;

  .list {
    .list-item {
      display: flex;
      .icon-box {
        position: relative;
        @include center;
        .icon {
          width: 48rpx;
          height: 48rpx;
          color: $light;
          font-size: 26rpx;
          text-align: center;
          line-height: 48rpx;
          background-color: $main-bg;
          border-radius: 50%;
          border: 1rpx solid #ccc;
        }
        &.failed .icon {
          color: white;
          background-color: #ff6767;
          border-color: transparent;
        }
        &.success .icon {
          color: white;
          background-color: #46CDCF;
          border-color: transparent;
        }
        &.wait .icon {
          color: white;
          background-color: $warning;
          border-color: transparent;
        }

        &:before {
          position: absolute;
          top: calc(50% + 24rpx);
          left: 50%;
          transform: translateX(-50%);
          content: '';
          width: 2rpx;
          height: 100%;
          background: 0 none;
          border-left: 1rpx dotted #ccc;
          display: block;
        }
        &.success:before {
          border: 0 none;
          background-color: #46CDCF;
        }
      }
      .content {
        flex: 1;
        margin-left: 30rpx;
        @include left;
        .info {
          flex: 1;
          flex-direction: column;
          display: flex;
          padding: 25rpx 0;
          .label {
            font-size: 32rpx;
            color: $dark;
          }
          .value {
            font-size: 26rpx;
            color: $light;
            margin-top: 16rpx;
          }
        }
        .status {
          flex-direction: column;
          margin-right: 40rpx;
          @include center;
          .status-icon {
            width: 50rpx;
            height: 50rpx;
          }
          .status-text {
            font-size: 20rpx;
          }
        }
      }

      &.now {
        .content {
          box-shadow: 0 1rpx 16rpx #E3E6E9;
          padding-left: 30rpx;
        }
      }
      &:last-child {
        .icon-box:before {
          display: none;
        }
      }
    }
  }
}

.footer {
  position: fixed;
  bottom: 0;
  bottom: constant(safe-area-inset-bottom);
  bottom: env(safe-area-inset-bottom);
  left: 0;
  width: 100%;
  height: 100rpx;
  font-size: 32rpx;
  text-align: center;
  line-height: 100rpx;
  color: $theme-color;
  border-top: 1rpx solid $border-color;
  background-color: white;
}
</style>