我的订单
本节主要讲解会员功能的的我的订单界面的实现。效果如图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-微信小程序商城 我的订单(微信小程序商城开发 小程序毕业设计 小程序源代码)(黄菊华-微信小程序开发教程)