mobile-official/src/views/user/index/notice.vue

<template>
  <div id="notice">
    <el-row>
      <el-col :span="24" class="notice">
        <el-col :span="24" class="search">
          <van-search v-model="value" placeholder="请输入信息标题" @search="onSearch" />
        </el-col>
        <el-col :span="24" class="mess">
          <el-col :span="24" v-for="(item, index) in list" :key="index" class="list">
            <p class="title textOver">{{ item.title }}</p>
            <p>
              <span class="textOver">发布时间：{{ item.publish_time }}</span>
              <span class="textOver">来源：{{ item.orgin || '暂无' }}</span>
            </p>
          </el-col>
        </el-col>
      </el-col>
      <el-backtop :bottom="50" :right="10"> </el-backtop>
    </el-row>
  </div>
</template>

<script>
const { mapActions: journcolumn } = createNamespacedHelpers('journcolumn');
const { mapActions: journnews } = createNamespacedHelpers('journnews');
import { mapState, createNamespacedHelpers } from 'vuex';
export default {
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  name: 'notice',
  props: {},
  components: {},
  data: function() {
    return {
      columnList: [],
      colId: '',
      list: [],
      value: '',
    };
  },
  async created() {
    await this.search();
    await this.searchList();
  },
  methods: {
    ...journcolumn(['query', 'delete', 'update', 'create']),
    ...journnews({ newQuery: 'query' }),
    //查栏目
    async search() {
      const res = await this.query();
      if (this.$checkRes(res)) {
        this.$set(this, `columnList`, res.data);
        const colData = this.columnList.find(i => i.site == 'tztg');
        this.colId = colData.id;
      }
    },
    //查列表
    async searchList() {
      const res = await this.newQuery({ column_id: this.colId });
      if (this.$checkRes(res)) {
        this.$set(this, `list`, res.data);
      }
    },
    //搜索
    async onSearch({ ...info } = {}) {
      if (this.value) {
        info.title = this.value;
        info.column_id = this.colId;
        const res = await this.newQuery({ ...info });
        if (this.$checkRes(res)) {
          this.$set(this, `list`, res.data);
        }
      } else {
        this.searchList();
      }
    },
  },
  computed: {
    ...mapState(['user']),
  },
  watch: {},
};
</script>

<style lang="less" scoped>
.notice {
  position: relative;
  .search {
    position: fixed;
    width: 100%;
    z-index: 999;
    border-bottom: 1px solid #ccc;
    background-color: #fff;
    .van-search {
      padding: 10px 12px 10px 12px;
    }
  }
  .mess {
    padding: 0px 10px;
    margin-top: 55px;
    .list {
      padding: 10px 0px;
      border-bottom: 1px dashed #ccc;
      .title {
        font-size: 18px;
        font-weight: bold;
      }
      p:nth-child(2) {
        margin-top: 5px;
        span {
          display: inline-block;
          width: 50%;
          height: 42px;
          line-height: 42px;
          color: #666;
        }
      }
    }
  }
}
</style>