RuoYi-flowable-master/ruoyi-ui/src/views/mobile/crm/index.vue

<template>
  <div class="mobileWrapper">
    <div class="fixedTop">
      <van-nav-bar
        title="重点客户"
        right-text="新建"
        v-preventReClick
        @click-right="onClickRight"
      />
      <van-search
        v-model="queryParams.companyName"
        show-action
        label="客户"
        placeholder="请输入客户名称"
        @search="onSearch"
      >
        <template #action>
          <div @click="onSearch" v-preventReClick>搜索</div>
        </template>
      </van-search>
    </div>

    <div class="listWrapper">
      <!-- 内容 -->
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text=""
          @load="onLoad"
          class="list"
        >
          <div
            class="item"
            v-for="(item, index) in list"
            :key="index"
            v-preventReClick
            @click="toDetail(item.id)"
          >
            <div>{{ item.companyName }}</div>
            <div>负责人：{{ item.createBy }}</div>
            <van-tag class="public-margin-t-10" type="primary" size="large">{{
              item.companyEnterprisepro
            }}</van-tag>
            <van-tag class="public-margin-l-10" type="primary" size="large">{{
              item.companyState
            }}</van-tag>
          </div>
        </van-list>
      </van-pull-refresh>
      <div v-if="noDate" class="noDateWrapper">
        <div>没有相关数据</div>
        <div>您可以尝试以下操作</div>
        <van-button type="info" round v-preventReClick @click="onClickRight"
          >新建重点客户</van-button
        >
      </div>
    </div>
  </div>
</template>
<script>
import { get_customer_list } from "@/api/mobile/crm/index";
export default {
  name: "MobileCrmIndex",
  data() {
    return {
      list: [],
      refreshing: false,
      loading: false,
      finished: false,
      noDate: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        companyName: null,
      },
    };
  },
  created() {},
  mounted() {},
  methods: {
    toDetail(id) {
      this.$router.push({ path: "detail", query: { id } });
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false;
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
    },
    onClickRight() {
      this.$router.push({ name: "MobileCrmForm", query: { type: 1 } });
    },
    onSearch() {
      this.getList();
    },
    onLoad() {
      this.getList();
    },
    getList() {
      let that = this;
      if (this.refreshing) {
        this.list = [];
        this.refreshing = false;
      }
      that.$toast.loading({
        duration: 0,
        forbidClick: true,
        message: "加载中...",
      });
      get_customer_list(that.queryParams)
        .then((response) => {
          if (response.code == 200) {
            that.$toast.clear();
            let data = response.rows,
              total = response.total;
            that.finished = true;
            that.noDate = false;
            if (total == 0) {
              that.list = [];
              that.noDate = true;
            } else if (total < 10) {
              that.list = data;
            } else {
              that.finished = false;
              that.list.push(...data);
              that.queryParams.page += 1;
            }
            that.loading = false;
          }
        })
        .catch((err) => {
          that.$toast(err.msg);
        });
    },
  },
};
</script>
<style lang="scss">
.fixedTop{
  width:100%;
  position: fixed;
  top:0;
  left:0;
  z-index: 99;
}
.listWrapper {
  margin-top:100px;
  background: #f4f4f4;
  // padding-bottom:100px;
}
.searchBar {
  text-align: center;
  background: #fff;
  padding: 10px 0;
}
.list {
  width: 100%;
  .item {
    margin: 10px 0;
    padding: 10px 3%;
    background: #fff;
    color: #aaa;
    font-size: 14px;
    // border: 1px solid #ccc;
    > div:first-child {
      font-weight: bold;
      font-size: 18px;
      line-height: 30px;
      color: #333;
    }
  }
}
.noDateWrapper {
  width: 100%;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  > div {
    color: #8a8989;
  }
  button {
    margin-top: 10px;
  }
}
</style>