团队冲刺(2)

今日完善高级检索:

<template>
  <div class="show" style="background-color: white">
    <el-row style="flex-direction: column">
      <el-col :span="12" :offset="6" style="margin-top: 35px">
        <el-input
          placeholder="请输入内容"
          v-model="keyword1"
          class="input-with-select"
          @keyup.enter.native="search"
        >
          <el-select
            v-model="type1"
            slot="prepend"
            placeholder="请选择"
            @change="typeChange"
          >
            <el-option label="主题" value="title"></el-option>
            <el-option label="作者" value="auther"></el-option>
            <el-option label="文献来源" value="rouse"></el-option>
            <el-option label="篇名" value="name"></el-option>
            <el-option label="参考文献" value="look"></el-option>
            <el-option label="关键词" value="word"></el-option>
          </el-select>
          <el-select
            v-model="range1"
            slot="append"
            placeholder="请选择"
            @change="typeChange"
          >
            <el-option label="精确" value="precise"></el-option>
            <el-option label="模糊" value="dim"></el-option>
          </el-select>
        </el-input>
      </el-col>

      <el-col :span="12" :offset="6" style="margin-top: 35px">
        <el-input
          placeholder="请输入内容"
          v-model="keyword2"
          class="input-with-select"
          @keyup.enter.native="search"
        >
          <el-select
            v-model="type2"
            slot="prepend"
            placeholder="请选择"
            @change="typeChange"
          >
            <el-option label="主题" value="title"></el-option>
            <el-option label="作者" value="auther"></el-option>
            <el-option label="文献来源" value="rouse"></el-option>
            <el-option label="篇名" value="name"></el-option>
            <el-option label="参考文献" value="look"></el-option>
            <el-option label="关键词" value="word"></el-option>
          </el-select>
          <el-select
            v-model="range2"
            slot="append"
            placeholder="请选择"
            @change="typeChange"
          >
            <el-option label="精确" value="precise"></el-option>
            <el-option label="模糊" value="dim"></el-option>
          </el-select>
        </el-input>
      </el-col>

      <el-col :span="1" :offset="1" style="margin-top: 35px">
        <el-select v-model="AND3" placeholder="AND" @change="typeChange">
          <el-option label="AND" value="AND"></el-option>
          <el-option label="OR" value="OR"></el-option>
          <el-option label="NOT" value="NOT"></el-option>
        </el-select>
      </el-col>
      <el-col :span="12" :offset="6" style="margin-top: 35px">
        <el-input
          placeholder="请输入内容"
          v-model="keyword3"
          class="input-with-select"
          @keyup.enter.native="search"
        >
          <el-select
            v-model="type3"
            slot="prepend"
            placeholder="请选择"
            @change="typeChange"
          >
            <el-option label="主题" value="title"></el-option>
            <el-option label="作者" value="auther"></el-option>
            <el-option label="文献来源" value="rouse"></el-option>
            <el-option label="篇名" value="name"></el-option>
            <el-option label="参考文献" value="look"></el-option>
            <el-option label="关键词" value="word"></el-option>
          </el-select>
          <el-select
            v-model="range3"
            slot="append"
            placeholder="请选择"
            @change="typeChange"
          >
            <el-option label="精确" value="precise"></el-option>
            <el-option label="模糊" value="dim"></el-option>
          </el-select>
        </el-input>
      </el-col>

      <el-col :span="1" :offset="1" style="margin-top: 35px">
        <el-select v-model="AND2" placeholder="AND" @change="typeChange">
          <el-option label="AND" value="AND"></el-option>
          <el-option label="OR" value="OR"></el-option>
          <el-option label="NOT" value="NOT"></el-option>
        </el-select>
      </el-col>
    </el-row>

    <div class="block" style="margin-top: 35px">
      <span class="demonstration">时间范围：</span>
      <el-date-picker v-model="time1" type="date" placeholder="选择日期"></el-date-picker>
      <span class="demonstration">   -----   </span>
      <el-date-picker v-model="time2" type="date" placeholder="选择日期"></el-date-picker>
    </div>

    <div style="margin-top: 35px">
      <el-button
        slot="append"
        type="primary"
        @click.native.prevent="search"
        icon="el-icon-search"
        >高级检索
      </el-button>
    </div>
  </div>
</template>

<script>

  data() {

    return {

    currentPage: 1, // 初始页码

    pageSize: 2, // 每页的数据

    total: 0, // 总记录数

    contents: [], //查询结果

      keyword1: "", // 关键词

      keyword2: "", // 关键词

      keyword3: "", // 关键词

      type1: "主题", //查询方式

      type2: "作者", //查询方式

      type3: "文献来源", //查询方式

      range1: "精准",

      range2: "精准",

      range3: "精准",

      AND2: "AND",

      AND3: "AND",

      time1: "",

      time2: "",

    };

  },

    methods: {

      async search() {

      //解构出参数

      const { keyword1, keyword2, keyword3,type1, type2,type3, range1, range2, range3, AND2,AND3,time1, time2 } = this;

        try {

          //注册成功

          //await this.$store.dispatch("getHighSearchList", { keyword1, keyword2, keyword3,type1, type2,type3, range1, range2, range3, AND2,AND3,time1, time2 });

          await this.$store.dispatch("getBookList");

        } catch (error) {

          //注册失败

          alert(error.message);

         }

      },

          handleSizeChange: function (size) {

      this.pageSize = size;

      console.log("每页大小:" + this.pageSize); //每页下拉显示数据

    },

    // 页码变更处理函数

    handleCurrentChange: function (page) {

      this.pageNum = page;

      console.log("当前页码:" + this.pageNum); //点击第几页

    },

    },

    computed: {

    ...mapState({

      bookList: (state) => state.book.bookList,

      //bookList: (state) => state.booktext.bookList,

    }),

  },

};

</script>

<style>
.show {
  margin: 100px auto;
  width: 80%;
  height: 450px;

  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4);
  border-radius: 10px;
  font-size: 20px;
}
/* 
.show:hover {
  box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.4);
  margin-top: 90px;
} */
</style>

 预计明日完城：用户登录的修改，

遇到问题：

搜搜功能的传参，最终结果的展示。