HM21St_Page_User/src/views/bookStore/all.vue

<template>
  <div class="bookCity">
    <Header
      :headerBg="'#00ADEF'"
      :headerBorder="'#5C5C5C'"
      :userBg="'rgba(0, 0, 0, 0.24)'"
      :LoginNavIndex="this.$route.query.from ? 0 : 1"
    />
    <div class="banner">
      <el-image
        class="image"
        :src="require('../../assets/banner3.png')"
        :fit="'cover'"
        style="
          width: 1200px;
          height: 308px;
          margin: 0 auto;
          border-radius: 16px;
        "
      >
      </el-image>
    </div>
    <div class="filt-box">
      <div class="filt-inner">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">{{
            this.$route.query.from ? "精读课堂" : "商城"
          }}</el-breadcrumb-item>
          <el-breadcrumb-item>{{ nameTypeCn }}</el-breadcrumb-item>
        </el-breadcrumb>
        <h2>筛选：</h2>
        <template v-if="itemType === 'kecheng'">
          <div class="filt-item">
            <label>学段</label>
            <ul>
              <li
                :class="[
                  items.study_phase === courseForm.studyValue ? 'active' : '',
                  courseForm.categoryValue === 'ZB' ? 'not-allow' : '',
                ]"
                v-for="(items, indexs) in studyList"
                :key="indexs"
                @click="
                  handleClick('courseForm', 'studyValue', items.study_phase)
                "
              >
                <i
                  v-if="items.study_phase === courseForm.studyValue"
                  class="el-icon-success"
                ></i>
                {{ items.study_phase_name }}
              </li>
            </ul>
          </div>
          <div class="filt-item">
            <label>类别</label>
            <ul>
              <li
                :class="[
                  itemt.value === courseForm.categoryValue ? 'active' : '',
                ]"
                v-for="(itemt, indext) in categoryList"
                :key="indext"
                @click="handleClick('courseForm', 'categoryValue', itemt.value)"
              >
                <i
                  v-if="itemt.value === courseForm.categoryValue"
                  class="el-icon-success"
                ></i>
                {{ itemt.label }}
              </li>
            </ul>
          </div>
        </template>
        <template v-else-if="itemType === 'baozhi'">
          <div class="filt-item">
            <label>年份</label>
            <ul>
              <li
                :class="[itemy.value === baozhiForm.yearValue ? 'active' : '']"
                v-for="(itemy, indexy) in yearList"
                :key="indexy"
                @click="handleClick('baozhiForm', 'yearValue', itemy.value)"
              >
                <i
                  v-if="itemy.value === baozhiForm.yearValue"
                  class="el-icon-success"
                ></i>
                {{ itemy.label }}
              </li>
            </ul>
          </div>
          <div class="filt-item">
            <label>学段</label>
            <ul>
              <li
                :class="[
                  items.study_phase === baozhiForm.studyValue ? 'active' : '',
                ]"
                v-for="(items, indexs) in baozhiStudyList"
                :key="indexs"
                @click="
                  handleClick(
                    'baozhiForm',
                    'studyValue',
                    items.study_phase,
                    items.study_phase_name
                  )
                "
              >
                <i
                  v-if="items.study_phase === baozhiForm.studyValue"
                  class="el-icon-success"
                ></i>
                {{ items.study_phase_name }}
              </li>
            </ul>
          </div>
          <!-- <div class="filt-item">
            <label>类型</label>
            <ul>
              <li
                :class="[itemt.value === baozhiForm.typeValue ? 'active' : '']"
                v-for="(itemt, indext) in typeList"
                :key="indext"
                @click="handleClick('baozhiForm', 'typeValue', itemt.value)"
              >
                <i
                  v-if="itemt.value === baozhiForm.typeValue"
                  class="el-icon-success"
                ></i>
                {{ itemt.label }}
              </li>
            </ul>
          </div> -->
        </template>
        <template v-else-if="itemType === 'huakan'">
          <div class="filt-item">
            <label>年份</label>
            <ul>
              <li
                :class="[itemy.value === huakanForm.yearValue ? 'active' : '']"
                v-for="(itemy, indexy) in yearList"
                :key="indexy"
                @click="handleClick('huakanForm', 'yearValue', itemy.value)"
              >
                <i
                  v-if="itemy.value === huakanForm.yearValue"
                  class="el-icon-success"
                ></i>
                {{ itemy.label }}
              </li>
            </ul>
          </div>
          <!-- <div class="filt-item">
                    <label>学段</label>
                    <ul>
                        <li :class="[items.study_phase===huakanForm.studyValue?'active':'']" v-for="(items,indexs) in baozhiStudyList" :key="indexs" @click="handleClick('huakanForm','studyValue',items.study_phase,items.study_phase_name)">
                            <i v-if="items.study_phase===huakanForm.studyValue" class="el-icon-success"></i>
                            {{items.study_phase_name}}
                        </li>
                    </ul>
                </div> -->
          <!-- <div class="filt-item">
            <label>类型</label>
            <ul>
              <li
                :class="[itemt.value === huakanForm.typeValue ? 'active' : '']"
                v-for="(itemt, indext) in typeList"
                :key="indext"
                @click="handleClick('huakanForm', 'typeValue', itemt.value)"
              >
                <i
                  v-if="itemt.value === huakanForm.typeValue"
                  class="el-icon-success"
                ></i>
                {{ itemt.label }}
              </li>
            </ul>
          </div> -->
        </template>
        <template v-if="itemType === 'jingdu'">
          <div class="filt-item" v-if="!this.$route.query.from">
            <label>学段</label>
            <ul>
              <li
                :class="[
                  items.study_phase === jingduForm.studyValue ? 'active' : '',
                ]"
                v-for="(items, indexs) in jingduStudyList"
                :key="indexs"
                @click="
                  handleClick(
                    'jingduForm',
                    'studyValue',
                    items.study_phase,
                    items.study_phase_name
                  )
                "
              >
                <i
                  v-if="items.study_phase === jingduForm.studyValue"
                  class="el-icon-success"
                ></i>
                {{ items.study_phase_name }}
              </li>
            </ul>
          </div>
          <div class="filt-item">
            <label>主题</label>
            <ul>
              <li
                :class="[
                  itemy.value === jingduForm.categoryValue ? 'active' : '',
                ]"
                v-for="(itemy, indexy) in themeList"
                :key="indexy"
                @click="handleClick('jingduForm', 'categoryValue', itemy.value)"
              >
                <i
                  v-if="itemy.value === baozhiForm.categoryValue"
                  class="el-icon-success"
                ></i>
                {{ itemy.label }}
              </li>
            </ul>
          </div>
        </template>
        <template v-if="itemType === 'zhuanji'">
          <div class="filt-item">
            <label>年份</label>
            <ul>
              <li
                :class="[itemy.value === zhuanjiForm.yearValue ? 'active' : '']"
                v-for="(itemy, indexy) in yearList"
                :key="indexy"
                @click="handleClick('zhuanjiForm', 'yearValue', itemy.value)"
              >
                <i
                  v-if="itemy.value === zhuanjiForm.yearValue"
                  class="el-icon-success"
                ></i>
                {{ itemy.label }}
              </li>
            </ul>
          </div>
          <div class="filt-item">
            <label>学段</label>
            <ul>
              <li
                :class="[
                  items.study_phase === zhuanjiForm.studyValue ? 'active' : '',
                ]"
                v-for="(items, indexs) in studyList"
                :key="indexs"
                @click="
                  handleClick('zhuanjiForm', 'studyValue', items.study_phase)
                "
              >
                <i
                  v-if="items.study_phase === zhuanjiForm.studyValue"
                  class="el-icon-success"
                ></i>
                {{ items.study_phase_name }}
              </li>
            </ul>
          </div>
        </template>
        <div class="filt-item">
          <label>搜索</label>
          <el-input placeholder="搜索" v-model="searchValue" maxlength="20">
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="handleData(1)"
            ></el-button>
          </el-input>
        </div>
      </div>
    </div>
    <div class="main">
      <BookListModule
        :Bookinfo="Bookinfo"
        :showAll="false"
        @changeStudy="changeStudy"
        :headerBg="'#00ADEF'"
        :headerBorder="'#5C5C5C'"
        :userBg="'rgba(0, 0, 0, 0.24)'"
        :LoginNavIndex="this.$route.query.from ? 0 : 1"
      />
      <el-pagination
        background
        :current-page="currentPages"
        :page-size="page_capacitys"
        :page-sizes="[8, 16, 24, 32, 40]"
        :total="Bookinfo.number"
        layout="total, prev, pager, next, sizes, jumper"
        @size-change="
          (val) => handleSizeChange(val, 'page_capacitys', 'currentPages')
        "
        @current-change="(val) => handleCurrentChange(val, 'currentPages')"
        v-if="Bookinfo.number > 0 && Bookinfo.bookType === 'ZB'"
      />
      <el-pagination
        background
        :current-page="currentPage"
        :page-size="page_capacity"
        :page-sizes="[10, 20, 30, 40, 50]"
        :total="Bookinfo.number"
        layout="total, prev, pager, next, sizes, jumper"
        @size-change="
          (val) => handleSizeChange(val, 'page_capacity', 'currentPage')
        "
        @current-change="(val) => handleCurrentChange(val, 'currentPage')"
        v-else-if="Bookinfo.number > 0 && Bookinfo.bookType !== 'ZB'"
      />
    </div>
  </div>
