微信小程序点击选项卡跳转到订单页对应列表

我们先看一下效果图:

接下来我们来看看代码吧:

个人中心WXML

<view class="order-form">
  <view class="order-cell">
    <view class="cell" bindtap="noPay">
      <image class="cell-img" src="../../../img/icon/icon-stay-payment.png"></image>
      <view>待付款</view>
    </view>
    <view class="cell" bindtap="noSend">
      <image class="cell-img" src="../../../img/icon/icon-to-send-the-goods.png"></image>
      <view>待发货</view>
    </view>
    <view class="cell" bindtap="sended">
      <image class="cell-img" src="../../../img/icon/icon-stay-take.png"></image>
      <view>待收货</view>
    </view>
    <view class="cell" bindtap="completed">
      <image class="cell-img" src="../../../img/icon/icon-stay-evaluate.png"></image>
      <view>待评价</view>
    </view>
    <!-- <view class="cell">
      <image class="cell-img" src="../../../img/icon/icon-after-sale.png"></image>
      <view>退换/售后</view>
    </view> -->
    
  </view>
  <view style="text-align:center;" bindtap="allForm">
    <image class="cell-img" src="../../../img/icon/icon-all-orders.png"></image>
    <view>全部订单</view>
    <view class="check">查看全部</view>
  </view>
</view>

个人中心WXSS

/* 订单列表 */
.order-form {
  height: 150rpx;
  padding: 20rpx;
  font-size: 30rpx;
  display: flex;
  justify-content: space-between;
  background: white;
  margin-bottom: 20rpx;
}
.order-cell {
  width: 76%;
  display: flex;
  border-right: 5px solid #efefef;
  padding-right: 20rpx; 
}
.cell-img {
  width: 50rpx;
  height: 50rpx;
  padding-bottom: 20rpx;
}
.cell {
  /* margin: 0 25.5rpx; */
  flex: 1;
  text-align: center;
}

个人中心JS

//获取应用实例
var app = getApp()
var util = require('../../../utils/util.js')
var formatLocation = util.formatLocation

