微信小程序订单页面格式

我在开发一个点餐小程序时，遇到了一个问题，用户通过小程序进入商家，选中自己想下单的菜，如果同一个选了两份，那么订单会显示菜名乘以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;
}``

这就是通过修改以后的页面的代码了，效果截图如下；

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

微信小程序订单页面格式相关推荐

微信小程序订单页面下拉刷新上拉分页加载
微信小程序开发交流qq群 581478349 承接微信小程序开发.扫码加微信. 正文: 效果图: 代码: json代码: {"enablePullDownRefresh" ...
微信小程序-订单页面
说明:头部有一个三种预约状态的切换 wxml页面:  <view class="swiper-tab"><block wx:f ...
微信小程序-订单页面——可左右滑动（附源码）
说明:头部有一个三种预约状态的切换 wxml页面:  <view class="swiper-tab"><block wx:f ...
微信小程序--订单查询页面
微信小程序–订单查询页面包含功能点: 订单查询结构:order.wxml <tabs tabList="{{tabList}}" binditemChange=" ...
微信小程序订单扫码结算的步骤
微信小程序订单扫码结算的步骤,在小程序结算中,如果用户下单后到店自提或货到付款的方式,这种情况用户可以提现下单或预定下单,下单成功后,用户到店里自提或等待商家配送到家,在收到订单产品之后,商家扫码用 ...
微信小程序webview页面使用painter生成海报
微信小程序webview页面使用painter生成海报因为要在webview下生成海报,需要使用cover-view,根据接口返回数据动态更新海报内容,微信小程序生成海报组件有wxa-plugin- ...
wxPageMixins：为微信小程序Page页面增加mixins功能
起步由于之前学习vue源码,在vue源码中学到了如何针对不同的选项参数进行合并,并且为了学以致用,所以就写了一个简单的用于合并微信小程序Page构造数参数的工具函数.因为笔者最近在做微信小程序开发的 ...
微信小程序之页面打开数量限制
微信小程序之页面打开数量限制无论是在小程序还是APP中,打开一个页面其实就是创建了一个新的View对象,一层层叠加的.当点击页面的回退按钮就是把当前页面关闭. 这个过程中会涉及到一个问题,就是打开页 ...
微信小程序：页面传递中文出现乱码
微信小程序:页面传递中文 decodeURIComponent() 参考微信小程序页面中文传参Option获取参数乱码问题

微信小程序订单页面格式

微信小程序订单页面格式相关推荐

最新文章

热门文章