webb2b/src/packages/mobile/views/order/main/index.vue

<template>
  <app-view class="order" v-model:animationend="animationend">
    <template #header>
      <app-navbar title="行情">
        <template #footer>
          <Search v-model="state.keyword" placeholder="请输入搜索关键词" shape="round" />
        </template>
      </app-navbar>
    </template>
    <app-pull-refresh v-model:loading="state.loading" v-model:dataList="state.list" :total="60" @refresh="onRefresh"
      v-if="animationend">
      <template #default="{ item }">
        <Cell :title="item" :to="{ name: 'orderDetail', params: { id: 1 } }" />
      </template>
    </app-pull-refresh>
  </app-view>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { Search, Cell } from 'vant'
import AppPullRefresh from '@mobile/components/base/pull-refresh/index.vue'

const state: {
  list: number[];
  loading: boolean;
  keyword: string;
} = reactive({
  list: [],
  loading: false,
  keyword: ''
});

const animationend = ref(false)

const onRefresh = (callback?: (data: number[]) => void) => {
  state.loading = true
  setTimeout(() => {
    const data = Array.from({ length: 20 }, (v, k) => k + 1)
    callback && callback(data)
    state.loading = false
  }, 1000);
}
</script>

<style lang="less">
@import './index.less';
</style>