CustomerMgtView.vue

<template>
  <div class="d-page">
    <!--对公客户列表-->
    <div class="wh-100">
      <van-form class="d-form-container w-100 pt-4">
        <mobile-input label="客户名称" :reset="resetvalue" border="true" name="custNam" v-model="custName" placeholder="请输入" size="small"></mobile-input>
        <d-select label="客户类型" placeholder="请选择" :value="custType" border="true" v-model="custType" sfield="custType" size="small"></d-select>
        <d-select label="客户状态" placeholder="请选择" :value="custState" border="true" v-model="custState" sfield="custState" size="small"></d-select>
        <div style="display: flex;justify-content: space-evenly;align-items: self-start">
          <van-button color="#FF574C" type="primary" @click="reset" plain style="width: 70px;height: 34px" size="small">重置</van-button>
          <van-button color="#FF574C" type="primary" @click="loadCustomList(1)" style="width: 70px;height: 34px" size="small">查询</van-button>
        </div>
      </van-form>
      <div class="d-flex flex-column">
        <scroller-view ref="custList" v-calculate-height :pulldown="pulldown" :pullup="pullup" :refresh-data="onrefreshdata" :load-data="onloaddata">
          <div v-for="(item, index) in list" :key="index" class="customer-bottom-list" @click="onClientInfo(item)">
            <div class="customer-bottom-list-top">
              <div>
                <svg class="icon" aria-hidden="true">
                  <!--暂时方案，右侧图标无法传达到内网                <use xlink:href="#icon-gongsimingcheng"></use>-->
                  <use v-if="item.cus_status == '71' || item.cus_status == '70'" xlink:href="#icon-qianzai-32X32"></use>
                  <use v-else-if="item.cus_status == '00' || item.cus_status == '20'" xlink:href="#icon-zhengshi-32X32"></use>
                  <use v-else-if="item.cus_status == 'CA'" xlink:href="#icon-bulu-32X32"></use>
                  <use v-else xlink:href="#icon-qita-32X32"></use>
                </svg>
              </div>
              <div>{{ item.cus_name }}</div>
              <div>
                <div v-if="item.com_scale && item.com_scale != ''">{{ item.com_scale_cnName }}</div>
              </div>
            </div>
            <div class="customer-bottom-list-bottom">
              <div>
                <div>客户号：</div>
                <div>{{ item.cus_id }}</div>
              </div>
              <div>
                <div>主管客户经理：</div>
                <div>{{ item.cust_mgr_cnName }}</div>
              </div>
              <div>
                <div>主管机构：</div>
                <div>{{ item.main_br_cnName }}</div>
              </div>
            </div>
          </div>
        </scroller-view>
      </div>
    </div>

    <!--新增客户-->
<!--    <div class="d-add_user">-->
<!--      <a @click="addUser">-->
<!--        <div class="add_logo">-->
<!--          <div class="add_inside">-->
<!--            <span class="add">新增</span><br />-->
<!--            <span class="add">客户</span>-->
<!--          </div>-->
<!--        </div>-->
<!--      </a>-->
<!--    </div>-->
  </div>
</template>
<script lang="ts">
import { Component, Ref, Vue } from "vue-property-decorator";
import { NativeUI } from "@/public/ts/NativeUI";
import nettyApi from "@/constants/api/ms-netty/netty.api.ts";
import IF from "@/public/factory/InterFaceFactory";
/**
 * @Description 客户列表
 * @Author JiangTao
 * @Date 2021-10-23 下午 06:50
 */
@Component({
  name: "CustomerMgtView",
})
export default class CustomerMgtView extends Vue {
  @Ref() custList: any;
  src = require("../../assets/svg/red-subscript.svg");
  s = {
    backgroundColor: "#fff4f6",
    border: "1px solid #fd5065",
    color: "#fd5065",
    backgroundImage: `url("${this.src}")`,
    backgroundRepeat: "no-repeat",
    backgroundPosition: "right bottom",
  };
  list: any = [];
  // 筛选条件
  custName = "";
  custType = "";
  custState = "";
  resetvalue = false;

  pageNo = 1;
  pullup = true;
  pulldown = true;

  IF: any;

  mounted() {
    const vm = this;
    vm.loadCustomList().then(()=> {
      // 可能是主页布局导致滚动高度有问题，所以第一次上拉未到底就去加载，所以这里默认刷新一下scroll的高度
      vm.custList.refresh();
    });
  }
  /**
   * @Description 重置
   * @Author JiangTao
   * @Date 2022-01-15 下午 06:15
   */
  reset() {
    this.custName = "";
    this.resetvalue = true;
    this.custType = "";
    this.custState = "";
    this.loadCustomList().then(() => {
      this.resetvalue = false;
    });
  }
  //上拉加载
  onloaddata() {
    this.pageNo = Math.ceil(this.list.length / 10) + 1;
    return this.loadCustomList(this.pageNo);
  }

  onrefreshdata() {
    this.pageNo = 1;
    return this.loadCustomList();
  }

