mobile-official/src/views/userCenter/matter/index.vue

<template>
  <div id="index">
    <el-row>
      <el-col :span="24" class="style">
        <el-col :span="24" class="top">
          <NavBar v-show="navShow" :title="title" :isleftarrow="isleftarrow"> </NavBar>
        </el-col>
        <el-col :span="24" class="main">
          <van-tabs v-model="active">
            <van-tab title="我的全部">
              <list :list="oneList" status="3" @query="search" @checkBtn="checkBtn"></list>
            </van-tab>
            <van-tab title="我的洽谈">
              <list :list="twoList" status="0" @query="search" @checkBtn="checkBtn"></list>
            </van-tab>
            <van-tab title="我的意向">
              <list :list="threeList" status="1" @query="search" @checkBtn="checkBtn"></list>
            </van-tab>
            <van-tab title="我的交易">
              <list :list="fourList" status="2" @query="search" @checkBtn="checkBtn"></list>
            </van-tab>
          </van-tabs>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import list from './parts/list.vue';
import NavBar from '@/layout/common/topInfo.vue';
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: transaction } = createNamespacedHelpers('transaction');
export default {
  name: 'index',
  props: {},
  components: {
    NavBar,
    list,
  },
  data: function() {
    return {
      // 头部标题
      title: '',
      // meta为true
      isleftarrow: '',
      // 返回
      navShow: true,
      active: 0,
      oneList: [],
      twoList: [],
      threeList: [],
      fourList: [],
    };
  },
  async created() {
    await this.search({ status: '3' });
    await this.search({ status: '0' });
    await this.search({ status: '1' });
    await this.search({ status: '2' });
  },
  methods: {
    ...transaction({ transactionsfetch: 'fetch', transactionslist: 'query', transactiondetele: 'detele', shenheupdate: 'update' }),
    async search({ skip = 0, status, ...info } = {}) {
      let userid = this.user.uid;
      let market_userid = this.user.uid;
      if (status == '3') {
        const res = await this.transactionslist({ skip, userid, ...info });
        const arr = await this.transactionslist({ skip, market_userid, ...info });
        var newData = res.data.concat(arr.data);
        if (this.$checkRes(newData)) {
          this.$set(this, `oneList`, newData);
        }
      } else if (status == '0') {
        const res = await this.transactionslist({ skip, market_userid, status: 0, ...info });
        if (this.$checkRes(res)) {
          this.$set(this, `twoList`, res.data);
        }
      } else if (status == '1') {
        const res = await this.transactionslist({ skip, market_userid, status: 1, ...info });
        const arr = await this.transactionslist({ skip, market_userid, status: 4, ...info });
        var newData = res.data.concat(arr.data);
        if (this.$checkRes(newData)) {
          this.$set(this, `threeList`, newData);
        }
      } else if (status == '2') {
        const res = await this.transactionslist({ skip, market_userid, status: 2, ...info });
        const arr = await this.transactionslist({ skip, userid, status: 2, ...info });
        var newData = res.data.concat(arr.data);
        if (this.$checkRes(newData)) {
          this.$set(this, `fourList`, newData);
        }
      }
    },
    // 交易按钮
    async checkBtn(data) {
      // 同意交易%交易完成
      if (data.status == '0') {
        data.status = '1';
        let res = await this.shenheupdate(data);
        this.$notify({
          message: ' 同意交易成功',
          type: 'success',
        });
        this.searchevery();
      } else if (data.status == '1') {
        this.$router.push({ path: '/userCenter/matter/detail', query: { id: data.id } });
      }
    },
    // 提交刷新
    searchevery() {
      this.search({ status: '3' });
      this.search({ status: '0' });
      this.search({ status: '1' });
      this.search({ status: '2' });
    },
  },
  computed: {
    ...mapState(['user']),
  },
  mounted() {
    this.title = this.$route.meta.title;
    this.isleftarrow = this.$route.meta.isleftarrow;
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

<style lang="less" scoped>
.style {
  width: 100%;
  min-height: 667px;
  position: relative;
  background-color: #f9fafc;
}
.top {
  height: 46px;
  overflow: hidden;
}
.main {
  min-height: 570px;
}
</style>