web-test/src/views/vipCenter/dynamicInfo/index.vue

<template>
  <div id="index">
    <el-row>
      <el-col :span="24">
        <el-col :span="24" class="leftTop"> <span>|</span> <span>数据动态</span> </el-col>
        <el-col :span="24" class="info">
          <el-tabs v-model="activeName" type="card">
            <el-tab-pane label="正在洽谈" name="first">
              <zzqt :zzqtList="zzqtList" :total="zzqtTotal"></zzqt>
            </el-tab-pane>
            <el-tab-pane label="达成意向" name="second">
              <dcyx :dcyxList="dcyxList" :total="dxyxTotal"></dcyx>
            </el-tab-pane>
            <el-tab-pane label="交易完成" name="third">
              <jywc :jywcList="jywcList" :total="jywcTotal"></jywc>
            </el-tab-pane>
          </el-tabs>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
import zzqt from './parts/zzqt.vue';
import dcyx from './parts/dcyx.vue';
import jywc from './parts/jywc.vue';
const { mapActions: transactions } = createNamespacedHelpers('transaction');
const { mapActions: dock } = createNamespacedHelpers('dock');
export default {
  name: 'index',
  props: {},
  components: {
    zzqt,
    dcyx,
    jywc,
  },
  data: function() {
    return {
      activeName: 'first',
      dock_id: '',
      zzqtList: [],
      zzqtTotal: 0,
      dcyxList: [],
      dxyxTotal: 0,
      jywcList: [],
      jywcTotal: 0,
    };
  },
  created() {
    this.searchInfo();
  },
  methods: {
    ...transactions({ transactionsfetch: 'fetch', transactionslist: 'query', transactiondetele: 'detele', transactionupdate: 'update' }),
    ...dock({ dockQuery: 'query', dockFetch: 'fetch' }),
    async searchInfo({ skip = 0, limit = 10, ...info } = {}) {
      let res = await this.dockFetch(this.user.remark);
      this.$set(this, `dock_id`, res.data.id);
      let arr = await this.transactionslist({ skip, limit, dockid: this.dock_id, ...info });
      var zzqt = arr.data.filter(item => item.status === '0');
      var dcyx = arr.data.filter(item => item.status === '1');
      var jywc = arr.data.filter(item => item.status === '2');
      this.$set(this, `zzqtList`, zzqt);
      this.$set(this, `zzqtTotal`, zzqt.length);
      this.$set(this, `dcyxList`, dcyx);
      this.$set(this, `dxyxTotal`, dcyx.length);
      this.$set(this, `jywcList`, jywc);
      this.$set(this, `jywcTotal`, jywc.length);
    },
  },
  computed: {
    ...mapState(['user']),
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

<style lang="less" scoped>
.leftTop {
  font-size: 18px;
  width: 96%;
  height: 41px;
  line-height: 35px;
  border-bottom: 1px solid #e5e5e5;
  position: relative;
  bottom: 1px;
  margin: 10px;
  font-weight: 600;
  color: #22529a;
}
.info {
  padding: 0 40px 0 0;
}
</style>