opms_frontend/src/views/proj/business/components/DetailsFollow.vue

<template>
  <div>
    <ul v-if="followList.length" class="follow">
      <li v-for="(date, index) in followList" :key="index">
        <div class="date">
          <h2>{{ date.followDay.split('-')[2] }}</h2>
          <h3>
            {{ date.followDay.split('-').splice(0, 2).join('.') }}
          </h3>
        </div>
        <ul class="content">
          <li v-for="(item, idx) in date.followupList" :key="idx">
            <!-- <el-avatar class="user-avatar"
      :src="avatar" />-->
            <div class="text-container">
              <vab-icon class="user-avatar" icon="account-circle-fill" />
              <div class="text">
                <p class="action">
                  <span>{{ item.contactsName }} 跟进（{{ formatType(item.followType) }}）</span>
                  <span>
                    <vab-icon icon="time-line" />
                    {{ item.followDate }}
                  </span>
                </p>
                <p>{{ item.followContent }}</p>
                <div class="footer">
                  <p>
                    来自客户：
                    <span>{{ item.custName }}</span>
                  </p>
                  <div>
                    <el-button size="mini" @click="showDetail(item)">
                      <vab-icon icon="arrow-right-circle-fill" />
                      详情
                    </el-button>
                    <el-button size="mini" @click="showComment(item)">评论({{ item.commentNumber }})</el-button>
                  </div>
                </div>
              </div>
            </div>
            <transition name="height">
              <ul v-if="item.showComment" class="comments">
                <li v-for="comment in item.comments" :key="comment.id">
                  <vab-icon class="user-avatar" icon="account-circle-fill" />
                  <div class="text">
                    <p>{{ comment.createdName }}</p>
                    <p>{{ comment.content }}</p>
                    <p>{{ comment.createdTime }}</p>
                  </div>
                </li>
              </ul>
            </transition>
          </li>
        </ul>
      </li>
    </ul>
    <div v-else class="no-follow">暂无跟进记录</div>
  </div>
</template>

<script>
  import follow from '@/api/customer/follow'
  import to from 'await-to-js'

  export default {
    name: 'Records',
    props: {
      busId: {
        type: Number,
        default: 0,
      },
    },
    data() {
      return {
        followList: [],
      }
    },
    mounted() {
      console.log(this.busId)
    },
    methods: {
      async fetchData() {
        let params = {
          targetId: String(this.busId),
          DaysBeforeToday: 9999,
        }
        let err, res
        ;[err, res] = await to(follow.getListByDay(params))
        if (err) return
        this.followList = res.data.list || []
      },
    },
  }
</script>

<style lang="scss" scoped>
  .follow {
    height: 100%;
    padding: 10px 20px;
    overflow: auto;

    > li {
      display: flex;

      + li {
        margin-top: 10px;
      }
    }

    .date {
      width: 100px;
      display: flex;
      flex-direction: column;
      align-items: center;

      h2,
      h3 {
        margin: 0;
      }

      h2 {
        font-size: 26px;
        line-height: 32px;
      }
    }

    .content {
      flex: 1;
      list-style: none;

      > li {
        border: 1px solid rgb(215, 232, 244);
        background: rgb(247, 251, 254);
        border-radius: 4px;
        padding: 8px;
        overflow: hidden;

        .text-container {
          display: flex;
        }

        .comments {
          padding-left: 60px;
          margin-top: 10px;
          max-height: 190px;
          overflow: auto;

          li {
            display: flex;
            border-top: 1px solid #e3e5e7;

            .text {
              flex: 1;
              padding: 0 10px;

              p {
                font-weight: 500;
                margin: 0;
                line-height: 32px;
              }

              p:first-child {
                line-height: 30px;
                font-weight: bold;
              }

              p:last-child {
                font-size: 12px;
                color: #9499a0;
                text-align: right;
              }
            }
          }
        }

        + li {
          margin-top: 10px;
        }
      }

      .user-avatar {
        font-size: 40px;
      }

      .text {
        flex: 1;
        padding-left: 20px;
        padding-right: 10px;

        p {
          font-weight: 500;
          margin: 0;
          line-height: 32px;

          span {
            color: #1d66dc;
          }
        }

        .action {
          display: flex;
          justify-content: space-between;

          span:first-child {
            font-weight: bold;
            color: #333;
          }
        }

        .footer {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
      }
    }
  }

  .no-follow {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.65);
  }
</style>