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

DOM完善

修改srcviewsorderListOrderList.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