我在开发一个点餐小程序时,遇到了一个问题,用户通过小程序进入商家,选中自己想下单的菜,如果同一个选了两份,那么订单会显示菜名乘以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;
}``
这就是通过修改以后的页面的代码了,效果截图如下;
这样基本上实现了打包可以分开选,但是还有一个问题就是说这样的话菜名一直重复,如果有一个客户过来要了很多份,那么这个就会看起来很麻烦,所以后期会做成打包是可选的,这样菜名还是只有一个,打包改成可以加减的,这样会更好一些,后期再更新~~~
欢迎大家提出意见~