opms_wechat/pages/partners/components/followRecords.vue

<template>
  <view class="todo-list">
    <u-empty mode="list" text="暂无记录" v-if="followList.length == 0"></u-empty>
    <view v-else v-for="(v, i) in followList" :key="i">
      <view class="follow-date">
        <u-text :bold="true" size="26rpx" :text="v.followDay"></u-text>
      </view>
      <view class="todo-item" v-for="item in v.followupList" :key="item.id">
        <u-row>
          <u-col span="12">
            <view class="header">
              <u-row>
                <u-col span="12">
                  <view class="flex_l">
                    <text class="tit-txt mb5 text-ellipsis flex_1">
                      {{ item.contactsName }} 跟进（{{ formatType(item.followType) }}）
                    </text>
                  </view>
                </u-col>
              </u-row>
              <view class="tit-txt mb5">跟进内容：</view>
              <view class="content flex">
                <text>{{ item.followContent }}</text>
              </view>
              <view class="tit-txt mb5">达成效果：</view>
              <view class="content flex">
                <text>{{ item.effect }}</text>
              </view>
              <view class="tit-txt mb5">问题或困难：</view>
              <view class="content flex">
                <text>{{ item.issue }}</text>
              </view>
              <view class="tit-txt mb5">下一步跟进计划和目标：</view>
              <view class="content flex">
                <text>{{ item.furtherPlan }}</text>
              </view>
              <view class="content-footer flex1">
                <text class="date">{{ item.followDate }}</text>
                <view class="flex flex-middle">
                  <text class="user-txt">联系人:{{ item.contactsName }}</text>
                </view>
              </view>
            </view>
          </u-col>
        </u-row>
      </view>
    </view>
  </view>
</template>

<script>
  import to from 'await-to-js'
  import followApi from '../../../api/follow'
  export default {
    name: 'OmsCustomerDetail',
    props: {
      targetId: {
        type: [String, Number],
        default: '0',
      },
    },
    data() {
      return {
        followList: [],
      }
    },
    mounted() {
      this.getRecords()
    },

    methods: {
      async getRecords() {
        let params = {
          targetId: '' + this.targetId,
          targetType: '70',
          DaysBeforeToday: 9999,
        }
        const [err, res] = await to(followApi.getListByDay(params))
        if (err) return
        if (res.code == 200) this.followList = res.data.list || []
      },
      formatType(val) {
        let str = ''
        if (val == 10) str = '电话'
        else if (val == 20) str = '邮件'
        else if (val == 30) str = '拜访'
        return str
      },
    },
  }
</script>

<style lang="scss" scoped>
  .todo-list {
    height: 100%;
    overflow: auto;
    .follow-date {
      padding: 20rpx 0 20rpx 20rpx;
    }
    .todo-item {
      padding: 12rpx 40rpx 12rpx 46rpx;
      background: #f2f3f5;
      border-radius: 15rpx;
      margin-bottom: 32rpx;
      .tit-txt {
        font-size: 28rpx;
        font-weight: bold;
        color: #323232;
      }
      .content {
        margin-bottom: 5px;
        // padding: 10rpx 0;
        font-size: 28rpx;
        color: #646464;
      }
      .content-footer {
        padding: 0 0 12rpx 0;
        font-size: 24rpx;
        .date {
          color: #969696;
        }
        .user-img {
          width: 46rpx;
          height: 46rpx;
          border-radius: 50%;
          margin-right: 15rpx;
        }
      }
    }
  }
</style>