cysci-website/src/views/market/list/swfw.vue

<template>
  <div id="swfw">
    <list-page v-bind="$attrs" :total="total" v-if="!id" @toSearch="search" :pageSize="pageSize">
      <component :is="model" :list="list"></component>
    </list-page>
    <template v-else>
      <dmodel :data="detail" v-if="detail">
        <el-button size="mini" type="primary" @click="$router.push({ path: './list', query: { index: $route.query.index } })"> 返回</el-button>
      </dmodel>
    </template>
  </div>
</template>

<script>
const _ = require('lodash');
import listPage from '@c/list/list-page.vue';
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: product } = createNamespacedHelpers('product');
export default {
  name: 'swfw',
  props: ['listModel'],
  components: {
    listPage,
    model5: () => import('../list-model/model-5.vue'),
    dmodel: () => import('../detail-model/model-5.vue'),
  },
  data: function () {
    return {
      // 列表
      list: [],
      total: 0,
      pageSize: 7,
      // 详情
      detail: {},
    };
  },
  created() {
    this.search();
  },
  methods: {
    ...product(['query', 'fetch']),
    async search({ skip = 0, limit = this.pageSize, ...info } = {}) {
      let res = await this.query({ skip, limit, type: 2, ...info });
      if (this.$checkRes(res)) {
        this.$set(this, `list`, res.data);
        this.$set(this, `total`, res.total);
      }
    },
    // 查询详情
    async searchInfo() {
      let res = await this.fetch(this.id);
      if (this.$checkRes(res)) {
        this.$set(this, `detail`, res.data);
      }
    },
  },
  computed: {
    ...mapState(['user']),
    model() {
      const moduleNumber = this.listModel || 0;
      return `model${moduleNumber}`;
    },
    id() {
      return this.$route.query.id;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    id: {
      handler(ne) {
        if (ne) this.searchInfo();
      },
      immediate: true,
    },
  },
};
</script>

<style lang="less" scoped></style>