purchase-let/pagesOrder/order/order.vue

<template>
  <view>
    <up-sticky bgColor="#fff">
      <view style="padding: 10rpx 20rpx 0 20rpx;">
        <up-search shape="round" v-model="keyword" @custom="searchOn" @search="searchOn" @clear="searchOn"
          :actionStyle="{color: '#20b128'}"></up-search>
      </view>
      <up-tabs :current="tabsActive" :list="tablist" lineColor="#20b128" :scrollable="false"
        :activeStyle="	{ color: '#20b128', fontWeight: 'bold' }" @change="changeTab"></up-tabs>
    </up-sticky>

    <swiper class="swiper-box" :current="swiperCurrent" @animationfinish="animationfinish">
      <swiper-item class="swiper-item" v-for="(list, k) in orderList" :key="k">
        <scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="loadMoreGood">
          <view class="page-box">
            <view v-if="list.length>0" class="list">
              <good v-for="(item, index) in list" :datas="item" :key="index" :type="k" @cancleOrder="cancleOrder"
                @rePay="rePay"></good>
            </view>
            <view v-if="!where[k].loading&&list.length==0" style="padding-top: 100rpx;">
              <up-empty text="订单空空如也"
                icon="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/29955202404260944367594.png">
              </up-empty>
            </view>
            <view v-else-if="where[k].loadend" style="padding-top: 100rpx;">
              <view style="text-align: center;color: #999;">没有更多了</view>
            </view>
            <view v-if="where[k].loading" style="padding-top: 100rpx;display: flex;flex-direction: column;align-items: center;">
              <up-loading-icon mode="circle"></up-loading-icon>
              <view style="margin-top: 20rpx;color: #999;">加载中</view>
            </view>
            <view style="width: 100%;height: 200rpx;"></view>
          </view>
        </scroll-view>
      </swiper-item>
    </swiper>
    <orderCanclePopup :show="showCancel" @close="showCancel=false" @change="submitCancel" />
  </view>
</template>

<script setup>
  import { onLoad } from "@dcloudio/uni-app"
  import { ref } from 'vue';
  import good from "./component/good.vue";
  import orderCanclePopup from "@/components/orderCanclePopup.vue"
  import { orderListApi } from "@/api/order.js";
  import { cancelOrderApi, rePaymentApi } from "@/api/order.js"

  const tabsActive = ref(0)
  const changeTab = ({ index }) => {
    tabsActive.value = index;
    swiperCurrent.value = index;
  }
  const tablist = ref([
    { name: '全部' },
    { name: '待付款' },
    { name: '待收货' },
    // { name: '退款/售后' },
  ]);

  const swiperCurrent = ref(0);
  const animationfinish = ({ detail: { current } }) => {
    swiperCurrent.value = current;
    tabsActive.value = current;
    if (swiperCurrent.value == 0 && orderList.value[0].length == 0) getOrderList(0);
    if (swiperCurrent.value == 1 && orderList.value[1].length == 0) getOrderList(1, '', 0);
    if (swiperCurrent.value == 2 && orderList.value[2].length == 0) getOrderList(2, 0);
  }

  const showCancel = ref(false);
  let cancelId = '';
  const submitCancel = (e) => {
    showCancel.value = false;
    cancelOrderApi({
      order_id: cancelId,
      value: e.value
    }).then(res => {
      uni.showToast({
        title: '取消成功',
        icon: 'none'
      })
      orderList.value[1] = orderList.value[1].filter(item => item.id !== cancelId)
    })
  }
  const cancleOrder = (e) => {
    cancelId = e.id;
    showCancel.value = true;
  }

  const rePay = (e) => {
    rePaymentApi({
      order_id: e.id,
      pay_type: 1
    }).then(res => {
      if (!res.data?.nonceStr) return uni.$u.toast('支付失败!');
      uni.requestPayment({
        provider: 'wxpay',
        timeStamp: res.data.timeStamp,
        nonceStr: res.data.nonceStr,
        package: res.data.package,
        signType: res.data.signType,
        paySign: res.data.paySign,
        success: (e) => {
          if (e.errMsg == 'requestPayment:ok') {
            uni.showToast({
              title: '订单支付成功',
              icon: 'success'
            })
            getOrderList(1, '', 0);
          } else uni.$u.toast('支付失败')
        },
        fail: (e) => {
          uni.$u.toast('用户取消支付')
        }
      })
    }).catch(err => {
      uni.$u.toast('网络错误')
    })
  }

  // 订单
  const where = ref([{
      page_no: 1,
      page_size: 25,
      loading: false,
      loadend: false
    }, {
      page_no: 1,
      page_size: 25,
      loading: false,
      loadend: false
    },
    {
      page_no: 1,
      page_size: 25,
      loading: false,
      loadend: false
    }
  ])
  const keyword = ref('')
  const orderList = ref([
    [],
    [],
    [],
  ])
  const getOrderList = (type = 0, status = '', paid = 1) => {
    if(where.value[type].loadend) return ;
    where.value[type].loading = true;
    orderListApi({
      page_no: where.value[type].page_no,
      page_size: where.value[type].page_size,
      keyword: keyword.value,
      status: status,
      paid: paid
    }).then(res => {
      if(where.value[type].page_no==1) orderList.value[type] = [];
      orderList.value[type] = [...orderList.value[type], ...res.data.lists];
      if(res.data.lists.length<where.value[type].page_size)where.value[type].loadend = true;
      where.value[type].page_no++;
      where.value[type].loading = false;
    }).catch(err=>{
      where.value[type].loading = false;
    })
  }
  
  const loadMoreGood = ()=>{
    if (swiperCurrent.value == 0) getOrderList(0);
    if (swiperCurrent.value == 1) getOrderList(1, '', 0);
    if (swiperCurrent.value == 2) getOrderList(2, 0);
  }

  // 搜索
  const searchOn = () => {
    orderList.value[+swiperCurrent.value] = [];
    where.value[+swiperCurrent.value].page_no = 1;
    if (swiperCurrent.value == 0) getOrderList(0);
    if (swiperCurrent.value == 1) getOrderList(1, '', 0);
    if (swiperCurrent.value == 2) getOrderList(2, 0);
  }

  onLoad((options) => {
    if (options.type) {
      tabsActive.value = +options.type;
      swiperCurrent.value = +options.type;
      searchOn();
    }
    // getOrderList(0);
    // getOrderList(1, '', 0);
    // getOrderList(2, 0);

    uni.$on('reLoadOrderList', () => { //对订单进行操作时刷新页面
      where.value.forEach(item=>item.page_no=1);
      getOrderList(1, '', 0);
      getOrderList(0);
      getOrderList(2, 0);
    });
  })
</script>

<style lang="scss">
  .swiper-box {
    flex: 1;
    height: calc(100vh - var(--window-top) - 140rpx);
    /* #ifdef H5 */
    height: calc(100vh - 210rpx);
    /* #endif */
    width: 100%;

    .swiper-item {
      height: 100%;
      // background-color: pink;
    }
  }

  .page-box {
    margin: 20rpx;

    .list {}
  }
</style>