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

    微信小程序红色个人订单状态导航样式设计制作开发教程

    2018-07-02 09:33 来源/作者:懒人模板 分类:小程序教程  « »
    本文给大家带来的是微信小程序红色个人订单状态导航样式设计制作开发教程,制作好以后效果图如下:
    一、wxml页面代码如下:
    <!--pages/user/dingdan.wxml-->
    <view class="swiper-tab">
      <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" data-otype="pay" bindtap="swichNav">待付款</view>
       <view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" data-otype="deliver" bindtap="swichNav">待发货</view> 
      <view class="swiper-tab-list {{currentTab==2 ? 'on' : ''}}" data-current="2" data-otype="receive" bindtap="swichNav">待收货</view>
      <view class="swiper-tab-list {{currentTab==3 ? 'on' : ''}}" data-current="3" data-otype="finish" bindtap="swichNav">已完成</view>
      <view class="swiper-tab-list {{currentTab==4 ? 'on' : ''}}" data-current="4" bindtap="swichNav">退款/售后</view>
    </view>
    <view class="c_t60"></view>
    <swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight}}px" bindchange="bindChange">
    
      <!-- 待付款 -->
      <swiper-item> 
        <view class="search_no" wx:if="{{!orderList0.length}}">
            <view class="font_14"><image class="scimg" src="/images/search_no.png"></image></view>
            <text>没有可用订单/(ㄒoㄒ)/~~</text>
        </view>
    
        <view class="shop df" wx:for="{{orderList0}}">        
            <image class="sh_slt" src="{{item.photo_x}}"></image>
            <view class="df_1">            
                <view class="sp_text">
                    <navigator url="../index/detail?productId={{item.pid}}" hover-class="changestyle">
                    <view class="sp_tit ovh1">{{item.name}}</view>
                    </navigator>
                    <view class="sp_neb">单价:¥ {{item.price_yh}} 数量:×{{item.product_num}} 产品:×{{item.pro_count}}</view>
                    <view class="sp_jg">¥:{{item.price}}</view>
                    <view class="font_12 red fl_r" bindtap="payOrderByWechat" data-orderid="{{item.id}}" data-ordersn="{{item.order_sn}}" wx:if="{{item.type=='weixin'}}">微信支付</view>
                    <!--<navigator class="font_12 red fl_r" url="../order/downline?orderId={{item.id}}" wx:if="{{item.PayType=='cash'}}">线下支付</navigator>-->
    
                    <view class="font_12 red fl_r mr_5" bindtap="removeOrder" data-order-id="{{item.id}}">取消订单</view>
                    <navigator url="../order/detail?orderId={{item.id}}" class="font_12 red fl_r mr_5">订单详情</navigator>
    
                </view>
            </view>
        </view>
        <view class="clear mt10" bindtap="getMore" wx:if="{{orderList0.length>0}}">点击查看更多</view>  
      </swiper-item>
    
      <!-- 待发货 -->
      <swiper-item>
        <view class="search_no" wx:if="{{!orderList1.length}}">
            <view class="font_14"><image class="scimg" src="/images/search_no.png"></image></view>
            <text>没有可用订单/(ㄒoㄒ)/~~</text>
        </view>
        <view class="shop df" wx:for="{{orderList1}}">
            <image class="sh_slt" src="{{item.photo_x}}"></image>
            <view class="df_1">            
                <view class="sp_text">
                    <navigator url="../index/detail?productId={{item.pid}}" hover-class="changestyle">
                        <view class="sp_tit ovh1">{{item.name}}</view>
                    </navigator>
                    <view class="sp_neb">单价:¥ {{item.price_yh}} 数量:×{{item.product_num}} 产品:×{{item.pro_count}}</view>
                    <view class="sp_jg">¥:{{item.price}}</view>
                    <navigator class="font_12 red fl_r" url="tuihuo?orderId={{item.id}}">申请退款</navigator>
                    <navigator url="../order/detail?orderId={{item.id}}" class="font_12 red fl_r mr_5">订单详情</navigator>
                </view>
            </view>
        </view>
        <view class="clear mt10" bindtap="getMore" wx:if="{{orderList1.length>0}}">点击查看更多</view> 
      </swiper-item>
    
      <!-- 待收货 -->
      <swiper-item>
            <view class="search_no" wx:if="{{!orderList2.length}}">
                <view class="font_14"><image class="scimg" src="/images/search_no.png"></image></view>
                <text>没有可用订单/(ㄒoㄒ)/~~</text>
            </view>
            <view class="shop df" wx:for="{{orderList2}}">        
            <image class="sh_slt" src="{{item.photo_x}}"></image>
            <view class="df_1">            
                <view class="sp_text">
                    <navigator url="../index/detail?productId={{item.pid}}" hover-class="changestyle">
                        <view class="sp_tit ovh1">{{item.name}}</view>
                    </navigator>
                    <view class="sp_neb">单价:¥ {{item.price_yh}} 数量:×{{item.product_num}} 产品:×{{item.pro_count}}</view>
                    <view class="sp_jg">¥:{{item.price}}</view>
                    <navigator class="font_12 red fl_r" url="tuihuo?orderId={{item.id}}">申请退款</navigator>
                    <view class="font_12 red fl_r mr_5" bindtap="recOrder" data-order-id="{{item.id}}">确认收货</view>
                    <navigator url="../order/detail?orderId={{item.id}}" class="font_12 red fl_r mr_5">订单详情</navigator>
                </view>
            </view>
        </view>
        <view class="clear mt10" bindtap="getMore" wx:if="{{orderList2.length>0}}">点击查看更多</view> 
      </swiper-item>
    
      <!-- 已完成-->
      <swiper-item>
        <view class="search_no" wx:if="{{!orderList3.length}}">
            <view class="font_14"><image class="scimg" src="/images/search_no.png"></image></view>
            <text>没有可用订单/(ㄒoㄒ)/~~</text>
        </view>
        <view class="shop df" wx:for="{{orderList3}}">   
            <image class="sh_slt" src="{{item.photo_x}}"></image>
            <view class="df_1">            
                <view class="sp_text">
                    <navigator url="../index/detail?productId={{item.pid}}" hover-class="changestyle">
                        <view class="sp_tit ovh1">{{item.name}}</view>
                    </navigator>
                    <view class="sp_neb">单价:¥ {{item.price_yh}} 数量:×{{item.product_num}} 产品:×{{item.pro_count}}</view>
                    <view class="sp_jg">¥:{{item.price}}</view>
                    <navigator url="../order/detail?orderId={{item.id}}" class="font_12 red fl_r mr_5">订单详情</navigator>
                </view>
            </view>
        </view>
        <view class="clear mt10" bindtap="getMore" wx:if="{{orderList3.length>0}}">点击查看更多</view> 
      </swiper-item>
    
      <!-- 退款/售后 -->
      <swiper-item>
        <view class="search_no" wx:if="{{!orderList4.length}}">
            <view class="font_14"><image class="scimg" src="/images/search_no.png"></image></view>
            <text>没有可用订单/(ㄒoㄒ)/~~</text>
        </view>
    
        <view class="shop df" wx:for="{{orderList4}}">
            <image class="sh_slt" src="{{item.photo_x}}"></image>
            <view class="df_1">            
                <view class="sp_text">
                    <navigator url="../index/detail?productId={{item.pid}}" hover-class="changestyle">
                        <view class="sp_tit ovh1">{{item.name}}</view>
                    </navigator>
                    <view class="sp_neb">单价:¥ {{item.price_yh}} 数量:×{{item.product_num}} 产品:×{{item.pro_count}}</view>
                    <view class="sp_jg">¥:{{item.price}}</view>
                    <view class="font_12 red fl_r">{{item.desc}}</view>
                    <!--<navigator url="../order/detail?orderId={{item.id}}" class="font_12 red fl_r mr_5">订单详情</navigator>-->
                </view>
            </view>
        </view>
        <view class="clear mt10" bindtap="getMore2" wx:if="{{orderList4.length>0}}">点击查看更多</view> 
      </swiper-item>
    </swiper>
    

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