mobile-official/src/viewTwo/achieve/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="down">
          <el-col :span="24" class="search">
            <van-search v-model="name" @search="search" placeholder="请输入信息标题" />
          </el-col>
          <el-col :span="24" class="data">
            <list :list="list"></list>
          </el-col>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import list from './parts/list.vue';
import { mapState, createNamespacedHelpers } from 'vuex';
import NavBar from '@/layout/common/topInfo.vue';
const { mapActions: product } = createNamespacedHelpers('product');
export default {
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  name: 'index',
  props: {},
  components: {
    NavBar,
    list,
  },
  data: function() {
    return {
      // 头部标题
      title: '',
      // meta为true
      isleftarrow: '',
      // 返回
      navShow: true,
      active: 0,
      // 查询
      name: '',
      list: [],
    };
  },
  async created() {
    await this.search();
  },
  methods: {
    ...product(['query']),
    async search({ ...info } = {}) {
      if (this.name) info.name = this.name;
      let res = await this.query({ type: 1, ...info });
      if (this.$checkRes(res)) {
        this.$set(this, `list`, res.data);
      }
    },
  },
  computed: {
    ...mapState(['user']),
  },
  mounted() {
    this.title = this.$route.meta.title;
    this.isleftarrow = this.$route.meta.isleftarrow;
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {},
};
</script>

<style lang="less" scoped>
.style {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: #f9fafc;
  .top {
    height: 45px;
    overflow: hidden;
  }
  .down {
    .search {
      position: fixed;
      width: 100%;
      z-index: 999;
      border-bottom: 1px dashed #ccc;
    }
    .data {
      position: absolute;
      width: 100%;
      top: 100px;
    }
  }
}
</style>