storevisit-ui-mobile/src/views/clew/index.vue

<template>
  <div class="bgcolor">
    <div class="navBarTOP">
      <van-nav-bar class="navBar" title="客资任务" left-arrow @click-left="onClickLeft" />
      <van-tabs v-model="isHandle" color="#0057ba" @change="tabChange">
        <van-tab title="未跟进" name="-1" :disabled="disabled"></van-tab>
        <van-tab title="跟进中" name="0" :disabled="disabled"></van-tab>
        <van-tab title="已结案" name="1" :disabled="disabled"></van-tab>
      </van-tabs>
    </div>
    <div class="container">
      <div class="lineGrey"></div>
      <div class="lineGrey"></div>
      <div class="lineGrey"></div>
      <div class="lineGrey"></div>
      <div class="lineGrey"></div>
      <div class="lineGrey"></div>
      <div class="lineGrey"></div>
      <div class="lineGrey"></div>
      <div class="lineGrey"></div>
      <van-list v-model="loading" :finished="finished" finished-text="--已经到底了--">
        <div class="newCarList" v-for="(item, index) in list" :key="index">
          <van-cell is-link>
            <div class="newlist" @click="approveFn(item)">
              <div class="title">
                <p class="textLeft">{{ item.name }}</p>
                <p class="textRight" v-if="isHandle == '-1' || isHandle == '0'">详情</p>
              </div>
              <div class="info">
                客资线索：<span v-if="item.cid == 3">申请代理</span
                ><span v-if="item.cid == 4">开设门店</span
                ><span v-if="item.cid == 5">批量采购</span>
              </div>
              <div class="info">联系电话：{{ item.phone }}</div>
              <div class="info" v-if="item.createTime">首次接入时间：{{ item.createTime }}</div>
              <div class="info" v-if="item.latestClueTime">
                最后一次跟进时间：{{ item.latestClueTime }}
              </div>
            </div>
          </van-cell>
        </div>
        <van-empty description="" v-if="list.length == 0" />
      </van-list>
    </div>
  </div>
</template>

<script>
import { infolist } from '@/api/clew';
export default {
  name: 'clew',
  data() {
    return {
      isHandle: '-1',
      disabled: false,
      loading: false,
      list: [],
      finished: true,
    };
  },
  created() {
    this.approveList();
  },
  watch: {
    $route(to, from) {
      if (to.path == '/clew' && from.path == '/My/index') {
        this.approveList();
      }
      if (to.path == '/clew' && from.path == '/clewent') {
        this.pageNum = 1;
        this.approveList();
      }
    },
  },
  beforeRouteLeave(to, from, next) {
    if (from.path != '/clew') {
      this.$router.push('/My/index');
    }
    next();
  },
  methods: {
    submit() {
      var taskIds = [];
      var instanceIds = [];
      for (var i = 0; i < this.radio.length; i++) {
        taskIds.push(this.radio[i].taskId);
        instanceIds.push(this.radio[i].instanceId);
      }
      var dormData = {
        taskIds: taskIds.join(','),
        instanceIds: instanceIds.join(','),
        variables: JSON.stringify({
          comment: this.blackReason,
          pass: true,
        }),
      };
      this.$dialog
        .confirm({
          message: '确认提交审批？',
        })
        .then(() => {
          completeAll(dormData).then((res) => {
            if (res.code == 200) {
              this.radio = [];
              this.$toast('提交成功！');
              this.submitShow = false;
              this.pageNum = 1;
              this.approveList();
            }
          });
        });
    },
    approveFn(row) {
      if (row.cid == 7) {
        // 家装客资跟进
        this.$router.push({
          path: '/JZfollowUp',
          query: { id: row.customerClueInfoId },
        });
      } else {
        // 非家装客资跟进
        this.list = [];
        this.$router.push({
          path: '/clewent',
          query: { id: row.customerClueInfoId },
        });
      }
    },
    tabChange() {
      this.disabled = true;
      this.list = [];
      this.pageNum = 1;
      this.approveList();
    },
    approveList() {
      let loading1 = this.$toast.loading({
        duration: 0,
        message: '数据加载中...',
        forbidClick: true,
      });
      infolist({ type: this.isHandle }).then((res) => {
        loading1.clear();
        this.disabled = false;
        this.loading = false;
        this.list = res.data;
      });
    },
    onClickLeft() {
      this.$router.push('/My/index');
    },
  },
};
</script>
<style>
.newCarList {
  margin: 14px;
  border-radius: 8px;
  overflow: hidden;
}
.newCarList .van-cell {
  border-radius: 6px;
  overflow: hidden;
}
.newCarList .newlist .title {
  line-height: 32px;
}
.newCarList .van-cell__right-icon {
  top: -4px;
}
.newCarList .newlist {
  box-sizing: border-box;
}
.newCarList .newlist .title {
  font-size: 14px;
  font-weight: bold;
  color: #333;
  line-height: 14px;
}
.newCarList .newlist .info {
  font-size: 14px;
  color: #999;
  line-height: 26px;
}
.newCarList .newlist .title p {
  padding: 0;
  margin: 0;
}
.newCarList .newlist .title .textLeft {
  display: inline-block;
  padding-bottom: 10px;
}
.newCarList .newlist .title .textRight {
  float: right;
  color: #0057ba;
}
.van-tab--active {
  color: #0057ba;
}
</style>