17.搜索商品的价格和销量排序 功能 的完善 图片懒加载

1. 在search-list.vue里的data里新建：searchList：{}

 data() {
    return {
      //后台返回的值传给它
      goodsList: [],
      searchList: {
        currentIndex: 0,
        data: [
          //status:0都不亮，等于1 上箭头亮   等于2 下箭头亮
          { name: "综合", key: "zh" },
          { name: "价格", status: 0, key: "price" },
          { name: "销量", status: 0, key: "num" },
        ],
      },
    };
  },

在页面渲染出来

 <li
          v-for="(item, index) in searchList.data"
          :key="index"
          @click="changeTab(index)"
        >
          <div :class="searchList.currentIndex == index ? 'active' : ''">
            {{ item.name }}
          </div>
          <div class="search-filter" v-if="index != 0">
            <i
              class="iconfont icon-jiantoushang"
              :class="item.status == 1 ? 'active' : ''"
            ></i>
            <i
              class="iconfont icon-jiantouxia"
              :class="item.status == 2 ? 'active' : ''"
            ></i>
          </div>
        </li>

前台完整代码：

<template>
  <div class="search-list">
    <div class="headers">
      <Header />
      <ul>
        <li
          v-for="(item, index) in searchList.data"
          :key="index"
          @click="changeTab(index)"
        >
          <div :class="searchList.currentIndex == index ? 'active' : ''">
            {{ item.name }}
          </div>
          <div class="search-filter" v-if="index != 0">
            <i
              class="iconfont icon-jiantoushang"
              :class="item.status == 1 ? 'active' : ''"
            ></i>
            <i
              class="iconfont icon-jiantouxia"
              :class="item.status == 2 ? 'active' : ''"
            ></i>
          </div>
        </li>
        <!-- <li><div>综合</div></li>
        <li>
          <div>价格</div>
          <div class="search-filter">
            <i class="iconfont icon-jiantoushang"></i>
            <i class="iconfont icon-jiantouxia"></i>
          </div>
        </li>
        <li>
          <div>销量</div>
          <div class="search-filter">
            <i class="iconfont icon-jiantoushang"></i>
            <i class="iconfont icon-jiantouxia"></i>
          </div>
        </li> -->
      </ul>
    </div>
    <section>
      <ul>
        <li v-for="(item, index) in goodsList" :key="index">
          <img :src="item.imgUrl" alt="云南凤庆经典蜜香滇红" />
          <h3>{{ item.name }}</h3>
          <div class="price">
            <div>
              <span style="font-size: 28px">$</span>
              <b>{{ item.price }}</b>
            </div>
            <div>立即购买</div>
          </div>
        </li>
        <!-- <li>
          <img src="../../assets/images/s11.png" alt="" />
          <h3>绿茶早春珍稀白茶礼盒</h3>
          <div class="price">
            <div>
              <span>#</span>
              <b>23+</b>
            </div>
            <div>立即购买</div>
          </div>
        </li> -->
        <!-- <li>
          <img src="../../assets/images/s4.jpeg" alt="" />
          <h3>绿茶早春珍稀白茶礼盒</h3>
          <div class="price">
            <div>
              <span>#</span>
              <b>23+</b>
            </div>
            <div>立即购买</div>
          </div>
        </li>
        <li>
          <img src="../../assets/images/s2.jpeg" alt="" />
          <h3>绿茶早春珍稀白茶礼盒</h3>
          <div class="price">
            <div>
              <span>#</span>
              <b>23+</b>
            </div>
            <div>立即购买</div>
          </div>
        </li>
        <li>
          <img src="../../assets/images/s3.jpeg" alt="" />
          <h3>绿茶早春珍稀白茶礼盒</h3>
          <div class="price">
            <div>
              <span>#</span>
              <b>23+</b>
            </div>
            <div>立即购买</div>
          </div>
        </li> -->
      </ul>
    </section>
    <Tabbar />
  </div>
</template>

<script>
import Tabbar from "@/components/common/Tabbar.vue";
import Header from "@/components/search/Header.vue";
//引入http
import http from "@/common/api/request.js";

