personalhubs/src/views/pc/order/components/deviceOrder.vue

<script setup>
import { ref, watch, onMounted, computed } from 'vue'
import { getUserOrder } from '@/api/user'
import Paging from '@/components/pc/Paging/index.vue'
import OrderItem from './orderItem.vue'
const pageSize = ref(5)
const currentPage = ref(1)
const total = ref(0)
const list = ref([])
const maxPage = ref(0)
const showInvoice = ref(false)
const currentI = ref('')
const currentItem = ref('')
watch(()=>currentPage.value, () => {
  getList()
})
onMounted(() => {
  getList()
})
function pageChange(data) {
  console.log('pageChange', data)
  currentPage.value = data
}
async function getList() {
  window.scrollTo(0, 0)
  let params = {
    type: '',
    pageNum: currentPage.value,
    pageSize: pageSize.value
  }
  let res = await getUserOrder(params)
  console.log('getUserOrder', res)
  pageSize.value = res.pageSize
  total.value = res.total || 0
  list.value = res.list
}
</script>
<template>
  <div>
    <div v-if="total">
      <div class="order-item" v-for="(item, i) in list" :key="item.orderSn">
        <OrderItem :item="item" :i="i" />
      </div>
    </div>
    <div class="scene-nothing" v-else>
      <img :src="`${$cdn}images/nothing.png`" alt />
      <div>
        {{ $t('manage.myOrders.norecord') }}
        <a class="gotoBuy" @click="$router.push({ name: 'mallHome' })">{{
          $t('manage.gotoBuy')
        }}</a>
      </div>
    </div>
    <div class="paging" v-if="total">
      <Paging
        @clickHandle="pageChange"
        @maxPage="(data) => (maxPage = data)"
        :current="currentPage"
        :total="total"
        :equable="pageSize"
      />
    </div>
  </div>
</template>

<style lang="less" scoped>
.scene-nothing {
  text-align: center;
  padding: 42px 0 210px 0;
  img {
    padding-bottom: 22px;
    margin: 0 auto;
  }
  div {
    font-size: 16px;
    color: #969696;
  }
}
</style>