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

今天给大家带来顶部简单纯文字导航列表，制作好以后效果图如下：

一、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>

二、wxss样式文件代码如下：

page {
  background: #f6f6f6;
}

.weui-pull {
  transition: all 0.3s;
  transform: translate3d(0px, -40px, 0px);
}

.weui-pull__tips {
  text-align: center;
  font-size: 12px;
  padding: 10px;
  color: #888;
}

.weui-pull_loading {
  width: 16px;
  height: 16px;
  display: inline-block;
  vertical-align: -4px;
  -webkit-animation: loadingAnimation 1s steps(12) infinite;
  animation: loadingAnimation 1s steps(12) infinite;
  background: transparent url() no-repeat;
  background-size: 100%;
}

.weui-tab__panel {
  padding-top: 0;
  padding-bottom: 50px;
}

.bg_color {
  background-color: #f0eff5;
}

.padding-wrap {
  padding: 10px 15px;
  background: #fff;
  margin-bottom: 20rpx;
}

.items-container {
  border: 1px solid #ccc;
  border-radius: 5px;
}

.weui-media-box:before {
  border-top: 0;
}

.wx-checkbox-input {
  border-radius: 50% !important;
}

.content-color{
  background-color: #fff;
}

/*左部图片*/

.carts-image {
  width: 120rpx;
  height: 120rpx;
  display: block;
  /*border-radius: 5px;*/
  margin-right: 10px;
}

/*右上部分标题*/

.carts-title {
  margin: 10rpx;
  font-size: 30rpx;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/*价格*/

.carts-price {
  display: inline-block;
  width: 50%;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

/* 单价 */
.origin{
    font-size: 14px;
}

/*总价*/
.total {
  color: #6cf;
  text-align: right;
}

/*顶部导航栏*/

.top-nav {
  width: 750rpx;
  position: fixed;
  top: 0;
  z-index: 1;
}

.top-nav-bar {
  display: flex;
  justify-content: space-around;
  font-size: 13px;
  padding: 10px 0;
  background-color: #fff;
  border-top: 1px solid #e5e5e5;
}

.top-nav-bar .active {
  /*border-bottom: 2px solid #09bb07;*/
  border-bottom: 2px solid #b6aaec;
}

.ma-top-120 {
  margin-top: 120rpx;
}

.operate {
  text-align: right;
  border-top: 1px solid #f0f0f0;
  padding-top: 10rpx;
}

.operate .operate-item {
  font-size: 12px;
  color: #fff;
  padding: 14rpx 18rpx;
  background-color: #b6aaec;
  border-radius: 5px;
}

.operate .pay {
  margin-right: 30rpx;
}
.order_img{
  display: flex;
  flex-direction: column
}
.total{
  color: red;
}
.all-total{
  font-size: 14px;
   color: red;
   margin-right:100rpx; 
}

三、js页面代码如下：

//获取应用实例
var uctooPay = require('../../utils/uctoo-pay.js')
var app = getApp()

Page({
  data: {
    current: 0,
    orderlist:[]
  },
  onLoad:function(){
    var that=this
    var login=wx.getStorageSync('login')
    wx.request({
      url: `${app.globalData.API_URL}`+'/order',
      data: {
        id:login.mid
      },
      method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
      // header: {}, // 设置请求的 header
      success: function(res){
        // success
        console.log(res)
        that.setData({
          orderlist:res.data
        })
      },
      fail: function() {
        // fail
      },
      complete: function() {
        // complete
      }
    })
  },
  payorder:function(e){
    var orderid=e.target.dataset.id;
    wx.setStorageSync('orderid', orderid)
    uctooPay.generateOrder();
  },
  switchSlider: function (e) {
    this.setData({
      current: e.target.dataset.index
    })
  },
  changeSlider: function (e) {
    this.setData({
      current: e.detail.current
    })
  },
  delorder:function(e){
  wx.showToast({
      title: '正在取消订单，请稍候...',
      icon: 'loading',
      duration: 10000
  })
    var that=this
    console.log(e.target.dataset.id)
    wx.request({
      url: `${app.globalData.API_URL}`+'/order/'+e.target.dataset.id,
      method: 'DELETE', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
      // header: {}, // 设置请求的 header
      success: function(res){
        if(res.data==1){
           that.onLoad()
          wx.hideToast()
        }
       
      },
      fail: function() {
        // fail
      },
      complete: function() {
        // complete
      }
    })
  }
})

模板简介：该模板名称为【微信小程序我的订单详细列表样式模板制作设计下载】，大小是，文档格式为.，推荐使用打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。