news-altai/src/views/kjpx/videoList.vue

<template>
  <div id="list">
    <el-row>
      <el-col :span="24">
        <el-col :span="24">
          <top :infoMes="infoMes"></top>
        </el-col>
        <el-col :span="24">
          <menus></menus>
        </el-col>
        <el-col :span="24" class="info">
          <div class="w_1200">
            <el-col :span="24" class="container">
              <span v-if="display == 'list'">
                <el-col :span="24" class="two">
                  <infoList :column_name="title" :infoList="videoList" :total="total" @clickDetail="clickDetail"></infoList>
                </el-col>
              </span>
              <span v-else>
                <el-col :span="24" class="three">
                  <el-col :span="24" class="btn">
                    <el-button type="primary" size="mini" @click="back()">返回</el-button>
                  </el-col>
                  <infoDetail :detail="videodetail"></infoDetail>
                </el-col>
              </span>
            </el-col>
          </div>
        </el-col>
        <el-col :span="24">
          <foot :infoMes="infoMes"></foot>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
import top from '../../components/common/top.vue';
import menus from '../../components/common/menus.vue';
import foot from '../../components/common/foot1.vue';
const { mapActions: video } = createNamespacedHelpers('video');
const { mapActions: siteInfo } = createNamespacedHelpers('siteInfo');
import infoList from './parts/videoLists.vue';
import infoDetail from './parts/videoDetail.vue';
export default {
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  name: 'videoList',
  props: {},
  components: {
    top,
    menus,
    foot,
    infoList,
    infoDetail,
  },
  data: function() {
    return {
      //信息
      infoMes: {},
      // 右侧头部栏目
      title: '',
      total: 0,
      //详情
      detail: {},
      videoList: [],
      // list:列表，detail:详情
      display: 'list',
      videodetail: {},
    };
  },
  created() {
    this.search();
  },
  methods: {
    ...video({ videoquery: 'query', videocreate: 'create', videofetch: 'fetch', videoupdate: 'update', videodelete: 'delete' }),
    ...siteInfo({ sitequery: 'query' }),
    async search() {
      if (this.id) {
        this.display = 'detail';
        this.menuIndex = this.site;
        this.searchDetail(this.id);
      } else {
        this.display = 'list';
      }
      const res = await this.videoquery();
      if (res.errcode === 0) {
        this.$set(this, `videoList`, res.data);
        this.$set(this, `title`, res.data[0].title);
        this.$set(this, `total`, res.total);
      }
    },
    //查详情
    async searchDetail(id) {
      const res = await this.videofetch(id);
      if (res) {
        this.$set(this, `videodetail`, res.data);
      }
    },
    // 点击进入详情
    clickDetail(id) {
      this.display = 'detail';
      this.searchDetail(id);
    },
    back() {
      this.display = 'list';
      // this.searchList(this.site);
    },
  },
  computed: {
    ...mapState(['user']),
    id() {
      return this.$route.query.id;
    },
  },
};
</script>

<style lang="less" scoped>
.w_1200 {
  width: 1200px;
  margin: 0 auto;
}
.info {
  margin-top: 10px;
  margin-bottom: 10px;
  .container {
    .three {
      background-color: #fff;
      padding: 10px;
      overflow: hidden;
      min-height: 623px;
      .btn {
        text-align: right;
        padding: 10px 0px;
      }
    }
  }
}
</style>