标签：flex 微信 程序 height font display 商城 size

我的订单

本节主要讲解会员功能的的我的订单界面的实现。效果如图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/

标签：flex,微信,程序,height,font,display,商城,size
来源： https://blog.51cto.com/u_13898481/2890829

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。