12. 商品列表页

人民币符号

人民币符号用 ¥

<span class="new_price">&yen;</span>

axios的get方法传递query string

axios使用get方法发送请求时，可以直接在url传递query string参数

axios.get('/user?ID=12345')

也可以使用params传递

axios.get('/user', {
    params: {
      ID: 12345
    }
  })

修改封装的get方法

修改封装get方法，使其能够传递params

const get = async (url: string, params:any = {}) => {
  const response = await instance.get(url, {
    params
  })
  return response.data
}

api/shop/fastmock商品列表

通过 /api/shop/:id/products?tab=all 形式的api请求对应对应店铺对应种类的商品列表
tab 可取的值有 all， seckill, fruit 等， 通过 _req.query.tab 获得传入的参数
mock数据如下：

{
  "code": "0000",
  "data": function({_req, Mock}) {
    let id = _req.params.id;
    let tab = _req.query.tab;
    if (id === '1') {
      if (tab === 'all') {
        return [
          {
            _id: 1,
            name: '番茄250g/份',
            imgUrl: 'xxx.png',
            sales: 10,
            price: 33.6,
            oldPrice: 39.6
          },
          ]
      } else if (tab === 'seckill') {
        // ...
      } else if (tab === 'fruit'){
        // ...
      }
    }
  },
  "desc": "成功"
}

watchEffect妙用

使用watchEffect监听tab的变化，重新获取产品数据，注意，watchEffect侦听的必须时 ref 值

const useGetProductsEffect = (checkedTab) => {
      const products = ref([])
      const route = useRoute()
      const getProducts = async () => {
        const result = await get(`/api/shop/${route.params.id}/products`, {tab: checkedTab.value})
        products.value = result.data
      }
      // 当checkedTab.value变化时，重新获取数据
      watchEffect(() => getProducts())
      return {
        products
      }
}
const useCheckTabEffect = () => {
      const checkedTab = ref(CATEGORIES[0].tab)
      const handleTabClick = (tab:string) => {
        checkedTab.value = tab
      }
      return {
        checkedTab,
        handleTabClick
      }
}
export default {
    components: { Icon },
    setup(){
      const {checkedTab, handleTabClick} = useCheckTabEffect()
      const {products} = useGetProductsEffect(checkedTab)
      return {
        products,
        CATEGORIES,
        checkedTab,
        handleTabClick
      }
    }
}