fastadmin实现购物订单商品列表展示的方法

admin

商品列表页代码：

1. <style>
   
2.     .nui-goodsbox {
   
3.         display: flex;
   
4.         align-items: center;
   
5.     }
   
6.     .nui-goods-image {
   
7.         width: 50px;
   
8.         height: 50px;
   
9.         display: block;
   
10.     }
    
11.     .nui-goodsinfo {
    
12.         margin-left: 10px;
    
13.     }
    
14. </style>
    
15. <form id="goods-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
    
16.     <div class="form-group">
    
17.         <label class="control-label col-xs-12 col-sm-2">{:__('Ordersn')}:</label>
    
18.         <div class="col-xs-12 col-sm-8">
    
19.             <input id="c-ordersn" data-rule="required" class="form-control" type="text" value="{$row.ordersn|htmlentities}" readonly="true">
    
20.             <span class="help-block">订单号不可更改</span>
    
21.         </div>
    
22.     </div>
    
23.     <div class="form-group">
    
24.         <label class="control-label col-xs-12 col-sm-2">{:__('商品清单')}:</label>
    
25.         <div class="col-xs-12 col-sm-8">
    
26.             <table class="table">
    
27.                 <thead>
    
28.                     <tr>
    
29.                         <th scope="col">序号</th>
    
30.                         <th scope="col">商品信息</th>
    
31.                         <th scope="col">购买数量</th>
    
32.                         <th scope="col">总金额</th>
    
33.                         <th scope="col">优惠金额</th>
    
34.                         <th scope="col">应付款</th>
    
35.                     </tr>
    
36.                 </thead>
    
37.                 <tbody>
    
38.                     {volist name="list" key="index" id="vo"}
    
39.                     <tr>
    
40.                         <td scope="row">
    
41.                             {$index}
    
42.                         </td>
    
43.                         <td scope="row">
    
44.                             <div class="nui-goodsbox">
    
45.                                 <img src="{:cdnurl($vo.image)}" class="nui-goods-image" alt="" />
    
46.                                 <div class="nui-goodsinfo">
    
47.                                     <p>{$vo.title}</p>
    
48.                                     <p>￥{$vo.saleprice}</p>
    
49.                                 </div>
    
50.                             </div>
    
51.                         </td>
    
52.                         <td scope="row">
    
53.                             {$vo.total}
    
54.                         </td>
    
55.                         <td scope="row">
    
56.                             ￥{$vo.totalprice}
    
57.                         </td>
    
58.                         <td scope="row">
    
59.                             ￥{$vo.discount}
    
60.                         </td>
    
61.                         <td scope="row">
    
62.                             ￥{$vo.payfee}
    
63.                         </td>
    
64.                     </tr>
    
65.                     {/volist}
    
66.                 </tbody>
    
67.             </table>
    
68.             <span class="help-block">这里调用了录单时设定好客户每天的取奶袋数，如果有变动可直接更改，不取奶的星期请设置为0</span>
    
69.         </div>
    
70.     </div>
    
71. </form>

复制代码