商城实战项目

搜索功能

• router/index.js

...
const SoList=()=>import('../views/so/SoList')
...
{
        path: '/so',
        name: 'SoList',
        component: SoList,
        meta: {
            title: '魔盒商城-搜索'
        }
    }

• network/so.js

import {request} from './request';
export function getSo() {
    return request({url: '/api/goods',})
}
export function getSoGoods(title='',order = 'sales', page = 1) {
    return request({url: '/api/goods?title='+ title  + '&page=' + page + '&' + order + '=1',})
}

• src/view/so/SoList.vue

<template>
  <div id="soso">
    <div>
      <form action="/">
        <van-search
            v-model="value"
            show-action
            placeholder="请输入搜索关键词"
            @search="onSearch"
            @cancel="onCancel"
        />
      </form>
      <div class="ordertab">
        <van-tabs v-model="active" @click="tabClick">
          <van-tab title="销量排序"></van-tab>
          <van-tab title="价格排序"></van-tab>
          <van-tab title="评化排序"></van-tab>
        </van-tabs>
      </div>
      <div class="wrapper">
        <div class="content">
          <good-list :goods="showGoods"></good-list>
        </div>
      </div>
      <back-top @bTop="bTop" v-show="isTabFixed"></back-top>
    </div>
  </div>
</template>
<script>
import {ref, reactive, toRef, onMounted,computed,watchEffect,nextTick} from "vue";
import {getSo,getSoGoods} from "network/so";
import TabControl from "components/content/tabcontrol/TabControl";
import GoodList from "components/content/goods/GoodList";
import BScroll from 'better-scroll';
import BackTop from "components/common/backtop/BackTop";
import { Search,Toast } from 'vant';
export default {
  name: "SoList",
  components:{
    TabControl,
    GoodList,
    BackTop,
    BScroll
  },setup(){
    const value = ref('');
    let keyword=ref('');
    const onSearch = (val) => {
      Toast(val)
      return val;
    };
    console.log( value);
    const onCancel = () => Toast('取消');
    let isTabFixed= ref(false)
    let currentType=ref('sales')
    const goods= reactive({
      sales:{page:1,list:[]},
      new:{page:1,list:[]},
      recommend:{page:1,list:[]},
    })
    const showGoods=computed(()=>{
      return goods[currentType.value].list;
    })
    let bscroll=null;
    onMounted(() => {
      getSoGoods(value.value,'sales').then((res=>{
        goods.sales.list=res.data.goods.data;
      }))
      getSoGoods(value.value,'new').then((res=>{
        goods.new.list=res.data.goods.data;
      }))
      getSoGoods(value.value,'recommend').then((res=>{
        goods.recommend.list=res.data.goods.data;
      }))
      bscroll= new BScroll(document.querySelector('.wrapper'),{
        probeType: 3,
        click:true,
        pullUpLoad: true
      });
      bscroll.on('pullingUp',()=>{
        const page=goods[currentType.value].page+1;
        getSoGoods(value.value,currentType.value,page).then(res=>{
          goods[currentType.value].list.push(...res.data.goods.data)
          goods[currentType.value].page +=1
        })
        bscroll.finishPullUp();
        bscroll.refresh();
        console.log(page)
      })
    })
    const tabClick=(index)=>{
      let type=['sales','new','recommend'];
      currentType.value=type[index];
      nextTick(()=>{
        bscroll && bscroll.refresh();
      })
    }
    const bTop=()=>{
      bscroll.scrollTo(0,0,500)
    }
    watchEffect(()=>{
      // console.log(value.value);
      nextTick(()=>{
        bscroll && bscroll.refresh();
      })
    })
    return {
      currentType,
      tabClick,
      goods,
      showGoods,
      isTabFixed,
      bTop,
      value,
      onSearch,
      onCancel,
    }
  }
}
</script>
<style scoped lang="scss">
#soso{
  height: 100Vh;
  position: relative;
}
.ordertab{
  height: 44px;
  position: fixed;
  top:44px;
  left: 0;
  right: 0;
  z-index: 99;
}
.wrapper{
  position: absolute;
  top:88px;
  bottom: 50px;
  left: 0;
  right: 0;
  overflow: hidden;
.content{
}
}
</style>