【vue3.0】24.0 某东到家( 廿四)——订单列表开发

DOM完善

修改src\views\orderList\OrderList.vue






image.png

进一步完善



image.png

继续优化







image.png

继续优化






image.png

新建get接口/api/order
数据如下:

{
  "code": 200,
  "data": [
    {
      "address": {
        "city": "北京",
        "department": "xx小区",
        "houseNumber": "门牌号",
        "name": "张三",
        "phone": "18012341234"
      },
      "shopId": "1",
      "shopName": "某什么码1",
      "isCanceled": false,
      "products": [
        {
          "orderSales": 5,
          "product": {
            "name": "番茄250g/份",
            "imgUrl": "/i18n/9_16/img/tomato.png",
            "sales": 10,
            "price": 33.6
          }
        },
        {
          "orderSales": 10,
          "product": {
            "name": "樱桃250g/份",
            "imgUrl": "/i18n/9_16/img/cherry.png",
            "sales": 10,
            "price": 79.6
          }
        },
        {
          "orderSales": 8,
          "product": {
            "name": "帝王蟹250g/份",
            "imgUrl": "/i18n/9_16/img/crab.png",
            "sales": 10,
            "price": 159.6
          }
        },
        {
          "orderSales": 4,
          "product": {
            "name": "橙子250g/份",
            "imgUrl": "/i18n/9_16/img/orange.png",
            "sales": 10,
            "price": 92.6
          }
        }
      ]
    }
  ],
  "desc": "成功"
}

页面完善:







image.png

你可能感兴趣的:(【vue3.0】24.0 某东到家( 廿四)——订单列表开发)