  /**
   * @Description 对公客户列表
   * @Author ZPFly
   * @Date 2021/11/4 19:55
   */
  loadCustomList(pageNo = 1) {
    const param = {
      cus_name: this.custName || "",
      maxLine: "10",
      cus_type: this.custType || "",
      cus_status: this.custState || "",
      targetPage: pageNo,
      user_code: sessionStorage.getItem('user_code'),
      tc: nettyApi.TRADE_CODE.selectXDGSXX
    };
    NativeUI.showWaiting("正在查询...");
    return new Promise((resolve, reject) => {
      IF.transferDataInter(nettyApi.commonRq, param).then((res: any) => {
        NativeUI.closeWaiting();
        if (res.rc == "1") {
          if (pageNo == 1) {
            this.list = res.CusComList;
          } else {
            this.list = this.list.concat(res.CusComList);
          }
          if (res.CusComList && res.CusComList.length < 10) {
            // 如果小于10条，说明没有更多数据了,去掉加载更多
            this.pullup = false;
            resolve(true);
          } else {
            //如果等于10条那么就保留加载更多
            this.pullup = true;
            resolve(false);
          }
        } else {
          // 如果查询失败，去掉加载更多
          this.pullup = false;
          NativeUI.toast(res.msg);
          resolve(true);
        }
      });
    });
  }
  addUser() {
    this.$router.push({
      path: "/customer-mgt/AddUserView",
    });
  }

  onClientInfo(item: any) {
    this.$store.commit("setEmpty");
    this.$store.commit("setCusInfo", item);
    this.$router.push({
      path: "/CompanyDetails",
    });
  }
}
</script>

<style scoped lang="scss">
.d-page {
  padding: 0 32px;
}
.d-form-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
::v-deep .d-form-field .van-field__label {
  width: 5em;
}
.customer {
  width: 100%;
  background-color: white;
  padding-top: 2%;
  padding-left: 3%;
}
.customer-top {
  display: flex;
  align-items: center;
  margin-bottom: 2%;
}
.name {
  width: 90%;
  padding-top: 1%;
  padding-bottom: 1%;
  margin-left: 5%;
  border: 1px solid #cccccc;
  border-radius: 5px;
}
.d-add_user {
  position: absolute;
  bottom: 50px;
  right: 50px;
}
.add_logo {
  width: 95px;
  height: 95px;
  background-image: url("../../assets/svg/red-shadow-round.svg");
  background-repeat: no-repeat;
}
.add_inside {
  width: 44px;
  margin: 0 auto;
  padding-top: 18px;
}
.add {
  color: white;
  font-size: 16px;
}
.customer-bottom-list {
  border-radius: 10px;
  background-color: #f8fdff;
  box-shadow: 0 0 6px #d7d7d7;
  margin-bottom: 16px;
  padding-bottom: 15px;
  padding-top: 9px;
  position: relative;
}
.customer-bottom-list-top > div:nth-child(1) svg {
  width: 40px;
  height: 40px;
}
.customer-bottom-list-top > div:nth-child(2) {
  font-size: 115%;
  font-weight: bold;
  font-family: "微软雅黑 Bold", "微软雅黑 Regular", "微软雅黑";
  margin-left: 0.8%;
}
.customer-bottom-list-top {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-left: 16px;
}
.customer-bottom-list-top > div:nth-child(3) {
  width: 28%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  justify-content: space-around;
  grid-column-gap: 4px;
  align-items: center;
  margin-left: 1%;
}
.customer-bottom-list-top > div:nth-child(3) div {
  color: #ff6e0d;
  background-color: rgba(255, 247, 204, 1);
  font-size: 80%;
  padding-top: 2%;
  padding-bottom: 1.5%;
  border-radius: 2px;
  text-align: center;
  width: 100%;
}
.customer-bottom-list-bottom {
  width: 80%;
  display: flex;
  padding-left: 4.5%;
  justify-content: space-between;
  align-items: flex-start;
}
.customer-bottom-list-bottom > div {
  width: 30%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}
.customer-bottom-list-bottom > div > div:nth-child(1) {
  white-space: nowrap;
}
.customer-bottom-list-bottom > div:nth-child(3) {
  width: 40%;
}
.contact-person {
  width: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.contact-person > div:nth-child(1) {
  margin-right: 10px;
  font-family: "Arial Normal", "Arial";
}
.label-type {
  width: 18%;

  border: 1px solid #cccccc;
  border-radius: 5px;
  padding-top: 0.2%;
  padding-bottom: 0.2%;
  margin-left: 1%;
}
::v-deep .scroller {
  padding: 1%;
}
.label {
  width: 170%;
  height: 60%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.label div {
  width: 35%;
  font-size: 13px;
  padding-top: 1.1%;
  padding-bottom: 0.7%;
  border-radius: 5px;
  text-align: center;
  background-color: white;
  border: 1px solid rgba(215, 215, 215, 1);
  margin: 0.7% 1%;
}
.backgroundlogo {
  position: absolute;
  width: 60px;
  top: 25%;
  right: 20%;
}
.backgroundlogo img {
  width: 100%;
  opacity: 0.5;
}
</style>