vue 筛选对接扣

vue 编写产品筛选功能

根据行业筛选一级，（国家，价格，发布时间）列表带分页，按时间或者价格排序，以及分页设置10条/页码，20条/页码，50条/页码

以下代码

去博客设置页面，选择一款你喜欢的代码片高亮样式，下面展示同样高亮的 代码片.

<div class="industries_cont clearfix">
        <div class="indus_left">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <img src="../../assets/images/TopIndustriesicon.png" alt />
              <span>Top Industries</span>
            </div>
            <div
              @click="updateRightList(item.id,item.link,item.title)"
              v-for="(item,index) in indiustries_list"
              :key="index"
              :class="['indus_title',{'color_main':item.id == id || item.title == namePath}]"
              :style="{'display':item.count == 0 ? 'none':'block'}"
            >
              <span class="name">{{item.title }}</span>
              <span class="num">({{item.count}})</span>
            </div>
          </el-card>
        </div>
        <div class="indus_right">
          <div class="filter_lr clearfix">
            <div class="filter_l">
              <ul>
                <li>region</li>
                <li>Price</li>
                <li>Dates</li>
              </ul>
            </div>
            <div class="filter_r">
              <div class="filter_list">
                <ul class="country clearfix">
                  <li
                    :class="item.id==cur?'active':''"
                    @click="filterCountry(item.id,index)"
                    v-for="(item,index) in filter.country"
                    :key="index"
                  >
                    <span>{{item.name}}</span>
                  </li>
                </ul>
                <ul class="price clearfix">
                  <li
                    :class="item.price_id==cur1?'active':''"
                    @click="filterPrice(item.price_id,index)"
                    v-for="(item,index) in filter.price"
                    :key="index"
                  >
                    <span>{{item.price}}</span>
                  </li>
                </ul>
                <ul class="dates clearfix">
                  <li
                    :class="item.date_id==cur2?'active':''"
                    @click="filterDates(item.date_id,index)"
                    v-for="(item,index) in filter.dates"
                    :key="index"
                  >
                    <span>{{item.date}}</span>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="filter_box" v-if="this.error_code !== 60001">
            <div class="page_query">
              <p class="pl">
                Total ：
                <span>{{records.count}}</span>records,
                <span>{{records.pageCount}}</span> pages
              </p>
              <p class="pr">
                Page Size:
                <select
                  value="10"
                  class="ps_sel"
                  @change="getSize($event)"
                  v-model="params.pageSize"
                >
                  <option value="10">10</option>
                  <option value="20">20</option>
                  <option value="50">50</option>
                </select>
                Sort By:
                <select
                  value="time"
                  class="sort_sel"
                  @change="getOrderby($event)"
                >
                  <option value="time">time</option>
                  <option value="price">price</option>
                </select>
              </p>
            </div>
            <div class="record_list">
              <b-row v-for="(item,index) in records.result" :key="index">
                <b-col cols="2">
                  <div class="record_img">
                    <img :src="sourceIp+item.thumb" alt />
                    <img v-if="item.thumb === null" src="../../assets/images/abc.png" alt />
                    <div
                      class="activity_abso"
                      :style="{'display':item.discount == 100 ? 'none':'block'}"
                    >
                      <div class="off">
                        {{item.discount}}%
                        <br />off
                      </div>
                      <div class="until">
                        <p>
                          Until
                          <br />
                          {{item.discount_time_end}}
                          <span class="th">th</span>
                          <span class="date">{{item.discount_time_end_year}}</span>
                        </p>
                      </div>
                    </div>
                  </div>
                </b-col>
                <b-col cols="8" style="padding:0">
                  <div class="record_cen">
                    <router-link
                      :to="{path:'/Industries/Descshow',query:{id:item.id,url:item.url}}"
                    >
                      <p class="title">{{item.name}}</p>
                    </router-link>
                    <p class="mt20 color_666" @click="updateRightList(item.category_id,item.link,item.category_name)">{{item.category_name}}</p>
                    <p class="da_pa_ta">
                      {{item.published_date}}
                      <span>|</span>
                      Pages:{{item.pages}}
                      <span>|</span>
                      Tables:{{item.tables}}
                    </p>
                    <p class="price">
                      <span
                        class="color_main"
                        v-show="item.discount <100"
                      >USD{{item.singleUserPrice}}</span>
                      <span
                        :class="item.discount < 100 ?'price_discount':'price_discount2'"
                      >USD{{item.single_user_price}}</span>
                      <span>(Single User Price)</span>
                    </p>
                  </div>
                </b-col>
                <b-col cols="2">
                  <div class="two_but">
                    <div class="add_cat">
                      <span>Add To Car</span>
                    </div>
                    <div class="buy">
                      <span>Buy Now</span>
                    </div>
                  </div>
                </b-col>
              </b-row>
            </div>
            <div class="paging_lrbox">
              <b-pagination
                @change="handleCurrentChange"
                v-model="currentPage"
                :total-rows="rows"
                :per-page="params.pageSize"
                prev-text="< Previous"
                first-text="First"
                next-text="Next"
                last-text="Last >"
                size="md"
                align="center"
              ></b-pagination>
            </div>
          </div>
          <div class="filter_box" v-if="this.error_code === 60001">
            <div class="nofund" style>
              <img src="../../assets/images/nofound.png" alt />
            </div>
            <p
              style="text-align:center;color:#333;font-size:16px;margin-top:20px;font-weight:bold;"
            >No Eligible Results Were Found</p>
          </div>
        </div>
      </div>
