22-微信小程序商城我的订单（微信小程序商城开发、小程序毕业设计、小程序源代码）（黄菊华-微信小程序开发教程）

最新推荐文章于 2025-02-02 23:25:21 发布

黄菊华老师

最新推荐文章于 2025-02-02 23:25:21 发布

阅读量8.5k

点赞数 7

分类专栏：毕业设计微信小程序实战-商城文章标签：微信小程序商城开发

本文链接：https://blog.csdn.net/u013818205/article/details/109740250

版权

毕业设计同时被 2 个专栏收录

2537 篇文章

订阅专栏

微信小程序实战-商城

44 篇文章

订阅专栏

博客主要讲解微信小程序商城会员功能中我的订单界面的实现。先进行布局分析，顶部菜单可参考之前章节改造，分析单个订单布局后循环显示。接着给出功能实现的.wxml和.wxss文件代码示例，还提及商城有多个版本后台及相关参考资料。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我的订单

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