yshop-pro-uniapp/pages/orderList/orderList.vue

<template>
  <uv-sticky
      bgColor="#fff"
      customNavHeight="0"
  >
    <uv-navbar
        :fixed="false"
        :title="title"
        @leftClick="goUser"
    />
    <uv-tabs
        :list="navList"
        @click="click"
        lineColor="#f56c6c"
        :current="actionType"
    >
    </uv-tabs>
  </uv-sticky>

  <view class="orderList">
    <template v-if="!listEmpty">
      <order
          :data="item"
          v-for="(item, index) in dataList"
          :key="actionType + '_' + index"
          @refresh="handleRefresh"
          @pay="openPay"
          @check-off-code="showCheckOffCode"
      />
    </template>
    <Empty
        :iconSrc="emptyOrderIcon"
        v-else
    >
      您还没有相关订单~
    </Empty>
    <!-- 加载中 -->
    <ListLoadLoading v-if="loading" />
    <!-- 加载完毕-->
    <ListLoadOver v-if="loadend" />
    <!-- 支付弹窗 -->
    <PayPopup
        ref="payPopupRef"
        @confirm="paySuccess"
    />
    <!-- 核销 -->
    <CheckOffCode ref="checkOffCodeRef" />
    <!-- 返回顶部 -->
    <ReturnTop :scroll-top="scrollTop" />
  </view>
</template>

<script setup>
import { computed, ref } from 'vue'
import { onLoad, onPageScroll, onShow } from '@dcloudio/uni-app'
import { orderList } from '@/api/order'
import { useRouter } from "@/hooks/useRouter";
import ListLoadOver from "@/components/ListLoadOver/index.vue"
import ListLoadLoading from "@/components/ListLoadLoading/index.vue"
import Empty from '@/components/Empty/index.vue'
import { emptyOrderIcon } from "@/utils/images";
import PayPopup from '@/components/PayPopup/index.vue'
import { usePage } from "@/hooks";
import ReturnTop from "@/components/ReturnTop/index.vue";
import { useScroll } from "@/hooks/useScroll";
import { usePay } from "@/hooks/usePay";
import CheckOffCode from "@/components/order/CheckOffCode.vue";


const {payPopupRef, openPay, paySuccess} = usePay()
const {scrollTop} = useScroll()
const {type, refresh, dataList, loadend, loading, listEmpty} = usePage(orderList)

const {getUrlParams, pushToTab, push} = useRouter()

const actionType = ref(0)


const navList = ref([
  {name: "全部", value: -1,},
  {name: "未支付", value: 0,},
  {name: "待成团", value: 5,},
  {name: "待发货", value: 1,},
  {name: "待收货", value: 2,},
  {name: "待评价", value: 3,},
  {name: "已完成", value: 4,},
  // { name: "退款中", value: 5, },
  // { name: "已退款", value: 6, },
  // { name: "退款", value: 7, },
])

const title = computed(() => {
  const find = navList.value.find(item => item.value === type.value);
  return find ? `${ find.name }订单` : '订单'
})


const handleRefresh = () => {
  // 确认收货
  if (actionType.value === 2) {
    actionType.value++
    type.value++
  }
  refresh()
}


const click = (data) => {
  type.value = data.value
  refresh()
}

function goUser() {
  pushToTab({url: '/root/user/user'}, {})
}

// ============================= 核销相关 ==============================
const checkOffCodeRef = ref()

/**
 * 打开核销码
 * @param writeOffCode 核销码
 */
function showCheckOffCode(writeOffCode) {
  checkOffCodeRef.value.open(writeOffCode)
}

onLoad(() => {
  const params = getUrlParams()
  type.value = params.type
  if (Number(type.value < 0)) {
    actionType.value = 0
    return
  }
  actionType.value = navList.value.findIndex(item => item.value === params.type)
})

onShow(() => {
  refresh()

})
// 返回该页面的获取数据
// uni.$on('update', function (data) {
//   console.log('update')
//   //触发更新后
//   refresh()
// })

onPageScroll((e) => {
})


</script>

<style lang="scss">
.orderList {
  padding: 20rpx 0;
}
</style>