小程序swiper实现订单页面

最新推荐文章于 2023-10-04 10:00:00 发布

转载最新推荐文章于 2023-10-04 10:00:00 发布 · 668 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：http://www.cnblogs.com/sinceForever/p/11363991.html

本文详细介绍使用小程序Swiper组件创建动态订单展示页面的过程。通过wxml和js代码结合，实现了不同状态订单的切换显示，包括全部订单、待支付订单等。每个订单项详细展示了商品信息、价格、数量及操作按钮。

小程序swiper实现订单页面

myOrder.wxml

<!--pages/myorder/myorder.wxml-->
<view class="swiper-tab">
  <block wx:for="{{swipertab}}" wx:key="sptab">
    <view class="swiper-tab-list {{currtab == item.index ? 'on' : ''}}" 
    data-current="{{item.index}}" 
    bindtap="tabSwitch">{{item.name}}</view>
  </block>
</view>

<swiper current="{{currtab}}" style="height:{{deviceH-31}}px" bindchange="onTabChange">
  <swiper-item>
    <scroll-view class="hot-box" scroll-y="true" style="height: 100%;">
      <view class="container-0">
        <view class="order" wx:for="{{allOrderS}}" wx:key="{{item.orderid}}" wx:for-item="order">
          <view class="orderNumber">订单编号：{{order.orderid}}</view>
          <view class="orderStatus">{{order.status}}</view>
          <view class="orderList" wx:for="{{order.goods}}" wx:key="item.index" bindtap="orderDetailShow" data-orderid="{{order.orderid}}">
              <image src='{{item.image}}'></image>
              <view class='orderDetail'>
                <view class='orderTitle'>{{item.title}}</view>
                <view class='orderStyle'>
                  <view class="orderColor">{{item.properties}}</view>
                  <!-- <view class="orderSize">{{item.size}},</view>
                  <view class="orderUnit">{{item.unit}}</view> -->
                </view>
              </view>
              <view class='orderInfor'>
                <view class='orderPrice'>{{item.price}}</view>
                <view class='orderNum'>{{item.number}}</view>
              </view>
          </view>
          <view class='orderSumPri'>
            共{{order.totalNumber}}件商品 合计：
            <view class='orderPri'>{{order.totalPrice}}元</view>
          </view>
          <view class="orderHander">
            <view class="orderCancel" bindtap="orderHandleOne" hidden="{{order.ifhiddenone}}">{{order.orderHandleOne}}</view>
            <view class="orderConfirm" bindtap="orderHandleTwo" hidden="{{order.ifhiddentwo}}">{{order.orderHandleTwo}}</view>
          </view>
        </view>
      </view>
    </scroll-view>
  </swiper-item>
  <swiper-item>
    <scroll-view class="hot-box" scroll-y="true" style="height: 100%;">
      <view class="container-1">
        <view class="order" wx:for="{{waitPayOrder}}" wx:key="{{item.orderid}}" wx:for-item="order">
          <view class="orderNumber">{{order.orderid}}</view>
          <view class="orderStatus">{{order.status}}</view>
          <view class="orderList" wx:for="{{order.goods}}" wx:key="item.index" bindtap="orderDetailShow">
              <image src='{{item.image}}'></image>
              <view class='orderDetail'>
                <view class='orderTitle'>{{item.title}}</view>
                <view class='orderStyle'>

转载于:https://www.cnblogs.com/sinceForever/p/11363991.html