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

<template>
  <section class="section about-operation">
    <view class="section-title">
      <image :src="$static('images/crm_about/point.png')" class="icon" />
      <text class="title">
        操作记录
      </text>
    </view>
		
    <view class="section-body">
      <template v-if="listData.length > 0">
        <view class="list">
          <view v-for="(item, index) in listData" :key="index" class="list-item">
            <view class="icon-box">
              <text class="icon" />
            </view>
            <view class="content">
              <view class="user-info">
                <wk-avatar :name="item.realname" :avatar="item.img" class="avatar" />
                <text class="username">
                  {{ item.realname }}
                </text>
                <text class="time">
                  {{ item.createTime }}
                </text>
              </view>
              <view
                v-for="(content, childIndex) in item.content"
                :key="childIndex"
                class="option">
                <text class="option-text">
                  {{ content }}
                </text>
              </view>
            </view>
          </view>
        </view>
      </template>
      <template v-else>
        <view class="no-data">
          暂无数据
        </view>
      </template>
    </view>
  </section>
</template>

<script>
  /**
   * 操作记录
   */
  import { baseRecordList } from 'API/base'
  import { isArray } from '@/utils/types.js'

  export default {
    name: 'AboutOperation',
    props: {
      type: {
        type: String,
        default: null
      },
      detailId: {
        type: [String, Number],
        default: null
      }
    },
    data() {
      return {
        typesMap: {
          crm_customer: {key: 2, value: '客户'},
          crm_contacts: {key: 3, value: '联系人'},
          crm_business: {key: 5, value: '商机'},
          crm_product: {key: 4, value: '产品'},
          crm_contract: {key: 6, value: '合同'},
          crm_leads: {key: 1, value: '线索'},
          crm_invoice: {key: 18, value: '发票'},
        },
        listData: []
      }
    },
    created() {
      this.getList()
    },
    methods: {
      getList() {
        if (!this.typesMap.hasOwnProperty(this.type)) return
        let params = {
          types: this.typesMap[this.type].key,
          actionId: this.detailId
        }
        baseRecordList(params).then(response => {
          if (isArray(response)) {
            this.listData = response
          }
        }).catch()
      }
    }
  }
</script>

<style scoped lang="scss">
	@import './style.scss';
	
  .about-operation {
    background-color: white;

    .section-body {
      padding: 0 30rpx;
      .list {
        margin-top: 36rpx;
        .list-item {
          display: flex;
          .time {
            flex-direction: column;
            @include left;
            .date {
              font-size: 26rpx;
              color: $dark;
            }
            .now {
              font-size: 24rpx;
              color: $gray;
            }
          }

          .icon-box{
            position: relative;
            display: flex;
            .icon {
              z-index: 2;
              width: 20rpx;
              height: 20rpx;
              border-radius: 50%;
              border: 5rpx solid #d5d5d5;
              margin: 14rpx 24rpx 0;
            }
            &::before {
              position: absolute;
              z-index: 1;
              top: 30rpx;
              left: 50%;
              transform: translateX(-50%);
              content: '';
              width: 1rpx;
              height: calc(100% - 16rpx);
              border-left: 1rpx dotted #d8d8d8;
              display: block;
            }
          }

          .content {
            flex: 1;
            padding-bottom: 36rpx;
						overflow: hidden;
            .user-info {
              font-size: 30rpx;
              @include left;
							.avatar {
								width: 70rpx;
								height: 70rpx;
							}
              .username {
                flex: 1;
                margin-left: 15rpx;
              }
              .time {
                font-size: 26rpx;
                color: #999;
              }
            }
            .option {
              font-size: 26rpx;
              color: $gray;
              display: flex;
              flex-wrap: wrap;
              padding-left: 80rpx;
              .option-title {}
              .option-text {
                flex: 1;
								word-break: break-all;
								overflow: hidden;
              }
            }
          }

          &:last-child {
            .icon-box {
              &::before {
                display: none;
              }
            }
          }
        }
      }
    }
  }
</style>