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

<template>
  <div class="bgcolor clew">
    <div class="navBarTOP">
      <van-nav-bar class="navBar" title="客资任务" left-arrow @click-left="onClickLeft">
        <template #right>
          <van-dropdown-menu>
            <van-dropdown-item
              v-model="cid"
              :options="customerClueOption"
              @change="dropdownChange" />
          </van-dropdown-menu>
        </template>
      </van-nav-bar>
      <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>
                <span v-if="item.cid == 7">家装客资</span>
                <span v-if="item.cid == 9">渠道客诉</span>
              </div>
              <div class="info" v-if="item.cid == 7">
                家装类型：{{ item.jzCustomerDescription }}
              </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';
import { getDictOption } from '@/api';
import { mapState } from 'vuex';
import store from '@/store';
export default {
  name: 'clew',
  computed: {
    ...mapState({
      refreshClewPage: (state) => state.isRefreshPage.refreshClewPage,
    }),
  },
  data() {
    return {
      isHandle: '-1',
      disabled: false,
      loading: false,
      list: [],
      finished: true,
      cid: -1,
      customerClueOption: [],
    };
  },
  created() {
    this.getCustomerClue();
    this.approveList();
  },
  activated() {},
  watch: {
    refreshClewPage: {
      handler(val) {
        if (val) {
          this.approveList();
          store.dispatch('setRefreshClewPage', false);
        }
      },
      immediate: true,
    },
    $route(to, from) {
      if (to.path == '/clew' && from.path == '/My/index') {
        this.isHandle = '-1';
        this.cid = -1;
      }
      // 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: {
    async getCustomerClue() {
      let option = await getDictOption({}, 'customer_clue');
      let arr = [{ text: '全部', value: -1 }];
      option.data.forEach((val) => {
        arr.push({
          text: val.dictLabel,
          value: val.dictValue,
        });
      });
      this.customerClueOption = arr;
      console.log(this.customerClueOption);
    },
    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 == 9) {
        // 渠道客诉
        this.$router.push({
          path: '/complaintDetail',
          query: { id: row.customerClueInfoId },
        });
      } else 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() {
      infolist({ type: this.isHandle, cid: this.cid == -1 ? null : this.cid }).then((res) => {
        this.disabled = false;
        this.loading = false;
        this.list = res.data;
      });
    },
    dropdownChange(value) {
      this.list = [];
      this.pageNum = 1;
      this.approveList();
    },
    onClickLeft() {
      this.$router.push('/My/index');
    },
  },
};
</script>
<style lang="scss">
.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: 5px;
}
.newCarList .newlist {
  box-sizing: border-box;
}
.newCarList .newlist .title {
  font-size: 14px;
  font-weight: bold;
  color: #333;
  padding: 5px 0;
  /* 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;
}
.clew {
  .van-nav-bar {
    z-index: 2;
  }
  .van-nav-bar__right {
    height: 40px;
    margin-top: 3px;
    .van-dropdown-menu {
      height: 100%;
      /* border: 1px solid #f4f0f0; */
      .van-dropdown-menu__bar {
        box-shadow: none !important;
      }
    }
  }
  .van-dropdown-menu__bar {
    padding: 0 4px;
    height: 100%;
  }
  .van-dropdown-menu__title::after {
    right: 0 !important;
    border-color: transparent transparent #000000 #000000 !important;
  }
}
</style>