我的订单
本节主要讲解会员功能的的我的订单界面的实现。效果如图15-3所示。
1.布局分析
顶部的菜单：全部订单/待支付/待收货，可以参考13.3节，沿用该节的内容，只需要改造每个菜单对应的swiper-item即可。
我们接下来分析其中一个订单的布局，多个订单循环显示即可。
结构布局分析示意如图15-4所示。
根据上面的布局分析，我们会产生基础的框架，代码示例如下：
<scroll-view><view >单号：08081102 | 时间：/9/10 11:44:19</view> <view ><image ></image><view ><view >珀莱雅水动力护肤品套装</view><view >月售：11 件 / 库存：121件</view><view >￥：129.00</view></view><view ><text > 2 件 </text></view></view><view><text >【待付款】共1件商品， 产品金额：¥150 (运费￥6) </text></view> <view ><button size='mini' >取消订单</button><button size='mini' >去付款</button></view> </scroll-view>
2.功能实现
.wxml文件代码示例如下：
<scroll-view class="chanpins" scroll-y="true"><view class="danhao">单号：08081102 | 时间：/9/10 11:44:19</view> <view class="chanpin"><image class="chanpin-img" src="/img/cp01.jpg"></image><view class="chanpin-info"><view class="name">珀莱雅水动力护肤品套装</view><view class="sales">月售：11 件 / 库存：121件</view><view class="price">￥：129.00</view></view><view class="chanpin-num"><text class="mytext" hidden=""> 2 件 </text></view></view><view class="chanpin"><image class="chanpin-img" src="/img/cp02.jpg"></image><view class="chanpin-info"><view class="name">HFP秋冬季补水保湿亮肤套装</view><view class="sales">月售：231 件 / 库存：11件</view><view class="price">￥：329.00</view></view><view class="chanpin-num"><text class="mytext" hidden=""> 1 件 </text></view></view><view class="jiesuan" ><text>【待付款】共1件商品， 产品金额：¥150 (运费￥6) </text></view> <view class="caozuo"><button size='mini'>取消订单</button><button size='mini' >去付款</button></view> </scroll-view>
.wxss文件代码示例如下：
/*全部订单*/.chanpins{flex: 1;display: flex;flex-direction: column;height: 100%;background: white;}.danhao{font-size: 12px; color: gray;height: 100rpx; margin-left: 20rpx;border-bottom: 1rpx solid #ECECEC; background: white;display: flex;align-items: center; }.chanpin{display: flex;padding: 15rpx;height: 130rpx;border-bottom: 1rpx solid #ECECEC; background: white; }.chanpin-img{width: 120rpx;height: 120rpx;}.chanpin-info{display: flex;flex-direction: column;align-items: flex-start;flex: 1;margin-left: 20rpx;}.name{font-size: 30rpx; }.sales{font-size: 25rpx;color: #ACACAC;text-align: left;}.price{font-size: 30rpx;color: red;text-align: left;}.chanpin-num{height: 50rpx;display: flex;margin-top: 30rpx;margin-right: 30rpx;line-height: 50rpx;font-size: 40rpx; }.jiesuan{font-size: 13px; color: gray;height: 100rpx; margin-left: 20rpx;border-bottom: 1rpx solid #ECECEC; background: white;display: flex;align-items: center; }.caozuo{height: 100rpx;border-bottom: 1rpx solid #ECECEC; background: white;display: flex;align-items: center; }
小程序商城配备了javaweb、php、asp、net几个版本的后台、其他版本陆续制作中
【微信小程序参考资料】
（1）微信小程序学习路线 /
（2）Java微信小程序商城系统指导 /course/3066521
（3）PHP微信小程序商城系统指导 /course/3066518
（4）微信官方文档 https://developers./miniprogram/dev/framework/
22-微信小程序商城 我的订单（微信小程序商城开发 小程序毕业设计 小程序源代码）（黄菊华-微信小程序开发教程）
如果觉得《22-微信小程序商城 我的订单（微信小程序商城开发 小程序毕业设计 小程序源代码）》对你有帮助，请点赞、收藏，并留下你的观点哦！
