我的訂單

本節(jié)主要講解會員功能的的我的訂單界面的實現(xiàn)。效果如圖15-3所示。

1.布局分析

頂部的菜單：全部訂單/待支付/待收貨，可以參考13.3節(jié)，沿用該節(jié)的內(nèi)容，只需要改造每個菜單對應的swiper-item即可。
我們接下來分析其中一個訂單的布局，多個訂單循環(huán)顯示即可。
結(jié)構(gòu)布局分析示意如圖15-4所示。

根據(jù)上面的布局分析，我們會產(chǎn)生基礎(chǔ)的框架，代碼示例如下：

<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件商品， 產(chǎn)品金額：￥150 (運費￥6) 
</text>
  </view>   
  <view >
     <button  size='mini' >取消訂單</button>
     <button  size='mini' >去付款</button>
  </view>   
</scroll-view>

2.功能實現(xiàn)

.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件商品， 產(chǎn)品金額：￥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幾個版本的后臺、其他版本陸續(xù)制作中
【微信小程序參考資料】

（1）微信小程序?qū)W習路線 http://www.hzyaoyi.cn/

（2）Java微信小程序商城系統(tǒng)指導 https://ke.qq.com/course/3066521

（3）PHP微信小程序商城系統(tǒng)指導 https://ke.qq.com/course/3066518

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