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

Love The Way You Lie 2023-07-18 09:23 45阅读 0赞

我们先看一下效果图:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70 1][]

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

个人中心WXML

个人中心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

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

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70]: /images/20230528/35c292aecf8a4f0b9ee8bd837d679e79.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70 1]: /images/20230528/dd681f35d813400fb45c9b3bf2842265.png