微信小程序订单页面格式

我在开发一个点餐小程序时，遇到了一个问题，用户通过小程序进入商家，选中自己想下单的菜，如果同一个选了两份，那么订单会显示菜名乘以2，如果在餐厅吃的情况下是没有问题的，如果要有一份带走，那这时候出现的问题就是选中打包的地方只有一个，无论你要几份，打包只有一份，所以要把打包分开写，于是想到了菜名也分开写，所以就对订单详情页面做了修改，具体代码如下：

<view class='cart-list-box' wx:for="{{cart.list}}" wx:for-index="id" wx:key="unique">
      <view class='cart-list-box1'>
      <view class='list-info' wx:for='{{cart.list[id].count}}'>
        <view>{{cart.list[id].goodName}}</view>
        <checkbox-group bindchange='CheckboxChange' data-listid="{{id}}">
          <checkbox value='选中' />打包费{{coin}}{{pack_charge}}
        </checkbox-group>
        <!-- <view class='list-info-size'>detail</view> -->
      </view>
      </view>
      <view style='width:50%;padding:10px;' class='list-info2'>
        <view style='float:right;width:100%;height:100%;'wx:for='{{cart.list[id].count}}'>
          <view style='color:#A3A3A3;float:right;'>x 1</view>
          <view >{{coin}} {{cart.list[id].goodPrice}}</view>
        </view>
      </view>
 </view>

这是wxml中该页面的代码，接下来是CSS样式


.cart-list-box{
  background:#FFFFFF;
  font-size:15px;
  border-bottom:1px #E3E3E3 solid;
  display:flex;
  flex-direction:row;
}
.cart-list-box1{
  width:50%;
  display:flex;
  flex-direction:column;
}
.list-info{
  width:100%;
  padding:5px  ;
  display:flex;
  flex-direction:column;
}
.list-info2{
  width:50%;
  padding:10px ;
  display:flex;
  flex-direction:column;
}``

这就是通过修改以后的页面的代码了，效果截图如下；
这就是、
这样基本上实现了打包可以分开选，但是还有一个问题就是说这样的话菜名一直重复，如果有一个客户过来要了很多份，那么这个就会看起来很麻烦，所以后期会做成打包是可选的，这样菜名还是只有一个，打包改成可以加减的，这样会更好一些，后期再更新~~~
欢迎大家提出意见~

微信小程序订单页面格式

猜你喜欢