crm-mobile/pages_oa/record/components/recordItem.vue

<template>
  <view class="record-item">
    <view class="record-item-body">
      <view class="user-info">
        <wk-avatar :size="12" :name="recordData.createUser.realname" :avatar="recordData.userImg" class="avatar" />
        <view class="info">
          <view class="username">
            <text>{{ recordData.createUser.realname }}</text>
            <view v-if="recordData.category" class="category">
              {{ recordData.category }}
            </view>
          </view>
          <view class="text">
            {{ recordData.createTime }}
          </view>
        </view>
        <view v-if="titleMap.hasOwnProperty(recordData.activityType)" class="type-box">
          <template v-if="recordData.activityType !== 8">
            {{ titleMap[recordData.activityType].label }}-{{ getRecordType(recordData) }}
          </template>
          <template v-else>
            {{ titleMap[recordData.activityType].label }}
          </template>
        </view>
      </view>
			
      <view class="log-content content">
        <log-item :log-data="recordData" />
      </view>
    </view>

    <view v-if="titleMap.hasOwnProperty(recordData.activityType)" class="record-item-footer">
      <text :class="titleMap[recordData.activityType].icon" class="wk icon" />
      <view class="text" @click="handleToDetail(recordData)">
        <template v-if="recordData.activityTypeName">
          <text style="color: #333">
            {{ titleMap[recordData.activityType].label }}-
          </text>{{ recordData.activityTypeName }}
        </template>
        <template v-else>
          <text style="color: #333">
            {{ titleMap[recordData.activityType].label }}
          </text>
        </template>
      </view>
    </view>
  </view>
</template>

<script>
  import LogItem from '@/components/base/log-item.vue'
	
  export default {
    name: 'RecordItem',
    components: {
      LogItem
    },
    props: {
      recordData: {
        type: Object,
        required: true
      }
    },
    data() {
      return {
        titleMap: {
          1: {
            label: '线索',
            icon: 'wk-leads',
            path: '/pages_crm/leads/detail'
          },
          2: {
            label: '客户',
            icon: 'wk-customer',
            path: '/pages_crm/customer/detail'
          },
          3: {
            label: '联系人',
            icon: 'wk-contacts',
            path: '/pages_crm/contacts/detail'
          },
          5: {
            label: '商机',
            icon: 'wk-business',
            path: '/pages_crm/business/detail'
          },
          6: {
            label: '合同',
            icon: 'wk-contract',
            path: '/pages_crm/contract/detail'
          },
          8: {
            label: '日志',
            icon: 'wk-log',
            path: '/pages_log/detail'
          }
        },
      }
    },
    methods: {
      /**
       * 跟进记录类型
       */
      getRecordType(item) {
        if (!item.hasOwnProperty('type')) return '跟进记录'
        let str = ''
        switch (item.type) {
        case 1:
          str = '跟进记录'
          break;
        case 2:
          str = '创建记录'
          break;
        case 3:
          str = '商机阶段变更'
          break;
        case 4:
          str = '外勤签到'
          break;
        default:
          str = '跟进记录'
        }
        return str
      },
			
      /**
       * 查看详情
       */
      handleToDetail(data) {
        this.$Router.navigateTo({
          url: this.titleMap[data.activityType].path,
          query: {
            id: data.activityTypeId
          }
        })
      }
    }
  }
</script>

<style scoped lang="scss">
	.record-item {
		position: relative;
		width: 100%;
		background-color: white;
		border-bottom: 1rpx solid $border-color;
		padding: 24rpx 0;
		&:last-child {
			border-bottom: 0 none;
		}

		.record-item-body {
			padding: 0 32rpx;
			.user-info {
				@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;
				}
			}

			.content {
				font-size: 28rpx;
				color: #666;
				margin-top: 20rpx;
				padding-left: 10rpx;

				&.record {
					.special {
						color: $theme-color;
					}
				}
			}
		}

		.record-item-footer {
			width: 100%;
			font-size: 26rpx;
			color: $theme-color;
			padding: 5rpx 40rpx;
			@include left;

			.icon {
				font-size: 32rpx;
				color: $theme-color;
				margin-right: 15rpx;
			}
		}
	}
</style>