ydac/src/components/getsaclientsummary.vue

<template>
  <div>
    <van-nav-bar
      @click-left="onClickLeft"
      @click-right="onClickRight"
      style="background-color: #1989fa"
    >
      <template #title>
        <van-col style="color: #ffffff">客户</van-col>
      </template>
      <template #left>
        <i
          class="fa fa-arrow-circle-left"
          aria-hidden="true"
          style="color: #ffffff; font-size: 18px"
        ></i>
      </template>
      <template #right>
        <van-icon name="replay" size="18" color="#ffffff" />
      </template>
    </van-nav-bar>
    
    <form action="/">
      
            <van-search
            v-model="searchstr"
            show-action
            placeholder="请输入姓名/电话"
            @search="onSearch"
            @cancel="onCancel"
            />
            
     
    </form>
    <van-row class="iconArea">
      <van-col span="24">
        <van-col span="8">
          <router-link to="/addsaclient">
            <van-icon name="friends" badge="+" size="50"/><br/>
            <span>添加</span>
          </router-link>
        </van-col>
        <van-col span="8">
          <router-link to="/filterclient">
            <van-icon name="search"  size="50"/><br/>
            <span>筛选</span>
          </router-link>
        </van-col>
         <van-col span="8">
         
        </van-col>
      </van-col>
    </van-row>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="已显示所有数据"
      @load="GetSaClientSummary"
    >
      <van-cell
        v-for="item in getData"
        :key="item.saleState"
        :title="item.saleState+'客户'"
        :value="item.clientCount"
        border
        is-link
        title-class="title1"
        value-class="value1"
        size="large"
        @click="click1($event, item.saleState)"
      >
        <template #icon>
          <i class="fa fa-heart size" aria-hidden="true" v-if="item.saleState=='问询'" style="color:red;"></i>
          <i class="fa fa-plane size" aria-hidden="true" v-if="item.saleState=='认筹'"></i> 
          <i class="fa fa-sort-alpha-desc size" aria-hidden="true" v-if="item.saleState=='排号'" style="color:green;"></i>
          <i class="fa fa-bars size" aria-hidden="true" v-if="item.saleState=='预订'" style="color:orange;"></i>
          <i class="fa fa-sellsy size" aria-hidden="true" v-if="item.saleState=='认购'" style="color:#ff6600;"></i>
          <i class="fa fa-list-alt size" aria-hidden="true" v-if="item.saleState=='签约'" style="color:#ff6600;"></i>
          <i class="fa fa-product-hunt size" aria-hidden="true" v-if="item.saleState=='公共'" style="color:blue;"></i>
        </template>
      </van-cell>
    </van-list>
  </div>
</template>

<script>
import { GetSaClientSummary } from "@/common/api/loginApi.js";
export default {
  name: "login",
  data() {
    return {
      data: [], 
      loading: false,
      finished: false,
      searchstr:''
    };
  },
  created: function () {
    console.info("created");
    //console.info(this.$util);
    this.$util.persistLogin(this);
  },
  computed:{   //计算属性
    getData:function(){
        var arr=this.data.filter(function(item){
            return item.visible==0;
        });
        console.info('arr',arr);
        return arr;
    }
  },
  methods: {
    GetSaClientSummary: function () {
      var that = this;
      var data = {
        userCode: that.$store.state.data.userCode,
        projectId: that.$store.state.projectId
       
      };
      console.info("data", data);
      GetSaClientSummary(data).then((res) => {
        console.info("GetSaClientSummary", res);
        if (!res.result) {
          that.$toast(res.msg);
          return;
        }
        res.data.forEach(function (item, index, array) {
          that.$set(that.data, index, item);
        });
        that.loading = false;
        that.finished = true;
      });
    },
    // 行选择点击跳转
    click1: function (event, saleState) {
      //console.info("click1 event", event);
        this.$router.push({path:'/getsaclientsummarylist',query:{saleState:saleState}});
    },
    onClickLeft() {
      // this.$toast('返回')
      console.info("left");
      this.$router.go(-1);
    },
    onClickRight() {
      this.$router.go(0);
    },
      onSearch(val) {     //搜索事件
      console.info('onSearch',val);
      this.$router.push('/getsaclientlist?search='+val);
    },
    onCancel() {      //搜索的取消事件
      console.info('onCancel');
      
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.title1 {
  color: #999;
}
.value1 {
  color: #999;
  font-size: 18px;
}
.size{
    font-size:16px;
}
.iconArea{
  border-bottom: #cfcfcf solid 5px;
}
</style>