【vue3.0】13.0 某东到家（十三）——商家详情页开发(三)

准备mock数据：

    {
      "code": 200,
      "data": [{
          _id: '1',
          name: '番茄250g/份',
          imgUrl: '/i18n/9_16/img/tomato.png',
          sales: 10,
          price: 33.6,
          oldPrice: 39.6
        },
        {
          _id: '2',
          name: '草莓250g/份',
          imgUrl: '/i18n/9_16/img/tomato.png',
          sales: 10,
          price: 33.6,
          oldPrice: 39.6
        },
        {
          _id: '3',
          name: '提子250g/份',
          imgUrl: '/i18n/9_16/img/tomato.png',
          sales: 10,
          price: 33.6,
          oldPrice: 39.6
        },
        {
          _id: '4',
          name: '提子250g/份',
          imgUrl: '/i18n/9_16/img/tomato.png',
          sales: 10,
          price: 92.6,
          oldPrice: 85.6
        }
      ],
      "desc": "成功"
    }

image.png

修改调整src\views\shop\Content.vue:

效果如下：

image.png

左侧“全部商品”等栏目切换开发

首先优化一下此部分代码

效果如下：

image.png

增加点击事件：

其中@click="handleCategoryClick(item.tab)"可以写成@click="() => handleCategoryClick(item.tab)"
点击标签：

image.png

实现点击再次发起请求很简单：

    const handleCategoryClick = tab => {
      console.log('click:' + tab)
      getContentData(tab)
    }

将mock数据删掉一条，点击，发现效果实现：

image.png

进一步优化细节：

效果如下：

image.png

通过watchEffect再次优化代码：

代码抽离和封装yyds。