|
|
@@ -1,20 +1,14 @@
|
|
|
<template>
|
|
|
<!-- 列表 -->
|
|
|
- <scroll-view
|
|
|
- class="scroll-view"
|
|
|
- scroll-y
|
|
|
- refresher-enabled
|
|
|
- :refresher-triggered="isRefreshing"
|
|
|
- @refresherrefresh="onRefresh"
|
|
|
- @scrolltolower="onLoadMore"
|
|
|
- :style="{ height: height }"
|
|
|
- >
|
|
|
+ <scroll-view class="scroll-view" scroll-y refresher-enabled :refresher-triggered="isRefreshing"
|
|
|
+ @refresherrefresh="onRefresh" @scrolltolower="onLoadMore" :style="{ height: height }">
|
|
|
<!-- 空状态 -->
|
|
|
<slot></slot>
|
|
|
-
|
|
|
+
|
|
|
<view v-if="!loading && !dataList.length" class="empty-state">
|
|
|
<view class="flex-d flex-a-c" style="padding-top: 25vh" v-if="slotEmpty">
|
|
|
- <image src="https://shuhi.oss-cn-qingdao.aliyuncs.com/mini/no-data.png" style="width: 100%; height: 260rpx" mode="heightFix"></image>
|
|
|
+ <image src="https://shuhi.oss-cn-qingdao.aliyuncs.com/mini/no-data.png"
|
|
|
+ style="width: 100%; height: 260rpx" mode="heightFix"></image>
|
|
|
<view class="common-title" style="padding: 33rpx 0 20rpx 0">暂无内容</view>
|
|
|
<view class="common-text" v-if="emptyText">{{ emptyText }}</view>
|
|
|
</view>
|
|
|
@@ -30,151 +24,157 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- isRefreshing: false,
|
|
|
- loading: false,
|
|
|
- page: 1,
|
|
|
- hasMore: true,
|
|
|
- dataList: [],
|
|
|
- };
|
|
|
- },
|
|
|
- props: {
|
|
|
- height: {
|
|
|
- type: String,
|
|
|
- default: "calc(100vh - 88rpx)",
|
|
|
- },
|
|
|
- bgColor: {
|
|
|
- type: String,
|
|
|
- default: "#F5F5F5",
|
|
|
- },
|
|
|
- url: {
|
|
|
- type: String,
|
|
|
- required: true,
|
|
|
- default: "/token/order/scanLogs",
|
|
|
- },
|
|
|
- pageSize: {
|
|
|
- type: Number,
|
|
|
- default: 10,
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ isRefreshing: false,
|
|
|
+ loading: false,
|
|
|
+ page: 1,
|
|
|
+ hasMore: true,
|
|
|
+ dataList: [],
|
|
|
+ };
|
|
|
},
|
|
|
- slotEmpty: {
|
|
|
- type: Boolean,
|
|
|
- default: false,
|
|
|
+ props: {
|
|
|
+ height: {
|
|
|
+ type: String,
|
|
|
+ default: "calc(100vh - 88rpx)",
|
|
|
+ },
|
|
|
+ bgColor: {
|
|
|
+ type: String,
|
|
|
+ default: "#F5F5F5",
|
|
|
+ },
|
|
|
+ url: {
|
|
|
+ type: String,
|
|
|
+ required: true,
|
|
|
+ default: "/token/order/scanLogs",
|
|
|
+ },
|
|
|
+ pageSize: {
|
|
|
+ type: Number,
|
|
|
+ default: 10,
|
|
|
+ },
|
|
|
+ slotEmpty: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false,
|
|
|
+ },
|
|
|
+ emptyText: {
|
|
|
+ type: String,
|
|
|
+ },
|
|
|
+ params: {
|
|
|
+ type: Object,
|
|
|
+ default: {},
|
|
|
+ },
|
|
|
+ method: {
|
|
|
+ type: String,
|
|
|
+ default: 'GET'
|
|
|
+ },
|
|
|
+ immediate: {
|
|
|
+ type: Boolean,
|
|
|
+ default: true,
|
|
|
+ },
|
|
|
},
|
|
|
- emptyText: {
|
|
|
- type: String,
|
|
|
- },
|
|
|
- params: {
|
|
|
- type: Object,
|
|
|
- default: {},
|
|
|
- },
|
|
|
- immediate: {
|
|
|
- type: Boolean,
|
|
|
- default: true,
|
|
|
- },
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- console.log(this.immediate, "immediate");
|
|
|
- if (this.immediate) {
|
|
|
- this.loadData(true);
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- // 加载数据
|
|
|
- async loadData(isRefresh = false, params = {}) {
|
|
|
- if (isRefresh) {
|
|
|
- this.page = 1;
|
|
|
- this.hasMore = true;
|
|
|
+ mounted() {
|
|
|
+ console.log(this.immediate, "immediate");
|
|
|
+ if (this.immediate) {
|
|
|
+ this.loadData(true);
|
|
|
}
|
|
|
- if (!this.hasMore || this.loading) return;
|
|
|
-
|
|
|
- this.loading = true;
|
|
|
- try {
|
|
|
- const res = await this.fetchBookList(params);
|
|
|
-
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 加载数据
|
|
|
+ async loadData(isRefresh = false, params = {}) {
|
|
|
if (isRefresh) {
|
|
|
- this.dataList = res.list;
|
|
|
- } else {
|
|
|
- this.dataList = [...this.dataList, ...res.list];
|
|
|
+ this.page = 1;
|
|
|
+ this.hasMore = true;
|
|
|
}
|
|
|
- this.$emit("updateList", this.dataList);
|
|
|
+ if (!this.hasMore || this.loading) return;
|
|
|
|
|
|
- this.hasMore = res.hasMore;
|
|
|
- this.page++;
|
|
|
- } catch (error) {
|
|
|
- uni.showToast({
|
|
|
- title: "加载失败",
|
|
|
- icon: "none",
|
|
|
- });
|
|
|
- } finally {
|
|
|
- this.loading = false;
|
|
|
- if (isRefresh) {
|
|
|
- this.isRefreshing = false;
|
|
|
+ this.loading = true;
|
|
|
+ try {
|
|
|
+ const res = await this.fetchBookList(params);
|
|
|
+
|
|
|
+ if (isRefresh) {
|
|
|
+ this.dataList = res.list;
|
|
|
+ } else {
|
|
|
+ this.dataList = [...this.dataList, ...res.list];
|
|
|
+ }
|
|
|
+ this.$emit("updateList", this.dataList);
|
|
|
+
|
|
|
+ this.hasMore = res.hasMore;
|
|
|
+ this.page++;
|
|
|
+ } catch (error) {
|
|
|
+ uni.showToast({
|
|
|
+ title: "加载失败",
|
|
|
+ icon: "none",
|
|
|
+ });
|
|
|
+ } finally {
|
|
|
+ this.loading = false;
|
|
|
+ if (isRefresh) {
|
|
|
+ this.isRefreshing = false;
|
|
|
+ }
|
|
|
+ // #ifdef MP-ALIPAY
|
|
|
+ my.stopPullDownRefresh()
|
|
|
+ // #endif
|
|
|
}
|
|
|
- // #ifdef MP-ALIPAY
|
|
|
- my.stopPullDownRefresh()
|
|
|
- // #endif
|
|
|
- }
|
|
|
- },
|
|
|
+ },
|
|
|
|
|
|
- // 模拟获取数据
|
|
|
- fetchBookList(params = {}) {
|
|
|
- return new Promise((resolve) => {
|
|
|
- uni.showLoading({
|
|
|
- title: "加载中...",
|
|
|
- });
|
|
|
- uni.$u.http
|
|
|
- .get(this.url, {
|
|
|
+ // 模拟获取数据
|
|
|
+ fetchBookList(params = {}) {
|
|
|
+ return new Promise((resolve) => {
|
|
|
+ uni.showLoading({
|
|
|
+ title: "加载中...",
|
|
|
+ });
|
|
|
+ const requestParams = {
|
|
|
pageSize: this.pageSize,
|
|
|
pageNum: this.page,
|
|
|
...params,
|
|
|
- })
|
|
|
- .then((res) => {
|
|
|
+ };
|
|
|
+ const requestMethod = this.method.toLowerCase();
|
|
|
+ const request = requestMethod === 'post' ? uni.$u.http.post(this.url, requestParams) : uni.$u.http.get(this.url, requestParams);
|
|
|
+
|
|
|
+ request.then((res) => {
|
|
|
resolve({
|
|
|
list: res.rows,
|
|
|
hasMore: res.rows ? (this.page * this.pageSize) < res.total : false,
|
|
|
});
|
|
|
})
|
|
|
- .finally(() => {
|
|
|
- uni.hideLoading();
|
|
|
- });
|
|
|
- });
|
|
|
- },
|
|
|
+ .finally(() => {
|
|
|
+ uni.hideLoading();
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
|
|
|
- reloadData() {
|
|
|
- this.page = 1;
|
|
|
- this.fetchBookList();
|
|
|
- },
|
|
|
+ reloadData() {
|
|
|
+ this.page = 1;
|
|
|
+ this.fetchBookList();
|
|
|
+ },
|
|
|
|
|
|
- // 下拉刷新
|
|
|
- async onRefresh() {
|
|
|
- if (this.loading) return;
|
|
|
- this.isRefreshing = true;
|
|
|
- await this.loadData(true, this.params);
|
|
|
- },
|
|
|
+ // 下拉刷新
|
|
|
+ async onRefresh() {
|
|
|
+ if (this.loading) return;
|
|
|
+ this.isRefreshing = true;
|
|
|
+ await this.loadData(true, this.params);
|
|
|
+ },
|
|
|
|
|
|
- // 上拉加载更多
|
|
|
- async onLoadMore() {
|
|
|
- if (this.loading || !this.hasMore) return;
|
|
|
- await this.loadData(false, this.params);
|
|
|
+ // 上拉加载更多
|
|
|
+ async onLoadMore() {
|
|
|
+ if (this.loading || !this.hasMore) return;
|
|
|
+ await this.loadData(false, this.params);
|
|
|
+ },
|
|
|
},
|
|
|
- },
|
|
|
-};
|
|
|
+ };
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
-.scroll-view {
|
|
|
- height: calc(100vh - 88rpx);
|
|
|
-}
|
|
|
+ .scroll-view {
|
|
|
+ height: calc(100vh - 88rpx);
|
|
|
+ }
|
|
|
|
|
|
-.load-more {
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- color: #999999;
|
|
|
- font-size: 24rpx;
|
|
|
- padding: 30rpx 0;
|
|
|
- justify-content: center;
|
|
|
- padding-bottom: 40rpx;
|
|
|
-}
|
|
|
+ .load-more {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ color: #999999;
|
|
|
+ font-size: 24rpx;
|
|
|
+ padding: 30rpx 0;
|
|
|
+ justify-content: center;
|
|
|
+ padding-bottom: 40rpx;
|
|
|
+ }
|
|
|
</style>
|