欢迎来到懒人模板!我们专注移动互联网,所有模板永久免费下载!
  • 首 页
  • 当前位置:主页 > 小程序教程 >

    微信小程序我的订单详细列表样式模板制作设计下载

    2018-05-29 10:14 来源/作者:懒人模板 分类:小程序教程  « »
    今天给大家带来顶部简单纯文字导航列表,制作好以后效果图如下:
    一、wxml页面代码如下:
    <view class="top-nav">
      <view class="top-nav-bar">
        <view class="{{current == 0 ? 'active' : ''}}" catchtap="switchSlider" data-index="0">全部</view>
        <view class="{{current == 1 ? 'active' : ''}}" catchtap="switchSlider" data-index="1">待付款</view>
        <view class="{{current == 2 ? 'active' : ''}}" catchtap="switchSlider" data-index="2">待发货</view>
        <view class="{{current == 3 ? 'active' : ''}}" catchtap="switchSlider" data-index="3">待收货</view>
        <view class="{{current == 4 ? 'active' : ''}}" catchtap="switchSlider" data-index="4">待评价</view>
      </view>
    </view>
    <view class="container" class="ma-top-120">
      <view class="carts">
        <view class="weui-pull">
          <view class="weui-pull__tips">
            <icon type="loading" class="weui-pull__loading"></icon>
            <!--<text>下拉刷新</text>-->
          </view>
          <view class=" weui-panel__access" bindchange="changeSlider" style="display:{{current == 0 ? 'block' : 'none'}}">
            <view class="weui-panel__bd">
    
            
    
              <!--<view class="padding-wrap" wx:for="{{orderlist}}">
                <view class="weui-media-box weui-media-box_appmsg content-color">
                  <view class="weui-media-box__hd_in-appmsg " >
                   <block wx:for="{{item.goods}}" wx:for-item="itemlist">
                    <image  src="{{itemlist.spec_key}}" alt class="weui-media-box__thumb carts-image"></image>
                    <text class="weui-media-box__desc">{{itemlist.goods_name}}</text>
                  </block> 
                  </view>
                  <view class="weui-media-box__bd_in-appmsg" >
                    <view class="">
                      <text class="carts-price origin">123</text>
                      <text class="carts-price total">{{item.goods_price}}</text>
                    </view>
                
                    <view class="operate">
                      
                      <text class="operate-item pay">立即支付</text>
                      <text class="operate-item cancel">取消订单</text>
                    </view>
                  </view>
                </view>
              </view>-->
              <view class="padding-wrap"  wx:for="{{orderlist}}">
                <view class="weui-media-box weui-media-box_appmsg content-color" wx:for="{{item.goods}}" wx:for-item="itemlist" >
                  <view class="weui-media-box__hd_in-appmsg">
                    <image src="{{itemlist.spec_key}}" alt class="weui-media-box__thumb carts-image"></image>
                  </view>
                  
                  <view class="weui-media-box__bd_in-appmsg">
                    <text class="weui-media-box__desc">{{itemlist.goods_name}}</text>
                    <view class="">
                      <text class="carts-price origin">{{itemlist.goods_num}}*{{itemlist.goods_price}}</text>
                      <text class="carts-price total">¥{{itemlist.goods_num*itemlist.goods_price}}</text>
                    </view>
                  </view>
                </view>
                  <view class="operate">
                      <text class="all-total">总价:¥{{item.goods_price}}</text>
                      <text class="operate-item pay" bindtap="payorder" data-id="{{item.order_sn}}">立即支付</text>
                      <text class="operate-item cancel" bindtap="delorder" data-id="{{item.id}}">取消订单</text>
                    </view>
              </view>
    
    
    
            </view>
          </view>
        </view>
      </view>
      <view style="display:{{current == 1 ? 'block' : 'none'}}">
        <view>这里是待付款</view>
      </view>
      <view style="display:{{current == 2 ? 'block' : 'none'}}">
        <view>这里是待发货</view>
      </view>
      <view style="display:{{current == 3 ? 'block' : 'none'}}">
        <view>这里是待收货</view>
      </view>
      <view style="display:{{current == 4 ? 'block' : 'none'}}">
        <view>这里是待评价</view>
      </view>
    </view>

    点击扫描效果预览免费下载免登陆网盘下载
    标签:
    * 懒人模板承诺:本站所有资源免费下载,无病毒,无弹窗,无干扰链接! 提点建议