chelvc-custom/src/pages/client/clientPackage/orderAll.vue

<template>
  <view class="container">
    <u-sticky style="margin-top: 15rpx; margin-left: 20rpx" bgColor="#fff">
      <u-tabs lineWidth="40" :list="list" :current="current" @change="handlerChangeItem" />
    </u-sticky>

    <!-- 订单 -->
    <view class="order">
      <view class="order-box">
        <view class="order-item" v-for="(item,index) of init_list" :key='index' @click="handlerSkipDetail(item)">
          <view class="order-top">
            <view class="top-left"> 订单号：{{ item.orderSn }} </view>
            <view class="top-right"> {{ type }} </view>
          </view>

          <u-line margin='20rpx 0'></u-line>

          <view class="order-center">
            <view class="center-left">
              <image class="left-img" src="@/static/QR57a.jpg"></image>
            </view>

            <view class="center-right">
              <view class="right-title">
                {{ item.goodsInfo.goodsName }}
              </view>
              <view class="right-title">
                Ceshi 111
              </view>
              <view class="right-price">
               <view class="price"> ￥{{ item.goodsInfo.goodsPrice }} </view>
               <view class="numb"> x {{ item.goodsInfo.realAmount }} </view>
              </view>
            </view>
          </view>
          <view class="u-border-bottom">
            <button @click.stop='handlerCancelOrder(item)'>取消订单</button>
          </view>
        </view>
      </view>
      <!-- <view v-else style="margin-top: 40rpx">
        <u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" />
      </view> -->
    </view>
  </view>
</template>

<script>
import { userOrdersApi , getUserOrderList , cancelOrder } from '@/api/client/order';
export default {
  data() {
    return {
      current: 0,
      type: 0,
      size: 20,
      // 订单状态：0->待付款；1->待发货；2->已发货；3->已完成；4->已关闭；5->无效订单
      list: [
        {
          name: '待付款',
          type: 0,
        },
        {
          name: '待发货',
          type: 1,
        },
        {
          name: '已发货',
          type: 2,
        },
        {
          name: '已完成',
          type: 3,
        },
        {
          name: '已关闭',
          type: 4,
        },
        {
          name: '无效订单',
          type: 5,
        },
      ],
      init_list: [],
    };
  },
  mounted() {
    this.userOrdersPage();
  },

  methods: {
    handlerChangeItem(data) {
      this.current = data.index;
      this.type = data.type;
      this.userOrdersPage(this.type);
    },

    async userOrdersPage(type) {
      let orderStatus = type == undefined ? 0 : `${type}`;
      let res = await getUserOrderList({
        status:orderStatus,
        paging: '1,20',
      });
      if ((res.code = 200 && res.data)) {
       this.init_list = res.data.records;
      }
    },

    // 跳转到订单详情
    handlerSkipDetail(e){
      console.log('@@@@e',e);
      uni.navigateTo({
        url:`/pages/client/clientPackage/orderDetail?orderList=${e}`
      })
    },
    // 取消订单
    handlerCancelOrder(e){
      cancelOrder(e.id).then(res=>{
        console.log('###res',res);
        if(res.code == 200){
          uni.showToast({
            title:'取消成功',
            icon:'none'
          })
          this.userOrdersPage(this.type)
        }else{
          console.log('###res',res);
        }
      })
    }
  },
};
</script>

<style lang="scss" scoped>
  .order{
    .order-box{
      padding: 20rpx;
      .order-item{
        border-radius: 20rpx;
        padding: 20rpx;
        margin-bottom: 20rpx;
        background-color: #fff;
        box-shadow: 5rpx 5rpx 5rpx 5rpx rgba(0, 0, 0, 0.2);
        .order-top{
          display: flex;
          justify-content: space-between;
          .top-left{
            font-size: 26rpx;
            color: #C7C7C7;
          }
          .top-right{
            font-size: 28rpx;
            color: #C54E55;
          }
        }

        .order-center{
          display: flex;
          .center-left{
            margin-right: 20rpx;
            width: 30%;
            .left-img{
              width: 200rpx;
              height: 200rpx;
              border-radius: 20rpx;
            }
          }

          .center-right{
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            width: 70%;
            .right-title{

            }
            .right-price{
              display: flex;
              justify-content: space-between;
              .price{

              }
              .numb{

              }
            }
          }
        }
      }
    }
  }
::deep .u-tabs__wrapper__nav__item__text {
  font-size: 30px;
}
</style>