export default {
  data() {
    return {
      //后台返回的值传给它
      goodsList: [],
      searchList: {
        currentIndex: 0,
        data: [
          //status:0都不亮，等于1 上箭头亮   等于2 下箭头亮
          { name: "综合", key: "zh" },
          { name: "价格", status: 0, key: "price" },
          { name: "销量", status: 0, key: "num" },
        ],
      },
    };
  },

  components: {
    Tabbar,
    Header,
  },
  computed: {
    orderBy() {
      //知道当前是那一个对象
      let obj = this.searchList.data[this.searchList.currentIndex];
      //针对于状态，判断是升序 还是降序
      let val = obj.status == "1" ? "asc" : "desc";
      return {
        [obj.key]: val,
      };
    },
  },
  created() {
    // 页面初始化就要执行方法
    this.getData();
  },
  methods: {
    changeTab(index) {
      console.log(index);
      this.searchList.currentIndex = index;
      //点击的下标对应数据的那一个
      // console.log(this.searchList.data[index]);
      let item = this.searchList.data[index];
      //取消所有的状态值==》都变成0
      this.searchList.data.forEach((v, i) => {
        if (i != index) {
          v.status = 0;
        }
      });
      //当前点击的改变状态
      if (index == this.searchList.currentIndex) {
        item.status = item.status == 1 ? 2 : 1;
      }
      // //发送请示进行数据排序
      this.getData();
    },
    getData() {
      //请求后台接口 并把 搜索数据传给后台  后台反馈结果到res  赋值给goodlist  渲染到前端页面
      http
        .$axios({
          url: "/api/goods/shopList",
          params: {
            searchName: this.$route.query.key,

            ...this.orderBy,
          },
        })
        .then((res) => {
          // console.log(res);
          this.goodsList = res;
        });
    },
  },
  //bug搜索页再搜索商品没反应
  watch: {
    $route() {
      this.getData();
    },
  },
};
</script>

<style scoped>
.search-list {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.headers ul {
  display: flex;
  justify-content: space-around;
  padding: 0.5333rem 0;
  font-size: 0.42rem;
}
.headers ul li {
  display: flex;
  align-items: center;
}
.headers ul li > div {
  padding: 0 0.08rem;
}
.headers ul li .search-filter {
  display: flex;
  flex-direction: column;
}
section {
  flex: 1;
  overflow: hidden;
}
section ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
section ul li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 50%;
  background-color: rgba(243, 239, 239, 0.4);
}
section ul li img {
  width: 4.53333rem;
  height: 4.53333rem;
}
section ul li h3 {
  font-size: 0.37rem;
  color: #333;
  line-height: 0.6rem;
  padding: 0.1rem 0 0rem;
  height: 0.6rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
section ul li .price {
  display: flex;
  justify-content: space-between;
  font-size: 0.32rem;
  padding: 0.2666rem 0;
  width: 80%;
}
section ul li .price div:first-child span {
  color: #b0352f;
  font-size: 0.32rem;
}
section ul li .price div:first-child b {
  color: #b0352f;
  font-size: 0.58rem;
}
section ul li .price div:last-child {
  padding: 0.08rem 0.16rem;
  border-radius: 0.2133rem;
  color: #fff;

  background-color: #b0352f;
}
/* //加一个高亮 */
.active {
  color: #4ac23f;
}
</style>

后台代码接口：

router.get("/api/goods/shopList", function (req, res, next) {
  // console.log(req.query);
  //请searchName 接收前台传来的数据
  let [searchName, orderName] = Object.keys(req.query);
  let [name, order] = Object.values(req.query);
  console.log(searchName, orderName, name, order);
  //数据库查找goods_list里的数据  条件：where 名字 模糊查询  结果返回前台
  connection.query(
    'select*from goods_list where name like "%' +
      name +
      '%"  order by ' +
      orderName +
      "  " +
      order +
      " ",
    function (error, results) {
      res.send({
        code: 0,
        data: results,
      });
    }
  );
});

 

补充一点东西

1.点击历史记录  跳转搜索结果页

在search-index.vue页里面

给li添加点击事件 并把item  传过去

  @click="goSearchList(item)"

方法里写到

 goSearchList(item) {
      // console.log(item);
      this.$router.push({
        name: "list",
        query: {
          key: item,
        },
      });
    },

2.无搜索商品

search-list.vue下

.nodata {
  font-size: 0.42rem;
  text-align: center;
  margin: 5rem auto;
}

3.图标的懒加载  使用mint-ui里的 mint-ui documentationhttp://mint-ui.github.io/docs/#/en2/lazyload

:src换成v-lazy

比如：

  <img v-lazy="item.imgUrl" alt="云南凤庆经典蜜香滇红" />

 加样式  看自己需要：

image[lazy=loading] {
  width: 40px;
  height: 300px;
  margin: auto;
}