一对多订单前端写法-526互联

$.ajax({
   url: "/orders/show_order",
   type: "GET",
   dataType: "JSON",
   success: function(json) {
      $("#test").empty();
      console.log("删除成功!");
      $.each(json.data, function (key, value) {
        let head='<div class="panel panel-default">\n' +
              '<div class="panel-heading">\n' +
              '<p class="panel-title">\n' +
              '订单号：#{oid}，下单时间：#{time} ，收货人：#{recvname}' +
              '</p>\n' +
              '</div>\n' +
              '<div class="panel-body">\n' +
              '<table class="orders-table" width="100%">\n' +
              '<thead>\n' +
              '<tr>\n' +
              '<th width="15%"></th>\n' +
              '<th width="30%">商品</th>\n' +
              t<th width="8%">单价</th>\n' +
              '<th width="8%">数量</th>\n' +
              '<th width="9%">小计</th>\n' +
              '<th width="10%">售后</th>\n' +
              '<th width="10%">状态</th>\n' +
              '<th width="10%">操作</th>\n' +
              '</tr>\n' +
              '</thead>\n' +
              '<tbody class="orders-body" id="#{key}">'; //着重注意,遍历商品要加入对应key中,因为id是唯一的 使用key来确定表头,不然会显示所有商品
         head = head.replace(/#{key}/g, key);
         head = head.replace(/#{oid}/g, key);
         head = head.replace(/#{time}/g, value[0].orderTime);
         head = head.replace(/#{recvname}/g, value[0].recvName);
         $("#test").append(head);
         console.log('key'+key);

         for (let i = 0; i < value.length; i++) {
            let body='<tr>\n' +
                  '<td><img src="..#{image}collect.png" class="img-responsive"></td>\n' +
                  '<td>#{title}</td>\n' +
                  '<td>¥<span>#{price}</span></td>\n' +
                  '<td>#{num}</td>\n' +
                  '<td>¥<span>#{price}</span></td>\n' +
                  '<td><a href="#">申请售后</a></td>\n' +
                  '<td>\n' +
                  '<div>已发货</div>\n' +
                  '<div><a href="orderInfo.html?test=#{id}">订单详情</a></div>\n' +
                  '</td>\n' +
                  '<td><a href="#" class="btn btn-default btn-xs" onclick= enterrecv()>确认收货</a></td>\n' +
                  '</tr>'+'</tbody>'+'</table>'+'</div>'+'</div>';

              body=body.replace(/#{image}/g,value[i].orderItem[0].image);
            body=body.replace(/#{num}/g,value[i].orderItem[0].num);
            body=body.replace(/#{price}/g,value[i].orderItem[0].price);
            body=body.replace(/#{title}/g,value[i].orderItem[0].title);
            body=body.replace(/#{id}/g,value[i].orderItem[0].id);

              $("#"+key).append(body);

            console.log(value[i].orderItem[0].title)
         }