Page({
  data: {
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo'),
  },
  // 指定 全部订单 和 九宫格中按钮 点击跳转至 选项卡中 与之对应的tab
  allForm: function () {
    app.globalData.currentLocation = 0,
      wx.navigateTo({ url: '../../my/my-order-list/index' })
  },
  noPay: function () {
    app.globalData.currentLocation = 1,
      wx.navigateTo({ url: '../../my/my-order-list/index' })
  },
  noSend: function () {
    app.globalData.currentLocation = 2,
      wx.navigateTo({ url: '../../my/my-order-list/index' })
  },
  sended: function () {
    app.globalData.currentLocation = 3,
      wx.navigateTo({ url: '../../my/my-order-list/index' })
  },
  completed: function () {
    app.globalData.currentLocation = 4,
      wx.navigateTo({ url: '../../my/my-order-list/index' })
  },

  //事件处理函数
  bindViewTap: function () {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function () {
    if (app.globalData.userInfo) {
      this.setData({
        userInfo: app.globalData.userInfo,
        hasUserInfo: true
      })
    } else if (this.data.canIUse) {
      // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
      // 所以此处加入 callback 以防止这种情况
      app.userInfoReadyCallback = res => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    } else {
      // 在没有 open-type=getUserInfo 版本的兼容处理
      wx.getUserInfo({
        success: res => {
          app.globalData.userInfo = res.userInfo
          this.setData({
            userInfo: res.userInfo,
            hasUserInfo: true
          })
        }
      })
    }
  },
  getUserInfo: function (e) {
    console.log(e)
    app.globalData.userInfo = e.detail.userInfo
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  },
  myOrderList: function () {
    wx.navigateTo({
      url: '../../my/my-order-list/index',
    })
  },
  
})

以上是个人中心,

接着我们开始订单页

订单页WXML

<scroll-view scroll-x="true" bindscroll="scroll" class="scroll-view_H list-liu">
  <view class="scroll-view-W">
    <view class="scroll-view-item_H swiper-tab-list {{currentTab==0?'on':''}}" data-current="0" bindtap="swichNav" hover-class="eee">全部</view>
    <view class="scroll-view-item_H swiper-tab-list {{currentTab==1?'on':''}}" data-current="1" bindtap="swichNav" hover-class="eee">待付款</view>
    <view class="scroll-view-item_H swiper-tab-list {{currentTab==2?'on':''}}" data-current="2" bindtap="swichNav" hover-class="eee">待发货</view>
    <view class="scroll-view-item_H swiper-tab-list {{currentTab==3?'on':''}}" data-current="3" bindtap="swichNav" hover-class="eee">已发货</view>
    <view class="scroll-view-item_H swiper-tab-list {{currentTab==4?'on':''}}" data-current="4" bindtap="swichNav" hover-class="eee">已完成</view>
  </view>
</scroll-view>
  
<!-- 选项卡内容 -->
<swiper current="{{currentTab}}" class="swiper-box" duration="300" bindchange="bindChange" style="height:{{clientHeight?clientHeight+'px':'auto'}}">  
    <!-- 全部订单 内容 --> 
  <swiper-item>   
    <scroll-view scroll-y="{{true}}" style="height: {{clientHeight?clientHeight+'px':'auto'}}">
      <view class="kong"></view>
      <!--写入显示内容  -->
      <view wx:if="{{carts==''}}" class="vacancy">
        <image src="../../../img/icon/icon-vacancy.png"></image>
        <view>您暂时没有相关订单</view>
      </view>
      <view wx:else>
        <view class="list" wx:for="{{carts}}" wx:key="index" data-index="{{index}}">
          <view class="shop">
            <view class="shop-left">
              <image src="../../../img/base/c5f00b6ca884f4f2c802cad6977345f.jpg"></image>
              <text>懂体验</text>
            </view>
            <view class="shop-right">
              <text class="state">已完成</text>
              <image bindtap="del" src="../../../img/icon/icon-delete.png" data-index="{{index}}"></image>
            </view>
          </view>
          <view class="pic-con">
            <!-- 图片 -->
            <view class="pic">
              <image src="{{item.imgurl}}"></image>
            </view>
            <!-- 类型表述 -->
            <view class="con">
              <text class="type1">{{item.type1}}</text>
              <text class="type2">{{item.type2}}</text>
            </view>
          </view>
          <view class="price-right">
            <!-- 价格 -->
            <view class="price">
              <text class="number">共{{item.num}}件商品</text>
              <text class="price1">实付金额:</text>
              <text>￥{{item.price}}.00</text>
            </view>
          </view>
          <view class="buy-button">
            <button id="buy-left">看相似</button>
            <button id="buy-right">再次购买</button>
          </view>
        </view>
      </view>
    </scroll-view>
  </swiper-item>  
    <!-- 待付款 内容 --> 
  <swiper-item>  
    <scroll-view scroll-y="{{true}}" style="height: {{clientHeight?clientHeight+'px':'auto'}}">
      <view class="kong"></view>
      <!--写入显示内容  -->
      <view wx:if="{{carts==''}}" class="vacancy">
        <image src="../../../img/icon/icon-vacancy.png"></image>
        <view>您暂时没有相关订单</view>
      </view>
      <view wx:else>
        <view class="list" wx:for="{{carts}}" wx:key="index">
          <view class="shop">
            <view class="shop-left">
              <image src="../../../img/base/c5f00b6ca884f4f2c802cad6977345f.jpg"></image>
              <text>懂体验</text>
            </view>
            <view class="shop-right">
              <text class="state">已完成</text>
              <image src="../../../img/icon/icon-delete.png"></image>
            </view>
          </view>
          <view class="pic-con">
            <!-- 图片 -->
            <view class="pic">
              <image src="{{item.imgurl}}"></image>
            </view>
            <!-- 类型表述 -->
            <view class="con">
              <text class="type1">{{item.type1}}</text>
              <text class="type2">{{item.type2}}</text>
            </view>
          </view>
          <view class="price-right">
            <!-- 价格 -->
            <view class="price">
              <text class="number">共{{item.num}}件商品</text>
              <text class="price1">实付金额:</text>
              <text>￥{{item.price}}.00</text>
            </view>
          </view>
          <view class="buy-button">
            <button id="buy-right">付款</button>
          </view>
        </view>
      </view>
    </scroll-view>
  </swiper-item>  
    <!-- 待发货 内容 -->
  <swiper-item>  
    <scroll-view scroll-y="{{true}}" style="height: {{clientHeight?clientHeight+'px':'auto'}}">
      <view class="kong"></view>
      <!--写入显示内容  -->
      <view wx:if="{{carts==''}}" class="vacancy">
        <image src="../../../img/icon/icon-vacancy.png"></image>
        <view>您暂时没有相关订单</view>
      </view>
      <view wx:else>
        <view class="list" wx:for="{{carts}}" wx:key="index">
          <view class="shop">
            <view class="shop-left">
              <image src="../../../img/base/c5f00b6ca884f4f2c802cad6977345f.jpg"></image>
              <text>懂体验</text>
            </view>
            <view class="shop-right">
              <text class="state">已完成</text>
              <image src="../../../img/icon/icon-delete.png"></image>
            </view>
          </view>
          <view class="pic-con">
            <!-- 图片 -->
            <view class="pic">
              <image src="{{item.imgurl}}"></image>
            </view>
            <!-- 类型表述 -->
            <view class="con">
              <text class="type1">{{item.type1}}</text>
              <text class="type2">{{item.type2}}</text>
            </view>
          </view>
          <view class="price-right">
            <!-- 价格 -->
            <view class="price">
              <text class="number">共{{item.num}}件商品</text>
              <text class="price1">实付金额:</text>
              <text>￥{{item.price}}.00</text>
            </view>
          </view>
          <view class="buy-button">
            <button id="buy-right">提醒发货</button>
          </view>
        </view>
      </view>
    </scroll-view>
  </swiper-item>  
    <!-- 已发货 内容 -->
  <swiper-item>  
    <scroll-view scroll-y="{{true}}" style="height: {{clientHeight?clientHeight+'px':'auto'}}">
      <view class="kong"></view>
      <!--写入显示内容  -->
      <view wx:if="{{carts==''}}" class="vacancy">
        <image src="../../../img/icon/icon-vacancy.png"></image>
        <view>您暂时没有相关订单</view>
      </view>
      <view wx:else>
        <view class="list" wx:for="{{carts}}" wx:key="index">
          <view class="shop">
            <view class="shop-left">
              <image src="../../../img/base/c5f00b6ca884f4f2c802cad6977345f.jpg"></image>
              <text>懂体验</text>
            </view>
            <view class="shop-right">
              <text class="state">已完成</text>
              <image src="../../../img/icon/icon-delete.png"></image>
            </view>
          </view>
          <view class="pic-con">
            <!-- 图片 -->
            <view class="pic">
              <image src="{{item.imgurl}}"></image>
            </view>
            <!-- 类型表述 -->
            <view class="con">
              <text class="type1">{{item.type1}}</text>
              <text class="type2">{{item.type2}}</text>
            </view>
          </view>
          <view class="price-right">
            <!-- 价格 -->
            <view class="price">
              <text class="number">共{{item.num}}件商品</text>
              <text class="price1">实付金额:</text>
              <text>￥{{item.price}}.00</text>
            </view>
          </view>
          <view class="buy-button">
            <button id="buy-right">已发货</button>
          </view>
        </view>
      </view>
    </scroll-view>
  </swiper-item> 
    <!-- 已完成 内容 -->
  <swiper-item>  
    <scroll-view scroll-y="{{true}}" style="height: {{clientHeight?clientHeight+'px':'auto'}}">
      <view class="kong"></view>
      <!--写入显示内容  -->
      <view wx:if="{{carts==''}}" class="vacancy">
        <image src="../../../img/icon/icon-vacancy.png"></image>
        <view>您暂时没有相关订单</view>
      </view>
      <view wx:else>
        <view class="list" wx:for="{{carts}}" wx:key="index">
          <view class="shop">
            <view class="shop-left">
              <image src="../../../img/base/c5f00b6ca884f4f2c802cad6977345f.jpg"></image>
              <text>懂体验</text>
            </view>
            <view class="shop-right">
              <text class="state">已完成</text>
              <image src="../../../img/icon/icon-delete.png"></image>
            </view>
          </view>
          <view class="pic-con">
            <!-- 图片 -->
            <view class="pic">
              <image src="{{item.imgurl}}"></image>
            </view>
            <!-- 类型表述 -->
            <view class="con">
              <text class="type1">{{item.type1}}</text>
              <text class="type2">{{item.type2}}</text>
            </view>
          </view>
          <view class="price-right">
            <!-- 价格 -->
            <view class="price">
              <text class="number">共{{item.num}}件商品</text>
              <text class="price1">实付金额:</text>
              <text>￥{{item.price}}.00</text>
            </view>
          </view>
          <view class="buy-button">
            <button id="buy-right">已完成</button>
          </view>
        </view>
      </view>
    </scroll-view>
  </swiper-item> 
</swiper>  

订单页WXSS

page {
  background: #efefef;
}

.scroll-view_H {
  font-size: 0.8rem;
  border-top: 1px solid #efefef;
  border-bottom: 1px solid #efefef;
  background: white;
}

.scroll-view-W {
  margin: 0 20rpx;
  display: flex;
  justify-content: space-between;
}

.on {
  border-bottom: 2px solid #c80611;
  color: #c80611;
}

.list-liu .swiper-tab-list {
  text-align: center;
  line-height: 85rpx;
  font-size: 34rpx;
}

.kong {
  width: 100%;
}

/*----------------------分割线-------------------  */

/*购物车 全部订单 我的收藏 浏览记录 样式  */

/* 列表 */
.vacancy {
  height: 100%;
  font-size: 30rpx;
  color: gray;
  text-align: center;
  margin-top: 45%;
}
.vacancy image {
  width: 150rpx;
  height: 150rpx;
  margin-bottom: .8rem;
}
.list {
  background: #fff;
  margin: 20rpx;
  /* display: flex; */
  box-sizing: border-box;
  padding: 10rpx 30rpx 10rpx 30rpx;
  border-bottom: 1px solid #eee;
  border-radius: 20rpx;
}

.pic-con {
  display: flex;
  align-items: center;
}

.carts-radio {
  flex: 1;
  line-height: 180rpx;
  text-align: center;
}

/* 选项框 */

.pic {
  flex: 3;
  height: 180rpx;
}

.pic image {
  width: 100%;
  height: 100%;
}

.con {
  flex: 6;
  padding-left: 20rpx;
  padding-bottom: 20rpx;
  box-sizing: border-box;
}

view, text, block {
  font-family: "Microsoft Yahei";
}

/* 类型描述 */

.type1 {
  padding-top: 10rpx;
  display: block;
  font-size: 30rpx;
  color: #323232;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.type2 {
  display: flex;
  font-size: 28rpx;
  color: #666;
  width: 100%;
  padding-top: 20rpx;
  box-sizing: border-box;
}

/* 数量 */

.num {
  width: 140rpx;
  height: 40rpx;
  border: 1px solid #eee;
  margin-top: 15rpx;
  background: #fff;
}

.num2 {
  float: left;
  width: 56rpx;
  line-height: 40rpx;
  text-align: center;
  font-size: 28rpx;
  color: #666;
}

.num1 {
  float: left;
  width: 40rpx;
  height: 40rpx;
  line-height: 40rpx;
  text-align: center;
  font-size: 36rpx;
  padding: 0;
  color: #4a4949;
  border-right: 1px solid #eee;
}

.num3 {
  float: right;
  width: 40rpx;
  height: 40rpx;
  line-height: 40rpx;
  text-align: center;
  font-size: 36rpx;
  padding: 0;
  margin: 0;
  border-radius: 0px;
  color: #4a4949;
  border-left: 1px solid #eee;
}

/* 价格 */

.price {
  width: 100%;
  font-size: 30rpx;
  text-align: right;
}
.price-right {
  height: 80rpx;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #efefef;
}
.price1 {
  color: gray;
  margin-right: 5px;
}

.number {
  color: gray;
  margin-right: 20rpx;
  font-size: 25rpx;
}

.buy-button {
  width: 100%;
  height: 100rpx;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}
.buy-button button:not([size='mini']) {
  width: 180rpx;
  height: 60rpx;
  font-size: 30rpx;
}
#buy-left, #buy-right {
  border-radius: 30rpx;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: white;
}
#buy-left {
  border: 1px solid gray;
  color: gray;
  margin-right: 20rpx;
}
#buy-right {
  border: 1px solid red;
  color: red;
}

