我的订单

本节主要讲解会员功能的的我的订单界面的实现。效果如图15-3所示。

1.布局分析

顶部的菜单：全部订单/待支付/待收货，可以参考13.3节，沿用该节的内容，只需要改造每个菜单对应的swiper-item即可。
我们接下来分析其中一个订单的布局，多个订单循环显示即可。
结构布局分析示意如图15-4所示。

根据上面的布局分析，我们会产生基础的框架，代码示例如下：

<scroll-view>
<view >
     单号：201808081102 | 时间：2018/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">
           单号：201808081102 | 时间：2018/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）微信小程序学习路线 http://www.hzyaoyi.cn/

（2）Java微信小程序商城系统指导 https://ke.qq.com/course/3066521

（3）PHP微信小程序商城系统指导 https://ke.qq.com/course/3066518

（4）微信官方文档 https://developers.weixin.qq.com/miniprogram/dev/framework/