crm-mobile/pages_crm/homeReport/recordDetailList.vue

<template>
  <view class="uni-app">
    <view class="status-bar" />
    <view class="main-container">
      <wk-nav-bar :title="navTitle" />

      <view class="list-view">
        <wk-scroll-view
          :status="listStatus"
          class="list-scroll"
          @refresh="getList({}, true)"
          @loadmore="getList()">
          <view
            v-for="(item, index) in listData"
            :key="index"
            class="record-item"
            @click="handleToDetail(item)">
            <view class="user-info">
              <wk-avatar
                :name="item.realname"
                :avatar="item.userImg"
                :preview="false"
                class="avatar" />
              <view class="info">
                <view class="username">
                  <text>{{ item.realname }}</text>
                  <view
                    v-if="item.category"
                    class="category">
                    {{ item.category }}
                  </view>
                </view>
                <view class="text">
                  {{ item.createTime }}
                </view>
              </view>
              <view class="type-box">
                {{ titleMap[item.activityType].type }}-{{ typeMap[item.type] || '跟进记录' }}
              </view>
            </view>

            <view class="log-content">
              <log-item :log-data="item" :perview="false" />
            </view>

            <view class="record-footer">
              <view :class="titleMap[item.activityType].icon" class="wk icon" />
              <view class="text">
                <text style="color: #333">
                  {{ titleMap[item.activityType].type }}-
                </text>{{ item.activityTypeName }}
              </view>
            </view>
          </view>
        </wk-scroll-view>
      </view>
    </view>
  </view>
</template>

<script>
  import { instrumentQueryRecordList } from 'API/crm/work'
  import { QueryLogBulletinByType } from 'API/oa/journal'

  import LogItem from '@/components/base/log-item.vue'
  import mainListMixins from '@/mixins/mainList.js'
  import { isArray } from '@/utils/types.js'

  export default {
    name: 'RecordDetailList',
    components: {
      LogItem
    },
    mixins: [mainListMixins],
    data() {
      return {
        routerQuery: {},
        GetListFn: instrumentQueryRecordList,

        titleMap: {
          1: {label: '新增的线索跟进记录', type: '线索', icon: 'wk-leads', path: '/pages_crm/leads/detail'},
          2: {label: '新增的客户跟进记录', type: '客户', icon: 'wk-customer', path: '/pages_crm/customer/detail'},
          3: {label: '新增的联系人跟进记录', type: '联系人', icon: 'wk-contacts', path: '/pages_crm/contacts/detail'},
          5: {label: '新增的商机跟进记录', type: '商机', icon: 'wk-business', path: '/pages_crm/business/detail'},
          6: {label: '新增的合同跟进记录', type: '合同', icon: 'wk-contract', path: '/pages_crm/contract/detail'}
        },

        typeMap: {
          1: '跟进记录',
          2: '创建记录',
          3: '商机阶段变更',
          4: '外勤签到'
        }
      }
    },
    computed: {
      navTitle() {
        return this.titleMap[this.routerQuery.crmType].label
      }
    },
    onLoad(options = {}) {
      this.routerQuery = {
      ...options,
      crmType: Number(options.crmType),
      label: Number(options.crmType),
      dataType: Number(options.dataType)
      }
      if (this.routerQuery.logId) {
        this.GetListFn = QueryLogBulletinByType
      }
      this.getList()
    },
    methods: {
      getParams() {
        if (this.routerQuery.logId) {
          return {
            logId: this.routerQuery.logId,
            crmType: this.routerQuery.crmType,
            queryType: 0,
            type: 5
          }
        }
        if (this.routerQuery.userList && !isArray(this.routerQuery.userList)) {
          this.routerQuery.userList = this.routerQuery.userList.split(',')
        }
        if (this.routerQuery.deptList && !isArray(this.routerQuery.deptList)) {
          this.routerQuery.deptList = this.routerQuery.deptList.split(',')
        }
        return {
          queryType: 0,
        ...this.routerQuery
        }
      },

      handleToDetail(item) {
        console.log('item-', item)
        this.$Router.navigateTo({
          url: this.titleMap[item.activityType].path,
          query: {
            id: item.activityTypeId
          }
        })
      }
    }
  }
</script>

<style scoped lang="scss">
.list-view {
  flex: 1;
  overflow: hidden;
  .list-scroll {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;

    .record-item {
      background-color: white;
      margin-top: 20rpx;

      .user-info {
        padding: 20rpx 30rpx;
        @include left;
        .avatar {
          width: 65rpx;
          height: 65rpx;
        }
        .info {
          flex: 1;
          margin-left: 16rpx;
          .username {
            font-size: 28rpx;
            font-weight: 500;
            color: #333;
            @include left;
            .category {
              height: 38rpx;
              font-size: 26rpx;
              color: #999;
              background-color: #f6f6f6;
              border-radius: 38rpx;
              padding: 0 15rpx;
              margin-left: 20rpx;
              @include center;
            }
          }
          .text {
            font-size: 24rpx;
            color: #999;
          }
        }
        .type-box {
          font-size: 24rpx;
          color: #999;
        }
      }

      .log-content {
        padding: 0 30rpx 15rpx;
      }

      .record-footer {
        width: 100%;
        font-size: 26rpx;
        color: $theme-color;
        background-color: #f5f8fa;
        border-top: 1rpx solid $border-color;
        border-bottom: 1rpx solid $border-color;
        padding: 15rpx 30rpx;
        @include left;
        .icon {
          font-size: 32rpx;
          color: $theme-color;
          margin-right: 15rpx;
        }
      }
    }
  }
}
</style>