learning-system-portal/src/views/qa/MyList.vue

<template>
  <div>
    <div style="display: flex;justify-content: space-between;height: 40px;">
      <div>
        <div style="display: flex;justify-content:space-around;padding: 12px 22px 10px 18px;">
          <!--<div style="padding: 0px 5px;"><el-cascader clearable v-model="params.type" :options="typeList"></el-cascader></div>-->
          <div class="uc-center-page" style="margin-right:30px">我的提问</div>
          <div style="padding: 0px 5px;">
            <el-select v-model="queryObj.isResolve" class="uc-select" clearable placeholder="状态">
              <el-option label="全部" value=""></el-option>
              <el-option label="待解决" :value="false"></el-option>
              <el-option label="已解决" :value="true"></el-option>
            </el-select>
          </div>
          <div style="padding: 0px 6px;"><el-input class="uc-input" clearable placeholder="搜索问题" v-model="queryObj.keyWord"></el-input></div>
          <div style="padding: 0px 6px;"><el-button icon="el-icon-search" class="search-btn" @click="getList" type="primary" >搜索</el-button></div>
           <div style="padding-left:5px"><el-button type="primary" class="search-btn" icon="el-icon-refresh-right" @click="reset">重置</el-button></div>
        </div>
      </div>
      <div style="padding: 12px 32px 10px 32px;"><el-button type="primary" style="width: 89px;height: 38px;" icon="el-icon-plus" @click="$refs.addQuestion.askQuestionDialog = true" size="small">提问题</el-button></div>
    </div>
    <div style="padding: 10px 0px 0px 0px;">
      <!-- <el-empty v-if="qaList.length==0" description="暂无数据"></el-empty> -->
      <qa-items @sure="getData" :keyWord="queryObj.keyWord" :items="qaList"></qa-items>
      <div v-if="qaList.length > 0 " style="text-align: center;margin-top:70px">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[10, 20, 30, 40]"
          :current-page="queryObj.pageIndex"
          :page-size="queryObj.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
      <div v-else>
          <div v-if="qaList.length == 0" class="home-no-list">
                <img class="img" style="width:360px;height:226px" :src="`${webBaseUrl}/images/homeWu/no-madel.png`" alt="" srcset="">
                <p class="text"  v-if="isSearh" style="color: #333333;margin-top:50px;font-size: 14px">没有查询到相关内容</p>
                <p class="text" v-else style="color: #333333;margin-top:50px;font-size: 14px">你还没有提问问题哦～</p>
          </div>
      </div>
    </div>
    <div style="height: 100px;"></div>
    <addQuestion @sure="getData" ref="addQuestion"></addQuestion>
  </div>
</template>

<script>
import qaItems from '@/components/Qa/ucList.vue';
import addQuestion from '@/components/Qa/addQuestion.vue';
import apiQa from '@/api/modules/qa.js';
export default {
  name: 'articleMyList',
  components: { qaItems, addQuestion },
  data() {
    return {
      isSearh:false,
      queryObj: {
        pageIndex: 1,
        pageSize: 10
      },
      qaList: [],
      total: 0,

      typeList: [],
      newArticle: {
        dlgShow: false
      },
      askForm: {
        title: '',
        content: '',
        course: '',
        imageUrl: ''
      },
      articleList: []
    };
  },
  mounted() {
    this.getData();
  },
  methods: {

    reset(){
     this.queryObj.keyWord = '',
     this.queryObj.isResolve = '';
     this.queryObj.pageIndex =1;
     this.getData();
     this.isSearh = false;
    },
    getList() {
      this.isSearh = true;
      this.queryObj.pageIndex =1;
      this.getData();
    },
    //获取列表数据
    getData() {
      apiQa
        .queryQuestion(this.queryObj)
        .then(res => {
          if (res.status == 200) {
            this.total = res.result.count;
            res = res.result.list;
            this.qaList = res;
          }
        })
        .catch(err => {
          this.$message.error('获取数据失败');
        });
    },
    handleSizeChange(item) {
      this.queryObj.pageSize = item;
      this.getData();
    },
    handleCurrentChange(item) {
      this.queryObj.pageIndex = item;
      this.getData();
    },
  }
};
</script>

<style scoped lang="scss">
.uc-badge {
  margin-top: 10px;
  margin-right: 40px;
}
.uc-course {
  display: flex;
  justify-content: space-around;
  border: 1px solid #f0f0f0;
  // padding: 10px;
  .uc-course-img {
    width: 200px;
    img {
      width: 200px;
      border: 1px solid #f4f4f5;
    }
  }
  .uc-course-info {
    flex: 1;
    line-height: 28px;
    padding: 0px 10px;
    .uc-course-name {
      font-size: 18px;
      font-weight: 700;
    }
    .uc-course-text {
      color: #747474;
    }
  }
  .uc-course-btns {
    width: 150px;
  }
}
</style>