</template>

<script>
//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》from ‘《组件路径》';
import Header from "../../components/Header.vue";
import BookListModule from "@/components/common/BookAllListModule.vue";
import { getLogin } from "@/api/ajax";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: { Header, BookListModule },
  props: {},
  data() {
    //这里存放数据
    return {
      Bookinfo: {
        BookList: [
          {
            skeleton: true,
          },
          {
            skeleton: true,
          },
          {
            skeleton: true,
          },
          {
            skeleton: true,
          },
          {
            skeleton: true,
          },
          {
            skeleton: true,
          },
          {
            skeleton: true,
          },
          {
            skeleton: true,
          },
          {
            skeleton: true,
          },
          {
            skeleton: true,
          },
        ],
        name: "",
        number: 0,
        numberstr: "",
        bookType: null,
      },
      nameTypeCn: this.$route.query.name
        ? decodeURIComponent(this.$route.query.name)
        : "全部画刊",
      itemType: this.$route.query.type ? this.$route.query.type : "huakan",
      yearList: [
        {
          value: -1,
          label: "全部",
        },
      ],
      studyList: [
        {
          study_phase_name: "全部",
          study_phase: -1,
        },
        {
          study_phase_name: "全学段",
          study_phase: 100,
        },
        {
          study_phase_name: "小学",
          study_phase: 11,
        },
        {
          study_phase_name: "初中",
          study_phase: 20,
        },
        {
          study_phase_name: "初一",
          study_phase: 21,
        },

        {
          study_phase_name: "初二",
          study_phase: 22,
        },
        {
          study_phase_name: "初三",
          study_phase: 23,
        },
        {
          study_phase_name: "高中",
          study_phase: 30,
        },
        {
          study_phase_name: "高一",
          study_phase: 31,
        },
        {
          study_phase_name: "高二",
          study_phase: 32,
        },
        {
          study_phase_name: "高三",
          study_phase: 33,
        },
      ],
      baozhiStudyList: [],
      categoryList: [
        {
          value: "LB",
          label: "录播",
        },
        {
          value: "ZB",
          label: "直播",
        },
      ],
      typeList: [
        {
          value: 0,
          label: "单本",
        },
        {
          value: 1,
          label: "专辑",
        },
      ],
      courseForm: {
        studyValue: window.localStorage.getItem("courseFormstudyValue")
          ? window.localStorage.getItem("courseFormstudyValue") * 1
          : -1,
        categoryValue:
          this.$route.query.type && this.$route.query.type === "kecheng"
            ? window.localStorage.getItem("courseFormcategoryValue")
              ? window.localStorage.getItem("courseFormcategoryValue")
              : "LB"
            : "LB",
      },
      baozhiForm: {
        yearValue: window.localStorage.getItem("baozhiFormyearValue")
          ? window.localStorage.getItem("baozhiFormyearValue") * 1
          : -1,
        studyValue: window.localStorage.getItem("baozhiFormstudyValue")
          ? window.localStorage.getItem("baozhiFormstudyValue") * 1
          : -1,
        typeValue: window.localStorage.getItem("baozhiFormtypeValue")
          ? window.localStorage.getItem("baozhiFormtypeValue") * 1
          : 0,
      },
      huakanForm: {
        yearValue: window.localStorage.getItem("huakanFormyearValue")
          ? window.localStorage.getItem("huakanFormyearValue") * 1
          : -1,
        studyValue: -1,
        typeValue: window.localStorage.getItem("huakanFormtypeValue")
          ? window.localStorage.getItem("huakanFormtypeValue") * 1
          : 0,
      },
      jingduForm: {
        studyValue: this.$route.query.from
          ? this.$route.query.from * 1
          : window.localStorage.getItem("jingduFormstudyValue")
          ? window.localStorage.getItem("jingduFormstudyValue") * 1
          : 11,
        categoryValue: window.localStorage.getItem("jingduFormcategoryValue")
          ? window.localStorage.getItem("jingduFormcategoryValue")
          : "",
      },
      zhuanjiForm: {
        studyValue: this.$route.query.from
          ? this.$route.query.from * 1
          : window.localStorage.getItem("zhuanjiFormstudyValue")
          ? window.localStorage.getItem("zhuanjiFormstudyValue") * 1
          : 11,
        yearValue: window.localStorage.getItem("zhuanjiFormyearValue")
          ? window.localStorage.getItem("zhuanjiFormyearValue") * 1
          : -1,
      },
      currentPage: 1, // 当前页码
      page_capacity: 10, // 每页条数
      currentPages: 1,
      page_capacitys: 8, // 每页条数
      searchValue: "",
      titleName:
        this.itemType === "jingdu"
          ? window.localStorage.getItem("jingduFormstudyValueName")
            ? window.localStorage.getItem("jingduFormstudyValueName")
            : this.itemType === "baozhi"
            ? window.localStorage.getItem("baozhiFormstudyValueName")
            : this.itemType === "huakan"
            ? window.localStorage.getItem("huakanFormstudyValueName")
              ? window.localStorage.getItem("baozhiFormstudyValueName")
              : ""
            : ""
          : "",
      themeList: [],
      jingduStudyList: [
        {
          study_phase: 11,
          study_phase_name: "小学",
        },
        {
          study_phase: 21,
          study_phase_name: "初一",
        },
        {
          study_phase: 22,
          study_phase_name: "初二",
        },
        {
          study_phase: 23,
          study_phase_name: "初三",
        },
      ],
    };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中数据变化
  watch: {},
  //方法集合
  methods: {
    handleClick(form, file, value, name) {
      window.localStorage.setItem(form + file, value);
      if (form === "courseForm" && file === "categoryValue" && value === "ZB") {
        this.courseForm.studyValue = -1;
      } else if (
        form === "courseForm" &&
        file === "categoryValue" &&
        value === "LB"
      ) {
        this.courseForm.studyValue = window.localStorage.getItem(
          "courseFormstudyValue"
        )
          ? window.localStorage.getItem("courseFormstudyValue") * 1
          : -1;
      }
      if (
        form === "courseForm" &&
        file === "studyValue" &&
        this.courseForm.categoryValue === "ZB"
      ) {
        return false;
      }
      if (name) {
        this.titleName = name;
        window.localStorage.setItem(form + "studyValueName", name);
      }
      this[form][file] = value;
      this.currentPage = 1;
      this.currentPages = 1;
      this.handleData();
    },
    handleData(val) {
      if (val) {
        if (this.courseForm.categoryValue === "ZB") {
          this.currentPages = val;
        } else {
          this.currentPage = val;
        }
        // this.pageNumber = val
      }
      let MethodName = "/ShopServer/Client/ShopHomeQuery/PageQueryCourseList";
      let data = {
        page_capacity:
          this.courseForm.categoryValue === "ZB"
            ? this.page_capacitys
            : this.page_capacity,
        cur_page:
          this.courseForm.categoryValue === "ZB"
            ? this.currentPages
            : this.currentPage,
        search_content: this.searchValue.trim(),
      };
      if (this.itemType === "kecheng") {
        (data.course_type = this.courseForm.categoryValue),
          (data.study_phase = this.courseForm.studyValue);
        getLogin(MethodName, data)
          .then((res) => {
            if (res.status === 1) {
              this.Bookinfo = {
                name: this.courseForm.categoryValue === "LB" ? "课程" : "直播",
                number: res.total_count,
                numberstr: "共" + res.total_count + "期",
                study: this.courseForm.studyValue,
                BookList: res.course_list,
                bookType: this.courseForm.categoryValue,
              };
            }
          })
          .catch(() => {});
      } else if (this.itemType === "baozhi") {
        MethodName = "/ShopServer/Client/ShopHomeQuery/PageQueryIssueList";
        data.year_label = this.baozhiForm.yearValue;
        data.study_phase = this.baozhiForm.studyValue;
        data.comb_flag = -1;
        data.album_flag = this.baozhiForm.typeValue;
        data.goods_type = 2;
        getLogin(MethodName, data)
          .then((res) => {
            if (res.status === 1) {
              res.issue_list.forEach((item) => {
                item.course_type = "baozhi";
              });
              this.Bookinfo = {
                name: this.titleName,
                number: res.total_count,
                numberstr: "共" + res.total_count + "期",
                study: this.baozhiForm.studyValue,
                BookList: res.issue_list,
                bookType: "baozhi",
              };
            }
          })
          .catch(() => {});
      } else if (this.itemType === "huakan") {
        MethodName = "/ShopServer/Client/ShopHomeQuery/PageQueryIssueList";
        data.year_label = this.huakanForm.yearValue;
        data.study_phase = -1;
        data.comb_flag = -1;
        data.album_flag = this.huakanForm.typeValue;
        data.goods_type = 4;
        getLogin(MethodName, data)
          .then((res) => {
            if (res.status === 1) {
              res.issue_list.forEach((item) => {
                item.course_type = "huakan";
              });
              this.Bookinfo = {
                name: "",
                number: res.total_count,
                numberstr: "共" + res.total_count + "期",
                study: this.huakanForm.studyValue,
                BookList: res.issue_list,
                bookType: "huakan",
              };
            }
          })
          .catch(() => {});
      } else if (this.itemType === "jingdu") {
        if (this.$route.query.form) {
          MethodName =
            "/ShopServer/Client/BookshelfQuery/PageQueryMyIreadArticleList_UsePeriod";
          data.label = this.jingduForm.categoryValue;
          data.study_phase = this.$route.query.form * 1;
          getLogin(MethodName, data)
            .then((res) => {
              if (res.status === 1) {
                this.Bookinfo = {
                  name: this.titleName,
                  number: res.total_count,
                  numberstr: "共" + res.total_count + "期",
                  study: this.jingduForm.studyValue,
                  BookList: res.iread_article_list,
                  bookType: "jingdu",
                };
              }
            })
            .catch(() => {});
        } else {
          MethodName =
            "/ShopServer/Client/ShopHomeQuery/PageQueryIreadArticleList";
          data.label = this.jingduForm.categoryValue;
          data.study_phase = this.jingduForm.studyValue;
          getLogin(MethodName, data)
            .then((res) => {
              if (res.status === 1) {
                this.Bookinfo = {
                  name: this.titleName,
                  number: res.total_count,
                  numberstr: "共" + res.total_count + "期",
                  study: this.jingduForm.studyValue,
                  BookList: res.iread_article_list,
                  bookType: "jingdu",
                };
              }
            })
            .catch(() => {});
        }
      } else if (this.itemType === "zhuanji") {
        MethodName = "/ShopServer/Client/ShopHomeQuery/PageQueryAlbumList";
        data.year_label = this.zhuanjiForm.yearValue;
        data.study_phase = this.zhuanjiForm.studyValue;
        getLogin(MethodName, data)
          .then((res) => {
            if (res.status === 1) {
              res.album_list.forEach((item) => {
                item.course_type = "zhuanji";
                item.type = 20;
              });
              this.Bookinfo = {
                name: "专辑",
                number: res.total_count,
                numberstr: "共" + res.total_count + "期",
                study: this.zhuanjiForm.studyValue,
                BookList: res.album_list,
                bookType: "zhuanji",
              };
            }
          })
          .catch(() => {});
      }
    },
    handleSizeChange(val, type, page) {
      this[type] = val;
      this[page] = 1;
      this.handleData();
    },
    handleCurrentChange(val, type) {
      this[type] = val;
      this.handleData();
    },
    changeStudy(form, value) {
      this.currentPage = 1;
      this.currentPages = 1;
      this[form].studyValue = value;
      this.handleData();
    },
    // 学段列表
    getStudyList() {
      let MethodName = "/OrgServer/DictManager/GetStudyPhaseList";
      getLogin(MethodName, {})
        .then((res) => {
          if (res.status === 1) {
            this.baozhiStudyList = res.study_phase_list;
            this.baozhiForm.studyValue = window.localStorage.getItem(
              "baozhiFormstudyValue"
            )
              ? window.localStorage.getItem("baozhiFormstudyValue") * 1
              : res.study_phase_list[0]
              ? res.study_phase_list[0].study_phase
              : -1;
            this.huakanForm.studyValue = window.localStorage.getItem(
              "huakanFormstudyValue"
            )
              ? window.localStorage.getItem("huakanFormstudyValue") * 1
              : res.study_phase_list[0]
              ? res.study_phase_list[0].study_phase
              : -1;
            if (this.itemType === "baozhi") {
              this.titleName = window.localStorage.getItem(
                "baozhiFormstudyValueName"
              )
                ? window.localStorage.getItem("baozhiFormstudyValueName")
                : res.study_phase_list[0]
                ? res.study_phase_list[0].study_phase_name
                : "";
            } else if (this.itemType === "huakan") {
              this.titleName = window.localStorage.getItem(
                "huakanFormstudyValueName"
              )
                ? window.localStorage.getItem("huakanFormstudyValueName")
                : res.study_phase_list[0]
                ? res.study_phase_list[0].study_phase_name
                : "";
            } else if (this.itemType === "jingdu") {
              this.titleName = window.localStorage.getItem(
                "jingduFormstudyValueName"
              )
                ? window.localStorage.getItem("jingduFormstudyValueName")
                : res.study_phase_list[0]
                ? res.study_phase_list[0].study_phase_name
                : "";
            } else if (this.itemType === "kecheng") {
              this.titleName = window.localStorage.getItem(
                "courseFormstudyValueName"
              )
                ? window.localStorage.getItem("courseFormstudyValueName")
                : res.study_phase_list[0]
                ? res.study_phase_list[0].study_phase_name
                : "";
            }
          }
        })
        .catch(() => {});
    },
    // 获取年份列表
    getYearList() {
      this.yearList = [
        {
          value: -1,
          label: "全部",
        },
      ];
      let yearList = [];
      let MethodName = "/ShopServer/Client/ShopHomeQuery/GetIssueYearLabelList";
      getLogin(MethodName, {
        goods_type: this.itemType === "baozhi" ? 2 : 4,
      })
        .then((res) => {
          if (res.status === 1) {
            res.year_label_list.forEach((nowYear) => {
              let obj = {
                value: nowYear,
                label: nowYear,
              };
              yearList.push(obj);
            });
            this.yearList = this.yearList.concat(yearList);
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },
    getLabelList() {
      this.themeList = [
        {
          value: "",
          label: "全部",
        },
      ];
      let yearList = [];
      let MethodName =
        "/ShopServer/Client/ShopHomeQuery/GetIreadArticleLabelList";
      getLogin(MethodName, {})
        .then((res) => {
          if (res.status === 1) {
            res.label_list.forEach((nowYear) => {
              let obj = {
                value: nowYear,
                label: nowYear,
              };
              yearList.push(obj);
            });
            this.themeList = this.themeList.concat(yearList);
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    if (this.itemType === "jingdu") {
      this.getLabelList();
    }
    this.getStudyList();
    this.getYearList();
    this.handleData();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    let _this = this;
    let input = document.querySelector("input");
    input.addEventListener("keyup", function (event) {
      // 判断是否按下回车键
      if (event.keyCode === 13) {
        // 回车键被按下，执行你想要的操作
        _this.handleData(1);
      }
    });
  },
  //生命周期-创建之前
  beforeCreated() {},
  //生命周期-挂载之前
  beforeMount() {},
  //生命周期-更新之前
  beforUpdate() {},
  //生命周期-更新之后
  updated() {},
  //生命周期-销毁之前
  beforeDestory() {},
  //生命周期-销毁完成
  destoryed() {},
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() {},
};
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.bookCity {
  min-height: 100%;
  padding-bottom: 50px;
  .banner {
    width: 100%;
    margin-bottom: 40px;
    font-size: 0;
    padding-top: 32px;
    background: linear-gradient(180deg, #00adef 0%, rgba(0, 173, 239, 0) 100%);
    img {
      max-width: 100%;
    }
    .image {
      width: 100%;
      height: 100%;
      display: block;
    }
  }
  .filt-box {
    border-bottom: 1px solid #e5e6eb;
    background: #ffffff;
    .filt-inner {
      width: 1200px;
      margin: 0 auto;
      padding: 40px 0;
      h2 {
        font-weight: 600;
        font-size: 16px;
        line-height: 24px;
        color: #2f3742;
        padding: 28px 0;
        margin: 0;
      }
      .filt-item {
        display: flex;
        margin-bottom: 8px;
        label {
          width: 52px;
          font-weight: 400;
          font-size: 16px;
          line-height: 32px;
          color: #2f3742;
          flex-shrink: 0;
        }
        ul {
          list-style: none;
          display: flex;
          flex-flow: wrap;
          padding: 0;
          margin: 0;
          li {
            margin: 0 8px 16px 0;
            background: #f2f3f5;
            border-radius: 2px;
            padding: 3px 11px;
            font-weight: 500;
            font-size: 16px;
            line-height: 24px;
            color: #2f3742;
            cursor: pointer;
            border: 1px solid #f2f3f5;
            height: 32px;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            &:hover {
              color: #165dff;
            }
            &.not-allow {
              cursor: not-allowed;
              background: #f2f3f5;
              color: #c1c5cd;
            }
            &.active {
              color: #165dff;
              border-color: #165dff;
              background: #ffffff;
              .el-icon-success {
                margin-right: 4px;
                font-size: 12px;
                margin-top: 2px;
              }
            }
            &.not-allow.active {
              color: #cedcfe;
              border-color: #cedcfe;
            }
          }
        }
        .el-input {
          width: 240px;
          height: 32px;
          background: #f2f3f5;
          border-radius: 2px;
        }
      }
    }
  }
  .main {
    width: 1200px;
    margin: 52px auto;
  }
}
</style>
<style lang="scss">
.bookCity {
  .el-breadcrumb__inner.is-link {
    color: #4e5969;
    &:hover {
      color: #165dff;
    }
  }
  .el-breadcrumb__separator {
    color: #c9cdd4;
  }
  .el-breadcrumb__item:last-child .el-breadcrumb__inner {
    color: #1d2129;
    font-weight: 500;
  }
  .filt-box {
    input {
      height: 32px;
      line-height: 32px;
      background: #f2f3f5;
      border: none;
    }
    .el-input__icon {
      line-height: 32px;
      cursor: pointer;
      color: #4e5969 !important;
    }
    .el-input-group__append {
      background: #f2f3f5;
      border: none;
    }
    .el-button {
      padding: 9px 12px;
    }
  }
  .el-pagination {
    text-align: left;
  }
}
</style>