/* 删除 */

.del {
  width: 50rpx;
  height: 50rpx;
  position: absolute;
  right: 0;
  bottom: 20rpx;
}

/*----------------------分割线-------------------  */

/**app.wxss**/

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
}

/*----------------------分割线-------------------  */

/*首页商品类样式  */

.content {
  display: flex;
  flex-wrap: wrap;
}

.content-1 {
  width: 375rpx;
  /* height: 420rpx; */
  padding: 20rpx 10rpx;
  box-sizing: border-box;
  border-bottom: 2rpx solid #ccc;
  border-right: 1rpx solid #ccc;
}

.content-1 image {
  width: 374rpx;
  height: 252rpx;
  margin-left: -8rpx;
}

.content-1 .price .text-price {
  color: #b20000;
  font-size: 32rpx;
  font-weight: bold;
}

.content-1 .price .text-yj {
  color: #656565;
  font-size: 24rpx;
}

.content-1 .price .text-oldprice {
  text-decoration: line-through;
  color: #656565;
  font-size: 24rpx;
}

.content-1 .name .text-name {
  font-size: 28rpx;
  color: #323232;
}

.content-1 .dress {
  margin-top: 10rpx;
}

.content-1 .dress .dress-1 {
  float: left;
  color: #989898;
  font-size: 24rpx;
}

