|
@@ -0,0 +1,107 @@
|
|
|
+<template>
|
|
|
+ <view class="mta-refresh-list">
|
|
|
+ <slot></slot>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+ import {
|
|
|
+ onReachBottom,
|
|
|
+ onLoad,
|
|
|
+ onPullDownRefresh
|
|
|
+ } from "@dcloudio/uni-app"
|
|
|
+
|
|
|
+ import {
|
|
|
+ ref
|
|
|
+ } from "vue";
|
|
|
+
|
|
|
+ const props = defineProps({
|
|
|
+ refreshUrl: {
|
|
|
+ type: String,
|
|
|
+ default: '/api/admin/config'
|
|
|
+ },
|
|
|
+ options: {
|
|
|
+ type: Object,
|
|
|
+ default: () => {}
|
|
|
+ },
|
|
|
+ size: {
|
|
|
+ type: Number,
|
|
|
+ default: 10
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ const Emits = defineEmits(['pull-down-refresh', 'reach-buttom']);
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 页码
|
|
|
+ */
|
|
|
+ const page = ref(1);
|
|
|
+
|
|
|
+ /**
|
|
|
+ * @summary 将请求转换为promise
|
|
|
+ */
|
|
|
+ const transformUniRequestToPromise = (config) =>
|
|
|
+ new Promise((resolve, reject) => {
|
|
|
+ uni.request({
|
|
|
+ ...config,
|
|
|
+ success(data) {
|
|
|
+ resolve(data);
|
|
|
+ },
|
|
|
+ fail(err) {
|
|
|
+ reject(err);
|
|
|
+ },
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+
|
|
|
+ /**
|
|
|
+ * @summary 更新数据
|
|
|
+ * @param {String} action 'pull-down-refresh' | 'reach-buttom'
|
|
|
+ */
|
|
|
+ async function getData(action) {
|
|
|
+ try {
|
|
|
+ // 刷新页码重置
|
|
|
+ action === 'pull-down-refresh' && (page.value = 1);
|
|
|
+ // 触底页码 加1
|
|
|
+ action === 'reach-buttom' && (page.value++);
|
|
|
+
|
|
|
+ const opt = {
|
|
|
+ url: props.refreshUrl,
|
|
|
+ method: "POST",
|
|
|
+ data: {
|
|
|
+ page: page.value,
|
|
|
+ size: props.size,
|
|
|
+ ...props.options
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ const data = await transformUniRequestToPromise(opt)
|
|
|
+
|
|
|
+ action === 'pull-down-refresh' && (uni.stopPullDownRefresh());
|
|
|
+
|
|
|
+ Emit(action, data)
|
|
|
+ } catch (err) {
|
|
|
+ console.log('错误', err)
|
|
|
+ uni.stopPullDownRefresh()
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * @summary 下拉刷新
|
|
|
+ */
|
|
|
+ onPullDownRefresh(() => getData('pull-down-refresh'));
|
|
|
+
|
|
|
+ /**
|
|
|
+ * @summary 加载完成 首次进行下拉刷新
|
|
|
+ */
|
|
|
+ onLoad(() => uni.startPullDownRefresh());
|
|
|
+
|
|
|
+ /**
|
|
|
+ * @summary 触底更新
|
|
|
+ */
|
|
|
+ onReachBottom(() => getData('reach-buttom'));
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+
|
|
|
+</style>
|