我在開發一個點餐小程式時，遇到了一個問題，使用者通過小程式進入商家，選中自己想下單的菜，如果同一個選了兩份，那麼訂單會顯示菜名乘以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;
}``

 

這就是通過修改以後的頁面的程式碼了，效果截圖如下； 這樣基本上實現了打包可以分開選，但是還有一個問題就是說這樣的話菜名一直重複，如果有一個客戶過來要了很多份，那麼這個就會看起來很麻煩，所以後期會做成打包是可選的，這樣菜名還是隻有一個，打包改成可以加減的，這樣會更好一些，後期再更新~~~ 歡迎大家提出意見~