import API from "@/api/index.js";
export default {
  name: "List",
  data() {
    return {
        sourceIp:this.global.sourceIp,
      //   loading: true,
      testtitle:'',
      singleUserPrice: "",
      cur: 0,
      cur1: 0,
      cur2: 0,
      rows: 0,
      currentPage: 1,
      perPage: 10,
      categoryId: "",
      title: "",
      urlNew: "",
      indiustries_list: [],
      error_code: "",
      id: "",
      //   category: [],
      //筛选条件
      filter: {
        country: [],
        price: [],
        dates: []
      },
      params: {
        // count:'',
        page: 1,
        pageSize: 10,
        orderBy: "time",
        country_id: "",
        industry_id: "",
        date_id: "",
        // category_id: "",
        price_id: "",
        // price_min: "",
        // price_max: "",
        dates: ""
      },
      records: [],
      namePath: ""
    };
  },
  created() {
    // let that = this;
    // that.$bus.$on("toAllIndusItemPath", (path) => {
    //     console.log('啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊');
    //   this.namePath = path;
    // this.namePath = sessionStorage.path;
    // });
    
  },
  destroyed() {
    this.$bus.$off("rerefreshAlbumData");
    this.$bus.$off("toAllIndusItemPath");
    this.$bus.$off("setNamePath");
    // BUS.$off('loginSuccess')
  },
  mounted() {
      this.namePath = sessionStorage.getItem("lastnamePath");
    this.$bus.$on("rerefreshAlbumData", () => {
      this.toAllIndus();
    });
    this.$bus.$on("toAllIndusItemPath", (id,title,namePath) => {  
        this.namePath =  sessionStorage.getItem("lastnamePath");
        this.updateRightList(id,title,namePath)
    });
    

     this.$bus.$on("setNamePath", (path) => {
      this.namePath = sessionStorage.getItem("lastnamePath");
    });
    this.title = sessionStorage.title;
    this.id = sessionStorage.id;
    this.id = this.$route.query.id; //控制是否显示>（面包屑导航栏>）
    this.params.industry_id = this.$route.query.id; //刷新保存行业id
    // this.namePath = this.$route.query.title;
    // this.namePath = this.testtitle;
    this.categoryList();

    this.listFilters();
    this.$router.beforeEach((to, from, next) => {
        
      next();
    });
    this.ScreeningResults();
    this.$forceUpdate(); //刷新
    // this.urlDecode(); //url编码转码
  },
  methods: {
    toAllIndus(id, title) {
      this.$router.push({
        path: "/Industries/List",
        query: { id: "" }
      });
      //   this.getAll()
      sessionStorage.setItem("lastnamePath", '');
      this.namePath = sessionStorage.getItem("lastnamePath");
      this.id = "";
      (this.title = ""), (this.params.page = 1);
      this.params.pageSize = 10;
      this.params.orderBy = "time";
      this.params.industry_id = "";
      this.params.country_id = this.filter.country[0].id;
      this.params.price_id = this.filter.price[0].price_id;
      this.params.date_id = this.filter.dates[0].date_id;
      this.cur = this.filter.country[0].id;
      this.cur1 = this.filter.price[0].price_id;
      this.cur2 = this.filter.dates[0].date_id;
      this.params.dates = "";
      this.ScreeningResults();
    },
    getSize(e) {
      console.log(e.target.value); //10,20,50
      console.log(e.target.selectedIndex); //0,1,2
      this.params.pageSize = e.target.value;
      this.ScreeningResults();
    },
    getOrderby(e) {
      console.log(e.target.value);
      console.log(e.target.selectedIndex);
      this.params.orderBy = e.target.value;
      this.ScreeningResults();
    },

    filterCountry(id, index) {
      console.log(this.filter.country);
      this.cur = id;
      this.params.country_id = id;
      this.ScreeningResults(id);
    },
    filterPrice(id, index) {
      this.cur1 = id;
      this.params.price_id = id;
      console.log(id);
      this.ScreeningResults(id);
    },
    filterDates(id, index) {
      this.cur2 = id;
      console.log(id);
      this.params.date_id = id;
      this.ScreeningResults(id);
    },

    //点击侧边栏，title赋到面包屑>**
    updateRightList(id, title,namePath) {
        console.log(namePath);
      this.namePath = namePath;(namePath);
      this.namePath = namePath;
      this.id = id;
      this.params.industry_id = id;
      console.log(this.params.industry_id);
      
      this.$router.push({
        path: "/Industries/List",
        query: { id: id, title: title }
      });
      sessionStorage.setItem("lastnamePath", namePath);
      this.$bus.$emit('setNamePath')
      //   this.$forceUpdate(); //刷新
      this.id = this.params.industry_id;
      //   this.params.orderBy = "time"
      // console.log(this.params.industry_id);
      this.params.country_id = this.filter.country[0].id;
      this.params.price_id = this.filter.price[0].price_id;
      this.params.date_id = this.filter.dates[0].date_id;
      this.cur = this.filter.country[0].id;
      this.cur1 = this.filter.price[0].price_id;
      this.cur2 = this.filter.dates[0].date_id;
      this.ScreeningResults(this.id);
    },
    //获取侧边栏
    categoryList() {
      let data = {
        // token: "fefedfefeeffewqde"
      };
      API.categoryList(data)
        .then(res => {
          this.indiustries_list = res.data.data;
          console.log(this.indiustries_list);
          if(this.indiustries_list){
            for(let i =0;i<this.indiustries_list.length;i++){
              const testtitle = this.indiustries_list[i].title;
            //   console.log(testtitle)
            }
          }

        })
        .catch(err => {
          console.log(err);
        });
    },
    //筛选条件
    listFilters() {
      API.listFilters().then(res => {
        console.log(res);
        this.filter.country = res.data.Country.slice(0, 10);
        this.filter.price = res.data.Price;
        this.filter.dates = res.data.Dates;

        this.cur = this.filter.country[0].id;
        this.cur1 = this.filter.price[0].price_id;
        this.cur2 = this.filter.dates[0].date_id;

        // console.log(this.filter.country);
      });
    },
    //筛选结果
    ScreeningResults() {
      let params = {
        // token: "fefedfefeeffewqde",
        // count:this.params.count,
        page: this.params.page,
        pageSize: this.params.pageSize,
        orderBy: this.params.orderBy,
        country_id: this.params.country_id,
        industry_id: this.params.industry_id,
        price_id: this.params.price_id,
        date_id: this.params.date_id,
        rows: this.rows
      };
      console.log(this.openLoading);
      const rLoading = this.openLoading();
      console.log(rLoading);
      API.ScreeningResults(params).then(res => {
        console.log("结果列表来了");
        console.log(res);
        // this.loading = false;
        setTimeout(() => {
            rLoading.close();
        }, 0);
        
        this.error_code = res.data.error_code;
        // console.log( this.error_code)
        this.records = res.data.data;
        console.log(this.records);
        if (this.records.result) {
          for (let i = 0; i < this.records.result.length; i++) {
            const item = this.records.result[i];
            item.singleUserPrice = (
              (item.single_user_price / 100) *
              item.discount
            ).toFixed(2);
          }
        }

        console.log(this.records);
        //  let singleUser = this.records.result[0].single_user_price/100*this.records.result[0].discount

        //  console.log(singleUser)
        // this.singleUserPrice =  singleUser.toFixed(2)
        // console.log(this.singleUserPrice)
        this.rows = this.records.count;
        // console.log(this.rows); //765
        this.perPage = this.records.pageSize;
        // console.log(this.page.perPage); //10
        // console.log(this.records);
        // this.$forceUpdate(); //刷新
      });
    },
    // getAll() {
    //   API.getAll().then(res => {
    //     // console.log(res)
    //   });
    // },
    handleCurrentChange(currentPage) {
      this.params.page = currentPage;
      console.log(currentPage); //点击第几页
      console.log("21111111111111111111111");
      console.log(this.params.pageSize);
      this.ScreeningResults();
    }
  },
  watch: {
    $route: function(e, o) {
      // console.log(e,o)
      //导航 industries的默认id设为空--
      // id 为空判断是非为空，筛选框是否显示三栏
      sessionStorage.id = e.query.id;
      this.id = e.query.id;
    }
  },
  computed: {},
  components: {
    HeaderTop,
    Header,
    Footer
  }
};