.content-1 .dress .dress-2 {
  float: right;
  color: #989898;
  font-size: 24rpx;
  margin-right: 20rpx;
}

.shop {
  width: 100%;
  height: 80rpx;
  font-size: 35rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.shop-left, shop-right {
  height: 80rpx;
  display: flex;
  align-items: center;
}

.shop-right {
  color: gray;
  display: flex;
  align-items: center;
}

.shop-right text {
  font-size: 25rpx;
  align-self: center;
  padding-right: 20rpx;
  border-right: 1px solid #efefef;
}

.shop-left image {
  width: 50rpx;
  height: 50rpx;
  margin-right: 0.5rem;
  align-self: center;
}

.shop-right image {
  width: 30rpx;
  height: 30rpx;
  align-self: center;
  padding-left: 20rpx;
  border-left: 1px solid #efefef;
}

订单页js

var app = getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 选项卡
    winWidth: 0,
    winHeight: 0,
    // tab切换  
    currentTab: 0,
    // 商品内容数据
    carts: [
      { "id": 1, imgurl: '../../../img/shangpin.jpg', type1: '【老酒特卖】45℃老白汾十年陈酿500ML(2008-2009)', type2: '清香型', price: 100, num: 1 },
      { "id": 2, imgurl: '../../../img/shangpin.jpg', type1: '【老酒特卖】45℃老白汾十年陈酿500ML(2008-2009)', type2: '清香型', price: 100, num: 2 },
      { "id": 3, imgurl: '../../../img/shangpin.jpg', type1: '【老酒特卖】45℃老白汾十年陈酿500ML(2008-2009)', type2: '清香型', price: 100, num: 3 },
      { "id": 4, imgurl: '../../../img/shangpin.jpg', type1: '【老酒特卖】45℃老白汾十年陈酿500ML(2008-2009)', type2: '清香型', price: 100, num: 4 },
    ],
  },
  /** * 滑动切换tab  */
  bindChange: function (e) {
    var that = this;
    that.setData({ currentTab: e.detail.current });
  },
  /** * 点击tab切换  */
  swichNav: function (e) {
    var that = this;
    if (this.data.currentTab === e.target.dataset.current) {
      return false;
    } else {
      that.setData({
        currentTab: e.target.dataset.current
      })
    }
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;
    /** * 获取系统信息  */
    wx.getSystemInfo({
      success: function (res) {
        that.setData({
          clientHeight: res.windowHeight
        });
      }
    });
  },
  /**点击删除列表历史订单 */
  del: function(e) {
    wx.showModal({
      title: '提示',
      content: '确认删除该订单吗?',
      success: (res) => {
        if(res.confirm) {
          console.log("用户点击了确定")
          this.data.carts.splice(e.currentTarget.dataset.index, 1)
          this.setData({
            carts: this.data.carts
          })
        } else if(res.cancel) {
          console.log("用户点击了取消")
        }
      }
    })
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    if (app.globalData.currentLocation == '') {
      this.setData({
        currentTab: 0
      });
    } else {
      var i = app.globalData.currentLocation;
      this.setData({
        currentTab: i
      });
    }
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

以上是全部代码,有什么问题可以在下方留言,共同探讨

希望大家多多支持,记得关注哦,想实现什么效果,记得私信我,有时间会发布到博客哦!!!